@layer theme-base {
/* Dark Mode Theme Variables */
:root {
    /* Global theme variables - these should be the ONLY global variables */
    /* Light theme variables (default) */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;

    --theme-text-primary: #2d3748;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #718096;

    --theme-border-color: rgba(0, 0, 0, 0.125);
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --theme-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --theme-surface-1: #ffffff;
    --theme-surface-2: #f8f9fa;
    --theme-surface-3: #e9ecef;

    --theme-divider: rgba(0, 0, 0, 0.1);

    /* Semantic colors remain consistent */
    --theme-primary: #00a69c;
    --theme-success: #10b981;
    --theme-info: #3b82f6;
    --theme-warning: #f59e0b;
    --theme-danger: #ef4444;

    /* Backward compatibility aliases */
    --bg-primary: var(--theme-bg-primary);
    --bg-secondary: var(--theme-bg-secondary);
    --bg-tertiary: var(--theme-bg-tertiary);
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-muted);
    --border-color: var(--theme-border-color);
    --shadow-sm: var(--theme-shadow-sm);
    --shadow: var(--theme-shadow);
    --shadow-lg: var(--theme-shadow-lg);
    --surface-1: var(--theme-surface-1);
    --surface-2: var(--theme-surface-2);
    --surface-3: var(--theme-surface-3);
    --divider: var(--theme-divider);
    --primary: var(--theme-primary);
    --success: var(--theme-success);
    --info: var(--theme-info);
    --warning: var(--theme-warning);
    --danger: var(--theme-danger);
}

/* Background pattern implementation */
.pattern-bg {
    background-repeat: repeat !important;
    background-size: auto !important;
    background-position: center center;
}

