/* =====================================================================
   AGRO OS — дизайн-система v1.0
   Источник правды: AGRO OS - Design System v1.0 и Development Handoff v1.0.
   Все значения перенесены из утверждённых токенов. Новых значений здесь нет:
   если числа нет в дизайне, его нет и в этом файле.
   ===================================================================== */

/* --- Шрифты ---------------------------------------------------------
   IBM Plex Sans и IBM Plex Mono лежат в проекте (SIL OFL 1.1,
   app/static/fonts/LICENSE-IBM-Plex.txt). Внешних CDN нет намеренно:
   интерфейс обязан открываться при обрыве связи с внешним миром.
   Кириллический набор проверен: А Б В Г Ґ Д Е Є Ж З И І Ї Й — все на месте.
   -------------------------------------------------------------------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-400-normal.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 Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-500-normal.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 Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-600-normal.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 Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-700-normal.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-cyrillic-400-normal.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-latin-400-normal.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-cyrillic-600-normal.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-latin-600-normal.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}

/* --- Токены (92) ---------------------------------------------------- */
:root{
  /* цвета */
  --color-brand:#12603C;            --color-brand-hover:#0E4E31;
  --color-brand-tint:#EAF3EE;       --color-brand-soft:#EFF6F2;
  --color-brand-border:#9FC7B3;
  --color-text:#141A17;             --color-text-body:#1B2320;
  --color-text-secondary:#3F4B45;   --color-text-muted:#5C6B63;
  --color-border:#E3E8E5;           --color-border-strong:#DCE3DF;
  --color-divider:#F0F3F1;
  --color-bg:#F4F6F5;               --color-bg-alt:#F7F9F8;
  --color-surface:#FFFFFF;          --color-surface-instrument:#14201A;
  --color-success:#0E4E31;
  --color-attention:#93370D;        --color-attention-surface:#FFFAEB;
  --color-attention-border:#FDE7BC; --color-warning:#DC6803;
  --color-critical:#9B1C13;         --color-critical-surface:#FEF3F2;
  --color-critical-border:#FBD5D0;  --color-critical-accent:#B42318;
  --color-disabled-surface:#F0F3F1; --color-disabled-text:#6B7A72;
  /* типографика */
  --font-family:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-size-display:30px; --font-size-h1:26px; --font-size-h2:20px; --font-size-h3:16px;
  --font-size-body:14px;   --font-size-small:13px; --font-size-caption:11px;
  --font-size-table:13px;  --font-size-button:13.5px; --font-size-numeric:28px;
  --line-height-tight:1.2; --line-height-heading:1.3; --line-height-body:1.55;
  --font-weight-regular:400; --font-weight-medium:500;
  --font-weight-semibold:600; --font-weight-bold:700;
  --numeric-variant:tabular-nums;
  /* отступы */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-3-5:14px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  /* поверхности */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:50px;
  --border-width:1px; --border-width-field:1.5px; --border-width-accent:2px;
  --shadow-none:none;
  --shadow-overlay:0 8px 24px rgba(20,26,23,.12);
  --shadow-modal:0 16px 40px rgba(20,26,23,.20);
  --focus-ring:1.5px solid var(--color-brand);
  /* размеры элементов */
  --control-height-sm:32px; --control-height-md:38px; --control-height-lg:44px;
  --control-height-touch:56px; --control-height-field-primary:64px;
  --table-row-desktop:42px; --table-row-tablet:56px;
  --table-header:42px; --table-footer:52px;
  --sidebar-expanded:240px; --sidebar-collapsed:68px; --topbar-height:60px;
  /* контрольные точки — записаны как токены, применяются в @media ниже */
  --breakpoint-xl:2560px; --breakpoint-lg:1920px; --breakpoint-md:1440px;
  --breakpoint-sm:1280px; --breakpoint-tablet:1024px; --breakpoint-mobile:390px;
  /* слои */
  --z-base:0; --z-sticky-header:5; --z-dropdown:20; --z-overlay:40;
  --z-panel:41; --z-modal:50;
  /* служебное: текущая ширина меню, меняется при сворачивании */
  --sidebar-now:var(--sidebar-expanded);
}

/* --- База ----------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text-body);
     font:var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--font-family);
     -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--color-text);line-height:var(--line-height-heading)}
h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}
h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold)}
h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold)}
a{color:var(--color-brand);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}
/* Фокус виден всегда: граница бренда 1.5 px и мягкая подложка.
   Chromium при масштабе 100 % округляет толщину рамки до 1 px — это
   особенность отрисовки браузера, значение в стилях остаётся 1.5 px. */
:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
button.ghost:focus-visible,.navitem:focus-visible,.collapse:focus-visible,
select:focus-visible,input:focus-visible{background:#F6FAF8}
::selection{background:var(--color-brand-tint)}

/* Служебные подписи и «данных недостаточно»: без курсива, тем же начертанием */
.hint,.nd{color:var(--color-text-muted);font-size:12.5px;font-style:normal}
.num{text-align:right;font-variant-numeric:var(--numeric-variant)}

/* =====================================================================
   КАРКАС: боковое меню 240 / 68, верхняя панель 60, рабочая область
   ===================================================================== */
#app{min-height:100vh}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-now);
  background:var(--color-surface);border-right:var(--border-width) solid var(--color-border);
  display:flex;flex-direction:column;z-index:var(--z-sticky-header)}
