/* ==========================================================================
   SITE.CSS — Global Shell
   Covers: reset, root tokens, dark mode tokens, typography, body, navbar,
   footer, dark/light toggle, scrollbar, login buttons, avatars, print, accessibility.
   Page-level & component styles live in their own scoped CSS files.
   ========================================================================== */


/* ==========================================================================
   1. BOX-MODEL RESET
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
    scrollbar-width: thin;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Thin overlay scrollbar for Chrome/Edge - floats over content, takes no layout space */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .28);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, .45);
    }

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Widescreen content cap (>1920 px) */
@media (min-width: 1921px) {
    .content-inner {
        max-width: 1920px;
        margin-inline: auto;
    }
}


/* ==========================================================================
   2. ROOT TOKENS — LIGHT MODE
   ========================================================================== */

:root {
    /* Brand */
    --iac-blue-hex: #002855;
    --iac-blue-rgb: 0, 40, 85;
    --iac-gold: #F1B828;
    --iac-gold-rgb: 241, 184, 40;
    /* Computed shorthands */
    --iac-blue-5: rgba(0, 40, 85, .05);
    --iac-grey-5: rgba(0, 0, 0, .05);
    --iac-grey-slab: #f1f3f6;
    /* Surfaces */
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-hi: #f5f6f8;
    --bg-tertiary: #f7f8f9;
    /* Borders */
    --border-color: #d7dde3;
    /* Text */
    --text-main: #1a1a1a;
    --text-muted: #5a6b7a;
    --text-brand: var(--iac-blue-hex);
    --text-brand-soft: var(--iac-blue-hex);
    /* Links */
    --link-color: var(--iac-blue-hex);
    --link-hover-color: var(--iac-gold);
    /* Inputs */
    --input-bg: #ffffff;
    --input-bg-hover: #ffffff;
    --input-border: rgba(0, 0, 0, .15);
    --input-focus-ring: rgba(var(--iac-blue-rgb), .15);
    --input-focus-border: rgba(var(--iac-blue-rgb), .35);
    /* Tables */
    --table-head-bg: #f5f6f7;
    --table-row-hover-bg: rgba(0, 40, 85, .02);
    --table-sticky-head-bg: #ffffff;
    /* Panels */
    --panel-shell-bg: #f8f9fb;
    --panel-shell-border: #d7dde3;
    --panel-head-bg: #ffffff;
    --panel-head-border: #bfc8d6;
    --panel-label-color: #2c3e50;
    --panel-badge-bg: #e6eaef;
    --panel-badge-text: #2c3e50;
    /* Badges */
    --badge-admin-bg: #002855;
    --badge-admin-text: #fff;
    --badge-est-bg: #2a3440;
    --badge-est-text: #fff;
    --badge-rep-bg: #F1B828;
    --badge-rep-text: #000;
    /* Shadows */
    --card-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    --offcanvas-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --sticky-bg: #ffffff;
    --sticky-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    /* Misc */
    --border-radius: .75rem;
    --footer-h: 30px;
    /* Spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    /* Layout */
    --navbar-height: 56px;
    --container-padding: 1rem;
    --door-pad-x: 1.25rem;
    --section-card-pad-x: 1.25rem;
    /* Bootstrap overrides */
    --bs-primary: var(--iac-blue-hex);
    --bs-primary-rgb: var(--iac-blue-rgb);
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23002855'%3E%3Cpath d='M3.2 5h9.6L8 10.5 3.2 5z'/%3E%3C/svg%3E");
    /* Font */
    --iac-font: "din-2014", sans-serif;
    /* Image tokens (used by splash/index pages) */
    --img-portal-hero: url("/img/portal-hero.png");
    --img-index-bg: url("/img/index-bg-iac.png");
    --img-login-bg: url("/img/login-bg-iac.png");
    --img-chevron-white: url("/img/chevron_white.svg");
    --img-iac-swirl: url("/img/iac-swirl.png");
    /* Index page tokens */
    --idx-navy: #002855;
    --idx-gold: #F1B828;
    --idx-hero-bg: #f0f3f8;
    --idx-band-bg: #dce4f0;
    --idx-band-border: rgba(0, 40, 85, .18);
    --idx-content-bg: #f7f9fc;
    --idx-title-clr: #002855;
    --idx-sub-clr: #3a5070;
    --idx-bullet-text: #2c3e55;
    --idx-bullet-dot: #F1B828;
    --idx-link: #1a5ca8;
    --idx-link-hover: #002855;
    /* Splash layout tokens — must live in site.css because Blazor scoped CSS cannot set :root variables */
    --hero-w: 35vw;
    --band-h: 88px;
    --band-pad-x: clamp(1.5rem, 4vw, 3.5rem);
}

/* Responsive token overrides */
@media (max-width: 767.98px) {
    :root {
        --text-base: 0.9375rem;
        --border-radius: 0.5rem;
        --container-padding: 0.75rem;
        --door-pad-x: 1rem;
        --section-card-pad-x: 1rem;
    }
}

@media (max-height: 700px) {
    :root {
        --footer-h: 80px;
    }
}


/* ==========================================================================
   3. DARK MODE TOKENS
   ========================================================================== */

:root[data-bs-theme="dark"] {
    --bg-page: #0e1216;
    --bg-surface: #151b22;
    --bg-surface-hi: #1a1f26;
    --bg-tertiary: #151b22;
    --border-color: #2a3440;
    --iac-grey-slab: #1a1f26;
    --text-main: #e8edf2;
    --text-muted: rgba(232, 237, 242, .6);
    --text-brand: #9bc6ff;
    --text-brand-soft: #a4c4e7;
    --link-color: #9bc2ff;
    --link-hover-color: var(--iac-gold);
    --input-bg: var(--bg-surface-hi);
    --input-bg-hover: #6e6e6e;
    --input-border: var(--border-color);
    --input-focus-ring: rgba(var(--iac-blue-rgb), .15);
    --input-focus-border: rgba(var(--iac-blue-rgb), .35);
    --table-head-bg: var(--bg-surface-hi);
    --table-row-hover-bg: rgba(0, 40, 85, .08);
    --table-sticky-head-bg: var(--bg-surface-hi);
    --panel-shell-bg: var(--bg-surface);
    --panel-shell-border: var(--border-color);
    --panel-head-bg: var(--bg-surface-hi);
    --panel-head-border: #2a3440;
    --panel-label-color: var(--text-main);
    --panel-badge-bg: var(--bg-surface-hi);
    --panel-badge-text: var(--text-main);
    --badge-admin-bg: rgba(0, 40, 85, .05);
    --badge-admin-text: #a4c4e7;
    --badge-est-bg: var(--bg-surface-hi);
    --badge-est-text: var(--text-main);
    --badge-rep-bg: var(--iac-gold);
    --badge-rep-text: #000;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, .6);
    --panel-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    --offcanvas-shadow: 0 10px 28px rgba(0, 0, 0, .8);
    --sticky-bg: var(--bg-surface-hi);
    --sticky-shadow: 0 1px 0 rgba(0, 0, 0, .75);
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M3.2 5h9.6L8 10.5 3.2 5z'/%3E%3C/svg%3E");
    /* Index page dark overrides */
    --idx-hero-bg: #060e18;
    --idx-band-bg: #0c1e32;
    --idx-band-border: rgba(241, 184, 40, .25);
    --idx-content-bg: #080f1a;
    --idx-title-clr: #dce8f5;
    --idx-sub-clr: rgba(200, 220, 240, .60);
    --idx-bullet-text: rgba(210, 228, 248, .80);
    --idx-link: #6eb0f5;
    --idx-link-hover: #F1B828;
}


/* ==========================================================================
   4. FONTS
   ========================================================================== */

@font-face {
    font-family: "din-2014";
    src: url("/fonts/dinpro.ttf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "din-2014";
    src: url("/fonts/dinpro_bold.ttf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   5. BODY
   ========================================================================== */

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: "din-2014", sans-serif;
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 56px !important;
    transition: background-color .25s ease, color .25s ease;
    margin: 0;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 52px !important;
    }
}

@media (max-width: 575.98px) {
    body {
        padding-top: 48px !important;
    }
}


/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "din-2014", sans-serif;
    letter-spacing: 0.2px;
    color: var(--iac-blue-hex);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

:root[data-bs-theme="dark"] h1,
:root[data-bs-theme="dark"] h2,
:root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] h4,
:root[data-bs-theme="dark"] h5,
:root[data-bs-theme="dark"] h6 {
    color: #cfe2ff;
}

@media (max-width: 767.98px) {
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color .18s ease;
}

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


/* ==========================================================================
   7. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .22);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    background: transparent;
}

:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .2);
}

/* Thin scrollbar for specific internal panes */
.splash-tools-scroll::-webkit-scrollbar {
    width: 5px;
}

.splash-tools-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.splash-tools-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 40, 85, .18);
    border-radius: 3px;
    border: none;
    background-clip: unset;
}


/* ==========================================================================
   8. NAVBAR
   Edge-to-edge (0 padding L/R on outer frame). No outer radius.
   ========================================================================== */

.navbar {
    background: var(--iac-blue-hex);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Horizontal gutter lives here — works whether or not a container wrapper exists */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    min-height: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: stretch;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .12);
    transition: box-shadow .2s ease;
}

    /* If a container/container-fluid wrapper is present, let it handle its own padding */
    .navbar > .container,
    .navbar > .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        max-width: none;
    }

/* Brand */
.navbar-brand {
    color: #fff !important;
    font-family: "din-2014", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em;
    padding: 0 !important;
    margin: 0 1.5rem 0 0 !important;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color .15s ease;
}

    .navbar-brand:hover {
        color: var(--iac-gold) !important;
    }

    .navbar-brand.active {
        color: var(--iac-gold) !important;
        cursor: default !important;
    }

        .navbar-brand.active:hover {
            color: var(--iac-gold) !important;
        }

/* Nav list */
.navbar-nav {
    display: flex;
    align-items: center;
    flex-direction: row !important;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

    /* Separator variant */
    .navbar-nav.nav-with-separators .nav-item {
        position: relative;
        margin: 0;
        padding: 0;
    }

        .navbar-nav.nav-with-separators .nav-item + .nav-item {
            margin-left: 1.25rem;
        }

            .navbar-nav.nav-with-separators .nav-item + .nav-item::before {
                content: '';
                position: absolute;
                left: -0.7rem;
                top: 50%;
                transform: translateY(-50%);
                height: 14px;
                width: 1px;
                background: rgba(241, 184, 40, .5);
            }

/* Nav links */
.navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0 0.9rem !important;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* First tab matches the standard nav-link padding — navbar outer gutter handles the edge spacing */
.navbar-nav .nav-item:first-child > .nav-link {
    padding-left: 0.9rem !important;
}

.navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .07);
    border-bottom-color: rgba(241, 184, 40, .5);
}

.navbar .nav-link.active {
    color: var(--iac-gold) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--iac-gold);
    background-color: transparent;
    cursor: default !important;
}

    .navbar .nav-link.active:hover {
        background-color: transparent !important;
    }

/* Navbar text */
.navbar .navbar-text {
    color: rgba(255, 255, 255, .75) !important;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    padding: 0;
    margin: 0;
}

/* Navbar inline buttons */
.navbar .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    min-height: 34px;
    margin-left: 0.5rem;
}

/* Navbar collapse — desktop default */
.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
}

/* Navbar toggler — hidden desktop */
.navbar-toggler {
    display: none !important;
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    padding: 0.4rem;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    align-self: center;
    transition: border-color .15s ease, background-color .15s ease;
}

    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .5);
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.4em;
    height: 1.4em;
}

