/* © 2026 VanlifeFabrika, ALT — SPDX-License-Identifier: AGPL-3.0-or-later */
/* ALT 1.32: общая карта сети — кнопка «Слои», меню, легенда, узлы сети, люди рядом, ночная подложка (netlayer.js) */

/* ночная карта: подложка приглушена и подкрашена в синеву (не перевёрнута — улицы читаются), кометы светятся */
.tmap.tm-dark { background: #0A1020; }
.tmap.tm-dark .tm-tiles { filter: brightness(.5) saturate(.45) contrast(1.08); }
.tmap.tm-dark .tm-tiles::after { content: ''; position: absolute; inset: 0; background: rgba(9, 18, 44, .38); pointer-events: none; }
.tmap.tm-dark .tm-fx { filter: drop-shadow(0 0 6px rgba(255, 194, 26, .75)); }
.tmap.tm-dark .tm-attr, .tmap.tm-dark .tm-scale { background: rgba(14, 20, 34, .78); color: #DCE3EE; border-color: #DCE3EE; }

/* кнопка «Слои» — над картой слева сверху */
.nl-btn { position: absolute; left: 10px; top: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--pill); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; box-shadow: var(--shadow-2); border: 1px solid var(--border); }
.nl-btn .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nl-dark .nl-btn, .nl-dark .nl-legend { background: rgba(14, 20, 34, .86); color: #EDF1F7; border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }

/* всплывающее меню: слои, долгое нажатие */
.nl-pop { position: absolute; z-index: 7; width: 260px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; padding: 6px; border-radius: var(--r16);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-3); }
.nl-pop[hidden] { display: none; }
.nl-ph { padding: 8px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nl-note { padding: 6px 10px 10px; color: var(--text2); font-size: 14px; line-height: 19px; }
.nl-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border-radius: var(--r12); text-align: left; color: var(--text); }
.nl-row:hover { background: var(--surface2); }
.nl-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nl-rt b { font-size: 15px; line-height: 20px; font-weight: 600; }
.nl-rt small { color: var(--muted); font-size: 12px; line-height: 16px; }
.nl-sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--surface3); transition: background .15s; }
.nl-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.nl-sw.on { background: var(--accent-fill); } .nl-sw.on::after { transform: translateX(16px); }

/* легенда — слева снизу над масштабной линейкой */
.nl-legend { position: absolute; left: 10px; bottom: 52px; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 7px 10px; max-width: calc(100% - 80px);
  border-radius: var(--r12); background: rgba(255, 255, 255, .9); color: #101A2C; font-size: 12px; line-height: 16px; box-shadow: var(--shadow-1); pointer-events: none; }
.nl-legend[hidden] { display: none; }
.nl-lr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nl-lr small { opacity: .7; }
.nl-comet { width: 22px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 194, 26, 0), #FFC21A 70%, #FFF4C2); box-shadow: 0 0 6px rgba(255, 194, 26, .8); flex: none; }
.nl-grad { width: 84px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6CC3A0, #E2AE5C, #D9776A); flex: none; }
.nl-ln { width: 22px; height: 0; border-top: 2px solid rgba(124, 138, 165, .6); flex: none; } .nl-ln.plan { border-top-style: dashed; }
.nl-dark .nl-ln { border-top-color: rgba(200, 210, 228, .6); }

/* узлы сети на карте: планируемый — пунктирная обводка цвета узла, светлая заливка */
.tm-m.nn { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; font-weight: 800; }
.tm-m.nn.sel { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.tm-m.nn.plan { background: rgba(255, 255, 255, .92); color: var(--mc); border: 2.5px dashed var(--mc); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.tm-m.nn.drag { cursor: move; box-shadow: 0 0 0 4px rgba(255, 194, 26, .55), 0 2px 6px rgba(0, 0, 0, .45); }
.tm-ln.nl-link { stroke: #7C8AA5; stroke-width: 1.4; stroke-dasharray: none; stroke-linecap: round; opacity: .28; }
.tm-ln.nl-link.plan { stroke-dasharray: 6 6; }
.tmap.tm-dark .tm-ln.nl-link { stroke: #C8D2E4; }
.tm-ln.nl-load { stroke-dasharray: none; stroke-linecap: round; opacity: .5; }
.tm-ln.nl-flow { stroke: #F5B301; stroke-width: 2.5; stroke-dasharray: none; stroke-linecap: round; opacity: .9; }

/* люди рядом — кружок-аватар с подписью «обновлено N мин назад» */
.tm-m.nperson { width: 32px; height: 32px; margin: -16px 0 0 -16px; overflow: visible; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .55), 0 2px 6px rgba(0, 0, 0, .45); }
.tm-m.nperson.old { box-shadow: 0 0 0 3px rgba(141, 152, 173, .55), 0 2px 6px rgba(0, 0, 0, .4); }
.tm-m.nperson.old .tm-av { filter: grayscale(.6); }
.tm-m .tm-av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.tm-lb .tm-lbs { display: block; font-size: 10px; line-height: 13px; font-weight: 500; opacity: .75; }

/* панель под картой */
.nl-panel { display: flex; flex-direction: column; gap: 10px; }
.nl-panel .nl-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; background: var(--mc); }
.nl-panel .nl-badge.sq { border-radius: var(--r8); }
.nl-panel .nl-badge.plan { background: transparent; color: var(--mc); border: 2px dashed var(--mc); }
.nl-nrow { width: 100%; text-align: left; min-height: 52px; gap: 12px; border-radius: var(--r12); padding: 6px; }
.nl-nrow .tmid { flex: 1; min-width: 0; } .nl-nrow .tmid b { display: block; font-size: 15px; line-height: 20px; } .nl-nrow .tmid small { color: var(--muted); font-size: 13px; line-height: 18px; }
.nl-nrow.sel { background: var(--accent-soft); }
.nl-st { flex: none; padding: 2px 8px; border-radius: var(--pill); font-size: 12px; font-weight: 600; }
.nl-st.up { background: var(--near-soft); color: var(--near); } .nl-st.plan { background: var(--surface2); color: var(--text2); border: 1px dashed var(--border-strong); }
.nl-noteb { font-size: 14px; line-height: 20px; color: var(--text2); background: var(--surface2); border-radius: var(--r12); padding: 8px 10px; }
.nl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-acts .btn .ic { width: 18px; height: 18px; }
.nl-help { text-align: left; margin-top: 0; }

/* форма узла */
.nl-form { display: flex; flex-direction: column; gap: 12px; min-width: min(420px, 82vw); }
.nl-f { display: flex; flex-direction: column; gap: 6px; }
.nl-f[hidden] { display: none; }
.nl-f > label { font-size: 13px; line-height: 18px; color: var(--text2); font-weight: 600; }
.nl-f > small { color: var(--muted); font-size: 12px; line-height: 16px; }
.nl-f input, .nl-f select, .nl-f textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r12); border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 15px; outline: none; box-sizing: border-box; }
.nl-f textarea { min-height: 64px; resize: vertical; }
.nl-f input:focus, .nl-f select:focus, .nl-f textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nl-ll { display: flex; gap: 8px; } .nl-ll input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.nl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; }
.nl-seg button i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); flex: none; }
.nl-seg button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.nl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-chip { min-height: 40px; padding: 0 12px; border-radius: var(--pill); border: 1px dashed var(--border-strong); background: transparent; color: var(--text2); font-size: 14px; font-weight: 600; }
.nl-chip.on { border-style: solid; border-color: var(--near); background: var(--near-soft); color: var(--near); }

