/* Ombre Left Menu (Theme Settings → Left Menu → Menu Style = "Ombre")
 *
 * Activates via body.menu-style-ombre, set in sas_base.html.twig from
 * organization themeSettings.MenuStyle. The gradient colors come from
 * themeSettings.LeftMenuGradientStart / LeftMenuGradientEnd (emitted as
 * --bit-menu-grad-start / --bit-menu-grad-end); the foot of the rail is
 * deepened toward black so the ombre reads like the app-chrome-frosted-d
 * mockup. Text, icon and active colors stay on the existing Left Menu
 * theme settings — pick light colors there when using a dark gradient.
 *
 * Classic style (default) is untouched: without the body class every rule
 * here is inert. Delete this file + the app.js import to fully revert
 * (backups: sas_base.html.twig.bak, left-menu.css.bak).
 */

body.menu-style-ombre #leftMenu {
    background: linear-gradient(
        180deg,
        var(--bit-menu-grad-start, #2674a6) 0%,
        color-mix(in srgb, var(--bit-menu-grad-start, #2674a6), var(--bit-menu-grad-end, #112a54) 60%) 45%,
        var(--bit-menu-grad-end, #112a54) 75%,
        color-mix(in srgb, var(--bit-menu-grad-end, #112a54), black 45%) 100%
    );
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 4px 0 24px rgba(17, 42, 84, 0.25);
}

/* Keep the gradient anchored while the menu scrolls its items */
body.menu-style-ombre #leftMenu {
    background-attachment: local;
}

/* ---- Full-page ombre backdrop (mockup body background) ----
   The mockup paints ONE gradient across the whole viewport and every panel
   floats on it as glass. The app used to get this only from .frosted-listing's
   own backdrop inside the middle panel; lift it to the body so the rail,
   header and content gutters all share it. The body never scrolls (#mainContent
   does), so fixed attachment just keeps the radials viewport-anchored. */
body.menu-style-ombre {
    background:
        radial-gradient(1100px 620px at 8% 112%, #7cc5ff7a, transparent 60%),
        radial-gradient(1000px 700px at 100% 100%, #7cc5ff52, transparent 55%),
        radial-gradient(900px 640px at 50% 135%, #58e2c25e, transparent 55%),
        linear-gradient(180deg, #fbfdff 0%, #e9f1fb 28%, #c9d8ef 58%, #9db8dd 82%, #7e9cc9 100%);
    background-attachment: fixed;
}

/* Blurred corner glow blobs (mockup body::before/::after) */
body.menu-style-ombre::before,
body.menu-style-ombre::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

body.menu-style-ombre::before {
    width: 340px;
    height: 340px;
    left: -60px;
    bottom: 80px;
    background: radial-gradient(circle, #5eb8ff88, transparent 70%);
}

body.menu-style-ombre::after {
    width: 420px;
    height: 420px;
    right: -90px;
    bottom: -40px;
    background: radial-gradient(circle, #5eb8ff66, transparent 70%);
}

/* The grid (main) and the listing wrapper sit ON the body gradient now —
   .frosted-listing keeps its glass cards/blobs-free layout but stops painting
   its own separate backdrop (that's what made the ombre look like a
   middle-panel-only effect). Classic mode keeps the frosted-listing backdrop. */
body.menu-style-ombre main {
    background: transparent;
}

body.menu-style-ombre .frosted-listing {
    background: none;
}

body.menu-style-ombre .frosted-listing::before,
body.menu-style-ombre .frosted-listing::after {
    display: none;
}

/* Floating rounded rail, like the mockup's sidenav card (desktop only —
   below 769px the menu becomes the mobile drawer and stays square). */
@media (min-width: 769px) {
    body.menu-style-ombre #leftMenu {
        margin: 12px 6px 14px 12px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 16px 40px rgba(17, 42, 84, 0.35), 0 2px 6px rgba(17, 42, 84, 0.2);
    }

    /* Collapsed icon strip: keep the float but slim the side gaps */
    body.menu-style-ombre main.menu-collapsed #leftMenu {
        margin: 12px 4px 14px 8px;
        border-radius: 16px;
    }
}

/* ---- Chevrons: match the mockup's rail arrows ----
   Same glyph + 90° open rotation as classic, but light on the dark glass:
   half-white at rest, full white on hover and while the group is open
   (classic forces the org's dark text color + a dark slate hover). */
body.menu-style-ombre #leftMenu .toggle-arrow {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.menu-style-ombre #leftMenu .toggle-arrow::after,
body.menu-style-ombre #leftMenu button.sub-menu-toggle-group.toggle-arrow::after,
body.menu-style-ombre #leftMenu .menu-toggler button.toggle-arrow::after {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

body.menu-style-ombre #leftMenu .toggle-arrow:hover::after {
    color: #ffffff !important;
}

body.menu-style-ombre #leftMenu .toggle-arrow.toggler-active::after {
    color: #ffffff !important;
}

/* Open group header: white text on a soft white tint (classic tints it with
   the org's hover color, which is dark-on-dark here) */
body.menu-style-ombre #leftMenu .toggle-arrow.toggler-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* The classic style paints every list item and section header with the solid
   LeftMenuBg color — that overpaints the gradient, leaving it visible only in
   the gaps (pin area, dividers, footer). Let the rail show through instead. */
body.menu-style-ombre #leftMenu li,
body.menu-style-ombre #leftMenu li.menu-section-header,
body.menu-style-ombre #leftMenu ul.nav {
    background: transparent !important;
}

/* Top header: light glass bar over the body ombre (mockup .glass topbar) —
   translucent so the page gradient shows through it like the rail's glass. */
body.menu-style-ombre #topHeader {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 10px 30px rgba(17, 42, 84, 0.14), 0 2px 6px rgba(17, 42, 84, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}

/* ---- Mockup chrome layout: full-height rail + header card beside it ----
   The mockup grid is "sidenav topbar / sidenav content"; the app default is
   "topHeader topHeader / leftMenu mainContent". Swap the areas in ombre mode
   (desktop only — mobile keeps its drawer layout), so the rounded rail owns
   the left edge with the brand inside it (.ombre-brand in sas_base). */
@media (min-width: 769px) {
    body.menu-style-ombre main {
        grid-template-areas:
            "leftMenu topHeader"
            "leftMenu mainContent";
        /* The rail's float margins (12px left + 6px right) would otherwise eat
           into the theme's MenuWidth and wrap long labels ("Document Center");
           widen the column so the rail keeps its full usable width.
           minmax(0,1fr): see the main grid rule in sas_base. */
        grid-template-columns: calc(var(--bit-menu-width, 240px) + 18px) minmax(0, 1fr);
    }

    /* Collapsed strip: same compensation for its slimmer margins (8px + 4px) */
    body.menu-style-ombre main.menu-collapsed {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    /* The header becomes its own rounded glass card beside the rail */
    body.menu-style-ombre #topHeader {
        margin: 12px 12px 0 6px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.7);
    }

    /* Content column: inset from the bottom and right so the listing panels
       end level with the rail (rail margin-bottom is 14px) and share the
       header's 12px right gutter — the three floating pieces stay aligned. */
    body.menu-style-ombre #mainContent {
        margin: 0 12px 14px 0;
    }

    /* Brand moved into the rail — hide the header's logo column (only when a
       rail actually renders; menu-less pages keep their header logo).
       !important: left-menu.css pins the column open with display:flex
       !important, which otherwise leaves its border-right divider floating
       as a stray vertical line beside the header glyph. */
    body.menu-style-ombre main:has(#leftMenu) #topHeader #orgTitleContainer {
        display: none !important;
    }
}

/* ---- Brand row inside the rail (mockup .brand / .logo-chip / .pin) ---- */
body.menu-style-ombre #leftMenu .ombre-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 6px;
    flex-shrink: 0;
}

body.menu-style-ombre #leftMenu .ombre-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

body.menu-style-ombre #leftMenu .ombre-logo-chip img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

body.menu-style-ombre #leftMenu .ombre-logo-text {
    color: var(--bit-menu-grad-end, #112a54);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px;
    text-align: center;
}

/* Pin button restyled for the dark rail (mockup .pin) */
body.menu-style-ombre #leftMenu .menu-collapse-btn {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.menu-style-ombre #leftMenu .menu-collapse-btn i,
body.menu-style-ombre #leftMenu .menu-collapse-btn:hover i {
    color: inherit !important;
}

body.menu-style-ombre #leftMenu .menu-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
}

