/* ===========================================================================
   SYZE ENVIRO — CEMS platform design system
   ---------------------------------------------------------------------------
   One file, two themes. Every colour is a token; nothing downstream hardcodes
   a hex. Dark is the default because these screens live in control rooms and
   on wall displays, where a light background is fatiguing and washes out on a
   projector.

   The categorical series and status colours are a validated palette: both
   modes pass colourblind separation, the normal-vision floor, and 3:1
   contrast against their own surface. Status colours are reserved — they
   never double as a chart series — and are always paired with a word or icon
   so meaning never rests on colour alone.
   =========================================================================== */

:root {
    /* ---- Surfaces (dark, default) ---- */
    --bg:            #0e1116;   /* app background, behind everything */
    --surface-1:     #161b22;   /* cards, panels */
    --surface-2:     #1c232c;   /* raised: hovered rows, popovers, inputs */
    --surface-3:     #232c37;   /* highest: active nav, selected chips */
    --sidebar:       #0b0e13;

    /* ---- Ink ---- */
    --text-1:        #e9eef5;   /* primary */
    --text-2:        #a8b3c1;   /* secondary */
    --text-3:        #6e7c8c;   /* muted: axis labels, captions */

    /* ---- Lines ---- */
    --border:        #232c37;
    --border-strong: #313d4c;
    --grid:          #1e2630;   /* chart gridlines */

    /* ---- Brand ---- */
    --brand:         #29a3dc;   /* SYZE cyan, from the logo */
    --brand-deep:    #14304a;
    --brand-ink:     #7fd0f5;
    /* A selection highlight (the picked map marker, an active filter chip)
       reuses the brand colour by default, so it moves with an accent choice
       below rather than needing its own set of five overrides. */
    --accent:        var(--brand);

    /* ---- Categorical series: fixed order, never cycled ---- */
    --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
    --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

    /* ---- Status: reserved, always with a label ---- */
    --ok:       #0ca30c;
    --warn:     #fab219;
    --major:    #ec835a;
    --critical: #d03b3b;
    --idle:     #6e7c8c;

    --ok-bg:       rgba(12,163,12,.14);
    --warn-bg:     rgba(250,178,25,.14);
    --major-bg:    rgba(236,131,90,.14);
    --critical-bg: rgba(208,59,59,.16);
    --idle-bg:     rgba(110,124,140,.14);

    --radius:    12px;
    --radius-sm: 8px;
    --radius-xs: 5px;

    --shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --shadow-2: 0 4px 16px rgba(0,0,0,.4);
    --shadow-3: 0 12px 40px rgba(0,0,0,.5);

    --sidebar-w: 248px;
    --topbar-h:  60px;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    color-scheme: dark;
}

/* ---- Light theme: a selected set of steps, not an inversion ---- */
:root[data-theme="light"] {
    --bg:            #f4f6f9;
    --surface-1:     #ffffff;
    --surface-2:     #f7f9fb;
    --surface-3:     #eef2f7;
    --sidebar:       #10161f;   /* sidebar stays dark in both themes */

    --text-1:        #10161f;
    --text-2:        #4a5666;
    --text-3:        #78859a;

    --border:        #e2e8f0;
    --border-strong: #cbd5e1;
    --grid:          #edf1f6;

    --brand:         #1789bd;
    --brand-deep:    #e3f3fb;
    --brand-ink:     #0d5f85;
    --accent:        var(--brand);

    --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
    --s5: #e87ba4;  --s6: #008300;  --s7: #4a3aa7;  --s8: #e34948;

    --shadow-1: 0 1px 2px rgba(16,22,31,.06);
    --shadow-2: 0 4px 14px rgba(16,22,31,.08);
    --shadow-3: 0 12px 32px rgba(16,22,31,.12);

    color-scheme: light;
}

/* ---- Accent colour: an optional swap of --brand/--brand-deep/--brand-ink,
   independent of light/dark. Cyan (above) stays the default when no
   data-accent is set - these five are chosen to keep the same brightness
   and role as the SYZE cyan they replace, so nothing else in the sheet
   needs to know an accent was picked. ---- */
