/* ===================================
   Dark Mode — Residual Overrides
   Aurora-Tokens (fairy-aurora.css) handle all color/bg/text switching
   automatically. This file contains ONLY dark-specific effects that
   go beyond simple color-swapping: glow effects, neon shadows,
   icon brightness, and WCAG-specific contrast exceptions.
   =================================== */

/* ===============================
   Dark-mode RGB Tokens — covers [data-bs-theme="dark"] which
   fairy-aurora.css doesn't currently target. fairy-aurora.css already
   sets --primary-rgb / --accent-rgb under html[data-theme="dark"];
   here we mirror them for the Bootstrap theme-switch selector.
   =============================== */
[data-bs-theme="dark"] {
    --primary-rgb: 56, 189, 248;
    --accent-rgb:  167, 139, 250;
    --success-rgb: 52, 211, 153;
    --warning-rgb: 251, 191, 36;
    --danger-rgb:  248, 113, 113;
}

/* ===============================
   Dark-mode Shadows — re-declared here so [data-bs-theme="dark"]
   (Bootstrap theme-switch) gets the same glow treatment that
   html[data-theme="dark"] already gets from fairy-aurora.css.
   Tokens compose via --primary-rgb (defined above).
   =============================== */
[data-bs-theme="dark"] {
    --shadow-sm: 0 2px 4px rgb(0, 0, 0, 0.4),  0 0 8px  rgb(var(--primary-rgb), 0.10); /* design-spec: dark-mode token definition with glow */
    --shadow-md: 0 4px 12px rgb(0, 0, 0, 0.5), 0 0 12px rgb(var(--primary-rgb), 0.15); /* design-spec: dark-mode token definition with glow */
    --shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.6), 0 0 20px rgb(var(--primary-rgb), 0.20); /* design-spec: dark-mode token definition with glow */
}

/* ===============================
   KPI Card — Dark hover glow effect
   =============================== */
[data-theme="dark"] .kpi-card:hover,
[data-bs-theme="dark"] .kpi-card:hover {
    box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3), 0 0 20px rgb(var(--primary-rgb), 0.15); /* design-spec: dark-mode premium glow composite */
}

[data-theme="dark"] .kpi-card::after,
[data-bs-theme="dark"] .kpi-card::after {
    background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb), 0.08));
}

/* ===============================
   Alerts — Dark Mode text color exceptions
   In dark mode alerts need lighter text colors for readability
   (Aurora surface/fg alone isn't enough on the glow backgrounds).
   =============================== */
html[data-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .alert-info,
[data-theme="dark"] .alert.alert-info,
[data-bs-theme="dark"] .alert.alert-info {
    color: var(--primary) !important; /* light cyan text on dark */
}

html[data-theme="dark"] .alert-warning,
html[data-bs-theme="dark"] .alert-warning,
[data-theme="dark"] .alert.alert-warning,
[data-bs-theme="dark"] .alert.alert-warning {
    color: var(--warning-text) !important; /* light amber text on dark */
}

html[data-theme="dark"] .alert-danger,
html[data-bs-theme="dark"] .alert-danger,
[data-theme="dark"] .alert.alert-danger,
[data-bs-theme="dark"] .alert.alert-danger {
    color: var(--danger) !important; /* light red text on dark */
}

html[data-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .alert-success,
[data-theme="dark"] .alert.alert-success,
[data-bs-theme="dark"] .alert.alert-success {
    color: var(--success) !important; /* light green text on dark */
}

html[data-theme="dark"] .alert h1,
html[data-theme="dark"] .alert h2,
html[data-theme="dark"] .alert h3,
html[data-theme="dark"] .alert h4,
html[data-theme="dark"] .alert h5,
html[data-theme="dark"] .alert h6,
html[data-bs-theme="dark"] .alert h1,
html[data-bs-theme="dark"] .alert h2,
html[data-bs-theme="dark"] .alert h3,
html[data-bs-theme="dark"] .alert h4,
html[data-bs-theme="dark"] .alert h5,
html[data-bs-theme="dark"] .alert h6 {
    color: inherit !important;
}

/* ===============================
   Stat Card Icon — Dark gradient + glow
   =============================== */
[data-theme="dark"] .stat-card-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}

/* ===============================
   Info/Warning/Success/Danger boxes — Dark glow
   =============================== */
[data-theme="dark"] .info-box,
[data-bs-theme="dark"] .info-box {
    background-color: var(--primary-tint) !important;
    border-color: rgb(var(--primary-rgb), 0.5) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .warning-box,
[data-bs-theme="dark"] .warning-box {
    background-color: var(--warning-glow) !important;
    border-color: rgb(var(--warning-rgb), 0.5) !important;
    color: var(--warning-text) !important;
}

[data-theme="dark"] .success-box,
[data-bs-theme="dark"] .success-box {
    background-color: var(--success-glow) !important;
    border-color: rgb(var(--success-rgb), 0.5) !important;
    color: var(--success) !important;
}

[data-theme="dark"] .danger-box,
[data-bs-theme="dark"] .danger-box {
    background-color: var(--danger-glow) !important;
    border-color: rgb(var(--danger-rgb), 0.5) !important;
    color: var(--danger) !important;
}

/* ===============================
   Card Headers with bg-* — Dark gradient variants
   These override light-mode .card-header.bg-primary/success/etc
   with dark-friendly gradients + proper text contrast.
   =============================== */
[data-theme="dark"] .card-header.bg-primary,
[data-bs-theme="dark"] .card-header.bg-primary {
    background: linear-gradient(135deg, var(--primary-strong), var(--primary-hover)) !important;
    color: var(--on-primary) !important;
}

[data-theme="dark"] .card-header.bg-success,
[data-bs-theme="dark"] .card-header.bg-success {
    background: linear-gradient(135deg, var(--success-strong), var(--success)) !important;
    color: var(--on-success) !important;
}

[data-theme="dark"] .card-header.bg-warning,
[data-bs-theme="dark"] .card-header.bg-warning {
    background: linear-gradient(135deg, var(--warning-strong), var(--warning)) !important;
    color: var(--on-warning) !important;
}

[data-theme="dark"] .card-header.bg-danger,
[data-bs-theme="dark"] .card-header.bg-danger {
    background: linear-gradient(135deg, var(--danger-strong), var(--danger)) !important;
    color: var(--on-danger) !important;
}

[data-theme="dark"] .card-header.bg-info,
[data-bs-theme="dark"] .card-header.bg-info {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary)) !important;
    color: var(--on-primary) !important;
}

