/* Ultimate Monitoring System · FIBERBLAZE IMUS
   Colors follow docs/design/workflow.html. Sizes use rem so the whole UI scales per screen type
   (Phone < 600, Tablet 600-1023, Laptop 1024-1365, PC 1366-1919, Large 1920-2559, TV >= 2560). */

/* ---------- Themes ---------- */
:root, :root[data-ut="light"] {
  --bg: #f2f4f7; --surface: #ffffff; --sunk: #eef1f5; --fg: #172433; --muted: #586679; --line: #a3afbe; --rule: #dde3ea;
  --accent: #1f4e79; --bar: #1a2d44; --on-bar: #e6edf5;
  --up: #1d7a45; --warn: #9a6408; --slow: #b8510d; --down: #b42d26;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ut="light"]):not([data-ut="color"]) {
    --bg: #0f1620; --surface: #17212d; --sunk: #121a24; --fg: #e2e8ef; --muted: #95a3b5; --line: #5a6a7d; --rule: #253242;
    --accent: #8cb4e2; --bar: #0a1119; --on-bar: #dfe7f0;
    --up: #4cc47d; --warn: #e5ad4f; --slow: #f08a4b; --down: #ef6a62; color-scheme: dark;
  }
}
:root[data-ut="dark"] {
  --bg: #0f1620; --surface: #17212d; --sunk: #121a24; --fg: #e2e8ef; --muted: #95a3b5; --line: #5a6a7d; --rule: #253242;
  --accent: #8cb4e2; --bar: #0a1119; --on-bar: #dfe7f0;
  --up: #4cc47d; --warn: #e5ad4f; --slow: #f08a4b; --down: #ef6a62; color-scheme: dark;
}
:root[data-ut="color"] {
  --bg: #e4eef9; --surface: #ffffff; --sunk: #e9f2fc; --fg: #0f2238; --muted: #4c6480; --line: #8eaed2; --rule: #d2e1f2;
  --accent: #0b5cb8; --bar: #0b5cb8; --on-bar: #ffffff;
  --up: #15913f; --warn: #c98a00; --slow: #e0600b; --down: #d42222; color-scheme: light;
}
:root {
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "IBM Plex Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --rail-w: 13.5rem;
  font-size: 15px;
}

/* Screen sizes: scale everything a little on bigger screens */
@media (min-width: 1366px) { :root { font-size: 15.5px; } }
@media (min-width: 1920px) { :root { font-size: 17px; } }
@media (min-width: 2560px) { :root { font-size: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 0.9rem/1.45 var(--sans); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* ---------- Buttons and inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 500 .85rem var(--sans); color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: .4rem .85rem; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.btn.sm { padding: .2rem .6rem; font-size: .8rem; }
.btn.link { background: none; border: 0; color: var(--accent); padding: .3rem 0; text-decoration: underline; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="text"], input[type="password"], input[type="search"], input:not([type]) {
  font: .9rem var(--sans); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: .45rem .6rem; min-width: 0; }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; margin: 0; }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }

/* ---------- Login / change password ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 1.5rem 1rem;
  background: linear-gradient(160deg, var(--bar), color-mix(in srgb, var(--bar) 70%, var(--accent))); }
.auth-card { width: 100%; max-width: 24rem; display: grid; gap: .45rem; background: var(--surface); border-radius: 6px; padding: 1.8rem 1.6rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / .35); }
.auth-logo { width: 11rem; max-width: 70%; height: auto; justify-self: center; margin-bottom: .4rem; }
.auth-card h1 { font-size: 1.15rem; letter-spacing: .08em; text-align: center; }
.auth-card > p { margin: 0 0 .6rem; text-align: center; font-size: .85rem; }
.auth-card label { font-size: .8rem; font-weight: 600; margin-top: .35rem; }
.auth-card .btn.primary { margin-top: .8rem; padding: .6rem; }
.auth-card .btn.link { justify-self: center; }
.form-error { margin: .3rem 0 0; padding: .45rem .6rem; border-radius: 3px; font-size: .82rem; color: var(--down);
  background: color-mix(in srgb, var(--down) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--down) 40%, transparent); }

/* Shimmering "Ultimate Monitoring System" + pulsing live dot */
.shimmer { background: linear-gradient(90deg, currentColor 0%, currentColor 40%, #8fd3ff 50%, currentColor 60%, currentColor 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ums-shine 3.2s linear infinite; }
@keyframes ums-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Brand shimmer: orange to amber (FiberBlaze colors) */
.brand-shine { background-image: linear-gradient(90deg, #d9480f 0%, #e8590c 35%, #fcc419 50%, #e8590c 65%, #d9480f 100%); }

/* ---------- Login (split screen, fixed brand colors in every theme) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
.lg { --lg-navy: #0b1f45; --lg-blue: #1557e6; --lg-orange: #ff7a1a; --lg-ink: #0c1b3a; --lg-mut: #5b6b85;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  font-family: "Poppins", var(--sans); color: var(--lg-ink); background: #eef4fc; color-scheme: light; }

/* Left: brand panel */
.lg-brand { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center;
  background: radial-gradient(120% 80% at 20% 0%, #1a4fb8 0%, rgb(26 79 184 / 0) 60%), linear-gradient(170deg, #0c2a66 0%, #0a1f4d 55%, #071533 100%); }
.lg-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-brand-inner { position: relative; padding: clamp(2rem, 7vw, 7.5rem); padding-bottom: clamp(12rem, 32vh, 20rem); max-width: 40rem; }
.lg-logo { width: clamp(10rem, 17vw, 17rem); height: auto; display: block; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .35)); }
.lg-bar { display: block; width: 6.5rem; height: 4px; margin: 1.8rem 0 1.4rem; border-radius: 2px; background: linear-gradient(90deg, var(--lg-orange) 50%, #3b82f6 50%); }
.lg-title { margin: 0; font: 700 clamp(2.1rem, 1rem + 2.6vw, 3.6rem)/1.12 "Poppins", var(--sans); letter-spacing: -.01em; }
.lg-title span { color: var(--lg-orange); }
.lg-tag { margin: .9rem 0 0; font-size: clamp(.95rem, .8rem + .4vw, 1.25rem); color: rgb(255 255 255 / .88); }
.lg-feats { list-style: none; display: flex; gap: 0; margin: 2rem 0 0; padding: 0; }
.lg-feats li { display: grid; gap: .1rem; padding: 0 1.6rem; border-left: 1px solid rgb(255 255 255 / .2); }
.lg-feats li:first-child { padding-left: 0; border-left: 0; }
.lg-feats svg { width: 2.1rem; height: 2.1rem; margin-bottom: .45rem; fill: none; stroke: #4c9bff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lg-feats svg .o { stroke: var(--lg-orange); }
.lg-feats b { font-weight: 600; font-size: 1rem; }
.lg-feats span { font-size: .8rem; color: rgb(255 255 255 / .8); }

/* Right: sign-in card */
.lg-side { position: relative; overflow: hidden; display: grid; place-items: center; padding: 2.5rem 1.5rem;
  background: radial-gradient(80% 60% at 30% 10%, #ffffff 0%, rgb(255 255 255 / 0) 70%), #eaf2fc; }
.lg-side-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-card { position: relative; width: 100%; max-width: 36rem; display: grid; gap: 1.1rem; padding: clamp(1.75rem, 3vw, 3.2rem);
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgb(20 60 130 / .14), 0 2px 6px rgb(20 60 130 / .06); }
.lg-card-bar { width: 3.3rem; height: 4px; border-radius: 2px; background: var(--lg-orange); }
.lg-card h2 { margin: -.2rem 0 0; font: 700 clamp(2rem, 1.4rem + 1.6vw, 2.9rem)/1.1 "Poppins", var(--sans); color: var(--lg-navy); }
.lg-card h2 span { color: var(--lg-orange); }
.lg-sub { margin: -.6rem 0 .6rem; font-size: 1.02rem; color: var(--lg-mut); }
.lg-field { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: 1rem; align-items: end; }
.lg-ico { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border-radius: 10px; background: #eef4fd; }
.lg-ico svg { width: 1.35rem; height: 1.35rem; fill: var(--lg-blue); }
.lg-ico svg path[fill="none"] { fill: none; stroke: var(--lg-blue); stroke-width: 2.2; }
.lg-ico svg .cut { fill: #eef4fd; }
.lg-input { display: grid; gap: .35rem; min-width: 0; }
.lg-input label { font-size: .82rem; font-weight: 500; color: var(--lg-ink); }
.lg-input input { width: 100%; min-height: 3.3rem; padding: .7rem 1rem; font: 400 .98rem "Poppins", var(--sans); color: var(--lg-ink);
  background: #fff; border: 1.5px solid #d5e0ef; border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.lg-input input::placeholder { color: #8b98ad; }
.lg-input input:focus { outline: none; border-color: var(--lg-blue); box-shadow: 0 0 0 4px rgb(21 87 230 / .12); }
.lg-pass { position: relative; }
.lg-pass input { padding-right: 3.3rem; }
.lg-eye { all: unset; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: 8px; cursor: pointer; color: #6b7a92; }
.lg-eye:hover { color: var(--lg-blue); }
.lg-eye:focus-visible { outline: 2px solid var(--lg-blue); }
.lg-eye svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lg-eye[aria-pressed="true"] { color: var(--lg-blue); }
.lg-card .form-error { margin: 0; color: #c62828; background: #fdecec; border-color: #f3b7b7; }
.lg-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .5rem; min-height: 3.6rem;
  border-radius: 12px; font: 600 1.15rem "Poppins", var(--sans); color: #fff; cursor: pointer;
  background: linear-gradient(90deg, #0b4fe0 0%, #1557e6 45%, #ff7a1a 100%); box-shadow: 0 12px 26px rgb(21 87 230 / .28); transition: filter .15s, transform .15s; }
.lg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lg-btn:focus-visible { outline: 3px solid #93b6ff; outline-offset: 3px; }
.lg-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.lg-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lg-foot { margin: .6rem 0 0; padding-top: 1.3rem; border-top: 1px solid #e6edf6; text-align: center; font-size: .82rem; color: var(--lg-mut); }
.lg-foot i { font-style: normal; margin: 0 .45rem; }
@media (prefers-reduced-motion: reduce) { .lg-btn, .lg-input input { transition: none; } .lg-btn:hover { transform: none; } }

/* Phone and portrait tablet: brand becomes a band on top, card below */
@media (max-width: 899px) {
  .lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lg-brand-inner { padding: 1.75rem 1.25rem 7.5rem; }
  .lg-logo { width: 9rem; }
  .lg-bar { margin: 1.1rem 0 .9rem; }
  .lg-title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.3rem); }
  .lg-feats { margin-top: 1.2rem; }
  .lg-feats li { padding: 0 .9rem; }
  .lg-feats svg { width: 1.6rem; height: 1.6rem; margin-bottom: .2rem; }
  .lg-feats b { font-size: .88rem; } .lg-feats span { font-size: .72rem; }
  .lg-side { place-items: start center; padding: 1.5rem 1rem 2rem; }
}
@media (max-width: 599px) {
  .lg-field { grid-template-columns: 2.9rem minmax(0, 1fr); gap: .7rem; }
  .lg-ico { width: 2.9rem; height: 2.9rem; }
  .lg-input input { min-height: 2.9rem; }
  .lg-sub { font-size: .92rem; }
}
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #34d27b; margin-right: .4rem; animation: live-pulse 1.8s infinite; flex: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgb(52 210 123 / .7); } 70% { box-shadow: 0 0 0 .45rem rgb(52 210 123 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 210 123 / 0); } }
@media (prefers-reduced-motion: reduce) { .shimmer, .live-dot, .alarm-chip.on { animation: none; } .shimmer { -webkit-text-fill-color: currentColor; } }

/* ---------- App shell: left rail ---------- */
.app { min-height: 100%; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.rail { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--bar); color: var(--on-bar);
  display: flex; flex-direction: column; gap: 2px; padding: 1rem .7rem; z-index: 20; }
.rail .brand { position: relative; display: grid; justify-items: center; text-align: center; gap: .2rem; padding: .1rem .5rem 1rem; margin-bottom: .5rem; border-bottom: 1px solid rgb(255 255 255 / .14); }
.rail .logo-full { width: 8.8rem; height: auto; display: block; margin: 0 auto .5rem; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .2)); }
.rail .logo-icon { display: none; width: 2.5rem; height: 2.5rem; margin-inline: auto; }
.rail .brand b { font-size: .82rem; letter-spacing: .08em; }
.rail .brand .ums { display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.rail .brand .ums .shimmer { color: var(--on-bar); }
.pin { all: unset; position: absolute; top: 0; right: 0; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 4px; cursor: pointer; color: var(--on-bar); opacity: .7; }
.pin:hover { opacity: 1; background: rgb(255 255 255 / .1); }
.pin:focus-visible { outline: 2px solid var(--on-bar); }
.pin svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.pin[aria-pressed="true"] svg { fill: currentColor; }
.nav { display: grid; gap: 2px; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; padding: .7rem .65rem .25rem; }
.rail .item { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: 4px; font-size: .85rem; color: inherit; text-decoration: none; opacity: .75; white-space: nowrap; }
.rail .item:hover { opacity: 1; background: rgb(255 255 255 / .07); }
.rail .item.on { opacity: 1; font-weight: 600; background: rgb(255 255 255 / .13); box-shadow: inset 3px 0 var(--on-bar); }
.rail .item svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-foot { margin-top: auto; padding: .8rem .5rem .1rem; border-top: 1px solid rgb(255 255 255 / .14); display: grid; grid-template-columns: 1.85rem 1fr; column-gap: .6rem; align-items: center; font-size: .82rem; }
.rail-foot #me-role { font-size: .7rem; opacity: .65; text-transform: uppercase; letter-spacing: .08em; }
.rail-foot .logout { grid-column: 1 / -1; justify-self: start; color: var(--on-bar); opacity: .8; font-size: .8rem; margin-top: .3rem; }
.avatar { grid-row: span 2; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: rgb(255 255 255 / .16); display: grid; place-items: center; font: 600 .78rem var(--sans); }
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 15; }

/* Unpinned (laptop and bigger): slim icon rail that opens on hover / focus */
@media (min-width: 1024px) {
  .app.unpinned { grid-template-columns: 4rem minmax(0, 1fr); }
  .app.unpinned .rail { width: 4rem; overflow-x: hidden; padding-inline: .5rem; transition: width .16s ease, box-shadow .16s ease; }
  /* .rail-open is set by app.js on mouse enter / keyboard focus, and cleared right after "Unpin" */
  .app.unpinned .rail.rail-open { width: var(--rail-w); box-shadow: 10px 0 28px rgb(0 0 0 / .28); }
  .app.unpinned .rail:not(.rail-open) .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app.unpinned .rail:not(.rail-open) .logo-full,
  .app.unpinned .rail:not(.rail-open) .pin { display: none; }
  .app.unpinned .rail:not(.rail-open) .logo-icon { display: block; }
  .app.unpinned .rail:not(.rail-open) .brand { padding-inline: 0; }
  .app.unpinned .rail:not(.rail-open) .item { justify-content: center; }
  .menu-btn, .scrim { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .app.unpinned .rail { transition: none; } }

/* Phone and tablet: the rail becomes a drawer opened by the menu button */
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--rail-w), 82vw); transform: translateX(-105%); transition: transform .18s ease; box-shadow: 10px 0 28px rgb(0 0 0 / .3); }
  .app.menu-open .rail { transform: none; }
  .pin { display: none; }
}

/* ---------- Header ---------- */
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.appbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .6rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--rule); }
:root[data-ut="color"] .appbar { background: var(--accent); color: var(--on-bar); border-color: var(--accent); }
.menu-btn { all: unset; cursor: pointer; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 4px; }
.menu-btn svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.menu-btn:focus-visible { outline: 2px solid var(--accent); }
.ptitle { font-size: 1.05rem; font-weight: 600; margin-right: auto; }
.clock { font: 500 .82rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock b { color: var(--accent); font-weight: 600; }
:root[data-ut="color"] .appbar .clock, :root[data-ut="color"] .appbar .clock b { color: var(--on-bar); }
.alarm-chip { font: 600 .78rem var(--sans); padding: .25rem .75rem; border-radius: 999px; white-space: nowrap; text-decoration: none; border: 1px solid transparent; }
.alarm-chip.ok { color: var(--up); background: color-mix(in srgb, var(--up) 10%, var(--surface)); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.alarm-chip.on { color: #fff; background: var(--down); animation: chip-blink 1.2s ease-in-out infinite; }
.alarm-chip.silent { color: var(--down); background: color-mix(in srgb, var(--down) 10%, var(--surface)); border-color: var(--down); }
@keyframes chip-blink { 50% { opacity: .65; } }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button { all: unset; padding: .2rem .65rem; font-size: .78rem; cursor: pointer; color: inherit; opacity: .7; }
.seg button.on { background: var(--accent); color: var(--surface); opacity: 1; font-weight: 600; }
:root[data-ut="color"] .appbar .seg { border-color: rgb(255 255 255 / .5); }
:root[data-ut="color"] .appbar .seg button.on { background: rgb(255 255 255 / .25); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 599px) {
  .appbar { padding: .5rem .75rem; }
  .clock { order: 5; flex-basis: 100%; font-size: .75rem; }
  .seg { order: 6; }
}

.banner { display: block; width: 100%; text-align: left; border: 0; padding: .55rem 1rem; font: .85rem var(--sans); }
.banner.warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--fg); border-bottom: 1px solid var(--warn); }
.banner.info { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--fg); border-bottom: 1px solid var(--accent); cursor: pointer; font-weight: 600; }

/* ---------- Ping Monitoring ---------- */
.page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-bar b { color: var(--down); font: 600 .75rem var(--mono); letter-spacing: .1em; white-space: nowrap; }
.gm-bar .msg { flex: 1 1 18rem; min-width: 0; font-size: .85rem; }
.gm-bar { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; background: var(--sunk); border-bottom: 1px solid var(--line); padding: .5rem 1rem; }
.gm-bar .msg { color: var(--muted); }

/* 7 boxes; the 1px gap over the --rule background draws the dividing lines */
.summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
/* Each box: tinted icon circle + label + number; --c is the status color */
.summary .sum { --c: var(--accent); position: relative; display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem; background: var(--surface); min-width: 0; overflow: hidden; }
.summary .sum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: .85; }
.summary .up { --c: var(--up); } .summary .warn { --c: var(--warn); } .summary .high { --c: var(--slow); }
.summary .down { --c: var(--down); } .summary .muted { --c: color-mix(in srgb, var(--down) 55%, var(--muted)); } .summary .paused { --c: var(--muted); }
.sum-ico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.sum-ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sum-txt { display: grid; min-width: 0; }
.sum-txt span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-txt b { font: 700 1.45rem/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--c); }
.summary .sum.total .sum-txt b { color: var(--fg); }
.summary .sum.zero .sum-ico { filter: grayscale(.7); opacity: .55; }
.summary .sum.zero .sum-txt b { opacity: .55; }
/* Number changed: quick pop. Down / High ping above 0: pulsing ring + tinted box */
.summary .sum.bump .sum-txt b { animation: sum-bump .45s ease-out; }
@keyframes sum-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
.summary .sum.alert { background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.summary .sum.alert .sum-ico { color: #fff; background: var(--c); animation: sum-pulse 1.6s ease-out infinite; }
@keyframes sum-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 70% { box-shadow: 0 0 0 .6rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .summary .sum.bump .sum-txt b, .summary .sum.alert .sum-ico { animation: none; } }
@media (max-width: 1365px) { .summary .sum { gap: .5rem; padding: .55rem .6rem; } .sum-ico { width: 1.9rem; height: 1.9rem; } .sum-ico svg { width: 1.05rem; height: 1.05rem; } .sum-txt b { font-size: 1.25rem; } }
@media (max-width: 1023px) { .sum-txt span { font-size: .62rem; letter-spacing: .04em; } }
@media (max-width: 599px) {
  .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary .sum:last-child { grid-column: span 2; }
  .summary .sum { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .5rem .55rem; }
  .sum-ico { width: 1.6rem; height: 1.6rem; } .sum-ico svg { width: .9rem; height: .9rem; }
  .sum-txt b { font-size: 1.1rem; }
}

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--rule); }
.toolbar .search { width: 15rem; max-width: 100%; margin-left: auto; }
.filter { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--accent); }
.gm { all: unset; cursor: pointer; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 3px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.gm.on { background: var(--down); border-color: var(--down); color: #fff; }
.gm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 599px) {
  .toolbar { padding: .5rem .75rem; }
  .toolbar .search { flex: 1 1 10rem; width: auto; margin-left: 0; }
}

.live-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
.table-wrap { overflow: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
table.dev { width: 100%; min-width: 62rem; border-collapse: collapse; font-size: .84rem; }
table.dev th { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem .75rem; text-align: left;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
table.dev td { padding: .4rem .75rem; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--rule); }
table.dev th.c, table.dev td.c { text-align: center; }
table.dev th.ms, table.dev td.ms { text-align: right; }
:root[data-ut="color"] table.dev th { background: var(--sunk); color: var(--accent); }

td.ty { font: 600 .74rem var(--sans); letter-spacing: .04em; color: var(--accent); text-align: center; white-space: normal !important; width: 9.5rem;
  background: var(--sunk); border-right: 1px solid var(--rule); cursor: pointer; }
td.ty:hover { text-decoration: underline; }
td.ty span { display: block; text-transform: uppercase; }
td.ty small { display: block; margin-top: .2rem; font: 500 .68rem var(--mono); letter-spacing: 0; color: var(--muted); }
tr.tfirst td { border-top: 1px solid var(--line); }
tr.dv { cursor: pointer; }
tr.dv:hover td:not(.ty) { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
tr.dv.sel td:not(.ty) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
td.nm { font-weight: 500; }
td.ip, td.ms { font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums; }
td.ms.lat { color: var(--warn); font-weight: 600; }
td.ms.hot { color: var(--slow); font-weight: 600; }
tr.dv.down td.nm { box-shadow: inset 3px 0 var(--down); }
tr.dv.high td.nm { box-shadow: inset 3px 0 var(--slow); }
tr.dv.warn td.nm { box-shadow: inset 3px 0 var(--warn); }
tr.dv.paused td { color: var(--muted); }
td.rm { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
tr.dv.down td.rm { color: var(--down); } tr.dv.high td.rm { color: var(--slow); } tr.dv.warn td.rm { color: var(--warn); }
:root[data-ut="color"] tr.dv.down td:not(.ty) { background: color-mix(in srgb, var(--down) 9%, var(--surface)); }
:root[data-ut="color"] tr.dv.high td:not(.ty) { background: color-mix(in srgb, var(--slow) 10%, var(--surface)); }
:root[data-ut="color"] tr.dv.warn td:not(.ty) { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
td.empty { color: var(--muted); text-align: center; padding: 2rem; }

.pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pill i { font: normal 600 .66rem var(--mono); letter-spacing: .07em; padding: .1rem .4rem; border-radius: 2px; border: 1px solid currentColor; min-width: 7rem; text-align: center; }
.pill.up i { color: var(--up); background: color-mix(in srgb, var(--up) 9%, var(--surface)); }
.pill.warn i { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.pill.high i { color: #fff; background: var(--slow); border-color: var(--slow); }
.pill.down i { color: #fff; background: var(--down); border-color: var(--down); }
.pill.paused i { color: var(--muted); }
.pill .mi { font-size: .7rem; color: var(--muted); }

td.upt .ut { display: block; font: 600 .82rem var(--mono); font-variant-numeric: tabular-nums; }
td.upt .ut.up { color: var(--up); } td.upt .ut.down { color: var(--down); }
td.upt small { display: block; font-size: .7rem; color: var(--muted); }

/* Phone: keep the machine name visible while scrolling the table sideways */
@media (max-width: 599px) {
  table.dev th.sticky, table.dev td.nm { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  table.dev th.sticky { z-index: 3; }
  td.ty { width: 6.5rem; }
}

/* ---------- Machine details modal (Ping Monitoring) ----------
   Header in the theme's bar color (navy in Light, near-black in Dark, blue in Color) with a status-colored edge ·
   tabs Overview / Logs / Map · footer with icon buttons. Every color comes from the theme tokens. */
.dlg.det-modal { --c: var(--muted); width: min(60rem, calc(100vw - 2rem)); max-width: none; height: min(41rem, calc(100dvh - 2rem)); border-radius: 10px; text-align: left; overflow: hidden; }
@media (min-width: 1920px) { .dlg.det-modal { width: min(68rem, calc(100vw - 4rem)); height: min(46rem, calc(100dvh - 3rem)); } }
@media (max-width: 599px) { .dlg.det-modal { width: calc(100vw - 1rem); } }
.det-modal[data-st="up"] { --c: var(--up); } .det-modal[data-st="warn"] { --c: var(--warn); } .det-modal[data-st="high"] { --c: var(--slow); }
.det-modal[data-st="down"] { --c: var(--down); } .det-modal[data-st="paused"] { --c: var(--muted); }
.det-modal[open] { display: flex; flex-direction: column; }
/* Header: theme bar color, bottom edge in the status color */
.det-hd { display: flex; align-items: center; gap: 1rem; padding: 1rem 1rem 1rem 1.6rem; color: var(--on-bar);
  background: var(--bar); border-bottom: 3px solid var(--c); }
.det-title { flex: 1; min-width: 0; }
.det-hd h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.det-hd small { display: block; margin-top: .2rem; font-size: .82rem; font-weight: 500; opacity: .78; letter-spacing: .02em; }
.det-x { all: unset; flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 8px; cursor: pointer; color: var(--on-bar); }
.det-x:hover { background: color-mix(in srgb, var(--on-bar) 16%, transparent); }
.det-x:focus-visible { outline: 2px solid var(--on-bar); }
.det-x svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Tabs bar */
.det-tabs { display: flex; gap: 1.5rem; overflow-x: auto; padding: 0 1.6rem; background: var(--sunk); border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.det-tabs button { all: unset; flex: none; padding: .8rem .25rem .7rem; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.det-tabs button:hover { color: var(--fg); }
.det-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.det-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
/* Panels */
.det-panels { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface); }
.det-panel { padding: 1.4rem 1.6rem 1.6rem; }
.det-panel-map { height: 100%; padding: 1.2rem 1.6rem 1.4rem; display: flex; flex-direction: column; }
/* Summary strip: 4 columns with dividers, big value + small unit */
.det-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.4rem; padding: 1rem 0;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px; }
.det-kpi { min-width: 0; padding: .1rem 1.25rem; border-left: 1px solid var(--rule); }
.det-kpi:first-child { border-left: 0; }
.det-kpi-label { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .5rem; }
.det-kpi-val { display: flex; align-items: baseline; gap: .35rem; min-width: 0; white-space: nowrap; }
.det-kpi-val b { font-size: 1.55rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.det-kpi-val small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.det-kpi.status b { color: var(--c); }
.det-dot { flex: none; align-self: center; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.det-kpi.lv-warn b { color: var(--warn); } .det-kpi.lv-high b { color: var(--slow); } .det-kpi.lv-down b { color: var(--down); }
/* Fields: label above a value box, 2 columns */
.det-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.2rem; margin: 0; }
/* Overview sections: Network · Location · Equipment */
.det-sec + .det-sec { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.det-sec-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 .8rem; }
.det-pair { min-width: 0; }
.det-pair.wide { grid-column: 1 / -1; }
.det-pair dt { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .35rem .1rem; }
.det-pair dd { margin: 0; min-height: 2.5rem; display: flex; align-items: center; padding: .45rem .85rem; font-size: .92rem; line-height: 1.4;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 6px; overflow-wrap: anywhere; }
.det-pair dd.mono { font-family: var(--mono); font-size: .88rem; }
.det-pair dd.empty { color: var(--muted); }
.det-pair dd.st-down { color: var(--down); font-weight: 600; }
.det-loading { color: var(--muted); }
/* Logs tab */
.det-kpi.txt .det-kpi-val b { font-size: 1.05rem; font-weight: 600; }
.det-empty { margin: 2rem 0; text-align: center; color: var(--muted); }
.det-note { margin: .8rem 0 0; font-size: .8rem; color: var(--muted); }
.det-logwrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; }
.det-log { width: 100%; border-collapse: collapse; font-size: .86rem; }
.det-log th { position: sticky; top: 0; text-align: left; padding: .6rem .8rem; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); background: var(--sunk); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.det-log td { padding: .6rem .8rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.det-log tr:last-child td { border-bottom: 0; }
.det-log tbody tr:hover td { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.det-log td.mono { font-family: var(--mono); font-size: .82rem; }
.det-log td.st-down { color: var(--down); font-weight: 600; }
.det-log tr.ongoing td { background: color-mix(in srgb, var(--down) 8%, transparent); }
.det-tag { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.det-tag.down { background: var(--down); } .det-tag.high { background: var(--slow); }
:root[data-ut="dark"] .det-tag { color: #10161e; }
@media (prefers-color-scheme: dark) { :root:not([data-ut="light"]):not([data-ut="color"]) .det-tag { color: #10161e; } }
/* Footer with icon buttons */
.det-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .85rem 1.6rem; background: var(--sunk); border-top: 1px solid var(--rule); }
.det-btn { min-height: 2.75rem; min-width: 8rem; padding: 0 1rem; gap: .45rem; font-size: .88rem; font-weight: 600; border-radius: 6px; }
.det-btn:not(.primary) { color: var(--accent); border-color: var(--line); }
.det-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.det-btn.primary { min-width: 7rem; }
/* Laptop / tablet */
@media (max-width: 1023px) {
  .det-hd { padding: 1.15rem 1.1rem 1.15rem 1.5rem; }
  .det-tabs { gap: 1.2rem; padding: 0 1.4rem; }
  .det-panel, .det-panel-map { padding: 1.3rem 1.4rem; }
  .det-kpi { padding: .2rem 1.1rem; }
  .det-kpi-val b { font-size: 1.4rem; }
  .det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-foot { padding: 1rem 1.4rem; }
}
/* Phone */
@media (max-width: 599px) {
  .dlg.det-modal { height: calc(100dvh - 1rem); }
  .det-hd { padding: 1rem .9rem 1rem 1.1rem; }
  .det-hd h2 { font-size: 1.15rem; }
  .det-tabs { gap: .4rem; padding: 0 .6rem; }
  .det-tabs button { font-size: .86rem; padding: .85rem .5rem .75rem; }
  .det-panel, .det-panel-map { padding: 1rem; }
  .det-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .4rem 0; row-gap: .2rem; }
  .det-kpi { padding: .7rem 1rem; border-left: 0; }
  .det-kpi:nth-child(even) { border-left: 1px solid var(--rule); }
  .det-kpi:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .det-kpi-val b { font-size: 1.25rem; }
  .det-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .det-foot { padding: .8rem 1rem; }
  .det-btn { flex: 1 1 auto; min-width: 0; }
}

/* ---------- Menu: "Network" dropdown ---------- */
.rail .nav-group { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .65rem; border-radius: 4px;
  font-size: .85rem; opacity: .75; cursor: pointer; white-space: nowrap; }
.rail .nav-group:hover { opacity: 1; background: rgb(255 255 255 / .07); }
.rail .nav-group:focus-visible { outline: 2px solid var(--on-bar); outline-offset: -2px; }
.rail .nav-group.on { opacity: 1; font-weight: 600; background: none; box-shadow: none; }
.rail .nav-group .chev { width: .85rem; height: .85rem; margin-left: auto; transition: transform .15s ease; }
.rail .nav-group[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.rail .nav-group[aria-expanded="false"] + .nav-sub { display: none; }
.nav-sub { display: grid; gap: 2px; }
.nav-sub .item { padding-left: 2.1rem; }
@media (min-width: 1024px) {
  /* Slim (unpinned) menu: always show Ping Monitoring and Map icons */
  .app.unpinned .rail:not(.rail-open) .nav-sub { display: grid !important; }
  .app.unpinned .rail:not(.rail-open) .nav-sub .item { padding-left: .65rem; }
  .app.unpinned .rail:not(.rail-open) .nav-group { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rail .nav-group .chev { transition: none; } }

/* ---------- Ping Monitoring: area (site) header rows ---------- */
tr.area td { background: var(--bar); color: var(--on-bar); padding: .45rem .75rem; font-size: .8rem; letter-spacing: .03em; border-bottom: 0; }
tr.area td b { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
tr.area .area-alarms.hot { color: #ff8a80; font-weight: 600; }
:root[data-ut="color"] tr.area td { background: var(--accent); }

/* ---------- Ping Monitoring: Locations panel (laptop and bigger) / dropdown (phone, tablet) ---------- */
.locations { display: none; align-content: start; gap: 1px; padding: .6rem .5rem; border-right: 1px solid var(--rule); background: var(--surface); overflow-y: auto; }
.loc-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .2rem .5rem .5rem; }
.loc-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.2rem; padding: .3rem .5rem; border-radius: 4px;
  font-size: .84rem; color: var(--fg); cursor: pointer; }
.loc-item:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.loc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.loc-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 600; color: var(--accent); }
.loc-item.lv0 { font-weight: 600; }
.loc-item.lv1 { padding-left: .3rem; font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; }
/* Site dropdown: arrow opens/closes the machine types */
.loc-area { display: flex; align-items: center; gap: 2px; }
.loc-area .loc-item { flex: 1; min-width: 0; }
.loc-toggle { all: unset; box-sizing: border-box; flex: none; width: 1.7rem; height: 2.2rem; display: grid; place-items: center; border-radius: 4px; cursor: pointer; color: var(--muted); }
.loc-toggle:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.loc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.loc-toggle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.loc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.loc-kids { display: grid; gap: 1px; }
@media (prefers-reduced-motion: reduce) { .loc-toggle svg { transition: none; } }
.loc-item.lv2 { padding-left: 1.9rem; }
.loc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status counts: green up, yellow warning, orange high ping, red down, grey paused */
.loc-badge { flex: none; display: inline-flex; gap: 3px; }
.loc-badge .lc { min-width: 1.35rem; padding: 0 .3rem; border-radius: 999px; text-align: center; font: 600 .68rem/1.35rem var(--mono); }
.loc-badge .lc.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, var(--surface)); }
.loc-badge .lc.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
.loc-badge .lc.high { color: #fff; background: var(--slow); }
.loc-badge .lc.down { color: #fff; background: var(--down); }
.loc-badge .lc.paused { color: var(--muted); background: var(--sunk); }
.loc-select { font: .88rem var(--sans); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: .45rem .6rem;
  min-height: 2.75rem; max-width: 100%; }
@media (max-width: 599px) { .loc-select { flex: 1 1 100%; } }
@media (min-width: 1024px) {
  .locations { display: grid; }
  .loc-select { display: none; }
  .live-body { grid-template-columns: 16.5rem minmax(0, 1fr); }
}
@media (min-width: 2560px) { .live-body { grid-template-columns: 18rem minmax(0, 1fr); } }

/* ---------- Toasts (top right, just under the header bar; above everything except the modal backdrop) ---------- */
.toasts { position: fixed; z-index: 60; right: 1rem; top: 4.2rem; display: grid; gap: .5rem; justify-items: end; align-content: start; pointer-events: none; max-width: calc(100vw - 2rem); }
.toast { --c: var(--up); pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: .65rem; min-width: 16rem; max-width: 26rem;
  padding: .7rem .95rem .7rem .8rem; border-radius: 10px; background: var(--surface); color: var(--fg); border: 1px solid var(--rule);
  border-left: 4px solid var(--c); box-shadow: 0 10px 28px rgb(0 0 0 / .22); font-size: .88rem; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
.toast.info { --c: var(--accent); } .toast.error { --c: var(--down); }
.toast-ico { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); }
.toast-ico svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.toast-msg { font-weight: 500; line-height: 1.35; }
.toast.out { animation: toast-out .22s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 599px) { .toasts { left: .75rem; right: .75rem; top: 6.2rem; justify-items: stretch; } .toast { min-width: 0; max-width: none; } }   /* phone header is 2 lines */
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } }

/* ---------- App dialog (confirm / message) ---------- */
.dlg { width: min(27rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--fg);
  box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.dlg::backdrop { background: rgb(8 16 30 / .55); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlg-in .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg-box { display: grid; justify-items: center; text-align: center; gap: .55rem; padding: 1.6rem 1.5rem 1.3rem; }
.dlg-ico { --c: var(--accent); width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); margin-bottom: .2rem; }
.dlg-ico.warn { --c: var(--slow); } .dlg-ico.error { --c: var(--down); }
.dlg-ico svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg-box h2 { font-size: 1.12rem; font-weight: 700; }
.dlg-box p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.dlg-box p strong { color: var(--fg); font-weight: 600; }
.dlg-actions { display: flex; gap: .6rem; width: 100%; margin-top: .9rem; }
.dlg-actions .btn { flex: 1; min-height: 2.9rem; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.dlg-actions .btn.warn { background: var(--slow); border-color: var(--slow); color: #fff; }
.dlg-actions .btn.warn:hover, .dlg-actions .btn.primary:hover { filter: brightness(1.08); }
@media (max-width: 599px) { .dlg-actions { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .dlg[open] { animation: none; } }

/* ---------- Management ---------- */
.mg { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
.mg-nav { display: none; align-content: start; gap: 1px; padding: .6rem .5rem; border-right: 1px solid var(--rule); overflow-y: auto; }
.mg-count { flex: none; min-width: 1.6rem; padding: 0 .4rem; border-radius: 999px; text-align: center; font: 600 .7rem/1.4rem var(--mono); color: var(--muted); background: var(--sunk); }
.mg-item.on .mg-count { color: #fff; background: var(--accent); }
.mg-main { min-width: 0; display: flex; flex-direction: column; }
.mg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
.mg-head h2 { font-size: 1.05rem; margin-right: auto; }
.mg-head .search { width: 14rem; max-width: 100%; }
.mg-head .btn.primary { min-height: 2.5rem; }
.mg-hint { margin: 0; padding: .5rem 1rem; font-size: .8rem; color: var(--muted); background: var(--sunk); border-bottom: 1px solid var(--rule); }
.mg-wrap { flex: 1; }
table.mgt { min-width: 52rem; }
table.mgt th.act, table.mgt td.act { text-align: right; white-space: nowrap; }
table.mgt td.act .btn + .btn { margin-left: .35rem; }
table.mgt tr.mg-row:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
/* Long values (e.g. SNMP interface pattern): one line, cut with … at a fixed width; full text on hover */
table.mgt td .mg-clip { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mgt td.mono .mg-clip { font-family: var(--mono); font-size: .82rem; }
table.mgt td.nw { white-space: nowrap; }
@media (max-width: 1365px) { table.mgt td .mg-clip { max-width: 13rem; } }
@media (max-width: 599px) { table.mgt td .mg-clip { max-width: 10rem; } }
@media (min-width: 2560px) { table.mgt td .mg-clip { max-width: 26rem; } }
.mg-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font: 600 .7rem/1.5 var(--sans); border: 1px solid currentColor; white-space: nowrap; }
.mg-pill.up { color: var(--up); } .mg-pill.off { color: var(--muted); } .mg-pill.warn { color: var(--warn); } .mg-pill.down { color: var(--down); }
.mg-pill.admin { color: var(--accent); } .mg-pill.viewer { color: var(--muted); }
.btn.del { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.btn.danger { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
.btn.danger:disabled { opacity: .45; }
.btn.warn { background: var(--slow); border-color: var(--slow); color: #fff; font-weight: 600; }

/* Management modal (add / edit / delete) */
.mg-modal { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); text-align: left; }
.mg-modal.wide { width: min(50rem, calc(100vw - 1.5rem)); }
.mg-modal[open] { display: flex; flex-direction: column; }
.mg-modal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--rule); }
.mg-modal-head .dlg-ico { width: 2.5rem; height: 2.5rem; margin: 0; flex: none; }
.mg-modal-head .dlg-ico svg { width: 1.25rem; height: 1.25rem; }
.mg-modal-head > div { flex: 1; min-width: 0; }
.mg-modal-head h2 { font-size: 1.1rem; font-weight: 700; }
.mg-modal-head small { color: var(--muted); font-size: .8rem; }
.mg-x { all: unset; flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 8px; cursor: pointer; color: var(--muted); }
.mg-x:hover { background: var(--sunk); color: var(--fg); }
.mg-x:focus-visible { outline: 2px solid var(--accent); }
.mg-x svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mg-modal-body { overflow-y: auto; padding: 0 1.2rem; }
.mg-text { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
.mg-choice { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid var(--rule); border-radius: 8px; }
.mg-choice b { display: block; font-size: .92rem; }
.mg-choice p { margin: .2rem 0 0; font-size: .84rem; color: var(--muted); }
.mg-choice .f-actions { position: static; padding-top: .6rem; justify-content: flex-start; background: none; }
.mg-choice.danger { border-color: var(--down); background: color-mix(in srgb, var(--down) 6%, var(--surface)); }
.mg-choice.danger p { color: var(--fg); }
.mg-choice.danger input { margin-top: .6rem; width: 100%; font: .9rem var(--mono); color: var(--fg); background: var(--surface); border: 1px solid var(--down); border-radius: 4px; padding: .5rem .6rem; min-height: 2.6rem; }
.mg-foot { border-top: 1px solid var(--rule); margin-top: 1rem; padding-bottom: 1rem !important; }
.mg-occ { flex-basis: 100%; margin-top: -.3rem; }
.mg-modal .form-error { margin: .8rem 0 0; }

.mg-form { display: grid; gap: .3rem; }
.mg-form .form-error { margin: .6rem 0 0; }
.f-group { border: 0; margin: 0; padding: .7rem 0 .2rem; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .6rem .8rem; }
.f-group legend { float: left; width: 100%; padding: 0; margin-bottom: .1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.f { flex: 1 1 100%; display: grid; gap: .25rem; min-width: 0; }
.f.half { flex: 1 1 calc(50% - .4rem); }
.mg-modal.wide .f-group { gap: .6rem 1rem; }
.f select:disabled { opacity: .6; cursor: not-allowed; }
.f label { font-size: .8rem; font-weight: 600; }
.f input:not([type=checkbox]), .f select, .f textarea { width: 100%; min-height: 2.6rem; font: .9rem var(--sans); color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: .45rem .6rem; }
.f textarea { resize: vertical; min-height: 4.5rem; }
.f .mono { font-family: var(--mono); }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.f.bad input:not([type=checkbox]), .f.bad select, .f.bad textarea, .f.bad .f-areas { border-color: var(--down); }
.f-err { color: var(--down); font-size: .78rem; font-weight: 600; }
.f-err:empty { display: none; }
.f-hint { color: var(--muted); font-size: .76rem; }
.f-check label { display: flex; align-items: center; gap: .5rem; font-weight: 500; min-height: 2.75rem; cursor: pointer; }
.f-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .1rem .6rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 4px; max-height: 12rem; overflow-y: auto; }
.f-areas label { display: flex; align-items: center; gap: .45rem; min-height: 2.4rem; font-weight: 500; cursor: pointer; }
.f-actions { position: sticky; bottom: 0; display: flex; gap: .6rem; justify-content: flex-end; padding: .8rem 0 .2rem; background: var(--surface); }
.f-actions .btn { min-height: 2.75rem; min-width: 7rem; }

@media (min-width: 1024px) {
  .mg { grid-template-columns: 14rem minmax(0, 1fr); }
  .mg-nav { display: grid; }
  .mg-select { display: none; }
}
@media (max-width: 1023px) { .mg-head h2 { display: none; } .mg-select { margin-right: auto; } }
@media (max-width: 599px) {
  .mg-head { padding: .6rem .75rem; }
  .mg-head .search { flex: 1 1 100%; width: auto; order: 3; }
  .f.half { flex-basis: 100%; }
}

/* ---------- Alarms page ---------- */
.al { background: var(--bg); gap: 1rem; padding: 1.1rem; }

/* KPI cards: tinted icon + label + number (Down / High ping pulse while above 0) */
.al-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.al-kpi { --c: var(--accent); display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); min-width: 0; }
.al-kpi.total { --c: var(--down); } .al-kpi.down { --c: var(--down); } .al-kpi.high { --c: var(--slow); }
.al-kpi.warn { --c: var(--warn); } .al-kpi.muted { --c: color-mix(in srgb, var(--down) 55%, var(--muted)); }
.al-kpi.total.zero { --c: var(--up); }
.al-kpi-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.al-kpi-ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-kpi > div { display: grid; min-width: 0; }
.al-kpi span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-kpi b { font: 700 1.6rem/1.1 var(--mono); color: var(--c); font-variant-numeric: tabular-nums; }
.al-kpi.zero:not(.total) .al-kpi-ico, .al-kpi.zero:not(.total) b { opacity: .45; }
.al-kpi.alert { border-color: color-mix(in srgb, var(--c) 45%, var(--rule)); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.al-kpi.alert .al-kpi-ico { color: #fff; background: var(--c); animation: sum-pulse 1.6s ease-out infinite; }

.al-gm { margin: 0; padding: .6rem 1rem; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.al-gm b { color: var(--down); font: 600 .75rem var(--mono); letter-spacing: .1em; margin-right: .3rem; }

/* Panels */
.al-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.al-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.al-panel-head h2 { font-size: 1rem; font-weight: 700; }
.al-badge { min-width: 1.7rem; padding: 0 .5rem; border-radius: 999px; text-align: center; font: 700 .75rem/1.6rem var(--mono); color: var(--muted); background: var(--sunk); }
.al-badge.hot { color: #fff; background: var(--down); } .al-badge.warn { color: #fff; background: var(--warn); }
.al-live { margin-left: auto; display: inline-flex; align-items: center; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.al-live b { font: 600 .78rem var(--mono); color: var(--fg); margin-left: .3rem; font-variant-numeric: tabular-nums; }
.al-range { margin-left: auto; }

/* Tables: severity stripe on the first cell, quiet headers, aligned numbers */
table.alt { min-width: 60rem; }
table.alt th { background: var(--sunk); font-size: .68rem; letter-spacing: .08em; }
:root[data-ut="color"] table.alt th { background: var(--sunk); }
table.alt td { padding: .6rem .8rem; }
table.alt th.num, table.alt td.num { text-align: right; }
table.alt td.act { text-align: right; }
table.alt tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sunk) 45%, var(--surface)); }
table.alt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
tr.al-row td:first-child { box-shadow: inset 4px 0 var(--c, var(--line)); }
tr.al-row.down { --c: var(--down); } tr.al-row.high { --c: var(--slow); } tr.al-row.warn { --c: var(--warn); }
tr.al-row.done td:first-child { box-shadow: inset 4px 0 color-mix(in srgb, var(--c) 45%, transparent); }
.al-sub { color: var(--muted); font-size: .8rem; }
.al-muted { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.al-na { color: var(--muted); }
.al-dur { font: 600 .84rem var(--mono); color: var(--c, var(--fg)); font-variant-numeric: tabular-nums; }
.al-dur.done { color: var(--fg); font-weight: 500; }

/* Empty state */
.al-empty { display: flex; align-items: center; gap: 1rem; padding: 1.6rem 1.2rem; }
.al-empty-ico { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--up); }
.al-empty-ico svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.al-empty b { display: block; font-size: 1.05rem; color: var(--up); }
.al-empty span { color: var(--muted); font-size: .88rem; }

@media (max-width: 1023px) { .al-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .al { padding: .6rem; gap: .7rem; }
  .al-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .al-kpi:first-child { grid-column: span 2; }
  .al-kpi { padding: .6rem .7rem; gap: .6rem; }
  .al-kpi-ico { width: 2.1rem; height: 2.1rem; }
  .al-live { margin-left: 0; flex-basis: 100%; }
  .al-range { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .al-kpi.alert .al-kpi-ico { animation: none; } }

/* ---------- Port Monitoring (uses the Alarms page cards, panels and tables) ---------- */
.pm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.pm-bar .search { margin-left: auto; min-width: 14rem; }
.pm-bar .seg button { min-height: 2.75rem; }
.pm-list { display: grid; gap: .7rem; }
.pm-mach { --c: var(--line); border-left: 4px solid var(--c); }
.pm-mach.lv-alarm { --c: var(--down); } .pm-mach.lv-warning { --c: var(--warn); } .pm-mach.lv-ok { --c: var(--up); }
.pm-sum { display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 1fr) auto minmax(7rem, auto); align-items: center;
  gap: .4rem 1rem; padding: .75rem 1rem; min-height: 2.75rem; cursor: pointer; list-style: none; }
.pm-sum::-webkit-details-marker { display: none; }
.pm-sum:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.pm-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pm-name { display: grid; min-width: 0; }
.pm-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tpl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pm-at { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-mach[open] .pm-sum { border-bottom: 1px solid var(--rule); }
.pm-body { padding: .2rem 0 .4rem; }
.pm-note { margin: .6rem 1rem; font-size: .85rem; color: var(--muted); }
.pm-note.bad { color: var(--down); }
.pm-none { margin: .8rem 1rem; }
.pm-table td.rm { min-width: 14rem; }
.pm-empty { display: grid; gap: .3rem; padding: 1.4rem 1.2rem; }
.pm-empty span { color: var(--muted); font-size: .9rem; }
#pm-events > .pm-none { padding: 0 0 .2rem; }
@media (max-width: 1023px) {
  .pm-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .pm-tpl { grid-column: 1; }
  .pm-pills { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .pm-at { grid-column: 2; grid-row: 2; }
}
@media (max-width: 599px) {
  .pm-bar .search { margin-left: 0; min-width: 0; flex: 1 1 100%; }
  .pm-bar .seg { flex: 1 1 100%; display: flex; overflow-x: auto; }
  .pm-sum { grid-template-columns: minmax(0, 1fr); padding: .7rem .8rem; }
  .pm-pills, .pm-at { grid-column: 1; grid-row: auto; justify-content: flex-start; text-align: left; }
}

/* ---------- Dashboard ---------- */
.dsh { background: var(--bg); gap: 1rem; padding: 1.1rem; }
.dsh-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .7rem 1rem; border-radius: 10px; font-size: .92rem;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--c, var(--up)); }
.dsh-status.good { --c: var(--up); } .dsh-status.bad { --c: var(--down); background: color-mix(in srgb, var(--down) 6%, var(--surface)); }
.dsh-status b { color: var(--c); }
.dsh-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); animation: sum-pulse 1.8s infinite; }
.dsh-ago { margin-left: auto; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Hero: uptime today + chart */
.dsh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--bar), color-mix(in srgb, var(--bar) 75%, var(--accent))); color: var(--on-bar); }
.dsh-hero-main h2 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.dsh-big { font: 700 clamp(2.6rem, 1.8rem + 3vw, 4rem)/1.05 var(--mono); margin: .35rem 0 .9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dsh-big.up { color: #5ee08f; } .dsh-big.ok { color: #b5e36b; } .dsh-big.warn { color: #ffd166; } .dsh-big.high { color: #ffa45c; } .dsh-big.down { color: #ff7b72; }
.dsh-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.dsh-hs { padding: .55rem .7rem; border-radius: 8px; background: rgb(255 255 255 / .08); display: grid; }
.dsh-hs span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.dsh-hs b { font: 700 1.25rem var(--mono); font-variant-numeric: tabular-nums; }
.dsh-hs small { font-size: .72rem; opacity: .75; }
.dsh-hs.up b { color: #5ee08f; } .dsh-hs.ok b { color: #b5e36b; } .dsh-hs.warn b { color: #ffd166; } .dsh-hs.high b { color: #ffa45c; } .dsh-hs.down b { color: #ff7b72; }
.dsh-chart { min-width: 0; padding: .7rem .8rem; border-radius: 10px; background: rgb(255 255 255 / .06); }
.dsh-chart h3 { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.dsh-chart h3 small { font-weight: 400; opacity: .7; margin-left: .3rem; }
.dsh-svg { width: 100%; height: auto; display: block; }
.dsh-grid-line { stroke: rgb(255 255 255 / .14); stroke-dasharray: 3 4; }
.dsh-bar.up { fill: #3fcf7a; } .dsh-bar.ok { fill: #9bd650; } .dsh-bar.warn { fill: #f5c044; } .dsh-bar.high { fill: #f58b3c; } .dsh-bar.down { fill: #ef5a52; }
.dsh-bar.none { fill: rgb(255 255 255 / .2); }
.dsh-bar-val { font: 600 12px var(--mono); fill: var(--on-bar); }
.dsh-bar-val.muted { fill: rgb(255 255 255 / .55); font-weight: 400; }
.dsh-bar-day { font: 500 12px var(--sans); fill: rgb(255 255 255 / .75); }

/* KPI tiles */
.dsh-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.dsh-kpi { --c: var(--accent); display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.dsh-kpi.up { --c: var(--up); } .dsh-kpi.down { --c: var(--down); } .dsh-kpi.warn { --c: var(--warn); } .dsh-kpi.high { --c: var(--slow); }
.dsh-kpi-ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.dsh-kpi-ico svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsh-kpi > div { display: grid; min-width: 0; }
.dsh-kpi span { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-kpi b { font: 700 1.45rem/1.15 var(--mono); color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsh-kpi small { font-size: .7rem; color: var(--muted); }
.dsh-kpi.zero .dsh-kpi-ico, .dsh-kpi.zero b { opacity: .45; }
.dsh-kpi.alert { border-color: color-mix(in srgb, var(--c) 45%, var(--rule)); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.dsh-kpi.alert .dsh-kpi-ico { color: #fff; background: var(--c); animation: sum-pulse 1.6s ease-out infinite; }

/* Cards */
.dsh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dsh-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dsh-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: .9rem 1rem 1rem; min-width: 0; }
.dsh-card h3 { font-size: .92rem; font-weight: 700; margin-bottom: .6rem; }
.dsh-card h3 small, .dsh-section small { font-weight: 400; color: var(--muted); font-size: .76rem; margin-left: .3rem; }
.dsh-section { font-size: 1rem; font-weight: 700; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dsh-empty { margin: .2rem 0; color: var(--muted); font-size: .85rem; }
.dsh-row { padding: .35rem 0; }
.dsh-row + .dsh-row { border-top: 1px dashed var(--rule); }
.dsh-row-top { display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.dsh-row-top b { font: 600 .84rem var(--mono); font-variant-numeric: tabular-nums; }
.dsh-row small { display: block; margin-top: .15rem; font-size: .72rem; color: var(--muted); }
.dsh-meter { height: .45rem; margin-top: .3rem; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.dsh-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.dsh-meter i.up, .dsh-row-top b.up { --m: var(--up); } .dsh-meter i.ok, .dsh-row-top b.ok { --m: var(--up); }
.dsh-meter i.warn, .dsh-row-top b.warn { --m: var(--warn); } .dsh-meter i.high, .dsh-row-top b.high { --m: var(--slow); }
.dsh-meter i.down, .dsh-row-top b.down { --m: var(--down); }
.dsh-meter i[class] { background: var(--m, var(--accent)); }
.dsh-row-top b[class]:not([class=""]) { color: var(--m, var(--fg)); }
.dsh-kvs { display: grid; gap: .1rem; }
.dsh-kv { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; font-size: .85rem; border-bottom: 1px dashed var(--rule); }
.dsh-kv:last-child { border-bottom: 0; }
.dsh-kv span { color: var(--muted); }
.dsh-kv b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dsh-kv b.up { color: var(--up); } .dsh-kv b.down { color: var(--down); } .dsh-kv b.warn { color: var(--warn); } .dsh-kv b.high { color: var(--slow); }
.dsh-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dsh-list li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto; align-items: baseline; gap: .55rem; padding: .38rem 0; font-size: .84rem; border-bottom: 1px dashed var(--rule); }
.dsh-list li:last-child { border-bottom: 0; }
.dsh-list time { color: var(--muted); font: .74rem var(--mono); white-space: nowrap; }
.ev-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c, var(--muted)); align-self: center; }
.ev.down { --c: var(--down); } .ev.high { --c: var(--slow); } .ev.up { --c: var(--up); } .ev.muted { --c: var(--muted); }
.ev.act { --c: var(--accent); } .ev.act.bad { --c: var(--down); }
.svcs li { grid-template-columns: .7rem minmax(0, 1fr) auto; }
.svc.up { --c: var(--up); } .svc.down { --c: var(--down); }
.svc b { font-size: .75rem; color: var(--c); }

@media (max-width: 1365px) { .dsh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dsh-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .dsh-hero { grid-template-columns: minmax(0, 1fr); }
  .dsh-grid, .dsh-sys { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .dsh { padding: .6rem; gap: .7rem; }
  .dsh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dsh-kpi { padding: .6rem .65rem; gap: .5rem; }
  .dsh-kpi-ico { width: 2rem; height: 2rem; }
  .dsh-hero { padding: .9rem; }
  .dsh-ago { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dsh-dot, .dsh-kpi.alert .dsh-kpi-ico { animation: none; } .dsh-meter i { transition: none; } }

/* ---------- Reports ---------- */
.rp { background: var(--bg); gap: .9rem; padding: 1.1rem; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.rp-kind { align-self: flex-end; }
.rp-kind button { padding: .45rem .9rem; }
.rp-f { display: grid; gap: .25rem; min-width: 0; }
.rp-f span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rp-f select, .rp-f input { font: .88rem var(--sans); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .45rem .55rem; min-height: 2.6rem; max-width: 100%; }
.rp-f.wide select { min-width: 22rem; }
.rp-actions { margin-left: auto; display: flex; gap: .5rem; }
.rp-actions .btn { min-height: 2.6rem; }
.rp-msg { margin: 0; padding: .6rem 1rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); color: var(--muted); font-size: .88rem; }
.rp-msg.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--rule)); }

/* The paper: fixed document colors in every theme */
.rp-paper { --ink: #1b2533; --sub: #5d6878; --rule2: #dfe4ea; --acc: #1f4e79; --g: #1d7a45; --ok: #5a9a2b; --y: #9a6408; --o: #b8510d; --r: #b42d26;
  align-self: center; width: 100%; max-width: 62rem; background: #fff; color: var(--ink); border-radius: 6px; box-shadow: 0 6px 28px rgb(0 0 0 / .14);
  padding: clamp(1.2rem, 3vw, 2.6rem); font-size: .9rem; }
.rp-paper:empty { display: none; }
.rp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: start; padding-bottom: 1rem; border-bottom: 3px solid var(--acc); }
.rp-brand { display: flex; gap: 1rem; align-items: center; }
.rp-brand img { width: 7.5rem; height: auto; }
.rp-brand small { color: var(--sub); font-size: .7rem; letter-spacing: .1em; }
.rp-brand h1 { font-size: 1.35rem; color: var(--acc); margin-top: .15rem; }
.rp-meta { display: grid; gap: .2rem; font-size: .8rem; }
.rp-meta div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; }
.rp-meta span { color: var(--sub); }
.rp-meta b { font-weight: 600; overflow-wrap: anywhere; }
.rp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0 .4rem; }
.rp-kpi { border: 1px solid var(--rule2); border-top: 3px solid var(--c, var(--acc)); border-radius: 6px; padding: .55rem .7rem; display: grid; }
.rp-kpi span { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); }
.rp-kpi b { font: 700 1.25rem var(--mono); color: var(--c, var(--ink)); font-variant-numeric: tabular-nums; }
.rp-kpi small { font-size: .7rem; color: var(--sub); }
.rp-kpi.up { --c: var(--g); } .rp-kpi.ok { --c: var(--ok); } .rp-kpi.warn { --c: var(--y); } .rp-kpi.high { --c: var(--o); } .rp-kpi.down { --c: var(--r); }
.rp-sec { margin-top: 1.4rem; }
.rp-sec h2 { font-size: .95rem; color: var(--acc); padding-bottom: .35rem; margin-bottom: .6rem; border-bottom: 1px solid var(--rule2); }
.rp-svg { width: 100%; height: auto; display: block; }
.rp-gl { stroke: var(--rule2); }
.rp-axis { font: 11px var(--sans); fill: var(--sub); }
.rp-val { font: 600 10.5px var(--mono); fill: var(--ink); }
.rp-bar.up { fill: #2e9b5c; } .rp-bar.ok { fill: #7cb342; } .rp-bar.warn { fill: #e0a526; } .rp-bar.high { fill: #e8772e; } .rp-bar.down { fill: #d0453d; } .rp-bar.none { fill: #cfd6de; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rp-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); background: #f3f5f8; padding: .45rem .55rem; border-bottom: 1px solid var(--rule2); white-space: nowrap; }
.rp-table td { padding: .42rem .55rem; border-bottom: 1px solid var(--rule2); vertical-align: top; }
.rp-table tbody tr:nth-child(even) td { background: #fafbfc; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-table .act { text-align: right; }
.rp-table .lv-up { color: var(--g); font-weight: 600; } .rp-table .lv-ok { color: var(--ok); font-weight: 600; } .rp-table .lv-warn { color: var(--y); font-weight: 600; }
.rp-table .lv-high { color: var(--o); font-weight: 600; } .rp-table .lv-down { color: var(--r); font-weight: 600; }
.rp-sort { all: unset; cursor: pointer; }
.rp-sort:focus-visible { outline: 2px solid var(--acc); }
.rp-tag { display: inline-block; padding: 0 .4rem; border-radius: 3px; font: 600 .68rem/1.6 var(--mono); color: #fff; }
.rp-tag.down { background: var(--r); } .rp-tag.high { background: var(--o); }
tr.rp-more { display: none; }
.rp-note, .rp-none { color: var(--sub); font-size: .8rem; margin: .4rem 0 0; }
.rp-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; font-size: .84rem; }
.rp-profile div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .5rem; padding: .28rem 0; border-bottom: 1px dashed var(--rule2); }
.rp-profile span { color: var(--sub); }
.rp-profile b { font-weight: 600; overflow-wrap: anywhere; }
.rp-foot { margin-top: 1.6rem; padding-top: .7rem; border-top: 1px solid var(--rule2); color: var(--sub); font-size: .74rem; }
.rp-foot p { margin: .2rem 0; }
.rp-paper .btn { color: var(--acc); background: #fff; border-color: #c7d0da; }
@media (max-width: 1023px) {
  .rp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-head { grid-template-columns: minmax(0, 1fr); }
  .rp-actions { margin-left: 0; }
  .rp-f.wide select { min-width: 0; width: 100%; }
}
@media (max-width: 599px) {
  .rp { padding: .5rem; }
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-profile { grid-template-columns: minmax(0, 1fr); }
  .rp-paper { padding: .9rem; font-size: .84rem; }
  .rp-paper .rp-sec { overflow-x: auto; }
  .rp-table { min-width: 34rem; }
  .rp-f, .rp-f.wide { flex: 1 1 100%; }
}

/* Export PDF: print only the paper, with the whole alarm log */
@media print {
  @page { size: A4; margin: 12mm; }
  body.printing-report { background: #fff !important; }
  body.printing-report * { visibility: hidden !important; }
  body.printing-report .rp-paper, body.printing-report .rp-paper * { visibility: visible !important; }
  body.printing-report .rp-paper { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; border-radius: 0; padding: 0; }
  body.printing-report .no-print { display: none !important; }
  body.printing-report tr.rp-more { display: table-row; }
  body.printing-report .rp-table tr, body.printing-report .rp-kpis, body.printing-report .rp-svg { break-inside: avoid; }
  body.printing-report .rp-sec h2 { break-after: avoid; }
  body.printing-report .rp-table thead { display: table-header-group; }
  body.printing-report .rp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.printing-report .rp-head { grid-template-columns: 1fr 1fr; }
  body.printing-report { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Map ---------- */
.mp { background: var(--bg); }
.mp-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--rule); }
.mp-check { display: flex; align-items: center; gap: .45rem; min-height: 2.6rem; font-size: .88rem; cursor: pointer; }
.mp-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--muted); }
.mp-lg { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.mp-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--c) 50%, transparent); }
.mp-dot.up, .mp-pin.up { --c: var(--up); } .mp-dot.warn, .mp-pin.warn { --c: var(--warn); } .mp-dot.high, .mp-pin.high { --c: var(--slow); }
.mp-dot.down, .mp-pin.down { --c: var(--down); } .mp-dot.paused, .mp-pin.paused { --c: #8a96a6; }
.mp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; }
.mp-map { min-height: 22rem; height: calc(100dvh - 9.5rem); background: var(--sunk); z-index: 0; }
.mp-side { border-left: 1px solid var(--rule); background: var(--surface); padding: .8rem; overflow-y: auto; max-height: calc(100dvh - 9.5rem); }
.mp-side h3 { font-size: .9rem; }
.mp-side-hint { margin: .3rem 0 .6rem; font-size: .78rem; color: var(--muted); }
.mp-nolist { list-style: none; margin: 0; padding: 0; display: grid; }
.mp-nolist li { display: grid; grid-template-columns: .9rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .32rem 0; font-size: .82rem; border-bottom: 1px dashed var(--rule); }
.mp-nolist small { color: var(--muted); font-size: .7rem; }

/* Pins: a colored dot with a white ring; DOWN pulses */
.mp-pin { border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
.mp-pin.down { animation: mp-pulse 1.4s ease-out infinite; }
/* Several machines at one spot: bigger pin with the count */
.mp-pin.multi { display: grid; place-items: center; font: 700 11px/1 var(--sans); color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .35); }
.mp-pin.multi.warn, .mp-pin.multi.paused { color: #1b2533; text-shadow: none; }
/* Shared-location box: roomy header with status counts, then a scrolling list */
.mp-group { gap: 0; font-size: .88rem; }
/* Header: title on its own line, then "IMUS · ● 1 Down · ● 15 Up" */
.mp-g-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .1rem 1.4rem .7rem 0; border-bottom: 1px solid var(--rule); }
.mp-g-head > b { flex-basis: 100%; font-size: 1.1rem; line-height: 1.3; }
.mp-g-area { color: var(--muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-right: .2rem; }
.mp-g-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mp-g-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600;
  background: var(--sunk); white-space: nowrap; }
.mp-g-chip.down { color: var(--down); } .mp-g-chip.high { color: var(--slow); } .mp-g-chip.warn { color: var(--warn); } .mp-g-chip.up { color: var(--up); } .mp-g-chip.paused { color: var(--muted); }
.mp-g-list { list-style: none; margin: .2rem 0 0; padding: 0 .4rem 0 0; max-height: min(28rem, 58vh); overflow-y: auto; display: grid; }
/* Row: 2 lines — dot · name · status · buttons, then type · IP · ms under the name */
.mp-g-row { display: grid; grid-template-columns: .8rem minmax(0, 1fr) auto auto; grid-template-areas: "dot name pill act" ". meta meta act";
  align-items: center; column-gap: .6rem; row-gap: .15rem; padding: .6rem 0; border-bottom: 1px dashed var(--rule); }
.mp-g-row:last-child { border-bottom: 0; }
.mp-g-dot { grid-area: dot; }
.mp-g-name { grid-area: name; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-g-pill { grid-area: pill; justify-self: end; }
.mp-g-pill i { min-width: 0 !important; }
.mp-g-meta { grid-area: meta; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-g-act { grid-area: act; display: flex; gap: .35rem; align-self: center; }
.mp-g-act .btn { min-height: 2.1rem; padding: .2rem .65rem; font-size: .8rem; }
/* Narrow phones: buttons go under the text */
@media (max-width: 480px) {
  .mp-g-row { grid-template-columns: .8rem minmax(0, 1fr) auto; grid-template-areas: "dot name pill" ". meta meta" ". act act"; }
  .mp-g-act { margin-top: .3rem; }
}
@keyframes mp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--down) 70%, transparent), 0 1px 4px rgb(0 0 0 / .45); }
  70% { box-shadow: 0 0 0 14px transparent, 0 1px 4px rgb(0 0 0 / .45); } 100% { box-shadow: 0 0 0 0 transparent, 0 1px 4px rgb(0 0 0 / .45); } }
@media (prefers-reduced-motion: reduce) { .mp-pin.down { animation: none; } }

/* Leaflet popup / tooltip in the app's theme */
.mp .leaflet-popup-content-wrapper, .mp .leaflet-popup-tip { background: var(--surface); color: var(--fg); }
.mp .leaflet-popup-content { margin: .7rem .8rem; font: .84rem/1.4 var(--sans); }
.mp .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.mp .leaflet-tooltip { font: 600 .78rem var(--sans); }
.mp-pop { display: grid; gap: .2rem; min-width: 13rem; }
.mp-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.mp-pop-head b { font-size: .95rem; }
.mp-pop .pill i { min-width: 0; }
.mp-pop:not(.mp-group) > div:not(.mp-pop-head):not(.mp-pop-act) { display: flex; justify-content: space-between; gap: .8rem; }   /* single machine: label left, value right */
.mp-pop span { color: var(--muted); }
.mp-pop-act { display: flex; gap: .4rem; margin-top: .5rem; }
.mp-pop-act .btn { flex: 1; min-height: 2.2rem; }
/* Map column of the machine details modal */
.det-map-sec { flex: 1; min-height: 0; display: flex; }
.det-map { flex: 1; min-height: 22rem; border-radius: 8px; border: 1px solid var(--rule); overflow: hidden; background: var(--sunk); z-index: 0; }
.det-map .leaflet-control-attribution { font-size: 10px; }
.det-nomap { margin: 0; padding: 1.2rem; color: var(--muted); font-size: .85rem; border: 1px dashed var(--line); border-radius: 8px; }
@media (max-width: 899px) { .det-map { min-height: 16rem; } }
@media (min-width: 2560px) { .det-map { min-height: 30rem; } }

@media (max-width: 1023px) {
  .mp-body { grid-template-columns: minmax(0, 1fr); }
  .mp-side { border-left: 0; border-top: 1px solid var(--rule); max-height: none; }
  .mp-map { height: 65dvh; }
  .mp-legend { margin-left: 0; flex-basis: 100%; }
}
@media (min-width: 2560px) { .mp-body { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* ---------- Docs ---------- */
.dc { background: var(--bg); }
.dc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
.dc-nav { display: grid; align-content: start; gap: .5rem; padding: .8rem .6rem; background: var(--surface); border-right: 1px solid var(--rule);
  position: sticky; top: 3.3rem; max-height: calc(100dvh - 3.3rem); overflow-y: auto; }
.dc-nav .search { width: 100%; }
.dc-select { display: none; }
.dc-group { display: grid; gap: 1px; margin-top: .4rem; }
.dc-item { text-decoration: none; }
.dc-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 600; color: var(--accent); }
.dc-results { display: grid; gap: .3rem; }
.dc-hit { display: grid; gap: .1rem; padding: .5rem .55rem; border-radius: 6px; text-decoration: none; color: var(--fg); border: 1px solid var(--rule); }
.dc-hit:hover { border-color: var(--accent); }
.dc-hit b { font-size: .86rem; }
.dc-hit small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.dc-hit span { font-size: .78rem; color: var(--muted); }
.dc-none { color: var(--muted); font-size: .85rem; }
mark { background: color-mix(in srgb, #ffd166 70%, transparent); color: inherit; border-radius: 2px; padding: 0 .1em; }

/* Reading layout */
.dc-page { min-width: 0; max-width: 56rem; padding: 1.4rem clamp(1rem, 3vw, 2.6rem) 3rem; line-height: 1.6; font-size: .95rem; }
.dc-crumb { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; }
.dc-page h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .8rem; color: var(--fg); }
.dc-page h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.dc-page h4 { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.dc-page p { margin: .55rem 0; }
.dc-page ul, .dc-page ol { margin: .45rem 0; padding-left: 1.4rem; }
.dc-page li { margin: .2rem 0; }
.dc-page li > ul, .dc-page li > ol { margin: .15rem 0; }
.dc-page code { font: .86em var(--mono); background: var(--sunk); border: 1px solid var(--rule); border-radius: 4px; padding: .05em .35em; overflow-wrap: anywhere; }
.dc-page pre { margin: .7rem 0; padding: .8rem 1rem; background: var(--bar); color: var(--on-bar); border-radius: 8px; overflow-x: auto; }
.dc-page pre code { background: none; border: 0; padding: 0; color: inherit; font-size: .84rem; overflow-wrap: normal; white-space: pre; }
.dc-page blockquote { margin: .7rem 0; padding: .3rem 1rem; border-left: 4px solid var(--accent); background: var(--surface); }
.dc-page hr { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0; }
.dc-page a { color: var(--accent); }
.dc-page .md-link { font-style: italic; }
.md-table { overflow-x: auto; margin: .7rem 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.md-table table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.md-table th { text-align: left; background: var(--sunk); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.md-table th, .md-table td { padding: .45rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.md-table tr:last-child td { border-bottom: 0; }
.dc-src { margin-top: 2.5rem; padding-top: .7rem; border-top: 1px solid var(--rule); color: var(--muted); font: .75rem var(--mono); }

@media (max-width: 1023px) {
  .dc-body { grid-template-columns: minmax(0, 1fr); }
  .dc-nav { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .dc-select { display: block; width: 100%; }
  #dc-toc .dc-group { display: none; }
}
@media (min-width: 2560px) { .dc-page { max-width: 70rem; } }


/* ---------- Management › SNMP Profiles form (snmp.js) ---------- */
.sn-comm { flex: 1 1 100%; }
.sn-comm.bad { color: var(--warn); font-weight: 600; }
.sn-laser { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .6rem .8rem; }
.sn-laser[hidden] { display: none; }
.sn-lim { flex: 1 1 100%; display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .8rem; align-items: end;
  padding: .3rem 0; border-top: 1px dashed var(--rule); }
.sn-lim:first-of-type { border-top: 0; }
.sn-lim-name { display: grid; align-self: center; }
.sn-results .table-wrap { margin: .4rem 0 .6rem; max-height: 22rem; overflow: auto; }
table.sn-t { min-width: 30rem; }
@media (max-width: 599px) {
  .sn-lim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sn-lim-name { grid-column: 1 / -1; }
}
/* Test, change history */
.sn-test { border-top: 1px dashed var(--rule); padding-top: .5rem; }
.sn-test summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; color: var(--accent); }
.sn-test[open] { display: grid; gap: .5rem; }
.sn-results:empty { display: none; }
.sn-worst { margin: .2rem 0; font-weight: 600; }
.sn-history { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.sn-history summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; }
.sn-hist { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .85rem; }
/* Machines using this profile */
.sn-machines { gap: .45rem; }
.sn-mtools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sn-mtools input[type=search] { flex: 1 1 12rem; min-width: 0; }
.sn-mtools select { flex: 0 1 12rem; min-width: 0; }
.sn-mcount { font-size: .82rem; font-weight: 600; color: var(--accent); }
.sn-mlist { max-height: 18rem; overflow: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--sunk); padding: .3rem .5rem; }
.sn-mgroup { position: sticky; top: -.3rem; padding: .4rem .2rem .2rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); background: var(--sunk); }
.sn-mitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .6rem; min-height: 2.75rem; padding: 0 .3rem;
  border-radius: 4px; cursor: pointer; }
.sn-mitem:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sn-mname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-mip { font-size: .8rem; color: var(--muted); }
.sn-mnote { grid-column: 2 / -1; margin-top: -.5rem; padding-bottom: .3rem; font-size: .75rem; color: var(--muted); }
.sn-mnote.moving { color: var(--warn); font-weight: 600; }
@media (max-width: 599px) {
  .sn-mtools select, .sn-mtools .btn { flex: 1 1 45%; }
  .sn-mlist { max-height: 14rem; }
}

/* ---------- Port Monitoring › chassis panel (device front view; the same colours in every theme) ---------- */
.ch { margin: .7rem 1rem .4rem; }
.ch-frame { position: relative; display: grid; gap: .35rem; padding: 1rem 1.2rem; border-radius: 10px;
  background: linear-gradient(180deg, #e9ecef, #cfd4da); border: 2px solid #9aa1a9; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgb(0 0 0 / .25);
  max-width: 46rem; overflow-x: auto; }
.ch-frame::before, .ch-frame::after { content: ''; position: absolute; top: .35rem; width: .6rem; height: .6rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8d949c); }
.ch-frame::before { left: .35rem; } .ch-frame::after { right: .35rem; }
.ch-row { display: grid; gap: .35rem; }
.ch-row.n1 { grid-template-columns: minmax(0, 1fr); }
.ch-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ch-board { position: relative; min-height: 3.2rem; padding: .35rem .6rem .45rem 1.9rem; border-radius: 3px;
  background: #8fdc96; border: 1px solid #4f9c56; color: #12301a; display: grid; align-content: start; gap: .3rem; }
.ch-board.empty { background: #c3c7cc; border-color: #9aa1a9; }
.ch-slot { position: absolute; left: .35rem; top: 50%; transform: translateY(-50%); font: 700 .72rem var(--mono); color: #3b4248; }
.ch-head { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 0; }
.ch-head b { font: 600 .82rem var(--mono); letter-spacing: .25em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-led { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: #5d6670; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35); }
.ch-led.on { background: radial-gradient(circle at 35% 35%, #c8ffcf, #22b33a); }
.ch-ports { display: flex; flex-wrap: wrap; gap: .25rem; }
.ch-port { width: 1.05rem; height: 1.05rem; padding: 0; border: 1px solid rgb(0 0 0 / .45); border-radius: 2px; cursor: pointer;
  display: inline-block; background: #5d6670; }
.ch-port.up { background: #2fbf4a; } .ch-port.down { background: #4b5158; }
.ch-port.warn { background: #f0b429; } .ch-port.alarm { background: #e5484d; }
.ch-port:hover, .ch-port:focus-visible { outline: 2px solid #1f5fe0; outline-offset: 1px; }
.ch-cap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .45rem; font-size: .78rem; color: var(--muted); }
.ch-key { display: inline-flex; align-items: center; gap: .3rem; }
.ch-key .ch-port { width: .8rem; height: .8rem; cursor: default; margin-left: .35rem; }
.ch-info { margin: 0; font-family: var(--mono); color: var(--fg); overflow-wrap: anywhere; }
@media (pointer: coarse) { .ch-ports .ch-port { width: 1.8rem; height: 1.8rem; } }
@media (max-width: 599px) {
  .ch { margin: .6rem .6rem .3rem; }
  .ch-frame { padding: .8rem .6rem; }
  .ch-row.n3, .ch-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 2560px) { .ch-frame { max-width: 60rem; } }

/* Port Monitoring › Interfaces table (like "display interface brief") */
.pm-if { margin: .3rem 0 .6rem; }
table.pm-iftable { min-width: 40rem; }
.pm-iftable td.pm-st.up { color: var(--up); font-weight: 600; }
.pm-iftable td.pm-st.dn { color: var(--muted); }
.pm-iftable td.lv-warn { color: var(--warn); font-weight: 700; }
.pm-iftable td.lv-alarm { color: var(--down); font-weight: 700; }
.pm-new { color: var(--down); font-weight: 600; }

/* Front panel › switch (e.g. S6730-H48X6C): dark 1U body, light port face, SFP+ / QSFP28 cages in two rows */
.ch-frame.sw { max-width: none; width: max-content; min-width: 0; padding: .55rem .7rem .7rem; border-color: #111;
  background: linear-gradient(180deg, #3a3d42, #1d1f22 30%, #2a2c30); box-shadow: inset 0 2px 0 #c0392b, 0 1px 3px rgb(0 0 0 / .35); }
.ch-frame.sw::before, .ch-frame.sw::after { top: 50%; transform: translateY(-50%); }
.ch.sw-wrap { overflow-x: auto; max-width: 100%; }
.sw-face { display: flex; gap: .55rem; padding: .45rem .5rem; border-radius: 3px; background: linear-gradient(180deg, #e4e6e8, #c9cdd1);
  border: 1px solid #8d949c; }
.sw-block { display: grid; gap: .18rem; padding: .15rem; border-radius: 2px; background: #b9bec3; }
.sw-row { display: flex; gap: .18rem; }
.ch-port.cage { width: 1.25rem; height: .95rem; border-radius: 1px; border: 2px solid #4b5158; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.ch-port.cage.big { width: 2.1rem; height: 1.25rem; }
.ch-port.none { background: #d5d8dc; border-color: #9aa1a9; }
.ch-port.cage.none { background: repeating-linear-gradient(45deg, #d5d8dc 0 3px, #c3c7cc 3px 6px); }
.sw-brand { display: block; margin-top: .35rem; font: 600 .68rem var(--mono); letter-spacing: .12em; color: #c9cdd1; text-align: right; }
@media (pointer: coarse) { .ch-port.cage { width: 1.6rem; height: 1.25rem; } .ch-port.cage.big { width: 2.4rem; height: 1.5rem; } }

/* ---------- Fiber route window (fiber.js) ---------- */
.dlg.fb-modal { width: min(72rem, calc(100vw - 2rem)); max-width: none; height: min(46rem, calc(100dvh - 2rem)); border-radius: 10px;
  text-align: left; overflow: hidden; display: none; }
.dlg.fb-modal[open] { display: flex; flex-direction: column; }
.fb-hd { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--bar); color: var(--on-bar);
  border-bottom: 4px solid var(--muted); }
.fb-modal[data-status="up"] .fb-hd { border-bottom-color: var(--up); }
.fb-modal[data-status="warning"] .fb-hd { border-bottom-color: var(--warn); }
.fb-modal[data-status="down"] .fb-hd { border-bottom-color: var(--down); }
.fb-title { flex: 1; min-width: 0; display: grid; }
.fb-title h2 { font-size: 1.05rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-title small { opacity: .85; font-size: .8rem; }
.fb-status { display: grid; justify-items: end; gap: .15rem; font-size: .75rem; }
.fb-status small { opacity: .9; max-width: 18rem; text-align: right; }
.fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rule); background: var(--sunk); }
.fb-tools:empty, .fb-tools[hidden] { display: none; }
.fb-tools input, .fb-tools select { min-height: 2.75rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--fg); font: .88rem var(--sans); }
.fb-tools input[type=text] { flex: 1 1 10rem; min-width: 8rem; }
.fb-tools .btn { min-height: 2.75rem; }
.fb-hint { font-size: .8rem; color: var(--muted); }
.fb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; }
.fb-map { min-height: 18rem; }
.fb-side { overflow-y: auto; padding: .7rem .8rem; border-left: 1px solid var(--rule); background: var(--surface); }
.fb-side h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .4rem 0 .3rem; }
.fb-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .2rem; }
.fb-item { width: 100%; min-height: 2.75rem; display: grid; text-align: left; gap: .05rem; padding: .35rem .5rem; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--surface); color: var(--fg); cursor: pointer; }
.fb-item:hover, .fb-item:focus-visible { border-color: var(--accent); }
.fb-item small { color: var(--muted); font-size: .76rem; }
.fb-key { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .6rem; font-size: .74rem; color: var(--muted); }
.fb-key span { display: inline-flex; align-items: center; gap: .3rem; }
.fb-sw { width: 1.2rem; height: .3rem; border-radius: 2px; display: inline-block; }
.fb-sw.up { background: #22a83b; } .fb-sw.warning { background: #e0a100; } .fb-sw.down { background: #e5484d; } .fb-sw.unknown { background: #8a929a; }
/* Lines: a fiber cut / down port is red, dashed and moving */
.leaflet-overlay-pane path.fb-line.down { animation: fb-dash 1s linear infinite; }
@keyframes fb-dash { to { stroke-dashoffset: -18; } }
/* Points: splitter = diamond, NAP box = square, closure = circle; border in the port's colour */
.fb-pt { background: #fff; border: 3px solid #8a929a; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.fb-pt.splitter { transform: rotate(45deg); border-radius: 2px; }
.fb-pt.nap { border-radius: 3px; }
.fb-pt.closure { border-radius: 50%; }
.fb-pt.up { border-color: #22a83b; } .fb-pt.warning { border-color: #e0a100; } .fb-pt.down { border-color: #e5484d; background: #ffe3e3; }
.fb-pop { min-width: 14rem; }
/* Port Monitoring: GPON ports open their route */
.ch-port.pon { cursor: pointer; }
.pm-fiber { border: 0; background: none; padding: .2rem 0; min-height: 2.2rem; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.pm-fiber:hover b, .pm-fiber:focus-visible b { color: var(--accent); text-decoration: underline; }
.pm-fiber-ico { color: var(--accent); font-size: .76rem; }
.mp-fiber-f select:disabled { opacity: .55; }
@media (max-width: 899px) {
  .fb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(16rem, 1fr) auto; }
  .fb-side { border-left: 0; border-top: 1px solid var(--rule); max-height: 12rem; }
}
@media (max-width: 599px) {
  .dlg.fb-modal { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); }
  .fb-status small { display: none; }
}
@media (min-width: 2560px) { .dlg.fb-modal { width: min(96rem, calc(100vw - 4rem)); height: min(62rem, calc(100dvh - 4rem)); } .fb-body { grid-template-columns: minmax(0, 1fr) 22rem; } }
@media (prefers-reduced-motion: reduce) { .leaflet-overlay-pane path.fb-line.down { animation: none; } }

/* Alarms page: Global mute (moved here from Ping Monitoring, 2026-10-15) */
.al-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.al-top-hint { margin: 0; font-size: .82rem; color: var(--muted); flex: 1 1 18rem; }
.al-top .gm { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.75rem; padding: .35rem 1.1rem; }
@media (max-width: 599px) { .al-top .gm { flex: 1 1 100%; } }