/* ============================================================
   Executive Dashboard + Reports — UI/UX 1.0
   Swiss-inspired, restrained, presentation-ready design system.
   Scoped to .exec-dash so it never leaks into the rest of the app.
   Builds on the app's existing CSS vars (--text, --surface, --border,
   --color-primary, --color-success/error/warning) for dark-mode parity.
   ============================================================ */

.exec-dash {
  --exec-r-1: 10px;
  --exec-r-2: 14px;
  --exec-pill: 999px;
  --exec-border: color-mix(in srgb, var(--text, #0f172a) 9%, transparent);
  --exec-border-strong: color-mix(in srgb, var(--text, #0f172a) 16%, transparent);
  --exec-surface: var(--surface, #ffffff);
  --exec-surface-2: color-mix(in srgb, var(--text, #0f172a) 3.5%, var(--surface, #fff));
  --exec-muted: var(--text-muted, #64748b);
  /* Trust palette — meaning, not decoration */
  --trust-ok: #15803d;
  --trust-stale: #b45309;
  --trust-syncing: #1d4ed8;
  --trust-failed: #b91c1c;
  font-variant-numeric: tabular-nums;
}
.exec-dash h1, .exec-dash h2, .exec-dash h3 { letter-spacing: -0.015em; }

/* ── Scope header (control panel, not clutter) ── */
.exec-scope { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--exec-border); }
.exec-scope-l { min-width:0; }
.exec-scope-title { font-size:20px; font-weight:680; color:var(--text); margin:0; }
.exec-scope-sum { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; font-size:12px; color:var(--exec-muted); }
.exec-scope-sum .sep { opacity:.4; }
.exec-scope-sum b { color:var(--text); font-weight:600; }
.exec-scope-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Trust chip (1-second readable, icon + text, never color-only) ── */
.exec-trust { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:var(--exec-pill); border:1px solid transparent; line-height:1; white-space:nowrap; }
.exec-trust .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.exec-trust.ok      { color:var(--trust-ok);      background:color-mix(in srgb,var(--trust-ok) 9%,transparent);      border-color:color-mix(in srgb,var(--trust-ok) 22%,transparent); }
.exec-trust.stale,
.exec-trust.partial { color:var(--trust-stale);   background:color-mix(in srgb,var(--trust-stale) 11%,transparent);  border-color:color-mix(in srgb,var(--trust-stale) 26%,transparent); }
.exec-trust.syncing { color:var(--trust-syncing); background:color-mix(in srgb,var(--trust-syncing) 9%,transparent);  border-color:color-mix(in srgb,var(--trust-syncing) 22%,transparent); }
.exec-trust.failed  { color:var(--trust-failed);  background:color-mix(in srgb,var(--trust-failed) 9%,transparent);   border-color:color-mix(in srgb,var(--trust-failed) 24%,transparent); }
.exec-trust.ok .dot{background:var(--trust-ok)} .exec-trust.stale .dot,.exec-trust.partial .dot{background:var(--trust-stale)} .exec-trust.failed .dot{background:var(--trust-failed)}
.exec-trust.syncing .dot{ background:var(--trust-syncing); animation:exec-pulse 1.2s ease-in-out infinite; }
@keyframes exec-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Mode toggle (Executive / Analyst) ── */
.exec-modes { display:inline-flex; padding:3px; gap:2px; background:var(--exec-surface-2); border:1px solid var(--exec-border); border-radius:var(--exec-pill); }
.exec-modes button { border:none; background:transparent; color:var(--exec-muted); font-size:12px; font-weight:600; padding:5px 14px; border-radius:var(--exec-pill); cursor:pointer; transition:color .15s, background .15s; }
.exec-modes button.active { background:var(--exec-surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.07); }
.exec-modes button:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

/* ── KPI cards (premium, tabular, not bubbly) ── */
.exec-kpi-strip { display:grid; gap:14px; margin-bottom:22px; }
.exec-kpi { position:relative; padding:15px 16px 13px; border-radius:var(--exec-r-2); border:1px solid var(--exec-border); background:var(--exec-surface); display:flex; flex-direction:column; gap:9px; min-height:116px; transition:border-color .15s; }
.exec-kpi:hover { border-color:var(--exec-border-strong); }
.exec-kpi .k-label { font-size:12px; font-weight:550; color:var(--exec-muted); display:flex; align-items:center; gap:6px; }
.exec-kpi .k-val { font-size:26px; font-weight:680; color:var(--text); line-height:1.04; letter-spacing:-0.02em; }
.exec-kpi .k-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.exec-kpi .k-delta { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:650; padding:2px 7px; border-radius:6px; }
.exec-kpi .k-delta.up   { color:var(--trust-ok);     background:color-mix(in srgb,var(--trust-ok) 10%,transparent); }
.exec-kpi .k-delta.down { color:var(--trust-failed);  background:color-mix(in srgb,var(--trust-failed) 10%,transparent); }
.exec-kpi .k-delta.flat { color:var(--exec-muted);    background:color-mix(in srgb,var(--text) 6%,transparent); }
.exec-kpi .k-spark { width:74px; height:26px; flex:0 0 auto; }
.exec-kpi .k-vs { font-size:10.5px; color:var(--exec-muted); white-space:nowrap; }
.exec-kpi[data-partial="1"]::after { content:""; position:absolute; top:11px; right:11px; width:6px; height:6px; border-radius:50%; background:var(--trust-stale); }

/* ── Chart / section cards ── */
.exec-card { padding:18px 18px 16px; border-radius:var(--exec-r-2); border:1px solid var(--exec-border); background:var(--exec-surface); }
.exec-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.exec-card-head h3 { margin:0; font-size:14.5px; font-weight:620; color:var(--text); }
.exec-card-head p { margin:3px 0 0; font-size:12px; color:var(--exec-muted); }

/* ── States ── */
.exec-skel { background:linear-gradient(90deg, color-mix(in srgb,var(--text) 5%,transparent) 25%, color-mix(in srgb,var(--text) 9%,transparent) 37%, color-mix(in srgb,var(--text) 5%,transparent) 63%); background-size:400% 100%; animation:exec-shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes exec-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.exec-empty { text-align:center; padding:30px 20px; color:var(--exec-muted); }
.exec-empty .ic { font-size:24px; opacity:.5; margin-bottom:8px; }
.exec-empty .msg { font-size:13px; line-height:1.5; }
.exec-empty .act { margin-top:12px; }

/* ── Mode visibility: analyst-depth sections hidden in exec mode ── */
.exec-dash.mode-exec [data-depth="analyst"] { display:none !important; }

@media (max-width:680px) {
  .exec-scope { flex-direction:column; }
  .exec-kpi-strip { grid-template-columns:1fr 1fr; }
  .exec-kpi .k-spark { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .exec-skel, .exec-trust.syncing .dot { animation:none; }
}