/* viewer/viewer.css — Keka Ops Team Viewer
   Matches the extension's dashboard.css look & feel exactly.
*/

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

/* ── Design tokens (mirrors dashboard.css) ──────────────────── */
:root {
  --bg:           #f0f2f8;
  --surface:      #ffffff;
  --surface-2:    #f1f3f9;
  --border:       #e3e6ef;
  --border-strong:#cbd0dd;
  --text:         #0f1320;
  --text-muted:   #4a5060;
  --text-faint:   #6b7280;

  --vc-purple:    #7C3AED;
  --vc-blue:      #3B82F6;
  --vc-teal:      #06B6D4;

  --primary:      #7C3AED;
  --primary-50:   #f5f3ff;
  --primary-200:  #ddd6fe;
  --primary-700:  #5B21B6;

  --success:      #15803d;
  --success-50:   #dcfce7;
  --success-200:  #bbf7d0;
  --warn:         #b45309;
  --warn-50:      #fef3c7;
  --warn-200:     #fde68a;
  --danger:       #b91c1c;
  --danger-50:    #fee2e2;
  --danger-200:   #fecaca;
  --info:         #0369a1;
  --info-50:      #e0f2fe;
  --info-200:     #bae6fd;
  --neutral-50:   #f3f4f6;
  --neutral-200:  #e5e7eb;

  --accent:       #7C3AED;
  --text-2:       #4a5060;
  --warning-bg:   #fef3c7;
  --warning:      #92400e;

  --shadow:       0 1px 3px rgba(20,24,50,.07), 0 1px 4px rgba(20,24,50,.05);
  --shadow-md:    0 4px 16px rgba(20,24,50,.10);
  --radius:       10px;
  --radius-sm:    7px;

  /* ── Executive Dashboard "Signal" theme — vivid gradient pairs, used only
     on the Executive tab (gated by #panel.exec-theme). Separate from the
     muted --success/--warn/--danger/--info pills used everywhere else in
     the app, which stay untouched. ── */
  --xd-p1: #7c3aed; --xd-p2: #4f46e5;             /* purple → indigo, brand */
  --xd-blue1: #3b82f6; --xd-blue2: #2563eb;
  --xd-rose1: #fb7185; --xd-rose2: #e11d48;
  --xd-amber1: #fbbf24; --xd-amber2: #d97706;
  --xd-orange1: #fb923c; --xd-orange2: #ea580c;
  --xd-green1: #34d399; --xd-green2: #059669;
  --xd-slate1: #94a3b8; --xd-slate2: #475569;
  --xd-good: #059669; --xd-warn: #d97706; --xd-crit: #e11d48;
  --xd-ink-faint: #8f8cb0;
  --xd-bg1: #eef0fb;
  --xd-shadow-sm: 0 1px 2px rgba(45,35,110,.06), 0 2px 8px -2px rgba(45,35,110,.08);
  --xd-shadow-md: 0 10px 28px -10px rgba(76,53,170,.28);
  --xd-radius: 16px;
  --xd-radius-sm: 11px;
}

/* Single font-family for the entire app — set ONCE here, never overridden
   elsewhere. Everything else (including form controls, which browsers don't
   auto-inherit body's font for) picks this up via `font-family: inherit`. */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Aptos, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }

/* ── Login ──────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0840 0%, #1c2566 55%, #0b3a58 100%);
  padding: 16px;
}
.login-card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; }
.login-logo-mark {
  background: var(--vc-purple);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.login-logo-text { font-size: 18px; font-weight: 700; }
.login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-error {
  background: var(--danger-50);
  border: 1px solid #fecaca;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: left;
}
#login-form { display: flex; flex-direction: column; gap: 12px; }
#login-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
#login-form input:focus { border-color: var(--vc-purple); }
#login-form button {
  padding: 11px;
  background: linear-gradient(135deg, var(--vc-purple) 0%, var(--primary-700) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
#login-form button:hover { opacity: .9; }
#login-form button:disabled { opacity: .6; cursor: not-allowed; }

/* ── Sticky header wrapper (topbar + data banner + tab bar together) ────── */
/* Sticking the wrapper as one unit — rather than each child individually —
   avoids having to hardcode the topbar's pixel height as the tab-bar's
   sticky `top` offset, which would silently break if the topbar's content
   ever grows/wraps. */
.app-sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ── Top bar ────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(135deg, #1a0840 0%, #1c2566 55%, #0b3a58 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  box-shadow: 0 2px 12px rgba(10,5,40,.35);
}
.topbar-brand   { display: flex; align-items: center; gap: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-logo {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.topbar-title { font-size: 15px; font-weight: 700; }
.topbar-meta  { font-size: 12px; color: rgba(255,255,255,.6); margin-left: 4px; }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.30);
  color: rgba(255,255,255,.88);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,.13); color: #fff; }

/* ── Company Scope switcher ───────────────────────────────────────────────
   Full-width row, first thing in the sticky header (above the brand bar) —
   this is the primary lens for the whole app, not a secondary filter, so it
   gets its own row rather than living inside .topbar-brand. Four equal
   segments (25% each). Exact colors per explicit request: #ffd400 resting
   background, #e37425 for both hover and active, 2px white border all
   around each segment. */
.company-bar {
  display: flex;
  width: 100%;
  background: #ffd400;
}
.company-btn {
  flex: 1 1 25%;
  padding: 11px 8px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #1a0840;
  border: 2px solid #ffffff;
  background: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.company-btn:hover,
.company-btn.active {
  color: #ffffff;
  background: #e37425;
}

/* ── Tab bar ────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  flex-wrap: wrap;          /* tabs wrap to a second line instead of scrolling */
  gap: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 0 16px;
  flex-shrink: 0;
}
.tab-btn {
  padding: 14px 20px;       /* taller hit target — fully visible */
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: inherit;
  transition: color .15s, border-color .15s;
  line-height: 1.3;
}
.tab-btn:hover  { color: var(--vc-purple); }
.tab-btn.active { color: var(--vc-purple); border-bottom-color: var(--vc-purple); font-weight: 700; }

/* ── Main panel ─────────────────────────────────────────────── */
.panel-wrap {
  padding: 24px 28px 60px;
  width: 100%;
}

/* ── Page header ────────────────────────────────────────────── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
/* NOT flex:1 — .page-head already uses justify-content:space-between to push
   a 2nd child to the right; flex:1 here used to also match any OTHER <div>
   sibling (e.g. Executive's .xd-head-btns button-group wrapper), forcing it
   to grow and share width with the title instead of sizing to its own
   content — which was the actual cause of the header buttons sitting too
   far left instead of flush against the right edge. */
