/* Onyx Voice - shared design system (admin console + user portal).
   Default "Slate Ops": muted slate/charcoal surfaces for long monitoring shifts, a calm steel-blue accent for controls,
   and neon emerald / amber / coral reserved for status (healthy / degraded / failed). Inter for UI, JetBrains Mono for data.
   Presets on <html data-preset="...">: ops (default), obsidian (the :root values), swiss, soc, daylight.
   Layout rule: content never scrolls inside boxes; everything wraps and the page grows. */

@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

[hidden] { display: none !important; }

:root {
    --bg-base: #090A0F;
    --bg-surface: #11131A;
    --bg-elevated: #171A24;
    --bg-input: #090A0F;
    --bg-band: rgba(0, 0, 0, 0.18);
    --bg-well: rgba(0, 0, 0, 0.25);
    --bg-hover: rgba(255, 255, 255, 0.035);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
    --text-muted: #64748B;
    --accent-primary: #7C5CFF;
    --accent-ink: #FFFFFF;
    --accent-glow: rgba(124, 92, 255, 0.18);
    --accent-tint: rgba(124, 92, 255, 0.15);
    --accent-line: rgba(124, 92, 255, 0.40);
    --ok: #34D399;    --ok-bg: rgba(16, 185, 129, 0.10);  --ok-line: rgba(16, 185, 129, 0.25);
    --warn: #FBBF24;  --warn-bg: rgba(245, 158, 11, 0.10); --warn-line: rgba(245, 158, 11, 0.25);
    --bad: #FB7185;   --bad-bg: rgba(244, 63, 94, 0.10);   --bad-line: rgba(244, 63, 94, 0.25);
    --info: #A5B4FC;  --info-bg: rgba(99, 102, 241, 0.10); --info-line: rgba(99, 102, 241, 0.22);
    --sky: #38BDF8; --teal: #2DD4BF; --rose: #FB7185; --amber: #FBBF24; --indigo: #818CF8; --emerald: #34D399;
    --cell-py: 0.75rem;
    --cell-px: 1rem;
    --card-pad: 1.25rem;
    --radius-ui: 0.5rem;
    --highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    --shadow-float: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --header-h: 56px;
    color-scheme: dark;

    /* Aliases used by component styles */
    --bg-canvas: var(--bg-base);
    --border: var(--border-subtle);
    --text: var(--text-primary);
    --text-2: var(--text-secondary);
    --text-3: var(--text-muted);
    --accent: var(--accent-primary);
    --accent-soft: var(--accent-tint);
    --ok-soft: var(--ok-bg);
    --warn-soft: var(--warn-bg);
    --bad-soft: var(--bad-bg);
    --info-soft: var(--info-bg);
    --radius: var(--radius-ui);
    --radius-sm: calc(var(--radius-ui) * 0.8);
    --shadow: var(--highlight), 0 0 0 1px var(--border-subtle);
}

/* Preset 2: Swiss Precision - high-contrast architectural slate */
:root[data-preset="swiss"] {
    --bg-base: #0D1017;
    --bg-surface: #131822;
    --bg-elevated: #1A2130;
    --bg-input: #0D1017;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.26);
    --text-primary: #FFFFFF;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --accent-primary: #6366F1;
    --accent-glow: rgba(99, 102, 241, 0.22);
    --accent-tint: rgba(99, 102, 241, 0.18);
    --accent-line: rgba(99, 102, 241, 0.45);
    --radius-ui: 0.125rem;
}

/* Preset 3: Tactical SOC - high-density operator mode */
:root[data-preset="soc"] {
    --bg-base: #05070B;
    --bg-surface: #0A0E15;
    --bg-elevated: #0F1622;
    --bg-input: #05070B;
    --bg-hover: rgba(16, 185, 129, 0.06);
    --border-subtle: rgba(148, 163, 184, 0.12);
    --border-strong: rgba(16, 185, 129, 0.32);
    --text-primary: #E2E8F0;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --accent-primary: #10B981;
    --accent-ink: #04130D;
    --accent-glow: rgba(16, 185, 129, 0.18);
    --accent-tint: rgba(16, 185, 129, 0.14);
    --accent-line: rgba(16, 185, 129, 0.40);
    --cell-py: 0.42rem;
    --cell-px: 0.75rem;
    --card-pad: 0.875rem;
    --radius-ui: 0.25rem;
}

/* Preset 4: Daylight - light surfaces for long reading sessions */
:root[data-preset="daylight"] {
    --bg-base: #F3F4F7;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FAFAFC;
    --bg-input: #FFFFFF;
    --bg-band: #F6F7F9;
    --bg-well: #F6F7FA;
    --bg-hover: rgba(15, 23, 42, 0.04);
    --border-subtle: #E4E7EC;
    --border-strong: #CDD2DA;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #6B7280;
    --accent-primary: #6D4AFF;
    --accent-glow: rgba(109, 74, 255, 0.16);
    --accent-tint: rgba(109, 74, 255, 0.10);
    --accent-line: rgba(109, 74, 255, 0.35);
    --ok: #047857;   --ok-bg: rgba(16, 185, 129, 0.10);
    --warn: #B45309; --warn-bg: rgba(245, 158, 11, 0.12);
    --bad: #BE123C;  --bad-bg: rgba(244, 63, 94, 0.09);
    --info: #4338CA; --info-bg: rgba(99, 102, 241, 0.09);
    --sky: #0369A1; --teal: #0F766E; --rose: #BE123C; --amber: #B45309; --indigo: #4338CA; --emerald: #047857;
    --highlight: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-float: 0 12px 30px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px var(--border-subtle);
    color-scheme: light;
}

/* Preset 0 (default): Slate Ops - real-time operations grid. Status colours are the only saturated ones. */
:root[data-preset="ops"] {
    --bg-base: #0D1015;
    --bg-surface: #141920;
    --bg-elevated: #1A2029;
    --bg-input: #0D1015;
    --bg-band: #11161C;
    --bg-well: #10141A;
    --bg-hover: rgba(148, 163, 184, 0.06);
    --border-subtle: rgba(148, 163, 184, 0.11);
    --border-strong: rgba(148, 163, 184, 0.24);
    --text-primary: #E5E9EF;
    --text-secondary: #9AA4B1;
    --text-muted: #687383;
    --accent-primary: #7EA6E8;
    --accent-ink: #0A1220;
    --accent-glow: rgba(126, 166, 232, 0.16);
    --accent-tint: rgba(126, 166, 232, 0.12);
    --accent-line: rgba(126, 166, 232, 0.38);
    --ok: #2BE4A0;    --ok-bg: rgba(43, 228, 160, 0.10);  --ok-line: rgba(43, 228, 160, 0.30);
    --warn: #FFB547;  --warn-bg: rgba(255, 181, 71, 0.11); --warn-line: rgba(255, 181, 71, 0.32);
    --bad: #FF6B6B;   --bad-bg: rgba(255, 107, 107, 0.11); --bad-line: rgba(255, 107, 107, 0.34);
    --info: #8DB4F5;  --info-bg: rgba(126, 166, 232, 0.10); --info-line: rgba(126, 166, 232, 0.28);
    --sky: #7EC8F2; --teal: #5FD4C4; --rose: #FF8A8A; --amber: #FFB547; --indigo: #9DA8F0; --emerald: #2BE4A0;
    --cell-py: 0.45rem;
    --cell-px: 0.875rem;
    --card-pad: 1rem;
    --radius-ui: 0.375rem;
    --highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.025);
    --shadow-float: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.65);
}
:root[data-preset="ops"] { scrollbar-color: #2A323D var(--bg-base); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scrollbar-color: #262B3C var(--bg-base); scrollbar-width: thin; }
:root[data-preset="daylight"] { scrollbar-color: #C8CDD6 var(--bg-base); }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font: 13px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}
::selection { background: var(--accent-glow); color: var(--text-primary); }

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.95em; }
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
h1 { font-size: 18px; letter-spacing: -0.02em; }
h2 { font-size: 14px; }
h3 { font-size: 13px; }
p { margin: 0; }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-muted); }
.small { font-size: 12px; }
.label, .eyebrow { font: 500 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

svg.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.dot.pulse { animation: pulse-slow 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.accent { background: var(--accent-primary); }

/* ---------- app frame: full-width header, sidebar + main below ---------- */

.app { min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
    height: var(--header-h); position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px; padding: 0 20px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.app-header .spacer { flex: 1; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.brand:hover { text-decoration: none; }
.emblem {
    width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex: none;
    background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.emblem svg { width: 20px; height: 20px; color: var(--accent-primary); }
.brand-name { display: flex; align-items: center; gap: 8px; }
.brand-name b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.ver-pill { font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
    background: var(--bg-hover); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-subtle); white-space: nowrap; }
.host-line { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--text-secondary); white-space: nowrap; }
.host-line .sep { color: var(--text-muted); opacity: 0.6; }
.host-line .note { color: var(--text-muted); }

.header-search { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.header-search .icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-muted); pointer-events: none; }
.header-search input[type] { padding: 6px 58px 6px 30px; font: 12px var(--mono); background: var(--bg-input); }
.app-header select.org-pick { width: auto; max-width: 220px; flex-shrink: 0; padding: 5px 28px 5px 10px; font-size: 12px; }
.header-search kbd { position: absolute; right: 8px; font: 10px var(--mono); color: var(--text-muted); padding: 1px 5px; border-radius: 4px;
    background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-subtle); pointer-events: none; }

/* Segmented control (presets, ranges) */
.seg { display: inline-flex; padding: 2px; border-radius: var(--radius-ui); background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.seg button { border: 0; background: transparent; color: var(--text-secondary); font: 500 11px var(--font); padding: 4px 10px; border-radius: calc(var(--radius-ui) * 0.8); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--text-primary); }
.seg button.active { background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg.mono button { font-family: var(--mono); }

.header-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-ui); font: 12px var(--mono);
    background: var(--bg-elevated); color: var(--text-secondary); box-shadow: var(--shadow-float); text-decoration: none; white-space: nowrap; }
.header-pill:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--border-strong); }
.header-pill b { color: var(--text-primary); font-weight: 600; }
.header-pill .warn { color: var(--warn); font-size: 10px; }

.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-chip .who b { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.user-chip .who span { font: 10.5px var(--mono); color: var(--text-muted); white-space: nowrap; }

.menu-btn { display: none; }

.app-body { flex: 1; display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; }

.sidebar {
    position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h));
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
    background: var(--bg-surface); border-right: 1px solid var(--border-subtle);
}
/* A sidebar taller than the window scrolls with the page instead of sticking (no inner scroll box). */
.sidebar.tall { position: static; }
.sidebar .side-top { padding: 12px; display: flex; flex-direction: column; gap: 22px; }
.nav { display: flex; flex-direction: column; gap: 20px; }
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-caption { display: block; width: 100%; border: 0; background: none; text-align: left; cursor: default;
    padding: 0 12px 6px; font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
/* Every menu section opens and collapses from its caption and stays that way (watchSidebar in onyx.js). */
.sidebar.collapsible .nav-caption { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-ui); }
.sidebar.collapsible .nav-caption:hover { color: var(--text-primary); background: var(--bg-hover); }
.sidebar.collapsible .nav-caption::after { content: '▾'; font-size: 11px; letter-spacing: 0; }
.sidebar.collapsible .nav-section.folded .nav-caption::after { content: '▸'; }
.nav-section.folded > a { display: none; }
.sidebar.collapsible .nav { gap: 8px; }
.nav a, .nav button.nav-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: var(--radius-ui); border: 0; background: transparent; cursor: pointer;
    font: 500 12px var(--font); color: var(--text-secondary); text-decoration: none; text-align: left;
    border-left: 2px solid transparent; transition: background-color .12s ease, color .12s ease;
}
.nav a:hover, .nav button.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav a .lbl, .nav button.nav-item .lbl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav a .lbl span, .nav button.nav-item .lbl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.active { background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 100%); border-left-color: var(--accent-primary);
    color: var(--text-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.nav-badge { font: 500 10px var(--mono); padding: 2px 6px; border-radius: 4px; color: var(--text-secondary);
    background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-subtle); flex: none; }
.nav-badge.plain { background: none; box-shadow: none; color: var(--text-muted); padding: 0; }
.nav-badge.ok { color: var(--ok); background: var(--ok-bg); box-shadow: none; }
.nav-badge.warn { color: var(--warn); background: var(--warn-bg); box-shadow: none; }
.nav-badge.accent { color: var(--accent-ink); background: var(--accent-primary); box-shadow: 0 0 12px var(--accent-glow); }
/* Icon colours per nav item */
.ic-accent { color: var(--accent-primary); }
.ic-amber { color: var(--amber); }
.ic-indigo { color: var(--indigo); }
.ic-emerald { color: var(--emerald); }
.ic-sky { color: var(--sky); }
.ic-rose { color: var(--rose); }
.ic-teal { color: var(--teal); }
.ic-muted { color: var(--text-muted); }

