@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('themes.css');

:root {
    --crm-radius: 4px;
    --crm-radius-lg: 6px;
    --crm-sidebar-width: 220px;
    --crm-sidebar-collapsed: 64px;
    --crm-topbar-height: 52px;
}

* {
    box-sizing: border-box;
}

.crm-body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--crm-text);
    background: var(--crm-bg);
}

/* ——— Auth (Raynet-style login card) ——— */
.crm-auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--crm-auth-gradient);
}

.crm-auth-screen:not(.hidden) {
    display: flex;
}

.crm-auth-screen .crm-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-md);
    padding: 32px;
}

.crm-auth-screen .crm-auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.crm-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.crm-auth-brand__name {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--crm-text);
}

.crm-auth-brand__tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crm-accent);
}

/* ——— App shell ——— */
.crm-app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.crm-app.hidden {
    display: none;
}

.crm-app:not(.hidden) {
    display: flex;
}

.crm-app.sidebar-collapsed .crm-sidebar {
    width: var(--crm-sidebar-collapsed);
}

.crm-app.sidebar-collapsed .crm-brand-tag,
.crm-app.sidebar-collapsed .crm-nav-label,
.crm-app.sidebar-collapsed .crm-sidebar-account,
.crm-app.sidebar-collapsed .crm-sidebar-signout .crm-nav-label {
    display: none;
}

.crm-app.sidebar-collapsed .crm-sidebar-brand {
    justify-content: center;
    padding: 16px 8px;
}

.crm-app.sidebar-collapsed .crm-brand-name {
    font-size: 15px;
    letter-spacing: 0.02em;
}

.crm-app.sidebar-collapsed .crm-sidebar-toggle i {
    transform: rotate(180deg);
}

/* ——— Sidebar ——— */
.crm-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--crm-sidebar-width);
    flex-shrink: 0;
    background: var(--crm-sidebar);
    color: var(--crm-sidebar-text);
    transition: width 0.2s ease;
}

.crm-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 14px;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    min-height: 56px;
}

.crm-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-brand-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.05em;
    color: #fff;
}

.crm-brand-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--crm-accent);
}

.crm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--crm-radius);
    color: var(--crm-sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.crm-nav-item:hover {
    background: var(--crm-sidebar-hover);
    color: #fff;
}

.crm-nav-item-active {
    background: var(--crm-sidebar-active);
    color: #fff;
    border-left-color: var(--crm-accent);
}

.crm-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    opacity: 0.9;
    flex-shrink: 0;
}

.crm-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-sidebar-signout {
    margin-top: 8px;
    color: var(--crm-sidebar-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
}

.crm-sidebar-signout:hover {
    color: #fff;
    background: var(--crm-sidebar-hover);
}

.crm-sidebar-account {
    padding: 12px 14px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    font-size: 11px;
    color: var(--crm-sidebar-muted);
}

.crm-sidebar-account .crm-account-role {
    font-weight: 600;
    color: #fff;
    font-size: 12px;
}

.crm-sidebar-account .crm-account-name {
    margin-top: 4px;
    color: var(--crm-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-sidebar-toggle {
    position: absolute;
    right: -12px;
    top: 68px;
    z-index: 20;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--crm-border);
    background: var(--crm-surface);
    color: var(--crm-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: var(--crm-shadow);
    transition: color 0.15s, border-color 0.15s;
}

.crm-sidebar-toggle:hover {
    color: var(--crm-accent);
    border-color: var(--crm-accent-focus);
}

/* ——— Main / topbar / content ——— */
.crm-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--crm-bg);
}

.crm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--crm-topbar-height);
    padding: 0 20px;
    background: var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
    flex-shrink: 0;
}

.crm-topbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--crm-text);
    margin: 0;
    line-height: 1.3;
}

.crm-topbar-meta {
    font-size: 12px;
    color: var(--crm-muted);
    margin-top: 2px;
}

.crm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.crm-topbar-leading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.crm-topbar-copy {
    min-width: 0;
}

.crm-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-text);
    cursor: pointer;
}

.crm-mobile-menu-btn:hover {
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent);
}

.crm-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 125;
    background: rgb(15 23 42 / 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.crm-sidebar-backdrop.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.crm-mobile-bottom-nav {
    display: none;
}

.crm-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--crm-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.crm-mobile-nav-item i {
    font-size: 16px;
}

.crm-mobile-nav-item--active {
    color: var(--crm-accent);
}

.crm-workspace-chip {
    max-width: 220px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--crm-muted);
    background: var(--crm-bg);
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-workspace-chip strong {
    color: var(--crm-text);
    font-weight: 600;
}

.crm-bell-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.crm-bell-btn:hover {
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent);
}

.crm-content {
    flex: 1;
    overflow: auto;
}

.crm-page {
    padding: 16px 20px 24px;
}

/* ——— Raynet-like panels (override Tailwind roundness in app) ——— */
.crm-content .rounded-3xl,
.crm-content .rounded-2xl,
#modal-container .rounded-3xl,
#modal-container .rounded-2xl,
#notification-panel-container .rounded-3xl {
    border-radius: var(--crm-radius-lg) !important;
}

.crm-content .shadow,
.crm-content .shadow-sm,
.crm-content .shadow-xl,
.crm-content .shadow-2xl {
    box-shadow: var(--crm-shadow) !important;
}

.crm-content .bg-white,
#modal-container .bg-white {
    border: 1px solid var(--crm-border-light);
}

.crm-content h1.text-4xl {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.crm-content h1.text-2xl,
.crm-content h2.text-xl,
.crm-content h2.text-2xl {
    font-size: 16px;
    font-weight: 600;
}

.crm-panel {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow);
}

.crm-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.crm-stat-card {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    padding: 14px 16px;
}

.crm-stat-label {
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-stat-value {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--crm-text);
}

.crm-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--crm-radius-lg);
    border: 1px solid;
    font-size: 13px;
    line-height: 1.55;
}

.crm-alert-success {
    border-color: #b0eacb;
    background: #eefbf3;
    color: #126a45;
}

.crm-alert-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.crm-alert .crm-alert-btn {
    margin-top: 10px;
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--crm-radius);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* ——— Buttons & inputs (global in app) ——— */
.crm-content button.bg-blue-600,
.crm-content button.bg-zinc-900,
#modal-container button.bg-blue-600 {
    border-radius: var(--crm-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.crm-content input,
.crm-content select,
.crm-content textarea,
#modal-container input,
#modal-container select,
#modal-container textarea {
    border-radius: var(--crm-radius) !important;
    border-color: var(--crm-border) !important;
    background-color: var(--crm-input-bg) !important;
    color: var(--crm-text) !important;
    font-size: 13px !important;
}

.crm-content input:focus,
.crm-content select:focus,
.crm-content textarea:focus,
#modal-container input:focus,
#modal-container select:focus,
#modal-container textarea:focus {
    border-color: var(--crm-accent-focus) !important;
    box-shadow: 0 0 0 3px var(--crm-accent-ring) !important;
    outline: none !important;
}

/* ——— Timeline / kanban ——— */
body.dragging-client {
    user-select: none;
    cursor: grabbing;
}

.crm-timeline-page {
    height: calc(100vh - var(--crm-topbar-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.crm-timeline-page .crm-alert {
    margin: 12px 16px 0;
}

.crm-timeline-hero {
    flex-shrink: 0;
    margin: 16px 16px 0;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px 16px;
}

.crm-timeline-hero .crm-clients-hero__icon {
    grid-column: 1;
    grid-row: 1;
}

.crm-timeline-hero .crm-clients-hero__copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.crm-timeline-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    grid-row: 1;
    width: auto;
}

.crm-timeline-hero__actions .crm-timeline-toolbar__add {
    width: auto;
    justify-content: center;
    white-space: nowrap;
}

.crm-timeline-toolbar__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--crm-radius-md);
    background: var(--crm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}

.crm-timeline-toolbar__add:hover {
    background: var(--crm-accent-hover);
}

.crm-timeline-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(107 122 140 / 0.1) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

.crm-timeline-viewport--panning {
    cursor: grabbing;
}

.crm-timeline-zoom-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-md);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-md);
    pointer-events: auto;
}

.crm-timeline-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    color: var(--crm-muted);
    font-size: 14px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.crm-timeline-zoom-btn:hover {
    background: var(--crm-bg);
    color: var(--crm-text);
}

.crm-timeline-zoom-btn--primary {
    background: var(--crm-accent);
    border-color: var(--crm-accent);
    color: #fff;
}

.crm-timeline-zoom-btn--primary:hover {
    background: var(--crm-accent-hover);
    border-color: var(--crm-accent-hover);
    color: #fff;
}

.crm-timeline-zoom-reset {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.crm-timeline-zoom-reset:hover {
    background: var(--crm-bg);
    color: var(--crm-text);
}

[data-crm-dark='1'] .crm-timeline-zoom-controls {
    background: var(--crm-surface-elevated);
}

[data-crm-dark='1'] .crm-timeline-viewport {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.05) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

.crm-timeline-world {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    overflow: visible;
}

.crm-timeline-board {
    position: relative;
    overflow: visible;
}

.crm-timeline-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.crm-timeline-path {
    fill: none;
    stroke: var(--crm-border);
    stroke-width: 3;
    stroke-linecap: round;
}

.client-card {
    transition: box-shadow 0.15s, border-color 0.15s;
    touch-action: none;
    border-radius: var(--crm-radius-lg) !important;
    border-color: var(--crm-border-light) !important;
}

.client-card:hover {
    transform: none;
    box-shadow: var(--crm-shadow-md);
    border-color: var(--crm-border) !important;
}

.client-card.dragging {
    position: fixed;
    z-index: 1000;
    margin: 0;
    box-shadow: 0 12px 28px rgb(42 52 65 / 0.2);
    cursor: grabbing;
    pointer-events: none;
}

.client-card-placeholder {
    border: 2px dashed var(--crm-placeholder-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-accent-soft);
}

.timeline-stage {
    background: var(--crm-surface);
    border-radius: 14px;
    box-shadow: var(--crm-shadow);
    overflow: hidden;
    border: 1px solid var(--crm-border-light);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.timeline-stage--board {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 272px;
    min-height: 272px;
}

.timeline-stage--board .stage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--crm-stage-header-bg);
    border-bottom: 1px solid var(--crm-border-light);
    color: var(--crm-muted);
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.timeline-stage--board .stage-header .crm-workflow-check {
    width: 28px;
    height: 28px;
    font-size: 12px;
    flex-shrink: 0;
    cursor: default;
    pointer-events: none;
    background: var(--crm-surface);
}

.timeline-stage--board .stage-header .crm-workflow-kicker {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    text-align: center;
    background: rgb(255 255 255 / 0.55);
    color: inherit;
}

.timeline-stage--board .stage-header .crm-workflow-grip {
    flex-shrink: 0;
    color: inherit;
    opacity: 0.55;
    cursor: grab;
    padding: 4px 2px;
    touch-action: none;
}

.timeline-stage--dragging .stage-header,
.timeline-stage--board.timeline-stage--dragging {
    cursor: grabbing;
    z-index: 5;
    box-shadow: var(--crm-shadow-md);
}

.timeline-stage__body {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow: hidden auto;
    background: var(--crm-stage-column-bg);
}

.timeline-stage__body .client-card {
    flex-shrink: 0;
}

.timeline-stage__empty {
    border: 1px dashed var(--crm-border-light);
    border-radius: var(--crm-radius-md);
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--crm-muted);
    background: rgb(255 255 255 / 0.45);
}