/* Dropdown */
.navbar .dropdown-menu {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 6px;
    margin-top: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .navbar .dropdown-menu .dropdown-item {
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        transition: background-color .12s ease, color .12s ease;
    }

        .navbar .dropdown-menu .dropdown-item:hover,
        .navbar .dropdown-menu .dropdown-item:focus {
            background: rgba(var(--iac-blue-rgb), .06);
            color: var(--iac-blue-hex);
        }

        .navbar .dropdown-menu .dropdown-item.active,
        .navbar .dropdown-menu .dropdown-item:active {
            background: rgba(var(--iac-gold-rgb), .2);
            color: var(--iac-blue-hex);
            font-weight: 700;
            border-left: 2px solid var(--iac-gold);
            padding-left: calc(0.75rem - 2px);
        }

    .navbar .dropdown-menu .dropdown-divider {
        margin: 6px 4px;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

.navbar .dropdown-menu {
    z-index: 2000;
}

/* Dark mode dropdown */
:root[data-bs-theme="dark"] .navbar .dropdown-menu {
    background: var(--bg-surface-hi);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .6);
}

    :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
        color: var(--text-main);
    }

        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
            background: rgba(255, 255, 255, .06);
            color: #fff;
        }

        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item.active,
        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:active {
            background: rgba(var(--iac-gold-rgb), .16);
            color: #fff;
            border-left: 2px solid var(--iac-gold);
        }

    :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-divider {
        border-top-color: rgba(255, 255, 255, .08);
    }

/* ==========================================================================
   MOBILE NAVBAR  (≤ 991px)  —  COMPACT SMART-BAR PILL TRAY
   ──────────────────────────────────────────────────────────────────────────
   Design: tapping the hamburger reveals a slim tray flush under the navbar.
   All nav items are compact horizontal pills in a single scrollable row —
   no vertical list, no full-screen takeover.

   Anatomy:
     [navbar: brand ····················· toggler]
     ─────────────────────────────────────────────  ← navbar bottom
     [● Home  ● Quotes  ● Doors  ···  |  👤 Name ]
     ─────────────────────────────────────────────  ← tray (rounded bottom)

   Active pill  → solid gold fill, navy text
   Hover pill   → white/12% fill
   Rest pills   → transparent, white/70% text, white/18% border
   Utility row  → user info + theme toggle, hairline separated

   SNAP-CLOSE JS (unchanged — add to MainLayout or _Layout.cshtml):
   ─────────────────────────────────────────────────────────────────
   document.addEventListener('click', function (e) {
     var link = e.target.closest('.navbar-collapse .nav-link, .navbar-collapse .dropdown-item');
     if (!link) return;
     var collapse = document.querySelector('.navbar-collapse');
     if (!collapse || !collapse.classList.contains('show')) return;
     collapse.classList.add('navbar-closing');
     collapse.classList.remove('show');
     var toggler = document.querySelector('.navbar-toggler');
     if (toggler) toggler.setAttribute('aria-expanded', 'false');
     collapse.addEventListener('transitionend', function () {
       collapse.classList.remove('navbar-closing');
     }, { once: true });
   });
   ─────────────────────────────────────────────────────────────────
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ── Navbar bar ──────────────────────────────────────────────── */
    .navbar {
        min-height: 52px !important;
        height: 52px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hamburger toggler — refined pill button */
    .navbar-toggler {
        display: flex !important;
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, .20);
        background: rgba(255, 255, 255, .06);
        align-self: center;
        transition: background .15s ease, border-color .15s ease;
    }

        .navbar-toggler:hover {
            background: rgba(255, 255, 255, .13);
            border-color: rgba(255, 255, 255, .40);
        }

    /* Brand */
    .navbar-brand {
        font-size: .85rem !important;
        margin-right: auto !important;
    }

    .navbar .me-auto {
        margin-right: 0 !important;
    }

    /* ── Pill tray shell ─────────────────────────────────────────── */
    /*
       Fixed bar immediately below the navbar.
       Slightly richer navy so it reads as a distinct surface.
       Rounded bottom corners make it feel detached and intentional.
       clip-path reveal: tray wipes down from the navbar edge on open,
       wipes back up on close — much more elegant than max-height.
    */
    .navbar-collapse {
        display: block !important;
        position: fixed;
        top: 52px !important;
        left: 0;
        right: 0;
        height: auto;
        overflow: visible; /* let dropdown cards escape the tray */
        background: #001e42; /* 1–2 stops richer than navbar navy */
        border-top: 1px solid rgba(255, 255, 255, .07);
        border-bottom: 1px solid rgba(0, 0, 0, .28);
        border-radius: 0 0 14px 14px;
        z-index: 1029;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
        /* Wipe reveal via clip-path */
        clip-path: inset(0 0 100% 0 round 0 0 14px 14px);
        transition: clip-path .26s cubic-bezier(.4, 0, .2, 1), opacity .20s ease;
        opacity: 0;
        pointer-events: none;
    }

        /* Open */
        .navbar-collapse.show {
            clip-path: inset(0 0 0% 0 round 0 0 14px 14px);
            opacity: 1;
            pointer-events: auto;
        }

        /* Snap-close: instant hide */
        .navbar-collapse.navbar-closing {
            transition: none !important;
            clip-path: inset(0 0 100% 0 round 0 0 14px 14px) !important;
            opacity: 0 !important;
        }

        /* ── Pill row ────────────────────────────────────────────────── */
        /*
       Single horizontal scrollable row of pills.
       flex-shrink:0 on each item prevents squishing — they scroll.
       Right-edge fade-out mask signals more items exist.
    */
        .navbar-collapse .navbar-nav,
        .navbar-collapse > .navbar-nav {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: 100%;
            gap: 6px;
            align-items: center;
            height: auto;
            padding: 10px 14px;
            overflow-x: auto;
            overflow-y: visible;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
        }

            .navbar-collapse .navbar-nav::-webkit-scrollbar,
            .navbar-collapse > .navbar-nav::-webkit-scrollbar {
                display: none;
            }

    /* Separator variant — no vertical dividers in pill-row mode */
    .navbar-nav.nav-with-separators .nav-item + .nav-item {
        margin-left: 0;
        margin-top: 0;
        border-top: none;
    }

        .navbar-nav.nav-with-separators .nav-item + .nav-item::before {
            display: none;
        }

    /* ── Pill links ──────────────────────────────────────────────── */
    .navbar .nav-link {
        flex-shrink: 0;
        width: auto !important;
        height: 34px;
        min-height: 34px;
        padding: 0 14px !important;
        font-size: .78rem !important;
        font-weight: 600;
        letter-spacing: .04em;
        white-space: nowrap;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        color: rgba(255, 255, 255, .78) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
    }

        /* Hover */
        .navbar .nav-link:hover {
            background: rgba(255, 255, 255, .12) !important;
            border-color: rgba(255, 255, 255, .36);
            border-bottom-color: rgba(255, 255, 255, .36);
            color: #fff !important;
        }

    /* Active — solid gold pill, black text for max legibility.
           Extra class in selector beats the global .navbar .nav-link.active rule. */
    .navbar .navbar-collapse .nav-link.active {
        background: var(--iac-gold) !important;
        border-color: var(--iac-gold) !important;
        border-bottom-color: var(--iac-gold) !important;
        color: #000000 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 10px rgba(241, 184, 40, .40);
        cursor: default !important;
    }

        .navbar .navbar-collapse .nav-link.active:hover {
            background: var(--iac-gold) !important;
            color: #000000 !important;
            filter: brightness(1.06);
        }

    /* ── Utility row (user info, theme toggle, buttons) ─────────── */
    /*
       Sits below the pill row, separated by a hairline.
       Wraps naturally — not scrollable.
    */
    .navbar-collapse .navbar-nav + .navbar-nav,
    .navbar-collapse .navbar-nav ~ .d-flex,
    .navbar-collapse .navbar-nav ~ .ms-auto {
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: 8px 14px 12px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
    }

    /* User display name */
    .navbar .navbar-text {
        font-size: .82rem;
        padding: 0;
        color: rgba(255, 255, 255, .70) !important;
        white-space: nowrap;
    }

    /* Utility buttons — compact, auto-width */
    .navbar .btn {
        width: auto;
        margin-left: 0;
        margin-top: 0;
        padding: .3rem .8rem;
        font-size: .78rem;
        height: 32px;
        min-height: 32px;
    }

    /* ── Dropdowns inside the tray ───────────────────────────────── */
    /*
       Floating card below the toggled item — not a static inline block.
       Deep navy surface + gold top accent so it reads as a separate layer.
    */
    .navbar .dropdown-menu {
        position: absolute !important;
        transform: none !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: auto !important;
        min-width: 200px;
        background: #001328 !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        border-top: 2px solid var(--iac-gold) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35) !important;
        padding: 6px !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        margin: 0 !important;
        z-index: 1100;
        transition: none !important;
    }

        .navbar .dropdown-menu .dropdown-item {
            color: rgba(255, 255, 255, .80) !important;
            border-radius: 7px;
            padding: .55rem .875rem;
            min-height: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .85rem;
            font-weight: 500;
            transition: background .12s ease, color .12s ease;
        }

            .navbar .dropdown-menu .dropdown-item:hover,
            .navbar .dropdown-menu .dropdown-item:focus {
                background: rgba(255, 255, 255, .09) !important;
                color: #fff !important;
            }

            .navbar .dropdown-menu .dropdown-item.active,
            .navbar .dropdown-menu .dropdown-item:active {
                background: rgba(241, 184, 40, .18) !important;
                color: var(--iac-gold) !important;
                font-weight: 700;
                border-left: none;
                padding-left: .875rem;
            }

        .navbar .dropdown-menu .dropdown-divider {
            border-top: 1px solid rgba(255, 255, 255, .08) !important;
            margin: 5px 6px;
        }
}

/* ── Small phone ≤ 575px ── */
@media (max-width: 575.98px) {
    .navbar {
        min-height: 48px !important;
        height: 48px !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .navbar-collapse {
        top: 48px !important;
    }

    .navbar-brand {
        font-size: .80rem !important;
    }

    .navbar-toggler {
        width: 34px;
        height: 34px;
        align-self: center;
    }

    /* Pills: slightly smaller on tiny screens */
    .navbar .nav-link {
        height: 32px;
        min-height: 32px;
        padding: 0 12px !important;
        font-size: .75rem !important;
    }

    .navbar-collapse .navbar-nav,
    .navbar-collapse > .navbar-nav {
        padding: 8px 12px;
        gap: 5px;
    }

        .navbar-collapse .navbar-nav + .navbar-nav,
        .navbar-collapse .navbar-nav ~ .d-flex,
        .navbar-collapse .navbar-nav ~ .ms-auto {
            padding: 7px 12px 10px;
        }
}


/* ==========================================================================
   9. FOOTER
   Edge-to-edge (0 padding L/R on outer frame). No outer radius.
   ========================================================================== */

.footer,
footer {
    background: var(--iac-blue-hex);
    color: rgba(255, 255, 255, .75);
    border-top: 1px solid rgba(255, 255, 255, .08);
    /* Edge-to-edge: no horizontal padding on the outer shell */
    padding: 1rem 0;
    width: 100%;
    border-radius: 0 !important;
    font-size: var(--text-sm);
}

    /* Inner wrapper gets the gutter */
    .footer > .container,
    .footer > .container-fluid,
    footer > .container,
    footer > .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

/* Page stripe (bottom decorative bar) */
.page-stripe {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h, 30px);
    background-size: 100% auto;
    border-top: 0;
    box-shadow: none;
    z-index: 100;
    border-radius: 0 !important;
}


/* ==========================================================================
   9b. MODAL — layout / positioning (global, all pages)
   Color overrides live in each page's own scoped <style> block.
   ========================================================================== */

/* Prevent Bootstrap from padding the body when a modal opens
   (would shift fixed navbars right and create a gap) */
body.modal-open {
    padding-right: 0 !important;
}

/* Dialog: flex column layout only — no margin-top or min-height override.
   Each page's own scoped CSS handles positioning relative to the navbar.
   This avoids fighting with BackOffice's modal-lg margin-top: 80px and
   centered-dialog alignment. */