[data-theme="dark"] .card-header.bg-secondary,
[data-bs-theme="dark"] .card-header.bg-secondary {
    background: linear-gradient(135deg, var(--fg-2), var(--fg-3)) !important;
    color: var(--surface) !important;
}

[data-theme="dark"] .card-header.bg-dark,
[data-bs-theme="dark"] .card-header.bg-dark {
    background: linear-gradient(135deg, var(--surface), var(--surface-2)) !important;
    color: var(--fg) !important;
}

/* Ensure card header icons match text color */
[data-theme="dark"] .card-header.bg-primary .bi,
[data-theme="dark"] .card-header.bg-success .bi,
[data-theme="dark"] .card-header.bg-danger .bi,
[data-theme="dark"] .card-header.bg-info .bi,
[data-theme="dark"] .card-header.bg-secondary .bi,
[data-theme="dark"] .card-header.bg-dark .bi,
[data-bs-theme="dark"] .card-header.bg-primary .bi,
[data-bs-theme="dark"] .card-header.bg-success .bi,
[data-bs-theme="dark"] .card-header.bg-danger .bi,
[data-bs-theme="dark"] .card-header.bg-info .bi,
[data-bs-theme="dark"] .card-header.bg-secondary .bi,
[data-bs-theme="dark"] .card-header.bg-dark .bi {
    color: inherit !important;
}

[data-theme="dark"] .card-header.bg-warning .bi,
[data-bs-theme="dark"] .card-header.bg-warning .bi {
    color: var(--on-warning) !important;
}

/* ===============================
   Bootstrap Icons — Dark Glow Effects
   These text-shadow/filter effects are purely dark-mode decorative.
   =============================== */
[data-theme="dark"] .bi,
[data-theme="dark"] i.bi,
[data-theme="dark"] [class^="bi-"],
[data-theme="dark"] [class*=" bi-"],
[data-bs-theme="dark"] .bi,
[data-bs-theme="dark"] i.bi,
[data-bs-theme="dark"] [class^="bi-"],
[data-bs-theme="dark"] [class*=" bi-"] {
    color: inherit;
    text-shadow: 0 0 8px currentColor;
    filter: drop-shadow(0 0 1px rgb(255, 255, 255, 0.3));
}

[data-theme="dark"] .bi::before,
[data-theme="dark"] [class^="bi-"]::before,
[data-theme="dark"] [class*=" bi-"]::before,
[data-bs-theme="dark"] .bi::before,
[data-bs-theme="dark"] [class^="bi-"]::before,
[data-bs-theme="dark"] [class*=" bi-"]::before {
    color: inherit;
}

[data-theme="dark"] .btn .bi,
[data-theme="dark"] .btn .bi::before,
[data-bs-theme="dark"] .btn .bi,
[data-bs-theme="dark"] .btn .bi::before {
    color: inherit !important;
    text-shadow: 0 0 6px currentColor;
    filter: none;
}

