/* ============================================================
   Truewerk Brand Font — Roboto Mono
   ============================================================ */
@font-face {
    font-family: 'Roboto Mono';
    src: url('/static/fonts/RobotoMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/static/fonts/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/static/fonts/RobotoMono-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/static/fonts/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Truewerk Brand Tokens — Marketing Planner
   All brand colors are defined here as CSS custom properties.
   Do NOT hardcode hex values in templates or JS files.
   ============================================================ */

:root {
    /* ---- Brand palette ---- */
    --tw-black:      #111111;
    --tw-lime:       #CCFF00;
    --tw-orange:     #E84B1A;
    --tw-brown:      #6B3F1E;
    --tw-offwhite:   #F5F5F0;
    --tw-white:      #FFFFFF;
    --tw-lime-tint:  #F0FFB0;

    /* ---- Protected UX signals (do NOT override) ---- */
    --ux-green:      #16A34A;
    --ux-red:        #DC2626;
    --ux-amber:      #D97706;

    /* ---- Chart line tokens ---- */
    --chart-rate-line:      #DC2626;   /* bright red — primary rate metric */
    --chart-rate-line-comp: #FCA5A5;   /* pale red — comparison rate metric */
    --chart-bar:            #111111;   /* primary volume bar */
    --chart-bar-comp:       rgba(17,17,17,0.2); /* comparison volume bar */

    /* ---- TV per-network categorical palette (TV-01) ----
       12-stop palette for stacked-by-network bars on /tv/reporting.
       Picked to avoid collision with TW Lime / Orange / Brown so legend
       chips don't read as protected UX signals. */
    --tv-net-1:  #8DD3C7;
    --tv-net-2:  #FFFFB3;
    --tv-net-3:  #BEBADA;
    --tv-net-4:  #FB8072;
    --tv-net-5:  #80B1D3;
    --tv-net-6:  #FDB462;
    --tv-net-7:  #B3DE69;
    --tv-net-8:  #FCCDE5;
    --tv-net-9:  #BC80BD;
    --tv-net-10: #CCEBC5;
    --tv-net-11: #FFED6F;
    --tv-net-12: #D9D9D9;

    /* ---- Derived semantic tokens ---- */
    --bg-body:       var(--tw-offwhite);
    --bg-card:       var(--tw-white);
    --bg-nav:        var(--tw-black);
    --bg-dropdown:   var(--tw-white);
    --text-primary:  var(--tw-black);
    --text-secondary:#6b7280;
    --text-nav:      #d1d5db;
    --text-nav-hover:#ffffff;
    --text-dropdown: #374151;
    --border-color:  #e5e7eb;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.1);

    /* ---- AG Grid brand overrides ---- */
    --ag-header-background-color: var(--tw-black);
    --ag-header-foreground-color: #ffffff;
    --ag-odd-row-background-color: var(--tw-offwhite);
    --ag-row-hover-color: #ededea;
    --ag-foreground-color: var(--tw-black);
    --ag-border-color: #e5e7eb;
    --ag-range-selection-background-color: var(--tw-lime-tint);

    /* ---- Table brand overrides ---- */
    --table-header-bg:   var(--tw-black);
    --table-header-text: #ffffff;
    --table-row-hover:   #f5f5f0;
    --table-total-bg:    #e8e8e4;
}

/* ---- Dark mode ---- */
html.dark {
    --bg-body:       #111111;
    --bg-card:       #1e1e1e;
    --bg-nav:        #0a0a0a;
    --bg-dropdown:   #2a2a2a;
    --text-primary:  #e5e5e5;
    --text-secondary:#9ca3af;
    --text-nav:      #9ca3af;
    --text-nav-hover:#ffffff;
    --text-dropdown: #e5e5e5;
    --border-color:  #333333;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.4);

    --table-header-bg:   #2a2a2a;
    --table-header-text: #e5e5e5;
    --table-row-hover:   #252525;
    --table-total-bg:    #2a2a2a;

    --ag-background-color: #1e1e1e;
    --ag-header-background-color: #2a2a2a;
    --ag-odd-row-background-color: #222;
    --ag-row-hover-color: #333;
    --ag-foreground-color: #e5e5e5;
    --ag-border-color: #444;
}

/* ============================================================
   Global overrides
   ============================================================ */
body {
    background: var(--bg-body) !important;
    color: var(--text-primary);
    transition: background .2s, color .2s;
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ---- Primary button: TW Black bg + Lime text ---- */
.btn-primary {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
    border: 1px solid var(--tw-black) !important;
}
.btn-primary:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}

/* ---- Secondary button: dark outline ---- */
.btn-secondary {
    background-color: transparent !important;
    color: var(--tw-black) !important;
    border: 1px solid var(--tw-black) !important;
}
.btn-secondary:hover {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}

/* ---- Danger button: TW Orange ---- */
.btn-danger {
    background-color: var(--tw-orange) !important;
    color: white !important;
    border: 1px solid var(--tw-orange) !important;
}
.btn-danger:hover {
    background-color: #d14316 !important;
}

/* ---- Accent/action button: TW Orange on light bg ---- */
.btn-accent {
    background-color: var(--tw-orange) !important;
    color: white !important;
    border: 1px solid var(--tw-orange) !important;
}
.btn-accent:hover {
    background-color: #d14316 !important;
}

/* ---- Tab buttons ---- */
.metric-btn.active,
.tab-btn.active {
    background: var(--tw-black) !important;
    color: var(--tw-lime) !important;
    border-color: var(--tw-black) !important;
}

/* ---- Active nav link indicator ---- */
nav a.active-nav,
nav button.active-nav {
    border-bottom: 2px solid var(--tw-lime);
    color: white !important;
}

/* ---- Focus rings: Lime instead of blue ---- */
*:focus-visible {
    outline: 2px solid var(--tw-lime) !important;
    outline-offset: 1px;
}
select:focus, input:focus, textarea:focus {
    border-color: var(--tw-lime) !important;
    box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.25) !important;
}

/* ---- KPI card left-border accent ---- */
.kpi-card {
    border-left: 4px solid var(--tw-lime);
}

/* ---- Badges ---- */
.badge-crm {
    background: var(--tw-brown) !important;
    color: white !important;
}
.badge-direct {
    background: var(--tw-orange) !important;
    color: white !important;
}

/* ---- AG Grid header override (global) ---- */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
    background-color: var(--tw-black) !important;
    color: #ffffff !important;
}
.ag-theme-alpine .ag-header {
    background-color: var(--tw-black) !important;
}
.ag-theme-alpine .ag-header-cell-text {
    color: #ffffff !important;
}
.ag-theme-alpine .ag-header-icon .ag-icon {
    color: #cccccc !important;
}

