/* -----------------------------------------------------------
   FiveAlarmWeb — Global Styles with Light/Dark Themes
   - Professional typeface (Inter)
   - Tuned spacing & colors via CSS variables
   - Responsive, accessible dark mode
----------------------------------------------------------- */

/* ========== Design Tokens (Light) ========== */
:root {
    /* Typography */
    --ff-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --fs-root: 16px;
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    /* Spacing Scale */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    /* Layout */
    --navbar-h: 56px;
    /* Palette (Light) */
    --bg-body: #F7F7F8;
    --bg-surface: #FFFFFF;
    --bg-elev: #FFFFFF;
    --bg-subtle: #F1F3F5;
    --text: #1F2937;
    --text-muted: #4B5563;
    --text-on-dark: #FFFFFF;
    --brand: #C02B2B; /* Fire red */
    --brand-2: #FF5C2A; /* Ember orange */
    --primary: #0D6EFD; /* Bootstrap-ish primary */
    --primary-weak: rgba(13,110,253,.08);
    --border: rgba(0,0,0,.12);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    /* Sidebar */
    --sidebar-text: #FFFFFF;
    --sidebar-border: rgba(255,255,255,.15);
    /* Buttons */
    --btn-focus-ring: #258cfb;
    /* Cards / Accents */
    --card-gradient-start: #B22222;
    --card-gradient-end: #FF4500;
    /* Payments */
    --paypal-gold: #FFC439;
    --venmo-blue: #3D95CE;
    /* Links */
    --link: #0D6EFD;
    --link-hover: #0B5ED7;
    /* Transitions */
    --trans-fast: 150ms ease;
}

    /* ========== Design Tokens (Dark) ========== */
    :root[data-theme="dark"] {
        --bg-body: #0F1216;
        --bg-surface: #12161B;
        --bg-elev: #161B22;
        --bg-subtle: #0C0F13;
        --text: #E5E7EB;
        --text-muted: #9CA3AF;
        --primary: #66A3FF;
        --primary-weak: rgba(102,163,255,.12);
        --border: rgba(255,255,255,.12);
        --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
        --shadow-md: 0 6px 16px rgba(0,0,0,.6);
        --sidebar-text: #FFFFFF;
        --sidebar-border: rgba(255,255,255,.12);
        --card-gradient-start: #A61D1D;
        --card-gradient-end: #E14B20;
        --link: #66A3FF;
        --link-hover: #8BB9FF;
    }

/* Respect OS preference on first load */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
    }
}

/* ========== Base & Accessibility ========== */
@media (min-width: 768px) {
    html {
        font-size: var(--fs-root);
    }
}

html, body {
    height: 100%;
    margin: 0;
    overflow: auto;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
    color: var(--text);
    font-family: var(--ff-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


main.with-banner {
    padding-top: 0;
}

a {
    color: var(--link);
}

    a:hover {
        color: var(--link-hover);
    }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--btn-focus-ring);
}

/* ========== Layout ========== */
.layout {
    display: flex;
    flex: 1 0 auto;
    min-height: 100vh;
    position: relative;
}

/* Sidebar (from _Layout.cshtml) */
.sidebar {
    width: 240px;
    position: fixed;
    left: 0;
    top: var(--navbar-h);
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* Hide sidebar by default (admin mode controls visibility) */
html:not(.admin-mode-on) .sidebar {
    transform: translateX(-100%);
}

html.admin-mode-on .sidebar {
    transform: translateX(0);
}

/* Content area */
main.content {
    flex: 1;
    transition: margin-left 0.3s ease;
    min-height: calc(100vh - var(--navbar-h));
}

/* Adjust content when sidebar is visible */
html.admin-mode-on main.content {
    margin-left: 240px;
}

/* Special handling for Figma home page */
body.figma-theme main.content {
    margin-left: 0 !important;
    padding: 0 !important;
}

/* But other pages (not homepage) should respect admin mode */
html.admin-mode-on body:not(.figma-theme) main.content {
    margin-left: 240px;
}

/* Navbar */
.navbar {
  border-bottom: none !important;
  box-shadow: none; /* optional: removes any shadow line too */
}
/* Use the same surface color as the sidebar */
.navbar-dark.bg-dark {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
}

    /* Ensure links/brand inherit readable color on both themes */
    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text {
        color: var(--header-fg) !important;
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active {
            color: #fff !important;
        }


/* ========== Sidebar ========== */
.sidebar {
    width: 240px;
    background-size: cover;
    background-blend-mode: multiply;
    background-attachment: fixed, fixed;
    font-size: 1.125rem;
    padding: var(--sp-4);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
    text-align: center;
    border-right: 1px solid var(--sidebar-border);
}

    .sidebar img {
        max-width: 96px;
        margin-bottom: var(--sp-4);
        animation: pulse 2s infinite;
        background-color: rgba(0,0,0,.3);
        padding: .5rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .sidebar .nav-link {
        color: #fff;
        margin: .25rem 0;
        padding: .4rem .6rem;
        border-radius: var(--radius-sm);
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .sidebar .nav-link:hover {
            text-decoration: none;
            background: rgba(255,255,255,.12);
        }

        .sidebar .nav-link.active,
        .sidebar .nav-link[aria-current="page"] {
            color: #fff;
            background: rgba(255,255,255,.18);
            font-weight: 700;
        }

/* ========== Content ========== */
/* Default: no background image */
.content {
    flex-grow: 1;
    padding: 2rem;
    overflow-y: auto;
    background-color: #F9F7F3;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* ================= Banner & Admin Preview ================ */
/* Wrapper defines height and clips overflow */
header.banner-wrap {
    position: relative;
    block-size: 20vh; /* 1/5 of viewport height */
    min-block-size: 80px;
    max-block-size: 260px;
    overflow: hidden; /* critical: clip contents */
    margin: 0;
    padding: 0;
}

    /* Live banner: stretch to fill box (ignore aspect ratio) */
    header.banner-wrap .banner {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: fill; /* <-- stretch to fit */
        display: block;
        border: 0;
        box-shadow: var(--shadow-sm);
    }

/* ==== Full-bleed banner: cancel .content side padding visually ==== */
main.content.with-banner {
    /* you already set padding-top: 0 earlier; this just makes it explicit */
    padding-top: 0;
}

/* Pull the banner out to the viewport edges within the content area */
.content.with-banner > .banner-wrap {
    margin-left: -2rem; /* match .content { padding: 2rem } */
    margin-right: -2rem; /* match .content { padding: 2rem } */
}

/* Inline preview overlay matches same box */
.banner-preview-inline {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
    background: color-mix(in oklab, var(--bg-surface) 12%, transparent);
    backdrop-filter: saturate(140%) blur(2px);
    padding: 0;
}

    /* Preview image: behave exactly like live banner (stretch) */
    .banner-preview-inline img#bannerPreviewImg {
        inline-size: 100%;
        block-size: 100%;
        object-fit: fill; /* <-- stretch to fit */
        display: block;
        border: 0;
        background: transparent;
        pointer-events: none; /* clicks go to actions */
    }

    /* Confirm/Cancel pill */
    .banner-preview-inline .banner-preview-actions {
        position: absolute;
        right: .5rem;
        bottom: .5rem;
        z-index: 6;
        display: inline-flex;
        gap: .5rem;
        background: color-mix(in oklab, var(--bg-surface) 85%, transparent 15%);
        border: 1px solid var(--border);
        padding: .25rem .5rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

/* Admin FAB on banner */
.banner-actions {
    position: absolute;
    right: 1rem;
    top: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: color-mix(in oklab, var(--bg-surface) 80%, transparent 20%);
    padding: .25rem .5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.banner-fab {
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-surface) 78%, transparent 22%);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: .8;
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
}

    .banner-fab:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

/* Smooth banner transitions */
header.banner-wrap .banner {
    transition: opacity 240ms ease, filter 240ms ease;
}

    header.banner-wrap .banner.is-fading-out {
        opacity: .25;
        filter: blur(1px);
    }

@keyframes bannerFadeIn {
    from {
        opacity: 0;
        filter: blur(2px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

header.banner-wrap .banner.banner-fade-in {
    animation: bannerFadeIn 360ms ease-out both;
}

/* ========== Components ========== */

/* Panels & images */
.panel-image,
.panel-image-large,
.panel-image-grid-full {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg-elev);
}

.panel-image {
    height: 280px;
}

.panel-image-large {
    max-height: 520px;
    object-fit: contain;
    cursor: zoom-in;
    margin-bottom: var(--sp-4);
}

.panel-image-grid-full {
    height: 100%;
    cursor: zoom-in;
}

/* Carousel slides fill viewport with internal scroll */
.carousel-item {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--bg-subtle);
    padding: var(--sp-8);
}

/* Panel slide wrapper */
.panel-slide {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--bg-subtle), var(--bg-elev));
    overflow: hidden;
    padding: var(--sp-8);
}

.panel-content-wrapper {
    max-width: 1400px;
    width: 100%;
}

/* Text blocks / cards */
.text-block {
    background-color: color-mix(in oklab, var(--bg-surface) 92%, transparent 8%);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    margin-top: var(--sp-8);
    border: 1px solid var(--border);
}

    .text-block p {
        margin-bottom: .5rem;
    }

/* Utility */
.text-white {
    color: #fff !important;
}

.staggered {
    margin-top: 40px;
}

/* Cards */
.card-header {
    background-image: linear-gradient(to right, var(--card-gradient-start), var(--card-gradient-end));
    color: #fff;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: .3px;
}

.card-body p {
    font-size: .96rem;
    line-height: 1.5;
    color: var(--text);
}

/* Payments */
.btn-paypal {
    background: var(--paypal-gold);
    color: #111;
    border: none;
    font-weight: 600;
}

    .btn-paypal:hover {
        background: #FFB020;
        color: #111;
    }

.btn-venmo {
    background: var(--venmo-blue);
    color: #fff;
    border: none;
    font-weight: 700;
}

    .btn-venmo:hover {
        background: #2f77a5;
        color: #fff;
    }

.pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md);
}

.or-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-muted);
}

    .or-divider::before,
    .or-divider::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--border);
    }

/* Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: .9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 991.98px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-border);
        background-attachment: scroll, scroll;
    }
}
/* ===== Fixed, non-shrinking sidebar on ≥992px ===== */
@media (min-width: 992px) {
    /* Reserve space for the fixed sidebar */
    .layout {
        /* shift the scrollable content to the right of the fixed sidebar */
        padding-left: 240px; /* must match sidebar width */
        min-height: 100vh; /* ensure full-height flex area */
        overflow: hidden; /* keep scroll confined to .content */
    }

    .sidebar {
        position: fixed;
        top: var(--navbar-h); /* sit just under the navbar */
        left: 0;
        width: 240px; /* hard width */
        min-width: 240px; /* never shrink */
        max-width: 240px; /* never grow */
        height: calc(100vh - var(--navbar-h));
        overflow-y: auto; /* its own scroll if needed */
        z-index: 1020; /* above content, below modals */
        /* keep your existing background styles */
    }

    .content {
        /* content is the scroll area */
        height: calc(100vh - var(--navbar-h));
        overflow-y: auto;
    }
}

/* Mobile / tablet keeps your original stacked layout */
@media (max-width: 991.98px) {
    .layout {
        padding-left: 0; /* no reserve on small screens */
    }

    .sidebar {
        position: static; /* your existing behavior */
        width: 100%;
        min-width: 0; /* allow full-width stack */
        max-width: none;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-border);
        background-attachment: scroll, scroll;
    }
}


/* ========== Dark Mode Toggle (switch) ========== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    user-select: none;
}

    .theme-toggle .toggle {
        position: relative;
        width: 44px;
        height: 24px;
        border-radius: 999px;
        background: rgba(255,255,255,.25);
        cursor: pointer;
        transition: background var(--trans-fast);
    }

        .theme-toggle .toggle::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: var(--shadow-sm);
            transition: left var(--trans-fast), transform var(--trans-fast);
        }

    .theme-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

        .theme-toggle input:checked + .toggle {
            background: var(--primary);
        }

            .theme-toggle input:checked + .toggle::after {
                left: 22px;
                transform: translateX(0);
            }

:root[data-theme="dark"] .theme-toggle {
    color: #e5e7eb;
}

:root[data-theme="dark"] .banner-actions {
    background: color-mix(in oklab, var(--bg-elev) 85%, transparent 15%);
}

:root.admin-mode-off .admin-only {
    display: none !important;
}

:root.admin-mode-on .admin-only {
    display: revert !important;
}

/* ===== Fixed top navbar ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* above sidebar */
}

