/* Облик платформы: шрифты, цветовые токены, светлая и тёмная темы, каркас страницы.

   Значения токенов, размеры и каркас взяты из утверждённого прототипа экранов.

   Почему отдельным файлом от `app.css`: там описаны блоки экранов (таблицы,
   карточки, формы), здесь то, что есть на каждой странице до единого экрана.
   Файлы правятся по разным поводам, и вместе они переросли бы предел в 500 строк.

   Внешних ресурсов нет ни одного. Шрифты лежат в `static/fonts` и грузятся
   с самой платформы: сервер стоит на VPS, доступ к сторонним CDN не гарантирован,
   а заголовок, набранный системным шрифтом, это уже другой интерфейс. */

/* ── Шрифты прототипа ────────────────────────────────────────────────────────
   Bitter (заголовки), Golos Text (текст), IBM Plex Mono (числа и подписи).
   Взяты подмножества «кириллица» и «латиница»: интерфейс русский, латиница нужна
   артикулам и маркам. Bitter и Golos Text это переменные шрифты, один файл на все
   веса; у IBM Plex Mono веса отдельными файлами. Лицензия SIL OFL 1.1.
   `swap` намеренно: пока шрифт грузится, текст читается запасным. */

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static/fonts/bitter-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static/fonts/bitter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/golos-text-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/golos-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ── Цветовые токены: светлая тема ───────────────────────────────────────────
   Ниже сорока с лишним переменных, и это не запас на будущее: столько цветов
   реально стоит на экранах платформы. Каждый цвет в разметке обязан прийти
   отсюда, иначе в тёмной теме он останется светлым, и элемент со светлым фоном
   сядет посреди тёмной страницы.

   Вторая половина списка это псевдонимы коротких имён (`--bg`, `--card`,
   `--muted` и остальные): на них написаны существующие экраны. Псевдоним
   указывает на новый токен, поэтому тему переживает. */

:root {
  color-scheme: light;

  /* Текст */
  --ink: #14171C;
  --ink2: #3D4753;
  --steel: #5F6B78;
  --faint: #6B7581;

  /* Поверхности */
  --paper: #FFFFFF;
  --surf: #F4F6F8;
  --sunk: #EAEEF2;
  --rail: #F8FAFB;

  /* Границы */
  --line: #DCE2E8;
  --soft: #E9EDF1;

  /* Фирменный красный и его подложки */
  --red: #E20E17;
  --red-s: #FCE9EA;
  --red-b: #F3B9BC;

  /* Смыслы: успех, внимание, ссылка, отдельная сущность, нейтральное */
  --grn: #16694A;
  --grn-s: #E4F1EB;
  --amb: #8A6212;
  --amb-s: #F8EFDB;
  --blu: #1B4F8F;
  --blu-s: #E6EFF8;
  --vio: #6B4E9E;
  --vio-s: #EFEAF7;
  --gry: #6E7A87;
  --gry-s: #ECEFF2;

  --focus: #1B4F8F;

  /* Линии графиков: шесть различимых цветов на одной картинке */
  --l1: #1B4F8F;
  --l2: #16694A;
  --l3: #8A6212;
  --l4: #B0424A;
  --l5: #5B3E8F;
  --l6: #0F6E77;

  /* Каркас страницы */
  --nav-bg: var(--rail);
  --nav-ink: var(--ink2);
  --nav-on-bg: var(--red-s);
  --nav-on-ink: var(--red);
  --th-bg: var(--sunk);
  --row-hover: var(--surf);

  /* Псевдонимы коротких имён: на них написаны существующие экраны */
  --bg: var(--surf);
  --card: var(--paper);
  --muted: var(--steel);
  --ayak: var(--red);
  --ayak-dark: #B30B12;
  --ayak-s: var(--red-s);
  /* Текст поверх фирменного красного. В тёмной теме красный светлеет, и белая
     надпись на нём перестаёт читаться, поэтому цвет свой, а не `#fff`. */
  --on-ayak: #FFFFFF;
  --bad: var(--red);
  --bad-s: var(--red-s);
  --bad-b: var(--red-b);
  --good: var(--grn);
  --good-s: var(--grn-s);
  --good-b: #CCEADD;
  --warn: var(--amb);
  --warn-s: var(--amb-s);
  --warn-b: #F0DCBE;
  --night: var(--vio);
  --night-s: var(--vio-s);

  /* Тень не цвет, но живёт по тем же правилам темы */
  --sh: 0 1px 2px rgba(20, 23, 28, .05), 0 6px 20px -14px rgba(20, 23, 28, .28);
}