.sidebar__brand{height:var(--topbar-height);flex:none;display:flex;align-items:center;
  gap:var(--space-3);padding:0 var(--space-4);
  border-bottom:var(--border-width) solid var(--color-divider)}
.sidebar__mark{width:28px;height:28px;flex:none;border-radius:var(--radius-sm);
  background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font:var(--font-weight-bold) 12px/1 var(--font-family);letter-spacing:.02em}
.sidebar__name{font:var(--font-weight-semibold) var(--font-size-h3)/1 var(--font-family);
  color:var(--color-text);white-space:nowrap;overflow:hidden}
.sidebar__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-3) var(--space-2)}
.sidebar__nav::-webkit-scrollbar{width:8px}
.sidebar__nav::-webkit-scrollbar-thumb{background:var(--color-divider);border-radius:var(--radius-pill)}
.navgroup{padding:var(--space-3) var(--space-3) var(--space-1);
  font:var(--font-weight-semibold) var(--font-size-caption)/1.4 var(--font-family);
  letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap}
.navgroup:first-child{padding-top:0}
.navitem{position:relative;display:flex;align-items:center;gap:var(--space-3);width:100%;
  height:38px;padding:0 10px;margin-bottom:2px;border:0;border-radius:var(--radius-md);
  background:transparent;color:var(--color-text-secondary);cursor:pointer;text-align:left;
  font:var(--font-weight-regular) var(--font-size-small)/1 var(--font-family);white-space:nowrap}
.navitem:hover{background:var(--color-bg-alt);color:var(--color-text)}
.navitem.on{background:var(--color-brand-tint);color:var(--color-brand);
  font-weight:var(--font-weight-semibold)}
/* Активный пункт помечен и цветом, и полосой слева — не только цветом */
.navitem.on::before{content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:3px;
  border-radius:var(--radius-pill);background:var(--color-brand)}
.navitem svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.navitem span{overflow:hidden;text-overflow:ellipsis}
.sidebar__foot{flex:none;padding:var(--space-2);
  border-top:var(--border-width) solid var(--color-divider)}
.collapse{display:flex;align-items:center;gap:var(--space-3);width:100%;height:34px;
  padding:0 10px;border:0;border-radius:var(--radius-md);background:transparent;
  color:var(--color-text-muted);cursor:pointer;
  font:var(--font-weight-regular) var(--font-size-small)/1 var(--font-family);white-space:nowrap}
.collapse:hover{background:var(--color-bg-alt);color:var(--color-text)}
.collapse svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Свёрнутое меню: только иконки, подписи — подсказкой при наведении.
   Это единственное место, где разрешён tooltip: текст раздела физически скрыт. */
body.collapsed{--sidebar-now:var(--sidebar-collapsed)}
body.collapsed .sidebar__name,
body.collapsed .navitem span,
body.collapsed .collapse span{display:none}
body.collapsed .navgroup{height:1px;padding:var(--space-3) var(--space-3) 0;overflow:hidden;
  color:transparent}
body.collapsed .sidebar__brand{justify-content:center;padding:0}
body.collapsed .navitem,
body.collapsed .collapse{justify-content:center;padding:0}
body.collapsed .navitem:hover::after{content:attr(data-title);position:absolute;left:calc(100% + 8px);
  top:50%;transform:translateY(-50%);z-index:var(--z-dropdown);
  background:var(--color-text);color:#fff;padding:6px 10px;border-radius:var(--radius-sm);
  font:var(--font-weight-medium) 12.5px/1 var(--font-family);white-space:nowrap;
  box-shadow:var(--shadow-overlay);pointer-events:none}

/* Верхняя панель */
.topbar{position:sticky;top:0;z-index:var(--z-sticky-header);height:var(--topbar-height);
  margin-left:var(--sidebar-now);display:flex;align-items:center;gap:var(--space-5);
  padding:0 var(--space-5);background:var(--color-surface);
  border-bottom:var(--border-width) solid var(--color-border)}
.topbar__title{font:var(--font-weight-semibold) var(--font-size-h2)/1 var(--font-family);
  color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* min-width:0 обязателен: без него элемент гибкой строки не сжимается
     меньше своего содержимого, и многоточие не срабатывает вовсе —
     вместо него появляется горизонтальная прокрутка ВСЕЙ страницы. */
  min-width:0}
