/* =========================================================================
   Agent Room — Admin Dashboard shell styles.
   Tokens (§1–4) are lifted verbatim from design/design-system.md / the approved
   design/components.html so the shell and the components share one token set.
   Shell-specific rules (topbar, grid, login gate, KPI strip) follow the tokens.
   ========================================================================= */

/* ---- TOKENS (design-system.md §1) ---- */
:root {
  --bg-canvas:#0B0E14; --bg-surface:#12161F; --bg-surface-hover:#161B26; --bg-elevated:#1A202C; --bg-inset:#0E1219;
  --border-subtle:#1E2530; --border-strong:#2A3340;
  --text-primary:#E6EAF0; --text-secondary:#9BA6B7; --text-tertiary:#5F6B7D;
  --accent:#5B8DEF; --accent-hover:#74A0F5; --accent-muted:#1B2B4A;
  --pos:#3FB68B; --pos-muted:#15291F; --neg:#E5736B; --neg-muted:#2E1A19; --warn:#E0A458; --warn-muted:#2C2317;
  --series-1:#5B8DEF; --series-2:#3FB68B; --series-3:#E0A458; --series-4:#B98AE0; --series-5:#5FC5D6; --series-6:#E5736B;
  --font-sans:"Inter Tight",system-ui,-apple-system,sans-serif; --font-num:"IBM Plex Mono",ui-monospace,monospace;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-full:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.30);
  --ease:cubic-bezier(.2,.6,.2,1); --dur-fast:120ms; --dur-base:220ms;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --page-max:1440px;
}
[data-theme="light"] {
  --bg-canvas:#F6F7F9; --bg-surface:#FFFFFF; --bg-surface-hover:#F0F2F5; --bg-elevated:#FFFFFF; --bg-inset:#F1F3F6;
  --border-subtle:#E6E9EE; --border-strong:#D2D8E0;
  --text-primary:#161A20; --text-secondary:#5A6573; --text-tertiary:#8A94A3;
  --accent:#2F6BE0; --accent-hover:#2459C4; --accent-muted:#E5EDFC;
  --pos:#1F9D6B; --pos-muted:#E3F4EC; --neg:#D14B43; --neg-muted:#FBE9E8; --warn:#B9772A; --warn-muted:#FBF0DF;
  --series-1:#2F6BE0; --series-2:#1F9D6B; --series-3:#B9772A; --series-4:#8A5BC4; --series-5:#2E97A8; --series-6:#D14B43;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--bg-canvas); font-family:var(--font-sans); font-variant-numeric:tabular-nums; color:var(--text-primary); }

@keyframes ar-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.ar-skeleton { background:linear-gradient(90deg,var(--bg-inset) 25%,var(--bg-surface-hover) 50%,var(--bg-inset) 75%); background-size:200% 100%; animation:ar-shimmer 1.4s linear infinite; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion:reduce){ .ar-skeleton{animation:none} }

/* ---- METRIC CARD (design-system.md §5) ---- */
ar-metric-card { display:block; }
.arc { position:relative; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; gap:12px; overflow:hidden; transition:background var(--dur-fast) var(--ease); }
.arc:hover { background:var(--bg-surface-hover); }
.arc-head { display:flex; align-items:center; justify-content:space-between; }
.arc-label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.arc-unit { font-size:11px; color:var(--text-tertiary); }
.arc-value { font-family:var(--font-num); font-weight:600; letter-spacing:-.02em; color:var(--text-primary); }
.arc-value.hero { font-size:40px; line-height:44px; }
.arc-value.regular { font-size:30px; line-height:36px; }
.arc-meta { display:flex; align-items:center; gap:8px; }
.arc-pill { display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:600; }
.arc-period { font-size:12px; color:var(--text-tertiary); }
.arc-spark { margin-top:4px; }

/* ---- CHART PANEL (design-system.md §6) ---- */
.arp { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:24px; height:100%; display:flex; flex-direction:column; gap:16px; }
.arp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.arp-title { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); }
.arp-sub { font-size:12px; color:var(--text-tertiary); margin-top:2px; }
.arp-legend { display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.arp-leg { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:500; color:var(--text-secondary); }
.arp-sw { width:10px; height:10px; border-radius:3px; flex:none; }
.arp-body { flex:1; min-height:180px; position:relative; }
.arp-empty { height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); font-size:13px; }

/* =========================================================================
   SHELL (Claude Code / lane/frontend) — design-system.md §4 layout
   ========================================================================= */

/* ---- Topbar (§4.1: 56px sticky) ---- */
.ar-topbar { position:sticky; top:0; z-index:20; height:56px; display:flex; align-items:center; gap:var(--space-5); padding:0 var(--space-6);
  background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); }
.ar-brand { display:flex; align-items:center; gap:10px; font-weight:600; }
.ar-brand-mark { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--accent),var(--series-2)); flex:none; }
.ar-brand-name { font-size:15px; color:var(--text-primary); }
.ar-brand-tag { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); padding:2px 6px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); }
.ar-topbar-spacer { flex:1; }
.ar-topbar-actions { display:flex; align-items:center; gap:var(--space-3); }

/* RangeSelector (§7) — segmented control */
.ar-range { display:inline-flex; background:var(--bg-inset); border-radius:var(--radius-sm); padding:3px; gap:2px; }
.ar-range button { appearance:none; border:0; background:transparent; color:var(--text-secondary); font-family:var(--font-sans); font-size:13px; font-weight:500; padding:4px 12px; border-radius:4px; cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.ar-range button[aria-pressed="true"] { background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.ar-range button:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg-canvas),0 0 0 4px var(--accent); }

.ar-iconbtn { appearance:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-secondary); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.ar-iconbtn:hover { background:var(--bg-surface-hover); color:var(--text-primary); }
.ar-iconbtn:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg-canvas),0 0 0 4px var(--accent); }

/* User menu */
.ar-usermenu { position:relative; }
.ar-userbtn { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px; border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-weight:500; }
.ar-userbtn:hover { background:var(--bg-surface-hover); }
.ar-avatar { width:22px; height:22px; border-radius:var(--radius-full); background:var(--accent-muted); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.ar-menu { position:absolute; right:0; top:42px; min-width:180px; background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; display:none; }
.ar-menu.open { display:block; }
.ar-menu-row { padding:8px 10px; font-size:12px; color:var(--text-tertiary); }
.ar-menu button { display:block; width:100%; text-align:left; appearance:none; border:0; background:transparent; color:var(--text-primary); font-family:var(--font-sans); font-size:13px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.ar-menu button:hover { background:var(--bg-surface-hover); }

/* ---- Page frame ---- */
.ar-page { max-width:var(--page-max); margin:0 auto; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-6); }
.ar-section-head { display:flex; align-items:baseline; gap:var(--space-3); }
.ar-section-title { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); }
.ar-section-note { font-size:12px; color:var(--text-tertiary); }

/* Overview band (§4.2) — 6 hero cards */
.ar-band { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); }

/* KPI strip — scalar Tier-1/2 numbers the contract returns without a series */
.ar-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3); }
.ar-kpi { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.ar-kpi-label { font-size:12px; font-weight:500; color:var(--text-secondary); }
.ar-kpi-value { font-family:var(--font-num); font-weight:600; font-size:24px; line-height:28px; letter-spacing:-.01em; color:var(--text-primary); }
.ar-kpi-sub { font-size:11px; color:var(--text-tertiary); }

/* Charts region (§4.3) — 12-col grid */
.ar-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-5); }
.ar-c4 { grid-column:span 4; } .ar-c6 { grid-column:span 6; } .ar-c8 { grid-column:span 8; } .ar-c12 { grid-column:span 12; }

/* Footer (§4.4) */
.ar-footer { padding:var(--space-3) 0 var(--space-6); font-size:12px; color:var(--text-tertiary); display:flex; gap:var(--space-4); flex-wrap:wrap; }
.ar-footer .dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--pos); display:inline-block; margin-right:6px; vertical-align:middle; }

/* Error banner */
.ar-banner { display:flex; align-items:center; gap:var(--space-3); background:var(--neg-muted); border:1px solid var(--neg); color:var(--text-primary); border-radius:var(--radius-md); padding:12px 16px; font-size:13px; }
.ar-banner button { margin-left:auto; appearance:none; border:1px solid var(--neg); background:transparent; color:var(--neg); border-radius:var(--radius-sm); padding:5px 12px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; }

