:root { --uyf-red:#d50808; --uyf-black:#141414; }
.navbar, nav.navbar, .navbar.navbar-expand-lg { background-color: var(--uyf-black) !important; }
.navbar .nav-link, .navbar .navbar-brand, .navbar .dropdown-toggle, .navbar .navbar-text { color:#fff !important; }
.navbar-brand img { height:36px !important; width:auto !important; content: url('/uyf/navbar-logo.png'); }
.btn-primary, .bg-primary { background-color: var(--uyf-red) !important; border-color: var(--uyf-red) !important; }
.btn-primary:hover { background-color:#a80000 !important; }
.text-primary { color: var(--uyf-red) !important; }
a:not(.btn):not(.nav-link):not([class*="Mui"]) { color: var(--uyf-red); }
.MuiButton-containedPrimary { background-color: var(--uyf-red) !important; }

/* Dark canvas on the React SPA pages only (the whole SPA uses #react-page-no-shadow-dom;
   #react-page is the shadow-DOM variant). Login/gym/admin Django pages stay light. */
body:has(#react-page), body:has(#react-page-no-shadow-dom) { background:#141414 !important; color:#fff !important; }
body:has(#react-page) .breadcrumb, body:has(#react-page) .breadcrumb a,
body:has(#react-page-no-shadow-dom) .breadcrumb, body:has(#react-page-no-shadow-dom) .breadcrumb a { color:#ccc !important; }

/* Remove wger's app-store footer (Google Play / App Store / Flathub) everywhere. */
#main-footer { display:none !important; }

/* Dark the navbar dropdown menus (were white) + brand-red hover/active. */
.dropdown-menu { background-color:#1e1e1e !important; border-color:#333 !important; }
.dropdown-item { color:#eee !important; }
.dropdown-item:active, .dropdown-item.active, .dropdown-item:focus,
.dropdown-item:hover { background-color: var(--uyf-red) !important; color:#fff !important; }
.dropdown-divider { border-top-color:#333 !important; }
.dropdown-header { color:#999 !important; }

/* Hide wger's "About this software" nav menu (REST API, Github, Translate,
   Developer docs, Support & Get Involved) — dev/marketing clutter, not for clients.
   It's the only nav dropdown whose menu links to /software/ URLs. */
.navbar-nav > li.nav-item.dropdown:has(.dropdown-menu a[href*="/software/"]),
.navbar-nav > li.nav-item.dropdown:has(.dropdown-menu a[href*="/nutrition/"]) { display:none !important; }

/* ---------------------------------------------------------------------------
   Branded auth pages (login / register / password reset). These are Django
   Bootstrap pages (not the React SPA), matched by the presence of .wger-form.
   --------------------------------------------------------------------------- */
body:has(.wger-form) { background:#141414 !important; }
body:has(.wger-form) #main { color:#fff !important; }
body:has(.wger-form) .row.justify-content-center > [class*="col-lg-"] { max-width:560px; margin-left:auto; margin-right:auto; }
body:has(.wger-form) .card {
    background:#1e1e1e !important;
    border:1px solid #2c2c2c !important;
    border-radius:14px !important;
    color:#fff !important;
    box-shadow:0 10px 34px rgba(0,0,0,0.55) !important;
}
body:has(.wger-form) .card h2 { color:#fff !important; font-weight:700 !important; text-align:center; }
body:has(.wger-form) .form-label { color:#c7c7c7 !important; }
body:has(.wger-form) .form-control {
    background:#2a2a2a !important;
    border:1px solid #3a3a3a !important;
    color:#fff !important;
    border-radius:8px !important;
}
body:has(.wger-form) .form-control::placeholder { color:#8a8a8a !important; }
body:has(.wger-form) .form-control:focus {
    background:#2f2f2f !important;
    border-color:var(--uyf-red) !important;
    box-shadow:0 0 0 0.2rem rgba(213,8,8,0.25) !important;
}
body:has(.wger-form) .btn-primary {
    background:var(--uyf-red) !important;
    border-color:var(--uyf-red) !important;
    border-radius:8px !important;
    font-weight:600 !important;
}
body:has(.wger-form) a { color:var(--uyf-red) !important; }
body:has(.wger-form) .form-check-label, body:has(.wger-form) .form-check-input + label { color:#c7c7c7 !important; }
/* Login button is .btn-success (green) in the template — brand it red. */
body:has(.wger-form) .btn-success {
    background:var(--uyf-red) !important;
    border-color:var(--uyf-red) !important;
    border-radius:8px !important;
    font-weight:600 !important;
}
/* Register / passkey buttons are .btn-outline-primary (blue) — brand them. */
body:has(.wger-form) .btn-outline-primary {
    color:#fff !important;
    border-color:var(--uyf-red) !important;
    border-radius:8px !important;
}
body:has(.wger-form) .btn-outline-primary:hover { background:var(--uyf-red) !important; color:#fff !important; }
/* The "Faster sign in" passkey panel is .bg-light (white) — darken it. */
body:has(.wger-form) .bg-light { background:#242424 !important; }
/* Muted text ("No account?", "Faster sign in") is too dark on the dark card. */
body:has(.wger-form) .text-muted, body:has(.wger-form) .text-muted span { color:#9a9a9a !important; }
body:has(.wger-form) hr { border-color:#3a3a3a !important; opacity:1; }
/* UYF logo above the form */
body:has(.wger-form) .card-body > h2:first-child::before {
    content:'';
    display:block;
    height:74px;
    margin:6px auto 20px;
    background:url('/uyf/navbar-logo.png') center/contain no-repeat;
}