.timeline-stage:hover {
    transform: none;
    box-shadow: var(--crm-shadow-md);
}

.timeline-stage--board.drop-target {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 2px var(--crm-drop-ring);
}

.timeline-stage--board.drop-target .stage-header {
    background: var(--crm-accent-soft);
    color: var(--crm-accent-hover);
}

.timeline-stage--board.drop-target .stage-header .crm-workflow-kicker {
    background: rgb(255 255 255 / 0.7);
    color: var(--crm-accent-hover);
}

.timeline-stage--board[data-stage-shell='volne'] .stage-header { background: #f0f2f5; color: #556274; }
.timeline-stage--board[data-stage-shell='zavolano'] .stage-header { background: #fff5f0; color: #c94816; }
.timeline-stage--board[data-stage-shell='prvni'] .stage-header,
.timeline-stage--board[data-stage-shell='druha'] .stage-header { background: #fff8f5; color: #a33b15; }
.timeline-stage--board[data-stage-shell='treti'] .stage-header { background: #f5f3ff; color: #5b4a9a; }
.timeline-stage--board[data-stage-shell='hotovo'] .stage-header { background: #eefbf3; color: #168554; }
.timeline-stage--board[data-stage-shell='jine'] .stage-header { background: #fffbeb; color: #b45309; }
.timeline-stage--board[data-stage-shell='ztraceno'] .stage-header { background: #f0f2f5; color: #6f7d8f; }

/* ——— Modals ——— */
.modal-panel {
    max-height: calc(100vh - 2rem);
    border-radius: var(--crm-radius-lg) !important;
}

#modal-container .fixed.inset-0 {
    background: var(--crm-modal-backdrop) !important;
}

#modal-container .modal-panel > div:first-child {
    background: var(--crm-surface-elevated);
    border-bottom: 1px solid var(--crm-border-light);
}

#modal-container .modal-panel {
    background: var(--crm-surface);
    color: var(--crm-text);
}

#modal-container h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.crm-client-detail-panel .crm-client-detail__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.crm-client-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--crm-border-light);
    background: linear-gradient(180deg, var(--crm-surface-elevated) 0%, var(--crm-surface) 100%);
}

.crm-client-detail__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.crm-client-detail__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent-hover);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.crm-client-detail__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-client-detail__stage {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.crm-client-detail__stage--volne { background: #f0f2f5; color: #556274; }
.crm-client-detail__stage--zavolano { background: #fff5f0; color: #c94816; }
.crm-client-detail__stage--prvni,
.crm-client-detail__stage--druha { background: #fff8f5; color: #a33b15; }
.crm-client-detail__stage--treti { background: #f5f3ff; color: #5b4a9a; }
.crm-client-detail__stage--hotovo { background: #eefbf3; color: #168554; }
.crm-client-detail__stage--jine { background: #fffbeb; color: #b45309; }
.crm-client-detail__stage--ztraceno { background: #f0f2f5; color: #6f7d8f; }

.crm-client-detail__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--crm-muted);
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

.crm-client-detail__close:hover {
    background: var(--crm-bg);
    color: var(--crm-text);
}

.crm-client-detail__body {
    padding: 24px;
}

.crm-client-detail__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.crm-client-detail__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.crm-client-detail__action:hover {
    transform: translateY(-1px);
    box-shadow: var(--crm-shadow-md);
}

.crm-client-detail__action--call {
    background: #168554;
    color: #fff;
}

.crm-client-detail__action--call:hover {
    background: #127046;
    color: #fff;
}

.crm-client-detail__action--email {
    background: var(--crm-accent);
    color: #fff;
}

.crm-client-detail__action--email:hover {
    background: var(--crm-accent-hover);
    color: #fff;
}

.crm-client-detail__action--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.crm-client-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.crm-client-detail__field {
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: 14px;
    background: var(--crm-bg);
}

.crm-client-detail__field--full {
    grid-column: 1 / -1;
}

.crm-client-detail__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-client-detail__value {
    font-size: 15px;
    line-height: 1.45;
    color: var(--crm-text);
    word-break: break-word;
}

.crm-client-detail__link {
    color: var(--crm-accent-hover);
    text-decoration: none;
}

.crm-client-detail__link:hover {
    text-decoration: underline;
}

.crm-client-detail__note {
    margin: 0;
    white-space: pre-wrap;
}

.crm-client-detail__note--empty {
    color: var(--crm-muted);
    font-style: italic;
}

.crm-client-detail__footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--crm-border-light);
}

.crm-client-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.crm-client-detail__btn--ghost {
    border: 1px solid var(--crm-border);
    background: var(--crm-surface);
    color: var(--crm-text);
}

.crm-client-detail__btn--ghost:hover {
    background: var(--crm-bg);
}

.crm-client-detail__btn--primary {
    background: var(--crm-accent);
    color: #fff;
}

.crm-client-detail__btn--primary:hover {
    background: var(--crm-accent-hover);
}

.crm-modal-backdrop {
    background: var(--crm-modal-backdrop) !important;
}

.crm-stage-modal {
    background: var(--crm-surface);
    color: var(--crm-text);
    border: 1px solid var(--crm-border-light);
    box-shadow: var(--crm-shadow-md) !important;
}

.crm-stage-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--crm-border-light);
    background: linear-gradient(180deg, var(--crm-surface-elevated) 0%, var(--crm-surface) 100%);
}

.crm-stage-modal__kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crm-accent);
}

.crm-stage-modal__title {
    margin: 0;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    color: var(--crm-text);
}

.crm-stage-modal__subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--crm-muted);
}

.crm-stage-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--crm-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.crm-stage-modal__close:hover {
    background: var(--crm-bg);
    color: var(--crm-text);
}

.crm-stage-modal__body {
    padding: 22px 24px 24px;
}

.crm-stage-modal__intro {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface-elevated);
    font-size: 13px;
    line-height: 1.55;
    color: var(--crm-muted);
}

.crm-stage-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-stage-option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-stage-option-group .crm-stage-meeting {
    margin-top: 0;
}

.crm-stage-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.crm-stage-option:hover {
    border-color: var(--crm-border);
    box-shadow: var(--crm-shadow);
}

.crm-stage-option:has(.crm-stage-option__input:checked) {
    border-color: var(--crm-accent-focus);
    background: var(--crm-accent-soft);
    box-shadow: 0 0 0 1px var(--crm-accent-ring);
}

.crm-stage-option--danger:hover,
.crm-stage-option--danger:has(.crm-stage-option__input:checked) {
    border-color: #efb4b4;
    background: #fef2f2;
}

.crm-stage-option--success:hover,
.crm-stage-option--success:has(.crm-stage-option__input:checked) {
    border-color: var(--crm-accent-focus);
    background: var(--crm-accent-soft);
}

.crm-stage-option--warning:hover,
.crm-stage-option--warning:has(.crm-stage-option__input:checked) {
    border-color: #f5d08a;
    background: #fffbeb;
}

.crm-stage-option__input {
    margin-top: 3px;
    accent-color: var(--crm-accent);
}

.crm-stage-option__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.crm-stage-option__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-stage-option__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--crm-muted);
}

.crm-stage-meeting {
    position: relative;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--crm-accent-focus);
    border-radius: var(--crm-radius-lg);
    background: linear-gradient(180deg, var(--crm-accent-soft) 0%, var(--crm-surface) 100%);
}

.crm-stage-meeting--follow-up {
    border-color: #f5d08a;
    background: linear-gradient(180deg, #fffbeb 0%, var(--crm-surface) 100%);
}

.crm-stage-meeting--follow-up .crm-stage-meeting__icon {
    color: #b45309;
    background: #fffbeb;
}

.crm-stage-meeting__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-stage-meeting__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--crm-surface);
    color: var(--crm-accent);
    font-size: 18px;
    flex-shrink: 0;
}

.crm-stage-meeting__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-stage-meeting__desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--crm-muted);
}

.crm-stage-field {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    overflow: visible;
}

.crm-stage-picker-slot {
    margin-top: 10px;
}

.crm-stage-picker-slot .flatpickr-calendar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto;
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border: 1px solid var(--crm-border-light);
}

.crm-stage-picker-slot .flatpickr-calendar.static {
    display: block;
}

.flatpickr-innerContainer,
.flatpickr-rContainer {
    background: var(--crm-surface);
}

.crm-stage-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-stage-field__input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 15px !important;
}

.crm-stage-modal__footer {
    display: flex;
    gap: 12px;
    padding: 18px 24px 24px;
    border-top: 1px solid var(--crm-border-light);
}

#modal-container .crm-stage-modal section {
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
}

#modal-container .text-zinc-900,
#modal-container .text-zinc-800 {
    color: var(--crm-text) !important;
}

#modal-container .text-zinc-700,
#modal-container .text-zinc-600,
#modal-container .text-zinc-500,
#modal-container .text-zinc-400 {
    color: var(--crm-muted) !important;
}

#modal-container .bg-zinc-50,
#modal-container .bg-zinc-100 {
    background: var(--crm-surface-elevated) !important;
}

#modal-container .border-zinc-200,
#modal-container .border-zinc-300,
#modal-container .border-zinc-100 {
    border-color: var(--crm-border-light) !important;
}

#modal-container button.border-zinc-300 {
    background: var(--crm-surface) !important;
    color: var(--crm-text) !important;
    border-color: var(--crm-border) !important;
}

#modal-container button.border-zinc-300:hover,
#modal-container .hover\:bg-zinc-50:hover {
    background: var(--crm-bg) !important;
}

#modal-container .text-emerald-600 {
    color: #168554 !important;
}

#modal-container .border-emerald-200,
#modal-container .border-blue-100 {
    border-color: var(--crm-accent-focus) !important;
}

#modal-container .bg-emerald-50,
#modal-container .bg-emerald-100,
#modal-container .from-emerald-50 {
    background: var(--crm-accent-soft) !important;
}

.client-card {
    background: var(--crm-surface);
}

.client-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-text);
}

.client-card__meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--crm-muted);
}

.client-card__tag {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.client-card__tag--accent {
    color: var(--crm-accent-hover);
}

.client-card__tag--meeting {
    color: #168554;
}

.client-card__tag--follow-up {
    color: var(--crm-accent-hover);
}

.client-card__edit {
    border: none;
    background: transparent;
    color: var(--crm-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    cursor: pointer;
}

.group:hover .client-card__edit,
.client-card__edit:focus-visible {
    opacity: 1;
}

.client-card__edit:hover {
    color: var(--crm-accent-hover);
}

[data-crm-dark='1'] .crm-stage-option--danger:hover,
[data-crm-dark='1'] .crm-stage-option--danger:has(.crm-stage-option__input:checked) {
    border-color: #7f3a3a;
    background: rgb(127 58 58 / 0.18);
}

[data-crm-dark='1'] .crm-stage-option--warning:hover,
[data-crm-dark='1'] .crm-stage-option--warning:has(.crm-stage-option__input:checked) {
    border-color: #8a6a2a;
    background: rgb(180 130 40 / 0.14);
}

[data-crm-dark='1'] .crm-stage-meeting--follow-up {
    border-color: #8a6a2a;
    background: linear-gradient(180deg, rgb(180 130 40 / 0.14) 0%, var(--crm-surface) 100%);
}

[data-crm-dark='1'] .crm-stage-meeting--follow-up .crm-stage-meeting__icon {
    color: #f5d08a;
    background: rgb(180 130 40 / 0.14);
}

[data-crm-dark='1'] .client-card__tag--meeting {
    color: #6ee7a8;
}

@media (max-width: 640px) {
    .crm-client-detail__actions,
    .crm-client-detail__grid,
    .crm-client-detail__footer,
    .crm-stage-modal__footer {
        grid-template-columns: 1fr;
    }

    .crm-stage-modal__footer {
        flex-direction: column;
    }

    .crm-client-detail__footer {
        flex-direction: column;
    }
}

/* ——— Notifications drawer ——— */
.crm-notify-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgb(35 43 53 / 0.3);
}

.crm-notify-panel {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1101;
    width: min(380px, 100vw);
    height: 100vh;
    background: var(--crm-surface);
    border-left: 1px solid var(--crm-border);
    box-shadow: -8px 0 24px rgb(42 52 65 / 0.1);
    display: flex;
    flex-direction: column;
}

.crm-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-notify-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.crm-notify-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-notify-clear-all {
    padding: 6px 10px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius);
    background: transparent;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.crm-notify-clear-all:hover {
    color: var(--crm-danger, #dc2626);
    border-color: #fecaca;
    background: #fef2f2;
}

.crm-notify-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.crm-notify-item__delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--crm-radius);
    background: transparent;
    color: var(--crm-muted);
    cursor: pointer;
}

