/* Интерфейс мастер-базы Angara DB. Дизайн-система «Реквизит» (токены ds/rekvizit/tokens.json макета
   «Структура завода»): светлая тема — как в макетах, тёмная — по значениям токенов «Реквизита».
   Шрифты IBM Plex Sans / Mono (SIL Open Font License) — свои файлы, без внешних запросов. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(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-weight: 500; font-display: swap; src: url(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-weight: 600; font-display: swap; src: url(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-weight: 400; font-display: swap; src: url(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+2000-206F, U+2190-21FF, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(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+2000-206F, U+2190-21FF, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(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+2000-206F, U+2190-21FF, U+2212, U+2215; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(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-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-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 Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }

:root {
  --surface-0: #f6f5f2; --surface-100: #ffffff; --surface-200: #eeede8; --surface-50: #fbfaf7;
  --line: #dedcd5; --line-strong: #878479;
  --ink: #1d201f; --ink-muted: #5c605d; --ink-faint: #6f736f;
  --brand: #0e5e5b; --brand-hover: #0a4643; --on-brand: #ffffff; --brand-soft: #e1efed;
  --accent: #94600f; --accent-soft: #faf0dd;
  --danger: #b42318; --danger-soft: #fbeae7;
  --success: #1f6b42; --success-soft: #e4f1e8;
  --shadow-card: 0 1px 2px rgba(29, 32, 31, 0.06);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --control-h: 40px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #131514; --surface-100: #1b1e1d; --surface-200: #252928; --surface-50: #1f2221;
    --line: #323735; --line-strong: #7a827e;
    --ink: #eef0ee; --ink-muted: #a7aeaa; --ink-faint: #8f9692;
    --brand: #5fc2b9; --brand-hover: #82d3cb; --on-brand: #0b1f1e; --brand-soft: #1c3432;
    --accent: #e3ad52; --accent-soft: #382d18;
    --danger: #ff8f80; --danger-soft: #3a201c;
    --success: #72cf98; --success-soft: #18321f;
    --shadow-card: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-0); color: var(--ink); font: 15px/22px var(--sans); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
input, select, button { font-family: inherit; }
:is(a, button, input, select):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.num { text-align: right; font-family: var(--mono); white-space: nowrap; }

/* ---------- шапка ---------- */
.top { background: var(--surface-100); border-bottom: 1px solid var(--line); }
/* шапка всегда широкая: заголовок, восемь разделов и пользователь помещаются в строку от 1366 px */
.top-in { max-width: calc(1400px + 48px); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center;
          gap: 20px; min-height: 56px; }
.brand { font-weight: 600; font-size: 15px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { padding: 8px 9px; border-radius: 6px; color: var(--ink-muted); font-weight: 500; font-size: 14px; line-height: 20px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-muted); }
.who form { margin: 0; }
.who-name { color: var(--ink-muted); }
.who-name:hover { color: var(--brand); }

/* ---------- страница ---------- */
main { max-width: calc(1200px + 48px);   /* как в макете: 1200 — ширина содержимого, отступы снаружи */
       margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
main.wide, .top-in.wide { max-width: calc(1400px + 48px); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head > div { display: flex; flex-direction: column; gap: 4px; }
.head-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; }
h1 .muted { font-weight: 400; }
h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.lead { margin: 0; color: var(--ink-muted); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--ink-muted); }
footer { text-align: center; color: var(--ink-faint); font-size: 12px; padding: 0 16px 24px; }

