/*Global variables and settings across modes*/

:root {
    --lpx-logo: url('/api/app/tenant-details/company-logo') !important;
    --lpx-logo-icon: url('/images/logo/mark.svg') !important;
    /* -- */
    --lpx-primary-rgb: var(--spw-midnight-blue-rgb);
    --lpx-secondary-rgb: 108,93,211;
    --lpx-brand-rgb: var(--spw-safety-orange-rbg) !important;
    --lpx-success-rgb: 79,191,103;
    --lpx-info-rgb: 67,138,167;
    --lpx-warning-rgb: 255,159,56;
    --lpx-danger-rgb: var(--spw-vivid-orange-rgb);
    --lpx-text-white-rgb: 255,255,255;
    --lpx-logo-reverse: var(--logo-reverse);
    /* -- */
    --lpx-primary: var(--spw-midnight-blue);
    --lpx-secondary: #6c5dd3;
    --lpx-success: #4fbf67;
    --lpx-info: #438aa7;
    --lpx-warning: #ff9f38;
    --lpx-danger: var(--spw-vivid-orange);
    --lpx-brand: var(--spw-safety-orange) !important;
    --lpx-brand-text: #fff;
    --lpx-container-active-text: #fff;
    --lpx-text-white: #fff;
    --lpx-radius: 0.5rem;
    /* -- */
    --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
    /* -- */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #355dff;
    --bs-secondary: #6c5dd3;
    --bs-success: #4fbf67;
    --bs-info: #438aa7;
    --bs-warning: #ff9f38;
    --bs-danger: var(--lpx-danger);
    /* -- */
    --bs-primary-rgb: 53, 93, 255;
    --bs-secondary-rgb: 108, 93, 211;
    --bs-success-rgb: 79, 191, 103;
    --bs-info-rgb: 67, 138, 167;
    --bs-warning-rgb: 255, 159, 56;
    --bs-danger-rgb: var(--lpx-danger-rgb);
    /* -- */
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    /* -- */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: Inter, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    /* -- */
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.4375rem;
    --bs-border-radius-lg: 0.5625rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #355dff;
    --bs-link-hover-color: #2a4acc;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    /* -- */
    --spw-navy-blue: #092c44;
    --spw-midnight-blue: #1e3f64;
    --spw-vivid-orange: #e84a36;
    --spw-safety-orange: #fc8240;
    --spw-cedar: #675f5e;
    --spw-sand: #f2ecea;
    /* -- */
    --spw-navy-blue-rgb: 9,44,68;
    --spw-midnight-blue-rgb: 30,63,100;
    --spw-vivid-orange-rgb: 232,74,54;
    --spw-safety-orange-rgb: 252,130,64;
    --spw-cedar-rgb: 103,95,94;
    --spw-sand-rgb: 242,236,234;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* 
    blazorise picker workaround for https://github.com/Megabit/Blazorise/issues/4917
*/
.flatpickr-calendar.static {
    top: unset !important;
}

.login-brand-logo {
    background-image: url('/api/app/tenant-details/company-logo');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

:root .lpx-theme-dark .login-brand-logo {
    background-image: url('/api/app/tenant-details/company-logo');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

:root .lpx-theme-dim .login-brand-logo, :root .lpx-theme-light .login-brand-logo {
    background-image: url('/api/app/tenant-details/company-logo');
    background-repeat: no-repeat;
    height: 80px;
    width: 250px;
    background-size: cover;
}

/* Your Global Styles */

/************* CUSTOM CODE ********************/

.lpx-logo-container {
    padding: 10px !important;
}

.lpx-brand-logo {
    background-image: var(--lpx-logo) !important;
    background-repeat: no-repeat;
    background-size: 150px 48px !important;
    background-position: left 0px;
    display: block;
    height: 48px !important;
}

#lpx-sidebar .lpx-brand-logo {
    background-size: contain !important;
    height: auto !important;
    min-height: 48px !important;
}

.lpx-theme-dark .modal-footer .btn-outline-primary {
    color: var(--bs-btn-border-color) !important;
}

/*.lpx-sidebar-container .lpx-brand-logo {
    background-image: var(--lpx-logo-icon);
}

#lpx-wrapper.hover-trigger .lpx-brand-logo, .lpx-sidebar-container:hover .lpx-brand-logo {
    background-image: var(--lpx-logo);
    background-size: 150px 48px !important;
}*/
:root {
    --lpx-logo: url('/api/app/tenant-details/company-logo') !important;
    --lpx-logo-icon: url('/images/logo/mark.svg') !important;
    --bs-nav-tabs-link-active-color: var(--spw-safety-orange) !important;
    --bs-nav-tabs-link-active-border-color: var(--spw-safety-orange) !important;
    --bs-nav-tabs-link-active-color: var(--spw-safety-orange) !important;
}

.nav-tabs .nav-item .nav-link.active {
    border-color: var(--spw-safety-orange) !important;
    border-bottom-color: var(--spw-safety-orange) !important;
    color: var(--spw-safety-orange) !important;
}

.lpx-content .pagination .page-item.active .page-link {
    background-color: var(--spw-safety-orange) !important;
    border-color: var(--spw-safety-orange) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--spw-safety-orange) !important;
}

/* Enhanced checkbox contrast - Higher specificity to override LeptonX theme */
.form-check .form-check-input,
.dropdown-item .form-check-input,
input.form-check-input {
    border-width: 1px !important;
    border-color: #495057 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

form .form-check-input:checked,
.dropdown-item .form-check-input:checked {
    background-color: var(--spw-safety-orange) !important;
    border-color: var(--spw-safety-orange) !important;
    box-shadow: 0 2px 4px rgba(252, 130, 64, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

form select.form-select option:checked,
form select.form-select option:focus,
form select.form-select option:active {
    background: var(--spw-safety-orange) !important;
}

.hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
    width: 82px !important;
}

.lpx-theme-dark input[type^=date],
.lpx-theme-dark input[type="time"] {
    color-scheme: dark;
}

.lpx-theme-dark select.form-select {
    color-scheme: dark;
}

input[type^=date]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    font-size: 1.25em;
}

.lpx-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator  {
    color-scheme: light;
    filter: invert(1) !important;
}

.row {
    --bs-gutter-x: 0rem !important;
}

.advanced-analytics-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    margin-bottom: 10px;
}

.advanced-analytics-container > div {
    margin-right: 10px;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

.page-item .form-select {
    padding: 4px 30px;
}

@media (max-width: 600px) {
     /* Styles for mobile devices */ 
    .dt-container, .tab-content {
        padding: 1rem !important;
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .dashboard-data-card {
        border-radius: 10px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* subtle shadow */
        0 2px 4px rgba(125, 125, 125, 0.25) !important; /* inner glow for depth */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .link-container {
        display: table-row-group !important;
        font-weight: bold !important;
    }
    .offcanvas {
        width: 100% !important;
    }

    .title-text {
        font-size: 24px !important;
        letter-spacing: -2.1px;
        text-align: center;
    }

    .login-form-container {
        overflow-y: scroll !important;
        max-height: 90vmin !important;
    }

    .dropdown > div.dropdown-menu {
        z-index: 900 !important;
    }

    .offcanvas-body {
        padding-top: 0 !important;
    }

    .offcanvas-footer {
        position: initial;
    }

    .desktop-only {
        display: none !important;
    }

    .pagination select {
        display: none;
    }

    html, body {
        overscroll-behavior-x: none;
    }

    /* iOS will automatically zoom in on focus for input fields less than 18px. */
    input[type=text],
    input[type=password]{
        font-size: 18px;
    }
}

@media (min-width: 601px) and (max-width: 1680px) {
    /* Styles for tablets and small laptops */
    .login-container {
        height: 100vh;
    }

    .login-image {
        display: none;
    }

    .offcanvas {
        width: 50% !important;
    }

    .offcanvas-body {
        padding-top: 0 !important;
    }

    .title-container-div {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .title-text {
        font-size: 32px !important;
        letter-spacing: -2.1px;
        text-align: center;
    }
}

@media (min-width: 1681px) {
    /* Styles for large screens */
    .offcanvas {
        width: 33% !important;
    }

    .offcanvas-body {
        padding-top: 0 !important;
    }
}

/* WHY (Bug 10785): Blazorise's Offcanvas is a position:fixed flex column pinned top:0 / bottom:0,
   but almost every offcanvas in this app wraps its header / body / footer in a <Form>, so the
   panel's only flex item is the <form> and the body / footer are NOT flex children of the panel.
   The blocks above used to force .offcanvas-body to a fixed 70vh / 85vh; header + that body +
   footer then overflowed the panel whenever the VISIBLE height was smaller than 100vh. On iOS,
   vh is the toolbar-hidden height while a fixed box spans only the visible area, so the footer's
   Start / Submit buttons sat under the phone browser's own bottom toolbar (always in Chrome,
   whenever the bar was showing in Safari). Make the <form> a flex column of the panel and let
   the BODY flex and scroll; the footer stays in flow at the bottom of the visible panel, at every
   width. Measured in WebKit + Chromium with the iOS geometry emulated: Start button bottom 822px
   against a 780px visible box before, inside it after. */
.offcanvas > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* env(safe-area-inset-bottom) keeps the buttons above the iPhone home indicator once a browser
   hides its toolbar (Safari on scroll) and inside the native shell's WKWebView (Bug 8477). */
.offcanvas-footer {
    flex: 0 0 auto;
    padding-bottom: calc(var(--bs-offcanvas-padding-y) + env(safe-area-inset-bottom, 0px));
}

/* Hide home icon from breadcrumb. */
.lpx-breadcrumb .lpx-breadcrumb-item:nth-child(1) {
    display: none !important;
}

/* Hide home separator from breadcrumb. */
.lpx-breadcrumb .lpx-breadcrumb-separator:nth-child(1) {
    display: none !important;
}

/* Make tenant name bold. */
.lpx-breadcrumb .lpx-breadcrumb-item:nth-child(3) {
    font-weight: bolder !important;
    color: var(--spw-safety-orange) !important;
}

/* Hide icons for third-level menu items and below */
.lpx-inner-menu-item .lpx-inner-menu-item .lpx-menu-item-icon {
    display: none;
}

/* Padding for advanced filters */
div.col-3 > div.form-group,
div.col-md-3 > div.form-group {
    padding: 0 0.25rem;
}

/* WHY: `Class="sticky-tabs"` is applied to the outer Blazorise <Tabs> wrapper, which
   contains BOTH the nav strip and every TabPanel. Setting position+bg on the wrapper
   itself paints the entire form area with the same colour as the nav, so scrolling
   field values (e.g. AssignmentStatus "Not Started" in the audit New Assignment
   offcanvas) appear to pass through the strip instead of being clipped behind it.
   Target the inner `.nav-tabs` UL instead — that's the element that should actually
   stick at top: 0 while the rest of the form scrolls past it.

   `--lpx-bg` is the LeptonX-resolved offcanvas/page background so the strip matches
   the parent in both light and dark themes; `--bs-body-bg` and `#fff` are progressive
   fallbacks. See bug #9276 (originally fixed in PR 5487 — that fix was incomplete
   because the bg was painted on the wrapper, not the nav). */
.sticky-tabs > .nav,
.sticky-tabs > .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--lpx-bg, var(--bs-body-bg, #fff));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 
    Bug 3846: Mobile | Pop up to switch between accounts is not optimized on mobile devices
*/
ul.lpx-nav-menu[data-lpx-mobile-menu="user"] .b-table th:nth-child(3),
ul.lpx-nav-menu[data-lpx-mobile-menu="user"] .b-table td:nth-child(3) {
    display: none;
}


/************* SIDEBAR LOGO *************/
@media only screen and (min-width: 1200px) {

    .lpx-sidebar-container:hover .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        background-size: contain !important;
    }

    .hover-trigger > .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo-icon) !important;
        background-size: 36px !important;
        background-position-x: center !important;
        background-position-y: top !important;
        width: 36px !important;
        margin: 0 auto;
    }

    .hover-trigger > .lpx-sidebar-container:not(:hover) #lpx-sidebar .lpx-logo-container {
        width: 72px !important;
        overflow: hidden;
        background-color: transparent;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo-icon) !important;
        background-size: 36px !important;
        background-position-x: center !important;
        background-position-y: top !important;
        width: 36px !important;
        margin: 0 auto;
    }

    .hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        width: 36px !important;
    }

    .lpx-sidebar-container:hover .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        background-size: contain !important;
    }

    .lpx-sidebar-container:not(:hover) #lpx-sidebar .lpx-logo-container {
        width: 72px !important;
        overflow:hidden;
        background-color: transparent;
    }
}

