/* Рабочее место в духе VS Code (Light Modern): шапка, панель значков, боковая
   панель с деревом, редактор со вкладками, строка состояния. Всё своё, без
   внешних шрифтов и библиотек: сервер работает и без интернета. */

:root {
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --faint: #9a9a9a;
  --chrome: #f8f8f8;
  --editor: #ffffff;
  --line: #e5e5e5;
  --hover: #ececec;
  --select: #e4e6f1;
  --accent: #c2410c;
  --accent-dark: #9a3412;
  --accent-soft: #fdf1ea;
  --bad: #b42318;
  --good: #067647;
  --supply: #c2410c;
  --consumption: #2563eb;
  --imbalance: #1f1f1f;
  font-size: 13px;
}

* { box-sizing: border-box; }
/* Атрибут hidden сильнее любого display: иначе блок с display:flex
   (сводка, разделы, панель расчётов) остаётся на экране, когда его прячут. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body.wb {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--editor);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.titlebar {
  height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 10px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none;
        color: var(--ink); font-weight: 600; letter-spacing: .03em; }
.logo img { width: 22px; height: 22px; display: block; }
.spacer { flex: 1; }
/* логотип и название заказчика вместо GRID-IN у его пользователей (lang.js, showCustomer) */
.logo.cust { min-width: 0; letter-spacing: normal; }
.logo.cust img { width: auto; max-width: 120px; height: 24px; object-fit: contain; }
.logo.cust span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
@media (max-width: 640px) { .logo.cust span { max-width: 120px; } }
.cu-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cu-logo img { height: 40px; max-width: 200px; object-fit: contain; border: 1px solid var(--line);
               border-radius: 4px; padding: 4px; background: #fff; }

.picker { position: relative; }
.pick {
  display: flex; align-items: center; gap: 8px; max-width: min(520px, 50vw);
  background: var(--editor); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
.pick:hover { border-color: #c8c8c8; }
.pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted);
        border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex-shrink: 0; }

.menu {
  position: absolute; top: calc(100% + 4px); z-index: 20;
  background: var(--editor); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 4px; min-width: 220px;
}
.pick-menu { left: 0; width: min(520px, 90vw); }
.user-menu { right: 0; }
.menu input[type=search] {
  width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; margin-bottom: 4px;
}
.menu input[type=search]:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.pick-list { max-height: 60vh; overflow: auto; }
.menu-item {
  display: flex; width: 100%; text-align: left; gap: 8px; align-items: center;
  padding: 5px 9px; border: 0; background: none; border-radius: 4px; cursor: pointer;
  color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item:hover, .menu-item.focus { background: var(--hover); }
.menu-item.current { font-weight: 600; }
.menu-item .meta { margin-left: auto; color: var(--faint); font-size: 11.5px; }
.menu-item.new { color: var(--accent); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 7px; }
.menu-head { padding: 6px 9px 8px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }

.lang-switch { display: none; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.lang-switch.can { display: flex; }                /* только администратору (lang.js) */
.lang-switch button { border: 0; background: var(--editor); padding: 3px 8px; cursor: pointer; color: var(--muted); font-size: 12px; }
.lang-switch button.on { background: var(--ink); color: #fff; }

.user { position: relative; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 12px;
}

/* ── тело: панель значков + боковая панель + редактор ─────────────────── */
.body { flex: 1; display: flex; min-height: 0; }

.activity {
  width: 48px; flex-shrink: 0; background: var(--chrome); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding-top: 4px;
}
.act-btn {
  width: 48px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--faint);
  border-left: 2px solid transparent; display: flex; align-items: center; justify-content: center;
}
.act-btn svg { width: 22px; height: 22px; }
.act-btn:hover { color: var(--ink); }
.act-btn.active { color: var(--ink); border-left-color: var(--accent); }

.sidebar {
  width: 300px; flex-shrink: 0; background: var(--chrome); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.side-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.side-head {
  height: 34px; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px 0 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600;
}
.side-actions { margin-left: auto; display: flex; gap: 2px; }
.icon-btn {
  width: 26px; height: 26px; border: 0; background: none; border-radius: 5px; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.run { color: var(--accent); }
.icon-btn.danger:hover { color: var(--bad); }
.icon-btn:disabled { opacity: .4; cursor: default; }

.tree { flex: 1; overflow: auto; padding-bottom: 12px; }
.node {
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 calc(8px + var(--lvl, 0) * 14px);
  white-space: nowrap; cursor: default;
}
.node .tw { width: 14px; flex-shrink: 0; color: var(--faint); font-size: 10px; text-align: center; }
.node .ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.node .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.node .count { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.node .count.bad { color: #fff; background: var(--bad); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.node.section { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-top: 6px; }
.node.clickable { cursor: pointer; }
.node.clickable:hover { background: var(--hover); }
.node.selected { background: var(--select); }
.node.dim .name { color: var(--muted); }

/* ── редактор ──────────────────────────────────────────────────────────── */
.editor { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--editor); }
.tabs {
  height: 35px; flex-shrink: 0; display: flex; background: var(--chrome);
  border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
}
.tab {
  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; cursor: pointer;
  border-right: 1px solid var(--line); color: var(--muted); white-space: nowrap; max-width: 280px;
  border-top: 2px solid transparent;
}
.tab .t { overflow: hidden; text-overflow: ellipsis; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--editor); color: var(--ink); border-top-color: var(--accent); margin-bottom: -1px; }
.tab .x { width: 18px; height: 18px; border: 0; background: none; border-radius: 4px; cursor: pointer;
          color: var(--faint); line-height: 1; font-size: 14px; visibility: hidden; }
.tab:hover .x, .tab.active .x { visibility: visible; }
.tab .x:hover { background: var(--hover); color: var(--ink); }

.subtabs {
  display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.subtab {
  border: 0; background: none; cursor: pointer; padding: 6px 10px 8px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.subtab .n { color: var(--faint); margin-left: 4px; font-size: 11.5px; }

.pane { flex: 1; overflow: auto; padding: 16px 18px 24px; }

.notice {
  border-radius: 6px; padding: 9px 12px; margin-bottom: 12px;
  background: #fff8f1; border: 1px solid #f3cfb6; color: #7c3009;
}
.notice.error { background: #fef3f2; border-color: #fecdca; color: var(--bad); }
.notice.ok { background: #ecfdf3; border-color: #abefc6; color: var(--good); }

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; min-width: 130px; }
.stat b { display: block; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }

.section { margin-bottom: 20px; }
.section h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--muted); font-weight: 600; }
.card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table.rows { width: 100%; border-collapse: collapse; }
table.rows th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 7px 12px; background: var(--chrome);
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
table.rows td { padding: 6px 12px; border-bottom: 1px solid #f0f0f0; }
table.rows td.num, table.rows th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rows tr:hover td { background: #fafafa; }
table.rows tr.clickable { cursor: pointer; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.muted { color: var(--faint); }
.log { padding: 9px 12px; color: var(--muted); }
.log div { padding: 2px 0; }
.empty { color: var(--muted); padding: 48px 0; text-align: center; }

.pill { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: #f2f3f5; color: #475467; white-space: nowrap; }
.pill.understating, .pill.high { background: #fee4e2; color: var(--bad); }
.pill.candidate, .pill.medium { background: #fef0c7; color: #b54708; }
.pill.orphan { background: #ede9fe; color: #5925dc; }
.pill.ok, .pill.assigned { background: #ecfdf3; color: var(--good); }
.pill.no_data, .pill.undetermined, .pill.low, .pill.unassigned { background: #f2f4f7; color: #667085; }

/* ── график баланса ────────────────────────────────────────────────────── */
.chart-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 6px; position: relative; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart-legend .note { margin-left: auto; color: var(--faint); }
.chart-legend i.ring { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--bad); background: #fff; }
.chart-tip .rej { color: #ffb4a8; }
.chart-box canvas { width: 100%; display: block; }
.chart-tip {
  position: absolute; pointer-events: none; background: rgba(31, 31, 31, .92); color: #fff;
  border-radius: 6px; padding: 7px 9px; font-size: 12px; line-height: 1.5; white-space: nowrap; z-index: 5;
}
.chart-tip b { font-weight: 600; }
.chart-steps { display: flex; gap: 4px; margin-left: 12px; }
.chart-steps button { border: 1px solid var(--line); background: var(--editor); border-radius: 5px;
                      padding: 1px 8px; font-size: 12px; cursor: pointer; color: var(--muted); }
.chart-steps button.on { border-color: var(--accent); color: var(--accent); }

/* ── строка состояния ──────────────────────────────────────────────────── */
.statusbar {
  height: 24px; flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 0 12px;
  background: var(--chrome); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden;
}

/* ── окна ──────────────────────────────────────────────────────────────── */
.dlg { border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(380px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(21, 23, 28, .45); }
.dlg form { padding: 22px; }
.dlg h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.dlg label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.dlg input { width: 100%; padding: 8px 10px; margin-bottom: 12px; border: 1px solid #d6d6d6; border-radius: 6px; }
.dlg input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.dlg .hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.dlg .err { background: #fef3f2; border: 1px solid #fecdca; color: var(--bad); border-radius: 6px;
            padding: 8px 10px; margin-bottom: 12px; }
.dlg .warn-text { margin: 0 0 14px; color: var(--bad); }
.dlg-buttons { display: flex; gap: 8px; }
.dlg-buttons button { flex: 1; }
.primary { cursor: pointer; background: var(--accent); color: #fff; font-weight: 500;
           border: 1px solid var(--accent); border-radius: 6px; padding: 7px; }
.primary:hover { background: var(--accent-dark); }
.ghost { cursor: pointer; background: var(--editor); border: 1px solid #d6d6d6; border-radius: 6px; padding: 7px; }
.ghost:hover { border-color: var(--accent); }
.danger { cursor: pointer; font-weight: 500; background: var(--bad); color: #fff; border: 1px solid var(--bad);
          border-radius: 6px; padding: 7px; }
.danger:disabled { background: #e4e7ec; border-color: #e4e7ec; color: #98a2b3; cursor: default; }

@media (max-width: 900px) {
  .sidebar { width: 240px; }
  .logo span { display: none; }
}
.side-toggle, .side-backdrop { display: none; }
@media (max-width: 640px) {
  /* телефон: панель проекта закрыта, открывается кнопкой «☰» поверх рабочей области */
  .side-toggle { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -6px;
    border: 0; background: none; color: var(--ink); cursor: pointer; }
  .side-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .logo { display: none; }
  .titlebar { gap: 6px; }
  .picker { min-width: 0; flex: 1 1 auto; }
  .pick { max-width: 100%; }
  .body { position: relative; }
  .activity, .sidebar { display: none; }
  .side-open .activity { display: flex; position: absolute; top: 0; bottom: 0; left: 0; z-index: 11; }
  .side-open .sidebar { display: flex; position: absolute; top: 0; bottom: 0; left: 44px; z-index: 11;
    width: min(320px, calc(100vw - 64px)); box-shadow: 4px 0 16px rgba(0, 0, 0, .16); }
  .side-open .side-backdrop { display: block; position: absolute; inset: 0; z-index: 10; background: rgba(16, 24, 40, .28); }
  .side-head .icon-btn { width: 34px; height: 34px; }
  .node { min-height: 34px; }
  .tab { padding: 0 12px; }
  .tab .x { visibility: visible; }

  /* цели на выезд — карточками: номер и объект, адрес, находки, цифры, результат */
  table.rows.vi thead { display: none; }
  table.rows.vi, table.rows.vi tbody { display: block; width: 100%; }
  table.rows.vi tr.vi-group { display: block; }
  table.rows.vi tr.vi-group td { display: block; padding: 10px 8px 4px; }
  table.rows.vi tr.clickable { display: grid; grid-template-columns: 34px 1fr; gap: 4px 8px; padding: 10px 8px 12px;
    border-bottom: 1px solid var(--line); }
  table.rows.vi tr.clickable td { display: block; border: 0; padding: 0; text-align: left; grid-column: 2; }
  table.rows.vi tr.clickable td.vi-no { grid-column: 1; grid-row: 1 / span 3; font-size: 18px; font-weight: 600; color: var(--accent); }
  table.rows.vi td.vi-obj { font-weight: 600; font-size: 15px; }
  table.rows.vi td.vi-tp { color: var(--muted); font-size: 12px; }
  table.rows.vi td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
  table.rows.vi td.num[data-l] { display: inline-block; grid-column: 2; }
  table.rows.vi td.vi-out { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  table.rows.vi .out-btns { gap: 8px; }
  table.rows.vi .out-btn { width: 52px; height: 44px; font-size: 20px; border-radius: 8px; }
  .vi-route { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; }
}
a.vi-route { display: none; }
@media (max-width: 640px) { a.vi-route { display: inline-flex; } }
@media (max-width: 640px) {
  /* строка состояния: на телефоне — только расчёт, без периода и пользователя */
  #st-data, #st-user { display: none; }
  /* подвкладки ТП — одной прокручиваемой строкой, страница не шире экрана */
  .subtabs { overflow-x: auto; overflow-y: hidden; padding: 6px 8px 0; -webkit-overflow-scrolling: touch; }
  .subtab { white-space: nowrap; flex-shrink: 0; padding: 8px 10px 10px; }
  .pane { padding: 12px 10px 20px; }
  .statusbar { overflow: hidden; white-space: nowrap; }
  /* правка схемы: «Сохранить» и «Отмена» — первыми в полосе инструментов, их не надо искать прокруткой */
  .sch-tools #sch-save { order: -2; }
  .sch-tools #sch-cancel { order: -1; }
}

/* стрелка в дереве — отдельная кнопка: раскрыть или свернуть, не выбирая */
.node .tw { cursor: pointer; border-radius: 3px; height: 18px; line-height: 18px; }
.node .tw:hover { background: #dcdcdc; color: var(--ink); }
.side-actions .sep { width: 1px; background: var(--line); margin: 4px 3px; }
.chart-item h3 a { color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0;
                   font-size: 13px; font-weight: 600; }
.chart-item h3 a:hover { color: var(--accent); text-decoration: underline; }

/* панель графика: выбор ТП, линии, приборы, шаг */
.chart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.ch-select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: var(--editor); max-width: 320px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--editor);
        border-radius: 14px; padding: 2px 10px; cursor: pointer; color: var(--muted); font-size: 12px; }
.chip.on { color: var(--ink); border-color: #cfcfcf; background: #f6f6f6; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #bbb; }
.chip:not(.on) .dot { opacity: .35; }
.chip .dot.supply { background: var(--supply); }
.chip .dot.imbalance { background: var(--imbalance); }
.chip .dot.consumption { background: var(--consumption); }
.chip.meter { cursor: default; padding-right: 4px; }
.chip.meter .x { border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 14px; line-height: 1; padding: 0 3px; }
.chip.meter .x:hover { color: var(--ink); }
.ch-add { position: relative; }
.ch-add input { border: 1px dashed #cfcfcf; border-radius: 14px; padding: 3px 10px; width: 200px; font-size: 12px; }
.ch-add input:focus { outline: none; border-style: solid; border-color: var(--accent); }
.ch-add-list { left: 0; width: 420px; max-height: 320px; overflow: auto; }
.ch-add-list .menu-item .meta { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.ch-title { font-weight: 600; margin-right: 6px; }
.chart-help { color: var(--faint); font-size: 11.5px; margin-top: 6px; }
.chart-box canvas { user-select: none; }

/* список на выезд: группы соседей */
.vi-note { color: var(--muted); font-size: 12px; margin: -2px 0 8px; }
table.rows.vi tr.vi-group td { background: #f7f7f8; border-top: 1px solid var(--line); padding: 7px 12px; }
table.rows.vi tr.vi-group:hover td { background: #f7f7f8; }
.vi-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.vi-head .spacer { flex: 1; }
.vi-more { margin-top: 8px; }

/* категории сведения */
.pill.cat-sensor_fault { background: #f2f4f7; color: #344054; }
.pill.cat-mining { background: #e0f2fe; color: #026aa2; }
.pill.cat-pattern_change { background: #fef0c7; color: #93370d; }
.pill.cat-stat { background: #f4f3ff; color: #5925dc; }
.pill.cat-current_imbalance { background: #fee4e2; color: #b42318; }
.pill.cat-billing_drop { background: #ecfdf3; color: #027a48; }
.pill.cat-billing_dip { background: #ecfdf3; color: #05603a; }

/* окно загрузки и заявок на ИИ */
.dlg.wide { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.dlg .dlg-body { padding: 18px 22px 22px; }
.dlg-head { display: flex; align-items: center; margin-bottom: 10px; }
.dlg-head h2 { margin: 0; flex: 1; }
.dlg-head .x { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.in-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 4px; }
.in-row { border-top: 1px solid var(--line); padding: 8px 0; font-size: 13px; }
.in-row .in-file { font-weight: 500; }
.in-row .in-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.in-row .pill { margin-right: 6px; }
.pill.st-ok { background: #ecfdf3; color: var(--good); }
.pill.st-duplicate, .pill.st-service { background: #f2f4f7; color: #667085; }
.pill.st-needs_ai, .pill.st-needs_project { background: #fef0c7; color: #b54708; }
.pill.st-failed, .pill.st-unreadable, .pill.st-unsupported_archive, .pill.st-empty { background: #fee4e2; color: var(--bad); }
.ai-box { background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.ai-box .ai-note { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.ai-box .ai-buttons { display: flex; gap: 8px; margin-top: 8px; }
.ai-box .ai-buttons button { border: 1px solid var(--line); background: var(--editor); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.ai-box .ai-buttons button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-box table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.ai-box td, .ai-box th { border-bottom: 1px solid #eee; padding: 3px 6px; text-align: left; }
.ai-box .ok { color: var(--good); }
.ai-box .bad { color: var(--bad); }
.ai-sample { max-height: 220px; overflow: auto; }
.st-link { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 6px; text-decoration: underline; font: inherit; }

/* ручное отображение колонок */
.mm .mm-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; font-size: 12px; }
.mm .mm-grid label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.mm input[type=number] { width: 64px; }
.mm input, .mm select { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font: inherit; background: var(--editor); color: var(--ink); }
.mm tr.mh td { background: #fef0c7; font-weight: 600; }
.mm tr.md td { background: #ecfdf3; }
.mm .mm-hours { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }

/* «ИИ вручную» */
.kit .kit-label { font-size: 12px; color: var(--muted); margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.kit .kit-label button { border: 1px solid var(--line); background: var(--editor); border-radius: 5px; padding: 1px 8px; cursor: pointer; font-size: 12px; }
.kit textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
                font: 12px/1.4 ui-monospace, Consolas, monospace; background: var(--editor); color: var(--ink); }
.kit .kit-prompt { height: 160px; }
.kit .kit-paste { height: 80px; margin-top: 6px; }
.kit .kit-files { margin: 0; padding-left: 18px; font-size: 12px; }

/* отказ модуля: почему и что делать */
.refusal-why ul { margin: 0; padding: 10px 14px 10px 30px; font-size: 13px; }
.refusal-why li { margin: 2px 0; }
.refusal-hint { padding: 10px 14px; font-size: 13px; margin-top: 8px; }
.refusal-hint b { display: block; margin-bottom: 4px; }

/* периоды между переломами: текущий выделен */
table.rows tr.current td { font-weight: 500; }

/* вкладка ТП: сейчас, раньше, проверить не удалось */
.tp-clean { padding: 12px 14px; font-size: 13px; }
.tp-period { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.tp-period:first-child { border-top: 0; }
.tp-period-head { color: var(--muted); margin-bottom: 4px; }
details.undet > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }

/* ── страница пользователей: та же шапка, содержимое по центру ─────────── */
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-style: normal; color: var(--faint); }
.crumbs span { color: var(--ink); }
.pane.users { padding-top: 20px; }
.users-page { max-width: 960px; margin: 0 auto; }
.users-page h1 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.users-page > .vi-note { margin: 0 0 18px; max-width: 760px; line-height: 1.5; }
.users-add { display: grid; gap: 10px 12px; grid-template-columns: 1fr 1fr 170px auto; align-items: end; padding: 14px; }
.users-add label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.users-add input, .users-add select, .users table.rows input, .users table.rows select {
  width: 100%; padding: 5px 8px; border: 1px solid #d6d6d6; border-radius: 6px; background: var(--editor);
}
.users-add input:focus, .users-add select:focus, .users table.rows input:focus, .users table.rows select:focus {
  outline: 1px solid var(--accent); border-color: var(--accent);
}
.users-add .primary { padding: 6px 16px; }
.users-add .full { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); }
.users table.rows input { border-color: transparent; background: transparent; }
.users table.rows tr:hover input { border-color: #d6d6d6; background: var(--editor); }
.users table.rows td.acts { text-align: right; white-space: nowrap; }
.users table.rows td.mono { white-space: nowrap; }
.users table.rows input { min-width: 150px; }
.users table.rows select { min-width: 140px; }
.users .section .card { overflow-x: auto; }
/* таблица целей (реестр выезда, цели ТП) укладывается в ширину переносами:
   находки переносятся по словам, отступы и разрядка заголовков — уже. Раньше
   на узком окне и по-русски пропадала колонка «Результат» с кнопками отметки
   выезда (владелец, 14.10.2026). Прокрутка вбок — только если и так не
   влезло (окно совсем узкое). */
table.rows.vi th, table.rows.vi td { padding-left: 8px; padding-right: 8px; }
table.rows.vi th { letter-spacing: .02em; }
table.rows.vi td.vi-what .pill { white-space: normal; display: inline-block; margin: 1px 0; }
.card:has(> table.vi) { overflow-x: auto; container-type: inline-size; }
/* место под таблицей уже, чем ей нужно колонками (ноутбук с открытой панелью
   проекта: 1024 — карточка 623 пикс., таблице надо ~710), — цели карточками,
   как на телефоне, но кнопки обычные: мышь, а не палец */
@container (max-width: 720px) {
  table.rows.vi thead { display: none; }
  table.rows.vi, table.rows.vi tbody { display: block; width: 100%; }
  table.rows.vi tr.vi-group { display: block; }
  table.rows.vi tr.vi-group td { display: block; padding: 8px 10px 4px; }
  table.rows.vi tr.clickable { display: grid; grid-template-columns: 30px 1fr; gap: 3px 8px; padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line); }
  table.rows.vi tr.clickable td { display: block; border: 0; padding: 0; text-align: left; grid-column: 2; }
  table.rows.vi tr.clickable td.vi-no { grid-column: 1; grid-row: 1 / span 3; font-size: 15px; font-weight: 600; color: var(--accent); }
  table.rows.vi td.vi-obj { font-weight: 600; }
  table.rows.vi td.vi-tp { color: var(--muted); font-size: 12px; }
  table.rows.vi td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
  table.rows.vi td.num[data-l] { display: inline-block; grid-column: 2; margin-right: 14px; }
  table.rows.vi td.vi-out { margin-top: 4px; }
}
.users .act { cursor: pointer; background: var(--editor); border: 1px solid #d6d6d6; border-radius: 5px;
              padding: 3px 9px; font-size: 12px; margin-left: 6px; }
.users .act:hover { border-color: var(--accent); color: var(--accent-dark); }
.users .act:disabled { opacity: .4; cursor: default; border-color: var(--line); color: inherit; }
.users .act.danger-link { color: var(--bad); border-color: #f2c9c5; }
.users .act.danger-link:hover { border-color: var(--bad); }
.users .me { color: var(--faint); font-size: 11.5px; margin-left: 6px; }
.pill.blocked, .pill.nopassword { background: #fef0c7; color: #b54708; }
.pill.blocked { background: #fee4e2; color: var(--bad); }
@media (max-width: 760px) {
  .users-add { grid-template-columns: 1fr; }
  .crumbs a, .crumbs i { display: none; }
}

/* ── вход ──────────────────────────────────────────────────────────────── */
.enter { flex: 1; display: grid; place-items: center; padding: 24px 16px; background: var(--chrome); overflow: auto; }
.enter form { width: 100%; max-width: 360px; background: var(--editor); padding: 28px; text-align: left; }
.enter .enter-logo { width: 44px; height: 44px; display: block; margin-bottom: 14px; }
.enter h1 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.enter .vi-note { margin: 0 0 18px; }
.enter label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.enter input { width: 100%; padding: 8px 10px; margin-bottom: 14px; border: 1px solid #d6d6d6; border-radius: 6px; background: var(--editor); }
.enter input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.enter .primary { width: 100%; padding: 9px; margin-top: 4px; }
.enter .primary:disabled { background: #d6d8d3; border-color: #d6d8d3; cursor: default; }

/* ── главная: та же шапка, содержимое по центру ────────────────────────── */
.site-enter { text-decoration: none; padding: 4px 12px; font-size: 12.5px; }
.site { flex: 1; overflow: auto; padding: 0 16px 32px; }
.site > section { max-width: 1040px; margin-left: auto; margin-right: auto; }
.site-hero { display: flex; gap: 28px; align-items: center; padding: 48px 0 32px; }
.site-logo { width: 104px; height: 104px; flex-shrink: 0; }
.site-hero h1 { margin: 0 0 10px; font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.site-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 720px; }
.site-cta { display: inline-block; text-decoration: none; padding: 8px 18px; font-size: 13.5px; }
.site-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; }
.site-facts .card { padding: 14px 16px; border-left: 3px solid var(--accent); }
.site-facts b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.site-facts span { color: var(--muted); }
.site-section { margin-bottom: 32px; }
.site-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
             gap: 12px; counter-reset: step; }
.site-flow li { padding: 14px 16px; position: relative; counter-increment: step; }
.site-flow li::after { content: counter(step); position: absolute; top: 12px; right: 14px; color: var(--faint);
                       font-size: 11.5px; font-variant-numeric: tabular-nums; }
.site-flow code { display: inline-block; font: 600 11.5px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em;
                  color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 7px; margin-bottom: 8px; }
.site-flow b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.site-flow p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
.site-flow p.out { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); }
.site-io { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.site-io ul { list-style: none; margin: 0; padding: 4px 0; }
.site-io li { padding: 8px 16px; border-top: 1px solid #f0f0f0; line-height: 1.5; }
.site-io li:first-child { border-top: 0; }
.site-io li b { font-weight: 600; }
.site-contact { padding: 14px 16px; line-height: 1.7; font-size: 14px; }
.site-contact a { color: var(--accent); text-decoration: none; }
.site-contact a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .site-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 28px; }
  .site-logo { width: 64px; height: 64px; }
  .site-hero h1 { font-size: 24px; }
  .site-facts, .site-io { grid-template-columns: 1fr; }
}

/* ТП вне последнего расчёта: не рассчитана или пришли новые данные */
.pill.calc-none { background: #fef0c7; color: #b54708; }
.pill.calc-stale { background: #e0f2fe; color: #026aa2; }
.node .pill.calc-none, .node .pill.calc-stale { font-size: 10.5px; padding: 0 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ── схема ТП: карта, отчёт по сети, карточка объекта (scheme.js) ─────── */
.sch { display: flex; flex-direction: column; gap: 8px; }
.sch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sch-name { margin-right: 4px; }
.sch-legend { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.sch-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sch-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.sch-tools .chip[disabled] { opacity: .45; cursor: default; }
.sch-save { padding: 3px 12px; font-size: 12px; }
.sch-save:disabled { background: #d6d8d3; border-color: #d6d8d3; cursor: default; }
.sch-note { margin: 0; }
.sch-body { display: flex; gap: 10px; min-height: 0; }
.sch-map { flex: 1; height: calc(100vh - 230px); min-height: 360px; border: 1px solid var(--line); border-radius: 8px; }
.sch-side { width: 340px; flex-shrink: 0; height: calc(100vh - 230px); min-height: 360px; overflow: auto;
            border: 1px solid var(--line); border-radius: 8px; background: var(--editor); }
.sch-sec { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sch-sec:last-child { border-bottom: 0; }
.sch-sec h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sch-sec a { color: var(--accent); cursor: pointer; }
.sch-warn { margin-top: 6px; color: #b54708; font-size: 12px; }
.sch-list { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.sch-list a { text-decoration: none; }
.sch-list a:hover { text-decoration: underline; }
table.kv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.kv td, table.kv th { padding: 3px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid #f3f3f3; }
table.kv th { color: var(--muted); font-weight: 400; width: 42%; }
table.kv input, table.kv select { width: 100%; border: 1px solid #d6d6d6; border-radius: 4px; padding: 2px 5px; background: var(--editor); }
table.kv td select[data-ph] { width: auto; }
table.kv input[type=number] { width: 90px; }
.sch-id { margin-top: 6px; font-size: 11px; word-break: break-all; }
.sch-charts { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.sch-chart { width: 100%; margin-top: 6px; padding: 6px; }
/* общее правило svg (иконки 18×18) не должно трогать слой линий карты */
.leaflet-container svg { width: auto; height: auto; fill: initial; stroke: initial; stroke-width: initial; }
.sch-pt span { display: block; width: 100%; height: 100%; box-sizing: border-box; }
.sch-pt.sch-transformer span { background: var(--accent); border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--accent); }
.sch-pt.sch-customer span { background: #475467; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #475467; }
.sch-pt.sch-customer.nodata span { background: #fff !important; border: 2px dashed #b54708; box-shadow: none; }
.sch-legend i.leg-nodata { display: inline-block; width: 8px; height: 8px; border: 2px dashed #b54708; border-radius: 50%; background: #fff !important; vertical-align: -1px; margin-right: 4px; }
.sch-pt.sch-customer.orphan span { box-shadow: 0 0 0 3px #7c3aed; }
.sch-pt.sch-joint span { background: #1f1f1f; border-radius: 50%; }
.sch-pt.sel span { outline: 3px solid #f59e0b; outline-offset: 1px; }
@media (max-width: 900px) {
  .sch-body { flex-direction: column; }
  .sch-side { width: auto; height: auto; max-height: 50vh; }
  .sch-map { height: 60vh; }
}

.pill.cat-segment { background: #e0f2fe; color: #075985; }

/* эмуляция на схеме: заложенные воры и сироты, найдено или нет */
.sch-pt.emu-thief span { box-shadow: 0 0 0 3px #b42318 !important; }
.sch-pt.emu-orphan span { box-shadow: 0 0 0 3px #7c3aed !important; }
.sch-pt.emu-moved span { box-shadow: 0 0 0 3px #0e7490 !important; }
.sch-pt.co-moved span { outline: 3px dashed #0e7490; outline-offset: 2px; }
tr.co-mismatch td { background: #ecfeff; }
.pill.fed { background: #ecfeff; color: #0e7490; }
.sch-pt.emu-hidden span { box-shadow: 0 0 0 3px #b54708 !important; }
.sch-side input[type=number] { width: 90px; }

/* общая карта проекта — над списком на выезд */
.pm-box { margin-bottom: 12px; padding: 0; }
.pm-map { height: 420px; }
.pm-legend { padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.leaflet-tooltip.pm-group { background: transparent; border: 0; box-shadow: none; color: #c2410c; font-weight: 600; }

/* догрузка данных проекта в строке состояния */
#st-load { color: var(--accent, #2563eb); }
#st-load.bad { color: #b42318; }

/* заказчики: редактор тарифа и счёт */
.cu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.cu-grid label { display: block; font-size: 12px; color: var(--muted, #667085); margin-bottom: 3px; }
.cu-grid input, .cu-grid select { width: 100%; box-sizing: border-box; }
.cu-tiers input { width: 140px; }
/* договоры: нет действующего, объём выбран — красным; ступень договора — выделена */
.users-page .bad { color: var(--bad); }
#ct-form h4 { margin: 0 0 10px; }
.cu-actions, .cu-period { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cu-actions .spacer { flex: 1; }
.users tr.sel td { background: var(--sel, rgba(37, 99, 235, .06)); }
.users tr.total td { border-top: 2px solid var(--line, #d0d5dd); }

/* выбор проекта: заголовки заказчиков */
.menu-group { display: flex; justify-content: space-between; padding: 8px 12px 4px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667085); border-top: 1px solid var(--line, #eaecf0); }
.menu-group:first-child { border-top: 0; }
.menu-item.in-group { padding-left: 20px; }

/* результат выезда в списке */
.out-btns { display: inline-flex; gap: 2px; white-space: nowrap; }
.out-btn { width: 24px; height: 22px; padding: 0; border: 1px solid var(--line, #d0d5dd); background: transparent;
  border-radius: 4px; cursor: pointer; color: var(--muted, #667085); font-size: 13px; line-height: 1; }
.out-btn.on.out-found { background: #ecfdf3; border-color: #12b76a; color: #027a48; }
.out-btn.on.out-not_found { background: #fef3f2; border-color: #f04438; color: #b42318; }
.out-btn.on.out-no_access { background: #f2f4f7; border-color: #98a2b3; color: #344054; }

/* схема на весь экран: поверх рабочего места; на телефоне — всегда так при правке */
.sch.sch-full { position: fixed; inset: 0; z-index: 900; background: var(--editor, #fff); padding: 8px; gap: 6px; }
.sch.sch-full .sch-map, .sch.sch-full .sch-side { height: auto; min-height: 0; }
.sch.sch-full .sch-body { flex: 1; min-height: 0; }
.sch.sch-full .sch-map { height: 100%; }
.sch.sch-full .sch-side { height: 100%; }
body.sch-full-on .notice { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1000;
  max-width: min(640px, 92vw); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.sch-body.no-side .sch-side { display: none; }
.sch-icon { white-space: nowrap; }
.sch-draft { max-width: 720px; }
.sch-draft p { margin: 0 0 10px; }
.sch-check { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.sch-unpl > div { display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 3px 0;
  border-bottom: 1px dashed var(--line); }
.sch-unpl > div.on { background: #fff7e6; }
.sch-unpl-act { display: flex; gap: 4px; flex-shrink: 0; }
.sch-feeders { margin-top: 6px; }
.sch-side .kv input:not([type=number]), .sch-side .kv select { max-width: 100%; }

@media (max-width: 760px) {
  /* поле: крупные кнопки под палец, карта во весь экран, панель — снизу.
     Строка 1: выход, имя ТП, «Я здесь», панель; строка 2: инструменты —
     одной прокручиваемой полосой; строка 3: подсказка */
  .sch.sch-full { padding: 4px; }
  .sch-bar { gap: 4px; }
  .sch-bar .chip, .sch-bar .ch-select, .sch-bar .primary { min-height: 38px; font-size: 14px; padding: 4px 10px; }
  #sch-full { order: 0; }
  .sch-name { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #sch-gps { order: 2; }
  #sch-panel { order: 3; }
  .sch-bar .ch-select { order: 4; flex: 1 1 40%; min-width: 0; }
  .sch-bar .spacer { display: none; }
  .sch-tools { order: 5; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; }
  .sch-tools > * { flex-shrink: 0; }
  .sch-legend { order: 6; flex-basis: 100%; }
  .sch.sch-editing .sch-bar .ch-select { display: none; }
  .sch.sch-full .sch-body { flex-direction: column; }
  .sch.sch-full .sch-map { flex: 1 1 auto; height: auto; min-height: 200px; }
  .sch.sch-full .sch-side { width: auto; height: auto; max-height: 35vh; flex: 0 0 auto; }
  .sch-side .chip { min-height: 34px; }
  .sch-side input, .sch-side select { font-size: 16px; }   /* без увеличения страницы при вводе на iOS */
}

/* график объекта схемы — под картой на всю ширину */
.sch-chartpane { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 4px; background: var(--editor, #fff); }
.sch-chartpane .chart-box { border: 0; padding: 6px 0 0; margin: 0; width: auto; }
.sch-cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sch-cp-name { color: var(--muted); }
.sch-cp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }
.sch.sch-full .sch-chartpane { flex: 0 0 auto; max-height: 60vh; overflow: auto; }

/* аномалия объекта схемы — первым блоком карточки */
.sch-an { background: #fff7ed; border-left: 3px solid #c2410c; }
.sch-an ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.sch-an-sub { margin-top: 8px; color: var(--muted); }
.sch-an-check { margin-top: 8px; }
.tp-jo > summary { cursor: pointer; color: var(--muted); margin: 4px 0 8px; }

/* порядок проверки (instructions.js) */
.instr { border: 1px solid var(--line); border-radius: 6px; margin-top: 8px; background: var(--editor, #fff); }
.instr > summary { cursor: pointer; padding: 6px 10px; font-weight: 600; }
.instr-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.instr-body ol, .instr-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.instr-h { font-weight: 600; margin-top: 2px; }
.instr-after { background: #f0f9ff; border-left: 3px solid #0369a1; padding: 6px 8px; }
.instr-sec { margin-top: 12px; }
.sch-an .instr { background: #fff; }
.pill.bad { background: #fee4e2; color: var(--bad); }
.instr-by { color: var(--muted); }

/* слои Leaflet (z-index 400–1000) — внутри своей карты: меню шапки (проекты,
   пользователь) открываются поверх схемы и общей карты */
.sch-map, .pm-map { position: relative; z-index: 0; isolation: isolate; }
.vi-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; }

/* общая карта: издали постоянные подписи прячутся (projmap.js, LABEL_ZOOM) */
.pm-far .pm-label, .pm-far .pm-group { display: none; }
.pm-sun-badge span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 1px #1f1f1f66; }
.pm-vfar .pm-tpmark { display: none; }
.pm-vfar .pm-gcircle { display: none; }
.pm-legend i.pm-out { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.leaflet-tooltip.pm-group::before { display: none; }
/* ТП на общей карте — нейтрально: цвета на карте только у находок */
.sch-pt.sch-transformer.pm-tpmark span { background: #344054; box-shadow: 0 0 0 1px #344054; }
.pm-legend i.pm-tp { width: 10px; height: 10px; border-radius: 2px; background: #344054; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.tk-chips .chip .n { color: var(--muted); margin-left: 4px; }
.tk-chips .chip[disabled] { opacity: .45; cursor: default; }

/* Дерево проекта: цели по видам (хищение, лишние, неисправные) */
.node .count.tk-theft, .node .count.tk-extra, .node .count.tk-fault { color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; margin-left: 3px; }
.node .count.tk-theft { background: var(--bad); }
.node .count.tk-extra { background: #5925dc; }
.node .count.tk-fault { background: #b54708; }
.pill.tk-theft { background: #fee4e2; color: var(--bad); }
.pill.tk-extra { background: #ede9fe; color: #5925dc; }
.pill.tk-fault { background: #fef0c7; color: #b54708; }
.pill.dim { opacity: .55; }

/* Название метода с расшифровкой: наведение мыши или нажатие (телефон) */
.method { position: relative; border-bottom: 1px dotted currentColor; cursor: help; outline: none; }
.method:hover::after, .method:focus::after {
  content: attr(data-info); position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 50;
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.3; white-space: nowrap;
  padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ── заметки к страницам: кнопка внизу справа и окно (js/notes.js) ───────── */
#nt-fab {
  position: fixed; right: 18px; bottom: 34px; z-index: 900; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
#nt-fab:hover { background: var(--accent-dark); }
#nt-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--editor);
}
#nt-panel {
  position: fixed; right: 18px; bottom: 92px; z-index: 901; width: 400px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--editor); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); font-size: 13px;
}
#nt-panel[hidden] { display: none; }
#nt-panel > header { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
#nt-panel > header b { font-size: 14px; }
#nt-close { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
#nt-panel > nav { display: flex; gap: 4px; padding: 8px 12px 0; }
#nt-panel > nav button { border: 0; background: none; padding: 6px 10px; cursor: pointer; color: var(--muted);
                         border-bottom: 2px solid transparent; font: inherit; }
#nt-panel > nav button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
#nt-body { padding: 10px 12px 12px; overflow-y: auto; }
#nt-body textarea { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; padding: 8px;
                    border: 1px solid var(--line); border-radius: 6px; }
.nt-hint { color: var(--muted); margin: 4px 0 8px; }
.nt-ctx { color: var(--faint); font-size: 12px; margin: 6px 0; }
.nt-msg.ok { color: var(--good); }
.nt-msg.bad { color: var(--bad); }
.nt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nt-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.nt-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.nt-card.new { border-color: var(--accent); background: var(--accent-soft); }
.nt-head { display: flex; align-items: center; gap: 8px; }
.nt-when { color: var(--faint); font-size: 12px; }
.nt-state { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.nt-state.s-active { background: #fff4e5; color: var(--accent-dark); }
.nt-state.s-fixed { background: #e7f6ec; color: var(--good); }
.nt-state.s-postponed { background: var(--hover); color: var(--muted); }
.nt-who { font-weight: 600; margin-top: 4px; }
.nt-where { font-size: 12px; margin-top: 2px; }
.nt-where a { color: var(--muted); }
.nt-text { white-space: pre-wrap; margin-top: 6px; }
.nt-reply { margin-top: 8px; padding: 6px 8px; background: var(--chrome); border-left: 3px solid var(--accent);
            border-radius: 4px; }
.nt-reply div { white-space: pre-wrap; margin-top: 2px; }
.nt-admin { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.nt-admin select { margin-bottom: 6px; }
@media (max-width: 640px) {
  #nt-fab { right: 12px; bottom: 28px; width: 44px; height: 44px; }
  #nt-panel { right: 8px; left: 8px; width: auto; max-width: none; bottom: 80px; max-height: calc(100vh - 100px); }
}

/* регуляторы групп реестра выезда: диаметр и число ТУ (app.js, renderVisits) */
.vi-regs { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 13px; }
.vi-reg { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.vi-reg input[type=range] { width: 160px; accent-color: var(--accent); }
.vi-reg b { color: var(--ink); min-width: 48px; }
@media (max-width: 640px) { .vi-reg input[type=range] { width: 120px; } }
/* цвет группы выезда в реестре — тот же, что контур и значок на карте (projmap.js) */
.vi-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
/* карта реестра на весь экран (projmap.js, fullScreen) */
.pm-box.pm-full { position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; display: flex;
                  flex-direction: column; background: var(--editor); }
.pm-box.pm-full .pm-map { height: auto; flex: 1; }
.pm-box.pm-full .pm-legend { padding: 6px 12px; }
.leaflet-bar a.pm-full-btn { font-size: 16px; line-height: 30px; width: 30px; height: 30px; text-align: center;
                             color: var(--ink); background: #fff; }
body.pm-full-on #nt-fab, body.pm-full-on #nt-panel { display: none; }
/* кнопка «объединить ТП» в итогах загрузки (app.js, mergeButton) */
.in-merge { margin-top: 6px; }
/* сортировка и отбор в таблицах (js/tables.js) */
.tt-find { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }
.tt-find input { width: 260px; max-width: 100%; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
table.rows th.tt-sort { cursor: pointer; user-select: none; }
table.rows th.tt-sort:hover { color: var(--ink); }
table.rows th.tt-asc::after { content: " ▲" attr(data-tt-n); font-size: 9px; color: var(--accent); }
table.rows th.tt-desc::after { content: " ▼" attr(data-tt-n); font-size: 9px; color: var(--accent); }
.tt-find .tt-reset { padding: 3px 10px; }

/* колонка ТП в сводке — без переноса «ТП 24» на две строки */
#ov-table td:first-child { white-space: nowrap; }
/* заголовок таблицы — в строке поиска, слева (tables.js) */
.tt-find h3 { margin: 0 auto 0 0; }