/* ── Site-wide hero background with frosted-glass container ──  v=20260310e
   CSS vars --hero-bg-url / --hero-bg-dark injected by PageWrap.
   Container IDs: #pw-outer (buildGenericPage), #pw-content (pagewrapnavbarbs + wrapInContainer)
   IMPORTANT: #pw-outer contains the fixed navbar — it must NOT have
   backdrop-filter or it breaks position:fixed. Frost goes on #pw-content.
   Per-page tuning:
     1) webqueryini.glassstyle column: 'none' | 'light' | '' (default)
     2) $GLOBALS['_glassstyle'] = 'none'; in a page function
     3) Override --glass-opacity / --glass-blur / --glass-border-opacity /
        --glass-card-opacity in a <style> block to adjust or disable the frosted effect.
   ───────────────────────────────────────────────────────────────── */

/* Background image on body.
   Longhand properties each get !important to guarantee they override
   the inline background-color:#F2F2F2 injected by PageWrap bodypadd. */
body {
    background-color: transparent !important;
    background-image: var(--hero-bg-url) !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
[data-bs-theme="dark"] body {
    background-color: transparent !important;
    background-image: var(--hero-bg-dark) !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Outer wrapper: transparent — navbar lives here, must not interfere */
#pw-outer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Also clear any stray .container background from Bootstrap or other sheets */
#pw-outer.container,
#pw-outer.container-fluid {
    background: transparent !important;
}

/* ── Tunable glass variables ──
   Pages can override these to control the frosted-glass effect:
     --glass-opacity   : container background alpha  (default 0.28 light / 0.18 dark)
     --glass-blur      : backdrop blur amount        (default 8px)
     --glass-border-opacity : border alpha           (default 0.35 light / 0.08 dark)
     --glass-card-opacity   : card background alpha  (default 0.72 light / 0.42 dark)
   Set all to 0 for fully transparent containers. */
:root {
    --glass-opacity: 0.28;
    --glass-blur: 8px;
    --glass-border-opacity: 0.35;
    --glass-card-opacity: 0.72;
    --glass-shadow-opacity: 0.08;
    --glass-radius: 12px;
}
[data-bs-theme="dark"] {
    --glass-opacity: 0.18;
    --glass-border-opacity: 0.08;
    --glass-card-opacity: 0.42;
    --glass-shadow-opacity: 0.25;
}

/* ── Frosted-glass on inner content container ── */
#pw-content {
    background: rgba(255, 255, 255, var(--glass-opacity)) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    border-radius: var(--glass-radius);
    margin-top: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: 0 2px 24px rgba(0, 0, 0, var(--glass-shadow-opacity));
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
}
[data-bs-theme="dark"] #pw-content {
    background: rgba(33, 37, 41, var(--glass-opacity)) !important;
    border-color: rgba(255, 255, 255, var(--glass-border-opacity));
    box-shadow: 0 2px 24px rgba(0, 0, 0, var(--glass-shadow-opacity));
}

/* ── Cards: frosted glass ──
   Cards get their own backdrop-filter so they frost individually against
   the background — works whether the container is frosted or transparent.
   Nested cards (.card .card) and modal cards are excluded. */
#pw-content .card {
    background: rgba(255, 255, 255, var(--glass-card-opacity)) !important;
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}
[data-bs-theme="dark"] #pw-content .card {
    background: rgba(52, 58, 64, var(--glass-card-opacity)) !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Card headers: slightly more opaque for visual separation.
   Exclude headers with explicit bg colors (inline or Bootstrap utilities) via :not() */