.btn-secondary {
    --bs-btn-color: #355dff !important;
    --bs-btn-bg: #fff !important;
    --bs-btn-hover-color: #355dff !important;
    --bs-btn-hover-bg: #e6f0ff !important;
    --bs-btn-hover-border-color: #355dff !important;
    --bs-btn-active-color: #355dff !important;
    --bs-btn-active-bg: #fff !important;
    --bs-btn-active-border-color: #355dff !important;
    --bs-btn-disabled-color: #355dff;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #355dff;
}

input[type="date"] .was-validated .form-control:valid, .form-control.is-valid {
    padding-right: 1.5em !important
}

input[type="date"] .was-validated .form-control:invalid, .form-control.is-invalid {
    padding-right: 1.5em !important
}    

.dropdown-remove-toggle {
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-weight: normal !important;
    overflow: hidden !important;
    text-align: start !important;
}

.dropdown-remove-toggle::after {
    border-left: none !important;
    border-right: none !important;
}

/*Fix for Bug 3873: Modal width on User Account Switcher*/
/* Keep mobile behavior; only widen at lg and up */
@media (min-width: 992px) {
    .account_link_users_modals .modal {
        --bs-modal-width: 800px; /* pick your larger-than-500px value */
    }
}

/* SweetAlert2 cancel button: ensure text stays readable on hover */
.swal2-cancel.swal2-styled:hover {
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Body-level top banners: <HostImpersonationBanner /> + <AuthenticatorSetupBanner />
   (both rendered by App.razor above <Routes>).

   IMPORTANT: these rules MUST live in blazor-global-styles.css (the server-mode
   Global bundle via SafetyPlusWebStyleBundleContributor). In InteractiveServer
   render mode — the app default — the page links ONLY blazor-global-styles.css +
   main.css; Blazor.Client/wwwroot/global.css is the WebAssembly-mode bundle and
   is never linked, so rules placed only there render the banners unstyled
   (Bug 10010). The copy in global.css is kept in sync for WASM parity.

   Layout model: each banner is fixed top chrome with a deterministic height
   (like the environment banner in App.razor), and the :has() rules below push
   the fixed LeptonX containers down while a banner is visible — mirroring the
   environment-banner offset block in App.razor, composed via --spw-env-offset
   (that block sets it to 28px when the env banner shows; defaults to 0 in prod). */
:root {
    --spw-env-offset: 0px;
    --spw-top-banner-height: 50px;
}

.host-impersonation-banner,
.authenticator-setup-banner {
    position: fixed;
    top: var(--spw-env-offset);
    left: 0;
    right: 0;
    height: var(--spw-top-banner-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* WHY: both sit under the environment banner (z-index 1022) so the env label always
   keeps the top slot; impersonation outranks the authenticator nudge when both show. */
.host-impersonation-banner {
    z-index: 1021;
    background-color: #fff3cd;
    border-bottom: 2px solid #dc3545;
    color: #842029;
}
.authenticator-setup-banner {
    z-index: 1020;
    background-color: #cff4fc;
    border-bottom: 2px solid #0dcaf0;
    color: #055160;
}
/* Stack the nudge below an active impersonation banner (host admin impersonating
   into a 2FA tenant with no authenticator enrolled). */
body:has(.host-impersonation-banner) .authenticator-setup-banner {
    top: calc(var(--spw-env-offset) + var(--spw-top-banner-height));
}

.host-impersonation-banner .banner-icon {
    font-size: 1.25rem;
    color: #dc3545;
}
.authenticator-setup-banner .banner-icon {
    font-size: 1.25rem;
}
.host-impersonation-banner .banner-text,
.authenticator-setup-banner .banner-text {
    flex: 1;
    /* WHY: deterministic single-line height — the :has() chrome offsets below assume it. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.host-impersonation-banner .banner-return-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #dc3545;
    color: #fff;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}
.host-impersonation-banner .banner-return-btn:hover {
    background-color: #b02a37;
}
.authenticator-setup-banner .banner-setup-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #0dcaf0;
    color: #055160;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}
.authenticator-setup-banner .banner-setup-btn:hover {
    background-color: #0aa8c7;
}
.authenticator-setup-banner .banner-dismiss-btn {
    background: transparent;
    border: 1px solid #0dcaf0;
    color: #055160;
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.authenticator-setup-banner .banner-dismiss-btn:hover {
    background-color: #b6effb;
}

/* Push the fixed/absolute LeptonX chrome down while a banner is visible; snaps back
   when the banner dismisses (the element leaves the DOM, so :has() stops matching).
   !important is required to out-rank the env-banner offset block in App.razor
   (these selectors are more specific, so they win when both are !important). */
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) :is(.lpx-sidebar-container, .lpx-topbar-container, .lpx-mobile-navbar-container, .lpx-logo-container, .lpx-toolbar, .lpx-toolbar-container) {
    top: calc(var(--spw-env-offset) + var(--spw-top-banner-height)) !important;
}
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) .lpx-sidebar-container {
    height: calc(100vh - var(--spw-env-offset) - var(--spw-top-banner-height)) !important;
}
/* WHY: LeptonX hard-sizes the sidebar's INNER scroll chain to the full viewport
   (.lpx-sidebar min-height:100vh, .lpx-nav height:100vh; .lpx-scroll-container is 100%
   of .lpx-nav). Shrinking only .lpx-sidebar-container leaves the scroll viewport
   extending past the container bottom, so the LAST menu items (Administration, feature
   settings) become unreachable while a banner shows. Size the inner chain to match. */
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) .lpx-sidebar-container :is(.lpx-sidebar, .lpx-nav) {
    height: calc(100vh - var(--spw-env-offset) - var(--spw-top-banner-height)) !important;
    min-height: 0 !important;
}
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) .lpx-content-container {
    padding-top: calc(var(--spw-env-offset) + var(--spw-top-banner-height));
}
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) .chat-expanded {
    top: calc(var(--spw-env-offset) + var(--spw-top-banner-height)) !important;
}
/* WHY: .lpx-toolbar-container is document-anchored (position:absolute, spans the full
   page height) at z-index 1021 - above the fixed banners (1020 / 1021-tied-but-earlier
   in DOM order) - so once the page scrolls, its background paints over the banner's
   right edge (clips the Remind Me Later button). Drop it below the banners while one
   is visible; it still outranks the sidebar (1000) and topbar (101). The env banner
   never needed this because it sits at z-index 1022. */