.crm-notify-item__delete:hover {
    color: var(--crm-danger, #dc2626);
    background: rgb(220 38 38 / 0.08);
}

.crm-notify-list {
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.crm-notify-item {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
}

.crm-notify-item-unread {
    border-color: #fecaca;
    background: #fef2f2;
}

/* ——— Flatpickr ——— */
.flatpickr-calendar {
    background: var(--crm-surface);
    color: var(--crm-text);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-md);
    font-family: 'Inter', system-ui, sans-serif;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-days {
    background: var(--crm-surface);
}

.flatpickr-months .flatpickr-month {
    color: var(--crm-text);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--crm-text);
    font-weight: 600;
}

.flatpickr-weekday {
    color: var(--crm-muted);
    font-weight: 600;
}

.flatpickr-day {
    color: var(--crm-text);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--crm-surface-elevated);
    border-color: var(--crm-border);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--crm-muted);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: var(--crm-accent);
    border-color: var(--crm-accent);
    color: #fff;
}

.flatpickr-day.today {
    border-color: var(--crm-accent-focus);
}

.flatpickr-time {
    border-top: 1px solid var(--crm-border-light);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--crm-text);
    background: var(--crm-input-bg);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--crm-surface-elevated);
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--crm-muted);
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--crm-muted);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--crm-text);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--crm-accent);
}

.crm-stage-field .flatpickr-input[readonly],
.crm-stage-field__input.form-control.input {
    color: var(--crm-text);
    background: var(--crm-input-bg);
}

/* ——— Team structure ——— */
.crm-team-canvas {
    --crm-team-line: #8b97a8;
    background: var(--crm-surface);
    border-top: 1px solid var(--crm-border-light);
}

.team-structure-node-wrap {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.team-structure-node-wrap--open {
    z-index: 50;
}

.team-structure-node-wrap--open .team-structure-node {
    box-shadow:
        0 0 0 1px rgb(42 52 65 / 0.06),
        0 12px 28px rgb(42 52 65 / 0.14);
}

.team-structure-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    min-width: 220px;
    padding: 14px 16px 12px;
    border: 1px solid var(--crm-border-light);
    border-radius: 14px;
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-md);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.team-structure-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 13px 13px 0 0;
    background: var(--crm-border);
}

.team-structure-node__role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.team-structure-node__name {
    max-width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--crm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-structure-node__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
}

.team-structure-node--admin {
    border-color: #3d4d61;
    background: linear-gradient(165deg, #364152 0%, #243041 100%);
    box-shadow: 0 8px 22px rgb(36 48 65 / 0.22);
}

.team-structure-node--admin::before {
    background: linear-gradient(90deg, var(--crm-accent-focus), var(--crm-accent));
}

.team-structure-node--admin .team-structure-node__role,
.team-structure-node--admin .team-structure-node__name {
    color: #fff;
}

.team-structure-node--admin .team-structure-node__icon {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
}

.team-structure-node--director {
    border-color: var(--crm-accent-focus);
    background: linear-gradient(165deg, var(--crm-accent-soft) 0%, var(--crm-surface) 62%);
}

.team-structure-node--director::before {
    background: var(--crm-accent);
}

.team-structure-node--director .team-structure-node__role {
    color: var(--crm-accent-hover);
}

.team-structure-node--director .team-structure-node__icon {
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
}

.team-structure-node--manager {
    border-color: #93c5fd;
    background: linear-gradient(165deg, #eff6ff 0%, var(--crm-surface) 68%);
}

.team-structure-node--manager::before {
    background: #3b82f6;
}

.team-structure-node--manager .team-structure-node__role {
    color: #1d4ed8;
}

.team-structure-node--manager .team-structure-node__name {
    color: #1e3a5f;
}

.team-structure-node--manager .team-structure-node__icon {
    background: #dbeafe;
    color: #2563eb;
}

.team-structure-node--advisor {
    border-color: var(--crm-border);
    background: var(--crm-surface-elevated);
}

.team-structure-node--advisor::before {
    background: var(--crm-border);
}

.team-structure-node--advisor .team-structure-node__role {
    color: var(--crm-muted);
}

.team-structure-node--advisor .team-structure-node__icon {
    background: var(--crm-bg);
    color: var(--crm-muted);
}

.team-structure-popup-layer {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: visible;
}

.team-structure-popup-layer .team-structure-popup {
    pointer-events: auto;
}

.team-structure-node:hover {
    transform: translateY(-2px);
    box-shadow: var(--crm-shadow-md);
}

.team-structure-node--admin:hover {
    border-color: var(--crm-accent-focus);
}

.team-structure-node--director:hover {
    box-shadow:
        0 0 0 3px var(--crm-accent-ring),
        var(--crm-shadow-md);
}

.team-structure-connector-v {
    width: 2px;
    height: 48px;
    background: var(--crm-team-line);
    border-radius: 999px;
}

.team-structure-connector-v--sm {
    height: 40px;
}

.team-structure-connector-v--xs {
    height: 32px;
}

[data-crm-dark='1'] .crm-team-canvas {
    --crm-team-line: #5f6d80;
}

[data-crm-dark='1'] .team-structure-node--admin {
    border-color: #4a5d73;
    background: linear-gradient(165deg, #2f3d4f 0%, #1b2430 100%);
}

[data-crm-dark='1'] .team-structure-node--manager {
    border-color: #3b6ea8;
    background: linear-gradient(165deg, rgb(37 99 235 / 0.16) 0%, var(--crm-surface) 68%);
}

[data-crm-dark='1'] .team-structure-node--manager .team-structure-node__role {
    color: #93c5fd;
}

[data-crm-dark='1'] .team-structure-node--manager .team-structure-node__name {
    color: var(--crm-text);
}

[data-crm-dark='1'] .team-structure-node--manager .team-structure-node__icon {
    background: rgb(37 99 235 / 0.22);
    color: #93c5fd;
}

[data-crm-dark='1'] .team-structure-node--advisor {
    background: var(--crm-surface);
}

.team-structure-popup {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 300px;
    max-width: min(300px, calc(100vw - 32px));
    padding: 16px 16px 14px;
    border: 1px solid var(--crm-border-light);
    border-radius: 14px;
    background: var(--crm-surface);
    box-shadow:
        0 18px 40px rgb(42 52 65 / 0.18),
        var(--crm-shadow-md);
    overflow: hidden;
}

.team-structure-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--crm-border);
}

.team-structure-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--crm-border-light);
    border-radius: 10px;
    background: var(--crm-surface-elevated);
    color: var(--crm-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.team-structure-popup__close:hover {
    background: var(--crm-bg);
    color: var(--crm-text);
    border-color: var(--crm-border);
}

.team-structure-popup__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 36px;
}

.team-structure-popup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 16px;
}

.team-structure-popup__intro {
    min-width: 0;
    flex: 1;
}

.team-structure-popup__role {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.team-structure-popup__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--crm-text);
    overflow-wrap: anywhere;
}

.team-structure-popup__email {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--crm-muted);
    overflow-wrap: anywhere;
}

.team-structure-popup__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: var(--crm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.team-structure-popup__cta:hover {
    background: var(--crm-accent-hover);
    box-shadow: 0 8px 20px var(--crm-accent-ring);
}

.team-structure-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.team-structure-popup__actions .team-structure-popup__cta {
    margin-top: 0;
}

.team-structure-popup__cta--secondary {
    background: var(--crm-surface-elevated);
    color: var(--crm-text);
    border: 1px solid var(--crm-border-light);
    box-shadow: var(--crm-shadow);
}

.team-structure-popup__cta--secondary:hover {
    background: var(--crm-surface);
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent-hover);
    box-shadow: var(--crm-shadow-md);
}

.team-structure-popup--admin::before {
    background: linear-gradient(90deg, var(--crm-accent-focus), var(--crm-accent));
}

.team-structure-popup--admin .team-structure-popup__icon {
    background: linear-gradient(165deg, #364152 0%, #243041 100%);
    color: #fff;
}

.team-structure-popup--admin .team-structure-popup__role,
.team-structure-popup--admin .team-structure-popup__name {
    color: var(--crm-text);
}

.team-structure-popup--director::before {
    background: var(--crm-accent);
}

.team-structure-popup--director .team-structure-popup__icon {
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
}

.team-structure-popup--director .team-structure-popup__role {
    color: var(--crm-accent-hover);
}

.team-structure-popup--manager::before {
    background: #3b82f6;
}

.team-structure-popup--manager .team-structure-popup__icon {
    background: #dbeafe;
    color: #2563eb;
}

.team-structure-popup--manager .team-structure-popup__role {
    color: #1d4ed8;
}

.team-structure-popup--advisor::before {
    background: var(--crm-border);
}

.team-structure-popup--advisor .team-structure-popup__icon {
    background: var(--crm-bg);
    color: var(--crm-muted);
}

[data-crm-dark='1'] .team-structure-popup {
    background: var(--crm-surface-elevated);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

[data-crm-dark='1'] .team-structure-popup--manager .team-structure-popup__icon {
    background: rgb(37 99 235 / 0.22);
    color: #93c5fd;
}

[data-crm-dark='1'] .team-structure-popup--manager .team-structure-popup__role {
    color: #93c5fd;
}

.crm-team-structure-viewport {
    touch-action: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(107 122 140 / 0.1) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

.team-structure-board {
    min-width: 960px;
}

.team-structure-board--narrow {
    min-width: 760px;
}

[data-crm-dark='1'] .crm-team-structure-viewport {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.05) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

[data-crm-dark='1'] .crm-team-structure-viewport .crm-timeline-zoom-controls {
    background: var(--crm-surface-elevated);
}

.crm-content article[data-client-card] {
    border-radius: var(--crm-radius-lg) !important;
    box-shadow: var(--crm-shadow) !important;
}

/* ——— Save toast ——— */
#save-status-toast {
    border-radius: var(--crm-radius-lg) !important;
    font-size: 13px !important;
}

/* ——— Akcentní barva místo Tailwind blue ——— */
.crm-content .bg-blue-50,
#modal-container .bg-blue-50 {
    background-color: var(--crm-accent-soft) !important;
}

.crm-content .bg-blue-600,
#modal-container .bg-blue-600 {
    background-color: var(--crm-accent) !important;
}

.crm-content .bg-blue-700,
.crm-content .hover\:bg-blue-700:hover,
#modal-container .bg-blue-700,
#modal-container .hover\:bg-blue-700:hover {
    background-color: var(--crm-accent-hover) !important;
}