/* ---- Login / auth gate ---- */
.ar-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-5); }
.ar-login-card { width:100%; max-width:400px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); }
.ar-login-brand { display:flex; align-items:center; gap:10px; }
.ar-login-title { font-size:20px; font-weight:600; letter-spacing:-.01em; }
.ar-login-desc { font-size:13px; line-height:20px; color:var(--text-secondary); }
.ar-field { display:flex; flex-direction:column; gap:6px; }
.ar-field label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.ar-input { appearance:none; width:100%; background:var(--bg-inset); border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-num); font-size:14px; padding:11px 12px; }
.ar-input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); }
.ar-btn { appearance:none; border:0; background:var(--accent); color:#fff; font-family:var(--font-sans); font-size:14px; font-weight:600; padding:11px 14px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.ar-btn:hover { background:var(--accent-hover); }
.ar-btn:disabled { opacity:.55; cursor:default; }
.ar-login-err { font-size:13px; color:var(--neg); background:var(--neg-muted); border-radius:var(--radius-sm); padding:9px 11px; }
.ar-login-hint { font-size:11px; color:var(--text-tertiary); line-height:16px; }

/* ---- Responsive (design-system.md §4: below md, panels stack to 12 col) ---- */
@media (max-width:1024px) {
  .ar-c4, .ar-c6, .ar-c8 { grid-column:span 12; }
}
@media (max-width:640px) {
  .ar-page, .ar-topbar { padding-left:var(--space-4); padding-right:var(--space-4); }
  .ar-brand-tag { display:none; }
}

/* =========================================================================
   EXPANDED SHELL — sidebar nav, filter bar, live strip, breakdowns, tables,
   funnel, activity feed, audit explorer. Same token set as above.
   ========================================================================= */

/* ---- App layout: sidebar + main ---- */
.ar-app { display:flex; min-height:100vh; align-items:stretch; }
.ar-side { width:236px; flex:none; background:var(--bg-surface); border-right:1px solid var(--border-subtle);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4) var(--space-3); }
.ar-side-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 14px; }
.ar-nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.ar-nav-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; appearance:none; border:0; background:transparent;
  color:var(--text-secondary); font-family:var(--font-sans); font-size:13.5px; font-weight:500; padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.ar-nav-item:hover { background:var(--bg-surface-hover); color:var(--text-primary); }
.ar-nav-item.active { background:var(--accent-muted); color:var(--accent); }
.ar-nav-ico { width:20px; text-align:center; font-size:14px; opacity:.9; }
.ar-side-foot { margin-top:auto; padding:10px 8px 4px; font-size:11px; color:var(--text-tertiary); border-top:1px solid var(--border-subtle); }
.ar-main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---- Topbar ---- */
.ar-topbar { flex-wrap:wrap; row-gap:8px; }
.ar-topbar-title h1 { font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); }
.ar-filterwrap { position:relative; }
.ar-custom { position:absolute; right:0; top:44px; z-index:30; display:flex; align-items:flex-end; gap:10px;
  background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:12px; }
.ar-custom label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text-secondary); }
.ar-auto { align-items:center; }
.ar-auto-label { font-size:11px; color:var(--text-tertiary); padding:0 6px 0 4px; text-transform:uppercase; letter-spacing:.05em; }
.ar-input.sm { padding:7px 9px; font-size:13px; font-family:var(--font-sans); }
.ar-btn.sm { padding:7px 12px; font-size:13px; }
.ar-btn.ghost { background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); }
.ar-btn.ghost:hover { background:var(--bg-surface-hover); color:var(--text-primary); }

/* ---- Live strip ---- */
.ar-live { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.ar-livehdr { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.ar-live-pulse { width:8px; height:8px; border-radius:var(--radius-full); background:var(--text-tertiary); flex:none; }
.ar-live-pulse.on { background:var(--pos); box-shadow:0 0 0 0 var(--pos); animation:ar-pulse 2s infinite; }
@keyframes ar-pulse { 0%{box-shadow:0 0 0 0 rgba(63,182,139,.5)} 70%{box-shadow:0 0 0 6px rgba(63,182,139,0)} 100%{box-shadow:0 0 0 0 rgba(63,182,139,0)} }
@media (prefers-reduced-motion:reduce){ .ar-live-pulse.on{animation:none} }
.ar-live-title { font-weight:600; color:var(--text-primary); }
.ar-live-sync, .ar-live-ago { color:var(--text-tertiary); margin-left:auto; }
.ar-livetiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); }
.ar-livetile { background:var(--bg-inset); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:10px 12px; }
.ar-livetile-v { font-family:var(--font-num); font-weight:600; font-size:22px; line-height:26px; color:var(--text-primary); }
.ar-livetile-l { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.ar-livetile.tone-pos .ar-livetile-v { color:var(--pos); }
.ar-livetile.tone-warn .ar-livetile-v { color:var(--warn); }
.ar-livetile.tone-neg .ar-livetile-v { color:var(--neg); }

/* ---- KPI delta + tone accents ---- */
.ar-kpi-delta { margin-top:2px; }
.ar-kpi.tone-pos { border-left:2px solid var(--pos); }
.ar-kpi.tone-warn { border-left:2px solid var(--warn); }
.ar-kpi.tone-neg { border-left:2px solid var(--neg); }

/* ---- Panel body (non-chart content inside .arp) ---- */
.ar-panel-body { flex:1; min-height:0; }
.ar-note { background:var(--warn-muted); border:1px solid var(--warn); color:var(--text-primary); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:16px; }

/* ---- BarList ---- */
.ar-barlist { display:flex; flex-direction:column; gap:12px; }
.ar-barrow { display:flex; flex-direction:column; gap:5px; }
.ar-barrow-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ar-barrow-label { font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-barrow-val { font-family:var(--font-num); font-size:13px; font-weight:600; color:var(--text-primary); flex:none; }
.ar-barrow-share { color:var(--text-tertiary); font-weight:500; }
.ar-bartrack { height:7px; background:var(--bg-inset); border-radius:var(--radius-full); overflow:hidden; }
.ar-barfill { height:100%; border-radius:var(--radius-full); transition:width var(--dur-base) var(--ease); }

/* ---- Funnel ---- */
.ar-funnel { display:flex; flex-direction:column; gap:14px; }
.ar-funnel-step { display:flex; flex-direction:column; gap:5px; }
.ar-funnel-head { display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); }
.ar-funnel-val { font-family:var(--font-num); font-weight:600; color:var(--text-primary); }
.ar-funnel-share { color:var(--text-tertiary); font-weight:500; }
.ar-funnel-track { height:10px; background:var(--bg-inset); border-radius:var(--radius-full); overflow:hidden; }
.ar-funnel-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--series-2)); border-radius:var(--radius-full); transition:width var(--dur-base) var(--ease); }
.ar-funnel-conv { font-size:11px; color:var(--text-tertiary); }