body:has(:is(.host-impersonation-banner, .authenticator-setup-banner)) .lpx-toolbar-container {
    z-index: 1019 !important;
}
/* Both banners at once: double offset. */
body:has(.host-impersonation-banner):has(.authenticator-setup-banner) :is(.lpx-sidebar-container, .lpx-topbar-container, .lpx-mobile-navbar-container, .lpx-logo-container, .lpx-toolbar, .lpx-toolbar-container) {
    top: calc(var(--spw-env-offset) + 2 * var(--spw-top-banner-height)) !important;
}
body:has(.host-impersonation-banner):has(.authenticator-setup-banner) .lpx-sidebar-container {
    height: calc(100vh - var(--spw-env-offset) - 2 * var(--spw-top-banner-height)) !important;
}
body:has(.host-impersonation-banner):has(.authenticator-setup-banner) .lpx-sidebar-container :is(.lpx-sidebar, .lpx-nav) {
    height: calc(100vh - var(--spw-env-offset) - 2 * var(--spw-top-banner-height)) !important;
}
body:has(.host-impersonation-banner):has(.authenticator-setup-banner) .lpx-content-container {
    padding-top: calc(var(--spw-env-offset) + 2 * var(--spw-top-banner-height));
}
body:has(.host-impersonation-banner):has(.authenticator-setup-banner) .chat-expanded {
    top: calc(var(--spw-env-offset) + 2 * var(--spw-top-banner-height)) !important;
}
/* --------------------------------------------------------------------------- */
/* PBI 9400: Active/Scheduled Assignments grids — top-align cells so a Description
   expanded via Show more grows the row DOWNWARD instead of centering the other
   cells in a tall row. Scoped to these grids via the spw-assignment-grid marker
   class on the DataGrid; !important overrides the LeptonX default of middle. */