/* Push layout down so content/sidebar don't hide under navbar */
body {
    padding-top: var(--navbar-h); /* matches your 56px variable */
}
@media (min-width: 992px) {
    .sidebar {
        top: var(--navbar-h); /* keep it directly below the navbar */
    }
}
@media (min-width: 992px) {
    .content {
        height: calc(100vh - var(--navbar-h)); /* respect fixed navbar */
        overflow-y: auto;
    }
}
/* ===== Paper Form Look ===== */
.paper-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* paper sheet with subtle texture & ruled lines */
.paper-form {
    position: relative;
    background:
    /* faint paper fiber */
    radial-gradient(rgba(0,0,0,0.025), transparent 40%) 0 0 / 6px 6px repeat,
    /* ruled lines */
    repeating-linear-gradient( to bottom, rgba(0,0,0,0.06) 0, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 32px ), #fff;
    color: #1F2937; /* ensure dark text on paper */
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
    isolation: isolate;
}

    /* top binding strip and hole punches for realism */
    .paper-form::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 18px;
        background: repeating-linear-gradient( 90deg, rgba(0,0,0,.06) 0 10px, transparent 10px 20px );
        border-bottom: 1px solid rgba(0,0,0,.08);
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        pointer-events: none;
    }

    .paper-form::after {
        content: "";
        position: absolute;
        left: 18px;
        top: 36px;
        width: 10px;
        height: 10px;
        background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.2), rgba(0,0,0,.05) 60%, transparent 61%);
        border-radius: 50%;
        box-shadow: 0 44px 0 0 rgba(0,0,0,.08), 0 88px 0 0 rgba(0,0,0,.08), 0 132px 0 0 rgba(0,0,0,.08);
        pointer-events: none;
        opacity: .6;
    }

    /* labels like a government form */
    .paper-form .form-label {
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        font-size: .78rem;
        color: #374151;
        margin-bottom: .25rem;
    }

    /* inputs look like you’re writing on a line */
    .paper-form .form-control {
        background: transparent;
        border: none;
        border-bottom: 2px solid rgba(0,0,0,.35);
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
        transition: border-color var(--trans-fast,150ms ease), background-color var(--trans-fast,150ms ease);
    }

        /* lighter placeholder, looks penciled */
        .paper-form .form-control::placeholder {
            color: rgba(0,0,0,.45);
            opacity: 1;
        }

        /* focus = inked line */
        .paper-form .form-control:focus {
            background: rgba(13,110,253,.06);
            border-bottom-color: var(--primary, #0D6EFD);
            outline: none;
            box-shadow: none;
        }

    /* textareas get their own faint ruling */
    .paper-form textarea.form-control {
        background: repeating-linear-gradient( to bottom, transparent 0 28px, rgba(0,0,0,.08) 28px 29px );
        line-height: 1.75;
        padding-top: .5rem;
    }

    /* validation message placement/appearance */
    .paper-form .text-danger {
        font-size: .85rem;
        margin-top: .25rem;
    }

    /* section spacing reads like blocks on paper */
    .paper-form .row > [class*="col"] {
        padding-top: .25rem;
        padding-bottom: .75rem;
    }

    /* buttons feel stamped */
    .paper-form .btn {
        border-radius: .375rem;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }

/* print-friendly (remove chrome, keep lines) */
@media print {
    body {
        background: #fff !important;
    }

    .paper-wrap {
        max-width: none;
    }

    .paper-form {
        box-shadow: none;
        border: 1px solid #000;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

        .paper-form::before,
        .paper-form::after {
            opacity: .5;
        }

    .d-print-none {
        display: none !important;
    }
}

/* dark mode: keep paper white but tone labels */
:root[data-theme="dark"] .paper-form {
    color: #111;
}

    :root[data-theme="dark"] .paper-form .form-label {
        color: #222;
    }
/* ===== Modern Government Form ===== */

.gov-form {
    --form-border: color-mix(in oklab, var(--border, rgba(0,0,0,.12)) 100%, transparent);
    --form-accent: var(--primary, #0D6EFD);
    --form-muted: var(--text-muted, #6b7280);
    --form-bg: #fff;
    --form-radius: .75rem;
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 24px rgba(0,0,0,.06);
    padding: 1.5rem;
}

:root[data-theme="dark"] .gov-form {
    --form-bg: #ffffff; /* keep paper white even in dark mode */
    color: #111;
}

/* Header meta bar */
.gov-form .form-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
    border-bottom: 2px solid var(--form-border);
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
}

.gov-form .form-title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.25rem;
}

.gov-form .form-meta {
    display: grid;
    gap: .25rem;
    font-size: .85rem;
    color: var(--form-muted);
    text-align: right;
}

/* Sections */
.gov-form .form-section {
    border: 0;
    padding: 0;
    margin: 1.25rem 0 0;
}

    .gov-form .form-section + .form-section {
        border-top: 1px solid var(--form-border);
        padding-top: 1.25rem;
    }

    .gov-form .form-section > legend {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: 0 .25rem;
        font-weight: 700;
        font-size: 1rem;
        color: var(--text);
    }

/* Grid */
.gov-form .form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 1.25rem;
    margin-top: .75rem;
}

.gov-form .form-field {
    grid-column: span 6;
}

.gov-form .form-field-wide {
    grid-column: 1 / -1;
}

/* Labels, hints, required */
.gov-form .form-label {
    display: inline-block;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .01em;
    color: var(--text);
    margin-bottom: .25rem;
}

    .gov-form .form-label.required::after {
        content: " *";
        color: #B91C1C;
        font-weight: 800;
    }

.gov-form .form-hint {
    color: var(--form-muted);
    font-size: .85rem;
    margin-top: .25rem;
}

/* Controls: crisp borders, big targets */
.gov-form .form-control {
    background: #fff;
    border: 1.5px solid var(--form-border);
    border-radius: .5rem;
    padding: .6rem .75rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--trans-fast,150ms ease), box-shadow var(--trans-fast,150ms ease);
}

    .gov-form .form-control::placeholder {
        color: rgba(0,0,0,.45);
    }

    .gov-form .form-control:focus {
        border-color: var(--form-accent);
        outline: 2px solid transparent;
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--form-accent) 25%, transparent);
    }

/* Textareas scale nicely */
.gov-form textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

/* Validation */
.gov-form .text-danger {
    margin-top: .25rem;
    font-size: .85rem;
}

/* Actions */
.gov-form .form-actions {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
}

/* Footer with signature lines (prints well) */
.gov-form .form-footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: end;
    border-top: 1px solid var(--form-border);
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.gov-form .sig-block, .gov-form .date-block {
    display: grid;
    gap: .35rem;
}

.gov-form .sig-line {
    height: 36px;
    border-bottom: 2px solid rgba(0,0,0,.6);
}

.gov-form .sig-label {
    font-size: .85rem;
    color: var(--form-muted);
}

/* Responsive */
@media (max-width: 767.98px) {
    .gov-form {
        padding: 1rem;
    }

        .gov-form .form-grid {
            grid-template-columns: 1fr;
        }

        .gov-form .form-meta {
            text-align: left;
        }

        .gov-form .form-footer {
            grid-template-columns: 1fr;
        }
}

/* Print */
@media print {
    body {
        background: #fff !important;
    }

    .paper-wrap {
        max-width: none;
        margin: 0;
    }

    .gov-form {
        border: 1px solid #000;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

        .gov-form .form-actions {
            display: none !important;
        }
}
/* ===== Form Intro (Government Form Look) ===== */
.form-intro {
    text-align: center;
    margin: 2rem auto 2.5rem;
    max-width: 720px;
}

.form-heading {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .25rem;
}

.form-subhead {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.form-divider {
    width: 80px;
    height: 3px;
    border: none;
    margin: 0 auto;
    background-color: var(--primary, #0D6EFD);
    border-radius: 2px;
}
/* ===== Form Intro with Agency Meta ===== */
.form-intro {
    text-align: center;
    margin: 2rem auto 2.5rem;
    max-width: 720px;
}

.form-meta-top {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: .9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.form-heading {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .25rem;
}

.form-subhead {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.form-divider {
    width: 80px;
    height: 3px;
    border: none;
    margin: 0 auto;
    background-color: var(--primary, #0D6EFD);
    border-radius: 2px;
}

/* print-friendly: keep header at top of page */
@media print {
    .form-intro {
        margin: 0 0 1rem 0;
        text-align: left;
    }

    .form-meta-top {
        justify-content: flex-start;
        margin-bottom: .5rem;
    }

    .form-heading {
        font-size: 1.5rem;
        text-transform: none;
    }

    .form-divider {
        margin-left: 0;
    }
}
/* ===== Letterhead variant (logo + meta) ===== */
.form-intro--letterhead .form-intro-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.form-intro-left {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem 1rem;
    justify-content: start;
}

.form-intro-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: #fff;
}

.form-intro-agency .agency-name {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
}

.form-intro-agency .agency-sub {
    font-size: .9rem;
    color: var(--text-muted);
}

/* reuse your meta styling but ensure right-align here */
.form-intro--letterhead .form-meta-top {
    justify-content: flex-end;
    text-align: right;
}

/* Responsive: stack logo/agency above meta */
@media (max-width: 640px) {
    .form-intro--letterhead .form-intro-row {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .form-intro--letterhead .form-meta-top {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Print: left-align, smaller logo for economy */
@media print {
    .form-intro-logo {
        width: 48px;
        height: 48px;
        box-shadow: none;
    }
}

/* Subtle pulse/scale on hover */
.social-links .social-link {
    color: #fff;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--trans-fast), transform var(--trans-fast);
}

    .social-links .social-link:hover {
        color: var(--primary);
        text-decoration: none;
        transform: scale(1.15);
    }

/* ===== Theme tokens ===== */
:root {
    /* match Bootstrap light header (.navbar-light/.bg-light) */
    --header-bg: #f8f9fa; /* light navbar background */
    --header-fg: #212529; /* light navbar text */
    --sidebar-link: rgba(0,0,0,.7);
    --sidebar-link-active: #0d6efd;
    --sidebar-hover: rgba(0,0,0,.05);
}

html[data-theme="dark"] {
    /* match Bootstrap dark header (.navbar-dark/.bg-dark) */
    --header-bg: #212529; /* dark navbar background */
    --header-fg: #f8f9fa; /* dark navbar text */
    --sidebar-link: rgba(255,255,255,.75);
    --sidebar-link-active: #fff;
    --sidebar-hover: rgba(255,255,255,.08);
}

/* ===== Sidebar surface that follows the header colors ===== */
.sidebar-surface {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
    background-image: none !important; /* ensure no image */
    background-size: initial !important;
    background-repeat: no-repeat !important;
}

    /* Links & states, theme-aware */
    .sidebar-surface .nav-link,
    .sidebar-surface .dropdown-item,
    .sidebar-surface .collapse .nav-link {
        color: var(--sidebar-link);
        border-radius: .375rem;
    }

        .sidebar-surface .nav-link:hover,
        .sidebar-surface .dropdown-item:hover,
        .sidebar-surface .collapse .nav-link:hover {
            color: var(--sidebar-link-active);
            background: var(--sidebar-hover);
        }

        .sidebar-surface .nav-link.active {
            color: var(--sidebar-link-active);
            background: var(--sidebar-hover);
        }

    /* Optional: make nested items feel grouped */
    .sidebar-surface .collapse {
        margin-left: .25rem;
        border-left: 1px solid rgba(0,0,0,.06);
    }

html[data-theme="dark"] .sidebar-surface .collapse {
    border-left-color: rgba(255,255,255,.12);
}

/* Logo tweaks on dark backgrounds (optional) */
.sidebar-surface img {
    filter: none; /* or brightness(1.1) contrast(0.95) if needed */
}
/* Clickable toggle link style (e.g., "Resources") */
.toggle-link {
    cursor: pointer;
    color: #f8f9fa; /* or use Bootstrap text-light */
    transition: background-color 0.2s, color 0.2s;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

    .toggle-link:hover,
    .toggle-link:focus {
        background-color: rgba(255, 255, 255, 0.1); /* subtle hover */
        color: #ffffff;
        text-decoration: none;
    }
/* ==== Light-mode readability + softer chrome ==== */

/* 1) Make the header/sidebar surface a true light gray (not white) */
:root {
    --header-bg: #e5e7eb; /* light gray */
    --header-fg: #111827; /* near-black text */
}

/* 2) Stop forcing white text in the main content on light mode */
.content {
    color: var(--text) !important; /* use your light text token (#1F2937) */
    /* keep your existing background, or pick a slightly grayer paper: */
    /* background-color: #f3f4f6 !important;  */ /* optional */
}

/* Keep dark mode as-is (white text on dark surfaces) */
:root[data-theme="dark"] .content {
    color: #ffffff !important;
    /* optional: harmonize with your dark tokens */
    /* background-color: var(--bg-subtle) !important; */
}

/* Ensure the top navbar follows the same light gray chrome */
.navbar-dark.bg-dark {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
}

    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text {
        color: var(--header-fg) !important;
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active {
            color: #000 !important; /* crisp hover in light mode */
        }

/* If you're using the matching sidebar surface class */
.sidebar.sidebar-surface {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
}

/* === Top navbar text matches sidebar link colors === */

/* Light mode */
:root {
    --nav-chrome-fg: var(--sidebar-link); /* same as sidebar link (rgba(0,0,0,.7)) */
    --nav-chrome-fg-hover: var(--sidebar-link-active); /* same as sidebar active (#0d6efd) */
}

.navbar-dark.bg-dark .navbar-brand,
.navbar-dark.bg-dark .nav-link,
.navbar-dark.bg-dark .navbar-text,
.navbar-dark.bg-dark .social-links .social-link {
    color: var(--nav-chrome-fg) !important;
}

    .navbar-dark.bg-dark .nav-link:hover,
    .navbar-dark.bg-dark .nav-link.active,
    .navbar-dark.bg-dark .navbar-brand:hover,
    .navbar-dark.bg-dark .social-links .social-link:hover {
        color: var(--nav-chrome-fg-hover) !important;
    }

/* Dark mode keeps original light-on-dark look */
:root[data-theme="dark"] {
    --nav-chrome-fg: var(--header-fg); /* #f8f9fa */
    --nav-chrome-fg-hover: #ffffff;
}
/* === Top navbar links use sidebar-style hover background === */
.navbar-dark.bg-dark .nav-link,
.navbar-dark.bg-dark .navbar-brand,
.navbar-dark.bg-dark .social-links .social-link {
    border-radius: .375rem; /* same rounding as sidebar */
    transition: background-color var(--trans-fast), color var(--trans-fast);
}

    .navbar-dark.bg-dark .nav-link:hover,
    .navbar-dark.bg-dark .nav-link.active,
    .navbar-dark.bg-dark .navbar-brand:hover,
    .navbar-dark.bg-dark .social-links .social-link:hover {
        background-color: var(--sidebar-hover) !important;
        color: var(--nav-chrome-fg-hover) !important;
    }

/* === Navbar brand + social links match sidebar text in light mode === */

/* Light mode */
:root {
    --nav-chrome-fg: var(--sidebar-link); /* reuse sidebar link color */
}

.navbar-dark.bg-dark .navbar-brand,
.navbar-dark.bg-dark .social-links .social-link {
    color: var(--nav-chrome-fg) !important;
}

    /* Hover states: match sidebar hover/active */
    .navbar-dark.bg-dark .social-links .social-link:hover {
        color: var(--sidebar-link-active) !important;
    }

    .navbar-dark.bg-dark .navbar-brand:hover {
        color: var(--sidebar-link-active) !important;
    }

/* Dark mode keeps existing light-on-dark look */
:root[data-theme="dark"] {
    --nav-chrome-fg: var(--header-fg);
}

/* === Fix dept name + admin mode text colors in light mode === */

/* Department name (navbar brand) */
.navbar-dark.bg-dark .navbar-brand {
    color: var(--nav-chrome-fg) !important;
}

    .navbar-dark.bg-dark .navbar-brand:hover {
        color: var(--nav-chrome-fg-hover) !important;
        background-color: var(--sidebar-hover) !important;
    }

/* Admin mode toggle text */
.navbar-dark.bg-dark .form-check.form-switch.text-light {
    color: var(--nav-chrome-fg) !important; /* use same as sidebar links */
}
/* === Admin mode toggle (navbar) themed like sidebar === */
.navbar-dark.bg-dark .form-check.form-switch .form-check-input {
    width: 2.25rem;
    height: 1.25rem;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--border);
    background-color: var(--sidebar-hover); /* light: rgba(0,0,0,.05), dark: rgba(255,255,255,.08) */
    box-shadow: none;
    transition: background-color var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
}

    /* Knob */
    .navbar-dark.bg-dark .form-check.form-switch .form-check-input::before {
        content: "";
        position: relative;
        display: block;
        width: 1rem;
        height: 1rem;
        left: 0.125rem;
        top: 0.025rem;
        border-radius: 999px;
        background: var(--nav-chrome-fg); /* light: dark gray; dark: light fg */
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        transition: transform var(--trans-fast);
    }

    /* ON state */
    .navbar-dark.bg-dark .form-check.form-switch .form-check-input:checked {
        background-color: color-mix(in oklab, var(--primary) 25%, var(--sidebar-hover)); /* subtle blue track */
        border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
    }

        .navbar-dark.bg-dark .form-check.form-switch .form-check-input:checked::before {
            transform: translateX(1rem);
        }

    /* Focus ring */
    .navbar-dark.bg-dark .form-check.form-switch .form-check-input:focus {
        outline: none;
        box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--btn-focus-ring); /* consistent with your buttons */
    }

    /* Disabled (just in case) */
    .navbar-dark.bg-dark .form-check.form-switch .form-check-input:disabled,
    .navbar-dark.bg-dark .form-check.form-switch .form-check-input[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

/* Keep the label text using the unified nav color (you already set this earlier) */
.navbar-dark.bg-dark .form-check.form-switch {
    color: var(--nav-chrome-fg) !important;
}
/* Navbar brand link uses nav chrome colors instead of default blue */
.navbar-dark.bg-dark .navbar-brand a {
    color: var(--nav-chrome-fg) !important; /* matches sidebar link color */
    text-decoration: none !important; /* no underline */
}

    .navbar-dark.bg-dark .navbar-brand a:hover {
        color: var(--nav-chrome-fg-hover) !important; /* blue accent (same as sidebar hover) */
        background-color: var(--sidebar-hover) !important;
        border-radius: .375rem;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }


:root {
    /* Chrome (navbar + sidebar) */
    --header-bg: #8b0000; /* Firehouse Red */
    --header-fg: #ffffff;
    /* Page surface (body/content) */
    --bg-body: #fdfdfd;
    --text: #1c1c1c;
    --text-muted: #6b7280;
    /* Panels/cards */
    --panel-bg: #ffffff;
    --panel-fg: #1c1c1c;
    --panel-border: rgba(0,0,0,0.1);
    /* Accent (Primary) */
    --primary: #d62828;
    --link: #d62828;
    --link-hover: #b22222;
    /* Accent (Secondary) */
    --secondary: #1e3a8a; /* Navy blue */
    --secondary-hover: #172554; /* Darker navy */
    /* Sidebar link states */
    --sidebar-link: rgba(255,255,255,0.8);
    --sidebar-link-active: #ffd700;
    --sidebar-hover: rgba(255,255,255,0.2);
}

:root[data-theme="dark"] {
  /* Chrome (navbar + sidebar) */
  --header-bg: #1c1c1c;       
  --header-fg: #ffffff;       

  /* Page surface (body/content) */
  --bg-body: #121212;         
  --text: #f5f5f5;            
  --text-muted: #9ca3af;      

  /* Panels/cards */
  --panel-bg: #1f2937;        
  --panel-fg: #f5f5f5;        
  --panel-border: rgba(255,255,255,0.1);

  /* Accent (Primary) */
  --primary: #ff4c4c;         
  --link: #ff4c4c;
  --link-hover: #ff7373;

  /* Accent (Secondary) */
  --secondary: #3b82f6;       /* Bright blue for contrast */
  --secondary-hover: #2563eb; /* Stronger hover state */

  /* Sidebar link states */
  --sidebar-link: rgba(255,255,255,0.6);
  --sidebar-link-active: #ffd700; 
  --sidebar-hover: rgba(255,255,255,0.2);
}

/* === FiveAlarmWeb minimal fixes (append at end) ====================== */
/* 1) Sidebar: drop diamondplate, use theme chrome */
.sidebar {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
    /* kill image/texture remnants */
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-blend-mode: normal !important;
    background-attachment: scroll !important;
    border-right: 1px solid var(--sidebar-hover) !important;
}

    .sidebar .nav-link {
        color: var(--sidebar-link) !important;
        border-radius: .375rem;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link:focus {
            color: var(--sidebar-link-active) !important;
            background: var(--sidebar-hover) !important;
            text-decoration: none;
        }

        .sidebar .nav-link.active,
        .sidebar .nav-link[aria-current="page"] {
            color: var(--sidebar-link-active) !important;
            background: var(--sidebar-hover) !important;
            font-weight: 700;
        }

/* 2) Top navbar: follow theme chrome (keeps your existing behavior) */
.navbar-dark.bg-dark {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
}

    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text,
    .navbar-dark.bg-dark .social-links .social-link {
        color: var(--header-fg) !important;
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active,
        .navbar-dark.bg-dark .navbar-brand:hover,
        .navbar-dark.bg-dark .social-links .social-link:hover {
            background-color: var(--sidebar-hover) !important;
            color: var(--sidebar-link-active) !important;
            border-radius: .375rem;
        }

/* 3) Content: readable, theme-aware surface */
.content {
    background-color: var(--bg-body) !important;
    color: var(--text) !important;
    text-shadow: none !important;
}

/* Carousel panels should also read the page surface */
.carousel,
.carousel .carousel-inner,
.carousel-item,
.panel-slide {
    background-color: var(--bg-body) !important;
    color: var(--text) !important;
}

/* Optional: cards/panels use your panel tokens cleanly */
.text-block,
.card {
    background-color: var(--panel-bg) !important;
    color: var(--panel-fg) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
/* ===== Softer, more muted look for both themes ===== */
/* Light mode tweaks */
:root {
    /* Chrome */
    --header-bg: color-mix(in oklab, #8b0000 82%, white 18%); /* soften Firehouse red */
    --header-fg: color-mix(in oklab, #ffffff 90%, #111 10%); /* slightly warmer white */
    /* Page surface */
    --bg-body: color-mix(in oklab, #fdfdfd 88%, #111 12%); /* off-white -> light grayish */
    --text: color-mix(in oklab, #1c1c1c 90%, #000 10%); /* a hair softer */
    /* Panels/cards */
    --panel-bg: color-mix(in oklab, #ffffff 88%, #111 12%);
    --panel-fg: color-mix(in oklab, #1c1c1c 92%, #000 8%);
    --panel-border: color-mix(in oklab, rgba(0,0,0,.12) 70%, rgba(0,0,0,.0) 30%);
    /* Accents */
    --primary: color-mix(in oklab, #d62828 80%, #111 20%); /* less neon */
    --link: var(--primary);
    --link-hover: color-mix(in oklab, #b22222 85%, #111 15%);
    /* Sidebar interactions */
    --sidebar-link: rgba(255,255,255,0.86);
    --sidebar-link-active: color-mix(in oklab, #ffd700 80%, white 20%); /* softer gold */
    --sidebar-hover: rgba(255,255,255,0.16); /* a touch lighter than before */
}

    /* Dark mode tweaks */
    :root[data-theme="dark"] {
        /* Chrome */
        --header-bg: color-mix(in oklab, #1c1c1c 85%, white 15%); /* lift the black a bit */
        --header-fg: color-mix(in oklab, #ffffff 94%, #000 6%);
        /* Page surface */
        --bg-body: color-mix(in oklab, #121212 92%, white 8%); /* not pitch black */
        --text: color-mix(in oklab, #f5f5f5 92%, #000 8%);
        --text-muted: color-mix(in oklab, #9ca3af 85%, #fff 15%);
        /* Panels/cards */
        --panel-bg: color-mix(in oklab, #1f2937 88%, white 12%); /* gentler navy-gray */
        --panel-fg: color-mix(in oklab, #f5f5f5 92%, #000 8%);
        --panel-border: color-mix(in oklab, rgba(255,255,255,.10) 70%, transparent 30%);
        /* Accents */
        --primary: color-mix(in oklab, #ff4c4c 75%, white 25%); /* soften red accent */
        --link: var(--primary);
        --link-hover: color-mix(in oklab, #ff7373 80%, white 20%);
        /* Sidebar interactions */
        --sidebar-link: rgba(255,255,255,0.72);
        --sidebar-link-active: color-mix(in oklab, #ffd700 75%, white 25%);
        --sidebar-hover: rgba(255,255,255,0.14); /* calmer hover */
    }

/* Make the transition itself feel softer */
:root {
    --trans-fast: 220ms ease; /* slightly slower than 150ms */
}

/* Ensure surfaces actually use the softened tokens */
.navbar-dark.bg-dark {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
}

.sidebar {
    background-color: var(--header-bg) !important;
    color: var(--header-fg) !important;
    border-right: 1px solid var(--sidebar-hover) !important;
}

.content,
.carousel,
.carousel .carousel-inner,
.carousel-item,
.panel-slide {
    background-color: var(--bg-body) !important;
    color: var(--text) !important;
}

.text-block, .card {
    background-color: var(--panel-bg) !important;
    color: var(--panel-fg) !important;
    border: 1px solid var(--panel-border) !important;
}

/* Link tone */
a {
    color: var(--link);
    transition: color var(--trans-fast);
}

    a:hover {
        color: var(--link-hover);
    }

/* Sidebar link tone */
.sidebar .nav-link {
    color: var(--sidebar-link) !important;
    transition: background-color var(--trans-fast), color var(--trans-fast);
}

    .sidebar .nav-link:hover,
    .sidebar .nav-link:focus {
        color: var(--sidebar-link-active) !important;
        background: var(--sidebar-hover) !important;
    }

    .sidebar .nav-link.active,
    .sidebar .nav-link[aria-current="page"] {
        color: var(--sidebar-link-active) !important;
        background: var(--sidebar-hover) !important;
        font-weight: 700;
    }

/* === Softer, more faded panel and content backgrounds === */

/* Light mode */
:root {
    --panel-bg: color-mix(in oklab, #ffffff 85%, #e5e7eb 15%); /* soft white with a hint of gray */
    --panel-fg: #1f2937;
}

.text-block {
    background-color: color-mix(in oklab, var(--panel-bg) 92%, transparent 8%) !important;
}

.panel-slide {
    background: linear-gradient( to bottom right, color-mix(in oklab, var(--bg-subtle) 80%, white 20%), color-mix(in oklab, var(--bg-elev) 80%, white 20%) ) !important;
}

.content {
    background-color: color-mix(in oklab, var(--bg-body) 85%, white 15%) !important;
    color: var(--panel-fg);
}

/* Dark mode */
:root[data-theme="dark"] {
    --panel-bg: color-mix(in oklab, #1f2937 85%, #121212 15%); /* deep gray softened */
    --panel-fg: #e5e7eb;
}

    :root[data-theme="dark"] .text-block {
        background-color: color-mix(in oklab, var(--panel-bg) 85%, transparent 15%) !important;
    }

    :root[data-theme="dark"] .panel-slide {
        background: linear-gradient( to bottom right, color-mix(in oklab, var(--bg-subtle) 85%, black 15%), color-mix(in oklab, var(--bg-elev) 85%, black 15%) ) !important;
    }

    :root[data-theme="dark"] .content {
        background-color: color-mix(in oklab, var(--bg-body) 85%, black 15%) !important;
        color: var(--panel-fg);
    }
/* === Softer chrome + unified page background (append at end) ======= */

/* Create soft “blended” surfaces from your existing tokens */
:root {
    /* Light mode softened surfaces */
    --chrome-bg-soft: color-mix(in oklab, var(--header-bg) 82%, var(--bg-body) 18%);
    --chrome-fg-soft: color-mix(in oklab, var(--header-fg) 92%, #111 8%);
    /* Page background outside cards/panels */
    --page-bg-soft: color-mix(in oklab, var(--bg-body) 88%, white 12%);
    /* Hover surface for chrome (slightly visible but calm) */
    --chrome-hover-soft: color-mix(in oklab, var(--sidebar-hover) 70%, transparent 30%);
}

    /* Dark mode variants (lift the blacks a bit, soften white) */
    :root[data-theme="dark"] {
        --chrome-bg-soft: color-mix(in oklab, var(--header-bg) 80%, var(--bg-body) 20%);
        --chrome-fg-soft: color-mix(in oklab, var(--header-fg) 94%, #000 6%);
        --page-bg-soft: color-mix(in oklab, var(--bg-body) 88%, black 12%);
        --chrome-hover-soft: color-mix(in oklab, var(--sidebar-hover) 70%, transparent 30%);
    }

/* 1) Apply unified page background (outside cards/panels) */
html, body {
    background: var(--page-bg-soft) !important;
}

.content,
.carousel,
.carousel .carousel-inner,
.carousel-item,
.panel-slide {
    background-color: var(--page-bg-soft) !important;
    color: var(--text) !important;
}

/* 2) Soften the chrome (navbar + sidebar) */
.navbar-dark.bg-dark {
    background-color: var(--chrome-bg-soft) !important;
    color: var(--chrome-fg-soft) !important;
    backdrop-filter: saturate(120%) blur(4px); /* subtle polish, optional */
}

    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text,
    .navbar-dark.bg-dark .social-links .social-link {
        color: var(--chrome-fg-soft) !important;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active,
        .navbar-dark.bg-dark .navbar-brand:hover,
        .navbar-dark.bg-dark .social-links .social-link:hover {
            background-color: var(--chrome-hover-soft) !important;
            color: var(--sidebar-link-active) !important;
            border-radius: .375rem;
        }

/* Sidebar adopts the same softened chrome */
.sidebar {
    background-color: var(--chrome-bg-soft) !important;
    color: var(--chrome-fg-soft) !important;
    background-image: none !important;
    border-right: 1px solid color-mix(in oklab, var(--chrome-fg-soft) 10%, transparent) !important;
    backdrop-filter: saturate(120%) blur(4px); /* optional, matches navbar */
}

    /* Sidebar link tones remain gentle */
    .sidebar .nav-link {
        color: var(--sidebar-link) !important;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link:focus {
            color: var(--sidebar-link-active) !important;
            background: var(--chrome-hover-soft) !important;
            text-decoration: none;
        }

        .sidebar .nav-link.active,
        .sidebar .nav-link[aria-current="page"] {
            color: var(--sidebar-link-active) !important;
            background: var(--chrome-hover-soft) !important;
            font-weight: 700;
        }

/* 3) Ensure cards/panels still “float” above the softened page */
.text-block, .card {
    background-color: var(--panel-bg) !important;
    color: var(--panel-fg) !important;
    border: 1px solid var(--panel-border) !important;
}

/* === 1. Remove sidebar/content dividing line === */
.sidebar {
    border-right: none !important;
    box-shadow: none !important; /* optional: remove subtle shadow */
}

/* === 2. Keep banner fixed at top === */
header.banner-wrap {
    position: fixed; /* stay in place */
    top: var(--navbar-h); /* directly under the navbar */
    left: 0;
    right: 0;
    z-index: 1025; /* above content/sidebar but below modals */
    block-size: 16.6vh; /* keep your height */
    min-block-size: 80px;
    max-block-size: 260px;
    overflow: hidden;
}

/* Adjust main content so it doesn't overlap with the fixed banner */
main.with-banner {
    padding-top: calc(16.6vh + 1rem); /* banner height + breathing room */
}

/* ===== Remove any dividing line between sidebar and content ===== */
.sidebar {
    border-right: none !important;
    box-shadow: none !important;
}

/* ===== Fixed banner that does NOT cover the sidebar ===== */

/* Mobile / tablet: banner spans the full width under the navbar */
header.banner-wrap {
    position: fixed;
    top: var(--navbar-h); /* sits right under the fixed navbar */
    left: 0;
    right: 0;
    z-index: 1025; /* above content, below modals */
    block-size: 16.6vh;
    min-block-size: 80px;
    max-block-size: 260px;
    overflow: hidden;
}

/* Desktop (≥992px): offset banner to start AFTER the fixed sidebar (240px) */
@media (min-width: 992px) {
    header.banner-wrap {
        left: 240px; /* match your fixed sidebar width */
        right: 0;
    }
}

/* Give the scrolling content enough top space so it doesn't hide under the banner */
main.with-banner {
    padding-top: calc(16.6vh + 1rem); /* banner height + breathing room */
}
/* === Keep banner clear of the sidebar, precisely === */

/* 0) One source of truth for sidebar width */
:root {
    --sidebar-w: 240px;
}

/* Make sure existing layout uses the same width (optional but recommended) */
@media (min-width: 992px) {
    .layout {
        padding-left: var(--sidebar-w) !important;
    }

    .sidebar {
        width: var(--sidebar-w) !important;
        min-width: var(--sidebar-w) !important;
        max-width: var(--sidebar-w) !important;
    }
}

/* Banner: fixed under the navbar */
header.banner-wrap {
    position: fixed;
    top: var(--navbar-h);
    left: 0; /* mobile/tablet: full width */
    right: 0;
    z-index: 1010; /* BELOW the sidebar (sidebar is 1020) */
    block-size: var(--banner-h);
    overflow: hidden;
}

/* Desktop: offset banner by the exact sidebar width */
@media (min-width: 992px) {
    header.banner-wrap {
        left: var(--sidebar-w);
        right: 0;
    }
}

/* Push page content below the fixed banner so it doesn’t hide underneath */
main.with-banner {
    padding-top: calc(var(--banner-h) + 1rem);
}

/* Title page: clean background */
.titlepage {
    margin-bottom: 0;
    font-size: 1rem;
    background: var(--bg-body);
}

/* Homepage content watermark (pinned patch) */
body.home-page .content {
    position: relative;
    background: var(--bg-body);
}

    body.home-page .content::before {
        content: "";
        position: fixed; /* pinned in viewport center */
        inset: 0;
        background: url('/images/FiveAlarmWeb.png') no-repeat center center;
        background-size: 300px auto; /* larger patch */
        background-position: center 20%;
        opacity: 0.12; /* less ghostlike */
        pointer-events: none;
        z-index: 0;
    }
/* === Banner + layout constants === */
:root {
    --sidebar-w: 240px;
    --banner-h: clamp(80px, 16.6vh, 260px);
}

/* Fixed banner under the fixed navbar; never covers the sidebar */
header.banner-wrap {
    position: fixed;
    top: var(--navbar-h); /* sits right under the navbar */
    left: 0; /* phones/tablets: full width */
    right: 0;
    z-index: 1010; /* BELOW the sidebar (sidebar z-index is 1020) */
    block-size: var(--banner-h);
    overflow: hidden;
}

/* Desktop: offset by the exact sidebar width so they don't overlap */
@media (min-width: 992px) {
    header.banner-wrap {
        left: var(--sidebar-w);
        right: 0;
    }
}

/* Ensure the scrollable main never hides under the fixed banner */
main.with-banner {
    padding-top: calc(var(--banner-h) + 1rem) !important; /* override any earlier 0 */
}

/* === Watermark (homepage) — bigger and a bit bolder === */
.titlepage {
    margin-bottom: 0;
    font-size: 1rem;
    background: var(--bg-body);
}

body.home-page .content {
    position: relative;
    background: var(--bg-body);
    z-index: 0; /* keep stacking sane */
}

    body.home-page .content::before {
        content: "";
        position: fixed; /* pinned to viewport center */
        inset: 0;
        background: url('/images/FiveAlarmWeb.png') no-repeat center center;
        background-size: 300px auto; /* bigger patch */
        opacity: 0.22; /* less ghostlike */
        pointer-events: none;
        z-index: 0;
    }
    /* 2x watermark size */
    body.home-page .content::before {
        background-size: 600px auto; /* was 480px */
    }
/* === Unify navbar + sidebar chrome colors === */
.navbar-dark.bg-dark,
.sidebar {
    background-color: var(--chrome-bg-soft) !important;
    color: var(--chrome-fg-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Optional: ensure both share the same blur effect */
.navbar-dark.bg-dark,
.sidebar {
    backdrop-filter: saturate(120%) blur(4px);
}

/* === FINAL: make navbar + sidebar the exact same chrome === */
:root {
    /* Use your softened chrome if present, else fall back to header tokens */
    --chrome-bg-unified: var(--chrome-bg-soft, var(--header-bg));
    --chrome-fg-unified: var(--chrome-fg-soft, var(--header-fg));
}

/* Hard-override everything that could cause a mismatch */
body .navbar.navbar-dark.bg-dark,
body .sidebar,
body .sidebar.sidebar-surface {
    background: none !important;
    background-color: var(--chrome-bg-unified) !important;
    color: var(--chrome-fg-unified) !important;
    /* kill anything that visually changes the tone */
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Make sure the navbar doesn’t add a bottom rule */
body .navbar.navbar-dark.bg-dark {
    border-bottom: 0 !important;
}

    /* (Optional) link text tones unified too */
    body .navbar.navbar-dark.bg-dark .nav-link,
    body .navbar.navbar-dark.bg-dark .navbar-brand,
    body .navbar.navbar-dark.bg-dark .navbar-text,
    body .navbar.navbar-dark.bg-dark .social-links .social-link,
    body .sidebar .nav-link {
        color: var(--chrome-fg-unified) !important;
    }
/* === Unified Chrome: Navbar + Sidebar === */
:root {
    --chrome-bg: var(--header-bg); /* use the same background token */
    --chrome-fg: var(--header-fg); /* use the same text token */
    --chrome-hover: var(--sidebar-hover);
    --chrome-active: var(--sidebar-link-active);
}

/* Navbar */
.navbar-dark.bg-dark {
    background-color: var(--chrome-bg) !important;
    color: var(--chrome-fg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text,
    .navbar-dark.bg-dark .social-links .social-link {
        color: var(--chrome-fg) !important;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active,
        .navbar-dark.bg-dark .navbar-brand:hover,
        .navbar-dark.bg-dark .social-links .social-link:hover {
            background-color: var(--chrome-hover) !important;
            color: var(--chrome-active) !important;
            border-radius: .375rem;
        }

/* Sidebar */
.sidebar {
    background-color: var(--chrome-bg) !important;
    color: var(--chrome-fg) !important;
    border-right: none !important; /* continuous with navbar */
    box-shadow: none !important;
    background-image: none !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

    .sidebar .nav-link {
        color: var(--sidebar-link) !important;
        border-radius: .375rem;
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link:focus {
            color: var(--chrome-active) !important;
            background: var(--chrome-hover) !important;
            text-decoration: none;
        }

        .sidebar .nav-link.active,
        .sidebar .nav-link[aria-current="page"] {
            color: var(--chrome-active) !important;
            background: var(--chrome-hover) !important;
            font-weight: 700;
        }

/* Example: “slate” theme */
:root[data-theme="slate"] {
    --header-bg: #243141;
    --header-fg: #f5f7fa;
    --bg-body: #0f1216;
    --text: #e5e7eb;
    --text-muted: #9aa7b2;
    --panel-bg: #151b23;
    --panel-fg: #e5e7eb;
    --panel-border: rgba(255,255,255,.08);
    --primary: #4ea1ff;
    --link: #4ea1ff;
    --link-hover: #7bb9ff;
    --sidebar-link: rgba(255,255,255,.75);
    --sidebar-link-active: #fff;
    --sidebar-hover: rgba(255,255,255,.1);
}

/* Example: “firehouse” theme (lighter, brand-forward) */
:root[data-theme="firehouse"] {
    --header-bg: #8b0000;
    --header-fg: #ffffff;
    --bg-body: #faf7f5;
    --text: #1f2937;
    --text-muted: #6b7280;
    --panel-bg: #ffffff;
    --panel-fg: #1f2937;
    --panel-border: rgba(0,0,0,.08);
    --primary: #d62828;
    --link: #d62828;
    --link-hover: #b22222;
    --sidebar-link: rgba(255,255,255,.86);
    --sidebar-link-active: #ffd700;
    --sidebar-hover: rgba(255,255,255,.12);
}

#themeAdminPanel {
    position: relative;
    z-index: 1031;
}
/* === Fix sidebar/content shift & hide scrollbars === */

/* Main scroll area = content only, keep it stable */
.content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox: hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge Legacy */
}

    .content::-webkit-scrollbar {
        display: none;
    }
/* Chrome/Safari */

/* Sidebar should never overflow horizontally */
.sidebar {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar::-webkit-scrollbar {
        display: none;
    }

/* Kill scrollbars globally (body/html) */
html, body {
    overflow: hidden; /* no browser scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

/* Compact theme admin panel to prevent cut-off in sidebar */
#themeAdminPanel {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

    #themeAdminPanel .form-select {
        width: 100%;
        min-width: 0;
    }

    #themeAdminPanel .btn {
        width: 100%;
    }

/* On wider screens, restore horizontal layout */
@media (min-width: 1200px) {
    #themeAdminPanel {
        grid-template-columns: auto 1fr auto auto;
    }

        #themeAdminPanel .btn {
            width: auto;
        }
}
/* === Unified Scroll + Hidden Scrollbars === */

/* Body/page should scroll, but no scrollbars visible */
html, body {
    height: 100%;
    margin: 0;
    overflow-y: scroll; /* keep scrolling */
    overflow-x: hidden; /* no sideways shift */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge Legacy */
}

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

/* Content area scrolls too (nested scroll support) */
.content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .content::-webkit-scrollbar {
        display: none;
    }

/* Sidebar: scroll internally if tall, but no bars */
.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar::-webkit-scrollbar {
        display: none;
    }

/* === Compact Theme Admin Panel === */
#themeAdminPanel {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

    #themeAdminPanel .form-select {
        width: 100%;
        min-width: 0;
    }

    #themeAdminPanel .btn {
        width: 100%;
    }

/* On wide screens, restore horizontal layout */
@media (min-width: 1200px) {
    #themeAdminPanel {
        grid-template-columns: auto 1fr auto auto;
    }

        #themeAdminPanel .btn {
            width: auto;
        }
}



/* --- Layout offsets --- */
html.admin-mode-on .with-sidebar {
    margin-left: var(--sidebar-width, 260px);
}

html.admin-mode-off .with-sidebar,
.app-public .with-sidebar {
    margin-left: 0;
}

/* Kill side padding on pages that show the banner (only when no sidebar) */
html.admin-mode-off .content.with-banner,
.app-public .content.with-banner {
    padding-left: 0;
    padding-right: 0;
}

/* --- Banner sizing --- */
/* Keep the wrapper clean */
.banner-wrap {
    display: block;
    line-height: 0;
}

    /* Always keep the banner 20vh tall and scale nicely */
    .banner-wrap .banner {
        display: block;
        width: 100%;
        height: 20vh; /* your 20vh height restored */
        object-fit: cover; /* fill the strip, crop edges if needed */
        object-position: center;
    }
/* Full-bleed only when the sidebar ISN'T showing (public or admin-mode OFF) */
html.admin-mode-off .banner-wrap,
.app-public .banner-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Make sure nothing clips the full-bleed strip */
html.admin-mode-off .layout,
html.admin-mode-off .content,
.app-public .layout,
.app-public .content {
    overflow: visible;
}

/* One source of truth */
:root {
    --sidebar-w: 240px;
    --banner-h: 20vh;
}

/* 1) Only reserve sidebar space when Admin Mode is ON */
@media (min-width: 992px) {
    html.admin-mode-on .layout {
        padding-left: var(--sidebar-w) !important;
    }

    html.admin-mode-off .layout,
    .app-public .layout {
        padding-left: 0 !important;
    }
}

/* 2) Banner position + width
   - Fixed under navbar (as you had)
   - Offsets for sidebar ONLY when admin-mode is ON
   - Full-bleed when admin-mode is OFF (or public)
*/
header.banner-wrap {
    position: fixed !important;
    top: var(--navbar-h) !important;
    z-index: 1010 !important;
    left: 0 !important; /* default: full width */
    right: 0 !important;
    block-size: var(--banner-h) !important; /* keep 20vh */
    overflow: hidden !important;
}

/* Desktop offset ONLY when the admin shell is visible */
@media (min-width: 992px) {
    html.admin-mode-on header.banner-wrap {
        left: var(--sidebar-w) !important;
        right: 0 !important;
    }

    html.admin-mode-off header.banner-wrap,
    .app-public header.banner-wrap {
        left: 0 !important;
        right: 0 !important;
    }
}

/* 3) Image scaling (stop the smear/stretch) */
header.banner-wrap .banner {
    display: block !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: cover !important; /* fill the strip without distortion */
    object-position: center !important;
}

/* 4) Make sure main content clears the fixed banner */
main.with-banner {
    padding-top: calc(var(--banner-h) + 1rem) !important;
}

/* 5) No accidental clipping or side padding when there is no sidebar */
html.admin-mode-off .content.with-banner,
.app-public .content.with-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* == Final banner edge fix == */
header.banner-wrap {
    position: fixed !important;
    top: var(--navbar-h) !important;
    left: 0 !important;
    right: -1px !important; /* <- nudges past rounding to remove the sliver */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

    header.banner-wrap .banner {
        display: block !important;
        width: 100% !important;
        height: var(--banner-h, 20vh) !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #222; 
    }
/* === Banner fixed to exactly 1:5 (20vh) === */
:root {
    --banner-h: 20vh;
}