/* Collapsed strip: hide the chip, center the pin (mockup collapsed brand) */
body.menu-style-ombre main.menu-collapsed #leftMenu .ombre-logo-chip {
    display: none;
}

body.menu-style-ombre main.menu-collapsed #leftMenu .ombre-brand {
    justify-content: center;
    padding: 12px 8px;
}

body.menu-style-ombre main.menu-collapsed #leftMenu .menu-collapse-btn {
    margin-left: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bit-menu-grad-end, #112a54) !important;
}

/* Section dividers / hairlines read better translucent on a gradient */
body.menu-style-ombre #leftMenu hr,
body.menu-style-ombre #leftMenu li.menu-divider-above::before {
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

/* ---- Light-on-dark text (the mockup treatment) ----
   The classic style paints text with the org's Left Menu colors via
   !important — typically dark values that vanish on the gradient. Ombre mode
   is a dark rail by design, so it brings its own text colors: translucent
   white items, white on hover, and the frosted white active pill with the
   gradient colors for text/icon (app-chrome-frosted-d). */
body.menu-style-ombre #leftMenu .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.menu-style-ombre #leftMenu .nav-link i {
    color: rgba(255, 255, 255, 0.75) !important;
}

body.menu-style-ombre #leftMenu .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

body.menu-style-ombre #leftMenu .nav-link:hover i {
    color: #ffffff !important;
}