.modal:not(.modal-modern) .modal-dialog {
    display: flex;
    flex-direction: column;
}

/* Content stretches to fill the dialog */
.modal:not(.modal-modern) .modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Backdrop — darker + blurred */
.modal-backdrop {
    background-color: rgba(2, 8, 20, .72) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .modal-backdrop.show {
        opacity: 1 !important;
    }

/* Scrollable variant */
.modal:not(.modal-modern) .modal-dialog-scrollable .modal-content {
    overflow: hidden;
}

.modal:not(.modal-modern) .modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

/* NOTE: .modal-dialog-centered is NOT overridden here.
   Bootstrap's native centering works correctly for all pages.
   Doors.razor sets its own margin-top / min-height in its scoped <style>. */


/* ==========================================================================
   10. DARK / LIGHT MODE TOGGLE
   ========================================================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto !important;
    margin: 0;
}

/* Hidden checkbox */
.theme-switch {
    display: none;
    pointer-events: auto !important;
}

/* Track — light mode */
.theme-switch-label {
    cursor: pointer;
    width: 54px !important;
    height: 26px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    border: none !important;
    box-shadow: 0 0 0 1.5px rgba(59, 130, 246, .45), 0 2px 12px rgba(59, 130, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: background .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease !important;
    margin: 0;
}

    /* Glow layer */
    .theme-switch-label::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: radial-gradient(ellipse at 70% 50%, rgba(251,191,36,.35) 0%, transparent 65%);
        opacity: 1;
        pointer-events: none;
        transition: opacity .45s ease, background .45s ease;
        z-index: 0;
    }

    /* Stars layer — visible in dark mode */
    .theme-switch-label::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background-image: radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.85) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.90) 1px, transparent 1px);
        background-size: 6px 6px, 5px 5px, 7px 7px, 4px 4px, 5px 5px;
        background-position: 7px 5px, 14px 14px, 20px 6px, 28px 16px, 11px 18px;
        background-repeat: no-repeat;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
        z-index: 1;
        animation: starTwinkle 3s ease-in-out infinite;
        animation-play-state: paused;
    }

@keyframes starTwinkle {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* Icons */
.theme-switch-label .icon {
    position: relative;
    z-index: 2;
    font-size: 0 !important;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity .25s ease;
}

/* Sun */
.theme-switch-label .sun {
    margin-left: 5px;
    opacity: 1;
}

    .theme-switch-label .sun::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 0 2px rgba(255,255,255,.3), 0 0 7px rgba(255,255,255,.8);
    }

/* Moon */
.theme-switch-label .moon {
    margin-right: 5px;
    opacity: .4;
}

    .theme-switch-label .moon::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: transparent;
        border: 2.5px solid rgba(255, 255, 255, .75);
        clip-path: inset(0 4px 0 0 round 50%);
        box-shadow: 2px 0 4px rgba(255,255,255,.25);
    }

/* Knob — light mode (gold) */
.theme-switch-label .knob {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    z-index: 3;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fbbf24 100%) !important;
    box-shadow: 0 2px 12px rgba(251,191,36,.8), 0 0 0 1px rgba(253,230,138,.45), inset 0 1px 0 rgba(255,255,255,.5) !important;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .45s ease, box-shadow .45s ease !important;
}

/* Dark mode checked state */
.theme-switch:checked + .theme-switch-label {
    background: linear-gradient(135deg, #1a2035 0%, #0d1525 100%) !important;
    box-shadow: 0 0 0 1.5px rgba(99,102,241,.35), 0 4px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

    .theme-switch:checked + .theme-switch-label::after {
        background: radial-gradient(ellipse at 30% 50%, rgba(99,102,241,.3) 0%, transparent 65%);
    }

    .theme-switch:checked + .theme-switch-label::before {
        opacity: 1;
        animation-play-state: running;
    }

    .theme-switch:checked + .theme-switch-label .sun {
        opacity: .2;
    }

    .theme-switch:checked + .theme-switch-label .moon {
        opacity: 1;
    }

    .theme-switch:checked + .theme-switch-label .knob {
        transform: translateX(28px) !important;
        background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #8b5cf6 100%) !important;
        box-shadow: 0 2px 12px rgba(139,92,246,.7), 0 0 0 1px rgba(196,181,253,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
    }


/* ==========================================================================
   11. NAVBAR — LOGIN BUTTON & AVATAR
   ========================================================================== */

/* Nav login button — used when user IS logged in (profile/user area) */
.nav-login-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .48rem 1rem;
    min-height: 36px;
    border-radius: 8px;
    /* Gold border so it clearly stands out on the navy bar */
    border: 1px solid rgba(241, 184, 40, .9);
    color: #ffffff;
    text-decoration: none;
    /* Noticeably lighter than the navbar background */
    background: linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 100%), rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .03em;
    box-shadow: 0 0 0 1px rgba(241,184,40,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .14s ease, box-shadow .16s ease, background .16s ease;
}

    /* Subtle gold shine strip */
    .nav-login-btn::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 5px;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(241,184,40,.22), rgba(255,255,255,.08), rgba(241,184,40,.18));
        opacity: .5;
        pointer-events: none;
    }

    .nav-login-btn .bi {
        font-size: 1rem;
        line-height: 1;
        opacity: .9;
    }

    .nav-login-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 100%), rgba(255,255,255,.10);
        box-shadow: 0 0 0 1px rgba(241,184,40,.4), 0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
    }

    .nav-login-btn:active {
        transform: translateY(0) scale(.99);
        box-shadow: 0 0 0 1px rgba(241,184,40,.35), inset 0 1px 3px rgba(0,0,0,.15);
    }

    .nav-login-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(241,184,40,.4), 0 0 0 1px rgba(241,184,40,.6);
    }


/* Right-side navbar items wrapper — gives the toggle + login button breathing room */
.navbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

/* Gold button — used when user is NOT logged in */
.btn.btn-outline-primary2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 0.42rem 0.85rem;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .03em;
    background-color: rgba(var(--iac-gold-rgb), .9);
    border: 1px solid rgba(var(--iac-gold-rgb), .95);
    color: #1c1c1c;
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    .btn.btn-outline-primary2:hover {
        background-color: var(--iac-gold);
        box-shadow: 0 3px 10px rgba(0,0,0,.25);
    }

    .btn.btn-outline-primary2:active {
        transform: translateY(1px);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }

/* Navbar avatar / logo mark — initials circle beside brand */
.navbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "din-2014", sans-serif;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .02em;
    user-select: none;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.25);
}

/* Generic .avatar (used in tables, dropdowns, user rows) */
.avatar {
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    border: 1px solid rgba(0,0,0,.12);
    user-select: none;
    flex-shrink: 0;
}

.avatar--neutral {
    background: #676565;
    color: #fff;
}

.avatar--male {
    background: #0165fa;
    color: #fff;
}

.avatar--female {
    background: #fa138b;
    color: #fff;
}

.avatar--gold {
    background: var(--iac-gold);
    color: #002855;
}

.avatar--navy {
    background: var(--iac-blue-hex);
    color: #fff;
}


/* ==========================================================================
   12. GLOBAL UTILITIES
   ========================================================================== */

.text-iac {
    color: var(--iac-blue-hex) !important;
}

.bg-iac-5 {
    background: var(--iac-blue-5) !important;
}

.bg-grey-5 {
    background: var(--iac-grey-5) !important;
}

.min-vh-100 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Responsive container breathing room on large screens */
@media (min-width: 1600px) {
    .container,
    .container-fluid {
        padding-left: clamp(1rem, 3vw, 4rem);
        padding-right: clamp(1rem, 3vw, 4rem);
    }
}

.row, .container, .container-fluid {
    max-width: 100%;
}

/* Widescreen card/content positioning */
@media (min-width: 1921px) {
    .content-inner {
        max-width: 1920px;
        margin-inline: auto;
    }
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
    .navbar, .footer, footer, .no-print {
        display: none !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    .container, .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .table {
        border: 1px solid #000 !important;
    }

        .table th, .table td {
            border: 1px solid #000 !important;
            color: #000 !important;
        }
}


/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-main: #000;
        --iac-blue-hex: #000080;
        --iac-gold: #ffa500;
    }

    a {
        text-decoration: underline;
    }
}

/* ── Navbar SCIF / LKM badge ──────────────────────────────────────────────────
   Shown next to the user's display name when LkmEnabled = true.
   Uses the MyProfile design language: din-2014 font, navy/gold palette,
   subtle glow, and full dark-mode support.
──────────────────────────────────────────────────────────────────────────────── */
.nav-scif-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px 2px 5px;
    border-radius: 4px;
    font-family: "din-2014", "Segoe UI", sans-serif;
    font-size: .60rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
    line-height: 1.6;
    /* Light mode — deep olive-green, matching BackOffice scif-badge */
    background-color: #2d3a1e;
    color: #c8d8a0;
    border: 1px solid #4a5e28;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 6px rgba(120,160,40,.25), 0 1px 3px rgba(0,0,0,.35);
}

/* Light-mode explicit override (when data-bs-theme="light") */
:root:not([data-bs-theme="dark"]) .nav-scif-badge {
    background-color: #3b4a22;
    color: #d6e8a0;
    border-color: #5a7530;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 8px rgba(140,180,50,.30), 0 1px 3px rgba(0,0,0,.25);
}

/* Dark mode — slightly brighter glow so it reads against dark navbar */
:root[data-bs-theme="dark"] .nav-scif-badge,
[data-theme="dark"] .nav-scif-badge {
    background-color: #2d3a1e;
    color: #c8d8a0;
    border-color: #4a5e28;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 10px rgba(130,180,40,.40), 0 1px 4px rgba(0,0,0,.55);
}


/* ─────────────────────────────────────────────────────────────
   PROFILE — TABLE POP (borders + better hover)
   NO CARD BACKGROUND CHANGES
   ───────────────────────────────────────────────────────────── */