.crm-content .text-blue-600,
.crm-content .text-blue-700,
#modal-container .text-blue-600,
#modal-container .text-blue-700 {
    color: var(--crm-accent) !important;
}

.crm-content .border-blue-200,
.crm-content .hover\:border-blue-200:hover,
#modal-container .border-blue-200 {
    border-color: var(--crm-accent-focus) !important;
}

.crm-content .border-blue-300,
.crm-content .focus\:border-blue-300:focus,
.crm-content .border-blue-500,
.crm-content .focus\:border-blue-500:focus,
#modal-container .border-blue-300,
#modal-container .focus\:border-blue-300:focus,
#modal-container .border-blue-500,
#modal-container .focus\:border-blue-500:focus {
    border-color: var(--crm-accent-focus) !important;
}

.crm-content .focus\:ring-blue-50:focus,
#modal-container .focus\:ring-blue-50:focus {
    box-shadow: 0 0 0 3px var(--crm-accent-ring) !important;
}

[data-crm-theme='slate'] .crm-content button.bg-blue-600,
[data-crm-theme='slate'] #modal-container button.bg-blue-600 {
    color: #111111 !important;
}

/* ——— Tmavá pracovní plocha ——— */
[data-crm-dark='1'] .crm-content .bg-white,
[data-crm-dark='1'] #modal-container .bg-white,
[data-crm-dark='1'] .crm-panel,
[data-crm-dark='1'] .crm-stat-card,
[data-crm-dark='1'] .client-card {
    background-color: var(--crm-surface) !important;
    color: var(--crm-text);
    border-color: var(--crm-border-light) !important;
}

[data-crm-dark='1'] .crm-content .bg-zinc-50,
[data-crm-dark='1'] .crm-content .bg-zinc-100,
[data-crm-dark='1'] #modal-container .bg-zinc-50,
[data-crm-dark='1'] #modal-container .hover\:bg-zinc-50:hover {
    background-color: var(--crm-surface-elevated) !important;
}

[data-crm-dark='1'] .crm-content .text-zinc-900,
[data-crm-dark='1'] .crm-content .text-zinc-800,
[data-crm-dark='1'] #modal-container .text-zinc-900,
[data-crm-dark='1'] #modal-container .text-zinc-800,
[data-crm-dark='1'] .crm-notify-header h2 {
    color: var(--crm-text) !important;
}

[data-crm-dark='1'] .crm-content .text-zinc-700,
[data-crm-dark='1'] .crm-content .text-zinc-600,
[data-crm-dark='1'] .crm-content .text-zinc-500,
[data-crm-dark='1'] .crm-content .text-zinc-400,
[data-crm-dark='1'] #modal-container .text-zinc-700,
[data-crm-dark='1'] #modal-container .text-zinc-600,
[data-crm-dark='1'] #modal-container .text-zinc-500,
[data-crm-dark='1'] #modal-container .text-zinc-400 {
    color: var(--crm-muted) !important;
}

[data-crm-dark='1'] .crm-content .border-zinc-200,
[data-crm-dark='1'] .crm-content .border-zinc-300,
[data-crm-dark='1'] .crm-content .border-zinc-100,
[data-crm-dark='1'] .crm-content .border-dashed,
[data-crm-dark='1'] #modal-container .border-zinc-200,
[data-crm-dark='1'] #modal-container .border-zinc-300 {
    border-color: var(--crm-border-light) !important;
}

[data-crm-dark='1'] .crm-workspace-chip {
    background: var(--crm-bg);
    color: var(--crm-muted);
}

[data-crm-dark='1'] .crm-workspace-chip strong {
    color: var(--crm-text);
}

[data-crm-dark='1'] .crm-bell-btn {
    background: var(--crm-surface-elevated);
    border-color: var(--crm-border);
    color: var(--crm-muted);
}

[data-crm-dark='1'] .crm-notify-backdrop {
    background: rgb(0 0 0 / 0.55);
}

[data-crm-dark='1'] .crm-notify-item-unread {
    background: #2a1818;
    border-color: #5c3030;
}

[data-crm-dark='1'] .crm-notify-item-unread .text-zinc-900 {
    color: #fde8e8 !important;
}

[data-crm-dark='1'] .flatpickr-calendar,
[data-crm-dark='1'] .flatpickr-months .flatpickr-month,
[data-crm-dark='1'] .flatpickr-weekdays,
[data-crm-dark='1'] .flatpickr-days {
    background: var(--crm-surface);
    color: var(--crm-text);
}

[data-crm-dark='1'] .flatpickr-day {
    color: var(--crm-text);
}

[data-crm-dark='1'] .flatpickr-day:hover {
    background: var(--crm-surface-elevated);
}

[data-crm-dark='1'] .flatpickr-day.prevMonthDay,
[data-crm-dark='1'] .flatpickr-day.nextMonthDay {
    color: var(--crm-muted);
}

[data-crm-dark='1'] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-crm-dark='1'] .flatpickr-current-month input.cur-year {
    color: var(--crm-text);
}

[data-crm-dark='1'] .flatpickr-weekday {
    color: var(--crm-muted);
}

[data-crm-dark='1'] .flatpickr-time input,
[data-crm-dark='1'] .flatpickr-time .flatpickr-am-pm {
    color: var(--crm-text);
    background: var(--crm-input-bg);
}

[data-crm-dark='1'] .flatpickr-months .flatpickr-prev-month,
[data-crm-dark='1'] .flatpickr-months .flatpickr-next-month {
    fill: var(--crm-text);
}

[data-crm-dark='1'] .crm-auth-card {
    background: var(--crm-surface);
    border-color: var(--crm-border);
    color: var(--crm-text);
}

[data-crm-dark='1'] .crm-auth-card .text-zinc-900 {
    color: var(--crm-text) !important;
}

[data-crm-dark='1'] .crm-team-canvas {
    background: var(--crm-bg);
}

[data-crm-dark='1'] #modal-container label,
[data-crm-dark='1'] .crm-content label {
    color: var(--crm-muted);
}

[data-crm-dark='1'] .crm-content button.border-zinc-300,
[data-crm-dark='1'] #modal-container button.border-zinc-300 {
    background: var(--crm-surface-elevated) !important;
    color: var(--crm-text) !important;
    border-color: var(--crm-border) !important;
}

[data-crm-dark='1'] .crm-content details,
[data-crm-dark='1'] .crm-content summary {
    color: var(--crm-text);
}

[data-crm-dark='1'] .timeline-stage[data-stage-shell='volne'] .stage-header {
    background: var(--crm-stage-header-bg);
    color: var(--crm-muted);
}

[data-crm-dark='1'] .timeline-stage.drop-target .stage-header {
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
}

[data-crm-dark='1'] .timeline-stage .stage-header {
    background: var(--crm-stage-header-bg);
    color: var(--crm-muted);
}

[data-crm-dark='1'] .timeline-stage[data-stage-shell='hotovo'] .stage-header,
[data-crm-dark='1'] .timeline-stage[data-stage-shell='zavolano'] .stage-header,
[data-crm-dark='1'] .timeline-stage[data-stage-shell='prvni'] .stage-header,
[data-crm-dark='1'] .timeline-stage[data-stage-shell='druha'] .stage-header,
[data-crm-dark='1'] .timeline-stage[data-stage-shell='treti'] .stage-header {
    color: var(--crm-accent);
}

[data-crm-dark='1'] .timeline-stage--board .stage-header .crm-workflow-kicker {
    background: var(--crm-surface-elevated);
}

[data-crm-dark='1'] .crm-content .text-emerald-600,
[data-crm-dark='1'] .crm-content .text-emerald-800 {
    color: var(--crm-accent) !important;
}

[data-crm-dark='1'] .crm-content .bg-emerald-50,
[data-crm-dark='1'] .crm-content .border-emerald-200 {
    background-color: var(--crm-accent-soft) !important;
    border-color: var(--crm-border) !important;
    color: var(--crm-text) !important;
}

[data-crm-dark='1'] .crm-alert-success {
    background: var(--crm-accent-soft);
    border-color: var(--crm-border);
    color: var(--crm-text);
}

[data-crm-dark='1'] .crm-alert-warning {
    background: #2a2414;
    border-color: #5c4a2d;
    color: #fde68a;
}

/* ——— Nastavení účtu ——— */
.crm-account-settings-page {
    max-width: 760px;
    margin: 0 auto;
}

.crm-account-settings-header {
    margin-bottom: 16px;
    text-align: center;
}

.crm-account-settings-header__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-account-settings-header__desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--crm-muted);
}

.crm-account-settings-profile,
.crm-account-settings-themes {
    padding: 20px;
    margin-bottom: 16px;
}

.crm-account-settings-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--crm-border-light);
    text-align: center;
}

.crm-account-settings-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--crm-radius-lg);
    background: var(--crm-accent-soft, rgb(232 90 31 / 0.12));
    color: var(--crm-accent);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.crm-account-settings-hero__label {
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-account-settings-hero__name {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-account-settings-role {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--crm-accent-soft, rgb(232 90 31 / 0.12));
    color: var(--crm-accent);
    font-size: 12px;
    font-weight: 600;
}

.crm-account-settings-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-account-settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-account-settings-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crm-account-settings-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-text);
    font: inherit;
}

.crm-account-settings-input:focus {
    outline: none;
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 3px rgb(232 90 31 / 0.15);
}

.crm-account-settings-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--crm-muted);
}

.crm-account-settings-save {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--crm-radius);
    background: var(--crm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.crm-account-settings-save:hover {
    filter: brightness(0.95);
}

.crm-account-settings-save:disabled {
    opacity: 0.65;
    cursor: wait;
}

.crm-account-settings-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.crm-account-settings-meta-item {
    padding: 12px 14px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-bg);
}

.crm-account-settings-meta-item__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-account-settings-meta-item__value {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text);
    word-break: break-word;
}

.crm-account-settings-section-head {
    margin-bottom: 4px;
    text-align: center;
}

/* ——— Výběr stylu v nastavení ——— */
.crm-theme-settings-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-theme-settings-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--crm-muted);
}

.crm-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.crm-theme-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface-elevated);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.crm-theme-card:hover {
    border-color: var(--crm-accent-focus);
}

.crm-theme-card-active {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 1px var(--crm-accent);
}

.crm-theme-preview {
    display: block;
    height: 44px;
    border-radius: var(--crm-radius);
    border: 1px solid rgb(0 0 0 / 0.08);
}

