/* Organizational Projection (вкладка «Подсети» раздела «Сеть»).
   Плоский список CIDR → дерево Клиент → Объект → Сеть. Плотный корпоративный
   UI: тонкие строки, семантика цвета через токены .infra-root (--inf-*), только
   аккуратный левый маркер цвета клиента (2–3px), без заливки строк.
   Все правила с префиксом .nws-, палитра — из переменных кабинета. */

/* ─── Тулбар над деревом ────────────────────────────────────────────── */
.nws-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 2px 0 8px;
}
.nws-field { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; }
.nws-field > span { color: var(--muted2); font-size: 11px; white-space: nowrap; }
.nws-field select {
    background: var(--input); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); font-size: 12px; font-family: inherit;
    padding: 4px 6px; min-width: 0; max-width: 190px;
}
.nws-field select:focus { outline: none; border-color: var(--accent); }
.nws-field select:disabled { color: var(--muted2); }
.nws-search {
    flex: 1 1 240px; min-width: 160px; max-width: 420px;
    background: var(--input); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); font-size: 13px; font-family: inherit; padding: 5px 9px;
}
.nws-search::placeholder { color: var(--muted2); }
.nws-search:focus { outline: none; border-color: var(--accent); }
.nws-collapse { border-color: var(--border); color: var(--text); }
.nws-collapse:hover { background: var(--hover); border-color: var(--border2); }
.nws-count { margin-left: auto; color: var(--muted2); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── Переключатель режима [Основные] [Все сети] ─────────────────────── */
.nws-mode {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.nws-mode-btn {
    background: transparent; border: 0; color: var(--muted); font: inherit;
    font-size: 12px; line-height: 1.2; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.nws-mode-btn + .nws-mode-btn { border-left: 1px solid var(--border); }
.nws-mode-btn:hover { background: var(--hover); color: var(--text); }
.nws-mode-btn.is-active {
    color: var(--text); background: var(--hover);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ─── Фильтр «Тип сети»: кнопка + popover с чекбоксами ──────────────── */
.nws-typewrap { position: relative; display: inline-flex; }
.nws-type-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--input); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); font: inherit; font-size: 12px; padding: 4px 8px; cursor: pointer;
}
.nws-type-chip:hover { border-color: var(--border2); }
.nws-type-chip.is-active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.nws-type-n {
    display: inline-block; min-width: 14px; text-align: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
    border-radius: 8px; padding: 0 4px; font-size: 10px; line-height: 15px;
    font-variant-numeric: tabular-nums;
}
.nws-popover {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    display: flex; flex-direction: column; gap: 1px; min-width: 150px; padding: 5px;
    background: var(--panel, var(--bg)); border: 1px solid var(--border2);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.nws-popover[hidden] { display: none; }
.nws-pop-item {
    display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text);
    padding: 4px 6px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.nws-pop-item:hover { background: var(--hover); }
.nws-pop-item input[type="checkbox"] { width: 13px; height: 13px; cursor: pointer; }

/* Кликабельные чипы сводки, управляющие режимом (cabinet-infra.js). */
.inf-net-summary .inf-chip[data-nws-mode-chip] { cursor: pointer; }

/* ─── Скролл-контейнер дерева (scroll переживает обновление) ─────────── */
.nws-scroll { overflow: auto; max-height: 64vh; border-top: 1px solid var(--border2); }
.nws-tree {
    display: flex; flex-direction: column;
    /* Визуальная лесенка уровней и цвет тонких tree-guides. */
    --nws-ind-1: 24px;
    --nws-ind-2: 48px;
    --nws-ind-3: 72px;
    /* Сетка строки: mark 3px + gap 8px + indent + gap 8px = 72px. */
    --nws-ind-net: calc(var(--nws-ind-3) - 19px);
    --nws-guide: color-mix(in srgb, var(--border2) 65%, transparent);
}

/* ─── Группы: клиент / объект ───────────────────────────────────────── */
.nws-group {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    min-height: 26px; padding: 4px 8px; cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--border2);
}
.nws-group:hover { background: var(--hover); }
/* Клиент: левый акцент-маркер цвета (2–3px), не заливка; сильнейший уровень. */
.nws-group-client {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    border-left: 3px solid var(--nws-color, transparent);
    padding-left: 21px;
}
.nws-group-site {
    padding-left: var(--nws-ind-2); font-size: 12px; color: var(--muted); font-weight: 500;
}
/* Тонкие guides: вертикаль на уровне клиента + короткий коннектор к объекту. */
.nws-group-site::before,
.nws-tech-group::before,
.nws-tech-sub::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--nws-ind-3); pointer-events: none;
    background-image: linear-gradient(var(--nws-guide), var(--nws-guide));
    background-size: 1px 100%; background-position: var(--nws-ind-1) 0;
    background-repeat: no-repeat;
}
.nws-tech-sub::before {
    background-image: linear-gradient(var(--nws-guide), var(--nws-guide)),
        linear-gradient(var(--nws-guide), var(--nws-guide));
    background-size: 1px 100%, 1px 100%;
    background-position: var(--nws-ind-1) 0, var(--nws-ind-2) 0;
}
.nws-group-site::after {
    content: ''; position: absolute; left: var(--nws-ind-1); top: 50%;
    width: 14px; height: 1px; background: var(--nws-guide); pointer-events: none;
}
/* Иконка объекта — monochrome «папка», без эмодзи. */
.nws-gicon {
    flex: none; width: 11px; height: 9px; margin-top: 3px;
    border: 1px solid var(--muted2); border-radius: 1px; opacity: .8; position: relative;
}
.nws-gicon::before {
    content: ''; position: absolute; top: -3px; left: -1px;
    width: 5px; height: 2px; background: var(--muted2); border-radius: 1px 1px 0 0;
}
.nws-group.is-pseudo .nws-gdot { display: none; }
.nws-group.is-mixed .nws-gname { color: var(--inf-warn, #D29922); }
.nws-group.is-unassigned .nws-gname { color: var(--muted); }
.nws-caret { flex: none; width: 12px; color: var(--muted2); font-size: 9px; line-height: 1; text-align: center; }
.nws-gdot {
    flex: none; width: 8px; height: 8px; border-radius: 2px;
    background: var(--nws-color, var(--muted2));
}
.nws-gname { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nws-gmeta {
    margin-left: auto; color: var(--muted2); font-size: 11px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nws-flag { flex: none; color: var(--inf-warn, #D29922); font-size: 12px; line-height: 1; }
/* Технические сети внутри объекта: свёрнутые группы (режимы «Основные»/«Все»). */
.nws-tech-group {
    padding-left: 60px; font-size: 12px; font-weight: 500; color: var(--muted2);
}
.nws-tech-group .nws-gname { color: var(--muted); }
.nws-tech-group .nws-caret { color: var(--muted2); }
.nws-tech-sub {
    padding-left: var(--nws-ind-3); font-size: 11.5px; font-weight: 500; color: var(--muted2);
}
.nws-tech-sub .nws-gname { color: var(--muted2); }

/* ─── Строка сети (dense grid, колонки не ломаются на 1366px) ───────── */
.nws-row {
    position: relative;
    display: grid;
    grid-template-columns: 3px var(--nws-ind-net) minmax(120px, 1.6fr) minmax(90px, 1.1fr)
        minmax(56px, .6fr) minmax(88px, .9fr) minmax(52px, .5fr) minmax(88px, .8fr)
        minmax(64px, .7fr) 40px 16px;
    align-items: center; column-gap: 8px;
    min-height: 27px; padding: 2px 8px 2px 0;
    border-bottom: 1px solid var(--border2); cursor: pointer;
}
/* Guides уровней клиента и объекта проходят сквозь строки сети. */
.nws-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--nws-ind-3); pointer-events: none;
    background-image: linear-gradient(var(--nws-guide), var(--nws-guide)),
        linear-gradient(var(--nws-guide), var(--nws-guide));
    background-size: 1px 100%, 1px 100%;
    background-position: var(--nws-ind-1) 0, var(--nws-ind-2) 0;
    background-repeat: no-repeat;
}
.nws-row:hover { background: var(--hover); }
.nws-mark { align-self: stretch; background: var(--nws-color, transparent); opacity: .55; border-radius: 1px; }
.nws-indent { display: block; }
/* Caret раскрытия object-contributions у mixed-сети. */
.nws-nodecaret {
    flex: none; width: 14px; height: 14px; padding: 0; margin-right: 2px;
    border: 0; border-radius: 3px; background: transparent; color: var(--muted2);
    font: inherit; font-size: 9px; line-height: 1; cursor: pointer;
}
.nws-nodecaret:hover { color: var(--text); background: var(--hover2, var(--hover)); }
.nws-cidr {
    display: flex; align-items: center; min-width: 0;
    color: var(--text); font-size: 12px; font-family: Consolas, "Cascadia Mono", monospace;
    white-space: nowrap;
}
.nws-cidr-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contributions mixed-сети: «Завод мясо 8», «Без объекта 2» (последним). */
.nws-contribs { display: flex; flex-direction: column; }
.nws-contrib {
    position: relative; display: flex; align-items: center; gap: 8px;
    min-height: 24px; padding: 1px 8px 1px var(--nws-ind-3);
    font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border2);
}
.nws-contrib::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--nws-ind-3); pointer-events: none;
    background-image: linear-gradient(var(--nws-guide), var(--nws-guide)),
        linear-gradient(var(--nws-guide), var(--nws-guide));
    background-size: 1px 100%, 1px 100%;
    background-position: var(--nws-ind-1) 0, var(--nws-ind-2) 0;
    background-repeat: no-repeat;
}
.nws-contrib-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nws-contrib-name::before { content: '·'; margin-right: 6px; color: var(--muted2); }
.nws-contrib-m { margin-left: auto; color: var(--muted2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nws-hint {
    padding: 3px 8px 3px var(--nws-ind-3); font-size: 11px; color: var(--muted2);
    border-bottom: 1px solid var(--border2);
}
/* Класс/product-метка и бейджи признаков (компактно, без карточек). */
.nws-cls { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.nws-class-label {
    flex: none; max-width: 100%; font-size: 10px; line-height: 16px; padding: 0 5px;
    border: 1px solid var(--border2); border-radius: var(--radius); color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nws-class-label.is-info { border-color: color-mix(in srgb, var(--inf-info, #4493F8) 60%, transparent); color: var(--inf-info, #4493F8); }
.nws-class-label.is-muted { border-color: var(--border2); color: var(--muted2); }
.nws-flag.is-broad, .nws-flag.is-overlap {
    flex: none; font-size: 10px; line-height: 16px; padding: 0 5px; white-space: nowrap;
    border: 1px solid var(--inf-warn, #D29922); border-radius: var(--radius);
    color: var(--inf-warn, #D29922);
}
.nws-flag.is-overlap {
    border-color: color-mix(in srgb, var(--inf-crit, #f85149) 65%, transparent);
    color: color-mix(in srgb, var(--inf-crit, #f85149) 85%, var(--text));
}
.nws-m, .nws-gw, .nws-dns, .nws-last {
    font-size: 11.5px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nws-k { color: var(--muted2); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.nws-sub { color: var(--muted2); font-size: 10px; margin-left: 3px; }
.nws-health { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.nws-hdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted2); }
.nws-health.is-ok { color: var(--inf-ok, var(--accent)); }
.nws-health.is-ok .nws-hdot { background: var(--inf-ok, var(--accent)); }
.nws-health.is-info { color: var(--inf-info, #4493F8); }
.nws-health.is-info .nws-hdot { background: var(--inf-info, #4493F8); }
.nws-health.is-warn { color: var(--inf-warn, #D29922); }
.nws-health.is-warn .nws-hdot { background: var(--inf-warn, #D29922); }
.nws-health.is-crit { color: var(--inf-crit, var(--danger)); }
.nws-health.is-crit .nws-hdot { background: var(--inf-crit, var(--danger)); }
.nws-health.is-unknown { color: var(--muted2); }
.nws-health.is-unknown .nws-hdot { background: transparent; box-shadow: inset 0 0 0 1px var(--muted2); }

/* Бейдж наблюдений: клик ведёт во вкладку «Здоровье» с фильтром scope. */
.nws-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border2); border-radius: var(--radius);
    color: var(--inf-warn, #D29922); cursor: pointer; font-family: inherit;
    font-size: 11px; line-height: 1.2; padding: 1px 5px; white-space: nowrap;
}
.nws-badge:hover { background: var(--hover); border-color: var(--border); }
.nws-badge.is-empty { border: 0; padding: 0; cursor: default; }
.nws-mix { text-align: right; }

/* ─── Статус обновления (↻ Обновляется… / ✓ Обновлено HH:MM:SS) ─────── */
.nws-status { font-size: 11.5px; color: var(--muted2); padding: 2px 0; }
.nws-status.is-loading { color: var(--inf-info, #4493F8); }
.nws-status.is-ok { color: var(--inf-ok, var(--accent)); }
.nws-status.is-error { color: var(--inf-crit, var(--danger)); }

/* Узкое окно: прячем малозначимые колонки раньше, чем трогаем отступ. */
@media (max-width: 1400px) {
    .nws-row { grid-template-columns: 3px var(--nws-ind-net) minmax(104px, 1.6fr) minmax(80px, 1.1fr)
        minmax(52px, .6fr) minmax(80px, .9fr) minmax(80px, .8fr) minmax(60px, .7fr) 36px 16px; }
    .nws-dns { display: none; }
}
@media (max-width: 1100px) {
    .nws-count { display: none; }
}