.spw-assignment-grid td {
    vertical-align: top !important;
}
/* --------------------------------------------------------------------------- */
/* PBI 10280: Training Import wizard — LAYOUT ONLY. Surfaces come from Blazorise
   Card / Bootstrap .card so they follow the active LeptonX theme. Do NOT set a
   background/border here: LeptonX resolves --bs-*-bg to LIGHT values even under
   the dark theme, so any painted surface renders light-on-dark. HRSync avoids
   this the same way (its upload markup carries no custom surface CSS at all). */
.training-import-upload {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.training-import-upload .ti-upload-icon {
    font-size: 2.75rem;
    color: var(--bs-primary, #0d6efd);
    margin-bottom: .75rem;
}
.training-import-upload .form-control {
    max-width: 380px;
    margin: 0 auto;
}
.training-import-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.training-import-stat {
    text-align: center;
    padding: 1.25rem 1rem;
}
.training-import-stat .ti-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.training-import-stat .ti-stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: .35rem;
}
.training-import-stat.ti-imported .ti-stat-value { color: var(--bs-success, #198754); }
.training-import-stat.ti-skipped  .ti-stat-value { color: var(--bs-warning, #ffc107); }
.training-import-stat.ti-errors   .ti-stat-value { color: var(--bs-danger, #dc3545); }
.training-import-stat.ti-failed   .ti-stat-value { color: var(--bs-danger, #dc3545); }
/* PBI 9586: Policy Packages generator — topic picker + selection sidebar + stepper.
   Scoped under .spw-pp; colors lean on Bootstrap CSS variables (with fallbacks) so
   they follow the LeptonX light/dark surfaces instead of hardcoding a palette.
   Lives here because .razor.css is inert in this app (see root CLAUDE.md). */

/* WHY: this file's own global `.row { --bs-gutter-x: 0rem !important }` (above) strips
   Bootstrap column gutters app-wide, which left the topic cards and the selection sidebar
   touching edge-to-edge. Restore the stock gutter for this page only — higher specificity
   (+ !important) wins; the global zero-gutter stays untouched (unknown blast radius). */
.spw-pp .row {
    --bs-gutter-x: 1.5rem !important;
}
.spw-pp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.spw-pp-hero-title {
    font-weight: 700;
    margin-bottom: .25rem;
}
.spw-pp-hero-sub {
    max-width: 46rem;
    margin-bottom: 0;
}
.spw-pp-stepper {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: var(--bs-body-bg, #fff);
}
.spw-pp-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    padding: 0;
    color:  #6c757d;
    font-weight: 600;
}
.spw-pp-step:disabled {
    cursor: default;
}
.spw-pp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #e9ecef);
    font-size: .85rem;
}
.spw-pp-step.is-active,
.spw-pp-step.is-done {
    color: var(--bs-body-color, #212529);
}
.spw-pp-step.is-active .spw-pp-step-num,
.spw-pp-step.is-done .spw-pp-step-num {
    background: var(--bs-primary, #4f46e5);
    color: #fff;
}
.spw-pp-step-line {
    width: 2.5rem;
    height: 1px;
    background: var(--bs-border-color, #dee2e6);
}
/* Authority-bucket switcher (PBI 10788): one segment per bucket, one panel shown at a time.
   Borrows the stepper's chrome above so the two control strips read as one family. */
.spw-pp-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.spw-pp-bucket {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: var(--bs-body-bg, #fff);
    color: #6c757d;
    font-weight: 600;
}
.spw-pp-bucket .spw-pp-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    font-size: .7rem;
}
.spw-pp-bucket.is-active {
    color: var(--bs-body-color, #212529);
    border-color: var(--bs-primary, #4f46e5);
    box-shadow: inset 0 0 0 1px var(--bs-primary, #4f46e5);
}
/* WHY still clickable, not disabled: an empty bucket is deliberately visible so the user can see
   what is planned (PBI 10788 AC 4) — muting it must not read as a loading failure. */
.spw-pp-bucket.is-empty .spw-pp-avatar {
    opacity: .45;
}
.spw-pp-bucket-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    font-size: .75rem;
}
.spw-pp-bucket-soon {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg, #e9ecef);
    color: #6c757d;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
/* WHY: !important — LeptonX gives .card its own bottom margin, which stacked with the
   utility margin and pushed the authority cards ~2.5rem apart. One tight gap, owned here. */
.spw-pp .spw-pp-authority {
    margin-bottom: .75rem !important;
}
.spw-pp-authority-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.spw-pp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.spw-pp-authority-title {
    flex: 1 1 auto;
    min-width: 0;
}
.spw-pp-authority-name {
    font-size: 1.15rem;
    font-weight: 700;
}
.spw-pp-authority-sub {
    font-size: .85rem;
}
.spw-pp-pill {
    padding: .3rem .75rem;
    border-radius: 2rem;
    background: rgba(79, 70, 229, .1);
    color: var(--bs-primary, #4f46e5);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.spw-pp-filter {
    margin-bottom: .75rem;
}
/* The topic list is a Blazorise DataGrid (PBI 10788). The .spw-pp-topics flex column and the
   .spw-pp-topic <label> row it laid out went with it; only the selected highlight survives, moved onto
   the grid row via RowStyling. .spw-pp-topic-name / .spw-pp-badge below are still used, in the cell. */
.spw-pp-topic-grid .form-check-input {
    margin: 0;
}
/* WHY the Bootstrap variables and not a plain `tr:hover { background }` rule: .table-hover paints a
   hovered row through BOTH --bs-table-hover-bg and --bs-table-hover-color, and the stock pair is a
   light band with dark text. Overriding only the background leaves the text recoloured for a
   background that is no longer there, which is unreadable on the dark theme. Setting the variables
   also survives Bootstrap's move from --bs-table-accent-bg (5.2) to --bs-table-bg-state (5.3),
   which a hand-written cell rule would not.
   The two tints share one hue -- the --bs-primary indigo the stepper, the Continue button and the
   bucket accents already use -- and differ only in alpha, so selected stays visibly stronger than
   hover instead of the two competing. */
.spw-pp-topic-grid .table {
    --bs-table-hover-bg: rgba(79, 70, 229, .18);
    --bs-table-hover-color: var(--bs-body-color, #212529);
}
.spw-pp-topic-grid tr.is-selected > td {
    background: rgba(79, 70, 229, .32);
}
.spw-pp-topic-name {
    flex: 1 1 auto;
    font-weight: 500;
    min-width: 0;
}
.spw-pp-badge {
    padding: .15rem .5rem;
    border-radius: .35rem;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Per-authority accent — one class drives avatar, badge, and sidebar dot colors. */
.spw-pp-accent--fedosha { background: #1e293b; }
.spw-pp-accent--stateosha { background: #4f46e5; }
.spw-pp-accent--isnetworld { background: #7c3aed; }
.spw-pp-accent--avetta { background: #ea580c; }
/* WHY: no sticky/top on .spw-pp-selection — it must stay flush beside the first authority
   card at every scroll position (user decision). Sticky pinned it 5.5rem from the viewport
   and made it visually detach on scroll; and LeptonX dim.css forces .card position:relative
   anyway, which turns a lingering `top` into an 88px downward shift (measured, headless). */
.spw-pp-selection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.spw-pp-kicker {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.spw-pp-kicker--topics {
    display: block;
    margin: 1rem 0 .5rem;
}
.spw-pp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--bs-primary, #4f46e5);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}
.spw-pp-sel-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
}
.spw-pp-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 2px;
    flex-shrink: 0;
}
.spw-pp-sel-name {
    flex: 1 1 auto;
}
.spw-pp-sel-count {
    font-weight: 600;
}
.spw-pp-chips {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.spw-pp-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .4rem;
}
.spw-pp-chip-name {
    flex: 1 1 auto;
    font-size: .9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spw-pp-chip-remove {
    border: 0;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .2rem;
}
.spw-pp-chip-remove:hover {
    color: var(--bs-danger, #dc3545);
}
.spw-pp-step-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.spw-pp-pill--success {
    background: rgba(25, 135, 84, .12);
    color: var(--bs-success, #198754);
}
/* Branding step: logo dropzone (PolicySources pattern) + live preview, side by side. */
.spw-pp-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.spw-pp-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    height: 100%;
    padding: 1.75rem 1.5rem;
    border: 2px dashed rgba(148, 163, 184, 0.45);
    border-radius: .75rem;
    background-color: rgba(148, 163, 184, 0.06);
    transition: border-color .15s ease, background-color .15s ease;
    cursor: pointer;
}
.spw-pp-dropzone:hover,
.spw-pp-dropzone.is-dragover {
    border-color: rgba(99, 126, 250, 0.85);
    background-color: rgba(99, 126, 250, 0.10);
}
/* Transparent file input covers the whole zone so native click-to-browse AND drop both work. */
.spw-pp-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.spw-pp-dropzone-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(148, 163, 184, 0.9);
    margin-bottom: .9rem;
    transition: color .15s ease;
}
.spw-pp-dropzone:hover .spw-pp-dropzone-icon,
.spw-pp-dropzone.is-dragover .spw-pp-dropzone-icon {
    color: rgba(99, 126, 250, 0.95);
}
.spw-pp-dropzone-title {
    font-weight: 700;
    margin-bottom: .35rem;
}
.spw-pp-dropzone-subtext {
    font-size: .9rem;
    opacity: .7;
    max-width: 320px;
    margin-bottom: 1rem;
}
.spw-pp-dropzone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.spw-pp-dropzone-chip {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .75rem;
    letter-spacing: .02em;
    opacity: .75;
    background-color: rgba(148, 163, 184, 0.15);
    border-radius: .4rem;
    padding: .25rem .6rem;
}
.spw-pp-logo-preview {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    height: 100%;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: var(--bs-body-bg, #fff);
}
.spw-pp-logo-preview .spw-pp-kicker {
    margin-bottom: .75rem;
}
.spw-pp-logo-preview-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .9rem;
}
.spw-pp-logo-preview-img {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: .75rem;
    border-radius: .5rem;
    background-color: rgba(148, 163, 184, 0.08);
    margin-bottom: .85rem;
}
.spw-pp-logo-preview-img img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}
.spw-pp-logo-preview-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.spw-pp-logo-preview-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    word-break: break-all;
}
.spw-pp-logo-preview-size {
    font-size: .8rem;
    white-space: nowrap;
}
/* Review step: sectioned single card — icon section heads, name box, logo panel with an
   inline change-logo upload tile (transparent-InputFile overlay), and topic rows. */
.spw-pp-review-section-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.spw-pp-review-section-head-centered {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.spw-pp-review-section-head--topics {
    align-items: center;
    margin: 1.75rem 0 1rem;
}
.spw-pp-review-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background: rgba(79, 70, 229, .1);
    color: var(--bs-primary, #4f46e5);
    font-size: 1.15rem;
}
.spw-pp-review-section-main {
    flex: 1 1 auto;
    min-width: 0;
}
.spw-pp-review-section-title {
    font-weight: 700;
    font-size: 1.1rem;
}
.spw-pp-review-section-sub {
    font-size: .9rem;
}
.spw-pp-review-divider {
    margin: 1.25rem 0 1.5rem;
    opacity: .12;
}
.spw-pp-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.spw-pp-review-field-label {
    font-weight: 600;
    margin-bottom: .5rem;
}
.spw-pp-review-name-box {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
}
.spw-pp-review-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    background: rgba(79, 70, 229, .1);
    color: var(--bs-primary, #4f46e5);
}
.spw-pp-review-name {
    font-weight: 600;
}
.spw-pp-review-field-help {
    font-size: .85rem;
    margin-top: .5rem;
}
.spw-pp-review-logo-panel {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    overflow: hidden;
}
.spw-pp-review-logo-thumb {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    background-color: rgba(148, 163, 184, 0.08);
}
.spw-pp-review-logo-thumb img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}
.spw-pp-review-logo-change {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    cursor: pointer;
    transition: background-color .15s ease;
}
.spw-pp-review-logo-change:first-child {
    border-left: 0;
    min-height: 130px;
}
.spw-pp-review-logo-change:hover {
    background-color: rgba(79, 70, 229, .06);
}
.spw-pp-review-logo-change-text {
    min-width: 0;
}
.spw-pp-review-logo-change-title {
    display: block;
    font-weight: 600;
}
.spw-pp-review-logo-change-sub {
    display: block;
    font-size: .8rem;
}
.spw-pp-review-logo-filemeta {
    margin-top: .6rem;
}
.spw-pp-review-logo-filename {
    font-size: .875rem;
    word-break: break-all;
}
.spw-pp-review-logo-filesize {
    font-size: .8rem;
}
.spw-pp-review-topic {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    margin-bottom: .6rem;
}
.spw-pp-review-topic-main {
    flex: 1 1 auto;
    min-width: 0;
}
.spw-pp-review-topic-name {
    font-weight: 600;
}
.spw-pp-review-topic-sub {
    font-size: .8rem;
}
.spw-pp-review-topic-remove {
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 .2rem;
    color: #6c757d;
}
.spw-pp-review-topic-remove:hover {
    color: var(--bs-danger, #dc3545);
}
@media (max-width: 991.98px) {
    .spw-pp-selection {
        margin-top: 1rem;
    }
    .spw-pp-logo-grid {
        grid-template-columns: 1fr;
    }
    .spw-pp-review-grid {
        grid-template-columns: 1fr;
    }
}
/* --------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------- */
/* Pre-visit briefing section cards (PBI 9606) — BriefingView.razor.
   Global bundle on purpose: .razor.css is inert in this app (see root CLAUDE.md).
   Contrast tokens mirror the Program Builder (SafetyAnalysisResultComponent.razor):
   --lpx-card-title-text-color for strong text, #dee2e6 borders, card shadow. */
/* WHY !important + .card qualifier: LeptonX declares the card border via --bs-card-border-*
   vars on .card itself; a bare one-class rule loses to the theme bundle. */
.card.spw-briefing-section-card {
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: .5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.spw-briefing-section-header {
    background: var(--lpx-card-bg, var(--bs-card-bg, #fff));
    padding: .9rem 1.25rem;
    /* !important for the same LeptonX reason as the card border above. */
    border-bottom: 1px solid var(--bs-border-color, #dee2e6) !important;
    padding: 16px 24px 10px!important
}
.spw-briefing-section-header h5 {
    color: var(--lpx-card-title-text-color, #212529);
    margin-bottom: 0;
    line-height: 1.2;
}
.spw-briefing-collapse-toggle {
    color: var(--lpx-card-title-text-color, #495057);
    line-height: 1;
}
.spw-briefing-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    background: #f7e8b8;
    color: #6f5410;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.spw-briefing-stat-value {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--lpx-card-title-text-color, #212529);
}
.spw-briefing-stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lpx-text-muted, #495057);
    white-space: nowrap;
}
.spw-briefing-body-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem 1.5rem;
}
.spw-briefing-stat-notice {
    grid-column: 1 / -1;
    font-size: .82rem;
    padding: .35rem .6rem;
    background: var(--lpx-card-bg-secondary, #f8f9fa);
    border-radius: .25rem;
    display: flex;
    align-items: center;
}
.spw-briefing-ai-summary {
    background: var(--bs-secondary-bg, #eef0fb);
    border-left: 4px solid var(--lpx-secondary, #5b4bc4);
    padding: .9rem 1.25rem;
}
.spw-briefing-ai-summary-label {
    color: var(--lpx-secondary, #4a3ab8);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.spw-briefing-ai-summary-label::before {
    content: "\2726";
    margin-right: .4rem;
}
.spw-briefing-ai-summary ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}
.spw-briefing-ai-summary li {
    margin-bottom: .25rem;
    color: var(--bs-body-color, #212529);
}
.spw-briefing-item-row {
    padding: .75rem 0;
}
.spw-briefing-item-row + .spw-briefing-item-row {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.spw-briefing-item-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--lpx-card-title-text-color, #212529);
}
.spw-briefing-item-title a {
    color: inherit;
    text-decoration: none;
}
.spw-briefing-item-title a:hover {
    text-decoration: underline;
}
.spw-briefing-item-meta {
    font-size: .875rem;
    color: var(--lpx-text-muted, #495057);
    margin-top: .15rem;
}
.spw-briefing-manual-add-btn {
    display: block;
    width: 100%;
    border: 1px dashed var(--bs-border-color, #adb5bd);
    border-radius: .5rem;
    background: transparent;
    color: var(--lpx-text-muted, #495057);
    font-weight: 500;
    padding: .6rem;
    text-align: center;
}
.spw-briefing-manual-add-btn:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
}
@media (max-width: 767.98px) {
    .spw-briefing-header-stats {
        display: none !important;
    }

    /* WHY (Bug 10426): on mobile LeptonX pins .lpx-footbar-container at
       position: fixed; bottom: 72px; z-index: 101 — sitting ON TOP of the
       content area. Without extra padding the bottom ~30px of every page's
       content is hidden behind this fixed footer band and unreachable (taps
       land on the footer links, not the page content beneath).
       padding-bottom pushes scrollable content above the footer on ALL pages. */
    .lpx-content {
        padding-bottom: 30px !important;
    }

    /* WHY: the 30px clearance above is only correct if the footer height is
       PREDICTABLE. Without nowrap each link wraps internally (measured 120px
       on a phone). white-space: nowrap collapses the footer to a single
       30px line-height at every width from 320px to 430px.
       min-width: 0 is equally load-bearing — without it the flex chain
       refuses to shrink and the footbar overflows.
       The > combinator is deliberate: .lpx-footbar-container carries other
       .d-flex descendants (BackgroundJobProgressBar) that must not be caught. */
    .lpx-footbar-container .lpx-footbar > .d-flex,
    .lpx-footbar-container .lpx-footbar-solo-links {
        min-width: 0;
    }

    .lpx-footbar-container .lpx-footbar-solo-links {
        overflow-x: auto;
    }

    .lpx-footbar-container .lpx-footbar-solo-links a {
        white-space: nowrap;
    }
}

/* WHY (Bug 11346): the Bug 10426 rules above stop at 767.98px, but with the sidebar open the
   footbar is only a few hundred CSS px wide well past that. There LeptonX let every link wrap
   internally ("What's / New"), truncated the copyright with an ellipsis, and left the fixed
   back-to-top button (inline default bottom: 35px; right: 75px) on top of the last link, because
   the footbar is right: 72px and about 32px tall. Same mechanism as the phone block: links stay on
   one line and scroll inside their own box when they do not fit, and the copyright never shrinks.
   Duplicated rather than hoisted so the Bug 10426 phone guard keeps pinning its own block.
   The button selector carries .lpx-footbar so it outranks the inline #backToTopButton rule in
   MainFooterComponent.razor, which is emitted later in the document.
   Classic (non-overlay) scrollbars, the Windows default, add height to the links box when it
   overflows: scrollbar-width: thin keeps that small, and the button's 56px offset covers the
   32px footbar plus a full classic scrollbar (about 17px) with a gap. macOS overlay scrollbars
   add nothing, so this cannot be seen there. */
@media (min-width: 768px) {
    .lpx-footbar-container .lpx-footbar > .d-flex,
    .lpx-footbar-container .lpx-footbar-solo-links {
        min-width: 0;
    }

    .lpx-footbar-container .lpx-footbar-solo-links {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .lpx-footbar-container .lpx-footbar-solo-links a {
        white-space: nowrap;
    }

    .lpx-footbar-container .lpx-footbar-copyright {
        flex-shrink: 0;
    }

    .lpx-footbar-container .lpx-footbar #backToTopButton {
        bottom: 56px;
    }
}
/* --------------------------------------------------------------------------- */

/* WHY: PdfViewerContainer had a fixed Height.Rem(35) inline style that overflowed
   phone screens. Height now lives here so both viewports are controlled in one place. */
.file-preview-modal .modal-body > div:first-child {
    height: 35rem;
}

/* WHY: FilePreviewModal footer (Close / Download) is pushed below the viewport on
   phone-sized screens, making the only close affordance unreachable. Fullscreen
   layout pins header + footer and lets the body scroll. PBI 9938. */
@media (max-width: 575.98px) {
    .file-preview-modal .modal-dialog {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .file-preview-modal .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .file-preview-modal .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
    }

    .file-preview-modal .modal-body > div:first-child {
        height: calc(100vh - 10rem);
    }
}

/************* CUSTOM CODE ENDS ********************/