/* Dark mode. <html data-bs-theme="dark"> is set before the first paint by the script at the
   top of App.razor (the visitor's choice, else the phone's setting). Bootstrap 5.3 recolours
   its own components - tables, selects, modals, badges, borders - from that attribute; the
   rules here cover what the vendored theme (style.css) and the page CSS hard-code in light
   colours. Loaded last, after the scoped component CSS, so these win ties.

   The check-in barcode deliberately stays black on white: JsBarcode draws its own white
   background, and scanners need that contrast. */

[data-bs-theme="dark"] body {
    background-color: #121417;
    background-image: none !important; /* the light gym photo set inline on <body> */
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .site-wrap {
    background: var(--bs-body-bg);
    box-shadow: none;
}

/* Navbar: the theme and Bootstrap's bg-white / bg-light all force white with !important. */
[data-bs-theme="dark"] .site-navbar-wrap,
[data-bs-theme="dark"] .site-navbar,
[data-bs-theme="dark"] .site-navbar-wrap.bg-white,
[data-bs-theme="dark"] .site-navbar.bg-light {
    background: var(--bs-body-bg) !important;
}

[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"] .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"] .text-black,
[data-bs-theme="dark"] .site-navbar .site-logo a {
    color: var(--bs-emphasis-color) !important;
}

/* The hero titles sit on photos and stay white either way. */
[data-bs-theme="dark"] .site-blocks-cover h1 {
    color: #fff !important;
}

[data-bs-theme="dark"] .site-navbar .site-navigation .site-menu > li > a {
    color: var(--bs-secondary-color);
}

    [data-bs-theme="dark"] .site-navbar .site-navigation .site-menu > li > a:hover {
        color: var(--bs-emphasis-color);
    }

/* Phone off-canvas menu. */
[data-bs-theme="dark"] .site-mobile-menu {
    background: var(--bs-body-bg);
}

    [data-bs-theme="dark"] .site-mobile-menu .site-nav-wrap a,
    [data-bs-theme="dark"] .site-mobile-menu .site-mobile-menu-close span {
        color: var(--bs-body-color);
    }

/* Comment icon and instructor popup placeholder (component CSS sets light greys). */
[data-bs-theme="dark"] .class-comment {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .instructor-initials {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Light/dark toggle in the navbar: show the moon in light mode (go dark), the sun in dark. */
.theme-toggle .fa-sun {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .fa-moon {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .fa-sun {
    display: inline-block;
}