/* ---------------------------------------------------------------
   FORGEX CRM — дизайн-токены
   Сгенерировано из Claude Design (CRM_AtletPro_dc.html).
   Тёмная палитра выведена автоматически: 43 пары «светлый/тёмный»
   экран сопоставлены попарно, совпадение 43/43.
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* --- цвет --- */
  --color-bg: #eef1f6;                    /* фон приложения */
  --color-surface: #ffffff;               /* карточки, панели, шапка, сайдбар */
  --color-surface-2: #f5f7fa;             /* вторичный фон: hover строк, чипы, пустые зоны */
  --color-border: #e2e8f0;                /* основная граница */
  --color-border-strong: #d3dae3;         /* усиленная граница (внешняя рамка окна) */
  --color-text: #1a2332;                  /* основной текст */
  --color-text-secondary: #5b6b82;        /* вторичный текст */
  --color-text-muted: #8a97a8;            /* подписи, заголовки колонок, плейсхолдеры */
  --color-text-disabled: #c3ccd8;         /* недоступные элементы */
  --color-accent: #2f6fed;                /* основной акцент: кнопки, ссылки, активные пункты */
  --color-accent-hover: #1e5cd6;          /* акцент при наведении */
  --color-accent-soft: #e8effd;           /* подложка акцента: активный пункт меню, бейдж */
  --color-success: #178a4c;               /* успех / оплачено */
  --color-success-soft: #e7f6ec;          /* подложка успеха */
  --color-danger: #d64545;                /* ошибка / удаление / просрочено */
  --color-danger-soft: #fdeaea;           /* подложка ошибки */
  --color-warning: #b45309;               /* предупреждение / в ожидании */
  --color-warning-soft: #fdf3e0;          /* подложка предупреждения */
  --color-info: #7c5cd6;                  /* роль «Руководитель», прочие акценты */
  --color-info-soft: #f0eafd;             /* подложка info */

  /* --- аватары (не инвертируются, кроме первого) --- */
  --color-avatar-1: #7c5cd6;
  --color-avatar-2: #4a6b8a;
  --color-avatar-3: #c2568c;
  --color-avatar-4: #2f9e8f;
  --color-avatar-5: #c77c2e;
  --color-avatar-6: #8a6d4f;

  /* --- типографика --- */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:   10.5px;   /* мелкие подписи, счётчики */
  --fs-sm:   11.5px;   /* заголовки колонок, uppercase-лейблы */
  --fs-base: 13px;     /* основной текст интерфейса */
  --fs-md:   13.5px;   /* текст кнопок, имена в списках */
  --fs-lg:   15px;     /* подзаголовки */
  --fs-xl:   16px;     /* заголовок страницы */
  --fs-2xl:  20px;     /* крупные числа виджетов */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- отступы (шаг 4px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* --- радиусы --- */
  --r-sm:   6px;
  --r-md:   8px;    /* кнопки, инпуты, иконки — доминирующий */
  --r-lg:   12px;   /* карточки, панели */
  --r-full: 999px;  /* аватары, чипы, бейджи */

  /* --- высоты элементов --- */
  --h-control-sm: 32px;
  --h-control:    38px;   /* кнопки и инпуты по умолчанию */
  --h-control-lg: 44px;   /* мобильные контролы */
  --h-header:     64px;
  --w-sidebar:      240px;
  --w-sidebar-mini: 64px;

  /* --- тени --- */
  --shadow-sm: 0 1px 2px rgba(16,32,64,.06);
  --shadow-md: 0 2px 8px rgba(16,32,64,.08);
  --shadow-lg: 0 8px 32px rgba(13,20,32,.18);
  --focus-ring: 0 0 0 2px var(--color-accent);

  --transition: .15s ease;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0e131a;
  --color-surface: #161d27;
  --color-surface-2: #1d2735;
  --color-border: #2a3546;
  --color-border-strong: #2a3546;
  --color-text: #e8edf4;
  --color-text-secondary: #9aa8bc;
  --color-text-muted: #6b7a8f;
  --color-text-disabled: #3d4a5e;
  --color-accent: #4d8dff;
  --color-accent-hover: #7fabff;
  --color-accent-soft: #1d3054;
  --color-success: #3ecf8e;
  --color-success-soft: #143324;
  --color-danger: #ff8080;
  --color-danger-soft: #3a1919;
  --color-warning: #f0b83f;
  --color-warning-soft: #3a2e12;
  --color-info: #a98cf5;
  --color-info-soft: #2a2145;

  --color-avatar-1: #a98cf5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* те же переопределения, если тема не задана явно */
  }
}

/* ---------------------------------------------------------------
   Добавлено вручную к сгенерированному набору.
   В design/tokens.css этих значений нет: в макетах затемнение фона
   и текст на акцентной заливке заданы цветом на месте.
   Правится здесь, design/tokens.css не трогается.
   --------------------------------------------------------------- */

