:root {
    --neonet-blue: #1b3663;
    --neonet-yellow: #b88b2d;
}

/* Navbar and footer stay NEOnet blue in both themes, matching the Events and Login apps. */
.navbar { background-color: var(--neonet-blue); }
.navbar-brand__net { color: var(--neonet-yellow); }
footer { background-color: var(--neonet-blue); }

/* The branded footer, ported from the events project (#559).
 *
 * Values copied verbatim so the two apps render the same footer. The gradient
 * is --neonet-blue at 92% laid over the photograph; it is written as rgba here
 * rather than as the variable because a gradient needs the channels, not the
 * hex.
 *
 * The `footer` rule above still applies underneath and is deliberately left in
 * place: `background` here overrides it, but if the photograph ever fails to
 * load the gradient layers still paint, so the footer stays blue either way.
 */
.neonet-footer {
    background:
        linear-gradient(rgba(27, 54, 99, 0.92), rgba(27, 54, 99, 0.92)),
        url('/images/footer/background.webp')
        center / cover no-repeat;
}

.neonet-footer__logo {
    max-width: 200px;
    height: auto;
}

.neonet-footer__accent {
    color: var(--neonet-yellow);
    font-weight: 700;
}

.text-neonet { color: var(--neonet-blue); }

.btn-neonet { background-color: var(--neonet-blue); border-color: var(--neonet-blue); color: #fff; }
.btn-neonet:hover, .btn-neonet:focus { background-color: #142a4e; border-color: #142a4e; color: #fff; }

#theme-toggle { font-size: 1.1rem; }

/* Spin animation for icons used as loading indicators. */
@keyframes bi-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.bi-spin { display: inline-block; animation: bi-spin 1.5s linear infinite; }

/* Stat-card text colors need lighter variants in dark mode for contrast. */
[data-bs-theme="dark"] .card .text-primary { color: #8a9cf0 !important; }
[data-bs-theme="dark"] .card .text-success { color: #4ade80 !important; }
[data-bs-theme="dark"] .card .text-warning { color: #facc15 !important; }
[data-bs-theme="dark"] .card .text-danger  { color: #f87171 !important; }
[data-bs-theme="dark"] .card .text-info    { color: #67e8f9 !important; }

/* Colored card headers (bg-info/bg-success/bg-danger with text-white) — keep contrast in dark mode. */
[data-bs-theme="dark"] .card-header.bg-info    { background-color: #0a6c7a !important; }
[data-bs-theme="dark"] .card-header.bg-success { background-color: #1a6b3a !important; }
[data-bs-theme="dark"] .card-header.bg-danger  { background-color: #842029 !important; }
[data-bs-theme="dark"] .card-header.bg-warning { background-color: #997404 !important; color: #fff !important; }

/* Force-dark Bootstrap classes (.table-dark, .bg-dark) render dark regardless of theme.
   Remap them to light-theme surfaces in lightmode so table and card headers match the page. */
[data-bs-theme="light"] .table-dark {
    --bs-table-color: #212529;
    --bs-table-bg: #e9ecef;
    --bs-table-border-color: #dee2e6;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: #dfe3e7;
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: #d6dade;
}
[data-bs-theme="light"] .card-header.bg-dark {
    background-color: #e9ecef !important;
    color: #212529 !important;
}
[data-bs-theme="light"] .card-header.bg-dark.text-white {
    color: #212529 !important;
}
.card-header-neonet { background-color: var(--neonet-blue); color: #fff; }
.modal-header-neonet { background-color: var(--neonet-blue); color: #fff; }
.modal-header-neonet .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.district-switcher-dropdown {
    width: 400px;
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
}

.district-switcher-search-header {
    background: var(--bs-dropdown-bg);
    z-index: 1;
}