/* BetterRoofing Theme System - Light & Dark Mode with CSS Variables */

/* =================================================================
   Light Mode (Default) - CSS Custom Properties
   ================================================================= */
:root {
    /* Native form controls (date pickers, selects, scrollbars) follow this,
       not the CSS variables — without it WebKit renders light-flavored
       control chrome inside dark mode. Flipped in both dark blocks below. */
    color-scheme: light;

    /* The app's type. A token rather than a literal because shared chrome has to
       re-assert it: some package stylesheets restyle the host's own `body` font
       (BPG.Ppm.Web's calendar.css does), and on a Calendar page that loads last, so
       it wins. Deliberately NOT system-ui first — on Windows 11 that resolves to
       Segoe UI Variable, which is visibly a different face from Segoe UI. */
    --font-app: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Brand Colors */
    --brand-blue: #0078d4;
    --brand-blue-hover: #006bc1;

    /* Background Colors */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9fafb;
    --bg-hover: #f3f4f6;

    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-link: #0078d4;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;

    /* Button Colors */
    --btn-primary-bg: #0078d4;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #006bc1;
    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-text: #374151;
    --btn-secondary-hover: #d1d5db;
    --btn-danger-bg: #ef4444;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #dc2626;

    /* Status Colors - Workflow States (Light Mode) */
    --status-lead-bg: #fef3c7;
    --status-lead-text: #d97706;
    --status-confirm-bg: #dcfce7;
    --status-confirm-text: #16a34a;
    --status-estimate-bg: #fed7aa;
    --status-estimate-text: #ea580c;
    --status-claim-bg: #e0e7ff;
    --status-claim-text: #6366f1;
    --status-followup-bg: #fce7f3;
    --status-followup-text: #db2777;
    --status-awarded-bg: #dbeafe;
    --status-awarded-text: #2563eb;
    --status-material-bg: #fef3c7;
    --status-material-text: #ca8a04;
    --status-workorder-bg: #e9d5ff;
    --status-workorder-text: #9333ea;
    --status-install-bg: #cffafe;
    --status-install-text: #0891b2;
    --status-complete-bg: #d1fae5;
    --status-complete-text: #059669;

    /* Shadow & Elevation */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Overlay & Modal */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;

    /* Calendar Gradient (Special Case) */
    --calendar-gradient-start: #667eea;
    --calendar-gradient-end: #764ba2;

    /* Input & Form Elements */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: #0078d4;
    --input-focus-ring: rgba(0, 120, 212, 0.2);
    --input-disabled-bg: #f3f4f6;
    --input-disabled-text: #9ca3af;

    /* Semantic Aliases */
    --accent-primary: #0078d4;
    --border-primary: #e5e7eb;

    /* App-shell aliases (mirror app.css values so pages that load
       event-sidebar.css/project-detail.css without app.css still resolve) */
    --border:    #dadce0;
    --bg-page:   #f0f4f8;
    --bg-card:   #ffffff;
    --radius:    8px;
    --radius-lg: 12px;
    --brand-green: #2e7d32;

    /* Utilization scale (workload heatmap / week chips) */
    --util-low-bg:    rgba(22, 163, 74, 0.12);
    --util-low-text:  #166534;
    --util-mid-bg:    rgba(217, 119, 6, 0.15);
    --util-mid-text:  #92400e;
    --util-full-bg:   rgba(37, 99, 235, 0.12);
    --util-full-text: #1e40af;
    --util-high-bg:   rgba(220, 38, 38, 0.15);
    --util-high-text: #991b1b;

    /* Semantic tint surfaces (checklist summaries, readiness panels, pills,
       error strips). One token set instead of per-rule pastel literals — the
       literals were light-only and unreadable in dark mode (#207). */
    --tint-success-bg:     #f0fdf4;
    --tint-success-border: #bbf7d0;
    --tint-success-text:   #166534;
    --tint-warning-bg:     #fff7ed;
    --tint-warning-border: #fed7aa;
    --tint-warning-text:   #9a3412;
    --tint-danger-bg:      #fef2f2;
    --tint-danger-border:  #fecaca;
    --tint-danger-text:    #b91c1c;
    --tint-info-bg:        #eef2ff;
    --tint-info-border:    #c7d2fe;
    --tint-info-text:      #4338ca;

    /* =============================================================
       Type scale
       =============================================================
       Until these existed the app had no type scale at all — only colors
       were tokenised — and font sizes drifted to 60 distinct values across
       1,106 declarations, in two units. Most of that drift is rem values
       landing beside a px value rather than on it: 0.85rem (13.6px) sits
       between the 13px and 14px that everything else uses, and reads as a
       third size nobody chose.

       These are RATIFIED, not invented: every value below is an exact size
       the app already uses, so replacing a matching literal with its token
       is a provably identical render. Counts are declarations at the time
       of writing.

       Known redundancy, flagged rather than silently resolved: xs/sm/base/md
       are four steps inside 3px (574 declarations between them). That is the
       first consolidation to make, but merging any two of them changes what
       renders on screen, so it belongs in a verified pass with a human
       looking — not in this file.

       UNRESOLVED — px vs rem. These are px because px is what most of the app
       already uses, which makes adopting them a provable no-op. But px ignores
       the reader's own font-size setting and rem honours it, so roughly a
       quarter of the app currently scales for those readers and the rest does
       not. Restating the scale in rem would fix that inconsistency in the
       accessible direction and would render identically at default settings —
       it is a deliberate behaviour change for readers who have changed theirs,
       which is why it is not made here. Until that call is made, migrate px
       literals only and leave rem literals alone. */
    --font-size-xs:   11px;  /*  87 — dense metadata, badge text          */
    --font-size-sm:   12px;  /* 159 — secondary labels                    */
    --font-size-base: 13px;  /* 167 — the app's actual body size          */
    --font-size-md:   14px;  /* 161 — emphasised body, form controls      */
    --font-size-lg:   16px;  /*  52 — section headings                    */
    --font-size-xl:   18px;  /*  44 — card and panel titles               */
    --font-size-2xl:  22px;  /*  34 — page titles                         */
    --font-size-3xl:  32px;  /*  17 — display / empty-state headlines     */

    /* Exact tokens for sizes still in use but NOT part of the scale going
       forward. They exist so the migration off literals can stay a no-op
       render; new CSS should reach for the nearest scale step instead. */
    --font-size-legacy-10: 10px;  /* 15 */
    --font-size-legacy-20: 20px;  /* 22 */
    --font-size-legacy-24: 24px;  /* 21 */
    --font-size-legacy-28: 28px;  /* 14 */

    /* =============================================================
       Spacing scale
       =============================================================
       Same story: 61 distinct values across 3,020 padding/margin/gap
       declarations. Underneath them is a 4px rhythm that roughly 58% of
       declarations already follow, plus a real 2px half-step used for tight
       chrome (badge padding, icon gaps) that is worth keeping rather than
       rounding away.

       Named by their pixel value rather than t-shirt size. Spacing is
       quantitative — there is no hierarchy to encode — so --space-12 saying
       "12px" removes a lookup that --space-3 would add. Type is the
       opposite case, which is why the scale above is named semantically. */
    --space-2:   2px;   /*  61 */
    --space-4:   4px;   /* 159 */
    --space-6:   6px;   /* 133 */
    --space-8:   8px;   /* 344 */
    --space-10: 10px;   /* 206 */
    --space-12: 12px;   /* 394 */
    --space-14: 14px;   /* 104 */
    --space-16: 16px;   /* 395 */
    --space-20: 20px;   /* 206 */
    --space-24: 24px;   /* 199 */
    --space-28: 28px;   /*  46 */
    --space-32: 32px;   /*  65 */
    --space-40: 40px;   /*  38 */
}