/* Active item: frosted white pill popping off the dark glass */
body.menu-style-ombre #leftMenu .nav-link.active {
    color: var(--bit-menu-grad-end, #112a54) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

body.menu-style-ombre #leftMenu .nav-link.active i {
    color: var(--bit-menu-grad-start, #2674a6) !important;
}

/* ---- Item geometry: the mockup's taller pill + 12px radius ----
   Classic packs items tight (padding:5px 12px; margin:0 8px; radius:8px);
   the mockup rail breathes: .nav-link{padding:9px 13px; margin:2px 12px;
   border-radius:12px} — ~37px tall instead of ~27px. Active and idle share
   one rule (both are .nav-link) so the white pill can't drift out of step.
   Font size deliberately stays on the org's Menu Font Size setting rather
   than the mockup's hard-coded .86rem.
   Expanded only: the collapsed strip keeps its 40x30 icon square. */
body.menu-style-ombre main:not(.menu-collapsed) #leftMenu .nav-link {
    padding: 9px 13px;
    margin: 2px 12px;
    border-radius: 12px;
}

/* Submenu items (mockup .submenu .nav-link{padding:6px 13px 6px 40px;
   margin:1px 12px; radius:12px}). Vertical padding and radius only — the
   34px left indent stays as classic trimmed it (40 -> 34) so long labels
   like "Document Center" keep to one line. !important beats the classic
   rule, which sets padding/margin the same way. */
body.menu-style-ombre main:not(.menu-collapsed) #leftMenu .menu-toggler ul .nav-link {
    padding: 6px 10px 6px 34px !important;
    margin: 1px 0 !important;
    border-radius: 12px;
}

body.menu-style-ombre main:not(.menu-collapsed) #leftMenu .menu-level-3 {
    padding: 6px 10px 6px 50px !important;
}

/* Line the submenu pills up with the top-level ones (12px inset, was 10px) */
body.menu-style-ombre main:not(.menu-collapsed) #leftMenu .menu-toggler ul {
    padding: 2px 12px;
}

/* Open group headers stay bright while their submenu is out */
body.menu-style-ombre #leftMenu .toggle-arrow.toggler-active,
body.menu-style-ombre #leftMenu .sub-menu-toggle-group.toggler-active,
body.menu-style-ombre #leftMenu .toggle-arrow.toggler-active > i,
body.menu-style-ombre #leftMenu .sub-menu-toggle-group.toggler-active > i {
    color: #ffffff !important;
}

/* Section labels ("MANAGE") and hairlines: translucent white on the rail */
body.menu-style-ombre #leftMenu li.menu-section-header .menu-section-label-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.menu-style-ombre #leftMenu li.menu-section-header::before {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Collapsed-mode flyout panels: paint the SAME gradient as the rail (see the
   body.menu-style-ombre #leftMenu rule at the top) so the flyout reads as a
   piece of the menu it flew out of, not a flat grey card.
   (.menu-collapsed lives on <main>, not <body> — see menu_collapse_controller.) */
body.menu-style-ombre main.menu-collapsed #leftMenu .menu-toggler {
    background: linear-gradient(
        180deg,
        var(--bit-menu-grad-start, #2674a6) 0%,
        color-mix(in srgb, var(--bit-menu-grad-start, #2674a6), var(--bit-menu-grad-end, #112a54) 60%) 45%,
        var(--bit-menu-grad-end, #112a54) 75%,
        color-mix(in srgb, var(--bit-menu-grad-end, #112a54), black 45%) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Flyout title ("MY DOCUMENTS"): same translucent white as the expanded
   rail's section labels, not the classic light-panel gray. */
body.menu-style-ombre main.menu-collapsed #leftMenu .menu-toggler > .flyout-title {
    color: rgba(255, 255, 255, 0.5);
}

/* Flyout item hover: the base collapsed rule paints the org's light-panel
   accent (dark text on a pale tint) — on the dark glass use the same white
   tint + white text as the expanded rail's hover. */
body.menu-style-ombre main.menu-collapsed #leftMenu .menu-toggler ul .nav-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body.menu-style-ombre main.menu-collapsed #leftMenu .menu-toggler ul .nav-link:hover i {
    color: #ffffff !important;
}

/* Parent icon square while its flyout is open: white tint, matching the
   rail's hover (base rule uses the org's light-panel accent). */
body.menu-style-ombre main.menu-collapsed #leftMenu > ul.nav > li:hover > .toggle-arrow {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* 3rd-level flyout divider: white hairline instead of the light-panel black */
body.menu-style-ombre main.menu-collapsed #leftMenu .menu-toggler .menu-toggler {
    border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* ============================================================
   TOP HEADER CONTENTS — mockup topbar treatment
   (page title, search, quick chips, cart/user as frosted chips)
   ============================================================ */

/* Compact mockup title block: 1.15rem/800 with a quiet sub line */
body.menu-style-ombre #topHeader .header-title {
    /* matches the old .page-head-hero title it replaced */
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #12233b;
    letter-spacing: -0.01em;
}

body.menu-style-ombre #topHeader .header-subtitle {
    font-size: 0.72rem;
    color: #41597a;
    font-weight: 500;
}

/* With the logo column gone the header needs its own left inset */
@media (min-width: 769px) {
    body.menu-style-ombre #topHeader {
        padding: 10px 16px;
        min-height: 66px;
    }
}

/* Student search: frosted rounded field with the mockup focus ring */
body.menu-style-ombre #topHeader .header-student-search .form-floating > .form-control,
body.menu-style-ombre #topHeader #header-student-search {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(17, 42, 84, 0.14) !important;
    border-radius: 12px !important;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.menu-style-ombre #topHeader #header-student-search:focus {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: #8fc4ec !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bit-menu-grad-start, #2674a6) 16%, transparent) !important;
}

body.menu-style-ombre #topHeader .header-student-search .bi-search {
    color: #7488a3;
}

/* Quick access buttons (Customers / Calendar) -> SAME chip family as the
   cart button (mockup .iconbtn): identical glass chip, identical icon size
   and color, so the three far-right icons read as one set. */
body.menu-style-ombre #topHeader .btn-quick-access {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(17, 42, 84, 0.12);
    border-radius: 11px;
    color: #41597a;
    box-shadow: 0 2px 6px rgba(17, 42, 84, 0.08);
}

body.menu-style-ombre #topHeader .btn-quick-access i {
    color: var(--bit-menu-grad-start, #2674a6);
}

body.menu-style-ombre #topHeader .btn-quick-access:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #12233b;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(17, 42, 84, 0.14);
}

body.menu-style-ombre #topHeader .btn-quick-access:hover i {
    color: var(--bit-menu-grad-end, #112a54);
}

/* Cart + user menu: same chip family (mockup .iconbtn) */
body.menu-style-ombre #topHeader .btn-cart,
body.menu-style-ombre #topHeader .btn-user {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(17, 42, 84, 0.12);
    border-radius: 11px;
    color: #41597a;
    box-shadow: 0 2px 6px rgba(17, 42, 84, 0.08);
}

