/* ═══════════════════════════════════════════════════════════════════════════
   ФИНАНСЫ И ПОДДОНЫ — добавочные элементы к общей дизайн-системе

   Полоса исполнения плана — единственный новый элемент раздела. В строке
   видно сразу: сколько плана израсходовано и не вышли ли за него. Заливка
   нейтральная, бордо появляется только при настоящем перерасходе, штриховка
   означает «статьи нет в плане». Цвет только у потерь — как во всём сайте.
   ═══════════════════════════════════════════════════════════════════════════ */

.tbl td.execbar{border-left:1px solid var(--hair);vertical-align:middle}
.tbl td.execbar>.ebwrap{display:flex;align-items:center;gap:9px}
.eb{flex:1 1 auto;min-width:40px;height:8px;border-radius:5px;background:var(--surface-4);
  overflow:hidden}
.eb>i{display:block;height:100%;border-radius:5px;
  background:color-mix(in srgb,var(--muted) 78%,transparent)}
.eb.over>i{background:color-mix(in srgb,var(--loss) 66%,transparent)}
.eb>i.off{background:repeating-linear-gradient(135deg,
  color-mix(in srgb,var(--mid) 45%,transparent) 0 5px,transparent 5px 10px)}
.ebwrap>b{flex:0 0 54px;text-align:right;font-size:11.5px;font-weight:620;
  color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ebwrap>b.off{color:var(--mid);font-size:10.5px}

/* Подпись направления под названием статьи */
.tbl .c-grp{display:block;font-size:10.5px;color:var(--text-3);font-weight:450;margin-top:1px}

/* ── Столбиковый график «Ход года»: план и начисление рядом ────────────────
   Своя отрисовка на SVG вместо холста: две серии в одном ряду, подписи
   значений всегда на месте и не пропадают при перерисовке раздела. */
.fchart{width:100%;height:100%;min-height:150px;display:block;flex:1 1 auto}
.fchart .b-plan{fill:var(--bar)}
.fchart .b-acc{fill:var(--bar-2)}
/* Две линии «Ход года»: план — спокойный серый, начисление — акцент. */
.fchart .l-plan{stroke:var(--bar);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.fchart .l-acc{stroke:var(--bar-2);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.fchart .d-plan{fill:var(--bar)}
.fchart .d-acc{fill:var(--bar-2)}
/* Горизонтальные линии сетки и шкала слева — как на остальных графиках. */
.fchart .grid{stroke:var(--hair);stroke-width:1}
.fchart .ylab{fill:var(--text-3);font-size:8.5px;text-anchor:end}
.fchart .vlab{fill:var(--text-2);font-size:10px;font-weight:600;text-anchor:middle;
  font-variant-numeric:tabular-nums}
.fchart .mlab{fill:var(--text-2);font-size:11.5px;font-weight:600;text-anchor:middle}
.fleg{display:flex;gap:16px;padding:2px 14px 10px;font-size:11.5px;color:var(--text-2)}
.fleg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
  vertical-align:-1px}
.fleg .l1{background:var(--bar)}
.fleg .l2{background:var(--bar-2)}

/* ── Предупреждение о неполных данных ─────────────────────────────────────
   Некорректное подсвечиваем прямо на экране, а не прячем. */
/* Предупреждение — обычная карточка с латунной чертой слева,
   а не заливка цветом: правило «цвет только там, где он значит». */
.fnote{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;
  padding:8px 12px;font-size:12.5px;line-height:1.4;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--edge,var(--hair-2));
  border-left:3px solid var(--warn);border-radius:var(--radius-card)}
.fnote b{color:var(--text-1);font-weight:700}
.fnote b{color:var(--mid)}

/* ── Панель периода раздела ───────────────────────────────────────────────── */
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.fbar select{background:var(--surface-2);color:var(--text-1);border:1px solid var(--hair-2);
  border-radius:var(--radius-ctrl);font:inherit;font-size:12.5px;height:29px;padding:0 10px}
.fbar .seg{display:inline-flex;gap:3px}
.fbar .seg button{border:1px solid var(--hair-2);background:transparent;color:var(--text-1);
  font:inherit;font-size:12.5px;font-weight:500;height:29px;padding:0 11px;
  border-radius:var(--radius-ctrl);cursor:pointer}
.fbar .seg button:hover{color:var(--text-1)}
.fbar .seg button.on{background:var(--surface-head);border-color:var(--hair-2);
  color:var(--text-1)}
/* Нативное кольцо фокуса у выпадающих списков — тот самый синий контур. */
.fbar select:focus,.field-row select:focus{outline:1px solid var(--accent);outline-offset:0;border-color:var(--hair-2);box-shadow:none}
.fbar .sp{flex:1}

/* ── Карточки загрузки отчётов ────────────────────────────────────────────── */
.upl{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:10px;padding:12px 14px}
.upl .u{border:1px dashed var(--hair-2);border-radius:var(--radius-ctrl);padding:13px 14px;
  background:var(--surface-1);display:flex;flex-direction:column}
.upl .u .un{font-size:13px;font-weight:650;margin-bottom:5px}
.upl .u .uf{font-size:11.5px;color:var(--text-2);line-height:1.4}
.upl .u .uw{font-size:11px;color:var(--text-3);margin-top:7px;flex:1 1 auto}
.upl .u .urow{display:flex;gap:6px;margin-top:10px}
.upl .u select{flex:0 0 auto;background:var(--surface-2);color:var(--text-1);
  border:1px solid var(--hair-2);border-radius:8px;font:inherit;font-size:12px;padding:6px 8px}
.upl .u button{flex:1 1 auto;border:1px solid var(--accent-line);background:var(--accent-soft);
  color:var(--text-1);font:inherit;font-size:12px;font-weight:620;padding:7px;border-radius:8px;
  cursor:pointer}
.upl .u button:hover{border-color:var(--accent)}
.upl .u button[disabled]{opacity:.55;cursor:progress}

/* ── Карточка статьи в модальном окне ─────────────────────────────────────── */
.fitem{display:flex;flex-direction:column;gap:12px;padding:16px}
.fitem .fitem-h{font-size:17px;font-weight:700;letter-spacing:-.02em}
.fitem .fitem-h small{display:block;font-size:12px;font-weight:500;color:var(--text-2);
  margin-top:3px;letter-spacing:0}

/* ── Раздел «ЗП»: переключатели сортировки в шапке блока ─────────────────── */
.pr-sorts{display:inline-flex;gap:4px;margin-left:auto;flex:0 0 auto}
.pr-chip{border:1px solid var(--hair-2);background:transparent;color:var(--text-2);
  font:inherit;font-size:10.5px;font-weight:600;line-height:1;padding:5px 9px;
  border-radius:var(--radius-chip);cursor:pointer}
.pr-chip:hover{color:var(--text-1)}
/* Выбранный — как все переключатели сайта: заливка шапки, без акцента. */
.pr-chip.on{background:var(--surface-head,var(--surface-3));border-color:var(--hair-2);color:var(--text-1)}
.pr-lbl{font-size:12.5px;color:var(--text-2)}
.pr-srch{padding:10px 14px 12px}
.pr-srch input{width:100%;background:var(--surface-1);color:var(--text-1);
  border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);
  font:inherit;font-size:13px;padding:8px 11px}
.pr-srch input:focus{outline:none;border-color:var(--accent-line)}
.pr-cmp-pick{display:flex;align-items:center;gap:8px;padding:12px 14px 0;font-size:12.5px;
  color:var(--text-2)}
.pr-cmp-pick select{background:var(--surface-2);color:var(--text-1);border:1px solid var(--hair-2);
  border-radius:var(--radius-ctrl);font:inherit;font-size:13px;padding:6px 9px}
/* Заголовки колонок в таблицах ЗП переносятся, а не наезжают друг на друга:
   «Средняя за период» и «В месяц за год» рядом не помещались в одну строку. */
.tbl thead th{white-space:normal;line-height:1.2}
.pr-person-body{display:flex;flex-direction:column;gap:12px}

/* ── ТМЦ: общий вид с остальным сайтом ─────────────────────────────────────
   Раздел рисовал свои панели, круглые пилюли статусов и крупную красную
   кнопку удаления. Теперь панель — общий блок, а эти два элемента приведены
   к спокойной палитре: цвет несёт смысл, но не кричит. */
.tblock > .panel-body{padding:14px}
/* Отрицательный отступ здесь гасит поля тела блока, чтобы таблица шла от края
   до края. Но в components.css есть правило, которое само обнуляет поля, когда
   внутри лежит таблица (.tblock>.panel-body:has(>.tablewrap)). Вместе они
   давали минус двадцать восемь пикселей высоты: таблица вылезала за блок, а
   блок схлопывался и обрезал строки — так «уехали» все таблицы ТМЦ. Гасим
   поля только там, где они действительно есть. */
