/* ============================================================
   Платформа ЭР — дизайн-токены
   Основа: официальный брендбук «Экспертные решения» (casexpert.ru).
   Расширено под интерфейс рабочей системы: тёмная тема, статусы,
   семантика аудита, плотные таблицы.

   ВАЖНО: шрифт Onest подключается ЛОКАЛЬНО (файлы в assets/fonts/),
   без обращения к Google Fonts — внутренняя система не должна ходить
   во внешние CDN (приватность, работа без интернета, 152-ФЗ).
   ============================================================ */

/* @font-face — положить файлы Onest в assets/fonts/ и раскомментировать
@font-face{font-family:'Onest';src:url('../fonts/Onest-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*/

:root{
  /* ---------- Типографика ---------- */
  --font-brand:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Segoe UI Mono',Consolas,'Liberation Mono',monospace; /* суммы, ИНН, номера */

  /* Шкала кеглей — та же, что в «Проверке контрагентов» (frontend/src/theme/tokens.css):
     12 / 13 / 15 / 18 / 24 / 30. Две программы стоят рядом на одном экране,
     и полупиксельная разница (14.5 против 15, 16.5 против 18) читается
     не как замысел, а как небрежность. Промежуточных ступеней нет намеренно. */
  --fs-h1:30px; --fs-h2:24px; --fs-h3:18px; --fs-h4:15px;
  --fs-text:15px; --fs-sm:13px; --fs-xs:12px;
  --lh-tight:1.25; --lh-base:1.5;

  /* ---------- Бренд (из брендбука, не менять) ---------- */
  --brand:#3E3790;            /* фирменный индиго */
  --brand-bg-soft:#F5F5F9;    /* светлый брендовый фон */
  --btn:#FFE600;              /* жёлтая CTA */
  --btn-hover:#FED500;
  --btn-text:#3C3C3C;
  --link:#5F5FD5;
  --link-hover:#5E86FF;

  /* ---------- Производные оттенки бренда (для интерфейса) ---------- */
  --brand-700:#332C7A;        /* нажатое состояние */
  --brand-300:#8983C7;        /* иконки, второстепенные акценты */
  --brand-100:#E4E2F2;        /* границы акцентных блоков */

  /* ---------- Поверхности ---------- */
  --bg:#FFFFFF;
  --bg-app:#F5F5F9;           /* фон рабочей области — тот же, что в «Проверке контрагентов» */
  --surface:#F8F8F8;
  --surface-2:#F1F1F7;
  --line:#E9E9F2;
  --line-strong:#D5D5E2;

  /* ---------- Текст ----------
     Цвета те же, что в «Проверке контрагентов»: там приглушённый серый уже
     поднимали с 3:1 до 7:1 по жалобе «тусклый, тяжело читать». Наш #6B6B85
     давал те же 4.4 — незачем повторять чужую ошибку во второй программе. */
  --text:#262626;
  --nav-item:#3E3790;         /* пункт меню — фирменный индиго, как в «Проверке контрагентов» */
  --text-muted:#595959;
  --text-inverse:#FFFFFF;

  /* ---------- Риск (светофор, из брендбука) ---------- */
  --risk-low:#1FA971; --risk-mid:#F5A623; --risk-high:#E5484D;

  /* ---------- Статусы работы (семантика платформы) ---------- */
  --ok:#1E7B54;      --ok-bg:#E8F5EF;
  /* Тёмнее прежнего #B07600: на своей же плашке он давал 3.5 при норме 4.5,
     и «ждём документы» читалось хуже соседних состояний. Теперь 5.3. */
  --warn:#8A5B00;    --warn-bg:#FCF3E0;
  --crit:#C0392B;    --crit-bg:#FDEDEC;
  --info:#3E3790;    --info-bg:#EEEDF8;
  --idle:#6B6B85;    --idle-bg:#F1F1F7;

  /* Статусы шага аудита: не начат / в работе / ждём клиента / готов / проблема */
  --step-idle:var(--idle);   --step-idle-bg:var(--idle-bg);
  --step-work:var(--brand);  --step-work-bg:var(--info-bg);
  --step-wait:var(--warn);   --step-wait-bg:var(--warn-bg);
  --step-done:var(--ok);     --step-done-bg:var(--ok-bg);
  --step-fail:var(--crit);   --step-fail-bg:var(--crit-bg);

  /* ---------- Форма ---------- */
  /* Скругления — тоже из «Проверки контрагентов»: 6 мелкое / 8 блок внутри
     карточки / 12 сама карточка. Прежние 10/14/18 давали заметно более
     «мыльный» и рыхлый вид при тех же размерах блоков. */
  --radius:12px; --radius-sm:8px; --radius-lg:14px; --radius-xs:6px; --radius-pill:999px;

  /* ---------- Отступы (шкала брендбука) ---------- */
  /* 5 px — внутри одного элемента: значок и текст, две строки подписи.
     Всё, что стоит между элементами, начинается с 10. */
  --space-0:5px;
  --space-1:10px; --space-2:15px; --space-3:20px; --space-4:30px; --space-5:40px; --space-6:100px;

  /* ---------- Тени ---------- */
  --shadow-sm:0 1px 2px rgba(23,23,37,.04);
  --shadow:0 1px 2px rgba(23,23,37,.04),0 6px 18px rgba(23,23,37,.06);
  --shadow-lg:0 20px 60px rgba(30,26,64,.18);

  /* ---------- Слои ---------- */
  --z-sticky:100; --z-drawer:800; --z-modal:1000; --z-toast:1200;

  /* ---------- Стрелка выпадающего списка ----------
     Свою рисуем потому, что браузерную нельзя перекрасить: на Windows это
     серый треугольник в квадратной кнопке, и рядом с нашими полями он выдаёт
     «сделано на коленке». Цвет — как у вторичного текста, в тёмной теме
     переопределяется ниже: чёрная стрелка на тёмном фоне пропадает. */
  --select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6B78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Тёмная тема ----------
   Аудитор работает в таблицах часами. Тёмная тема — не украшение.
   Жёлтая CTA сохраняется (узнаваемость бренда), индиго осветляется,
   иначе на тёмном фоне он не читается. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#9B93E8; --brand-700:#B7B0F0; --brand-300:#6E67B8; --brand-100:#332F55;
    --brand-bg-soft:#1C1A2E;
    --link:#A9A6F0; --link-hover:#C3C0FA;
    --bg:#16152A; --bg-app:#101021; --surface:#1C1B33; --surface-2:#23223D;
    --line:#2C2A47; --line-strong:#3B3960;
    --text:#EDEDF2; --text-muted:#B4B4BE; --text-inverse:#16152A; --nav-item:rgba(236,234,247,.78);
    --ok:#68D391; --ok-bg:#16321F; --warn:#E6B85C; --warn-bg:#33280F;
    --crit:#F0A097; --crit-bg:#331A16; --info:#9B93E8; --info-bg:#22203A;
    --idle:#8F8BA8; --idle-bg:#20203A;
    --risk-low:#68D391; --risk-mid:#E6B85C; --risk-high:#F0A097;
    --select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B4B4BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 24px 70px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --brand:#9B93E8; --brand-700:#B7B0F0; --brand-300:#6E67B8; --brand-100:#332F55;
  --brand-bg-soft:#1C1A2E;
  --link:#A9A6F0; --link-hover:#C3C0FA;
  --bg:#16152A; --bg-app:#101021; --surface:#1C1B33; --surface-2:#23223D;
  --line:#2C2A47; --line-strong:#3B3960;
  --text:#EDEDF2; --text-muted:#B4B4BE; --text-inverse:#16152A; --nav-item:rgba(236,234,247,.78);
  --ok:#68D391; --ok-bg:#16321F; --warn:#E6B85C; --warn-bg:#33280F;
  --crit:#F0A097; --crit-bg:#331A16; --info:#9B93E8; --info-bg:#22203A;
  --idle:#8F8BA8; --idle-bg:#20203A;
  --risk-low:#68D391; --risk-mid:#E6B85C; --risk-high:#F0A097;
  --select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B4B4BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Тени тоже свои: рассчитанные под белый фон на тёмном не видно, и
     карточки выглядели плоскими у тех, кто выбрал тёмную тему руками.
     В системной тёмной они были, а в выбранной — нет. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 24px 70px rgba(0,0,0,.55);
}