.page-title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.page-sub   { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.exec-partial-note { color: var(--warn); background: var(--warn-50); padding: 8px 12px; border-radius: 6px; margin-top: 8px; font-weight: 500; }

/* ── KPI Cards ──────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.card.danger  { border-left-color: var(--danger); }
.card.warn    { border-left-color: var(--warn); }
.card.success { border-left-color: var(--success); }
.card.blue    { border-left-color: var(--vc-blue); }
.card-label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: 6px;
}
.card-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.card-sub   { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.card-trend { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.card.danger  .card-value { color: var(--danger); }
.card.warn    .card-value { color: var(--warn); }
.card.success .card-value { color: var(--success); }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;               /* clip rounded corners */
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  /* overflow-x: auto only when content truly overflows (e.g. Revenue Forecast) */
  overflow-x: auto;
}
table.data {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
table.data thead th {
  background: linear-gradient(90deg, #3B1F8C 0%, #1A3272 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 13px 14px;
  text-align: left;
  border-bottom: 2px solid #1a0f5a;
  border-right: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;            /* header labels never wrap */
  cursor: default;
  user-select: none;
}
table.data thead th.sortable { cursor: pointer; }
table.data thead th.sortable:hover { background: linear-gradient(90deg, #4C2AAA 0%, #25458F 100%); }
table.data thead th:last-child { border-right: none; }
table.data thead th.sort-active { background: linear-gradient(90deg, #5B21B6 0%, #1A3272 100%); }
table.data thead th.sort-active::after {
  content: attr(data-arrow);
  margin-left: 5px;
  opacity: .85;
}
table.data tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
  white-space: normal;            /* allow text to wrap — prevents horizontal scroll */
  word-break: break-word;
  text-align: left;
  font-size: 15px;
}
table.data tbody td:last-child { border-right: none; }
table.data tbody tr:hover td { background: #f4f6fb; }
table.data tbody tr:last-child td { border-bottom: none; }
/* Numeric/date/badge cells stay on one line */
table.data .num {
  text-align: left;
  white-space: nowrap;
}
table.data td.nowrap,
table.data th.nowrap { white-space: nowrap; }

/* Revenue Forecast table: Project + 12 month columns + Total = 14 columns.
   Compact font + tight padding (+ "Jun '26" headers from JS) so the row fits
   without horizontal scrolling on normal-width displays. */
.revenue-forecast-table thead th  { font-size: 11px; padding: 8px 8px; }
.revenue-forecast-table tbody td  { font-size: 13px; padding: 6px 9px; }
.revenue-forecast-table tfoot th,
.revenue-forecast-table tfoot td  { font-size: 12px; padding: 7px 9px; }
.revenue-forecast-table .num      { font-size: 12px; }
table.data tfoot th, table.data tfoot td {
  padding: 11px 14px;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
table.data tfoot th.num, table.data tfoot td.num { text-align: right; }

/* ── Section head ───────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
  flex-wrap: wrap;
  gap: 10px;
}
.section-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  flex-shrink: 0;
}
.badge-green  { background: var(--success-50); color: var(--success); }
.badge-amber  { background: var(--warn-50);    color: var(--warn); }
.badge-red    { background: var(--danger-50);  color: var(--danger); }
.badge-blue   { background: var(--info-50);    color: var(--info); }
.badge-gray   { background: var(--neutral-50); color: var(--text-muted); }
/* Extension badge classes (for compatibility) */
.b-healthy       { background: var(--success-50); color: var(--success); }
.b-near          { background: var(--info-50);    color: var(--info); }
.b-bench         { background: var(--danger);     color: #fff; border-color: var(--danger); }
.b-under         { background: var(--warn-50);    color: var(--warn); }
.b-over, .b-missing, .b-rejected { background: var(--danger-50); color: var(--danger); }
.b-pending       { background: var(--warn-50);    color: var(--warn); }
.b-auto          { background: var(--success-50); color: var(--success); }
.b-manual        { background: var(--warn-50);    color: var(--warn); }
.b-failed        { background: var(--danger-50);  color: var(--danger); }
.b-allocated     { background: var(--info-50);    color: var(--info); }
.b-current       { background: var(--info-50);    color: var(--info); }
.b-upcoming      { background: var(--neutral-50); color: var(--text-muted); }
.b-leaveconflict { background: var(--danger-50);  color: var(--danger); }
.b-overalloc     { background: var(--danger-50);  color: var(--danger); }
.b-long          { background: var(--warn-50);    color: var(--warn); }

/* ── Month filter pills ─────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}
.filter-bar .filter-label { font-size: 12px; color: var(--text-muted); margin-right: 4px; }
.pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.pill:hover   { border-color: var(--vc-purple); color: var(--vc-purple); }
.pill.active  { background: var(--vc-purple); color: #fff; border-color: var(--vc-purple); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); box-shadow: var(--shadow); }
.btn-sm  { padding: 5px 10px; font-size: 13px; }

/* ── Project impact cards (Leave) ───────────────────────────── */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.impact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.risk { float: right; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.risk-high   { background: var(--danger-50); color: var(--danger); }
.risk-medium { background: var(--warn-50);   color: var(--warn); }
.risk-low    { background: var(--success-50); color: var(--success); }

/* ── Reasons list ───────────────────────────────────────────── */
.reasons-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.reasons-list li.severity-ok     { color: var(--success); }
.reasons-list li.severity-danger,
.reasons-list li.severity-block  { color: var(--danger); }
.reasons-list li.severity-warn   { color: var(--warn); }
.reasons-list li.severity-info   { color: var(--info); }

/* ── Finance section titles ─────────────────────────────────── */
.finance-section-title {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.finance-section-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  font-size: 13px;
}

/* ── Profitability accordion ────────────────────────────────── */
.prof-sub-row td {
  background: var(--surface-2) !important;
  color: var(--text-muted);
  font-size: 13px;
}
.prof-sub-row:hover td { background: #e9ecf5 !important; }

/* ── Allocation date filter bar ─────────────────────────────── */
.date-range-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.date-range-bar label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.date-range-bar input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
}

/* ── Empty state ────────────────────────────────────────────── */
.empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 44px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Period toggle (Dashboard) ──────────────────────────────── */
.period-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.period-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.period-btn:hover  { background: var(--border); color: var(--text); }
.period-btn.active { background: var(--vc-purple); color: #fff; font-weight: 700; }

/* ── Dashboard hero cards ───────────────────────────────────── */
.dash-hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.dash-hero-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dash-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 55%, rgba(124,58,237,.04));
}
.dash-hero-card.tone-primary { border-top: 3px solid var(--vc-purple); }
.dash-hero-card.tone-success { border-top: 3px solid var(--success); }
.dash-hero-card.tone-warn    { border-top: 3px solid var(--warn); }
.dash-hero-card.tone-danger  { border-top: 3px solid var(--danger); }
.dash-hero-icon {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--surface-2);
}
.dash-hero-card.tone-primary .dash-hero-icon { background: var(--primary-50);  color: var(--primary-700); }
.dash-hero-card.tone-success .dash-hero-icon { background: var(--success-50);  color: var(--success); }
.dash-hero-card.tone-warn    .dash-hero-icon { background: var(--warn-50);     color: var(--warn); }
.dash-hero-card.tone-danger  .dash-hero-icon { background: var(--danger-50);   color: var(--danger); }
.dash-hero-body  { display: flex; flex-direction: column; min-width: 0; }
.dash-hero-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.dash-hero-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.15; margin-top: 2px; }
.dash-hero-sub   { font-size: 13px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Chart card ─────────────────────────────────────────────── */
.dash-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dash-chart-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-chart-title  { font-weight: 700; font-size: 15px; color: var(--text); }
.dash-chart-sub    { font-size: 13px; color: var(--text-muted); }
.dash-chart-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dash-chart-actions .btn { padding: 5px 11px; font-size: 13px; }

/* ── Chart grid ─────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.dash-grid-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .dash-grid-wide { grid-template-columns: 1fr; }
}

/* ── Donut chart ────────────────────────────────────────────── */
.dash-donut-wrap {
  display: grid;
  grid-template-columns: minmax(0, 170px) 1fr;
  gap: 14px;
  align-items: center;
}
.dash-donut { width: 100%; height: auto; max-height: 190px; }
.dash-donut .donut-center { font-size: 26px; font-weight: 700; fill: var(--text); }
.dash-donut .donut-sub    { font-size: 10px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.dash-donut .donut-empty  { font-size: 20px; fill: var(--text-faint); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.donut-legend-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.donut-swatch  { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-label { color: var(--text); }
.donut-legend-value { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Horizontal bar chart ───────────────────────────────────── */
.dash-barchart { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.dash-bar-row  { display: grid; grid-template-columns: minmax(100px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.dash-bar-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.dash-bar-fill  { height: 100%; border-radius: 999px; transition: width 200ms ease-out; }
.dash-bar-value { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 36px; text-align: right; white-space: nowrap; }

/* ── Weekly stacked bar + finance bar ───────────────────────── */
.weekly-bar-wrap, .fin-bar-wrap { display: flex; flex-direction: column; gap: 12px; }
.weekly-bar { width: 100%; height: auto; max-height: 280px; }
.fin-bar    { width: 100%; height: auto; max-height: 300px; }
.weekly-bar-legend, .fin-bar-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 14px; color: var(--text);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend-note   { color: var(--text-muted); font-size: 12px; }

/* ── Mini-stat pills ────────────────────────────────────────── */
.dash-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.dash-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow);
}
.dash-mini-label { color: var(--text-muted); }
.dash-mini-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.dash-mini.tone-warn   { background: var(--warn-50);   border-color: rgba(180,83,9,.18); }
.dash-mini.tone-warn   .dash-mini-value { color: var(--warn); }
.dash-mini.tone-danger { background: var(--danger-50); border-color: rgba(185,28,28,.18); }
.dash-mini.tone-danger .dash-mini-value { color: var(--danger); }

/* ── Dash empty ─────────────────────────────────────────────── */
.dash-empty { color: var(--text-faint); padding: 28px 0; text-align: center; font-size: 14px; }

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filter-search {
  flex: 1;
  min-width: 180px;
  max-width: 300px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  outline: none;
  transition: border-color .15s;
}
.filter-search:focus { border-color: var(--vc-purple); }
.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--vc-purple); }
.filter-bar-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

/* ── Multi-select project dropdown (Allocation page) ── */
.multisel-wrap {
  position: relative;
  display: inline-block;
}
.multisel-btn {
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.multisel-btn:hover,
.multisel-wrap.open .multisel-btn { border-color: var(--vc-purple); }
.multisel-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  min-width: 230px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 4px 0;
}
.multisel-wrap.open .multisel-dropdown { display: block; }
.multisel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: normal;
}
.multisel-opt:hover { background: var(--primary-50, #f5f3ff); }
.multisel-opt input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--vc-purple);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.multisel-all { font-weight: 600; }
.multisel-hr { border: none; border-top: 1px solid var(--border); margin: 2px 0; }

/* ── Allocation accordion ────────────────────────────────────── */
.allocation-summary-row { cursor: default; }
.allocation-summary-row.is-group { cursor: pointer; }
.allocation-summary-row.is-group:hover td { background: #f0f4fd !important; }
.allocation-summary-row.is-expanded td { background: var(--primary-50) !important; }
.allocation-summary-row.is-expanded:hover td { background: var(--primary-200) !important; }
.allocation-detail-row td {
  background: var(--surface-2) !important;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border) !important;
}
.allocation-detail-row:hover td { background: #e9ecf5 !important; }
.col-toggle {
  width: 36px !important;
  min-width: 36px;
  text-align: center !important;
  padding: 0 !important;
  cursor: pointer;
}
.caret {
  display: inline-block;
  color: var(--vc-purple);
  font-size: 14px;
  line-height: 1;
  transition: transform .15s;
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--vc-purple);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  flex-shrink: 0;
}
.detail-indent { color: var(--text-faint) !important; padding-right: 4px !important; }

/* ── Leave table project cell ───────────────────────────────── */
table.data td.cell-project {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Opportunities table deal-name cell ───────────────────────── */
table.data td.cell-deal {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Utility ────────────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-danger { color: var(--danger, #dc2626); font-weight: 600; }
.flex        { display: flex; align-items: center; gap: 8px; }
.gap-sm      { gap: 6px; }
.hidden      { display: none !important; }
.right       { text-align: right; }
.grow        { flex: 1; }

/* ── Finance: insights, per-currency chips, date-range filter ──── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 5px 0 10px; font-size: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2, #f3f4f6); color: var(--text-muted, #4a5060);
  font-size: 13px;
}
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.insight-card {
  background: var(--info-50, #f0f9ff); border: 1px solid #bae6fd;
  border-radius: var(--radius, 8px); padding: 12px 15px; font-size: 14px; line-height: 1.45;
}
.insight-text { color: var(--text, #1e293b); font-weight: 600; }
.insight-sub  { margin-top: 3px; font-size: 13px; }
.date-range-filter { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.date-range-filter .filter-label { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.date-range-filter input[type="date"] {
  font-size: 12px; padding: 4px 6px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; background: var(--surface, #fff); color: var(--text, #1e293b);
}
.spinner     { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--vc-purple); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px; color: var(--text-muted); }
.banner {
  background: var(--info-50);
  border: 1px solid #bae6fd;
  color: var(--info);
  border-radius: var(--radius);
  padding: 11px 15px;
  font-size: 14px;
  margin-bottom: 14px;
}
.banner-warn    { background: var(--warn-50);    border-color: #fcd34d; color: var(--warn); }
.banner-success { background: var(--success-50); border-color: #6ee7b7; color: var(--success); }

/* ── Button variants ─────────────────────────────────────────── */
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary-700); }
.btn-primary:hover { background: var(--primary-700); }
.btn-danger  { background: var(--danger);  color: #fff; border-color: #991b1b; }
.btn-danger:hover  { background: #991b1b; }
.btn-warn    { background: var(--warn);    color: #fff; border-color: #92400e; }
.btn-warn:hover    { background: #92400e; }

/* ── Tab badge (unread count) ────────────────────────────────── */
.tab-btn { position: relative; }
.tab-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 17px; text-align: center;
  padding: 0 4px;
  pointer-events: none;
}


/* ══ AI Assistant — FAB + popup ════════════════════════════════ */

/* Back to top button — sits to the left of the chat FAB */
.back-to-top {
  position: fixed;
  bottom: 36px;
  right: 96px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  border: 1.5px solid var(--border, #e2e8f0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .15s, box-shadow .15s;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--surface-2, #f1f5f9);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.back-to-top:active { transform: scale(.95); }

/* Floating action button */
.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.ai-fab:hover {
  background: var(--primary-700);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.ai-fab:active { transform: scale(.97); }

/* Popup container */
.ai-popup {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 1001;
  width: 620px;
  max-width: calc(100vw - 36px);
  height: 680px;
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Compact/Expanded/Focus sizing (spec: don't force full screen for normal
   questions — Focus is an opt-in the user picks via the header toggle). */
.ai-popup.ai-popup--compact { width: 440px; height: 560px; }
.ai-popup.ai-popup--expanded { width: 660px; height: 720px; }
.ai-popup.ai-popup--focus {
  width: calc(100vw - 48px); height: calc(100vh - 48px);
  bottom: 24px; right: 24px;
}
@media (max-width: 720px) {
  .ai-popup.ai-popup--expanded, .ai-popup.ai-popup--focus {
    width: calc(100vw - 24px); height: calc(100vh - 96px); right: 12px; bottom: 84px;
  }
}

/* Header */
.ai-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--primary);
  flex-shrink: 0;
}
.ai-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
.ai-popup-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color .1s;
}
.ai-popup-close:hover { color: #fff; }
.ai-popup-header-actions { display: flex; align-items: center; gap: 6px; }
.ai-size-btn {
  background: none; border: none; color: rgba(255,255,255,.8); font-size: 14px;
  line-height: 1; cursor: pointer; padding: 2px 4px; transition: color .1s;
}
.ai-size-btn:hover { color: #fff; }

/* Messages area */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.ai-msg ul {
  margin: 6px 0 2px 0;
  padding-left: 18px;
}
.ai-msg li { margin-bottom: 3px; }

/* Tabular answers (profitability, charges, project lists, …). A message that
   contains a table gets nearly the full popup width and the table scrolls
   horizontally inside its own wrapper so the bubble never forces the page to
   scroll sideways. */
.ai-msg-bot:has(.ai-table-wrap) { max-width: 98%; width: 100%; }
.ai-table-wrap {
  overflow-x: auto;
  margin: 8px 0 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
table.ai-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.ai-table th, .ai-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ai-table thead th {
  font-weight: 700;
  color: var(--text-faint);
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.ai-table th.num, .ai-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-table tbody tr:last-child td { border-bottom: none; }
.ai-table tbody tr:hover td { background: var(--primary-50); }
.ai-table td.neg { color: var(--danger, #dc2626); }
.ai-msg-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-radius: 12px 12px 3px 12px;
}
.ai-msg-bot {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 3px;
}
.ai-thinking {
  color: var(--text-faint);
  font-style: italic;
  border-color: transparent;
  background: transparent;
  padding: 4px 0;
}

/* Clarifying-question chips — clickable suggestions the assistant offers when a
   question is ambiguous. Uses the shared theme vars so it reads in light + dark. */
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ai-chip {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary-50);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ai-chip:hover {
  background: var(--primary);
  color: #fff;
}

/* Simplified welcome screen */
.ai-welcome-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ai-welcome-sub { color: var(--text-muted); margin-bottom: 2px; }
.ai-more-link {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none; cursor: pointer;
}
.ai-more-link:hover { text-decoration: underline; }
.ai-more-body { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }

/* "What needs my attention" cards in chat — reuses the dashboard's own
   .xd-action-row/tone-bad/tone-warn look (viewer.css above), just stacked
   in a single column to fit the narrower chat bubble. */
.ai-attn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* Chat chart responses (chatBarSvg) */
.ai-chart-wrap { margin-top: 10px; }
.ai-chart-wrap svg { width: 100%; height: auto; display: block; }
.ai-chart-legend { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

/* Input row */
.ai-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
/* Question-suggestion dropdown — opens UPWARD (unlike .multisel-dropdown,
   which it's otherwise styled to match) since #ai-input sits at the very
   bottom of the popup. */
.ai-suggest-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 12px;
  right: 12px;
  z-index: 300;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12));
}
.ai-suggest-opt {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-suggest-opt:hover, .ai-suggest-opt.active { background: var(--primary-50); color: var(--primary); }
.ai-mic-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.ai-mic-btn:hover { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }
.ai-mic-btn.ai-mic-active {
  background: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
  color: #fff;
  animation: ai-pulse 1s ease-in-out infinite;
}
.ai-mic-btn:disabled { opacity: .4; cursor: not-allowed; }
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.ai-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.ai-input:focus { border-color: var(--primary); }
.ai-send-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--primary-700);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ai-send-btn:hover { background: var(--primary-700); }

/* ── Executive Dashboard ───────────────────────────────────────────────── */
.exec-filterbar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
  margin: 4px 0 18px;
}
.exec-filter-group { display: flex; flex-direction: column; gap: 4px; }
.exec-filter-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.exec-section { margin-top: 26px; }
.exec-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.exec-h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.exec-rank-sub { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-top: 4px; }
.exec-attention-section { margin-top: 16px; }
.exec-attention { display: flex; flex-wrap: wrap; gap: 10px; }
.exec-att-item {
  flex: 1 1 200px; max-width: 260px;
  text-align: left; border: 1px solid var(--border); border-left: 3px solid var(--border);
  background: var(--surface); border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 13px; color: var(--text); cursor: pointer; transition: background .15s;
}
.exec-att-item:hover { background: var(--surface-2); }
.exec-att-item.tone-crit { border-left-color: var(--danger); }
.exec-att-item.tone-warn { border-left-color: var(--warn); }
/* Fixed height + inner scroll once a table has more rows than fit, instead
   of letting it grow the whole page — header stays pinned while scrolling. */
.exec-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 480px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.exec-table-wrap table.exec-table thead th { position: sticky; top: 0; z-index: 1; }
.exec-table-wrap table.exec-table { border-radius: var(--radius); overflow: hidden; }
.exec-table thead th { padding: 10px 12px; font-size: 12px; }
.exec-table tbody td { padding: 8px 12px; font-size: 13.5px; }
.exec-table td.num, .exec-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.exec-table td.neg { color: var(--danger); }
.exec-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.exec-th-sortable:hover { color: var(--vc-purple); }
.exec-row-clickable { cursor: pointer; }
.exec-row-clickable:hover td { background: var(--surface-2); }
/* Cross-tab "jump to row" flash — lands from an Executive dashboard click. */
.nav-flash td { animation: navFlash 2.4s ease-out; }
@keyframes navFlash {
  0%   { background: color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { background: transparent; }
}
/* Mini invoiced-trend bar chart (inline, no chart lib) */
.exec-spark { display: flex; align-items: flex-end; gap: 12px; height: 140px; padding: 8px 4px 0; }
.exec-spark-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 34px; }
.exec-spark-val { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exec-spark-bar { width: 60%; max-width: 46px; background: var(--accent); border-radius: 4px 4px 0 0; transition: height .2s; }
.exec-spark-lbl { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.exec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exec-chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 99px;
  padding: 5px 12px; font-size: 13px; color: var(--text); cursor: pointer; transition: background .15s;
}
.exec-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.exec-typebar { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
.exec-type-more {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; cursor: pointer;
  min-width: 150px;
}
.exec-type-more.active { border-color: var(--primary-600, var(--accent)); color: var(--accent); font-weight: 600; }

/* ── Executive Report popup ─────────────────────────────────── */
.exec-report-btn {
  align-self: flex-start;
  background: var(--primary); color: #fff; border: 1px solid var(--primary-700);
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.exec-report-btn:hover { background: var(--primary-700); }
.exec-report-backdrop {
  position: fixed; inset: 0; background: rgba(15, 19, 32, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; z-index: 2000; overflow-y: auto;
}
.exec-report-modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
  width: 100%; max-width: 920px; overflow: hidden;
  padding: 0 25px 25px;
}
.exec-report-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.exec-report-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.exec-report-range { font-size: 12.5px; color: var(--text-2); }
.exec-report-range b { color: var(--text); font-weight: 600; }
.exec-report-close {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  width: 28px; height: 28px; border-radius: 7px; font-size: 14px; cursor: pointer; flex: none;
}
.exec-report-close:hover { color: var(--text); border-color: var(--border-strong); }
.exec-report-periodbar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 13px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.exec-report-pill {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 99px; cursor: pointer;
}
.exec-report-pill:hover { border-color: var(--primary); color: var(--text); }
.exec-report-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.exec-report-custom { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.exec-report-custom input {
  font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 6px; background: var(--surface); color: var(--text);
}
.exec-report-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 16px; max-height: 74vh; overflow-y: auto; }
.exec-report-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
/* Compact KPI cards — the report stacks 4 sections in one scroll area, so the
   dashboard's spacious card sizing (18px padding, 24px value) would push the
   lower sections out of view. */
.exec-report-body .cards { gap: 8px; margin-bottom: 0; }
.exec-report-body .card { padding: 9px 12px; box-shadow: none; }
.exec-report-body .card-label { font-size: 10px; margin-bottom: 2px; }
.exec-report-body .card-value { font-size: 16px; }
.exec-report-section-head h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text);
}
.exec-report-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 99px;
}
.exec-report-tag.period { background: var(--primary-50); color: var(--primary-700); }
.exec-report-tag.live   { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.exec-report-empty { font-size: 12.5px; color: var(--text-faint); padding: 6px 2px; }

/* ── Executive Dashboard v2 (CEO redesign) ──────────────────── */
.dash-bar-row-clickable { cursor: pointer; border-radius: 6px; transition: background .12s; }
.dash-bar-row-clickable:hover { background: var(--surface-2); }

/* Executive Attention — stat chips, colored by severity */
.xd-attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.xd-attn-chip {
  position: relative;
  text-align: left; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; transition: transform .12s, box-shadow .12s;
}
.xd-attn-chip:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.xd-attn-num { font-size: 22px; font-weight: 700; }
.xd-attn-lbl { font-size: 12.5px; color: var(--text-muted); }
.xd-attn-chip.tone-crit { border-left: 3px solid var(--danger); }
.xd-attn-chip.tone-crit .xd-attn-num { color: var(--danger); }
.xd-attn-chip.tone-warn { border-left: 3px solid var(--warn); }
.xd-attn-chip.tone-warn .xd-attn-num { color: var(--warn); }
.xd-attn-clear { color: var(--success); font-weight: 600; font-size: 14px; }
/* Dashboard → Chat: small "ask the assistant about this" affordance, opt-in
   per card (only rendered when a matching chat question exists). */
.xd-attn-ask {
  position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 600;
  color: var(--primary); opacity: .75;
}
.xd-attn-chip:hover .xd-attn-ask { opacity: 1; text-decoration: underline; }

/* Financial Health KPI cards */
.xd-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.xd-kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px;
}
.xd-kpi-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.xd-kpi-val { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xd-kpi-delta { font-size: 12px; font-weight: 700; }
.xd-kpi-delta.up   { color: var(--success); }
.xd-kpi-delta.down { color: var(--danger); }
.xd-kpi-delta.flat { color: var(--text-faint); font-weight: 500; }
.xd-kpi-sub { font-size: 12px; color: var(--text-muted); }
.xd-kpi-card.tone-good .xd-kpi-val { color: var(--success); }
.xd-kpi-card.tone-warn .xd-kpi-val { color: var(--warn); }
.xd-kpi-card.tone-bad  .xd-kpi-val { color: var(--danger); }

/* Trend / Forecast SVG charts. height:auto (not a fixed px) is what keeps the
   viewBox's aspect ratio intact when the card is wider than the viewBox unit
   width — a fixed height forced non-uniform X/Y stretching before, which is
   what read as "blurry". */
.xd-trend-svg { width: 100%; height: auto; display: block; }
.xd-zero-line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.xd-gridline { stroke: var(--border); stroke-width: 1; }
.xd-axis-label { font-size: 11px; fill: var(--text-faint); }
.xd-axis-ylabel { font-size: 11px; fill: var(--text-faint); }

/* Financial Performance + Business Unit Profitability, side by side — each
   .exec-section keeps its own heading/spacing, this just makes the pair share
   a row instead of stacking full-width. align-items:start so the shorter
   section (whichever one is) doesn't get stretched to match the taller one. */
.xd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 26px; }
.xd-2col .exec-section { margin-top: 0; }
@media (max-width: 1100px) { .xd-2col { grid-template-columns: 1fr; } }
.xd-legend { display: flex; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.xd-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.xd-legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Project Performance — Top performers / Needs intervention */
.xd-perf-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px;
}
.xd-perf-col {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.xd-perf-col h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.xd-perf-col.tone-good h3 { color: var(--success); }
.xd-perf-col.tone-bad  h3 { color: var(--danger); }
.xd-perf-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: none; background: none; font: inherit; text-align: left; cursor: pointer;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.xd-perf-item:last-child { border-bottom: none; }
.xd-perf-item:hover { background: var(--surface-2); }
.xd-perf-item .nm { font-weight: 700; color: var(--text); }
.xd-perf-metric { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

/* Shared quiet text links (Workforce / Aging / Project Performance) */
.xd-linkrow { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.xd-linkbtn {
  background: none; border: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--primary); cursor: pointer; padding: 0; margin-top: 8px;
}
.xd-linkbtn:hover { text-decoration: underline; }

/* 100%-composition stacked bar — Workforce Utilization + Receivables Aging */
.xd-stackbar-wrap { display: flex; flex-direction: column; gap: 8px; }
.xd-stackbar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.xd-stackbar-seg { height: 100%; transition: width 200ms ease-out; }
.xd-stackbar-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.xd-stackbar-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.xd-stackbar-legend-item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.xd-stackbar-total { font-size: 12.5px; font-weight: 700; color: var(--text); }
.xd-wf-stats { margin-top: 12px; }

/* Executive Action Required */
/* 2 columns — each action row is short, full-width wasted a lot of space */
.xd-actions-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 900px) { .xd-actions-list { grid-template-columns: 1fr; } }
.xd-action-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.xd-action-row.tone-bad  { border-left-color: var(--danger); }
.xd-action-row.tone-warn { border-left-color: var(--warn); }
.xd-action-main { display: flex; flex-direction: column; gap: 3px; }
.xd-action-problem { font-weight: 700; font-size: 14px; color: var(--text); }
.xd-action-meta { font-size: 12.5px; color: var(--text-muted); }
.xd-action-text { font-size: 12.5px; color: var(--text-2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   Executive Dashboard reskin (reference-design pass) — additive only, the
   rules above stay in place for any path still using them.
   ══════════════════════════════════════════════════════════════════════ */

/* Page-head action buttons (Reset / Ask Assistant / View Executive Report) */
/* .page-head > div normally gets flex:1 (for the title block) — override it
   here so the button group doesn't split the row 50/50 and drift to the
   middle; it stays a fixed-size block pinned to the right edge. */
.xd-head-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; }

/* Executive Alerts — 4 rich cards (icon/number/detail-lines/CTA) */
.xd-alert-card {
  text-align: left; border: 1px solid var(--border); border-left: 4px solid var(--border);
  background: var(--surface); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.xd-alert-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Whole-card tinted background per theme (not just a colored left edge) —
   matches the reference's pale-pink/orange/purple/blue alert cards. Border
   uses the same tint one shade up so it reads as a soft outline, not a hard
   gray frame clashing with the tint. */
.xd-alert-card.tone-crit   { background: var(--danger-50);  border-color: var(--danger-200);  border-left-color: var(--danger); }
.xd-alert-card.tone-warn   { background: var(--warn-50);    border-color: var(--warn-200);    border-left-color: var(--warn); }
.xd-alert-card.tone-good   { background: var(--success-50); border-color: var(--success-200); border-left-color: var(--success); }
.xd-alert-card.tone-purple { background: var(--primary-50); border-color: var(--primary-200); border-left-color: var(--vc-purple); }
.xd-alert-card.tone-info   { background: var(--info-50);    border-color: var(--info-200);    border-left-color: var(--vc-blue); }
.xd-alert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.xd-alert-icon {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.xd-alert-icon .xd-kpi-icon { width: 15px; height: 15px; }
.xd-alert-card.tone-crit   .xd-alert-icon { background: var(--danger-200);  color: var(--danger); }
.xd-alert-card.tone-warn   .xd-alert-icon { background: var(--warn-200);    color: var(--warn); }
.xd-alert-card.tone-good   .xd-alert-icon { background: var(--success-200); color: var(--success); }
.xd-alert-card.tone-purple .xd-alert-icon { background: var(--primary-200); color: var(--vc-purple); }
.xd-alert-card.tone-info   .xd-alert-icon { background: var(--info-200);    color: var(--vc-blue); }
.xd-alert-title { font-size: 13px; font-weight: 700; color: var(--text); }
.xd-alert-num { font-size: 20px; font-weight: 700; color: var(--text); }
.xd-alert-line { font-size: 12.5px; color: var(--text-muted); }
.xd-alert-cta { font-size: 12.5px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.xd-alert-card:hover .xd-alert-cta { text-decoration: underline; }
/* CTA link colored to match its own card's theme, not a uniform purple. */
.xd-alert-card.tone-crit   .xd-alert-cta { color: var(--danger); }
.xd-alert-card.tone-warn   .xd-alert-cta { color: var(--warn); }
.xd-alert-card.tone-good   .xd-alert-cta { color: var(--success); }
.xd-alert-card.tone-purple .xd-alert-cta { color: var(--vc-purple); }
.xd-alert-card.tone-info   .xd-alert-cta { color: var(--vc-blue); }

/* Small decorative mini bar-chart icon inside a KPI card */
.xd-kpi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.xd-kpi-badge {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.xd-kpi-icon { width: 17px; height: 17px; }

/* What Changed Since Last Period — 6-tile delta strip */
.xd-changed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.xd-changed-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 34px 12px 14px; position: relative;
}
/* Clear trend-arrow icon (diagonal line + arrowhead, same shape as the
   Profit/Loss KPI badge) in the tile's top-right corner — not a left-side
   circle, and not a plain ▲/▼ character (too ambiguous at small size). */
.xd-changed-corner-icon {
  position: absolute; top: 10px; right: 10px; width: 18px; height: 18px;
}
.xd-changed-corner-icon.up    { color: var(--success); }
.xd-changed-corner-icon.down  { color: var(--danger); }
.xd-changed-corner-icon .xd-kpi-icon { width: 100%; height: 100%; }
.xd-changed-val { font-size: 30px; font-weight: 700; }
.xd-changed-val.up   { color: var(--success); }
.xd-changed-val.down { color: var(--danger); }
.xd-changed-val.flat { color: var(--text-faint); }
.xd-changed-lbl { font-size: 12px; color: var(--text-muted); }

/* Card wrapper for a single cell inside a 3-column grid (Key Trends / Bottom row) */
.xd-trend-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.xd-trend-card-h { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--text); }

/* 2-up-1-down: first two children share a row, the third wraps onto its
   own row below at the SAME column width as the two above it (not full
   width) — plain grid auto-placement with a 2-column track already does
   this for a 3rd item, no special-case rule needed for it. */
.xd-trends-3col, .xd-bottom-3col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 14px; align-items: stretch; }
.xd-trends-3col .xd-trend-card, .xd-bottom-3col .xd-trend-card { display: flex; flex-direction: column; height: 100%; }
@media (max-width: 800px) { .xd-trends-3col, .xd-bottom-3col { grid-template-columns: 1fr; } }

/* Small colored pill — Priority (Action Center) / Health (Project Analysis) */
/* Solid-filled pills (Priority / Health) — matches the reference's bold
   chips, not a soft pastel tint. */
.xd-pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: #fff; }
.xd-pill.crit  { background: linear-gradient(100deg, var(--xd-rose1), var(--xd-rose2)); }
.xd-pill.warn  { background: linear-gradient(100deg, var(--xd-amber1), var(--xd-amber2)); }
.xd-pill.good  { background: linear-gradient(100deg, var(--xd-green1), var(--xd-green2)); }
.xd-pill.muted { background: var(--neutral-50); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════
   EXECUTIVE "SIGNAL" THEME — approved design concept, gated entirely by
   #panel.exec-theme (toggled only while the Executive tab is active, see
   renderActiveTab) so nothing here can leak into any other tab.
   ══════════════════════════════════════════════════════════════════════ */

#panel.exec-theme {
  /* Match the approved concept's capped, centered content width — on a wide
     monitor the Executive tab reads as a contained page, not edge-to-edge. */
  max-width: 1760px;
  margin: 0 auto;
}

/* -- Header -- */
/* Buttons must align with the TOP of the title block, not its vertical
   center, to read as "top right" rather than floating mid-height. */
#panel.exec-theme .page-head { margin-bottom: 14px; align-items: flex-start; }
#panel.exec-theme .page-head h1 {
  font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(95deg, var(--text) 30%, var(--xd-p1) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#panel.exec-theme .exec-h2 { margin: 0; }
#panel.exec-theme .page-sub { margin-top: 0; margin-bottom: 10px; }
.xd-head-btns .xd-btn {
  font: 700 13px/1 inherit; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--xd-shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.xd-head-btns .xd-btn:hover { transform: translateY(-1px); box-shadow: var(--xd-shadow-md); }
.xd-head-btns .xd-btn-primary {
  background: linear-gradient(100deg, var(--xd-p1), var(--xd-p2)); border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--xd-p1) 70%, transparent);
}

/* -- Filter bar: separate boxed dropdowns, label stacked above its select,
   left-aligned in a row (not one merged pill, not space-justified). -- */
#panel.exec-theme .exec-filterbar {
  /* nowrap + horizontal scroll instead of wrap — a lone filter box
     orphaned on its own row (big empty gap next to it) looks broken;
     scrolling on a narrow viewport doesn't. */
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 0 0 4px; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; align-items: stretch;
}
/* The label sits OUTSIDE/above with no box of its own — only the actual
   dropdown control gets the white bordered box. */
#panel.exec-theme .exec-filter-group {
  flex-direction: column; align-items: flex-start; gap: 5px; padding: 0;
  background: transparent; border: none; box-shadow: none; flex-shrink: 0;
}
#panel.exec-theme .exec-filter-label { font-size: 10.5px; white-space: nowrap; }
#panel.exec-theme .exec-type-more {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--xd-radius-sm);
  padding: 8px 14px; min-width: 0; font-size: 12.5px; font-weight: 700; text-align: left;
  box-shadow: var(--xd-shadow-sm); transition: box-shadow .15s;
}
#panel.exec-theme .exec-type-more:hover { box-shadow: var(--xd-shadow-md); }
#panel.exec-theme .exec-type-more.active { color: var(--xd-p1); border-color: var(--xd-p1); }

/* -- KPI cards -- */
#panel.exec-theme .xd-kpi-card { border-radius: var(--xd-radius); box-shadow: var(--xd-shadow-sm); transition: transform .18s, box-shadow .18s; }
#panel.exec-theme .xd-kpi-card:hover { transform: translateY(-3px); box-shadow: var(--xd-shadow-md); }
#panel.exec-theme .xd-kpi-head { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
#panel.exec-theme .xd-kpi-badge {
  width: 38px; height: 38px; border-radius: 12px; color: #fff;
  background: linear-gradient(140deg, var(--xd-slate1), var(--xd-slate2));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-slate2) 60%, transparent);
}
#panel.exec-theme .xd-kpi-badge .xd-kpi-icon { color: #fff; }
#panel.exec-theme .xd-kpi-card:nth-child(1) .xd-kpi-badge { background: linear-gradient(140deg, var(--xd-blue1), var(--xd-blue2)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-blue2) 60%, transparent); }
#panel.exec-theme .xd-kpi-card:nth-child(2) .xd-kpi-badge { background: linear-gradient(140deg, var(--xd-rose1), var(--xd-rose2)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-rose2) 60%, transparent); }
#panel.exec-theme .xd-kpi-card:nth-child(3) .xd-kpi-badge { background: linear-gradient(140deg, var(--xd-green1), var(--xd-green2)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-green2) 60%, transparent); }
#panel.exec-theme .xd-kpi-card:nth-child(4) .xd-kpi-badge { background: linear-gradient(140deg, var(--xd-p1), var(--xd-p2)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-p1) 60%, transparent); }
#panel.exec-theme .xd-kpi-card:nth-child(5) .xd-kpi-badge { background: linear-gradient(140deg, var(--xd-rose1), var(--xd-rose2)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--xd-rose2) 60%, transparent); }
#panel.exec-theme .xd-kpi-val { font-weight: 800; font-size: 29px; margin-top: -4px; }

/* -- Alert cards -- */
#panel.exec-theme .xd-alert-card { border-radius: var(--xd-radius); position: relative; overflow: hidden; border-left-width: 0; box-shadow: var(--xd-shadow-sm); }
#panel.exec-theme .xd-alert-card::before { content:""; position:absolute; inset:0; opacity:.09; pointer-events:none; }
#panel.exec-theme .xd-alert-card.tone-crit::before   { background: linear-gradient(150deg, var(--xd-rose1), transparent 70%); }
#panel.exec-theme .xd-alert-card.tone-warn::before   { background: linear-gradient(150deg, var(--xd-amber1), transparent 70%); }
#panel.exec-theme .xd-alert-card.tone-purple::before { background: linear-gradient(150deg, var(--xd-p1), transparent 70%); }
#panel.exec-theme .xd-alert-card.tone-info::before   { background: linear-gradient(150deg, var(--xd-blue1), transparent 70%); }
#panel.exec-theme .xd-alert-card > * { position: relative; }
#panel.exec-theme .xd-alert-card:hover { transform: translateY(-3px); box-shadow: var(--xd-shadow-md); }
#panel.exec-theme .xd-alert-icon { width: 32px; height: 32px; border-radius: 10px; color: #fff; }
#panel.exec-theme .xd-alert-card.tone-crit   .xd-alert-icon { background: linear-gradient(140deg, var(--xd-rose1), var(--xd-rose2)); }
#panel.exec-theme .xd-alert-card.tone-warn   .xd-alert-icon { background: linear-gradient(140deg, var(--xd-amber1), var(--xd-amber2)); }
#panel.exec-theme .xd-alert-card.tone-purple .xd-alert-icon { background: linear-gradient(140deg, var(--xd-p1), var(--xd-p2)); }
#panel.exec-theme .xd-alert-card.tone-info   .xd-alert-icon { background: linear-gradient(140deg, var(--xd-blue1), var(--xd-blue2)); }
/* Number sits in the icon+title row, pushed to the right edge and enlarged
   — not its own left-aligned line below. */
#panel.exec-theme .xd-alert-num { font-size: 30px; font-weight: 800; margin-left: auto; line-height: 1; }
#panel.exec-theme .xd-alert-title { font-size: 14.5px; }
#panel.exec-theme .xd-alert-sub { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: -4px; }
#panel.exec-theme .xd-alert-line { font-size: 13.5px; }
#panel.exec-theme .xd-alert-line:first-of-type { padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 2px; }
#panel.exec-theme .xd-alert-cta {
  /* .xd-alert-card is display:flex;flex-direction:column with no align-items,
     so children stretch to full width by default — align-self overrides
     that just for the pill button, which must size to its own content. */
  align-self: flex-start;
  display: inline-flex; margin-top: 6px; padding: 8px 15px; border-radius: 999px; color: #fff !important; font-weight: 800;
}
#panel.exec-theme .xd-alert-card.tone-crit   .xd-alert-cta { background: linear-gradient(100deg, var(--xd-rose1), var(--xd-rose2)); }
#panel.exec-theme .xd-alert-card.tone-warn   .xd-alert-cta { background: linear-gradient(100deg, var(--xd-amber1), var(--xd-amber2)); }
#panel.exec-theme .xd-alert-card.tone-purple .xd-alert-cta { background: linear-gradient(100deg, var(--xd-p1), var(--xd-p2)); }
#panel.exec-theme .xd-alert-card.tone-info   .xd-alert-cta { background: linear-gradient(100deg, var(--xd-blue1), var(--xd-blue2)); }
#panel.exec-theme .xd-alert-card:hover .xd-alert-cta { text-decoration: none; filter: brightness(1.08); }

/* -- What Changed tiles -- */
#panel.exec-theme .xd-changed-tile { border-radius: var(--xd-radius-sm); box-shadow: var(--xd-shadow-sm); }
#panel.exec-theme .xd-changed-corner-icon.up   { color: var(--xd-green2); }
#panel.exec-theme .xd-changed-corner-icon.down { color: var(--xd-rose2); }
#panel.exec-theme .xd-changed-val.up   { color: var(--xd-good); }
#panel.exec-theme .xd-changed-val.down { color: var(--xd-crit); }

/* -- Trend / trend-card panels -- */
#panel.exec-theme .xd-trend-card { border-radius: var(--xd-radius); box-shadow: var(--xd-shadow-sm); }
#panel.exec-theme .xd-legend i { border-radius: 3px; }

/* -- Receivables Aging bars -- */
#panel.exec-theme .exec-spark-bar { border-radius: 7px 7px 3px 3px !important; }
#panel.exec-theme .cards.xd-wf-stats .card { border-left-width: 0; border-radius: var(--xd-radius-sm); }
#panel.exec-theme .cards.xd-wf-stats .card.danger { background: linear-gradient(140deg, color-mix(in srgb, var(--xd-rose1) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--xd-rose1) 30%, var(--border)); }
#panel.exec-theme .cards.xd-wf-stats .card.warn   { background: linear-gradient(140deg, color-mix(in srgb, var(--xd-amber1) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--xd-amber1) 35%, var(--border)); }
#panel.exec-theme .cards.xd-wf-stats .card.danger .card-value { color: var(--xd-crit); }
#panel.exec-theme .cards.xd-wf-stats .card.warn   .card-value { color: var(--xd-warn); }

/* -- Tables: brand gradient header instead of the app-wide navy one -- */
#panel.exec-theme .exec-table thead th { background: linear-gradient(100deg, var(--xd-p2), var(--xd-p1)) !important; }

/* -- Project Analysis chips: gradient active state (exec-scoped, .period-btn is shared) -- */
#panel.exec-theme .period-btn.active {
  background: linear-gradient(100deg, var(--xd-p1), var(--xd-p2)) !important;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--xd-p1) 60%, transparent);
}

/* -- Buttons inside exec tables/sections (Review →, View BU table, etc.) -- */
#panel.exec-theme .btn-sm { border-radius: 999px; }

/* ── Growth & Accounts ──────────────────────────────────────────────── */
.ga-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0 20px; }
.ga-kpi-card {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 10px);
  border-left: 4px solid var(--ga-accent, #7c3aed); padding: 14px 16px;
}
.ga-kpi-card.dim { opacity: .55; }
.ga-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #94a3b8); }
.ga-kpi-val { font-size: 22px; font-weight: 700; margin-top: 4px; }
.ga-kpi-sub { font-size: 11.5px; color: var(--text-muted, #94a3b8); margin-top: 2px; }

.ga-subtabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 4px; width: fit-content; margin-bottom: 16px; }
.ga-subtab-btn { border: none; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #4a5060; cursor: pointer; }
.ga-subtab-btn.active { background: #7c3aed; color: #fff; }

.ga-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ga-pill-green  { background: #dcfce7; color: #15803d; }
.ga-pill-amber  { background: #fef3c7; color: #92400e; }
.ga-pill-blue   { background: #e0f2fe; color: #0369a1; }
.ga-pill-gray   { background: #eef0f5; color: #475569; }
.ga-pill-red-solid { background: #c81e1e; color: #fff; }
.ga-pill-slate  { background: #334155; color: #fff; }

.ga-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.ga-field { display: flex; flex-direction: column; gap: 4px; }
.ga-field label { font-size: 12px; font-weight: 600; color: var(--text-2, #475569); }
.ga-field .req::after { content: ' *'; color: #c81e1e; }
/* Match the same input/select look used by the page filter bars
   (.filter-search / .filter-select) so Growth & Accounts forms (Log
   opportunity, Monthly review, Executive call, etc.) don't look like raw
   browser-default controls next to the rest of the app. */
.ga-field input,
.ga-field select,
.ga-field textarea {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.ga-field textarea { resize: vertical; }
.ga-field input:focus,
.ga-field select:focus,
.ga-field textarea:focus { border-color: var(--vc-purple); }
.ga-field select { cursor: pointer; }

/* ── "Add Project / Add Client / Add PM" admin popovers ──────── */
.ga-add-wrap { position: relative; display: inline-block; }
.ga-add-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  min-width: 220px;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 12px;
}
.ga-add-wrap.open .ga-add-popover { display: flex; }
.ga-add-popover input {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.ga-add-popover input:focus { border-color: var(--vc-purple); }
.ga-add-popover-actions { display: flex; gap: 8px; }

.ga-section-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 10px); padding: 18px; margin-bottom: 16px; }
.ga-section-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.ga-locked-banner { background: #eef0f5; color: #475569; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.ga-late-banner { background: #fef2f2; color: #991b1b; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }