/* ===========================================================================
   FulSystem — фирменная тема панели по гайдбуку (V4 от 13.08.2026).

   Как это работает. Панель написана на своих токенах (--dp-*), и переписывать
   ради нового вида все страницы не нужно: здесь сначала объявляются токены
   гайдбука (три темы), а потом на них ПЕРЕВОДЯТСЯ токены панели. Один файл —
   и весь интерфейс меняет вид, а разметка остаётся прежней.

   Главное отличие от прежнего вида: синий #0078D4 вместо фиолетового, графит
   #1F2126 вместо сине-чёрного, границы вместо теней, радиусы 6 px у кнопок и
   полей, 10 px у карточек.

   Подключается ТОЛЬКО когда включён новый вид (переменная PANEL_THEME=fulsystem),
   поэтому рабочая панель до решения владельца выглядит по-прежнему.
   =========================================================================== */

/* --- Токены гайдбука: тёмная тема (основная) ---------------------------- */
:root, html[data-theme="dark"]{
  --fs-bg:#1F2126; --fs-surface:#2A2E34; --fs-panel:#24272C; --fs-elev:#32363D;
  --fs-border:#3B4048; --fs-border-2:#3B4048; --fs-border-soft:#2F3339;
  --fs-head:#1A1C20; --fs-deep:#16181C; --fs-track:#32363D;
  --fs-side:#16181C; --fs-side-text:#FFFFFF; --fs-side-text-2:#C4CAD3;
  --fs-side-muted:#8A96A3; --fs-side-border:#2F3339; --fs-side-active:#22252A;
  --fs-text:#E9EDF2; --fs-text-2:#9AA4B0; --fs-text-3:#8A96A3;
  --fs-blue:#0078D4; --fs-blue-hover:#0069BE; --fs-blue-text:#4DAAFC;
  --fs-blue-soft:rgba(0,120,212,.16);
  --fs-ok:#3FB950; --fs-warn:#FFB000; --fs-err:#F14C4C; --fs-off:#5C646E;
  --fs-ok-b:rgba(63,185,80,.14); --fs-warn-b:rgba(255,176,0,.14);
  --fs-err-b:rgba(241,76,76,.14); --fs-blue-b:rgba(0,120,212,.16);
  --fs-shadow-1:0 2px 6px rgba(0,0,0,.34), 0 18px 34px -12px rgba(0,0,0,.56);
}

/* --- Средняя тема: компромисс для долгих смен ------------------------------ */
html[data-theme="dim"]{
  --fs-bg:#33383F; --fs-surface:#3C424A; --fs-panel:#444A53; --fs-elev:#515863;
  --fs-border:#555D68; --fs-border-2:#616974; --fs-border-soft:#4B525B;
  --fs-head:#2D323A; --fs-deep:#2D323A; --fs-track:#515863;
  --fs-side:#2D323A; --fs-side-text:#F5F8FA; --fs-side-text-2:#D4DCE4;
  --fs-side-muted:#B1BBC6; --fs-side-border:#4B525B; --fs-side-active:#3A404A;
  --fs-text:#F5F8FA; --fs-text-2:#C1CAD5; --fs-text-3:#B1BBC6;
  --fs-blue-text:#95CDFF; --fs-blue-soft:rgba(0,120,212,.26);
  --fs-ok:#66D77A; --fs-warn:#FFC95C; --fs-err:#F97C7C; --fs-off:#868F9B;
  --fs-ok-b:rgba(102,215,122,.16); --fs-warn-b:rgba(255,201,92,.16);
  --fs-err-b:rgba(249,124,124,.16); --fs-blue-b:rgba(0,120,212,.26);
  --fs-shadow-1:0 2px 6px rgba(0,0,0,.30), 0 18px 34px -12px rgba(0,0,0,.48);
}

