/* ============================================================
   corporate-skin.css
   Reskins the live product pages (scoreboard-simple, manager-
   dashboard, etc.) into the Corporate editorial palette:
     - Paper cream background + deep-ink text + editorial gold
     - Fraunces variable serif for display + Geist sans for body
     - Same layouts, panels, gauges — just repainted.

   Loaded LAST, after kpicons-design.css + kpicons-v2.css +
   the page's inline <style> block, so its overrides win.

   Applies to BOTH default state AND [data-theme="light"] so the
   corporate look is in force whether the toggle is flipped or not.
   A [data-theme="dark"] variant below swaps to ink newsprint.
   ============================================================ */

/* -------- Fonts: Geist sans only (Akamai look has no serif) ----- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* -------- Token overrides: DARK is now the default -------------- */
/* :root + [data-theme="dark"] both carry the Akamai dark palette so
   the dashboard lands dark on first paint. Only when the user
   explicitly toggles the switch to Light do we swap to Akamai light.
   This matches the investor-demo request: "Sarah's dashboard opens
   in dark by default." */
:root,
[data-theme="dark"] {
    --bg-body:      #050C18 !important;    /* Akamai page bg */
    --bg-sidebar:   #0D1F3C !important;
    --bg-card:      #132D5E !important;
    --bg-bot:       #0D1F3C !important;
    --bg-input:     #132D5E !important;
    --bg-hover:     #1A3A6F !important;
    --border:       rgba(255, 255, 255, 0.08) !important;
    --border-strong: rgba(255, 255, 255, 0.16) !important;

    --text-primary:   #FFFFFF !important;
    --text-secondary: #94A3B8 !important;
    --text-tertiary:  #7E8EA6 !important;

    --accent:         #009CDE !important;   /* Akamai cyan */
    --accent-hover:   #0088C4 !important;
    --accent-bg:      rgba(0, 156, 222, 0.12) !important;
    --accent-orange:  #FF9933 !important;
    --accent-2:       #FF9933 !important;

    --scrollbar-track: #0D1F3C !important;
    --scrollbar-thumb: #1A3A6F !important;

    --card-surface:         #132D5E !important;
    --card-text:            #FFFFFF !important;
    --card-text-secondary:  #94A3B8 !important;
    --card-text-tertiary:   #7E8EA6 !important;
    --card-chart-bg:        #0D1F3C !important;
    --card-border:          rgba(0, 156, 222, 0.20) !important;
    --card-gauge-track:     rgba(255, 255, 255, 0.10) !important;
    --bot-msg-bg:           #132D5E !important;
    --bot-msg-border:       rgba(0, 156, 222, 0.14) !important;
    --bot-msg-text:         #94A3B8 !important;

    /* Features-pages tokens (kpicons-features.css uses shorter names) */
    --bg:            #050C18 !important;
    --bg-card:       #132D5E !important;
    --bg-card-2:     #1A3A6F !important;
    --bg-sidebar:    #0D1F3C !important;
    --text:          #FFFFFF !important;
    --text-2:        #94A3B8 !important;
    --text-3:        #64748B !important;
    --accent-3:      #009CDE !important;
    --accent-4:      #009CDE !important;
    --accent-5:      #009CDE !important;
    --good:          #10B981 !important;
    --warn:          #FF9933 !important;
    --bad:           #EF4444 !important;

    /* Display font — Geist replaces Fraunces; var name kept for back-compat */
    --serif-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -------- Light theme = Akamai light (opt-in via toggle) -------- */
[data-theme="light"] {
    --bg-body:      #EFF3F8 !important;
    --bg-sidebar:   #FFFFFF !important;
    --bg-card:      #F3F7FC !important;
    --bg-bot:       #FFFFFF !important;
    --bg-input:     #F3F7FC !important;
    --bg-hover:     #E8F0FA !important;
    --border:       rgba(0, 156, 222, 0.10) !important;
    --border-strong: rgba(0, 156, 222, 0.20) !important;

    --text-primary:   #0A1628 !important;
    --text-secondary: #4B5563 !important;
    --text-tertiary:  #6B7280 !important;

    --accent:         #009CDE !important;   /* Akamai cyan */
    --accent-hover:   #0088C4 !important;
    --accent-bg:      rgba(0, 156, 222, 0.08) !important;
    --accent-orange:  #FF9933 !important;
    --accent-2:       #FF9933 !important;

    --scrollbar-track: #EFF3F8 !important;
    --scrollbar-thumb: #BFDFF2 !important;

    --card-surface:         #FFFFFF !important;
    --card-text:            #0A1628 !important;
    --card-text-secondary:  #4B5563 !important;
    --card-text-tertiary:   #6B7280 !important;
    --card-chart-bg:        #F3F7FC !important;
    --card-border:          rgba(0, 156, 222, 0.15) !important;
    --card-gauge-track:     #E8F0FA !important;
    --bot-msg-bg:           #F3F7FC !important;
    --bot-msg-border:       rgba(0, 156, 222, 0.12) !important;
    --bot-msg-text:         #4B5563 !important;

    /* Features-pages tokens — Akamai light variant */
    --bg:            #EFF3F8 !important;
    --bg-card:       #FFFFFF !important;
    --bg-card-2:     #F3F7FC !important;
    --bg-sidebar:    #FFFFFF !important;
    --text:          #0A1628 !important;
    --text-2:        #4B5563 !important;
    --text-3:        #6B7280 !important;
    --accent-3:      #009CDE !important;
    --accent-4:      #009CDE !important;
    --accent-5:      #009CDE !important;
    --good:          #10B981 !important;
    --warn:          #FF9933 !important;
    --bad:           #EF4444 !important;
}

/* -------- Typography: Fraunces for display, Geist for body ------ */
body {
    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-feature-settings: "ss01", "ss02" !important;
}

/* Big header + hero titles + panel titles → Fraunces.
   We stop short of restyling the gauge numbers so tabular figures
   still feel engineered. */
.header-title h1,
.hero-name,
.hero-title,
.score-hero-number,
.fc-title,
.panel-head .title:not(.v2-kicker),
.pa-title,
.kpi-hero .hero-title,
.hero-nudge,
.briefing-greeting {
    font-family: var(--serif-display, 'Fraunces', Georgia, serif) !important;
    font-variation-settings: "opsz" 144 !important;
    letter-spacing: -0.02em !important;
}

/* The big hero number (quarter score) — make it unmistakably editorial */
.score-hero-number {
    font-weight: 600 !important;
    -webkit-text-fill-color: var(--accent) !important;
    -webkit-background-clip: initial !important;
    background: none !important;
    color: var(--accent) !important;
}
/* #mdHeroScore — color is intentionally NOT forced here. The
   team-quarter-card now drives its own tier-based color
   (orange/amber/cyan via --mq-color) so the big number signals
   progress, not just brand identity. We still help by clearing
   the inline text-gradient (background-clip:text + transparent
   text-fill) so a solid `color` actually paints. */
#mdHeroScore {
    font-weight: 600 !important;
    -webkit-background-clip: initial !important;
    background: none !important;
}

