/*
  Каркас кликабельного прототипа Сервиса ЭНТЭР.
  Примитивы повторяют ui-kit реализации (src/Ntr.Web/src/app/ui): шапка, боковое меню-дерево,
  вкладки, поля ввода, выпадающий список, переключатель, таблица, бейдж, пагинация.
  Страницы прототипа подключают этот файл относительной ссылкой и содержат только своё содержимое.
*/
:root {
  /* Токены из реализации: src/Ntr.Web/src/styles/vars.less */
  --ntr-primary-50: #F0F6FB;
  --ntr-primary-100: #D6E5F3;
  --ntr-primary-200: #ADC9E5;
  --ntr-primary-500: #1C5C98;
  --ntr-primary-600: #164B7D;
  --ntr-primary-700: #113B63;
  --ntr-primary-800: #0C2B49;
  --ntr-primary-900: #071C32;
  --ntr-primary: var(--ntr-primary-700);
  --ntr-primary-darken: var(--ntr-primary-800);
  --ntr-primary-fg: #fff;
  --ntr-primary-lt: color-mix(in oklab, var(--ntr-primary) 10%, transparent);
  --ntr-focus-ring: rgba(173, 201, 229, .4);
  --ntr-gray-50: #F7F8FA;
  --ntr-gray-100: #F0F2F5;
  --ntr-gray-200: #DFE3E8;
  --ntr-gray-400: #8D99A6;
  --ntr-gray-500: #5A6A78;
  --ntr-gray-600: #3D4D5C;
  --ntr-gray-700: #2E3D4A;
  --ntr-code-bg: var(--ntr-gray-100);
  --ntr-red: #C43D3D;
  --ntr-green: #1A8754;
  --ntr-body-color: var(--ntr-gray-600);
  --ntr-link-color: var(--ntr-primary-500);
  --ntr-link-hover-color: var(--ntr-primary-700);
  --ntr-border-color: var(--ntr-gray-200);
  --ntr-border-radius: 6px;
  --ntr-bg-surface: #fff;
  --ntr-sidebar-bg: var(--ntr-primary-500);
  --ntr-sidebar-color: var(--ntr-primary-100);
  --ntr-sidebar-active-color: #fff;
  --ntr-sidebar-border-color: var(--ntr-primary-600);
  --ntr-sidebar-hover-bg: rgba(255, 255, 255, .12);
  --ntr-navbar-active-bg: rgba(255, 255, 255, .22);

  /* Рабочие алиасы каркаса */
  --nav: var(--ntr-sidebar-bg);
  --nav-active: var(--ntr-navbar-active-bg);
  --line: var(--ntr-border-color);
  --ink: var(--ntr-gray-700);
  --muted: var(--ntr-gray-500);
  --bg: var(--ntr-gray-50);
  --field: var(--ntr-gray-50);
  --green: var(--ntr-green);
  --accent: #6FCF97;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ntr-body-color);
  background: var(--bg);
}

a { color: var(--ntr-link-color); text-decoration: none; }
a:hover { color: var(--ntr-link-hover-color); text-decoration: underline; }

/* --- каркас страницы -------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.brand { background: var(--ntr-sidebar-bg); border-bottom: 1px solid var(--ntr-sidebar-border-color); color: #fff; height: 60px; padding: 2px 24px 0; overflow: hidden; }
.brand .mark { display: block; height: 36px; width: 209px; background: url('logo.png') left center/contain no-repeat; }
.brand span { font-size: 9px; color: #c9dcf1; }

.topbar { background: #fff; border-bottom: 1px solid var(--line); min-height: 60px; padding: 0 22px; display: flex; align-items: center; }
.topbar .user { margin-left: auto; color: var(--muted); }

/* --- строка контекста (навигационная цепочка) ------------------------- */
.contextbar { padding: 0 0 10px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; margin: 0 7px; color: var(--muted); }
.breadcrumb-item a { color: var(--ntr-link-color); }
.breadcrumb-item.active { color: var(--ink); }

