/* wwwroot/css/theme.css
   SafeHouse FMS - Production Theme System
   Comprehensive CSS variables for dark/light mode, font scaling, and accent colors
   MUST be loaded BEFORE other stylesheets
*/

/* ═══════════════════════════════════════════════════════════════════════════
   ROOT CSS VARIABLES - Light Mode Defaults
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand Colors */
    --sh-primary: #FF6B35;
    --sh-primary-hover: #E55A2B;
    --sh-primary-light: rgba(255, 107, 53, 0.1);
    --sh-primary-rgb: 255, 107, 53;
    --sh-secondary: #1e293b;
    --sh-secondary-light: #334155;
    /* ══════════════════════════════════════════════════════════════════════
       LIGHT MODE DEFAULTS
    ══════════════════════════════════════════════════════════════════════ */
    /* Backgrounds */
    --sh-bg: #f8fafc;
    --sh-bg-secondary: #f1f5f9;
    --sh-card: #ffffff;
    --sh-card-hover: #f8fafc;
    /* NAVBAR - WHITE IN LIGHT MODE */
    --sh-navbar: #ffffff;
    --sh-navbar-text: #1e293b;
    --sh-navbar-border: #e2e8f0;
    /* Sidebar - Keep dark for contrast */
    --sh-sidebar: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --sh-sidebar-text: #f1f5f9;
    /* Text */
    --sh-text: #1e293b;
    --sh-text-secondary: #64748b;
    --sh-text-muted: #94a3b8;
    /* Borders */
    --sh-border: #e2e8f0;
    --sh-border-light: #f1f5f9;
    /* Inputs */
    --sh-input-bg: #ffffff;
    --sh-input-border: #e2e8f0;
    /* Tables */
    --sh-table-stripe: #f8fafc;
    --sh-table-hover: #f1f5f9;
    /* Shadows */
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --sh-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* Status */
    --sh-success: #10B981;
    --sh-success-light: rgba(16, 185, 129, 0.1);
    --sh-warning: #F59E0B;
    --sh-warning-light: rgba(245, 158, 11, 0.1);
    --sh-danger: #EF4444;
    --sh-danger-light: rgba(239, 68, 68, 0.1);
    --sh-info: #3B82F6;
    --sh-info-light: rgba(59, 130, 246, 0.1);
    /* Transitions */
    --sh-transition: 0.2s ease;
    /* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
    html.dark-mode,
    html.dark-mode {
        /* Backgrounds */
        --sh-bg: #0f172a;
        --sh-bg-secondary: #1e293b;
        --sh-card: #1e293b;
        --sh-card-hover: #334155;
        /* NAVBAR - DARK IN DARK MODE */
        --sh-navbar: #1e293b;
        --sh-navbar-text: #f1f5f9;
        --sh-navbar-border: #334155;
        /* Sidebar */
        --sh-sidebar: #1e293b;
        --sh-sidebar-text: #f1f5f9;
        /* Text */
        --sh-text: #f1f5f9;
        --sh-text-secondary: #94a3b8;
        --sh-text-muted: #64748b;
        /* Borders */
        --sh-border: #334155;
        --sh-border-light: #475569;
        /* Inputs */
        --sh-input-bg: #1e293b;
        --sh-input-border: #334155;
        /* Tables */
        --sh-table-stripe: #1e293b;
        --sh-table-hover: #334155;
        /* Shadows */
        --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        --sh-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        /* Status - Adjusted for dark mode */
        --sh-success-light: rgba(16, 185, 129, 0.15);
        --sh-warning-light: rgba(245, 158, 11, 0.15);
        --sh-danger-light: rgba(239, 68, 68, 0.15);
        --sh-info-light: rgba(59, 130, 246, 0.15);
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   FONT SIZE SCALING
═══════════════════════════════════════════════════════════════════════════ */
    html.font-small {
        --sh-font-base: 14px;
        --sh-font-scale: 0.875;
        font-size: 14px;
    }

    html.font-medium {
        --sh-font-base: 16px;
        --sh-font-scale: 1;
        font-size: 16px;
    }

    html.font-large {
        --sh-font-base: 18px;
        --sh-font-scale: 1.125;
        font-size: 18px;
    }

    html.font-xlarge {
        --sh-font-base: 20px;
        --sh-font-scale: 1.25;
        font-size: 20px;
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   COMPACT MODE
═══════════════════════════════════════════════════════════════════════════ */
    html.compact-mode {
        --sh-radius: 8px;
        --sh-radius-sm: 4px;
        --sh-radius-lg: 12px;
    }

        html.compact-mode .mud-table-row {
            height: 40px !important;
        }

        html.compact-mode .mud-input {
            padding: 8px 12px !important;
        }
    /* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL ELEMENT OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
    html, body {
        background-color: var(--sh-bg) !important;
        color: var(--sh-text) !important;
        font-size: var(--sh-font-base);
        transition: background-color var(--sh-transition), color var(--sh-transition);
    }
    /* Main Content Area */
    .mud-main-content,
    main,
    .main-content,
    #main-content,
    [class*="content-area"],
    .mud-layout-content {
        background-color: var(--sh-bg) !important;
        color: var(--sh-text) !important;
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   MUDBLAZOR COMPONENT OVERRIDES
═══════════════════════════════════════════════════════════════════════════ */
    /* AppBar / Navbar */
    html.dark-mode .mud-appbar,
    html.dark-mode .mud-appbar.mud-appbar-fixed-top {
        background: var(--sh-navbar);
        color: var(--sh-navbar-text);
        border-bottom: 1px solid var(--sh-navbar-border);
    }
    /* Drawer / Sidebar */
    .mud-drawer,
    .mud-drawer-content {
        background: var(--sh-sidebar) !important;
        color: var(--sh-sidebar-text) !important;
    }
        /* Drawer icons */
        .mud-drawer .mud-icon-root {
            color: var(--sh-sidebar-text);
        }

        .mud-drawer .mud-nav-link {
            color: var(--sh-sidebar-text);
        }

            .mud-drawer .mud-nav-link:hover {
                background-color: rgba(255, 107, 53, 0.1);
            }

            .mud-drawer .mud-nav-link.active {
                background-color: rgba(255, 107, 53, 0.15);
                color: #FF6B35;
            }
    /* Paper / Cards */
    .mud-paper,
    .mud-card {
        background-color: var(--sh-card);
        color: var(--sh-text);
        border: 1px solid var(--sh-border);
    }

    .mud-card {
        background-color: var(--sh-card) !important;
        color: var(--sh-text) !important;
    }
    /* Tables */
    .mud-table {
        background-color: var(--sh-card);
    }

        .mud-table .mud-table-row {
            background-color: var(--sh-card);
            color: var(--sh-text);
        }

            .mud-table .mud-table-row:hover {
                background-color: var(--sh-table-hover);
            }

            .mud-table .mud-table-row:nth-child(even) {
                background-color: var(--sh-table-stripe);
            }

    .mud-table-head {
        background-color: var(--sh-bg-secondary);
    }

        .mud-table-head .mud-table-cell {
            color: var(--sh-text-secondary);
            font-weight: 600;
        }

    .mud-table-cell {
        border-color: var(--sh-border);
        color: var(--sh-text);
    }
    /* Inputs */
    .mud-input,
    .mud-input-control,
    .mud-select,
    .mud-input-slot {
        background-color: var(--sh-input-bg);
        color: var(--sh-text);
    }

    .mud-input-outlined .mud-input-outlined-border {
        border-color: var(--sh-input-border);
    }

    .mud-input:focus,
    .mud-input-control:focus-within {
        border-color: var(--sh-primary);
    }

    .mud-input-label {
        color: var(--sh-text-secondary);
    }
    /* Buttons - Primary uses accent color */
    .mud-button-filled.mud-button-filled-primary {
        background-color: var(--sh-primary) !important;
        color: #ffffff !important;
    }

        .mud-button-filled.mud-button-filled-primary:hover {
            background-color: var(--sh-primary-hover) !important;
        }
    /* Dialogs */
    .mud-dialog {
        background-color: var(--sh-card);
        color: var(--sh-text);
    }

    .mud-dialog-title {
        color: var(--sh-text);
    }
    /* Menu / Popover */
    .mud-menu,
    .mud-popover {
        background-color: var(--sh-card);
        border: 1px solid var(--sh-border);
    }

    .mud-list-item {
        color: var(--sh-text);
    }

        .mud-list-item:hover {
            background-color: var(--sh-table-hover);
        }
    /* Tabs */
    .mud-tabs {
        background-color: var(--sh-card);
    }

    .mud-tab {
        color: var(--sh-text-secondary);
    }

        .mud-tab.mud-tab-active {
            color: var(--sh-primary);
        }
    /* Chips */
    .mud-chip {
        background-color: var(--sh-bg-secondary) !important;
        color: var(--sh-text) !important;
    }
    /* Progress */
    .mud-progress-linear {
        background-color: var(--sh-bg-secondary) !important;
    }
    /* Snackbar */
    .mud-snackbar {
        background-color: var(--sh-card) !important;
        color: var(--sh-text) !important;
        border: 1px solid var(--sh-border) !important;
    }
    /* Pagination */
    .mud-pagination .mud-pagination-item {
        color: var(--sh-text) !important;
    }

        .mud-pagination .mud-pagination-item.mud-pagination-item-selected {
            background-color: var(--sh-primary) !important;
            color: #ffffff !important;
        }
    /* Typography */
    .mud-typography {
        color: var(--sh-text) !important;
    }

    .mud-typography-secondary {
        color: var(--sh-text-secondary) !important;
    }
    /* Dividers */
    .mud-divider {
        border-color: var(--sh-border) !important;
    }
    /* Icons in dark mode */
    html.dark-mode .mud-icon-default {
        color: var(--sh-text-secondary) !important;
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
═══════════════════════════════════════════════════════════════════════════ */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--sh-bg-secondary);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--sh-border);
        border-radius: 4px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--sh-text-muted);
        }

    html.dark-mode ::-webkit-scrollbar-track {
        background: var(--sh-navy-dark);
    }

    html.dark-mode ::-webkit-scrollbar-thumb {
        background: var(--sh-border);
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   SELECTION STYLING
═══════════════════════════════════════════════════════════════════════════ */
    ::selection {
        background-color: rgba(var(--sh-primary-rgb), 0.3);
        color: var(--sh-text);
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   LINK STYLING
═══════════════════════════════════════════════════════════════════════════ */
    a {
        color: var(--sh-primary);
    }

        a:hover {
            color: var(--sh-primary-hover);
        }
    /* ═══════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════════════════════════ */
    input, select, textarea {
        background-color: var(--sh-input-bg);
        color: var(--sh-text);
        border-color: var(--sh-border);
    }

        input:focus, select:focus, textarea:focus {
            border-color: var(--sh-primary);
            outline-color: var(--sh-primary);
        }

        input::placeholder, textarea::placeholder {
            color: var(--sh-text-muted);
        }
    /* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════════════════ */
    .bg-primary {
        background-color: var(--sh-primary) !important;
    }

    .bg-card {
        background-color: var(--sh-card) !important;
    }

    .bg-secondary {
        background-color: var(--sh-bg-secondary) !important;
    }

    .text-primary {
        color: var(--sh-primary) !important;
    }

    .text-secondary {
        color: var(--sh-text-secondary) !important;
    }

    .text-muted {
        color: var(--sh-text-muted) !important;
    }

    .border-primary {
        border-color: var(--sh-primary) !important;
    }

    .border-default {
        border-color: var(--sh-border) !important;
    }
    /* ═══════════════════════════════════════════════════════════════════════════
   PREVENT FLASH OF UNSTYLED CONTENT
═══════════════════════════════════════════════════════════════════════════ */
    html:not(.dark-mode):not(.font-small):not(.font-medium):not(.font-large):not(.font-xlarge) {
        visibility: hidden;
    }

    html.dark-mode,
    html.font-small,
    html.font-medium,
    html.font-large,
    html.font-xlarge {
        visibility: visible;
    }
    /* Fallback if JS doesn't run */
    @media (prefers-color-scheme: dark) {
        html:not(.dark-mode):not([class*="font-"]) {
            visibility: visible;
        }
    }