/* ============================================================
   Базовые компоненты — минимальный набор, на котором строится
   вся платформа. Всё через токены, ни одного «магического» цвета.
   ============================================================ */

/* Кнопка-действие (фирменная жёлтая) — ОДНА на экран, главное действие */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap: var(--space-1);
  background:var(--btn);color:var(--btn-text);font-family:var(--font-brand);font-size:var(--fs-text);
  font-weight:600;line-height:1.4;padding:var(--space-2) var(--space-3);border:none;
  border-radius:var(--radius);cursor:pointer;transition:background-color .2s,box-shadow .2s}
.btn-cta:hover,.btn-cta:focus-visible{background:var(--btn-hover);color:var(--btn-text)}
.btn-cta:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-cta:disabled{opacity:.5;cursor:not-allowed}

/* Вторичная кнопка */
.btn{display:inline-flex;align-items:center;gap: var(--space-1);font-family:var(--font-brand);font-size:var(--fs-text);
  font-weight:600;padding:var(--space-2) var(--space-3);border-radius:var(--radius);cursor:pointer;
  background:var(--brand);color:var(--text-inverse);border:1px solid var(--brand)}
.btn.secondary{background:transparent;color:var(--brand);border-color:var(--brand-100)}
.btn.secondary:hover{background:var(--brand-bg-soft)}
.btn.ghost{background:transparent;color:var(--text-muted);border-color:transparent}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Карточка */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-3);box-shadow:var(--shadow-sm)}

/* Плашка статуса */
.badge{display:inline-flex;align-items:center;gap: var(--space-0);padding:3px 9px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.crit{background:var(--crit-bg);color:var(--crit)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.idle{background:var(--idle-bg);color:var(--idle)}

/* Таблица данных: плотная, цифры выравнены по разряду */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{background:var(--surface-2);color:var(--text-muted);font-size:var(--fs-xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:9px 12px;
  position:sticky;top:0}
.table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.table td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);white-space:nowrap}
.table tr:hover td{background:var(--surface)}

/* Обёртка для широкого контента — скроллит себя, а не страницу */
.scroll-x{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}

/* Доступность: не отключать фокус, уважать reduce-motion */
*:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}