/* Network Health (Network Intelligence Phase 4) — вкладка «Здоровье» раздела
   «Сеть» и health-индикаторы Network Explorer.

   Строгая дизайн-система кабинета: переменные cabinet.css, без градиентов,
   радиусы только var(--radius) / 0 / 50% / 2px, один акцент. Семантика
   важности — сдержанные корпоративные оттенки; состояние показывается не
   только цветом (иконка + текст). Canvas Explorer health-ом не перекрашивается
   (§29): только точка/бейдж у scope. */

:root {
    --h-ok: var(--accent);
    --h-notice: #D29922;
    --h-degraded: #D97706;
    --h-crit: var(--danger);
    --h-unknown: var(--muted2);
}
body.light-theme {
    --h-notice: #9A6700;
    --h-degraded: #B45309;
}

/* ─── вкладка «Здоровье»: два блока счётчиков (§10-§12) ─────────────── */
.inh-root { display: flex; flex-direction: column; gap: 8px; }
.inh-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.inh-block {
    flex: 1 1 320px; min-width: 250px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); padding: 6px 9px 8px;
}
.inh-block-head {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted2); margin-bottom: 5px;
}
.inh-block-body { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.inh-chip.is-learning { color: var(--h-unknown); }
.inh-chip.is-stale { color: var(--h-notice); }
.inh-attn {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 11.5px; color: var(--h-notice);
}
.inh-attn svg { width: 13px; height: 13px; flex: none; }
.inh-attn.is-unobserved { color: var(--h-degraded); }
.inh-attn.is-stale { color: var(--h-notice); }
.inh-attn.is-learning { color: var(--h-unknown); }
.inh-scopenotes {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); padding: 6px 9px 8px;
}
.inh-note { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 2px 0; font-size: 11.5px; }
.inh-note-scope { color: var(--text); font-family: Consolas, "Cascadia Mono", monospace; }
.inh-note-text { color: var(--muted); }
.inh-note-more { font-size: 11px; color: var(--muted2); }
.inh-counts .inh-chip svg { width: 13px; height: 13px; flex: none; }
.inh-chip.is-critical .inf-chip-n { color: var(--h-crit); }
.inh-chip.is-degraded .inf-chip-n { color: var(--h-degraded); }
.inh-chip.is-notice .inf-chip-n { color: var(--h-notice); }
.inh-chip.is-unknown .inf-chip-n { color: var(--h-unknown); }
.inh-chip.is-normal .inf-chip-n { color: var(--h-ok); }
.inh-chip[data-inh-count] { cursor: pointer; }

/* ─── панель управления и фильтры ───────────────────────────────────── */
.inh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inh-seg { display: inline-flex; align-items: center; gap: 2px; }
.inh-seg .inh-seg-btn { padding: 3px 9px; font-size: 12px; }
.inh-seg-sub .inh-seg-btn { color: var(--muted); }
.inh-spacer { flex: 1 1 auto; }
.inh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inh-sel {
    background: var(--input); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); font-size: 12px; font-family: inherit;
    padding: 4px 6px; max-width: 172px; min-width: 118px;
}
.inh-sel:disabled { color: var(--muted2); cursor: default; }
.inh-sel:focus { outline: none; border-color: var(--accent); }

.inh-notice {
    font-size: 12px; color: var(--muted); padding: 5px 9px;
    background: var(--card); border: 1px solid var(--border2);
    border-left: 2px solid var(--border); border-radius: var(--radius);
}
.inh-notice.is-ok { color: var(--accent); border-left-color: var(--accent); }
.inh-notice.is-err { color: var(--danger); border-left-color: var(--danger); }

/* ─── список findings ───────────────────────────────────────────────── */
.inh-list { display: flex; flex-direction: column; gap: 4px; }
.inh-finding {
    display: flex; flex-direction: column; gap: 3px; width: 100%;
    text-align: left; font: inherit; color: var(--text); cursor: pointer;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 10px;
}
.inh-finding:hover { background: var(--hover); border-color: var(--muted2); }
.inh-finding:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.inh-f-head { display: flex; align-items: center; gap: 8px; }
.inh-f-summary {
    flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inh-f-when { flex: none; font-size: 11.5px; color: var(--muted2); }
.inh-f-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--muted); }
.inh-f-scope { color: var(--text); font-family: Consolas, "Cascadia Mono", monospace; }
.inh-f-kind, .inh-f-resolved { color: var(--muted2); }
.inh-finding-resolved .inh-f-summary { font-weight: 500; }
.inh-f-lastknown { font-size: 11px; color: var(--muted2); }

.inh-sev {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 1px 7px; font-size: 11px; color: var(--muted);
}
.inh-sev svg { width: 12px; height: 12px; }
.inh-sev.is-critical { color: var(--h-crit); border-color: color-mix(in srgb, var(--h-crit) 42%, var(--border)); }
.inh-sev.is-degraded { color: var(--h-degraded); border-color: color-mix(in srgb, var(--h-degraded) 42%, var(--border)); }
.inh-sev.is-notice { color: var(--h-notice); border-color: color-mix(in srgb, var(--h-notice) 42%, var(--border)); }
.inh-sev.is-normal { color: var(--h-ok); border-color: color-mix(in srgb, var(--h-ok) 42%, var(--border)); }
.inh-sev.is-unknown { color: var(--h-unknown); }

.inh-empty { line-height: 1.5; }
.inh-empty-line { margin-top: 4px; font-size: 12px; color: var(--muted); }
.inh-empty-hint { margin-top: 4px; font-size: 12px; color: var(--muted2); }
.inh-error { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--danger); }

/* ─── drawer деталей finding ────────────────────────────────────────── */
.inh-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, .18);
}
body.light-theme .inh-overlay { background: rgba(16, 24, 32, .16); }
.inh-overlay[hidden], .inh-drawer[hidden] { display: none; }
.inh-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: 440px; max-width: 94vw; display: flex; flex-direction: column;
    background: var(--panel); color: var(--text); font-size: 13px;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .28);
}
body.light-theme .inh-drawer { box-shadow: -8px 0 24px rgba(16, 24, 32, .12); }
.inh-drawer-head {
    position: relative; flex: none; padding: 12px 44px 10px 14px;
    border-bottom: 1px solid var(--border2);
}
.inh-drawer-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted2); }
.inh-drawer-title { margin-top: 2px; font-size: 14px; font-weight: 600; word-break: break-word; }
.inh-drawer-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.inh-kind-pill {
    border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 1px 7px; font-size: 11px; color: var(--muted);
}
.inh-close {
    position: absolute; top: 8px; right: 8px; line-height: 1;
    background: transparent; border: none; color: var(--muted2);
    font-size: 18px; cursor: pointer; padding: 2px 7px; border-radius: var(--radius);
}
.inh-close:hover { background: var(--hover); color: var(--text); }
.inh-drawer-body {
    flex: 1 1 auto; overflow-y: auto; padding: 10px 14px 22px;
    display: flex; flex-direction: column; gap: 6px;
}
.inh-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted2); margin-top: 8px; }
.inh-explain { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.inh-delta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 6px 8px;
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px;
}
.inh-before { color: var(--muted); }
.inh-arrow { color: var(--muted2); }
.inh-after { color: var(--text); }
.inh-kv { margin: 0; }
.inh-kv-row {
    display: flex; gap: 8px; padding: 3px 0;
    border-bottom: 1px solid var(--border2); font-size: 12px;
}
.inh-k { flex: none; width: 132px; font-size: 11.5px; color: var(--muted); }
.inh-v { color: var(--text); word-break: break-word; }
.inh-unstable { color: var(--h-notice); }
.inh-count-inline { font-size: 11px; color: var(--muted2); }
.inh-na { color: var(--muted2); font-style: italic; }
.inh-machines { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.inh-mrow {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: none; color: inherit; font: inherit;
    text-align: left; cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
}
.inh-mrow:hover { background: var(--hover); }
.inh-mrow-id { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.inh-mrow-go { margin-left: auto; font-size: 11px; color: var(--muted2); }
.inh-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inh-evmeta { font-size: 11.5px; color: var(--muted2); }
.inh-raw { margin-top: 6px; }
.inh-raw > summary { font-size: 11.5px; color: var(--muted2); cursor: pointer; }
.inh-raw-pre {
    margin: 4px 0 0; padding: 6px 8px; max-height: 220px; overflow: auto;
    background: var(--input); border: 1px solid var(--border2); border-radius: var(--radius);
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 11px; color: var(--muted);
    white-space: pre-wrap; word-break: break-word;
}

/* ─── Phase 5: индикатор диагностики у строки finding (§44) ─────────── */
.inh-diag {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 0 6px; font-size: 10.5px; color: var(--muted);
    background: transparent; cursor: pointer; white-space: nowrap;
}
.inh-diag svg { width: 11px; height: 11px; flex: none; }
.inh-diag:hover { border-color: var(--muted2); color: var(--text); }
.inh-diag.is-high { color: var(--h-ok); border-color: color-mix(in srgb, var(--h-ok) 42%, var(--border)); }
.inh-diag.is-medium { color: var(--h-notice); border-color: color-mix(in srgb, var(--h-notice) 42%, var(--border)); }
.inh-diag.is-low { color: var(--muted); }
.inh-diag-act { color: var(--accent); }

/* ─── Phase 5: drawer диагностического кейса (§45) ─────────────────── */
.inh-dcase-overlay { z-index: 62; }
.inh-dcase-drawer { z-index: 63; width: 480px; }
.inh-dcase-head .inh-dcase-cause {
    margin-top: 4px; font-size: 10px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--muted2);
}
.inh-kind-pill.inh-conf.is-high { color: var(--h-ok); border-color: color-mix(in srgb, var(--h-ok) 42%, var(--border)); }
.inh-kind-pill.inh-conf.is-medium { color: var(--h-notice); border-color: color-mix(in srgb, var(--h-notice) 42%, var(--border)); }
.inh-kind-pill.inh-conf.is-low { color: var(--muted); }

.inh-dlist {
    display: flex; flex-direction: column; gap: 3px;
    margin: 4px 0 0; padding-left: 16px;
    font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.inh-dlist.is-support li::marker { color: var(--h-ok); }
.inh-dlist.is-contra li::marker { color: var(--h-crit); }
.inh-w { margin-left: 6px; font-size: 10.5px; color: var(--muted2); }

.inh-timeline {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.inh-tl-row { display: flex; gap: 8px; font-size: 12px; }
.inh-tl-time {
    flex: none; width: 92px; font-size: 11px; color: var(--muted2);
    font-variant-numeric: tabular-nums;
}
.inh-tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inh-tl-kind { color: var(--text); }
.inh-tl-detail { color: var(--muted); font-size: 11.5px; }

/* ─── health-индикаторы Network Explorer (точка/бейдж у scope) ──────── */
.topo-hdot { fill: var(--h-unknown); stroke: var(--card); stroke-width: 1.5; }
.topo-hdot.is-notice { fill: var(--h-notice); }
.topo-hdot.is-degraded { fill: var(--h-degraded); }
.topo-hdot.is-critical { fill: var(--h-crit); }
.topo-hdot.is-unknown { fill: transparent; stroke: var(--h-unknown); }
.topo-hcnt { font-size: 10px; font-weight: 600; text-anchor: middle; fill: var(--text); }
.topo-hcnt.is-notice { fill: var(--h-notice); }
.topo-hcnt.is-degraded { fill: var(--h-degraded); }
.topo-hcnt.is-critical { fill: var(--h-crit); }
.topo-hcnt.is-unknown { fill: var(--h-unknown); }
.topo-hbadge {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 0 6px; font-size: 10.5px; color: var(--muted);
}
.topo-hbadge .topo-hdot-s { width: 7px; height: 7px; border-radius: 50%; background: var(--h-unknown); flex: none; }
.topo-hbadge.is-notice { color: var(--h-notice); border-color: color-mix(in srgb, var(--h-notice) 42%, var(--border)); }
.topo-hbadge.is-notice .topo-hdot-s { background: var(--h-notice); }
.topo-hbadge.is-degraded { color: var(--h-degraded); border-color: color-mix(in srgb, var(--h-degraded) 42%, var(--border)); }
.topo-hbadge.is-degraded .topo-hdot-s { background: var(--h-degraded); }
.topo-hbadge.is-critical { color: var(--h-crit); border-color: color-mix(in srgb, var(--h-crit) 42%, var(--border)); }
.topo-hbadge.is-critical .topo-hdot-s { background: var(--h-crit); }

/* Наблюдения scope в инспекторе Explorer. */
.topo-hfind { display: flex; flex-direction: column; gap: 3px; }
.topo-hfind-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topo-hfind-row .inh-sev { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-hfind-when { margin-left: auto; flex: none; font-size: 10.5px; color: var(--muted2); }

@media (max-width: 900px) {
    .inh-sel { max-width: 150px; min-width: 100px; }
    .inh-drawer { width: 100%; }
    .inh-dcase-drawer { width: 100%; }
}