/* --- Светлая тема: дневная работа --------------------------------------- */
html[data-theme="light"]{
  --fs-bg:#F3F4F5; --fs-surface:#FFFFFF; --fs-panel:#ECEDEE; --fs-elev:#F9FAFA;
  --fs-border:#DEDFE0; --fs-border-2:#CDCFD0; --fs-border-soft:#E9EAEB;
  --fs-head:#FAFBFB; --fs-deep:#16181C; --fs-track:#E4E5E6;
  --fs-side:#FAFBFB; --fs-side-text:#16181C; --fs-side-text-2:#4A545F;
  --fs-side-muted:#4A545F; --fs-side-border:#DEDFE0; --fs-side-active:#EBECED;
  --fs-text:#16181C; --fs-text-2:#4A545F; --fs-text-3:#5A6472;
  --fs-blue-text:#005A9E; --fs-blue-soft:rgba(0,120,212,.10);
  --fs-ok:#1A7F37; --fs-warn:#9A6700; --fs-err:#C4342F; --fs-off:#8A96A3;
  --fs-ok-b:rgba(26,127,55,.10); --fs-warn-b:rgba(154,103,0,.10);
  --fs-err-b:rgba(196,52,47,.10); --fs-blue-b:rgba(0,120,212,.10);
  --fs-shadow-1:0 1px 3px rgba(19,26,38,.09), 0 10px 20px -8px rgba(19,26,38,.20);
}

/* --- Перевод панели на токены гайдбука ---------------------------------- */
/* Токены панели не удаляются, а переопределяются: разметка страниц не знает о
   смене вида, и откат — это снятие одного файла. */
:root, html[data-theme="dark"], html[data-theme="dim"], html[data-theme="light"]{
  --dp-bg-app:var(--fs-bg);
  --dp-surface:var(--fs-surface);
  --dp-surface-2:var(--fs-panel);
  --dp-border:var(--fs-border);
  --dp-border-strong:var(--fs-border-2);

  --dp-ink:var(--fs-text);
  --dp-text:var(--fs-text);
  --dp-text-2:var(--fs-text-2);
  --dp-muted:var(--fs-text-3);
  --dp-text-disabled:var(--fs-off);

  /* Синий вместо фиолетового — главное правило гайдбука: синий занимает
     10–20 % площади (кнопки, ссылки, активные состояния), фиолетовый запрещён. */
  --dp-accent:var(--fs-blue);
  --dp-accent-hover:var(--fs-blue-hover);
  --dp-accent-050:var(--fs-blue-soft);
  --dp-accent-text:var(--fs-blue-text);
  --dp-accent-soft:var(--fs-blue);
  --dp-ring:rgba(0,120,212,.42);

  /* Границы вместо теней: тень уровня 1 остаётся только у карточек в светлой теме. */
  --dp-shadow:0 0 0 0 rgba(0,0,0,0);
  --dp-shadow-pop:var(--fs-shadow-1);

  --ok-t:var(--fs-ok);   --ok-b:var(--fs-ok-b);
  --warn-t:var(--fs-warn); --warn-b:var(--fs-warn-b);
  --dang-t:var(--fs-err);  --dang-b:var(--fs-err-b);
  --info-t:var(--fs-blue-text); --info-b:var(--fs-blue-b);
  --neu-t:var(--fs-text-2); --neu-b:var(--fs-border-soft);
  --teal:var(--fs-ok);
  --ok-soft:var(--fs-ok); --warn-soft:var(--fs-warn);
  --dang-soft:var(--fs-err); --info-soft:var(--fs-blue-text);
  --ok:var(--fs-ok); --okbg:var(--fs-ok-b);
  --err:var(--fs-err); --errbg:var(--fs-err-b);

  /* Меню: у гайдбука своя тема боковой панели, она темнее рабочей области. */
  --sb-bg:var(--fs-side);
  --sb-text:var(--fs-side-text-2);
  --sb-muted:var(--fs-side-muted);
  --sb-hover:rgba(255,255,255,.05);
  --sb-active-bg:var(--fs-blue-soft);
  --sb-active-text:var(--fs-blue-text);
  --sb-border:var(--fs-side-border);
  --sb-hover-line:var(--fs-blue);
}
html[data-theme="light"]{
  --sb-hover:rgba(0,0,0,.04);
  --sb-active-text:var(--fs-blue-text);
}

/* --- Акцент (гайдбук V5, раздел 23) -------------------------------------- */
/* Цвет действия вынесен в отдельные переменные и меняется ОДНИМ атрибутом
   data-accent на <html>. Ни одна страница при этом не переписывается: кнопки,
   ссылки, активный пункт меню, рамка фокуса и значок в шапке читают переменные.
   Статусные цвета (готово / ожидание / ошибка) акцент НЕ меняет — это правило
   гайдбука, иначе «готово» и «акцент» сливаются.

   По умолчанию для всех — «полностью индиго» (решение владельца 14.08.2026:
   «поставь для всех изначальный цвет полный индиго, а потом если людям не
   понравится — исправят на другой»). Сменить на любой другой = поставить
   атрибут, например <html data-accent="teal-full">. */
:root{  /* полностью индиго — стоит по умолчанию */
  --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-on-light:#3D4FB8; --acc-on-dark:#8395F5;
  --acc-soft:rgba(75,95,208,.16); --acc-b:rgba(75,95,208,.16);
}
html[data-accent="blue"]{  /* базовый синий гайдбука */
  --acc:#0078D4; --acc-hover:#0069BE; --acc-on-light:#005A9E; --acc-on-dark:#4DAAFC;
  --acc-soft:rgba(0,120,212,.16); --acc-b:rgba(0,120,212,.16);
}
html[data-accent="duo"]{  /* кнопки синие, плитки индиго */
  --acc:#0078D4; --acc-hover:#0069BE; --acc-on-light:#3D4FB8; --acc-on-dark:#8395F5;
  --acc-soft:rgba(75,95,208,.16); --acc-b:rgba(75,95,208,.16);
}
html[data-accent="indigo"]{  /* плитки и ссылки индиго, кнопки синие */
  --acc:#0078D4; --acc-hover:#0069BE; --acc-on-light:#3D4FB8; --acc-on-dark:#8395F5;
  --acc-soft:rgba(75,95,208,.16); --acc-b:rgba(75,95,208,.16);
}
html[data-accent="indigo-light"]{  /* светлее и воздушнее */
  --acc:#6C7FE8; --acc-hover:#5A6DDD; --acc-on-light:#4757C4; --acc-on-dark:#A9B4F7;
  --acc-soft:rgba(131,149,245,.16); --acc-b:rgba(131,149,245,.16);
}
html[data-accent="violet"]{  /* плитки и ссылки фиолетовые (#6152C9), кнопки синие */
  --acc:#0078D4; --acc-hover:#0069BE; --acc-on-light:#5344AF; --acc-on-dark:#A79CF5;
  --acc-soft:rgba(97,82,201,.16); --acc-b:rgba(97,82,201,.16);
}
html[data-accent="green"]{  /* плитки и маркеры зелёные */
  --acc:#0078D4; --acc-hover:#0069BE; --acc-on-light:#1F7A45; --acc-on-dark:#4CC276;
  --acc-soft:rgba(46,158,91,.16); --acc-b:rgba(46,158,91,.16);
}
html[data-accent="green-indigo"]{  /* кнопка синяя, ссылка индиго, плитка зелёная */
  --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-on-light:#1F7A45; --acc-on-dark:#4CC276;
  --acc-soft:rgba(46,158,91,.16); --acc-b:rgba(46,158,91,.16);
}
html[data-accent="cyan"]{  /* бирюза */
  --acc:#00B8D4; --acc-hover:#00A2BA; --acc-on-light:#046B7C; --acc-on-dark:#2ED4EC;
  --acc-soft:rgba(0,184,212,.16); --acc-b:rgba(0,184,212,.16);
}
html[data-accent="teal"]{  /* морская волна */
  --acc:#0E8A8A; --acc-hover:#0B7373; --acc-on-light:#0B6E6E; --acc-on-dark:#2CC4C4;
  --acc-soft:rgba(14,138,138,.16); --acc-b:rgba(14,138,138,.16);
}
html[data-accent="orange"]{  /* оранжевый (совпадает со статусом ожидания) */
  --acc:#E2681C; --acc-hover:#C75812; --acc-on-light:#A9500F; --acc-on-dark:#FFA357;
  --acc-soft:rgba(226,104,28,.16); --acc-b:rgba(226,104,28,.16);
}
html[data-accent="red"]{  /* красный (статус ошибки различать подписью) */
  --acc:#C90A15; --acc-hover:#AC0811; --acc-on-light:#AC0811; --acc-on-dark:#FF858E;
  --acc-soft:rgba(201,10,21,.16); --acc-b:rgba(201,10,21,.16);
}
html[data-accent="indigo-full"]{  /* полностью индиго — стоит по умолчанию */
  --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-on-light:#3D4FB8; --acc-on-dark:#8395F5;
  --acc-soft:rgba(75,95,208,.16); --acc-b:rgba(75,95,208,.16);
}
html[data-accent="violet-full"]{  /* полностью фиолетовый — оттенок схем блога */
  --acc:#6152C9; --acc-hover:#5344AF; --acc-on-light:#5344AF; --acc-on-dark:#A79CF5;
  --acc-soft:rgba(97,82,201,.16); --acc-b:rgba(97,82,201,.16);
}
html[data-accent="cyan-full"]{  /* полностью бирюза; кнопка притемнена до #008296 — белый текст 4,53:1 */
  --acc:#008296; --acc-hover:#00707F; --acc-on-light:#046B7C; --acc-on-dark:#2ED4EC;
  --acc-soft:rgba(0,184,212,.16); --acc-b:rgba(0,184,212,.16);
}
html[data-accent="teal-full"]{  /* полностью волна; кнопка #0D8383 — 4,57:1 */
  --acc:#0D8383; --acc-hover:#0B6E6E; --acc-on-light:#0B6E6E; --acc-on-dark:#2CC4C4;
  --acc-soft:rgba(14,138,138,.16); --acc-b:rgba(14,138,138,.16);
}
html[data-accent="green-full"]{  /* полностью зелёный; кнопка #28874D — 4,50:1, «готово» подписываем словом */
  --acc:#28874D; --acc-hover:#1F7A45; --acc-on-light:#1F7A45; --acc-on-dark:#4CC276;
  --acc-soft:rgba(46,158,91,.16); --acc-b:rgba(46,158,91,.16);
}
html[data-accent="orange-full"]{  /* полностью оранжевый; кнопка #C15714 — 4,53:1 */
  --acc:#C15714; --acc-hover:#A9500F; --acc-on-light:#A9500F; --acc-on-dark:#FFA357;
  --acc-soft:rgba(226,104,28,.16); --acc-b:rgba(226,104,28,.16);
}

html[data-accent="red-full"]{  /* полностью красный; ошибку помечаем ещё и значком */
  --acc:#C90A15; --acc-hover:#AC0811; --acc-on-light:#AC0811; --acc-on-dark:#FF858E;
  --acc-soft:rgba(201,10,21,.16); --acc-b:rgba(201,10,21,.16);
}

/* Перевод акцента в токены темы. Значения раскладываются по темам: на светлой
   теме текст ссылки берётся тёмный, на средней и тёмной — светлый, иначе
   контраст рушится. */
:root, html[data-theme="dark"]{
  --fs-blue:var(--acc); --fs-blue-hover:var(--acc-hover);
  --fs-blue-text:var(--acc-on-dark); --fs-blue-soft:var(--acc-soft);
  --fs-blue-b:var(--acc-b);
}
html[data-theme="dim"]{
  --fs-blue:var(--acc); --fs-blue-hover:var(--acc-hover);
  --fs-blue-text:var(--acc-on-dark); --fs-blue-soft:var(--acc-soft);
  --fs-blue-b:var(--acc-b);
}
html[data-theme="light"]{
  --fs-blue:var(--acc); --fs-blue-hover:var(--acc-hover);
  --fs-blue-text:var(--acc-on-light); --fs-blue-soft:var(--acc-soft);
  --fs-blue-b:var(--acc-b);
}

/* --- Типографика: Montserrat + Inter (без IBM Plex Mono) ----------------- */
/* Гайдбук предлагает три шрифта: Montserrat в заголовках, Inter в тексте и
   IBM Plex Mono в цифрах, кодах и артикулах.

   PLEX ИСКЛЮЧЁН ПО РЕШЕНИЮ ВЛАДЕЛЬЦА (14.08.2026): «этот шрифт нельзя, выбери
   любой другой из гайдбука» — не нравится рисунок «Ш». Именно им были набраны
   названия файлов вроде «Штрихкода SUFIX LYNX.xlsx» и номера документов.
   Поэтому весь текст, коды и цифры — Inter, заголовки — Montserrat.

   Цифры в колонках всё равно стоят столбиком: Inter умеет цифры одинаковой
   ширины своими средствами (tabular-nums), для этого второй шрифт не нужен.
   Значит, разнобоя между разделами, из-за которого всё и началось, быть не
   может — шрифт один на всё.

   РАЗМЕРЫ НЕ ТРОГАЕМ: кегли гайдбука писаны под сайт-витрину и в панели
   выглядят огромными. Размеры букв, высоту строк и отступы берём из самой
   панели (base.html: h1 26 px). Ни font-size, ни line-height здесь быть не
   должно. */
