/* ─────────────────────────────────────────────────────────────────────────────
   CostPilot Dashboard Styles — dark enterprise theme
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Neutral dark palette matched to the Cockpit's (cockpit/src/index.css)
     shadcn ".dark" theme -- oklch(0.145 0 0)/oklch(0.205 0 0)/oklch(1 0 0
     /10%) converted to their standard hex/rgba equivalents, so the vanilla
     site's already-shared styles.css variables render the same "black" as
     the React app instead of GitHub-dark's blue-tinted near-black. Accent
     colors (below) are intentionally untouched -- a separate design call. */
  --bg-base:       #0a0a0a;
  --bg-panel:      #171717;
  --bg-input:      #0a0a0a;
  --border:        rgba(255, 255, 255, 0.1);
  --text-primary:  #fafafa;
  --text-muted:    #a3a3a3;
  --accent:        #58a6ff;
  --accent-green:  #3fb950;
  --accent-yellow: #d29922;
  --accent-red:    #f85149;
  --accent-purple: #bc8cff;
  --font-mono:     "SF Mono", "Fira Code", "Consolas", monospace;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Tier color system — cost/risk gradient ───────────────────────────────
     Scout     = green  (cheap, routine, no action needed)
     Analyst   = blue   (moderate, normal operations)
     Advisor   = amber  (elevated cost, worth reviewing)
     Strategist= red    (premium cost, high-stakes)
  ── */
  --tier-scout:      #3fb950;
  --tier-analyst:    #58a6ff;
  --tier-advisor:    #d29922;
  --tier-strategist: #f85149;

  --tier-scout-bg:      rgba(63,185,80,0.12);
  --tier-analyst-bg:    rgba(88,166,255,0.12);
  --tier-advisor-bg:    rgba(210,153,34,0.12);
  --tier-strategist-bg: rgba(248,81,73,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

/* flex: 0 1 320px used to cap this container at roughly the logo's own
   width, leaving almost no room for .header-sub beside it — the tagline
   wrapped into a stacked column instead of sitting on one line. flex: 0 1
   auto lets it size to its actual content (logo + tagline) while still
   allowing it to shrink under real space pressure; .header-sub's own
   nowrap+ellipsis (below) is the safety net for when it does. */
.header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.brand-logo-img {
  display: block;
  width: min(260px, 22vw);
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
}
.header-brand-logo {
  display: block;
  width: min(320px, 24vw);
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}
.header-logo  { font-size: 22px; color: var(--accent); }
.header-title { font-size: 18px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary); }
.header-sub   { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.header-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.mode-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 10px; }
.mode-badge.live       { background: #0d2d1a; color: var(--accent-green); border: 1px solid var(--accent-green); }
.mode-badge.simulated  { background: #1c2128; color: var(--text-muted);   border: 1px solid var(--border); }
.status-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.status-dot.online  { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.status-dot.offline { background: var(--accent-red); }

/* ── Dashboard Layout ───────────────────────────────────────────────────────── */
.dashboard { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }

/* ── KPI Row ────────────────────────────────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-row-compact { gap: 12px; }

.kpi-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.kpi-card.alert { border-color: var(--accent-red); }

/* Compact card — matches live screen style */
.kpi-card-sm {
  padding: 14px 18px !important;
}
.kpi-card-sm .kpi-value { font-size: 26px !important; }

.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
.kpi-card.alert .kpi-value { color: var(--accent-red); }
.kpi-sub   { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

/* ── Stat Bar ────────────────────────────────────────────────────────────────── */
.stat-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 20px; flex-wrap: wrap;
}
.stat-bar-compact { padding: 10px 20px; }
.stat-item    { display: flex; flex-direction: column; align-items: center; padding: 0 16px; gap: 3px; }
.stat-label   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.stat-val     { font-size: 16px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.stat-val.micro    { color: var(--accent); }
.stat-val.flagship { color: var(--accent-purple); }
.stat-val.green    { color: var(--accent-green); }
.stat-divider { width: 1px; height: 28px; background: var(--border); }

/* ── Mid Row ─────────────────────────────────────────────────────────────────── */
.mid-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; }

/* ── Panels ─────────────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.panel.full-width { width: 100%; }
.panel-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; letter-spacing: 0.02em; }

/* ── Budget Bars ─────────────────────────────────────────────────────────────── */
.budget-item { margin-bottom: 16px; }
.budget-dept { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.budget-dept .dept-name  { font-weight: 600; color: var(--text-primary); }
.budget-dept .dept-spend { font-family: var(--font-mono); }
.budget-bar-track { background: var(--bg-base); border: 1px solid var(--border); border-radius: 4px; height: 8px; overflow: hidden; }
.budget-bar-fill  { height: 100%; border-radius: 4px; background: var(--accent-green); transition: width 0.4s ease; }
.budget-bar-fill.warn     { background: var(--accent-yellow); }
.budget-bar-fill.critical { background: var(--accent-red); }
.budget-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-red); margin-left: 8px; }

/* ── Agent Table ──────────────────────────────────────────────────────────────── */
.agent-table, .audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.agent-table th, .audit-table th {
  text-align: left; padding: 6px 10px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.agent-table td, .audit-table td { padding: 8px 10px; border-bottom: 1px solid #1c2128; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
}
.badge-idle     { background: #1c2128; color: var(--text-muted); }
.badge-active   { background: #0d2d1a; color: var(--accent-green); }
.badge-locked   { background: #2d0d0d; color: var(--accent-red); }
.badge-micro    { background: #0d1f2d; color: var(--accent); }
.badge-flagship { background: #1d0d2d; color: var(--accent-purple); }
.badge-low      { background: #0d2d1a; color: var(--accent-green); }
.badge-medium   { background: #2d1a0d; color: var(--accent-yellow); }
.badge-high     { background: #2d0d0d; color: var(--accent-red); }
.badge-critical { background: var(--accent-red); color: #fff; }

/* ── Tier badges — consistent cost/risk gradient ──────────────────────────── */
.badge-scout      { background: var(--tier-scout-bg);      color: var(--tier-scout);      border: 1px solid var(--tier-scout); }
.badge-analyst    { background: var(--tier-analyst-bg);    color: var(--tier-analyst);    border: 1px solid var(--tier-analyst); }
.badge-advisor    { background: var(--tier-advisor-bg);    color: var(--tier-advisor);    border: 1px solid var(--tier-advisor); }
.badge-strategist { background: var(--tier-strategist-bg); color: var(--tier-strategist); border: 1px solid var(--tier-strategist); }

/* ── Pruner Panel ────────────────────────────────────────────────────────────── */
.pruner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-label  { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.code-area {
  width: 100%; height: 180px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-family: var(--font-mono);
  font-size: 11px; padding: 12px; resize: vertical; outline: none;
}
.code-area:focus { border-color: var(--accent); }

.pruner-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pruner-stats { font-size: 12px; color: var(--text-muted); }
.pruner-stats .stat-highlight { color: var(--accent-green); font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent); color: #000; border: none; border-radius: 6px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Blocked Alert Banner ────────────────────────────────────────────────────── */
#blockedAlertBanner {
  margin: 0 0 16px 0;
}
.blocked-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1a0505;
  border: 1.5px solid var(--accent-red);
  border-radius: 8px;
  padding: 14px 20px;
  box-shadow: 0 0 18px rgba(248, 81, 73, 0.18);
  animation: blocked-pulse 2.5s ease-in-out infinite;
}
@keyframes blocked-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(248, 81, 73, 0.18); }
  50%       { box-shadow: 0 0 28px rgba(248, 81, 73, 0.38); }
}
@keyframes vgPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
.vg-mic-active {
  background: var(--accent-red) !important;
  color: #fff !important;
  border-color: var(--accent-red) !important;
  box-shadow: 0 0 12px rgba(248, 81, 73, 0.4);
}
.blocked-banner-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.blocked-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blocked-banner-text strong {
  font-size: 14px;
  color: var(--accent-red);
  font-weight: 700;
}
.blocked-banner-text span {
  font-size: 12px;
  color: var(--text-muted);
}
.blocked-banner-btn {
  background: var(--accent-red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.blocked-banner-btn:hover { opacity: 0.85; }
.blocked-banner-dismiss {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(248, 81, 73, 0.45);
  border-radius: 6px;
  background: rgba(248, 81, 73, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.blocked-banner-dismiss:hover {
  color: var(--text-primary);
  border-color: var(--accent-red);
}

/* ── Agent Card Grid (live status view) ──────────────────────────────────────── */
.agentlake-view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.agentlake-view-description {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.agentlake-workspace-scope {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.agentlake-workspace-scope > span,
.agentlake-workspace-scope small {
  color: var(--text-muted);
  font-size: 10px;
}
.agentlake-workspace-scope small.warning { color: var(--accent-yellow); }
.agentlake-workspace-scope input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-primary);
  font: 10px/1.2 monospace;
  min-width: 190px;
  padding: 5px 7px;
}
.agentlake-workspace-scope button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 8px;
}
.agentlake-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-base);
}
.agentlake-tab {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 11px;
}
.agentlake-tab:hover { color: var(--text-primary); }
.agentlake-tab.active {
  background: rgba(88, 166, 255, 0.13);
  color: var(--accent);
}
.agentlake-view[hidden] { display: none !important; }
.agentlake-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.agentlake-metric {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-base);
  padding: 11px 13px;
}
.agentlake-metric-value {
  color: var(--text-primary);
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.agentlake-metric-label {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  margin-top: 5px;
  text-transform: uppercase;
}
.agentlake-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.agentlake-summary-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-base);
  min-width: 0;
  padding: 13px;
}
.agentlake-summary-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.agentlake-summary-head h3 {
  color: var(--text-primary);
  font-size: 12px;
  margin: 0 0 3px;
}
.agentlake-summary-head p {
  color: var(--text-muted);
  font-size: 9px;
  margin: 0;
}
.agentlake-count-badge {
  background: rgba(248, 81, 73, .12);
  border: 1px solid rgba(248, 81, 73, .35);
  border-radius: 999px;
  color: var(--accent-red);
  font-size: 10px;
  font-weight: 800;
  min-width: 20px;
  padding: 2px 7px;
  text-align: center;
}
.agentlake-compact-list {
  display: flex;
  flex-direction: column;
}
.agentlake-compact-row {
  align-items: center;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 39px;
  padding: 7px 1px;
}
.agentlake-compact-row:first-child { border-top: 0; }
.agentlake-row-name {
  color: var(--text-primary);
  display: block;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentlake-row-meta {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  margin-top: 2px;
}
.agentlake-row-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.agentlake-empty {
  color: var(--text-muted);
  font-size: 10px;
  padding: 12px 1px;
}
.agentlake-never-used {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding: 12px;
  text-align: left;
  width: 100%;
}
.agentlake-never-used:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.agentlake-never-used:disabled {
  cursor: default;
  opacity: .55;
}
.agentlake-never-used strong {
  color: var(--text-primary);
  font-size: 17px;
  margin-right: 3px;
}
.agentlake-department-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.agentlake-dept-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-base);
  overflow: hidden;
}
.agentlake-dept-group summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  font-size: 11px;
  font-weight: 750;
  gap: 10px;
  /* Leading "auto" column is for the ::before chevron below -- a
     generated-content box on a grid container becomes a real grid item
     (placed before all DOM children), so without its own column here it
     silently consumed column 1 (the wide 1fr track meant for the
     department name), pushing the name into a cramped "auto" column and
     wrapping the 4th real stat span onto an implicit second row that
     landed back in that same wide left column -- the exact "name and
     stats crammed right, chevron + one stat stranded left" bug reported
     live. Confirmed via computed grid-template-rows (two rows) and
     child bounding rects on a real page before this fix. */
  grid-template-columns: auto minmax(120px, 1fr) auto auto auto;
  list-style: none;
  padding: 11px 13px;
}
.agentlake-dept-group summary::-webkit-details-marker { display: none; }
.agentlake-dept-group summary::before {
  color: var(--text-muted);
  content: "›";
  font-size: 17px;
}
.agentlake-dept-group[open] summary::before { transform: rotate(90deg); }
.agentlake-dept-name { display: flex; align-items: center; }
.agentlake-dept-stat {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
}
.agentlake-dept-agents {
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.agentlake-project-filterbar {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: .06em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.agentlake-project-filterbar > div {
  align-items: center;
  display: flex;
  gap: 8px;
}
.agentlake-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.agentlake-project-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.agentlake-project-card.has-risk { border-left: 3px solid var(--accent-red); }
.agentlake-project-card summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(70px, .55fr)) minmax(110px, .7fr) 16px;
  list-style: none;
  padding: 13px 14px;
}
.agentlake-project-card summary::-webkit-details-marker { display: none; }
.agentlake-project-identity { min-width: 0; }
.agentlake-project-identity h3 {
  color: var(--text-primary);
  font-size: 12px;
  margin: 5px 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentlake-project-identity p {
  color: var(--text-muted);
  font-size: 9px;
  margin: 0;
}
.agentlake-project-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 6px;
  text-transform: uppercase;
}
.agentlake-project-status.status-active {
  border-color: rgba(63, 185, 80, .45);
  color: var(--accent-green);
}
.agentlake-project-status.status-on_hold,
.agentlake-project-status.needs-attribution {
  border-color: rgba(210, 153, 34, .5);
  color: var(--accent-yellow);
}
.agentlake-project-stat strong,
.agentlake-project-last strong {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
}
.agentlake-project-stat span,
.agentlake-project-last span {
  color: var(--text-muted);
  display: block;
  font-size: 8px;
  margin-top: 3px;
  text-transform: uppercase;
}
.agentlake-project-stat.risk strong { color: var(--accent-red); }
.agentlake-project-chevron {
  color: var(--text-muted);
  font-size: 20px;
  transition: transform .15s ease;
}
.agentlake-project-card[open] .agentlake-project-chevron { transform: rotate(90deg); }
.agentlake-project-detail {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr auto;
  padding: 12px 14px;
}
.agentlake-project-detail > div > span {
  color: var(--text-muted);
  display: block;
  font-size: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.agentlake-project-detail > div > strong {
  color: var(--text-primary);
  display: block;
  font-size: 9px;
  line-height: 1.4;
}
.agentlake-project-agent-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.agentlake-project-agent {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.agentlake-project-agent b {
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 700;
}
.agentlake-project-agent i {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  padding: 1px 5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.agentlake-project-agent i.used {
  border-color: rgba(63, 185, 80, .4);
  color: var(--accent-green);
}
.agentlake-project-agent i.unexpected {
  border-color: rgba(248, 81, 73, .45);
  color: var(--accent-red);
}
.agentlake-empty-agent { color: var(--text-muted); font-size: 9px; }
.agentlake-project-detail > a,
.agentlake-project-link {
  align-self: center;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.agentlake-project-budget > div {
  background: var(--bg-raised);
  border-radius: 999px;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.agentlake-project-budget i {
  background: var(--accent);
  display: block;
  height: 100%;
}
.agentlake-project-unattributed {
  align-items: center;
  border-color: rgba(210, 153, 34, .45);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  padding: 13px 14px;
}

.agent-card-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.agent-status-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.agent-status-card.status-active {
  border-color: var(--accent-green);
  background: #0a1a0f;
  box-shadow: 0 0 10px rgba(63,185,80,0.14);
}
.agent-status-card.status-locked {
  border-color: var(--accent-red);
  background: #1a0505;
  animation: card-lock-pulse 0.8s ease infinite alternate;
}
.agent-status-card.status-queued {
  border-color: var(--accent-yellow);
  background: #1a1205;
}
@keyframes card-lock-pulse {
  from { box-shadow: 0 0 6px rgba(248,81,73,0.14); }
  to   { box-shadow: 0 0 18px rgba(248,81,73,0.38); }
}
.asc-name { font-size: 11px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-dept { font-size: 10px; color: var(--text-muted); }
.asc-platform { font-size: 10px; font-weight: 600; }
.asc-last { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

.agent-card-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.agent-card-filter-meta {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agent-card-filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.agent-card-search {
  width: 180px;
}
.agent-card-clear-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
}
.agent-card-clear-btn:hover,
.agent-card-clear-btn:focus {
  border-color: var(--accent);
  color: var(--text-primary);
  outline: none;
}
@media (max-width: 900px) {
  .agentlake-view-head { align-items: stretch; flex-direction: column; }
  .agentlake-tabs { align-self: flex-start; }
  .agentlake-summary-metrics,
  .agentlake-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agentlake-dept-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agentlake-project-card summary { grid-template-columns: minmax(200px, 1.5fr) repeat(3, .6fr) 16px; }
  .agentlake-project-stat:nth-of-type(4),
  .agentlake-project-last { display: none; }
  .agentlake-project-detail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .agentlake-tabs { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .agentlake-summary-metrics,
  .agentlake-overview-grid,
  .agentlake-dept-agents { grid-template-columns: 1fr; }
  /* Same "chevron ::before is a real grid item" fix as the base rule
     above -- 3 visible items at this width (chevron, name, first stat)
     need 3 columns, not 2, or the same wraparound bug reappears here. */
  .agentlake-dept-group summary { grid-template-columns: auto 1fr auto; }
  .agentlake-dept-stat:nth-last-child(-n+2) { display: none; }
  .agentlake-project-filterbar { align-items: stretch; flex-direction: column; }
  .agentlake-project-filterbar > div { align-items: stretch; flex-direction: column; }
  .agentlake-project-filterbar select,
  .agentlake-project-filterbar input,
  .agentlake-project-filterbar button { width: 100%; }
  .agentlake-project-card summary { grid-template-columns: 1fr auto; }
  .agentlake-project-stat,
  .agentlake-project-last { display: none; }
  .agentlake-project-detail { grid-template-columns: 1fr; }
  .agentlake-project-unattributed { grid-template-columns: 1fr; }
}

/* Live ops strip section labels */
.live-ops-strip { padding-bottom: 20px; }
.live-ops-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
}

/* ── Governance Event Stream ─────────────────────────────────────────────────── */
.event-stream-list { display: flex; flex-direction: column; gap: 10px; }

.gov-event {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0;
  padding: 11px 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gov-event:hover { background: #1c2128; }
.gov-event:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gov-event.type-scout      { border-left-color: var(--tier-scout); }
.gov-event.type-analyst    { border-left-color: var(--tier-analyst); }
.gov-event.type-advisor    { border-left-color: var(--tier-advisor); }
.gov-event.type-strategist { border-left-color: var(--accent-purple); }
.gov-event.type-routine    { border-left-color: var(--tier-scout); }
.gov-event.type-moderate   { border-left-color: var(--tier-analyst); }
.gov-event.type-complex    { border-left-color: var(--tier-advisor); }
.gov-event.type-blocked    { border-left-color: var(--accent-red); background: #1a0505; }
.gov-event.type-blocked:hover { background: #220808; }
.gov-event.type-throttled  { border-left-color: var(--accent-yellow); }
.gov-event.type-collision  { border-left-color: var(--accent-yellow); background: #1a1205; }
.gov-event.type-pruning    { border-left-color: var(--tier-scout); }

.gov-event-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gov-event-type { font-size: 10px; font-weight: 750; letter-spacing: 0.05em; }
.gov-event-time { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }
.gov-event-body { font-size: 11px; color: var(--text-primary); line-height: 1.4; }
.gov-event-context { align-items:center; color:var(--text-muted); display:flex; font-size:9px; gap:6px; }
.gov-event-context span + span::before { content:"·"; margin-right:6px; }
.gov-event-metrics { display:flex; flex-wrap:wrap; gap:5px; }
.gov-event-metrics span {
  background:rgba(139,148,158,.08); border:1px solid rgba(139,148,158,.14);
  border-radius:999px; color:var(--text-muted); font-family:var(--font-mono);
  font-size:8px; padding:2px 6px;
}
.gov-event-inspect {
  align-items:center; color:var(--text-muted); display:flex; font-size:8px;
  font-weight:650; justify-content:space-between; margin-top:1px;
}
.gov-event:hover > .gov-event-inspect { color:var(--accent); }

.gov-event-group { background:var(--bg-panel); }
.gov-event-group-detail {
  border-top:1px solid var(--border); display:none; gap:7px;
  margin-top:5px; padding-top:9px;
}
.gov-event-group-detail.open { display:grid; }
.gov-event-nested {
  background:var(--bg-base); border-left-width:2px; padding:9px 10px;
}
.gov-event-nested .gov-event-type { font-size:9px; }
.gov-event-nested .gov-event-body { font-size:10px; }

.gov-event-detail {
  display: none;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
}
.gov-event-detail.open { display: block; }
.gov-detail-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 4px; margin-top: 10px; }
.gov-detail-label:first-child { margin-top: 0; }
.gov-detail-text { color: var(--text-primary); line-height: 1.5; }
.gov-detail-mono { font-family: var(--font-mono); color: var(--text-muted); font-size: 10px; line-height: 1.6; }

/* ── Audit Log ───────────────────────────────────────────────────────────────── */
.audit-feed-head {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.audit-feed-head span:first-child {
  color: var(--text-primary);
  font-weight: 750;
  text-transform: uppercase;
}
.audit-timeline {
  border-left: 1px solid var(--border);
  margin-left: 8px;
  padding-left: 18px;
}
.audit-event {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  margin-bottom: 8px;
  min-height: 64px;
  padding: 11px 13px;
  position: relative;
  transition: border-color .15s, background .15s;
}
.audit-event:hover {
  background: #10161d;
  border-color: #3a4552;
}
.audit-event-marker {
  background: var(--accent);
  border: 3px solid var(--bg-panel);
  border-radius: 50%;
  height: 9px;
  left: -24px;
  position: absolute;
  width: 9px;
}
.audit-event-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
}
.audit-event-main { min-width: 0; }
.audit-event-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.audit-event-title strong {
  color: var(--text-primary);
  font-size: 11px;
  margin-right: 2px;
}
.audit-event-context {
  color: var(--text-muted);
  font-size: 9px;
  margin-top: 5px;
}
.audit-event-outcome {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-event-outcome.blocked { color: var(--accent-red); font-weight: 650; }
.audit-event-open { color: var(--text-muted); font-size: 20px; }

/* Flash highlight when jumped to from routing feed */
.audit-row-highlight { animation: audit-row-flash 2.5s ease; }
@keyframes audit-row-flash {
  0%,100% { background: transparent; }
  15%,50% { background: rgba(88,166,255,0.18); }
}

/* BLOCKED row treatment */
.audit-event.row-blocked {
  background: #1a0505;
  border-color: rgba(248,81,73,.35);
}
.audit-event.row-blocked .audit-event-marker { background: var(--accent-red); }
.audit-event.row-blocked:hover {
  background: #220808;
}

.rationale-row { margin: -1px 0 9px; }
.rationale-box    { background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px; padding: 14px; }
.rationale-section { margin-bottom: 12px; }
.rationale-label  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.rationale-text   { font-size: 12px; color: var(--text-primary); line-height: 1.6; }
.export-link      { font-size: 11px; color: var(--accent); text-decoration: none; }
.export-link:hover { text-decoration: underline; }

/* ── Export buttons ────────────────────────────────────────────────────────────── */
.export-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s, border-color 0.15s;
}
.export-btn:hover       { color: var(--accent); border-color: var(--accent); }
.export-btn-green:hover { color: var(--accent-green); border-color: var(--accent-green); }

/* ── Agent Efficiency Leaderboard ───────────────────────────────────────────── */
.efficiency-leaderboard-head {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.efficiency-leaderboard-head strong {
  color: var(--text-primary);
  display: block;
  font-size: 12px;
}
.efficiency-leaderboard-head span {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.efficiency-legend {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 9px;
  gap: 6px;
  white-space: nowrap;
}
.efficiency-legend span {
  background: var(--accent-green);
  border-radius: 2px;
  height: 6px;
  margin: 0;
  width: 18px;
}
.efficiency-leaderboard { display: flex; flex-direction: column; gap: 7px; }
.agent-usage-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.agent-usage-head strong {
  color: var(--text-primary);
  display: block;
  font-size: 12px;
}
.agent-usage-head > div > span {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.agent-usage-views {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.agent-usage-views button {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 8px;
}
.agent-usage-views button:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.agent-usage-views button.active {
  background: rgba(88,166,255,.12);
  border-color: rgba(88,166,255,.55);
  color: var(--accent);
}
.agent-usage-summary {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 10px;
}
.agent-usage-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.agent-usage-filterbar .agent-filter-search { margin-left: auto; }
.agent-usage-summary div {
  border-right: 1px solid var(--border);
  padding: 10px 12px;
}
.agent-usage-summary div:last-child { border-right: 0; }
.agent-usage-summary strong {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
}
.agent-usage-summary span {
  color: var(--text-muted);
  display: block;
  font-size: 8px;
  margin-top: 3px;
  text-transform: uppercase;
}
.agent-usage-card {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(250px, 1.25fr) minmax(220px, .9fr) minmax(420px, 1.5fr);
  padding: 12px 14px;
}
.agent-usage-identity {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.agent-usage-identity strong {
  color: var(--text-primary);
  display: block;
  font-size: 11px;
}
.agent-usage-identity small {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.agent-usage-status {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-usage-status.active { color: var(--accent-green); }
.agent-usage-status.occasional { color: var(--accent-yellow); }
.agent-usage-status.inactive { color: var(--accent-red); }
.agent-usage-status.never { color: var(--text-muted); }
.agent-usage-share-label {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: 9px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.agent-usage-share-label strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
}
.agent-usage-share-track {
  background: #273241;
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}
.agent-usage-share-track span {
  background: var(--accent);
  border-radius: inherit;
  display: block;
  height: 100%;
}
.agent-usage-secondary {
  color: var(--text-muted);
  display: flex;
  font-size: 8px;
  gap: 10px;
  margin-top: 7px;
}
.agent-usage-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(62px, 1fr));
  gap: 8px;
}
.agent-usage-stats div {
  border-left: 1px solid var(--border);
  padding-left: 9px;
}
.agent-usage-stats strong {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
}
.agent-usage-stats span {
  color: var(--text-muted);
  display: block;
  font-size: 8px;
  margin-top: 3px;
  text-transform: uppercase;
}
.efficiency-rank-card {
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 13px;
  grid-template-columns: 30px minmax(220px, 1fr) minmax(330px, 1.1fr);
  padding: 11px 13px;
}
.efficiency-rank-number {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.efficiency-rank-title {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.efficiency-rank-title strong {
  color: var(--text-primary);
  display: block;
  font-size: 11px;
}
.efficiency-rank-title span {
  color: var(--text-muted);
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.efficiency-review {
  border: 1px solid rgba(248,81,73,.45);
  border-radius: 999px;
  color: var(--accent-red) !important;
  font-size: 8px !important;
  font-weight: 750;
  margin: 0 !important;
  padding: 2px 6px;
  white-space: nowrap;
}
.efficiency-progress-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(80px, 1fr) 34px;
  margin-top: 8px;
}
.efficiency-progress {
  background: #273241;
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.efficiency-progress span { display: block; height: 100%; border-radius: inherit; }
.efficiency-progress-row > strong {
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
}
.efficiency-rank-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 9px;
}
.efficiency-rank-stats div {
  border-left: 1px solid var(--border);
  padding-left: 9px;
}
.efficiency-rank-stats strong {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
}
.efficiency-rank-stats span {
  color: var(--text-muted);
  display: block;
  font-size: 8px;
  margin-top: 3px;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .agent-usage-head { display: block; }
  .agent-usage-views { justify-content: flex-start; margin-top: 10px; }
  .agent-usage-card { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); }
  .agent-usage-stats { grid-column: 1 / -1; }
  .efficiency-rank-card { grid-template-columns: 28px minmax(0, 1fr); }
  .efficiency-rank-stats { grid-column: 2; }
  .audit-event { grid-template-columns: 1fr auto; }
  .audit-event-time { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .agent-usage-filterbar .agent-filter-select,
  .agent-usage-filterbar .agent-filter-search { margin-left: 0; width: 100%; }
  .agent-usage-summary { grid-template-columns: repeat(2, 1fr); }
  .agent-usage-summary div { border-bottom: 1px solid var(--border); }
  .agent-usage-card { grid-template-columns: 1fr; }
  .agent-usage-stats { grid-column: 1; grid-template-columns: repeat(2, 1fr); }
  .efficiency-rank-stats { grid-template-columns: repeat(2, 1fr); }
  .audit-feed-head span:last-child { display: none; }
}

/* ── Print / PDF overlay ────────────────────────────────────────────────────────── */
@media print {
  body * { visibility: hidden !important; }
  /* visibility:hidden above hides every other element on the page but does
     NOT collapse its layout space (that's what display does, not
     visibility) -- confirmed live 2026-09-13: printing a short 2-page
     "Generate Report" answer from index.html (a tall dashboard page full
     of cards/charts) produced 2 fully blank trailing pages in the actual
     PDF, purely from that invisible-but-still-occupying-space dashboard
     content underneath the overlay. printSection() (js/api.js) already
     adds a "printing" class to body for exactly this purpose, but nothing
     in this stylesheet ever consumed it -- collapsing every other direct
     child of body (never printOverlay itself) removes their layout space
     entirely, so the printed document's height matches the overlay's real
     content, not whatever page it happened to be printed from. */
  body.printing > *:not(#printOverlay) { display: none !important; }
  #printOverlay, #printOverlay * { visibility: visible !important; }
  #printOverlay {
    /* absolute, not fixed -- confirmed live: fixed positioning pins the
       overlay to each page's viewport, so content longer than one page
       (a real answer's evidence list, a multi-page report) got redrawn
       identically on every single printed page instead of flowing across
       them, with visible overlap between the repeated copies. absolute
       still starts the overlay at the top of the document (nothing else
       is positioned, so it's relative to the initial containing block,
       same 0,0 origin fixed gave it) but participates in normal page-
       break flow, so long content actually paginates. The small
       .report-footer below is deliberately still position:fixed --
       repeating identically on every page is exactly what a running
       footer should do. */
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: auto;
    background: white !important;
    color: #111 !important;
    font-size: 11px;
    z-index: 9999;
    /* The four new report containers (biReportDoc/savingsReportDoc/
       riskReportDoc/deptReportDoc) and the Ask-generated report's
       container all stay hidden during normal viewing via an inline
       style="display:none" -- printSection()'s outerHTML clone carries
       that same inline style straight into this overlay. visibility
       alone can't undo it: an element with display:none generates no
       box at all, so setting visibility:visible on it is a no-op, not
       an override. Confirmed live: Chrome's own print preview -- not
       just a saved file, the live preview pane itself -- showed a
       correctly-paginated but completely blank document. !important
       here beats the cloned inline style (inline styles only win over
       a stylesheet rule that lacks !important). */
    display: block !important;
  }
  /* Force light colors for print */
  #printOverlay .badge, #printOverlay [class*="badge"] { border: 1px solid #ccc !important; color: #333 !important; background: #f5f5f5 !important; }
  #printOverlay table { border-collapse: collapse; width: 100%; }
  #printOverlay th, #printOverlay td { border: 1px solid #ddd; padding: 4px 8px; color: #111; }
  #printOverlay th { background: #f0f0f0; font-weight: bold; }
}

/* ── Printable report documents (.report-doc) ────────────────────────────────────
   A purpose-built print layout, distinct from the plain "clone whatever's on
   screen" behavior printSection() uses everywhere else -- built for a
   standalone hidden container (e.g. #biReportDoc) populated right before
   printSection() is called on it, never for the live interactive tab. */
@page {
  size: letter;
  margin: 0.75in 0.65in;
}
@media print {
  #printOverlay .report-doc { font-size: 12px; color: #111; padding-bottom: 40px; }
  #printOverlay .report-header {
    border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 18px;
  }
  #printOverlay .report-logo { height: 22px; width: auto; display: block; margin-bottom: 8px; }
  #printOverlay .report-title { font-size: 22px; margin: 4px 0 8px; color: #111; }
  #printOverlay .report-meta { display: flex; gap: 16px; font-size: 11px; color: #555; }
  #printOverlay .report-section { margin-top: 22px; }
  #printOverlay .report-section-title {
    font-size: 14px; font-weight: 700; color: #111; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 10px;
  }
  /* Keep a KPI card, table, chart figure, or recommendation card from
     splitting across a page boundary -- confirmed absent everywhere else
     in this codebase. */
  #printOverlay .report-kpi, #printOverlay tr, #printOverlay .bi-rec-card,
  #printOverlay .report-chart-figure {
    break-inside: avoid;
  }
  #printOverlay .report-chart-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px;
  }
  #printOverlay .report-chart-figure {
    margin: 0; border: 1px solid #ddd; border-radius: 6px; padding: 8px;
  }
  #printOverlay .report-chart-figure figcaption {
    font-size: 10px; color: #666; margin-top: 4px; text-align: center;
  }
  /* .bi-* classes are otherwise only defined inline in reports.html
     (the live Business Impact tab) -- the Ask-CostPilot-generated report
     (ask-costpilot-render.js) reuses the same class names but can render
     on any page that never loads that markup, so these need a real,
     page-independent definition here rather than assuming reports.html's
     copy is present. */
  #printOverlay .bi-summary {
    font-size: 12px; line-height: 1.5; color: #111; background: #f7f7f7;
    border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
  }
  #printOverlay .bi-note {
    font-size: 10.5px; color: #555; line-height: 1.5; margin-top: 10px;
    padding: 8px 10px; background: #f7f7f7; border: 1px solid #ddd; border-radius: 6px;
  }
  #printOverlay .bi-rank { color: #777; font-variant-numeric: tabular-nums; }
  #printOverlay .bi-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  #printOverlay .bi-rec-card { border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; }
  #printOverlay .bi-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  #printOverlay .bi-rec-title { font-size: 11px; font-weight: 700; color: #111; }
  #printOverlay .bi-rec-priority { font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: #eee; color: #444; }
  #printOverlay .bi-rec-body { font-size: 10px; color: #555; line-height: 1.4; margin-bottom: 6px; }
  #printOverlay .bi-rec-action { font-size: 10.5px; color: #111; font-weight: 600; }
  #printOverlay .bi-rec-impact { font-size: 10px; color: #1a7a4c; margin-top: 3px; }
  #printOverlay .bi-evidence-tag {
    display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 8.5px;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #eee; color: #444;
  }
  #printOverlay .report-kpi-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;
  }
  #printOverlay .report-kpi {
    border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px;
  }
  #printOverlay .report-kpi-label-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  #printOverlay .report-kpi-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #666; }
  #printOverlay .report-kpi-value { font-size: 16px; font-weight: 700; color: #111; margin-top: 2px; }
  #printOverlay .report-kpi-sub { font-size: 9.5px; color: #777; margin-top: 2px; }
  /* Was position:fixed (repeats on every printed page) -- confirmed live
     (2026-09-13) via real multi-page PDF output (not just an on-screen
     print-media screenshot, which never revealed this) that a fixed
     footer collides with and overlaps live table/section content
     whenever a page's normal content flow happens to reach close to the
     page bottom, which the taller, content-richer redesigned reports hit
     routinely -- confirmed on Governance & Risk, where the footer text
     rendered directly on top of a "Requests Blocked" table row, making
     both illegible. Chrome has no real page-aware way to reserve footer
     space per page (same @page margin-box gap already documented for
     page numbering below), so the only reliable fix is to stop fighting
     it: flow normally at the true end of the document instead. Trades
     "footer on every page" for "never unreadable" -- the safer failure
     mode of the two. */
  #printOverlay .report-footer {
    margin-top: 16px;
    font-size: 9px; color: #888; border-top: 1px solid #ddd; padding-top: 4px;
  }

  /* ── Composite-report design system (icons, premium KPI cards, scorecard,
     CSS stacked bars, numbered lists) -- print scope. Added for the
     Support Cost Briefing visual pass (2026-09-13); scoped under
     .rpt-premium so it never touches the plainer existing reports. */
  #printOverlay .rpt-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  }
  #printOverlay .rpt-icon-badge svg { width: 17px; height: 17px; }
  #printOverlay .rpt-header-premium .rpt-header-top { display: flex; align-items: center; justify-content: space-between; }
  #printOverlay .rpt-header-confidential {
    font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #888; border: 1px solid #ccc; border-radius: 999px; padding: 2px 8px;
  }
  #printOverlay .rpt-header-eyebrow {
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #25a99c; margin-top: 10px;
  }
  #printOverlay .rpt-header-tagline { font-size: 10.5px; color: #666; margin: 2px 0 8px; font-style: italic; }
  #printOverlay .rpt-exec-summary { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  #printOverlay .rpt-exec-summary .bi-summary { flex: 1; margin-bottom: 0; }
  #printOverlay .rpt-kpi-row-premium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  #printOverlay .rpt-kpi-premium { border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; break-inside: avoid; }
  #printOverlay .rpt-kpi-premium-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-top: 6px; }
  #printOverlay .rpt-kpi-premium-value { font-size: 17px; font-weight: 700; color: #111; margin-top: 2px; }
  #printOverlay .rpt-kpi-premium-sub { font-size: 9px; color: #777; margin-top: 2px; }
  #printOverlay .rpt-kpi-delta { font-size: 10px; font-weight: 700; margin-top: 2px; display: inline-block; }
  #printOverlay .rpt-kpi-delta.up { color: #1a7a4c; }
  #printOverlay .rpt-kpi-delta.down { color: #b5442e; }
  #printOverlay .rpt-stackbar-legend { display: flex; gap: 12px; margin-bottom: 8px; font-size: 9.5px; color: #555; }
  #printOverlay .rpt-stackbar-legend-item { display: inline-flex; align-items: center; gap: 4px; }
  #printOverlay .rpt-stackbar-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
  #printOverlay .rpt-stackbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  #printOverlay .rpt-stackbar-label { width: 130px; font-size: 10px; color: #333; flex-shrink: 0; text-align: right; }
  #printOverlay .rpt-stackbar-track { flex: 1; display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: #f0f0f0; }
  #printOverlay .rpt-stackbar-seg { display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 700; }
  #printOverlay .rpt-outcome-grid { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: center; }
  #printOverlay .rpt-scorecard {
    border: 1px solid #ddd; border-radius: 8px; padding: 14px; text-align: center; break-inside: avoid;
  }
  #printOverlay .rpt-scorecard-value { font-size: 26px; font-weight: 800; color: #111; margin-top: 6px; }
  #printOverlay .rpt-scorecard-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-top: 2px; }
  #printOverlay .rpt-scorecard-sub { font-size: 9.5px; color: #888; margin-top: 4px; }
  #printOverlay .rpt-numbered-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  #printOverlay .rpt-numbered-list li { display: flex; gap: 10px; break-inside: avoid; }
  #printOverlay .rpt-numbered-badge {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #07336f; color: #fff;
    font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  }
  #printOverlay .rpt-numbered-body { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; }
  #printOverlay .rpt-numbered-body p { font-size: 10.5px; color: #333; margin: 0; }
  #printOverlay .rpt-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  #printOverlay .rpt-rec-title { font-size: 11px; font-weight: 700; color: #111; }
  #printOverlay .rpt-footer-premium { display: flex; justify-content: space-between; gap: 10px; }
}

/* ── Ask CostPilot report preview modal (Phase 3: conversational refinement) ──────
   .report-doc previously only ever existed hidden (display:none) until the
   moment it was cloned for print -- this is the first on-screen rendering
   of it, so it needs its own visual rules rather than relying on the
   #printOverlay-scoped print block above (that block correctly stays
   scoped to #printOverlay: it also forces colors/backgrounds with
   !important specifically to beat this app's dark theme during print,
   which isn't needed here since this modal already commits to a light
   "paper" look on its own terms). Deliberately light/white regardless of
   the app's dark theme -- a print preview reads as paper, not as another
   dashboard panel. */
.cp-report-preview-backdrop {
  position: fixed; inset: 0; background: rgba(3, 8, 18, .58); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cp-report-preview-modal {
  background: #fff; color: #111; width: min(820px, 100%); max-height: 90vh;
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cp-report-preview-toolbar {
  display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e2e2e2; background: #fafafa;
}
.cp-report-preview-toolbar input[type="text"] {
  flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 12.5px;
}
.cp-report-preview-toolbar button {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cp-report-preview-toolbar button.cp-report-preview-print { background: #07336f; color: #fff; border-color: #07336f; }
.cp-report-preview-toolbar button.cp-report-preview-close { padding: 8px 11px; }
.cp-report-preview-status { font-size: 11px; color: #777; padding: 0 14px; min-height: 18px; }
.cp-report-preview-scroll { overflow-y: auto; padding: 20px 24px 28px; }

.cp-report-preview-modal .report-doc { font-size: 13px; color: #111; }
.cp-report-preview-modal .report-header { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 16px; }
.cp-report-preview-modal .report-logo { height: 22px; width: auto; display: block; margin-bottom: 8px; }
.cp-report-preview-modal .report-title { font-size: 20px; margin: 4px 0 8px; color: #111; }
.cp-report-preview-modal .report-meta { display: flex; gap: 16px; font-size: 11px; color: #555; }
.cp-report-preview-modal .report-section { margin-top: 20px; }
.cp-report-preview-modal .report-section-title { font-size: 13px; font-weight: 700; color: #111; border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-bottom: 10px; }
.cp-report-preview-modal .report-chart-figure { border: 1px solid #ddd; border-radius: 6px; padding: 8px; margin: 0 0 12px; max-width: 600px; }
.cp-report-preview-modal .bi-summary { font-size: 12.5px; line-height: 1.5; color: #111; background: #f7f7f7; border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; }
.cp-report-preview-modal .bi-note { font-size: 11px; color: #555; line-height: 1.5; margin-top: 10px; padding: 8px 10px; background: #f7f7f7; border: 1px solid #ddd; border-radius: 6px; }
.cp-report-preview-modal .bi-rank { color: #777; font-variant-numeric: tabular-nums; }
.cp-report-preview-modal .bi-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cp-report-preview-modal .bi-rec-card { border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; }
.cp-report-preview-modal .bi-rec-title { font-size: 11.5px; font-weight: 700; color: #111; }
.cp-report-preview-modal .bi-rec-body { font-size: 10.5px; color: #555; }
.cp-report-preview-modal .bi-rec-action { font-size: 11px; color: #111; font-weight: 600; margin-top: 4px; }
.cp-report-preview-modal .bi-rec-impact { font-size: 11px; color: #1a7a4c; margin-top: 3px; }
.cp-report-preview-modal .bi-rec-priority {
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; background: #eee; color: #444;
}
.cp-report-preview-modal .bi-evidence-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 9px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #eee; color: #444;
}
.cp-report-preview-modal table.rpt-context-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.cp-report-preview-modal table.rpt-context-table th,
.cp-report-preview-modal table.rpt-context-table td { border: 1px solid #ddd; padding: 5px 8px; color: #111; text-align: left; }
.cp-report-preview-modal table.rpt-context-table th { background: #f0f0f0; font-weight: bold; }
.cp-report-preview-modal .report-footer { display: none; } /* the running print footer has no meaning on-screen */
/* renderAskEvidence()'s evidence rows inherit dark-theme text color from
   the app shell (they set no color of their own, relying on an ancestor
   that's normally dark-on-light-text) -- illegible on this modal's white
   background without an explicit override. */
.cp-report-preview-modal .cp-ask-evidence { color: #111; border-color: #ddd; }
.cp-report-preview-modal .cp-ask-evidence span { color: #666; }

/* ── Composite-report design system -- on-screen preview scope. Mirrors the
   #printOverlay rules above; kept in sync deliberately rather than shared,
   per this file's existing two-scope pattern (see the report-doc block's
   header comment). */
.cp-report-preview-modal .rpt-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
}
.cp-report-preview-modal .rpt-icon-badge svg { width: 19px; height: 19px; }
.cp-report-preview-modal .rpt-header-premium .rpt-header-top { display: flex; align-items: center; justify-content: space-between; }
.cp-report-preview-modal .rpt-header-confidential {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #888; border: 1px solid #ccc; border-radius: 999px; padding: 2px 9px;
}
.cp-report-preview-modal .rpt-header-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #25a99c; margin-top: 10px;
}
.cp-report-preview-modal .rpt-header-tagline { font-size: 11px; color: #666; margin: 2px 0 8px; font-style: italic; }
.cp-report-preview-modal .rpt-exec-summary { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cp-report-preview-modal .rpt-exec-summary .bi-summary { flex: 1; margin-bottom: 0; }
.cp-report-preview-modal .rpt-kpi-row-premium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cp-report-preview-modal .rpt-kpi-premium { border: 1px solid #ddd; border-radius: 9px; padding: 12px 14px; }
.cp-report-preview-modal .rpt-kpi-premium-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-top: 7px; }
.cp-report-preview-modal .rpt-kpi-premium-value { font-size: 19px; font-weight: 700; color: #111; margin-top: 2px; }
.cp-report-preview-modal .rpt-kpi-premium-sub { font-size: 10px; color: #777; margin-top: 2px; }
.cp-report-preview-modal .rpt-kpi-delta { font-size: 11px; font-weight: 700; margin-top: 2px; display: inline-block; }
.cp-report-preview-modal .rpt-kpi-delta.up { color: #1a7a4c; }
.cp-report-preview-modal .rpt-kpi-delta.down { color: #b5442e; }
.cp-report-preview-modal .rpt-stackbar-legend { display: flex; gap: 14px; margin-bottom: 9px; font-size: 10.5px; color: #555; }
.cp-report-preview-modal .rpt-stackbar-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cp-report-preview-modal .rpt-stackbar-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cp-report-preview-modal .rpt-stackbar-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cp-report-preview-modal .rpt-stackbar-label { width: 140px; font-size: 11px; color: #333; flex-shrink: 0; text-align: right; }
.cp-report-preview-modal .rpt-stackbar-track { flex: 1; display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #f0f0f0; }
.cp-report-preview-modal .rpt-stackbar-seg { display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; font-weight: 700; }
.cp-report-preview-modal .rpt-outcome-grid { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: center; }
.cp-report-preview-modal .rpt-scorecard { border: 1px solid #ddd; border-radius: 9px; padding: 16px; text-align: center; }
.cp-report-preview-modal .rpt-scorecard-value { font-size: 28px; font-weight: 800; color: #111; margin-top: 6px; }
.cp-report-preview-modal .rpt-scorecard-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-top: 2px; }
.cp-report-preview-modal .rpt-scorecard-sub { font-size: 10.5px; color: #888; margin-top: 4px; }
.cp-report-preview-modal .rpt-numbered-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-report-preview-modal .rpt-numbered-list li { display: flex; gap: 12px; }
.cp-report-preview-modal .rpt-numbered-badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #07336f; color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.cp-report-preview-modal .rpt-numbered-body { flex: 1; border: 1px solid #ddd; border-radius: 7px; padding: 9px 11px; }
.cp-report-preview-modal .rpt-numbered-body p { font-size: 11.5px; color: #333; margin: 0; }
.cp-report-preview-modal .rpt-rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cp-report-preview-modal .rpt-rec-title { font-size: 12px; font-weight: 700; color: #111; }
.cp-report-preview-modal .rpt-footer-premium { display: flex; justify-content: space-between; gap: 10px; color: #888; font-size: 10.5px; }

/* ── Misc ─────────────────────────────────────────────────────────────────────── */
.placeholder { color: var(--text-muted); font-style: italic; font-size: 12px; padding: 8px 0; }

/* ── Help Icon ───────────────────────────────────────────────────────────────── */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: 1px solid var(--text-muted);
  color: var(--text-muted); font-size: 10px; font-weight: 700;
  cursor: pointer; margin-left: 8px; vertical-align: middle;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.help-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ── Contextual Tooltip ──────────────────────────────────────────────────────── */
.help-tooltip {
  position: absolute; z-index: 1000; width: 300px;
  background: var(--bg-panel); border: 1px solid var(--accent);
  border-radius: 8px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.help-tooltip-title { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.help-tooltip-body  { font-size: 12px; color: var(--text-primary); line-height: 1.6; }
.help-tooltip-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.help-tooltip-close:hover { color: var(--text-primary); }

/* ── Tour Button (header) ────────────────────────────────────────────────────── */
.tour-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 6px; padding: 5px 12px;
  font-size: 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
  margin-left: 8px;
}
.tour-btn:hover { border-color: var(--accent); color: var(--accent); }
.tour-btn.active {
  color: #06111f !important; background: var(--accent) !important; border-color: var(--accent) !important;
  font-weight: 700;
}

/* ── Tour Overlay & Box ──────────────────────────────────────────────────────── */
.tour-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 900; pointer-events: none;
}
.tour-box {
  position: fixed; z-index: 950; width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 20px; box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.tour-step-count { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; }
.tour-title      { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.tour-body       { font-size: 12px; color: var(--text-primary); line-height: 1.7; margin-bottom: 16px; }
.tour-actions    {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px 0;
  background: linear-gradient(to bottom, rgba(22,27,34,0), var(--bg-panel) 35%);
}
.tour-btn-skip   { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 4px 0; }
.tour-btn-skip:hover { color: var(--text-primary); }
.tour-btn-next   { background: var(--accent); color: #000; border: none; border-radius: 6px; padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tour-btn-next:hover { opacity: 0.85; }
.tour-btn-prev   { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 7px 14px; font-size: 12px; cursor: pointer; }
.tour-btn-prev:hover { border-color: var(--text-muted); color: var(--text-primary); }
.tour-highlight  {
  outline: 2px solid var(--accent) !important; outline-offset: 5px;
  border-radius: 8px; position: relative; z-index: 910;
  box-shadow: 0 0 0 5px rgba(88,166,255,0.12), 0 0 28px rgba(88,166,255,0.25);
}
.tour-highlight::after {
  content: attr(data-guide-label);
  position: absolute; top: -13px; left: 14px; z-index: 912;
  max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--accent); color: #06111f; border-radius: 999px;
  padding: 3px 9px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); pointer-events: none;
}

/* ── Footer ───────────────────────────────────────────────────────────────────── */
.footer {
  padding: 14px 28px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted); text-align: center;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer code { font-family: var(--font-mono); }

/* ── Agentlake Controls ──────────────────────────────────────────────────────── */
.agent-controls  { display: flex; align-items: center; gap: 12px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.btn-collision   { background: #2d1a0d; color: var(--accent-yellow); border: 1px solid var(--accent-yellow); border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-collision:hover { background: #3d2510; }
.btn-release     { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.btn-release:hover { background: #0d1f2d; }
.collision-note  { font-size: 11px; color: var(--text-muted); }
.row-locked td   { color: var(--accent-red) !important; }
.row-active td   { border-top: 1px solid rgba(63,185,80,.15); border-bottom: 1px solid rgba(63,185,80,.15); }
.row-active td:first-child { border-left: 3px solid var(--accent-green); }
.collision-alert { margin-top: 12px; background: #1a0d0d; border: 1px solid var(--accent-red); border-radius: 6px; padding: 14px; }
.collision-header { font-size: 13px; font-weight: 700; color: var(--accent-red); margin-bottom: 8px; }
.collision-body  { font-size: 12px; color: var(--text-primary); line-height: 1.6; }
.collision-body code { font-family: var(--font-mono); color: var(--accent-yellow); }

/* ── Budget Controls ─────────────────────────────────────────────────────────── */
.budget-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cap-input {
  width: 80px; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 4px; padding: 4px 8px; font-size: 12px;
}
.btn-cap {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer;
}
.btn-cap:hover    { border-color: var(--accent); color: var(--accent); }
.btn-reset:hover  { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.btn-override {
  background: #0d2d1a; color: var(--accent-green); border: 1px solid var(--accent-green);
  border-radius: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.btn-override:hover  { background: #0d3d20; }
.btn-revoke { background: #2d0d0d; color: var(--accent-red); border-color: var(--accent-red); }
.btn-revoke:hover { background: #3d1010; }

.budget-throttle-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.budget-throttle-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.budget-throttle-select {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.budget-throttle-select:focus { outline: none; border-color: var(--accent); }
.budget-throttle-hint {
  font-size: 10px; color: var(--text-muted); font-style: italic;
}
.toggle-switch {
  position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border); border-radius: 18px; transition: background 0.2s;
}
.toggle-slider::before {
  content: ""; position: absolute; height: 12px; width: 12px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); }

/* ── Router Panel ────────────────────────────────────────────────────────────── */
.router-controls { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; }
.router-settings { display: flex; flex-direction: column; gap: 10px; }
.router-select {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none;
}
.router-select:focus { border-color: var(--accent); }
.router-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.btn-secondary {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover { background: #0d1f2d; }

.router-result { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.router-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.router-badges { display: flex; gap: 8px; }
.router-reason { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; font-style: italic; }

.router-cost-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.cost-cell { background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.cost-cell.highlight-green  { border-color: var(--accent-green); }
.cost-cell.highlight-purple { border-color: var(--accent-purple); }
.cost-cell.highlight-yellow { border-color: var(--accent-yellow); }
.cost-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; }
.cost-value { font-size: 16px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.cost-cell.highlight-green  .cost-value { color: var(--accent-green); }
.cost-cell.highlight-purple .cost-value { color: var(--accent-purple); }
.cost-cell.highlight-yellow .cost-value { color: var(--accent-yellow); }

.router-response {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px;
  padding: 14px; font-size: 13px; line-height: 1.6; color: var(--text-primary); margin-top: 6px;
}

/* ── Header Nav ──────────────────────────────────────────────────────────────── */
.header-nav { display: flex; align-items: center; }
.header-nav-link {
  font-size: 12px; font-weight: 600; color: var(--accent);
  text-decoration: none; border: 1px solid var(--accent);
  border-radius: 6px; padding: 5px 12px;
  transition: background 0.15s;
}
.header-nav-link:hover { background: rgba(0,168,255,0.08); }

/* ── Register Agent Form ──────────────────────────────────────────────────────── */
.register-agent-form {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.register-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 12px;
}
.register-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.register-field { display: flex; flex-direction: column; gap: 4px; }
.reg-input {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 7px 10px; font-size: 12px; outline: none;
}
.reg-input:focus { border-color: var(--accent); }
.register-actions { display: flex; align-items: center; gap: 14px; }
.register-status { font-size: 12px; }
.btn-deregister {
  background: transparent; color: var(--accent-red); border: 1px solid var(--accent-red);
  border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.btn-deregister:hover { background: rgba(255,82,82,0.08); }

.header-reset-btn {
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  border-radius: 6px;
  padding: 4px 10px;
}
.header-reset-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* ── Collapsible panels ───────────────────────────────────────────────────────── */
.collapsible-title {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
}
.collapsible-title:hover { color: var(--accent); }
.panel-chevron { font-size: 14px; color: var(--text-muted); transition: transform 0.15s; }

/* ── Enterprise Demo dropdown ─────────────────────────────────────────────────── */
.demo-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 190px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
.demo-dropdown-menu.open { display: block; }
.demo-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.demo-dropdown-menu button:hover { background: rgba(88,166,255,0.08); color: var(--accent); }
.demo-dropdown-menu button:first-child { color: var(--accent-yellow); }
.demo-dropdown-menu button:first-child:hover { color: var(--accent-yellow); background: rgba(210,153,34,0.1); }

/* ── Drag-and-drop ────────────────────────────────────────────────────────────── */
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 8px; flex-shrink: 0;
  color: var(--text-muted); cursor: grab; font-size: 16px; line-height: 1;
  border-radius: 4px; transition: color 0.15s, background 0.15s;
  user-select: none;
}
.drag-handle:hover  { color: var(--accent); background: rgba(88,166,255,0.08); }
.drag-handle:active { cursor: grabbing; }

.dp-wrap { /* dashboard draggable panel wrapper */ }

.sortable-ghost  { opacity: 0.4; background: var(--bg-panel); border: 1px dashed var(--accent); border-radius: 8px; }
.sortable-chosen { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

/* ── Report card drag ─────────────────────────────────────────────────────────── */
.rpt-draggable-col { display: flex; flex-direction: column; gap: 20px; }
.rpt-drag-card     { }
.rpt-drag-bar {
  display: flex; align-items: center; padding: 2px 0 6px;
  opacity: 0.45; transition: opacity 0.15s;
}
.rpt-drag-card:hover .rpt-drag-bar { opacity: 1; }
.rpt-drag-bar .drag-handle { margin-right: 0; }

/* ── Sensitive Term Library ───────────────────────────────────────────────────── */
.panel-sub {
  font-size: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5;
}
.kw-add-form {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
}
.kw-add-row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.kw-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.kw-field-btn { flex: 0 0 auto; }
.kw-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.kw-table th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.kw-table td {
  padding: 9px 10px; border-bottom: 1px solid rgba(48,54,61,0.5);
  vertical-align: middle;
}
.kw-table tr:last-child td { border-bottom: none; }
.kw-disabled-row { opacity: .58; }
.kw-term-cell { font-family: var(--font-mono); }
.kw-term {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px; font-size: 12px; color: var(--accent-green);
}
.kw-cat { font-size: 11px; color: var(--text-muted); }
.kw-recommended {
  color: var(--text-muted); display:block; font-family:var(--font-sans);
  font-size:8px; font-weight:700; margin-top:5px; text-transform:uppercase;
}
.kw-scope { font-size: 11px; color: var(--text-muted); }
.kw-action-select {
  background:var(--bg-input); border:1px solid var(--border); border-radius:5px;
  color:var(--text-primary); font-size:10px; padding:5px 7px;
}
.kw-toggle {
  background:rgba(139,148,158,.08); border:1px solid var(--border); border-radius:999px;
  color:var(--text-muted); cursor:pointer; font-size:9px; font-weight:800; padding:3px 8px;
}
.kw-toggle.enabled {
  background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.4); color:var(--accent-green);
}
.kw-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.kw-badge-flag     { background: rgba(210,153,34,0.15); color: var(--accent-yellow); }
.kw-badge-escalate { background: rgba(88,166,255,0.12); color: var(--accent); }
.kw-badge-block    { background: rgba(248,81,73,0.12);  color: var(--accent-red); }

/* ── Routing Rules keyword chips ──────────────────────────────────────────────── */
.rr-kw-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25);
  border-radius: 14px; padding: 3px 10px; font-size: 12px;
}
.rr-kw-locked {
  background: rgba(139,148,158,0.08); border-color: rgba(139,148,158,0.2);
  color: var(--text-muted);
}
.rr-kw-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; padding: 0; line-height: 1;
}
.rr-kw-remove:hover { color: var(--accent-red); }

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kpi-row  { grid-template-columns: repeat(2, 1fr); }
  .mid-row  { grid-template-columns: 1fr; }
}

/* ── Agentlake dashboard filters ─────────────────────────────────────────────── */
.agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.agent-panel-header .panel-title { margin-bottom: 0; }
.agent-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agent-filter-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
}
.agent-filter-select:focus { outline: none; border-color: var(--accent); }
.agent-filter-search {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 5px 10px;
  width: 140px;
}
.agent-filter-search:focus { outline: none; border-color: var(--accent); }
.filter-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
  margin-left: 4px;
}

/* ── Mobile guard overlay ────────────────────────────────────────────────────
   Applied to dashboard pages only (not savings/landing).
   Hidden on desktop; visible on phones and portrait tablets.
──────────────────────────────────────────────────────────────────────────── */
#mobile-guard {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-base);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; text-align: center;
}
#mobile-guard .mg-logo {
  font-size: 28px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.5px; margin-bottom: 24px;
}
#mobile-guard .mg-logo span { color: var(--accent); }
#mobile-guard .mg-icon { font-size: 40px; margin-bottom: 16px; }
#mobile-guard .mg-title {
  font-size: 20px; font-weight: 800; color: var(--text-primary);
  margin-bottom: 10px; line-height: 1.2;
}
#mobile-guard .mg-sub {
  font-size: 14px; color: var(--text-muted); line-height: 1.65;
  max-width: 320px; margin-bottom: 28px;
}
#mobile-guard .mg-links { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
#mobile-guard .mg-btn-primary {
  display: block; padding: 13px; border-radius: 8px;
  background: var(--accent-green); color: #0d1117;
  font-size: 14px; font-weight: 800; text-decoration: none;
}
#mobile-guard .mg-btn-secondary {
  display: block; padding: 12px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text-muted);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
#mobile-guard .mg-rotate {
  margin-top: 20px; font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}

/* Show on phones (hard block) */
@media (max-width: 767px) {
  #mobile-guard { display: flex; }
}

/* Show on portrait tablets with soft rotate nudge */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #mobile-guard { display: flex; }
  #mobile-guard .mg-title::before { content: "Rotate for best experience — "; }
  #mobile-guard .mg-rotate { display: flex; }
}