/* ============================================
   DEVELOPMENT COACHING TOOL — V2 DESIGN SYSTEM
   Clean, modern, Notion/Linear-inspired aesthetic
   ============================================ */

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

/* --- Design tokens --- */
:root {
    /* Colors - muted, sophisticated palette */
    --bg-app: #f5f5f7;
    --bg-surface: #ffffff;
    --bg-surface-raised: #fafbfc;
    --bg-surface-sunken: #f0f1f3;
    --bg-hover: #f0f1f3;
    --bg-active: #e8e9ec;

    /* Brand - subtle indigo instead of heavy blue */
    --brand: #5b5fc7;
    --brand-hover: #4a4eb5;
    --brand-soft: #ededfc;
    --brand-muted: #8b8fcf;
    --brand-text: #3b3e8a;

    /* Text */
    --text-primary: #1a1a2e;
    --text-secondary: #5a5d6e;
    --text-tertiary: #8b8d9e;
    --text-inverse: #ffffff;

    /* Borders */
    --border: #e4e5e9;
    --border-strong: #d1d3d8;
    --border-focus: rgba(91, 95, 199, 0.4);

    /* Status */
    --green: #2da44e;
    --green-soft: #dafbe1;
    --green-text: #1a7f37;
    --red: #cf222e;
    --red-soft: #ffebe9;
    --red-text: #82071e;
    --yellow: #bf8700;
    --yellow-soft: #fff8c5;
    --yellow-text: #6c4400;
    --orange: #e16f24;
    --orange-soft: #fff1e5;

    /* Shadows - very subtle */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-focus: 0 0 0 3px var(--border-focus);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Legacy variable mappings for existing code */
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);
    --ui-radius-lg: var(--radius-lg);
    --ui-border: var(--border);
    --ui-border-strong: var(--border-strong);
    --ui-text: var(--text-primary);
    --ui-muted: var(--text-secondary);
    --ui-accent: var(--brand);
    --ui-accent-strong: var(--brand-hover);
    --ui-accent-soft: var(--brand-soft);
    --ui-shadow-sm: var(--shadow-sm);
    --ui-shadow-md: var(--shadow-md);
    --ui-focus: var(--shadow-focus);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
}

/* --- Dark mode tokens --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-app: #101827;
        --bg-surface: #1a2234;
        --bg-surface-raised: #1f2a3e;
        --bg-surface-sunken: #141c2b;
        --bg-hover: #243047;
        --bg-active: #2a3a54;

        --brand: #7ba4e8;
        --brand-hover: #9bbcf0;
        --brand-soft: #1a2744;
        --brand-muted: #5a84c4;
        --brand-text: #a8c8f0;

        --text-primary: #e2e8f0;
        --text-secondary: #94a3b8;
        --text-tertiary: #64748b;
        --text-inverse: #101827;

        --border: #2a3a54;
        --border-strong: #374b6a;
        --border-focus: rgba(123, 164, 232, 0.4);

        --green: #4ade80;
        --green-soft: #132a1e;
        --green-text: #6ee7a0;
        --red: #f87171;
        --red-soft: #2a1418;
        --red-text: #fca5a5;
        --yellow: #fbbf24;
        --yellow-soft: #2a2213;
        --yellow-text: #fcd34d;
        --orange: #fb923c;
        --orange-soft: #2a1d11;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* Manual dark mode toggle */
[data-theme="dark"] {
    --bg-app: #101827;
    --bg-surface: #1a2234;
    --bg-surface-raised: #1f2a3e;
    --bg-surface-sunken: #141c2b;
    --bg-hover: #243047;
    --bg-active: #2a3a54;

    --brand: #7ba4e8;
    --brand-hover: #9bbcf0;
    --brand-soft: #1a2744;
    --brand-muted: #5a84c4;
    --brand-text: #a8c8f0;

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-inverse: #101827;

    --border: #2a3a54;
    --border-strong: #374b6a;
    --border-focus: rgba(123, 164, 232, 0.4);

    --green: #4ade80;
    --green-soft: #132a1e;
    --green-text: #6ee7a0;
    --red: #f87171;
    --red-soft: #2a1418;
    --red-text: #fca5a5;
    --yellow: #fbbf24;
    --yellow-soft: #2a2213;
    --yellow-text: #fcd34d;
    --orange: #fb923c;
    --orange-soft: #2a1d11;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Override inline white/light backgrounds in dark mode */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"] {
    background: var(--bg-surface-raised) !important;
}

[data-theme="dark"] [style*="border: 1px solid #e"],
[data-theme="dark"] [style*="border:1px solid #e"],
[data-theme="dark"] [style*="border: 1px solid #d"],
[data-theme="dark"] [style*="border:1px solid #d"],
[data-theme="dark"] [style*="border: 1px solid #c"],
[data-theme="dark"] [style*="border:1px solid #c"] {
    border-color: var(--border) !important;
}

[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#1a"],
[data-theme="dark"] [style*="color: #1a"] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"] {
    color: var(--text-secondary) !important;
}

/* DARK MODE: Nuclear text and background readability.
   Every element gets dark background + light text.
   This overrides ALL inline styles app-wide. */
[data-theme="dark"] {
    color: #e2e8f0;
}

[data-theme="dark"] body,
[data-theme="dark"] .container,
[data-theme="dark"] main,
[data-theme="dark"] section,
[data-theme="dark"] div,
[data-theme="dark"] span,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #e2e8f0 !important;
}

/* Override EVERY inline light background in the entire app */
[data-theme="dark"] [style*="background: #f"],
[data-theme="dark"] [style*="background:#f"],
[data-theme="dark"] [style*="background: #e"],
[data-theme="dark"] [style*="background:#e"],
[data-theme="dark"] [style*="background: #d"],
[data-theme="dark"] [style*="background:#d"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"] {
    background: #1f2a3e !important;
}