:root{
  --fs-font-text:'Inter',Tahoma,Arial,sans-serif;
  --fs-font-head:'Montserrat','Inter',Tahoma,sans-serif;
}
body, button, input, select, textarea, optgroup,
code, kbd, samp, pre, .mono,
.doc-num, .doc-date, .doc-from, .num, .n, .val, .mv, .barval, .sb-time,
[style*="tabular-nums"], [style*="ui-monospace"]{
  font-family:var(--fs-font-text);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3{
  font-family:var(--fs-font-head);
}
/* Цифры одинаковой ширины — везде, а не только в отдельных классах: колонки
   чисел должны стоять столбиком на любой странице. */
body{font-variant-numeric:tabular-nums}

h1, h2, h3, .h1, .h2, .h3{
  /* Отрицательный трекинг съедает просветы между буквами и мажет заголовок. */
  letter-spacing:0;
}
h1, .h1{font-weight:800}
h2, .h2{font-weight:800}
h3, .h3{font-weight:700}
.doc-num{letter-spacing:0}

/* --- Форма: радиусы 6 и 10, границы вместо теней ------------------------- */
.btn, button.btn, input, select, textarea{
  border-radius:6px;
}
.card, .doc, .filelist li, .flash, .pill{
  border-radius:10px;
}
.pill{border-radius:999px}          /* пилюли статусов остаются круглыми */

/* Кнопка основного действия — синяя заливка, без градиентов и свечений. */
.btn{
  box-shadow:none;
  transition:background .14s ease, border-color .14s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn:not(.gray):not(.dang){
  background:var(--fs-blue); border-color:var(--fs-blue); color:#fff;
}
.btn:not(.gray):not(.dang):hover{
  background:var(--fs-blue-hover); border-color:var(--fs-blue-hover);
}

/* Карточки: граница вместо тени; в светлой теме — мягкая тень уровня 1. */
.card{
  background:var(--fs-surface);
  border:1px solid var(--fs-border);
  box-shadow:none;
}
html[data-theme="light"] .card{box-shadow:var(--fs-shadow-1)}
.card:hover{border-color:var(--fs-border-2)}

/* Таблицы: шапка на подложке, строки на surface, разделители-щели 1 px. */
table thead th{
  background:var(--fs-panel);
  color:var(--fs-text-2);
  border-bottom:1px solid var(--fs-border);
}
table tbody tr{background:var(--fs-surface)}
table tbody tr + tr td{border-top:1px solid var(--fs-border-soft)}

/* Поля ввода: без свечений, видимая рамка фокуса. */
input, select, textarea{
  background:var(--fs-panel);
  border:1px solid var(--fs-border);
  color:var(--fs-text);
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible{
  outline:2px solid var(--fs-blue);
  outline-offset:2px;
  box-shadow:none;
}

/* Шапка страницы — на своей подложке, отделена линией, а не тенью. */
header, .topbar{
  background:var(--fs-head);
  border-bottom:1px solid var(--fs-border);
}

/* Название панели красится темой меню: в светлой теме оно было белым по белому
   и попросту исчезало (замечено на снимке 14.08.2026). */
.brand{color:var(--fs-side-text)}
.brand-sub{color:var(--fs-side-muted)}
.brand .logo{background:var(--fs-blue)}

/* --- Переключатель трёх тем в шапке -------------------------------------- */
/* Гайдбук, раздел 14: три круглые кнопки, выбранная заливается синим. Буквы
   вместо значков — С, М, Т: значок «половинка луны» для средней темы никто не
   узнаёт, а буква читается сразу. */
.themeswitch{display:flex; gap:4px; align-items:center}
.themeswitch button{
  width:28px; height:28px; border-radius:999px;
  border:1px solid var(--fs-border); background:var(--fs-panel);
  color:var(--fs-text-2); font-size:12px; font-weight:600; line-height:1;
  cursor:pointer; transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.themeswitch button:hover{border-color:var(--fs-border-2); color:var(--fs-text)}
.themeswitch button.on{
  background:var(--fs-blue); border-color:var(--fs-blue); color:#fff;
}
.themeswitch button:focus-visible{outline:2px solid var(--fs-blue); outline-offset:2px}

/* Ссылки — синие, без подчёркивания до наведения. */
a{color:var(--fs-blue-text)}
a:hover{color:var(--fs-blue)}

/* Анимации по гайдбуку: 140–450 мс, и полностью отключаются, если человек
   попросил систему уменьшить движение. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}