/* Light Mode Styles - Prioritize data-theme over system preference */
html[data-theme="light"] {
    /* Override Bootstrap CSS variables for light mode */
    :root {
        --bs-modal-bg: #ffffff !important;
        --bs-modal-color: #2d3748 !important;
        --bs-modal-border-color: #e2e8f0 !important;
    }
    
    /* Modal specific fixes for light mode */
    .modal-content {
        background-color: #ffffff !important;
        color: #2d3748 !important;
        border-color: #e2e8f0 !important;
    }
    
    .modal-header {
        background-color: #ffffff !important;
        border-bottom-color: #e2e8f0 !important;
    }
    
    .modal-footer {
        background-color: #ffffff !important;
        border-top-color: #e2e8f0 !important;
    }
    
    .modal-body {
        background-color: #ffffff !important;
        color: #2d3748 !important;
    }
    
    /* Body and HTML background */
    body, html {
        background: linear-gradient(180deg, #627174 0px, #f8f9fa 220px, #f8f9fa 100vh) !important;
        background-color: #f8f9fa !important;
        background-repeat: no-repeat !important;
        color: #000 !important;
    }
    
    /* Main content container */
    .container {
    background-color: transparent !important;
    }
    
    .container-fluid {
        background-color: transparent !important;
    }
    
    /* Navigation */
    .navbar {
        background-color: #bdbdbd !important;
        color: #000 !important;
    }
    .nav-link {
        color: #000 !important;
    }
    nav, nav div {
        color: #181A1B !important;
    }
    nav a {
        color: #181A1B !important;
    }
    
    /* Navbar toggler */
    .navbar .navbar-toggler,
    .navbar-toggler {
        background-color: transparent !important;
        background: transparent !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    .navbar .navbar-toggler-icon,
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        background-color: #bdbdbd !important;
        background: #bdbdbd !important;
        opacity: 1 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    }
    .dropdown-item {
        background-color: transparent !important;
        color: #000 !important;
    }
    .dropdown-item:hover {
        background-color: rgba(0, 0, 0, 0.1) !important;
        color: #000 !important;
    }

    /* Form Elements */
    .form-control, .form-select {
        background-color: #ffffff !important;
        border-color: #ced4da !important;
        color: #000 !important;
    }
    .form-control:focus, .form-select:focus {
        background-color: #ffffff !important;
        border-color: #86b7fe !important;
        color: #000 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }
    .form-control::placeholder {
        color: #6c757d !important;
    }
    .form-select option {
        background-color: #ffffff !important;
        color: #000 !important;
    }

    /* Select2 light mode */
    .select2-container--default .select2-selection--single {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #000 !important;
        height: 28px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered { 
        color: #000 !important; 
        line-height: 28px !important; 
    }
    .select2-container--default .select2-selection--single .select2-selection__placeholder { 
        color: #6c757d !important; 
    }
    .select2-container--default .select2-results__option { 
        background-color: #ffffff !important; 
        color: #000 !important; 
        white-space: nowrap !important; 
    }
    .select2-container--default .select2-results__option--highlighted { 
        background-color: #e9ecef !important; 
        color: #16181b !important; 
        white-space: nowrap !important; 
    }
    .select2-container--default .select2-dropdown {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Tables */
    .table {
        background-color: #ffffff !important;
        color: #000 !important;
    }
    .table tbody tr {
        background-color: #ffffff !important;
        color: #000 !important;
    }
    .table tbody td {
        background-color: #ffffff !important;
        color: #000 !important;
        border-color: #dee2e6 !important;
    }
    .table thead th {
        background-color: #ffffff !important;
        color: #000 !important;
        border-color: #dee2e6 !important;
    }
    .table tbody tr:hover {
        background-color: #f8f9fa !important;
    }
    
    /* Cards */
    .card {
        background-color: #ffffff !important;
        border-color: #dee2e6 !important;
        color: #000 !important;
    }
    .card-header.bg-light {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }
    .card-header.bg-dark {
        background-color: #6c757d !important;
        color: #ffffff !important;
    }
    
    /* Buttons */
    .btn-outline-dark {
        color: #000 !important;
        border-color: #000 !important;
        background-color: transparent !important;
    }
    .btn-outline-dark:hover {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important;
    }
    
    /* Progress bars */
    .progress {
        background-color: #e9ecef !important;
    }
    .progress-bar {
        background-color: #0d6efd !important;
    }
    /* Pay period overall bar: always success (green); do not use default progress bar blue */
    #payPeriodOverallProgressBar.progress-bar {
        background-color: #198754 !important;
    }
    
    /* Badges */
    .badge.bg-success {
        background-color: #198754 !important;
        color: #ffffff !important;
    }
    .badge.bg-warning {
        background-color: #ffc107 !important;
        color: #000000 !important;
    }
    .badge.bg-info {
        background-color: #0dcaf0 !important;
        color: #ffffff !important;
    }

    /* List groups */
    .list-group-item {
        background-color: #ffffff !important;
        border-color: #dee2e6 !important;
        color: #000 !important;
    }
    
    /* Account settings */
    .employee-settings-page {
        padding-bottom: 2rem !important;
    }
    .account-settings {
        background-color: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        color: #000 !important;
        padding: 2rem 2.25rem !important;
    }
    .account-settings-title {
        color: #181A1B !important;
        border-bottom: 2px solid #dee2e6 !important;
        margin-bottom: 1.75rem !important;
        padding-bottom: 1rem !important;
    }
    .account-settings-form .settings-section {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 0.375rem !important;
        padding: 1.25rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .account-settings-form .settings-section > .form-label {
        color: #181A1B !important;
        font-weight: 600 !important;
    }
    .account-settings-form .form-check-label {
        color: #181A1B !important;
    }
    .account-settings-form .grants-section .grant-code {
        color: #0d6efd !important;
        background-color: transparent !important;
    }
    .account-settings-form .prefs-tree-node {
        border: 1px solid #dee2e6 !important;
        border-radius: 0.375rem !important;
        background-color: #ffffff !important;
        padding: 0.5rem 0.75rem !important;
    }
    .account-settings-form .prefs-tree-node.prefs-tree-nested {
        background-color: #f8f9fa !important;
    }
    .account-settings-form .prefs-tree-summary {
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: #181A1B !important;
        font-weight: 600 !important;
        list-style: none !important;
    }
    .account-settings-form .prefs-tree-summary::-webkit-details-marker {
        display: none !important;
    }
    .account-settings-form .prefs-tree-label {
        color: #181A1B !important;
    }
    .account-settings-form .prefs-tree-children {
        border-color: #ced4da !important;
    }
    .account-settings-form .pref-key {
        color: #495057 !important;
        font-family: monospace !important;
        margin-right: 0.5rem !important;
    }
    .account-settings-form .pref-value {
        color: #0d6efd !important;
        background-color: transparent !important;
        font-size: 0.8rem !important;
    }
    .account-settings-form .prefs-tree-type {
        color: #6c757d !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }
    .account-settings-form .subordinate-name {
        color: #181A1B !important;
    }
    .account-settings-form .subordinate-tree-tier {
        border-color: #ced4da !important;
    }

    /* Employee profile */
    .employee-profile {
        background-color: transparent !important;
        border: none !important;
    }
    .employee-profile h2 {
        color: #181A1B !important;

        padding-bottom: 0.5rem !important;
    }
    
    .employee-profile h3 {
        color: #181A1B !important;

        padding-bottom: 0.5rem !important;
        
    }
    
    .entra-info-section .alert {
        margin-top: 1rem !important;
        padding: 1.25rem !important;
    }
    .profile-field {
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        margin-bottom: 1.5rem !important;
        padding: 1rem !important;
        border-radius: 0.375rem !important;
    }
    .profile-field label {
        color: #181A1B !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        font-weight: 500 !important;
    }
    .profile-field input {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #000 !important;
        margin-top: 0.25rem !important;
    }
    .profile-field input:disabled {
        background-color: #e9ecef !important;
        color: #6c757d !important;
    }
    .profile-overview {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 1.25rem 1.5rem !important;
        background: transparent !important;
        border: 1px solid #d6dde4 !important;
        border-left: 4px solid #4FC4DB !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
        margin-bottom: 1.5rem !important;
        padding: 1.5rem 1.75rem !important;
        border-radius: 0.5rem !important;
    }
    .profile-overview-main {
        flex: 1 1 16rem !important;
        min-width: 0 !important;
    }
    .profile-overview-icon {
        flex: 0 0 auto !important;
        width: 150px !important;
        height: 150px !important;
        display: flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        justify-content: center !important;
    }
    .profile-overview-icon--empty {
        display: none !important;
    }
    .profile-name {
        color: #181A1B !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        margin-bottom: 0.35rem !important;
    }
    .profile-location {
        color: #2f3a46 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.6rem !important;
    }
    .profile-line {
        color: #1f2a36 !important;
        font-size: 1rem !important;
        margin: 0 0 0.65rem 0 !important;
        line-height: 1.45 !important;
    }
    .profile-label {
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.05em !important;
        color: #4c5b6a !important;
        margin-right: 0.35rem !important;
    }
    .profile-manager-link,
    .profile-manager-link:hover,
    .profile-manager-link:focus,
    .profile-manager-link:visited {
        color: #181A1B !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }
    .profile-overview-icon .billing-class-icon {
        width: 100px !important;
        height: 100px !important;
        font-size: 100px !important;
        line-height: 1 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    .profile-overview-icon .billing-class-icon[data-level]::after {
        font-size: 22px !important;
        min-width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        bottom: 2px !important;
        right: 2px !important;
    }
    .profile-overview .profile-line:last-child {
        margin-bottom: 0 !important;
    }
    .profile-overview-diagnostics {
        flex: 1 1 100% !important;
        margin-top: 0.25rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid #dee2e6 !important;
    }
    .profile-diagnostics-report {
        display: block !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        max-height: 55vh !important;
        overflow: auto !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.375rem !important;
        background-color: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        color: #212529 !important;
    }
    
    /* Navigation tabs */
    .sub-nav .nav-tabs {
        border-bottom-color: #dee2e6 !important;
    }
    .sub-nav .nav-link {
        color: #6c757d !important;
        background-color: transparent !important;
        border: 1px solid transparent !important;
    }
    .sub-nav .nav-link:hover {
        color: #000 !important;
        border-color: #dee2e6 !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    .sub-nav .nav-link.active {
        color: #000 !important;
        background-color: #ffffff !important;
        border-color: #dee2e6 !important;
    }
    .nav-tabs .nav-link.active {
    color: #000 !important;
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

    /* ComboBox */
    .combo-box-container .combo-box-input {
    background-color: #ffffff !important;
        color: #000 !important;
    border-color: #ced4da !important;
}
    .combo-box-container .combo-box-input:focus {
    background-color: #ffffff !important;
        color: #000 !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
    .combo-box-container .combo-box-dropdown {
    background-color: #ffffff !important;
        color: #000 !important;
        border-color: #ced4da !important;
        z-index: 1050 !important;
    }
    .combo-box-container .combo-box-dropdown .combo-box-item {
    background-color: #ffffff !important;
        color: #000 !important;
    }
    .combo-box-container .combo-box-dropdown .combo-box-item:hover,
    .combo-box-container .combo-box-dropdown .combo-box-item:focus,
    .combo-box-container .combo-box-dropdown .combo-box-active {
    background-color: #e9ecef !important;
        color: #000 !important;
    }
    
    /* Pikaday Date Picker */
    .pika-single {
    background-color: #ffffff !important;
        color: #1a1a1a !important;
        border-color: #adb5bd !important;
        box-shadow: 0 5px 15px -5px rgba(0,0,0,0.3) !important;
        z-index: 100060 !important;
    }
    .pika-single .pika-title {
    background-color: #ffffff !important;
        color: #1a1a1a !important;
    }
    .pika-single .pika-table th {
        color: #495057 !important;
    background-color: #f8f9fa !important;
}
    .pika-single .pika-table td {
    background-color: #ffffff !important;
    }
    .pika-single .pika-button {
    background-color: #ffffff !important;
        color: #1a1a1a !important;
    }
    .pika-single .pika-button:hover {
        background-color: #dee2e6 !important;
        color: #1a1a1a !important;
    }
    .pika-single .is-today .pika-button {
        color: #0056b3 !important;
        font-weight: bold !important;
    }
    .pika-single .is-selected .pika-button,
    .pika-single .has-event .pika-button {
        background-color: #0056b3 !important;
        color: #ffffff !important;
    }
    .pika-single .is-outside-current-month .pika-button {
        color: #6c757d !important;
        opacity: 0.6 !important;
    }
    .pika-single .is-disabled .pika-button {
    background-color: #f8f9fa !important;
        color: #6c757d !important;
        opacity: 0.7 !important;
    }
    
    /* Scrollbar */
    ::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }
    ::-webkit-scrollbar-thumb {
        background: #c1c1c1 !important;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8 !important;
    }
    
    /* Footer */
    .footer {
    background-color: #f8f9fa !important;
        color: #6c757d !important;
    }
    
    /* Shortcuts section */
    .shortcuts-section .fw-bold {
        color: #2c3e50 !important;
    font-weight: 600 !important;
}
    .shortcuts-section .btn-outline-light {
        color: #2c3e50 !important;
        border-color: #2c3e50 !important;
    background-color: transparent !important;
        font-weight: 600 !important;
    }
    .shortcuts-section .btn-outline-light:hover {
    color: #ffffff !important;
        background-color: #2c3e50 !important;
        border-color: #2c3e50 !important;
    }
    
    /* Chart containers */
    .chart-container canvas {
    background-color: #ffffff !important;
    }
    
    /* Table header styling */
    .table thead th, .filter-label {
        color: #000 !important;
        font-weight: 600 !important;
    }
    
    /* Reserve space for entries table */
    .entries-placeholder { 
        min-height: 180px !important; 
    }
}

/* System preference support - when no data-theme is set */
html:not([data-theme]) {
    /* Use system preference for light mode */
    @media (prefers-color-scheme: light) {
        :root {
            --bs-modal-bg: #ffffff !important;
            --bs-modal-color: #2d3748 !important;
            --bs-modal-border-color: #e2e8f0 !important;
        }
        
        body, html {
            background: linear-gradient(180deg, #627174 0px, #f8f9fa 220px, #f8f9fa 100vh) !important;
            background-color: #f8f9fa !important;
            background-repeat: no-repeat !important;
            color: #000 !important;
        }
        
        .navbar {
            background-color: #bdbdbd !important;
            color: #000 !important;
        }
        
        .footer {
            background-color: #f8f9fa !important;
            color: #6c757d !important;
        }
    }
    
    /* Use system preference for dark mode */
    @media (prefers-color-scheme: dark) {
        :root {
            --bs-body-bg: #2E3435 !important;
            --bs-body-color: #fff !important;
            --bs-border-color: #404040 !important;
            --bs-modal-bg: #2d3748 !important;
            --bs-modal-color: #e2e8f0 !important;
            --bs-modal-border-color: #4a5568 !important;
        }
        
        body, html {
            background-color: #2E3435 !important;
            background: linear-gradient(180deg, #181A1B 125px, #627174 300%) !important;
            background-image: linear-gradient(180deg, #181A1B 125px, #627174 300%) !important;
            background-repeat: no-repeat !important;
            color: #fff !important;
        }
        
        .navbar {
            background-color: #27447e !important;
            color: #ffffff !important;
        }
        
        .footer {
            background-color: #2E3435 !important;
            color: rgba(255, 255, 255, 0.5) !important;
        }
    }
}