@font-face { font-family:"Plex Condensed"; src:url("/static/fonts/IBMPlexSansCondensed-Regular.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Condensed"; src:url("/static/fonts/IBMPlexSansCondensed-SemiBold.ttf") format("truetype"); font-style:normal; font-weight:600 800; font-display:swap; }

:root {
  --navy: #081837;
  --navy-2: #0a326f;
  --blue: #0b4cc4;
  --blue-strong: #073b98;
  --paper: #f7f7f7;
  --surface: #ffffff;
  --line: #d9dde5;
  --line-dark: #b9c0cc;
  --ink: #111b33;
  --muted: #5e6678;
  --green: #178832;
  --green-soft: #e9f6ec;
  --amber: #eb9d00;
  --amber-soft: #fff5dc;
  --red: #d9232e;
  --red-soft: #fdebed;
  --focus: #1769e0;
  --sidebar: 216px;
  --radius: 12px;
  font-family: "Plex Condensed", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); scrollbar-color: var(--line-dark) var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
body, input, select, textarea, button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { color: white; background: var(--blue); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #737b8c; opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tabular { font-variant-numeric: tabular-nums; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; color: #f8fafc; background: var(--navy); border-right: 1px solid #0b2855; }
.brand { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 20px; font-size: 21px; font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { width: 25px; height: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; }
.brand-mark i { display: block; background: #fff; border-radius: 2px 2px 0 0; }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 17px; }.brand-mark i:nth-child(3) { height: 24px; }
.nav-stack { display: grid; gap: 5px; padding: 10px 12px; }
.nav-link { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 14px; color: #eef3fb; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 580; }
.nav-link:hover { background: #10284f; }
.nav-link.is-active { background: #0b428e; box-shadow: 0 8px 22px rgba(0, 13, 45, .23); }
.nav-icon { position: relative; width: 20px; height: 20px; flex: 0 0 20px; border: 1.8px solid currentColor; border-radius: 4px; opacity: .95; }
.nav-overview::before { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.nav-clients { border-radius: 50%; width: 12px; height: 12px; margin: 0 4px; }.nav-clients::after { content:""; position:absolute; width:19px; height:9px; border:1.8px solid currentColor; border-bottom:0; border-radius:12px 12px 0 0; left:-5px; top:13px; }
.nav-monitors::before { content:""; position:absolute; left:3px; right:3px; top:5px; height:2px; background:currentColor; box-shadow:0 5px 0 currentColor; }
.nav-incidents { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }.nav-incidents::after { content:"!"; position:absolute; inset:0; display:grid; place-items:center; transform:rotate(45deg); font-size:12px; font-weight:800; }
.nav-bell { border-radius: 9px 9px 4px 4px; border-bottom-width: 3px; }
.nav-settings { border-radius: 50%; }.nav-settings::after { content:""; position:absolute; inset:5px; border:2px solid currentColor; border-radius:50%; }
.sidebar-foot { margin-top: auto; }
.storage-note { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-top: 1px solid #18345d; border-bottom: 1px solid #18345d; font-size: 12px; line-height: 1.35; }
.storage-note small { color: #9eb2ce; }.storage-dot { width: 14px; height: 14px; border: 2px solid #64d47a; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--navy); background: #64d47a; }
.account-row { min-height: 82px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #7990ae; border-radius: 50%; color: white; background: #263d64; font-weight: 700; }
.account-copy { min-width: 0; display: grid; gap: 2px; font-size: 11px; }.account-copy strong { font-size: 12px; }.account-copy small { overflow: hidden; text-overflow: ellipsis; color: #aabbd2; }
.logout { color: #cbd6e5; border: 0; background: transparent; cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

.main-canvas { min-width: 0; background: var(--paper); }
.flash { position: fixed; z-index: 80; top: 16px; right: 20px; max-width: min(520px, calc(100vw - 40px)); display: flex; gap: 20px; align-items: center; padding: 13px 16px; border: 1px solid var(--line-dark); border-radius: 10px; background: white; box-shadow: 0 12px 30px rgba(10,24,55,.16); font-size: 13px; }
.flash-success { border-color: #84c994; }.flash-warning { border-color: #edbd57; }.flash-error { border-color: #eb8b91; }
.flash button { border:0; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }

.operations-header { min-height: 74px; display: grid; grid-template-columns: minmax(180px,1.4fr) minmax(170px,1fr) repeat(3,minmax(125px,.7fr)) auto; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); }
.operations-header > * { min-width: 0; display: flex; align-items: center; padding: 10px 18px; border-right: 1px solid var(--line); }
.operations-header > :last-child { border-right: 0; }
.operations-title { display: block; align-content: center; }.operations-title h1 { margin:0; font-family:"Plex Condensed", sans-serif; font-size:20px; line-height:1; }.operations-title p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.operations-title p.is-error { color:var(--red); font-weight:600; }
.clock-block { gap:12px; }.clock-face { width:28px; height:28px; border:2px solid var(--navy); border-radius:50%; position:relative; }.clock-face::before { content:""; position:absolute; width:1.5px; height:8px; top:5px; left:12px; background:var(--navy); transform-origin:bottom; }.clock-face::after { content:""; position:absolute; width:7px; height:1.5px; top:13px; left:12px; background:var(--navy); transform:rotate(24deg); transform-origin:left; }
.clock-block span:last-child { display:grid; }.clock-block strong { font-size:18px; font-variant-numeric:tabular-nums; }.clock-block small { color:var(--muted); font-size:11px; }
.health-total { gap:10px; }.status-symbol { width:27px; height:27px; display:grid; place-items:center; color:white; border-radius:50%; font-size:17px; font-weight:800; }.status-symbol svg,.event-symbol svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }.health-total > span:last-child { display:grid; }.health-total small { color:var(--muted); font-size:11px; }.health-total strong { font-family:"Plex Condensed", sans-serif; font-size:24px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; }
.health-online .status-symbol { background:var(--green); }.health-online strong { color:var(--green); }.health-degraded .status-symbol { background:var(--amber); border-radius:3px; }.health-degraded strong { color:#bd7800; }.health-offline .status-symbol { background:var(--red); }.health-offline strong { color:var(--red); }
.header-action { align-self:center; margin:0 18px; white-space:nowrap; }

.button { min-height: 42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border:1px solid transparent; border-radius:8px; font-weight:700; font-size:13px; text-decoration:none; cursor:pointer; transition:background-color .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover { transform: translateY(-1px); }.button:active { transform:translateY(0); }.button-primary { color:white; background:var(--blue-strong); border-color:var(--blue-strong); box-shadow:0 6px 15px rgba(7,59,152,.18); }.button-primary:hover { background:#062f7d; }.button-secondary { color:var(--ink); background:white; border-color:var(--line-dark); }.button-secondary:hover { background:#f0f3f7; }.button-full { width:100%; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.85fr) 284px; grid-template-areas:"manifest manifest rail" "chart delivery rail"; background:var(--paper); }
.manifest { grid-area:manifest; margin:12px 8px 8px 14px; background:white; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.section-toolbar { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); }.section-toolbar h2 { margin:0; font-size:14px; }.text-link { color:var(--blue); font-size:12px; font-weight:650; text-decoration:none; }.text-link:hover { text-decoration:underline; }
.customer-filter { display:flex; align-items:center; gap:6px; }.customer-filter select { min-width:190px; min-height:34px; padding:4px 30px 4px 9px; border:0; background:#f2f4f7; font-size:12px; font-weight:600; }.filter-submit { min-height:32px; padding:0 10px; color:var(--blue); background:white; border:1px solid var(--line-dark); border-radius:3px; font-size:11px; font-weight:700; cursor:pointer; }
.manifest-table { width:100%; }.manifest-head, .manifest-row { display:grid; grid-template-columns:minmax(190px,1.6fr) minmax(125px,1.2fr) minmax(120px,1.15fr) 80px minmax(145px,1.35fr) 92px; align-items:center; }
.manifest-head { min-height:36px; color:white; background:var(--navy); font-size:11px; font-weight:700; }.manifest-head > span { padding:0 12px; }.manifest-head a { display:inline-flex; align-items:center; gap:4px; text-decoration:none; }.manifest-head svg { width:10px; height:10px; fill:currentColor; }
.customer-band { min-height:32px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#f0f2f5; border-bottom:1px solid var(--line); }.customer-band a { font-family:"Plex Condensed", sans-serif; font-weight:800; font-size:14px; text-decoration:none; }.customer-summary { display:flex; align-items:center; gap:5px; font-size:11px; font-variant-numeric:tabular-nums; }.mini-dot { width:7px; height:7px; border-radius:50%; margin-left:5px; }.dot-online { background:var(--green); }.dot-degraded { background:var(--amber); }.dot-offline { background:var(--red); }
.manifest-row { position:relative; min-height:35px; color:#273147; border-bottom:1px solid var(--line); font-size:11px; }.manifest-row:last-child { border-bottom:0; }.manifest-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#aab1bd; }.manifest-row.state-online::before { background:var(--green); }.manifest-row.state-degraded::before { background:var(--amber); }.manifest-row.state-offline::before { background:var(--red); }
.manifest-row > span { min-width:0; height:100%; display:flex; align-items:center; padding:4px 12px; border-right:1px solid var(--line); }.manifest-row > span:last-child { border-right:0; justify-content:center; }.monitor-name { gap:9px; }.monitor-name > span { min-width:0; display:grid; }.monitor-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.monitor-name small { color:var(--muted); font-size:11px; }
.kind-mark { width:17px; height:17px; flex:0 0 17px; border:1.5px solid #30415f; border-radius:50%; position:relative; }.kind-http::after,.kind-icmp::after { content:""; position:absolute; left:3px; right:3px; top:7px; height:1px; background:#30415f; box-shadow:0 -4px 0 #30415f,0 4px 0 #30415f; }.kind-pfsense,.kind-pfsense_wan { border-radius:4px 4px 8px 8px; }.kind-pfsense::after,.kind-pfsense_wan::after { content:""; position:absolute; inset:4px; border:1px solid #30415f; }.kind-tcp { border-radius:3px; }.kind-linux_agent { border-radius:3px; }.kind-linux_agent::after { content:""; position:absolute; left:3px; right:3px; top:4px; height:1.5px; background:#30415f; box-shadow:0 4px 0 #30415f; }
.status-badge { max-width:100%; display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; }.status-badge i { width:9px; height:9px; border:2px solid currentColor; border-radius:50%; }.status-online { color:#106c26; background:var(--green-soft); }.status-degraded { color:#9b6200; background:var(--amber-soft); }.status-offline { color:#bd1721; background:var(--red-soft); }.status-pending,.status-disabled { color:#5e6678; background:#eef0f3; }
.status-ignored { color:var(--muted); background:#eef0f3; }
.manifest-row.state-offline .status-badge { color:white; background:var(--red); }.manifest-row.state-degraded .status-badge { color:white; background:var(--amber); }
.status-split { display:inline-grid; grid-template-columns:auto auto; overflow:hidden; border-radius:5px; color:white; font-size:11px; font-weight:800; line-height:1; white-space:nowrap; box-shadow:0 0 0 1px rgba(0,0,0,.06); }.status-split b { padding:6px 7px; font-weight:inherit; }.status-split b:first-child { background:var(--red); }.status-split b:last-child { background:var(--amber); }
.icon-action,.text-button { border:0; color:var(--blue); background:transparent; cursor:pointer; padding:5px; font-size:11px; font-weight:700; }.icon-action:hover,.text-button:hover { text-decoration:underline; }
.monitor-name a,.monitor-table-link { color:inherit; text-decoration:none; }.monitor-name a:hover strong,.monitor-table-link:hover strong { color:var(--blue); text-decoration:underline; }.row-actions { display:flex; align-items:center; gap:3px; white-space:nowrap; }

.incident-rail { grid-area:rail; margin:12px 14px 8px 0; background:white; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.incident-rail section + section { border-top:1px solid var(--line); }.rail-heading { min-height:43px; display:flex; align-items:center; gap:8px; padding:0 12px; }.rail-heading h2 { margin:0; font-size:13px; }.count-badge { min-width:20px; height:20px; display:grid; place-items:center; border-radius:10px; font-size:10px; font-weight:800; }.count-danger { color:white; background:var(--red); }.event-list { list-style:none; padding:0; margin:0; }.event-row { min-height:62px; display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:start; padding:8px 10px 6px; border-top:1px solid var(--line); border-left:3px solid var(--line-dark); }.event-danger { border-left-color:var(--red); }.event-success { border-left-color:var(--green); }.event-symbol { width:22px; height:22px; display:grid; place-items:center; color:white; border-radius:50%; background:var(--red); font-weight:800; }.event-success .event-symbol { background:var(--green); }.event-row > span:nth-child(2) { display:grid; min-width:0; }.event-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.event-row small { color:var(--ink); font-size:10px; }.event-row em { color:var(--red); font-size:10px; font-style:normal; }.event-success em { color:var(--green); }.event-row time { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }.rail-link { display:block; padding:8px 12px; color:var(--blue); text-align:right; font-size:10px; text-decoration:none; }.quiet-state { display:flex; align-items:center; gap:8px; padding:8px 12px 18px; margin:0; color:var(--muted); font-size:11px; }.status-light { width:9px; height:9px; display:inline-block; border-radius:50%; }.status-light.status-online { background:var(--green); }.status-light.status-pending { background:#8790a0; }

.latency-panel { grid-area:chart; margin:0 8px 8px 14px; padding:0 14px 10px; background:white; border:1px solid var(--line); border-radius:10px; }.delivery-panel { grid-area:delivery; margin:0 14px 14px; padding:0 14px 12px; background:white; border:1px solid var(--line); border-radius:10px; }
.panel-heading { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; }.panel-heading h2 { margin:0; font-size:13px; }.panel-heading > span { color:var(--muted); font-size:11px; }
.chart-shell { position:relative; height:116px; margin-left:28px; border-left:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.chart-shell::before,.chart-shell::after { content:""; position:absolute; left:0; right:0; border-top:1px solid #e5e8ee; pointer-events:none; }
.chart-shell::before { top:33%; }.chart-shell::after { top:66%; }
.chart-shell svg { width:100%; height:94px; overflow:visible; }.chart-shell polyline { fill:none; vector-effect:non-scaling-stroke; stroke-width:2; }.line-availability { stroke:#145ed1; }.line-latency { stroke:#38a640; }.chart-axis { position:absolute; right:calc(100% + 8px); top:0; bottom:18px; display:flex; flex-direction:column; justify-content:space-between; color:var(--muted); font-size:11px; }.chart-times { display:flex; justify-content:space-between; padding-top:3px; color:var(--muted); font-size:11px; }.chart-note { margin:7px 0 0; color:var(--muted); font-size:11px; }
.compact-table { border:1px solid var(--line); }.compact-head,.compact-row { display:grid; grid-template-columns:110px 1.2fr 80px 1.5fr 90px; min-height:30px; align-items:center; }.compact-head { background:#f0f2f5; font-size:11px; font-weight:700; }.compact-row { border-top:1px solid var(--line); font-size:11px; }.compact-head span,.compact-row > * { padding:5px 8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.delivery-sent { color:var(--green); font-weight:700; }.delivery-failed { color:var(--red); font-weight:700; }

.incident-rail,.latency-panel,.delivery-panel { border-radius:5px; }
.delivery-panel { margin:0 8px 14px 0; }
.manifest-row,.event-row,.compact-row { font-size:11px; }
.monitor-name strong,.event-row strong { font-size:11px; }
.page-header h1,.login-copy h1 { font-family:"Plex Condensed",sans-serif; }

.page-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 28px; background:white; border-bottom:1px solid var(--line); }.page-header h1 { margin:0; font-family:"Plex Condensed",sans-serif; font-size:28px; letter-spacing:-.02em; }.page-header p { margin:6px 0 0; color:var(--muted); font-size:13px; }.back-link { display:inline-block; margin-bottom:8px; color:var(--blue); font-size:11px; text-decoration:none; }.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.page-body { padding:24px 28px 36px; }.narrow-body { max-width:1000px; margin:0 auto; }.filter-bar { display:flex; justify-content:flex-end; margin-bottom:14px; }.search-field { display:flex; width:min(460px,100%); }.search-field input { flex:1; border-radius:8px 0 0 8px; }.search-field button { padding:0 16px; color:white; background:var(--navy); border:1px solid var(--navy); border-radius:0 8px 8px 0; cursor:pointer; }
.data-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:white; }.data-row { min-height:68px; display:grid; grid-template-columns:minmax(210px,2fr) repeat(2,minmax(90px,.65fr)) minmax(110px,.75fr) 24px; gap:18px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); text-decoration:none; }.data-row:last-child { border-bottom:0; }.data-row:hover { background:#f4f7fb; }.row-primary { min-width:0; display:grid; }.row-primary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.row-primary small,.data-row > span small { display:block; color:var(--muted); font-size:10px; }.data-row > span b { display:block; font-size:18px; font-weight:550; font-variant-numeric:tabular-nums; }.row-state { display:flex; align-items:center; gap:7px; font-size:12px; }.row-chevron { color:var(--blue); font-size:26px; }
.empty-state { min-height:320px; display:grid; place-items:center; align-content:center; gap:10px; padding:40px; text-align:center; }.empty-state h1,.empty-state h2,.empty-state h3 { margin:0; }.empty-state p { max-width:520px; margin:0 0 8px; color:var(--muted); font-size:13px; }.empty-signal { height:50px; display:flex; align-items:flex-end; gap:5px; }.empty-signal i { width:9px; background:var(--navy); }.empty-signal i:nth-child(1){height:18px}.empty-signal i:nth-child(2){height:33px}.empty-signal i:nth-child(3){height:48px}

.form-sheet { background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.form-sheet fieldset { margin:0; padding:22px; border:0; border-bottom:1px solid var(--line); }.form-sheet legend { float:left; width:100%; margin:0 0 18px; padding:0; font-size:14px; font-weight:800; }.form-sheet legend + * { clear:both; }
.form-grid { display:grid; gap:16px 18px; }.two-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }.three-cols { grid-template-columns:repeat(3,minmax(0,1fr)); }.four-cols { grid-template-columns:repeat(4,minmax(0,1fr)); }.span-2 { grid-column:span 2; }
label { display:grid; gap:7px; color:#30394d; font-size:11px; font-weight:700; } input,select,textarea { width:100%; min-height:42px; padding:9px 11px; color:var(--ink); background:white; border:1px solid #b8c0cc; border-radius:7px; }.form-grid label small,label > small { color:var(--muted); font-size:9px; font-weight:450; }.checkbox-line { display:flex; grid-auto-flow:column; align-items:center; justify-content:start; gap:8px; }.checkbox-line input,.check-row input { width:16px; min-height:16px; accent-color:var(--blue); }
.form-error { padding:12px 14px; color:#8e1119; background:var(--red-soft); border:1px solid #eca3a8; border-radius:8px; font-size:12px; }.form-sheet > .form-error { margin:20px 20px 0; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; padding:18px 22px; background:#f4f5f7; }.type-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }.type-picker label { position:relative; display:block; cursor:pointer; }.type-picker input { position:absolute; opacity:0; pointer-events:none; }.type-picker span { min-height:78px; display:grid; align-content:center; gap:4px; padding:12px; border:1px solid var(--line-dark); border-radius:8px; background:white; }.type-picker strong { font-size:12px; }.type-picker small { color:var(--muted); font-size:10px; font-weight:450; }.type-picker input:checked + span { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:#f0f5ff; }.type-picker input:disabled + span { cursor:not-allowed; opacity:.68; }.type-picker input:disabled:checked + span { opacity:1; }.type-picker input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent); }.monitor-state-control { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }.monitor-state-control input { width:18px; height:18px; margin-top:2px; accent-color:var(--blue); }.monitor-state-control span { display:grid; gap:4px; }.monitor-state-control strong { font-size:13px; }.monitor-state-control small { color:var(--muted); font-size:11px; line-height:1.45; }
.policy-note,.provider-note { display:flex; gap:12px; align-items:center; margin-top:18px; padding:12px 14px; color:#4d3b0f; background:var(--amber-soft); border:1px solid #ecd18e; border-radius:8px; font-size:10px; }.policy-note strong,.provider-note strong { white-space:nowrap; }.policy-note span,.provider-note span { color:#5f5439; }
.agent-onboarding { display:flex; gap:12px; align-items:center; margin-top:14px; padding:12px 14px; color:var(--blue-strong); background:var(--paper); border:1px solid var(--line-dark); border-radius:8px; font-size:11px; line-height:1.4; }.agent-onboarding strong { white-space:nowrap; }.agent-onboarding[hidden] { display:none; }

.setup-warning { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:13px 15px; color:#4d3b0f; background:var(--amber-soft); border:1px solid #ecd18e; border-radius:8px; font-size:11px; }.setup-warning a { color:#704b00; font-weight:700; }.setup-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.65fr); gap:18px; align-items:start; }.setup-sheet,.setup-side { background:white; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.setup-heading { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); }.setup-heading h2 { margin:0; font-size:16px; }.setup-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }.setup-heading > span { color:var(--muted); font-size:10px; font-weight:700; }.setup-steps { counter-reset:setup; list-style:none; margin:0; padding:0; }.setup-steps > li { counter-increment:setup; position:relative; padding:20px 20px 20px 62px; border-bottom:1px solid var(--line); }.setup-steps > li:last-child { border-bottom:0; }.setup-steps > li::before { content:counter(setup); position:absolute; left:20px; top:20px; width:26px; height:26px; display:grid; place-items:center; color:white; background:var(--navy); border-radius:50%; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }.step-copy { display:grid; gap:4px; }.step-copy strong { font-size:13px; }.step-copy span { color:var(--muted); font-size:11px; line-height:1.45; }.step-copy b { color:var(--ink); }.agent-values { display:grid; gap:10px; margin:16px 0; }.agent-values > div { display:grid; gap:6px; }.agent-values dt { color:#30394d; font-size:10px; font-weight:750; }.agent-values dd { display:flex; gap:7px; margin:0; }.agent-values input { min-width:0; font-variant-numeric:tabular-nums; }.copy-button { min-height:42px; padding:0 12px; color:var(--blue-strong); background:white; border:1px solid var(--line-dark); border-radius:7px; cursor:pointer; font-size:10px; font-weight:750; }.copy-button:hover { background:#eff4fb; }.agent-settings-table { border:1px solid var(--line); }.agent-settings-table > div { display:grid; grid-template-columns:minmax(150px,1fr) minmax(100px,.7fr); min-height:36px; align-items:center; border-bottom:1px solid var(--line); }.agent-settings-table > div:last-child { border-bottom:0; }.agent-settings-table span,.agent-settings-table strong { padding:7px 10px; font-size:10px; }.agent-settings-table strong { color:var(--blue-strong); background:#f4f7fb; font-variant-numeric:tabular-nums; }.setup-summary { margin:0; }.setup-summary > div { display:grid; gap:4px; padding:12px 16px; border-bottom:1px solid var(--line); }.setup-summary dt { color:var(--muted); font-size:9px; }.setup-summary dd { margin:0; overflow-wrap:anywhere; font-size:11px; font-weight:700; }.setup-sync { display:grid; gap:7px; padding:16px; }.setup-sync small,.setup-rotate small { color:var(--muted); font-size:9px; text-align:center; }.setup-rotate { display:grid; gap:5px; padding:0 16px 16px; }.setup-rotate .text-button { justify-self:center; color:var(--red); }

.detail-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); gap:18px; }.detail-main,.detail-side { background:white; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.customer-side { min-width:0; display:grid; align-self:start; gap:18px; }.customer-side .detail-side { min-width:0; }.section-title { min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--line); }.section-title h2 { margin:0; font-size:14px; }.section-title span { color:var(--muted); font-size:10px; }.detail-main .data-row { grid-template-columns:1fr 100px 120px; }.customer-monitor-row { color:var(--ink); }.contact-list { list-style:none; padding:0; margin:0; }.contact-list li { display:grid; gap:3px; padding:12px 16px; border-bottom:1px solid var(--line); }.contact-list small { color:var(--muted); font-size:10px; }.channel-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }.channel-tags b,.channel-label { padding:3px 6px; color:#33405a; background:#edf0f4; border-radius:4px; font-size:8px; }.channel-tags .access-enabled { color:#116d29; background:var(--green-soft); }.compact-form { display:grid; gap:10px; padding:16px; }.compact-form h3 { margin:0 0 4px; font-size:12px; }.portal-user-form { border-top:1px solid var(--line); }.portal-user-form p { margin:-2px 0 4px; color:var(--muted); font-size:10px; line-height:1.45; }.check-row { display:flex; flex-wrap:wrap; gap:12px; }.check-row label { display:flex; grid-auto-flow:column; align-items:center; gap:5px; font-size:10px; }
.contact-list > li.contact-item { display:block; padding:0; }.contact-summary { display:grid; gap:5px; padding:12px 16px; }.contact-summary > span:first-child { min-width:0; display:grid; gap:2px; }.contact-summary strong,.contact-summary small { overflow-wrap:anywhere; }.channel-tags .channel-disabled { color:var(--muted); }.contact-editor { border-top:1px solid var(--line); background:var(--paper); }.contact-editor summary { min-height:38px; display:flex; align-items:center; padding:0 16px; color:var(--blue); cursor:pointer; font-size:11px; font-weight:750; list-style:none; }.contact-editor summary::-webkit-details-marker { display:none; }.contact-editor summary::after { content:"+"; margin-left:auto; font-size:13px; }.contact-editor[open] summary::after { content:"−"; }.contact-edit-form { display:grid; gap:10px; padding:4px 16px 14px; }.contact-enabled { display:flex; align-items:flex-start; gap:8px; padding:9px 0; }.contact-enabled input { width:16px; min-height:16px; margin-top:2px; }.contact-enabled span { display:grid; gap:2px; }.contact-enabled small { line-height:1.35; }.contact-delete-form { display:flex; justify-content:center; padding:10px 16px 12px; border-top:1px solid var(--line); }.text-danger { color:var(--red); }
.inline-empty { min-height:90px; display:grid; place-items:center; padding:20px; color:var(--muted); font-size:11px; text-align:center; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; background:white; }.data-table { width:100%; border-collapse:collapse; font-size:11px; }.data-table th { height:43px; padding:0 12px; color:white; background:var(--navy); text-align:left; white-space:nowrap; }.data-table td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }.data-table tr:last-child td { border-bottom:0; }.data-table td strong,.data-table td small { display:block; }.data-table td small { max-width:340px; color:var(--muted); font-size:9px; }
.notification-table { min-width:920px; }.notification-reference { min-width:360px; }.notification-reference > strong { margin-bottom:3px; }.notification-reference > span { display:block; max-width:72ch; overflow-wrap:anywhere; color:var(--muted); line-height:1.4; }.notification-action { margin-top:8px; }.button-compact { min-height:31px; padding:0 10px; font-size:11px; }
.monitor-history-header .status-badge { flex:0 0 auto; font-size:11px; }.history-page { display:grid; gap:16px; max-width:1500px; margin:0 auto; }.history-toolbar { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }.history-toolbar h2 { margin:0; font-size:20px; }.history-toolbar p { margin:4px 0 0; color:var(--muted); font-size:11px; }.period-switch { display:flex; padding:3px; background:var(--paper); border-radius:8px; }.period-switch a { min-height:34px; display:grid; place-items:center; padding:0 14px; color:var(--muted); border-radius:6px; font-size:11px; font-weight:700; text-decoration:none; }.period-switch a:hover { color:var(--blue); }.period-switch a.is-active { color:var(--surface); background:var(--navy-2); box-shadow:0 5px 13px rgba(8,24,55,.2); }.history-summary { display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy); border-radius:10px; overflow:hidden; }.history-summary > span { min-height:66px; display:grid; align-content:center; gap:3px; padding:10px 16px; color:var(--surface); border-right:1px solid color-mix(in srgb, var(--surface) 16%, transparent); }.history-summary > span:last-child { border-right:0; }.history-summary strong { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }.history-summary small { color:color-mix(in srgb, var(--surface) 72%, var(--navy)); font-size:11px; }.history-error { display:grid; gap:5px; padding:16px 18px; color:var(--red); background:var(--red-soft); border:1px solid var(--red); border-radius:10px; }.history-error strong { font-size:13px; }.history-error span { font-size:11px; line-height:1.45; }.metric-group { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }.metric-group > header { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:var(--paper); border-bottom:1px solid var(--line); }.metric-group > header h2 { margin:0; font-size:13px; }.metric-group > header span { color:var(--muted); font-size:11px; }.metric-row { min-height:154px; display:grid; grid-template-columns:minmax(190px,.8fr) minmax(130px,.45fr) minmax(360px,1.75fr); align-items:stretch; border-bottom:1px solid var(--line); }.metric-row:last-child { border-bottom:0; }.metric-copy,.metric-current,.metric-visual { min-width:0; padding:15px 16px; }.metric-copy,.metric-current { border-right:1px solid var(--line); }.metric-copy { display:grid; align-content:center; gap:6px; }.metric-copy h3 { margin:0; font-size:13px; }.metric-copy code { overflow:hidden; color:var(--muted); font-family:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.metric-error { margin:2px 0 0; color:var(--red); font-size:11px; line-height:1.35; }.metric-current { display:grid; align-content:center; gap:5px; }.metric-current strong { font-size:20px; font-weight:600; }.metric-current small { color:var(--muted); font-size:11px; line-height:1.3; }.metric-visual { display:grid; align-content:center; gap:6px; }.metric-visual svg { display:block; width:100%; height:82px; overflow:visible; }.metric-visual line { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }.metric-visual polyline { fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.metric-stats { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }.metric-stats b { color:var(--ink); font-weight:700; }.metric-empty { margin:auto; color:var(--muted); font-size:11px; text-align:center; }.metric-unavailable { background:var(--paper); }.metric-unavailable .metric-visual polyline { stroke:var(--muted); }
.incident-ledger { display:grid; gap:10px; }.ledger-row { display:grid; grid-template-columns:130px minmax(260px,1fr) minmax(230px,.75fr) auto; gap:20px; align-items:center; padding:16px; background:white; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:9px; }.ledger-resolved { border-left-color:var(--green); }.ledger-state { display:flex; align-items:center; gap:8px; color:var(--red); font-size:11px; }.ledger-resolved .ledger-state { color:var(--green); }.ledger-row h2 { margin:3px 0; font-size:14px; }.ledger-row p { margin:0; color:var(--muted); font-size:10px; }.incident-id { color:var(--muted); font-size:9px; }.incident-ticket-link { display:inline-flex; margin-top:7px; color:var(--blue); font-size:10px; font-weight:750; text-decoration-thickness:1px; text-underline-offset:3px; }.ledger-row dl { display:flex; gap:24px; margin:0; }.ledger-row dl div { display:grid; gap:3px; }.ledger-row dt { color:var(--muted); font-size:9px; }.ledger-row dd { margin:0; font-size:10px; font-variant-numeric:tabular-nums; }.acknowledged { color:var(--green); font-size:10px; font-weight:700; }

.settings-layout { display:grid; grid-template-columns:210px minmax(0,900px); gap:24px; padding:24px 28px 50px; }.settings-index { position:sticky; top:24px; align-self:start; display:grid; padding:8px; background:white; border:1px solid var(--line); border-radius:10px; }.settings-index a { padding:10px 12px; border-radius:6px; color:#3f485c; text-decoration:none; font-size:11px; }.settings-index a:hover { color:var(--blue); background:#eff4fb; }.settings-content { display:grid; gap:18px; }.settings-section { scroll-margin-top:18px; background:white; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.settings-heading { min-height:72px; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }.settings-heading h2 { margin:0; font-size:16px; }.settings-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; }.section-state { padding:4px 8px; color:var(--muted); background:#edf0f3; border-radius:5px; font-size:11px; font-weight:750; }.section-state.is-on { color:#116d29; background:var(--green-soft); }.settings-form { padding:18px; }.settings-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }.settings-actions > span { color:var(--muted); font-size:11px; }.test-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 18px; background:#f4f5f7; border-top:1px solid var(--line); }.test-row > span { color:var(--muted); font-size:11px; line-height:1.45; }.test-row label { max-width:360px; flex:1; }.channel-state-row { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 18px; border-top:1px solid var(--line); background:white; }.channel-state-copy { min-width:0; display:grid; gap:5px; line-height:1.35; }.channel-state-copy strong { display:block; font-size:13px; }.channel-state-copy small { display:block; color:var(--muted); font-size:11px; }.channel-state-row form { flex:0 0 auto; }.channel-state-row .button { min-width:190px; }.section-context { color:var(--muted); font-size:11px; font-weight:700; }

.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--navy); }.login-board { width:min(440px,100%); padding:32px; background:white; border-radius:14px; box-shadow:0 28px 70px rgba(0,0,0,.28); }.login-brand { display:flex; align-items:center; gap:10px; color:var(--navy); font-size:20px; font-weight:800; }.login-brand .brand-mark i { background:var(--navy); }.login-status { display:flex; align-items:center; gap:7px; margin:28px 0 18px; color:var(--green); font-size:10px; font-weight:750; }.login-copy h1 { max-width:360px; margin:0; font-family:"Plex Condensed",sans-serif; font-size:31px; line-height:1.07; letter-spacing:-.025em; }.login-copy p { margin:12px 0 24px; color:var(--muted); font-size:12px; line-height:1.55; }.login-form { display:grid; gap:14px; }.login-help { margin:18px 0 0; color:var(--muted); font-size:9px; text-align:center; }

@media (max-width: 1180px) {
  :root { --sidebar: 78px; }
  .brand { justify-content:center; padding:0; }.brand > span:last-child,.nav-link:not(.is-active)::after,.nav-link { font-size:0; }.nav-link { justify-content:center; padding:0; }.nav-link .nav-icon { margin:0; }.sidebar-foot .storage-note,.account-copy,.logout { display:none; }.account-row { justify-content:center; }
  .operations-header { grid-template-columns:minmax(160px,1fr) repeat(3,105px) auto; }.clock-block { display:none; }
  .manifest-head,.manifest-row { grid-template-columns:minmax(180px,1.5fr) minmax(105px,1fr) 120px 70px minmax(125px,1fr) 80px; }
  .dashboard-grid { grid-template-columns:minmax(0,1fr) minmax(300px,.8fr) 250px; }
}

@media (max-width: 900px) {
  .app-shell { display:block; }.sidebar { position:fixed; inset:auto 0 0 0; z-index:50; width:100%; height:64px; flex-direction:row; border:0; border-top:1px solid #18345d; }.brand,.sidebar-foot { display:none; }.nav-stack { width:100%; grid-template-columns:repeat(6,1fr); gap:0; padding:5px; }.nav-stack-client { grid-template-columns:repeat(4,1fr); }.nav-link { min-height:52px; border-radius:6px; }.nav-link.is-active { background:#0b428e; }
  .main-canvas { padding-bottom:64px; }.operations-header { grid-template-columns:1fr repeat(3,88px); }.operations-title { padding-left:14px; }.health-total { justify-content:center; padding:8px; }.health-total .status-symbol { display:none; }.header-action { position:fixed; right:14px; bottom:78px; z-index:40; margin:0; box-shadow:0 10px 28px rgba(7,59,152,.32); }.dashboard-grid { display:block; }.manifest,.incident-rail,.latency-panel,.delivery-panel { margin:12px; }.manifest { overflow:auto; }.manifest-table { min-width:860px; }.incident-rail { display:grid; grid-template-columns:1fr 1fr; }.incident-rail section + section { border-top:0; border-left:1px solid var(--line); }
  .page-header { min-height:86px; padding:16px; }.page-header h1 { font-size:24px; }.page-body { padding:16px 14px 28px; }.detail-layout,.settings-layout,.setup-layout { grid-template-columns:1fr; }.settings-layout { padding:16px 14px 90px; }.settings-index { position:static; grid-template-columns:repeat(5,auto); overflow:auto; }.ledger-row { grid-template-columns:110px 1fr; }.ledger-row dl { grid-column:2; }.four-cols,.three-cols { grid-template-columns:repeat(2,1fr); }.type-picker { grid-template-columns:repeat(2,1fr); }
  .metric-row { grid-template-columns:minmax(170px,.75fr) 135px minmax(300px,1.5fr); }
}

@media (max-width: 620px) {
  .nav-stack { grid-template-columns:repeat(6,1fr); }.operations-header { min-height:112px; grid-template-columns:repeat(3,1fr); }.operations-title { grid-column:1/-1; min-height:55px; border-bottom:1px solid var(--line); }.health-total { border-right:1px solid var(--line); }.health-total strong { font-size:21px; }.health-total small { font-size:11px; }
  .incident-rail { display:block; }.incident-rail section + section { border-left:0; border-top:1px solid var(--line); }.compact-head,.compact-row { grid-template-columns:82px 1fr 62px 84px; }.compact-head span:nth-child(4),.compact-row > *:nth-child(4) { display:none; }
  .page-header { align-items:flex-start; }.page-header p { font-size:11px; }.page-header .button { min-width:42px; padding:0 11px; }.two-cols,.three-cols,.four-cols { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.form-sheet fieldset { padding:17px; }.type-picker { grid-template-columns:1fr 1fr; }.form-actions { position:sticky; bottom:64px; z-index:10; }.data-row { grid-template-columns:1fr auto; }.data-row > span:nth-child(2),.data-row > span:nth-child(3) { display:none; }.detail-layout { display:block; }.detail-side { margin-top:14px; }.customer-side { margin-top:14px; }.customer-side .detail-side { margin-top:0; }.ledger-row { display:block; }.ledger-row > * + * { margin-top:12px; }.settings-index { grid-template-columns:repeat(6,max-content); }.settings-actions,.test-row,.channel-state-row { align-items:stretch; flex-direction:column; }.channel-state-row .button { width:100%; }.login-board { padding:25px 20px; }.setup-warning,.agent-onboarding { align-items:flex-start; flex-direction:column; }.setup-steps > li { padding:18px 14px 18px 50px; }.setup-steps > li::before { left:14px; top:18px; }.agent-values dd { flex-wrap:wrap; }.agent-values input { flex:1 1 100%; }.copy-button { flex:1; }
  .history-toolbar { align-items:stretch; flex-direction:column; }.period-switch { display:grid; grid-template-columns:repeat(3,1fr); }.history-summary { grid-template-columns:1fr 1fr; }.history-summary > span:nth-child(2) { border-right:0; }.history-summary > span:nth-child(-n+2) { border-bottom:1px solid color-mix(in srgb, var(--surface) 16%, transparent); }.metric-row { grid-template-columns:minmax(0,1fr) minmax(115px,.45fr); min-height:0; }.metric-copy,.metric-current { padding:13px 14px; }.metric-current { border-right:0; }.metric-current strong { font-size:20px; }.metric-visual { grid-column:1/-1; min-height:125px; padding:12px 14px 14px; border-top:1px solid var(--line); }.metric-visual svg { height:88px; }
}

@media (max-width: 620px) {
  .app-shell { display:flex; flex-direction:column; }
  .sidebar { position:sticky; inset:0 0 auto; order:0; }
  .main-canvas { order:1; padding-bottom:12px; }
  .operations-header { min-height:0; grid-template-columns:repeat(3,1fr); }
  .operations-title { grid-column:1/-1; }
  .clock-block { display:flex; grid-column:1/-1; justify-content:center; min-height:48px; border-bottom:1px solid var(--line); }
  .clock-face { width:24px; height:24px; }
  .header-action { position:static; grid-column:1/-1; min-height:42px; margin:8px 12px 10px; }
  .section-toolbar { flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .customer-filter { flex:1 1 100%; }
  .customer-filter select { min-width:0; flex:1; }
  .manifest { overflow:hidden; }
  .manifest-table { min-width:0; }
  .manifest-head { display:none; }
  .customer-band { min-height:38px; }
  .manifest-row { min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:7px 9px; }
  .manifest-row > span { height:auto; padding:0; border:0; }
  .manifest-row > span:nth-child(2),.manifest-row > span:nth-child(4),.manifest-row > span:nth-child(5),.manifest-row > span:nth-child(6) { display:none; }
  .manifest-row > span:nth-child(3) { justify-self:end; align-self:center; }
  .monitor-name strong { font-size:12px; }
  .monitor-name small { font-size:11px; }
  .status-badge { font-size:11px; }
  .incident-rail,.latency-panel,.delivery-panel,.manifest { border-radius:4px; }
  .delivery-panel { margin:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}