/* ═══════════════════════════════════════════════════════════════════
   EPC-OS · оформление
   Значения взяты из «фирменный стиль/tokens/tokens.json».
   Меняем там и переносим сюда, а не правим по месту.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0D1013; --ink-2:#22272C; --ink-3:#5A646D; --ink-4:#8B959E;
  --paper:#F4F6F8; --raised:#FFFFFF; --sunken:#EDF0F3;
  --line:#D5DAE0; --line-2:#A6AFB8;
  --hvoya:#123A2A; --svetlaya:#8FBFA8;
  --ok:#0E8A4F; --warn:#B06E00; --risk:#D62839; --idle:#5A646D;
  --font:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F2F4F6; --ink-2:#C3CAD1; --ink-3:#8E99A3; --ink-4:#6B757E;
    --paper:#0C0F12; --raised:#14181C; --sunken:#0A0D10;
    --line:#232A31; --line-2:#384049;
    --hvoya:#4FAE81;
    --ok:#35C27E; --warn:#F0A93B; --risk:#FF6470; --idle:#8E99A3;
  }
}
:root[data-theme="dark"]{
  --ink:#F2F4F6; --ink-2:#C3CAD1; --ink-3:#8E99A3; --ink-4:#6B757E;
  --paper:#0C0F12; --raised:#14181C; --sunken:#0A0D10;
  --line:#232A31; --line-2:#384049;
  --hvoya:#4FAE81;
  --ok:#35C27E; --warn:#F0A93B; --risk:#FF6470; --idle:#8E99A3;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:600}
p{margin:0}
a{color:inherit}

.lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── каркас ─────────────────────────────────────────── */
.okno{display:grid;grid-template-columns:190px 1fr;min-height:100vh}

nav{background:var(--hvoya);padding:var(--s5) 0;display:flex;flex-direction:column;gap:2px}
nav .znak{display:flex;align-items:center;gap:10px;padding:0 var(--s4) var(--s5);color:#FFF}
nav .znak span{font-size:12px;text-transform:uppercase;line-height:1}
nav .znak b{font-weight:700}
nav .znak i{font-style:normal;font-weight:300;letter-spacing:.06em}
nav a{display:block;padding:10px var(--s4);border-left:3px solid transparent;
  color:#A9CDBB;font-size:14.5px;text-decoration:none}
nav a:hover{color:#FFF}
nav a[aria-current="page"]{background:rgba(255,255,255,.09);
  border-left-color:var(--svetlaya);color:#FFF;font-weight:600}
nav .kto{margin-top:auto;padding:var(--s4);border-top:1px solid rgba(255,255,255,.14);
  color:#A9CDBB;font-size:12.5px;line-height:1.4}
nav .kto b{display:block;color:#FFF;font-size:13.5px}

main{padding:var(--s5) var(--s6) var(--s6);overflow-x:auto;background:var(--raised)}

.shapka-ekrana{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);flex-wrap:wrap}
.shapka-ekrana h2{font-size:25px}
.shapka-ekrana .pod{color:var(--ink-3);font-size:14px;margin-top:3px}

/* ── переключатели ──────────────────────────────────── */
.perekl{display:flex;border:1px solid var(--line-2);align-self:flex-start}
.perekl a{padding:6px 14px;font-size:13px;color:var(--ink-3);text-decoration:none;
  border-right:1px solid var(--line-2)}
.perekl a:last-child{border-right:none}
.perekl a[aria-pressed="true"]{background:var(--hvoya);color:#FFF;font-weight:600}
.razrez{margin-bottom:var(--s5)}
.razrez a{padding:7px 16px;font-size:13.5px}

/* ── блоки и плитки ─────────────────────────────────── */
.bloki{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.blok{border:1px solid var(--line-2);background:var(--raised);padding:var(--s5);
  text-decoration:none;display:block}
.blok:hover{border-color:var(--hvoya);background:var(--sunken)}
.blok .znach{font-family:var(--mono);font-size:34px;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1.05;margin:var(--s2) 0 var(--s1)}
.blok .ed{font-size:13px;color:var(--ink-3)}
.blok .raspis{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
.blok .raspis span{display:flex;justify-content:space-between;gap:var(--s3)}
.blok .dalee{margin-top:var(--s3);font-size:12.5px;color:var(--hvoya);font-weight:600}

.plitki{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);margin-bottom:var(--s5)}
.plitki > div{padding:var(--s4);border-right:1px solid var(--line)}
.plitki > div:last-child{border-right:none}
.plitki .znach{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;margin-top:5px;line-height:1.1}
.plitki .sut{font-size:12px;color:var(--ink-4);margin-top:3px}
.plitki .znach.plus{color:var(--ok)}

/* Карточка открытой ведомости Ф-5: что именно сейчас на экране.
   Плитки над ней считают все ведомости разом, а эта — про одну. */
.karta-ved{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s4);padding:var(--s4);background:var(--sunken);
  border:1px solid var(--line);margin-bottom:var(--s4)}
/* Ячейка сетки по умолчанию не уже своего содержимого: сметный номер
   в 27 знаков разъезжался и наползал на соседний столбец. */
.karta-ved > div{min-width:0}
.karta-ved .znach-m{font-size:14px;color:var(--ink);font-weight:500;margin-top:4px;
  line-height:1.35;overflow-wrap:anywhere}
/* Общий класс .num запрещает перенос — числам он и не нужен. Но
   сметный номер в 27 знаков не число: без переноса он вылезает
   из ячейки и наползает на соседний столбец. */
.karta-ved .znach-m.num{font-family:var(--mono);font-size:13px;
  white-space:normal}

/* ── таблицы ────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hvoya);font-weight:600;text-align:left;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--line-2)}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:middle}
/* Отступ слева обязателен у всех столбцов, кроме первого: без него
   соседние значения читаются как одно — «68,9 14.09.26» вместо суммы
   и срока, «СВОБОДНОЗАКРЫТО» вместо двух заголовков. */
thead th + th,tbody td + td{padding-left:16px}
th.pr,td.pr{text-align:right;padding-right:0;padding-left:20px}
tr.itog td{border-bottom:none;border-top:2px solid var(--ink);font-weight:600;
  color:var(--ink);padding-top:12px}
.tabl{overflow-x:auto}
td.gl{color:var(--ink);font-weight:500}
td.gl a{text-decoration:none}
td.gl a:hover{color:var(--hvoya);text-decoration:underline}
tr.chast td{background:var(--sunken)}
tr.chast td.gl{font-weight:400;padding-left:22px;color:var(--ink-2)}
.pusto{padding:var(--s6) 0;color:var(--ink-3);font-size:15px}

/* ── состояние ──────────────────────────────────────── */
.sost{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  white-space:nowrap}
.sost::before{content:"";width:9px;height:9px;flex:none}
.sost.ok{color:var(--ok)} .sost.ok::before{background:var(--ok)}
.sost.warn{color:var(--warn)} .sost.warn::before{background:var(--warn);transform:rotate(45deg)}
.sost.risk{color:var(--risk)} .sost.risk::before{background:var(--risk);clip-path:polygon(50% 0,100% 100%,0 100%)}
.sost.idle{color:var(--idle)} .sost.idle::before{border:1.5px solid var(--idle)}
.sost.done{color:var(--ink-3)} .sost.done::before{background:var(--ink-3);border-radius:50%}

.polosa{height:6px;background:var(--sunken);position:relative;min-width:80px;display:block}
.polosa i{position:absolute;left:0;top:0;bottom:0;display:block;background:var(--hvoya)}

.nazad{color:var(--hvoya);font-size:13.5px;font-weight:600;text-decoration:none;
  display:inline-block;margin-bottom:var(--s3)}
.zametka{margin-top:var(--s5);border-left:3px solid var(--hvoya);padding-left:var(--s4);
  font-size:14px;color:var(--ink-3);max-width:72ch}
.zametka.vazhno{border-left-color:var(--warn);color:var(--ink-2)}

@media (max-width:860px){
  .okno{grid-template-columns:1fr}
  nav{flex-direction:row;flex-wrap:wrap;padding:var(--s3);gap:var(--s1)}
  nav .znak,nav .kto{display:none}
  nav a{border-left:none;border-bottom:3px solid transparent;padding:7px 12px}
  nav a[aria-current="page"]{border-left-color:transparent;border-bottom-color:var(--svetlaya)}
  main{padding:var(--s4)}
}

/* ═══ ВХОД И ПРАВА ═══════════════════════════════════════════════════ */

/* Свои действия — смена пароля и выход. Стоят вместе внизу меню:
   человек ищет их там же, где своё имя, а не среди разделов работы. */
nav .kto .svoi-deystviya{display:flex;gap:var(--s3);margin-top:var(--s2);
  flex-wrap:wrap}
nav .kto .svoi-deystviya a,
nav .kto .vyhod{display:inline-block;padding:0;
  color:#A9CDBB;font-size:12.5px;text-decoration:underline;border:none;background:none}
nav .kto .svoi-deystviya a:hover,
nav .kto .vyhod:hover{color:#FFF}

/* Страница входа стоит отдельно: ни меню, ни разделов на ней нет —
   человек ещё никто. */
body.stranica-vhoda{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:var(--s5);background:var(--paper)}

.vhod{width:100%;max-width:380px;background:var(--raised);
  border:1px solid var(--line-2);padding:var(--s6)}
.vhod .znak{display:flex;align-items:center;gap:10px;color:var(--hvoya);
  margin-bottom:var(--s4)}
.vhod .znak svg{fill:var(--hvoya)}
.vhod .znak span{font-size:14px;text-transform:uppercase;line-height:1}
.vhod .znak b{font-weight:700}
.vhod .znak i{font-style:normal;font-weight:300;letter-spacing:.06em}
.vhod .kompaniya{font-size:14px;color:var(--ink-3);margin:0 0 var(--s5)}

.vhod label,.forma label{display:block;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2)}
.vhod input,.forma input{display:block;width:100%;padding:10px 12px;
  margin-bottom:var(--s4);border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink);font-family:var(--font);font-size:15px}
.vhod input:focus,.forma input:focus{outline:2px solid var(--hvoya);
  outline-offset:-2px;border-color:var(--hvoya)}
.vhod button,.forma button{width:100%;padding:11px;border:1px solid var(--hvoya);
  background:var(--hvoya);color:#FFF;font-family:var(--font);font-size:15px;
  font-weight:600;cursor:pointer}
.vhod button:hover,.forma button:hover{background:#0C2A1E}

.forma{max-width:380px}
.forma button{width:auto;padding:11px 24px}

.beda{margin:0 0 var(--s4);padding:10px 12px;border-left:3px solid var(--risk);
  background:var(--sunken);color:var(--ink);font-size:14px}

.podskazka{margin:var(--s4) 0 0;font-size:13px;color:var(--ink-3);line-height:1.5}

.soobshchenie{max-width:60ch;color:var(--ink-2)}
.soobshchenie p{margin:0 0 var(--s3)}
.soobshchenie .num{font-family:var(--mono);font-size:13px;
  background:var(--sunken);padding:1px 6px}

/* ═══ СНАБЖЕНИЕ ══════════════════════════════════════════════════════ */

/* Сообщение после действия */
.udalos{margin:0 0 var(--s5);padding:10px 12px;border-left:3px solid var(--ok);
  background:var(--sunken);color:var(--ink);font-size:14px}

/* Путь заявки по цепочке */
.put{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin-bottom:var(--s5)}
.put > div{flex:1 1 110px;padding:10px var(--s3);border-right:1px solid var(--line);
  color:var(--ink-4)}
.put > div:last-child{border-right:none}
.put .shag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;margin:0}
.put > div.proydeno{color:var(--ink-2);background:var(--sunken)}
.put > div.proydeno .shag{color:var(--ok)}
.put > div.seychas{color:#FFF;background:var(--hvoya)}
.put > div.seychas .shag{color:var(--svetlaya)}

/* Свойства заявки над таблицей */
.svoystva{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s4);margin-bottom:var(--s5)}
.svoystva .znach{font-size:15px;color:var(--ink);font-weight:500;margin-top:3px}

/* Кнопки шагов */
.deystviya{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5);
  align-items:flex-start}
.deystviya form{margin:0}
.knopka{padding:9px 18px;border:1px solid var(--hvoya);background:var(--hvoya);
  color:#FFF;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer}
.knopka:hover{background:#0C2A1E}
.knopka.tihaya{background:none;color:var(--hvoya)}
.knopka.tihaya:hover{background:var(--sunken)}
.knopka.otkaz{border-color:var(--risk);background:none;color:var(--risk)}
.knopka.otkaz:hover{background:var(--risk);color:#FFF}

/* Отклонение с причиной: поле и кнопка вместе */
.s-prichinoy{display:flex;gap:0}
.s-prichinoy input{padding:9px 12px;border:1px solid var(--line-2);border-right:none;
  background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;
  min-width:220px}
.s-prichinoy input:focus{outline:2px solid var(--risk);outline-offset:-2px}

/* Форма прямо в строке таблицы: приёмка и списание */
.v-stroke{display:flex;gap:var(--s2);align-items:center;flex-wrap:nowrap}
.v-stroke select,.v-stroke input{padding:5px 8px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font-family:var(--font);font-size:13.5px;
  min-width:0}
.v-stroke select{max-width:150px}
.v-stroke input{width:88px}
.v-stroke input:focus,.v-stroke select:focus{outline:2px solid var(--hvoya);
  outline-offset:-2px}
.v-stroke .knopka{padding:6px 12px;font-size:13px;white-space:nowrap}

/* Срочная заявка и просроченный срок */
.srochno{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#FFF;background:var(--risk);padding:2px 6px;
  margin-left:6px}
td.prosrok{color:var(--risk);font-weight:600}

/* Переключатель ведомостей и складов — как переключатель контура */
.razrez{display:flex;flex-wrap:wrap;border:1px solid var(--line-2);
  align-self:flex-start;margin-bottom:var(--s5);width:fit-content}
.razrez a{padding:7px 16px;font-size:13.5px;color:var(--ink-3);text-decoration:none;
  border-right:1px solid var(--line-2)}
.razrez a:last-child{border-right:none}
.razrez a[aria-pressed="true"]{background:var(--hvoya);color:#FFF;font-weight:600}

/* ═══ ФОРМЫ ВВОДА ════════════════════════════════════════════════════ */

.polya-shapki{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4);margin-bottom:var(--s6)}
.polya-shapki .shirokoe{grid-column:1/-1}
.polya-shapki label{display:block;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2)}
.polya-shapki input,.polya-shapki select{width:100%;padding:9px 12px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15px}
.polya-shapki input:focus,.polya-shapki select:focus{outline:2px solid var(--hvoya);
  outline-offset:-2px;border-color:var(--hvoya)}

.podzagolovok{font-size:16px;margin:0 0 var(--s3)}

/* Таблица ввода: поля во всю ширину ячейки, без лишних рамок */
table.vvod th{padding-left:14px}
table.vvod th:first-child{padding-left:0}
table.vvod td{padding:5px 8px 5px 0;vertical-align:middle}
table.vvod td:last-child{padding-right:0}
table.vvod input,table.vvod select{width:100%;padding:7px 10px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:14px}
table.vvod input:focus,table.vvod select:focus{outline:2px solid var(--hvoya);
  outline-offset:-2px;border-color:var(--hvoya)}
table.vvod td.pr input{text-align:right;font-family:var(--mono)}
table.vvod td.edinica{color:var(--ink-3);font-size:13.5px;text-align:center}
table.vvod .ubrat{border:1px solid var(--line-2);background:none;
  color:var(--ink-4);cursor:pointer;width:30px;height:30px;font-size:14px;
  line-height:1}
table.vvod .ubrat:hover{border-color:var(--risk);color:var(--risk)}

a.knopka{display:inline-block;text-decoration:none;text-align:center}

/* Поле выбора файла */
.polya-shapki input[type=file]{padding:7px 10px;background:var(--paper);
  cursor:pointer}
.polya-shapki input[type=file]::file-selector-button{margin-right:12px;
  padding:5px 12px;border:1px solid var(--hvoya);background:none;
  color:var(--hvoya);font-family:var(--font);font-size:13.5px;cursor:pointer}
.polya-shapki input[type=file]::file-selector-button:hover{
  background:var(--hvoya);color:#FFF}
td .melko{display:block;font-size:11px}

/* Предупреждение перед необратимым: заметнее заметки, но не ошибка —
   человек ничего не сломал, ему просто нельзя нажимать дальше. */
.preduprezhdenie{border:1px solid var(--warn);border-left-width:3px;
  padding:var(--s4);margin:var(--s5) 0;font-size:14px;color:var(--ink-2);
  line-height:1.5}
.preduprezhdenie .zagl{font-weight:600;color:var(--ink);margin:0 0 var(--s2)}
.preduprezhdenie ul{margin:0 0 var(--s3);padding-left:20px}
.preduprezhdenie li{margin-bottom:4px}
.preduprezhdenie p:last-child{margin-bottom:0}

/* Удаление ведомости стоит в общем ряду карточки, но не должно
   выглядеть как обычное действие: цвет предупреждающий, вида кнопки нет. */
.karta-ved .udalenie{margin-top:4px}
.knopka-ssylka{background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:500;color:var(--risk);
  text-decoration:underline;text-underline-offset:3px}
.knopka-ssylka:hover{color:var(--ink)}