/* =================================================================
   Dark Mode - Manual Toggle via [data-theme="dark"]
   ================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    /* Brand Colors - Keep consistent */
    --brand-blue: #4a9eff;
    --brand-blue-hover: #6bb0ff;

    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #242424;
    --bg-hover: #3a3a3a;

    /* Text Colors */
    --text-primary: #e5e7eb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    --text-link: #4a9eff;
    --text-inverse: #1a1a1a;

    /* Border Colors */
    --border-light: #3a3a3a;
    --border-medium: #4a4a4a;
    --border-dark: #6b7280;

    /* Button Colors */
    --btn-primary-bg: #4a9eff;
    --btn-primary-text: #1a1a1a;
    --btn-primary-hover: #6bb0ff;
    --btn-secondary-bg: #3a3a3a;
    --btn-secondary-text: #e5e7eb;
    --btn-secondary-hover: #4a4a4a;
    --btn-danger-bg: #dc2626;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #b91c1c;

    /* Status Colors - Desaturated for Dark Mode (30% less vibrant) */
    --status-lead-bg: #3a3020;
    --status-lead-text: #d4a574;
    --status-confirm-bg: #1f3a2a;
    --status-confirm-text: #7bc4a4;
    --status-estimate-bg: #3a2a20;
    --status-estimate-text: #d49a74;
    --status-claim-bg: #2a2f4a;
    --status-claim-text: #9b9edf;
    --status-followup-bg: #3a2a3a;
    --status-followup-text: #d99ab9;
    --status-awarded-bg: #1f2f4a;
    --status-awarded-text: #7ba4df;
    --status-material-bg: #3a3020;
    --status-material-text: #c4a560;
    --status-workorder-bg: #3a2a4a;
    --status-workorder-text: #b98ed4;
    --status-install-bg: #1f3a3a;
    --status-install-text: #74c4d4;
    --status-complete-bg: #1f3a2a;
    --status-complete-text: #74c4a4;

    /* Shadow & Elevation - Lighter for dark backgrounds */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

    /* Overlay & Modal */
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --modal-bg: #2d2d2d;

    /* Calendar Gradient - Darker variant */
    --calendar-gradient-start: #4a5568;
    --calendar-gradient-end: #2d3748;

    /* Input & Form Elements */
    --input-bg: #242424;
    --input-border: #4a4a4a;
    --input-focus-border: #4a9eff;
    --input-focus-ring: rgba(74, 158, 255, 0.3);
    --input-disabled-bg: #1f1f1f;
    --input-disabled-text: #6b7280;

    /* Semantic Aliases */
    --accent-primary: #4a9eff;
    --border-primary: #3a3a3a;

    /* Bootstrap Variable Overrides for Dark Mode */
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e5e7eb;
    --bs-secondary-bg: #2d2d2d;
    --bs-tertiary-bg: #242424;
    --bs-card-bg: #2d2d2d;
    --bs-card-color: #e5e7eb;
    --bs-card-border-color: #3a3a3a;
    --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
    --bs-border-color: #3a3a3a;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
    --bs-table-bg: transparent;
    --bs-table-border-color: #3a3a3a;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: #e5e7eb;
    --bs-form-control-bg: #242424;
    --bs-modal-bg: #2d2d2d;
    --bs-modal-color: #e5e7eb;
    --bs-modal-header-border-color: #3a3a3a;
    --bs-modal-footer-border-color: #3a3a3a;
    --bs-dropdown-bg: #2d2d2d;
    --bs-dropdown-border-color: #3a3a3a;
    --bs-dropdown-color: #e5e7eb;
    --bs-dropdown-link-color: #e5e7eb;
    --bs-dropdown-link-hover-bg: #3a3a3a;
    --bs-dropdown-link-hover-color: #e5e7eb;
    --bs-list-group-bg: #2d2d2d;
    --bs-list-group-border-color: #3a3a3a;
    --bs-list-group-color: #e5e7eb;
    --bs-input-bg: #242424;
    --bs-input-border-color: #4a4a4a;
    --bs-input-color: #e5e7eb;
    --bs-tooltip-bg: #3a3a3a;
    --bs-popover-bg: #2d2d2d;
    --bs-popover-border-color: #3a3a3a;

    /* App-shell aliases (mirror app.css dark values) */
    --border:  #2d2d2d;
    --bg-page: #121212;
    --bg-card: #1e1e1e;

    /* Utilization scale — brighter text for dark surfaces */
    --util-low-bg:    rgba(22, 163, 74, 0.22);
    --util-low-text:  #86efac;
    --util-mid-bg:    rgba(217, 119, 6, 0.24);
    --util-mid-text:  #fcd34d;
    --util-full-bg:   rgba(59, 130, 246, 0.24);
    --util-full-text: #93c5fd;
    --util-high-bg:   rgba(220, 38, 38, 0.26);
    --util-high-text: #fca5a5;

    /* Semantic tint surfaces — desaturated grounds, brighter text (#207) */
    --tint-success-bg:     #1f3a2a;
    --tint-success-border: #2d5240;
    --tint-success-text:   #86efac;
    --tint-warning-bg:     #3a2a20;
    --tint-warning-border: #5a4030;
    --tint-warning-text:   #fdba74;
    --tint-danger-bg:      #3a2323;
    --tint-danger-border:  #5a3535;
    --tint-danger-text:    #fca5a5;
    --tint-info-bg:        #2a2f4a;
    --tint-info-border:    #3d4468;
    --tint-info-text:      #a5b4fc;
}