[data-theme="dark"] .bi:not(.btn .bi, .nav-link .bi, .dropdown-item .bi),
[data-bs-theme="dark"] .bi:not(.btn .bi, .nav-link .bi, .dropdown-item .bi) {
    color: var(--fg);
    text-shadow: 0 0 10px currentColor;
}

[data-theme="dark"] .card-header .bi,
[data-theme="dark"] .card-header i.bi,
[data-bs-theme="dark"] .card-header .bi,
[data-bs-theme="dark"] .card-header i.bi {
    color: var(--primary) !important;
    text-shadow: 0 0 8px var(--primary), 0 0 16px rgb(var(--primary-rgb), 0.5);
    filter: drop-shadow(0 0 2px var(--primary));
}

/* Icon glow for text-* utility classes */
[data-theme="dark"] .text-primary .bi,
[data-bs-theme="dark"] .text-primary .bi {
    color: var(--primary) !important;
    text-shadow: 0 0 8px var(--primary), 0 0 16px rgb(var(--primary-rgb), 0.4);
}

[data-theme="dark"] .text-success .bi,
[data-bs-theme="dark"] .text-success .bi {
    color: var(--success) !important;
    text-shadow: 0 0 8px var(--success), 0 0 16px rgb(var(--success-rgb), 0.4);
}

[data-theme="dark"] .text-danger .bi,
[data-bs-theme="dark"] .text-danger .bi {
    color: var(--danger) !important;
    text-shadow: 0 0 8px var(--danger), 0 0 16px rgb(var(--danger-rgb), 0.4);
}

[data-theme="dark"] .text-warning .bi,
[data-bs-theme="dark"] .text-warning .bi {
    color: var(--warning) !important;
    text-shadow: 0 0 8px var(--warning), 0 0 16px rgb(var(--warning-rgb), 0.4);
}

[data-theme="dark"] .text-info .bi,
[data-bs-theme="dark"] .text-info .bi {
    color: var(--primary) !important;
    text-shadow: 0 0 8px var(--primary), 0 0 16px rgb(var(--primary-rgb), 0.4);
}

[data-theme="dark"] .text-muted .bi,
[data-bs-theme="dark"] .text-muted .bi {
    color: var(--fg-3) !important;
    text-shadow: 0 0 4px rgb(var(--sev-neutral-rgb), 0.4);
}

/* Special glow classes */
[data-theme="dark"] .bi-glow-cyan,
[data-bs-theme="dark"] .bi-glow-cyan {
    color: var(--primary) !important;
    text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px rgb(var(--primary-rgb), 0.5);
    filter: drop-shadow(0 0 3px var(--primary));
}

[data-theme="dark"] .bi-glow-pink,
[data-bs-theme="dark"] .bi-glow-pink {
    color: var(--accent) !important;
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 30px rgb(var(--accent-rgb), 0.5);
    filter: drop-shadow(0 0 3px var(--accent));
}

[data-theme="dark"] .bi-glow-purple,
[data-bs-theme="dark"] .bi-glow-purple {
    color: var(--accent) !important;
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 30px rgb(var(--tone-purple-rgb), 0.5);
    filter: drop-shadow(0 0 3px var(--accent));
}

/* Hover glow intensification */
[data-theme="dark"] a:hover .bi,
[data-theme="dark"] button:hover .bi,
[data-theme="dark"] .btn:hover .bi,
[data-bs-theme="dark"] a:hover .bi,
[data-bs-theme="dark"] button:hover .bi,
[data-bs-theme="dark"] .btn:hover .bi {
    filter: drop-shadow(0 0 4px currentColor) brightness(1.1);
}

/* Reduce glow for small icons */
[data-theme="dark"] .bi.fs-6,
[data-theme="dark"] small .bi,
[data-theme="dark"] .btn-sm .bi,
[data-bs-theme="dark"] .bi.fs-6,
[data-bs-theme="dark"] small .bi,
[data-bs-theme="dark"] .btn-sm .bi {
    text-shadow: 0 0 4px currentColor;
    filter: none;
}

/* No glow in tables */
[data-theme="dark"] table .bi,
[data-theme="dark"] .table .bi,
[data-bs-theme="dark"] table .bi,
[data-bs-theme="dark"] .table .bi {
    text-shadow: 0 0 3px currentColor;
    filter: none;
}

/* Disable glow for reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] .bi,
    [data-bs-theme="dark"] .bi {
        text-shadow: none !important;
        filter: none !important;
    }
}

/* ===============================
   Accessibility — Reduced Motion
   =============================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===============================
   Print — Force Light Mode
   =============================== */
@media print {
    .theme-toggle {
        display: none !important;
    }
}

/* ===============================
   Light Mode — Stat Card Icon shadow
   =============================== */
:root:not([data-theme="dark"], [data-bs-theme="dark"]) .stat-card-icon {
    box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1) !important; /* design-spec: singular stat-card icon lift */
}