/* Токены дизайн-системы Linetix. Значения перенесены из docs/14-DESIGN-SYSTEM.md
   один в один. Правило, из которого всё следует: интерфейс молчит, цвет
   принадлежит данным. Цвета статусов задаёт директор сервисного центра, и если
   хром тоже цветной, пользовательские статусы в нём тонут. */

:root {
  --ground: #FFFFFF;
  --surface: #F4F8F7;
  --surface-2: #EAEFEE;
  --ink: #141D1F;
  --ink-2: #3B4A4C;
  --muted: #6A7A7C;
  --line: #DDE5E4;
  --line-strong: #C6D2D1;
  --brand: #0E6A62;
  --brand-soft: #E2F0EE;

  /* Статусные цвета: приглушённая заливка плюс тёмный текст.
     Заливать чип в полный цвет нельзя — восемь насыщенных чипов режут глаз. */
  --status-green-bg: #E2F2E8;   --status-green-fg: #1E6A42;
  --status-amber-bg: #FBEDDB;   --status-amber-fg: #855000;
  --status-blue-bg: #E1ECFA;    --status-blue-fg: #16528E;
  --status-violet-bg: #EDE6F8;  --status-violet-fg: #573B8C;
  --status-red-bg: #FBE5E4;     --status-red-fg: #9B2924;
  --status-gray-bg: #E9EDEE;    --status-gray-fg: #475355;

  /* «Готово» и «Здав у ремонт». До 07.09 это была единственная залитая
     метка в системе; заказчик попросил «более нежную зелёную заливку», и
     значения взяты из его файла списка заказов (--status-ready-*). От
     обычного зелёного отличается более свежим оттенком, а не громкостью. */
  --status-green-strong-bg: #DDF5E5;  --status-green-strong-fg: #13773B;

  /* Терміново: по файлу карточки заказчика (urgent-badge) и его скрину от
     07.09 — светлее фон, ярче текст, розовая рамка. Полоса у номера в
     списке ярче текста: «чуть ярче красным», его слова. */
  --urgent-bg: #FEF2F2;  --urgent-fg: #B91C1C;  --urgent-line: #FECACA;  --urgent-stripe: #DC2626;

  /* Три отказа разведены оттенками красного: они означают разное, но все
     три значат «не приедет». Родство важнее различий, поэтому оттенки
     соседние, а не контрастные. */
  --status-wine-bg: #F2DDE3;    --status-wine-fg: #7B2140;
  --status-rose-bg: #FAE4E9;    --status-rose-fg: #A8455F;

  /* Финальный дизайн (видео 10): серый фон страницы, белые «островки».
     «Меньше белого» — слова заказчика. Островок — это .card на --ground. */
  --page-bg: #F3F6F7;
  --island-shadow: 0 1px 2px rgba(20, 29, 31, 0.04);

  /* Правки заказчика по ПК-версии (07.09): остров счётчиков чуть темнее
     страницы, строки списка через одну слегка затемнены, первый счётчик
     заказов — светлее мятный, чем плашка раздела. Зебра с 07.09 была
     #F8FAFA — заказчику почти невидима (17.09: «плитка заказов, где
     чередуется белый и с заливкой»), 18.09 стала #EEF3F2 и оказалась
     мятной (168°, S 17%) — одного цвета с подсветкой выданных заказов.
     19.09 заказчик: «этот зелёный сделать светло-светло-серым, а то
     сливается с выданными, непонятно, где выданный, где базовый цвет».
     Поэтому вес тот же (яркость 0,886, как у #EEF3F2 — просьба «заметнее»
     не откатывается), а оттенок убран: зелёный в списке теперь значит
     только «видане». Менять — вместе с --row-zebra в обоих тёмных блоках.

     21.09 он вернулся к этому же месту: «и этот серый слишком насыщенный,
     в палитре он называется F7 F7 F7… берёт на себя слишком много
     внимания». Тогда же назвал запасное значение — «если и он будет
     слишком насыщенно, тогда поставим 98».

     27.09 он его и попросил, со скрином палитры: «плитку заказов и прочего,
     где списки, сделай всё-таки 98 белым (всё равно тёмное мне)». Яркость
     98% это #FAFAFA — на скрине оно и стоит, RGB 250-250-250. Тёмную тему
     он не видел и не просил — там по-прежнему #1D1D1D. */
  --island-bg: #F5F8F8;     --island-line: #E1E8E7;
  --row-zebra: #FAFAFA;
  --cnt-first-bg: #EEF8F5;  --cnt-first-line: #C3E4DC;
  /* Шапка таблиц «М'ята» — выбор заказчика 05.10 (вариант 2 из картинок 03.10,
     docs/shots/design-03-10-thead): мятный фон, текст в цвет «Ремонтів». Он
     оговорился, что текст, может, сделаем не зелёным, «смотря как получится», —
     тогда меняется только --thead-fg (во всех трёх блоках). */
  --thead-bg: #EEF6F4;  --thead-fg: #0E6A62;  --thead-line: #CFE6E1;

  /* Разделы разводятся цветом — тоже из видео 10: заказы зелёным, заявки
     фиолетовым, клиенты тёмным. Цвет получают кнопка создания раздела,
     первый счётчик и активные плашки; хром остаётся нейтральным. */
  --sec-orders-bg: #E2F0EE;   --sec-orders-fg: #0E6A62;   --sec-orders-line: #BFDDD8;
  --sec-leads-bg: #EEF2FF;    --sec-leads-fg: #4338CA;    --sec-leads-line: #C7CFF5;
  /* «+ Швидка заявка» — «чуть-чуточку светлее, нежнее» (видео 13): светлее и
     спокойнее #4338CA, белый текст читается (контраст 5:1). */
  --sec-leads-quick: #6A64C2;
  --sec-clients-bg: #EEF2F6;  --sec-clients-fg: #2B3A4B;  --sec-clients-line: #C9D3DE;
  /* Склад (этап 5) — спокойный синий: не спорит ни с зелёными заказами,
     ни с красным «нема вільних», единственным громким цветом склада. */
  --sec-warehouse-bg: #EAF3FB; --sec-warehouse-fg: #1F5F99; --sec-warehouse-line: #C4DAEE;
  /* Каса (этап 6) — сдержанный фиолетовый: не зелёный и не красный, те в
     кассе значат «пришло» и «ушло»; глуше индиго заявок, чтобы разделы не
     путались. Текст на фоне 6,9:1 (считает tests/test_cash_shell.py). */
  --sec-cash-bg: #EFEBF8;      --sec-cash-fg: #5A3E9C;      --sec-cash-line: #D3C8EC;
  /* Продажі (этап 8) — оливковый: не зелёный ремонтов и не красный
     возвратов, не янтарь предупреждений. Текст на фоне 5,3:1. */
  --sec-sales-bg: #F2F5E4;     --sec-sales-fg: #5B6B1E;     --sec-sales-line: #D9E2B5;
  /* Сообщения клиенту в ленте заказа (этап 7). До 03.10 — тёплый янтарный
     (просьба 22.09: «свой цвет, чтобы не сливались с системными записями»).
     02.10 заказчик сказал, что янтарь сливается с оранжевыми чипами
     «Додаткова інформація» и «Зовнішній вигляд» в той же карточке, и попросил
     варианты; 03.10 выбрал «Небо» — «синий, но чуть светлее, чем на скрине».
     Отсюда фон и линия на тон светлее показанных (#EEF6FC / #CBE2F3), текст
     тоже светлее (#1A5E8F → #1F68A0), но не ниже 4,5:1 — 5,6:1 к фону
     (считает tests/test_sms_feed.py). Синий не спорит ни с зелёным брендом,
     ни с фиолетовым кассы, ни с зелёным и красным денег. */
  --ev-sms-bg: #F4F9FE;        --ev-sms-fg: #1F68A0;        --ev-sms-line: #D7E9F8;

  /* Левое меню — «Графіт» (выбор заказчика 03.10 из трёх тёмных вариантов,
     docs/shots/design-02-10/1-menu-desktop.png). Его слова 02.10: «админка
     слишком-слишком светлая… и левое подменю тоже светлое; два-три варианта
     в тёмной палитре, чтобы не конкурировало цветами с основным и немножко
     разбавляло». Фон — это --ink, цвет, которым в системе набран весь текст:
     новой краски в палитру не вводится. Цветное в меню одно — подсвеченный
     раздел (мятный), значки гаснут до цвета подписи.
     Контраст по WCAG, посчитан: подпись 11,1, приглушённое 5,9, активный
     пункт 7,5, инициалы на кружке 5,2, кружок к колонке 3,3.
     Тёмные ветки эти токены не переопределяют: графит и есть тёмный, и в
     тёмной теме меню выглядит так же. */
  --nav-bg: #141D1F;
  --nav-fg: #C7D2D1;
  --nav-muted: #8C9B9B;
  --nav-line: #263335;
  --nav-hover-bg: #1D282A;
  --nav-active-bg: #1E2E2C;
  --nav-active-fg: #5FCFC0;
  --nav-ini-bg: #137A70;
  --nav-ini-fg: #FFFFFF;

  /* Подсветка плиток и строк списков: выданные нежно-зелёным, просроченные
     красным, остальные белые. Заливка светлая, чтобы статус оставался главным. */
  --row-issued-bg: #F2FAF6;   --row-issued-line: #CFEADB;
  --row-overdue-bg: #FDF4F4;  --row-overdue-line: #F3D3D3;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Цифры набираются интерфейсным шрифтом, ровные колонки даёт tabular-nums,
     а не моноширинное начертание. Отдельный моношрифт убран сознательно: на
     Windows он приходит из Consolas с перечёркнутым нулём, и заказчик прямо
     сказал, что это режет глаз. Табличные цифры дают ту же ровную колонку в
     суммах и номерах, но нули остаются обычными. */
  --font-num: var(--font-ui);

  --text-body: 14px;
  --text-small: 11.5px;
  --text-title: 19px;
  --text-subtitle: 13px;

  --row-h: 38px;        /* строка таблицы с одной величиной */
  --row-h-double: 52px; /* строка с двумя величинами */
  --radius: 6px;
  --radius-card: 12px;
  --radius-chip: 100px;
  --sidebar-w: 184px;
  /* «Моя компанія» (этап 10). Цвета полос и значков плиток взяты из
     утверждённой картинки B (docs/brand/my-company-options/mc_shots.py), где
     они стояли захардкоженными: здесь они становятся токенами, чтобы тёмная
     тема и будущие правки шли одним местом. Полоса — насыщенная, заливка
     значка — приглушённая, как у статусных чипов. */
  --mc-1: #22C55E;  --mc-1-soft: #E6F7EC;
  --mc-2: #14B8A6;  --mc-2-soft: #E1F6F3;
  --mc-3: #8B5CF6;  --mc-3-soft: #F0EAFE;
  --mc-4: #3B82F6;  --mc-4-soft: #E6EEFE;
  --mc-5: #F59E0B;  --mc-5-soft: #FEF2DF;
  /* Тень плитки — то же значение, что у счётчиков без рамки (app.css). */
  --mc-tile-shadow: 0 1px 2px rgba(20,29,31,.05), 0 6px 16px rgba(20,29,31,.07);
  --mc-tile-line: transparent;

  --cell-pad-y: 9px;
  --cell-pad-x: 12px;
}

