/* Собран из design/kernel.py командой `python3 design/build_ui_css.py`.
   Руками не правится: отпечаток ядра стоит под предикатом состояния,
   и правка здесь разведёт интерфейс с артбордами. */

/* ── Токены. Обе ветки фирменные: дизайн-код Venkon Group.
   Руководство 2026: Venkon Blue #0051FF, Dark #101011, Light #F4F5FA; старый #007EFF и оранжевый сняты (запуск 08.09).
   Красный тревоги — вынужденное расширение: в брендбуке его нет, а «просрочено»
   и «отказ» в CRM обязаны отличаться от предупреждения. ───────────────────── */
.app {
  /* Светлая ветка переписана 24.08 по разбору визионера: «чтобы она не
     выглядела как приёмный покой». Болезнь была не в цветах, а в их
     отсутствии — фон, панель и линия шли тремя оттенками одного голубого,
     и экран читался стерильной сеткой без единого тёплого пятна.

     Что изменено и почему. Фон уведён в тёплую кость (#F7F6F3 вместо
     холодного #F4F8FD): белая панель на нём становится панелью, а не
     продолжением стены. Линия перестала быть голубой — серая линия не
     конкурирует с синим действием и не красит таблицу в цвет ссылки.
     Текст углублён: #1F1D1C против #2C2A29 даёт на кости 15:1 вместо 12:1,
     и мелкая подпись перестаёт плыть.

     Акценты остались брендовыми, но обрели фон, которого им не хватало:
     подложка находки, метки и полосы теперь тёплые, а не белёсые. */
  /* Светлая ветка переведена в холодную сторону 26.08 решением визионера:
     фон светло-голубой. Один токен здесь не меняется в одиночку — тёплые
     нейтрали (#FBFAF7, #E4E0D8) на голубом фоне дают грязь на стыке, поэтому
     подложки, линии и тени сдвинуты той же рукой. Акцент остался брендовым:
     он и был синим, и теперь фон ему родня, а не спор. */
  /* `--muted` потемнён 10.09 решением визионера: на белом он держал 4,99, а на
     подтонированном (плашки, `--line2`, подложки находок) садился до 4,25–4,45
     при норме 4,5, и пол дизайна называл 106 подписей ниже нормы — все одним
     этим цветом. Четыре единицы на канал глазом не видны, но порог берут на
     самом тёмном из наших фонов. Вторичный текст на подтонированном не
     запрещали: запрет пришлось бы держать в двух десятках мест, а цвет —
     в одном. */
  /* 29.09: значения пакета редизайна (`docs/forush-redesign/tokens.css`).
     Прежние имена сведены к его токенам один к одному. */
  --bg: #F4F5FA;      --panel: #ffffff;    --panel2: #F7F8FB;
  --ink: #1F2025;     --ink2: #4A4C55;     --muted: #6E717C;
  --line: #ECEEF3;    --line2: #F0F1F5;
  --high: #B42318;    --high-bg: #FEE4E2;
  --medium: #A14D02;  --medium-bg: #FEF0C7;
  --mass: #0051FF;   --mass-work: #0041CC;    --mass-bg: #EEF3FF;
  --low: #6E717C;     --low-bg: #EEF0F5;
  --focus: #0051FF;

  /* Токены пакета редизайна — имена и значения как в `tokens.css`. */
  --brand-blue: #0051FF;  --brand-blue-text: #0041CC;  --brand-blue-soft: #EEF3FF;
  --brand-blue-past: #99B9FF;  --brand-black: #101011;
  --bg-page: #F4F5FA;  --bg-surface: #FFFFFF;  --bg-subtle: #F7F8FB;  --bg-hover: #E9EBF2;
  --line-strong: #ECEEF3;
  --rail-bg: #101011;  --rail-icon: #8A8D97;  --rail-hover: #26272B;
  --rail-active: #2A2B31;  --rail-app-btn: #1E1F23;
  --text-primary: #1F2025;  --text-body: #2A2B31;  --text-secondary: #4A4C55;
  --text-muted: #6E717C;  --text-faint: #8A8D97;  --text-disabled: #B8BBC5;
  --fx-bg: #101011;  --fx-kicker: #99B9FF;  --fx-sub: #B8BBC5;  --fx-btn: rgba(255,255,255,.12);
  --state-late: #F04438;  --state-late-text: #B42318;  --state-wait: #F79009;
  --state-ok: #12B76A;  --state-idle: #B8BBC5;
  --dir-erp-bg: #D6E2FF;  --dir-erp-fg: #0041CC;
  --dir-buh-bg: #D3F0EC;  --dir-buh-fg: #0B6E63;
  --dir-zup-bg: #E6E0FE;  --dir-zup-fg: #5B3FD6;
  --dir-roz-bg: #FCE7D4;  --dir-roz-fg: #A14D02;
  --dir-none-bg: #EEF0F5; --dir-none-fg: #4A4C55;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-page-title: 26px;  --fw-page-title: 700;  --ls-page-title: -0.02em;
  --fs-card-title: 16px;  --fw-card-title: 600;
  --fs-body: 14px;  --fs-meta: 13px;  --fs-label: 12px;  --fs-group: 12px;
  --r-card: 16px;  --r-button: 9px;  --r-chip: 6px;  --r-monogram: 10px;
  --rail-w: 60px;  --topbar-h: 60px;  --page-pad-x: 32px;  --gap: 18px;
  --card-pad: 22px 24px;  --aside-w: 340px;  --btn-h: 38px;  --row-min-h: 44px;
  --tabbar-h: 84px;
  /* Градиент Venkon, вариант 3 «фокус + меню» — решение визионера 29.09 на канве
     редизайна (артборд GradientPlay): фокус-блок — синий луч из угла на чёрном,
     меню книзу уходит в тёмно-синий, кнопка приложений — бренд-градиентом.
     Полосы прогресса остаются плоскими (вариант 4 не взят). */
  --grad-blue: #345DFA;  --grad-blue-deep: #1C36A0;  --grad-navy: #0E1733;
  --fx-grad: radial-gradient(120% 180% at 100% 0%, rgba(52,93,250,.7) 0%,
    rgba(28,54,160,.4) 38%, rgba(16,16,17,0) 70%), #101011;
  --rail-grad: linear-gradient(180deg, #101011 0%, #101011 55%, #0E1733 100%);
  --tabbar-grad: linear-gradient(180deg, #101011 0%, #0E1733 100%);
  --appbtn-grad: linear-gradient(135deg, #345DFA 0%, #1C36A0 100%);
  --appbtn-grad-hover: linear-gradient(135deg, #4A6FFB 0%, #2440B8 100%);
  --shadow-pop: 0 24px 60px rgba(16,16,17,.25);
  --shadow-sheet: 0 -12px 40px rgba(16,16,17,.2);
  --shadow: 0 1px 2px rgba(20,40,70,.05), 0 8px 24px rgba(20,40,70,.08);
  --shadow-sm: 0 1px 2px rgba(20,40,70,.07);
  /* Затемнение под слоем поверх содержимого и боковой край того, что выезжает
     сбоку. Оба не выводятся из цветов темы: `--ink` в тёмной ветке светлый,
     `--bg` в светлой светлый, и ни один не работает в обе стороны. Ядерная
     `--shadow` падает вниз, а выехавшему ящику нужен край слева-направо. */
  --scrim: rgba(16,16,17,.32);
  --shadow-side: 18px 0 48px rgba(14,26,42,.18);
}
/* Тёмная ветка того же кода: синий поднят на два шага — исходный #007EFF
   на графитовом фоне садится по контрасту. */
.app[data-theme="dark"] {
  --bg: #101011;      --panel: #191A1D;    --panel2: #141517;
  --ink: #F4F5FA;     --ink2: #C3C6D1;     --muted: #8A8FA2;
  --line: #2A2C33;    --line2: #202227;
  --high: #FF6B5C;    --high-bg: rgba(255,107,92,.18);
  --medium: #E0A040;  --medium-bg: rgba(224,160,64,.16);
  --mass: #4D7FFF;   --mass-work: #7A9EFF;    --mass-bg: rgba(0,81,255,.22);
  --low: #7A8998;     --low-bg: rgba(107,122,138,.16);
  --focus: #7A9EFF;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,20,45,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  /* Плотнее светлого: на тёмном фоне затемнение в треть не отделяет слой, а
     пачкает его — граница читается тенью, а не разницей яркости. */
  --scrim: rgba(0,0,0,.58);
  --shadow-side: 18px 0 48px rgba(0,0,0,.5);
}

.app { --row: 36px; --pad: 12px; }
.app[data-density="compact"] { --row: 32px; --pad: 8px; }

/* ── Шкала ──────────────────────────────────────────────────────────────
   Шаг четыре — единственная арифметика, по которой сходятся отступы всех
   слоёв. До неё каждый экран выбирал число сам, и на карточке клиента их
   набралось тридцать шесть: 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16 подряд.
   Разницу в пиксель глаз не читает как решение — он видит дрожание, и
   ровно так это назвал визионер: «слова криво выровнены и прочее».

   Кегли — лестница от базовых тринадцати с шагом около четверти. Полукегли
   (11.5, 12.5, 13.5) сняты: полпикселя не различает никто, а ритм ломается.

   Новое правило пишется токеном. Старое сводится, когда экран трогают: снос
   тридцати шести чисел разом сдвинул бы вёрстку там, где её никто не смотрит
   в этот заход. */
.app {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --t1: 11px; --t2: 13px; --t3: 15px; --t4: 18px; --t5: 22px; --t6: 28px;
  /* Скругления той же рукой, что и отступы. До ступени д0.2 радиус выбирал
     каждый экран: семнадцать разных чисел от 1 до 999, и разница в пиксель
     читалась как дрожание, а не как решение. Пять ступеней покрывают всё:
     мелкое (поле, чек), обычное (кнопка, чип), панель, карточка, пилюля. */
  --r1: 4px; --r2: 6px; --r3: 8px; --r4: 12px; --rp: 999px;
  /* Интерлиньяж и трекинг — тоже токен: тридцать восемь значений высоты
     строки на проект означали, что её никто не выбирал. */
  --lh1: 1.25; --lh2: 1.45;
  --ls: -.003em;
}

/* ── База ──────────────────────────────────────────────────────────────── */
.app * { box-sizing: border-box; }
.app {
  width: 1440px; min-height: 900px; display: flex;
  /* Кегль поднят 25.08: «У нас же будет крупнее шрифт, да, я надеюсь?» и
     «чтобы шрифт был красивый, крупный» — просили дважды в одну минуту.
     Четырнадцать читались молодыми глазами и не читались всеми остальными,
     а система эта — на весь рабочий день. Строка чуть плотнее (1.45 против
     1.47), чтобы прибавка кегля не растянула списки в высоту. */
  font: 400 14px/1.45 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;  /* 29.09: кегль строки пакета редизайна, --fs-body */
  letter-spacing: -.003em;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.app a { color: var(--mass-work); text-decoration: none; }
.app a:hover { color: var(--ink); text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; }
/* Заголовок раздела. Капс снят 28.08: семьсот прописных узлов ставили весь
   экран в один регистр, и заголовок не отличался от приписки рядом с ним —
   обе были капсом и обе серые. Теперь разделяет вес и цвет.
   `.u--n` — приписка справа (счётчик, единица, пояснение): она осталась
   тихой, а заголовок вышел вперёд. */
.u { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink2); }
.u--n { font-weight: 400; color: var(--muted); }

/* ── Рельс ─────────────────────────────────────────────────────────────── */
.rail {
  flex: 0 0 184px; background: var(--panel2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 12px 0;
}
.rail__brand { display: flex; align-items: center; gap: 8px; padding: 4px 16px 12px; }
.rail__mark { display: none; }
.rail__vk { width: 22px; height: 22px; object-fit: contain; }
.rail__name { font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.rail__tenant { margin-left: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 2px 4px; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; overflow: hidden; }
.nav__label { padding: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); }
.nav__item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px;
  border-radius: var(--r2); color: var(--ink2); font-size: 13px; cursor: pointer; }
.nav__item:hover { background: var(--line2); color: var(--ink); }
.nav__item--on { background: var(--mass-bg); color: var(--mass-work); font-weight: 600; }
.nav__item svg { flex: 0 0 16px; }
.nav__n { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav__item--on .nav__n { color: var(--mass-work); }
.rail__foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--line); }
.rail__me { display: flex; align-items: center; gap: 8px; }
.ava { width: 26px; height: 26px; border-radius: 50%; background: var(--low-bg); color: var(--ink2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: 0 0 26px; }
.rail__meta { line-height: 1.25; overflow: hidden; }
.rail__meta b { font-size: 13px; font-weight: 600; display: block; }
.rail__meta span { font-size: 13px; color: var(--muted); }

/* ── Верхняя полоса ────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs b { color: var(--ink); font-weight: 600; }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 320px; height: 32px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel2);
  color: var(--muted); font-size: 13px; }
.search kbd { margin-left: auto; font: 500 11px/1 "IBM Plex Mono", monospace; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r1); padding: 3px 4px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel);
  color: var(--ink); font: 600 13px/1 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn--p { background: var(--mass-work); border-color: var(--mass-work); color: #fff; font-weight: 600; }
.btn--p:hover { filter: brightness(1.08); }
.btn--d { color: var(--high); }
.btn--i { width: 32px; padding: 0; justify-content: center; }
.btn--s { height: 28px; padding: 0 8px; font-size: 13px; border-radius: var(--r2); }
.unit, .tz { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r2); font-size: 13px; color: var(--muted); white-space: nowrap; }
.unit b { color: var(--ink); font-weight: 600; }

/* ── Полотно страницы ──────────────────────────────────────────────────── */
.page { flex: 1; overflow: hidden; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.phead { display: flex; align-items: flex-start; gap: 16px; }
.phead h1 { margin: 0; font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.phead .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.phead__act { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); }
.panel__h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel__h h2 { margin: 0; font-size: 13px; font-weight: 600; }
.panel__h .u { font-size: 11px; }
.panel__b { padding: 16px; }

/* ── Полоса видов и фильтров ───────────────────────────────────────────── */
.views { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.view { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px;
  color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.view:hover { color: var(--ink); }
.view--on { color: var(--ink); font-weight: 600; border-bottom-color: var(--mass); }
.view__n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r4); background: var(--panel); font-size: 13px; color: var(--ink2); }
.fchip b { font-weight: 600; color: var(--ink); }
.fchip--add { border-style: dashed; color: var(--muted); }
.fchip__x { color: var(--muted); font-size: 13px; line-height: 1; }

/* ── Таблица ───────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; padding: 0 12px 8px; font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 0 12px; height: var(--row); border-bottom: 1px solid var(--line2); vertical-align: middle; white-space: nowrap; }
.tbl tr:hover td { background: var(--panel2); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .name { font-weight: 600; }
.tbl .dim { color: var(--muted); }
.tbl__sel { width: 34px; }
.cb { width: 14px; height: 14px; border: 1.5px solid var(--line); border-radius: var(--r1); display: inline-block; vertical-align: middle; }
.cb--on { background: var(--mass-work); border-color: var(--mass-work); }

/* ── Бейджи, чипы, полосы ──────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--rp);
  background: var(--low-bg); color: var(--muted); white-space: nowrap; }
/* Тревога — заливкой, предупреждение — обводкой: различаются формой,
   а не только оттенком, и переживают проектор с плохой цветопередачей. */
.badge--mass { background: var(--mass-bg); color: var(--mass-work); }
.badge--high { background: var(--high); color: #fff; }
.badge--med { background: transparent; color: var(--medium); box-shadow: inset 0 0 0 1.5px var(--medium); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--rp); padding: 2px 8px; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.bar { height: 5px; border-radius: var(--r1); background: var(--line2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r1); background: var(--mass); }

/* ── Источник факта: владелец записи ───────────────────────────────────── */
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.src--1c { color: var(--medium); }

/* ── Пустое состояние ──────────────────────────────────────────────────── */
.empty { border: 1px dashed var(--line); border-radius: var(--r3); padding: 16px; text-align: center;
  color: var(--muted); font-size: 13px; }