/* =================================================================
   System Preference Fallback - Auto Dark Mode
   ================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Same as [data-theme="dark"] above */
        color-scheme: dark;
        --brand-blue: #4a9eff;
        --brand-blue-hover: #6bb0ff;
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #242424;
        --bg-hover: #3a3a3a;
        --text-primary: #e5e7eb;
        --text-secondary: #d1d5db;
        --text-tertiary: #9ca3af;
        --text-muted: #6b7280;
        --text-link: #4a9eff;
        --text-inverse: #1a1a1a;
        --border-light: #3a3a3a;
        --border-medium: #4a4a4a;
        --border-dark: #6b7280;
        --btn-primary-bg: #4a9eff;
        --btn-primary-text: #1a1a1a;
        --btn-primary-hover: #6bb0ff;
        --btn-secondary-bg: #3a3a3a;
        --btn-secondary-text: #e5e7eb;
        --btn-secondary-hover: #4a4a4a;
        --btn-danger-bg: #dc2626;
        --btn-danger-text: #ffffff;
        --btn-danger-hover: #b91c1c;
        --status-lead-bg: #3a3020;
        --status-lead-text: #d4a574;
        --status-confirm-bg: #1f3a2a;
        --status-confirm-text: #7bc4a4;
        --status-estimate-bg: #3a2a20;
        --status-estimate-text: #d49a74;
        --status-claim-bg: #2a2f4a;
        --status-claim-text: #9b9edf;
        --status-followup-bg: #3a2a3a;
        --status-followup-text: #d99ab9;
        --status-awarded-bg: #1f2f4a;
        --status-awarded-text: #7ba4df;
        --status-material-bg: #3a3020;
        --status-material-text: #c4a560;
        --status-workorder-bg: #3a2a4a;
        --status-workorder-text: #b98ed4;
        --status-install-bg: #1f3a3a;
        --status-install-text: #74c4d4;
        --status-complete-bg: #1f3a2a;
        --status-complete-text: #74c4a4;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
        --overlay-bg: rgba(0, 0, 0, 0.8);
        --modal-bg: #2d2d2d;
        --calendar-gradient-start: #4a5568;
        --calendar-gradient-end: #2d3748;
        --input-bg: #242424;
        --input-border: #4a4a4a;
        --input-focus-border: #4a9eff;
        --input-focus-ring: rgba(74, 158, 255, 0.3);
        --input-disabled-bg: #1f1f1f;
        --input-disabled-text: #6b7280;

        /* Bootstrap Variable Overrides for Dark Mode */
        --bs-body-bg: #1a1a1a;
        --bs-body-color: #e5e7eb;
        --bs-secondary-bg: #2d2d2d;
        --bs-tertiary-bg: #242424;
        --bs-card-bg: #2d2d2d;
        --bs-card-color: #e5e7eb;
        --bs-card-border-color: #3a3a3a;
        --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
        --bs-border-color: #3a3a3a;
        --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
        --bs-table-bg: transparent;
        --bs-table-border-color: #3a3a3a;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
        --bs-table-color: #e5e7eb;
        --bs-form-control-bg: #242424;
        --bs-modal-bg: #2d2d2d;
        --bs-modal-color: #e5e7eb;
        --bs-modal-header-border-color: #3a3a3a;
        --bs-modal-footer-border-color: #3a3a3a;
        --bs-dropdown-bg: #2d2d2d;
        --bs-dropdown-border-color: #3a3a3a;
        --bs-dropdown-color: #e5e7eb;
        --bs-dropdown-link-color: #e5e7eb;
        --bs-dropdown-link-hover-bg: #3a3a3a;
        --bs-dropdown-link-hover-color: #e5e7eb;
        --bs-list-group-bg: #2d2d2d;
        --bs-list-group-border-color: #3a3a3a;
        --bs-list-group-color: #e5e7eb;
        --bs-input-bg: #242424;
        --bs-input-border-color: #4a4a4a;
        --bs-input-color: #e5e7eb;
        --bs-tooltip-bg: #3a3a3a;
        --bs-popover-bg: #2d2d2d;
        --bs-popover-border-color: #3a3a3a;

        /* App-shell aliases (mirror app.css dark values) */
        --border:  #2d2d2d;
        --bg-page: #121212;
        --bg-card: #1e1e1e;

        /* Utilization scale — brighter text for dark surfaces */
        --util-low-bg:    rgba(22, 163, 74, 0.22);
        --util-low-text:  #86efac;
        --util-mid-bg:    rgba(217, 119, 6, 0.24);
        --util-mid-text:  #fcd34d;
        --util-full-bg:   rgba(59, 130, 246, 0.24);
        --util-full-text: #93c5fd;
        --util-high-bg:   rgba(220, 38, 38, 0.26);
        --util-high-text: #fca5a5;

        /* Semantic tint surfaces — desaturated grounds, brighter text (#207) */
        --tint-success-bg:     #1f3a2a;
        --tint-success-border: #2d5240;
        --tint-success-text:   #86efac;
        --tint-warning-bg:     #3a2a20;
        --tint-warning-border: #5a4030;
        --tint-warning-text:   #fdba74;
        --tint-danger-bg:      #3a2323;
        --tint-danger-border:  #5a3535;
        --tint-danger-text:    #fca5a5;
        --tint-info-bg:        #2a2f4a;
        --tint-info-border:    #3d4468;
        --tint-info-text:      #a5b4fc;
    }
}