.topbar__spacer{flex:1}
.topbar__who{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:right}
.topbar__who b{font:var(--font-weight-semibold) var(--font-size-small)/1.2 var(--font-family);
  color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__who span{font-size:var(--font-size-caption);color:var(--color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__sep{width:1px;height:24px;background:var(--color-divider);flex:none}

/* Рабочая область */
main{margin-left:var(--sidebar-now);padding:var(--space-6);
  max-width:calc(1760px + var(--sidebar-now));}
@media (min-width:2000px){main{max-width:none}
  main>*{max-width:1760px}}

/* =====================================================================
   КНОПКИ — одно основное действие на экран, остальные вторичные
   ===================================================================== */
/* Базовый вид обычной кнопки завёрнут в :where() — у него нулевой вес.
   Иначе правило для тега button перебивало бы пункты меню и постраничную
   навигацию: у селектора с классом вес оказывался ниже, и пункт меню
   при наведении заливался зелёным. */
:where(button),.btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);height:var(--control-height-md);padding:0 var(--space-4);
  border:var(--border-width) solid var(--color-brand);border-radius:var(--radius-md);
  background:var(--color-brand);color:#fff;cursor:pointer;white-space:nowrap;
  font:var(--font-weight-semibold) var(--font-size-button)/1 var(--font-family)}
:where(button:hover:not(:disabled)),.btn:hover:not(:disabled){
  background:var(--color-brand-hover);border-color:var(--color-brand-hover)}
button.ghost,.btn--secondary{background:var(--color-surface);color:var(--color-text);
  border-color:var(--color-border-strong);font-weight:var(--font-weight-medium)}
button.ghost:hover:not(:disabled),.btn--secondary:hover:not(:disabled){
  background:var(--color-bg-alt);border-color:var(--color-brand);color:var(--color-brand)}
.btn--tertiary{background:transparent;border-color:transparent;color:var(--color-brand);
  font-weight:var(--font-weight-medium)}
.btn--tertiary:hover:not(:disabled){background:var(--color-brand-soft);border-color:transparent}
.btn--danger{background:var(--color-surface);color:var(--color-critical);
  border-color:var(--color-critical-border)}
.btn--danger:hover:not(:disabled){background:var(--color-critical-surface);
  border-color:var(--color-critical);color:var(--color-critical)}
:where(button:disabled),.btn:disabled,.btn--disabled{background:var(--color-disabled-surface);
  border-color:var(--color-border);color:var(--color-disabled-text);cursor:default}
.btn--sm{height:var(--control-height-sm);padding:0 var(--space-3);font-size:12.5px}
.btn--lg{height:var(--control-height-lg);padding:0 var(--space-5)}
.btn svg,:where(button) svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Загрузка в кнопке: спиннер, надпись остаётся — экран не блокируется */
.btn--loading{pointer-events:none;opacity:.85}
.btn--loading::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-icon{width:var(--control-height-md);padding:0}
.btn-row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* =====================================================================
   ПОЛЯ ВВОДА
   ===================================================================== */
input,select,textarea{height:var(--control-height-lg);padding:0 var(--space-3);
  border:var(--border-width-field) solid #C9D4CE;border-radius:9px;
  background:var(--color-surface);color:var(--color-text);
  font:var(--font-weight-regular) var(--font-size-body)/1 var(--font-family)}
textarea{height:auto;padding:10px var(--space-3);line-height:var(--line-height-body);resize:vertical}
input::placeholder,textarea::placeholder{color:var(--color-text-muted)}
input:hover,select:hover,textarea:hover{border-color:var(--color-brand-border)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-brand);
  background:#F6FAF8}
input[type=number]{text-align:right;font-variant-numeric:var(--numeric-variant)}
input:disabled,select:disabled,textarea:disabled{background:var(--color-disabled-surface);
  border-color:var(--color-border);color:var(--color-disabled-text);cursor:default}
input[readonly]{background:#FAFBFB;border-color:#EDF1EF;color:var(--color-text-muted)}
.field--error input,.field--error select,input.error{border-color:#EBB4AE}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font:var(--font-weight-medium) var(--font-size-small)/1 var(--font-family);
  color:var(--color-text-secondary)}
.field__msg{font-size:12.5px;color:var(--color-text-secondary)}
.field--error .field__msg{color:var(--color-critical)}
select{height:var(--control-height-md);padding-right:var(--space-6);cursor:pointer;
  font-size:var(--font-size-small);font-weight:var(--font-weight-medium);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F4B45' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
/* Поиск: иконка слева, короткая подсказка */
.search{position:relative;display:inline-flex;align-items:center}
.search svg{position:absolute;left:11px;width:16px;height:16px;stroke:var(--color-text-muted);
  fill:none;stroke-width:1.7;pointer-events:none}
.search input{height:var(--control-height-md);padding-left:34px;font-size:var(--font-size-small)}
/* Флажок 16 px */
.check{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;
  font-size:var(--font-size-small)}
.check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;padding:0;
  border:var(--border-width-field) solid #C9D4CE;border-radius:4px;background:var(--color-surface);
  cursor:pointer}
.check input:checked{background:var(--color-brand);border-color:var(--color-brand);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}

/* =====================================================================
   КАРТОЧКИ, ТАБЛИЦЫ
   ===================================================================== */
.card{background:var(--color-surface);border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);
  box-shadow:var(--shadow-none)}
.card>h2{margin-bottom:var(--space-1)}
.sub{color:var(--color-text-secondary);font-size:var(--font-size-small);
  margin-bottom:var(--space-3-5)}
.row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--space-3)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--space-3-5);margin-bottom:var(--space-4)}

table{width:100%;border-collapse:collapse;font:var(--font-weight-regular)
  var(--font-size-table)/1.4 var(--font-family);table-layout:auto}
.table-wrap{overflow-x:auto}
th{height:var(--table-header);text-align:left;padding:0 var(--space-4);
  background:var(--color-bg-alt);color:var(--color-text-muted);
  font:var(--font-weight-semibold) 12px/1.3 var(--font-family);
  border-bottom:var(--border-width) solid var(--color-border);white-space:nowrap}