/* Тёмная тема заложена сразу, интерфейса переключения в MVP нет. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1113;
    --surface: #141A1C;
    --surface-2: #1B2325;
    --ink: #E7EFEE;
    --ink-2: #B6C5C4;
    --muted: #8A9A99;
    --line: #253030;
    --line-strong: #33403F;
    --brand: #4CBFB0;
    --brand-soft: #14302D;

    --status-green-bg: #14301F;   --status-green-fg: #7AD4A1;
    --status-amber-bg: #382910;   --status-amber-fg: #E3AC5B;
    --status-blue-bg: #11253B;    --status-blue-fg: #7FB5E9;
    --status-violet-bg: #241B39;  --status-violet-fg: #B394E1;
    --status-red-bg: #331716;     --status-red-fg: #E8918C;
    --status-gray-bg: #202829;    --status-gray-fg: #A4B2B1;

    --status-green-strong-bg: #163D28;  --status-green-strong-fg: #74D9A2;
    --urgent-bg: #3A1A1A;  --urgent-fg: #F49B9B;  --urgent-line: #5A2A2A;  --urgent-stripe: #F26565;
    --status-wine-bg: #2E1520;    --status-wine-fg: #E3899F;
    --status-rose-bg: #331A22;    --status-rose-fg: #E9A0B0;

    --page-bg: #090C0E;
    --island-shadow: none;
    --island-bg: #10161780;   --island-line: #253030;
    --row-zebra: #1D1D1D;
    --cnt-first-bg: #14302D;  --cnt-first-line: #1F4A45;
    --thead-bg: #14302D;  --thead-fg: #4CBFB0;  --thead-line: #1F4A45;
    --sec-orders-bg: #14302D;   --sec-orders-fg: #4CBFB0;   --sec-orders-line: #1F4A45;
    --sec-leads-bg: #1E1B3A;    --sec-leads-fg: #A5B4FC;    --sec-leads-line: #33307A;
    --sec-clients-bg: #1B2430;  --sec-clients-fg: #CBD5E1;  --sec-clients-line: #2F3E52;
    --sec-warehouse-bg: #13253A; --sec-warehouse-fg: #8EC1F0; --sec-warehouse-line: #24476B;
    --sec-cash-bg: #221B3D;      --sec-cash-fg: #B49BEA;      --sec-cash-line: #3B2F6B;
    --sec-sales-bg: #1E2410;     --sec-sales-fg: #C3D27A;     --sec-sales-line: #3A4520;
    --ev-sms-bg: #102434;        --ev-sms-fg: #93C8F0;        --ev-sms-line: #1E3B52;
    --row-issued-bg: #0F1F17;   --row-issued-line: #1E3A2C;
    --row-overdue-bg: #24140F;  --row-overdue-line: #4A2420;

    --mc-1: #4ADE80;  --mc-1-soft: #14301F;
    --mc-2: #2DD4BF;  --mc-2-soft: #12302C;
    --mc-3: #A78BFA;  --mc-3-soft: #231B3D;
    --mc-4: #60A5FA;  --mc-4-soft: #11253B;
    --mc-5: #FBBF24;  --mc-5-soft: #382910;
    /* В тёмной теме островам тень не рисуется (--island-shadow: none), а
       плитка на почти таком же фоне без рамки сливалась бы: вместо тени ей
       даётся линия. */
    --mc-tile-shadow: none;
    --mc-tile-line: var(--line);
  }
}

