/* =================================================================
   Theme CSS Variables and Dark Mode Styles
   SweepSessions - Dark Mode Implementation

   Cross-Browser Support (Story-12):
   - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
   - Includes scrollbar styling for dark mode (Webkit + Firefox)
   - Date/time picker icon inversion for dark mode
   - Select dropdown arrow theming
   - Print media query to force light mode for printing
   - Accessibility: focus-visible, skip links, touch targets, high contrast mode
   - System theme preference detection (prefers-color-scheme)
   - Respects prefers-reduced-motion for animations
   ================================================================= */

/* =================================================================
   Light Theme (Default)
   ================================================================= */
:root,
[data-theme="light"] {
    /* Background Colors */
    --bs-body-bg: #ffffff;
    --bs-secondary-bg: #f8f9fa;
    --bs-tertiary-bg: #e9ecef;

    /* Text Colors */
    --bs-body-color: #212529;
    --bs-secondary-color: #6c757d;
    --bs-tertiary-color: #adb5bd;

    /* Accent Colors */
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;

    /* Border Colors */
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

    /* Component Colors */
    --theme-card-bg: #ffffff;
    --theme-card-border: #dee2e6;
    --theme-input-bg: #ffffff;
    --theme-input-border: #ced4da;
    --theme-input-color: #212529;
    --theme-input-placeholder: #6c757d;
    --theme-table-header-bg: #f8f9fa;
    --theme-table-row-hover: #f8f9fa;
    --theme-table-striped-bg: rgba(0, 0, 0, 0.05);
    --theme-navbar-bg: #ffffff;
    --theme-navbar-color: #212529;
    --theme-dropdown-bg: #ffffff;
    --theme-dropdown-border: #dee2e6;
    --theme-dropdown-link-color: #212529;
    --theme-dropdown-link-hover-bg: #e9ecef;
    --theme-modal-bg: #ffffff;
    --theme-modal-border: #dee2e6;

    /* Button Colors */
    --theme-btn-primary-bg: #0d6efd;
    --theme-btn-primary-color: #ffffff;
    --theme-btn-primary-border: #0d6efd;
    --theme-btn-primary-hover-bg: #0b5ed7;
    --theme-btn-secondary-bg: #6c757d;
    --theme-btn-secondary-color: #ffffff;
    --theme-btn-outline-color: #212529;

    /* Link Colors */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;

    /* Shadows */
    --theme-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    --theme-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* Code/Pre */
    --theme-code-bg: #f8f9fa;
    --theme-code-color: #d63384;

    /* Pagination */
    --theme-pagination-bg: #ffffff;
    --theme-pagination-border: #dee2e6;
    --theme-pagination-color: #0d6efd;
    --theme-pagination-hover-bg: #e9ecef;
    --theme-pagination-active-bg: #0d6efd;
    --theme-pagination-active-color: #ffffff;
    --theme-pagination-disabled-bg: #ffffff;
    --theme-pagination-disabled-color: #6c757d;

    /* Focus ring */
    --theme-focus-ring-color: rgba(13, 110, 253, 0.25);
}

/* =================================================================
   Dark Theme
   ================================================================= */
[data-theme="dark"] {
    /* Background Colors */
    --bs-body-bg: #1a1d21;
    --bs-secondary-bg: #212529;
    --bs-tertiary-bg: #2b3035;

    /* Text Colors */
    --bs-body-color: #e9ecef;
    --bs-secondary-color: #adb5bd;
    --bs-tertiary-color: #6c757d;

    /* Accent Colors - Adjusted for dark backgrounds */
    --bs-primary: #3d8bfd;
    --bs-primary-rgb: 61, 139, 253;
    --bs-secondary: #8c959d;
    --bs-secondary-rgb: 140, 149, 157;
    --bs-success: #20c997;
    --bs-success-rgb: 32, 201, 151;
    --bs-warning: #ffca2c;
    --bs-warning-rgb: 255, 202, 44;
    --bs-danger: #ea868f;
    --bs-danger-rgb: 234, 134, 143;
    --bs-info: #3dd5f3;
    --bs-info-rgb: 61, 213, 243;

    /* Border Colors */
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

    /* Component Colors */
    --theme-card-bg: #212529;
    --theme-card-border: #495057;
    --theme-input-bg: #2b3035;
    --theme-input-border: #495057;
    --theme-input-color: #e9ecef;
    --theme-input-placeholder: #6c757d;
    --theme-table-header-bg: #2b3035;
    --theme-table-row-hover: #2b3035;
    --theme-table-striped-bg: rgba(255, 255, 255, 0.05);
    --theme-navbar-bg: #212529;
    --theme-navbar-color: #e9ecef;
    --theme-dropdown-bg: #212529;
    --theme-dropdown-border: #495057;
    --theme-dropdown-link-color: #e9ecef;
    --theme-dropdown-link-hover-bg: #2b3035;
    --theme-modal-bg: #212529;
    --theme-modal-border: #495057;

    /* Button Colors */
    --theme-btn-primary-bg: #3d8bfd;
    --theme-btn-primary-color: #ffffff;
    --theme-btn-primary-border: #3d8bfd;
    --theme-btn-primary-hover-bg: #5c9cfd;
    --theme-btn-secondary-bg: #8c959d;
    --theme-btn-secondary-color: #ffffff;
    --theme-btn-outline-color: #e9ecef;

    /* Link Colors */
    --bs-link-color: #3d8bfd;
    --bs-link-hover-color: #5c9cfd;

    /* Shadows */
    --theme-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    --theme-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);

    /* Code/Pre */
    --theme-code-bg: #2b3035;
    --theme-code-color: #e685b5;

    /* Pagination */
    --theme-pagination-bg: #212529;
    --theme-pagination-border: #495057;
    --theme-pagination-color: #3d8bfd;
    --theme-pagination-hover-bg: #2b3035;
    --theme-pagination-active-bg: #3d8bfd;
    --theme-pagination-active-color: #ffffff;
    --theme-pagination-disabled-bg: #212529;
    --theme-pagination-disabled-color: #6c757d;

    /* Focus ring */
    --theme-focus-ring-color: rgba(61, 139, 253, 0.25);

    /* Color scheme for browser UI elements */
    color-scheme: dark;
}

/* =================================================================
   Core Element Styles
   ================================================================= */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =================================================================
   Navigation / Navbar
   ================================================================= */
.navbar {
    background-color: var(--theme-navbar-bg) !important;
    border-color: var(--bs-border-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--theme-navbar-color) !important;
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
    color: var(--bs-primary) !important;
}

.navbar-toggler {
    border-color: var(--bs-border-color);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =================================================================
   Cards
   ================================================================= */
.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
}

.card-footer {
    background-color: var(--bs-secondary-bg);
    border-top-color: var(--bs-border-color);
}

/* =================================================================
   Forms / Inputs
   ================================================================= */
.form-control,
.form-select {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-input-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-control::placeholder {
    color: var(--theme-input-placeholder);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--theme-input-bg);
    border-color: var(--bs-primary);
    color: var(--theme-input-color);
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.form-label {
    color: var(--bs-body-color);
}

.form-text {
    color: var(--bs-secondary-color);
}

.form-check-input {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.input-group-text {
    background-color: var(--bs-secondary-bg);
    border-color: var(--theme-input-border);
    color: var(--bs-body-color);
}

/* Date/Time Input Styling for Dark Mode */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-input-color);
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    background-color: var(--theme-input-bg);
    border-color: var(--bs-primary);
    color: var(--theme-input-color);
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
}

/* Calendar/Clock icon color in dark mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* =================================================================
   Tables
   ================================================================= */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--theme-table-striped-bg);
    --bs-table-hover-bg: var(--theme-table-row-hover);
    color: var(--bs-body-color);
}

.table > thead {
    background-color: var(--theme-table-header-bg);
}

.table > thead th {
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.table > tbody > tr > td {
    border-bottom-color: var(--bs-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--theme-table-striped-bg);
    color: var(--bs-body-color);
}

/* Ensure text in all table cells inherits proper color in dark mode */
[data-theme="dark"] .table-striped > tbody > tr > td,
[data-theme="dark"] .table-striped > tbody > tr > th {
    color: var(--bs-body-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--theme-table-row-hover);
}

/* =================================================================
   Buttons
   ================================================================= */
.btn-primary {
    --bs-btn-bg: var(--theme-btn-primary-bg);
    --bs-btn-border-color: var(--theme-btn-primary-border);
    --bs-btn-color: var(--theme-btn-primary-color);
    --bs-btn-hover-bg: var(--theme-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--theme-btn-primary-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-primary-color);
    --bs-btn-active-bg: var(--theme-btn-primary-hover-bg);
    --bs-btn-active-border-color: var(--theme-btn-primary-hover-bg);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #ffffff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #ffffff;
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
}

.btn:focus,
.btn:active:focus {
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
}

/* =================================================================
   Dropdowns
   ================================================================= */
.dropdown-menu {
    background-color: var(--theme-dropdown-bg);
    border-color: var(--theme-dropdown-border);
}

.dropdown-item {
    color: var(--theme-dropdown-link-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--theme-dropdown-link-hover-bg);
    color: var(--theme-dropdown-link-color);
}

.dropdown-divider {
    border-color: var(--bs-border-color);
}

/* =================================================================
   Pagination
   ================================================================= */
.pagination {
    --bs-pagination-bg: var(--theme-pagination-bg);
    --bs-pagination-border-color: var(--theme-pagination-border);
    --bs-pagination-color: var(--theme-pagination-color);
    --bs-pagination-hover-bg: var(--theme-pagination-hover-bg);
    --bs-pagination-hover-border-color: var(--theme-pagination-border);
    --bs-pagination-hover-color: var(--theme-pagination-color);
    --bs-pagination-focus-bg: var(--theme-pagination-hover-bg);
    --bs-pagination-active-bg: var(--theme-pagination-active-bg);
    --bs-pagination-active-border-color: var(--theme-pagination-active-bg);
    --bs-pagination-active-color: var(--theme-pagination-active-color);
    --bs-pagination-disabled-bg: var(--theme-pagination-disabled-bg);
    --bs-pagination-disabled-border-color: var(--theme-pagination-border);
    --bs-pagination-disabled-color: var(--theme-pagination-disabled-color);
}

.page-link {
    background-color: var(--theme-pagination-bg);
    border-color: var(--theme-pagination-border);
    color: var(--theme-pagination-color);
}

/* =================================================================
   Alerts
   ================================================================= */
.alert {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.alert-primary {
    --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

.alert-secondary {
    --bs-alert-bg: rgba(var(--bs-secondary-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-secondary-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

.alert-success {
    --bs-alert-bg: rgba(var(--bs-success-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-success-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

.alert-danger {
    --bs-alert-bg: rgba(var(--bs-danger-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-danger-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

.alert-warning {
    --bs-alert-bg: rgba(var(--bs-warning-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-warning-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

.alert-info {
    --bs-alert-bg: rgba(var(--bs-info-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--bs-info-rgb), 0.3);
    --bs-alert-color: var(--bs-body-color);
}

/* Alert link colors */
.alert a,
.alert .alert-link {
    color: var(--bs-link-color);
    font-weight: 600;
}

.alert a:hover,
.alert .alert-link:hover {
    color: var(--bs-link-hover-color);
}

/* Dark mode alert overrides for better readability */
[data-theme="dark"] .alert-info {
    --bs-alert-bg: rgba(61, 213, 243, 0.2);
    --bs-alert-border-color: rgba(61, 213, 243, 0.5);
    --bs-alert-color: #1a1d21;
}

[data-theme="dark"] .alert-success {
    --bs-alert-bg: rgba(32, 201, 151, 0.2);
    --bs-alert-border-color: rgba(32, 201, 151, 0.5);
    --bs-alert-color: #1a1d21;
}

/* Ensure ALL child elements in dark mode alerts use dark text */
[data-theme="dark"] .alert-info *,
[data-theme="dark"] .alert-success * {
    color: #1a1d21 !important;
}

/* Ensure strong/bold text is also dark */
[data-theme="dark"] .alert-info strong,
[data-theme="dark"] .alert-success strong {
    color: #0d1117 !important;
}

/* Ensure small text is also dark */
[data-theme="dark"] .alert-info .small,
[data-theme="dark"] .alert-success .small {
    color: #2b3035 !important;
}


/* =================================================================
   Badges
   ================================================================= */
.badge {
    transition: background-color 0.3s ease;
}

/* =================================================================
   Modals
   ================================================================= */
.modal-content {
    background-color: var(--theme-modal-bg);
    border-color: var(--theme-modal-border);
}

.modal-header {
    border-bottom-color: var(--bs-border-color);
}

.modal-footer {
    border-top-color: var(--bs-border-color);
}

.btn-close {
    filter: var(--bs-btn-close-filter, none);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =================================================================
   Borders
   ================================================================= */
.border {
    border-color: var(--bs-border-color) !important;
}

.border-top {
    border-top-color: var(--bs-border-color) !important;
}

.border-bottom {
    border-bottom-color: var(--bs-border-color) !important;
}

.border-start {
    border-start-color: var(--bs-border-color) !important;
}

.border-end {
    border-end-color: var(--bs-border-color) !important;
}

/* Color borders */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

/* =================================================================
   Text Colors
   ================================================================= */
.text-dark {
    color: var(--bs-body-color) !important;
}

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

.text-body {
    color: var(--bs-body-color) !important;
}

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

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

.text-success {
    color: var(--bs-success) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

/* =================================================================
   Background Colors
   ================================================================= */
.bg-white {
    background-color: var(--theme-card-bg) !important;
}

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

.bg-body {
    background-color: var(--bs-body-bg) !important;
}

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

.bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
}

/* =================================================================
   Footer
   ================================================================= */
.footer {
    background-color: var(--bs-body-bg);
    border-top-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color);
}

/* =================================================================
   Box Shadow
   ================================================================= */
.box-shadow {
    box-shadow: var(--theme-box-shadow) !important;
}

.shadow-sm {
    box-shadow: var(--theme-box-shadow-sm) !important;
}

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

a:hover {
    color: var(--bs-link-hover-color);
}

/* =================================================================
   Code
   ================================================================= */
code {
    background-color: var(--theme-code-bg);
    color: var(--theme-code-color);
}

pre {
    background-color: var(--theme-code-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* =================================================================
   Lists
   ================================================================= */
.list-group-item {
    background-color: var(--theme-card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.list-group-item:hover {
    background-color: var(--theme-table-row-hover);
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* =================================================================
   Nav Pills / Tabs
   ================================================================= */
.nav-pills .nav-link {
    color: var(--bs-body-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary);
    color: #ffffff;
}

.nav-tabs {
    border-bottom-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
    color: var(--bs-body-color);
    border-color: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--bs-border-color) var(--bs-border-color) transparent;
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* =================================================================
   Accordion
   ================================================================= */
.accordion-item {
    background-color: var(--theme-card-bg);
    border-color: var(--bs-border-color);
}

.accordion-button {
    background-color: var(--theme-card-bg);
    color: var(--bs-body-color);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.accordion-button::after {
    filter: var(--bs-accordion-btn-icon-filter, none);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =================================================================
   Progress Bars
   ================================================================= */
.progress {
    background-color: var(--bs-tertiary-bg);
}

/* =================================================================
   Breadcrumbs
   ================================================================= */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}

.breadcrumb-item.active {
    color: var(--bs-secondary-color);
}

/* =================================================================
   Tooltips & Popovers (if used)
   ================================================================= */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-theme="dark"] .popover {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
}

[data-theme="dark"] .popover-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-theme="dark"] .popover-body {
    color: var(--bs-body-color);
}

/* =================================================================
   Smooth Transitions for Theme Changes
   ================================================================= */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0s;
    transition-timing-function: ease;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition-duration: 0.3s !important;
}

/* =================================================================
   Accessibility: Respect User's Motion Preferences
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   High Contrast Mode Support
   ================================================================= */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --bs-body-color: #ffffff;
        --bs-border-color: #6c757d;
    }
}

/* =================================================================
   Cross-Browser Compatibility Fixes
   ================================================================= */

/* Firefox scrollbar styling for dark mode */
[data-theme="dark"] {
    scrollbar-color: #495057 #1a1d21;
    scrollbar-width: thin;
}

/* Webkit scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1d21;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #6c757d;
}

/* Firefox form element styling */
@-moz-document url-prefix() {
    .form-control,
    .form-select {
        scrollbar-color: var(--bs-secondary-color) var(--theme-input-bg);
    }
}

/* Safari/Webkit date picker background fix */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Firefox calendar picker indicator (different selector) */
[data-theme="dark"] input[type="date"]::-moz-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-moz-calendar-picker-indicator {
    filter: invert(1);
}

/* Safari select dropdown arrow fix */
select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-theme="dark"] select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Edge-specific select fix */
@supports (-ms-ime-align: auto) {
    .form-select::-ms-expand {
        display: none;
    }
}

/* Safari button focus ring fix */
button:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure consistent box-sizing across all browsers */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =================================================================
   Print Styles - Override dark mode for printing
   ================================================================= */
@media print {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --bs-body-bg: #ffffff !important;
        --bs-body-color: #000000 !important;
        --bs-secondary-bg: #f8f9fa !important;
        --theme-card-bg: #ffffff !important;
        --theme-input-bg: #ffffff !important;
        --bs-border-color: #000000 !important;
        color-scheme: light !important;
    }

    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .card,
    .modal-content,
    .dropdown-menu,
    .table {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    /* Hide theme toggle in print */
    #theme-toggle {
        display: none !important;
    }
}

/* =================================================================
   Accessibility Enhancements
   ================================================================= */

/* Visible focus indicator for all interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Skip to main content link (for screen readers) - Enhanced for Bootstrap */
.skip-link.visually-hidden-focusable:focus {
    position: fixed !important;
    top: 10px;
    left: 10px;
    background: var(--bs-primary);
    color: #ffffff !important;
    padding: 12px 24px;
    z-index: 10001;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Ensure minimum touch target size (44x44px) for mobile accessibility */
@media (pointer: coarse) {
    button,
    [role="button"],
    a.btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        min-width: 44px;
    }
}

/* High contrast mode text adjustments */
@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }

    .form-control,
    .form-select {
        border: 2px solid currentColor;
    }

    .card {
        border: 2px solid currentColor;
    }
}

/* =================================================================
   Theme Toggle Button
   ================================================================= */
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bs-body-color);
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#theme-toggle:hover {
    background-color: var(--bs-tertiary-bg);
}

#theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
}

#theme-toggle:focus:not(:focus-visible) {
    box-shadow: none;
}

#theme-toggle:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring-color);
}

#theme-toggle svg {
    transition: transform 0.3s ease;
}

#theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Ensure icon inherits text color properly */
#theme-icon-sun,
#theme-icon-moon {
    color: inherit;
}

/* =================================================================
   Transaction Page Styles
   ================================================================= */

/* Transaction Status Badges/Text */
.status-pending {
    color: var(--bs-warning);
}

.status-completed {
    color: var(--bs-success);
}

.status-denied {
    color: var(--bs-danger);
}

.status-reversed {
    color: var(--bs-secondary-color);
}

/* Transaction Type Indicators */
.type-deposit {
    color: var(--bs-success);
}

.type-redemption {
    color: var(--bs-info);
}

.type-bonus {
    color: var(--bs-warning);
}

.type-adjustment {
    color: var(--bs-secondary-color);
}

/* Currency/Amount Display */
.amount-positive {
    color: var(--bs-success);
}

.amount-negative {
    color: var(--bs-danger);
}

.amount-neutral {
    color: var(--bs-body-color);
}

/* Transaction Table Enhancements */
.table-transactions th {
    font-weight: 600;
    white-space: nowrap;
}

.table-transactions .amount-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* Transaction Details Column */
.transaction-details {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Transaction Filter Form */
.transaction-filters .form-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Transaction Cards (for mobile/detail views) */
.transaction-card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 0.375rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.transaction-card:hover {
    border-color: var(--bs-primary);
}

/* Processing Time Display */
.processing-time {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.processing-time.urgent {
    color: var(--bs-warning);
}

/* Date/Time Display in Tables */
.datetime-cell {
    white-space: nowrap;
    color: var(--bs-body-color);
}

/* Empty State */
.empty-transactions {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}

.empty-transactions .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* =================================================================
   Session Page Styles
   ================================================================= */

/* Live Session Calculator Stats Cards */
.session-stat-card {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 0.375rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.session-stat-card .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Session Table Styles */
.table-sessions th {
    font-weight: 600;
    white-space: nowrap;
}

.table-sessions .amount-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* Session Status Indicators */
.session-active {
    color: var(--bs-success);
    font-weight: 600;
}

.session-completed {
    color: var(--bs-body-color);
}

.session-timer {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.session-timer.running {
    color: var(--bs-success);
}

/* Wager Input Styling */
.wager-input {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    text-align: right;
}

/* Net Win/Loss Display */
.session-net-positive {
    color: var(--bs-success);
    font-weight: 600;
}

.session-net-negative {
    color: var(--bs-danger);
    font-weight: 600;
}

.session-net-neutral {
    color: var(--bs-body-color);
}

/* RTP Display */
.rtp-display {
    font-weight: 600;
}

.rtp-positive {
    color: var(--bs-success);
}

.rtp-negative {
    color: var(--bs-danger);
}

/* Session Date/Time Columns */
.session-datetime {
    white-space: nowrap;
    color: var(--bs-body-color);
}

/* Live Session Modal Spreadsheet Table */
.table-light {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

.table-bordered {
    --bs-table-border-color: var(--bs-border-color);
}

/* Sticky table header in dark mode */
.table .sticky-top {
    background-color: var(--bs-secondary-bg);
}

/* Session Filter Form */
.session-filters .form-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Session Tags */
.session-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    margin: 0.125rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    background-color: var(--bs-secondary);
    color: #ffffff;
}

/* Session Notes Preview */
.session-notes-preview {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    max-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty Sessions State */
.empty-sessions {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}

/* Session Detail Definition List */
.session-details dl dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.session-details dl dd {
    color: var(--bs-body-color);
}

/* =================================================================
   Reports & Dashboard Page Styles
   ================================================================= */

/* Dashboard KPI Cards */
.dashboard-kpi-card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dashboard-kpi-card .card-subtitle {
    color: var(--bs-secondary-color) !important;
}

.dashboard-kpi-card small.text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Report Filter Cards */
.report-filter-card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
}

/* Sticky Table Headers - Theme Aware */
.sticky-top-themed {
    background-color: var(--theme-card-bg) !important;
}

[data-theme="dark"] .sticky-top-themed {
    background-color: var(--theme-card-bg) !important;
}

/* Table Footer (tfoot) Styling */
.table-light,
tfoot.table-light {
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-color: var(--bs-body-color);
}

/* Report-specific Color Classes */
.text-purple {
    color: #6f42c1 !important;
}

[data-theme="dark"] .text-purple {
    color: #a78bfa !important;
}

.text-gold {
    color: #DAA520 !important;
}

[data-theme="dark"] .text-gold {
    color: #fbbf24 !important;
}

.text-brown {
    color: #8B4513 !important;
}

[data-theme="dark"] .text-brown {
    color: #d97706 !important;
}

.border-purple {
    border-color: #6f42c1 !important;
}

[data-theme="dark"] .border-purple {
    border-color: #a78bfa !important;
}

/* Chart Container Dark Mode Support */
.chart-container {
    background-color: var(--theme-card-bg);
    border-radius: 0.375rem;
}

/* Chart Legend - Works in both light and dark modes */
.chart-legend {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.chart-legend strong {
    color: var(--bs-body-color);
}

.legend-item {
    font-weight: 600;
    white-space: nowrap;
}

.legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
    border: 2px solid;
}

.legend-brown {
    background-color: rgba(139, 69, 19, 0.4);
    border-color: #8B4513;
}

.legend-blue {
    background-color: rgba(23, 162, 184, 0.1);
    border-color: #17a2b8;
}

.legend-purple {
    background-color: rgba(111, 66, 193, 0.1);
    border-color: #6f42c1;
}

.legend-gold {
    background-color: rgba(218, 165, 32, 0.5);
    border-color: #DAA520;
}

.legend-green {
    background-color: rgba(40, 167, 69, 0.4);
    border-color: #28a745;
}

.legend-red {
    background-color: rgba(220, 53, 69, 0.4);
    border-color: #dc3545;
}

.legend-yellow {
    background-color: rgba(255, 193, 7, 0.35);
    border-color: #ffc107;
}

/* Dark mode adjustments for chart legend colors */
[data-theme="dark"] .legend-brown {
    background-color: rgba(217, 119, 6, 0.4);
    border-color: #d97706;
}

[data-theme="dark"] .legend-blue {
    background-color: rgba(61, 213, 243, 0.1);
    border-color: #3dd5f3;
}

[data-theme="dark"] .legend-purple {
    background-color: rgba(167, 139, 250, 0.1);
    border-color: #a78bfa;
}

[data-theme="dark"] .legend-gold {
    background-color: rgba(251, 191, 36, 0.5);
    border-color: #fbbf24;
}

[data-theme="dark"] .legend-green {
    background-color: rgba(32, 201, 151, 0.4);
    border-color: #20c997;
}

[data-theme="dark"] .legend-red {
    background-color: rgba(234, 134, 143, 0.4);
    border-color: #ea868f;
}

[data-theme="dark"] .legend-yellow {
    background-color: rgba(250, 204, 21, 0.35);
    border-color: #facc15;
}

/* Report Tables - Amount Cells */
.report-amount-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* Report Date Cells */
.report-date-cell {
    white-space: nowrap;
    color: var(--bs-body-color);
}

/* Report Percentage Display */
.report-percentage {
    font-weight: 600;
}

.report-percentage-positive {
    color: var(--bs-success);
}

.report-percentage-negative {
    color: var(--bs-danger);
}

/* Daily Breakdown Tables */
.table-daily-breakdown th {
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: var(--theme-card-bg);
    z-index: 1;
}

/* Redemption Timing Table */
.table-redemptions .duration-cell {
    white-space: nowrap;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* Net Cashflow Colors */
.cashflow-positive {
    color: var(--bs-success);
}

.cashflow-negative {
    color: var(--bs-danger);
}

/* RTP Display for Reports */
.rtp-value {
    font-weight: 600;
}

.rtp-profitable {
    color: var(--bs-success);
}

.rtp-unprofitable {
    color: var(--bs-danger);
}

/* Alert Tips in Reports */
.alert-tip {
    background-color: rgba(var(--bs-info-rgb), 0.1);
    border-color: rgba(var(--bs-info-rgb), 0.3);
    color: var(--bs-body-color);
}

.alert-tip strong {
    color: var(--bs-info);
}

/* =================================================================
   Account Management Page Styles
   ================================================================= */

/* Account List Table */
.table-accounts th {
    font-weight: 600;
    white-space: nowrap;
}

.table-accounts .amount-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* Account Stat Cards (used in Index and Details pages) */
.account-stat-card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.account-stat-card .text-muted {
    color: var(--bs-secondary-color) !important;
}

.account-stat-card h6.text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Account Summary Card */
.account-summary-card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
}

/* Account Balance Display */
.account-balance-positive {
    color: var(--bs-success);
    font-weight: 600;
}

.account-balance-negative {
    color: var(--bs-danger);
    font-weight: 600;
}

.account-balance-neutral {
    color: var(--bs-body-color);
}

/* Account Status Badges */
.account-status-active {
    background-color: var(--bs-success);
    color: #ffffff;
}

.account-status-inactive {
    background-color: var(--bs-secondary);
    color: #ffffff;
}

.account-promo-banned {
    background-color: var(--bs-danger);
    color: #ffffff;
}

.account-promo-ok {
    background-color: var(--bs-success);
    color: #ffffff;
}

/* Valuation Rate Badge */
.valuation-badge {
    background-color: var(--bs-secondary);
    color: #ffffff;
}

/* Account Details Definition List */
.account-details dl dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.account-details dl dd {
    color: var(--bs-body-color);
}

/* Account Financial Summary Section */
.account-financial-summary .border {
    border-color: var(--bs-border-color) !important;
}

/* Account Currency Display */
.account-currency-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    text-transform: uppercase;
}

/* Account Notes Section */
.account-notes {
    background-color: var(--bs-secondary-bg);
    border-radius: 0.375rem;
    padding: 1rem;
}

/* Account Transaction History */
.account-transactions-table th {
    font-weight: 600;
    white-space: nowrap;
}

/* Inline Balance Form Styling */
.account-balance-form .form-control {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-input-color);
}

.account-balance-form .form-control:focus {
    background-color: var(--theme-input-bg);
    border-color: var(--bs-primary);
    color: var(--theme-input-color);
}

/* RTP Display in Account Stats */
.account-rtp-display {
    font-weight: 600;
}

.account-rtp-positive {
    color: var(--bs-success);
}

.account-rtp-negative {
    color: var(--bs-danger);
}

/* Account Empty State */
.empty-accounts {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}

/* Cashback Display */
.account-cashback {
    color: var(--bs-primary);
    font-weight: 600;
}

/* =================================================================
   Google Sign-In Button Theme Support
   ================================================================= */

/* Light mode: show light button, hide dark button */
:root .google-signin-light,
[data-theme="light"] .google-signin-light {
    display: block !important;
}

:root .google-signin-dark,
[data-theme="light"] .google-signin-dark {
    display: none !important;
}

/* Dark mode: show dark button, hide light button */
[data-theme="dark"] .google-signin-light {
    display: none !important;
}

[data-theme="dark"] .google-signin-dark {
    display: block !important;
}

/* =================================================================
   Header Logo Theme Support
   ================================================================= */

/* Light mode: show light logo, hide dark logo */
:root .header-logo-light,
[data-theme="light"] .header-logo-light {
    display: block !important;
}

:root .header-logo-dark,
[data-theme="light"] .header-logo-dark {
    display: none !important;
}

/* Dark mode: show dark logo, hide light logo */
[data-theme="dark"] .header-logo-light {
    display: none !important;
}

[data-theme="dark"] .header-logo-dark {
    display: block !important;
}