:root[data-accent="violet"] { --brand: #8b7ce6; --brand-deep: #241d47; --brand-ink: #c3b8f5; }
:root[data-accent="emerald"] { --brand: #22b783; --brand-deep: #0f3327; --brand-ink: #7fe8bf; }
:root[data-accent="amber"] { --brand: #e0a530; --brand-deep: #3a2c0e; --brand-ink: #f5cf7f; }
:root[data-accent="rose"] { --brand: #e0608a; --brand-deep: #3a1524; --brand-ink: #f5a8c2; }

:root[data-theme="light"][data-accent="violet"] { --brand: #6d55c9; --brand-deep: #ede9fb; --brand-ink: #4a3a99; }
:root[data-theme="light"][data-accent="emerald"] { --brand: #17915f; --brand-deep: #e2f7ee; --brand-ink: #0d6b45; }
:root[data-theme="light"][data-accent="amber"] { --brand: #b3791a; --brand-deep: #fbf0dc; --brand-ink: #7a5209; }
:root[data-theme="light"][data-accent="rose"] { --brand: #c93368; --brand-deep: #fbe4ec; --brand-ink: #931b48; }

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

code, pre, .mono { font-family: var(--mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* =========================================================================
   Layout shell
   ========================================================================= */

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

.sidebar-brand {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand img { width: 100%; max-width: 168px; display: block; }
.sidebar-brand .site {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #e9eef5;
    line-height: 1.3;
}
.sidebar-brand .meta { font-size: 11px; color: #6e7c8c; margin-top: 2px; }

.nav { padding: 10px 10px 20px; flex: 1; overflow-y: auto; }
.nav-section {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5a6675;
    padding: 16px 10px 6px;
}
.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    color: #a8b3c1;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background .12s, color .12s;
}
.nav a:hover { background: rgba(255,255,255,.05); color: #e9eef5; text-decoration: none; }
.nav a.active {
    background: var(--brand-deep);
    color: #cdeaf9;
    box-shadow: inset 2px 0 0 var(--brand);
}
.nav a .ico { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }
.nav a .badge-count {
    margin-left: auto;
    background: var(--critical);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}

.sidebar-foot {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 12px;
    color: #6e7c8c;
}
.sidebar-foot .who { color: #d3dbe4; font-weight: 600; word-break: break-all; margin-bottom: 4px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar h1 { font-size: 16px; }
.topbar .crumb { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.topbar .spacer { margin-left: auto; }

.content { padding: 22px; flex: 1; }

@media (max-width: 980px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; }
    .nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
    .nav-section, .sidebar-foot { display: none; }
    .content { padding: 14px; }
}

/* =========================================================================
   Cards
   ========================================================================= */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { font-size: 13.5px; }
.card-body { padding: 16px; }
.card-tight .card-body { padding: 12px; }

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* =========================================================================
   Grid
   ========================================================================= */

.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 1200px) { .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* =========================================================================
   KPI tiles
   ========================================================================= */

.kpi {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
    position: relative;
    overflow: hidden;
}
.kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--idle);
}
.kpi.is-ok::before       { background: var(--ok); }
.kpi.is-warn::before     { background: var(--warn); }
.kpi.is-critical::before { background: var(--critical); }
.kpi.is-brand::before    { background: var(--brand); }

.kpi .label { font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.kpi .value {
    font-size: 29px;
    font-weight: 650;
    line-height: 1.1;
    margin-top: 5px;
    letter-spacing: -.02em;
}
.kpi .sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* =========================================================================
   Parameter card with radial gauge
   ========================================================================= */

.param-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    transition: border-color .15s, transform .15s;
}
.param-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.param-card.breach { border-color: var(--critical); background: linear-gradient(180deg, var(--critical-bg), transparent 60%); }
.param-card.stale  { opacity: .55; }

.param-card .pname {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.gauge { width: 100%; max-width: 132px; margin: 6px auto 2px; display: block; }
.gauge .track { stroke: var(--grid); }
.gauge .fill  { transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1), stroke .3s; }
.gauge .gval  { font-size: 21px; font-weight: 650; fill: var(--text-1); }
.gauge .gunit { font-size: 9.5px; fill: var(--text-3); }
.param-card .limit { font-size: 11px; color: var(--text-3); }

/* =========================================================================
   Pills / badges — colour is never the only signal
   ========================================================================= */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2.5px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }

.pill-ok       { color: #4ade4a; background: var(--ok-bg);       border-color: rgba(12,163,12,.3); }
.pill-ok .dot       { background: var(--ok); }
.pill-warn     { color: #fbc94f; background: var(--warn-bg);     border-color: rgba(250,178,25,.3); }
.pill-warn .dot     { background: var(--warn); }
.pill-major    { color: #f0a183; background: var(--major-bg);    border-color: rgba(236,131,90,.3); }
.pill-major .dot    { background: var(--major); }
.pill-critical { color: #f08585; background: var(--critical-bg); border-color: rgba(208,59,59,.35); }
.pill-critical .dot { background: var(--critical); }
.pill-idle     { color: var(--text-2); background: var(--idle-bg); border-color: var(--border-strong); }
.pill-idle .dot     { background: var(--idle); }
.pill-brand    { color: var(--brand-ink); background: var(--brand-deep); border-color: rgba(41,163,220,.3); }
.pill-brand .dot    { background: var(--brand); }

:root[data-theme="light"] .pill-ok       { color: #056605; }
:root[data-theme="light"] .pill-warn     { color: #7a5600; }
:root[data-theme="light"] .pill-major    { color: #8a3f1c; }
:root[data-theme="light"] .pill-critical { color: #9c1f1f; }

/* A live pulse for "receiving data" */
.pulse { position: relative; }
.pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--ok);
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(.7); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pulse::after { animation: none; opacity: 0; }
    .gauge .fill { transition: none; }
}

/* =========================================================================
   Tables
   ========================================================================= */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface-1);
    position: sticky;
    top: 0;
    z-index: 1;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.row-critical td { background: var(--critical-bg); }
.tbl-empty { padding: 34px 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* =========================================================================
   Forms
   ========================================================================= */

.field { margin-bottom: 13px; }
.field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 5px;
}
.field .hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

.input, .select, .textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 11px;
    transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(41,163,220,.16);
}
.input::placeholder { color: var(--text-3); }
/* An id box that inherits shows what it will inherit as its placeholder, so a
   placeholder here is information rather than a hint - it needs to read as a
   real value that happens to be greyed. */
.input.mono::placeholder { color: var(--text-3); font-family: var(--mono); }
/* Nothing to inherit and nothing typed: this one WILL strand its reading. */
.input-warn, .input-warn:hover { border-color: var(--warn); }
.input-warn:focus { box-shadow: 0 0 0 3px rgba(224,163,45,.18); border-color: var(--warn); }
.textarea { resize: vertical; min-height: 76px; font-family: var(--mono); font-size: 12.5px; }
.select { appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236e7c8c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-1);
    cursor: pointer;
    transition: background .12s, border-color .12s, opacity .12s;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #04222f; font-weight: 600; }
/* filter, not a hardcoded lighter hex - so hover stays correct under every
   accent colour rather than only the cyan default. */
.btn-primary:hover { filter: brightness(1.15); }

/* ---- Accent colour picker: a handful of swatches next to the theme toggle ---- */
.accent-picker {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
    display: none; gap: 6px; padding: 8px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
}
.accent-picker.open { display: flex; }
.accent-dot {
    width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.accent-dot[data-accent="cyan"]    { background: #29a3dc; }
.accent-dot[data-accent="violet"]  { background: #8b7ce6; }
.accent-dot[data-accent="emerald"] { background: #22b783; }
.accent-dot[data-accent="amber"]   { background: #e0a530; }
.accent-dot[data-accent="rose"]    { background: #e0608a; }
.accent-dot.active { border-color: var(--text-1); }
.btn-danger { background: transparent; border-color: rgba(208,59,59,.5); color: #f08585; }
.btn-danger:hover { background: var(--critical-bg); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-icon { padding: 7px; }

/* =========================================================================
   Time-range segmented control
   ========================================================================= */

.segmented {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}
.segmented button {
    font-family: inherit;
    font-size: 12px;
    font-weight: 550;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.segmented button:hover { color: var(--text-1); }
.segmented button.active { background: var(--brand-deep); color: var(--brand-ink); }

/* =========================================================================
   Alarms
   ========================================================================= */

.alarm {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.alarm:last-child { border-bottom: 0; }
.alarm.unack { background: linear-gradient(90deg, var(--critical-bg), transparent 70%); }
.alarm .sev { width: 3px; border-radius: 2px; align-self: stretch; flex: 0 0 3px; }
.alarm .sev-warn { background: var(--warn); }
.alarm .sev-critical { background: var(--critical); }
.alarm .sev-major { background: var(--major); }
.alarm .body { flex: 1; min-width: 0; }
.alarm .title { font-size: 13.5px; font-weight: 600; }
.alarm .detail { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.alarm .time { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.alarm .acts { display: flex; gap: 6px; align-items: center; }

/* =========================================================================
   Misc
   ========================================================================= */

.muted { color: var(--text-3); }
.small { font-size: 12px; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:22px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:22px}
.flex{display:flex}.items-center{align-items:center}.gap-1{gap:5px}.gap-2{gap:9px}.gap-3{gap:14px}
.ml-auto{margin-left:auto}.text-right{text-align:right}.w-full{width:100%}
.hidden{display:none !important}

.code-block {
    background: #0a0d12;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: #c9d4e0;
    overflow-x: auto;
    max-height: 480px;
}
.code-block .k { color: #7fd0f5; }
.code-block .s { color: #9ede9e; }
.code-block .c { color: #5a6675; font-style: italic; }

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 500px at 50% -12%, rgba(41,163,220,.14), transparent 62%),
        var(--bg);
    padding: 22px;
}
.login-card { width: 100%; max-width: 392px; }
.login-card .brand { text-align: center; margin-bottom: 24px; }
.login-card .brand img { width: 205px; }

.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 11px 15px;
    font-size: 13px;
    box-shadow: var(--shadow-3);
    animation: slidein .22s ease-out;
    max-width: 340px;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--critical); }
@keyframes slidein { from { transform: translateX(16px); opacity: 0; } }

/* =========================================================================
   Tabs, tree, modal, drawer, chips — added for the full application shell
   ========================================================================= */

.tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--border);
    margin-bottom: 18px; overflow-x: auto;
}
.tabs a, .tabs button {
    appearance: none; background: none; border: 0; cursor: pointer;
    padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--text-2); border-bottom: 2px solid transparent;
    white-space: nowrap; margin-bottom: -1px;
}
.tabs a:hover, .tabs button:hover { color: var(--text-1); text-decoration: none; }
.tabs a.active, .tabs button.active { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* ---- Asset tree: industry > station > device > parameter ---- */
.tree { font-size: 13px; }
.tree-node { border-bottom: 1px solid var(--border); }
.tree-node:last-child { border-bottom: 0; }
.tree-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
}
.tree-row:hover { background: var(--surface-2); }
.tree-row .caret {
    width: 14px; flex: 0 0 14px; color: var(--text-3);
    transition: transform .15s ease; font-size: 10px;
}
.tree-row.open .caret { transform: rotate(90deg); }
.tree-row .tname { font-weight: 600; }
.tree-row .tmeta { font-size: 11.5px; color: var(--text-3); }
.tree-children { padding-left: 22px; border-left: 1px solid var(--border); margin-left: 20px; }
.tree-children[hidden] { display: none; }
.tree-leaf {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.tree-leaf:last-child { border-bottom: 0; }

/* ---- Modal ---- */
.modal-host {
    position: fixed; inset: 0; z-index: 100; display: none;
    align-items: flex-start; justify-content: center;
    background: rgba(4,7,11,.62); padding: 6vh 16px 16px;
    backdrop-filter: blur(2px); overflow-y: auto;
}
.modal-host.open { display: flex; }
.modal {
    width: 100%; max-width: 560px; background: var(--surface-1);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-3); animation: popin .16s ease-out;
}
.modal.wide { max-width: 880px; }
.modal-head {
    padding: 15px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.modal-head h3 { font-size: 14.5px; }
.modal-body { padding: 18px; }
.modal-foot {
    padding: 13px 18px; border-top: 1px solid var(--border);
    display: flex; gap: 9px; justify-content: flex-end; background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}
@keyframes popin { from { transform: translateY(-8px); opacity: 0; } }

/* ---- Chips / meta rows ---- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-2);
}
.chip.mono { font-family: var(--mono); font-size: 11px; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 13px; }
.meta-grid .k { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.meta-grid .v { font-size: 13.5px; margin-top: 2px; word-break: break-word; }

/* ---- Empty state ---- */
.empty { text-align: center; padding: 46px 20px; color: var(--text-3); }
.empty h3 { color: var(--text-2); font-size: 14px; margin-bottom: 5px; }
.empty p { margin: 0 auto; max-width: 420px; font-size: 12.5px; line-height: 1.6; }
.empty .btn { margin-top: 16px; }

/* ---- Chart frame ---- */
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.tall { height: 420px; }
.chart-wrap.short { height: 190px; }

/* ---- Key reveal ---- */
.secret {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 11px; word-break: break-all;
}
.secret .val { flex: 1; min-width: 0; }
.secret.blurred .val { filter: blur(5px); user-select: none; }

.banner {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--surface-2);
    font-size: 12.5px; color: var(--text-2); margin-bottom: 16px;
}
.banner.warn { border-color: rgba(250,178,25,.4); background: var(--warn-bg); }
.banner.crit { border-color: rgba(208,59,59,.4); background: var(--critical-bg); }
.banner.info { border-color: rgba(41,163,220,.35); background: var(--brand-deep); }
.banner strong { color: var(--text-1); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { display: none; }
.switch .track {
    width: 38px; height: 21px; border-radius: 999px; background: var(--surface-3);
    border: 1px solid var(--border-strong); position: relative; transition: background .15s;
}
.switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 15px; height: 15px; border-radius: 50%; background: var(--text-2);
    transition: transform .15s, background .15s;
}
.switch input:checked + .track { background: var(--brand); border-color: var(--brand); }
.switch input:checked + .track::after { transform: translateX(17px); background: #fff; }
.switch input:disabled + .track { opacity: .45; cursor: not-allowed; }

.split { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 16px; align-items: start; }

@media (max-width: 1100px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; height: 100%; }
    .sidebar.open { transform: none; }
    .g-4, .g-3, .g-2 { grid-template-columns: 1fr; }
    .content { padding: 14px; }
}

/* A table that becomes one block per row on a phone - used where each row
   carries its own controls (Postings), so nothing ends up off-screen. */
@media (max-width: 640px) {
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
  .tbl-stack tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
  .tbl-stack td { border-bottom: 0; padding: 4px 4px; text-align: left !important; white-space: normal !important; }
  .tbl-stack td .input { max-width: none !important; flex: 1; }
}

/* Phones: the top bar keeps everything on one line - the title shortens,
   the industry picker narrows, the live pill keeps only its dot. */
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .spacer { display: none; }
  .topbar-title { min-width: 0; flex: 1 1 auto; }
  .topbar-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .crumb { display: none; }
  .topbar-industry { flex: 0 1 112px; min-width: 0; max-width: 112px !important; }
  #live-indicator { font-size: 0; gap: 0; padding: 7px; }
  #theme-toggle, #accent-btn { padding-left: 8px; padding-right: 8px; }
}