:root[data-theme="dark"] {
  --page-bg: #090C0E;
  --island-shadow: none;
  --island-bg: #10161780;   --island-line: #253030;
  --row-zebra: #1D1D1D;
  --cnt-first-bg: #14302D;  --cnt-first-line: #1F4A45;
  --thead-bg: #14302D;  --thead-fg: #4CBFB0;  --thead-line: #1F4A45;
  --sec-orders-bg: #14302D;   --sec-orders-fg: #4CBFB0;   --sec-orders-line: #1F4A45;
  --sec-leads-bg: #1E1B3A;    --sec-leads-fg: #A5B4FC;    --sec-leads-line: #33307A;
  --sec-clients-bg: #1B2430;  --sec-clients-fg: #CBD5E1;  --sec-clients-line: #2F3E52;
  --sec-warehouse-bg: #13253A; --sec-warehouse-fg: #8EC1F0; --sec-warehouse-line: #24476B;
  --sec-cash-bg: #221B3D;      --sec-cash-fg: #B49BEA;      --sec-cash-line: #3B2F6B;
  --sec-sales-bg: #1E2410;     --sec-sales-fg: #C3D27A;     --sec-sales-line: #3A4520;
  --ev-sms-bg: #102434;        --ev-sms-fg: #93C8F0;        --ev-sms-line: #1E3B52;
  --row-issued-bg: #0F1F17;   --row-issued-line: #1E3A2C;
  --row-overdue-bg: #24140F;  --row-overdue-line: #4A2420;
  --ground: #0D1113;
  --surface: #141A1C;
  --surface-2: #1B2325;
  --ink: #E7EFEE;
  --ink-2: #B6C5C4;
  --muted: #8A9A99;
  --line: #253030;
  --line-strong: #33403F;
  --brand: #4CBFB0;
  --brand-soft: #14302D;

  --status-green-bg: #14301F;   --status-green-fg: #7AD4A1;
  --status-amber-bg: #382910;   --status-amber-fg: #E3AC5B;
  --status-blue-bg: #11253B;    --status-blue-fg: #7FB5E9;
  --status-violet-bg: #241B39;  --status-violet-fg: #B394E1;
  --status-red-bg: #331716;     --status-red-fg: #E8918C;
  --status-gray-bg: #202829;    --status-gray-fg: #A4B2B1;

  --status-green-strong-bg: #163D28;  --status-green-strong-fg: #74D9A2;
  --urgent-bg: #3A1A1A;  --urgent-fg: #F49B9B;  --urgent-line: #5A2A2A;  --urgent-stripe: #F26565;
  --status-wine-bg: #2E1520;    --status-wine-fg: #E3899F;
  --status-rose-bg: #331A22;    --status-rose-fg: #E9A0B0;

  --mc-1: #4ADE80;  --mc-1-soft: #14301F;
  --mc-2: #2DD4BF;  --mc-2-soft: #12302C;
  --mc-3: #A78BFA;  --mc-3-soft: #231B3D;
  --mc-4: #60A5FA;  --mc-4-soft: #11253B;
  --mc-5: #FBBF24;  --mc-5-soft: #382910;
  --mc-tile-shadow: none;
  --mc-tile-line: var(--line);
}