@media (prefers-reduced-motion: reduce) { .nl-sw, .nl-sw::after { transition: none; } }

/* 1.35: «Здоровье узлов» — кольцо вокруг значка по измерениям агента; связи по TQ/сигналу; карточка с отчётом */
.tm-m.nn.hl { outline: 3px solid var(--hl, #8D98AD); outline-offset: 2px; }
.tm-m.nn.sq.hl { outline-offset: 2px; }
.tm-m.nn.hl-green { --hl: #15803D; } .tm-m.nn.hl-yellow { --hl: #D97706; } .tm-m.nn.hl-red { --hl: #C8102E; }
.tm-m.nn.hl-none { --hl: #8D98AD; outline-style: dashed; }
.tm-m.nn.hl-red { animation: nl-hlp 1.6s ease-in-out infinite; }
@keyframes nl-hlp { 50% { outline-offset: 5px; } }
@media (prefers-reduced-motion: reduce) { .tm-m.nn.hl-red { animation: none; } }
.tm-ln.nl-hl { stroke-dasharray: none; stroke-linecap: round; opacity: .95; }
.tm-ln.nl-hl.hl-none { stroke-dasharray: 3 6; opacity: .7; }
.tm-hit { stroke: transparent; stroke-width: 16px; fill: none; pointer-events: stroke; cursor: pointer; }
.tm-lt.nl-hll { font-size: 11px; font-weight: 600; }
.nl-hlg { display: inline-flex; align-items: center; gap: 4px; }
.nl-hlg i, .nl-hdot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.nl-health { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.nl-hh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .nl-hh small { color: var(--muted); margin-left: auto; }
.nl-hsub { margin-top: 6px; font-size: 13px; color: var(--text2, var(--muted)); font-weight: 600; }
.nl-hlink { gap: 8px; } .nl-hlink b { margin-left: auto; text-align: right; }
.nl-hint { margin-top: 6px; padding: 8px 10px; border-radius: var(--r12); font-size: 13px; line-height: 18px; background: var(--surface2, rgba(127, 127, 127, .12)); border-left: 3px solid #8D98AD; }
.nl-hint.hl-yellow { border-left-color: #D97706; } .nl-hint.hl-red { border-left-color: #C8102E; }
/* 1.42 (Б3, п. 5): карточка «Узлы» на карте — длинные названия и значения переносятся внутри карточки, а не уезжают за край
   (на узкой и широкой ширине, в «Сети и карте», «Инструментах» и Админ-центре) */
.nl-card { min-width: 0; overflow: hidden; }
.nl-card .nch { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nl-card .nch .tmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nl-card .nch .tmid b { display: block; overflow-wrap: anywhere; }
.nl-card .nch .tmid small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-card .akv { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.nl-card .akv > span { flex: 1 1 40%; min-width: 0; overflow-wrap: anywhere; }
.nl-card .akv > b { flex: 1 1 60%; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.nl-nrow .tmid { flex: 1; min-width: 0; }
.nl-nrow .tmid b, .nl-nrow .tmid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }