/* ================================================
   Theme System - Refactored Architecture
   ================================================
   Purpose: Simplified, Bootstrap-native theming
   Approach: Bootstrap-first, variable-driven, minimal overrides
   Version: 2.0 (Refactored from 1.0)
   ================================================ */

/* ================================================
   LAYER 1: Bootstrap Core Variable Overrides
   ================================================ */

/* Light Theme (Default) */
:root {
    /* ===== Bootstrap Color System ===== */
    --bs-primary: #006bb7;
    --bs-primary-rgb: 0, 107, 183;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;

    /* ===== Body & Text ===== */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;

    /* ===== Links ===== */
    --bs-link-color: #006bb7;
    --bs-link-hover-color: #004a7f;
    --bs-link-color-rgb: 0, 107, 183;

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

    /* ===== Forms ===== */
    --bs-form-control-bg: #ffffff;
    --bs-form-control-color: #212529;
    --bs-form-control-border-color: #dee2e6;
    --bs-form-control-focus-border-color: #86b7fe;
    --bs-form-control-disabled-bg: #e9ecef;

    /* ===== Buttons ===== */
    --bs-btn-primary-bg: #1b6ec2;
    --bs-btn-primary-border-color: #1861ac;
    --bs-btn-primary-hover-bg: #155ba0;
    --bs-btn-primary-hover-border-color: #144f8e;

    /* ===== Navigation ===== */
    --bs-navbar-color: #212529;
    --bs-navbar-hover-color: #004a7f;
    --bs-navbar-active-color: #006bb7;
    --bs-navbar-bg: #ffffff;

    /* ===== Dropdown ===== */
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: #dee2e6;
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #16181b;
    --bs-dropdown-link-hover-bg: #f8f9fa;

    /* ===== Cards ===== */
    --bs-card-bg: #ffffff;
    --bs-card-border-color: rgba(0, 0, 0, 0.125);

    /* ===== Tables ===== */
    /* Note: Bootstrap 5.3.3 calculates striping automatically:
       --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05)
       We set --bs-emphasis-color-rgb above, Bootstrap does the rest. */
    --bs-table-bg: transparent;
    --bs-table-border-color: #dee2e6;
}

/* Dark Theme */
[data-theme="dark"] {
    /* ===== Bootstrap Color System ===== */
    --bs-primary: #4da3ff;
    --bs-primary-rgb: 77, 163, 255;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #343a40;
    --bs-dark: #f8f9fa;

    /* ===== Body & Text ===== */
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e9ecef;
    --bs-body-color-rgb: 233, 236, 239;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    /* ===== Links ===== */
    --bs-link-color: #6bb6ff;
    --bs-link-hover-color: #90c8ff;
    --bs-link-color-rgb: 107, 182, 255;

    /* ===== Borders ===== */
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.175);

    /* ===== Forms ===== */
    --bs-form-control-bg: #343a40;
    --bs-form-control-color: #e9ecef;
    --bs-form-control-border-color: #495057;
    --bs-form-control-focus-border-color: #4da3ff;
    --bs-form-control-disabled-bg: #2b2b2b;

    /* ===== Buttons ===== */
    --bs-btn-primary-bg: #4da3ff;
    --bs-btn-primary-border-color: #3d8fe6;
    --bs-btn-primary-hover-bg: #3d8fe6;
    --bs-btn-primary-hover-border-color: #2d7acc;

    /* ===== Navigation ===== */
    --bs-navbar-color: #e9ecef;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #4da3ff;
    --bs-navbar-bg: #212529;

    /* ===== Dropdown ===== */
    --bs-dropdown-bg: #2b2b2b;
    --bs-dropdown-border-color: #495057;
    --bs-dropdown-link-color: #e9ecef;
    --bs-dropdown-link-hover-color: #4da3ff;
    --bs-dropdown-link-hover-bg: #343a40;

    /* ===== Cards ===== */
    --bs-card-bg: #2b2b2b;
    --bs-card-border-color: #495057;

    /* ===== Tables ===== */
    --bs-table-bg: transparent;
    --bs-table-border-color: #495057;
}

/* ================================================
   LAYER 2: Application-Specific Variables
   ================================================ */

:root {
    /* ===== Application Colors ===== */
    --app-topbar-bg: var(--bs-navbar-bg);
    --app-topbar-color: var(--bs-navbar-color);
    --app-topbar-border: var(--bs-border-color);

    --app-footer-bg: #f8f9fa;
    --app-footer-color: #6c757d;

    --app-shadow: rgba(0, 0, 0, 0.1);
    --app-shadow-lg: rgba(0, 0, 0, 0.15);

    /* ===== Navigation Colors ===== */
    --app-nav-link-color: var(--bs-body-color);
    --app-nav-link-hover-color: #fff;
    --app-nav-link-hover-bg: rgba(13, 110, 253, 0.8);
    --app-nav-link-active-color: #fff;
    --app-nav-link-active-bg: #0d6efd;

    /* ===== Dropdown Toggle Colors ===== */
    --app-dropdown-toggle-color: #495057;
    --app-dropdown-toggle-bg: transparent;
    --app-dropdown-toggle-border: #ced4da;
    --app-dropdown-toggle-hover-color: #212529;
    --app-dropdown-toggle-hover-bg: #e9ecef;
    --app-dropdown-toggle-hover-border: #6c757d;
}