.crm-theme-preview[data-theme-preview='raynet'] {
    background: linear-gradient(90deg, #2f3d4c 42%, #eef1f4 42%, #eef1f4 78%, #e85a1f 78%);
}

.crm-theme-preview[data-theme-preview='forest'] {
    background: linear-gradient(90deg, #080a09 42%, #0e100f 42%, #0e100f 78%, #22c55e 78%);
}

.crm-theme-preview[data-theme-preview='midnight'] {
    background: linear-gradient(90deg, #070b14 42%, #0f1419 42%, #0f1419 78%, #d4a853 78%);
}

.crm-theme-preview[data-theme-preview='nord'] {
    background: linear-gradient(90deg, #e8eef4 42%, #f0f4f8 42%, #f0f4f8 78%, #5b8def 78%);
}

.crm-theme-preview[data-theme-preview='slate'] {
    background: linear-gradient(90deg, #111 42%, #0a0a0a 42%, #0a0a0a 78%, #e2e8f0 78%);
}

.crm-theme-preview[data-theme-preview='paper'] {
    background: linear-gradient(90deg, #3d3429 42%, #f7f4ef 42%, #f7f4ef 78%, #c45c3e 78%);
}

.crm-theme-preview[data-theme-preview='raynet-light'] {
    background: linear-gradient(90deg, #fff 42%, #f5f7fa 42%, #f5f7fa 78%, #e85a1f 78%);
}

.crm-theme-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-text);
    line-height: 1.3;
}

.crm-theme-card-meta {
    font-size: 10px;
    color: var(--crm-muted);
}

/* ——— Workflow produktů ——— */
.crm-workflow-page {
    height: calc(100vh - var(--crm-topbar-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.crm-workflow-page .crm-alert {
    margin: 12px 16px 0;
}

.crm-workflow-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--crm-bg);
    border-top: 1px solid var(--crm-border-light);
}

.crm-workflow-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--crm-border-light);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-workflow-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.crm-workflow-toolbar-group--client {
    min-width: 280px;
}

.crm-workflow-client-picker {
    min-width: 280px;
    display: inline-flex;
}

.crm-workflow-client-picker__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 4px 8px 4px 4px;
    border-radius: 9px;
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-md);
    cursor: pointer;
    transition: box-shadow 0.15s, color 0.15s;
}

.crm-workflow-client-picker__pill:has(.crm-workflow-client-picker__select:focus) {
    box-shadow:
        0 0 0 3px var(--crm-accent-ring),
        var(--crm-shadow-md);
}

.crm-workflow-client-picker__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    flex-shrink: 0;
    font-size: 13px;
}

.crm-workflow-client-picker__control {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.crm-workflow-client-picker__select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--crm-text);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 28px 7px 4px;
    outline: none;
    cursor: pointer;
    appearance: none;
}

.crm-workflow-client-picker__chevron {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--crm-muted);
    font-size: 11px;
    pointer-events: none;
}

.crm-workflow-toolbar-products {
    flex: 1;
    min-width: 280px;
}

.crm-workflow-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-workflow-select {
    min-width: 240px;
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-input-bg);
    color: var(--crm-text);
    font-size: 13px;
    box-shadow: var(--crm-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.crm-workflow-select:focus {
    outline: none;
    border-color: var(--crm-accent-focus);
    box-shadow: 0 0 0 3px var(--crm-accent-ring);
}

.crm-workflow-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--crm-surface-elevated);
    border: 1px solid var(--crm-border-light);
}

.crm-workflow-product-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--crm-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.crm-workflow-product-tab:hover:not(:disabled) {
    color: var(--crm-text);
    background: var(--crm-surface);
}

.crm-workflow-product-tab-active {
    background: var(--crm-surface);
    color: var(--crm-accent-hover);
    box-shadow: var(--crm-shadow-md);
}

.crm-workflow-product-tab-active i {
    color: var(--crm-accent);
}

.crm-workflow-progress-chip {
    margin-left: auto;
}

.crm-workflow-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--crm-border-light);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--crm-surface) 0%, var(--crm-surface-elevated) 100%);
    box-shadow: var(--crm-shadow-md);
    min-width: 148px;
}

.crm-workflow-chip-complete {
    border-color: var(--crm-accent-focus);
    background: linear-gradient(135deg, var(--crm-accent-soft) 0%, var(--crm-surface) 100%);
}

.crm-workflow-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.crm-workflow-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.crm-workflow-ring-bg {
    stroke: var(--crm-border);
    stroke-width: 3;
}

.crm-workflow-ring-fill {
    stroke: var(--crm-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s ease;
}

.crm-workflow-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--crm-text);
}

.crm-workflow-chip-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crm-workflow-chip-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crm-muted);
}

.crm-workflow-chip-complete .crm-workflow-chip-title {
    color: var(--crm-accent-hover);
}

.crm-workflow-chip-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--crm-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.crm-workflow-chip-value-sep {
    margin: 0 2px;
    color: var(--crm-muted);
    font-weight: 700;
}

.crm-workflow-chip-value-suffix {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-muted);
}

.crm-workflow-chip-muted {
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-workflow-track-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-workflow-hero {
    display: grid;
    grid-template-columns: auto 1fr minmax(200px, 280px);
    align-items: center;
    gap: 18px 24px;
    padding: 20px 24px;
    background: linear-gradient(180deg, var(--crm-surface) 0%, var(--crm-bg) 100%);
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-workflow-hero--complete {
    background: linear-gradient(180deg, var(--crm-accent-soft) 0%, var(--crm-bg) 100%);
}

.crm-workflow-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-size: 22px;
    box-shadow: inset 0 0 0 1px var(--crm-accent-ring);
}

.crm-workflow-hero--complete .crm-workflow-hero-icon {
    background: var(--crm-accent);
    color: #fff;
    box-shadow: 0 8px 20px var(--crm-accent-ring);
}

.crm-workflow-hero-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-workflow-hero-title {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--crm-text);
    line-height: 1.2;
}

.crm-workflow-hero-desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--crm-muted);
    line-height: 1.45;
}

.crm-workflow-hero-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-workflow-hero-progress-meta strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--crm-accent-hover);
    letter-spacing: -0.02em;
}

.crm-workflow-hero-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--crm-border-light);
    overflow: hidden;
}

.crm-workflow-hero-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--crm-accent-focus), var(--crm-accent));
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px var(--crm-accent-ring);
}

.crm-workflow-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 12px 16px 16px;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(107 122 140 / 0.1) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

.crm-workflow-viewport--panning {
    cursor: grabbing;
}

[data-crm-dark='1'] .crm-workflow-viewport {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--crm-accent-ring), transparent 55%),
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.05) 1px, transparent 0) 0 0 / 20px 20px,
        var(--crm-bg);
}

[data-crm-dark='1'] .crm-workflow-viewport .crm-timeline-zoom-controls {
    background: var(--crm-surface-elevated);
}

.crm-workflow-world {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    overflow: visible;
}

.crm-workflow-board {
    position: relative;
    overflow: visible;
}

.crm-workflow-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.crm-workflow-path {
    fill: none;
    stroke: var(--crm-border);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.25s ease;
}

.crm-workflow-path--filled {
    stroke: var(--crm-accent);
    stroke-width: 3.5;
    filter: drop-shadow(0 0 4px var(--crm-accent-ring));
}

.crm-workflow-boxes {
    position: relative;
    z-index: 2;
    min-height: 100%;
}

.crm-workflow-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 220px;
    height: 156px;
    box-sizing: border-box;
    padding: 12px 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-md);
    cursor: grab;
    touch-action: none;
    user-select: none;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.crm-workflow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: var(--crm-border-light);
}

.crm-workflow-box:hover {
    box-shadow: 0 10px 28px rgb(42 52 65 / 0.14);
}

.crm-workflow-box--dragging {
    cursor: grabbing;
    z-index: 40;
    transform: scale(1.02);
    box-shadow: 0 16px 36px var(--crm-drop-ring);
    border-color: var(--crm-accent-focus);
}

.crm-workflow-box--active {
    border-color: var(--crm-accent-focus);
    box-shadow:
        0 0 0 3px var(--crm-accent-ring),
        var(--crm-shadow-md);
}

.crm-workflow-box--active::before {
    background: linear-gradient(90deg, var(--crm-accent-focus), var(--crm-accent));
}

.crm-workflow-box--done {
    border-color: var(--crm-accent-focus);
    background: linear-gradient(165deg, var(--crm-accent-soft) 0%, var(--crm-surface) 55%);
}

.crm-workflow-box--done::before {
    background: var(--crm-accent);
}

.crm-workflow-box--pending {
    opacity: 0.92;
}

.crm-workflow-box-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.crm-workflow-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 2px solid var(--crm-border);
    border-radius: 50%;
    background: var(--crm-surface-elevated);
    color: var(--crm-muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 3;
    transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}

.crm-workflow-check:hover:not(:disabled) {
    transform: scale(1.08);
    border-color: var(--crm-accent-focus);
}

.crm-workflow-check--done {
    border-color: var(--crm-accent);
    background: linear-gradient(145deg, var(--crm-accent), var(--crm-accent-hover));
    color: #fff;
}

.crm-workflow-check:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.crm-workflow-kicker {
    flex: 1;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--crm-surface-elevated);
    color: var(--crm-muted);
    text-align: center;
}

.crm-workflow-box--active .crm-workflow-kicker {
    background: var(--crm-accent-soft);
    color: var(--crm-accent-hover);
}

.crm-workflow-box--done .crm-workflow-kicker {
    background: var(--crm-accent);
    color: #fff;
}

.crm-workflow-grip {
    color: var(--crm-muted);
    font-size: 12px;
    opacity: 0.55;
    cursor: grab;
    padding: 4px 2px;
    touch-action: none;
}

.crm-workflow-box-title {
    margin: 0;
    flex: 1;
    min-height: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--crm-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-workflow-box-hint {
    margin: 6px 0 0;
    flex-shrink: 0;
    height: 48px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--crm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-workflow-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px;
    text-align: center;
    color: var(--crm-muted);
    font-size: 14px;
}

.crm-workflow-empty i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 26px;
    color: var(--crm-accent);
    background: var(--crm-accent-soft);
    opacity: 1;
}

/* ——— Sekce Klienti / Moji klienti ——— */
.crm-clients-page {
    max-width: 100%;
}

.crm-clients-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: linear-gradient(135deg, var(--crm-surface) 0%, var(--crm-surface-elevated) 100%);
    box-shadow: var(--crm-shadow-md);
}

.crm-clients-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-size: 20px;
}

.crm-clients-hero__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--crm-text);
}

.crm-clients-hero__desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--crm-muted);
}

.crm-clients-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 14px;
    border-radius: var(--crm-radius-lg);
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface);
    min-width: 100px;
}

.crm-clients-hero__stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-clients-hero__stat-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--crm-accent-hover);
    letter-spacing: -0.03em;
}

.crm-clients-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-clients-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.crm-clients-field--grow {
    flex: 1;
    min-width: 220px;
}

.crm-clients-field__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-clients-field__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-input-bg);
}

.crm-clients-field__input-wrap i {
    color: var(--crm-muted);
    font-size: 13px;
}

.crm-clients-input,
.crm-clients-select {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--crm-text);
    font-size: 13px;
    padding: 10px 0;
    outline: none;
}

.crm-clients-select {
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-input-bg);
}

.crm-clients-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-clients-empty,
.crm-clients-empty-filter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--crm-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
}

.crm-clients-empty-filter {
    flex-direction: row;
    padding: 20px;
    font-size: 13px;
    color: var(--crm-muted);
}

.crm-clients-empty-filter.hidden {
    display: none;
}

.crm-clients-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-size: 22px;
}

.crm-clients-empty h2 {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-clients-empty p {
    margin: 0;
    font-size: 13px;
    color: var(--crm-muted);
    max-width: 360px;
}

.crm-clients-empty--error .crm-clients-empty__icon {
    background: #fef2f2;
    color: #dc2626;
}

.crm-clients-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.crm-clients-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: var(--crm-radius);
    background: var(--crm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--crm-shadow-md);
    transition: background 0.15s, transform 0.15s;
}

.crm-clients-load-more:hover:not(:disabled) {
    background: var(--crm-accent-hover);
    transform: translateY(-1px);
}

.crm-clients-load-more:disabled {
    opacity: 0.65;
    cursor: wait;
}

.crm-clients-load-more.hidden {
    display: none;
}

/* Řádek klienta */
.crm-client-row {
    position: relative;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.crm-client-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--crm-border);
}