/* Bonus amount (scoreboard simple) — color is intentionally NOT
   forced here. The bonus card now drives its own tier-based color
   (orange/amber/cyan via --bc-color) so the big number signals
   progress, not just brand identity. Typography stays branded
   (font-weight + Fraunces in the rule below). */
.bc-amount .mono {
    font-weight: 600 !important;
}

/* Priority alert + stat values — keep Geist so the numbers stay
   tight & tabular, but switch the panel TITLE to Fraunces. */
.stat-card .value {
    font-family: 'Geist Mono', monospace !important;
    font-feature-settings: "tnum" !important;
}

/* -------- Sidebar: cream paper ---------------------------------- */
.sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border) !important;
}
.nav-link {
    color: var(--text-secondary) !important;
    border-radius: 2px !important;   /* editorial square corners */
}
.nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
.nav-link.active {
    background-color: var(--accent-bg) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* -------- Header gradient → flat paper -------------------------- */
.header {
    background: var(--bg-body) !important;
    border-bottom: 1px solid var(--border) !important;
    /* Pin the persona pill to the right: never let the flex row
       wrap. Long persona messages on #headerGreeting would otherwise
       shove .header-actions onto a second row. */
    flex-wrap: nowrap !important;
}
[data-theme="dark"] .header {
    background: var(--bg-body) !important;
}
/* Title column — allow it to shrink past its natural content width so
   long h1 text wraps INSIDE the column instead of pushing the pill
   down. min-width:0 is the classic "let me shrink" flex unlock. */
.header .header-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
/* Long persona hero messages can contain KPI names / URLs — let any
   stubborn unbroken word break cleanly so the pill column stays intact. */
.header-title h1 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
/* Lock the pill column — never shrink, never get pushed to a new row. */
.header .header-actions {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}
/* On phones, restore the wrapping behaviour — squeezing the pill next
   to a big hero headline on a 360px-wide screen is worse than having
   the pill drop below. */
@media (max-width: 640px) {
    .header { flex-wrap: wrap !important; }
    .header .header-actions { flex-shrink: 1 !important; }
}

/* -------- Cards: flat paper + hairline border ------------------- */
.panel,
.stat-card,
.kpi-card,
.kpi-hero,
.urgent-kpi-row,
.next-action,
.briefing,
.profile-hero {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 4px !important;            /* editorial square-ish */
    box-shadow: none !important;
}
[data-theme="dark"] .panel,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-hero,
[data-theme="dark"] .urgent-kpi-row,
[data-theme="dark"] .next-action,
[data-theme="dark"] .briefing,
[data-theme="dark"] .profile-hero {
    background: var(--card-surface) !important;
}

/* Kill the "noise" gradients/overlays from the platform look */
.stat-card::before,
.panel::before,
.kpi-hero::before,
.kpi-card::before {
    display: none !important;
}

/* -------- Priority Alert: corporate gold/red editorial ---------- */
.priority-alert {
    background: var(--card-surface) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    border-left: 4px solid #EF4444 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    animation: none !important;
}
[data-theme="dark"] .priority-alert {
    background: #132D5E !important;
}
.priority-alert.at-risk-only {
    border-color: rgba(255, 153, 51, 0.45) !important;
    border-left-color: #FF9933 !important;
}
.priority-alert.all-clear {
    border-color: rgba(16, 185, 129, 0.45) !important;
    border-left-color: #10B981 !important;
}
.priority-alert .pa-icon {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #EF4444 !important;
    border-radius: 4px !important;
}
.priority-alert.at-risk-only .pa-icon {
    background: rgba(255, 153, 51, 0.14) !important;
    color: #FF9933 !important;
}
.priority-alert.all-clear .pa-icon {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #10B981 !important;
}
.priority-alert .pa-btn.primary {
    background: #EF4444 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
}
.priority-alert.at-risk-only .pa-btn.primary {
    background: var(--accent) !important;
    color: #FFFFFF !important;
}
.priority-alert.all-clear .pa-btn.primary {
    background: #10B981 !important;
    color: #FFFFFF !important;
}
.priority-alert .pa-btn.ghost {
    border-radius: 2px !important;
}

/* -------- Urgent KPI rows: color-coded left rail ---------------- */
.urgent-kpi-row.red    { --row-accent: #EF4444 !important; border-left-color: #EF4444 !important; }
.urgent-kpi-row.yellow { --row-accent: #FF9933 !important; border-left-color: #FF9933 !important; }
.urgent-kpi-row .uk-badge {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #EF4444 !important;
    border-radius: 2px !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}
.urgent-kpi-row.yellow .uk-badge {
    background: rgba(255, 153, 51, 0.14) !important;
    color: #FF9933 !important;
}
.urgent-kpi-row .uk-cta {
    background: var(--row-accent) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
}
.urgent-kpi-row.yellow .uk-cta { color: #FFFFFF !important; }

/* -------- Stat cards: color-coded numbers ----------------------- */
.stat-card.red .value    { color: #EF4444 !important; }
.stat-card.amber .value  { color: #FF9933 !important; }
.stat-card.green .value  { color: #10B981 !important; }
.stat-card.blue .value   { color: var(--accent) !important; }

/* -------- Bonus + Focus cards: editorial cream + gold ----------- */
.bonus-card {
    background: linear-gradient(135deg, var(--card-surface) 0%, var(--bg-sidebar) 100%) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--accent) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .bonus-card {
    background: linear-gradient(135deg, #132D5E 0%, #0D1F3C 100%) !important;
}
.bc-label {
    color: var(--accent) !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}
.bc-amount .mono {
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "opsz" 144 !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
}
.bc-bar {
    background: var(--card-gauge-track) !important;
}
/* Bonus progress-bar fill — background is intentionally NOT forced
   here. The bar now picks up the same tier color as the big number
   (var(--bc-color)) so the two read as one coherent state. We also
   drop the corporate-skin's box-shadow:none so the soft tier-tinted
   halo can come through (defined in the page's inline styles). */
.bc-sub b,
.bc-sub .mono,
.bc-sub .bc-gap {
    font-family: 'Geist Mono', monospace !important;
    font-feature-settings: "tnum" !important;
}

.focus-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .focus-card {
    background: #132D5E !important;
}
.fc-step {
    color: var(--accent) !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}
.fc-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "opsz" 144 !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary) !important;
}
.fc-cta {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
}
.fc-cta:hover { background: var(--accent-hover) !important; }

/* -------- Overall Progress score hero --------------------------- */
.score-hero-number {
    font-size: 5rem !important;
    font-weight: 600 !important;
    line-height: 0.92 !important;
}
.score-hero-label {
    font-family: 'Geist Mono', monospace !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}
.score-hero-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "opsz" 144 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}
.progress-bar {
    background: var(--card-gauge-track) !important;
}
.progress-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-hover)) !important;
    box-shadow: none !important;
}
.time-remaining-chip,
.live-sync-pill {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 999px !important;
}

/* -------- Today's Briefing: warm cream w/ gold left rail -------- */
.briefing {
    background: linear-gradient(135deg, var(--card-surface) 0%, var(--bg-body) 100%) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 4px !important;
}
.briefing-avatar {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "opsz" 144 !important;
    font-weight: 600 !important;
}
.briefing-greeting {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.briefing-actions .primary {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
}
.briefing-actions .ghost {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
}

/* -------- Panel heads: Fraunces title --------------------------- */
.panel-head .title:not(.v2-kicker) {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}
.panel-head .tag {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 2px !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
}

/* -------- KPI card gauges: gold accent -------------------------- */
.kpi-card,
.md-kpi-grid .kpi-card {
    border-radius: 4px !important;
}
.kpi-status.green { background: rgba(16, 185, 129, 0.14) !important; color: #10B981 !important; }
.kpi-status.yellow { background: rgba(255, 153, 51, 0.14) !important; color: #FF9933 !important; }
.kpi-status.red    { background: rgba(239, 68, 68, 0.14) !important; color: #EF4444 !important; }

/* The dashed benchmark line + area fill under the spark — keep, but
   use gold for status-driven tint */

/* -------- Bot (AI Companion) panel: cream ----------------------- */
.bot-panel {
    background: var(--bg-bot) !important;
    border-left: 1px solid var(--border) !important;
}
.bot-header {
    background: var(--bg-sidebar) !important;
    border-bottom: 1px solid var(--border) !important;
}
.bot-avatar {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-variation-settings: "opsz" 144 !important;
    font-weight: 600 !important;
}
.bot-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}
.bot-status-dot { background: #10B981 !important; }
.bot-msg {
    border-radius: 4px !important;
}
.bot-msg.bot {
    background: var(--bot-msg-bg) !important;
    border: 1px solid var(--bot-msg-border) !important;
    color: var(--bot-msg-text) !important;
}
.bot-msg.user {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border: none !important;
}
.bot-msg strong { color: var(--text-primary) !important; }
.bot-msg.user strong { color: #FFFFFF !important; }
.bot-input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
}
.bot-send-btn {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
}

/* -------- Persona pill (header) --------------------------------- */
.v2-persona {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
}
.v2-persona .avi {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
}
.v2-persona .name,
.v2-persona .style {
    color: var(--text-primary) !important;
}

/* -------- Theme toggle pill ------------------------------------- */
.theme-toggle {
    background: var(--bg-hover) !important;
    border-radius: 2px !important;
}
.toggle-switch { background: var(--border-strong, rgba(255,255,255,0.16)) !important; }
.toggle-switch.active { background: var(--accent) !important; }

/* -------- Reassurance tagline (rep simple) ---------------------- */
.reassurance {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--accent) !important;
    color: var(--text-primary) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-radius: 4px !important;
}
[data-theme="dark"] .reassurance {
    background: #132D5E !important;
}
.reassurance b {
    font-style: normal !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* -------- Manager hero block overrides (inline-styled in HTML) -- */
/* The manager dashboard has inline gradient styles on the hero. We
   force the background onto a cream card so the Fraunces number reads. */
.content > div[style*="linear-gradient(135deg, rgba(0,156,222,0.18)"] {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--accent) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .content > div[style*="linear-gradient(135deg, rgba(0,156,222,0.18)"] {
    background: #132D5E !important;
}
/* #mdHeroBar — background is intentionally NOT forced here. The bar
   now picks up the same tier color as the big number (var(--mq-color))
   so the two read as one coherent state. The corporate-skin's old
   box-shadow:none is also dropped so the soft tier-tinted halo can
   come through (defined in the page's inline styles). */
#mdTimeChip {
    background: var(--accent-bg) !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
}

/* Manager cohort card (inline-styled) */
#cohortCard {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--accent) !important;
    box-shadow: none !important;
}
[data-theme="dark"] #cohortCard {
    background: #132D5E !important;
}

/* Manager team summary block (Tailwind utilities) */
.md\:col-span-2.rounded-2xl,
div[class*="rounded-2xl"] {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
}
[data-theme="dark"] .md\:col-span-2.rounded-2xl,
[data-theme="dark"] div[class*="rounded-2xl"] {
    background: #132D5E !important;
}

/* Tailwind text-white / text-slate overrides so the content reads
   on paper */
.text-white,
.text-slate-200,
.text-slate-300,
.text-slate-400 {
    color: var(--text-primary) !important;
}

/* Hero action buttons in the manager profile-hero */
.hero-btn {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
}
.hero-btn:hover {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
}
.role-badge {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}
.hero-name {
    font-weight: 500 !important;
}

/* Severity stats block on manager */
.md-severity-stats .sev-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
}
[data-theme="dark"] .md-severity-stats .sev-card {
    background: #132D5E !important;
}

/* Urgent reps panel */
.urgent-reps-panel {
    background: var(--card-surface) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid #EF4444 !important;
    border-radius: 4px !important;
}
[data-theme="dark"] .urgent-reps-panel {
    background: #132D5E !important;
}

/* -------- Density + KPI toolbar --------------------------------- */
.kpi-toolbar .label {
    font-family: 'Geist Mono', monospace !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
.density-toggle {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
}
.density-toggle button {
    color: var(--text-secondary) !important;
    border-radius: 0 !important;
}
.density-toggle button.active {
    background: var(--accent) !important;
    color: #FFFFFF !important;
}

/* -------- Generic buttons inline-styled in manager -------------- */
button[onclick*="Dashboard PDF"],
button[onclick*="Share"] {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
}
button[onclick*="Share"] {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* -------- Sparkline defaults --------------------------------- */
/* The SVG gauges & sparklines pull their colour from JS via
   KPIcons.statusColor(); keep the inline colours so gauges still
   read (they already use red/amber/green). */

/* -------- Team Enablement tabs (prominent, pill-style) --------- */
/* Override the thin underlined platform tabs with big tappable
   pills so Victoria's 5 Team Enablement surfaces (Heatmap / Queue /
   Assigner / Authoring / Weekly Brief) read as a primary control,
   not as chrome. The active pill is filled gold + ink. */
.te-tabs {
    display: flex !important;
    gap: 10px !important;
    padding: 4px !important;
    margin-bottom: 24px !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
    flex-wrap: wrap !important;
}
.te-tab {
    padding: 14px 22px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    font-family: 'Geist', sans-serif !important;
    letter-spacing: -0.005em !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    transition: all 0.15s ease !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: fit-content !important;
}
.te-tab:hover {
    color: var(--text-primary) !important;
    background: var(--card-surface) !important;
    border-bottom-color: transparent !important;
}
.te-tab.active {
    background: var(--accent) !important;
    color: var(--bg-body) !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .te-tab.active { color: var(--paper, #FFFFFF) !important; }

/* -------- Telemetry FAB ---------------------------------------- */
/* kpicons-telemetry.js auto-injects a ⚡ FAB at bottom:16px;
   left:16px — which sits directly on top of the Log Out link in
   our 250px sidebar. Move it to the bottom-right of the main
   content area, clear of both the sidebar AND the AI Companion
   bot panel (which reserves ~300px on the right via .has-companion).
   Also repaint it in corporate gold so it stops screaming cyber-blue
   in an editorial palette. */
.kpi-debug-fab {
    left: auto !important;
    right: 320px !important;           /* 300px has-companion gutter + 20px */
    bottom: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--card-surface) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    opacity: 0.85 !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 156, 222, 0.18) !important;
    font-size: 18px !important;
}
.kpi-debug-fab:hover {
    opacity: 1 !important;
    background: var(--accent) !important;
    color: var(--bg-body) !important;
    transform: scale(1.08) !important;
}
/* On pages without the AI Companion (no .has-companion body class)
   bring the FAB back in to bottom-right with normal margin. */
body:not(.has-companion) .kpi-debug-fab {
    right: 20px !important;
}
/* Narrow screens — tuck it back in so it doesn't fall off-screen. */
@media (max-width: 900px) {
    .kpi-debug-fab {
        right: 16px !important;
        bottom: 16px !important;
    }
}