.tblock > .panel-body:not(:has(> .tablewrap)) > .tablewrap{margin:-14px}
/* Статус документа — контур без заливки. Раиль 21.08.2026: «я против вот этих
   некрасивых заливок, сделай премиально — окантовку цветную и букву цветную».
   Шесть залитых ярлыков в столбце читались как наклейки и спорили с данными;
   контур очерчивает слово, а цвет несёт само слово. Рамка берётся из
   currentColor — цвет статуса задаётся один раз, в модификаторе. */
.tmc-status{display:inline-block;font-size:11.5px;font-weight:600;line-height:1;
  padding:4px 8px;border-radius:var(--radius-chip);white-space:nowrap;letter-spacing:.015em;
  background:transparent;border:1px solid color-mix(in srgb,currentColor 42%,transparent)}
.tmc-status.tmc-ok{color:var(--ok)}
.tmc-status.tmc-bad{color:var(--danger)}
.tmc-status.tmc-mid{color:var(--mid)}
.tmc-status.tmc-acc{color:var(--accent)}
.tmc-status.tmc-neutral{color:var(--text-3)}
/* Латунь на белом даёт 4,27:1 — ниже нормы для мелкого текста. В светлой теме
   притемняем её до 5,6:1, оттенок остаётся тот же. */
html[data-theme="light"] .tmc-status.tmc-mid{color:color-mix(in srgb,var(--mid) 82%,var(--text-1))}
/* Широкие таблицы ТМЦ (остатки — тринадцать столбцов). Две меры разом:
   заголовкам убираем разрядку и чуть уменьшаем кегль, чтобы длинное слово
   вроде «СТОИМОСТЬ» помещалось в свой столбец; таблице задаём нижнюю
   границу — ниже неё блок прокручивается вбок, а не мнёт столбцы.
   Замер 21.08.2026: до правки «СТОИМОСТЬ» просила 79 px при ячейке 76 уже
   на экране 1600 и налезала на соседний заголовок. */
/* Ограничение — на самой таблице, а обёртка даёт прокрутку. На обёртке
   min-width ставить нельзя: она тогда не может стать уже и не прокручивается,
   а вылезает за блок и срезается. */
.tmc-xscroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
.tmc-wide{min-width:1270px}
.tmc-wide thead th{font-size:9.5px;letter-spacing:.02em;padding-left:9px;padding-right:9px}
.tmc-del{border:1px solid var(--hair-2);background:transparent;color:var(--text-2);
  font:inherit;font-size:11.5px;font-weight:600;line-height:1;padding:6px 10px;
  border-radius:var(--radius-ctrl);cursor:pointer;white-space:nowrap}
.tmc-del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:var(--danger-soft)}