.crm-client-row--stage-volne::before { background: #0ea5e9; }
.crm-client-row--stage-zavolano::before { background: #f59e0b; }
.crm-client-row--stage-prvni::before { background: #8b5cf6; }
.crm-client-row--stage-druha::before { background: #ec4899; }
.crm-client-row--stage-treti::before { background: #f97316; }
.crm-client-row--stage-hotovo::before { background: #22c55e; }
.crm-client-row--stage-jine::before { background: #94a3b8; }
.crm-client-row--stage-ztraceno::before { background: #ef4444; }

.crm-client-row:hover {
    box-shadow: var(--crm-shadow-md);
}

.crm-client-row--expandable:has(.crm-client-row__details[open]) {
    border-color: var(--crm-accent-focus);
    box-shadow: 0 6px 20px var(--crm-drop-ring);
}

.crm-client-row--free {
    background: var(--crm-surface);
    border-color: rgb(34 197 94 / 0.28);
}

.crm-client-row--free::before {
    background: #22c55e;
}

.crm-client-row--locked {
    background: var(--crm-surface);
    border-color: rgb(239 68 68 / 0.28);
}

.crm-client-row--locked::before {
    background: #ef4444;
}

.crm-client-row--locked:hover {
    border-color: #f87171;
    box-shadow: 0 4px 16px rgb(239 68 68 / 0.12);
}

.crm-client-row__details {
    margin: 0;
}

.crm-client-row__head {
    display: flex;
    align-items: center;
    gap: 14px 20px;
    padding: 12px 16px 12px 18px;
    list-style: none;
    cursor: default;
}

.crm-client-row--expandable .crm-client-row__head {
    cursor: pointer;
}

.crm-client-row__head::-webkit-details-marker {
    display: none;
}

.crm-client-row__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent-hover);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.crm-client-row__avatar--free {
    background: #dcfce7;
    color: #15803d;
}

.crm-client-row__avatar--locked {
    background: #fee2e2;
    color: #dc2626;
    font-size: 15px;
}

.crm-client-row__identity {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-client-row__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--crm-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-client-row__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.crm-client-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
    min-width: 0;
    flex: 0 1 auto;
}

.crm-client-row__meta--empty {
    display: none;
}

.crm-client-row__aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.crm-client-stage-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--crm-accent-soft);
    color: var(--crm-accent-hover);
}

.crm-client-stage-badge--volne { background: #e0f2fe; color: #0369a1; }
.crm-client-stage-badge--zavolano { background: #fef3c7; color: #b45309; }
.crm-client-stage-badge--prvni { background: #ede9fe; color: #6d28d9; }
.crm-client-stage-badge--druha { background: #fce7f3; color: #be185d; }
.crm-client-stage-badge--treti { background: #ffedd5; color: #c2410c; }
.crm-client-stage-badge--hotovo { background: #dcfce7; color: #15803d; }
.crm-client-stage-badge--jine { background: var(--crm-surface-elevated); color: var(--crm-muted); }
.crm-client-stage-badge--ztraceno { background: #fee2e2; color: #b91c1c; }

.crm-client-access-badge {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.crm-client-access-badge--free {
    background: #dcfce7;
    color: #15803d;
}

.crm-client-access-badge--locked {
    background: #fee2e2;
    color: #b91c1c;
}

.crm-client-access-badge--claimed {
    background: #dbeafe;
    color: #1d4ed8;
}

.crm-client-row--simple-badges .crm-client-access-badge {
    padding: 4px 11px;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.crm-client-row--claimed {
    background: var(--crm-surface);
    border-color: rgb(37 99 235 / 0.24);
}

.crm-client-row--claimed::before {
    background: #2563eb;
}

.crm-client-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface-elevated);
    font-size: 11px;
    color: var(--crm-muted);
}

.crm-client-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-client-chip i {
    flex-shrink: 0;
    font-size: 10px;
    opacity: 0.75;
}

.crm-client-chip--muted {
    border-style: dashed;
}

.crm-client-row__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--crm-radius);
    background: var(--crm-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.crm-client-row__cta:hover {
    background: var(--crm-accent-hover);
}

.crm-client-row__cta--secondary {
    background: var(--crm-surface-elevated);
    border: 1px solid var(--crm-border-light);
    color: var(--crm-text);
}

.crm-client-row__cta--secondary:hover {
    background: var(--crm-accent-soft);
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent-hover);
}

.crm-transfer-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.crm-transfer-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.42);
}

.crm-transfer-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(520px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    border: 1px solid var(--crm-border-light);
    border-radius: 18px;
    background: var(--crm-surface);
    box-shadow: 0 24px 48px rgb(42 52 65 / 0.18);
    overflow: hidden;
}

.crm-transfer-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-transfer-modal__header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-transfer-modal__header p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--crm-muted);
}

.crm-transfer-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--crm-border-light);
    border-radius: 10px;
    background: var(--crm-surface-elevated);
    color: var(--crm-muted);
    cursor: pointer;
}

.crm-transfer-modal__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px;
    overflow: auto;
}

.crm-transfer-modal__state {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--crm-muted);
}

.crm-transfer-recipient {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: 14px;
    background: var(--crm-surface-elevated);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.crm-transfer-recipient:hover {
    border-color: var(--crm-accent-focus);
    box-shadow: 0 0 0 3px var(--crm-accent-ring);
    transform: translateY(-1px);
}

.crm-transfer-recipient__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    flex-shrink: 0;
}

.crm-transfer-recipient__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.crm-transfer-recipient__copy strong {
    font-size: 14px;
    color: var(--crm-text);
}

.crm-transfer-recipient__copy span {
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-transfer-recipient__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-transfer-recipient__arrow {
    color: var(--crm-accent);
    flex-shrink: 0;
}

.crm-client-row__hint {
    padding: 8px 12px;
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-light);
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-muted);
    white-space: nowrap;
}

.crm-client-row--locked .crm-client-row__hint {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.crm-client-row--locked .crm-client-chip {
    border-color: #fecaca;
    background: #fff5f5;
    color: #991b1b;
}

[data-crm-dark='1'] .crm-client-row--locked {
    background: var(--crm-surface);
    border-color: rgb(248 113 113 / 0.45);
}

[data-crm-dark='1'] .crm-client-row--free {
    background: var(--crm-surface);
    border-color: rgb(74 222 128 / 0.28);
}

[data-crm-dark='1'] .crm-client-row--claimed {
    background: var(--crm-surface);
    border-color: rgb(96 165 250 / 0.28);
}

[data-crm-dark='1'] .crm-client-row--locked .crm-client-row__avatar--locked {
    background: rgb(127 29 29 / 0.5);
    color: #fca5a5;
}

[data-crm-dark='1'] .crm-client-access-badge--locked,
[data-crm-dark='1'] .crm-client-row--locked .crm-client-row__hint {
    background: rgb(127 29 29 / 0.4);
    border-color: rgb(248 113 113 / 0.35);
    color: #fca5a5;
}

[data-crm-dark='1'] .crm-client-row--locked .crm-client-chip {
    background: rgb(127 29 29 / 0.35);
    border-color: rgb(248 113 113 / 0.3);
    color: #fecaca;
}

.crm-client-row__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 8px;
    background: var(--crm-surface-elevated);
    border: 1px solid var(--crm-border-light);
    color: var(--crm-muted);
    transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}

.crm-client-row__details[open] .crm-client-row__toggle {
    transform: rotate(180deg);
    background: var(--crm-accent-soft);
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent);
}

.crm-client-row__body {
    padding: 0;
    border-top: 1px solid var(--crm-border-light);
    background: var(--crm-bg);
}

.crm-client-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    width: 100%;
}

.crm-client-category {
    width: 100%;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    overflow: hidden;
    box-shadow: var(--crm-shadow);
}

.crm-client-category__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--crm-surface-elevated);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

.crm-client-category__summary::-webkit-details-marker {
    display: none;
}

.crm-client-category__summary::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--crm-muted);
    border-bottom: 2px solid var(--crm-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.crm-client-category[open] .crm-client-category__summary {
    border-bottom-color: var(--crm-border-light);
}

.crm-client-category[open] .crm-client-category__summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.crm-client-category__summary:hover {
    background: var(--crm-surface);
}

.crm-client-category__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-size: 13px;
    flex-shrink: 0;
}

.crm-client-category__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
    min-width: 0;
}

.crm-client-category__body {
    padding: 14px;
    width: 100%;
}

.crm-first-meeting-section__heading,
.crm-first-meeting-subsection__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-first-meeting-section__desc,
.crm-first-meeting-subsection__desc {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--crm-muted);
}

.crm-first-meeting-subsection {
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface-elevated);
    overflow: hidden;
}

.crm-first-meeting-subsection__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--crm-surface);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

.crm-first-meeting-subsection__summary::-webkit-details-marker {
    display: none;
}

.crm-first-meeting-subsection__summary::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid var(--crm-muted);
    border-bottom: 2px solid var(--crm-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.crm-first-meeting-subsection[open] .crm-first-meeting-subsection__summary {
    border-bottom-color: var(--crm-border-light);
}

.crm-first-meeting-subsection[open] .crm-first-meeting-subsection__summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.crm-first-meeting-subsection__summary:hover {
    background: var(--crm-surface-elevated);
}

.crm-first-meeting-subsection__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--crm-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.crm-first-meeting-subsection__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-first-meeting-subsection__body {
    padding: 14px;
}

#modal-container .crm-first-meeting-section .crm-client-category__body {
    padding: 16px;
}

.crm-first-meeting-documents-panel {
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface-elevated);
    padding: 16px;
}

.crm-first-meeting-documents-panel__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .crm-first-meeting-documents-panel__head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.crm-first-meeting-documents-panel__hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--crm-muted);
}

.crm-first-meeting-documents-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crm-first-meeting-doc-row {
    display: grid;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-first-meeting-doc-row__field {
    min-width: 0;
}

.crm-first-meeting-doc-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 768px) {
    .crm-first-meeting-doc-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "name file actions"
            "status status actions";
        align-items: end;
    }

    .crm-first-meeting-doc-row__field--name {
        grid-area: name;
    }

    .crm-first-meeting-doc-row__field--file {
        grid-area: file;
    }

    .crm-first-meeting-doc-row__actions {
        grid-area: actions;
    }

    .crm-first-meeting-doc-row__status {
        grid-area: status;
    }
}

.crm-first-meeting-doc-row__actions {
    display: flex;
    align-items: flex-end;
}

.crm-first-meeting-doc-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--crm-text);
}

.crm-first-meeting-doc-input,
.crm-first-meeting-doc-file {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-input-bg);
    color: var(--crm-text);
    padding: 12px 16px;
    font-size: 14px;
}

.crm-first-meeting-doc-input:focus,
.crm-first-meeting-doc-file:focus {
    outline: none;
    border-color: var(--crm-accent-focus);
    box-shadow: 0 0 0 3px var(--crm-accent-ring);
}

.crm-first-meeting-doc-file {
    border-style: dashed;
    overflow: hidden;
}

.crm-first-meeting-doc-row__status,
.crm-first-meeting-doc-status {
    margin-top: 0;
    font-size: 14px;
    color: var(--crm-muted);
    min-width: 0;
}

.crm-first-meeting-doc-row__status > div,
.crm-first-meeting-doc-status > div {
    min-width: 0;
}

.crm-first-meeting-doc-file::file-selector-button {
    margin-right: 12px;
    border: none;
    border-radius: 8px;
    background: var(--crm-accent);
    color: #fff;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.crm-first-meeting-doc-file::file-selector-button:hover {
    background: var(--crm-accent-hover);
}