/* Тёмная тема системная. Выбранная руками светлая её перебивает, отсюда
   `:not([data-theme="light"])`, а не голый `:root`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E8EBEF;
    --ink2: #BAC3CD;
    --steel: #94A0AD;
    --faint: #94A0AD;
    --paper: #0F1317;
    --surf: #161B21;
    --sunk: #1D242B;
    --rail: #12171C;
    --line: #28303A;
    --soft: #212831;
    --red: #FF6B63;
    --red-s: #301A1A;
    --red-b: #5A2A28;
    --grn: #5FBF95;
    --grn-s: #132520;
    --amb: #D7A54A;
    --amb-s: #2A2113;
    --blu: #7FB0E8;
    --blu-s: #142130;
    --vio: #B49BE0;
    --vio-s: #211B30;
    --gry: #94A0AD;
    --gry-s: #1E242B;
    --focus: #7FB0E8;
    --l1: #6FA8E8;
    --l2: #57C296;
    --l3: #DFAE52;
    --l4: #F0827F;
    --l5: #B79BE8;
    --l6: #4BB8C4;
    --ayak-dark: #FF9B95;
    --on-ayak: #1A1012;
    --good-b: #24543F;
    --warn-b: #55431D;
    --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -14px rgba(0, 0, 0, .9);
  }
}

/* Тёмная тема, выбранная переключателем: те же значения при любом системном. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8EBEF;
  --ink2: #BAC3CD;
  --steel: #94A0AD;
  --faint: #94A0AD;
  --paper: #0F1317;
  --surf: #161B21;
  --sunk: #1D242B;
  --rail: #12171C;
  --line: #28303A;
  --soft: #212831;
  --red: #FF6B63;
  --red-s: #301A1A;
  --red-b: #5A2A28;
  --grn: #5FBF95;
  --grn-s: #132520;
  --amb: #D7A54A;
  --amb-s: #2A2113;
  --blu: #7FB0E8;
  --blu-s: #142130;
  --vio: #B49BE0;
  --vio-s: #211B30;
  --gry: #94A0AD;
  --gry-s: #1E242B;
  --focus: #7FB0E8;
  --l1: #6FA8E8;
  --l2: #57C296;
  --l3: #DFAE52;
  --l4: #F0827F;
  --l5: #B79BE8;
  --l6: #4BB8C4;
  --ayak-dark: #FF9B95;
  --on-ayak: #1A1012;
  --good-b: #24543F;
  --warn-b: #55431D;
  --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px -14px rgba(0, 0, 0, .9);
}

/* ── Основание ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Вход и страница ошибки живут без панели: им нужен один блок по центру. */
body.centered {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--surf);
}

/* ── Каркас: шапка, панель 224px, полотно ────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 224px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.top .sp { flex: 1; }
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: Bitter, Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand i { width: 9px; height: 9px; background: var(--red); border-radius: 2px; display: block; align-self: center; }
.brand span {
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
}
.who { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--faint); white-space: nowrap; }
.who b { color: var(--ink); font-weight: 500; }
.who span { color: var(--faint); }
.logout { margin: 0; }

.tbtn {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink2);
}
.tbtn:hover { background: var(--sunk); }
/* Переключатель панели разделов. Виден на любой ширине: панель сворачивается
   по желанию, а не только прячется на узком экране. */
.navtog { display: inline-block; }

/* Панель липкая и живёт свою высоту, а не высоту строки сетки. Без
   `align-self: start` ячейка растягивается по полотну, `position: sticky`
   не за что зацепиться, и на длинном списке панель уезжает вверх вместе
   со страницей. 50px это высота шапки, она тоже липкая. */
nav.side {
  background: var(--nav-bg);
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  position: sticky;
  top: 50px;
  align-self: start;
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}

/* Свёрнутая панель: колонки в сетке больше нет, полотно занимает всю ширину.
   Состояние живёт на `<html>`, потому что ставится до первой отрисовки. */
:root[data-panel="skryta"] .app { grid-template-columns: 1fr; }
:root[data-panel="skryta"] nav.side { display: none; }
nav.side .grp {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 12px 10px 5px;
}
nav.side a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--nav-ink);
  font-size: 13.5px;
}
nav.side a:hover { background: var(--sunk); color: var(--ink); }
nav.side a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); font-weight: 500; }
nav.side a .n {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
nav.side a.on .n { color: var(--nav-on-ink); }

/* `min-width: 0` держит широкие таблицы внутри колонки: без него ячейка сетки
   растягивается по самому широкому содержимому и полотно уезжает за край
   вместе с панелью. Горизонтальную прокрутку берёт на себя сам блок
   (`.card { overflow-x: auto }` в `app.css`), а не страница. */
main { padding: 26px 30px 72px; min-width: 0; overflow-x: hidden; }

/* Полоса прокрутки вокруг широкой таблицы.

   Полотно запрещает горизонтальную прокрутку себе (строка выше), поэтому
   широкая таблица без обёртки на узком окне теряет правые колонки, и доскроллить
   до них нечем. Каждая широкая таблица обёрнута своей полосой: прокручивается
   таблица, а не страница, боковая панель и шапка остаются на месте. */
.tscroll { overflow-x: auto; overflow-y: hidden; }
.tscroll > table { min-width: max-content; }

/* ── Узкий экран: панель сворачивается ───────────────────────────────────── */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .top { gap: 9px; padding: 7px 11px; flex-wrap: wrap; height: auto; min-height: 50px; }
  .brand span, .who span { display: none; }
  nav.side {
    display: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 6px 8px 12px;
    /* Здесь панель выпадает над полотном, а не стоит колонкой: липкость ей
       не нужна, а высота шапки на узком экране плавает от переноса строки. */
    position: static;
    max-height: none;
  }
  :root[data-panel="otkryta"] nav.side { display: block; }
  main { padding: 16px 13px 50px; }
}