/* ============================================================
   PLATINUM DARK MODE — Warm Layered Dark Theme
   Final production build — merged from 5 design passes

   Design system:
   - Warm dark surfaces with brown undertones (#0e0d0c → #1c1b19)
   - Borders via rgba(255,255,255,0.06-0.12) — never solid dark colors
   - Accent glow effects (blue box-shadow at low opacity)
   - Glassmorphism on overlays (backdrop-filter: blur)
   - Warm off-white text (#e8e4df) — never pure white
   - Hover = subtle bg lightening, not color changes
   - 200ms transitions on bg, color, border, box-shadow
   ============================================================ */


/* ============================================================
   1. TRANSITION LAYER
   Applied briefly during toggle to prevent flash
   ============================================================ */
html.dark-mode-transition,
html.dark-mode-transition *,
html.dark-mode-transition *::before,
html.dark-mode-transition *::after {
    transition: background-color 300ms ease,
                color 300ms ease,
                border-color 300ms ease,
                box-shadow 300ms ease,
                opacity 200ms ease !important;
}


/* ============================================================
   2. AUTO-DETECTION
   Respect OS-level dark mode preference
   ============================================================ */
@media (prefers-color-scheme: dark) {
    html:not(.light-mode-forced) {
        color-scheme: dark;
    }
}


/* ============================================================
   3. CSS CUSTOM PROPERTIES
   All dark-mode tokens in one place
   ============================================================ */