.side-box { padding: 12px; border-radius: var(--radius-ui); background: var(--bg-elevated); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 9px; }
.side-box .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 10px var(--mono); color: var(--text-secondary); }
.side-box .row .k { text-transform: uppercase; letter-spacing: 0.1em; }
.side-box .val { font: 12px var(--mono); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot { padding: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 7px; font: 11px var(--mono); color: var(--text-secondary); }
.side-foot .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot .row b { color: var(--text-primary); font-weight: 500; }
.side-foot .row.dim { font-size: 10px; color: var(--text-muted); }
.side-foot a { color: inherit; text-decoration: none; } .side-foot a:hover { text-decoration: underline; }
.side-foot a.dim-link { font-size: 10px; color: var(--text-muted); } .side-foot a.t-accent { color: var(--accent-primary); }
.side-foot .links { display: flex; gap: 4px; flex-wrap: wrap; }
.side-foot .preset-seg { display: none; flex-wrap: wrap; }

.bar { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
:root[data-preset="daylight"] .bar { background: #E7E9EE; }
.bar.thin { height: 4px; }
.bar > i { display: block; height: 100%; background: var(--accent-primary); border-radius: inherit; }
.bar > i.ok { background: #10B981; }
.bar > i.warn { background: #F59E0B; }
.bar > i.bad { background: #EF4444; }
.meter { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
:root[data-preset="daylight"] .meter { background: #E7E9EE; }
.meter > i { display: block; height: 100%; background: var(--accent-primary); border-radius: inherit; }

.main { min-width: 0; }
.content { padding: 24px; display: flex; flex-direction: column; gap: 22px; max-width: 1440px; width: 100%; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 18px; }
.page-head p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); max-width: 760px; }
.page-head h1 { font-size: 20px; }

/* ---------- surfaces ---------- */

.card { background: var(--bg-surface); border-radius: var(--radius-ui); box-shadow: var(--highlight), 0 0 0 1px var(--border-subtle);
    padding: var(--card-pad); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* clip, not hidden: hidden would make the card a scroll container and stop sticky table headers. */
.card.flush { padding: 0; gap: 0; overflow: clip; }
.card.flush > .card-head { padding: var(--card-pad); border-bottom: 1px solid var(--border-subtle); }
.card.flush > .card-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 14px; }
.card.flush > .card-foot { padding: 12px var(--card-pad); border-top: 1px solid var(--border-subtle); background: var(--bg-band); display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 12px var(--mono); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head p { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin-top: 2px; }
.card-head a, .link-more { font: 500 12.5px var(--font); }
.elevated { background: var(--bg-elevated); border-radius: var(--radius-ui); box-shadow: var(--shadow-float); }
.well { background: var(--bg-well); border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--border-subtle); padding: 12px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.split-3 { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.stack.tight { gap: 4px; }
ol.plain-list.numbered { list-style: decimal; padding-left: 22px; }
ol.plain-list.numbered li { display: list-item; }

/* Service health cards */
.svc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(max(230px, calc((100% - 48px) / 4)), 1fr)); }
.svc { display: flex; flex-direction: column; gap: 12px; }
.svc .svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.svc .svc-name { display: flex; align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--text-primary); }
.svc .svc-role { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.svc .svc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font: 11px var(--mono); }
.svc .svc-meta span { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
.svc .svc-meta div { color: var(--text-primary); overflow-wrap: anywhere; }

/* KPI strip */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi { padding: 12px; border-radius: var(--radius-ui); background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.kpi .k { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.kpi .v { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kpi .v b { font: 600 18px var(--mono); }
.kpi .v span { font: 11px var(--mono); opacity: 0.85; }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-bad { color: var(--bad); } .t-accent { color: var(--accent-primary); } .t-info { color: var(--info); } .t-sky { color: var(--sky); }

/* Chart */
.chart { position: relative; width: 100%; user-select: none; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart .tip { position: absolute; top: 12px; pointer-events: none; z-index: 5; padding: 8px 12px; font: 11px var(--mono); min-width: 170px;
    background: var(--bg-elevated); border-radius: var(--radius-ui); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 3px; }
.chart .tip .h { color: var(--text-primary); font-weight: 600; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; margin-bottom: 2px; }
.chart .tip .r { display: flex; justify-content: space-between; gap: 16px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font: 12px var(--mono); color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Org / count stats (compact cards with an icon) */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(max(190px, calc((100% - 42px) / 4)), 1fr)); }
.stat { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px !important; }
a.stat { color: inherit; text-decoration: none; transition: box-shadow .12s ease; }
a.stat:hover { text-decoration: none; box-shadow: var(--highlight), 0 0 0 1px var(--accent-line); }
.stat .n { font: 600 20px/1.1 var(--mono); letter-spacing: -0.02em; color: var(--text-primary); }
.stat .l { color: var(--text-secondary); font-size: 11.5px; margin-top: 3px; }
.stat-icon { width: 36px; height: 36px; border-radius: var(--radius-ui); display: grid; place-items: center; flex: none; }
.stat-icon .icon { width: 18px; height: 18px; }
.tone-accent { background: var(--accent-tint); color: var(--accent-primary); }
.tone-info { background: var(--info-bg); color: var(--info); }
.tone-ok { background: var(--ok-bg); color: var(--ok); }
.tone-bad { background: var(--bad-bg); color: var(--bad); }
.tone-amber { background: var(--warn-bg); color: var(--warn); }
.tone-violet { background: var(--accent-tint); color: var(--accent-primary); }
.tone-teal { background: rgba(45, 212, 191, 0.10); color: var(--teal); }
.tone-sky { background: rgba(56, 189, 248, 0.10); color: var(--sky); }
.tone-slate { background: var(--bg-hover); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.mini-stats .n { font: 600 18px var(--mono); color: var(--text-primary); }
.mini-stats .l { color: var(--text-secondary); font: 12px var(--font); }

/* Domain / item tiles */
.tiles { display: flex; flex-direction: column; gap: 12px; }
.tiles.wrap { flex-direction: row; flex-wrap: wrap; }
.tiles.wrap > .tile { flex: 1 1 240px; }
.tile { padding: 12px; border-radius: var(--radius-ui); background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle);
    display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition: box-shadow .12s ease; }
a.tile:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--border-strong); }
.tile .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tile .name { font: 600 12px var(--mono); color: var(--text-primary); }
.tile .sub { font: 11px var(--mono); color: var(--text-secondary); }

/* Activity feed */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.feed li:first-child { border-top: 0; padding-top: 0; }
.feed-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.45; font-size: 12.5px; color: var(--text-secondary); }
.feed-text b, .feed-target { color: var(--text-primary); font-weight: 600; }
.feed-text .when { font: 10.5px var(--mono); color: var(--text-muted); }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plain-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.plain-list li:first-child { border-top: 0; }
.plain-list li .icon { color: var(--text-muted); }

.kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 8px 18px; margin: 0; }
.kv > dt { color: var(--text-muted); font: 500 12.5px var(--font); padding-top: 1px; }
.kv > dd { margin: 0; min-width: 0; }

/* ---------- controls ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 6px 12px; border-radius: var(--radius-ui); border: 0; cursor: pointer;
    font: 500 12.5px/1.35 var(--font); color: var(--text-secondary); background: transparent;
    box-shadow: inset 0 0 0 1px var(--border-subtle); white-space: nowrap; text-decoration: none;
    transition: background-color .12s ease, box-shadow .12s ease, color .12s ease, filter .12s ease;
}
.btn:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn .icon { width: 14px; height: 14px; }
.btn.primary { background: var(--accent-primary); color: var(--accent-ink); font-family: var(--font); font-weight: 500;
    box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn.primary:hover { filter: brightness(1.1); background: var(--accent-primary); color: var(--accent-ink); }
.btn.ghost { box-shadow: none; }
.btn.small { padding: 4px 9px; font-size: 11px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn.danger.armed { background: #EF4444; color: #fff; box-shadow: 0 0 16px rgba(239, 68, 68, 0.3); }
.btn.tint-ok { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.btn.tint-warn { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.btn.tint-info { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.btn.tint-bad { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.btn.tint-accent { color: var(--accent-primary); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
.btn.tint-ok:hover, .btn.tint-warn:hover, .btn.tint-info:hover, .btn.tint-bad:hover, .btn.tint-accent:hover { filter: brightness(1.15); }
.btn.icon-btn { padding: 0; width: 32px; height: 32px; box-shadow: none; color: var(--text-secondary); }
.btn.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn.icon-btn.on { color: var(--accent-primary); background: var(--accent-tint); }
.btn.icon-btn.danger:hover { color: var(--bad); background: var(--bad-bg); }
.btn.icon-btn .icon { width: 17px; height: 17px; }
.btn-group { display: inline-flex; border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.btn-group > .btn { box-shadow: none; border-radius: 0; }
.btn-group > .btn + .btn { box-shadow: -1px 0 0 0 var(--border-subtle); }
.btn-group > .btn:first-child { border-radius: var(--radius-ui) 0 0 var(--radius-ui); }
.btn-group > .btn:last-child { border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.toolbar-sep { width: 1px; align-self: stretch; background: var(--border-subtle); margin: 4px 4px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row > select { width: auto; }

label.field, div.field { display: flex; flex-direction: column; gap: 6px; font: 500 12.5px var(--font); color: var(--text-secondary); }
.field .hint, .hint { font: 12px/1.45 var(--font); color: var(--text-muted); }
.field .hint b, .hint b { color: var(--text-secondary); font-weight: 500; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-primary); }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
    font: 13px/1.4 var(--font); color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); padding: 7px 11px; width: 100%; min-width: 0;
    transition: border-color .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { field-sizing: content; min-height: 90px; resize: none; overflow: hidden; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-primary); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.mono-input, input.mono { font-family: var(--mono) !important; font-size: 12px !important; }

.form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.form .wide { grid-column: 1 / -1; }
.form.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 820px; }
@media (max-width: 700px) { .form.cols-2 { grid-template-columns: 1fr; } }
.form.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; max-width: 960px; }
@media (max-width: 700px) { .form.cols-3 { grid-template-columns: 1fr; } }
/* A card holding several captioned tables (an import's department). */
.dept-body > h3.table-cap { padding: 14px var(--card-pad) 6px; border-top: 1px solid var(--border-subtle); }
.dept-body > table.data { margin: 0; width: 100%; }
.card.left-out > .card-body, .card.left-out > .dept-body { opacity: 0.45; }
/* Call history: what happened on one call. */
.call-story { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.call-story .mono { font-size: 11.5px; }

/* Status profiles (static/status.js): the status picker and one row per status. */
.status-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.status-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border-subtle);
    background: var(--bg-band); color: var(--text-secondary); font: 500 12.5px var(--font); cursor: pointer; }
.status-btn svg { width: 15px; height: 15px; }
.status-btn:hover { color: var(--text-primary); border-color: var(--border-strong, var(--border-subtle)); }
.status-btn.on { color: var(--text-primary); }
.status-btn.on.ok { border-color: var(--ok, #3fb37f); box-shadow: inset 0 0 0 1px var(--ok, #3fb37f); }
.status-btn.on.warn { border-color: var(--warn, #d9a441); box-shadow: inset 0 0 0 1px var(--warn, #d9a441); }
.status-btn.on.bad { border-color: var(--bad, #e05d5d); box-shadow: inset 0 0 0 1px var(--bad, #e05d5d); }
.status-form { gap: 14px; }
.status-rows { display: flex; flex-direction: column; gap: 8px; }
.status-row { display: grid; grid-template-columns: 150px 90px repeat(4, minmax(0, 1fr)) 130px; gap: 10px; align-items: end;
    padding: 10px; border: 1px solid var(--border-subtle); border-radius: 6px; }
.status-row.now { border-color: var(--accent-primary); }
.status-row .field { margin: 0; }
.status-row .check { margin-bottom: 8px; }
.status-name { display: flex; align-items: center; gap: 6px; font-weight: 600; align-self: center; flex-wrap: wrap; }
.status-name svg { width: 15px; height: 15px; }
.status-skip { align-self: center; font-size: 12px; }
@media (max-width: 1100px) {
    .status-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .status-name { grid-column: 1 / -1; }
    .status-skip:empty { display: none; }
}
@media (max-width: 520px) { .status-row { grid-template-columns: 1fr; } }

.search { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 14px; height: 14px; }
.search input { padding-left: 30px; }

/* Filter pills */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { border: 0; cursor: pointer; background: transparent; color: var(--text-secondary); font: 500 12.5px var(--font);
    padding: 5px 12px; border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.tabs button:hover { color: var(--text-primary); }
.tabs button.active { background: var(--accent-tint); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent-line); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 4px; font: 500 10px var(--mono);
    letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
    background: var(--bg-hover); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.badge.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.badge.warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.badge.bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
.badge.info { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.badge.accent { background: var(--accent-tint); color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-line); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--radius-ui); font: 12px var(--mono);
    background: var(--bg-well); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); text-decoration: none; }
a.chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.chip button:hover { color: var(--bad); }

.empty { padding: 28px; text-align: center; color: var(--text-secondary); font: 13px/1.5 var(--font); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.notice { padding: 10px 14px; border-radius: var(--radius-ui); background: var(--info-bg); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--info-line); font-size: 12.5px; }
.notice.bad { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.notice.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.notice.ok { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.console { background: #06070B; border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--border-subtle); padding: 12px 14px;
    font: 11.5px/1.65 var(--mono); color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
:root[data-preset="daylight"] .console { background: #F6F7F9; }

/* Inline panel (the design's modal, kept in page flow so nothing scrolls inside it) */
.panel { background: var(--bg-elevated); border-radius: var(--radius-ui); box-shadow: var(--shadow-float); overflow: hidden; }
.panel > .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px;
    background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.panel > .panel-head h2 { font-size: 13px; }
.panel > .panel-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.panel > .panel-foot { padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-base); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- avatars ---------- */

.avatar {
    width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-strong); font: 600 11.5px var(--font); color: var(--text-secondary);
    letter-spacing: 0.02em; user-select: none;
}
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.av-0 { background: rgba(124, 92, 255, 0.18); color: #B8A6FF; box-shadow: none; }
.avatar.av-1 { background: rgba(56, 189, 248, 0.16); color: #7DD3FC; box-shadow: none; }
.avatar.av-2 { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; box-shadow: none; }
.avatar.av-3 { background: rgba(245, 158, 11, 0.16); color: #FCD34D; box-shadow: none; }
.avatar.av-4 { background: rgba(244, 63, 94, 0.16); color: #FDA4AF; box-shadow: none; }
.avatar.av-5 { background: rgba(45, 212, 191, 0.16); color: #5EEAD4; box-shadow: none; }
.avatar.av-6 { background: rgba(129, 140, 248, 0.18); color: #A5B4FC; box-shadow: none; }
.avatar.av-7 { background: rgba(148, 163, 184, 0.16); color: #CBD5E1; box-shadow: none; }
:root[data-preset="daylight"] .avatar.av-0 { background: #EDE9FE; color: #6D28D9; }
:root[data-preset="daylight"] .avatar.av-1 { background: #E0F2FE; color: #0369A1; }
:root[data-preset="daylight"] .avatar.av-2 { background: #D1FAE5; color: #047857; }
:root[data-preset="daylight"] .avatar.av-3 { background: #FEF3C7; color: #B45309; }
:root[data-preset="daylight"] .avatar.av-4 { background: #FFE4E6; color: #BE123C; }
:root[data-preset="daylight"] .avatar.av-5 { background: #CCFBF1; color: #0F766E; }
:root[data-preset="daylight"] .avatar.av-6 { background: #E0E7FF; color: #4338CA; }
:root[data-preset="daylight"] .avatar.av-7 { background: #E7E5E4; color: #44403C; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ---------- tables: console style; one card per row on narrow screens ---------- */

table.data { width: 100%; border-collapse: collapse; overflow-wrap: break-word; }
table.data th { text-align: left; padding: var(--cell-py) var(--cell-px); font: 600 10.5px var(--font); letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted); background: var(--bg-band); border-bottom: 1px solid var(--border-subtle); }
table.data td { padding: var(--cell-py) var(--cell-px); border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
    font: 13px var(--font); color: var(--text-secondary); overflow-wrap: break-word; transition: background-color .12s ease; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--bg-hover); }
table.data tr.link { cursor: pointer; }
table.data td.num { white-space: nowrap; }
table.data .stamp { white-space: nowrap; font-family: var(--mono); color: var(--text-secondary); }
table.data td.actions { text-align: right; }
table.data td .mono, table.data td.mono { font: 12px var(--mono); }
table.data .cell-main { color: var(--text-primary); font-weight: 600; }
table.data .cell-id { color: var(--accent-primary); font-weight: 600; }
.cell-main { font-weight: 600; color: var(--text-primary); }
.cell-sub { color: var(--text-muted); font-size: 11px; }
.card > table.data { margin: calc(var(--card-pad) * -1); width: calc(100% + var(--card-pad) * 2); margin-top: 0; margin-bottom: calc(var(--card-pad) * -1); }
.card.flush > table.data { margin: 0; width: 100%; }
/* A full-width line under a row (a voicemail's transcript). */
table.data tr.has-sub td { border-bottom: 0; }
table.data tr.sub-row td { padding-top: 0; }
.vm-transcript { color: var(--text-secondary); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Something after an edge-to-edge table in a card (its negative bottom margin would overlap it). */
.card > table.data + .vm-email { margin-top: calc(var(--card-pad) + 4px); padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.vm-email { margin-top: 16px; }

@media (max-width: 760px) {
    table.data thead { display: none; }
    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data tr { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
    table.data tr:last-child { border-bottom: 0; }
    table.data td { border: 0; padding: 3px var(--cell-px); display: flex; gap: 10px; }
    table.data td::before { content: attr(data-label); color: var(--text-muted); font-size: 10px; text-transform: uppercase; min-width: 96px; flex: none; padding-top: 2px; }
    table.data td.actions { text-align: left; }
    table.data td:empty { display: none; }
    .card > table.data { margin: 0; width: 100%; }
    table.data tr.has-sub { border-bottom: 0; padding-bottom: 0; }
    table.data tr.sub-row td::before { content: none; }
}

/* ---------- guidance: help links, checklist, common tasks, success panels ---------- */

.help-link { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--accent-primary); text-decoration: none; white-space: nowrap; }
.help-link:hover { text-decoration: underline; }
.help-link .icon { width: 14px; height: 14px; }
.lead { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 820px; }

.progress-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress-row .bar { flex: 1; min-width: 160px; }
.progress-row b { font: 600 12.5px var(--font); color: var(--text-primary); white-space: nowrap; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist > li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.checklist > li:first-child { border-top: 0; padding-top: 4px; }
.checklist .st { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; margin-top: 1px; }
.checklist .st .icon { width: 20px; height: 20px; }
.checklist .st.done { color: var(--ok); }
.checklist .st.todo { color: var(--text-muted); }
.checklist .st.warn { color: var(--warn); }
.checklist .t { font: 600 13.5px var(--font); color: var(--text-primary); }
.checklist li.done .t { color: var(--text-secondary); }
.checklist .d { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 3px; }
.checklist .d code { font: 12px var(--mono); color: var(--text-primary); background: var(--bg-well); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.checklist .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.checklist .sub { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
@media (max-width: 700px) {
    .checklist > li { grid-template-columns: 26px minmax(0, 1fr); }
    .checklist .acts { grid-column: 2; justify-content: flex-start; margin-top: 8px; }
}

.task-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* The strip under a page head: a caption and one row of tasks (wraps on narrow screens). */
.common-tasks { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.common-tasks .cap { font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.common-tasks .task { padding: 10px 12px; }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-ui); text-decoration: none; cursor: pointer;
    background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-primary); border: 0; text-align: left; font: inherit;
    transition: box-shadow .12s ease, background-color .12s ease; }
.task:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent-line); background: var(--accent-tint); }
.task .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bg-hover); }
.task .ic .icon { width: 16px; height: 16px; }
.task .t { font: 600 13px var(--font); color: var(--text-primary); }
.task .d { font: 12px/1.4 var(--font); color: var(--text-secondary); margin-top: 2px; }

.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius-ui); cursor: pointer; text-align: left; font: inherit;
    background: var(--bg-well); border: 0; box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-primary); }
.choice:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.choice.active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
.choice .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.choice .t { font: 600 13px var(--font); }
.choice .d { font: 12px/1.4 var(--font); color: var(--text-secondary); margin-top: 2px; }

.secret-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius-ui);
    background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.secret-box .kv > dd { font: 13px var(--mono); color: var(--text-primary); overflow-wrap: anywhere; }
.inline-input { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.inline-input > input, .inline-input > .grow { flex: 1; min-width: 180px; }
.inline-input > select { width: auto; }

.suggest-list { display: flex; flex-direction: column; gap: 2px; }
.suggest-list button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; color: var(--text-primary);
    padding: 6px 8px; border-radius: 6px; cursor: pointer; font: 13px var(--font); }
.suggest-list button:hover, .suggest-list button.on { background: var(--bg-hover); }
.suggest-list small { color: var(--text-muted); font: 12px var(--mono); }

.status-line { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); }
.status-line .icon { width: 15px; height: 15px; }
.status-line.ok { color: var(--ok); }
.status-line.warn { color: var(--warn); }
.status-line.bad { color: var(--bad); }
.status-line.todo { color: var(--text-muted); }

/* ---------- public folders (admin) ---------- */

.pf-tree { display: flex; flex-direction: column; }
.pf-item { border-top: 1px solid var(--border-subtle); }
.pf-item:first-child { border-top: 0; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.pf-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pf-name b { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.pf-name .icon { width: 16px; height: 16px; }
.pf-panel { padding: 4px 0 14px; }

/* ---------- documentation articles ---------- */

.doc-layout { display: grid; gap: 20px; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.doc-toc a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text-secondary); font: 13px var(--font); text-decoration: none; border-left: 2px solid transparent; }
.doc-toc a:hover { background: var(--bg-hover); color: var(--text-primary); }
.doc-toc a.active { color: var(--text-primary); background: var(--accent-tint); border-left-color: var(--accent-primary); border-radius: 0 6px 6px 0; }
.doc-toc .cap { font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 4px 10px 8px; }
@media (max-width: 1000px) {
    .doc-layout { grid-template-columns: 1fr; }
    .doc-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .doc-toc .cap { width: 100%; padding-bottom: 2px; }
    .doc-toc a { border-left: 0; box-shadow: inset 0 0 0 1px var(--border-subtle); border-radius: 6px; padding: 5px 10px; }
    .doc-toc a.active { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--accent-line); }
}
.doc { font: 14px/1.7 var(--font); color: var(--text-secondary); max-width: 860px; overflow-wrap: break-word; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 24px; margin: 0 0 8px; color: var(--text-primary); }
.doc h2 { font-size: 17px; margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--border-subtle); color: var(--text-primary); scroll-margin-top: calc(var(--header-h) + 16px); }
.doc h3 { font-size: 14.5px; margin: 24px 0 8px; color: var(--text-primary); scroll-margin-top: calc(var(--header-h) + 16px); }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc strong { color: var(--text-primary); font-weight: 600; }
.doc a { color: var(--accent-primary); }
.doc code { font: 12.5px var(--mono); color: var(--text-primary); background: var(--bg-well); padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border-subtle); overflow-wrap: anywhere; }
.doc pre { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-ui); background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle);
    font: 12.5px/1.6 var(--mono); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.doc pre code { background: none; box-shadow: none; padding: 0; font: inherit; }
.doc pre .copy { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s ease; background: var(--bg-elevated); }
.doc pre:hover .copy, .doc pre .copy:focus-visible { opacity: 1; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13px; }
.doc th { text-align: left; font: 600 12px var(--font); color: var(--text-primary); background: var(--bg-band); padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.doc td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.doc blockquote { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-ui); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); color: var(--text-primary); }
.doc blockquote.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc .live { margin: 0 0 16px; }
.doc-pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.doc-pager a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-ui); box-shadow: inset 0 0 0 1px var(--border-subtle); text-decoration: none; min-width: 200px; }
.doc-pager a:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.doc-pager small { color: var(--text-muted); font: 11px var(--font); }
.doc-pager b { color: var(--text-primary); font: 600 13px var(--font); }
.doc-pager .next { text-align: right; margin-left: auto; }
.doc-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 760px) {
    .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
    .doc thead { display: none; }
    .doc tr { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
    .doc td { border: 0; padding: 2px 0; }
    .doc td::before { content: attr(data-label); display: block; font: 600 11px var(--font); color: var(--text-muted); }
}

/* ---------- toasts ---------- */

.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(400px, calc(100vw - 40px)); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius-ui);
    font: 13px var(--font); color: var(--text-primary); background: var(--bg-elevated); box-shadow: var(--shadow-float);
    border-left: 2px solid rgba(16, 185, 129, 0.6); animation: toast-in 0.18s ease-out; }
.toast .t { display: flex; align-items: center; gap: 10px; }
.toast.bad { border-left-color: rgba(244, 63, 94, 0.7); }
.toast.warn { border-left-color: rgba(245, 158, 11, 0.7); }
.toast.accent { border-left-color: var(--accent-line); }
.toast button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.toast button:hover { color: var(--text-primary); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------- sign-in ---------- */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(600px 400px at 50% 30%, var(--accent-glow), transparent 70%), var(--bg-base); }
.signin .card { width: min(400px, 100%); padding: 28px; gap: 20px; background: var(--bg-elevated); box-shadow: var(--shadow-float); }
.signin .brand { padding: 0; }
.signin form { display: flex; flex-direction: column; gap: 14px; }
.signin .error { color: var(--bad); min-height: 1.2em; font: 12px var(--mono); }
.signin .btn.primary { padding: 9px 14px; font-size: 13px; }
/* Two-factor set-up: the enrolment gate is wider than the sign-in card; QR codes stay on white (scanners need contrast). */
.signin.wide > .stack { width: min(680px, 100%); }
.signin.wide .card { width: 100%; }
.qr-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.qr { background: #fff; border-radius: var(--radius-ui); padding: 6px; line-height: 0; flex: none; }
.qr svg { width: 196px; height: 196px; display: block; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; font-size: 13px; }
.recovery-codes span { padding: 6px 10px; border-radius: var(--radius-ui); background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--border-subtle); }
a.who { text-decoration: none; color: inherit; }
a.who:hover b { text-decoration: underline; }

/* ---------- narrow screens: header wraps, sidebar becomes a collapsible panel ---------- */

@media (max-width: 1100px) {
    .app-header .preset-seg { display: none; }
    .side-foot .preset-seg { display: inline-flex; }
    .split-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .app-header { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding: 8px 14px; position: static; }
    .header-search, .app-header .header-pill, .user-chip .who, .host-line { display: none; }
    .menu-btn { display: inline-flex; }
    .app-body { grid-template-columns: 1fr; }
    .sidebar { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .sidebar:not(.open) { display: none; }
    .content { padding: 16px; }
    .grid-2 { grid-template-columns: 1fr; }
}

/* Mail flow rules and compliance */
.rule-rows { display: flex; flex-direction: column; gap: 8px; }
.rule-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px;
    border-radius: var(--radius-ui); background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.rule-row .what { font: 500 12.5px/1.4 var(--font); color: var(--text-primary); padding-top: 7px; }
.rule-row .val { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rule-section-title { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.rule-summary { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin-top: 3px; overflow-wrap: anywhere; }
.rule-try { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.slot:empty { display: none; }
.preview-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--font); margin: 10px 0 0; padding: 12px; border-radius: var(--radius-ui);
    background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-all; }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.add-picker { max-width: 360px; }
.chips-input { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.order-btns { display: flex; gap: 2px; align-items: center; }
.order-btns .num { min-width: 18px; }
.dlp-kinds { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 8px; }
@media (max-width: 760px) {
    .rule-row { grid-template-columns: minmax(0, 1fr) auto; }
    .rule-row .val { grid-column: 1 / -1; }
}
/* Reports: a day chart that scales to the card, and a weekday x hour heat map. */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border-subtle); stroke-width: 1; }
.chart .axis { fill: var(--text-muted); font: 11px var(--mono); }
.chart .inbound, .legend .inbound::before { fill: var(--info); background: var(--info); }
.chart .outbound, .legend .outbound::before { fill: var(--ok); background: var(--ok); }
.chart .internal, .legend .internal::before { fill: var(--text-muted); background: var(--text-muted); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; }
.heat-h { font: 10px var(--mono); color: var(--text-muted); text-align: center; line-height: 16px; overflow: hidden; }
.heat-c { aspect-ratio: 1; border-radius: 2px; background: var(--accent-primary); min-height: 8px; }

/* ==========================================================================================================
   Operations grid (dashboard): KPI strip, 60/40 live split, resource graphs, log tail, tenant node cards.
   ========================================================================================================== */

/* Sticky table headers: they stay under the app header while the page scrolls (no scroll boxes). */
:root { --sticky-top: var(--header-h); }
table.data thead th { position: sticky; top: var(--sticky-top); z-index: 2; background: var(--bg-band); }
:root[data-preset="obsidian"] table.data thead th, :root[data-preset="swiss"] table.data thead th, :root[data-preset="soc"] table.data thead th {
    background: color-mix(in srgb, var(--bg-surface) 96%, white); }

/* Collapsible navigation rail (desktop): icons only, labels as tooltips. */
.rail-btn { flex: none; }
@media (min-width: 901px) {
    .app.rail .app-body { grid-template-columns: 64px minmax(0, 1fr); }
    .app.rail .sidebar .side-top { padding: 10px 8px; }
    .app.rail .nav { gap: 10px; }
    .app.rail .nav-caption { height: 1px; padding: 0; margin: 0 10px 8px; overflow: hidden; color: transparent; background: var(--border-subtle); }
    .app.rail .nav a { justify-content: center; padding: 10px 0; border-left: 0; border-radius: var(--radius-ui); }
    .app.rail .nav a .lbl > span:last-child { display: none; }
    .app.rail .nav a.active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
    .app.rail #side-box, .app.rail .side-foot { display: none; }
    .app.rail .sidebar.collapsible .nav-caption { height: 10px; padding: 0; margin: 0 10px 6px; color: transparent; background: none;
        border-radius: 0; box-shadow: inset 0 -1px 0 var(--border-subtle); }
    .app.rail .sidebar.collapsible .nav-caption::after { content: none; }
    .app.rail .sidebar.collapsible .nav-section.folded .nav-caption { position: relative; height: 24px; margin: 0 4px; background: none; }
    .app.rail .sidebar.collapsible .nav-section.folded .nav-caption::after { content: '···'; position: absolute; inset: 0; display: grid; place-items: center;
        color: var(--text-muted); font-size: 14px; }
}
/* Minimal outline icons in the ops preset: no per-item colours, the active item takes the accent. */
:root[data-preset="ops"] .nav a .lbl > span:first-child { color: var(--text-muted); }
:root[data-preset="ops"] .nav a:hover .lbl > span:first-child { color: var(--text-secondary); }
:root[data-preset="ops"] .nav a.active .lbl > span:first-child { color: var(--accent-primary); }
:root[data-preset="ops"] .nav a.active { background: linear-gradient(90deg, var(--accent-tint) 0%, transparent 100%); }
@media (min-width: 901px) { :root[data-preset="ops"] .app.rail .nav a.active { background: var(--accent-tint); } }

/* Status pulse: a crisp emerald pulse when healthy, sharp amber / coral when not. */
@keyframes ops-ring { 0% { box-shadow: 0 0 0 0 var(--ok-line); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-muted); }
.pulse-dot.ok { background: var(--ok); animation: ops-ring 2s ease-out infinite; }
.pulse-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.pulse-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.pulse-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .pulse-dot.ok, .dot.pulse { animation: none; } }

.ops-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ops-head h1 { font-size: 18px; }
.ops-head .sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font: 11px var(--mono); color: var(--text-muted); }
.ops-head .sub b { color: var(--text-secondary); font-weight: 500; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font: 600 10px var(--mono); letter-spacing: 0.12em;
    color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.live-tag.stale { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }

/* KPI cards */
.kpi-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius-ui); min-width: 0;
    background: var(--bg-surface); box-shadow: var(--highlight), 0 0 0 1px var(--border-subtle); color: inherit; text-decoration: none; }
a.kpi-card:hover { text-decoration: none; box-shadow: var(--highlight), 0 0 0 1px var(--border-strong); }
.kpi-card::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--border-strong); }
.kpi-card.is-ok::before { background: var(--ok); box-shadow: 0 0 10px var(--ok-line); }
.kpi-card.is-warn::before { background: var(--warn); box-shadow: 0 0 10px var(--warn-line); }
.kpi-card.is-bad::before { background: var(--bad); box-shadow: 0 0 10px var(--bad-line); }
.kpi-card .k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.kpi-card .k .icon { width: 14px; height: 14px; }
.kpi-card .v { font: 600 26px/1.05 var(--mono); letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi-card .v small { font: 500 12px var(--mono); letter-spacing: 0; color: var(--text-muted); margin-left: 4px; }
.kpi-card.is-warn .v { color: var(--warn); }
.kpi-card.is-bad .v { color: var(--bad); }
.kpi-card .s { font: 11px var(--mono); color: var(--text-secondary); min-height: 1.4em; }
.kpi-card .meter { height: 4px; }
.kpi-card .meter > i.ok { background: var(--ok); }
.kpi-card .meter > i.warn { background: var(--warn); }
.kpi-card .meter > i.bad { background: var(--bad); }

.card-head .count { font: 500 11px var(--mono); color: var(--text-muted); }
.card-head h2 .count, .card-head h3 .count { margin-left: 6px; }
/* The header tenant picker sizes to its text; .btn's display would otherwise show the narrow-screen menu button. */
.app-header #tenant-pick { width: auto; max-width: 240px; flex-shrink: 1; min-width: 120px; padding: 5px 28px 5px 10px; font-size: 12px; }
.app-header .btn.menu-btn { display: none; }
@media (max-width: 900px) { .app-header .btn.menu-btn { display: inline-flex; } }

/* Live calls table */
table.data.live td { font-size: 12.5px; }
table.data.live .ext { display: flex; align-items: center; gap: 8px; }
table.data.live .ext b { font: 600 12.5px var(--mono); color: var(--text-primary); }
table.data.live .addr { font: 11.5px var(--mono); color: var(--text-secondary); white-space: nowrap; }
table.data.live .dur { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) { table.data.live .dur { flex-direction: row; align-items: baseline; gap: 10px; } }
.app-header .brand { flex-shrink: 0; }
.app-header .header-search { flex: 0 1 320px; min-width: 150px; }
table.data.live .tick { font: 600 12.5px var(--mono); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.codec { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 4px; font: 500 10.5px var(--mono); white-space: nowrap;
    color: var(--text-primary); background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.codec .icon { width: 11px; height: 11px; color: var(--ok); }
.q { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); white-space: nowrap; color: var(--text-secondary); }
.q i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: none; }
.q.ok i { background: var(--ok); } .q.warn i { background: var(--warn); } .q.bad i { background: var(--bad); }
.q.warn { color: var(--warn); } .q.bad { color: var(--bad); }
.state-pill { display: inline-flex; align-items: center; gap: 6px; font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.state-pill.talking { color: var(--ok); } .state-pill.ringing { color: var(--warn); } .state-pill.setup { color: var(--text-muted); }

/* Resource graphs */
.res { display: flex; flex-direction: column; gap: 6px; }
.res + .res { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.res .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.res .name { font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.res .now { font: 600 16px var(--mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.res .now small { font: 11px var(--mono); color: var(--text-muted); margin-left: 4px; }
.res .now.warn { color: var(--warn); } .res .now.bad { color: var(--bad); }
.res .legend-row { display: flex; gap: 14px; flex-wrap: wrap; font: 11px var(--mono); color: var(--text-secondary); }
.res .legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.res .legend-row i { width: 10px; height: 2px; border-radius: 1px; background: var(--accent-primary); display: inline-block; }
.res .legend-row i.eng { background: var(--teal); }
svg.spark { width: 100%; height: 44px; display: block; overflow: visible; }
svg.spark.tall { height: 64px; }
svg.spark .line { fill: none; stroke: var(--accent-primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.spark .fill { fill: var(--accent-primary); opacity: 0.13; stroke: none; }
svg.spark .line.eng { stroke: var(--teal); }
svg.spark .line.warn { stroke: var(--warn); } svg.spark .fill.warn { fill: var(--warn); }
svg.spark .line.bad { stroke: var(--bad); } svg.spark .fill.bad { fill: var(--bad); }
svg.spark.bars { height: 30px; }
svg.spark.bars rect.on { fill: var(--accent-primary); opacity: 0.85; }
svg.spark.bars rect.off { fill: var(--border-subtle); }
svg.spark.bars.traffic rect.on { fill: var(--teal); }

/* Log tail (JetBrains Mono, grows with the page; "Show more" instead of a scroll box) */
.log-tail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font: 11.5px/1.5 var(--mono); }
.log-tail li { display: grid; grid-template-columns: 62px 92px minmax(0, 1fr); gap: 4px 10px; padding: 5px 0; border-top: 1px solid var(--border-subtle); align-items: baseline; }
.log-tail li:first-child { border-top: 0; }
.log-tail .t { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.log-tail .ev { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.log-tail .ev.ok { color: var(--ok); } .log-tail .ev.warn { color: var(--warn); } .log-tail .ev.bad { color: var(--bad); } .log-tail .ev.off { color: var(--text-muted); }
.log-tail .what { color: var(--text-secondary); overflow-wrap: anywhere; }
.log-tail .what b { color: var(--text-primary); font-weight: 600; }
.log-tail li.fresh { animation: log-in .6s ease-out; }
@keyframes log-in { from { background: var(--accent-tint); } to { background: transparent; } }
@media (max-width: 520px) { .log-tail li { grid-template-columns: 62px minmax(0, 1fr); } .log-tail .what { grid-column: 1 / -1; } }

/* Tenant / node cards */
.node-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.node-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-ui); min-width: 0;
    background: var(--bg-surface); box-shadow: var(--highlight), 0 0 0 1px var(--border-subtle); color: inherit; text-decoration: none; }
a.node-card:hover, button.node-card:hover { text-decoration: none; box-shadow: var(--highlight), 0 0 0 1px var(--border-strong); }
button.node-card { border: 0; font: inherit; text-align: left; cursor: pointer; }
.node-card.is-warn { box-shadow: var(--highlight), 0 0 0 1px var(--warn-line); }
.node-card.is-bad { box-shadow: var(--highlight), 0 0 0 1px var(--bad-line); }
.node-card .top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.node-card .top .name { font: 600 13px var(--font); color: var(--text-primary); overflow-wrap: anywhere; }
.node-card .top .code { font: 11px var(--mono); color: var(--text-muted); }
.node-card .top .state { margin-left: auto; font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.node-card .top .state.ok { color: var(--ok); } .node-card .top .state.warn { color: var(--warn); } .node-card .top .state.bad { color: var(--bad); } .node-card .top .state.off { color: var(--text-muted); }
.node-card .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.node-card .nums div { display: flex; flex-direction: column; gap: 1px; }
.node-card .nums b { font: 600 15px var(--mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.node-card .nums b.warn { color: var(--warn); } .node-card .nums b.bad { color: var(--bad); }
.node-card .nums span { font: 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.node-card .series { display: flex; flex-direction: column; gap: 4px; }
.node-card .series .cap { display: flex; justify-content: space-between; gap: 8px; font: 10.5px var(--mono); color: var(--text-muted); }
.node-card .series .cap b { color: var(--text-secondary); font-weight: 500; }

@media (max-width: 900px) {
    :root { --sticky-top: 0px; }
    .rail-btn { display: none; }
}

/* Import (admin/import.js): the export instructions, per-item notes, and the renumber field. */
.help-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--text-secondary); }
.help-list code { font: 12px var(--mono); overflow-wrap: anywhere; }
.notice.help-list { padding-left: 32px; }
.note-text { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.note-text.bad { color: var(--bad); }
input.narrow { width: 7em; max-width: 100%; }

/* Dashboard board (admin/ops.js): 12 x 12 tiles that always fill the window, so nothing needs scrolling. The tiles size
   themselves from the grid; each one is a size container, and its content adapts to the room it has (columns drop out,
   charts stretch, lists show what fits and count the rest). "Arrange" moves, swaps, resizes and hides tiles. */
.content.board-page { max-width: none; height: calc(100dvh - var(--header-h)); min-height: 560px; padding: 14px 20px 16px; gap: 12px; }
.board { flex: 1; min-height: 0; display: grid; gap: 12px; position: relative;
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); }
.dash-tile { position: relative; min-width: 0; min-height: 0; container: tile / size; }
.dash-tile.card.flush { display: flex; flex-direction: column; gap: 0; }
.tile-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
    padding: 9px 14px; border-bottom: 1px solid var(--border-subtle); }
.tile-head h3 { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-head h3 .count { font: 500 11px var(--mono); color: var(--text-muted); margin-left: 6px; }
.tile-head a { font: 500 12px var(--font); white-space: nowrap; flex: none; }
.tile-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; }
.dash-tile[data-id="calls"] .tile-body, .dash-tile[data-id="recent"] .tile-body { padding: 0; gap: 0; }
.tile-body > table.data { margin: 0; width: 100%; }
.tile-body table.data thead th { position: static; }
.tile-body table.data th, .tile-body table.data td { padding: 7px 12px; }
.tile-body .empty { flex: 1; justify-content: center; padding: 10px; font-size: 12.5px; }
.dash-tile .feed li { padding: 7px 0; }
@container tile (max-width: 760px) { .c-tenant { display: none; } }
@container tile (max-width: 660px) { .c-ip { display: none; } }
@container tile (max-width: 540px) { .c-codec { display: none; } }
@container tile (max-width: 430px) { .c-q { display: none; } }
@container tile (max-width: 340px) { .c-cid { display: none; } }
@container tile (max-width: 380px) { .dash-tile .log-tail li { grid-template-columns: 62px minmax(0, 1fr); } .dash-tile .log-tail .what { grid-column: 1 / -1; } }

/* KPI tiles: the card is the tile; the number scales with the tile's height. */
.dash-tile.kpi-tile .kpi-slot { height: 100%; }
.dash-tile.kpi-tile .kpi-card { height: 100%; justify-content: center; overflow: hidden; }
.dash-tile.kpi-tile .kpi-card .v { font-size: clamp(20px, 26cqh, 44px); }
@container tile (max-height: 92px) { .dash-tile.kpi-tile .kpi-card .s { display: none; } }

/* Server resources: two graphs that stretch to the tile, side by side when it is wide and low. */
.res-pair { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.res-pair .res { flex: 1; min-height: 0; min-width: 0; }
.res-pair .res + .res { padding-top: 10px; }
svg.spark.fill-box { flex: 1 1 0; height: 0; min-height: 14px; }
@container tile (min-aspect-ratio: 2/1) {
    .res-pair { flex-direction: row; gap: 14px; }
    .res-pair .res + .res { padding-top: 0; border-top: 0; padding-left: 14px; border-left: 1px solid var(--border-subtle); }
}
@container tile (max-height: 210px) { .res-pair .legend-row { display: none; } }

/* Tenant cards in a tile: smaller; in a low tile the 24-hour series give way before any card does (ops.js fit levels). */
.dash-tile .node-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; align-content: start; }
.dash-tile .node-card { padding: 10px 12px; gap: 8px; }
.tile-body.no-traffic .node-card .series.traffic, .tile-body.no-series .node-card .series, .tile-body.names-only .node-card .nums { display: none; }
/* one-line: rows keep only their first line (call tables, the change feed) so more of them fit. */
.tile-body.one-line .cell-sub, .tile-body.one-line .state-pill, .tile-body.one-line .stat-icon, .tile-body.one-line .feed .avatar { display: none; }
.tile-body.one-line .feed li { padding: 5px 0; }
.tile-body.one-line .feed-text { flex-direction: row; gap: 8px; align-items: baseline; justify-content: space-between; }

/* Common tasks on the dashboard: one row of small buttons, the description as a tooltip. */
.common-tasks.compact { flex-direction: row; align-items: center; gap: 12px; }
.common-tasks.compact .cap { flex: none; }
.common-tasks.compact .task-grid { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.common-tasks.compact .task { align-items: center; gap: 8px; padding: 5px 11px 5px 6px; }
.common-tasks.compact .task .ic { width: 22px; height: 22px; border-radius: 6px; }
.common-tasks.compact .task .ic .icon { width: 13px; height: 13px; }
.common-tasks.compact .task .t { font-size: 12px; white-space: nowrap; }

/* Arranging */
.arrange-hint { font: 12px var(--font); color: var(--text-secondary); }
.add-tile { width: auto; max-width: 240px; font-size: 12px; padding: 5px 28px 5px 10px; }
.tile-edit { display: none; }
.board.editing .dash-tile { cursor: grab; user-select: none; touch-action: none; }
.board.editing .dash-tile > :not(.tile-edit) { pointer-events: none; }
.board.editing .tile-edit { display: block; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-ui);
    background: color-mix(in srgb, var(--bg-base) 30%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.board.editing .dash-tile:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.tile-bar { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 8px;
    border-radius: 6px; background: var(--bg-elevated); box-shadow: var(--shadow-float); font: 600 11.5px var(--font); color: var(--text-primary); }
.tile-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-bar > .icon { width: 13px; height: 13px; flex: none; color: var(--accent-primary); }
.tile-hide { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--text-muted); cursor: pointer; }
.tile-hide:hover { color: var(--bad); background: var(--bg-hover); }
.tile-hide .icon { width: 13px; height: 13px; }
.tile-resize { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; cursor: nwse-resize; }
.tile-resize::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
    border-right: 2px solid var(--accent-primary); border-bottom: 2px solid var(--accent-primary); border-bottom-right-radius: 2px; }
.dash-tile.dragging { z-index: 10; cursor: grabbing; opacity: 0.9; box-shadow: var(--shadow-float); }
.dash-tile.resizing { z-index: 10; }
.dash-tile.swap-target .tile-edit { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent-primary); }
.board-ghost { z-index: 1; pointer-events: none; border-radius: var(--radius-ui); background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent-primary); }
.board-ghost.bad { background: var(--bad-bg); box-shadow: inset 0 0 0 2px var(--bad); }

/* Narrow or very low windows: the tiles stack (KPIs two to a row) and the page scrolls; arranging needs the full board. */
@media (max-width: 900px), (max-height: 620px) {
    .content.board-page { height: auto; min-height: 0; }
    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
    .board .dash-tile { grid-area: auto !important; grid-column: 1 / -1 !important; height: calc(var(--tile-h) * 62px); }
    .board .dash-tile.kpi-tile { grid-column: auto !important; height: 120px; }
    .arrange-btn { display: none; }
}
/* Phone widths turn table rows into cards: a tile needs room for at least one. The task buttons wrap under their caption. */
@media (max-width: 760px) {
    .board .dash-tile:not(.kpi-tile) { height: calc(var(--tile-h) * 62px + 120px); }
    .common-tasks.compact { flex-direction: column; align-items: stretch; gap: 8px; }
}