/* ---------- элементы управления ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label, .label { font-size: 13px; line-height: 18px; font-weight: 500; }
input[type=search], input[type=text], input[type=email], input[type=password], select {
  height: var(--control-h); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface-100); color: var(--ink); font-size: 15px; min-width: 0; }
input::placeholder { color: var(--ink-faint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h);
       padding: 0 16px; border-radius: 6px; border: 1px solid transparent; font-size: 15px; font-weight: 500;
       background: var(--brand); color: var(--on-brand); cursor: pointer; text-decoration: none; }
.btn:hover { color: var(--on-brand); filter: brightness(1.08); }
.btn.secondary { background: var(--surface-100); color: var(--ink); border-color: var(--line-strong); }
.btn.outline { background: var(--surface-100); color: var(--brand); border-color: var(--brand); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
button.link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font-size: inherit; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .grow { flex: 1 1 280px; max-width: 360px; }
.filters .w180 { flex: 0 1 180px; }
.filters .w240 { flex: 0 1 240px; }
/* длинные варианты списка («Установка компримир. … · СИБУР-Кстово») не растягивают поле и не ломают ряд фильтров */
.filters .w180, .filters .w240 { min-width: 0; }
.filters .w180 select, .filters .w240 select { width: 100%; }
.shown { margin-left: auto; color: var(--ink-muted); font-size: 13px; padding-bottom: 10px; }

/* ---------- карточки и таблицы ---------- */
.card { background: var(--surface-100); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card);
        overflow-x: auto; }
.card.pad { padding: 24px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead tr { background: var(--surface-200); text-align: left; }
th { padding: 10px 16px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); text-align: left; }
th.num { text-align: right; font-family: var(--sans); white-space: normal; }
td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--surface-0); }
td.id { font-family: var(--mono); color: var(--ink-muted); font-size: 14px; width: calc(56px + 32px); }
td.small { font-size: 14px; }
a.strong { font-weight: 500; }
.empty { padding: 32px; text-align: center; color: var(--ink-muted); }
.t-plants { min-width: 1080px; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px; line-height: 18px; font-weight: 500;
        background: var(--brand-soft); color: var(--brand); }
.chip.ok { background: var(--success-soft); color: var(--success); }
.chip.off { background: var(--surface-200); color: var(--ink-muted); }

.error { background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: 6px; font-size: 14px; margin: 0; }
.status { background: var(--success-soft); color: var(--success); padding: 10px 12px; border-radius: 6px; font-size: 14px; margin: 0; }

/* ---------- вход ---------- */
.login { width: 100%; max-width: 400px; margin: 48px auto 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.login form { display: flex; flex-direction: column; gap: 16px; }
.login h1 { font-size: 22px; line-height: 28px; }

/* ---------- справочники ---------- */
.t-companies { min-width: 900px; }
tr.holding td { background: var(--surface-50); }
tr.holding td.indent { font-weight: 600; padding-left: 16px; }
tr.child td.indent { padding-left: 40px; }
.dict-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.dict-fluids { flex: 999 1 560px; min-width: 0; }
.dict-countries { flex: 1 1 340px; min-width: 0; }
.t-fluids { min-width: 560px; }
td.similar { font-size: 13px; color: var(--accent); }
td.similar .variant { display: inline-block; margin-right: 8px; white-space: pre; }   /* pre — видны лишние пробелы */
.t-fluids th, .t-fluids td:nth-child(2), .t-fluids td:nth-child(3) { white-space: nowrap; }
/* правка в строках таблиц (Ф2) */
tr.editing td { background: var(--brand-soft); vertical-align: middle; }
.cell-input { height: 36px; padding: 0 8px; font-size: 14px; width: 100%; min-width: 120px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form, .inline-form { display: inline; margin: 0; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand); height: 32px; padding: 0 8px; font-size: 14px; }
.btn.ghost:hover { color: var(--brand-hover); filter: none; }
.btn.ghost.danger { color: var(--danger); }
.btn:disabled { background: var(--surface-200); color: var(--ink-faint); border-color: transparent; cursor: not-allowed; filter: none; }
.btn.ghost:disabled, .btn.ghost.danger:disabled { background: transparent; color: var(--ink-faint); }
.check-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.check-inline input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
a.edit-link { color: var(--ink); border-bottom: 1px dashed var(--line-strong); }
a.edit-link:hover { color: var(--brand); }
.node-form { display: flex; flex-direction: column; gap: 16px; }
.node-form .grid6 select, .node-form .grid6 input[type=text] { width: 100%; }
.node-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.node-form .node-actions { padding-top: 0; border-top: 0; }
.delete-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 340px; text-align: right; }
.chip-x { display: inline-flex; align-items: center; gap: 2px; }
.chip-x form { display: inline; margin: 0; }
.chip-x .x { border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font-size: 15px; padding: 0 4px; }
.chip-x .x:hover { color: var(--danger); }
.add-unit { display: flex; align-items: flex-end; gap: 8px; }
.add-unit .field { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-head .filters { padding: 0; }

/* ---------- общие детали карточек ---------- */
main.card-page { padding-top: 24px; gap: 20px; }
.title-block { display: flex; flex-direction: column; gap: 4px; }
.small { font-size: 13px; }
.strong { font-weight: 500; }
.flat { margin: 0; }
.push { margin-left: auto; }
.hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs a { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; color: var(--ink-muted);
          font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .count { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); }
.grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span6 { grid-column: span 6; }
.grid6 > * { min-width: 0; }
.ro { min-height: var(--control-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line);
      border-radius: 6px; background: var(--surface-200); color: var(--ink); overflow-wrap: anywhere; }
.form-card { max-width: 880px; display: flex; flex-direction: column; gap: 16px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shown.inline { margin-left: 0; }
.chip.warn { background: var(--accent-soft); color: var(--accent); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
a.chip { white-space: nowrap; }
a.chip:hover { filter: brightness(0.97); }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px;
          background: var(--surface-200); border-radius: 6px; }
.stats3 dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.stats3 dd { margin: 2px 0 0; font-family: var(--mono); }
.t-hex { min-width: 1100px; }
.t-bov { min-width: 720px; }
.t-cycles { min-width: 900px; }
.t-users { min-width: 900px; }
.req { color: var(--accent); }
.user-form { display: flex; flex-direction: column; gap: 16px; }
.agreement { max-width: 560px; }
.agree { display: flex; gap: 8px; align-items: flex-start; }
.doc { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.agreement form { gap: 12px; }
.agree input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.hint.center { text-align: center; margin: 0; }

/* ---------- карточка завода: дерево и панель ---------- */
.tree-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.tree-panel { flex: 1 1 360px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; overflow: visible; }
.tree-tools { padding: 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.checks { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.checks legend { font-size: 13px; font-weight: 500; padding: 0; margin-bottom: 4px; }
.checks label, .checks-ro label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; cursor: pointer; }
.checks input, .checks-ro input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.checks-ro { display: flex; flex-wrap: wrap; gap: 24px; }
.checks-ro label { cursor: default; color: var(--ink-muted); }
#tree { list-style: none; margin: 0; padding: 8px 0; }
.treerow { display: flex; align-items: center; gap: 4px; padding-right: 12px; min-height: 40px; border-left: 3px solid transparent; }
.treerow:hover { background: var(--surface-0); }
.treerow.sel { background: var(--brand-soft); border-left-color: var(--brand); }
.chev { width: 28px; height: 28px; flex: none; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; padding: 0; }
.chev-space { width: 28px; flex: none; }
.pick { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 8px 4px; cursor: pointer; color: var(--ink);
        display: flex; flex-direction: column; }
.pick .name { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treerow.sel .pick .name { font-weight: 600; }
.pick .kindlbl { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.pick .kindlbl.brand { color: var(--brand); }
.badge { flex: none; font-size: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 0 6px; }
.count-badge { flex: none; font-family: var(--mono); font-size: 12px; color: var(--ink-muted); background: var(--surface-200);
               border-radius: 4px; padding: 0 6px; }
a.more { flex: 1; padding: 8px 4px; font-size: 13px; }
.tree-empty { padding: 16px; color: var(--ink-muted); font-size: 14px; }
.note { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.node-panel { flex: 999 1 520px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.node-head { display: flex; flex-direction: column; gap: 6px; }
.node-head .path { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.node-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.node-title h2 { font-size: 22px; line-height: 28px; }
.passport { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-0); border-radius: 6px; }
.btn svg { flex: none; }

/* ---------- карточки установки и БОВ ---------- */
.t-unit-hex { min-width: 1040px; }
.form-card.narrow { max-width: 720px; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 20px 16px 16px; }
.links-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 20px; background: var(--surface-100);
               border: 1px solid var(--line); border-radius: 10px; }
.plaque { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 6px; background: var(--surface-200);
          color: var(--ink); font-size: 14px; }
.plaque .mono { font-size: 13px; color: var(--brand); }
.plaque:hover { color: var(--ink); filter: brightness(0.97); }
.note-block { background: var(--surface-200); box-shadow: none; display: flex; flex-direction: column; gap: 8px; }

/* ---------- раздел «Теплообменники» ---------- */
.plant-pick { min-width: 240px; }
.check-filter { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); font-size: 14px; cursor: pointer; }
.check-filter input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.count-warn { font-size: 13px; color: var(--accent); }
.scroll-card { max-height: calc(100vh - 120px); overflow: auto; }
/* шапка закреплена целиком: у двухстрочной («Аппарат | Для расчёта скорости» над столбцами) строки не налезают друг на друга */
.scroll-card thead { position: sticky; top: 0; z-index: 1; }
/* сортировка по столбцам: заголовок — кнопка, стрелка показывает направление; без сортировки стрелка — при наведении */
.sort-btn { all: unset; cursor: pointer; }
.sort-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.sort-btn::after { content: " ↕"; opacity: 0; font-size: 11px; }
th:hover .sort-btn::after { opacity: 0.6; }
th[aria-sort] { color: var(--ink); }
th[aria-sort="ascending"] .sort-btn::after { content: " ▲"; opacity: 1; }
th[aria-sort="descending"] .sort-btn::after { content: " ▼"; opacity: 1; }
.t-hex-editor { min-width: 1080px; font-size: 14px; }
.t-hex-editor td { padding: 8px 16px; }
td.miss { color: var(--accent); }
/* табличный редактор (Ф3) */
.hex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hex-toolbar .selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
/* hidden у элементов со своим display: иначе display перебивает hidden — панель видна при «Выбрано: 0», метка
   «Изменён» — у несохранённых и сохранённых строк одинаково */
.hex-toolbar .selection[hidden], .chip[hidden] { display: none; }
.hex-toolbar select { height: 36px; max-width: 240px; }
.hex-toolbar .selection input { height: 36px; width: 190px; padding: 0 8px; font-size: 14px; }
.hex-keys { margin-top: 8px; }
/* таблица с отметками и кнопкой под ней (карточка системы БОВ → «Аппараты») */
.t-bov th.sel, .t-bov td.sel { width: 36px; text-align: center; }
.t-bov td.sel input, .t-bov th.sel input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
/* раздел «Проверки» */
.check-card { margin-top: 16px; }
.check-what { margin: 0; padding: 0 16px 12px; }
.check-summary { padding: 8px 16px; cursor: pointer; font-size: 14px; border-top: 1px solid var(--line); }
.scroll-x { overflow-x: auto; }
.check-card .chip { white-space: nowrap; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.fluid-dialog textarea { width: 100%; font-family: var(--mono, monospace); font-size: 14px; padding: 8px; resize: vertical; }
.editing-table td { padding: 4px 6px; vertical-align: top; }
.editing-table th.sel, .editing-table td.sel { width: 36px; text-align: center; padding-top: 10px; }
.editing-table .cell-input { border-color: transparent; background: transparent; min-width: 0; }
.editing-table .cell-input:hover { border-color: var(--line); }
.editing-table .cell-input:focus { border-color: var(--brand); background: var(--surface-100); outline: none; }
.editing-table td.ecell { min-width: 120px; }
.editing-table td.ecell:nth-child(2) { min-width: 130px; }
.editing-table td.ecell:nth-child(6), .editing-table td.ecell:nth-child(7) { min-width: 190px; }   /* флюиды сторон */
.editing-table td.chg .cell-input { background: var(--accent-soft); }
.editing-table td.err .cell-input { border-color: var(--danger); }
.cell-error { font-size: 12px; line-height: 16px; color: var(--danger); padding: 2px 8px 0; }
.cell-input.miss::placeholder { color: var(--accent); }
.editing-table tr.picked td { background: var(--brand-soft); }
.editing-table tr.row-err td { box-shadow: inset 0 1px 0 var(--danger), inset 0 -1px 0 var(--danger); }
.editing-table td.status-cell { min-width: 200px; }
/* вид «Конструкция»: вычисляемые ячейки — серые; нет ходов у кожухотрубного — пунктир; столбцы скорости — свой заголовок */
.t-hex-construction td.calc { background: var(--surface-200); color: var(--ink-muted); padding-top: 14px; white-space: nowrap; }
.t-hex-construction td.ecell { min-width: 96px; }
.t-hex-construction:not(.t-hex-class) td.ecell:nth-child(3) { min-width: 250px; }   /* тип т/о — название целиком */
.t-hex-construction:not(.t-hex-class) td.ecell:nth-child(4) { min-width: 170px; }   /* материал трубок */
.t-hex-construction th.speed, .t-hex-construction .group-row th:last-child { background: var(--brand-soft); }
.t-hex-construction .group-row th { text-align: center; font-size: 13px; }
.editing-table td.warn .cell-input { border: 1px dashed var(--accent); }
.status-wrap { display: flex; align-items: center; gap: 6px; }
.hex-editor { max-height: calc(100vh - 200px); }   /* место под панелью «Сохранить» */
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px;
            background: var(--surface-100); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 -2px 8px rgba(29, 32, 31, 0.06); }
.fluid-dialog { border: 0; border-radius: 10px; padding: 24px; width: min(460px, 92vw); background: var(--surface-100); color: var(--ink);
                box-shadow: 0 8px 24px rgba(29, 32, 31, 0.18); }
.fluid-dialog::backdrop { background: rgba(29, 32, 31, 0.45); }
.fluid-dialog h2 { font-size: 22px; line-height: 28px; }
.warn-text { color: var(--accent); margin: 0; }

/* ---------- датчики ---------- */
:root { --hot-bg: #fbf3f0; --hot-head: #f7e9e4; --hot-ink: #8a3b22; --cold-bg: #f0f5f9; --cold-head: #e3edf5; --cold-ink: #234e70;
        --empty-bg: #f3f2ee; --dash: #b5b2a8; --check-bg: #fdf0d9; --check-ink: #7a4d0b; }
@media (prefers-color-scheme: dark) {
  :root { --hot-bg: #2a1d19; --hot-head: #33231e; --hot-ink: #f0b4a0; --cold-bg: #18222b; --cold-head: #1d2a35; --cold-ink: #a9c8e6;
          --empty-bg: #202322; --dash: #5a605d; --check-bg: #382d18; --check-ink: #e3ad52; }
}
.narrow-lead { max-width: 760px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.kpi { background: var(--surface-100); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.kpi dt { font-size: 13px; color: var(--ink-muted); }
.kpi dd { margin: 4px 0 2px; font: 600 24px/30px var(--mono); }
.kpi-note { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.legend { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-muted); padding-bottom: 10px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.sq { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sq.has { background: var(--success-soft); } .sq.none { background: var(--empty-bg); border: 1px dashed var(--dash); }
.sq.susp { background: var(--check-bg); }
.matrix-card { overflow-x: auto; }
.t-matrix { min-width: 1260px; font-size: 13px; }
.t-matrix th { text-align: center; padding: 8px; }
.t-matrix th[rowspan] { text-align: left; vertical-align: bottom; }
.t-matrix .hot-head { background: var(--hot-head); color: var(--hot-ink); font-weight: 600; }
.t-matrix .cold-head { background: var(--cold-head); color: var(--cold-ink); font-weight: 600; }
.t-matrix .hot-sub { background: var(--hot-bg); } .t-matrix .cold-sub { background: var(--cold-bg); }
.t-matrix .group-start { border-left: 2px solid var(--surface-100); }
.t-matrix td { padding: 4px; }
.t-matrix td:first-child, .t-matrix td:nth-child(2) { padding: 8px 12px; }
.cell { display: block; min-width: 78px; max-width: 180px; height: 40px; padding: 0 6px; border-radius: 4px; text-align: center;
        font: 11px/40px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* полное имя — в подсказке */
.t-matrix .chip, .t-matrix td:nth-last-child(2) { white-space: nowrap; }
.cell.has { background: var(--success-soft); color: var(--success); }
.cell.none { background: var(--empty-bg); color: var(--ink-faint); border: 1px dashed var(--dash); }
.cell.susp { background: var(--check-bg); color: var(--check-ink); }
a.cell { text-decoration: none; }
a.cell:hover, a.cell:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---------- датчики аппарата: привязка тегов к ролям сторон ---------- */
.sensor-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.sensor-side.hot h2 { color: var(--hot-ink); }
.sensor-side.cold h2 { color: var(--cold-ink); }
.role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.role-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0;
            border-top: 1px solid var(--surface-100); scroll-margin-top: 80px; }
.role-row:first-child { border-top: 0; }
.role-row:target { background: var(--surface-200); }
.role-name { flex: 0 0 200px; font-size: 14px; }
.role-tags { flex: 1 1 160px; display: flex; flex-wrap: wrap; gap: 4px; }
.role-add { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.role-add input[name="tag"] { flex: 1 1 200px; min-width: 0; height: 36px; }
@media (max-width: 520px) { .sensor-sides { grid-template-columns: 1fr; } .role-name { flex-basis: 100%; } }
.t-tags { min-width: 1100px; }
.t-tags .chip { margin: 0 4px 4px 0; }
td.old { color: var(--accent); }

@media (max-width: 860px) {
  .grid6 { grid-template-columns: 1fr; }
  .grid6 > * { grid-column: auto; }
  .stats3 { grid-template-columns: 1fr; }
  .tree-panel { max-width: none; }
  main { padding: 24px 16px 40px; }
  .top-in { padding: 8px 16px; gap: 12px; }
  .who { margin-left: 0; }
  .shown { margin-left: 0; padding-bottom: 0; }
}

/* Схемы (модуль scheme): цепочка «завод → … → установка / аппарат», плитки аппаратов установки, связи аппарата */
.scheme { display: flex; flex-direction: column; gap: 20px; }
.scheme-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.scheme-step { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-50); }
.scheme-step + .scheme-step::before { content: ""; position: absolute; left: -28px; top: 50%; width: 27px; border-top: 1px solid var(--line-strong); }
.scheme-step + .scheme-step::after { content: ""; position: absolute; left: -7px; top: calc(50% - 4px);
  border: 4px solid transparent; border-left: 6px solid var(--line-strong); border-right: 0; }
.scheme-step.current { border-color: var(--brand); background: var(--brand-soft); }
.scheme-kind { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.scheme-name { font-weight: 500; color: var(--ink); }
a.scheme-name { color: var(--brand); text-decoration: none; }
a.scheme-name:hover { text-decoration: underline; }
.scheme-aside .scheme-chain { flex-direction: column; gap: 24px; }
.scheme-aside .scheme-step + .scheme-step::before { left: 24px; top: -24px; width: 0; height: 23px; border-top: 0; border-left: 1px solid var(--line-strong); }
.scheme-aside .scheme-step + .scheme-step::after { left: 20px; top: -6px; border: 4px solid transparent; border-top: 6px solid var(--line-strong); border-bottom: 0; }
.scheme-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg a { padding: 6px 12px; font-size: 13px; line-height: 18px; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--surface-200); }
.seg a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.scheme-group { display: flex; flex-direction: column; gap: 10px; }
.scheme-group-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.scheme-group-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.scheme-group-head .count { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.eq-tile { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-100); color: var(--ink); text-decoration: none; }
.eq-tile:hover { border-color: var(--brand); }
.eq-tile:target { outline: 2px solid var(--brand); outline-offset: 2px; }
.eq-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eq-type { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.eq-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; line-height: 18px; }
.eq-flow .arrow { color: var(--ink-faint); }
.side::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.side.hot::before { background: var(--accent); }
.side.cold::before { background: var(--brand); }
.eq-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.scheme-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.scheme-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.scheme-layout h2 { margin-bottom: 16px; }
.hx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 16px; }
.hx-side { display: flex; flex-direction: column; gap: 6px; align-self: stretch; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.hx-side.hot { border-top: 3px solid var(--accent); }
.hx-side.cold { border-top: 3px solid var(--brand); }
.hx-side-head { display: flex; flex-direction: column; }
.hx-fluid { font-weight: 500; }
.hx-roles { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; }
.hx-roles li { display: flex; justify-content: space-between; gap: 8px; }
.hx-roles li > :first-child { flex: none; }
.hx-roles li > :last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.hx-core { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; padding: 16px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-200); }
.hx-bov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
/* Путь воды из ИС БОВ: вход → аппарат → выход; стрелка — по середине узлов (под подписью колонки 16 + 6 px) */
.wf { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto 40px minmax(0, 1fr); align-items: stretch; margin: 0 0 16px; }
.wf-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-nodes { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.wf-cap { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.wf-node { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--surface-100); overflow-wrap: anywhere; }
a.wf-node:hover { border-color: var(--line-strong); }
.wf-ext, .wf-none { border-style: dashed; }
.wf-self .wf-node { min-width: 120px; align-items: center; text-align: center; border-color: var(--line-strong); background: var(--surface-200); }
.wf-arrow { position: relative; align-self: center; height: 1px; margin-top: 22px; background: var(--line-strong); }
.wf-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left: 6px solid var(--line-strong);
  border-right: 0; }
@media (max-width: 860px) {
  .scheme-layout, .hx { grid-template-columns: minmax(0, 1fr); }
  .wf { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .wf-arrow { width: 1px; height: 20px; margin: 4px 0 4px 24px; }
  .wf-arrow::after { right: auto; top: auto; bottom: -1px; left: -4px; border: 4px solid transparent; border-top: 6px solid var(--line-strong);
    border-bottom: 0; }
  .scheme-chain { flex-direction: column; gap: 24px; }
  .scheme-step + .scheme-step::before { left: 24px; top: -24px; width: 0; height: 23px; border-top: 0; border-left: 1px solid var(--line-strong); }
  .scheme-step + .scheme-step::after { left: 20px; top: -6px; border: 4px solid transparent; border-top: 6px solid var(--line-strong); border-bottom: 0; }
}

/* Сводка по датчикам: дерево «завод → … → аппарат → датчики» со счётчиками в колонках */
.so-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 16px 0 12px; }
.so-tools .grow { flex: 1 1 280px; max-width: 360px; }
.so-card { background: var(--surface-100); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden; }
.so-head, .so-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 80px 70px minmax(0, 320px); gap: 12px; align-items: center; }
.so-head { padding: 10px 16px; font-size: 12px; line-height: 16px; color: var(--ink-muted); border-bottom: 1px solid var(--line); background: var(--surface-50); }
.so-row { padding: 8px 16px; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.so-row::-webkit-details-marker { display: none; }
.so-row:hover { background: var(--surface-50); }
.so-name { min-width: 0; overflow-wrap: anywhere; }
.so-name::before { content: "›"; display: inline-block; width: 14px; color: var(--ink-faint); transition: transform 0.15s; }
details[open] > .so-row .so-name::before { transform: rotate(90deg); }
.so-row.bare { cursor: default; }
.so-row.bare .so-name::before { visibility: hidden; }
.so-level { font-size: 12px; color: var(--ink-faint); }
.so-name a { color: var(--ink); font-weight: 500; text-decoration: none; }
.so-name a:hover { color: var(--brand); text-decoration: underline; }
.lvl-plant > .so-row { background: var(--surface-50); }
.lvl-plant > .so-row .so-name a { font-weight: 600; }
.lvl-eq > .so-row .so-name a { font-family: var(--mono); }
.so-num { font-family: var(--mono); text-align: right; }
.so-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.so-row.d1 .so-name, .so-sensors.d0 { padding-left: 20px; }
.so-row.d2 .so-name, .so-sensors.d1 { padding-left: 40px; }
.so-row.d3 .so-name, .so-sensors.d2 { padding-left: 60px; }
.so-row.d4 .so-name, .so-sensors.d3 { padding-left: 80px; }
.so-row.d5 .so-name, .so-sensors.d4 { padding-left: 100px; }
.so-row.d6 .so-name, .so-sensors.d5 { padding-left: 120px; }
.so-sensors { display: block; padding: 6px 16px 10px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.so-sensors tbody { display: table; border-collapse: collapse; margin-left: 34px; }
.so-sensors td { padding: 3px 12px 3px 0; }
.so-sensors td.hot::before, .so-sensors td.cold::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.so-sensors td.hot::before { background: var(--accent); }
.so-sensors td.cold::before { background: var(--brand); }
@media (max-width: 860px) {
  .so-head { display: none; }
  .so-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .so-row > :nth-child(4), .so-row > :nth-child(5) { display: none; }
  .so-sensors tbody { margin-left: 0; }
}

/* Журнал изменений (Ф4) */
.meta-link { color: var(--brand); text-decoration: none; }
.meta-link:hover { text-decoration: underline; }
.ch-filters { margin: 16px 0 12px; }
.ch-buttons { display: flex; gap: 8px; }
.ch-record { margin: 0 0 12px; font-size: 14px; }
.ch-record a { margin-left: 8px; color: var(--brand); }
.t-changes td { vertical-align: top; }
.t-changes .nowrap { white-space: nowrap; }
.t-changes .chip.warn { margin-top: 4px; }
.ch-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-field { color: var(--ink-muted); }
.ch-old { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ch-new { font-weight: 500; }
.ch-more { padding: 12px 16px; border-top: 1px solid var(--line); }

/* Права ролей: таблица «раздел × роль» с флажками */
.rights-card { overflow-x: auto; margin-top: 16px; }
.t-rights th[scope="col"] { min-width: 120px; vertical-align: bottom; }
.t-rights th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
.rc-cell { vertical-align: top; }
.rc-cell.locked { color: var(--ink-muted); }
.rc-cell.changed { background: var(--accent-soft); }
.rc { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; cursor: pointer; white-space: nowrap; }
.rights-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; }
.rights-save .grow { flex: 1 1 320px; max-width: 560px; }
.ch-reason { color: var(--ink-muted); font-style: italic; }

/* Готовность завода: разделы карточками, в каждом — проверки со значком уровня */
.ready-sum { margin: 0 0 16px; }
.ready-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.ready-card h2 { margin: 0 0 8px; }
.ready-list { list-style: none; margin: 0; padding: 0; }
.ready-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 8px 0;
             border-top: 1px solid var(--line); }
.ready-row:first-child { border-top: 0; }
.ready-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ready-mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
              font-size: 12px; font-weight: 600; margin-top: 1px; }
.ready-mark.ok { background: var(--success-soft); color: var(--success); }
.ready-mark.warn { background: var(--accent-soft); color: var(--accent); }
.ready-mark.bad { background: var(--danger-soft); color: var(--danger); }
.ready-mark.info { background: var(--surface-200); color: var(--ink-muted); }
.ready-value { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ready-value.bad { color: var(--danger); font-weight: 500; }
.ready-value.warn { color: var(--accent); font-weight: 500; }
.ready-value.info { color: var(--ink-muted); }