/* Status-colored badges/pills should keep their colors but with dark-safe variants */
[data-theme="dark"] [style*="background: #e8f5e9"],
[data-theme="dark"] [style*="background:#e8f5e9"] { background: #132a1e !important; }
[data-theme="dark"] [style*="background: #fff3e0"],
[data-theme="dark"] [style*="background:#fff3e0"] { background: #2a2013 !important; }
[data-theme="dark"] [style*="background: #ffebee"],
[data-theme="dark"] [style*="background:#ffebee"] { background: #2a1418 !important; }
[data-theme="dark"] [style*="background: #fff8c5"],
[data-theme="dark"] [style*="background:#fff8c5"] { background: #2a2213 !important; }
[data-theme="dark"] [style*="background: #e3f2fd"],
[data-theme="dark"] [style*="background:#e3f2fd"] { background: #0d1a2e !important; }

/* Force all table content readable - !important to beat inline styles */
[data-theme="dark"] table,
[data-theme="dark"] table td,
[data-theme="dark"] table th,
[data-theme="dark"] table tr,
[data-theme="dark"] table tr td,
[data-theme="dark"] table tr th {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* All table rows — override ANY inline background */
[data-theme="dark"] table tr[style] {
    background: var(--bg-surface) !important;
}

/* Team member rows — indigo-tinted highlight */
[data-theme="dark"] table tr[style*="background: #e8eaf6"],
[data-theme="dark"] table tr[style*="background:#e8eaf6"] {
    background: var(--brand-soft) !important;
    color: var(--text-primary) !important;
}

/* Alternating non-team rows */
[data-theme="dark"] table tr[style*="background: #fafafa"],
[data-theme="dark"] table tr[style*="background:#fafafa"] {
    background: var(--bg-surface-raised) !important;
}

/* Ranking names */
.ranking-card-name {
    color: #1a1a2e;
}
.ranking-name-cell {
    color: #1a1a2e;
}
.ranking-row td {
    color: #1a1a2e;
}

[data-theme="dark"] .ranking-card-name {
    color: #e2e8f0 !important;
    text-decoration-color: #94a3b8 !important;
}
[data-theme="dark"] .ranking-name-cell,
[data-theme="dark"] .ranking-row td {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .ranking-row {
    background: #1a2234 !important;
}
[data-theme="dark"] .ranking-row:nth-child(even) {
    background: #1f2a3e !important;
}

/* ALL divs with inline background colors in dark mode */
[data-theme="dark"] div[style*="background: #e8f5e9"],
[data-theme="dark"] div[style*="background:#e8f5e9"],
[data-theme="dark"] div[style*="background: #fff8e1"],
[data-theme="dark"] div[style*="background:#fff8e1"],
[data-theme="dark"] div[style*="background: #fbe9e7"],
[data-theme="dark"] div[style*="background:#fbe9e7"],
[data-theme="dark"] div[style*="background: #f8f9fa"],
[data-theme="dark"] div[style*="background:#f8f9fa"] {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
}

/* Score badge cells in tables */
[data-theme="dark"] td[style*="background: #e8f5e9"],
[data-theme="dark"] td[style*="background:#e8f5e9"] { background: var(--green-soft) !important; color: var(--green-text) !important; }
[data-theme="dark"] td[style*="background: #fff8e1"],
[data-theme="dark"] td[style*="background:#fff8e1"] { background: var(--yellow-soft) !important; color: var(--yellow-text) !important; }
[data-theme="dark"] td[style*="background: #ffebee"],
[data-theme="dark"] td[style*="background:#ffebee"] { background: var(--red-soft) !important; color: var(--red-text) !important; }

/* Header/team-avg rows */
[data-theme="dark"] table tr[style*="background: #f5f5f5"],
[data-theme="dark"] table tr[style*="background:#f5f5f5"],
[data-theme="dark"] table tr[style*="background: #ede7f6"],
[data-theme="dark"] table tr[style*="background:#ede7f6"] {
    background: var(--bg-active) !important;
    color: var(--text-primary) !important;
}

/* Nuclear option: any span/div/td with a hard-coded dark color */
[data-theme="dark"] [style*="color: #1565c0"],
[data-theme="dark"] [style*="color:#1565c0"] { color: var(--brand) !important; }
[data-theme="dark"] [style*="color: #4a148c"],
[data-theme="dark"] [style*="color:#4a148c"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #7a4f00"],
[data-theme="dark"] [style*="color:#7a4f00"] { color: var(--yellow-text) !important; }

[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* Override all inline-styled buttons in dark mode */
[data-theme="dark"] button[style*="background:linear-gradient"],
[data-theme="dark"] button[style*="background: linear-gradient"] {
    background: var(--brand) !important;
    border-color: var(--brand-hover) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] button[style*="background:#4338ca"],
[data-theme="dark"] button[style*="background: #4338ca"] {
    background: var(--brand) !important;
}

[data-theme="dark"] button[style*="background:#f1f5f9"],
[data-theme="dark"] button[style*="background: #f1f5f9"],
[data-theme="dark"] button[style*="background:#ccc"],
[data-theme="dark"] button[style*="background: #ccc"] {
    background: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* Sub-nav buttons in dark mode */
[data-theme="dark"] .sub-nav button {
    background: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .sub-nav button[style*="gradient"],
[data-theme="dark"] .sub-nav button[style*="opacity: 1"] {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
    border-color: var(--brand-hover) !important;
}

/* Inner tab buttons (Celebrations/Morning Pulse toggle) */
[data-theme="dark"] #celebrationsInnerNav button {
    background: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] #celebrationsInnerNav button[style*="gradient"] {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
    border-color: var(--brand-hover) !important;
}

/* View toggle (Current/History) */
[data-theme="dark"] #celebViewCurrent,
[data-theme="dark"] #celebViewHistory {
    border-color: var(--border) !important;
}

[data-theme="dark"] #celebViewCurrent[style*="gradient"],
[data-theme="dark"] #celebViewHistory[style*="gradient"] {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
}

[data-theme="dark"] #celebViewCurrent:not([style*="gradient"]),
[data-theme="dark"] #celebViewHistory:not([style*="gradient"]) {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
}

/* Full-width panels/sections in dark mode */
[data-theme="dark"] [style*="background: #e0e7ff"],
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background: #e2e8f0"],
[data-theme="dark"] [style*="background:#e2e8f0"] {
    background: var(--bg-surface-raised) !important;
}

/* Celebration/pulse card overrides for dark mode */
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] { background: #2a2013 !important; }
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] { background: #0d1a2e !important; }
[data-theme="dark"] [style*="background:#faf5ff"],
[data-theme="dark"] [style*="background: #faf5ff"] { background: #1a0d2e !important; }
[data-theme="dark"] [style*="background:#e8f5e9"],
[data-theme="dark"] [style*="background: #e8f5e9"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background:#fff3e0"],
[data-theme="dark"] [style*="background: #fff3e0"] { background: var(--orange-soft) !important; }
[data-theme="dark"] [style*="background:#ffebee"],
[data-theme="dark"] [style*="background: #ffebee"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background:#e3f2fd"],
[data-theme="dark"] [style*="background: #e3f2fd"] { background: #0d1a2e !important; }

/* Data validation preview */
.validation-success {
    background: #d4edda;
    border: 2px solid #28a745;
    color: #155724;
}
.validation-error {
    background: #f8d7da;
    border: 2px solid #dc3545;
    color: #721c24;
}
[data-theme="dark"] .validation-success {
    background: var(--green-soft) !important;
    border-color: var(--green) !important;
    color: var(--green-text) !important;
}
[data-theme="dark"] .validation-success strong {
    color: var(--green-text) !important;
}
[data-theme="dark"] .validation-error {
    background: var(--red-soft) !important;
    border-color: var(--red) !important;
    color: var(--red-text) !important;
}
[data-theme="dark"] .validation-error strong {
    color: var(--red-text) !important;
}

/* --- Base --- */
body {
    font-family: var(--font-sans);
    background: var(--bg-app);
    min-height: 100vh;
    padding: var(--space-5);
    color: var(--text-primary);
    font-size: 14px;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Container --- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* --- Header --- */
header {
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: var(--space-5) var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

header h1 {
    font-size: 1.35em;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.subtitle {
    font-size: 0.85em;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    font-weight: 400;
}

/* --- Top navigation --- */
.top-nav-buttons {
    margin-top: var(--space-4) !important;
    gap: var(--space-2) !important;
    justify-content: center !important;
}

.top-nav-btn {
    background: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    padding: 8px 16px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.15s ease !important;
    letter-spacing: 0;
}

.top-nav-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Active nav state - applied via JS inline styles, so we override gradients */
.top-nav-btn[style*="gradient"] {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
    border-color: var(--brand-hover) !important;
}

.top-nav-btn-manage {
    background: var(--bg-surface-raised) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

.top-nav-btn-manage:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* --- Main content --- */
main {
    padding: var(--space-6);
}

main section {
    margin-bottom: var(--space-5);
}

/* --- Form sections --- */
.form-section {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: none;
}

.form-section h2 {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-4) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: var(--space-3) !important;
    letter-spacing: -0.01em;
}

.form-section h3 {
    font-size: 1em !important;
    font-weight: 650 !important;
    margin-bottom: var(--space-3) !important;
    color: var(--text-primary) !important;
}

.form-section h4 {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-section p,
.form-section small,
.form-section label {
    color: var(--text-secondary) !important;
}

/* Normalize inline-styled backgrounds */
.form-section [style*="background: #e8f5f3"],
.form-section [style*="background: #f3e5f5"],
.form-section [style*="background: #eef5ff"],
.form-section [style*="background: #fff3cd"],
.form-section [style*="background: #ffebee"],
.form-section [style*="background: #e3f2fd"] {
    background: var(--bg-surface-sunken) !important;
}

.form-section [style*="border-left"] {
    border-left-color: var(--brand) !important;
}

.form-section [style*="border: 2px solid"],
.form-section [style*="border: 1px solid"] {
    border-color: var(--border) !important;
}

.form-section > div[style*="background: #fff"],
.form-section > div[style*="background: #ffffff"],
.form-section > div[style*="background: white"] {
    border-radius: var(--radius-md) !important;
    box-shadow: none;
    border: 1px solid var(--border);
}

/* --- Form elements --- */
.form-group {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-section input,
.form-section select,
.form-section textarea {
    padding: 9px 12px;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9em;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
    outline: none;
    border-color: var(--brand) !important;
    box-shadow: var(--shadow-focus);
}

.form-group small {
    font-size: 0.8em;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.form-section .form-group {
    margin-bottom: 0;
}

/* --- Buttons --- */
button {
    padding: 8px 16px;
    font-size: 0.85em;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
    background: var(--bg-surface);
    color: var(--text-secondary);
    line-height: var(--leading-tight);
}

button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn-primary {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
    border: 1px solid var(--brand-hover) !important;
    margin-right: 0;
}

.btn-primary:hover {
    background: var(--brand-hover) !important;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

.btn-secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.btn-ai {
    background: var(--brand);
    color: var(--text-inverse);
    padding: 8px 16px;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;
    border: 1px solid var(--brand-hover);
}

.btn-ai:hover {
    background: var(--brand-hover);
    transform: none;
    box-shadow: none;
}

/* --- Sub-navigation --- */
.sub-nav {
    margin-bottom: var(--space-5);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: var(--space-4);
}

.sub-nav button {
    background: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    padding: 7px 14px !important;
    font-size: 0.83em !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.sub-nav button:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Active sub-nav state (set via inline gradient) */
.sub-nav button[style*="gradient"],
.sub-nav button[style*="opacity: 1"] {
    background: var(--brand) !important;
    color: var(--text-inverse) !important;
    border-color: var(--brand-hover) !important;
}

/* --- Cards/panels --- */
.panel {
    padding: var(--space-5);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.panel-accent {
    padding: var(--space-5);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand);
}

/* --- Status panels --- */
.status-info {
    padding: var(--space-3) var(--space-4);
    background: var(--yellow-soft);
    border-left: 3px solid var(--yellow);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.status-success {
    padding: var(--space-3) var(--space-4);
    background: var(--green-soft);
    border: 1px solid var(--green);
    border-radius: var(--radius-sm);
    color: var(--green-text);
    font-size: 0.9em;
}

.status-error {
    padding: var(--space-3) var(--space-4);
    background: var(--red-soft);
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
    color: var(--red-text);
    font-size: 0.9em;
}

/* --- Win/opportunity panels --- */
.wins-panel {
    background: var(--green-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid rgba(45, 164, 78, 0.2);
}

.wins-panel h4 {
    margin: 0 0 var(--space-2) 0;
    color: var(--green-text);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.opportunities-panel {
    background: var(--red-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid rgba(207, 34, 46, 0.15);
}

.opportunities-panel h4 {
    margin: 0 0 var(--space-2) 0;
    color: var(--red-text);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Results --- */
#resultsSection {
    padding: var(--space-6);
    background: var(--bg-surface);
}

.results-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.results-header h2 {
    color: var(--text-primary);
    font-size: 1.2em;
    font-weight: 700;
}

.button-group {
    display: flex;
    gap: var(--space-2);
}

.button-group button {
    margin: 0;
}

/* --- Coaching section --- */
.coaching-section {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-surface-sunken);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.coaching-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: 1em;
    font-weight: 650;
}

.coaching-script {
    background: var(--bg-surface);
    padding: var(--space-5);
    border-left: 3px solid var(--brand);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    font-size: 0.9em;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: var(--radius-sm);
}

/* --- History --- */
.history-employee {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--bg-surface-sunken);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
}

.history-employee h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-weight: 650;
}

.history-item {
    background: var(--bg-surface);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    color: var(--text-tertiary);
    font-size: 0.8em;
}

.history-preview {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-2);
    font-style: normal;
    font-size: 0.9em;
}

/* --- Metrics grid --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.target {
    font-size: 0.8em;
    color: var(--brand);
    font-weight: 600;
    margin-top: var(--space-1);
}

.empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-tertiary);
    font-style: normal;
}

/* --- Upload buttons --- */
.btn-upload-metrics,
.btn-upload-sentiment,
.btn-upload-verint,
.btn-upload-payroll,
.btn-upload-pto {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    padding: var(--space-4);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.15s ease;
    box-shadow: none;
}

.btn-upload-metrics { background: var(--green); }
.btn-upload-sentiment { background: #0891b2; }
.btn-upload-verint { background: #7c3aed; }
.btn-upload-payroll { background: #047857; }
.btn-upload-pto { background: var(--red); }

.btn-upload-metrics:hover,
.btn-upload-sentiment:hover,
.btn-upload-verint:hover,
.btn-upload-payroll:hover,
.btn-upload-pto:hover {
    transform: none;
    filter: brightness(0.92);
}

.upload-container {
    display: none;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--bg-surface-sunken);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

/* --- Debug panel --- */
.debug-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.debug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.debug-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.debug-card h3 {
    margin-top: 0;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    font-size: 0.9em;
    font-weight: 650;
}

.debug-pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-surface-sunken);
    border: 1px solid var(--border);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.8em;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    max-height: 320px;
    overflow: auto;
}

/* --- Modal --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 640px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border);
}

/* --- Layout utilities --- */
.flex-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.flex-row-center {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.flex-row-end {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.text-muted {
    color: var(--text-tertiary);
    font-size: 0.83em;
}

.text-muted-sm {
    color: var(--text-tertiary);
    font-size: 0.85em;
}

.label-bold {
    font-weight: 600;
    display: block;
    margin-bottom: var(--space-1);
    font-size: 0.85em;
    color: var(--text-secondary);
}

.input-standard {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 0.9em;
}

.resource-list {
    list-style: none;
    padding: 0;
}

.resource-list li {
    margin-bottom: var(--space-2);
}

.resource-link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-sunken);
    color: var(--brand);
    text-decoration: none;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--brand);
    transition: all 0.15s ease;
    font-size: 0.9em;
    font-weight: 500;
}

.resource-link:hover {
    background: var(--brand-soft);
}

.view-full {
    padding: 6px 12px;
    font-size: 0.85em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    body {
        padding: var(--space-2);
    }

    header h1 {
        font-size: 1.1em;
    }

    main {
        padding: var(--space-4);
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .grid-2col {
        grid-template-columns: 1fr;
    }

    .results-header {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }

    .button-group {
        flex-direction: column;
        width: 100%;
    }

    .button-group button {
        width: 100%;
    }
}

/* --- Toast animations --- */
@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(400px); opacity: 0; }
}

/* --- Override inline gradient styles from JS-rendered components --- */
/* This catches buttons, cards, and badges that use inline gradient backgrounds
   and normalizes them into the design system */
[style*="linear-gradient(135deg, #667eea"],
[style*="linear-gradient(135deg, #7c4dff"] {
    background: var(--brand) !important;
}

/* Normalize inline-styled card borders */
[style*="border: 1px solid #e0e7ff"],
[style*="border: 1px solid #e0e0e0"],
[style*="border: 1px solid #ddd"] {
    border-color: var(--border) !important;
}

/* Tame inline font colors from modules */
[style*="color: #1a237e"],
[style*="color: #4a148c"],
[style*="color: #37474f"],
[style*="color:#1a237e"],
[style*="color:#4a148c"],
[style*="color:#37474f"] {
    color: var(--text-primary) !important;
}

[style*="color: #666"],
[style*="color: #555"],
[style*="color: #475569"],
[style*="color: #64748b"],
[style*="color:#666"],
[style*="color:#555"],
[style*="color:#475569"],
[style*="color:#64748b"] {
    color: var(--text-secondary) !important;
}

/* Links in dark mode */
[data-theme="dark"] a[style*="color"] {
    color: #7ba4e8 !important;
}

[data-theme="dark"] [style*="color: #1565c0"],
[data-theme="dark"] [style*="color:#1565c0"],
[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #1a237e"],
[data-theme="dark"] [style*="color:#1a237e"],
[data-theme="dark"] [style*="color: #4a148c"],
[data-theme="dark"] [style*="color:#4a148c"],
[data-theme="dark"] [style*="color: #37474f"],
[data-theme="dark"] [style*="color:#37474f"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"] {
    color: var(--text-primary) !important;
}

/* ============================================
   MORNING PULSE - Dark Mode Overrides
   ============================================ */

/* Pulse cards: visible separation from dark page background */
[data-theme="dark"] .pulse-card,
[data-theme="dark"] .pulse-card[style] {
    background: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .pulse-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Summary bar: dark gradient instead of light */
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #f5f7fa"] {
    background: linear-gradient(135deg, #1a2744 0%, #243047 100%) !important;
    border: 1px solid var(--border-strong);
}

/* Summary bar "Team Pulse" title */
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] > [style*="color:#333"],
[data-theme="dark"] [style*="background: linear-gradient(135deg, #f5f7fa"] > [style*="color:#333"] {
    color: var(--text-primary) !important;
}

/* Summary bar status colors - brighter for dark bg */
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#e53935"] {
    color: var(--red-text) !important;
}
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#fb8c00"] {
    color: var(--yellow-text) !important;
}
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#2e7d32"] {
    color: var(--green-text) !important;
}
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#1e88e5"] {
    color: #7bb8f0 !important;
}
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#78909c"] {
    color: #90a4ae !important;
}

/* Summary bar associate count and upload note */
[data-theme="dark"] [style*="background:linear-gradient(135deg, #f5f7fa"] [style*="color:#666"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#1a237e"] {
    color: var(--brand-text) !important;
}

/* Controls bar (period type / period key selectors) */
[data-theme="dark"] [style*="background:#fff"][style*="border:1px solid #e0e7ff"],
[data-theme="dark"] [style*="background:#fff"][style*="border: 1px solid #e0e7ff"] {
    background: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
}

/* Control select dropdowns */
[data-theme="dark"] #pulsePeriodTypeSelect,
[data-theme="dark"] #pulsePeriodKeySelect {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Wins text: brighter green for readability */
[data-theme="dark"] .pulse-card [style*="color:#2e7d32"] {
    color: var(--green-text) !important;
}

/* Opportunities text: brighter red for readability */
[data-theme="dark"] .pulse-card [style*="color:#c62828"] {
    color: var(--red-text) !important;
}

/* Win/opp delta spans */
[data-theme="dark"] .pulse-card [style*="color:#1b5e20"] {
    color: var(--green) !important;
}
[data-theme="dark"] .pulse-card [style*="color:#b71c1c"] {
    color: var(--red) !important;
}

/* "No metrics" / "All on track" muted text */
[data-theme="dark"] .pulse-card [style*="color:#999"] {
    color: var(--text-tertiary) !important;
}

/* Target values in opportunity items */
[data-theme="dark"] .pulse-card span[style*="color:#999"] {
    color: var(--text-secondary) !important;
}

/* Biggest improvement callout */
[data-theme="dark"] .pulse-card [style*="background:#e8f5e9"][style*="border-left:3px solid #4caf50"] {
    background: var(--green-soft) !important;
    border-left-color: var(--green) !important;
    color: var(--green-text) !important;
}
[data-theme="dark"] .pulse-card [style*="background:#e8f5e9"][style*="border-left:3px solid #4caf50"] strong {
    color: var(--green-text) !important;
}

/* Focus section (needs attention - orange) */
[data-theme="dark"] .pulse-card [style*="background:#fff3e0"][style*="border-left:3px solid #ff9800"] {
    background: var(--orange-soft) !important;
    border-left-color: var(--orange) !important;
    color: var(--yellow-text) !important;
}
[data-theme="dark"] .pulse-card [style*="background:#fff3e0"][style*="border-left:3px solid #ff9800"] strong {
    color: var(--yellow-text) !important;
}

/* Focus section (on track - green) */
[data-theme="dark"] .pulse-card [style*="background:#e8f5e9"][style*="border-left:3px solid #4caf50"][style*="font-size:0.85em"] {
    background: var(--green-soft) !important;
    border-left-color: var(--green) !important;
    color: var(--green-text) !important;
}

/* Badge pills - dark-safe background variants */
[data-theme="dark"] .pulse-card [style*="background:#eceff1"],
[data-theme="dark"] .pulse-card [style*="background: #eceff1"] {
    background: #263040 !important;
}

/* Check-in / High-Five / Review buttons - slightly brighter in dark mode */
[data-theme="dark"] .pulse-checkin-btn,
[data-theme="dark"] .pulse-highfive-btn,
[data-theme="dark"] .pulse-review-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .pulse-checkin-btn:hover {
    filter: brightness(1.15);
}
[data-theme="dark"] .pulse-highfive-btn:hover {
    filter: brightness(1.15);
}
[data-theme="dark"] .pulse-review-btn:hover {
    filter: brightness(1.15);
}

/* Pulse modal - dark background */
[data-theme="dark"] #pulseCheckinModal > div[style] {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-strong);
}
[data-theme="dark"] #pulseCheckinModal h3 {
    color: var(--brand-text) !important;
}
[data-theme="dark"] #pulseCheckinModal textarea {
    background: var(--bg-surface-sunken) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] #pulseCheckinModal #pulseCheckinClose {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #pulseCheckinModal #pulseCheckinRegenerate {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Morning Pulse header text */
[data-theme="dark"] h3[style*="color:#1a237e"] {
    color: var(--brand-text) !important;
}

/* Trend arrows in dark mode */
[data-theme="dark"] .pulse-card [style*="color:#2e7d32"][title="Improving"] {
    color: var(--green) !important;
}
[data-theme="dark"] .pulse-card [style*="color:#e53935"][title="Declining"] {
    color: var(--red) !important;
}
[data-theme="dark"] .pulse-card [style*="color:#9e9e9e"][title="Stable"] {
    color: var(--text-tertiary) !important;
}

/* ============================================
   COMPREHENSIVE DARK MODE — ALL MODULES
   Covers every inline color pattern found in JS
   ============================================ */

/* --- Light backgrounds → dark surface --- */
[data-theme="dark"] [style*="background: #c8f7c5"],
[data-theme="dark"] [style*="background:#c8f7c5"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background: #dcfce7"],
[data-theme="dark"] [style*="background:#dcfce7"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background: #eef8f0"],
[data-theme="dark"] [style*="background:#eef8f0"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background: #f1f8e9"],
[data-theme="dark"] [style*="background:#f1f8e9"] { background: var(--green-soft) !important; }
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fee2e2"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background: #fff0f0"],
[data-theme="dark"] [style*="background:#fff0f0"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background: #fff5f5"],
[data-theme="dark"] [style*="background:#fff5f5"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background: #fff7f7"],
[data-theme="dark"] [style*="background:#fff7f7"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background: #fff3cd"],
[data-theme="dark"] [style*="background:#fff3cd"] { background: var(--yellow-soft) !important; }
[data-theme="dark"] [style*="background: #f0de87"],
[data-theme="dark"] [style*="background:#f0de87"] { background: var(--yellow-soft) !important; }
[data-theme="dark"] [style*="background: #fff8f2"],
[data-theme="dark"] [style*="background:#fff8f2"] { background: var(--orange-soft) !important; }
[data-theme="dark"] [style*="background: #ede7f6"],
[data-theme="dark"] [style*="background:#ede7f6"] { background: #1f1530 !important; }
[data-theme="dark"] [style*="background: #f3e5f5"],
[data-theme="dark"] [style*="background:#f3e5f5"] { background: #1f1530 !important; }
[data-theme="dark"] [style*="background: #f4effc"],
[data-theme="dark"] [style*="background:#f4effc"] { background: #1f1530 !important; }
[data-theme="dark"] [style*="background: #f5f3ff"],
[data-theme="dark"] [style*="background:#f5f3ff"] { background: #1f1530 !important; }
[data-theme="dark"] [style*="background: #faf7ff"],
[data-theme="dark"] [style*="background:#faf7ff"] { background: #1f1530 !important; }
[data-theme="dark"] [style*="background: #e1f5fe"],
[data-theme="dark"] [style*="background:#e1f5fe"] { background: #0d1a2e !important; }
[data-theme="dark"] [style*="background: #f4f9ff"],
[data-theme="dark"] [style*="background:#f4f9ff"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #f5f9ff"],
[data-theme="dark"] [style*="background:#f5f9ff"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #f8fbff"],
[data-theme="dark"] [style*="background:#f8fbff"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #f7f9fc"],
[data-theme="dark"] [style*="background:#f7f9fc"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #f9f9f9"],
[data-theme="dark"] [style*="background:#f9f9f9"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #f0f0f0"],
[data-theme="dark"] [style*="background:#f0f0f0"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #eceff1"],
[data-theme="dark"] [style*="background:#eceff1"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #eee"],
[data-theme="dark"] [style*="background:#eee"] { background: var(--bg-surface-raised) !important; }
[data-theme="dark"] [style*="background: #ddd"],
[data-theme="dark"] [style*="background:#ddd"] { background: var(--bg-active) !important; }
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"] { background: var(--bg-surface) !important; }

/* --- Dark text colors → light for dark mode --- */
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #607d8b"],
[data-theme="dark"] [style*="color:#607d8b"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"] { color: var(--text-tertiary) !important; }
[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#888"] { color: var(--text-tertiary) !important; }
[data-theme="dark"] [style*="color: #90a4ae"],
[data-theme="dark"] [style*="color:#90a4ae"] { color: var(--text-tertiary) !important; }
[data-theme="dark"] [style*="color: #455a64"],
[data-theme="dark"] [style*="color:#455a64"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #37474f"],
[data-theme="dark"] [style*="color:#37474f"] { color: var(--text-primary) !important; }

/* --- Status/semantic colors → bright dark-mode variants --- */
[data-theme="dark"] [style*="color: #2e7d32"],
[data-theme="dark"] [style*="color:#2e7d32"] { color: var(--green) !important; }
[data-theme="dark"] [style*="color: #1b5e20"],
[data-theme="dark"] [style*="color:#1b5e20"] { color: var(--green) !important; }
[data-theme="dark"] [style*="color: #16a34a"],
[data-theme="dark"] [style*="color:#16a34a"] { color: var(--green) !important; }
[data-theme="dark"] [style*="color: #155724"],
[data-theme="dark"] [style*="color:#155724"] { color: var(--green-text) !important; }
[data-theme="dark"] [style*="color: #00695c"],
[data-theme="dark"] [style*="color:#00695c"] { color: #5eead4 !important; }
[data-theme="dark"] [style*="color: #c62828"],
[data-theme="dark"] [style*="color:#c62828"] { color: var(--red) !important; }
[data-theme="dark"] [style*="color: #b71c1c"],
[data-theme="dark"] [style*="color:#b71c1c"] { color: var(--red) !important; }
[data-theme="dark"] [style*="color: #dc2626"],
[data-theme="dark"] [style*="color:#dc2626"] { color: var(--red) !important; }
[data-theme="dark"] [style*="color: #721c24"],
[data-theme="dark"] [style*="color:#721c24"] { color: var(--red-text) !important; }
[data-theme="dark"] [style*="color: #e65100"],
[data-theme="dark"] [style*="color:#e65100"] { color: var(--orange) !important; }
[data-theme="dark"] [style*="color: #f57c00"],
[data-theme="dark"] [style*="color:#f57c00"] { color: var(--orange) !important; }
[data-theme="dark"] [style*="color: #6a1b9a"],
[data-theme="dark"] [style*="color:#6a1b9a"] { color: #c084fc !important; }
[data-theme="dark"] [style*="color: #9c27b0"],
[data-theme="dark"] [style*="color:#9c27b0"] { color: #c084fc !important; }
[data-theme="dark"] [style*="color: #4a148c"],
[data-theme="dark"] [style*="color:#4a148c"] { color: #c084fc !important; }
[data-theme="dark"] [style*="color: #1976d2"],
[data-theme="dark"] [style*="color:#1976d2"] { color: var(--brand) !important; }

/* --- Colored action buttons keep colors but darken for contrast --- */
[data-theme="dark"] button[style*="background: #28a745"],
[data-theme="dark"] button[style*="background:#28a745"] { background: #22863a !important; }
[data-theme="dark"] button[style*="background: #dc3545"],
[data-theme="dark"] button[style*="background:#dc3545"] { background: #b91c1c !important; }
[data-theme="dark"] button[style*="background: #6c757d"],
[data-theme="dark"] button[style*="background:#6c757d"] { background: #4b5563 !important; }
[data-theme="dark"] button[style*="background: #607d8b"],
[data-theme="dark"] button[style*="background:#607d8b"] { background: #475569 !important; }
[data-theme="dark"] button[style*="background: #999"],
[data-theme="dark"] button[style*="background:#999"] { background: #4b5563 !important; color: var(--text-primary) !important; }

/* --- Status badges preserve meaning but use dark variants --- */
[data-theme="dark"] span[style*="background: #2e7d32"],
[data-theme="dark"] span[style*="background:#2e7d32"] { background: #166534 !important; }
[data-theme="dark"] span[style*="background: #c62828"],
[data-theme="dark"] span[style*="background:#c62828"] { background: #991b1b !important; }
[data-theme="dark"] span[style*="background: #f57c00"],
[data-theme="dark"] span[style*="background:#f57c00"] { background: #c2410c !important; }
[data-theme="dark"] span[style*="background: #ef6c00"],
[data-theme="dark"] span[style*="background:#ef6c00"] { background: #c2410c !important; }

/* --- Form sections with light backgrounds --- */
[data-theme="dark"] .form-section,
[data-theme="dark"] .form-section[style] {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* --- Border-left accent bars --- */
[data-theme="dark"] [style*="border-left: 4px solid #2196F3"],
[data-theme="dark"] [style*="border-left:4px solid #2196F3"] { border-left-color: var(--brand) !important; }
[data-theme="dark"] [style*="border-left: 4px solid #4CAF50"],
[data-theme="dark"] [style*="border-left:4px solid #4CAF50"],
[data-theme="dark"] [style*="border-left: 4px solid #4caf50"],
[data-theme="dark"] [style*="border-left:4px solid #4caf50"] { border-left-color: var(--green) !important; }
[data-theme="dark"] [style*="border-left: 4px solid #ff9800"],
[data-theme="dark"] [style*="border-left:4px solid #ff9800"] { border-left-color: var(--orange) !important; }
[data-theme="dark"] [style*="border-left: 3px solid #2196F3"],
[data-theme="dark"] [style*="border-left:3px solid #2196F3"] { border-left-color: var(--brand) !important; }

/* --- Rankings supervisor row colors for dark mode --- */
[data-theme="dark"] .ranking-row[style*="background: #e8eaf6"],
[data-theme="dark"] .ranking-row[style*="background:#e8eaf6"] { background: #0d2137 !important; }
[data-theme="dark"] .ranking-row[style*="background: #fce4ec"],
[data-theme="dark"] .ranking-row[style*="background:#fce4ec"] { background: #2a1015 !important; }
[data-theme="dark"] .ranking-row[style*="background: #f3e5f5"],
[data-theme="dark"] .ranking-row[style*="background:#f3e5f5"] { background: #1f0f24 !important; }
[data-theme="dark"] .ranking-row[style*="background: #fff3e0"],
[data-theme="dark"] .ranking-row[style*="background:#fff3e0"] { background: #2a1d08 !important; }
[data-theme="dark"] .ranking-row[style*="background: #e8f5e9"],
[data-theme="dark"] .ranking-row[style*="background:#e8f5e9"] { background: #0d2010 !important; }
[data-theme="dark"] .ranking-row[style*="background: #e0f7fa"],
[data-theme="dark"] .ranking-row[style*="background:#e0f7fa"] { background: #0a1f22 !important; }
[data-theme="dark"] .ranking-row[style*="background: #fff9c4"],
[data-theme="dark"] .ranking-row[style*="background:#fff9c4"] { background: #2a2508 !important; }

/* --- Copilot/prompt textareas --- */
[data-theme="dark"] textarea[style*="background: #f8f9fa"],
[data-theme="dark"] textarea[style*="background:#f8f9fa"],
[data-theme="dark"] textarea[style*="background: white"],
[data-theme="dark"] textarea[style*="background:white"] {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
}

/* --- Debug panel --- */
[data-theme="dark"] #debugSection pre,
[data-theme="dark"] #debugSection code {
    background: var(--bg-surface-sunken) !important;
    color: var(--text-primary) !important;
}

/* --- Modal/dialog overlays --- */
[data-theme="dark"] .devcoach-dialog-backdrop > div,
[data-theme="dark"] .modal-overlay > div {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* --- Trend charts area --- */
[data-theme="dark"] #trendChartContainer canvas {
    filter: brightness(0.9);
}

/* --- Score cells in on/off tracker --- */
[data-theme="dark"] td[style*="background: #c8f7c5"],
[data-theme="dark"] td[style*="background:#c8f7c5"] { background: var(--green-soft) !important; color: var(--green-text) !important; }
[data-theme="dark"] td[style*="background: #dcfce7"],
[data-theme="dark"] td[style*="background:#dcfce7"] { background: var(--green-soft) !important; color: var(--green-text) !important; }
[data-theme="dark"] td[style*="background: #fee2e2"],
[data-theme="dark"] td[style*="background:#fee2e2"] { background: var(--red-soft) !important; color: var(--red-text) !important; }
[data-theme="dark"] td[style*="background: #fff8e1"],
[data-theme="dark"] td[style*="background:#fff8e1"] { background: var(--yellow-soft) !important; color: var(--yellow-text) !important; }
[data-theme="dark"] td[style*="background: #f0de87"],
[data-theme="dark"] td[style*="background:#f0de87"] { background: var(--yellow-soft) !important; color: var(--yellow-text) !important; }

/* --- Reliability module status colors --- */
[data-theme="dark"] [style*="background: #4CAF50"],
[data-theme="dark"] [style*="background:#4CAF50"],
[data-theme="dark"] [style*="background: #4caf50"],
[data-theme="dark"] [style*="background:#4caf50"] { background: #166534 !important; }
[data-theme="dark"] [style*="background: #ff1a1a"],
[data-theme="dark"] [style*="background:#ff1a1a"] { background: #991b1b !important; }
[data-theme="dark"] [style*="background: #00b050"],
[data-theme="dark"] [style*="background:#00b050"] { background: #166534 !important; }

/* --- Toast notifications --- */
[data-theme="dark"] #toastNotification {
    background: var(--bg-surface-raised) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
}

/* --- Matchup module cards --- */
[data-theme="dark"] [style*="background: #7c4dff"],
[data-theme="dark"] [style*="background:#7c4dff"] { background: #5b21b6 !important; }
[data-theme="dark"] [style*="background: #9c27b0"],
[data-theme="dark"] [style*="background:#9c27b0"] { background: #7e22ce !important; }

/* --- Ensure all section headers readable --- */
[data-theme="dark"] [style*="border-left: 4px solid"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* --- Additional text colors found by full audit --- */
[data-theme="dark"] [style*="color: #546e7a"],
[data-theme="dark"] [style*="color:#546e7a"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #2f4f87"],
[data-theme="dark"] [style*="color:#2f4f87"] { color: var(--brand-text) !important; }
[data-theme="dark"] [style*="color: #3f5168"],
[data-theme="dark"] [style*="color:#3f5168"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color: #8a5300"],
[data-theme="dark"] [style*="color:#8a5300"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #856404"],
[data-theme="dark"] [style*="color:#856404"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #842029"],
[data-theme="dark"] [style*="color:#842029"] { color: var(--red-text) !important; }
[data-theme="dark"] [style*="color: #8d6e00"],
[data-theme="dark"] [style*="color:#8d6e00"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #8d1f1f"],
[data-theme="dark"] [style*="color:#8d1f1f"] { color: var(--red-text) !important; }
[data-theme="dark"] [style*="color: #5e35b1"],
[data-theme="dark"] [style*="color:#5e35b1"] { color: var(--brand-text) !important; }
[data-theme="dark"] [style*="color: #0d47a1"],
[data-theme="dark"] [style*="color:#0d47a1"] { color: var(--brand) !important; }
[data-theme="dark"] [style*="color: #8a6d1f"],
[data-theme="dark"] [style*="color:#8a6d1f"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #8b4513"],
[data-theme="dark"] [style*="color:#8b4513"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#1e40af"] { color: var(--brand) !important; }
[data-theme="dark"] [style*="color: #b8860b"],
[data-theme="dark"] [style*="color:#b8860b"] { color: var(--yellow-text) !important; }
[data-theme="dark"] [style*="color: #f57f17"],
[data-theme="dark"] [style*="color:#f57f17"] { color: var(--yellow) !important; }
[data-theme="dark"] [style*="color: #e53935"],
[data-theme="dark"] [style*="color:#e53935"] { color: var(--red) !important; }
[data-theme="dark"] [style*="color: #ff9800"],
[data-theme="dark"] [style*="color:#ff9800"] { color: var(--orange) !important; }
[data-theme="dark"] [style*="color: #2196F3"],
[data-theme="dark"] [style*="color:#2196F3"] { color: var(--brand) !important; }
[data-theme="dark"] [style*="color: #9c27b0"],
[data-theme="dark"] [style*="color:#9c27b0"] { color: #c084fc !important; }

/* --- Semantic backgrounds the nuclear override incorrectly flattens --- */
[data-theme="dark"] [style*="background: #fff3cd"],
[data-theme="dark"] [style*="background:#fff3cd"] { background: var(--yellow-soft) !important; }
[data-theme="dark"] [style*="background: #f8d7da"],
[data-theme="dark"] [style*="background:#f8d7da"] { background: var(--red-soft) !important; }
[data-theme="dark"] [style*="background: #d4edda"],
[data-theme="dark"] [style*="background:#d4edda"] { background: var(--green-soft) !important; }

/* --- Borders not caught by nuclear (starts with #a, #b, #4, #6, #8) --- */
[data-theme="dark"] [style*="border"][style*="#6a1b9a"] { border-color: var(--brand-muted) !important; }
[data-theme="dark"] [style*="border"][style*="#b2dfdb"] { border-color: var(--border) !important; }
[data-theme="dark"] [style*="border"][style*="#bbf7d0"] { border-color: var(--green) !important; }
[data-theme="dark"] [style*="border"][style*="#fecaca"] { border-color: var(--red) !important; }
[data-theme="dark"] [style*="border"][style*="#a5d6a7"] { border-color: var(--green) !important; }
[data-theme="dark"] [style*="border"][style*="#81c784"] { border-color: var(--green) !important; }
[data-theme="dark"] [style*="border"][style*="#ffe0b2"] { border-color: var(--orange) !important; }
[data-theme="dark"] [style*="border"][style*="#ffe08a"] { border-color: var(--yellow) !important; }
[data-theme="dark"] [style*="border"][style*="#4caf50"] { border-color: var(--green) !important; }
[data-theme="dark"] [style*="border"][style*="#c62828"] { border-color: var(--red) !important; }
[data-theme="dark"] [style*="border"][style*="#2196F3"] { border-color: var(--brand) !important; }
[data-theme="dark"] [style*="border"][style*="#28a745"] { border-color: var(--green) !important; }
[data-theme="dark"] [style*="border"][style*="#1976D2"] { border-color: var(--brand) !important; }

/* --- Scrollbars for dark mode --- */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-surface-sunken); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5e7a; }