/* ═══════════════════════════════════════════════════════════════════════
   ДОКУМЕНТЫ ТМЦ: поступление и списание
   Форма-бланк: слева реквизиты, справа строки с итогом. Таблица — как везде
   на сайте: шапка полосой, обводка по краям, границы между столбцами.
   ═══════════════════════════════════════════════════════════════════════ */
.doc-modal{min-width:min(900px,92vw);max-width:92vw}
.doc-head{padding:18px 22px 15px;border-bottom:1px solid var(--hair);
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.doc-head h2{font-size:16px;font-weight:640;letter-spacing:-0.01em;margin:0}
.doc-sub{font-size:11.5px;color:var(--text-3);margin-top:3px}
.doc-grid{display:grid;grid-template-columns:248px 1fr}
@media (max-width:820px){.doc-grid{grid-template-columns:1fr}}
.doc-side{background:var(--surface-1);border-right:1px solid var(--hair);padding:19px 18px}
@media (max-width:820px){.doc-side{border-right:0;border-bottom:1px solid var(--hair)}}
.doc-main{padding:19px 20px;min-width:0}
.doc-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.doc-f:last-child{margin-bottom:0}
.doc-f>label{font-size:10.5px;color:var(--text-3);letter-spacing:.02em;font-weight:500}
/* Поля и выпадающие списки строго одной высоты. line-height здесь не
   задаём: у select он обрезал нижнюю часть букв («Расход (списание)»,
   «— склад —» выглядели подрезанными). Высоту держит height + padding. */
.doc-ctrl{height:38px;padding:0 12px;line-height:normal;font-size:13px}
select.doc-ctrl{padding-right:30px;text-overflow:ellipsis}
.doc-side .doc-f>label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-capt{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
  font-weight:700;margin:0 0 9px}

.doc-tw{border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);overflow:hidden}
/* Колонки по содержимому (Р19): процентные ширины — как желаемые, но сумма
   строки не режется многоточием, а раздвигает свою колонку. */
.doc-tbl{width:100%;border-collapse:collapse;table-layout:auto}
.doc-tbl thead th{padding:9px 12px;background:var(--surface-head,var(--surface-3));border-bottom:1px solid var(--hair-2);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);
  text-align:left;white-space:nowrap}
.doc-tbl thead th+th{border-left:1px solid var(--hair)}
.doc-tbl thead th.r{text-align:right}
.doc-tbl tbody td{padding:6px 6px;border-bottom:1px solid var(--hair);font-size:12.5px;
  color:var(--text-1);position:relative;overflow:hidden}
.doc-tbl tbody td+td{border-left:1px solid var(--hair)}
.doc-tbl tbody tr:last-child td{border-bottom:0}
.doc-tbl td.r{text-align:right;font-variant-numeric:tabular-nums;padding-right:10px;white-space:nowrap}
.doc-tbl td.dim{color:var(--text-3)}
.doc-tbl td.v{text-align:right;font-size:12.5px;font-weight:640;font-variant-numeric:tabular-nums;
  padding-right:10px;white-space:nowrap}
/* Останется меньше минимума — латунь: это не ошибка, а повод заказать. */
.doc-tbl td.low{color:var(--mid);font-weight:620}
.doc-tbl td.bad{color:var(--danger);font-weight:620}
.doc-tbl tfoot td{padding:10px 12px;background:var(--surface-head,var(--surface-3));border-top:1px solid var(--hair-2);
  font-size:13px;font-weight:620}
.doc-tbl tfoot td+td{border-left:1px solid var(--hair)}
.doc-tbl tfoot td.v{font-size:14px;font-weight:680;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-right:10px}
.doc-tbl tfoot td.r{text-align:right;font-variant-numeric:tabular-nums}
/* Поля прямо в ячейках — без рамок, чтобы таблица читалась как таблица. */
/* Поля прямо в ячейках. Номенклатура — длинная («Гофрокороб (592×392×488)»),
   поэтому select ужимаем по шрифту и не даём ему распирать колонку. */
/* Селектор с .doc-tbl — иначе общий .inp перебивает размер шрифта и
   длинные названия перестают помещаться в ячейку. */
.doc-tbl .doc-cell{height:32px;line-height:30px;padding:0 6px;background:transparent;
  border-color:transparent;width:100%;max-width:100%;font-size:12px;text-overflow:ellipsis}
.doc-tbl select.doc-cell{padding-right:20px}
.doc-tbl .doc-cell:focus{background:var(--surface-1);border-color:var(--accent-line)}
.doc-cell:focus{background:var(--surface-1);border-color:var(--accent-line)}
.doc-cell.r{text-align:right;font-variant-numeric:tabular-nums}
.doc-del{position:absolute;right:2px;top:50%;transform:translateY(-50%);appearance:none;border:0;
  background:transparent;color:var(--text-3);font-size:12px;cursor:pointer;padding:4px 6px;
  border-radius:6px;opacity:0;transition:opacity .12s}
.doc-tbl tbody tr:hover .doc-del{opacity:1}
.doc-del:hover{background:var(--surface-3);color:var(--text-1)}
.doc-addline{margin-top:10px;font-size:12.5px;color:var(--accent);background:none;border:0;
  cursor:pointer;padding:5px 0;font-family:inherit;font-weight:520}

.doc-warn{margin-top:12px;border:1px solid color-mix(in srgb,var(--mid) 30%,transparent);
  background:color-mix(in srgb,var(--mid) 11%,transparent);border-radius:var(--radius-ctrl);padding:11px 14px}
.doc-warn b{font-size:12.5px;color:var(--mid);font-weight:620;display:block}
.doc-warn p{font-size:12px;color:var(--text-2);margin:4px 0 0;line-height:1.45}
.doc-warn.stop{border-color:color-mix(in srgb,var(--danger) 30%,transparent);
  background:var(--danger-soft)}
.doc-warn.stop b{color:var(--danger)}
.doc-err{margin:0 22px;font-size:13px;color:var(--danger);background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);border-radius:var(--radius-ctrl);
  padding:9px 12px}
.doc-foot{padding:14px 22px;border-top:1px solid var(--hair);display:flex;justify-content:flex-end;
  background:var(--surface-1)}
.doc-foot-right{display:flex;gap:10px}

/* ТМЦ: блоки «Расход ТМЦ» и «Норматив расхода» ниже — их читают рядом,
   и лишняя высота заставляла прокручивать экран. Плашки — общего
   компактного вида (components.css), своих размеров у раздела нет. */
.tmc-view .tblock-head{padding:8px 14px}
.tmc-view .tblock-body{padding:8px}

/* Техника: значения характеристик прижаты вправо — так столбец читается
   единой колонкой, а не рваным краем. */
.eqp-view .tbl td.v,.eqp-view .tbl th.v{text-align:right}
/* «Два столбца»: правая часть компактнее, чтобы карточка целиком помещалась
   на экран без прокрутки. */
.eqp-split .tbl tbody td{padding:4px 10px;font-size:12px}
.eqp-split .tbl thead th{padding:6px 10px;font-size:9px}
.eqp-split .tblock-head{padding:7px 12px}
.eqp-split .tblock-body{padding:7px}

/* Поля в окне документа — одной ширины и с одним шагом.
   Заказчик 09.09.2026: «начало всех плашек на одной вертикали, все
   одинаковой ширины, между ними одинаковое расстояние — сейчас левее,
   правее, ниже, выше». Списки были узкие по содержимому. */
.doc-side .doc-f>.doc-ctrl,
.doc-side .doc-f>.xsel,
.doc-side .doc-f>.xsel>.xsel-btn{width:100%;max-width:none;box-sizing:border-box}
.doc-side .doc-f>.xsel>.xsel-btn{height:38px;font-size:13px;padding:0 28px 0 12px;justify-content:space-between}
.doc-side .doc-f{margin-bottom:12px}