/* TABLE OUTER BORDER (LIGHT MODE) */
.profile-page-wrap .quotes-table {
    border: 2px solid rgba(0,40,85,0.22) !important; /* darker frame */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0,40,85,0.10);
}

    /* Header: richer navy gradient + clearer separators */
    .profile-page-wrap .quotes-table thead tr {
        background: linear-gradient(180deg, #0e2a4a 0%, #002855 100%) !important;
    }

    .profile-page-wrap .quotes-table thead th {
        color: rgba(255,255,255,0.92) !important;
        border-right: 1px solid rgba(255,255,255,0.12) !important;
    }

        .profile-page-wrap .quotes-table thead th:last-child {
            border-right: none !important;
        }

        .profile-page-wrap .quotes-table thead th:first-child {
            border-left: 4px solid #F1B828 !important;
            padding-left: .85rem !important;
        }

    /* Body cells: slightly stronger text */
    .profile-page-wrap .quotes-table tbody td {
        color: rgba(0,40,85,0.86) !important;
        font-weight: 650;
        transition: background-color .14s ease, box-shadow .14s ease;
    }

    /* Stripe colors */
    .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td {
        background-color: #f6f8fe !important;
    }

    .profile-page-wrap .quotes-table tbody tr:nth-child(even) td {
        background-color: #d2def2 !important;
    }

    /* Row dividers */
    .profile-page-wrap .quotes-table tbody tr {
        border-bottom: 1px solid rgba(0,40,85,0.14);
    }

        .profile-page-wrap .quotes-table tbody tr:last-child {
            border-bottom: none;
        }

        /* Hover: decent, brand-y, NOT harsh */
        .profile-page-wrap .quotes-table tbody tr:hover td {
            background-color: rgba(241,184,40,0.16) !important; /* gold wash */
            box-shadow: inset 4px 0 0 rgba(241,184,40,0.95); /* left accent */
        }

            .profile-page-wrap .quotes-table tbody tr:hover td:first-child {
                box-shadow: inset 4px 0 0 rgba(241,184,40,0.95), inset 0 0 0 9999px rgba(241,184,40,0.16); /* ensures full-row wash reads */
            }

/* ───────────── DARK MODE (table only) ───────────── */

/* TABLE OUTER BORDER (DARK MODE) */
:root[data-bs-theme="dark"] .profile-page-wrap .quotes-table,
[data-bs-theme="dark"] .profile-page-wrap .quotes-table,
[data-theme="dark"] .profile-page-wrap .quotes-table {
    border: 2px solid rgba(255,255,255,0.14) !important; /* light frame */
    box-shadow: 0 18px 44px rgba(0,0,0,0.62);
}

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table thead tr,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table thead tr,
    [data-theme="dark"] .profile-page-wrap .quotes-table thead tr {
        background: linear-gradient(180deg, #102a48 0%, #081626 100%) !important;
    }

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody td {
        color: rgba(255,255,255,0.90) !important;
    }

    /* Dark stripes */
    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td {
        background-color: #142338 !important;
    }

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td {
        background-color: #1b2c46 !important;
    }

    /* Dark row dividers */
    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

        /* Dark hover: warm gold tint + left accent */
        :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td,
        [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td,
        [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td {
            background-color: rgba(241,184,40,0.12) !important;
            box-shadow: inset 4px 0 0 rgba(241,184,40,0.90);
        }

            :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child,
            [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child,
            [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child {
                box-shadow: inset 4px 0 0 rgba(241,184,40,0.90), inset 0 0 0 9999px rgba(241,184,40,0.12);
            }

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

body {
    padding-top: 56px !important;
}

.page {
    height: calc(100dvh - 56px);
    overflow: hidden;
}

    .page > main {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

/* Make the global shell span the full viewport, including scrollbar gutter */
.navbar,
footer,
.footer,
.page-stripe {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Navbar specifically */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
}

/* Footer specifically */
footer,
.footer {
    position: relative;
    left: 50%;
    right: auto;
    margin-left: -50vw;
    margin-right: 0;
}

/* Bottom stripe if you use one */
.page-stripe {
    position: fixed;
    left: 0;
    right: auto;
    bottom: 0;
}
/* ==========================================================================
   SITE.CSS — Global Shell
   Covers: reset, root tokens, dark mode tokens, typography, body, navbar,
   footer, dark/light toggle, scrollbar, login buttons, avatars, print, accessibility.
   Page-level & component styles live in their own scoped CSS files.
   ========================================================================== */


/* ==========================================================================
   1. BOX-MODEL RESET
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
    scrollbar-width: thin;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Thin overlay scrollbar for Chrome/Edge - floats over content, takes no layout space */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .28);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, .45);
    }

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Widescreen content cap (>1920 px) */
@media (min-width: 1921px) {
    .content-inner {
        max-width: 1920px;
        margin-inline: auto;
    }
}


/* ==========================================================================
   2. ROOT TOKENS — LIGHT MODE
   ========================================================================== */

:root {
    /* Brand */
    --iac-blue-hex: #002855;
    --iac-blue-rgb: 0, 40, 85;
    --iac-gold: #F1B828;
    --iac-gold-rgb: 241, 184, 40;
    /* Computed shorthands */
    --iac-blue-5: rgba(0, 40, 85, .05);
    --iac-grey-5: rgba(0, 0, 0, .05);
    --iac-grey-slab: #f1f3f6;
    /* Surfaces */
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-hi: #f5f6f8;
    --bg-tertiary: #f7f8f9;
    /* Borders */
    --border-color: #d7dde3;
    /* Text */
    --text-main: #1a1a1a;
    --text-muted: #5a6b7a;
    --text-brand: var(--iac-blue-hex);
    --text-brand-soft: var(--iac-blue-hex);
    /* Links */
    --link-color: var(--iac-blue-hex);
    --link-hover-color: var(--iac-gold);
    /* Inputs */
    --input-bg: #ffffff;
    --input-bg-hover: #ffffff;
    --input-border: rgba(0, 0, 0, .15);
    --input-focus-ring: rgba(var(--iac-blue-rgb), .15);
    --input-focus-border: rgba(var(--iac-blue-rgb), .35);
    /* Tables */
    --table-head-bg: #f5f6f7;
    --table-row-hover-bg: rgba(0, 40, 85, .02);
    --table-sticky-head-bg: #ffffff;
    /* Panels */
    --panel-shell-bg: #f8f9fb;
    --panel-shell-border: #d7dde3;
    --panel-head-bg: #ffffff;
    --panel-head-border: #bfc8d6;
    --panel-label-color: #2c3e50;
    --panel-badge-bg: #e6eaef;
    --panel-badge-text: #2c3e50;
    /* Badges */
    --badge-admin-bg: #002855;
    --badge-admin-text: #fff;
    --badge-est-bg: #2a3440;
    --badge-est-text: #fff;
    --badge-rep-bg: #F1B828;
    --badge-rep-text: #000;
    /* Shadows */
    --card-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    --offcanvas-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --sticky-bg: #ffffff;
    --sticky-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    /* Misc */
    --border-radius: .75rem;
    --footer-h: 30px;
    /* Spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    /* Layout */
    --navbar-height: 56px;
    --container-padding: 1rem;
    --door-pad-x: 1.25rem;
    --section-card-pad-x: 1.25rem;
    /* Bootstrap overrides */
    --bs-primary: var(--iac-blue-hex);
    --bs-primary-rgb: var(--iac-blue-rgb);
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23002855'%3E%3Cpath d='M3.2 5h9.6L8 10.5 3.2 5z'/%3E%3C/svg%3E");
    /* Font */
    --iac-font: "din-2014", sans-serif;
    /* Image tokens (used by splash/index pages) */
    --img-portal-hero: url("/img/portal-hero.png");
    --img-index-bg: url("/img/index-bg-iac.png");
    --img-login-bg: url("/img/login-bg-iac.png");
    --img-chevron-white: url("/img/chevron_white.svg");
    --img-iac-swirl: url("/img/iac-swirl.png");
    /* Index page tokens */
    --idx-navy: #002855;
    --idx-gold: #F1B828;
    --idx-hero-bg: #f0f3f8;
    --idx-band-bg: #dce4f0;
    --idx-band-border: rgba(0, 40, 85, .18);
    --idx-content-bg: #f7f9fc;
    --idx-title-clr: #002855;
    --idx-sub-clr: #3a5070;
    --idx-bullet-text: #2c3e55;
    --idx-bullet-dot: #F1B828;
    --idx-link: #1a5ca8;
    --idx-link-hover: #002855;
    /* Splash layout tokens — must live in site.css because Blazor scoped CSS cannot set :root variables */
    --hero-w: 35vw;
    --band-h: 88px;
    --band-pad-x: clamp(1.5rem, 4vw, 3.5rem);
}

/* Responsive token overrides */
@media (max-width: 767.98px) {
    :root {
        --text-base: 0.9375rem;
        --border-radius: 0.5rem;
        --container-padding: 0.75rem;
        --door-pad-x: 1rem;
        --section-card-pad-x: 1rem;
    }
}

@media (max-height: 700px) {
    :root {
        --footer-h: 80px;
    }
}


/* ==========================================================================
   3. DARK MODE TOKENS
   ========================================================================== */

:root[data-bs-theme="dark"] {
    --bg-page: #0e1216;
    --bg-surface: #151b22;
    --bg-surface-hi: #1a1f26;
    --bg-tertiary: #151b22;
    --border-color: #2a3440;
    --iac-grey-slab: #1a1f26;
    --text-main: #e8edf2;
    --text-muted: rgba(232, 237, 242, .6);
    --text-brand: #9bc6ff;
    --text-brand-soft: #a4c4e7;
    --link-color: #9bc2ff;
    --link-hover-color: var(--iac-gold);
    --input-bg: var(--bg-surface-hi);
    --input-bg-hover: #6e6e6e;
    --input-border: var(--border-color);
    --input-focus-ring: rgba(var(--iac-blue-rgb), .15);
    --input-focus-border: rgba(var(--iac-blue-rgb), .35);
    --table-head-bg: var(--bg-surface-hi);
    --table-row-hover-bg: rgba(0, 40, 85, .08);
    --table-sticky-head-bg: var(--bg-surface-hi);
    --panel-shell-bg: var(--bg-surface);
    --panel-shell-border: var(--border-color);
    --panel-head-bg: var(--bg-surface-hi);
    --panel-head-border: #2a3440;
    --panel-label-color: var(--text-main);
    --panel-badge-bg: var(--bg-surface-hi);
    --panel-badge-text: var(--text-main);
    --badge-admin-bg: rgba(0, 40, 85, .05);
    --badge-admin-text: #a4c4e7;
    --badge-est-bg: var(--bg-surface-hi);
    --badge-est-text: var(--text-main);
    --badge-rep-bg: var(--iac-gold);
    --badge-rep-text: #000;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, .6);
    --panel-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    --offcanvas-shadow: 0 10px 28px rgba(0, 0, 0, .8);
    --sticky-bg: var(--bg-surface-hi);
    --sticky-shadow: 0 1px 0 rgba(0, 0, 0, .75);
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M3.2 5h9.6L8 10.5 3.2 5z'/%3E%3C/svg%3E");
    /* Index page dark overrides */
    --idx-hero-bg: #060e18;
    --idx-band-bg: #0c1e32;
    --idx-band-border: rgba(241, 184, 40, .25);
    --idx-content-bg: #080f1a;
    --idx-title-clr: #dce8f5;
    --idx-sub-clr: rgba(200, 220, 240, .60);
    --idx-bullet-text: rgba(210, 228, 248, .80);
    --idx-link: #6eb0f5;
    --idx-link-hover: #F1B828;
}


/* ==========================================================================
   4. FONTS
   ========================================================================== */

@font-face {
    font-family: "din-2014";
    src: url("/fonts/dinpro.ttf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "din-2014";
    src: url("/fonts/dinpro_bold.ttf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   5. BODY
   ========================================================================== */

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: "din-2014", sans-serif;
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 56px !important;
    transition: background-color .25s ease, color .25s ease;
    margin: 0;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 52px !important;
    }
}

@media (max-width: 575.98px) {
    body {
        padding-top: 48px !important;
    }
}


/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "din-2014", sans-serif;
    letter-spacing: 0.2px;
    color: var(--iac-blue-hex);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

:root[data-bs-theme="dark"] h1,
:root[data-bs-theme="dark"] h2,
:root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] h4,
:root[data-bs-theme="dark"] h5,
:root[data-bs-theme="dark"] h6 {
    color: #cfe2ff;
}

@media (max-width: 767.98px) {
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color .18s ease;
}

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


/* ==========================================================================
   7. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .22);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    background: transparent;
}

:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .2);
}

/* Thin scrollbar for specific internal panes */
.splash-tools-scroll::-webkit-scrollbar {
    width: 5px;
}

.splash-tools-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.splash-tools-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 40, 85, .18);
    border-radius: 3px;
    border: none;
    background-clip: unset;
}


/* ==========================================================================
   8. NAVBAR
   Edge-to-edge (0 padding L/R on outer frame). No outer radius.
   ========================================================================== */

.navbar {
    background: var(--iac-blue-hex);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Horizontal gutter lives here — works whether or not a container wrapper exists */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    min-height: 56px !important;
    height: 56px !important;
    display: flex;
    align-items: stretch;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .12);
    transition: box-shadow .2s ease;
}

    /* If a container/container-fluid wrapper is present, let it handle its own padding */
    .navbar > .container,
    .navbar > .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        max-width: none;
    }

/* Brand */
.navbar-brand {
    color: #fff !important;
    font-family: "din-2014", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em;
    padding: 0 !important;
    margin: 0 1.5rem 0 0 !important;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color .15s ease;
}

    .navbar-brand:hover {
        color: var(--iac-gold) !important;
    }

    .navbar-brand.active {
        color: var(--iac-gold) !important;
        cursor: default !important;
    }

        .navbar-brand.active:hover {
            color: var(--iac-gold) !important;
        }

/* Nav list */
.navbar-nav {
    display: flex;
    align-items: center;
    flex-direction: row !important;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

    /* Separator variant */
    .navbar-nav.nav-with-separators .nav-item {
        position: relative;
        margin: 0;
        padding: 0;
    }

        .navbar-nav.nav-with-separators .nav-item + .nav-item {
            margin-left: 1.25rem;
        }

            .navbar-nav.nav-with-separators .nav-item + .nav-item::before {
                content: '';
                position: absolute;
                left: -0.7rem;
                top: 50%;
                transform: translateY(-50%);
                height: 14px;
                width: 1px;
                background: rgba(241, 184, 40, .5);
            }

/* Nav links */
.navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0 0.9rem !important;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* First tab matches the standard nav-link padding — navbar outer gutter handles the edge spacing */
.navbar-nav .nav-item:first-child > .nav-link {
    padding-left: 0.9rem !important;
}

.navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .07);
    border-bottom-color: rgba(241, 184, 40, .5);
}

.navbar .nav-link.active {
    color: var(--iac-gold) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--iac-gold);
    background-color: transparent;
    cursor: default !important;
}

    .navbar .nav-link.active:hover {
        background-color: transparent !important;
    }

/* Navbar text */
.navbar .navbar-text {
    color: rgba(255, 255, 255, .75) !important;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    padding: 0;
    margin: 0;
}

/* Navbar inline buttons */
.navbar .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    min-height: 34px;
    margin-left: 0.5rem;
}

/* Navbar collapse — desktop default */
.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
}

/* Navbar toggler — hidden desktop */
.navbar-toggler {
    display: none !important;
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    padding: 0.4rem;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    align-self: center;
    transition: border-color .15s ease, background-color .15s ease;
}

    .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .5);
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.4em;
    height: 1.4em;
}

/* Dropdown */
.navbar .dropdown-menu {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 6px;
    margin-top: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .navbar .dropdown-menu .dropdown-item {
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        transition: background-color .12s ease, color .12s ease;
    }

        .navbar .dropdown-menu .dropdown-item:hover,
        .navbar .dropdown-menu .dropdown-item:focus {
            background: rgba(var(--iac-blue-rgb), .06);
            color: var(--iac-blue-hex);
        }

        .navbar .dropdown-menu .dropdown-item.active,
        .navbar .dropdown-menu .dropdown-item:active {
            background: rgba(var(--iac-gold-rgb), .2);
            color: var(--iac-blue-hex);
            font-weight: 700;
            border-left: 2px solid var(--iac-gold);
            padding-left: calc(0.75rem - 2px);
        }

    .navbar .dropdown-menu .dropdown-divider {
        margin: 6px 4px;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

.navbar .dropdown-menu {
    z-index: 2000;
}

/* Dark mode dropdown */
:root[data-bs-theme="dark"] .navbar .dropdown-menu {
    background: var(--bg-surface-hi);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .6);
}

    :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
        color: var(--text-main);
    }

        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
            background: rgba(255, 255, 255, .06);
            color: #fff;
        }

        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item.active,
        :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:active {
            background: rgba(var(--iac-gold-rgb), .16);
            color: #fff;
            border-left: 2px solid var(--iac-gold);
        }

    :root[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-divider {
        border-top-color: rgba(255, 255, 255, .08);
    }

/* ==========================================================================
   MOBILE NAVBAR  (≤ 991px)  —  COMPACT SMART-BAR PILL TRAY
   ──────────────────────────────────────────────────────────────────────────
   Design: tapping the hamburger reveals a slim tray flush under the navbar.
   All nav items are compact horizontal pills in a single scrollable row —
   no vertical list, no full-screen takeover.

   Anatomy:
     [navbar: brand ····················· toggler]
     ─────────────────────────────────────────────  ← navbar bottom
     [● Home  ● Quotes  ● Doors  ···  |  👤 Name ]
     ─────────────────────────────────────────────  ← tray (rounded bottom)

   Active pill  → solid gold fill, navy text
   Hover pill   → white/12% fill
   Rest pills   → transparent, white/70% text, white/18% border
   Utility row  → user info + theme toggle, hairline separated

   SNAP-CLOSE JS (unchanged — add to MainLayout or _Layout.cshtml):
   ─────────────────────────────────────────────────────────────────
   document.addEventListener('click', function (e) {
     var link = e.target.closest('.navbar-collapse .nav-link, .navbar-collapse .dropdown-item');
     if (!link) return;
     var collapse = document.querySelector('.navbar-collapse');
     if (!collapse || !collapse.classList.contains('show')) return;
     collapse.classList.add('navbar-closing');
     collapse.classList.remove('show');
     var toggler = document.querySelector('.navbar-toggler');
     if (toggler) toggler.setAttribute('aria-expanded', 'false');
     collapse.addEventListener('transitionend', function () {
       collapse.classList.remove('navbar-closing');
     }, { once: true });
   });
   ─────────────────────────────────────────────────────────────────
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ── Navbar bar ──────────────────────────────────────────────── */
    .navbar {
        min-height: 52px !important;
        height: 52px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hamburger toggler — refined pill button */
    .navbar-toggler {
        display: flex !important;
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, .20);
        background: rgba(255, 255, 255, .06);
        align-self: center;
        transition: background .15s ease, border-color .15s ease;
    }

        .navbar-toggler:hover {
            background: rgba(255, 255, 255, .13);
            border-color: rgba(255, 255, 255, .40);
        }

    /* Brand */
    .navbar-brand {
        font-size: .85rem !important;
        margin-right: auto !important;
    }

    .navbar .me-auto {
        margin-right: 0 !important;
    }

    /* ── Pill tray shell ─────────────────────────────────────────── */
    /*
       Fixed bar immediately below the navbar.
       Slightly richer navy so it reads as a distinct surface.
       Rounded bottom corners make it feel detached and intentional.
       clip-path reveal: tray wipes down from the navbar edge on open,
       wipes back up on close — much more elegant than max-height.
    */
    .navbar-collapse {
        display: block !important;
        position: fixed;
        top: 52px !important;
        left: 0;
        right: 0;
        height: auto;
        overflow: visible; /* let dropdown cards escape the tray */
        background: #001e42; /* 1–2 stops richer than navbar navy */
        border-top: 1px solid rgba(255, 255, 255, .07);
        border-bottom: 1px solid rgba(0, 0, 0, .28);
        border-radius: 0 0 14px 14px;
        z-index: 1029;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
        /* Wipe reveal via clip-path */
        clip-path: inset(0 0 100% 0 round 0 0 14px 14px);
        transition: clip-path .26s cubic-bezier(.4, 0, .2, 1), opacity .20s ease;
        opacity: 0;
        pointer-events: none;
    }

        /* Open */
        .navbar-collapse.show {
            clip-path: inset(0 0 0% 0 round 0 0 14px 14px);
            opacity: 1;
            pointer-events: auto;
        }

        /* Snap-close: instant hide */
        .navbar-collapse.navbar-closing {
            transition: none !important;
            clip-path: inset(0 0 100% 0 round 0 0 14px 14px) !important;
            opacity: 0 !important;
        }

        /* ── Pill row ────────────────────────────────────────────────── */
        /*
       Single horizontal scrollable row of pills.
       flex-shrink:0 on each item prevents squishing — they scroll.
       Right-edge fade-out mask signals more items exist.
    */
        .navbar-collapse .navbar-nav,
        .navbar-collapse > .navbar-nav {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: 100%;
            gap: 6px;
            align-items: center;
            height: auto;
            padding: 10px 14px;
            overflow-x: auto;
            overflow-y: visible;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
        }

            .navbar-collapse .navbar-nav::-webkit-scrollbar,
            .navbar-collapse > .navbar-nav::-webkit-scrollbar {
                display: none;
            }

    /* Separator variant — no vertical dividers in pill-row mode */
    .navbar-nav.nav-with-separators .nav-item + .nav-item {
        margin-left: 0;
        margin-top: 0;
        border-top: none;
    }

        .navbar-nav.nav-with-separators .nav-item + .nav-item::before {
            display: none;
        }

    /* ── Pill links ──────────────────────────────────────────────── */
    .navbar .nav-link {
        flex-shrink: 0;
        width: auto !important;
        height: 34px;
        min-height: 34px;
        padding: 0 14px !important;
        font-size: .78rem !important;
        font-weight: 600;
        letter-spacing: .04em;
        white-space: nowrap;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        color: rgba(255, 255, 255, .78) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
    }

        /* Hover */
        .navbar .nav-link:hover {
            background: rgba(255, 255, 255, .12) !important;
            border-color: rgba(255, 255, 255, .36);
            border-bottom-color: rgba(255, 255, 255, .36);
            color: #fff !important;
        }

    /* Active — solid gold pill, black text for max legibility.
           Extra class in selector beats the global .navbar .nav-link.active rule. */
    .navbar .navbar-collapse .nav-link.active {
        background: var(--iac-gold) !important;
        border-color: var(--iac-gold) !important;
        border-bottom-color: var(--iac-gold) !important;
        color: #000000 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 10px rgba(241, 184, 40, .40);
        cursor: default !important;
    }

        .navbar .navbar-collapse .nav-link.active:hover {
            background: var(--iac-gold) !important;
            color: #000000 !important;
            filter: brightness(1.06);
        }

    /* ── Utility row (user info, theme toggle, buttons) ─────────── */
    /*
       Sits below the pill row, separated by a hairline.
       Wraps naturally — not scrollable.
    */
    .navbar-collapse .navbar-nav + .navbar-nav,
    .navbar-collapse .navbar-nav ~ .d-flex,
    .navbar-collapse .navbar-nav ~ .ms-auto {
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: 8px 14px 12px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
    }

    /* User display name */
    .navbar .navbar-text {
        font-size: .82rem;
        padding: 0;
        color: rgba(255, 255, 255, .70) !important;
        white-space: nowrap;
    }

    /* Utility buttons — compact, auto-width */
    .navbar .btn {
        width: auto;
        margin-left: 0;
        margin-top: 0;
        padding: .3rem .8rem;
        font-size: .78rem;
        height: 32px;
        min-height: 32px;
    }

    /* ── Dropdowns inside the tray ───────────────────────────────── */
    /*
       Floating card below the toggled item — not a static inline block.
       Deep navy surface + gold top accent so it reads as a separate layer.
    */
    .navbar .dropdown-menu {
        position: absolute !important;
        transform: none !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: auto !important;
        min-width: 200px;
        background: #001328 !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        border-top: 2px solid var(--iac-gold) !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35) !important;
        padding: 6px !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        margin: 0 !important;
        z-index: 1100;
        transition: none !important;
    }

        .navbar .dropdown-menu .dropdown-item {
            color: rgba(255, 255, 255, .80) !important;
            border-radius: 7px;
            padding: .55rem .875rem;
            min-height: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .85rem;
            font-weight: 500;
            transition: background .12s ease, color .12s ease;
        }

            .navbar .dropdown-menu .dropdown-item:hover,
            .navbar .dropdown-menu .dropdown-item:focus {
                background: rgba(255, 255, 255, .09) !important;
                color: #fff !important;
            }

            .navbar .dropdown-menu .dropdown-item.active,
            .navbar .dropdown-menu .dropdown-item:active {
                background: rgba(241, 184, 40, .18) !important;
                color: var(--iac-gold) !important;
                font-weight: 700;
                border-left: none;
                padding-left: .875rem;
            }

        .navbar .dropdown-menu .dropdown-divider {
            border-top: 1px solid rgba(255, 255, 255, .08) !important;
            margin: 5px 6px;
        }
}