:root {
  --color-on-accent: #ffffff;             /* текст и иконки на акцентной заливке */
  --color-backdrop: rgba(13,32,64,.45);   /* затемнение под модалкой и мобильным меню */

  /* размеры аватара: 26 в строке компании (макет 2a), 32 в шапке
     (--h-control-sm), 40 в списке пользователей, 46 в ленте менеджеров
     (макет 3a), 64 в попапе */
  --sz-avatar-sm: 26px;
  --sz-avatar-md: 40px;
  --sz-avatar-lg: 64px;
  --sz-avatar-switcher: 46px;
  --sz-avatar-switcher-sm: 44px;          /* та же лента на мобильном, макет 3c */

  --sz-thumb: 60px;                       /* миниатюра товара: каталог КП (6e) и состав заказа (8e) */

  --w-modal: 480px;                       /* ширина окна модалки на десктопе, макет 11c */
  --w-summary: 380px;                     /* правая колонка КП: сводка и итог, макеты 6e, 6i */
  --w-stepper-value: 38px;                /* поле количества в степпере каталога, макет 6e */
  --w-discount-field: 56px;               /* поле скидки в сводке и итоге, макеты 6e, 6i */
  --w-drop: 220px;                        /* меню дропдауна в шапке карточки, макет 2f */

  /* строка фильтров и колонки списка компаний, макет 2a */
  --w-search: 280px;
  --w-col-city: 130px;
  --w-col-phone: 160px;
  --w-col-manager: 180px;

  /* Ниже этой ширины текстовая колонка списка не сжимается. Колонки
     с фиксированной шириной забирают место первыми, и на 1024px название
     клиента ужималось до нуля, а текст наезжал на соседнюю колонку. */
  --w-col-name-min: 160px;

  /* колонки списка КП, макет 6a */
  --w-col-number:   120px;
  --w-col-price:    150px;
  --w-col-discount: 90px;
  --w-col-date:     150px;

  /* колонки списка документов, макеты 7a и 7e. Номер счёта короткий («6»,
     «1042»), под колонку КП в 120px он не тянет — заголовок висел над
     пустотой. Статус и действия шириной по содержимому расходились между
     шапкой и строками (в шапке кнопок нет), поэтому оба фиксированы:
     пилюля «Оплачен» — около 100px, две иконки по 32px с зазором — ровно 72px */
  --w-col-docnum:    40px;
  --w-col-contractnum:    90px;
  --w-col-docstatus: 120px;
  --w-col-docacts:   72px;

  /* колонки состава заказа, макет 8e. Ширина считана по самому длинному
     числу: «1 540 000 ₽» полужирным занимает около 80px, и запас нужен —
     тренажёр за миллион в заказе обычное дело. Остальное отдано названию:
     у макета под эти три колонки 360px, здесь 260px */
  --w-pitem-price: 100px;
  --w-pitem-qty:   60px;

  /* колонка подписей в карточке компании на мобильном, макет 2d */
  --w-field-label: 110px;

  /* сетка месяца, макет 4a: высота клетки, круг сегодняшнего числа,
     точка типа события под ним */
  --h-cal-day:    72px;
  --sz-cal-today: 24px;
  --sz-cal-dot:   5px;

  /* точка статуса в пилюле счёта, макет 7a */
  --sz-doc-dot: 8px;

  /* строка счёта и его номер в форме, макет 7c */
  --w-inv-number: 110px;
  --w-inv-qty:    120px;
  --w-inv-sum:    170px;
  --w-inv-del:    36px;

  /* пункт ленты менеджеров: ширина фиксированная, иначе длинное ФИО
     растягивает пункт и аватары перестают стоять шагом (макет 3a) */
  --w-switcher-item: 76px;
  --w-switcher-item-sm: 64px;             /* тот же пункт на мобильном, макет 3c */

  /* диаграмма поступлений на дашборде, макет 1c: высота ряда столбцов
     и полоска месяца без оплат — совсем пропадать он не должен */
  --h-dash-bars:    88px;
  --h-dash-bar-min: 4px;

  /* колонки таблицы заказов в блоке дашборда, макет 1c. Блок занимает
     половину ряда, и колонки списка заказов (дата 150px, телефон 160px)
     в неё не встают. Ширины сняты с самих значений: «1058», «2 140 000 ₽»,
     пилюля «Необработан», «19 июл 14:30». Дата с годом («19 июл 2025 14:30»)
     переносится на вторую строку — в блоке пять свежих заказов, прошлый год
     там редкость, а лишние 15px забирать у имени клиента дороже.
     Остаток ряда — имя, оно же сжимается последним */
  --w-dash-num:     50px;
  --w-dash-sum:     95px;
  --w-dash-status:  95px;
  --w-dash-date:   100px;

  /* колонки списка звонков: своего макета у него нет, ширины сняты
     с самых длинных подписей — «Исходящий» со стрелкой и «1:02:33» */
  --w-col-direction: 140px;
  --w-col-duration:  120px;

  /* три панели почты, макет 9a: папки, список писем, остаток — само письмо.
     Высота — та же, что у карточки макета: пустой ящик не должен схлопывать
     раздел в одну строку. Круглая кнопка «＋» на экране списка — макет 9e */
  --w-mail-folders: 220px;
  --w-mail-list:    400px;
  --h-mail:         560px;
  --sz-fab:          52px;
  --sz-mail-ext:     28px;                /* квадрат с расширением у вложения, макеты 9a и 9g */

  /* модалка «Написать письмо», макет 9c: окно шире обычного — в нём
     поле текста письма, — подпись поля слева и минимальная высота текста */
  --w-mail-modal: 600px;
  --w-mail-label: 44px;
  --h-mail-body:  170px;
}

[data-theme="dark"] {
  --color-backdrop: rgba(0,0,0,.6);
}