/* ---- AG Grid editable input cell: Lime Tint ---- */
.ag-theme-alpine .cell-input {
    background-color: var(--tw-lime-tint) !important;
}

/* ---- AG Grid totals row: match header ---- */
.ag-theme-alpine .ag-row-pinned-bottom {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
    font-weight: 700;
}
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell *,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell-value,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell span,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell div,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell [style] {
    color: var(--tw-lime) !important;
}
/* First column (label) in totals row: white text */
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child *,
.ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child [style] {
    color: #ffffff !important;
}

/* ---- AG Grid row alt color ---- */
.ag-theme-alpine .ag-row-odd {
    background-color: var(--tw-offwhite);
}

/* ---- Summary / as-table header override ---- */
.as-table th,
.summary-table th {
    background: var(--tw-black) !important;
    color: #ffffff !important;
}

/* ---- Toast notification ---- */
.toast {
    background: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}

/* ---- Link accent color ---- */
a.tw-link {
    color: var(--tw-orange);
}
a.tw-link:hover {
    text-decoration: underline;
}

/* ============================================================
   Tailwind CDN color overrides via CSS
   Override the default blue-600 buttons globally
   ============================================================ */

/* Primary action buttons (previously bg-blue-600) */
.bg-blue-600 {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}
.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}
.bg-blue-700 {
    background-color: #222222 !important;
}