body.menu-style-ombre #topHeader .btn-cart i,
body.menu-style-ombre #topHeader .btn-user i {
    color: var(--bit-menu-grad-start, #2674a6);
}

body.menu-style-ombre #topHeader .btn-cart:hover,
body.menu-style-ombre #topHeader .btn-user:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #12233b;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(17, 42, 84, 0.14);
}

/* ---- Consolidated page head (listing pages) ----
   The hero's glyph + title + count move into the top header; the in-page
   .page-head-hero keeps only its action buttons as a slim right-aligned
   strip (no more duplicate glass panel under the header). */
/* Bare icon beside the title — no gradient chip behind it; tinted with the
   primary color so it reads on the light glass bar. */
/* Gradient icon tile — same recipe as the listing Apply/Reset buttons
   (frosted-listing.css .btn-reset-filters): brand gradient, white hairline,
   blue glow. Uses the theme gradient vars, which default to the same colors. */
body.menu-style-ombre #topHeader .header-glyph {
    /* mockup .page-head .glyph: 50px tile, 1.35rem icon, 15px radius */
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: inline-grid;
    place-items: center;
    color: #ffffff !important;
    font-size: 1.35rem;
    background-image: linear-gradient(135deg, var(--bit-menu-grad-start, #2674a6), var(--bit-menu-grad-end, #112a54)) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    /* tight shadow: the title container clips overflow (ellipsis), so the
       Apply-button 20px blur got sliced into a hard edge here */
    box-shadow: 0 1px 4px rgba(17, 42, 84, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    margin-right: 8px;
}

body.menu-style-ombre #topHeader .header-glyph i {
    color: #ffffff !important;
}

body.menu-style-ombre #topHeader .header-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bit-menu-grad-end, #112a54);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(17, 42, 84, 0.12);
    border-radius: 99px;
    padding: 5px 13px;
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Collapse the in-page hero to its actions only */
body.menu-style-ombre .frosted-listing .page-head-hero > .glyph,
body.menu-style-ombre .frosted-listing .page-head-hero > div:not(.hero-actions) {
    display: none !important;
}

body.menu-style-ombre .frosted-listing .page-head-hero {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 4px 2px !important;
    justify-content: flex-end;
}

/* With the "Add …" actions projected into the top header (and Download CSV in
   the pagination footer), the collapsed hero strip is empty — drop the row. */
body.menu-style-ombre .frosted-listing .page-head-hero {
    display: none !important;
}

/* ============================================================
   EXIT IMPERSONATION — soft amber pill above the user card
   (mockup .sidefoot / .exit-imp). Overrides Bootstrap's
   .btn-warning and app.css's square black-text rule, both of
   which fight the dark glass rail.
   ============================================================ */
body.menu-style-ombre #leftMenu .sidefoot {
    padding: 12px 12px 0;
}

body.menu-style-ombre #leftMenu a.exitImpersonate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #3f2d09 !important;
    text-decoration: none;
    background: rgba(253, 230, 138, 0.9);
    border: 1px solid rgba(253, 230, 138, 0.6);
    border-radius: 12px !important;
    transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* The icon/label gap comes from the flex gap; drop the markup's ms-2 */
body.menu-style-ombre #leftMenu a.exitImpersonate span {
    margin-left: 0 !important;
}

body.menu-style-ombre #leftMenu a.exitImpersonate:hover,
body.menu-style-ombre #leftMenu a.exitImpersonate:focus {
    background: #fde68a;
    border-color: rgba(253, 230, 138, 0.6);
    color: #3f2d09 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* Collapsed rail: icon only, square-ish pill (mockup .collapsed .exit-imp) */
body.menu-style-ombre main.menu-collapsed #leftMenu .sidefoot {
    padding: 12px 8px 0;
}

body.menu-style-ombre main.menu-collapsed #leftMenu a.exitImpersonate {
    padding: 10px;
    gap: 0;
}

/* ============================================================
   SIDE USER CARD — logged-in user pinned at the rail bottom
   (mockup .side-user). Replaces the top header's user menu in
   ombre chrome: avatar + name opens a drop-UP with the same
   items; the box-arrow icon logs out directly.
   ============================================================ */
body.menu-style-ombre #leftMenu .side-user-group {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* anchor for the glass drop-up */
    position: relative;
}