/* ── Small phone ≤ 575px ── */
@media (max-width: 575.98px) {
    .navbar {
        min-height: 48px !important;
        height: 48px !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .navbar-collapse {
        top: 48px !important;
    }

    .navbar-brand {
        font-size: .80rem !important;
    }

    .navbar-toggler {
        width: 34px;
        height: 34px;
        align-self: center;
    }

    /* Pills: slightly smaller on tiny screens */
    .navbar .nav-link {
        height: 32px;
        min-height: 32px;
        padding: 0 12px !important;
        font-size: .75rem !important;
    }

    .navbar-collapse .navbar-nav,
    .navbar-collapse > .navbar-nav {
        padding: 8px 12px;
        gap: 5px;
    }

        .navbar-collapse .navbar-nav + .navbar-nav,
        .navbar-collapse .navbar-nav ~ .d-flex,
        .navbar-collapse .navbar-nav ~ .ms-auto {
            padding: 7px 12px 10px;
        }
}


/* ==========================================================================
   9. FOOTER
   Edge-to-edge (0 padding L/R on outer frame). No outer radius.
   ========================================================================== */

.footer,
footer {
    background: var(--iac-blue-hex);
    color: rgba(255, 255, 255, .75);
    border-top: 1px solid rgba(255, 255, 255, .08);
    /* Edge-to-edge: no horizontal padding on the outer shell */
    padding: 1rem 0;
    width: 100%;
    border-radius: 0 !important;
    font-size: var(--text-sm);
}

    /* Inner wrapper gets the gutter */
    .footer > .container,
    .footer > .container-fluid,
    footer > .container,
    footer > .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

/* Page stripe (bottom decorative bar) */
.page-stripe {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h, 30px);
    background-size: 100% auto;
    border-top: 0;
    box-shadow: none;
    z-index: 100;
    border-radius: 0 !important;
}



/* ==========================================================================
   10. DARK / LIGHT MODE TOGGLE
   ========================================================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto !important;
    margin: 0;
}

/* Hidden checkbox */
.theme-switch {
    display: none;
    pointer-events: auto !important;
}

/* Track — light mode */
.theme-switch-label {
    cursor: pointer;
    width: 54px !important;
    height: 26px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    border: none !important;
    box-shadow: 0 0 0 1.5px rgba(59, 130, 246, .45), 0 2px 12px rgba(59, 130, 246, .3), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: background .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease !important;
    margin: 0;
}

    /* Glow layer */
    .theme-switch-label::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: radial-gradient(ellipse at 70% 50%, rgba(251,191,36,.35) 0%, transparent 65%);
        opacity: 1;
        pointer-events: none;
        transition: opacity .45s ease, background .45s ease;
        z-index: 0;
    }

    /* Stars layer — visible in dark mode */
    .theme-switch-label::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background-image: radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.85) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.90) 1px, transparent 1px);
        background-size: 6px 6px, 5px 5px, 7px 7px, 4px 4px, 5px 5px;
        background-position: 7px 5px, 14px 14px, 20px 6px, 28px 16px, 11px 18px;
        background-repeat: no-repeat;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
        z-index: 1;
        animation: starTwinkle 3s ease-in-out infinite;
        animation-play-state: paused;
    }

@keyframes starTwinkle {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* Icons */
.theme-switch-label .icon {
    position: relative;
    z-index: 2;
    font-size: 0 !important;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity .25s ease;
}

/* Sun */
.theme-switch-label .sun {
    margin-left: 5px;
    opacity: 1;
}

    .theme-switch-label .sun::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 0 2px rgba(255,255,255,.3), 0 0 7px rgba(255,255,255,.8);
    }

/* Moon */
.theme-switch-label .moon {
    margin-right: 5px;
    opacity: .4;
}

    .theme-switch-label .moon::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: transparent;
        border: 2.5px solid rgba(255, 255, 255, .75);
        clip-path: inset(0 4px 0 0 round 50%);
        box-shadow: 2px 0 4px rgba(255,255,255,.25);
    }

/* Knob — light mode (gold) */
.theme-switch-label .knob {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    z-index: 3;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fbbf24 100%) !important;
    box-shadow: 0 2px 12px rgba(251,191,36,.8), 0 0 0 1px rgba(253,230,138,.45), inset 0 1px 0 rgba(255,255,255,.5) !important;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .45s ease, box-shadow .45s ease !important;
}

/* Dark mode checked state */
.theme-switch:checked + .theme-switch-label {
    background: linear-gradient(135deg, #1a2035 0%, #0d1525 100%) !important;
    box-shadow: 0 0 0 1.5px rgba(99,102,241,.35), 0 4px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

    .theme-switch:checked + .theme-switch-label::after {
        background: radial-gradient(ellipse at 30% 50%, rgba(99,102,241,.3) 0%, transparent 65%);
    }

    .theme-switch:checked + .theme-switch-label::before {
        opacity: 1;
        animation-play-state: running;
    }

    .theme-switch:checked + .theme-switch-label .sun {
        opacity: .2;
    }

    .theme-switch:checked + .theme-switch-label .moon {
        opacity: 1;
    }

    .theme-switch:checked + .theme-switch-label .knob {
        transform: translateX(28px) !important;
        background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #8b5cf6 100%) !important;
        box-shadow: 0 2px 12px rgba(139,92,246,.7), 0 0 0 1px rgba(196,181,253,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
    }


/* ==========================================================================
   11. NAVBAR — LOGIN BUTTON & AVATAR
   ========================================================================== */

/* Nav login button — used when user IS logged in (profile/user area) */
.nav-login-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .48rem 1rem;
    min-height: 36px;
    border-radius: 8px;
    /* Gold border so it clearly stands out on the navy bar */
    border: 1px solid rgba(241, 184, 40, .9);
    color: #ffffff;
    text-decoration: none;
    /* Noticeably lighter than the navbar background */
    background: linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 100%), rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .03em;
    box-shadow: 0 0 0 1px rgba(241,184,40,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .14s ease, box-shadow .16s ease, background .16s ease;
}

    /* Subtle gold shine strip */
    .nav-login-btn::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 5px;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(241,184,40,.22), rgba(255,255,255,.08), rgba(241,184,40,.18));
        opacity: .5;
        pointer-events: none;
    }

    .nav-login-btn .bi {
        font-size: 1rem;
        line-height: 1;
        opacity: .9;
    }

    .nav-login-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 100%), rgba(255,255,255,.10);
        box-shadow: 0 0 0 1px rgba(241,184,40,.4), 0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
    }

    .nav-login-btn:active {
        transform: translateY(0) scale(.99);
        box-shadow: 0 0 0 1px rgba(241,184,40,.35), inset 0 1px 3px rgba(0,0,0,.15);
    }

    .nav-login-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(241,184,40,.4), 0 0 0 1px rgba(241,184,40,.6);
    }


/* Right-side navbar items wrapper — gives the toggle + login button breathing room */
.navbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

/* Gold button — used when user is NOT logged in */
.btn.btn-outline-primary2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 0.42rem 0.85rem;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: .03em;
    background-color: rgba(var(--iac-gold-rgb), .9);
    border: 1px solid rgba(var(--iac-gold-rgb), .95);
    color: #1c1c1c;
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    .btn.btn-outline-primary2:hover {
        background-color: var(--iac-gold);
        box-shadow: 0 3px 10px rgba(0,0,0,.25);
    }

    .btn.btn-outline-primary2:active {
        transform: translateY(1px);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }

/* Navbar avatar / logo mark — initials circle beside brand */
.navbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "din-2014", sans-serif;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .02em;
    user-select: none;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.25);
}

/* Generic .avatar (used in tables, dropdowns, user rows) */
.avatar {
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    border: 1px solid rgba(0,0,0,.12);
    user-select: none;
    flex-shrink: 0;
}

.avatar--neutral {
    background: #676565;
    color: #fff;
}

.avatar--male {
    background: #0165fa;
    color: #fff;
}

.avatar--female {
    background: #fa138b;
    color: #fff;
}

.avatar--gold {
    background: var(--iac-gold);
    color: #002855;
}

.avatar--navy {
    background: var(--iac-blue-hex);
    color: #fff;
}


/* ==========================================================================
   12. GLOBAL UTILITIES
   ========================================================================== */

.text-iac {
    color: var(--iac-blue-hex) !important;
}

.bg-iac-5 {
    background: var(--iac-blue-5) !important;
}

.bg-grey-5 {
    background: var(--iac-grey-5) !important;
}

.min-vh-100 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Responsive container breathing room on large screens */
@media (min-width: 1600px) {
    .container,
    .container-fluid {
        padding-left: clamp(1rem, 3vw, 4rem);
        padding-right: clamp(1rem, 3vw, 4rem);
    }
}

.row, .container, .container-fluid {
    max-width: 100%;
}

/* Widescreen card/content positioning */
@media (min-width: 1921px) {
    .content-inner {
        max-width: 1920px;
        margin-inline: auto;
    }
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
    .navbar, .footer, footer, .no-print {
        display: none !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    .container, .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .table {
        border: 1px solid #000 !important;
    }

        .table th, .table td {
            border: 1px solid #000 !important;
            color: #000 !important;
        }
}


/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-main: #000;
        --iac-blue-hex: #000080;
        --iac-gold: #ffa500;
    }

    a {
        text-decoration: underline;
    }
}

/* ── Navbar SCIF / LKM badge ──────────────────────────────────────────────────
   Shown next to the user's display name when LkmEnabled = true.
   Uses the MyProfile design language: din-2014 font, navy/gold palette,
   subtle glow, and full dark-mode support.
──────────────────────────────────────────────────────────────────────────────── */
.nav-scif-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px 2px 5px;
    border-radius: 4px;
    font-family: "din-2014", "Segoe UI", sans-serif;
    font-size: .60rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
    line-height: 1.6;
    /* Light mode — deep olive-green, matching BackOffice scif-badge */
    background-color: #2d3a1e;
    color: #c8d8a0;
    border: 1px solid #4a5e28;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 6px rgba(120,160,40,.25), 0 1px 3px rgba(0,0,0,.35);
}

/* Light-mode explicit override (when data-bs-theme="light") */
:root:not([data-bs-theme="dark"]) .nav-scif-badge {
    background-color: #3b4a22;
    color: #d6e8a0;
    border-color: #5a7530;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 8px rgba(140,180,50,.30), 0 1px 3px rgba(0,0,0,.25);
}

/* Dark mode — slightly brighter glow so it reads against dark navbar */
:root[data-bs-theme="dark"] .nav-scif-badge,
[data-theme="dark"] .nav-scif-badge {
    background-color: #2d3a1e;
    color: #c8d8a0;
    border-color: #4a5e28;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 10px rgba(130,180,40,.40), 0 1px 4px rgba(0,0,0,.55);
}


/* ─────────────────────────────────────────────────────────────
   PROFILE — TABLE POP (borders + better hover)
   NO CARD BACKGROUND CHANGES
   ───────────────────────────────────────────────────────────── */

