/* ============================================================
   envoy-warehouse — operator console
   Ported verbatim from the Claude Design handoff (styles.css),
   which is the authoritative UI spec. Technical data-platform
   aesthetic. Dark, low-chrome, dense.

   THEMING SEAM
   A new client configuration overrides ONLY the --seam-* tokens
   in :root. Everything else is fixed console chrome and must NOT
   be rebranded per client.
   ============================================================ */

:root {
  /* ---- Fixed console surfaces (never client-themed) ---- */
  --bg:        #0c0e13;   /* app backdrop */
  --panel:     #12151c;   /* primary panels */
  --panel-2:   #171b23;   /* nested / raised */
  --panel-3:   #1d222c;   /* hover / active row */
  --inset:     #0a0c10;   /* code & result panes, wells */
  --line:      #262c37;   /* borders */
  --line-soft: #1c212b;   /* hairlines */

  /* ---- Text ---- */
  --fg:        #e7eaf0;
  --fg-dim:    #98a2b3;
  --fg-faint:  #6a7483;
  --fg-ghost:  #49515e;

  /* ---- Status (fixed semantic colours) ---- */
  --ok:        #34d399;  --ok-bg:   #34d39917;  --ok-line:  #34d39940;
  --warn:      #f5b14c;  --warn-bg: #f5b14c17;  --warn-line:#f5b14c40;
  --bad:       #f3635f;  --bad-bg:  #f3635f17;  --bad-line: #f3635f40;
  --quar:      #b388f5;  --quar-bg: #b388f517;  --quar-line:#b388f540;
  --info:      #5fa8ff;  --info-bg: #5fa8ff17;  --info-line:#5fa8ff40;
  --idle:      #7c8696;  --idle-bg: #7c869617;  --idle-line:#7c869633;

  /* ---- THEMING SEAM (client overrides these) ---- */
  --seam-accent:      #4f8cff;   /* primary action / selection */
  --seam-accent-weak: #4f8cff1f;
  --seam-accent-line: #4f8cff55;
  --seam-accent-fg:   #ffffff;
  --seam-logo-mark:   #4f8cff;

  /* ---- Geometry ---- */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 9px;
  --gap: 16px;
  --nav-w: 232px;
  --topbar-h: 52px;
  --subbar-h: 46px;

  /* density (driven by preference) */
  --row-h: 34px;
  --cell-py: 7px;
  --pad: 16px;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow: 0 1px 0 #ffffff06 inset, 0 8px 24px -12px #00000080;
}

/* density variants */
[data-density="compact"] { --row-h: 28px; --cell-py: 4px; --pad: 12px; --gap: 12px; }
[data-density="comfy"]   { --row-h: 40px; --cell-py: 10px; --pad: 20px; --gap: 20px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1px;
}
::selection { background: var(--seam-accent-line); }

/* scrollbars — thin, technical */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3140; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #38404f; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.tnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.2px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- App grid ---------- */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Left nav ---------- */
.nav {
  background: linear-gradient(180deg, #0e1117, #0b0d12);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.nav-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-mark {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--seam-logo-mark), #0c1a3a 90%);
  position: relative;
  box-shadow: 0 0 0 1px #ffffff14 inset, 0 4px 10px -4px var(--seam-accent-line);
}
.nav-mark::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 2px;
  background:
    linear-gradient(#ffffffcc, #ffffffcc) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(#ffffff88, #ffffff88) 0 20% / 70% 1.5px no-repeat,
    linear-gradient(#ffffff66, #ffffff66) 0 80% / 55% 1.5px no-repeat;
  opacity: .9;
}
.nav-word { display: flex; flex-direction: column; line-height: 1.1; }
.nav-word b { font-size: 13px; font-weight: 600; letter-spacing: -0.2px; }
.nav-word span { font-size: 9.5px; color: var(--fg-faint); letter-spacing: 1.2px; text-transform: uppercase; }

.nav-scroll { overflow-y: auto; flex: 1; padding: 10px 10px 16px; }
.nav-group-label {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--fg-ghost); padding: 14px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--fg-dim); cursor: pointer; position: relative;
  font-size: 13px; user-select: none;
}
.nav-item:hover { background: var(--panel-2); color: var(--fg); }
.nav-item.active { background: var(--seam-accent-weak); color: var(--fg); }
.nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 2.5px; border-radius: 2px; background: var(--seam-accent);
}
.nav-item .ico { width: 16px; height: 16px; flex: none; color: currentColor; opacity: .85; }
.nav-item span { white-space: nowrap; }
.nav-item .badge {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: 20px; background: var(--panel-3); color: var(--fg-dim);
}
.nav-item .badge.warn { color: var(--warn); background: var(--warn-bg); }
.nav-item .badge.bad  { color: var(--bad);  background: var(--bad-bg); }