/* =================================================================
   Smooth Theme Transitions
   ================================================================= */
* {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Prevent transition on page load */
.no-transition * {
    transition: none !important;
}

/* =================================================================
   Base Styles with CSS Variables
   ================================================================= */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--text-link);
}

a:hover {
    color: var(--brand-blue-hover);
}

/* Buttons */
button, .btn {
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
}

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

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border: none;
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover);
}

/* Cards & Containers */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

/* Force Bootstrap cards/tables/modals/dropdowns to respect dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .table {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-tertiary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .card-body,
    :root:not([data-theme="light"]) .card-header,
    :root:not([data-theme="light"]) .card-footer {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-light) !important;
    }
    :root:not([data-theme="light"]) .modal-content {
        background-color: var(--modal-bg) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .table > :not(caption) > * > * {
        background-color: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-light) !important;
    }
    :root:not([data-theme="light"]) .dropdown-menu {
        background-color: var(--bg-secondary) !important;
        border-color: var(--border-light) !important;
    }
    :root:not([data-theme="light"]) .dropdown-item {
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--input-border) !important;
    }
    :root:not([data-theme="light"]) .text-muted {
        color: var(--text-tertiary) !important;
    }
}

/* Inputs & Forms */
input, textarea, select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: none;
}

input:disabled, textarea:disabled, select:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-text);
}