body.menu-style-ombre #leftMenu .side-user {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 12px 12px;
    padding: 9px 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.16s ease;
}

body.menu-style-ombre #leftMenu .side-user:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.menu-style-ombre #leftMenu .side-user-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

body.menu-style-ombre #leftMenu .side-user .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--bit-menu-grad-end, #112a54);
    font-weight: 800;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.92);
}

body.menu-style-ombre #leftMenu .side-user-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.menu-style-ombre #leftMenu .side-user .nm {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.menu-style-ombre #leftMenu .side-user .rl {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

/* open/close chevron on the card's right edge (logout moved into the menu) */
body.menu-style-ombre #leftMenu .side-user-chev {
    margin-left: auto;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}

body.menu-style-ombre #leftMenu .side-user-group.open .side-user-chev {
    transform: rotate(180deg);
}

body.menu-style-ombre #leftMenu .side-user-group.open .side-user {
    background: rgba(255, 255, 255, 0.18);
}

/* Account menu = GLASS DROP-UP in rail materials (option B in
   docs/mockups/side-user-menu-options.html): a floating dark-navy glass
   card above the user chip, with a "Name — Role" header row. */
body.menu-style-ombre #leftMenu .side-user-menu {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 8px);
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 8px;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(23, 58, 99, 0.96), rgba(10, 26, 53, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 5;
}

/* header row: who this menu belongs to */
body.menu-style-ombre #leftMenu .side-user-menu .su-hd {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 3px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.menu-style-ombre #leftMenu .side-user-menu.show {
    display: flex;
}

body.menu-style-ombre #leftMenu .side-user-menu .su-item {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 9px;
    padding: 7px 10px;
    /* !important: left-menu.css paints ALL rail anchors with the classic
       theme's LeftMenuTextColor !important (.bit-LeftMenuTextColor a) —
       unreadable slate on the dark ombre gradient */
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

body.menu-style-ombre #leftMenu .side-user-menu .su-item i {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    flex: 0 0 auto;
}

body.menu-style-ombre #leftMenu .side-user-menu .su-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

body.menu-style-ombre #leftMenu .side-user-menu .su-item.su-logout {
    color: #ffb4b4 !important;
}

body.menu-style-ombre #leftMenu .side-user-menu .su-item.su-logout:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca !important;
}

/* Collapsed strip: avatar only, centered (mockup collapsed .side-user) */
body.menu-style-ombre main.menu-collapsed #leftMenu .side-user {
    justify-content: center;
    padding: 7px;
    margin: 10px 8px 12px;
}

body.menu-style-ombre main.menu-collapsed #leftMenu .side-user-main {
    flex: 0 0 auto;
}

body.menu-style-ombre main.menu-collapsed #leftMenu .side-user-txt,
body.menu-style-ombre main.menu-collapsed #leftMenu .side-user-chev {
    display: none;
}

/* No inline menu in the icon strip: clicking the avatar expands the rail
   first (menu_collapse_controller), so the menu only ever renders expanded */
body.menu-style-ombre main.menu-collapsed #leftMenu .side-user-menu {
    display: none !important;
}

/* The header's user menu is replaced by the rail card (desktop only —
   the mobile drawer may be closed, so the header keeps it there) */
@media (min-width: 769px) {
    body.menu-style-ombre main:has(#leftMenu) #topHeader .user-menu {
        display: none !important;
    }
}

/* The frosted listing paints its own opaque backdrop inside the middle panel;
   with the ombre body backdrop behind everything that double-paints and makes
   the body look plain around it. Let the panel float transparent on the body. */
body.menu-style-ombre .frosted-listing {
    background: transparent !important;
}

body.menu-style-ombre .frosted-listing::before,
body.menu-style-ombre .frosted-listing::after {
    display: none;
}

/* Dashboard: same treatment as the frosted listing — its wrapper painted the
   backdrop inside the panel; in ombre the body owns the backdrop (higher up),
   so the dashboard floats transparent on it. Classic keeps its own backdrop. */
body.menu-style-ombre .container-fluid.dashboard-equal-cards {
    background: none;
}

body.menu-style-ombre .container-fluid.dashboard-equal-cards::before,
body.menu-style-ombre .container-fluid.dashboard-equal-cards::after {
    display: none;
}