[data-theme="dark"] {
    --app-footer-bg: #212529;
    --app-footer-color: #adb5bd;

    --app-shadow: rgba(0, 0, 0, 0.3);
    --app-shadow-lg: rgba(0, 0, 0, 0.4);

    /* ===== Navigation Colors (Dark Mode) ===== */
    --app-nav-link-color: #e9ecef;
    --app-nav-link-hover-color: #fff;
    --app-nav-link-hover-bg: rgba(77, 163, 255, 0.8);
    --app-nav-link-active-color: #fff;
    --app-nav-link-active-bg: #4da3ff;

    /* ===== Dropdown Toggle Colors (Dark Mode) ===== */
    --app-dropdown-toggle-color: #e9ecef;
    --app-dropdown-toggle-bg: #2b2b2b;
    --app-dropdown-toggle-border: #495057;
    --app-dropdown-toggle-hover-color: #fff;
    --app-dropdown-toggle-hover-bg: #343a40;
    --app-dropdown-toggle-hover-border: #6c757d;
}

/* ================================================
   LAYER 3: Component Styling (Minimal Overrides)
   ================================================ */

/* Body - Apply background and color */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tables - Explicit striping override (Bootstrap 5.3.3 compatibility) */
/* Note: Due to CSS variable calculation timing, we must explicitly set
   table striping values on the .table selector. Bootstrap's auto-calculation
   doesn't work when our --bs-emphasis-color-rgb override loads after Bootstrap. */
.table {
    border-color: var(--bs-table-border-color);
}

:root .table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}

[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
}

/* Forms - Bootstrap handles most styling automatically via variables */
/* No additional CSS needed - Bootstrap components inherit from --bs-form-control-* */

/* Input groups with icons - ensure proper styling in dark mode */
[data-theme="dark"] .input-group-text {
    background-color: var(--bs-form-control-bg);
    color: var(--bs-form-control-color);
    border-color: var(--bs-form-control-border-color);
}

/* Ensure input fields in groups match the theme */
[data-theme="dark"] .input-group .form-control,
[data-theme="dark"] .input-group .form-select {
    background-color: var(--bs-form-control-bg);
    color: var(--bs-form-control-color);
    border-color: var(--bs-form-control-border-color);
}

/* Focus state for input groups in dark mode */
[data-theme="dark"] .input-group .form-control:focus,
[data-theme="dark"] .input-group .form-select:focus {
    background-color: var(--bs-form-control-bg);
    color: var(--bs-form-control-color);
    border-color: var(--bs-form-control-focus-border-color);
}

/* Buttons - Bootstrap handles most styling automatically via variables */
/* No additional CSS needed - Bootstrap components inherit from --bs-btn-* */

/* Dropdowns - Bootstrap handles most styling automatically via variables */
/* No additional CSS needed - Bootstrap components inherit from --bs-dropdown-* */