th:first-child{border-top-left-radius:var(--radius-md)}
th:last-child{border-top-right-radius:var(--radius-md)}
td{height:var(--table-row-desktop);padding:var(--space-2) var(--space-4);
  border-bottom:var(--border-width) solid var(--color-divider);vertical-align:middle;
  color:var(--color-text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--color-bg-alt)}
tbody tr.selected td{background:#F3F8F5}
td .num,th .num{text-align:right}

/* =====================================================================
   СТАТУСЫ: цвет + иконка + форма + текст, никогда только цвет
   ===================================================================== */
.tag{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  margin:1px 3px 1px 0;border-radius:var(--radius-sm);
  border:var(--border-width) solid #E1E7E3;background:var(--color-bg);
  color:var(--color-text-secondary);white-space:nowrap;
  font:var(--font-weight-semibold) 12.5px/1 var(--font-family)}
.tag::before{content:"";width:6px;height:6px;flex:none;border-radius:1px;background:currentColor}
.tag.ok{color:var(--color-brand);background:var(--color-brand-soft);border-color:#CFE4D9}
.tag.ok::before{border-radius:50%}
.tag.warn{color:var(--color-attention);background:var(--color-attention-surface);
  border-color:var(--color-attention-border);border-radius:var(--radius-pill)}
.tag.bad{color:var(--color-critical);background:var(--color-critical-surface);
  border-color:var(--color-critical-border)}
.tag.bad::before{border-radius:50%;background:var(--color-critical-accent)}
/* Тег проблемы: не более двух в строке, остальное под «+N» */
.ptag{display:inline-flex;align-items:center;gap:6px;height:22px;max-width:256px;padding:0 8px;
  margin:1px 3px 1px 0;border-radius:var(--radius-sm);border:var(--border-width) solid #E1E7E3;
  background:var(--color-bg);color:var(--color-text-secondary);
  font:var(--font-weight-medium) 11.5px/1 var(--font-family);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptag.bad{color:var(--color-critical);background:var(--color-critical-surface);
  border-color:var(--color-critical-border)}
.ptag.warn{color:var(--color-attention);background:var(--color-attention-surface);
  border-color:var(--color-attention-border)}
.ptag--more{cursor:pointer;font-weight:var(--font-weight-semibold)}

/* Показатели */
.kpi{display:flex;align-items:center;gap:var(--space-3-5);min-height:84px;
  padding:0 18px;background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg)}
.kpi__text{min-width:0;display:block}
.kpi .v,.kpi .l{display:block}
.kpi .v{font:var(--font-weight-semibold) var(--font-size-numeric)/1 var(--font-family);
  letter-spacing:-.02em;font-variant-numeric:var(--numeric-variant);color:var(--color-text)}
.kpi .l{color:var(--color-text-secondary);font-size:var(--font-size-small);
  line-height:1.35;margin-top:6px}
.kpi--clickable{cursor:pointer}
.kpi--clickable:hover{border-color:var(--color-brand-border)}
.kpi--active{background:#F6FAF8;border-color:var(--color-brand-border)}
.kpi--warning .kpi__icon{background:var(--color-attention-surface);color:#B54708}
.kpi--nodata .v{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);
  color:var(--color-text-muted);letter-spacing:0}
.kpi__icon{width:38px;height:38px;flex:none;border-radius:var(--radius-md);
  background:var(--color-brand-tint);color:var(--color-brand);
  display:flex;align-items:center;justify-content:center}
.kpi__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Показатель может быть кнопкой-фильтром: сбрасываем всё кнопочное */
.kpi{height:auto;text-align:left;color:var(--color-text);
  font:var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--font-family)}
.grid--kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi__icon--green{background:var(--color-brand-tint);color:var(--color-brand)}
.kpi__icon--red{background:var(--color-critical-surface);color:var(--color-critical-accent)}
.kpi__icon--amber{background:var(--color-attention-surface);color:#B54708}
.kpi__on{color:var(--color-brand);font-weight:var(--font-weight-semibold)}
.kpi:disabled{background:var(--color-surface);border-color:var(--color-border);
  color:var(--color-text);cursor:default}
.kpi:disabled .v{color:var(--color-text)}

/* =====================================================================
   ШАХМАТКА МАССИВА
   ===================================================================== */
.card--flush{padding:0;overflow:hidden}
.card__head{padding:var(--space-5) var(--space-5) var(--space-3)}
.card__head .sub{margin-bottom:0}
.brd__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid #EDF1EF;
  border-bottom:var(--border-width) solid #EDF1EF}
.brd__bar .search{width:300px;max-width:100%}
.brd__bar .search input{width:100%}
.brd__bar select{max-width:190px}
.brd__chips{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:10px var(--space-4);border-bottom:var(--border-width) solid #EDF1EF;
  background:var(--color-bg-alt)}
.brd th{height:40px}
.brd td{vertical-align:middle}
.brd__cad{font-variant-numeric:var(--numeric-variant)}
.brd__probs{line-height:1.9}
.ptag--more{height:22px;padding:0 8px;border-radius:var(--radius-sm);
  border:var(--border-width) solid var(--color-border-strong);background:var(--color-surface);
  color:var(--color-text-secondary);
  font:var(--font-weight-semibold) 11.5px/1 var(--font-family)}
.ptag--more:hover{border-color:var(--color-brand);color:var(--color-brand);
  background:var(--color-brand-soft)}
.pager__size{display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--font-size-small);color:var(--color-text-secondary)}
.pager__size select{height:32px;padding:0 26px 0 10px;font-size:var(--font-size-small)}
.pager__dots{padding:0 4px;color:var(--color-text-muted)}

/* Реестр занимает экран целиком, прокручивается только таблица.
   Постраничная навигация обязана быть видна всегда — правило дизайна. */
body.board-fit main{height:calc(100vh - var(--topbar-height));display:flex;
  flex-direction:column;overflow:hidden}
body.board-fit main>#err,body.board-fit main .grid{flex:none}
/* Экраны живут внутри #view — он и становится колонкой */
body.board-fit main>#view{flex:1;min-height:0;display:flex;flex-direction:column}
body.board-fit .card--flush{flex:1;min-height:0;display:flex;flex-direction:column;
  margin-bottom:0}
body.board-fit .card--flush>.card__head,body.board-fit .brd__bar,
body.board-fit .brd__chips,body.board-fit .pager{flex:none}
body.board-fit .table-wrap,body.board-fit .card--flush>.state{flex:1;min-height:0;
  overflow:auto}
body.board-fit .card--flush>.state{display:flex;flex-direction:column;
  justify-content:center;max-width:none}
body.board-fit .card--flush>.state>*{max-width:520px;margin-left:auto;margin-right:auto}
body.board-fit .brd thead th{position:sticky;top:0;z-index:1}

/* =====================================================================
   ФИЛЬТРЫ И ПАГИНАЦИЯ
   ===================================================================== */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--space-3-5)}
.chips{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:var(--radius-pill);border:var(--border-width) solid var(--color-brand-border);
  background:var(--color-brand-soft);color:var(--color-brand);
  font:var(--font-weight-medium) 12.5px/1 var(--font-family)}
.chip button{width:16px;height:16px;padding:0;border:0;border-radius:50%;background:transparent;
  color:inherit;font-size:14px;line-height:1}
.chip button:hover{background:var(--color-brand-border);color:#fff}
.pager{display:flex;align-items:center;gap:var(--space-3);height:var(--table-footer);
  padding:0 var(--space-4);border-top:var(--border-width) solid var(--color-divider);
  font-size:var(--font-size-small);color:var(--color-text-secondary)}
.pager__pages{display:flex;gap:6px;margin-left:auto}
.pager__pages button{min-width:32px;height:32px;padding:0 8px;
  background:var(--color-surface);border-color:var(--color-border-strong);
  color:var(--color-text);font-weight:var(--font-weight-medium);font-size:var(--font-size-small)}
.pager__pages button.on{background:var(--color-brand-tint);border-color:var(--color-brand-border);
  color:var(--color-brand);font-weight:var(--font-weight-semibold)}
.pager__pages button:disabled{background:var(--color-surface);color:var(--color-disabled-text);
  border-color:var(--color-border)}

/* =====================================================================
   СОСТОЯНИЯ: загрузка, пусто, ошибка, нет доступа
   ===================================================================== */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-2);max-width:520px;margin:0 auto;padding:var(--space-10) var(--space-5)}
.state__icon{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;
  align-items:center;justify-content:center;background:var(--color-disabled-surface);
  color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.state__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.state h3{font-size:var(--font-size-h3)}
.state p{margin:0;color:var(--color-text-secondary);font-size:13.5px;
  line-height:var(--line-height-body)}
.state .btn-row{margin-top:var(--space-4)}
.state--error .state__icon{background:var(--color-critical-surface);
  color:var(--color-critical-accent)}
.state--noaccess{max-width:640px;padding:36px 40px}
.state--noaccess h2{font-size:19px}

/* Скелетоны: мягкая пульсация, ничего больше. Интерфейс не блокируется. */
.sk{background:var(--color-divider);border-radius:var(--radius-sm);
  animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.55}}
.sk--line{height:12px}
.sk--row{height:var(--table-row-desktop);border-radius:0;margin-bottom:1px}
.sk--kpi{height:84px;border-radius:var(--radius-lg)}
.skeleton-table{padding:0 0 var(--space-2)}

/* Ошибка: что произошло, почему, что делать. Технических кодов нет. */
.err{display:flex;gap:var(--space-3);padding:var(--space-3-5) var(--space-4);
  margin-bottom:var(--space-3);border-radius:var(--radius-md);
  background:var(--color-critical-surface);
  border:var(--border-width) solid var(--color-critical-border);
  color:var(--color-text);font-size:13.5px}
.err b{display:block;margin-bottom:4px;color:var(--color-critical);
  font-weight:var(--font-weight-semibold)}
/* Подтверждение успеха — там же, где отказ: человек смотрит в одно место. */
.ok{display:flex;gap:var(--space-3);padding:var(--space-3-5) var(--space-4);
  margin-bottom:var(--space-3);border-radius:var(--radius-md);
  background:var(--color-brand-soft);
  border:var(--border-width) solid #CFE4D9;
  color:var(--color-text);font-size:13.5px}
.ok b{display:block;color:var(--color-brand);
  font-weight:var(--font-weight-semibold)}
.err svg{width:20px;height:20px;flex:none;stroke:var(--color-critical-accent);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Полоса «Сохранение…»: поля остаются доступными */
.saving{display:inline-flex;align-items:center;gap:var(--space-2);height:34px;padding:0 12px;
  border-radius:var(--radius-md);background:var(--color-brand-soft);
  border:var(--border-width) solid #CFE4D9;color:var(--color-brand);
  font:var(--font-weight-semibold) 12.5px/1 var(--font-family)}

/* =====================================================================
   ПРЕДУПРЕЖДЕНИЯ GUARDIAN — четыре части всегда видимы, тултипов нет
   ===================================================================== */
.alert{position:relative;padding:var(--space-3-5) 18px;margin-bottom:10px;
  background:var(--color-surface);border:var(--border-width) solid var(--color-border);
  border-left-width:4px;border-radius:var(--radius-md)}
.alert.BLOCKER,.alert.CRITICAL{border-left-color:var(--color-critical);
  background:var(--color-critical-surface);border-color:var(--color-critical-border);
  border-left-color:var(--color-critical)}
.alert.WARNING{border-left-color:var(--color-warning);
  background:var(--color-attention-surface);border-color:var(--color-attention-border);
  border-left-color:var(--color-warning)}
.alert.INFO{border-left-color:var(--color-border-strong)}
.alert h4{margin:0 0 var(--space-2);font:var(--font-weight-semibold) var(--font-size-h3)/1.35
  var(--font-family);color:var(--color-text)}
.alert .why{color:var(--color-text-secondary);font-size:var(--font-size-small);margin-bottom:6px}
.alert .cons{font-size:var(--font-size-small);margin-bottom:var(--space-2);
  color:var(--color-text-body)}
.alert ol{margin:0;padding-left:var(--space-5);font-size:var(--font-size-small);
  color:var(--color-text-body)}
.alert ol li{margin-bottom:3px}

/* =====================================================================
   ЖИЗНЕННЫЙ ЦИКЛ ЗАПИСИ: действие в строке
   -----------------------------------------------------------------
   Цель нажатия — не меньше 44x44 на любом экране, а не только на
   планшете: требование доступности, а не эстетики. Высота строки
   таблицы на рабочем столе 42 px, поэтому кнопка чуть выступает за неё
   по вертикали — это осознанно и проверено на макете: соседние строки
   не смещаются, потому что ячейка выше содержимого не становится.

   Красного здесь нет. Архивирование — административное действие, а не
   авария и не потеря: красный в системе оставлен настоящему риску.
   Возврат из архива — обычное действие того же вида.
   ===================================================================== */
.lifecycle-act{min-height:44px;min-width:44px;padding:0 var(--space-4)}

/* =====================================================================
   МОДАЛЬНОЕ ОКНО — основание
   ===================================================================== */
.overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(20,26,23,.35);
  display:flex;align-items:center;justify-content:center;padding:var(--space-5)}
.modal{z-index:var(--z-modal);width:100%;max-width:640px;max-height:86vh;overflow:auto;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);padding:18px 22px}
.modal__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.modal__head h3{flex:1;font-size:17px}
.modal__foot{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-5)}

/* =====================================================================
   «ЗВІДКИ ЦЯ ЦИФРА?» — точка входа и боковая панель пояснения.
   Новых токенов здесь нет: все цвета, отступы, радиусы и тени взяты из
   дизайн-системы v1.0. Панель светлая, как и весь интерфейс.
   ===================================================================== */
/* Точка входа. Цель нажатия 44 px — правило планшета из дизайна;
   уменьшать её на большом экране незачем, палец не меняется. */
.explain-act{min-height:44px;min-width:44px;display:inline-flex;align-items:center;
  gap:var(--space-2);padding:0 var(--space-3);white-space:nowrap}
.explain-act svg{width:16px;height:16px;flex:none}

/* Панель прижата к правому краю и занимает высоту экрана: это боковая
   панель, а не окно поверх окна. Контекст под ней остаётся виден. */
.overlay--drawer{align-items:stretch;justify-content:flex-end;padding:0}
.drawer{z-index:var(--z-panel);display:flex;flex-direction:column;
  width:100%;max-width:560px;height:100%;background:var(--color-surface);
  box-shadow:var(--shadow-modal);overflow:hidden}
.drawer__head{flex:none;display:flex;align-items:center;gap:var(--space-3);
  min-height:var(--topbar-height);padding:var(--space-3) var(--space-5);
  border-bottom:var(--border-width) solid var(--color-divider)}
.drawer__head h3{flex:1}
.drawer__close{min-height:44px;min-width:44px}
.drawer__body{flex:1;overflow:auto;padding:var(--space-5)}

/* Главное значение. Крупная цифра — числовой стиль дизайн-системы. */
.ex-main{padding-bottom:var(--space-4);
  border-bottom:var(--border-width) solid var(--color-divider)}
.ex-main__label{color:var(--color-text-secondary);font-size:var(--font-size-small)}
.ex-main__value{font-size:var(--font-size-numeric);font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-tight);color:var(--color-text);
  font-variant-numeric:var(--numeric-variant);margin-top:var(--space-1)}
/* Состояние словами вместо числа: шрифт меньше, цвет обычный. Красный
   здесь был бы неправдой — «не рахували» не авария. */
.ex-main__value--words{font-size:var(--font-size-h2);color:var(--color-text-secondary)}
.ex-main__state{display:inline-block;margin-top:var(--space-2);padding:2px var(--space-2);
  border-radius:var(--radius-pill);background:var(--color-brand-tint);
  color:var(--color-text-secondary);font-size:var(--font-size-caption)}