html.dark-mode {
    /* --- Surface layers (warm with subtle cool undertone for depth) --- */
    --dm-bg-base:        #0e0d0c;
    --dm-bg-primary:     #151413;
    --dm-bg-card:        #1c1b19;
    --dm-bg-elevated:    #232220;
    --dm-bg-surface:     #2a2926;
    --dm-bg-hover:       #31302c;
    --dm-bg-active:      #383733;
    --dm-bg-input:       #181716;
    --dm-bg-input-focus: #1e1d1b;

    /* --- Borders: low-opacity white, not solid dark --- */
    --dm-border-subtle:  rgba(255, 255, 255, 0.06);
    --dm-border-default: rgba(255, 255, 255, 0.09);
    --dm-border-strong:  rgba(255, 255, 255, 0.14);
    --dm-border-focus:   rgba(255, 255, 255, 0.18);

    /* --- Text: warm off-whites --- */
    --dm-text-primary:   #e8e4df;
    --dm-text-secondary: #b0a898;
    --dm-text-tertiary:  #8d8477;
    --dm-text-muted:     #6b6358;

    /* --- Accent: derived from brand-blue (overridden by accent system if active) --- */
    --dm-accent:         var(--brand-blue, #7ba3c4);
    --dm-accent-hover:   var(--accessible-blue, #93b8d6);
    --dm-accent-muted:   color-mix(in srgb, var(--brand-blue) 15%, transparent);
    --dm-accent-glow:    0 0 20px color-mix(in srgb, var(--brand-blue) 12%, transparent),
                         0 0 40px color-mix(in srgb, var(--brand-blue) 4%, transparent);
    --dm-accent-ring:    0 0 0 2px color-mix(in srgb, var(--brand-blue) 25%, transparent);

    /* --- Accent purple (manager features) --- */
    --dm-purple:         #9b7abf;
    --dm-purple-hover:   #8466a8;

    /* --- Status colors (derived from brand vars so accent system propagates) --- */
    --dm-success:        var(--accessible-blue, #4da8d4);
    --dm-success-bg:     rgba(77, 168, 212, 0.10);
    --dm-danger:         var(--brand-red, #c06666);
    --dm-danger-bg:      rgba(192, 102, 102, 0.10);
    --dm-warning:        #ad8b46;
    --dm-warning-bg:     rgba(173, 139, 70, 0.10);

    /* --- Brand colors controlled by _applyAccentColors() in JS (inline style wins) --- */
    /* These are fallbacks ONLY for reps with no custom accent colors saved */
    --brand-blue:        #7ba3c4;
    --accessible-blue:   #93b8d6;
    --dark-blue:         #5d8bab;
    --brand-red:         #c06666;
    --accessible-red:    #b35656;
    --dough-50:          #0c0b0b;
    --bg-primary:        #151413;
    --dough-100:         #151413;
    --dough-200:         #1c1b19;
    --dough-300:         rgba(255, 255, 255, 0.09);
    --dough-400:         rgba(255, 255, 255, 0.14);
    --dough-700:         rgba(255, 255, 255, 0.22);
    --text-primary:      #e8e4df;
    --text-secondary:    #b0a898;
    --text-tertiary:     #8d8477;
    --status-success:    var(--accessible-blue, #4da8d4);
    --status-danger:     var(--brand-red, #c06666);
    --status-warning:    #ad8b46;
    --status-info:       var(--brand-blue, #7ba3c4);
    --status-danger-bg:      #3b1111;
    --status-danger-text:    #fca5a5;
    --status-danger-border:  #7f1d1d;
    --status-success-bg:     #052e16;
    --status-success-border: #166534;
    --brand-blue-bg:         #0c2d48;
    --bg-input:              var(--dough-100);

    color-scheme: dark;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}


/* ============================================================
   4. GLOBAL FOUNDATIONS
   ============================================================ */
html.dark-mode body {
    background: var(--dm-bg-base);
    color: var(--dm-text-secondary);
}

html.dark-mode ::selection {
    background: color-mix(in srgb, var(--brand-blue) 30%, transparent);
    color: var(--dm-text-primary);
}

html.dark-mode *:focus-visible {
    outline-color: var(--dm-accent);
}

/* Links — ensure visibility + underline on dark */
html.dark-mode a { color: var(--dm-accent); transition: color 200ms ease; }
html.dark-mode a:hover { color: var(--dm-accent-hover); }

/* Horizontal rules */
html.dark-mode hr {
    border-color: var(--dm-border-default);
}

/* Scrollbars — thin, translucent */
html.dark-mode ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html.dark-mode ::-webkit-scrollbar-track {
    background: transparent;
}
html.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    transition: background 200ms ease;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* All select elements — prevent browser dark-mode hatching */
html.dark-mode select {
    color-scheme: dark;
    background-color: var(--dm-bg-input, #181716);
}
html.dark-mode select option,
html.dark-mode select optgroup {
    background-color: var(--dm-bg-card, #1c1b19);
    color: var(--dm-text-primary, #e8e4df);
}
html.dark-mode select optgroup {
    font-weight: 700;
    color: var(--dm-text-secondary, #b0a898);
}

/* Override hardcoded #0090e2 blues that don't use CSS variables */
html.dark-mode .toast.info { background: var(--dm-accent) !important; }
html.dark-mode .pf-spinner { color: var(--dm-accent); }
html.dark-mode .pf-spinner::before { border-color: var(--dm-border-default); border-top-color: var(--dm-accent); }
html.dark-mode .pf-overlay-spinner::before { border-color: var(--dm-border-default); border-top-color: var(--dm-accent); }
/* #fr-submit-btn, #transfer-go — header bar buttons, keep solid accent */
html.dark-mode #fr-submit-btn { background: var(--dm-accent) !important; }
html.dark-mode #transfer-go { background: var(--dm-accent) !important; }
/* #cs-add-btn, #ci-tc-add-btn — moved to translucent block below (line ~811) */
html.dark-mode #ci-phone-tree-edit { color: var(--dm-accent) !important; }
html.dark-mode .my-stats-range-btn.active { background: var(--dm-accent); border-color: var(--dm-accent); }

/* Contact rank badges — dark mode */
html.dark-mode .tc-badge-primary { background: var(--dm-accent); color: var(--dm-text-primary); }
html.dark-mode .tc-badge-secondary { background: var(--dm-text-muted); color: var(--dm-text-primary); }
html.dark-mode .tc-badge-approval { background: #8b6b3d; color: var(--dm-text-primary); }
html.dark-mode .tc-badge-additional { background: var(--dm-border-strong); color: var(--dm-text-primary); }

/* Script content — DISC bird colors muted for dark bg */
html.dark-mode .script-content .sc-eagle  { color: #6b9fd4; }
html.dark-mode .script-content .sc-parrot { color: #d4b060; }
html.dark-mode .script-content .sc-dove   { color: #c97070; }
html.dark-mode .script-content .sc-owl    { color: #6dab5a; }
html.dark-mode .script-content .var-placeholder {
    background: var(--dough-300);
    border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent);
}
html.dark-mode .script-content .sc-highlight {
    background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
}

/* Disabled states — universal */
html.dark-mode button:disabled,
html.dark-mode input:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Images & maps — slight brightness reduction */
html.dark-mode img:not([src*=".svg"]) {
    filter: brightness(0.92);
}
html.dark-mode .store-map-container iframe,
html.dark-mode .store-map-container img {
    filter: brightness(0.85) contrast(1.1);
}


/* ============================================================
   5. HEADER
   Elevated surface with subtle bottom shadow
   ============================================================ */
html.dark-mode .header {
    background: linear-gradient(180deg, var(--dm-bg-card) 0%, var(--dm-bg-primary) 100%);
    box-shadow: 0 1px 0 var(--dm-border-subtle),
                0 4px 16px rgba(0, 0, 0, 0.4);
}
html.dark-mode .header-grade-filter,
html.dark-mode .header-team-filter,
html.dark-mode .header-search-field {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
}
html.dark-mode .header-grade-filter option,
html.dark-mode .header-team-filter option,
html.dark-mode .header-search-field option {
    background: var(--dm-bg-elevated);
    color: var(--dm-text-primary);
}
html.dark-mode .header-team-filter option.filter-group-header {
    background: var(--dm-bg-surface);
    color: var(--dm-accent);
}
html.dark-mode .header-search .search-input {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
}
html.dark-mode .header-search .search-input::placeholder {
    color: var(--dm-text-secondary);
}
html.dark-mode .header-search .search-input:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: color-mix(in srgb, var(--brand-blue) 50%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue) 20%, transparent);
}
html.dark-mode .header-search .search-clear {
    color: var(--dm-text-muted);
}
/* Header nav buttons — visible boundaries against dark header */
html.dark-mode .header-btn {
    color: var(--dm-text-secondary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .header-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--dm-text-primary);
    opacity: 1;
}
html.dark-mode .header-link {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}
html.dark-mode .header-link:hover {
    background: rgba(255, 255, 255, 0.18);
}
html.dark-mode .header-btn--calendar {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
html.dark-mode .header-btn--calendar:hover {
    background: rgba(255, 255, 255, 0.18);
}
html.dark-mode .header-btn--create-org {
    color: var(--dm-text-primary);
}


/* ============================================================
   6. SEARCH RESULTS — Glassmorphism dropdown
   ============================================================ */
html.dark-mode .search-results {
    background: rgba(33, 30, 25, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--dm-border-default);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
html.dark-mode .search-result {
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .search-result:hover {
    background: rgba(255, 255, 255, 0.05);
}
html.dark-mode .search-result:focus {
    outline-color: var(--dm-accent);
    background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
}
html.dark-mode .search-result-name {
    color: var(--dm-text-primary);
}
html.dark-mode .search-result-detail,
html.dark-mode .search-result-last-contacted {
    color: var(--dm-text-muted);
}
html.dark-mode .search-no-results,
html.dark-mode .search-loading {
    color: var(--dm-text-muted);
}
html.dark-mode .search-footer {
    border-top-color: var(--dm-border-subtle);
    color: var(--dm-text-tertiary);
}
html.dark-mode .search-footer a {
    color: var(--dm-accent);
}
html.dark-mode .search-footer a:hover {
    color: var(--dm-accent-hover);
}


/* ============================================================
   7. COLUMN 1 — Contact Info Panel
   ============================================================ */
html.dark-mode .contact-info-panel {
    background: var(--dm-bg-primary);
    border-right-color: var(--dm-border-default);
}

/* Contact cards */
html.dark-mode .ci-contact-card {
    background: var(--dm-bg-card);
    transition: box-shadow 200ms ease, transform 200ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45),
                0 0 0 1px var(--dm-border-subtle);
}
html.dark-mode .ci-contact-card:hover:not(.ci-contact-card--active) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--dm-border-default);
    transform: translateY(-1px);
}
html.dark-mode .ci-contact-card--active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
                0 0 0 2px var(--dm-accent),
                0 0 16px color-mix(in srgb, var(--brand-blue) 8%, transparent);
}
html.dark-mode .ci-contact-card-header:hover {
    background: var(--dm-accent-muted);
}
html.dark-mode .ci-contact-card:not(.ci-contact-card--active) .ci-contact-card-header:hover {
    background: var(--dm-bg-hover);
}

/* Org section */
html.dark-mode .ci-org-section {
    background: var(--dm-bg-primary);
}

/* Team contact person cards */
html.dark-mode .ci-tc-person-card {
    border-color: var(--dm-border-default);
    background: var(--dm-bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .ci-tc-person-card:hover {
    border-color: var(--dm-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
html.dark-mode .ci-tc-person-card.tc-active {
    border-color: var(--dm-accent);
}
html.dark-mode .ci-tc-person-card.tc-collapsed:hover {
    background: var(--dm-bg-card);
}

/* Names, labels, values */
html.dark-mode .ci-name { color: var(--dm-text-primary); }
html.dark-mode .ci-title-field {
    color: var(--dm-text-secondary);
    border-color: var(--dm-border-default);
    background: var(--dm-bg-input);
}
html.dark-mode .ci-org-prominent {
    color: var(--dm-text-primary);
    border-color: var(--dm-border-default);
    background: var(--dm-bg-input);
}
html.dark-mode .ci-org-zip {
    background: rgba(255, 255, 255, 0.12);
    color: var(--dm-text-tertiary);
}
html.dark-mode .ci-section-label { color: var(--dm-text-tertiary); }
html.dark-mode .ci-label { color: var(--dm-text-tertiary); }
html.dark-mode .ci-value { color: var(--dm-text-primary); }
html.dark-mode .ci-value a { color: var(--dm-accent); }
html.dark-mode .ci-meta-label { color: var(--dm-text-tertiary); }
html.dark-mode .ci-meta-value { color: var(--dm-text-primary); }

/* Icon buttons */
html.dark-mode .ci-icon-btn {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .ci-icon-btn:hover {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .ci-icon-btn:active {
    background: var(--dm-accent-hover);
}

/* Tags and badges */
html.dark-mode .ci-tag { background: var(--dm-accent); }
html.dark-mode .ci-actions {
    border-top-color: var(--dm-border-default);
    background: var(--dm-bg-primary);
}
html.dark-mode .ci-divider { background: var(--dm-border-subtle); }
html.dark-mode .ci-ext { border-color: var(--dm-border-default); }
html.dark-mode .contact-empty { color: var(--dm-text-muted); }
html.dark-mode .queue-prompt-title { color: var(--dm-text-primary); }
html.dark-mode .queue-prompt-msg { color: var(--dm-text-tertiary); }
html.dark-mode .queue-prompt-msg.no-leads { color: var(--dm-danger); }

/* Editable fields */
html.dark-mode .ci-edit {
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode select.ci-edit,
html.dark-mode select.ci-edit option,
html.dark-mode textarea.ci-edit,
html.dark-mode select.tc-field,
html.dark-mode select.tc-field option,
html.dark-mode textarea.tc-field,
html.dark-mode select.tc-rank-select,
html.dark-mode select.tc-rank-select option {
    color: var(--dm-text-primary);
    background: var(--dm-bg-card);
}
html.dark-mode .ci-edit:hover {
    border-color: var(--dm-border-default);
    background: var(--dm-bg-input);
}
html.dark-mode .ci-edit:focus {
    border-color: var(--dm-accent);
    background: var(--dm-bg-input-focus);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .ci-edit.dirty {
    border-color: var(--dm-accent);
    background: var(--dm-accent-muted);
}
html.dark-mode .ci-edit::placeholder { color: var(--dm-text-muted); }
html.dark-mode .tc-field { color: var(--dm-text-primary); }
html.dark-mode .tc-field::placeholder { color: var(--dm-text-muted); }
html.dark-mode .ci-edit-name {
    color: var(--dm-text-primary);
    border-color: var(--dm-border-default);
    background: var(--dm-bg-input);
}

/* Contact search inputs */
html.dark-mode #cs-name,
html.dark-mode #cs-phone,
html.dark-mode #cs-email {
    background: var(--dm-bg-input);
    color: var(--dm-text-primary);
    border-color: var(--dm-border-default);
}
html.dark-mode #cs-name:focus,
html.dark-mode #cs-phone:focus,
html.dark-mode #cs-email:focus {
    background: var(--dm-bg-input-focus);
    box-shadow: inset 0 0 0 1px var(--dm-accent);
}
html.dark-mode #cs-name::placeholder,
html.dark-mode #cs-phone::placeholder {
    color: var(--dm-text-muted);
}

/* Lead status */
html.dark-mode .ci-lead-status {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .ci-lead-status:focus {
    outline-color: var(--dm-accent);
}

/* Save / Dial — accent glow */
html.dark-mode .ci-save-btn {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .ci-save-btn:hover { background: var(--dm-accent-hover); }
html.dark-mode .ci-dial-btn {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .ci-dial-btn:hover { background: var(--dm-accent-hover); }

/* SMS / Email / DNC icon buttons */
html.dark-mode .ci-msg-btn {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .ci-msg-btn:hover {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .ci-email-btn {
    border-color: var(--dm-accent-hover);
    color: var(--dm-accent-hover);
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .ci-email-btn:hover {
    background: var(--dm-accent-hover);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .ci-email-btn.connected {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
}
html.dark-mode .ci-dnc-btn {
    border-color: var(--dm-danger);
    color: var(--dm-danger);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .ci-dnc-btn:hover {
    background: var(--dm-danger);
    color: var(--dm-text-primary);
}

/* DNC / Routing warnings */
html.dark-mode .dnc-warning {
    background: var(--dm-danger-bg);
    border-color: var(--dm-danger);
    color: var(--dm-danger);
    box-shadow: 0 2px 8px rgba(192, 102, 102, 0.06);
}
html.dark-mode .routing-blocked {
    background: var(--dm-danger-bg);
    border-color: var(--dm-danger);
    color: var(--dm-danger);
}


/* ============================================================
   8. RESIZE HANDLES
   ============================================================ */
html.dark-mode .resize-handle {
    background: var(--dm-border-subtle);
    transition: background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .resize-handle:hover,
html.dark-mode .resize-handle.dragging {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}


/* ============================================================
   9. COLUMN 2 — Tabbed Data Panel
   ============================================================ */
html.dark-mode .tabbed-data-panel {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
}
html.dark-mode .td-empty { color: var(--dm-text-muted); }

/* Tabs */
html.dark-mode .contact-tabs { border-bottom-color: var(--dm-border-default); }
html.dark-mode .contact-tab { color: var(--dm-text-tertiary); transition: color 200ms ease, border-color 200ms ease, background 200ms ease, border-bottom-width 100ms ease; }
html.dark-mode .contact-tab:hover {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border-strong);
}
html.dark-mode .contact-tab.active {
    color: var(--dm-accent);
    border-bottom: 3px solid var(--dm-accent);
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
}

/* Field inputs */
html.dark-mode .field-label { color: var(--dm-text-tertiary); }
html.dark-mode .field-input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .field-input:focus {
    border-color: var(--dm-accent);
    background: var(--dm-bg-input-focus);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .field-input.dirty {
    border-color: var(--dm-accent);
    background: var(--dm-accent-muted);
}
html.dark-mode .field-readonly { color: var(--dm-text-secondary); }
html.dark-mode .field-readonly a { color: var(--dm-accent); }

/* Save bar */
html.dark-mode .save-bar {
    background: var(--dm-bg-primary);
    border-top-color: var(--dm-border-default);
}
html.dark-mode .save-contact-btn {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .save-contact-btn:hover { background: var(--dm-accent-hover); }
html.dark-mode .save-contact-btn.saving::after {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--dm-text-primary);
}
html.dark-mode .save-status.success { color: var(--dm-success); }
html.dark-mode .save-status.error { color: var(--dm-danger); }

/* Add contact buttons */
html.dark-mode #cs-add-btn,
html.dark-mode #ci-tc-add-btn {
    background: var(--dm-accent) !important;
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode #cs-add-btn:hover,
html.dark-mode #ci-tc-add-btn:hover {
    background: var(--dm-accent-hover) !important;
}


/* ============================================================
   10. COLUMN 3 — Script Panel
   ============================================================ */
html.dark-mode .script-panel {
    background: var(--dm-bg-card);
    border-left: 2px solid color-mix(in srgb, var(--brand-blue) 12%, transparent);
    box-shadow: -1px 0 12px rgba(0, 0, 0, 0.25);
}

/* Toolbar — app-bar treatment: elevated, distinct bottom edge */
html.dark-mode .toolbar {
    background: var(--dm-bg-elevated);
    border-bottom: 1px solid var(--dm-border-strong);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Script selects — prominent controls */
html.dark-mode .script-select {
    background-color: var(--dm-bg-surface);
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8e4df' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    border-color: var(--dm-border-strong);
    color: var(--dm-text-primary);
    color-scheme: dark;
    font-weight: 500;
}
html.dark-mode .script-select:hover {
    border-color: var(--dm-border-focus);
    background-color: var(--dm-bg-hover);
}
html.dark-mode .script-select:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
    border-color: var(--dm-accent);
}
html.dark-mode .toolbar-gear {
    border-color: var(--dm-border-strong);
    color: var(--dm-text-secondary);
    transition: color 200ms ease, border-color 200ms ease;
}
html.dark-mode .toolbar-gear:hover {
    color: var(--dm-text-primary);
    border-color: var(--dm-border-focus);
}
html.dark-mode .breadcrumbs { color: var(--dm-text-secondary); }
html.dark-mode .breadcrumb-item.current { color: var(--dm-text-primary); }
html.dark-mode .breadcrumb-sep { color: var(--dm-text-muted); }

/* Content area — elevated to match panel */
html.dark-mode .content-area { background: var(--dm-bg-card); }

/* Script widgets */
html.dark-mode .sw-widget { color: var(--dm-text-primary); }
html.dark-mode .sw-widget a { color: var(--dm-accent); }
html.dark-mode .sw-loading { color: var(--dm-text-muted); }
html.dark-mode .sw-loading::after {
    border-color: var(--dm-border-default);
    border-top-color: var(--dm-accent);
}
html.dark-mode .sw-error {
    color: var(--dm-danger);
    border-color: var(--dm-danger);
    background: var(--dm-danger-bg);
}
html.dark-mode .sw-table th {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border-default);
}
html.dark-mode .sw-table td {
    border-bottom-color: var(--dm-border-subtle);
}
/* Table striping */
html.dark-mode .sw-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}
html.dark-mode .sw-text-red { color: var(--dm-danger); }
html.dark-mode .sw-badge-green { color: var(--dm-success); }
html.dark-mode .sw-badge-yellow { color: var(--dm-warning); }
html.dark-mode .sw-badge-red { color: var(--dm-danger); }
html.dark-mode .sw-row-red td { color: var(--dm-danger); }
html.dark-mode .sw-row-blue td { color: var(--dm-accent); }
html.dark-mode .sw-row-grey td { color: var(--dm-text-tertiary); }
html.dark-mode .sw-footnote { color: var(--dm-text-muted); }
html.dark-mode .sw-hotlist-header { color: var(--dm-text-primary); }


/* ============================================================
   11. RESPONSE PILLS — Accent glow on hover
   ============================================================ */
html.dark-mode .responses-area {
    background: var(--dm-bg-card);
    border-top: 1px solid var(--dm-border-strong);
}
html.dark-mode .response-pill {
    background: color-mix(in srgb, var(--brand-blue) 18%, transparent);
    color: var(--brand-blue);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, transparent);
    transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    box-shadow: none;
}
html.dark-mode .response-pill:hover {
    background: color-mix(in srgb, var(--brand-blue) 30%, transparent);
    border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--brand-blue) 12%, transparent);
}
html.dark-mode .pill-call {
    background: rgba(232, 228, 223, 0.12);
    color: var(--dm-text-primary);
    border: 1px solid rgba(232, 228, 223, 0.25);
}
html.dark-mode .pill-call:hover {
    background: rgba(232, 228, 223, 0.22);
    border-color: rgba(232, 228, 223, 0.40);
}
html.dark-mode .pill-ko {
    background: transparent;
    color: var(--dm-text-tertiary);
    border-color: var(--dm-text-muted);
}
html.dark-mode .pill-ko:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--dm-text-tertiary); }
html.dark-mode .pill-agreement {
    background: color-mix(in srgb, var(--brand-red) 18%, transparent);
    color: var(--brand-red);
    border: 1px solid color-mix(in srgb, var(--brand-red) 30%, transparent);
}
html.dark-mode .pill-agreement:hover {
    background: color-mix(in srgb, var(--brand-red) 30%, transparent);
    border-color: color-mix(in srgb, var(--brand-red) 50%, transparent);
}
/* All blue action buttons → translucent in dark mode (uses CSS vars so accent colors work) */
html.dark-mode #cs-add-btn,
html.dark-mode #ci-tc-add-btn,
html.dark-mode #cs-create-new,
html.dark-mode #ci-tc-create-new,
html.dark-mode #conv-send-all-btn,
html.dark-mode #conv-modal-send,
html.dark-mode #conv-modal-email-send,
html.dark-mode #group-send-btn,
html.dark-mode #co-venue-copy-btn,
html.dark-mode #wi-lookup-btn,
html.dark-mode .msg-compose-send,
html.dark-mode .bb-save-btn,
html.dark-mode .btn-save,
html.dark-mode .org-images-edit-modal .editor-save-btn,
html.dark-mode .co-confirmation-msg-actions .co-action-primary,
html.dark-mode .co-edit-btn,
html.dark-mode .result-tree-all.active,
html.dark-mode .rc-opt {
    background: color-mix(in srgb, var(--brand-blue) 18%, transparent) !important;
    color: var(--brand-blue) !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, transparent) !important;
}
html.dark-mode #cs-add-btn:hover,
html.dark-mode #ci-tc-add-btn:hover,
html.dark-mode #cs-create-new:hover,
html.dark-mode #ci-tc-create-new:hover,
html.dark-mode #conv-send-all-btn:hover,
html.dark-mode #conv-modal-send:hover,
html.dark-mode #conv-modal-email-send:hover,
html.dark-mode #group-send-btn:hover,
html.dark-mode #co-venue-copy-btn:hover,
html.dark-mode #wi-lookup-btn:hover,
html.dark-mode .msg-compose-send:hover,
html.dark-mode .bb-save-btn:hover,
html.dark-mode .btn-save:hover,
html.dark-mode .org-images-edit-modal .editor-save-btn:hover,
html.dark-mode .co-confirmation-msg-actions .co-action-primary:hover,
html.dark-mode .co-edit-btn:hover,
html.dark-mode .rc-opt:hover {
    background: color-mix(in srgb, var(--brand-blue) 30%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent) !important;
}

/* Solid red buttons → translucent red in dark mode */
html.dark-mode .header-btn--create-org,
html.dark-mode .result-tree-no.active,
html.dark-mode .rep-ui-dismiss:hover,
html.dark-mode #dnc-modal-confirm {
    background: color-mix(in srgb, var(--brand-red) 18%, transparent) !important;
    color: var(--brand-red) !important;
    border: 1px solid color-mix(in srgb, var(--brand-red) 30%, transparent) !important;
}
html.dark-mode .header-btn--create-org:hover,
html.dark-mode .rep-ui-dismiss:hover,
html.dark-mode #dnc-modal-confirm:hover {
    background: color-mix(in srgb, var(--brand-red) 30%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-red) 50%, transparent) !important;
}

/* Green active state → translucent green */
html.dark-mode .result-tree-yes.active {
    background: color-mix(in srgb, var(--brand-green, #2d8a4e) 18%, transparent) !important;
    color: var(--brand-green, #6fcf8a) !important;
    border: 1px solid color-mix(in srgb, var(--brand-green, #2d8a4e) 30%, transparent) !important;
}

html.dark-mode .pill-vm {
    background: rgba(125, 117, 104, 0.20);
    color: var(--dm-text-tertiary);
    border: 1px solid rgba(125, 117, 104, 0.30);
}
html.dark-mode .pill-vm:hover {
    background: rgba(125, 117, 104, 0.35);
    border-color: rgba(125, 117, 104, 0.50);
}
html.dark-mode .pill-vr {
    background: color-mix(in srgb, var(--brand-red) 10%, transparent);
    color: var(--brand-red);
    border-color: color-mix(in srgb, var(--brand-red) 30%, transparent);
    box-shadow: none;
}
html.dark-mode .pill-vr:hover { background: color-mix(in srgb, var(--brand-red) 20%, transparent); border-color: color-mix(in srgb, var(--brand-red) 45%, transparent); }
html.dark-mode .start-over-btn {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
    transition: background 200ms ease;
}
html.dark-mode .start-over-btn:hover { background: var(--dm-accent-muted); }
html.dark-mode .end-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
}
html.dark-mode .end-card h3 { color: var(--dm-text-primary); }
html.dark-mode .end-card p { color: var(--dm-text-tertiary); }


/* ============================================================
   12. COLUMN 4 — Right Sidebar (Notes + Result Codes)
   ============================================================ */
html.dark-mode .right-sidebar {
    background: var(--dm-bg-primary);
    border-left-color: var(--dm-border-default);
}
html.dark-mode .rs-header {
    color: var(--dm-text-tertiary);
    letter-spacing: 0.03em;
}

/* Notes tabs */
html.dark-mode .notes-tabs { border-bottom-color: var(--dm-border-default); }
html.dark-mode .notes-tab {
    color: var(--dm-text-tertiary);
    transition: color 200ms ease, border-bottom-color 200ms ease, background 200ms ease, border-bottom-width 100ms ease;
}
html.dark-mode .notes-tab:hover {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border-strong);
}
html.dark-mode .notes-tab.active {
    color: var(--dm-accent);
    border-bottom: 3px solid var(--dm-accent);
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
}
html.dark-mode .notes-textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-strong);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
html.dark-mode .notes-textarea::placeholder {
    color: var(--dm-text-muted);
}
html.dark-mode .notes-textarea:focus {
    background: var(--dm-bg-input-focus);
    border-color: var(--dm-accent);
    outline: none;
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .notes-textarea.notes-new { border-top-color: var(--dm-accent); }
html.dark-mode .notes-history {
    background: var(--dm-bg-primary);
    border-color: var(--dm-border-subtle);
    color: var(--dm-text-secondary);
}
html.dark-mode .rs-textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-strong);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
html.dark-mode .rs-textarea::placeholder {
    color: var(--dm-text-muted);
}
html.dark-mode .rs-textarea:focus {
    background: var(--dm-bg-input-focus);
    border-color: var(--dm-accent);
    outline: none;
    box-shadow: var(--dm-accent-ring);
}

/* Result codes */
html.dark-mode .rs-resize-handle { background: var(--dm-border-subtle); }
html.dark-mode .rs-resize-handle:hover { background: var(--dm-accent); }
html.dark-mode .rs-resize-grip { background: rgba(255, 255, 255, 0.15); }
html.dark-mode .rs-resize-handle:hover .rs-resize-grip { background: rgba(255, 255, 255, 0.6); }
html.dark-mode .result-btn {
    background: color-mix(in srgb, var(--brand-red) 20%, transparent);
    color: var(--brand-red);
    border: 1px solid color-mix(in srgb, var(--brand-red) 30%, transparent);
    box-shadow: none;
    transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
    html.dark-mode .result-btn:hover {
        background: color-mix(in srgb, var(--brand-red) 35%, transparent);
        border-color: color-mix(in srgb, var(--brand-red) 55%, transparent);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-red) 15%, transparent);
    }
}
html.dark-mode .result-btn--active {
    background: color-mix(in srgb, var(--brand-blue) 22%, transparent) !important;
    color: var(--brand-blue) !important;
    border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-blue) 30%, transparent) !important;
}
html.dark-mode .result-btn--dnc {
    background: color-mix(in srgb, var(--brand-red) 30%, transparent);
    border-color: color-mix(in srgb, var(--brand-red) 45%, transparent);
}
html.dark-mode .result-btn--dnc:hover {
    background: transparent;
    color: var(--brand-red);
    border-color: color-mix(in srgb, var(--brand-red) 55%, transparent);
}
html.dark-mode .result-more-btn {
    border-color: var(--dm-border-default);
    color: var(--dm-text-tertiary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .result-more-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--dm-text-primary);
}
html.dark-mode .result-all-panel {
    background: var(--dm-bg-elevated);
    border-color: var(--dm-border-strong);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
html.dark-mode .result-all-panel .result-group-label { color: var(--dm-text-muted); }
html.dark-mode .result-all-panel .result-row { color: var(--dm-text-primary); }
html.dark-mode .result-all-panel .result-row:hover { background: rgba(255, 255, 255, 0.04); }
html.dark-mode .result-all-panel .result-row .result-desc { color: var(--dm-text-muted); }
html.dark-mode .result-defaults-btn {
    border-color: var(--dm-border-default);
    color: var(--dm-text-tertiary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .result-defaults-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--dm-text-primary);
}

/* Decision tree filter */
html.dark-mode .result-tree { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .result-tree-q { color: var(--dm-text-secondary); }
html.dark-mode .result-tree-btn {
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .result-tree-btn:hover { background: rgba(255, 255, 255, 0.05); }
html.dark-mode .result-tree-btn.active { color: var(--dm-text-primary); }

/* Result code search */
html.dark-mode .result-search-wrap { background: var(--dm-bg-primary); }
html.dark-mode .result-search-input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}


/* ============================================================
   13. BOTTOM BAR
   ============================================================ */
html.dark-mode .bottom-bar {
    background: var(--dm-bg-card);
    border-top: 1px solid var(--dm-border-strong);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}
html.dark-mode .bb-drag-handle {
    background: var(--dm-bg-elevated);
    border-top-color: var(--dm-border-subtle);
}
html.dark-mode .bb-drag-handle::after { background: var(--dm-border-strong); }
html.dark-mode .bb-drag-handle:hover,
html.dark-mode .bb-drag-handle.dragging { background: var(--dm-accent); box-shadow: var(--dm-accent-glow); }
html.dark-mode .bb-drag-handle:hover::after,
html.dark-mode .bb-drag-handle.dragging::after { background: rgba(255, 255, 255, 0.6); }
html.dark-mode .bb-header {
    background: linear-gradient(180deg, var(--dm-bg-elevated) 0%, var(--dm-bg-primary) 100%);
    border-bottom: 1px solid var(--dm-border-subtle);
}
html.dark-mode .bb-tab {
    color: var(--dm-text-tertiary);
    padding: 0.4rem 0.7rem;
    border-radius: 4px 4px 0 0;
    transition: color 200ms ease, border-bottom-color 200ms ease, background 200ms ease;
}
html.dark-mode .bb-tab:hover {
    color: var(--dm-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--dm-border-strong);
}
html.dark-mode .bb-tab.active {
    color: var(--dm-accent);
    border-bottom: 3px solid var(--dm-accent);
    background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
}
html.dark-mode .bb-toggle { color: var(--dm-text-muted); }

/* Bottom bar tables — with striping */
html.dark-mode .bb-table th {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-default);
    color: var(--dm-text-muted);
}
html.dark-mode .bb-table td {
    border-bottom-color: var(--dm-border-subtle);
    color: var(--dm-text-secondary);
}
html.dark-mode .bb-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* Skeleton loader */
html.dark-mode .skeleton-bar {
    background: linear-gradient(90deg, var(--dm-bg-card) 25%, var(--dm-bg-surface) 50%, var(--dm-bg-card) 75%);
    background-size: 200% 100%;
}


/* ============================================================
   14. MODALS — Glassmorphism + warm depth
   ============================================================ */
html.dark-mode .modal-overlay {
    background: rgba(14, 13, 12, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.dark-mode .modal {
    background: var(--dm-bg-surface);
    box-shadow: 0 0 0 1px var(--dm-border-default),
                0 16px 64px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(0, 0, 0, 0.3);
}
html.dark-mode .modal-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dm-accent) 20%, var(--dm-bg-elevated)),
        color-mix(in srgb, var(--dm-accent) 12%, var(--dm-bg-surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--dm-accent) 15%, transparent);
}
html.dark-mode .modal-body { background: var(--dm-bg-elevated); }
html.dark-mode .modal-body label { color: var(--dm-text-muted); }
html.dark-mode .modal-body input,
html.dark-mode .modal-body select,
html.dark-mode .modal-body textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    color-scheme: dark;
}
html.dark-mode .modal-body input:focus,
html.dark-mode .modal-body select:focus,
html.dark-mode .modal-body textarea:focus {
    border-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .modal-body input::placeholder,
html.dark-mode .modal-body textarea::placeholder {
    color: var(--dm-text-muted);
}
html.dark-mode .modal-footer {
    background: var(--dm-bg-card);
    border-top-color: var(--dm-border-subtle);
}
html.dark-mode .btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dm-text-primary);
}
html.dark-mode .btn-save {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
    transition: background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .btn-save:hover { background: var(--dm-accent-hover); }
html.dark-mode .btn-reset {
    border-color: var(--dm-text-muted);
    color: var(--dm-text-tertiary);
}
html.dark-mode .btn-reset:hover { background: rgba(255, 255, 255, 0.06); }

/* Mapping editor */
html.dark-mode .mapping-row input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .mapping-row input:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .mapping-delete { color: var(--dm-danger); }
html.dark-mode .mapping-add-btn {
    background: var(--dm-accent);
    transition: background 200ms ease;
}
html.dark-mode .mapping-add-btn:hover { background: var(--dm-accent-hover); }
html.dark-mode .mapping-help { color: var(--dm-text-muted); }
html.dark-mode .mapping-header {
    color: var(--dm-text-muted);
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .mapping-source-select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}


/* ============================================================
   15. RESULT CODE MODAL
   ============================================================ */
html.dark-mode .rc-modal-overlay {
    background: rgba(14, 13, 12, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.dark-mode .rc-modal {
    background: var(--dm-bg-surface);
    box-shadow: 0 0 0 1px var(--dm-border-default),
                0 16px 64px rgba(14, 13, 12, 0.6);
}
html.dark-mode .rc-modal-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--dm-accent) 20%, var(--dm-bg-surface)),
        color-mix(in srgb, var(--dm-accent) 12%, var(--dm-bg-surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--dm-accent) 15%, transparent);
}
html.dark-mode .rc-modal-code-badge { background: rgba(255, 255, 255, 0.12); }
html.dark-mode .rc-modal-body label { color: var(--dm-text-muted); }
html.dark-mode .rc-modal-body input[type="date"],
html.dark-mode .rc-modal-body input[type="time"],
html.dark-mode .rc-modal-body select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    color-scheme: dark;
}
html.dark-mode .rc-modal-body input:focus,
html.dark-mode .rc-modal-body select:focus,
html.dark-mode .rc-modal-body textarea:focus {
    border-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .rc-modal-notes {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .rc-modal-desc {
    background: color-mix(in srgb, var(--dm-accent) 6%, transparent);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-accent);
}
html.dark-mode .rc-modal-cb-section { border-top-color: var(--dm-border-subtle); }
html.dark-mode .rc-modal-cb-section .rc-modal-cb-label { color: var(--dm-accent); }
html.dark-mode .rc-modal-actions {
    background: var(--dm-bg-card);
    border-top-color: var(--dm-border-subtle);
}
html.dark-mode .rc-modal-save {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
    transition: background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .rc-modal-save:hover:not(:disabled) { background: var(--dm-accent-hover); }
html.dark-mode .rc-modal-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-secondary);
    transition: background 200ms ease, color 200ms ease;
}
html.dark-mode .rc-modal-cancel:hover { background: rgba(255, 255, 255, 0.1); }
html.dark-mode .rc-existing-notes {
    background: var(--dm-bg-card);
    color: var(--dm-text-secondary);
}


/* ============================================================
   16. EMAIL COMPOSE
   ============================================================ */
html.dark-mode .email-field label { color: var(--dm-text-muted); }
html.dark-mode .email-field input,
html.dark-mode .email-field select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .email-field input:focus,
html.dark-mode .email-field select:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .email-body-editor {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .email-body-editor:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .email-attach-btn {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
    transition: background 200ms ease;
}
html.dark-mode .email-attach-btn:hover { background: rgba(255, 255, 255, 0.06); }
html.dark-mode .email-chip {
    background: var(--dm-bg-surface);
    color: var(--dm-text-secondary);
}
html.dark-mode .email-chip-x { color: var(--dm-danger); }
html.dark-mode .email-attach-dropdown {
    background: color-mix(in srgb, var(--dm-bg-elevated) 95%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: var(--dm-border-default);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
html.dark-mode .email-attach-dropdown-item { color: var(--dm-text-primary); }
html.dark-mode .email-attach-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
html.dark-mode .email-connect-prompt p { color: var(--dm-text-secondary); }
html.dark-mode .email-connect-btn {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
    transition: background 200ms ease, box-shadow 200ms ease;
}
html.dark-mode .email-connect-btn:hover { background: var(--dm-accent-hover); }
html.dark-mode .email-error { color: var(--dm-danger); }
html.dark-mode .email-sending { opacity: 0.5; }


/* ============================================================
   17. TOAST — Glassmorphism
   ============================================================ */
html.dark-mode .toast {
    background: rgba(40, 36, 32, 0.9);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--dm-border-default);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: var(--dm-text-primary);
}
html.dark-mode .toast.success {
    background: color-mix(in srgb, var(--dm-success) 12%, rgba(40, 36, 32, 0.9));
    border-color: color-mix(in srgb, var(--dm-success) 25%, transparent);
    color: var(--dm-success);
}
html.dark-mode .toast.error {
    background: color-mix(in srgb, var(--dm-danger) 12%, rgba(40, 36, 32, 0.9));
    border-color: color-mix(in srgb, var(--dm-danger) 25%, transparent);
    color: var(--dm-danger);
}
html.dark-mode .toast.info {
    background: color-mix(in srgb, var(--dm-accent) 12%, rgba(40, 36, 32, 0.9));
    border-color: color-mix(in srgb, var(--dm-accent) 25%, transparent);
    color: var(--dm-accent);
}
html.dark-mode .undo-toast-btn {
    background: var(--dm-bg-surface);
    color: var(--dm-accent);
    border-color: var(--dm-accent);
}


/* ============================================================
   18. MESSAGING / SMS
   ============================================================ */
html.dark-mode .messaging-header {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-default);
}
html.dark-mode .messaging-header .msg-contact-name { color: var(--dm-text-primary); }
html.dark-mode .messaging-header .msg-contact-number { color: var(--dm-text-tertiary); }
html.dark-mode .msg-back-btn {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}
html.dark-mode .msg-back-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-thread-empty { color: var(--dm-text-muted); }
html.dark-mode .msg-bubble.sent { background: var(--dm-accent); }
html.dark-mode .msg-bubble.received {
    background: var(--dm-bg-surface);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-bubble.received .msg-bubble-meta { color: var(--dm-text-muted); }
html.dark-mode .msg-compose-bar {
    background: var(--dm-bg-elevated);
    border-top-color: var(--dm-border-default);
}
html.dark-mode .msg-compose-bar select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-compose-row textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-compose-row textarea:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .msg-compose-send {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .msg-compose-send:hover { background: var(--dm-accent-hover); }
html.dark-mode .msg-compose-extras .char-info { color: var(--dm-text-muted); }
html.dark-mode .msg-compose-extras .attach-btn {
    border-color: var(--dm-border-default);
    color: var(--dm-text-tertiary);
}
html.dark-mode .msg-compose-extras .attach-btn:hover { background: rgba(255, 255, 255, 0.04); }
html.dark-mode .msg-compose {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
}
html.dark-mode .msg-compose select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-compose textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .msg-compose .char-count { color: var(--dm-text-muted); }
html.dark-mode .msg-send-btn { background: var(--dm-accent); }
html.dark-mode .msg-send-btn:hover { background: var(--dm-accent-hover); }
html.dark-mode .msg-cancel-btn {
    background: transparent;
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}
html.dark-mode .msg-media-row button {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}

/* Comms list */
html.dark-mode .comms-list .comms-item { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .comms-list .comms-item:hover { background: rgba(255, 255, 255, 0.03); }
html.dark-mode .comms-list .comms-item.selected {
    background: var(--dm-accent-muted);
    border-left-color: var(--dm-accent);
}
html.dark-mode .comms-item-type.call { color: var(--dm-accent); }
html.dark-mode .comms-item-type.sms,
html.dark-mode .comms-item-type.mms { color: var(--dm-accent-hover); }
html.dark-mode .comms-item-type.email { color: var(--dm-accent-hover); }
html.dark-mode .comms-item-preview { color: var(--dm-text-secondary); }
html.dark-mode .comms-item-time,
html.dark-mode .comms-item-meta { color: var(--dm-text-muted); }
html.dark-mode .comms-action-btn--sms {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
}
html.dark-mode .comms-action-btn--sms:hover {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
}
html.dark-mode .comms-action-btn--email {
    border-color: var(--dm-accent-hover);
    color: var(--dm-accent-hover);
}
html.dark-mode .comms-action-btn--email:hover {
    background: var(--dm-accent-hover);
    color: var(--dm-text-primary);
}

/* Text compose modal */
html.dark-mode .text-compose-field label { color: var(--dm-text-muted); }
html.dark-mode .text-compose-field textarea,
html.dark-mode .text-compose-field select {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .text-compose-meta { color: var(--dm-text-muted); }


/* ============================================================
   19. MANAGER DASHBOARD
   ============================================================ */
html.dark-mode .mgr-dashboard {
    background: var(--dm-bg-primary);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
}
html.dark-mode .mgr-dash-header {
    background: linear-gradient(135deg, var(--dm-bg-elevated) 0%, var(--dm-bg-card) 100%);
    border-bottom: 1px solid var(--dm-border-default);
}
html.dark-mode .mgr-dash-summary { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .mgr-pill {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-primary);
}
html.dark-mode .mgr-pill--green {
    background: rgba(34, 197, 94, 0.12);
    color: var(--dm-success);
}
html.dark-mode .mgr-pill--red {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dm-danger);
}
html.dark-mode .mgr-dash-section { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .mgr-dash-section > b { color: var(--dm-purple); }
html.dark-mode .mgr-empty { color: var(--dm-text-muted); }
html.dark-mode .mgr-rep-row { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .mgr-rep-name { color: var(--dm-text-primary); }
html.dark-mode .mgr-rep-state { color: var(--dm-text-tertiary); }
html.dark-mode .mgr-rep-team { color: var(--dm-text-muted); }
html.dark-mode .mgr-stats-hdr {
    border-bottom-color: var(--dm-border-default);
    color: var(--dm-text-muted);
}
html.dark-mode .mgr-stats-row { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .mgr-rc-bar { background: rgba(255, 255, 255, 0.06); }
html.dark-mode .mgr-rc-fill { background: var(--dm-accent); }
html.dark-mode .mgr-rc-cnt { color: var(--dm-text-tertiary); }
html.dark-mode .mgr-call-row { border-bottom-color: var(--dm-border-subtle); }
html.dark-mode .mgr-call-row .mgr-call-agent { color: var(--dm-text-primary); }
html.dark-mode .mgr-call-row .mgr-call-to { color: var(--dm-text-tertiary); }
html.dark-mode .mgr-call-listen {
    background: var(--dm-purple);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
}
html.dark-mode .mgr-call-listen:hover { background: var(--dm-purple-hover); }


/* ============================================================
   20. MY STATS
   ============================================================ */
html.dark-mode .my-stats-panel {
    background: var(--dm-bg-primary);
    box-shadow: -4px 4px 32px rgba(0, 0, 0, 0.5);
}
html.dark-mode .my-stats-header {
    background: linear-gradient(135deg, var(--dm-bg-elevated) 0%, var(--dm-bg-card) 100%);
    border-bottom: 1px solid var(--dm-border-default);
}
html.dark-mode .my-stats-card {
    background: var(--dm-bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                0 0 0 1px var(--dm-border-subtle),
                var(--dm-accent-glow);
}
html.dark-mode .my-stats-val { color: var(--dm-accent); }
html.dark-mode .my-stats-label { color: var(--dm-text-tertiary); }
html.dark-mode .my-stats-range-btn {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}
html.dark-mode .my-stats-range-btn.active {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}


/* ============================================================
   21. HAMBURGER MENU
   ============================================================ */
html.dark-mode .menu-panel {
    background: var(--dm-bg-primary);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6);
}
html.dark-mode .menu-header {
    background: linear-gradient(135deg, var(--dm-bg-surface) 0%, var(--dm-bg-elevated) 100%);
    border-bottom: 1px solid var(--dm-border-default);
}
html.dark-mode .menu-section-label { color: var(--dm-accent); }
html.dark-mode .menu-link {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .menu-link:hover { background: rgba(255, 255, 255, 0.04); }


/* ============================================================
   22. QUEUE BAR
   ============================================================ */
html.dark-mode .queue-bar {
    background: linear-gradient(180deg, var(--dm-bg-elevated) 0%, var(--dm-bg-card) 100%);
    box-shadow: 0 1px 0 var(--dm-border-subtle);
}
html.dark-mode .queue-bar-label { color: var(--dm-text-primary); }
html.dark-mode .queue-bar-stat { color: var(--dm-text-secondary); opacity: 1; }
html.dark-mode .queue-bar-stat b { color: var(--dm-text-primary); }
html.dark-mode .queue-bar-divider { color: var(--dm-text-muted); }
html.dark-mode .queue-next-btn {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .queue-next-btn:hover {
    background: var(--dm-accent-hover);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--dm-accent) 30%, transparent);
}
html.dark-mode .queue-exit-btn {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--dm-text-tertiary);
}
html.dark-mode .queue-exit-btn:hover {
    border-color: var(--dm-text-secondary);
    color: var(--dm-text-primary);
}
html.dark-mode .queue-link { color: var(--dm-accent-hover); }


/* ============================================================
   23. APPOINTMENT BAR
   ============================================================ */
html.dark-mode .appt-bar {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-subtle);
    color: var(--dm-text-primary);
}
html.dark-mode .appt-bar-item { background: rgba(255, 255, 255, 0.06); }
html.dark-mode .appt-bar-dismiss { color: var(--dm-text-muted); }
html.dark-mode .appt-bar-dismiss:hover { color: var(--dm-text-primary); }


/* ============================================================
   24. LOGIN GATE
   ============================================================ */
html.dark-mode .login-gate h2 { color: var(--dm-text-primary); }
html.dark-mode .login-gate input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .login-gate input:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .login-gate button {
    background: var(--dm-danger);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}
html.dark-mode .login-gate button:hover { background: var(--dm-danger); filter: brightness(1.1); }
html.dark-mode .login-gate .remember-row { color: var(--dm-text-secondary); }
html.dark-mode .login-gate .login-error { color: var(--dm-danger); }


/* ============================================================
   25. LOADING / SPINNERS
   ============================================================ */
html.dark-mode .loading { color: var(--dm-text-muted); }
html.dark-mode .loading-spinner {
    border-color: var(--dm-border-default);
    border-top-color: var(--dm-accent);
}


/* ============================================================
   26. WARNINGS & BLOCKED DATES
   ============================================================ */
html.dark-mode .call-warning {
    background: var(--dm-warning-bg);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--dm-warning);
}
html.dark-mode .blocked-dates-header {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .blocked-dates-header .district-label {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-tertiary);
}
html.dark-mode .blocked-date-row {
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .blocked-date-row:hover { background: rgba(255, 255, 255, 0.02); }
html.dark-mode .blocked-date-row.bd-active { background: rgba(239, 68, 68, 0.06); }
html.dark-mode .bd-org { color: var(--dm-text-primary); }
html.dark-mode .bd-dates { color: var(--dm-text-secondary); }
html.dark-mode .bd-status.past {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-muted);
}
html.dark-mode .bd-status.active {
    background: rgba(239, 68, 68, 0.12);
    color: var(--dm-danger);
}
html.dark-mode .bd-status.future {
    background: rgba(245, 158, 11, 0.12);
    color: var(--dm-warning);
}
html.dark-mode .bd-legend { color: var(--dm-text-muted); }


/* ============================================================
   27. MOBILE
   ============================================================ */
html.dark-mode .contact-bar-mobile {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .contact-bar-mobile .bar-name { color: var(--dm-text-primary); }
html.dark-mode .contact-bar-mobile .bar-detail { color: var(--dm-text-muted); }
@media (max-width: 768px) {
    html.dark-mode .queue-bar { border-bottom: 1px solid var(--dm-border-subtle); }
    html.dark-mode .appt-bar { border-bottom: 1px solid var(--dm-border-subtle); }
    html.dark-mode .menu-panel { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7); }
}


/* ============================================================
   28. CALENDAR
   ============================================================ */
html.dark-mode .calendar-modal-backdrop { background: rgba(14, 13, 12, 0.75); }
html.dark-mode .calendar-modal {
    background: var(--dm-bg-primary);
    box-shadow: 0 0 0 1px var(--dm-border-default),
                0 16px 64px rgba(0, 0, 0, 0.6);
}
html.dark-mode .calendar-modal-header {
    background: linear-gradient(135deg, var(--dm-bg-surface) 0%, var(--dm-bg-elevated) 100%);
    border-bottom: 1px solid var(--dm-border-default);
}
html.dark-mode .calendar-modal-body { background: var(--dm-bg-primary); }
html.dark-mode .calendar-modal-header .calendar-legend .legend-pill {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dm-text-primary);
}
html.dark-mode .calendar-modal-header .calendar-legend .legend-sep {
    background: rgba(255, 255, 255, 0.15);
}
html.dark-mode .calendar-modal-header .calendar-toggle {
    background: rgba(255, 255, 255, 0.12);
}
html.dark-mode .calendar-toolbar { color: var(--dm-text-secondary); }
html.dark-mode .legend-label { color: var(--dm-text-muted); }
html.dark-mode .legend-sep { background: var(--dm-border-default); }

/* Calendar popover — Glassmorphism */
html.dark-mode .cal-popover {
    background: rgba(33, 30, 25, 0.95);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-color: var(--dm-border-default);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: var(--dm-text-primary);
}
html.dark-mode .cal-popover-title { color: var(--dm-text-primary); }
html.dark-mode .cal-popover-time { color: var(--dm-text-tertiary); }
html.dark-mode .cal-popover-loc { color: var(--dm-text-secondary); }
html.dark-mode .cal-popover-close { color: var(--dm-text-muted); }
html.dark-mode .cal-popover-btn-nav,
html.dark-mode .cal-popover-btn-complete,
html.dark-mode .cal-popover-btn-delete { color: var(--dm-text-primary); }

/* Calendar event form */
html.dark-mode .cal-event-field label { color: var(--dm-text-muted); }
html.dark-mode .cal-event-field input,
html.dark-mode .cal-event-field select,
html.dark-mode .cal-event-field textarea {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .cal-event-field input:focus,
html.dark-mode .cal-event-field select:focus,
html.dark-mode .cal-event-field textarea:focus {
    outline-color: var(--dm-accent);
    box-shadow: var(--dm-accent-ring);
}
html.dark-mode .cal-event-field .cal-event-readonly {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-subtle);
    color: var(--dm-text-secondary);
}
html.dark-mode .cal-event-actions { border-top-color: var(--dm-border-subtle); }
html.dark-mode .cal-event-save {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .cal-event-save:hover { background: var(--dm-accent-hover); }
html.dark-mode .cal-event-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-secondary);
}
html.dark-mode .cal-event-cancel:hover { background: rgba(255, 255, 255, 0.1); }

/* FullCalendar overrides */
html.dark-mode .fc {
    --fc-border-color: var(--dm-border-subtle);
    --fc-page-bg-color: var(--dm-bg-primary);
    --fc-neutral-bg-color: var(--dm-bg-card);
    --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.04);
    --fc-today-bg-color: color-mix(in srgb, var(--dm-accent) 6%, transparent);
    --fc-highlight-color: color-mix(in srgb, var(--dm-accent) 10%, transparent);
    --fc-non-business-color: var(--dm-bg-base);
    color: var(--dm-text-primary);
}
html.dark-mode .fc .fc-toolbar-title { color: var(--dm-text-primary); }
html.dark-mode .fc .fc-button-primary {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
}
html.dark-mode .fc .fc-button-primary:hover {
    background: var(--dm-accent-hover);
    border-color: var(--dm-accent-hover);
}
html.dark-mode .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
}
html.dark-mode .fc .fc-col-header-cell-cushion { color: var(--dm-text-tertiary); }
html.dark-mode .fc .fc-daygrid-day-number { color: var(--dm-text-primary); }
html.dark-mode .fc .fc-day-today .fc-daygrid-day-number { color: var(--dm-accent); }
html.dark-mode .fc .fc-event {
    color: var(--dm-text-primary);
    border-color: var(--dm-border-subtle);
}
html.dark-mode .fc .fc-event-title { color: var(--dm-text-primary); }
html.dark-mode .fc .fc-event-time { color: var(--dm-text-secondary); }
html.dark-mode .fc .fc-list-event-title { color: var(--dm-text-primary); }
html.dark-mode .fc .fc-list-day-cushion { background: var(--dm-bg-card); }


/* ============================================================
   29. WEBSITE INTEL MODAL
   ============================================================ */
html.dark-mode .wi-modal-backdrop { background: rgba(14, 13, 12, 0.75); }
html.dark-mode .wi-modal {
    background: var(--dm-bg-primary);
    box-shadow: 0 0 0 1px var(--dm-border-default),
                0 16px 64px rgba(14, 13, 12, 0.6);
}
html.dark-mode .wi-modal-header {
    background: linear-gradient(135deg, var(--dm-bg-elevated) 0%, var(--dm-bg-card) 100%);
    border-bottom: 1px solid var(--dm-border-default);
}
html.dark-mode .wi-modal-body { background: var(--dm-bg-primary); }
html.dark-mode .wi-modal-section-title {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-accent);
}
html.dark-mode .wi-modal-table th {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-default);
    color: var(--dm-text-muted);
}
html.dark-mode .wi-modal-table td {
    border-bottom-color: var(--dm-border-subtle);
    color: var(--dm-text-secondary);
}
html.dark-mode .wi-modal-table tr:hover td {
    background: color-mix(in srgb, var(--dm-accent) 4%, transparent);
}
html.dark-mode .wi-modal-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}
html.dark-mode .wi-modal-table a { color: var(--dm-accent); }
html.dark-mode .wi-expand-btn { color: var(--dm-text-tertiary); }
html.dark-mode .wi-expand-btn:hover { color: var(--dm-accent); }


/* ============================================================
   30. IMAGE EDITOR
   ============================================================ */
html.dark-mode #imageEditorModal { background: var(--dm-bg-base); }
html.dark-mode #imageEditorModal .editor-toolbar {
    background: linear-gradient(135deg, var(--dm-bg-elevated) 0%, var(--dm-bg-card) 100%);
    border-bottom-color: var(--dm-border-default);
}
html.dark-mode #imageEditorModal .editor-bg-btn {
    border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode #imageEditorModal .editor-bg-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
html.dark-mode #imageEditorModal .editor-close-btn {
    border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode #imageEditorModal .editor-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
html.dark-mode #imageEditorModal .editor-save-btn {
    background: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode #imageEditorModal .editor-save-btn:hover {
    background: var(--dm-accent-hover);
}

/* Org images */
html.dark-mode .org-images-header { border-top-color: var(--dm-border-subtle); }
html.dark-mode .org-images-header span { color: var(--dm-text-muted); }
html.dark-mode .org-images-header button {
    background: rgba(255, 255, 255, 0.12);
    color: var(--dm-text-tertiary);
}
html.dark-mode .org-images-header button:hover {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
}
html.dark-mode .org-image-card {
    border-color: var(--dm-border-default);
    background: var(--dm-bg-card);
}
html.dark-mode .org-images-empty { color: var(--dm-text-muted); }
html.dark-mode .org-images-drop {
    border-color: var(--dm-border-default);
    color: var(--dm-text-muted);
}
html.dark-mode .org-images-drop.drag-over {
    border-color: var(--dm-accent);
    background: var(--dm-accent-muted);
    color: var(--dm-accent);
}


/* ============================================================
   31. SIDEBAR (Script Sidebar)
   ============================================================ */
html.dark-mode .sidebar-cat-header { color: var(--dm-text-muted); }
html.dark-mode .sidebar-script-btn { color: var(--dm-text-primary); }
html.dark-mode .sidebar-script-btn:hover:not(.sidebar-script-active) {
    background: rgba(255, 255, 255, 0.04);
}
html.dark-mode .sidebar-script-active {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .sidebar-script-hidden { opacity: 0.35; }
html.dark-mode .sidebar-eye-btn { color: var(--dm-text-muted); }


/* ============================================================
   32. KEYBOARD SHORTCUTS — Glassmorphism
   ============================================================ */
html.dark-mode .shortcuts-help {
    background: rgba(14, 13, 12, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dark-mode .shortcuts-help-inner {
    background: var(--dm-bg-elevated);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border-strong);
    box-shadow: 0 0 0 1px var(--dm-border-default),
                0 8px 32px rgba(14, 13, 12, 0.5);
}
html.dark-mode .sh-key {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
    box-shadow: 0 1px 2px rgba(14, 13, 12, 0.3);
}


/* ============================================================
   33. VOICE BAR
   ============================================================ */
html.dark-mode .vb-btn {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}
html.dark-mode .vb-btn:hover {
    background: var(--dm-bg-hover);
    border-color: var(--dm-border-strong);
}
html.dark-mode .vb-btn:focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .vb-btn.active {
    background: var(--dm-accent);
    border-color: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .vb-btn--hangup {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--dm-text-primary);
}
html.dark-mode .vb-btn--hangup:hover { background: var(--dm-danger); }
html.dark-mode .vb-btn--hangup:focus-visible {
    outline: 2px solid var(--dm-danger);
    outline-offset: 2px;
}
html.dark-mode .voice-mute--active {
    background: var(--dm-danger) !important;
    color: var(--dm-text-primary) !important;
}


/* ============================================================
   34. PIVOT WIDGET
   ============================================================ */
html.dark-mode .pivot-header { color: var(--dm-text-primary); }
html.dark-mode .pivot-pill {
    background: var(--dm-bg-card);
    border-color: var(--dm-border-default);
    color: var(--dm-text-secondary);
}
html.dark-mode .pivot-pill:hover {
    background: var(--dm-accent-muted);
    border-color: var(--dm-accent);
}
html.dark-mode .pivot-pill:focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
}
html.dark-mode .pivot-existing {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}
html.dark-mode .pivot-existing:hover { background: rgba(34, 197, 94, 0.15); }


/* ============================================================
   35. BADGES
   ============================================================ */
html.dark-mode .owner-badge--mine {
    background: rgba(34, 197, 94, 0.12);
    color: var(--dm-success);
}
html.dark-mode .owner-badge--other {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dm-text-tertiary);
}
html.dark-mode .scrub-badge--cell {
    background: rgba(245, 158, 11, 0.2);
    color: var(--dm-warning);
}
html.dark-mode .scrub-badge--rnd {
    background: rgba(139, 92, 246, 0.25);
    color: var(--dm-purple);
}
html.dark-mode .scrub-badge--time {
    background: color-mix(in srgb, var(--dm-accent) 20%, transparent);
    color: var(--dm-accent-hover);
}
html.dark-mode .scrub-badge--ctr {
    background: rgba(239, 68, 68, 0.25);
    color: var(--dm-danger);
    animation-name: dm-presence-pulse;
}
html.dark-mode .scrub-badge--blocked {
    background: rgba(239, 68, 68, 0.25);
    color: var(--dm-danger);
}
html.dark-mode .disc-badge {
    background: rgba(245, 158, 11, 0.25);
    color: var(--dm-warning);
}
html.dark-mode .disc-badge--wrong {
    background: rgba(239, 68, 68, 0.25);
    color: var(--dm-danger);
}
html.dark-mode .lead-status-icon { opacity: 0.9; }
html.dark-mode .sms-delivery-status.delivered { color: var(--dm-success); }
html.dark-mode .sms-delivery-status.failed,
html.dark-mode .sms-delivery-status.undelivered { color: var(--dm-danger); }
html.dark-mode .notif-dot {
    background: var(--dm-danger);
    box-shadow: 0 0 6px rgba(192, 102, 102, 0.4);
}
html.dark-mode .dnc-badge {
    background: rgba(192, 102, 102, 0.8);
    color: var(--dm-text-primary);
    animation-name: dm-presence-pulse;
}


/* ============================================================
   36. REP PROMPT
   ============================================================ */
html.dark-mode .rep-prompt {
    background: var(--dm-bg-elevated);
    border-bottom-color: var(--dm-border-subtle);
}
html.dark-mode .rep-prompt input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border-default);
    color: var(--dm-text-primary);
}
html.dark-mode .rep-prompt input:focus-visible {
    border-color: var(--dm-accent);
    box-shadow: var(--dm-accent-glow);
    outline: none;
}
html.dark-mode .rep-prompt button {
    background: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: var(--dm-accent-glow);
}
html.dark-mode .rep-prompt button:focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
}


/* ============================================================
   37. MISCELLANEOUS
   ============================================================ */
html.dark-mode .ko-placeholder-note { color: var(--dm-text-muted); }
html.dark-mode .no-queue-msg { color: var(--dm-text-muted); }
html.dark-mode .store-map-container { border-color: var(--dm-border-default); }

/* Date pickers — native dark */
html.dark-mode input[type="date"],
html.dark-mode input[type="time"],
html.dark-mode input[type="datetime-local"] {
    color-scheme: dark;
}

/* Collapsible metadata details */
html.dark-mode .ci-meta-details summary::before {
    color: var(--dm-text-muted);
}

/* Group photo */
html.dark-mode .ci-group-pic {
    filter: brightness(0.85);
    border-color: var(--dm-border-default);
}

/* Warm #fff text on colored backgrounds */
html.dark-mode .tc-rank-badge { color: var(--dm-text-primary); }
html.dark-mode .queue-sync-issue { color: var(--dm-text-primary); }
html.dark-mode .ci-msg-btn:active,
html.dark-mode .ci-email-btn:active { color: var(--dm-text-primary); }
html.dark-mode .co-call-now-btn { color: var(--dm-text-primary); }
html.dark-mode .comm-detail-type-badge { color: var(--dm-text-primary); }
html.dark-mode .fr-modal__submit { color: var(--dm-text-primary); }
html.dark-mode .ci-email-action-btn--save { color: var(--dm-text-primary); }
html.dark-mode .phone-tree-inline-save { color: var(--dm-text-primary); }


/* ============================================================
   38. ANIMATIONS — Softer for dark mode
   ============================================================ */
@keyframes dm-flash-red {
    0%, 100% { background: transparent; }
    25%, 75% { background: rgba(192, 102, 102, 0.10); }
}
html.dark-mode .flash-highlight {
    animation-name: dm-flash-red;
}

@keyframes dm-presence-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
html.dark-mode .queue-overdue-badge {
    box-shadow: 0 0 10px rgba(192, 102, 102, 0.25);
}


/* ============================================================
   39. ACCESSIBILITY
   ============================================================ */

/* Focus indicators visible on dark backgrounds */
html.dark-mode :focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
}
html.dark-mode button:focus-visible,
html.dark-mode a:focus-visible,
html.dark-mode input:focus-visible,
html.dark-mode select:focus-visible,
html.dark-mode textarea:focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
    box-shadow: var(--dm-accent-glow);
}

/* Reduced motion — kill all dark mode animations */
@media (prefers-reduced-motion: reduce) {
    html.dark-mode *,
    html.dark-mode *::before,
    html.dark-mode *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── P2 UX fixes: dark-mode overrides ── */

/* F23: Phone tree inline editor */
html.dark-mode .phone-tree-inline-editor {
    background: var(--dm-bg-input, #181716);
    border-color: var(--dm-border-default, rgba(255,255,255,0.09));
    color: var(--dm-text-primary, #e8e4df);
}
html.dark-mode .phone-tree-inline-cancel {
    border-color: var(--dm-border-default, rgba(255,255,255,0.09));
    color: var(--dm-text-secondary, #b0a898);
}

/* F4: Voice bar */
html.dark-mode .voice-bar {
    background: var(--dm-bg-base, #0e0d0c);
    border-bottom-color: var(--dm-border-default, rgba(255,255,255,0.09));
}

/* F5: Phone tree block */
html.dark-mode #ci-phone-tree-updated {
    color: var(--dm-text-tertiary, #8d8477) !important;
}
html.dark-mode .phone-tree-block {
    background: rgba(184, 146, 62, 0.08);
    border-color: rgba(184, 146, 62, 0.30);
}
html.dark-mode .phone-tree-block__label {
    color: var(--dm-warning, #ad8b46);
}
html.dark-mode .phone-tree-block__text {
    color: var(--dm-text-secondary, #b0a898);
}

/* F6: Feature-request modal */
html.dark-mode .fr-modal__box {
    background: var(--dm-bg-card, #1c1b19);
    color: var(--dm-text-primary, #e8e4df);
}
html.dark-mode .fr-modal__title {
    color: var(--dm-text-primary, #e8e4df);
}
html.dark-mode .fr-modal__close {
    color: var(--dm-text-secondary, #b0a898);
}
html.dark-mode .fr-modal__input,
html.dark-mode .fr-modal__textarea {
    background: var(--dm-bg-input, #181716);
    border-color: var(--dm-border-default, rgba(255,255,255,0.09));
    color: var(--dm-text-primary, #e8e4df);
}
html.dark-mode .fr-modal__cancel {
    background: var(--dm-bg-elevated, #232220);
    border-color: var(--dm-border-default, rgba(255,255,255,0.09));
    color: var(--dm-text-secondary, #b0a898);
}

/* F20: Routing banner */
html.dark-mode .routing-banner--blocked {
    background: rgba(192, 102, 102, 0.12);
    border-color: rgba(192, 102, 102, 0.30);
    color: var(--dm-danger, #c06666);
}

/* F21: Recent contact banner */
html.dark-mode .recent-contact-banner {
    background: rgba(184, 146, 62, 0.10);
    border-color: rgba(184, 146, 62, 0.30);
    color: var(--dm-warning, #ad8b46);
}

/* F22: Google Places update banner */
html.dark-mode .places-update-banner {
    background: var(--dm-bg-elevated, #232220);
    color: var(--dm-warning, #ad8b46);
    border-color: rgba(184, 146, 62, 0.30);
}

/* Feature request modal backdrop */
html.dark-mode .fr-modal {
    background: rgba(14, 13, 12, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Sidebar / menu backdrop overlays */
html.dark-mode .sidebar-backdrop {
    background: rgba(14, 13, 12, 0.6) !important;
}

/* Text compose attach button */
html.dark-mode #text-compose-attach {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border-default) !important;
    color: var(--dm-text-secondary) !important;
}

/* ============================================================
   40. PREMIUM POLISH — Micro-interactions & refined feel
   ============================================================ */

/* Stats cards — hover lift */
html.dark-mode .my-stats-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
}
html.dark-mode .my-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45),
                0 0 0 1px var(--dm-border-default),
                var(--dm-accent-glow);
}

/* Primary action buttons — intensified hover glow */
html.dark-mode .queue-next-btn:hover,
html.dark-mode .ci-save-btn:hover,
html.dark-mode .ci-dial-btn:hover,
html.dark-mode .save-contact-btn:hover,
html.dark-mode .btn-save:hover,
html.dark-mode .rc-modal-save:hover:not(:disabled),
html.dark-mode .email-connect-btn:hover {
    box-shadow: 0 0 24px color-mix(in srgb, var(--brand-blue) 18%, transparent),
                0 0 48px color-mix(in srgb, var(--brand-blue) 6%, transparent);
}

/* Team contact cards — hover lift */
html.dark-mode .ci-tc-person-card {
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
html.dark-mode .ci-tc-person-card:hover {
    transform: translateY(-1px);
}

/* Response pills — hover lift */
html.dark-mode .response-pill {
    transition: background 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}
html.dark-mode .response-pill:hover {
    transform: translateY(-1px);
}

/* Menu links — subtle highlight sweep */
html.dark-mode .menu-link {
    transition: background 200ms ease, padding-left 200ms ease;
}
html.dark-mode .menu-link:hover {
    padding-left: 20px;
}

/* Comms list items — left border accent on hover */
html.dark-mode .comms-list .comms-item {
    transition: background 200ms ease, border-left-color 200ms ease;
    border-left: 2px solid transparent;
}
html.dark-mode .comms-list .comms-item:hover {
    border-left-color: var(--dm-border-strong);
}

/* Modal entrance — subtle scale */
html.dark-mode .modal,
html.dark-mode .rc-modal,
html.dark-mode .calendar-modal,
html.dark-mode .wi-modal {
    animation: dm-modal-enter 200ms ease;
}
@keyframes dm-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Toast entrance — slide + fade */
html.dark-mode .toast {
    animation: dm-toast-enter 300ms ease;
}
@keyframes dm-toast-enter {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pivot pills — refined hover */
html.dark-mode .pivot-pill {
    transition: background 200ms ease, border-color 200ms ease, transform 150ms ease, box-shadow 200ms ease;
}
html.dark-mode .pivot-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Result buttons — hover lift */
html.dark-mode .result-btn {
    transition: background 200ms ease, box-shadow 200ms ease, transform 150ms ease, color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
    html.dark-mode .result-btn:hover {
        transform: translateY(-1px);
    }
}


/* Forced colors (Windows High Contrast) — defer to system */
@media (forced-colors: active) {
    html.dark-mode {
        --dm-accent: LinkText;
        --dm-danger: LinkText;
        --dm-success: LinkText;
    }
    html.dark-mode .modal,
    html.dark-mode .rc-modal,
    html.dark-mode .calendar-modal,
    html.dark-mode .wi-modal,
    html.dark-mode .fr-modal__box {
        border: 2px solid ButtonText;
    }
    html.dark-mode button {
        border: 1px solid ButtonText;
    }
}