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

/* =================================================================
   Light Mode (Default) - CSS Custom Properties
   ================================================================= */
:root {
    /* 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;
    --status-error-bg: #fef2f2;
    --status-error-text: #dc2626;

    /* 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;
}

/* =================================================================
   Dark Mode - Manual Toggle via [data-theme="dark"]
   ================================================================= */
[data-theme="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;
    --status-error-bg: #3a1f1f;
    --status-error-text: #f87171;

    /* 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;
}

/* =================================================================
   System Preference Fallback - Auto Dark Mode
   ================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Same as [data-theme="dark"] above */
        --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;
        --status-error-bg: #3a1f1f;
        --status-error-text: #f87171;
        --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;
    }
}

/* =================================================================
   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 {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.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);
}

/* =================================================================
   Dark Mode — Form Switches & Inputs
   ================================================================= */
[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
}

/* =================================================================
   Dark Mode — Inventory Status Badges
   ================================================================= */
[data-theme="dark"] .status-draft {
    background: #4b5563;
    color: #f9fafb;
}

[data-theme="dark"] .status-pending {
    background: #164e63;
    color: #a5f3fc;
}

[data-theme="dark"] .status-approved {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-theme="dark"] .status-pickedup {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .status-completed {
    background: #134e4a;
    color: #5eead4;
}

[data-theme="dark"] .status-cancelled {
    background: #7f1d1d;
    color: #fca5a5;
}

/* =================================================================
   Dark Mode — Inventory Job Materials Status Badges (PascalCase from API)
   ================================================================= */
[data-theme="dark"] .status-Allocated {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-theme="dark"] .status-Completed {
    background: #134e4a;
    color: #5eead4;
}

[data-theme="dark"] .status-Cancelled {
    background: #7f1d1d;
    color: #fca5a5;
}

/* =================================================================
   Dark Mode — Inventory Stock Badges
   ================================================================= */
[data-theme="dark"] .stock-high {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .stock-medium {
    background: #713f12;
    color: #fde68a;
}

[data-theme="dark"] .stock-low {
    background: #7f1d1d;
    color: #fca5a5;
}