/* ═══════════════════════════════════════════════════════════════════════
   PPG Glass Theme — glassmorphism / frosted-panel aesthetic
   Apply to portal/base.html for demo; expand to admin base after approval
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body & immersive gradient background ───────────────────────────── */
html, body {
    background-color: transparent !important;
}

body {
    background-image: linear-gradient(135deg,
        #0b0e18 0%,
        #131729 35%,
        #1a1235 65%,
        #0c1520 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

/* Soft glow orbs behind everything for depth */
body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
body::before {
    top: -15%;
    left: -8%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(99,102,241,0.13) 0%, transparent 68%);
    animation: glass-orb 22s ease-in-out infinite alternate;
}
body::after {
    bottom: -12%;
    right: -5%;
    width: 48vw;
    height: 48vw;
    background: radial-gradient(circle, rgba(14,165,233,0.10) 0%, transparent 68%);
    animation: glass-orb 28s ease-in-out infinite alternate-reverse;
}
@keyframes glass-orb {
    from { transform: translate(0, 0)   scale(1);   }
    to   { transform: translate(4%, 3%) scale(1.08); }
}

/* Position content above the body orbs via DOM paint order.
   NO z-index here — adding z-index would create a stacking context that traps
   Bootstrap modals (z-index 1055) and backdrops (1050) inside z-index: 1,
   causing the backdrop to render over the modal dialog. */
.sidebar, .main-content, .mobile-topbar { position: relative; }

/* ── Typographic micro-polish ─────────────────────────────────────────── */
body  { font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.01em; }


/* ─────────────────────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────────────────────── */

/* ── Sidebar ── */
.sidebar {
    background: rgba(10, 12, 22, 0.62) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.offcanvas-portal,
.offcanvas-admin {
    background: rgba(10, 12, 22, 0.82) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── Mobile topbar ── */
.mobile-topbar {
    background: rgba(10, 12, 22, 0.72) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Sidebar nav links ── */
.sidebar .nav-link {
    transition: background 0.15s, color 0.15s !important;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: rgba(255,255,255,0.09) !important;
    color: #fff !important;
}

/* ── stat-card & cards ── */
.stat-card {
    background: rgba(255,255,255,0.045) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 1rem !important;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.stat-card:hover {
    box-shadow:
        0 10px 36px rgba(0,0,0,0.48),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px) !important;
}

/* Bootstrap .card */
.card {
    background: rgba(255,255,255,0.045) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.card.bg-dark,
.card[style*="background:#1e2129"],
.card[style*="background: #1e2129"] {
    background: rgba(255,255,255,0.04) !important;
}

/* card header/footer */
.card-header,
.card-header.bg-dark {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0 !important;
}
.card-footer,
.card-footer.bg-dark {
    background: rgba(255,255,255,0.03) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px) !important;
}

/* Inline-style cards (hard-coded background colours in templates) */
[style*="background:#1e2129"],
[style*="background: #1e2129"],
[style*="background:#1a1d23"],
[style*="background: #1a1d23"] {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Tables ── */
/* Override Bootstrap's default yellowish/greenish hover tint on all tables */
.table {
    --bs-table-hover-bg: rgba(255,255,255,0.06) !important;
    --bs-table-hover-color: inherit !important;
    --bs-table-striped-bg: rgba(255,255,255,0.03) !important;
    --bs-table-active-bg: rgba(255,255,255,0.08) !important;
}
.table-dark,
.table-dark > :not(caption) > * > * {
    --bs-table-bg: transparent !important;
    --bs-table-hover-bg: rgba(255,255,255,0.06) !important;
    --bs-table-hover-color: inherit !important;
    background: transparent !important;
}
.table-dark tr:hover > td,
.table-dark tr:hover > th {
    background: rgba(255,255,255,0.06) !important;
}
/* Catch any remaining tr:hover on non-dark tables */
.table tbody tr:hover > td,
.table tbody tr:hover > th {
    background: rgba(255,255,255,0.06) !important;
}

/* All thead th — broad selector catches tables inside AND outside .table-responsive */
thead th,
.table-responsive table thead th {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.90) !important;
}
/* Contextual thead classes (table-secondary, table-dark etc.) — strip Bootstrap's opaque override */
thead.table-secondary > tr > th,
thead.table-secondary th,
thead.table-dark > tr > th,
thead.table-dark th,
.table-secondary thead th,
.table-dark thead th {
    --bs-table-bg: transparent !important;
    --bs-table-color: rgba(255,255,255,0.90) !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.90) !important;
}
/* Sticky thead needs enough opacity so scrolling rows don't bleed through */
thead.sticky-top th,
.sticky-top thead th,
.table-responsive thead th {
    background: rgba(18,22,40,0.82) !important;
    z-index: 3;
}

/* ── Form controls ── */
.form-control,
.form-select,
.form-control.bg-dark,
.form-select.bg-dark,
.input-group-text,
.input-group-text.bg-dark {
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.11) !important;
    color: #f1f3f9 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}
.form-control:focus,
.form-select:focus {
    background-color: rgba(255,255,255,0.09) !important;
    border-color: rgba(99,102,241,0.60) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
}
.form-control::placeholder { color: rgba(255,255,255,0.28) !important; }
/* Native <option> elements inside any select — overrides OS white popup */
.form-select option,
select option {
    background-color: #1a1d27;
    color: #f1f3f9;
}
.form-select option:checked,
select option:checked {
    background-color: #2d3250;
    color: #fff;
}

/* ── Buttons ── */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-light {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 0.5rem !important;
    transition: box-shadow 0.18s, background 0.15s !important;
}
.btn-outline-primary:hover   { box-shadow: 0 0 12px rgba(13,110,253,0.30) !important; }
.btn-outline-danger:hover    { box-shadow: 0 0 12px rgba(220,53,69,0.30)  !important; }
.btn-outline-success:hover   { box-shadow: 0 0 12px rgba(25,135,84,0.30)  !important; }
.btn-outline-info:hover      { box-shadow: 0 0 12px rgba(13,202,240,0.30) !important; }
.btn-outline-warning:hover   { box-shadow: 0 0 12px rgba(255,193,7,0.30)  !important; }
.btn-outline-secondary:hover { box-shadow: 0 0 10px rgba(255,255,255,0.10) !important; }

.btn-primary {
    background: rgba(13,110,253,0.85) !important;
    backdrop-filter: blur(8px) !important;
    border-color: rgba(13,110,253,0.90) !important;
    box-shadow: 0 0 16px rgba(13,110,253,0.28) !important;
    border-radius: 0.5rem !important;
}
.btn-primary:hover {
    background: rgba(13,110,253,1) !important;
    box-shadow: 0 0 24px rgba(13,110,253,0.42) !important;
}

/* ── Alerts ── */
.alert {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 0.85rem !important;
}
.alert-success   { background: rgba(25,135,84,0.11)    !important; border-color: rgba(25,135,84,0.38)    !important; }
.alert-danger    { background: rgba(220,53,69,0.11)     !important; border-color: rgba(220,53,69,0.40)    !important; }
.alert-warning   { background: rgba(255,193,7,0.09)     !important; border-color: rgba(255,193,7,0.38)    !important; }
.alert-info      { background: rgba(13,202,240,0.08)    !important; border-color: rgba(13,202,240,0.35)   !important; }
.alert-secondary { background: rgba(108,117,125,0.09)   !important; border-color: rgba(108,117,125,0.35)  !important; }
.alert-primary   { background: rgba(13,110,253,0.09)    !important; border-color: rgba(13,110,253,0.35)   !important; }

/* ── Modals ── */
.modal-content {
    background: rgba(10,12,22,0.82) !important;
    backdrop-filter: blur(26px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 28px 72px rgba(0,0,0,0.60) !important;
    color: rgba(255,255,255,0.90) !important;
}
/* Strip Bootstrap's opaque bg-dark / text-white / border-secondary that templates hardcode */
.modal-content.bg-dark,
.modal-content[class*="bg-dark"],
.modal-content.text-white,
.modal-content.text-light {
    background: rgba(10,12,22,0.82) !important;
    color: rgba(255,255,255,0.90) !important;
}
.modal-header,
.modal-footer {
    border-color: rgba(255,255,255,0.08) !important;
}
.modal-header.border-secondary,
.modal-footer.border-secondary {
    border-color: rgba(255,255,255,0.08) !important;
}
/* btn-close inside dark glass modals: invert gives white X */
.modal-content .btn-close {
    filter: invert(1) opacity(0.75) !important;
}
.modal-content .btn-close:hover {
    filter: invert(1) opacity(1) !important;
}

/* ── Dropdowns & popovers ── */
.dropdown-menu,
.popover {
    background: rgba(10,12,22,0.90) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 14px 44px rgba(0,0,0,0.50) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255,255,255,0.07) !important;
}
.popover-body   { background: transparent !important; }
.popover-header { background: rgba(255,255,255,0.05) !important; border-bottom-color: rgba(255,255,255,0.08) !important; border-radius: calc(0.85rem - 1px) calc(0.85rem - 1px) 0 0 !important; }

/* ── Nav-tabs & nav-pills ── */
.nav-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
    color: rgba(255,255,255,0.60) !important;
    border: 1px solid transparent !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    transition: background 0.15s, color 0.15s !important;
}
.nav-tabs .nav-link:hover {
    color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #fff !important;
    background: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255,255,255,0.14) rgba(255,255,255,0.14) transparent !important;
}
.nav-tabs.card-header-tabs {
    border-bottom: none !important;
    margin-bottom: -1px;
}

.nav-pills .nav-link {
    color: rgba(255,255,255,0.65) !important;
    border-radius: 0.5rem !important;
    transition: background 0.15s, color 0.15s !important;
}
.nav-pills .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.07) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: rgba(13,110,253,0.70) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(13,110,253,0.30) !important;
}

/* ── Progress bars ── */
.progress {
    background: rgba(255,255,255,0.07) !important;
    border-radius: 999px !important;
}

/* ── Badges (subtle glow) ── */
.badge.bg-danger  { box-shadow: 0 0 8px rgba(220,53,69,0.35); }
.badge.bg-success { box-shadow: 0 0 8px rgba(25,135,84,0.35); }
.badge.bg-info    { box-shadow: 0 0 8px rgba(13,202,240,0.28); }
.badge.bg-warning { box-shadow: 0 0 8px rgba(255,193,7,0.28); }
.badge.bg-primary { box-shadow: 0 0 8px rgba(13,110,253,0.28); }

/* ── List groups ── */
.list-group-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    transition: background 0.12s !important;
}
.list-group-item:hover,
.list-group-item-action:hover {
    background: rgba(255,255,255,0.07) !important;
}

/* ── Border utility ── */
.border-secondary { border-color: rgba(255,255,255,0.09) !important; }
[style*="border-color:#2d3139"],
[style*="border-color: #2d3139"] {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Theme toggle polish ── */
.theme-toggle {
    background: rgba(15,17,26,0.75) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.40) !important;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.25); }

/* ── Pagination ── */
.page-link {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.page-link:hover { background: rgba(255,255,255,0.09) !important; }
.page-item.active .page-link {
    background: rgba(13,110,253,0.75) !important;
    border-color: rgba(13,110,253,0.85) !important;
    box-shadow: 0 0 12px rgba(13,110,253,0.30) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   LIGHT MODE GLASS
   ───────────────────────────────────────────────────────────────────────── */

[data-bs-theme="light"] body {
    background-image: linear-gradient(135deg,
        #dde8f5 0%,
        #e8dff8 35%,
        #ddeef8 65%,
        #e2f0e8 100%) !important;
}
[data-bs-theme="light"] body::before {
    background: radial-gradient(circle, rgba(99,102,241,0.16) 0%, transparent 68%);
}
[data-bs-theme="light"] body::after {
    background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 68%);
}

/* Sidebar */
[data-bs-theme="light"] .sidebar,
[data-bs-theme="light"] .offcanvas-portal,
[data-bs-theme="light"] .offcanvas-admin {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(22px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
    border-right: 1px solid rgba(255,255,255,0.72) !important;
}
[data-bs-theme="light"] .mobile-topbar {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.72) !important;
}
[data-bs-theme="light"] .sidebar .nav-link            { color: #374151 !important; }
[data-bs-theme="light"] .sidebar .nav-link:hover,
[data-bs-theme="light"] .sidebar .nav-link.active     { background: rgba(255,255,255,0.55) !important; color: #111827 !important; }
[data-bs-theme="light"] .sidebar-heading              { color: #6b7280 !important; }

/* Cards */
[data-bs-theme="light"] .stat-card,
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .card.bg-dark,
[data-bs-theme="light"] [style*="background:#1e2129"],
[data-bs-theme="light"] [style*="background: #1e2129"],
[data-bs-theme="light"] [style*="background:#1a1d23"],
[data-bs-theme="light"] [style*="background: #1a1d23"] {
    background: rgba(255,255,255,0.60) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    color: #212529 !important;
    box-shadow: 0 4px 24px rgba(100,120,200,0.12), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
[data-bs-theme="light"] .stat-card:hover {
    box-shadow: 0 10px 36px rgba(100,120,200,0.20), inset 0 1px 0 rgba(255,255,255,1) !important;
}
[data-bs-theme="light"] .card-header,
[data-bs-theme="light"] .card-header.bg-dark {
    background: rgba(255,255,255,0.38) !important;
    border-bottom: 1px solid rgba(255,255,255,0.65) !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .card-footer,
[data-bs-theme="light"] .card-footer.bg-dark {
    background: rgba(255,255,255,0.30) !important;
    border-top: 1px solid rgba(255,255,255,0.65) !important;
}

/* Tables */
[data-bs-theme="light"] .table {
    --bs-table-hover-bg: rgba(0,0,0,0.04) !important;
    --bs-table-hover-color: inherit !important;
    --bs-table-striped-bg: rgba(0,0,0,0.02) !important;
    --bs-table-active-bg: rgba(0,0,0,0.06) !important;
}
[data-bs-theme="light"] .table-dark,
[data-bs-theme="light"] .table-dark > :not(caption) > * > * {
    --bs-table-bg: transparent !important;
    --bs-table-hover-bg: rgba(0,0,0,0.04) !important;
    background: transparent !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .table-dark > tbody > tr > * { color: #212529 !important; }
[data-bs-theme="light"] .table-dark .text-muted       { color: #6c757d !important; }
[data-bs-theme="light"] .table-dark tr:hover > td,
[data-bs-theme="light"] .table-dark tr:hover > th     { background: rgba(0,0,0,0.04) !important; }
[data-bs-theme="light"] .table tbody tr:hover > td,
[data-bs-theme="light"] .table tbody tr:hover > th    { background: rgba(0,0,0,0.04) !important; }
[data-bs-theme="light"] thead th,
[data-bs-theme="light"] .table-responsive table thead th {
    background: rgba(255,255,255,0.68) !important;
    backdrop-filter: blur(16px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
    border-color: rgba(255,255,255,0.82) !important;
    color: #1e2533 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
[data-bs-theme="light"] thead.table-secondary > tr > th,
[data-bs-theme="light"] thead.table-secondary th,
[data-bs-theme="light"] thead.table-dark > tr > th,
[data-bs-theme="light"] thead.table-dark th,
[data-bs-theme="light"] .table-secondary thead th,
[data-bs-theme="light"] .table-dark thead th {
    --bs-table-bg: transparent !important;
    --bs-table-color: #1e2533 !important;
    background: rgba(255,255,255,0.68) !important;
    color: #1e2533 !important;
}

/* Nav-tabs */
[data-bs-theme="light"] .nav-tabs {
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}
[data-bs-theme="light"] .nav-tabs .nav-link,
[data-bs-theme="light"] .nav-tabs .nav-item .nav-link {
    color: rgba(55,65,81,0.75) !important;
    border: 1px solid transparent !important;
}
[data-bs-theme="light"] .nav-tabs .nav-link:hover {
    color: #111827 !important;
    background: rgba(255,255,255,0.48) !important;
    border-color: rgba(255,255,255,0.65) rgba(255,255,255,0.65) transparent !important;
}
[data-bs-theme="light"] .nav-tabs .nav-link.active,
[data-bs-theme="light"] .nav-tabs .nav-item.show .nav-link {
    color: #111827 !important;
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(12px) !important;
    border-color: rgba(255,255,255,0.88) rgba(255,255,255,0.88) transparent !important;
}
[data-bs-theme="light"] .nav-pills .nav-link         { color: #374151 !important; }
[data-bs-theme="light"] .nav-pills .nav-link:hover   { background: rgba(0,0,0,0.05) !important; color: #111827 !important; }
[data-bs-theme="light"] .nav-pills .nav-link.active  { background: rgba(13,110,253,0.75) !important; color: #fff !important; }

/* Form controls */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .form-control.bg-dark,
[data-bs-theme="light"] .form-select.bg-dark,
[data-bs-theme="light"] .input-group-text,
[data-bs-theme="light"] .input-group-text.bg-dark {
    background-color: rgba(255,255,255,0.68) !important;
    border: 1px solid rgba(255,255,255,0.82) !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: rgba(255,255,255,0.88) !important;
    border-color: rgba(99,102,241,0.50) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}
[data-bs-theme="light"] .form-control::placeholder { color: rgba(0,0,0,0.35) !important; }
/* Native <option> elements in light mode */
[data-bs-theme="light"] .form-select option,
[data-bs-theme="light"] select option {
    background-color: #ffffff;
    color: #212529;
}
[data-bs-theme="light"] .form-select option:checked,
[data-bs-theme="light"] select option:checked {
    background-color: #e8eaf6;
    color: #1a1d27;
}

/* Alerts */
[data-bs-theme="light"] .alert {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
[data-bs-theme="light"] .alert-success   { background: rgba(25,135,84,0.11)    !important; border-color: rgba(25,135,84,0.32)   !important; }
[data-bs-theme="light"] .alert-danger    { background: rgba(220,53,69,0.09)     !important; border-color: rgba(220,53,69,0.30)   !important; }
[data-bs-theme="light"] .alert-warning   { background: rgba(255,193,7,0.14)     !important; border-color: rgba(255,193,7,0.42)   !important; }
[data-bs-theme="light"] .alert-info      { background: rgba(13,202,240,0.09)    !important; border-color: rgba(13,202,240,0.32)  !important; }
[data-bs-theme="light"] .alert-secondary { background: rgba(108,117,125,0.09)   !important; border-color: rgba(108,117,125,0.28) !important; }

/* Modals */
[data-bs-theme="light"] .modal-content {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(26px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
    border: 1px solid rgba(255,255,255,0.88) !important;
    box-shadow: 0 28px 72px rgba(100,120,200,0.28) !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .modal-content.bg-dark,
[data-bs-theme="light"] .modal-content[class*="bg-dark"],
[data-bs-theme="light"] .modal-content.text-white,
[data-bs-theme="light"] .modal-content.text-light {
    background: rgba(255,255,255,0.82) !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .modal-header,
[data-bs-theme="light"] .modal-footer    { border-color: rgba(0,0,0,0.08) !important; }
/* In light mode, btn-close naturally shows dark icon — undo the dark-mode invert */
[data-bs-theme="light"] .modal-content .btn-close {
    filter: none !important;
}

/* Dropdowns & popovers */
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .popover         {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 14px 44px rgba(100,120,200,0.20) !important;
}
[data-bs-theme="light"] .dropdown-item   { color: #212529 !important; }
[data-bs-theme="light"] .dropdown-item:hover { background: rgba(99,102,241,0.09) !important; }
[data-bs-theme="light"] .popover-header  { background: rgba(0,0,0,0.04) !important; border-bottom-color: rgba(0,0,0,0.08) !important; }

/* Border utils */
[data-bs-theme="light"] .border-secondary { border-color: rgba(255,255,255,0.68) !important; }
[data-bs-theme="light"] [style*="border-color:#2d3139"] { border-color: rgba(0,0,0,0.09) !important; }

/* Progress */
[data-bs-theme="light"] .progress { background: rgba(0,0,0,0.07) !important; }

/* List groups */
[data-bs-theme="light"] .list-group-item {
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(255,255,255,0.72) !important;
}
[data-bs-theme="light"] .list-group-item:hover,
[data-bs-theme="light"] .list-group-item-action:hover { background: rgba(255,255,255,0.72) !important; }

/* Buttons */
[data-bs-theme="light"] .btn-outline-primary,
[data-bs-theme="light"] .btn-outline-secondary,
[data-bs-theme="light"] .btn-outline-info,
[data-bs-theme="light"] .btn-outline-warning,
[data-bs-theme="light"] .btn-outline-danger,
[data-bs-theme="light"] .btn-outline-success {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Page links */
[data-bs-theme="light"] .page-link {
    background: rgba(255,255,255,0.60) !important;
    border-color: rgba(255,255,255,0.80) !important;
    color: #374151 !important;
}
[data-bs-theme="light"] .page-link:hover { background: rgba(255,255,255,0.80) !important; }
[data-bs-theme="light"] .page-item.active .page-link {
    background: rgba(13,110,253,0.75) !important;
    border-color: rgba(13,110,253,0.80) !important;
}

/* Scrollbar */
[data-bs-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
[data-bs-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }


/* ─────────────────────────────────────────────────────────────────────────
   ADDITIONAL INLINE-STYLE OVERRIDES
   Catches remaining hardcoded background colours not in the original set.
   ───────────────────────────────────────────────────────────────────────── */

/* background:#2d3139 (used in component breakdown boxes, heatmap legend cells, etc.) */
[style*="background:#2d3139"],
[style*="background: #2d3139"] {
    background: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* background-color:#2b2d31 (JS-generated Discord-style chat bubbles) */
[style*="background-color:#2b2d31"],
[style*="background-color: #2b2d31"] {
    background-color: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Light mode */
[data-bs-theme="light"] [style*="background:#2d3139"],
[data-bs-theme="light"] [style*="background: #2d3139"] {
    background: rgba(255,255,255,0.52) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-bs-theme="light"] [style*="background-color:#2b2d31"],
[data-bs-theme="light"] [style*="background-color: #2b2d31"] {
    background-color: rgba(255,255,255,0.55) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   ACCORDION GLASS
   Bootstrap accordion overrides for the frosted glass aesthetic.
   ───────────────────────────────────────────────────────────────────────── */

.accordion-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.09) !important;
    backdrop-filter: blur(14px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}
.accordion-button {
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: inherit !important;
    transition: background 0.18s !important;
}
.accordion-button:not(.collapsed) {
    background: rgba(255,255,255,0.09) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset !important;
}
.accordion-button:hover {
    background: rgba(255,255,255,0.07) !important;
}
/* White chevron icon in dark mode */
.accordion-button::after {
    filter: invert(1) opacity(0.65);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(1) opacity(0.90);
}
.accordion-body {
    background: rgba(255,255,255,0.02) !important;
}

/* Light mode accordion */
[data-bs-theme="light"] .accordion-item {
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(255,255,255,0.72) !important;
}
[data-bs-theme="light"] .accordion-button {
    background: rgba(255,255,255,0.55) !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background: rgba(255,255,255,0.72) !important;
    color: #111827 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset !important;
}
[data-bs-theme="light"] .accordion-button:hover {
    background: rgba(255,255,255,0.68) !important;
}
[data-bs-theme="light"] .accordion-button::after {
    filter: none;
}
[data-bs-theme="light"] .accordion-body {
    background: rgba(255,255,255,0.40) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   CHART CONTAINER POLISH
   Subtle visual improvements for chart wrapper elements.
   ───────────────────────────────────────────────────────────────────────── */

/* Ensure chart canvases don't clip the glass card's border-radius */
.card canvas, .stat-card canvas {
    border-radius: 0 0 calc(1rem - 2px) calc(1rem - 2px);
}

/* Chart wrapper divs (position:relative containers with fixed heights) */
.chart-wrapper,
[style*="position:relative"][style*="height"],
[style*="position: relative"][style*="height"] {
    border-radius: 0.5rem;
    overflow: hidden;
}
[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }

/* Theme toggle */
[data-bs-theme="light"] .theme-toggle {
    background: rgba(255,255,255,0.72) !important;
    border-color: rgba(255,255,255,0.88) !important;
    box-shadow: 0 2px 12px rgba(100,120,200,0.18) !important;
    color: #6366f1 !important;
}

/* Text contrast helpers */
[data-bs-theme="light"] .text-muted { color: rgba(55,65,81,0.78) !important; }
[data-bs-theme="light"] code        { color: #7c3aed; background: rgba(124,58,237,0.08); padding: 0.05rem 0.25rem; border-radius: 3px; }