/* 07.09, разбор ПК-версии заказчиком: «общий фон лучше оставить белым, как
   на дизайне, затемнение касалось только моб версии». На столе страница
   белая, острова читаются рамкой и тенью; серый остаётся телефону, где много
   блоков на одном экране. Тёмная тема выше по специфичности и не задета. */
@media (min-width: 761px) {
  :root { --page-bg: #FFFFFF; }
}

*, *::before, *::after { box-sizing: border-box; }

/* Safari на телефоне умеет сам раздувать шрифт в блоках («text autosizing»),
   и тогда содержимое перестаёт помещаться в свою колонку. Значение 100%
   выключает именно автоматическое вмешательство, а пальцами приблизить
   страницу по-прежнему можно — в отличие от none, которое отбирает и это. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Атрибут hidden обязан прятать. Правило браузера ставит display: none с
   нулевой специфичностью, и любой класс с собственным display его перебивает:
   кнопка .btn с display: inline-flex оставалась на экране, будучи hidden.
   Это не украшение, а условие того, что «спрятать» в скриптах вообще
   работает — и такую поломку глазами не видно, пока не начнёшь искать. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Серый фон, белые островки — финальный дизайн. Раздел задаёт свой цвет
     через data-section на body; по умолчанию — фирменный. */
  background: var(--page-bg);
  --sec-bg: var(--brand-soft);
  --sec-fg: var(--brand);
  --sec-line: var(--line-strong);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.45;
}

/* Кольцо фокуса обязано быть видимым. Доступность, не украшение. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Везде, где цифры выстраиваются в колонку: суммы, номера заказов, даты. */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Длинные коды — IMEI, серийные номера, артикулы. Шрифт тот же, разбирать
   символ за символом помогает разрядка, а не смена начертания. */
.code {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* В таблицах цифры ровные всегда: колонка суммы не должна прыгать
   оттого, что кто-то забыл поставить класс. */
table { font-variant-numeric: tabular-nums; }