/* ===== Design tokens =====
           Дизайн-система PRIME BPM: единый источник правды для цветов,
           радиусов, теней, типографики. Меняй значения здесь — они применяются
           глобально. Для тёмной темы добавь [data-theme="dark"] блок ниже. */
        :root {
            /* Brand / Primary */
            --color-primary: #1565C0;
            --color-primary-hover: #1251A3;
            --color-primary-dark: #0D47A1;
            --color-primary-strong: #1D4ED8;
            --color-primary-500: #1976D2;
            --color-primary-400: #3B82F6;
            --color-primary-50: #DBEAFE;
            --color-primary-25: #EFF6FF;
            --color-primary-20: #F0F6FF;
            --color-primary-10: #F8F9FF;

            /* Neutrals */
            --color-surface: #FFFFFF;
            --color-gray-50: #F9FAFB;
            --color-gray-100: #F3F4F6;
            --color-gray-200: #E5E7EB;
            --color-gray-300: #D1D5DB;
            --color-gray-400: #9CA3AF;
            --color-gray-500: #6B7280;
            --color-gray-700: #374151;
            --color-gray-900: #111827;
            --color-nav-bg: #1A1A2E;

            /* App backgrounds */
            --color-bg-app: #EEF2F7;
            --color-bg-subtle: #F1F5F9;
            --color-bg-chip: #F0F2F5;
            --color-bg-tint: #F8FAFC;
            --color-bg-faint: #FAFBFC;

            /* Semantic text */
            --color-text: var(--color-gray-900);
            --color-text-strong: var(--color-gray-700);
            --color-text-secondary: var(--color-gray-500);
            /* Раньше gray-400 (#9CA3AF) — на белом 3.05:1, не проходит WCAG AA.
               Поднимаем до gray-500 (#6B7280) — 4.84:1, проходит. Совпадает
               с text-secondary, но это нормально: лучше единый «тихий» тон,
               чем отдельный сорт серого с непроходным контрастом. */
            --color-text-muted: var(--color-gray-500);

            /* Borders */
            --color-border: var(--color-gray-200);
            --color-border-strong: var(--color-gray-300);

            /* Accent / CTA — янтарный, для primary action на странице.
               Правило `primary-action` (§4 Style): один screen — один primary CTA.
               Primary (синий) остаётся для навигации/ссылок/фокуса/чипов;
               accent — для главного действия (Создать, Добавить, Опубликовать). */
            --color-accent:        #D97706;
            --color-accent-hover:  #B45309;
            --color-accent-strong: #92400E;
            --color-accent-50:     #FEF3C7;
            --color-accent-25:     #FFFBEB;

            /* Status: success / warning / danger */
            --color-success: #2E7D32;
            --color-success-500: #10B981;
            --color-success-50: #E8F5E9;
            --color-warning: #F59E0B;
            --color-warning-50: #FEF3C7;
            --color-danger: #E53935;
            --color-danger-600: #DC2626;
            --color-danger-700: #B91C1C;
            --color-danger-text: #C62828;
            --color-danger-500: #EF4444;
            --color-danger-50: #FEE2E2;
            --color-danger-25: #FEF2F2;

            /* Radii */
            --radius-xs: 4px;
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 10px;
            --radius-xl: 12px;
            --radius-2xl: 16px;
            --radius-3xl: 20px;
            --radius-pill: 999px;

            /* Shadows — единая elevation-шкала (как Material/Tailwind).
               Используй --shadow-1..4 для новых компонентов. Старые
               --shadow-sm/md/lg/xl оставлены для обратной совместимости. */
            --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
            --shadow-2: 0 2px 8px rgba(15, 23, 42, 0.08);
            --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12);
            --shadow-4: 0 18px 40px rgba(15, 23, 42, 0.16);
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 4px 24px rgba(15, 23, 42, 0.08);
            --shadow-xl: 0 18px 40px rgba(15, 23, 42, 0.16);
            --shadow-primary: 0 2px 8px rgba(21, 101, 192, 0.25);
            --shadow-primary-lg: 0 8px 20px rgba(21, 101, 192, 0.35);
            --shadow-sidebar: 3px 0 6px -2px rgba(0, 0, 0, 0.12);

            /* Typography */
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Модульная шкала шрифтов 1.25 (Major Third). */
            --text-xs: 12px;
            --text-sm: 14px;
            --text-base: 16px;
            --text-lg: 18px;
            --text-xl: 20px;
            --text-2xl: 24px;
            --text-3xl: 30px;

            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-base: 0.2s ease;

            /* Z-index scale */
            --z-sticky: 20;
            --z-sidebar: 40;
            --z-modal: 100;
            --z-toast: 200;
            --z-palette: 300;
        }

        /* ===== Тёмная тема =====
           Активируется через document.documentElement.dataset.theme = 'dark'.
           Переопределяем только семантические переменные — компоненты
           автоматически перекрашиваются, если используют var(--color-*). */
        [data-theme="dark"] {
            --color-surface: #1B1F2A;
            --color-bg-app: #0F131C;
            --color-bg-subtle: #161A24;
            --color-bg-chip: #232838;
            --color-bg-tint: #1B1F2A;
            --color-bg-faint: #161A24;

            --color-text: #E5E7EB;
            --color-text-strong: #F3F4F6;
            --color-text-secondary: #9CA3AF;
            --color-text-muted: #6B7280;

            --color-border: #2A3142;
            --color-border-strong: #3A4257;

            --color-gray-50: #1B1F2A;
            --color-gray-100: #232838;
            --color-gray-200: #2A3142;
            --color-gray-300: #3A4257;

            --color-primary-25: rgba(21, 101, 192, 0.10);
            --color-primary-50: rgba(21, 101, 192, 0.18);

            --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
            --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
            --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
            --shadow-4: 0 18px 40px rgba(0, 0, 0, 0.65);
        }
        [data-theme="dark"] body { color: var(--color-text); }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { overflow-x: hidden; }
        body { font-family: var(--font-sans); background: var(--color-bg-app); color: var(--color-nav-bg); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        /* Tabular figures для дат, цифр, прогресса — выравниваются по сетке,
           не «прыгают» при смене значения. */
        input[type="date"],
        input[type="number"],
        input[type="time"],
        .tabular-nums,
        .progress-label,
        .fav-card-progress-label,
        .task-shift-dates,
        .shift-pop-dates,
        .shift-item-dates,
        .task-dates-cell,
        .hist-v2-time,
        .pc-msg-time,
        #overall-progress { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

        /* ===== Utility & atom classes =====
           Заменяют повторяющиеся inline-стили в HTML. Семантические названия
           (.text-hint, .form-hint, .empty-placeholder) предпочтительнее
           атомарных (.mt-20, .w-100), чтобы HTML оставался читаемым. */
        .sidebar-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 4px; }
        .row-flex-gap { display: flex; gap: 12px; }
        .row-flex-gap-sm { display: flex; gap: 8px; align-items: center; }
        .row-flex-center { display: flex; align-items: center; gap: 10px; }
        .form-hint { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
        .text-hint { color: var(--color-text-muted); font-size: 12px; }
        .text-micro { color: var(--color-text-secondary); font-size: 11px; }
        .text-secondary-sm { font-size: 12px; color: var(--color-text-secondary); }
        .empty-placeholder { color: var(--color-text-muted); padding: 24px; text-align: center; }
        .is-hidden { display: none !important; }

        /* === Loading state кнопки (правило loading-buttons из §2) ===
           Показывает пользователю, что async-операция в процессе. Кнопка
           отключается, контент тускнеет, появляется спиннер. */
        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }
        .btn-loading::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 14px; height: 14px;
            margin-top: -7px; margin-left: -7px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            color: rgba(255,255,255,0.95);
            animation: btn-spin 0.65s linear infinite;
        }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .btn-loading::after { animation: none; }
        }

        /* === Press feedback (правило press-feedback из §2 Touch & Interaction) ===
           Маленький translateY(1px) на :active даёт ощущение «нажалось».
           Длительность 50ms — мгновенный отклик. */
        button:not(:disabled):active,
        .btn-toolbar-add:active,
        .admin-btn-primary:active,
        .admin-btn-secondary:active,
        .risks-v2-btn-add:active,
        .sumv2-export-btn:active,
        .ann-btn-submit:active,
        .btn-add-task:active,
        .btn-confirm:active,
        .bulk-toolbar-btn:active,
        .plan-view-chip:active,
        .kb-card-action:active,
        .btn-attach:active,
        .btn-comment:active {
            transform: translateY(1px);
            transition-duration: 50ms;
        }

        /* === Accessibility: prefers-reduced-motion (правило §1) ===
           Уважаем системную настройку «уменьшить движение» — критично для
           пользователей с вестибулярными расстройствами и при укачивании. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ====================================================================
           ПРИМИТИВЫ КОМПОНЕНТОВ — Linear/Notion-стиль.
           Используются по всей системе, замещают разрозненные классы.
           ==================================================================== */

        /* ===== BUTTONS ===== */
        /* Универсальные кнопки. Все имеют единые: высоту 36px, radius 8px,
           font-size 13px, weight 500, padding 8px 16px. Разница только в
           интенсивности (primary/secondary/ghost). */
        .btn,
        .btn-primary,
        .btn-secondary,
        .btn-ghost,
        .btn-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 36px;
            padding: 0 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            font-family: inherit;
            line-height: 1;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
            user-select: none;
            border: 1px solid transparent;
        }
        .btn-primary {
            background: var(--color-primary);
            color: #fff;
        }
        .btn-primary:hover {
            background: var(--color-primary-hover);
            box-shadow: 0 1px 3px rgba(21, 101, 192, 0.20);
        }
        .btn-primary:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-secondary {
            background: white;
            color: var(--color-text-strong);
            border-color: var(--color-border-strong);
        }
        .btn-secondary:hover {
            background: var(--color-bg-subtle);
            border-color: var(--color-text-secondary);
        }
        .btn-secondary:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-ghost {
            background: transparent;
            color: var(--color-text-strong);
        }
        .btn-ghost:hover {
            background: var(--color-bg-subtle);
        }
        .btn-ghost:active { transform: translateY(1px); transition-duration: 50ms; }

        .btn-danger {
            background: white;
            color: var(--color-danger);
            border-color: var(--color-danger-50);
        }
        .btn-danger:hover {
            background: var(--color-danger);
            color: white;
            border-color: var(--color-danger);
        }

        .btn-sm {
            height: 30px;
            padding: 0 12px;
            font-size: 12px;
            border-radius: 6px;
        }
        .btn-lg {
            height: 42px;
            padding: 0 20px;
            font-size: 14px;
        }
        .btn:disabled,
        .btn-primary:disabled,
        .btn-secondary:disabled,
        .btn-ghost:disabled,
        .btn-danger:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }
        .btn:focus-visible,
        .btn-primary:focus-visible,
        .btn-secondary:focus-visible,
        .btn-ghost:focus-visible,
        .btn-danger:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }

        /* ===== STATUS PILL ===== */
        /* Компактный статус: только цветной текст 12/500, без точки.
           Используется в строках задач, карточках, фильтрах, dashboard. */
        .status-pill {
            display: inline-flex;
            align-items: center;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            color: var(--color-text-strong);
            padding: 4px 8px;
            border-radius: 999px;
            background: transparent;
            white-space: nowrap;
        }
        .status-pill.is-todo     { color: #6B7280; }
        .status-pill.is-progress { color: #1565C0; }
        .status-pill.is-done     { color: #15803D; }
        .status-pill.is-blocked  { color: #B91C1C; }
        .status-pill.is-clickable { cursor: pointer; }
        .status-pill.is-clickable:hover { background: var(--color-bg-subtle); }

        /* Filled-вариант — для случаев, где нужна цветная плашка
           (карточки канбана, drawer-header). */
        .status-pill--filled {
            padding: 4px 10px;
            font-weight: 600;
        }
        .status-pill--filled.is-todo     { background: #F3F4F6; color: #4B5563; }
        .status-pill--filled.is-progress { background: #DBEAFE; color: #1E40AF; }
        .status-pill--filled.is-done     { background: #DCFCE7; color: #166534; }
        .status-pill--filled.is-blocked  { background: #FEE2E2; color: #991B1B; }

        /* ===== AVATAR ===== */
        /* Круглый аватар: инициалы или фото. Цвет фона — стабильный hash
           по ФИО, чтобы один и тот же сотрудник всегда был одного цвета. */
        .avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            background: var(--color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.2px;
            flex-shrink: 0;
            overflow: hidden;
            line-height: 1;
            user-select: none;
        }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .avatar-sm { width: 20px; height: 20px; font-size: 9px; }
        .avatar-md { width: 24px; height: 24px; font-size: 10px; }
        .avatar-lg { width: 32px; height: 32px; font-size: 12px; }
        .avatar-xl { width: 44px; height: 44px; font-size: 16px; }

        /* Стек аватаров с overlap (для multiple assignees) */
        .avatar-stack {
            display: inline-flex;
            align-items: center;
        }
        .avatar-stack > .avatar {
            border: 2px solid white;
            margin-left: -6px;
        }
        .avatar-stack > .avatar:first-child { margin-left: 0; }
        .avatar-stack > .avatar-more {
            background: var(--color-bg-subtle);
            color: var(--color-text-secondary);
            font-weight: 600;
        }

        /* Пустой аватар (нет ассигни) — пунктирный круг */
        .avatar-empty {
            width: 24px; height: 24px;
            border-radius: 50%;
            border: 1px dashed var(--color-border-strong);
            background: transparent;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--color-text-muted);
            font-size: 10px;
        }

        /* ===== POPOVER ===== */
        /* Универсальный popover — крепится к элементу-триггеру.
           Используется для inline-выбора статуса, срочности и т.п.
           Закрытие: клик вне, Esc, выбор опции. */
        .ui-popover {
            position: absolute;
            z-index: 1000;
            min-width: 180px;
            background: white;
            border: 1px solid var(--color-border-strong);
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
            padding: 4px;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.12s ease-out, transform 0.12s ease-out;
            pointer-events: none;
        }
        .ui-popover.is-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .ui-popover-item {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 7px 10px;
            border: none;
            background: transparent;
            text-align: left;
            font-size: 13px;
            color: var(--color-text);
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
            line-height: 1.2;
        }
        .ui-popover-item:hover,
        .ui-popover-item:focus-visible {
            background: var(--color-bg-subtle);
            outline: none;
        }
        .ui-popover-item.is-selected {
            background: var(--color-primary-25);
            color: var(--color-primary);
            font-weight: 500;
        }
        .ui-popover-item-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .ui-popover-item-check {
            margin-left: auto;
            color: var(--color-primary);
            opacity: 0;
        }
        .ui-popover-item.is-selected .ui-popover-item-check { opacity: 1; }

        /* ===== SYSTEM SELECT ===== */
        /* Единый минималистичный select. Не выкручиваемся в primary-цвет
           на hover — только подсветка границы, как у inputs в Linear/Notion. */
        .system-select {
            background: white;
            color: var(--color-text);
            border: 1px solid var(--color-border-strong);
            border-radius: 8px;
            padding: 7px 32px 7px 12px;
            font-size: 13px;
            font-weight: 500;
            font-family: inherit;
            line-height: 1.2;
            cursor: pointer;
            min-width: 200px;
            max-width: 360px;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 14px 14px;
            transition: border-color 0.12s, box-shadow 0.12s;
        }
        .system-select:hover {
            border-color: var(--color-text-secondary);
        }
        .system-select:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }
        .system-select:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            background-color: var(--color-bg-subtle);
        }
        .system-select-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        /* Триггер popover — кликабельный статус-пилл выглядит как кнопка */
        .status-pill.is-clickable {
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.12s, border-color 0.12s;
        }
        .status-pill.is-clickable:hover {
            background: var(--color-bg-subtle);
            border-color: var(--color-border);
        }
        .status-pill.is-clickable:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-25);
        }

        /* ===== COMMAND PALETTE (Cmd+K) ===== */
        .cmdk-overlay {
            position: fixed; inset: 0;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(2px);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 12vh;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
        }
        .cmdk-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }
        .cmdk-window {
            width: 600px;
            max-width: calc(100vw - 32px);
            background: white;
            border-radius: 12px;
            box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.10);
            border: 1px solid var(--color-border-strong);
            overflow: hidden;
            transform: translateY(-8px);
            transition: transform 0.18s ease-out;
            display: flex;
            flex-direction: column;
            max-height: 75vh;
        }
        .cmdk-overlay.is-open .cmdk-window { transform: translateY(0); }
        .cmdk-input-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--color-border);
        }
        .cmdk-search-ico {
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        .cmdk-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 15px;
            font-family: inherit;
            color: var(--color-text);
            background: transparent;
        }
        .cmdk-input::placeholder { color: var(--color-text-muted); }
        .cmdk-kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 11px;
            color: var(--color-text-secondary);
            background: var(--color-bg-subtle);
            border: 1px solid var(--color-border-strong);
            border-bottom-width: 2px;
            border-radius: 4px;
            padding: 1px 5px;
            line-height: 1.2;
        }
        .cmdk-list {
            overflow-y: auto;
            padding: 6px;
            flex: 1;
            min-height: 60px;
        }
        .cmdk-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 8px 10px;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            font-size: 13px;
            color: var(--color-text);
            line-height: 1.2;
        }
        .cmdk-item.is-active {
            background: var(--color-primary-25);
            color: var(--color-primary);
        }
        .cmdk-item-ico {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            color: var(--color-text-secondary);
            flex-shrink: 0;
        }
        .cmdk-item.is-active .cmdk-item-ico { color: var(--color-primary); }
        .cmdk-item-label {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cmdk-item-hint {
            font-size: 11px;
            color: var(--color-text-muted);
            background: var(--color-bg-subtle);
            padding: 2px 6px;
            border-radius: 4px;
            flex-shrink: 0;
        }
        .cmdk-empty {
            padding: 24px;
            text-align: center;
            color: var(--color-text-muted);
            font-size: 13px;
        }
        .cmdk-footer {
            display: flex;
            gap: 14px;
            padding: 8px 14px;
            border-top: 1px solid var(--color-border);
            background: var(--color-bg-subtle);
            font-size: 11px;
            color: var(--color-text-secondary);
        }
        .cmdk-footer span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        body.cmdk-open { overflow: hidden; }