/* --- главное меню модуля и меню пользователя (ОПЭС) ------------------- */
.topbar-menu { display: flex; align-items: center; gap: 2px; margin-left: 24px; }
.topbar--menu-only .topbar-menu { margin-left: 0; }
.topbar-menu a { padding: 4px 10px; border-radius: 3px; color: var(--ink); font-size: 13px; }
.topbar-menu a:hover { background: var(--ntr-gray-100); text-decoration: none; }
.topbar-menu a.act { background: var(--ntr-primary-lt); color: var(--ntr-primary); }
.user.dropdown { position: relative; }
.user-btn { border: 0; background: transparent; font: inherit; color: var(--muted); cursor: pointer; padding: 4px 4px; }
.user-btn .chev { margin-left: 4px; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; z-index: 60; min-width: 160px; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.user.open .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 7px 12px; color: var(--ink); }
.dropdown-menu a:hover { background: var(--ntr-gray-100); text-decoration: none; }

/* --- переключатель модулей ОПЭС -------------------------------------- */
.modswitch { position: relative; margin-left: 16px; }
.modswitch-btn { border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 5px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.modswitch .chev { color: var(--muted); }
.modswitch-menu { display: none; position: fixed; z-index: 60; list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 320px; }
.modswitch.open .modswitch-menu { display: block; }
.modswitch-menu li.act { background: #eef3fa; }
.modswitch-menu a { display: block; padding: 7px 12px; color: var(--ink); }
.modswitch-menu a:hover { text-decoration: none; background: #f4f6f8; }
.modswitch-menu a b { display: block; }
.modswitch-menu a span { display: block; color: var(--muted); font-size: 10px; }
.modswitch-menu a.off { color: var(--muted); }

/* переключатель модулей в блоке логотипа сайдбара (как sidebar-logo → subsystem-switcher) */
.modswitch--brand { margin-left: 47px; margin-top: 0; line-height: 17px; }
.modswitch--brand .modswitch-btn { background: transparent; border: 0; color: var(--ntr-sidebar-active-color, #fff); font-weight: 600; font-size: 14px; line-height: 17px; font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; padding: 0; }
.modswitch--brand .modswitch-btn .chev { color: #c9dcf1; }

.sidenav { background: var(--ntr-sidebar-bg); color: var(--ntr-sidebar-color); border-inline-end: 1px solid var(--ntr-sidebar-border-color); overflow: auto; }
.sidenav .search { margin: 10px; height: 24px; background: #fff; border-radius: 3px; }
.tree { list-style: none; margin: 0; padding: 0 0 18px; font-size: 11px; }
.tree li { padding: 6px 10px; display: flex; align-items: center; gap: 6px; }
.tree li.sel { background: var(--nav-active); }
.tree a { color: inherit; }
.tree .ic { width: 12px; text-align: center; opacity: .8; flex: none; }
.tree .chev { margin-left: auto; opacity: .6; }
.lvl1 { padding-left: 10px !important; }
.lvl2 { padding-left: 22px !important; }
.lvl3 { padding-left: 34px !important; }
.lvl4 { padding-left: 46px !important; }

/* --- блок навигации: поиск и дерево (как ntr-sidebar-menu) -------------- */
.sidenav .search-wrap { display: flex; align-items: center; gap: 6px; margin: 10px; background: #fff; border-radius: 3px; padding: 4px 8px; }
.sidenav .search-ic { color: var(--muted); display: inline-flex; }
.sidenav .search-input { border: 0; outline: 0; font: inherit; width: 100%; }
.nav-tree { list-style: none; margin: 0; padding: 0 0 18px; font-size: 14px; }
.nav-node > .nav-title { display: flex; align-items: center; gap: 8px; height: 36px; padding: 8px 10px; margin-inline: 4px; border-radius: var(--ntr-border-radius); color: var(--ntr-sidebar-color); }
.nav-node > .nav-title:hover { background: var(--ntr-sidebar-hover-bg); color: #fff; }
.nav-node.sel > .nav-title { background: var(--ntr-navbar-active-bg); color: #fff; }
.nav-ic { display: inline-flex; opacity: .9; flex: none; }
.nav-text { color: inherit; }
a.nav-text:hover { text-decoration: underline; }
.nav-chev { width: 12px; display: inline-flex; justify-content: center; opacity: .7; cursor: pointer; transition: transform .15s; }
.nav-node.open > .nav-title > .nav-chev { transform: rotate(90deg); }
.nav-chev-spacer { width: 12px; display: inline-block; flex: none; }
.nav-children { list-style: none; margin: 0; padding: 0 0 0 14px; display: none; }
.nav-node.open > .nav-children { display: block; }
.nav-node.no-match { display: none; }
.tree-empty { color: #c9dcf1; font-size: 12px; padding: 8px 14px; }

.content { overflow: auto; padding: 16px 20px 72px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 14px 18px; }

/* --- справочники: группы и записи -------------------------------------- */
.ref-group { margin-top: 20px; }
.ref-group:first-of-type { margin-top: 10px; }
.ref-group h2 { font-size: 14px; margin: 0 0 8px; color: var(--ink); }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ntr-gray-100); }
.ref-list li:last-child { border-bottom: 0; }
.ref-note { color: var(--muted); font-size: 11px; }
.ref-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ref-toolbar h2 { margin: 0; font-size: 16px; }
.ref-toolbar #ref-actions { display: flex; margin-left: auto; }
.ref-table th, .ref-table td { text-align: left; white-space: normal; }

/* --- вкладки ---------------------------------------------------------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 8px 2px; color: var(--muted); }
.tabs a.act { color: var(--ink); border-bottom: 2px solid var(--ntr-primary); text-decoration: none; }

.tabsv { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--line); }
.tabsv li { padding: 7px 10px; }
.tabsv a { color: var(--ink); display: block; }
.tabsv li.act { border-right: 2px solid var(--nav); }
.tabsv li.act a { color: var(--nav); }
.tabsv li.dis a { color: #b3bcc6; pointer-events: none; }

/* --- строка состояния модели ------------------------------------------ */
.statebar { display: flex; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 16px; flex-wrap: wrap; }
.statebar div { padding: 8px 14px; border-right: 1px solid var(--line); color: var(--muted); }
.statebar div:last-child { border-right: 0; }
.statebar b { color: var(--ink); font-weight: 600; margin-left: 6px; }

/* --- поля ------------------------------------------------------------- */
.cols { display: grid; grid-template-columns: 170px minmax(340px, 520px) 1fr; gap: 26px; align-items: start; }
.group { font-weight: 600; margin: 16px 0 10px; }
.group:first-child { margin-top: 0; }
.group-icon { display: inline-flex; vertical-align: middle; margin-left: 8px; width: 16px; height: 16px; color: var(--ntr-gray-400); cursor: pointer; }
.group-icon .ic { width: 16px; height: 16px; }
.group-icon:hover { color: var(--ink); }
.section { font-weight: 600; margin: 20px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }

.row { display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 12px; margin-bottom: 8px; }
.hidden { display: none; }
.row label { color: var(--ink); }
.row .val { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .val .ctl { flex: 0 0 150px; min-width: 0; }
.row .val .readonly { flex: 0 0 150px; min-width: 0; }
.row .unit { flex: 0 0 auto; text-align: left; color: var(--muted); font-size: 11px; white-space: nowrap; }
/* Та же 150px-зона, что у .readonly/.ctl — один общий правый край для значений и бейджей,
   независимо от того, есть ли после них .unit. Обёртка не даёт самому бейджу (цветному чипу)
   растянуться на всю зону — justify-content прижимает чип к правому краю зоны, а не красит её. */
.row .val .badge-wrap { flex: 0 0 150px; min-width: 0; display: flex; justify-content: flex-end; }

.ctl {
  height: 32px; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); background: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 4px 11px;
  color: var(--ntr-body-color); font: inherit; font-size: 0.88rem; width: 100%;
}
input.ctl:focus, select.ctl:focus, .ctl:focus { border-color: var(--ntr-primary); box-shadow: 0 0 0 2px var(--ntr-focus-ring); outline: none; }
input.ctl { text-align: right; }
select.ctl { appearance: none; }
.ctl.ro { background: var(--field); border-color: transparent; }
.ctl.num { justify-content: flex-end; }
.ctl .chev { color: var(--muted); }
.readonly { text-align: right; padding-right: 8px; color: var(--ink); }
/* Выпадающий список одним полем (как nz-select в ЭНЗС): V — раскрыть, X — сброс */
.sel { position: relative; width: 100%; }
.sel-box { position: relative; display: flex; align-items: center; height: 32px; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); background: #fff; padding: 4px 44px 4px 11px; }
.sel:focus-within .sel-box, .sel.open .sel-box { border-color: var(--ntr-primary); box-shadow: 0 0 0 2px var(--ntr-focus-ring); }
.sel-input { border: 0; outline: 0; width: 100%; min-width: 0; font: inherit; font-size: 0.88rem; background: transparent; color: var(--ntr-body-color); }
.sel-icon { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 20px; color: var(--ntr-gray-400); cursor: pointer; }
.sel-arrow { right: 6px; }
.sel-clear { right: 26px; font-size: 14px; }
.sel-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 40; max-height: 240px; overflow: auto; background: #fff; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.sel.open .sel-list { display: block; }
.sel-option { padding: 6px 11px; cursor: pointer; font-size: 0.88rem; }
.sel-option:hover, .sel-option.act { background: var(--ntr-primary-50); }
.sel-empty { padding: 6px 11px; color: var(--muted); font-size: 0.88rem; }
.toggle { width: 30px; height: 16px; border-radius: 9px; background: #cfd6dd; position: relative; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.toggle.on { background: var(--ntr-primary); }
.toggle.on::after { left: auto; right: 2px; }

/* --- результаты расчёта ----------------------------------------------- */
.resrow { display: grid; grid-template-columns: 1fr 120px; gap: 12px; padding: 5px 0; color: var(--muted); }
.resrow b { color: var(--ink); text-align: right; font-weight: 600; }

/* --- таблица ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--ntr-primary-500); color: #fff; font-weight: 500; text-align: left; padding: 0.5rem 0.75rem; vertical-align: bottom; font-size: 0.75rem; border-bottom: 1px solid var(--ntr-primary-600); }
tbody td { border-bottom: 1px solid var(--ntr-border-color); padding: 0.38rem 0.75rem; vertical-align: middle; }
tbody tr:hover td { background: var(--ntr-primary-50); }
tbody td.num { text-align: right; }

.badge { display: inline-block; padding: 2px 7px; border-radius: 3px; color: #fff; font-size: 11px; background: var(--green); }
.badge.cls { background: var(--accent); color: #14361f; }
.badge.none { background: transparent; color: var(--muted); }
.badge.err { background: var(--ntr-red); }
.badge.gray { background: #9aa5b1; color: #fff; }
.badge.warn { background: #f0ad00; color: #5c4700; }
.cell-err { margin-top: 2px; font-size: 10px; color: var(--ntr-red); line-height: 1.2; }
.badge-legend { margin-top: 12px; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toggle-desc { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 6px; font-size: 12px; color: var(--ink); }

/* --- карточка: две колонки и действия --------------------------------- */
/* Обе колонки ограничены сверху (не растут до края широкого окна) и равны по макс. ширине —
   без этого правая колонка (1fr) забирала весь остаток ширины окна, уводя бейджи далеко
   от подписей и оставляя пустое поле. .cols2 используется только в карточке ТС. */
.cols2 { display: grid; grid-template-columns: minmax(360px, 640px) minmax(360px, 640px); gap: 26px; align-items: start; max-width: 1320px; }
.actions { position: fixed; right: 24px; bottom: 16px; display: flex; gap: 10px; z-index: 30; }

/* --- маркер обязательности поля ---------------------------------------- */
.req { color: var(--ntr-red); margin-left: 3px; }

/* --- блокировка действий при недостатке данных АИС ---------------------- */
.btn[disabled], .norm-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* --- пояснение к статусу загрузки «Данных мало»: подпись под бейджем, в колонке значения,
   без отдельного оформления — бейдж уже красный, второй акцент избыточен. Та же 150px-зона
   (.row .val .badge-wrap/.readonly выше) — одна точка выравнивания на всю карточку. */
.ais-note { margin: -4px 0 10px; }
.ais-note-text { flex: 0 0 150px; min-width: 0; text-align: right; white-space: normal;
  color: var(--ntr-red); }
.ais-note.hidden { display: none; }

/* --- «Ошибка» относится к статусу расчёта: текст в цвете ошибки, не нейтральный --- */
[data-field="Ошибка"] .readonly { color: var(--ntr-red); }

/* --- «Статус обработки» — итоговый, общий вывод; небольшой отступ отделяет его от пары
   «Статус расчёта» + «Ошибка» выше */
[data-field="Статус обработки"] { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }

/* --- иконка-подсказка с алгоритмом ------------------------------------ */
.hint { position: relative; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
        border-radius: 50%; background: var(--ntr-primary); color: #fff; font-size: 11px; font-style: italic; cursor: pointer; margin-left: 6px; }
.hint-pop { position: absolute; z-index: 30; top: 22px; left: 0; width: 320px; background: #fff; border: 1px solid var(--line);
            border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 10px 12px; font-size: 12px; color: var(--ink);
            white-space: normal; text-align: left; font-style: normal; }
.hint-vars { margin-top: 6px; color: var(--muted); font-size: 11px; }

.op-close { cursor: pointer; color: var(--muted); }

/* --- сводная статистика ТС: 2 плашки, разбивка строками внутри каждой --- */
.summary-tiles { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0; align-items: flex-start; }
.summary-group { min-width: 380px; border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px;
                  background: #fff; }
.summary-group > .lbl { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.summary-rows { display: flex; flex-direction: column; gap: 8px; }
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
                padding-left: 10px; border-left: 4px solid var(--green); font-size: 15px; }
.summary-row span { color: var(--ink); }
.summary-row b { font-weight: 600; font-size: 17px; }
.summary-row.total { border-left-color: var(--ntr-primary); font-weight: 600; }
.summary-row.gray { border-left-color: #9aa5b1; }
.summary-row.err { border-left-color: var(--ntr-red); }
.summary-row.warn { border-left-color: #f0ad00; }
.summary-row.fuel-head { border-left-color: var(--ntr-primary); font-weight: 600; margin-top: 10px; }
.summary-row.fuel-head:first-child { margin-top: 0; }
.summary-row.fuel-sub { border-left-color: var(--line); padding-left: 24px; font-size: 14px; }
.summary-row.fuel-sub span { color: var(--muted); }
.summary-row.fuel-sub b { font-size: 15px; font-weight: 500; }
.summary-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* --- иконки-ссылки на лог: отдельно лог расчёта, отдельно лог ошибок --- */
.log-icon { position: relative; display: inline-block; width: 16px; height: 16px; line-height: 16px;
            text-align: center; border-radius: 50%; color: #fff; font-size: 11px; cursor: pointer; margin-left: 6px; }
.log-icon.calc { background: var(--green); }
.log-icon.error { background: var(--ntr-red); }
.cols2 .row .log-icon { margin-left: 0; }

/* --- дровер лога ошибок ------------------------------------------------ */
.log-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; z-index: 50; background: #fff; border-left: 1px solid var(--line);
              box-shadow: -8px 0 24px rgba(0,0,0,.15); padding: 16px 18px; overflow: auto; }
.log-head { font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.log-head-actions { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.log-note { color: var(--muted); font-size: 11px; }
.log-list { padding-left: 18px; font-size: 12px; line-height: 1.5; }

/* --- фильтры реестра: панель условий + дровер ------------------------- */
.registry-toolbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; flex-shrink: 0; }
.rt-seg { display: inline-flex; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); overflow: hidden; }
.rt-seg-btn { border: 0; background: #fff; color: var(--muted); font: inherit; padding: 4px 9px; cursor: pointer; }
.rt-seg-btn + .rt-seg-btn { border-left: 1px solid var(--ntr-border-color); }
.rt-seg-btn.act { background: var(--ntr-primary); color: #fff; }
.rt-flag { display: inline-flex; align-items: center; cursor: pointer; }
.rt-flag input { width: 14px; height: 14px; accent-color: var(--ntr-primary); cursor: pointer; }
.rt-open { display: inline-flex; align-items: center; color: var(--ntr-primary); cursor: pointer; font-size: 1.25em; }
.rt-summary { cursor: pointer; color: var(--ntr-link-color); flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.rt-summary:hover { text-decoration: underline; }
.rt-clear { cursor: pointer; margin-left: auto; color: var(--ntr-link-color); flex: none; }
.filter-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.filter-row { display: flex; gap: 8px; align-items: center; }
.filter-row [data-col] { flex: 1.3; }
.filter-row [data-op] { flex: 1; }
.filter-row [data-val], .filter-row [data-val2], .filter-row [data-ref-search] { flex: 1; }
.filter-row [data-remove] { flex: none; }
.filter-row select, .filter-row input { height: 28px; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius); padding: 0 8px; font: inherit; min-width: 0; }
.filter-empty { color: var(--muted); font-size: 12px; }
.filter-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--ntr-border-color); padding-top: 12px; }
.filter-logic { margin-right: auto; color: var(--muted); }
.filter-logic select { margin-left: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; padding: .44rem 1rem; font: inherit; font-size: .88rem; font-weight: 500; border: 1px solid transparent; border-radius: var(--ntr-border-radius); cursor: pointer; }
.btn.primary { background: var(--ntr-primary); border-color: var(--ntr-primary); color: #fff; }
.btn.primary:hover { background: var(--ntr-primary-darken); border-color: var(--ntr-primary-darken); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ntr-primary); }
.btn.ghost:hover { background: var(--ntr-primary-lt); color: var(--ntr-primary-darken); }

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 16px 0 4px; color: var(--muted); }
.pager .p { border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; }
.pager .p.act { background: var(--ntr-primary); color: #fff; border-color: var(--ntr-primary); }

.footer { position: fixed; right: 24px; bottom: 16px; display: flex; gap: 10px; }

.note {
  position: fixed; left: 218px; bottom: 12px; background: #fff; border: 1px dashed var(--muted);
  color: var(--muted); font-size: 11px; padding: 4px 8px; border-radius: 3px;
}

/* Вкладки расхода: строка отбора и иерархический грид */
.metricbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 14px 0 0; }
.filters { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.filters select { padding: 3px 6px; }
table.grid th, table.grid td { text-align: right; white-space: nowrap; }
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid tr.agg { font-weight: 600; background: #f7f8fa; }
table.grid .chev { color: var(--muted); }
h2.metric { font-size: 14px; font-weight: 600; margin: 0; }

/* --- карточка ТС: иконки полей третьей колонкой, за значением ---------- */
/* Колонка фиксирована по правилу «любой прямой ребёнок строки, кроме label/.val — колонка 4»,
   не по порядку появления в DOM: авто-размещение grid иначе кладёт одиночную иконку (нет
   соседа) в первую свободную ячейку (3), а не в 4-ю, где стоят все остальные — так расползались
   .hint, затем .log-icon, каждый раз заново, потому что правило держалось на перечислении
   классов, а не на структурном месте элемента в строке. Единственное исключение — «Подобрать»
   (.norm-btn), он может стоять РЯДОМ с другой иконкой на одной строке, поэтому зафиксирован
   отдельно в 3-й колонке; всё остальное (.hint, .log-icon и любая новая иконка в будущем) —
   безусловно в 4-ю, без необходимости дополнять этот список при добавлении новой иконки. */
.cols2 .row { grid-template-columns: 1fr 240px 24px 24px; }
.cols2 .row > .norm-btn { grid-column: 3; }
.cols2 .row > :not(label):not(.val):not(.norm-btn) { grid-column: 4; margin-left: 0; }
.cols2 .hint-pop { left: auto; right: 0; }

/* --- тулз подбора базовой нормы (карточка ТС) ------------------------- */
/* Иконка «Подобрать» — за значением, в колонке иконок полей. */
.norm-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
            justify-self: start; padding: 0; cursor: pointer;
            border: 1px solid var(--ntr-primary); border-radius: 50%; background: #fff; color: var(--ntr-primary); }
.norm-btn svg { width: 12px; height: 12px; }
.norm-btn:hover { background: var(--ntr-primary); color: #fff; }

.norm-modal { position: fixed; inset: 0; z-index: 120; background: rgba(7,28,50,.45);
              display: flex; align-items: center; justify-content: center; padding: 24px; }
.norm-dialog { width: min(1040px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
               background: #fff; border-radius: 6px; box-shadow: 0 18px 48px rgba(0,0,0,.32); overflow: hidden; }
.norm-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.norm-result { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: var(--ntr-primary-50); border-bottom: 1px solid var(--line); }
.norm-result-label { color: var(--muted); font-size: .82rem; }
.norm-result-value { font-size: 1.25rem; font-weight: 700; color: var(--ntr-primary-700); line-height: 1.2; }
.confirm-dialog { width: min(480px, 92vw); }
.confirm-msg { padding: 16px; font-size: .92rem; line-height: 1.4; }
.norm-ctx { padding: 10px 16px 0; }
.norm-ctx-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.88rem; margin-bottom: 4px; }
.norm-ctx-row label { width: 150px; color: var(--muted); font-size: 12px; }
.norm-ro { color: var(--ink); }
.norm-mask { display: flex; gap: 10px; align-items: center; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.norm-mask > label { width: 70px; color: var(--muted); font-size: 12px; }
.norm-mask-fields { display: flex; gap: 10px; flex: 1; }
.norm-mask-fields > div { flex: 1; }
.norm-input { flex: 1; height: 32px; border: 1px solid var(--ntr-border-color); border-radius: var(--ntr-border-radius);
              padding: 0 11px; font: inherit; font-size: .88rem; }
.norm-input:focus { border-color: var(--ntr-primary); box-shadow: 0 0 0 2px var(--ntr-focus-ring); outline: none; }
.norm-group { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0 16px 12px;
              border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.norm-group .norm-list { flex: 1 1 auto; height: 46vh; min-height: 0; }
.norm-foot .btn[disabled] { opacity: .5; cursor: not-allowed; }
.norm-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; min-height: 0; flex: 1; }
.norm-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: 4px; }
.norm-pane-head { padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.norm-pane-head b { color: var(--ink); }
.norm-list { flex: 1 1 auto; height: 46vh; overflow: auto; }
.norm-row { display: flex; gap: 8px; align-items: center; height: 30px; padding: 0 12px; font-size: .88rem; border-bottom: 1px solid #f1f3f5; white-space: nowrap; }
.norm-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.norm-row.dis { color: var(--muted); }
.norm-row input { flex: 0 0 auto; margin: 0; }
.norm-row.pick .norm-x { flex: 0 0 auto; cursor: pointer; color: var(--muted); padding: 0 4px; }
.norm-row.pick .norm-x:hover { color: #e74c3c; }
.norm-empty { padding: 10px 12px; color: var(--muted); font-size: .88rem; }
.norm-pane-actions { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
.norm-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.norm-foot > div:last-child { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.norm-avg { flex: 1 1 auto; min-width: 0; font-size: .88rem; color: var(--ink); }
.norm-banner { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px;
  padding: 8px 12px; border-radius: 4px; font-size: .88rem; }
.norm-banner[hidden] { display: none; }
.norm-banner .norm-banner-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.norm-banner.ok { background: #e6f4ea; color: #1e7e34; }
.norm-banner.ok .norm-banner-dot { background: #1e7e34; }
.norm-banner.warn { background: #fff8e1; color: #8a6d00; }
.norm-banner.warn .norm-banner-dot { background: #f0ad00; }
.norm-banner.none { background: #f1f3f5; color: var(--muted); }
.norm-banner.none .norm-banner-dot { background: var(--muted); }
.norm-total { flex: 1 1 auto; min-width: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }