/* Bay Brothers OS - Dark Mode Styles */
/* CSS Custom Properties for Light and Dark Mode */
/* Perfected color scheme with proper contrast and harmony */

/* ============ ROOT VARIABLES (Light Mode) ============ */
:root {
    /* Primary Brand Colors - Ocean/Water Theme */
    --bb-primary: #0b4f6c;
    --bb-primary-light: #1e6b8a;
    --bb-primary-dark: #094158;
    --bb-primary-subtle: #e7f1f5;
    --bb-secondary: #6c757d;
    --bb-accent: #17a2b8;

    /* Background Colors - Clean and Professional */
    --bb-bg-primary: #ffffff;
    --bb-bg-secondary: #f8f9fa;
    --bb-bg-tertiary: #e9ecef;
    --bb-bg-sidebar: #0b4f6c;
    --bb-bg-nav: #094158;
    --bb-bg-elevated: #ffffff;

    /* Text Colors - High Contrast */
    --bb-text-primary: #212529;
    --bb-text-secondary: #6c757d;
    --bb-text-muted: #868e96;
    --bb-text-inverse: #ffffff;
    --bb-text-light: rgba(255,255,255,0.87);
    --bb-text-on-primary: #ffffff;

    /* Border Colors */
    --bb-border-color: #dee2e6;
    --bb-border-light: #e9ecef;
    --bb-border-dark: #6c757d;
    --bb-border-subtle: #f1f3f4;

    /* Status Colors - Accessible and Clear */
    --bb-success: #28a745;
    --bb-warning: #ffc107;
    --bb-danger: #dc3545;
    --bb-info: #17a2b8;
    
    /* Button Colors */
    --bb-btn-success-bg: #28a745;
    --bb-btn-success-hover-bg: #23913d;
    --bb-btn-warning-bg: #ffc107;
    --bb-btn-warning-hover-bg: #e0a800;
    --bb-btn-info-bg: #17a2b8;
    --bb-btn-info-hover-bg: #138496;
    --bb-btn-danger-bg: #dc3545;
    --bb-btn-danger-hover-bg: #c82333;
    --bb-btn-light-bg: #f8f9fa;
    --bb-btn-light-hover-bg: #e9ecef;

    /* Component Variables */
    --bb-nav-link-color: rgba(255,255,255,0.9);
    --bb-nav-link-hover-color: var(--bb-accent);
    --bb-nav-link-active-bg: rgba(255,255,255,0.1);
    --bb-nav-brand-color: var(--bb-text-primary);

    --bb-card-bg: var(--bb-bg-elevated);
    --bb-card-border: var(--bb-border-light);
    --bb-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    --bb-input-bg: var(--bb-bg-primary);
    --bb-input-border: var(--bb-border-color);
    --bb-input-focus-border: var(--bb-primary);
    --bb-input-focus-shadow: 0 0 0 0.2rem rgba(11, 79, 108, 0.25);

    --bb-table-stripe-bg: var(--bb-bg-secondary);
    --bb-table-hover-bg: var(--bb-bg-secondary);
    --bb-table-border-color: var(--bb-border-light);

    --bb-btn-primary-bg: var(--bb-primary);
    --bb-btn-primary-border: var(--bb-primary);
    --bb-btn-primary-hover-bg: var(--bb-primary-light);
}

/* ============ DARK MODE VARIABLES ============ */
[data-bs-theme="dark"] {
    /* Primary Brand Colors - Adjusted for dark mode */
    --bb-primary: #4fa8c5;
    --bb-primary-light: #6bb8d1;
    --bb-primary-dark: #3a93ad;
    --bb-primary-subtle: #1a2d33;
    --bb-secondary: #8a9196;
    --bb-accent: #52c5db;

    /* Background Colors - True Dark Theme */
    --bb-bg-primary: #0d1117;        /* GitHub-inspired dark */
    --bb-bg-secondary: #161b22;      /* Slightly lighter for cards/sections */
    --bb-bg-tertiary: #21262d;       /* Even lighter for elevated content */
    --bb-bg-sidebar: #0d1921;        /* Darker blue-tinted sidebar */
    --bb-bg-nav: #0a1419;           /* Deepest blue for navigation header */
    --bb-bg-elevated: #1c2128;       /* For cards and modals */

    /* Text Colors - High contrast for accessibility */
    --bb-text-primary: #f0f6fc;      /* Almost white, easy on eyes */
    --bb-text-secondary: #8b949e;    /* Medium gray for secondary text */
    --bb-text-muted: #6e7681;        /* Dimmer gray for muted text */
    --bb-text-inverse: #0d1117;      /* Dark text for light backgrounds */
    --bb-text-light: rgba(240, 246, 252, 0.9);
    --bb-text-on-primary: #ffffff;   /* Pure white on brand colors */

    /* Border Colors - Subtle but visible */
    --bb-border-color: #30363d;      /* Main border color */
    --bb-border-light: #21262d;      /* Lighter borders */
    --bb-border-dark: #484f58;       /* Darker/more prominent borders */
    --bb-border-subtle: #161b22;     /* Very subtle borders */

    /* Status Colors - Darker, accessible versions */
    --bb-success: #3fb950;           /* GitHub green */
    --bb-warning: #d29922;           /* Warmer orange */
    --bb-danger: #f85149;            /* Softer red */
    --bb-info: #58a6ff;             /* Brighter blue */
    
    /* Button Colors - Carefully chosen for dark backgrounds */
    --bb-btn-success-bg: #238636;
    --bb-btn-success-hover-bg: #2ea043;
    --bb-btn-warning-bg: #bf8700;
    --bb-btn-warning-hover-bg: #d29922;
    --bb-btn-info-bg: #0969da;
    --bb-btn-info-hover-bg: #1f6feb;
    --bb-btn-danger-bg: #da3633;
    --bb-btn-danger-hover-bg: #f85149;
    --bb-btn-light-bg: #21262d;
    --bb-btn-light-hover-bg: #30363d;

    /* Component Variables - Dark optimized */
    --bb-nav-link-color: rgba(240, 246, 252, 0.85);
    --bb-nav-link-hover-color: #58a6ff;
    --bb-nav-link-active-bg: rgba(88, 166, 255, 0.15);
    --bb-nav-brand-color: #f0f6fc;

    --bb-card-bg: var(--bb-bg-elevated);
    --bb-card-border: var(--bb-border-color);
    --bb-card-shadow: 0 0.125rem 0.25rem rgba(1, 4, 9, 0.8);

    --bb-input-bg: var(--bb-bg-tertiary);
    --bb-input-border: var(--bb-border-color);
    --bb-input-focus-border: var(--bb-primary);
    --bb-input-focus-shadow: 0 0 0 0.2rem rgba(79, 168, 197, 0.25);

    --bb-table-stripe-bg: var(--bb-bg-secondary);
    --bb-table-hover-bg: var(--bb-bg-tertiary);
    --bb-table-border-color: var(--bb-border-color);

    --bb-btn-primary-bg: var(--bb-primary);
    --bb-btn-primary-border: var(--bb-primary);
    --bb-btn-primary-hover-bg: var(--bb-primary-light);
}

/* Auto-detect system preference for dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        /* Apply same dark colors when system prefers dark mode */
        --bb-primary: #4fa8c5;
        --bb-primary-light: #6bb8d1;
        --bb-primary-dark: #3a93ad;
        --bb-primary-subtle: #1a2d33;
        --bb-secondary: #8a9196;
        --bb-accent: #52c5db;

        --bb-bg-primary: #0d1117;
        --bb-bg-secondary: #161b22;
        --bb-bg-tertiary: #21262d;
        --bb-bg-sidebar: #0d1921;
        --bb-bg-nav: #0a1419;
        --bb-bg-elevated: #1c2128;

        --bb-text-primary: #f0f6fc;
        --bb-text-secondary: #8b949e;
        --bb-text-muted: #6e7681;
        --bb-text-inverse: #0d1117;
        --bb-text-light: rgba(240, 246, 252, 0.9);
        --bb-text-on-primary: #ffffff;

        --bb-border-color: #30363d;
        --bb-border-light: #21262d;
        --bb-border-dark: #484f58;
        --bb-border-subtle: #161b22;

        --bb-success: #3fb950;
        --bb-warning: #d29922;
        --bb-danger: #f85149;
        --bb-info: #58a6ff;

        --bb-btn-success-bg: #238636;
        --bb-btn-success-hover-bg: #2ea043;
        --bb-btn-warning-bg: #bf8700;
        --bb-btn-warning-hover-bg: #d29922;
        --bb-btn-info-bg: #0969da;
        --bb-btn-info-hover-bg: #1f6feb;
        --bb-btn-danger-bg: #da3633;
        --bb-btn-danger-hover-bg: #f85149;
        --bb-btn-light-bg: #21262d;
        --bb-btn-light-hover-bg: #30363d;

        --bb-card-bg: #1c2128;
        --bb-card-border: #30363d;
        --bb-card-shadow: 0 0.125rem 0.25rem rgba(1, 4, 9, 0.8);
        --bb-input-bg: #21262d;
        --bb-input-border: #30363d;
        --bb-input-focus-border: #4fa8c5;
        --bb-input-focus-shadow: 0 0 0 0.2rem rgba(79, 168, 197, 0.25);

        --bb-table-stripe-bg: #161b22;
        --bb-table-hover-bg: #21262d;
        --bb-table-border-color: #30363d;

        --bb-nav-link-color: rgba(240, 246, 252, 0.85);
        --bb-nav-link-hover-color: #58a6ff;
        --bb-nav-link-active-bg: rgba(88, 166, 255, 0.15);
    }
}

/* ============ BASE STYLES ============ */
html, body {
    background-color: var(--bb-bg-primary);
    color: var(--bb-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============ NAVIGATION STYLES ============ */
.navbar-dark, .sidebar {
    background-color: var(--bb-bg-sidebar) !important;
    border-color: var(--bb-border-dark) !important;
}

.navbar-dark .navbar-brand,
.sidebar .navbar-brand {
    color: var(--bb-nav-brand-color, #ffffff) !important;
}

.navbar-dark .nav-link,
.sidebar .nav-link {
    color: var(--bb-nav-link-color) !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-dark .nav-link:hover,
.sidebar .nav-link:hover {
    color: var(--bb-nav-link-hover-color) !important;
    background-color: var(--bb-nav-link-active-bg) !important;
}

.navbar-dark .nav-link.active,
.sidebar .nav-link.active {
    background-color: var(--bb-nav-link-active-bg) !important;
}

/* Sidebar section headers - always visible on dark sidebar background */
.sidebar .nav-section-header,
.offcanvas .nav-section-header {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar .nav-section-header small,
.offcanvas .nav-section-header small,
.sidebar .nav-section-header .text-muted,
.offcanvas .nav-section-header .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* User info section in sidebar */
.sidebar .user-info,
.offcanvas .user-info {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.sidebar .user-info .text-light,
.offcanvas .user-info .text-light {
    color: rgba(255, 255, 255, 0.9) !important;
}

.sidebar .user-info .text-muted,
.offcanvas .user-info .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Sidebar in dark mode - deeper blue tones */
[data-bs-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0d1921, #0a1419) !important;
    border-right: 1px solid #21262d !important;
    box-shadow: inset -1px 0 0 rgba(88, 166, 255, 0.1) !important;
}

[data-bs-theme="dark"] .sidebar .top-row {
    background-color: #0a1419 !important;
    border-bottom: 1px solid rgba(88, 166, 255, 0.15) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link {
    color: rgba(240, 246, 252, 0.85) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    color: #58a6ff !important;
    background-color: rgba(88, 166, 255, 0.15) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
    background-color: rgba(88, 166, 255, 0.2) !important;
    color: #79c0ff !important;
}

[data-bs-theme="dark"] .sidebar .nav-section-header {
    border-top: 1px solid rgba(88, 166, 255, 0.15) !important;
    background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.05), transparent) !important;
}

[data-bs-theme="dark"] .sidebar .nav-section-header small,
[data-bs-theme="dark"] .sidebar .nav-section-header .text-muted {
    color: rgba(139, 148, 158, 0.9) !important;
}

[data-bs-theme="dark"] .sidebar .user-info {
    background-color: rgba(88, 166, 255, 0.08) !important;
    border: 1px solid rgba(88, 166, 255, 0.2) !important;
}

[data-bs-theme="dark"] .sidebar .user-info .text-muted {
    color: #8b949e !important;
}

/* System preference dark mode for sidebar */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .sidebar {
        background: linear-gradient(180deg, #0d1921, #0a1419) !important;
        border-right: 1px solid #21262d !important;
        box-shadow: inset -1px 0 0 rgba(88, 166, 255, 0.1) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .top-row {
        background-color: #0a1419 !important;
        border-bottom: 1px solid rgba(88, 166, 255, 0.15) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .nav-link {
        color: rgba(240, 246, 252, 0.85) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .nav-link:hover {
        color: #58a6ff !important;
        background-color: rgba(88, 166, 255, 0.15) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .nav-link.active {
        background-color: rgba(88, 166, 255, 0.2) !important;
        color: #79c0ff !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .nav-section-header {
        border-top: 1px solid rgba(88, 166, 255, 0.15) !important;
        background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.05), transparent) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .nav-section-header small,
    :root:not([data-bs-theme="light"]) .sidebar .nav-section-header .text-muted {
        color: rgba(139, 148, 158, 0.9) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .user-info {
        background-color: rgba(88, 166, 255, 0.08) !important;
        border: 1px solid rgba(88, 166, 255, 0.2) !important;
    }

    :root:not([data-bs-theme="light"]) .sidebar .user-info .text-muted {
        color: #8b949e !important;
    }
}

/* ============ CARD STYLES ============ */
.card {
    background-color: var(--bb-card-bg) !important;
    border-color: var(--bb-card-border) !important;
    box-shadow: var(--bb-card-shadow) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header {
    background-color: var(--bb-bg-secondary) !important;
    border-color: var(--bb-border-light) !important;
}

/* ============ FORM STYLES ============ */
.form-control, .form-select {
    background-color: var(--bb-input-bg) !important;
    border-color: var(--bb-input-border) !important;
    color: var(--bb-text-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background-color: var(--bb-input-bg) !important;
    border-color: var(--bb-input-focus-border) !important;
    color: var(--bb-text-primary) !important;
    box-shadow: var(--bb-input-focus-shadow) !important;
}

.form-control::placeholder {
    color: var(--bb-text-muted) !important;
}

.form-label {
    color: var(--bb-text-primary) !important;
}

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

/* ============ TABLE STYLES ============ */
.table {
    color: var(--bb-text-primary) !important;
    border-color: var(--bb-table-border-color) !important;
}

.table th, .table td {
    border-color: var(--bb-table-border-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--bb-table-stripe-bg) !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--bb-table-hover-bg) !important;
}

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

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

/* System preference override */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) .table-light {
        background-color: var(--bb-bg-secondary) !important;
        color: var(--bb-text-primary) !important;
    }
}

/* ============ BUTTON STYLES ============ */
.btn-primary {
    background-color: var(--bb-btn-primary-bg) !important;
    border-color: var(--bb-btn-primary-border) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-primary:hover {
    background-color: var(--bb-btn-primary-hover-bg) !important;
    border-color: var(--bb-btn-primary-hover-bg) !important;
}

.btn-outline-primary {
    color: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bb-primary) !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-outline-secondary {
    color: var(--bb-secondary) !important;
    border-color: var(--bb-secondary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--bb-secondary) !important;
    border-color: var(--bb-secondary) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-success {
    background-color: var(--bb-btn-success-bg) !important;
    border-color: var(--bb-btn-success-bg) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-success:hover {
    background-color: var(--bb-btn-success-hover-bg) !important;
    border-color: var(--bb-btn-success-hover-bg) !important;
}

.btn-info {
    background-color: var(--bb-btn-info-bg) !important;
    border-color: var(--bb-btn-info-bg) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-info:hover {
    background-color: var(--bb-btn-info-hover-bg) !important;
    border-color: var(--bb-btn-info-hover-bg) !important;
}

.btn-warning {
    background-color: var(--bb-btn-warning-bg) !important;
    border-color: var(--bb-btn-warning-bg) !important;
    color: var(--bb-text-primary) !important;
}

.btn-warning:hover {
    background-color: var(--bb-btn-warning-hover-bg) !important;
    border-color: var(--bb-btn-warning-hover-bg) !important;
    color: var(--bb-text-primary) !important;
}

.btn-danger {
    background-color: var(--bb-btn-danger-bg) !important;
    border-color: var(--bb-btn-danger-bg) !important;
    color: var(--bb-text-inverse) !important;
}

.btn-danger:hover {
    background-color: var(--bb-btn-danger-hover-bg) !important;
    border-color: var(--bb-btn-danger-hover-bg) !important;
}

.btn-light {
    background-color: var(--bb-btn-light-bg) !important;
    border-color: var(--bb-border-color) !important;
    color: var(--bb-text-primary) !important;
}

.btn-light:hover {
    background-color: var(--bb-btn-light-hover-bg) !important;
    border-color: var(--bb-border-color) !important;
    color: var(--bb-text-primary) !important;
}

.btn-outline-light {
    color: var(--bb-text-light) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--bb-text-light) !important;
}

.text-bg-primary,
.bg-primary,
.card.text-bg-primary {
    background-color: var(--bb-btn-primary-bg) !important;
}

.text-bg-success,
.bg-success,
.card.text-bg-success {
    background-color: var(--bb-btn-success-bg) !important;
}

.text-bg-warning,
.bg-warning,
.card.text-bg-warning {
    background-color: var(--bb-btn-warning-bg) !important;
    color: var(--bb-text-primary) !important;
}

.text-bg-info,
.bg-info,
.card.text-bg-info {
    background-color: var(--bb-btn-info-bg) !important;
}

.text-bg-danger,
.bg-danger,
.card.text-bg-danger {
    background-color: var(--bb-btn-danger-bg) !important;
}

/* ============ BADGE STYLES ============ */
.badge {
    color: var(--bb-text-on-primary);
    font-weight: 500;
}

.badge.bg-secondary {
    background-color: var(--bb-secondary) !important;
    color: var(--bb-text-on-primary) !important;
}

.badge.bg-primary {
    background-color: var(--bb-primary) !important;
    color: var(--bb-text-on-primary) !important;
}

.badge.bg-success {
    background-color: var(--bb-success) !important;
    color: var(--bb-text-on-primary) !important;
}

.badge.bg-danger {
    background-color: var(--bb-danger) !important;
    color: var(--bb-text-on-primary) !important;
}

.badge.bg-warning {
    background-color: var(--bb-warning) !important;
    color: var(--bb-text-primary) !important;
}

.badge.bg-info {
    background-color: var(--bb-info) !important;
    color: var(--bb-text-on-primary) !important;
}

/* ============ MODAL STYLES ============ */
.modal-content {
    background-color: var(--bb-bg-primary) !important;
    border-color: var(--bb-border-color) !important;
}

.modal-header {
    border-color: var(--bb-border-light) !important;
}

.modal-footer {
    border-color: var(--bb-border-light) !important;
}

/* ============ ALERT STYLES ============ */
.alert-primary {
    background-color: rgba(79, 168, 197, 0.15);
    border-color: var(--bb-primary);
    color: var(--bb-primary);
}

[data-bs-theme="dark"] .alert-primary {
    background-color: rgba(79, 168, 197, 0.1);
    border-color: var(--bb-primary);
    color: var(--bb-primary-light);
}

.alert-success {
    background-color: rgba(63, 185, 80, 0.15);
    border-color: var(--bb-success);
    color: var(--bb-success);
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(63, 185, 80, 0.1);
    border-color: var(--bb-success);
    color: #4ac46a;
}

.alert-warning {
    background-color: rgba(210, 153, 34, 0.15);
    border-color: var(--bb-warning);
    color: #856404;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(210, 153, 34, 0.1);
    border-color: var(--bb-warning);
    color: #f0c640;
}

.alert-danger {
    background-color: rgba(248, 81, 73, 0.15);
    border-color: var(--bb-danger);
    color: var(--bb-danger);
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(248, 81, 73, 0.1);
    border-color: var(--bb-danger);
    color: #ff7b72;
}

.alert-info {
    background-color: rgba(88, 166, 255, 0.15);
    border-color: var(--bb-info);
    color: var(--bb-info);
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(88, 166, 255, 0.1);
    border-color: var(--bb-info);
    color: #79c0ff;
}

/* ============ DROPDOWN STYLES ============ */
.dropdown-menu {
    background-color: var(--bb-bg-primary) !important;
    border-color: var(--bb-border-color) !important;
}

.dropdown-item {
    color: var(--bb-text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bb-bg-secondary) !important;
    color: var(--bb-text-primary) !important;
}

/* ============ UTILITY CLASSES ============ */
.bg-bb-primary { background-color: var(--bb-bg-primary) !important; }
.bg-bb-secondary { background-color: var(--bb-bg-secondary) !important; }
.bg-bb-tertiary { background-color: var(--bb-bg-tertiary) !important; }

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

.border-bb { border-color: var(--bb-border-color) !important; }
.border-bb-light { border-color: var(--bb-border-light) !important; }

/* ============ BOOTSTRAP UTILITY OVERRIDES FOR DARK MODE ============ */
/* Fix bg-light appearing as white in dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bb-bg-secondary) !important;
    color: var(--bb-text-primary) !important;
}

/* Also handle when system prefers dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) .bg-light {
        background-color: var(--bb-bg-secondary) !important;
        color: var(--bb-text-primary) !important;
    }
}

/* Additional Bootstrap background overrides for dark mode */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bb-bg-primary) !important;
    color: var(--bb-text-primary) !important;
}

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

/* Text color fixes for Bootstrap utilities in dark mode */
[data-bs-theme="dark"] .text-dark {
    color: var(--bb-text-primary) !important;
}

[data-bs-theme="dark"] .text-light {
    color: var(--bb-text-secondary) !important;
}

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

/* Auto-detect system preference overrides */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) .bg-white {
        background-color: var(--bb-bg-primary) !important;
        color: var(--bb-text-primary) !important;
    }
    
    :root:not([data-bs-theme]) .bg-dark {
        background-color: var(--bb-bg-tertiary) !important;
        color: var(--bb-text-primary) !important;
    }
    
    :root:not([data-bs-theme]) .text-dark {
        color: var(--bb-text-primary) !important;
    }
    
    :root:not([data-bs-theme]) .text-light {
        color: var(--bb-text-secondary) !important;
    }
    
    :root:not([data-bs-theme]) .text-muted {
        color: var(--bb-text-muted) !important;
    }
}

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle {
    background: none;
    border: none;
    color: var(--bb-nav-link-color);
    font-size: 1.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: var(--bb-nav-link-active-bg);
    color: var(--bb-nav-link-hover-color);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle i {
    transition: transform 0.3s ease;
    display: inline-block;
}

.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Add a subtle glow effect in dark mode */
[data-bs-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 0 0.5rem rgba(88, 166, 255, 0.2);
}

/* ============ VALIDATION STYLES ============ */
.validation-message {
    color: var(--bb-danger) !important;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--bb-success) !important;
}

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

/* ============ PAGE LAYOUT STYLES ============ */
.page {
    background-color: var(--bb-bg-primary);
    color: var(--bb-text-primary);
}

.content {
    background-color: var(--bb-bg-primary);
}

.top-row {
    background-color: var(--bb-bg-secondary);
    border-bottom: 1px solid var(--bb-border-light);
}

/* ============ LOADING SPINNER STYLES ============ */
.spinner-border {
    border-color: var(--bb-primary);
    border-right-color: transparent;
}

.spinner-border-sm {
    border-color: currentColor;
    border-right-color: transparent;
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
@media (max-width: 767.98px) {
    .sidebar {
        background-color: var(--bb-bg-sidebar) !important;
    }
}

/* ============ FOCUS STYLES ============ */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--bb-input-focus-shadow) !important;
    outline: none !important;
}

/* Enhanced focus styles for dark mode */
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 168, 197, 0.4) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bb-primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 168, 197, 0.25) !important;
}

/* ============ ANIMATION CLASSES ============ */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Smooth transitions for all theme-aware elements */
*, *::before, *::after {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Faster transitions for interactive elements */
.btn, .form-control, .form-select, .nav-link, .dropdown-item {
    transition: all 0.15s ease;
}

/* Preserve existing animation intentions */
.theme-toggle, .theme-toggle i {
    transition: all 0.3s ease;
}

/* Special handling for elements that should not transition */
.spinner-border, .spinner-border-sm, 
[class*="animate"], [class*="spin"] {
    transition: none;
}

/* ============ PRINT STYLES ============ */
@media print {
    :root {
        --bb-bg-primary: #ffffff;
        --bb-bg-secondary: #ffffff;
        --bb-text-primary: #000000;
        --bb-text-secondary: #666666;
    }
    
    /* Remove shadows and animations for print */
    * {
        box-shadow: none !important;
        transition: none !important;
    }
}

/* ============ ENHANCED VISUAL DEPTH ============ */
/* Subtle elevation for cards in dark mode */
[data-bs-theme="dark"] .card {
    background: linear-gradient(145deg, #1c2128, #161b22) !important;
    border: 1px solid #30363d !important;
    backdrop-filter: blur(10px) !important;
}

[data-bs-theme="dark"] .card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 0.25rem 0.75rem rgba(1, 4, 9, 0.8) !important;
}

/* Enhanced modal appearance in dark mode */
[data-bs-theme="dark"] .modal-content {
    background: linear-gradient(145deg, #1c2128, #161b22) !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 1rem 3rem rgba(1, 4, 9, 0.9) !important;
}

/* Improved dropdown in dark mode */
[data-bs-theme="dark"] .dropdown-menu {
    background: linear-gradient(145deg, #1c2128, #161b22) !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 0.5rem 1rem rgba(1, 4, 9, 0.6) !important;
}

/* Enhanced sidebar visual depth */
[data-bs-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0d1921, #0a1419) !important;
    border-right: 1px solid #21262d !important;
    box-shadow: inset -1px 0 0 rgba(88, 166, 255, 0.1) !important;
}

/* Better visual hierarchy for navigation */
[data-bs-theme="dark"] .nav-section-header {
    background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.05), transparent) !important;
    border-top: 1px solid #21262d !important;
    border-bottom: 1px solid #21262d !important;
}

/* Refined table appearance */
[data-bs-theme="dark"] .table {
    background-color: transparent !important;
}

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

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: rgba(88, 166, 255, 0.08) !important;
}