/* ============================================================
   Site header + footer skin for the reel pages (SetEnforce reel look)
   Opt in per page: <link rel="stylesheet" href="/static/css/header-dark.css">
   in the page's extra_head, after partials/reel_theme_head.html (which
   provides the --lp-* tokens). The header markup itself stays
   the one <header> in templates/public/base.html; this file only re-skins it.
   Used by: landing, login, register, scoreboard, wiki (+article), stats.
   Light pages simply do not load it.
   ============================================================ */

header {
    --hd-bg: linear-gradient(to right, rgba(7, 14, 24, 0.78), rgba(9, 44, 92, 0.78), rgba(7, 14, 24, 0.78));
    --hd-bg-scrolled: linear-gradient(to right, rgba(7, 14, 24, 0.86), rgba(9, 44, 92, 0.86), rgba(7, 14, 24, 0.86));
    --hd-border: rgba(56, 169, 228, 0.22);
    --hd-shadow-scrolled: 0 10px 28px -14px rgba(0, 0, 0, 0.75);
    --hd-hover: rgba(56, 169, 228, 0.1);
    --hd-accent: var(--lp-blue);
}
header, header.scrolled {
    background: var(--hd-bg) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: 1px solid var(--hd-border) !important;
    box-shadow: none !important;
    transition: box-shadow .2s;
}
header.scrolled {
    background: var(--hd-bg-scrolled) !important;
    box-shadow: var(--hd-shadow-scrolled) !important;
}
header .text-slate-900, header .text-slate-700, header .text-slate-600,
header.scrolled a, header.scrolled span, header.scrolled button { color: var(--lp-soft) !important; }
header .text-blue-600 { color: var(--hd-accent) !important; }
header a:hover, header button:hover, header.scrolled a:hover, header.scrolled button:hover {
    background-color: var(--hd-hover) !important; color: var(--lp-fg) !important;
}
header nav > div > div:first-child a:hover { background-color: transparent !important; }
header #mobile-menu { border-color: var(--lp-line) !important; }
header a[href="/login"] {
    background: transparent !important; box-shadow: none !important;
    border: 1px solid var(--lp-line-2); color: var(--lp-fg) !important;
}
header a[href="/register"].inline-flex {
    background: var(--lp-blue) !important; box-shadow: none !important; color: var(--lp-on-blue) !important;
}
header a[href="/register"].inline-flex span, header a[href="/register"].inline-flex svg { color: var(--lp-on-blue) !important; }

/* Account + notification dropdowns. They render in <body> (base.html, and
   public.js rebuilds the account one), outside <header>, so they need their
   own reel skin. Without it the org <select> was white text on white:
   reel-theme.css sets color-scheme: dark, which turns native control text light. */
:is(#user-menu-panel, #notification-panel) {
    background: var(--lp-ink-2) !important; border-color: var(--lp-line-2) !important;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(56, 169, 228, .06) !important;
    color: var(--lp-soft);
}
:is(#user-menu-panel, #notification-panel) .bg-slate-50 { background: var(--lp-ink-3) !important; }
:is(#user-menu-panel, #notification-panel) :is(.border-slate-200, .border-slate-100, .divide-slate-100 > * + *) { border-color: var(--lp-line) !important; }
:is(#user-menu-panel, #notification-panel) .text-slate-800 { color: var(--lp-fg) !important; }
:is(#user-menu-panel, #notification-panel) .text-slate-700 { color: var(--lp-soft) !important; }
:is(#user-menu-panel, #notification-panel) :is(.text-slate-500, .text-slate-400) { color: var(--lp-mute) !important; }
:is(#user-menu-panel, #notification-panel) .text-blue-600 { color: var(--lp-link) !important; }
:is(#user-menu-panel, #notification-panel) :is(.hover\:bg-blue-50, .hover\:bg-slate-50):hover { background: var(--hd-hover, rgba(56, 169, 228, .1)) !important; }
:is(#user-menu-panel, #notification-panel) .hover\:text-blue-600:hover,
:is(#user-menu-panel, #notification-panel) .hover\:text-blue-600:hover :is(i, svg) { color: var(--lp-fg) !important; }
:is(#user-menu-panel, #notification-panel) .hover\:text-blue-700:hover { color: var(--lp-link-2) !important; }
#user-menu-panel .hover\:bg-red-50:hover { background: rgba(255, 106, 26, .1) !important; }
#user-menu-panel .hover\:text-red-600:hover, #user-menu-panel .hover\:text-red-600:hover svg { color: #ff9a6b !important; }
#notification-panel .bg-blue-50\/40 { background: rgba(56, 169, 228, .07) !important; }
#user-menu-panel .bg-blue-600 { background: var(--lp-blue) !important; color: var(--lp-on-blue) !important; }
:is(header, header.scrolled, #user-menu-panel) .tier-badge {
    background: rgba(56, 169, 228, .14) !important; color: var(--lp-blue-2) !important;
    border: 1px solid rgba(56, 169, 228, .3) !important; font-weight: 500 !important;
}
#org-switcher-select {
    background: var(--lp-ink) !important; color: var(--lp-fg) !important;
    border-color: var(--lp-line-2) !important; color-scheme: dark;
}
#org-switcher-select:focus { border-color: var(--lp-blue) !important; }

/* Footer: same markup as every page (base.html), re-skinned to the reel ink. */
footer.bg-slate-900 { background: var(--lp-footer); border-top: 1px solid #16263a; }