.nav-foot { border-top: 1px solid var(--line-soft); padding: 10px 12px; }
.nav-user { display: flex; align-items: center; gap: 9px; }
.nav-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #3a4763, #232b3d);
  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--fg);
}

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* top bar */
.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-dim); white-space: nowrap; }
.crumbs b { color: var(--fg); font-weight: 600; }
.crumbs .sep { color: var(--fg-ghost); }
.topbar-spacer { flex: 1; }

.env-pill {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-dim);
}
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg); }

/* sub bar — global scoping filters */
.subbar {
  height: var(--subbar-h); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow-x: auto; overflow-y: hidden;
}
.subbar > * { flex: none; }
.subbar .scope-label {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--fg-ghost); margin-right: 2px;
}

/* content scroller */
.content { flex: 1; overflow: auto; min-height: 0; }
.page { padding: 20px; max-width: 1400px; margin: 0 auto; }
.page-wide { max-width: none; }

/* ---------- Filter select / segmented ---------- */
.fsel {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--fg); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.fsel:hover { border-color: #323a48; background: var(--panel-3); }
.fsel .k { color: var(--fg-faint); font-size: 11px; }
.fsel .caret { color: var(--fg-faint); }
.fsel.on { border-color: var(--seam-accent-line); background: var(--seam-accent-weak); }

.seg { display: inline-flex; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--fg-dim);
  font-size: 12px; padding: 4px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.seg button.on { background: var(--panel-3); color: var(--fg); box-shadow: 0 1px 2px #0006; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: 30px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--fg);
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--panel-3); border-color: #333b49; }
.btn .ico { width: 14px; height: 14px; }
.btn.primary { background: var(--seam-accent); border-color: var(--seam-accent); color: var(--seam-accent-fg); font-weight: 500; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); }
.btn.danger:hover { background: #f3635f26; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn.ghost:hover { background: var(--panel-2); color: var(--fg); }
.btn.sm { height: 25px; padding: 0 9px; font-size: 11.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Panels / cards ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.panel-h {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
.panel-h h3 { font-size: 13px; white-space: nowrap; }
.panel-h .sub { color: var(--fg-faint); font-size: 11.5px; white-space: nowrap; }
.panel-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-b { padding: 14px; }

.grid { display: grid; gap: var(--gap); }

/* ---------- Status chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; line-height: 1;
  padding: 3px 8px 3px 7px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--fg-dim); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok   { color: var(--ok);   border-color: var(--ok-line);   background: var(--ok-bg); }
.chip.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.chip.bad  { color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-bg); }
.chip.quar { color: var(--quar); border-color: var(--quar-line); background: var(--quar-bg); }
.chip.info { color: var(--info); border-color: var(--info-line); background: var(--info-bg); }
.chip.idle { color: var(--idle); border-color: var(--idle-line); background: var(--idle-bg); }
.chip.solid.ok { background: var(--ok); color: #06281c; border-color: transparent; font-weight: 600; }

/* tag (square, for ids / counts) */
.tag {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 3px;
  background: var(--panel-3); color: var(--fg-dim); border: 1px solid var(--line-soft); white-space: nowrap;
}
.tag.accent { color: var(--seam-accent); background: var(--seam-accent-weak); border-color: var(--seam-accent-line); }

/* ---------- KPI band ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kpi { background: var(--panel); padding: 14px 16px; min-width: 0; }
.kpi .lbl { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--fg-faint); display:flex; align-items:center; gap:6px; white-space: nowrap; }
.kpi .val { font-size: 24px; font-weight: 600; font-family: var(--mono); margin-top: 6px; letter-spacing: -0.5px; }
.kpi .val small { font-size: 13px; color: var(--fg-faint); font-weight: 500; }
.kpi .sub { font-size: 11px; color: var(--fg-faint); margin-top: 3px; display:flex; align-items:center; gap:6px;}
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; font-weight: 500; color: var(--fg-faint);
  font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); z-index: 1; white-space: nowrap;
}
.tbl td { padding: var(--cell-py) 12px; border-bottom: 1px solid var(--line-soft); height: var(--row-h); vertical-align: middle; }
.tbl tr:hover td { background: var(--panel-2); }
.tbl tr.sel td { background: var(--seam-accent-weak); }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--fg-faint); }
.tbl .clickrow { cursor: pointer; }

/* bounded-results notice */
.bounded {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px; font-size: 11.5px; color: var(--fg-faint);
  border-top: 1px dashed var(--line); background: var(--inset);
}
.bounded .mono { color: var(--fg-dim); }

/* mini bar (usage) */
.mbar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.mbar > span { display: block; height: 100%; background: var(--seam-accent); border-radius: 3px; }
.mbar > span.ok { background: var(--ok); }
.mbar > span.warn { background: var(--warn); }
.mbar > span.bad { background: var(--bad); }

/* code / result well */
.well {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--mono); font-size: 12px; color: #c9d3e2;
}
.well-h { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); color: var(--fg-faint); font-size: 11px; }
.well-b { padding: 12px; overflow: auto; }
.well pre { margin: 0; white-space: pre; }
.tok-blue { color: #7cc4ff; } .tok-key { color: #b388f5; } .tok-str { color: #8fd98f; } .tok-num { color: #f5b14c; } .tok-com { color: var(--fg-ghost); }

/* freshness meter */
.fresh { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; }

/* schema tree */
.tree { font-family: var(--mono); font-size: 12.5px; }
.tree-row { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer; color: var(--fg-dim); }
.tree-row:hover { background: var(--panel-2); color: var(--fg); }
.tree-row.active { background: var(--seam-accent-weak); color: var(--fg); }
.tree-row .tw { width: 12px; color: var(--fg-ghost); }
.tree-row .ico { width: 14px; height: 14px; flex: none; }
.tree-row .cnt { margin-left: auto; color: var(--fg-ghost); font-size: 10.5px; }

/* dot leaders / kv */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 2px 14px; font-size: 12.5px; }
.kv dt { color: var(--fg-faint); padding: 5px 0; }
.kv dd { margin: 0; padding: 5px 0; font-family: var(--mono); }

/* toggle switch */
.sw { width: 34px; height: 19px; border-radius: 20px; background: var(--panel-3); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; transition: .15s; }
.sw::after { content:""; position:absolute; top:1.5px; left:1.5px; width:14px; height:14px; border-radius:50%; background: var(--fg-dim); transition:.15s; }
.sw.on { background: var(--seam-accent); border-color: var(--seam-accent); }
.sw.on::after { left: 16px; background: #fff; }
.sw.sm { width: 28px; height: 16px; }
.sw.sm::after { width: 11px; height: 11px; }
.sw.sm.on::after { left: 13px; }

/* matrix (permissions) */
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.matrix th, .matrix td { padding: 0; }
.matrix .corner { background: var(--panel); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.matrix thead th { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); color: var(--fg-dim); font-weight: 500; background: var(--panel-2); }
.matrix .rowh { padding: 8px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.matrix td.cell { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: center; }

.cellbox { width: 26px; height: 26px; border-radius: 5px; margin: 6px auto; display: grid; place-items: center; cursor: pointer; border: 1px solid transparent; }
.cellbox.grant { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.cellbox.deny  { background: transparent; border-color: var(--line); color: var(--fg-ghost); }
.cellbox.inherit { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.cellbox:hover { filter: brightness(1.2); }

/* drawer */
.scrim { position: fixed; inset: 0; background: #04060ac4; z-index: 40; animation: fade .15s ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw);
  background: var(--panel); border-left: 1px solid var(--line); z-index: 41;
  display: flex; flex-direction: column; box-shadow: -24px 0 60px -20px #000;
  animation: slide .18s cubic-bezier(.2,.7,.2,1);
}
.drawer-h { display:flex; align-items:center; gap:10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-b { overflow:auto; padding: 16px; flex: 1; }
.drawer-f { padding: 12px 16px; border-top: 1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }
@keyframes slide { from { transform: translateX(20px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }

/* modal */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; }
.modal-card { width: min(460px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px #000; animation: pop .16s ease; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }

/* misc */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.gap-sm { gap: 6px; } .gap-lg { gap: 16px; }
.dim { color: var(--fg-dim); } .faint { color: var(--fg-faint); }
.nowrap { white-space: nowrap; }
.mt { margin-top: var(--gap); } .mb { margin-bottom: var(--gap); }
.sechead { display:flex; align-items:baseline; gap:10px; margin: 4px 0 12px; }
.sechead h2 { font-size: 16px; white-space: nowrap; }
.sechead .desc { color: var(--fg-faint); font-size: 12.5px; white-space: nowrap; }
.divider { height: 1px; background: var(--line-soft); margin: 14px 0; }
.empty { display:grid; place-items:center; padding: 48px; text-align:center; color: var(--fg-faint); gap: 8px; }
.empty .empty-ico { width: 40px; height: 40px; color: var(--fg-ghost); }
.empty h3 { color: var(--fg-dim); font-size: 14px; }
.empty p { margin: 0; max-width: 460px; font-size: 12.5px; }
.skel { background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 4px; }
@keyframes sh { to { background-position: -200% 0; } }

/* audit line */
.audit { display:flex; gap:10px; font-size: 11.5px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.audit .t { color: var(--fg-ghost); font-family: var(--mono); white-space: nowrap; }
.audit .who { color: var(--fg-dim); }

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --bg:        #eef1f6;
  --panel:     #ffffff;
  --panel-2:   #f6f8fb;
  --panel-3:   #eaeef4;
  --inset:     #f3f6fa;
  --line:      #dde3ec;
  --line-soft: #e9edf3;

  --fg:        #1a2333;
  --fg-dim:    #4d5b73;
  --fg-faint:  #7886a0;
  --fg-ghost:  #aab4c5;

  --ok:   #15a04a;  --ok-bg:   #15a04a14;  --ok-line:  #15a04a3d;
  --warn: #bc7a09;  --warn-bg: #bc7a0914;  --warn-line:#bc7a093d;
  --bad:  #d83a36;  --bad-bg:  #d83a3614;  --bad-line: #d83a363d;
  --quar: #8453e0;  --quar-bg: #8453e014;  --quar-line:#8453e03d;
  --info: #2563eb;  --info-bg: #2563eb14;  --info-line:#2563eb3d;
  --idle: #64748b;  --idle-bg: #64748b14;  --idle-line:#64748b30;

  --shadow: 0 1px 0 #ffffff inset, 0 6px 18px -12px #1a233340;
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd3e0; border-color: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #b6c0d1; }
[data-theme="light"] .nav { background: linear-gradient(180deg, #ffffff, #f5f7fb); }
[data-theme="light"] .nav-mark { box-shadow: 0 0 0 1px #00000010 inset, 0 4px 10px -4px var(--seam-accent-line); }
[data-theme="light"] .seg { background: var(--panel-3); }
[data-theme="light"] .seg button.on { background: #fff; box-shadow: 0 1px 2px #1a23331f; }
[data-theme="light"] .well { color: #2c3a52; }
[data-theme="light"] .well pre { color: #2c3a52; }
[data-theme="light"] .tok-blue { color: #2563eb; }
[data-theme="light"] .tok-key { color: #7c3aed; }
[data-theme="light"] .tok-str { color: #047857; }
[data-theme="light"] .tok-num { color: #b45309; }
[data-theme="light"] .tok-com { color: #94a3b8; }
[data-theme="light"] .kpi .val, [data-theme="light"] .mono { color: inherit; }
[data-theme="light"] .scrim { background: #1a233366; }
[data-theme="light"] .nav-ava { background: linear-gradient(135deg, #d7deea, #c2ccdd); color: #2c3a52; }
[data-theme="light"] .matrix thead th { background: var(--panel-2); }

/* smooth theme switch */
.app, .nav, .topbar, .subbar, .panel, .btn, .well, .tbl td, .chip { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

/* ============================================================
   Additions beyond the prototype (not in the design medium):
   sign-in surface and basic form fields, themed from the same
   tokens so they sit inside the seam.
   ============================================================ */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(380px, 92vw); }
.auth-brand { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom: 18px; }
.auth-brand .nav-mark { width: 28px; height: 28px; }
.auth-title { text-align:center; margin-bottom: 4px; font-size: 16px; }
.auth-sub { text-align:center; color: var(--fg-faint); font-size: 12px; margin-bottom: 18px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: 12px; }
.field label { font-size: 11px; letter-spacing:.4px; text-transform:uppercase; color: var(--fg-faint); }
.field input[type="email"], .field input[type="password"], .field input[type="text"] {
  height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--inset); color: var(--fg);
  font-family: var(--sans); font-size: 13px; outline: none;
}
.field input:focus { border-color: var(--seam-accent-line); background: var(--panel-2); }
.btn.block { width: 100%; }
.flash { padding: 9px 12px; border-radius: var(--r-sm); font-size: 12.5px; margin-bottom: 12px; border: 1px solid var(--line); }
.flash.notice { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.flash.alert  { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); }
.auth-foot { text-align:center; margin-top: 14px; font-size: 12px; color: var(--fg-faint); }
.auth-foot a { color: var(--seam-accent); }

/* scope filter dropdown (prototype FilterSelect, server-rendered) */
.fsel-wrap { position: relative; }
.fsel-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 200px; max-height: 320px; overflow: auto; padding: 5px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.fsel-menu.open-menu { display: block; }
.opt { display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:4px;
  cursor:pointer; font-size:12.5px; color: var(--fg-dim); }
.opt:hover { background: var(--panel-2); }
.opt .opt-check { width:14px; color: var(--seam-accent); visibility: hidden; }
.opt.selected { color: var(--fg); background: var(--seam-accent-weak); }
.opt.selected .opt-check { visibility: visible; }

/* theme-toggle icon swaps with the active theme */
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: inline-flex; }