[data-crm-theme='slate'] .crm-first-meeting-doc-file::file-selector-button {
    color: #111;
}

.crm-first-meeting-doc-btn {
    width: 100%;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    color: var(--crm-text);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.crm-first-meeting-doc-btn:hover {
    background: var(--crm-surface-elevated);
    border-color: var(--crm-border);
}

@media (min-width: 768px) {
    .crm-first-meeting-doc-btn {
        width: auto;
        flex-shrink: 0;
    }
}

.crm-first-meeting-documents-panel__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-second-meeting-highlight {
    border: 1px solid var(--crm-accent-focus);
    border-radius: var(--crm-radius-lg);
    background: linear-gradient(180deg, var(--crm-accent-soft) 0%, var(--crm-surface) 100%);
    padding: 24px;
}

.crm-second-meeting-highlight__divider {
    border-top: 1px solid var(--crm-border-light);
}

.crm-second-meeting-section {
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    padding: 24px;
}

.crm-second-meeting-upload-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

@media (min-width: 768px) {
    .crm-second-meeting-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.crm-second-meeting-upload-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
}

.crm-second-meeting-upload-card .crm-first-meeting-doc-file {
    flex-shrink: 0;
}

.crm-second-meeting-upload-card .crm-first-meeting-doc-status {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-top: 12px;
}

.crm-second-meeting-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-accent);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.crm-second-meeting-link:hover {
    color: var(--crm-accent-hover);
}

.crm-meeting-form-textarea {
    width: 100%;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-input-bg);
    color: var(--crm-text);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.crm-meeting-form-textarea:focus {
    outline: none;
    border-color: var(--crm-accent-focus);
    box-shadow: 0 0 0 3px var(--crm-accent-ring);
}

.crm-alert-info {
    border-color: var(--crm-accent-focus);
    background: var(--crm-accent-soft);
    color: var(--crm-text);
}

.crm-alert-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

[data-crm-dark='1'] .crm-alert-error {
    border-color: #7f3a3a;
    background: rgb(127 58 58 / 0.18);
    color: #fca5a5;
}

.crm-first-meeting-documents-panel__head--actions-only {
    justify-content: flex-end;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .crm-first-meeting-documents-panel__head:not(.crm-first-meeting-documents-panel__head--actions-only) {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.crm-child-row {
    display: grid;
    gap: 12px;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) 120px auto;
}

.crm-child-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 767px) {
    .crm-child-row {
        grid-template-columns: 1fr;
    }

    .crm-child-row__actions {
        width: 100%;
    }

    .crm-child-row__actions .crm-first-meeting-doc-btn,
    .crm-child-row__actions .crm-first-meeting-doc-remove {
        width: 100%;
    }
}

.crm-first-meeting-doc-remove {
    border: 1px solid #fecaca;
    border-radius: var(--crm-radius-lg);
    background: transparent;
    color: #dc2626;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.crm-first-meeting-doc-remove:hover {
    background: #fef2f2;
}

[data-crm-dark='1'] .crm-first-meeting-doc-remove {
    border-color: #7f3a3a;
    color: #fca5a5;
}

[data-crm-dark='1'] .crm-first-meeting-doc-remove:hover {
    background: rgb(127 58 58 / 0.18);
}

.crm-client-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .crm-client-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.crm-client-kpi {
    padding: 12px 14px;
    border-radius: var(--crm-radius);
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface-elevated);
}

.crm-client-kpi__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-client-kpi__value {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
    line-height: 1.3;
}

.crm-client-subsection + .crm-client-subsection {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--crm-border-light);
}

.crm-client-subsection__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--crm-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.crm-client-category__body .crm-client-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crm-client-field {
    display: grid;
    grid-template-columns: minmax(120px, 28%) 1fr;
    gap: 8px 14px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--crm-border-light);
    width: 100%;
}

.crm-client-field:last-child {
    border-bottom: none;
}

.crm-client-field dt {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-muted);
    line-height: 1.4;
}

.crm-client-field__value,
.crm-client-field dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--crm-text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.crm-client-field__value--scroll {
    max-height: min(200px, 32vh);
    overflow: auto;
    padding: 8px 10px;
    border-radius: var(--crm-radius);
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface-elevated);
    font-size: 12px;
}

@media (max-width: 560px) {
    .crm-client-field {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.crm-client-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-client-list__item {
    padding: 10px 12px;
    border-radius: var(--crm-radius);
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface-elevated);
    font-size: 12px;
    line-height: 1.5;
    color: var(--crm-text);
    white-space: pre-wrap;
}

.crm-client-docs-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.crm-client-doc-block__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--crm-muted);
}

.crm-client-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-client-doc-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius);
    background: var(--crm-surface-elevated);
}

.crm-client-doc-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
}

.crm-client-doc-card__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-client-doc-card__name {
    font-size: 13px;
    color: var(--crm-text);
}

.crm-client-doc-card__file,
.crm-client-doc-card__source {
    font-size: 11px;
    color: var(--crm-muted);
}

.crm-client-doc-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    color: var(--crm-text);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.crm-client-doc-card__btn:hover {
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent-hover);
}

.crm-client-row--skeleton {
    pointer-events: none;
}

.crm-client-row--skeleton .crm-client-row__head {
    grid-template-columns: auto 1fr 1.5fr;
}

.crm-skeleton {
    background: linear-gradient(90deg, var(--crm-border-light) 25%, var(--crm-surface-elevated) 50%, var(--crm-border-light) 75%);
    background-size: 200% 100%;
    animation: crm-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
}

.crm-skeleton-line {
    height: 12px;
    margin-top: 8px;
}

.crm-skeleton-line--lg {
    height: 16px;
    width: 70%;
}

.crm-skeleton-line--chip {
    width: 88px;
    height: 28px;
    margin-top: 0;
}

@keyframes crm-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.crm-client-row.hidden {
    display: none;
}

@media (max-width: 1100px) {
    .crm-client-row__head {
        flex-wrap: wrap;
    }

    .crm-client-row__meta {
        flex: 1 1 100%;
        justify-content: flex-start;
        order: 3;
        margin-left: 0;
    }

    .crm-client-row__aside {
        margin-left: auto;
    }

    .crm-client-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .crm-client-row__head {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px 12px 16px;
    }

    .crm-client-row__meta {
        flex: 1 1 100%;
        justify-content: flex-start;
        order: 3;
    }

    .crm-client-row__aside {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .crm-client-row__toggle {
        margin-left: auto;
    }

    .crm-client-row__cta {
        width: 100%;
    }

    .crm-client-kpi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .crm-clients-hero {
        grid-template-columns: auto 1fr;
    }

    .crm-clients-hero__stat {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .crm-workflow-hero {
        grid-template-columns: auto 1fr;
    }

    .crm-workflow-hero-progress {
        grid-column: 1 / -1;
    }

}

@media (max-width: 1024px) {
    .crm-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 130;
        width: min(300px, 88vw);
        height: 100vh;
        height: 100dvh;
        box-shadow: var(--crm-shadow-md);
        transform: translateX(0);
        transition: transform 0.25s ease;
    }

    .crm-app:not(.sidebar-mobile-open) .crm-sidebar {
        transform: translateX(-100%);
        pointer-events: none;
    }

    .crm-app.sidebar-mobile-open .crm-sidebar {
        pointer-events: auto;
    }

    .crm-sidebar-toggle {
        display: none;
    }

    .crm-mobile-menu-btn {
        display: inline-flex;
    }

    .crm-app.sidebar-collapsed .crm-sidebar {
        width: min(300px, 88vw);
    }

    .crm-app.sidebar-collapsed .crm-brand-tag,
    .crm-app.sidebar-collapsed .crm-nav-label,
    .crm-app.sidebar-collapsed .crm-sidebar-account,
    .crm-app.sidebar-collapsed .crm-sidebar-signout .crm-nav-label {
        display: revert;
    }

    .crm-app.sidebar-collapsed .crm-sidebar-brand {
        justify-content: flex-start;
        padding: 16px 14px;
    }

    body.crm-mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .crm-mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 110;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--crm-border-light);
        background: var(--crm-surface);
        box-shadow: 0 -4px 20px rgb(42 52 65 / 0.08);
    }

    .crm-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .crm-topbar {
        padding: 0 12px;
        gap: 10px;
        padding-top: max(0px, env(safe-area-inset-top));
        min-height: calc(var(--crm-topbar-height) + env(safe-area-inset-top));
    }

    .crm-page {
        padding: 12px;
    }

    .crm-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .crm-workspace-chip {
        max-width: 96px;
        font-size: 11px;
        padding: 5px 8px;
    }

    .crm-timeline-page {
        height: calc(100dvh - var(--crm-topbar-height) - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: 320px;
    }

    .crm-timeline-hero {
        margin: 12px 12px 0;
        gap: 10px 14px;
        padding: 14px 16px;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .crm-timeline-hero__actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .crm-timeline-hero__actions .crm-timeline-toolbar__add {
        width: 100%;
    }

    .crm-timeline-hero .crm-clients-hero__icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
        border-radius: 12px;
    }

    .crm-timeline-hero .crm-clients-hero__title {
        font-size: 18px;
    }

    .crm-timeline-viewport,
    .crm-workflow-viewport,
    .crm-team-structure-viewport {
        min-height: 240px;
    }

    .crm-timeline-zoom-controls,
    .crm-team-structure-viewport .crm-timeline-zoom-controls,
    .crm-workflow-viewport .crm-timeline-zoom-controls {
        right: 8px;
        bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .crm-timeline-zoom-btn,
    .crm-timeline-zoom-reset {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .timeline-stage {
        min-width: 220px;
    }

    .team-structure-board,
    .team-structure-board--narrow {
        --crm-team-card-w: min(280px, calc(100vw - 48px));
        min-width: 0;
        width: var(--crm-team-card-w);
        max-width: var(--crm-team-card-w);
        margin-inline: auto;
    }

    .team-structure-board .px-4,
    .team-structure-board .px-5 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .team-structure-board > .flex.justify-center > .flex.flex-wrap {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tree-connector {
        display: block;
        width: 100%;
        margin-inline: auto;
    }

    .tree-connector-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .tree-horizontal-line {
        display: none;
    }

    .tree-child {
        min-width: 0 !important;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .crm-workflow-box {
        width: min(220px, calc(100vw - 96px));
    }

    .team-structure-node-wrap {
        display: block;
        width: 100%;
    }

    .team-structure-node {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 96px;
        padding: 12px 14px;
        justify-content: center;
    }

    .team-structure-node__role,
    .team-structure-node__name {
        width: 100%;
    }

    .team-structure-node__role {
        min-height: 1.25em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crm-workflow-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .crm-workflow-toolbar-group,
    .crm-workflow-toolbar-group--client,
    .crm-workflow-client-picker {
        width: 100%;
        min-width: 0;
    }

    .crm-workflow-toolbar-products {
        min-width: 0;
        width: 100%;
    }

    .crm-workflow-toolbar-products .crm-workflow-label {
        display: none;
    }

    .crm-workflow-toolbar-products .crm-workflow-segment {
        flex-wrap: nowrap;
        width: 100%;
        gap: 3px;
        padding: 3px;
    }

    .crm-workflow-product-tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 5px;
        padding: 8px 6px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crm-workflow-progress-chip {
        display: none;
    }

    .crm-workflow-hero {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .crm-workflow-hero-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
        border-radius: 12px;
        grid-row: 1;
    }

    .crm-workflow-hero-copy {
        min-width: 0;
        grid-row: 1;
    }

    .crm-workflow-hero-title {
        font-size: 16px;
    }

    .crm-workflow-hero-desc {
        display: none;
    }

    .crm-workflow-hero-progress {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 6px;
        width: 68px;
        flex-shrink: 0;
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .crm-workflow-hero-progress-meta {
        margin-bottom: 0;
        width: 100%;
    }

    .crm-workflow-hero-progress-meta span {
        display: none;
    }

    .crm-workflow-hero-progress-meta strong {
        display: block;
        width: 100%;
        font-size: 18px;
        text-align: right;
    }

    .crm-workflow-hero-bar {
        width: 100%;
        height: 6px;
    }

    .crm-clients-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    .crm-clients-field,
    .crm-clients-field--grow {
        width: 100%;
        min-width: 0;
    }

    .crm-clients-hero {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 12px 14px;
        padding: 14px 16px;
    }

    .crm-clients-hero__icon {
        grid-column: 1;
        grid-row: 1;
        width: 40px;
        height: 40px;
        font-size: 17px;
        flex-shrink: 0;
    }

    .crm-clients-hero__copy {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .crm-clients-hero__title {
        font-size: 18px;
    }

    .crm-clients-hero__stat {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .crm-stats-hero {
        align-items: flex-start;
        padding: 14px 16px;
    }

    .crm-stats-hero__icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
        border-radius: 12px;
    }

    .crm-stats-hero__title {
        font-size: 18px;
    }

    .crm-client-detail__header {
        flex-direction: column;
        padding: 16px;
    }

    .crm-client-detail__actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .crm-client-detail__btn {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .crm-client-doc-card {
        grid-template-columns: auto 1fr;
    }

    .crm-client-doc-card__btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    #modal-container .fixed.inset-0 {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    #modal-container .modal-panel {
        width: 100% !important;
        max-width: none !important;
        max-height: min(92dvh, 920px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .crm-notify-panel {
        width: 100vw;
        max-width: none;
    }

    .crm-transfer-modal__panel {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: min(88dvh, 720px);
        transform: none;
        border-radius: 18px 18px 0 0;
    }

    .crm-account-settings-page {
        max-width: none;
    }

    .crm-account-settings-meta {
        grid-template-columns: 1fr;
    }

    .crm-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-auth-screen {
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .crm-auth-screen .crm-auth-card {
        padding: 24px 20px;
    }

    .crm-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .crm-stat-card {
        padding: 10px 8px;
        text-align: center;
    }

    .crm-stat-label {
        font-size: 10px;
        line-height: 1.3;
    }

    .crm-stat-value {
        font-size: 22px;
        margin-top: 4px;
    }

    .crm-team-canvas,
    .crm-team-structure-viewport {
        min-height: calc(100dvh - var(--crm-topbar-height) - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }

    .crm-stats-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-stats-layout {
        grid-template-columns: 1fr;
    }

    .crm-content .grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .crm-topbar-meta,
    .crm-workspace-chip {
        display: none;
    }

    .crm-topbar-title {
        font-size: 16px;
    }

    .crm-theme-grid {
        grid-template-columns: 1fr;
    }

    .crm-stats-period {
        width: 100%;
        justify-content: center;
    }

    .crm-notify-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .crm-client-row__identity {
        min-width: 0;
    }
}

/* ——— Statistiky ——— */
.crm-stats-page {
    max-width: 1180px;
}

.crm-stats-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: linear-gradient(135deg, var(--crm-surface) 0%, var(--crm-surface-elevated) 100%);
    box-shadow: var(--crm-shadow-md);
}

.crm-stats-hero__head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.crm-stats-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-size: 20px;
    flex-shrink: 0;
}

.crm-stats-hero__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-stats-hero__desc {
    margin: 6px 0 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--crm-muted);
}

.crm-stats-period {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border-radius: var(--crm-radius-lg);
    border: 1px solid var(--crm-border-light);
    background: var(--crm-surface-elevated);
}

.crm-stats-period-btn {
    border: none;
    border-radius: var(--crm-radius);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-muted);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.crm-stats-period-btn:hover {
    color: var(--crm-text);
    background: var(--crm-surface);
}

.crm-stats-period-btn--active {
    color: #fff;
    background: var(--crm-accent);
}

.crm-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.crm-stats-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        'icon label'
        'icon value';
    gap: 4px 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.crm-stats-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--crm-shadow-md);
}

.crm-stats-kpi--active {
    border-color: var(--crm-accent-focus);
    box-shadow: 0 0 0 2px var(--crm-accent-soft);
}

.crm-stats-kpi__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
}

.crm-stats-kpi--blue .crm-stats-kpi__icon { background: #dbeafe; color: #2563eb; }
.crm-stats-kpi--green .crm-stats-kpi__icon { background: #d1fae5; color: #059669; }
.crm-stats-kpi--amber .crm-stats-kpi__icon { background: #fef3c7; color: #d97706; }
.crm-stats-kpi--red .crm-stats-kpi__icon { background: #fee2e2; color: #dc2626; }

.crm-stats-kpi__label {
    grid-area: label;
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-stats-kpi__value {
    grid-area: value;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--crm-text);
}

.crm-stats-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.crm-stats-panel {
    padding: 16px 18px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-stats-panel--wide {
    grid-column: 1 / -1;
}

.crm-stats-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.crm-stats-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-stats-panel__hint,
.crm-stats-panel__badge {
    font-size: 11px;
    color: var(--crm-muted);
}

.crm-stats-panel__badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    font-weight: 700;
}

.crm-stats-funnel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 180px;
    padding-top: 8px;
}

.crm-stats-funnel-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 160px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.crm-stats-funnel-bar__fill {
    width: 100%;
    max-width: 52px;
    height: var(--bar-height, 10%);
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, var(--crm-accent) 0%, color-mix(in srgb, var(--crm-accent) 70%, #000) 100%);
    transition: height 0.35s ease, opacity 0.2s, transform 0.2s;
}

.crm-stats-funnel-bar:hover .crm-stats-funnel-bar__fill,
.crm-stats-funnel-bar--active .crm-stats-funnel-bar__fill {
    transform: scaleX(1.06);
    opacity: 1;
}

.crm-stats-funnel-bar:not(.crm-stats-funnel-bar--active) .crm-stats-funnel-bar__fill {
    opacity: 0.72;
}

.crm-stats-funnel-bar__count {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--crm-text);
}

.crm-stats-funnel-bar__label {
    margin-top: 2px;
    font-size: 10px;
    color: var(--crm-muted);
}

.crm-stats-funnel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.crm-stats-legend-item {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--crm-border-light);
    font-size: 11px;
    color: var(--crm-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.crm-stats-legend-item:hover,
.crm-stats-legend-item--active {
    border-color: var(--crm-accent-focus);
    color: var(--crm-accent);
    background: var(--crm-accent-soft);
}

.crm-stats-curve-wrap {
    width: 100%;
}

.crm-stats-curve {
    width: 100%;
    height: auto;
    display: block;
}

.crm-stats-curve-grid {
    stroke: var(--crm-border-light);
    stroke-width: 1;
}

.crm-stats-curve-area {
    fill: url(#statsCurveFill);
}

.crm-stats-curve-line {
    fill: none;
    stroke: var(--crm-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-stats-curve-guide {
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.crm-stats-curve-guide--completed {
    stroke: #059669;
}

.crm-stats-curve-point {
    cursor: pointer;
}

.crm-stats-curve-point__hit {
    fill: transparent;
}

.crm-stats-curve-point__dot {
    fill: var(--crm-surface);
    stroke: var(--crm-accent);
    stroke-width: 3;
}

.crm-stats-curve-point:hover .crm-stats-curve-point__dot {
    fill: var(--crm-accent);
}

.crm-stats-curve-point__value {
    font-size: 11px;
    font-weight: 700;
    fill: var(--crm-text);
}

.crm-stats-curve-axis {
    font-size: 10px;
    fill: var(--crm-muted);
}

.crm-stats-curve-notes,
.crm-stats-activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--crm-muted);
}

.crm-stats-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 999px;
    vertical-align: middle;
}

.crm-stats-dot--line { background: var(--crm-accent); }
.crm-stats-dot--completed { background: #059669; }
.crm-stats-dot--added { background: #6366f1; }
.crm-stats-dot--pool { background: #0d9488; }
.crm-stats-dot--called { background: #2563eb; }

.crm-stats-activity-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 160px;
}

.crm-stats-activity-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.crm-stats-activity-stack {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    width: 100%;
    max-width: 36px;
    height: 140px;
    border-radius: 8px;
    background: var(--crm-surface-elevated);
    overflow: hidden;
}

.crm-stats-activity-seg {
    width: 100%;
    min-height: 2px;
    transition: height 0.35s ease;
}

.crm-stats-activity-seg--added { background: #6366f1; }
.crm-stats-activity-seg--pool { background: #0d9488; }
.crm-stats-activity-seg--called { background: #2563eb; }
.crm-stats-activity-seg--completed { background: #059669; }

.crm-stats-activity-label {
    font-size: 10px;
    color: var(--crm-muted);
    text-align: center;
}

.crm-stats-progress-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-stats-progress-item__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--crm-text);
}

.crm-stats-progress-track {
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--crm-surface-elevated);
    overflow: hidden;
}

.crm-stats-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--crm-accent), color-mix(in srgb, var(--crm-accent) 60%, #059669));
    transition: width 0.35s ease;
}

.crm-stats-progress-stage {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--crm-muted);
}

.crm-stats-summary {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crm-stats-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--crm-border-light);
}

.crm-stats-summary__row:last-child {
    border-bottom: none;
}

.crm-stats-summary__row dt {
    font-size: 12px;
    color: var(--crm-muted);
}

.crm-stats-summary__row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-stats-drilldown {
    margin-top: 14px;
}

.crm-stats-drilldown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.crm-stats-client-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius);
    background: var(--crm-surface-elevated);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.crm-stats-client-chip:hover {
    border-color: var(--crm-accent-focus);
    transform: translateY(-1px);
}

.crm-stats-client-chip__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-stats-client-chip__stage {
    font-size: 10px;
    color: var(--crm-muted);
}

.crm-stats-clear-btn {
    margin-left: auto;
    border: 1px solid var(--crm-border-light);
    border-radius: var(--crm-radius);
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-muted);
    background: var(--crm-surface-elevated);
    cursor: pointer;
}

.crm-stats-clear-btn:hover {
    color: var(--crm-text);
    border-color: var(--crm-border);
}

.crm-stats-empty {
    margin: 0;
    font-size: 13px;
    color: var(--crm-muted);
}

.crm-member-stats-page {
    max-width: 960px;
}

.crm-member-stats-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--crm-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}

.crm-member-stats-back:hover {
    color: var(--crm-accent-hover);
}

.crm-member-stats-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--crm-muted);
}

.crm-member-stats-kpi-grid {
    margin-bottom: 16px;
}

.crm-member-stats-kpi {
    cursor: default;
}

.crm-member-stats-kpi:hover {
    transform: none;
}

.crm-member-stats-note__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--crm-muted);
}

.crm-member-stats-note__meta {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--crm-text);
}

.crm-member-stats-note__meta strong {
    color: var(--crm-accent-hover);
}

@media (max-width: 960px) {
    .crm-stats-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-stats-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .crm-stats-kpi-grid {
        grid-template-columns: 1fr;
    }

    .crm-stats-funnel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: auto;
    }

    .crm-stats-funnel-bar {
        height: 120px;
    }
}