/* Green action buttons (Save/Activate) -> TW Black + Lime */
.bg-green-600 {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}
.bg-green-600:hover,
.hover\:bg-green-700:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}

/* Teal buttons -> TW Black + Lime */
.bg-teal-600 {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}
.bg-teal-600:hover,
.hover\:bg-teal-700:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}

/* Purple buttons -> TW Black + Lime */
.bg-purple-600 {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}
.bg-purple-600:hover,
.hover\:bg-purple-700:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}

/* Indigo buttons -> TW Black + Lime */
.bg-indigo-600 {
    background-color: var(--tw-black) !important;
    color: var(--tw-lime) !important;
}
.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
    background-color: #222222 !important;
    color: var(--tw-lime) !important;
}

/* Amber/warning buttons -> TW Orange */
.bg-amber-500 {
    background-color: var(--tw-orange) !important;
    color: white !important;
}
.bg-amber-500:hover,
.hover\:bg-amber-600:hover {
    background-color: #d14316 !important;
    color: white !important;
}

/* Red/danger buttons — keep for destructive actions but use TW Orange */
.bg-red-600 {
    background-color: var(--tw-orange) !important;
}
.bg-red-600:hover,
.hover\:bg-red-700:hover {
    background-color: #d14316 !important;
}
.bg-red-800 {
    background-color: #b33a10 !important;
}
.hover\:bg-red-900:hover {
    background-color: #992f0d !important;
}

/* Active tab text accents (previously blue/purple) */
.text-blue-600 {
    color: var(--tw-orange) !important;
}
.text-purple-700 {
    color: var(--tw-orange) !important;
}

/* Active tab borders (previously blue/indigo) */
.border-blue-500 {
    border-color: var(--tw-lime) !important;
}

/* Focus rings (previously blue) */
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--tw-lime) !important;
    box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.35) !important;
}
.focus\:border-blue-500:focus {
    border-color: var(--tw-lime) !important;
}

/* Progress bar */
.bg-blue-500 {
    background-color: var(--tw-lime) !important;
}

/* ============================================================
   Dark mode overrides (carried from base.html inline styles)
   ============================================================ */
html.dark .bg-white,
html.dark .bg-gray-100 { background: var(--bg-card) !important; }
html.dark .bg-gray-50 { background: var(--bg-card) !important; }
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-gray-500 { color: var(--text-secondary) !important; }
html.dark .text-gray-900,
html.dark .text-gray-800 { color: var(--text-primary) !important; }
html.dark .border-gray-300,
html.dark .border-gray-200 { border-color: var(--border-color) !important; }
html.dark .border { border-color: var(--border-color) !important; }
html.dark .shadow-md,
html.dark .shadow-lg { box-shadow: var(--shadow-sm) !important; }
html.dark select,
html.dark input,
html.dark textarea { background: #2a2a2a !important; color: var(--text-primary) !important; border-color: #444 !important; }
html.dark .hover\:bg-gray-100:hover { background: #333 !important; }
/* Nav dropdown dark */
html.dark .group-hover\:opacity-100 { background: var(--bg-dropdown) !important; }
html.dark .group div[class*="bg-white"] { background: var(--bg-dropdown) !important; }
html.dark .group a { color: var(--text-dropdown) !important; }
html.dark .group a:hover { background: #333 !important; }
/* Table dark overrides */
html.dark .as-table th { background: var(--table-header-bg) !important; color: var(--table-header-text) !important; border-color: #444 !important; }
html.dark .as-table td { border-color: #333 !important; color: var(--text-primary) !important; }
html.dark .as-table tr.total-row { background: var(--table-total-bg) !important; color: #e5e5e5 !important; }
html.dark .as-table tr.total-row td { color: #e5e5e5 !important; }
html.dark .summary-table th { background: #333 !important; }
html.dark .summary-table td { border-color: #333 !important; }
html.dark .view-section { background: var(--bg-card) !important; box-shadow: var(--shadow-sm) !important; }
/* AG Grid dark */
html.dark .ag-theme-alpine {
    --ag-background-color: #1e1e1e;
    --ag-header-background-color: #2a2a2a;
    --ag-odd-row-background-color: #222;
    --ag-row-hover-color: #333;
    --ag-foreground-color: #e5e5e5;
    --ag-border-color: #444;
}
html.dark .ag-theme-alpine .ag-header-cell,
html.dark .ag-theme-alpine .ag-header-group-cell {
    background-color: #2a2a2a !important;
}
/* ============================================================
   Delta indicator spectrum (independent of brand palette)
   Full ramp: bright-red → orange → light-orange → grey →
              light-blue → blue → green → bright-green
   ============================================================ */
.cell-diff-bright-red  { font-size: 11px; color: #dc2626; line-height: 1.3; font-weight: 600; }
.cell-diff-red         { font-size: 11px; color: #ea580c; line-height: 1.3; font-weight: 600; }
.cell-diff-orange      { font-size: 11px; color: #f59e0b; line-height: 1.3; }
.cell-diff-grey        { font-size: 11px; color: #9ca3af; line-height: 1.3; }
.cell-diff-light-blue  { font-size: 11px; color: #60a5fa; line-height: 1.3; }
.cell-diff-blue        { font-size: 11px; color: #2563eb; line-height: 1.3; }
.cell-diff-green       { font-size: 11px; color: #16a34a; line-height: 1.3; }
.cell-diff-bright-green{ font-size: 11px; color: #15803d; line-height: 1.3; font-weight: 600; }

/* Legacy aliases (keep for templates that still reference old classes) */
.cell-diff-warm { font-size: 11px; color: #f59e0b; line-height: 1.3; }
.cell-diff-cool { font-size: 11px; color: #60a5fa; line-height: 1.3; }

/* ============================================================
   TWHeatmap conditional-format popover (app/static/js/conditional_format.js)
   Shared config UI for the reusable hot/cold utility (DASH-08).
   ============================================================ */
.tw-cf-popover {
    z-index: 1200;
    width: 260px;
    background: var(--tw-white, #ffffff);
    color: var(--tw-black, #111111);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 10px 12px;
    font-size: 12px;
}
.tw-cf-title { font-weight: 700; margin-bottom: 8px; }
.tw-cf-sublabel { font-weight: 600; margin: 8px 0 4px; color: #6b7280; }
.tw-cf-cols-head { display: flex; align-items: center; justify-content: space-between; }
.tw-cf-selall a { color: #2563eb; font-weight: 500; text-decoration: none; }
.tw-cf-selall a:hover { text-decoration: underline; }
.tw-cf-row { display: flex; align-items: center; justify-content: space-between; margin: 5px 0; gap: 8px; }
.tw-cf-label { color: #374151; }
.tw-cf-select, .tw-cf-num { border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 4px; font-size: 12px; background: var(--tw-white, #fff); color: inherit; }
.tw-cf-num { width: 70px; }
.tw-cf-inline { display: flex; gap: 4px; align-items: center; }
.tw-cf-swatch { width: 34px; height: 22px; padding: 0; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; background: none; }
.tw-cf-check { width: 15px; height: 15px; }
.tw-cf-cols { max-height: 140px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px; }
.tw-cf-colitem { display: flex; align-items: center; gap: 6px; padding: 2px 2px; cursor: pointer; }
.tw-cf-btnrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tw-cf-apply { background: var(--tw-black, #111); color: var(--tw-lime, #CCFF00); border: none; border-radius: 4px; padding: 4px 12px; font-weight: 600; cursor: pointer; }
.tw-cf-reset { background: transparent; color: var(--tw-black, #111); border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 12px; cursor: pointer; }

/* Dark-mode surface for the popover */
html.dark .tw-cf-popover { background: var(--bg-card, #1e1e1e); color: #e5e5e5; border-color: #333; }
html.dark .tw-cf-select, html.dark .tw-cf-num { background: #2a2a2a; color: #e5e5e5; border-color: #444; }
html.dark .tw-cf-label { color: #cbd5e1; }
html.dark .tw-cf-cols { border-color: #333; }
html.dark .tw-cf-reset { color: #e5e5e5; border-color: #444; }

/* ============================================================
   Planning grid: hard-black metric numbers (light mode)
   ============================================================ */
.cell-plan-value {
    font-weight: 600;
    line-height: 1.3;
    color: #111111;
}
.ag-theme-alpine .ag-cell {
    color: #111111;
}

/* ============================================================
   Dark mode — comprehensive text contrast fixes
   ============================================================ */

/* Force all AG Grid cell text to be bright in dark mode */
html.dark .ag-theme-alpine .ag-cell {
    color: #e5e5e5 !important;
}
html.dark .ag-theme-alpine .ag-row {
    color: #e5e5e5 !important;
}
html.dark .cell-plan-value {
    color: #f5f5f5 !important;
}
html.dark .cell-ref-value {
    color: #888 !important;
}
html.dark .cell-derived {
    background-color: #2a2a2a !important;
    color: #e5e5e5 !important;
}
html.dark .cell-readonly {
    background-color: #252525 !important;
    color: #888 !important;
}

/* Lime tint input cells in dark mode: dark bg instead of bright yellow */
html.dark .cell-input,
html.dark .ag-theme-alpine .cell-input {
    background-color: #2a3a10 !important;
    color: #e5e5e5 !important;
}

/* Frozen / actuals-locked cells in dark mode */
html.dark .cell-actuals-locked {
    background: linear-gradient(180deg, #2a2a2a 0%, #252525 100%) !important;
    color: #999 !important;
}
html.dark .cell-frozen {
    background-color: #1e2a3a !important;
    color: #9ca3af !important;
}

/* KPI cards in dark mode */
html.dark .kpi-card {
    background: var(--bg-card) !important;
    border-color: #333 !important;
}
html.dark .kpi-card .text-2xl,
html.dark .kpi-card .text-xl {
    color: #f5f5f5 !important;
}

/* Diag widgets dark */
html.dark .diag-widget {
    background: #1e1e1e !important;
    border-color: #444 !important;
}
html.dark .diag-widget-value {
    color: #f5f5f5 !important;
}
html.dark .diag-widget-label {
    color: #9ca3af !important;
}

/* Summary table dark: make cells readable */
html.dark .summary-table td {
    color: #e5e5e5 !important;
}
html.dark .summary-table .metric-label {
    background: #252525 !important;
    color: #e5e5e5 !important;
}

/* Planning toolbar cards dark */
html.dark .toolbar-card,
html.dark .corr-card {
    background: #1e1e1e !important;
    border-color: #444 !important;
}

/* Guardrail cards dark */
html.dark .guardrail-green { background: #0f2a1a !important; border-color: #166534 !important; color: #86efac !important; }
html.dark .guardrail-amber { background: #2a1f0a !important; border-color: #92400e !important; color: #fcd34d !important; }
html.dark .guardrail-red { background: #2a0f0f !important; border-color: #991b1b !important; color: #fca5a5 !important; }

/* Stat boxes dark */
html.dark .stat-box {
    background: #252525 !important;
    border-color: #444 !important;
}
html.dark .stat-value {
    color: #f5f5f5 !important;
}

/* Modal dark */
html.dark .modal-content {
    background: #1e1e1e !important;
    border: 1px solid #444;
    color: #e5e5e5 !important;
}

/* Picker chips dark */
html.dark .picker-chip {
    background: #2a2a2a !important;
    border-color: #555 !important;
    color: #e5e5e5 !important;
}
html.dark .picker-chip.selected {
    background: #333 !important;
    color: #CCFF00 !important;
    border-color: #CCFF00 !important;
}

/* Tab buttons dark */
html.dark .metric-btn {
    background: #2a2a2a !important;
    border-color: #555 !important;
    color: #ccc !important;
}
html.dark .metric-btn.active,
html.dark .tab-btn.active {
    background: #333 !important;
    color: #CCFF00 !important;
    border-color: #CCFF00 !important;
}

/* Plan state badge dark */
html.dark .plan-state-draft { background: #333 !important; color: #9ca3af !important; }
html.dark .plan-state-in_progress { background: #3a2a0a !important; color: #fcd34d !important; }
html.dark .plan-state-activated { background: #0f2a1a !important; color: #86efac !important; }

/* Pinned bottom row stays dark in dark mode (already dark bg) */
html.dark .ag-theme-alpine .ag-row-pinned-bottom {
    background-color: #0a0a0a !important;
    color: var(--tw-lime) !important;
}
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell *,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell-value,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell span,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell div,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell [style] {
    color: var(--tw-lime) !important;
}
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child *,
html.dark .ag-theme-alpine .ag-row-pinned-bottom .ag-cell:first-child [style] {
    color: #ffffff !important;
}

/* Month header groups dark */
html.dark .month-header-actual {
    background: linear-gradient(180deg, #333 0%, #2a2a2a 100%) !important;
    color: #999 !important;
}
html.dark .month-header-frozen {
    background: #1e2a3a !important;
    color: #7dd3fc !important;
}

/* Lookback / diagnostic tables dark */
html.dark .lookback-table th,
html.dark .diag-table th {
    color: #9ca3af !important;
    border-color: #444 !important;
}
html.dark .lookback-table td,
html.dark .diag-table td {
    color: #e5e5e5 !important;
    border-color: #333 !important;
}
html.dark .diag-section-hdr {
    background: #252525 !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
}

/* ES/projection tables dark */
html.dark .es-table th,
html.dark .proj-table th,
html.dark .mix-table th {
    background: #2a2a2a !important;
    border-color: #444 !important;
}
html.dark .es-table td,
html.dark .proj-table td,
html.dark .mix-table td {
    color: #e5e5e5 !important;
    border-color: #333 !important;
}
html.dark .es-table tr.total-row,
html.dark .mix-table tr.total-row,
html.dark .proj-table tr.total-row {
    background: var(--table-total-bg) !important;
    color: #e5e5e5 !important;
}
html.dark .es-table tr.total-row td,
html.dark .mix-table tr.total-row td,
html.dark .proj-table tr.total-row td {
    color: #e5e5e5 !important;
}
html.dark .es-section {
    background: #1e1e1e !important;
}
html.dark .es-title {
    color: #e5e5e5 !important;
}
html.dark .diag-section-header {
    background: #2a2a2a !important;
}

/* Filter panels dark */
html.dark .toolbar-filter-panel,
html.dark .filter-menu {
    background: #1e1e1e !important;
    border-color: #444 !important;
}
html.dark .toolbar-filter-panel label,
html.dark .filter-menu label {
    color: #e5e5e5 !important;
}

/* Badges remain visible in dark mode */
html.dark .badge-crm,
html.dark .badge-direct {
    opacity: 0.9;
}

/* Target badge dark */
html.dark .target-badge {
    background: #0f2a1a !important;
    border-color: #166534 !important;
    color: #86efac !important;
}

/* User settings modal */
.user-settings-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:9999; display:flex; align-items:flex-start; justify-content:flex-end; padding:60px 16px 0 0; }
.user-settings-card { background:var(--bg-card); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.2); width:280px; padding:20px; color:var(--text-primary); }
html.dark .user-settings-card { border:1px solid #333; }