/* TABLE OUTER BORDER (LIGHT MODE) */
.profile-page-wrap .quotes-table {
    border: 2px solid rgba(0,40,85,0.22) !important; /* darker frame */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0,40,85,0.10);
}

    /* Header: richer navy gradient + clearer separators */
    .profile-page-wrap .quotes-table thead tr {
        background: linear-gradient(180deg, #0e2a4a 0%, #002855 100%) !important;
    }

    .profile-page-wrap .quotes-table thead th {
        color: rgba(255,255,255,0.92) !important;
        border-right: 1px solid rgba(255,255,255,0.12) !important;
    }

        .profile-page-wrap .quotes-table thead th:last-child {
            border-right: none !important;
        }

        .profile-page-wrap .quotes-table thead th:first-child {
            border-left: 4px solid #F1B828 !important;
            padding-left: .85rem !important;
        }

    /* Body cells: slightly stronger text */
    .profile-page-wrap .quotes-table tbody td {
        color: rgba(0,40,85,0.86) !important;
        font-weight: 650;
        transition: background-color .14s ease, box-shadow .14s ease;
    }

    /* Stripe colors */
    .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td {
        background-color: #f6f8fe !important;
    }

    .profile-page-wrap .quotes-table tbody tr:nth-child(even) td {
        background-color: #d2def2 !important;
    }

    /* Row dividers */
    .profile-page-wrap .quotes-table tbody tr {
        border-bottom: 1px solid rgba(0,40,85,0.14);
    }

        .profile-page-wrap .quotes-table tbody tr:last-child {
            border-bottom: none;
        }

        /* Hover: decent, brand-y, NOT harsh */
        .profile-page-wrap .quotes-table tbody tr:hover td {
            background-color: rgba(241,184,40,0.16) !important; /* gold wash */
            box-shadow: inset 4px 0 0 rgba(241,184,40,0.95); /* left accent */
        }

            .profile-page-wrap .quotes-table tbody tr:hover td:first-child {
                box-shadow: inset 4px 0 0 rgba(241,184,40,0.95), inset 0 0 0 9999px rgba(241,184,40,0.16); /* ensures full-row wash reads */
            }

/* ───────────── DARK MODE (table only) ───────────── */

/* TABLE OUTER BORDER (DARK MODE) */
:root[data-bs-theme="dark"] .profile-page-wrap .quotes-table,
[data-bs-theme="dark"] .profile-page-wrap .quotes-table,
[data-theme="dark"] .profile-page-wrap .quotes-table {
    border: 2px solid rgba(255,255,255,0.14) !important; /* light frame */
    box-shadow: 0 18px 44px rgba(0,0,0,0.62);
}

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table thead tr,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table thead tr,
    [data-theme="dark"] .profile-page-wrap .quotes-table thead tr {
        background: linear-gradient(180deg, #102a48 0%, #081626 100%) !important;
    }

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody td {
        color: rgba(255,255,255,0.90) !important;
    }

    /* Dark stripes */
    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(odd) td {
        background-color: #142338 !important;
    }

    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:nth-child(even) td {
        background-color: #1b2c46 !important;
    }

    /* Dark row dividers */
    :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr,
    [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr,
    [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

        /* Dark hover: warm gold tint + left accent */
        :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td,
        [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td,
        [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td {
            background-color: rgba(241,184,40,0.12) !important;
            box-shadow: inset 4px 0 0 rgba(241,184,40,0.90);
        }

            :root[data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child,
            [data-bs-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child,
            [data-theme="dark"] .profile-page-wrap .quotes-table tbody tr:hover td:first-child {
                box-shadow: inset 4px 0 0 rgba(241,184,40,0.90), inset 0 0 0 9999px rgba(241,184,40,0.12);
            }

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

body {
    padding-top: 56px !important;
}

.page {
    height: calc(100dvh - 56px);
    overflow: hidden;
}

    .page > main {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

/* Make the global shell span the full viewport, including scrollbar gutter */
.navbar,
footer,
.footer,
.page-stripe {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Navbar specifically */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
}

/* Footer specifically */
footer,
.footer {
    position: relative;
    left: 50%;
    right: auto;
    margin-left: -50vw;
    margin-right: 0;
}

/* Bottom stripe if you use one */
.page-stripe {
    position: fixed;
    left: 0;
    right: auto;
    bottom: 0;
}
/* ================================================================
   IAC OFFCANVAS — Project Details Panel
   Paste into site.css / app.css (after Bootstrap).
   !important used throughout to beat Bootstrap's .offcanvas and
   .form-control rules which would otherwise win the cascade.
   Light mode default — [data-bs-theme="dark"] overrides.
   ================================================================ */

/* ── Override Bootstrap's --bs-offcanvas-bg ──
   Covers both the default (light) state and explicit light/dark
   selectors so it wins regardless of Bootstrap version or load order. ── */

/* Default + explicit light mode */
.iac-offcanvas.offcanvas,
:root .iac-offcanvas.offcanvas,
:root:not([data-bs-theme="dark"]) .iac-offcanvas.offcanvas,
:root[data-bs-theme="light"] .iac-offcanvas.offcanvas,
[data-bs-theme="light"] .iac-offcanvas.offcanvas {
    --bs-offcanvas-bg: #ffffff;
    background-color: #ffffff !important;
}

.iac-offcanvas .offcanvas-header,
:root:not([data-bs-theme="dark"]) .iac-offcanvas .offcanvas-header,
[data-bs-theme="light"] .iac-offcanvas .offcanvas-header {
    background-color: #f0f5fb !important;
}

.iac-offcanvas .offcanvas-body,
:root:not([data-bs-theme="dark"]) .iac-offcanvas .offcanvas-body,
[data-bs-theme="light"] .iac-offcanvas .offcanvas-body {
    background-color: #ffffff !important;
}

/* Dark mode */
[data-bs-theme="dark"] .iac-offcanvas.offcanvas,
:root[data-bs-theme="dark"] .iac-offcanvas.offcanvas {
    --bs-offcanvas-bg: #0f1d2d;
    background-color: #0f1d2d !important;
}

[data-bs-theme="dark"] .iac-offcanvas .offcanvas-header,
:root[data-bs-theme="dark"] .iac-offcanvas .offcanvas-header {
    background-color: #142436 !important;
}

[data-bs-theme="dark"] .iac-offcanvas .offcanvas-body,
:root[data-bs-theme="dark"] .iac-offcanvas .offcanvas-body {
    background-color: #0f1d2d !important;
}

/* ── Panel shell — beats Bootstrap's .offcanvas background ── */
.iac-offcanvas {
    width: 400px !important;
    max-width: 92vw !important;
    background-color: #ffffff !important;
    border-left: 1px solid rgba(184,201,223,.80) !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: -8px 0 40px rgba(0,40,85,.14), -2px 0 10px rgba(0,40,85,.07) !important;
    display: flex !important;
    flex-direction: column !important;
}

[data-bs-theme="dark"] .iac-offcanvas {
    background-color: #0f1d2d !important;
    border-left-color: rgba(42,69,101,.85) !important;
    box-shadow: -8px 0 40px rgba(0,0,0,.55), -2px 0 10px rgba(0,0,0,.32) !important;
}

/* ── Header ── */
.iac-offcanvas__header {
    background-color: #f0f5fb !important;
    border-bottom: 1px solid rgba(184,201,223,.80) !important;
    padding: 18px 22px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

    .iac-offcanvas__header::after {
        content: "" !important;
        position: absolute !important;
        bottom: -1px !important;
        left: 0 !important;
        width: 140px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #f5a800 0%, transparent 100%) !important;
    }

[data-bs-theme="dark"] .iac-offcanvas__header {
    background-color: #142436 !important;
    border-bottom-color: rgba(42,69,101,.85) !important;
}

/* Title group */
.iac-offcanvas__title-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Navy gradient icon bubble */
.iac-offcanvas__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #0a3564 0%, #1459a0 55%, #1d71c8 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(11,61,115,.30) !important;
    color: #ffffff !important;
}

    .iac-offcanvas__icon svg,
    .iac-offcanvas__icon i {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

/* Title */
.iac-offcanvas__title {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #0c1c30 !important;
    letter-spacing: -.01em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

[data-bs-theme="dark"] .iac-offcanvas__title {
    color: #e1edf9 !important;
}

/* Subtitle (quote number row) */
.iac-offcanvas__subtitle {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #607898 !important;
    margin-top: 3px !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
}

[data-bs-theme="dark"] .iac-offcanvas__subtitle {
    color: #8da7c5 !important;
}

/* Multi badge */
.iac-offcanvas__multi-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(245,168,0,.14) !important;
    border: 1px solid rgba(245,168,0,.30) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #7a4e00 !important;
}

[data-bs-theme="dark"] .iac-offcanvas__multi-badge {
    color: #ffd27a !important;
}

/* Close button */
.iac-offcanvas__close {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(184,201,223,.80) !important;
    border-radius: 9px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    color: #607898 !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: background .15s, border-color .15s, color .15s !important;
}

    .iac-offcanvas__close:hover {
        background-color: #eef4fb !important;
        border-color: rgba(0,40,85,.32) !important;
        color: #0c1c30 !important;
        opacity: 1 !important;
    }

    .iac-offcanvas__close svg {
        color: inherit !important;
        stroke: currentColor !important;
    }

[data-bs-theme="dark"] .iac-offcanvas__close {
    background-color: #0d1e30 !important;
    border-color: rgba(42,69,101,.85) !important;
    color: #8da7c5 !important;
}

    [data-bs-theme="dark"] .iac-offcanvas__close:hover {
        background-color: #142436 !important;
        border-color: rgba(124,176,245,.42) !important;
        color: #e1edf9 !important;
    }

/* ── Body — must have bg so it's not transparent ── */
.iac-offcanvas__body {
    padding: 20px 22px 8px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .iac-offcanvas__body {
    background-color: #0f1d2d !important;
}

/* Required note banner */
.iac-offcanvas__req-note {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    color: #607898 !important;
    margin-bottom: 16px !important;
    padding: 8px 12px !important;
    background-color: #eef4fb !important;
    border: 1px solid rgba(184,201,223,.60) !important;
    border-radius: 8px !important;
}

[data-bs-theme="dark"] .iac-offcanvas__req-note {
    background-color: #142436 !important;
    border-color: rgba(42,69,101,.60) !important;
    color: #8da7c5 !important;
}

.iac-offcanvas__req-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Multi-product alert */
.iac-offcanvas__multi-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background-color: rgba(245,168,0,.09) !important;
    border: 1px solid rgba(245,168,0,.28) !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    font-size: 12.5px !important;
    color: #7a4e00 !important;
    line-height: 1.45 !important;
}

    .iac-offcanvas__multi-alert strong {
        font-weight: 800 !important;
    }

.iac-offcanvas__multi-alert-icon {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    color: #f5a800 !important;
}

[data-bs-theme="dark"] .iac-offcanvas__multi-alert {
    color: #ffd27a !important;
}

/* ── Labels ── */
.iac-offcanvas__label {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .10em !important;
    color: #607898 !important;
    margin-bottom: 5px !important;
}

[data-bs-theme="dark"] .iac-offcanvas__label {
    color: #8da7c5 !important;
}

.iac-offcanvas__req-star {
    color: #ef4444 !important;
    margin-left: 2px !important;
}

/* Section label for Add Product Lines */
.iac-offcanvas__section-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .10em !important;
    color: #f5a800 !important;
    margin-bottom: 0 !important;
}

.iac-offcanvas__section-label-icon {
    color: #f5a800 !important;
    font-size: 13px !important;
}

/* ── Inputs — beats Bootstrap .form-control ── */
.iac-offcanvas__input.form-control,
.iac-offcanvas__input {
    height: 40px !important;
    padding: 0 13px !important;
    background-color: #F7F9FC !important;
    border: 1px solid rgba(0,40,85,.18) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    color: #0c1c30 !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

    .iac-offcanvas__input.form-control:focus,
    .iac-offcanvas__input:focus {
        border-color: rgba(0,40,85,.50) !important;
        box-shadow: 0 0 0 3px rgba(0,40,85,.09) !important;
        outline: none !important;
        background-color: #ffffff !important;
        color: #0c1c30 !important;
    }

[data-bs-theme="dark"] .iac-offcanvas__input.form-control,
[data-bs-theme="dark"] .iac-offcanvas__input {
    background-color: #0d1e30 !important;
    border-color: rgba(124,176,245,.22) !important;
    color: #e1edf9 !important;
}

    [data-bs-theme="dark"] .iac-offcanvas__input.form-control:focus,
    [data-bs-theme="dark"] .iac-offcanvas__input:focus {
        border-color: rgba(124,176,245,.55) !important;
        box-shadow: 0 0 0 3px rgba(124,176,245,.13) !important;
        background-color: #0d1e30 !important;
    }

/* Disabled / read-only — unmistakably non-interactive
   Light: warm stone grey bg vs the white active inputs — obvious at a glance
   Dark:  very dark sunken bg with heavily dimmed text — clearly "locked" */
.iac-offcanvas__input--disabled.form-control,
.iac-offcanvas__input--disabled {
    background-color: #e2e8f0 !important; /* cool grey — far from white active inputs */
    color: #8a9db5 !important; /* dim blue-grey — clearly muted vs #0c1c30 */
    cursor: not-allowed !important;
    border-style: dashed !important;
    border-color: rgba(0,40,85,.20) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-style: italic !important; /* extra cue: locked text looks different */
}

[data-bs-theme="dark"] .iac-offcanvas__input--disabled.form-control,
[data-bs-theme="dark"] .iac-offcanvas__input--disabled {
    background-color: #EEF2F6 !important; /* very dark — sunken below the #0d1e30 active inputs */
    color: #2e4560 !important; /* heavily dimmed — far from #e1edf9 active text */
    border-color: rgba(124,176,245,.12) !important;
    font-style: italic !important;
}

/* Select — custom arrow, beats form-control */
.iac-offcanvas__select.form-control,
.iac-offcanvas__select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23607898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: #ffffff !important;
    padding-right: 32px !important;
}

[data-bs-theme="dark"] .iac-offcanvas__select.form-control,
[data-bs-theme="dark"] .iac-offcanvas__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238da7c5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-color: #0d1e30 !important;
}

/* Hint text under Quote No. */
.iac-offcanvas__hint {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: #90a8c4 !important;
    margin-top: 4px !important;
}

[data-bs-theme="dark"] .iac-offcanvas__hint {
    color: #4a6880 !important;
}

/* Divider line */
.iac-offcanvas__divider {
    height: 1px !important;
    background: rgba(184,201,223,.55) !important;
    border-radius: 999px !important;
    margin: 4px 0 !important;
}

[data-bs-theme="dark"] .iac-offcanvas__divider {
    background: rgba(42,69,101,.55) !important;
}

/* ── Add product line buttons ── */
.iac-offcanvas__add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: 1px solid rgba(0,40,85,.18) !important;
    background-color: #ffffff !important;
    color: #0d2c4e !important;
    font-family: inherit !important;
    transition: background .15s, border-color .15s !important;
    white-space: nowrap !important;
}

    .iac-offcanvas__add-btn:hover {
        background-color: #f0f5fb !important;
        border-color: rgba(0,40,85,.32) !important;
    }

[data-bs-theme="dark"] .iac-offcanvas__add-btn {
    background-color: rgba(30,52,76,.80) !important;
    border-color: rgba(124,176,245,.22) !important;
    color: #c8def5 !important;
}

    [data-bs-theme="dark"] .iac-offcanvas__add-btn:hover {
        background-color: rgba(42,72,104,.92) !important;
        border-color: rgba(124,176,245,.42) !important;
    }

/* ── Footer actions ── */
.iac-offcanvas__footer-actions {
    display: flex !important;
    gap: 10px !important;
}

/* Cancel button */
.iac-offcanvas__btn-cancel {
    flex: 1 !important;
    height: 44px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(0,40,85,.20) !important;
    background-color: #ffffff !important;
    color: #0d2c4e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    transition: background .15s, border-color .15s !important;
    letter-spacing: .01em !important;
}

    .iac-offcanvas__btn-cancel:hover {
        background-color: #f0f6ff !important;
        border-color: rgba(0,40,85,.36) !important;
    }

[data-bs-theme="dark"] .iac-offcanvas__btn-cancel {
    background-color: rgba(30,52,76,.80) !important;
    border-color: rgba(124,176,245,.22) !important;
    color: #c8def5 !important;
}

    [data-bs-theme="dark"] .iac-offcanvas__btn-cancel:hover {
        background-color: rgba(42,72,104,.92) !important;
        border-color: rgba(124,176,245,.42) !important;
        color: #e8f3ff !important;
    }

/* Save & Done — green */
.iac-offcanvas__btn-done {
    flex: 2 !important;
    height: 44px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(20, 122, 72, 0.28) !important;
    background: linear-gradient(180deg, #31b56a 0%, #1f9a54 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 4px rgba(19, 97, 57, 0.14), 0 8px 18px rgba(19, 97, 57, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .15s, filter .15s !important;
    letter-spacing: .01em !important;
}

    .iac-offcanvas__btn-done::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%), radial-gradient(circle at top right, rgba(255,255,255,.12) 0%, transparent 48%) !important;
        pointer-events: none !important;
        border-radius: inherit !important;
    }

    .iac-offcanvas__btn-done:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(19, 97, 57, 0.18), 0 12px 24px rgba(19, 97, 57, 0.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
        filter: brightness(1.02) !important;
    }

    .iac-offcanvas__btn-done:active {
        transform: translateY(1px) scale(.995) !important;
        box-shadow: 0 2px 6px rgba(19, 97, 57, 0.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

    .iac-offcanvas__btn-done:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(70, 208, 124, 0.22), 0 8px 22px rgba(19, 97, 57, 0.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }

/* Dark mode — deeper green with glow */
[data-bs-theme="dark"] .iac-offcanvas__btn-done {
    border: 1px solid rgba(96, 255, 160, 0.20) !important;
    background: linear-gradient(145deg, #15803d 0%, #16a34a 52%, #22c55e 100%) !important;
    box-shadow: 0 0 0 1px rgba(140, 255, 186, 0.04), 0 8px 20px rgba(14, 84, 42, 0.38), 0 0 22px rgba(34, 197, 94, 0.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

    [data-bs-theme="dark"] .iac-offcanvas__btn-done::before {
        background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 44%), radial-gradient(circle at top right, rgba(120,255,177,.16) 0%, transparent 50%) !important;
    }

    [data-bs-theme="dark"] .iac-offcanvas__btn-done:hover {
        box-shadow: 0 0 0 1px rgba(140, 255, 186, 0.06), 0 12px 26px rgba(14, 84, 42, 0.46), 0 0 28px rgba(34, 197, 94, 0.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
        filter: brightness(1.05) !important;
    }

    [data-bs-theme="dark"] .iac-offcanvas__btn-done:focus-visible {
        box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.24), 0 0 30px rgba(34, 197, 94, 0.24), 0 10px 28px rgba(14, 84, 42, 0.42) !important;
    }
/* ── Responsive ── */
@media (max-width: 480px) {
    .iac-offcanvas {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .iac-offcanvas__footer-actions {
        flex-direction: column !important;
    }

    .iac-offcanvas__btn-cancel,
    .iac-offcanvas__btn-done {
        flex: none !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   DARK MODE — Native <select> dropdown list fix
   Browsers render the native option popup using OS/system colours, so we
   must (a) tell the browser the colour-scheme is dark and (b) explicitly
   colour every <option> so the list isn't white-on-white.
   ========================================================================== */

/* Tell the browser to render native controls (scrollbars, selects, etc.)
   in dark mode when the dark theme is active. */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

    /* Colour the <select> element itself (redundant with .iac-offcanvas__select
   but acts as a safe fallback for any select inside a modal/offcanvas). */
    [data-bs-theme="dark"] .modal select,
    [data-bs-theme="dark"] .offcanvas select,
    [data-bs-theme="dark"] .iac-offcanvas select,
    [data-bs-theme="dark"] .iac-offcanvas__select {
        background-color: #0d1e30 !important;
        color: #e1edf9 !important;
        color-scheme: dark !important;
    }

        /* Colour every <option> inside those selects — this is what fixes the
   white popup list the user reported. */
        [data-bs-theme="dark"] .modal select option,
        [data-bs-theme="dark"] .offcanvas select option,
        [data-bs-theme="dark"] .iac-offcanvas select option,
        [data-bs-theme="dark"] .iac-offcanvas__select option {
            background-color: #0d1e30 !important;
            color: #e1edf9 !important;
        }

            /* Highlighted / selected option */
            [data-bs-theme="dark"] .modal select option:checked,
            [data-bs-theme="dark"] .offcanvas select option:checked,
            [data-bs-theme="dark"] .iac-offcanvas select option:checked,
            [data-bs-theme="dark"] .iac-offcanvas__select option:checked {
                background-color: #1a3a5c !important;
                color: #ffffff !important;
            }

            /* Disabled placeholder option (e.g. "— Select market —") */
            [data-bs-theme="dark"] .modal select option:disabled,
            [data-bs-theme="dark"] .offcanvas select option:disabled,
            [data-bs-theme="dark"] .iac-offcanvas select option:disabled,
            [data-bs-theme="dark"] .iac-offcanvas__select option:disabled {
                color: #4a6880 !important;
            }


/* ══════════════════════════════════════════════════════════════════
   ROLE PREVIEW BANNER
   ══════════════════════════════════════════════════════════════════ */

/* Fixed — floats over content, never pushes page down */
.role-preview-banner {
    position: fixed;
    top: 56px; /* sits flush under the navbar */
    left: 0;
    right: 0;
    z-index: 1025; /* below navbar (1030), above page content */
    background: rgba(8, 16, 34, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(241, 184, 40, 0.22);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.32);
    font-family: var(--iac-font, "din-2014", sans-serif);
    pointer-events: auto;
}

    /* Thin gold line across the top edge */
    .role-preview-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient( 90deg, transparent 0%, rgba(241, 184, 40, 0.7) 25%, #F1B828 50%, rgba(241, 184, 40, 0.7) 75%, transparent 100% );
        pointer-events: none;
    }

.rpb-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem; /* matches navbar padding */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Left side ── */
.rpb-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.rpb-icon-wrap {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(241, 184, 40, 0.12);
    border: 1px solid rgba(241, 184, 40, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: #F1B828;
}

.rpb-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.rpb-label {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F1B828;
    opacity: 0.80;
    white-space: nowrap;
    flex-shrink: 0;
}

.rpb-detail {
    font-size: 0.76rem;
    font-weight: 400;
    color: rgba(210, 225, 245, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpb-role {
    color: #ffffff;
    font-weight: 800;
    text-transform: capitalize;
}

.rpb-note {
    font-size: 0.68rem;
    color: rgba(180, 200, 230, 0.38);
    margin-left: 0.15rem;
}

/* ── Stop button ── */
.rpb-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.26rem 0.80rem;
    border-radius: 7px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
    font-family: var(--iac-font, "din-2014", sans-serif);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease, transform 0.11s ease;
}

    .rpb-stop-btn:hover {
        background: rgba(220, 38, 38, 0.26);
        border-color: rgba(220, 38, 38, 0.70);
        color: #ffffff;
        box-shadow: 0 3px 12px rgba(220, 38, 38, 0.26);
        transform: translateY(-1px);
    }

    .rpb-stop-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .rpb-stop-btn i {
        font-size: 0.70rem;
    }


/* ==========================================================================
   LOGIN PAGE OVERRIDES
   Neutralise global rules that fight the fixed two-column login layout.
   All selectors are scoped to body:has(.iac-login-bg) so nothing else is
   affected.
   ========================================================================== */

/* 1. Remove the navbar padding-top that shifts the login layout down */
body:has(.iac-login-bg) {
    padding-top: 0 !important;
}

    /* 2. Reset the .page height/overflow so the fixed login layout isn't clipped */
    body:has(.iac-login-bg) .page {
        height: auto !important;
        overflow: visible !important;
    }

        body:has(.iac-login-bg) .page > main {
            height: auto !important;
            overflow: visible !important;
            min-height: 0 !important;
        }

/* 3. Prevent the global img/svg height:auto rule from collapsing the
   ::before hero-image pseudo-element on large screens */
@media (min-width: 1024px) {
    body:has(.iac-login-bg) .iac-login-bg::before {
        height: 100% !important;
    }
}