/* Dark mode overrides using data-bs-theme attribute */
[data-bs-theme="dark"],
body.dark-mode {
    /* Dark theme colors override the theme variables */
    --theme-bg-primary: #0f172a;
    --theme-bg-secondary: #1e293b;
    --theme-bg-tertiary: #334155;

    --theme-text-primary: #e2e8f0;
    --theme-text-secondary: #cbd5e1;
    --theme-text-muted: #94a3b8;

    /* Backward compatibility alias - must be explicitly set in dark mode
       because the @layer declaration doesn't cascade properly */
    --text-primary: #e2e8f0;

    --theme-border-color: rgba(255, 255, 255, 0.1);
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --theme-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    --theme-surface-1: #1e293b;
    --theme-surface-2: #334155;
    --theme-surface-3: #475569;

    /* Note: Backward compatibility aliases defined in @layer theme-base
       must be explicitly overridden here (see --text-primary above) */

    --theme-divider: rgba(255, 255, 255, 0.1);

    /* Bootstrap class overrides */
    --bs-light-rgb: 51, 65, 85; /* Darker shade for .bg-light in dark mode */

    /* Button system defaults (brand-neutral) */
    --btn-primary-bg: linear-gradient(135deg, var(--league-primary, var(--theme-primary)) 0%, var(--league-gradient, var(--theme-primary)) 100%);
    --btn-primary-fg: var(--league-primary-text, #ffffff);
    --btn-primary-border: var(--league-primary, var(--theme-primary));

    --btn-contrast-bg: var(--theme-surface-2, #334155);
    --btn-contrast-fg: var(--theme-text-primary, #e2e8f0);
    --btn-contrast-border: var(--theme-border-color, rgba(255, 255, 255, 0.1));

    --btn-outline-bg: transparent;
    --btn-outline-fg: var(--league-primary, var(--theme-primary));
    --btn-outline-border: var(--league-primary, var(--theme-primary));
    --btn-outline-bg-hover: rgba(var(--league-primary-rgb, 0, 166, 156), 0.15);
    --btn-outline-fg-hover: var(--league-primary-text, #ffffff);

    --btn-focus-ring: #22d3ee;
    --btn-focus-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
    --btn-disabled-bg: var(--theme-surface-3, #475569);
    --btn-disabled-fg: var(--theme-text-primary, #e2e8f0);
    --btn-disabled-border: rgba(255, 255, 255, 0.2);

    /* Nav tab overrides */
    --bs-nav-tabs-link-active-color: var(--text-primary);
    --bs-nav-tabs-link-active-bg: var(--surface-2);
    --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--surface-2);

    /* Breadcrumb overrides */
    --bs-breadcrumb-divider-color: var(--text-muted);
    --bs-breadcrumb-item-active-color: var(--text-primary);

    /* Link color overrides for dark theme (avoid bright bootstrap blue) */
    --bs-link-color: var(--text-primary);
    --bs-link-hover-color: var(--text-secondary);

    /* CRITICAL: Override Bootstrap's blue primary colors for dark mode */
    /* These prevent bright blue from appearing throughout the UI */
    --bs-primary: #00a69c;
    --bs-primary-rgb: 0, 166, 156;
    --bs-info: #67d4cd;
    --bs-info-rgb: 103, 212, 205;
    --bs-link-color-rgb: 226, 232, 240;

    /* Semantic colors adjusted for dark mode readability */
    --theme-primary: #00c4b8;
    --theme-info: #67d4cd;
    --theme-success: #34d399;
    --theme-warning: #fbbf24;
    --theme-danger: #f87171;

    /* Backward compat aliases for dark mode */
    --primary: var(--theme-primary);
    --info: var(--theme-info);
    --success: var(--theme-success);
    --warning: var(--theme-warning);
    --danger: var(--theme-danger);
}

/* Ensure league headers use light text in dark mode even if
   inline styles set custom variables to dark values. Inline
   custom properties on the header can incorrectly force black
   text; these important overrides restore readable colors. */
[data-bs-theme="dark"] .league-header,
body.dark-mode .league-header {
    --league-primary-text: var(--text-primary) !important;
    --theme-text-primary: var(--text-primary) !important;
    --theme-heading-color: var(--text-primary) !important;
}

/* Base Elements */
[data-bs-theme="dark"] body,
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Global overrides for bg-light */
[data-bs-theme="dark"] .bg-light,
body.dark-mode .bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* Handle text in bg-light elements */
[data-bs-theme="dark"] .bg-light h1,
[data-bs-theme="dark"] .bg-light h2,
[data-bs-theme="dark"] .bg-light h3,
[data-bs-theme="dark"] .bg-light h4,
[data-bs-theme="dark"] .bg-light h5,
[data-bs-theme="dark"] .bg-light h6,
body.dark-mode .bg-light h1,
body.dark-mode .bg-light h2,
body.dark-mode .bg-light h3,
body.dark-mode .bg-light h4,
body.dark-mode .bg-light h5,
body.dark-mode .bg-light h6 {
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .bg-light p,
[data-bs-theme="dark"] .bg-light span,
[data-bs-theme="dark"] .bg-light div,
body.dark-mode .bg-light p,
body.dark-mode .bg-light span,
body.dark-mode .bg-light div {
    color: var(--text-secondary) !important;
}

/* Typography */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: var(--text-primary);
}

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

/* PDGA Logo - Auto-swap to white in dark mode for proper contrast
   Per PDGA brand guidelines: use white/reverse version on dark backgrounds */
[data-bs-theme="dark"] .pdga-icon-inline,
body.dark-mode .pdga-icon-inline {
    filter: brightness(0) invert(1);
}

/* For explicitly dark backgrounds (regardless of theme mode),
   add .pdga-dark-bg class to parent or use ViewData["PdgaDarkBackground"] */
.pdga-dark-bg .pdga-icon-inline {
    filter: brightness(0) invert(1);
}

/* Cards */
[data-bs-theme="dark"] .card {
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--surface-2);
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .card-header h2,
[data-bs-theme="dark"] .card-header h3,
[data-bs-theme="dark"] .card-header h4 {
    color: var(--text-primary);
}

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

[data-bs-theme="dark"] .card-body {
    background-color: var(--surface-1);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .card-body h3.text-primary {
    color: var(--info) !important;
}

[data-bs-theme="dark"] .card-body .bg-light {
    background-color: var(--surface-2) !important;
}

[data-bs-theme="dark"] .card-body strong {
    color: var(--text-primary);
}

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

[data-bs-theme="dark"] .card-body > p {
    color: var(--text-secondary);
}

[data-bs-theme="dark"] .card-footer {
    background-color: var(--surface-2);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .card-footer .text-end,
[data-bs-theme="dark"] .card-footer.text-end,
[data-bs-theme="dark"] .card-footer.text-center {
    color: var(--text-primary) !important;
}
/* Alerts - Styles moved to alert-modern.css */

/* Forms */
[data-bs-theme="dark"] .form-control {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--surface-2);
    border-color: var(--info);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.form-select {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] select.form-control option,
[data-bs-theme="dark"] select.form-select option {
    background-color: var(--surface-1);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] .bg-light .form-check-label,
[data-bs-theme="dark"] .card-body .form-check-label {
    color: var(--text-primary) !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    color: var(--text-primary);
    --bs-table-bg: var(--surface-1);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-active-bg: var(--surface-3);
    --bs-table-active-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    --bs-table-hover-color: var(--text-primary);
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    border-color: var(--border-color);
    color: var(--text-primary) !important;
    background-color: transparent;
}

/* Buttons */
[data-bs-theme="dark"] .btn-primary {
    background-color: var(--info);
    border-color: var(--info);
    color: white !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active {
    background-color: color-mix(in srgb, var(--info) 80%, white) !important;
    border-color: color-mix(in srgb, var(--info) 85%, white) !important;
    color: white !important;
}

[data-bs-theme="dark"] .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: white !important;
}

[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-danger:focus,
[data-bs-theme="dark"] .btn-danger:active {
    background-color: color-mix(in srgb, var(--danger) 80%, white) !important;
    border-color: color-mix(in srgb, var(--danger) 85%, white) !important;
    color: white !important;
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Lists */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Navigation */
[data-bs-theme="dark"] .navbar {
    background-color: var(--surface-1);
    border-bottom: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

[data-bs-theme="dark"] .nav-link:hover {
    color: var(--text-primary);
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--surface-1);
    border-color: var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Specific fix for user dropdown menu */
[data-bs-theme="dark"] .dropdown-menu-user,
[data-bs-theme="dark"] .dropdown-menu-modern.dropdown-menu-user,
[data-bs-theme="dark"] .navbar .dropdown-menu-user,
.dark-mode .dropdown-menu-user,
.dark-mode .dropdown-menu-modern.dropdown-menu-user,
.dark-mode .navbar .dropdown-menu-user {
    background-color: var(--theme-bg-secondary, #1e293b) !important;
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--theme-text-primary, #e2e8f0) !important;
}

/* User dropdown items in dark mode */
[data-bs-theme="dark"] .dropdown-menu-user .dropdown-item,
.dark-mode .dropdown-menu-user .dropdown-item {
    color: var(--theme-text-primary, #e2e8f0) !important;
}

[data-bs-theme="dark"] .dropdown-menu-user .dropdown-header,
.dark-mode .dropdown-menu-user .dropdown-header {
    color: var(--theme-text-muted, #94a3b8) !important;
}

[data-bs-theme="dark"] .dropdown-menu-user .dropdown-divider,
.dark-mode .dropdown-menu-user .dropdown-divider {
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* Specific fix for admin dropdown menu */
[data-bs-theme="dark"] .dropdown-menu-admin,
[data-bs-theme="dark"] .dropdown-menu-modern.dropdown-menu-admin,
[data-bs-theme="dark"] .navbar .dropdown-menu-admin,
.dark-mode .dropdown-menu-admin,
.dark-mode .dropdown-menu-modern.dropdown-menu-admin,
.dark-mode .navbar .dropdown-menu-admin {
    background-color: var(--theme-bg-secondary, #1e293b) !important;
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--theme-text-primary, #e2e8f0) !important;
}

/* Admin dropdown items in dark mode */
[data-bs-theme="dark"] .dropdown-menu-admin .dropdown-item,
.dark-mode .dropdown-menu-admin .dropdown-item {
    color: var(--theme-text-primary, #e2e8f0) !important;
}

[data-bs-theme="dark"] .dropdown-menu-admin .dropdown-header,
.dark-mode .dropdown-menu-admin .dropdown-header {
    color: var(--theme-text-muted, #94a3b8) !important;
}

[data-bs-theme="dark"] .dropdown-menu-admin .dropdown-divider,
.dark-mode .dropdown-menu-admin .dropdown-divider {
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* History dropdown menu dark mode fix */
[data-bs-theme="dark"] .dropdown-menu-history,
[data-bs-theme="dark"] .dropdown-menu-modern.dropdown-menu-history,
.dark-mode .dropdown-menu-history,
.dark-mode .dropdown-menu-modern.dropdown-menu-history {
    background-color: var(--theme-bg-secondary, #1e293b) !important;
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--theme-text-primary, #e2e8f0) !important;
}

/* Additional specificity for browsers that might need it */
@media (prefers-color-scheme: dark) {
    .dropdown-menu-user,
    .dropdown-menu-modern.dropdown-menu-user {
        background-color: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
    }

    .dropdown-menu-user .dropdown-item {
        color: #e2e8f0 !important;
    }

    .dropdown-menu-user .dropdown-header {
        color: #94a3b8 !important;
    }

    .dropdown-menu-admin,
    .dropdown-menu-modern.dropdown-menu-admin {
        background-color: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
    }

    .dropdown-menu-admin .dropdown-item {
        color: #e2e8f0 !important;
    }

    .dropdown-menu-admin .dropdown-header {
        color: #94a3b8 !important;
    }
}

/* Comprehensive fix for ALL modern dropdown menus */
[data-bs-theme="dark"] .dropdown-menu-modern,
[data-bs-theme="dark"] .dropdown-menu.dropdown-menu-modern,
.dark-mode .dropdown-menu-modern,
.dark-mode .dropdown-menu.dropdown-menu-modern {
    background-color: var(--theme-bg-secondary, #1e293b) !important;
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--theme-text-primary, #e2e8f0) !important;
}

/* Ensure all dropdown items in modern dropdowns have proper colors */
[data-bs-theme="dark"] .dropdown-menu-modern .dropdown-item,
.dark-mode .dropdown-menu-modern .dropdown-item {
    color: var(--theme-text-primary, #e2e8f0) !important;
}

[data-bs-theme="dark"] .dropdown-menu-modern .dropdown-header,
.dark-mode .dropdown-menu-modern .dropdown-header {
    color: var(--theme-text-muted, #94a3b8) !important;
}

[data-bs-theme="dark"] .dropdown-menu-modern .dropdown-divider,
.dark-mode .dropdown-menu-modern .dropdown-divider {
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* Additional browser compatibility with media query */
@media (prefers-color-scheme: dark) {
    .dropdown-menu-modern {
        background-color: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
    }

    .dropdown-menu-modern .dropdown-item {
        color: #e2e8f0 !important;
    }

    .dropdown-menu-modern .dropdown-header {
        color: #94a3b8 !important;
    }
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-2);
    color: var(--text-primary);
    text-decoration: none;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
    background-color: var(--info);
    color: #ffffff;
}

/* Alerts */

:is([data-bs-theme="dark"], body.dark-mode) {
    --alert-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    --alert-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.3);

    --alert-default-accent: var(--flipt-secondary, var(--theme-secondary, #1e7bc9));
    --alert-default-bg: color-mix(in srgb, var(--alert-default-accent) 22%, transparent);
    --alert-default-border: color-mix(in srgb, var(--alert-default-accent) 48%, transparent);
    --alert-default-text: color-mix(in srgb, var(--alert-default-accent) 65%, var(--text-primary, #e2e8f0));
    --alert-default-link: color-mix(in srgb, var(--alert-default-accent) 78%, var(--text-primary, #e2e8f0));

    --alert-success-bg: color-mix(in srgb, var(--success) 24%, transparent);
    --alert-success-border: color-mix(in srgb, var(--success) 48%, transparent);
    --alert-success-text: color-mix(in srgb, var(--success) 70%, white);
    --alert-success-link: color-mix(in srgb, var(--success) 70%, white);
    --alert-success-accent: color-mix(in srgb, var(--success) 85%, white);

    --alert-info-bg: color-mix(in srgb, var(--info) 22%, transparent);
    --alert-info-border: color-mix(in srgb, var(--info) 45%, transparent);
    --alert-info-text: color-mix(in srgb, var(--info) 75%, white);
    --alert-info-link: color-mix(in srgb, var(--info) 75%, white);
    --alert-info-accent: color-mix(in srgb, var(--info) 85%, white);

    --alert-warning-bg: color-mix(in srgb, var(--warning) 28%, transparent);
    --alert-warning-border: color-mix(in srgb, var(--warning) 52%, transparent);
    --alert-warning-text: color-mix(in srgb, var(--warning) 68%, white);
    --alert-warning-link: color-mix(in srgb, var(--warning) 72%, white);
    --alert-warning-accent: color-mix(in srgb, var(--warning) 88%, white);

    --alert-danger-bg: color-mix(in srgb, var(--danger) 24%, transparent);
    --alert-danger-border: color-mix(in srgb, var(--danger) 48%, transparent);
    --alert-danger-text: color-mix(in srgb, var(--danger) 72%, white);
    --alert-danger-link: color-mix(in srgb, var(--danger) 72%, white);
    --alert-danger-accent: color-mix(in srgb, var(--danger) 85%, white);

    --alert-primary-bg: color-mix(in srgb, var(--info) 22%, transparent);
    --alert-primary-border: color-mix(in srgb, var(--info) 45%, transparent);
    --alert-primary-text: color-mix(in srgb, var(--info) 75%, white);
    --alert-primary-link: color-mix(in srgb, var(--info) 75%, white);
    --alert-primary-accent: color-mix(in srgb, var(--info) 85%, white);

    --alert-secondary-bg: color-mix(in srgb, var(--theme-text-muted) 22%, transparent);
    --alert-secondary-border: color-mix(in srgb, var(--theme-text-muted) 40%, transparent);
    --alert-secondary-text: color-mix(in srgb, var(--theme-text-muted) 70%, white);
    --alert-secondary-link: color-mix(in srgb, var(--theme-text-muted) 70%, white);
    --alert-secondary-accent: color-mix(in srgb, var(--theme-text-muted) 85%, white);

    --alert-light-bg: var(--surface-2);
    --alert-light-border: var(--border-color);
    --alert-light-text: var(--text-primary);
    --alert-light-link: var(--text-primary);
    --alert-light-accent: var(--info);

    --alert-secondary-bg: color-mix(in srgb, var(--alert-default-accent) 18%, transparent);
    --alert-secondary-border: color-mix(in srgb, var(--alert-default-accent) 36%, transparent);
    --alert-secondary-text: color-mix(in srgb, var(--alert-default-accent) 62%, white);
    --alert-secondary-link: color-mix(in srgb, var(--alert-default-accent) 72%, white);
    --alert-secondary-accent: color-mix(in srgb, var(--alert-default-accent) 85%, white);

    --alert-light-bg: color-mix(in srgb, var(--surface-2) 75%, transparent);
    --alert-light-border: color-mix(in srgb, var(--border-color) 60%, transparent);
    --alert-light-text: var(--text-primary);
    --alert-light-link: var(--text-primary);
    --alert-light-accent: color-mix(in srgb, var(--alert-default-accent) 65%, white);

    --alert-dark-bg: var(--surface-3);
    --alert-dark-border: color-mix(in srgb, var(--surface-3) 90%, black);
    --alert-dark-text: var(--text-primary);
    --alert-dark-link: var(--text-primary);
    --alert-dark-accent: color-mix(in srgb, var(--flipt-primary, #00b8a9) 40%, rgba(255, 255, 255, 0.12));

    --alert-close-filter: invert(1) grayscale(100%) brightness(185%);
}

/* Links: rely on Bootstrap variables set above
   Default dark mode link color = var(--bs-link-color) which is bound
   to var(--text-primary). Remove global blue override to prevent
   unintended styling (e.g., player names on awards pages). */

/* Progress bars */
[data-bs-theme="dark"] .progress {
    background-color: var(--surface-2);
}

/* Badges */
[data-bs-theme="dark"] .badge {
    color: var(--text-primary);
}

/* Tooltips */
[data-bs-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--surface-3);
    color: var(--text-primary);
}

/* Code blocks */
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
    background-color: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Custom scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface-1);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 5px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--surface-2);
}

/* User selection */
[data-bs-theme="dark"] ::selection {
    background-color: var(--info);
    color: var(--text-primary);
}

/* Focus styles */
[data-bs-theme="dark"] :focus {
    outline-color: var(--info);
}

/* Placeholder text - exclude form-floating inputs */
[data-bs-theme="dark"] :not(.form-floating) ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Keep form-floating placeholders transparent as Bootstrap intends */
[data-bs-theme="dark"] .form-floating > .form-control::placeholder {
    color: transparent !important;
}

/* Accordions */
[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: var(--surface-1);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-btn-bg: var(--surface-1);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-active-bg: var(--surface-2);
    --bs-accordion-active-color: var(--text-primary);
}

[data-bs-theme="dark"] .accordion-item {
    border-color: var(--border-color);
    background-color: var(--surface-1);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--surface-1);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--surface-2);
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

[data-bs-theme="dark"] .accordion-body {
    background-color: var(--surface-1);
    color: var(--text-secondary);
}

/* Tab navigation */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    background-color: transparent;
    border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link:focus {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--text-primary);
    background-color: var(--surface-2);
    border-color: var(--border-color) var(--border-color) var(--surface-2);
}

/* Breadcrumbs */
[data-bs-theme="dark"] .breadcrumb {
    background-color: var(--surface-1);
    border: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--info);
}

[data-bs-theme="dark"] .breadcrumb-item a:hover {
    color: color-mix(in srgb, var(--info) 80%, white);
    text-decoration: none;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Form text helper */
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .form-text-small {
    color: var(--text-secondary) !important;
}

/* Input groups */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* High contrast mode support */
@media (forced-colors: active) {
    :root {
        --text-primary: CanvasText;
        --text-secondary: CanvasText;
        --text-muted: GrayText;
        --border-color: CanvasText;
    }
}

/* Theme Toggle Button - Improved contrast in dark mode */
[data-bs-theme="dark"] #theme-toggle-button,
[data-bs-theme="dark"] #theme-toggle-button-mobile {
    color: var(--bs-light) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] #theme-toggle-button:hover,
[data-bs-theme="dark"] #theme-toggle-button-mobile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] #theme-toggle-button:focus,
[data-bs-theme="dark"] #theme-toggle-button-mobile:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

/* Theme toggle button icons */
[data-bs-theme="dark"] #theme-toggle-button i,
[data-bs-theme="dark"] #theme-toggle-button-mobile i {
    color: var(--bs-light) !important;
}

/* Dropdown version of theme toggle */
[data-bs-theme="dark"] .dropdown-item i.fa-sun {
    color: #fbbf24 !important;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Attribute-based dark theme overrides generated from prefers-color-scheme blocks */
/* Source: Views/BonusCodeAdmin/Index.cshtml */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: var(--theme-surface-1, #1e293b) !important;
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .table-light {
    background-color: var(--theme-surface-1, #334155);
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .table-light th {
    color: var(--theme-text-primary, #e2e8f0);
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1));
}

[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--theme-border-color, rgba(255, 255, 255, 0.1));
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    background: var(--theme-surface-1, #1e293b);
    color: var(--theme-text-secondary, #94a3b8);
    border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1));
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--theme-text-primary, #e2e8f0);
    background-color: var(--theme-surface-1, #1e293b);
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1)) var(--theme-border-color, rgba(255, 255, 255, 0.1)) var(--theme-surface-1, #1e293b);
}

[data-bs-theme="dark"] .group-header {
    background-color: var(--theme-surface-2, #334155) !important;
    border-bottom-color: var(--theme-border-color, rgba(255, 255, 255, 0.1));
}

[data-bs-theme="dark"] .group-header h6 {
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .group-toggle {
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.1));
    background: var(--theme-surface-1, #1e293b);
    color: var(--theme-text-secondary, #94a3b8);
}

[data-bs-theme="dark"] .group-toggle:hover {
    background: var(--theme-surface-2, #334155);
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .progress-circle-container .progress {
    background-color: var(--theme-surface-2, #334155);
}

[data-bs-theme="dark"] .redemption-summary .fw-semibold {
    color: var(--theme-text-primary, #e2e8f0);
}

[data-bs-theme="dark"] .redemption-summary small {
    color: var(--theme-text-muted, #94a3b8);
}

/* Source: Views/ImageManagement/Index.cshtml */
[data-bs-theme="dark"] .card {
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

[data-bs-theme="dark"] .card-body, [data-bs-theme="dark"] .modal-content {
    background-color: var(--surface-1);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    background-color: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

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

/* Source: Templates/ThemeCSS/theme-css.hbs */
[data-bs-theme="dark"] :root {
    --league-overlay-light: rgba(255, 255, 255, 0.1);
    --league-overlay-dark: rgba(0, 0, 0, 0.8);
    --league-glass-effect: rgba(255, 255, 255, 0.05);
    --league-glass-border: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .text-overlay-container {
    background: var(--league-overlay-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .badge-theme,
[data-bs-theme="dark"] .theme-pill {
    background: var(--league-overlay-dark);
    color: var(--league-primary-text);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Source: wwwroot/css/darktheme.css */
[data-bs-theme="dark"] .dropdown-menu-user,
[data-bs-theme="dark"] .dropdown-menu-modern.dropdown-menu-user {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-user .dropdown-item {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-user .dropdown-header {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .dropdown-menu-admin,
[data-bs-theme="dark"] .dropdown-menu-modern.dropdown-menu-admin {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-admin .dropdown-item {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-admin .dropdown-header {
    color: #94a3b8 !important;
}

/* Source: wwwroot/css/darktheme.css */
[data-bs-theme="dark"] .dropdown-menu-modern {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-modern .dropdown-item {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .dropdown-menu-modern .dropdown-header {
    color: #94a3b8 !important;
}