.ex-main__note,.ex-main__date,.ex-main__subject{margin-top:var(--space-2);
  color:var(--color-text-muted);font-size:12.5px}
.ex-main__subject{color:var(--color-text-body)}

.ex-sec{padding-top:var(--space-5)}
.ex-sec h4{margin:0 0 var(--space-2);font-size:var(--font-size-h3);
  font-weight:var(--font-weight-semibold);color:var(--color-text)}
.ex-caption,.ex-rule{margin:0 0 var(--space-2);color:var(--color-text-secondary);
  font-size:var(--font-size-small);line-height:var(--line-height-body)}
.ex-rule{color:var(--color-text-muted)}

/* Равенство: слева величина, справа значение, между ними знак. */
.ex-eq{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin:var(--space-3) 0;padding:var(--space-3);border-radius:var(--radius-md);
  background:var(--color-brand-soft)}
.ex-eq__part{display:flex;flex-direction:column;min-width:0}
.ex-eq__name{color:var(--color-text-secondary);font-size:var(--font-size-caption)}
.ex-eq__value{font-variant-numeric:var(--numeric-variant);color:var(--color-text)}
.ex-eq__op{color:var(--color-text-muted);font-size:var(--font-size-h2)}

.ex-measures{display:flex;flex-direction:column;gap:var(--space-1)}
.ex-measure{display:flex;align-items:center;gap:var(--space-3);width:100%;
  min-height:44px;padding:0 var(--space-3);text-align:left;
  background:var(--color-surface);color:var(--color-text-body);
  border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md)}
.ex-measure--on{border-color:var(--color-brand-border);background:var(--color-brand-soft)}
.ex-measure__name{flex:1}
.ex-measure__value{font-variant-numeric:var(--numeric-variant);
  font-weight:var(--font-weight-medium)}
.ex-measure__state{color:var(--color-text-muted);font-size:var(--font-size-caption)}

.ex-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:var(--space-1)}
.ex-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  background:var(--color-bg-alt);font-size:var(--font-size-small)}
.ex-row__label{color:var(--color-text-secondary);font-size:var(--font-size-caption);
  text-transform:uppercase;letter-spacing:.02em}
.ex-row__name{color:var(--color-text);font-weight:var(--font-weight-medium)}
.ex-row__when{color:var(--color-text-muted)}
.ex-row__value{margin-left:auto;font-variant-numeric:var(--numeric-variant)}
.ex-row__nodata{color:var(--color-text-muted);font-size:12.5px}
.ex-row__link{min-height:44px;flex-basis:100%}
.ex-row--hidden{background:var(--color-disabled-surface)}
.ex-row--note{display:block;background:var(--color-attention-surface);
  border:var(--border-width) solid var(--color-attention-border);
  color:var(--color-text-body)}

.ex-note{padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--color-bg-alt);border:var(--border-width) solid var(--color-border)}
.ex-note__text{margin-top:var(--space-2);color:var(--color-text-secondary);
  font-size:var(--font-size-small)}

.ex-foot{margin-top:var(--space-5);padding-top:var(--space-3);
  border-top:var(--border-width) solid var(--color-divider);
  color:var(--color-text-muted);font-size:12.5px}

/* =====================================================================
   ВХОД
   ===================================================================== */
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:var(--space-5)}
.login{width:100%;max-width:400px;margin:0}
.login .sub{margin-bottom:var(--space-5)}
.login .field{margin-bottom:var(--space-3)}
.login input{width:100%;height:var(--control-height-lg)}
.login__brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}

/* =====================================================================
   АДАПТИВНОСТЬ. Эталон — 1920. Высоты строк и кнопок не уменьшаются.
   ===================================================================== */
@media (max-width:1439px){
  /* 1280×720 и 1440: меню сворачивается, размеры прежние */
  body:not(.pinned){--sidebar-now:var(--sidebar-collapsed)}
  body:not(.pinned) .sidebar__name,
  body:not(.pinned) .navitem span,
  body:not(.pinned) .collapse span{display:none}
  body:not(.pinned) .navgroup{height:1px;padding:var(--space-3) var(--space-3) 0;
    overflow:hidden;color:transparent}
  body:not(.pinned) .sidebar__brand{justify-content:center;padding:0}
  body:not(.pinned) .navitem,
  body:not(.pinned) .collapse{justify-content:center;padding:0}
  body:not(.pinned) .navitem:hover::after{content:attr(data-title);position:absolute;
    left:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:var(--z-dropdown);
    background:var(--color-text);color:#fff;padding:6px 10px;border-radius:var(--radius-sm);
    font:var(--font-weight-medium) 12.5px/1 var(--font-family);white-space:nowrap;
    box-shadow:var(--shadow-overlay);pointer-events:none}
  main{padding:var(--space-5)}
}
@media (max-width:1279px){
  /* Планшет: цели нажатия от 44 px, строка таблицы от 56 px */
  td{height:var(--table-row-tablet)}
  button,.btn{height:var(--control-height-lg)}
  select{height:var(--control-height-lg)}
  .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  /* Планшет: две карточки показателей в ряд — правило адаптивности дизайна */
  .grid--kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-wrap{overflow-x:auto}
}