/* Header/TopBar - Use Bootstrap navbar variables with !important to override Bootstrap */
.navbar,
header.navbar,
header {
    background-color: var(--app-topbar-bg) !important;
    color: var(--app-topbar-color) !important;
    border-bottom: 1px solid var(--app-topbar-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Topbar branding - always white text on gradient background (needs !important to override generic link rules) */
.topbar-branding .navbar-brand {
    color: #fff !important;
}

.topbar-branding .navbar-brand:hover {
    color: #58a6ff !important;
}

/* Ensure dark mode doesn't override branding colors */
[data-theme="dark"] .topbar-branding .navbar-brand {
    color: #fff !important;
}

[data-theme="dark"] .topbar-branding .navbar-brand:hover {
    color: #58a6ff !important;
}

/* Footer - Use application variables */
footer {
    background-color: var(--app-footer-bg);
    color: var(--app-footer-color);
    border-top: 1px solid var(--bs-border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Accessibility - Focus indicators for dark mode */
[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Accessibility - Disabled element contrast */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .btn:disabled {
    opacity: 0.6;
}

/* ================================================
   Navigation Links (Application-Specific)
   ================================================ */

/* Primary navigation links - need !important to override Bootstrap's .nav-link defaults */
/* Note: Using explicit theme selectors instead of variables for better browser compatibility */

/* Light mode - inherit body color */
.topbar-primary-nav .nav-link {
    color: var(--bs-body-color) !important;
}

.topbar-primary-nav .nav-link:hover {
    color: var(--bs-link-hover-color) !important;
    background-color: rgba(0, 107, 183, 0.1) !important;
}

.topbar-primary-nav .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: rgba(0, 107, 183, 0.15) !important;
}

/* Dark mode - explicit selectors with hardcoded colors (matches original working pattern) */
[data-theme="dark"] .topbar-primary-nav .nav-link {
    color: #e9ecef !important;
}

[data-theme="dark"] .topbar-primary-nav .nav-link:hover {
    color: #fff !important;
    background-color: rgba(77, 163, 255, 0.8) !important;
}

[data-theme="dark"] .topbar-primary-nav .nav-link.active {
    color: #fff !important;
    background-color: #4da3ff !important;
}

/* ================================================
   Dropdown Toggles (Application-Specific)
   ================================================ */

/* Dropdown toggle buttons in topbar - need !important to override Bootstrap's .btn defaults */
.topbar-dropdown .dropdown-toggle,
.topbar-account .dropdown-toggle {
    background-color: var(--app-dropdown-toggle-bg) !important;
    color: var(--app-dropdown-toggle-color) !important;
    border-color: var(--app-dropdown-toggle-border) !important;
}

.topbar-dropdown .dropdown-toggle:hover,
.topbar-account .dropdown-toggle:hover {
    background-color: var(--app-dropdown-toggle-hover-bg) !important;
    color: var(--app-dropdown-toggle-hover-color) !important;
    border-color: var(--app-dropdown-toggle-hover-border) !important;
}

.topbar-dropdown.show .dropdown-toggle,
.topbar-account.show .dropdown-toggle {
    background-color: var(--app-dropdown-toggle-hover-bg) !important;
    color: var(--app-dropdown-toggle-hover-color) !important;
    border-color: var(--bs-primary) !important;
}

/* ================================================
   Dropdown Menus (Dark Mode Enhancements)
   ================================================ */

/* Dark mode dropdown styling - need !important to override Bootstrap */
[data-theme="dark"] .dropdown-menu {
    background-color: #2b2b2b !important;
    border-color: #495057 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown items in dark mode - need !important to override Bootstrap */
[data-theme="dark"] .dropdown-item {
    color: #e9ecef !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #343a40 !important;
    color: #4da3ff !important;
}

[data-theme="dark"] .dropdown-item.active {
    color: #ffffff !important;
    background-color: rgba(77, 163, 255, 0.3) !important;
}

/* Dropdown dividers in dark mode */
[data-theme="dark"] .dropdown-divider {
    border-top-color: #495057 !important;
}

/* ================================================
   Footer Styling (Dark Mode Enhancements)
   ================================================ */

/* Override Bootstrap utility classes in footer for dark mode - needs !important */
[data-theme="dark"] footer.bg-light {
    background-color: var(--app-footer-bg) !important;
}

/* Footer text color utilities */
footer .text-muted {
    color: var(--app-footer-color) !important;
}

/* Footer links in dark mode - needs higher specificity and !important to override .text-muted */
[data-theme="dark"] footer a,
[data-theme="dark"] footer a.text-muted {
    color: #6bb6ff !important;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] footer a.text-muted:hover {
    color: #90c8ff !important;
    text-decoration: underline;
}

/* ================================================
   Text Utilities for Dark Mode
   ================================================ */

/* Fix text-muted for dark mode - needs !important to override Bootstrap's utility class */
[data-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

/* Fix text-body for explicit usage - needs !important to override Bootstrap */
.text-body {
    color: var(--bs-body-color) !important;
}

/* Footer text utilities - need !important to override Bootstrap's utility classes */
footer .text-muted {
    color: var(--app-footer-color) !important;
}

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

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

/* ================================================
   Mobile Navigation (Dark Mode)
   ================================================ */

/* Navbar toggler for mobile - needs !important to override Bootstrap */
[data-theme="dark"] .navbar-toggler {
    border-color: #495057 !important;
    color: #e9ecef !important;
    background-color: transparent !important;
}

[data-theme="dark"] .navbar-toggler:hover {
    background-color: #343a40 !important;
    border-color: #6c757d !important;
}

/* Custom toggler icon for dark mode */
[data-theme="dark"] .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%28233, 236, 239, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile nav menu background - only when menu is shown (mobile) */
@media (max-width: 767px) {
    [data-theme="dark"] .topbar-primary-nav.show {
        background-color: #2b2b2b !important;
        border-top-color: #495057 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Mobile nav menu background */
@media (max-width: 767px) {
    [data-theme="dark"] .topbar-primary-nav.show {
        background-color: var(--bs-dropdown-bg);
        border-top-color: var(--bs-border-color);
        box-shadow: 0 4px 6px var(--app-shadow-lg);
    }
}

/* Navbar toggler icon for dark mode */
[data-theme="dark"] .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%28233, 236, 239, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================================================
   Placeholder Text Styling
   ================================================ */

.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--bs-input-placeholder-color, #6c757d);
    opacity: 1;
}

[data-theme="dark"] .form-control:disabled::placeholder,
[data-theme="dark"] .form-select:disabled::placeholder {
    opacity: 0.5;
}