#pw-content .card > .card-header:not([style*="background-color"]):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning) {
    background: rgba(255, 255, 255, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"] #pw-content .card > .card-header:not([style*="background-color"]):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* Card headers with explicit background colors: disable frost so solid color shows */
#pw-content .card > .card-header[style*="background-color"],
#pw-content .card > .card-header.bg-primary,
#pw-content .card > .card-header.bg-secondary,
#pw-content .card > .card-header.bg-success,
#pw-content .card > .card-header.bg-danger,
#pw-content .card > .card-header.bg-info,
#pw-content .card > .card-header.bg-warning {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dropdowns inside frosted cards: backdrop-filter creates a stacking context
   on each card, so a dropdown in one card can't paint above a sibling card.
   Elevate the card when its dropdown is open. Also covers popovers & tooltips. */
#pw-content .card:has(.dropdown-menu.show),
#pw-content .card:has(.popover),
#pw-content .card:has([aria-expanded="true"]) {
    z-index: 10;
    position: relative;
}

/* Nested cards: no double-frost */
#pw-content .card .card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme="dark"] #pw-content .card .card {
    border-color: rgba(255, 255, 255, 0.05);
}

/* Tables: opaque for readability over frosted glass */
#pw-content .table {
    --bs-table-bg: rgba(255, 255, 255, 0.82);
}
#pw-content .table thead th {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}
#pw-content .table tbody tr:hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.95);
}
#pw-content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(245, 245, 245, 0.85);
}
[data-bs-theme="dark"] #pw-content .table {
    --bs-table-bg: rgba(33, 37, 41, 0.82);
}
[data-bs-theme="dark"] #pw-content .table thead th {
    background: rgba(52, 58, 64, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] #pw-content .table tbody tr:hover {
    --bs-table-hover-bg: rgba(52, 58, 64, 0.95);
}
[data-bs-theme="dark"] #pw-content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(40, 44, 48, 0.85);
}

/* DataTables controls: opaque backgrounds */
#pw-content .dataTables_wrapper .dataTables_filter input,
#pw-content .dataTables_wrapper .dataTables_length select {
    background-color: rgba(255, 255, 255, 0.88);
}
[data-bs-theme="dark"] #pw-content .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] #pw-content .dataTables_wrapper .dataTables_length select {
    background-color: rgba(33, 37, 41, 0.88);
}

/* ── Full-screen homepage overrides ──
   The alt-homepage and homepage-split are full-screen launchers that
   manage their own background. Disable frosted-glass on those pages. */
#pw-content:has(.alt-homepage),
#pw-content:has(.homepage-split),
#pw-content:has(.login-card) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
}

/* Modals + dropdowns: stay fully opaque */
.modal-content {
    background: var(--bs-modal-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── Mobile fixed background ──
   iOS Safari breaks background-attachment:fixed (treats as scroll).
   Pseudo-elements with position:fixed are also unreliable on iOS.
   Fix: JS injects a real <div id="hero-bg-mobile"> into body.
   z-index:0 (not -1) keeps it above the canvas background.
   #pw-outer gets position:relative + z-index:1 so content layers above. */
#hero-bg-mobile { display: none; }
@media (max-width: 991px) {
    body, [data-bs-theme="dark"] body {
        background-image: none !important;
        background-color: transparent !important;
        background-attachment: scroll !important;
    }
    #hero-bg-mobile {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--hero-bg-url) center / cover no-repeat;
        pointer-events: none;
    }
    [data-bs-theme="dark"] #hero-bg-mobile {
        background-image: var(--hero-bg-dark);
    }
    #pw-outer {
        position: relative;
        z-index: 1;
    }
    #pw-content {
        background: rgba(255, 255, 255, 0.92) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        backdrop-filter: blur(12px) saturate(1.2);
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0.5rem 0.75rem 1rem;
        border-left: none;
        border-right: none;
    }
    [data-bs-theme="dark"] #pw-content {
        background: rgba(33, 37, 41, 0.92) !important;
    }
    /* Tighter spacing on mobile */
    #pw-content .container,
    #pw-content .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    #pw-content .card {
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }
}

/* ── Print ── */
@media print {
    body { background: #fff !important; }
    #pw-content, #pw-content .card { background: transparent !important; backdrop-filter: none !important; }
}