/* =====================================================================
   ПОЛОСА ПОКАЗА. Появляется только в режиме показа на тестовых данных.
   Спокойная, не тревожная: это не ошибка и не предупреждение о риске —
   красный в системе оставлен настоящей опасности. Полоса в потоке
   страницы, а не поверх неё: перекрывать рабочую область она не должна.
   ===================================================================== */
.demo-bar{position:relative;z-index:var(--z-sticky-header);
  padding:var(--space-2) var(--space-4);text-align:center;
  background:var(--color-brand-tint);color:var(--color-text-secondary);
  border-bottom:var(--border-width) solid var(--color-brand-border);
  font-size:var(--font-size-small);font-weight:var(--font-weight-medium)}
/* Каркас рабочего места прижат к верху экрана, поэтому при включённой
   полосе меню и верхняя панель опускаются ровно на её высоту. */
body:has(.demo-bar) .sidebar,
body:has(.demo-bar) .topbar{top:37px}
body:has(.demo-bar) .sidebar{bottom:0}
@media print{ .demo-bar{position:static;background:none;border:0} }

/* Узкий экран: боковая панель становится страницей во весь экран.
   Отдельной мобильной реализации пояснения нет и не будет — это тот же
   компонент, иначе две реализации однажды разошлись бы в словах. */
@media (max-width:640px){
  /* ВЕРХНЯЯ ПАНЕЛЬ НА УЗКОМ ЭКРАНЕ.
     Место делится в пользу ДЕЙСТВИЙ: единая точка входа события, выбор
     юрлица и выход остаются, название экрана и подпись «кто вошёл»
     уходят — их видно в меню и в профиле. Правило владельца о кнопках
     касается возможностей, а не подписей: убрать кнопку нельзя, убрать
     заголовок — можно.
     Измерено: без этого правила строка панели шире экрана телефона на
     136 px, и горизонтально ездит ВСЯ страница. */
  .topbar{gap:var(--space-3);padding:0 var(--space-3)}
  .topbar__title,.topbar__who,.topbar__sep{display:none}
  .topbar select{max-width:104px}
  /* Кнопка остаётся, укорачивается только её подпись: «+ Подію»
     вместо «+ Додати подію». Возможность при этом на месте — правило
     владельца о кнопках соблюдено. */
  .only-wide{display:none}
  .drawer{max-width:none}
  .drawer__body{padding:var(--space-4)}
  .ex-main__value{font-size:var(--font-size-h1)}
  .ex-row__value{margin-left:0}
  .explain-act{width:100%;justify-content:center}
  /* Равенство в столбик: на узком экране перенос по словам разрывал
     «= Заборгованість», и знак оставался висеть на прошлой строке. */
  .ex-eq{flex-direction:column;align-items:stretch}
  .ex-eq__op{line-height:1}
}

/* Самый узкий телефон (320 px). Подпись у кнопки события уходит совсем,
   остаётся знак «+»: имя действия читает голосовой помощник и подсказка
   при наведении (`aria-label`, `title`). Возможность на месте —
   исчезает только слово. Измерено: с полной подписью строка панели
   шире экрана на 39 px, и горизонтально ездит ВСЯ страница. */
@media (max-width:400px){
  .only-medium{display:none}
  #addEventBtn{padding-left:var(--space-3);padding-right:var(--space-3)}
}

/* =====================================================================
   ПЕЧАТЬ: без меню, панели и служебных кнопок
   ===================================================================== */
@media print{
  /* Диалог, боковая панель и наложение в печать не попадают: бумага не
     нажимается, а «Звідки ця цифра?» — элемент управления, не данные. */
  .sidebar,.topbar,.btn-row,button,.pager,.filters,
  .overlay,.modal,.drawer{display:none !important}
  main{margin:0;padding:0;max-width:none}
  .card{border:0;padding:0;box-shadow:none;margin-bottom:var(--space-6)}
  body{background:#fff}
  th{position:static;background:#fff}
  td,th{padding:4px 8px;font-size:10px}
}

/* ─────────────────────────────────────────────────────────────────────
   ВКЛАДКИ РАЗДЕЛА (фаза «СКЛАД РАБОТАЕТ» V1)
   Первая редакция переиспользовала `.navitem` — класс пункта БОКОВОГО
   меню, у которого ширина 100 %. Вкладки выстроились в столбец на всю
   ширину карточки и выглядели поломанными. Измерено снимком экрана,
   а не разбором: так этот дефект и виден.
   ───────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px;
  border-bottom:var(--border-width) solid var(--color-border)}
.tabs button{height:34px;padding:0 14px;border:0;background:transparent;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  color:var(--color-text-secondary);font-size:13.5px;font-weight:500;
  cursor:pointer;position:relative;top:1px;
  border-bottom:2px solid transparent}
.tabs button:hover{background:var(--color-bg-alt);color:var(--color-text)}
.tabs button.on{color:var(--color-brand);background:var(--color-brand-tint);
  border-bottom-color:var(--color-brand)}

/* ПІЛОТ (частина 20). Той самий компонент, що й смуга показу, з іншим
   тоном: пілот — це не тестові дані, це справжня робота в обмеженому
   обсязі. Червоний не береться: він лишений справжній небезпеці. */
.demo-bar--pilot{background:var(--color-warning-tint);
  color:var(--color-text-primary);
  border-bottom-color:var(--color-warning-border)}