/* ---- Table ---- */
.ar-table-wrap { overflow-x:auto; }
.ar-table { width:100%; border-collapse:collapse; font-size:13px; }
.ar-table th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-tertiary); padding:8px 12px; border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
.ar-table td { padding:10px 12px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); vertical-align:middle; }
.ar-table tbody tr:hover { background:var(--bg-surface-hover); }
.ar-table tbody tr:last-child td { border-bottom:0; }
.ar-td-r { text-align:right; font-family:var(--font-num); }
.ar-td-strong { color:var(--text-primary); font-weight:500; }
.ar-td-dim { color:var(--text-tertiary); }
.ar-td-empty { text-align:center; color:var(--text-tertiary); padding:24px; }

/* ---- Chip ---- */
.ar-chip { display:inline-flex; align-items:center; gap:4px; background:var(--bg-inset); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:2px 9px; font-size:11.5px; font-weight:500; color:var(--text-secondary); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-chip.tone-pos { color:var(--pos); background:var(--pos-muted); border-color:transparent; }
.ar-chip.tone-neg { color:var(--neg); background:var(--neg-muted); border-color:transparent; }
.ar-chip.tone-warn { color:var(--warn); background:var(--warn-muted); border-color:transparent; }

/* ---- Activity feed ---- */
.ar-feed { display:flex; flex-direction:column; gap:2px; max-height:520px; overflow-y:auto; margin:-6px -6px; padding:6px; }
.ar-feed-item { display:flex; gap:10px; padding:9px 8px; border-radius:var(--radius-sm); }
.ar-feed-item:hover { background:var(--bg-surface-hover); }
.ar-feed-dot { width:7px; height:7px; border-radius:var(--radius-full); margin-top:6px; flex:none; background:var(--text-tertiary); }
.ar-feed-dot.tone-pos { background:var(--pos); } .ar-feed-dot.tone-neg { background:var(--neg); } .ar-feed-dot.tone-warn { background:var(--warn); }
.ar-feed-main { min-width:0; flex:1; }
.ar-feed-line { font-size:13px; color:var(--text-secondary); line-height:18px; }
.ar-feed-actor { color:var(--text-primary); font-weight:600; }
.ar-feed-target { color:var(--text-tertiary); }
.ar-feed-meta { display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11px; color:var(--text-tertiary); }

/* ---- Audit bar ---- */
.ar-auditbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.ar-auditbar .ar-input { min-width:220px; flex:1; }
.ar-select { appearance:none; background:var(--bg-surface); border:1px solid var(--border-strong); color:var(--text-primary); font-family:var(--font-sans); font-size:13px; padding:7px 28px 7px 10px; border-radius:var(--radius-sm); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-tertiary) 50%),linear-gradient(135deg,var(--text-tertiary) 50%,transparent 50%); background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
  .ar-side { position:fixed; left:0; z-index:40; transform:translateX(-100%); transition:transform var(--dur-base) var(--ease); }
  .ar-app.nav-open .ar-side { transform:translateX(0); }
}
@media (max-width:640px) {
  .ar-livetiles { grid-template-columns:repeat(2,1fr); }
}