/* Bin & Box operations-terminal design system.
 *
 * The shared look: navy structure, teal as the single hot accent, dense hairline layout.
 * Type split: SANS carries all language (labels, nav, buttons, prose); MONO is reserved for
 * data — tabular numerals, machine IDs, and the one signature (the "Bin & Box" wordmark) — so
 * the app reads as precise, not as a terminal shouting in all-caps monospace. Tokens here are
 * the PLATFORM brand — fixed, independent of per-tenant branding. Page-specific CSS should build
 * on these primitives, not re-declare colours. Semantic colours (ok/warn/crit) stay separate
 * from the accent.
 */
:root {
  --ink:#0E2033; --navy:#163B63; --navy-2:#22507F;
  --accent:#0E7E90; --accent-bright:#19A8BC; --accent-soft:#E1F0F2;
  --page:#EEF2F6; --surface:#FFFFFF; --surface-2:#F7F9FB;
  --line:#D8E0E9; --line-strong:#C3CEDA;
  --text:#16273A; --muted:#5E7085; --faint:#8A99AB;
  --ok:#2C8C63; --ok-soft:#E4F1EA; --warn:#B87514; --warn-soft:#F7ECD9; --crit:#C0433B; --crit-soft:#F7E2E0;
  --mono:"SF Mono","Cascadia Mono","Cascadia Code","JetBrains Mono","Roboto Mono",ui-monospace,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:6px;
}

.ops-mono { font-family:var(--mono); }
.ops-num  { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ops-lbl  { font-family:var(--sans); text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--faint); font-weight:600; }

/* ── Command bar ─────────────────────────────────────────────────────────── */
.ops-bar { background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 22px; height:52px; position:sticky; top:0; z-index:50; font-family:var(--sans); }
.ops-bar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--navy) 0%,var(--accent-bright) 60%,var(--accent) 100%); }
.ops-brand { display:flex; align-items:center; gap:11px; }
.ops-brand .chip { width:30px; height:30px; border-radius:5px; background:#fff; display:flex; align-items:center; justify-content:center; padding:3px; flex:none; }
.ops-brand .chip img { width:100%; height:100%; object-fit:contain; display:block; }
.ops-wm { font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:.02em; color:#fff; }
.ops-wm em { color:var(--accent-bright); font-style:normal; }
.ops-tag { font-family:var(--sans); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#9FB2C7; border:1px solid #2C4763; border-radius:3px; padding:2px 6px; margin-left:4px; }
.ops-nav { display:flex; align-items:center; gap:2px; }
.ops-nav a, .ops-nav button { font-family:var(--sans); font-size:12.5px; letter-spacing:.01em; font-weight:500; color:#A9B8C9; text-decoration:none; padding:7px 11px; border-radius:4px; background:none; border:0; cursor:pointer; }
.ops-nav a:hover, .ops-nav button:hover { color:#fff; background:#1B3149; }
.ops-nav a.active { color:#fff; box-shadow:inset 0 -2px 0 var(--accent-bright); }

.ops-wrap { max-width:1200px; margin:0 auto; padding:26px 22px 60px; }

/* ── Title block ─────────────────────────────────────────────────────────── */
.ops-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ops-eyebrow .rule { height:1px; flex:1; background:var(--line); }
.ops-h1 { font-family:var(--sans); font-size:24px; font-weight:680; letter-spacing:-.02em; margin:0 0 5px; color:var(--ink); text-wrap:balance; }
.ops-lede { color:var(--muted); margin:0 0 22px; max-width:64ch; }

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.ops-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:26px; }
.ops-kpi { background:var(--surface); padding:15px 17px 14px; position:relative; }
.ops-kpi.feature::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.ops-kpi.warn::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--warn); }
.ops-kpi .v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:27px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin:7px 0 3px; line-height:1; }
.ops-kpi .v.warnv { color:var(--warn); }
/* Text values (a plan name, a status) are language, not data — sans, and no big numeric size. */
.ops-kpi .v.small { font-family:var(--sans); font-size:17px; font-weight:650; letter-spacing:-.005em; text-transform:capitalize; }
.ops-kpi .sub { font-family:var(--sans); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ops-kpi .spark { position:absolute; right:14px; bottom:14px; }

/* ── Panel + table ───────────────────────────────────────────────────────── */
.ops-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.ops-panel__head { display:flex; align-items:center; justify-content:space-between; padding:12px 17px; border-bottom:1px solid var(--line); }
.ops-panel__head .ops-lbl { color:var(--muted); }
.ops-panel__head a { font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--accent); text-decoration:none; }
.ops-panel__head a:hover { text-decoration:underline; }
.ops-scroll { overflow-x:auto; }

.ops-table { width:100%; border-collapse:collapse; }
.ops-table thead th { font-family:var(--sans); text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; color:var(--faint); font-weight:600; text-align:left; padding:9px 17px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap; }
.ops-table th.r, .ops-table td.r { text-align:right; }
.ops-table tbody td { padding:12px 17px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ops-table tbody tr:last-child td { border-bottom:0; }
.ops-table tbody tr:hover td { background:var(--surface-2); }
.ops-table tbody tr:hover td:first-child { box-shadow:inset 2px 0 0 var(--accent); }
.ops-co { font-weight:600; color:var(--ink); font-size:13.5px; }
.ops-slug { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:1px; }
.ops-plan { font-family:var(--sans); font-size:13px; text-transform:capitalize; color:var(--navy); }
.ops-muted { color:var(--faint); }

/* ── Status chips ────────────────────────────────────────────────────────── */
.ops-chip { font-family:var(--sans); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding:2px 7px; border-radius:3px; display:inline-flex; align-items:center; gap:5px; }
.ops-chip .dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.ops-chip.ok { background:var(--ok-soft); color:var(--ok); }
.ops-chip.off { background:#EEF1F5; color:var(--faint); }
.ops-chip.warn { background:var(--warn-soft); color:var(--warn); }
.ops-chip.crit { background:var(--crit-soft); color:var(--crit); }

/* ── Buttons + row actions ───────────────────────────────────────────────── */
.ops-btn { font-family:var(--sans); font-size:12.5px; letter-spacing:.01em; font-weight:550; padding:8px 14px; border-radius:4px; border:1px solid var(--line-strong); background:var(--surface); color:var(--navy); cursor:pointer; text-decoration:none; display:inline-block; }
.ops-btn:hover { border-color:var(--accent); color:var(--accent); }
.ops-btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
.ops-btn.primary:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.ops-btn.danger:hover { border-color:var(--crit); color:var(--crit); }
.ops-actions a { font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--accent); text-decoration:none; padding:3px 0; }
.ops-actions a + a { margin-left:14px; color:var(--navy); }
.ops-actions a:hover { text-decoration:underline; }

/* ── Status line ─────────────────────────────────────────────────────────── */
.ops-foot { display:flex; align-items:center; gap:16px; margin-top:20px; font-family:var(--sans); font-size:11.5px; color:var(--faint); letter-spacing:.01em; flex-wrap:wrap; }
.ops-foot .live { color:var(--ok); display:inline-flex; align-items:center; gap:6px; }
.ops-foot .live .dot { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }

.ops-err { background:var(--crit-soft); color:var(--crit); border:1px solid var(--crit); padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:16px; }
.ops-loading { color:var(--muted); font-family:var(--sans); font-size:13px; padding:18px; }