/* Modals */
.modal-overlay {
    background-color: var(--overlay-bg);
}

.modal-content {
    background-color: var(--modal-bg);
    box-shadow: var(--shadow-xl);
}

/* Status Badges - Workflow States */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    /* A pill is one line by design. As a bare inline span it wrapped mid-text
       in squeezed table columns (e.g. the dashboard STAGE column), splitting
       the rounded outline across two line boxes. */
    white-space: nowrap;
    /* ...and it must stay contained: stage labels are company-editable free
       text up to 100 chars (ProgramProcessStage.Label), which nowrap alone
       would turn into one unbreakable ~800px box that can force sideways
       page scroll on phones. Ellipsize inside the container instead; a
       shared observer (dashboard.ts syncStageBadgeTooltips) sets title=
       on whichever badges this rule actually clips, checked by real layout
       (scrollWidth > clientWidth) rather than assumed from label length.
       overflow:hidden moves an inline-block's baseline to its bottom margin
       edge, so pin vertical-align to keep pills sitting level with
       neighboring text. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.status-lead {
    background-color: var(--status-lead-bg);
    color: var(--status-lead-text);
}

.status-confirmappointment {
    background-color: var(--status-confirm-bg);
    color: var(--status-confirm-text);
}

.status-estimateproposal {
    background-color: var(--status-estimate-bg);
    color: var(--status-estimate-text);
}

.status-claimsubmitted {
    background-color: var(--status-claim-bg);
    color: var(--status-claim-text);
}

.status-followup {
    background-color: var(--status-followup-bg);
    color: var(--status-followup-text);
}

.status-jobawarded {
    background-color: var(--status-awarded-bg);
    color: var(--status-awarded-text);
}

.status-ordermaterial {
    background-color: var(--status-material-bg);
    color: var(--status-material-text);
}

.status-workorder {
    background-color: var(--status-workorder-bg);
    color: var(--status-workorder-text);
}

.status-installation {
    background-color: var(--status-install-bg);
    color: var(--status-install-text);
}

.status-complete {
    background-color: var(--status-complete-bg);
    color: var(--status-complete-text);
}

/* Dividers */
hr {
    border-color: var(--border-light);
}

/* Tables */
table {
    background-color: var(--bg-secondary);
}

thead {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

tbody tr:hover {
    background-color: var(--bg-hover);
}

td, th {
    border-color: var(--border-light);
}