/**
 * B2B Sidebar v1.3 — Premium SaaS dashboard (Linear / Vercel / Metronic)
 * CSS only · .zf-b2b-sidebar · overrides Gentelella
 */

/* ═══ Design tokens ═══════════════════════════════════════ */
/* Widths sit on :root because the layout offsets at the bottom of this file
   (.right_col, .top_nav, footer) are not descendants of the sidebar and still need
   to read the same two numbers. */
:root {
    --sb-w: 272px;
    --sb-rail-w: 76px;
}

/* The rest used to be scoped to `.nav-md ... .zf-b2b-sidebar`. Collapsing swaps
   nav-md for nav-sm on the body, which took every token with it — the closed
   sidebar was left painting `background: var(--sb-bg)` with nothing behind it.
   Declared on the wrapper as well so both halves of the column inherit them. */
.container.body .col-md-3.left_col,
.container.body .col-md-3.left_col .zf-b2b-sidebar {
    --sb-bg: var(--hs-surface, #f8fafc);
    --sb-surface: var(--hs-surface-raised, #ffffff);
    --sb-border: var(--hs-border-subtle, #e2e8f0);
    --sb-text: var(--hs-text, #334155);
    --sb-muted: var(--hs-text-subtle, #94a3b8);
    --sb-heading: var(--hs-text-muted, #64748b);
    --sb-hover: var(--hs-surface-alt, #f1f5f9);
    --sb-accent: var(--primary-color, #17768e);
    --sb-accent-2: var(--secondary-color, #0ea5e9);
    --sb-active-bg: var(--sb-accent);
    --sb-active-fg: var(--hs-text-inverse, #ffffff);
    --sb-radius: 12px;
    --sb-item-h: 44px;
    --sb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.zf-b2b-sidebar {
    font-family: var(--sb-font);
}

/* ═══ Shell ═══════════════════════════════════════════════ */
.nav-md .container.body .col-md-3.left_col {
    width: var(--sb-w, 272px) !important;
    min-width: var(--sb-w, 272px) !important;
    max-width: var(--sb-w, 272px) !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1002 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-md .container.body .col-md-3.left_col .zf-b2b-sidebar.left_col,
.zf-b2b-sidebar.left_col.scroll-view {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--sb-bg) !important;
    border-right: 1px solid var(--sb-border) !important;
    box-shadow:
        1px 0 0 rgba(var(--hs-shadow-rgb, 255, 255, 255), calc(0.8 * var(--hs-shadow-boost, 1))) inset,
        4px 0 32px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1))) !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.zf-b2b-sidebar.scroll-view {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--hs-border, #cbd5e1) transparent;
}

.zf-b2b-sidebar.scroll-view::-webkit-scrollbar {
    width: 5px;
}

.zf-b2b-sidebar.scroll-view::-webkit-scrollbar-thumb {
    background: var(--hs-border, #cbd5e1);
    border-radius: 99px;
}

/* ═══ Brand ═══════════════════════════════════════════════ */
.zf-b2b-sidebar .nav_title {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 16px 16px !important;
    margin: 0 !important;
    background: var(--sb-surface) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    display: block !important;
    flex-shrink: 0;
    position: relative;
}

.zf-b2b-sidebar .nav_title[style] {
    border: none !important;
}

.zf-b2b-sidebar .site_title {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--hs-text, #0f172a) !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.3;
    transition: opacity 0.15s ease;
}

.zf-b2b-sidebar .site_title::before {
    content: "\f072";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--hs-text-inverse, #fff);
    background: linear-gradient(
        145deg,
        var(--sb-accent) 0%,
        color-mix(in srgb, var(--sb-accent) 55%, var(--hs-text, #0f172a)) 100%
    );
    border-radius: 11px;
    box-shadow:
        0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.08 * var(--hs-shadow-boost, 1))),
        0 6px 16px color-mix(in srgb, var(--sb-accent) 32%, transparent);
    position: static !important;
    transform: none !important;
}

.zf-b2b-sidebar .site_title span {
    display: block !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--hs-text, #0f172a) !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 2px;
}

.zf-b2b-sidebar .site_title span::after {
    content: "Agent workspace";
    display: block;
    margin-top: 3px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--sb-muted);
    text-transform: none;
}

.zf-b2b-sidebar .site_title:hover span {
    color: var(--sb-accent) !important;
}

.zf-b2b-sidebar .x_close {
    position: absolute;
    top: 16px;
    right: 14px;
    font-size: 1.2rem;
    color: var(--sb-muted);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.zf-b2b-sidebar .x_close:hover {
    color: var(--hs-text, #0f172a);
    transform: scale(1.08);
}

/* ═══ Menu structure ══════════════════════════════════════ */
.zf-b2b-sidebar #sidebar-menu.main_menu_side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 10px 16px;
    min-height: 0;
}

.zf-b2b-sidebar #sidebar-menu .menu_section:first-of-type {
    flex: 1;
}

.zf-b2b-sidebar #sidebar-menu .menu_section:last-of-type {
    margin-top: auto;
    padding-top: 8px;
}

.zf-b2b-sidebar .nav.side-menu {
    list-style: none;
    margin: 0;
    padding: 0 !important;
}

/* Remove Gentelella tree UI */
.zf-b2b-sidebar .nav-md ul.nav.child_menu li::before,
.zf-b2b-sidebar .nav-md ul.nav.child_menu li::after,
.nav-md .zf-b2b-sidebar ul.nav.child_menu li::before,
.nav-md .zf-b2b-sidebar ul.nav.child_menu li::after {
    display: none !important;
    content: none !important;
}

/* ═══ Section labels ══════════════════════════════════════ */
.zf-b2b-sidebar .menu_section h4 {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--sb-heading) !important;
    padding: 16px 10px 6px !important;
    margin: 0 !important;
    border: none !important;
    line-height: 1.2 !important;
}

.zf-b2b-sidebar .menu_section .s_title {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zf-b2b-sidebar .menu_section .s_title::before,
.zf-b2b-sidebar .menu_section .s_title h4::before {
    display: none !important;
}

/* ═══ Nav links ═══════════════════════════════════════════ */
.zf-b2b-sidebar .nav.side-menu > li {
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
}

.zf-b2b-sidebar .nav.side-menu > li > a,
.zf-b2b-sidebar .nav.child_menu > li > a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 11px;
    min-height: var(--sb-item-h);
    height: var(--sb-item-h);
    padding: 0 12px !important;
    margin: 2px 0 !important;
    border-radius: var(--sb-radius) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: var(--sb-text) !important;
    text-decoration: none !important;
    /* Accordion parents carry no href, so keep the pointer on every row. */
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.zf-b2b-sidebar .nav.side-menu > li > a:hover,
.zf-b2b-sidebar .nav.side-menu > li > a:focus,
.zf-b2b-sidebar .nav.child_menu > li > a:hover {
    background: var(--sb-hover) !important;
    color: var(--hs-text, #0f172a) !important;
    text-decoration: none !important;
}

/* Icons */
.zf-b2b-sidebar .nav.side-menu > li > a > i.fas,
.zf-b2b-sidebar .nav.side-menu > li > a > span.fa:not(.fa-chevron-right):not(.badge) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    color: var(--sb-muted) !important;
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1))) !important;
    transition: all 0.18s ease;
}

.zf-b2b-sidebar .nav.side-menu > li > a:hover > i.fas,
.zf-b2b-sidebar .nav.side-menu > li > a:hover > span.fa:not(.fa-chevron-right) {
    color: var(--sb-accent) !important;
    border-color: color-mix(in srgb, var(--sb-accent) 25%, var(--sb-border)) !important;
}

/* Active — filled primary pill (premium app pattern).
   custom.js renames the open section's `li.active` to `li.active-sm` while the
   sidebar is collapsed, so every active rule has to answer to both names. */
.zf-b2b-sidebar .nav.side-menu > li.active,
.zf-b2b-sidebar .nav.side-menu > li.active-sm,
.zf-b2b-sidebar .nav.side-menu > li.current-page {
    border-right: none !important;
    background: transparent !important;
}

.zf-b2b-sidebar .nav.side-menu > li.active > a,
.zf-b2b-sidebar .nav.side-menu > li.active-sm > a,
.zf-b2b-sidebar .nav.side-menu > li.current-page > a,
.zf-b2b-sidebar .nav li.current-page > a {
    background: linear-gradient(
        135deg,
        var(--sb-accent) 0%,
        color-mix(in srgb, var(--sb-accent) 78%, var(--sb-accent-2)) 100%
    ) !important;
    color: var(--sb-active-fg) !important;
    font-weight: 600 !important;
    box-shadow:
        0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1))),
        0 6px 20px color-mix(in srgb, var(--sb-accent) 38%, transparent) !important;
}

.zf-b2b-sidebar .nav.side-menu > li.active > a::before,
.zf-b2b-sidebar .nav.side-menu > li.current-page > a::before {
    display: none !important;
}

.zf-b2b-sidebar .nav.side-menu > li.active > a > i.fas,
.zf-b2b-sidebar .nav.side-menu > li.active > a > span.fa:not(.fa-chevron-right),
.zf-b2b-sidebar .nav.side-menu > li.active-sm > a > i.fas,
.zf-b2b-sidebar .nav.side-menu > li.active-sm > a > span.fa:not(.fa-chevron-right),
.zf-b2b-sidebar .nav.side-menu > li.current-page > a > i.fas {
    color: var(--hs-text-inverse, #fff) !important;
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.18) !important;
    border-color: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.22) !important;
    box-shadow: none !important;
}

/* Home */
.zf-b2b-sidebar .nav.side-menu > li > a[href="/home"] {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
    box-shadow: 0 1px 3px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1))) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.zf-b2b-sidebar .nav.side-menu > li > a[href="/home"]:hover {
    border-color: color-mix(in srgb, var(--sb-accent) 30%, var(--sb-border)) !important;
    color: var(--sb-accent) !important;
}

.zf-b2b-sidebar .nav.side-menu > li > a[href="/home"] > i.fas {
    color: var(--sb-accent) !important;
    background: color-mix(in srgb, var(--sb-accent) 10%, var(--hs-surface-raised, #fff)) !important;
    border-color: color-mix(in srgb, var(--sb-accent) 20%, var(--sb-border)) !important;
}

.zf-b2b-sidebar .nav.side-menu > li:first-child {
    background: transparent !important;
}

/* Chevron */
.zf-b2b-sidebar .nav.side-menu > li > a .fa-chevron-right {
    margin-left: auto !important;
    font-size: 10px !important;
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--sb-muted) !important;
    opacity: 0.8;
    background: transparent !important;
    border: none !important;
    border-radius: 6px;
    transition: transform 0.22s ease, color 0.18s ease;
}

.zf-b2b-sidebar .nav.side-menu > li.active > a .fa-chevron-right {
    color: rgba(var(--hs-text-inverse-rgb, 255, 255, 255), 0.85) !important;
    transform: rotate(90deg);
}

/* Child menu */
.zf-b2b-sidebar .nav.child_menu {
    list-style: none;
    margin: 2px 0 6px 0 !important;
    padding: 4px 0 4px 44px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.zf-b2b-sidebar .nav.child_menu > li {
    padding: 0 !important;
}

.zf-b2b-sidebar .nav.child_menu > li > a {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
    color: var(--sb-muted) !important;
    border-radius: 8px !important;
}

.zf-b2b-sidebar .nav.child_menu > li > a > i.fas,
.zf-b2b-sidebar .nav.child_menu > li > a > span.fa {
    display: none !important;
}

.zf-b2b-sidebar .nav.child_menu > li > a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hs-border, #cbd5e1);
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
}

.zf-b2b-sidebar .nav.child_menu > li > a:hover,
.zf-b2b-sidebar .nav.child_menu > li.current-page > a {
    background: var(--sb-hover) !important;
    color: var(--sb-accent) !important;
    font-weight: 600 !important;
}

.zf-b2b-sidebar .nav.child_menu > li.current-page > a::before,
.zf-b2b-sidebar .nav.child_menu > li > a:hover::before {
    background: var(--sb-accent);
    transform: scale(1.25);
}

.zf-b2b-sidebar .nav.child_menu li:hover,
.zf-b2b-sidebar .nav.child_menu li.active {
    background: transparent !important;
}

/* Badge */
.zf-b2b-sidebar .nav.side-menu .badge {
    margin-left: auto !important;
    min-width: 20px;
    height: 20px;
    padding: 0 6px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: var(--hs-text-inverse, #fff) !important;
    background: var(--hs-danger, #ef4444) !important;
    border: 2px solid var(--sb-surface) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(var(--hs-shadow-rgb, 239, 68, 68), calc(0.35 * var(--hs-shadow-boost, 1))) !important;
}

.zf-b2b-sidebar .nav.side-menu > li.active .badge,
.zf-b2b-sidebar .nav.side-menu > li.active-sm .badge {
    border-color: var(--sb-accent) !important;
}

/* Logout card */
.zf-b2b-sidebar .menu_section .logout {
    margin: 0;
    padding: 0;
}

.zf-b2b-sidebar .menu_section .logout span {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: var(--sb-item-h);
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: var(--sb-radius) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--sb-text) !important;
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    box-shadow: 0 1px 3px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1)));
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.zf-b2b-sidebar .menu_section .logout:hover span {
    background: var(--hs-danger-softer, #fef2f2) !important;
    border-color: var(--hs-border, #fecaca) !important;
    color: var(--hs-danger-ink, #dc2626) !important;
    box-shadow: 0 4px 12px rgba(var(--hs-shadow-rgb, 239, 68, 68), calc(0.12 * var(--hs-shadow-boost, 1)));
}

.zf-b2b-sidebar .menu_section .logout button.dropdown-item {
    background: transparent !important;
    border: none !important;
    width: 100%;
    cursor: pointer;
    padding: 0 !important;
}

.zf-b2b-sidebar .menu_section .logout .fas.fa-cog {
    color: var(--sb-muted);
    font-size: 13px;
    transition: transform 0.25s ease, color 0.18s;
}

.zf-b2b-sidebar .menu_section .logout:hover .fas.fa-cog {
    color: var(--hs-danger-ink, #ef4444);
    transform: rotate(90deg);
}

/* Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(var(--hs-text-rgb, 15, 23, 42), 0.5);
    backdrop-filter: blur(3px);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ═══ Collapsed rail ══════════════════════════════════════
   #menu_toggle is Gentelella's own control: custom.js swaps body.nav-md for
   body.nav-sm and nothing else. That single class drops every `.nav-md`-scoped rule
   above and hands the sidebar back to custom.css's 70px, position:absolute column —
   which is why the closed sidebar looked broken while the open one was fine. The
   previous attempt at a rail keyed off a `collapsed` class that the sidemenu script
   put on the *outer* .col-md-3.left_col, while every rule asked for the inner
   .left_col.zf-b2b-sidebar, so it never matched anything. State now lives in one
   place — body.nav-sm — and is styled here.

   Everything is additionally gated on body.zf-sb-js, which the sidemenu script adds
   and which is only printed for non-mobile ($isMobile). Phones and tablets keep the
   full-width nav-sm menu they have today, untouched. */
@media (min-width: 992px) {
    /* Shell: re-state the frame the .nav-md rules gave up. */
    .zf-sb-js.nav-sm .container.body .col-md-3.left_col {
        width: var(--sb-rail-w, 76px) !important;
        min-width: var(--sb-rail-w, 76px) !important;
        max-width: var(--sb-rail-w, 76px) !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 1002 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .zf-sb-js.nav-sm .container.body .col-md-3.left_col .zf-b2b-sidebar.left_col {
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Brand block: the crest only. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav_title {
        width: 100% !important;
        padding: 16px 0 !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .site_title {
        justify-content: center;
        padding: 0 !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .site_title span {
        display: none !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar #sidebar-menu.main_menu_side {
        padding: 12px 6px 16px;
    }

    /* Section headings become a hairline, so the groups still read as groups. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section h4 {
        display: none !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section .s_title {
        width: 28px;
        height: 1px;
        margin: 12px auto !important;
        background: var(--sb-border);
    }

    /* Rows: a centred 44px icon button, nothing else. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li > a {
        width: 44px;
        min-height: var(--sb-item-h);
        height: var(--sb-item-h);
        padding: 0 !important;
        /* Tighter pitch than the labelled menu: at 4px the stack cleared 100vh by a
           hair on a 900px-tall window and grew a scrollbar down the 76px rail. */
        margin: 3px auto !important;
        justify-content: center !important;
        gap: 0 !important;
        text-align: center !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li > a > span:not(.fa):not(.badge),
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li > a .fa-chevron-right,
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.child_menu {
        display: none !important;
    }

    /* custom.css blows icons up to 25px/full-width in nav-sm; hold the design size. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li > a > i.fas,
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li > a > span.fa:not(.fa-chevron-right):not(.badge) {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
    }

    /* No room for a full-width count — park it on the icon's corner. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu .badge {
        position: absolute;
        top: 1px;
        right: 1px;
        margin: 0 !important;
        min-width: 16px;
        height: 16px;
        padding: 0 4px !important;
        font-size: 0.5625rem !important;
        line-height: 12px !important;
    }

    /* custom.css marks the collapsed active row with a 5px #1ABB9C bar. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.side-menu > li.active-sm,
    .zf-sb-js.nav-sm .zf-b2b-sidebar .nav.child_menu li.active {
        border-right: none !important;
    }

    /* Logout: "Logout" is a bare text node next to the cog, so it cannot be hidden
       on its own — zero the span's font-size and give the icon its size back. The
       form and button around it are zeroed too: between them they were contributing
       a stray 19px line box plus a baseline descender, which pushed the rail just
       past 100vh and put a scrollbar down a 76px column. */
    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section .logout form,
    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section .logout button.dropdown-item {
        display: flex !important;
        justify-content: center;
        /* A stray 0 5px 5px 0 on the button offset the icon 3px left of every row. */
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section .logout span {
        justify-content: center;
        width: 44px;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 0 !important;
        text-align: center !important;
    }

    .zf-sb-js.nav-sm .zf-b2b-sidebar .menu_section .logout .fas.fa-cog {
        font-size: 15px !important;
    }

    /* Content, header and footer follow the rail (custom.css parks them at 70px). */
    .zf-sb-js.nav-sm .container.body .right_col {
        margin-left: var(--sb-rail-w, 76px) !important;
        padding: 10px 20px 0 !important;
    }

    .zf-sb-js.nav-sm .container.body .top_nav {
        margin-left: var(--sb-rail-w, 76px) !important;
        width: calc(100% - var(--sb-rail-w, 76px)) !important;
    }

    .zf-sb-js.nav-sm footer.footer {
        margin-left: var(--sb-rail-w, 76px) !important;
    }

    html[dir="rtl"] .zf-sb-js.nav-sm .container.body .right_col,
    html[dir="rtl"] .zf-sb-js.nav-sm footer.footer {
        margin-left: 0 !important;
        margin-right: var(--sb-rail-w, 76px) !important;
    }

    html[dir="rtl"] .zf-sb-js.nav-sm .container.body .top_nav {
        margin-left: 0 !important;
        margin-right: var(--sb-rail-w, 76px) !important;
        width: calc(100% - var(--sb-rail-w, 76px)) !important;
    }
}

/* ═══ Main layout offset ══════════════════════════════════ */
@media (min-width: 992px) {
    .nav-md .container.body .right_col {
        margin-left: var(--sb-w, 272px) !important;
    }

    .nav-md .container.body .top_nav {
        margin-left: var(--sb-w, 272px) !important;
        width: calc(100% - var(--sb-w, 272px)) !important;
    }

    html[dir="rtl"] .nav-md .container.body .right_col {
        margin-left: 0 !important;
        margin-right: var(--sb-w, 272px) !important;
    }

    html[dir="rtl"] .nav-md .container.body .top_nav {
        margin-left: 0 !important;
        margin-right: var(--sb-w, 272px) !important;
        width: calc(100% - var(--sb-w, 272px)) !important;
    }
}

/* ═══ Narrow viewports ════════════════════════════════════
   Below 992px the column is not a rail, it is a drawer: closed (nav-md) it has no
   width at all, open (nav-sm) it slides over the content at full labelled width.
   The open half is gated on body.zf-sb-js — a real phone or tablet never gets that
   class, so the existing full-width mobile menu is left exactly as it is. */
@media (max-width: 991px) {
    .nav-md .container.body .col-md-3.left_col {
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .zf-sb-js.nav-sm .container.body .col-md-3.left_col {
        width: min(300px, 90vw) !important;
        min-width: 0 !important;
        max-width: 300px !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1002 !important;
        background: transparent !important;
        box-shadow: 12px 0 48px rgba(var(--hs-shadow-rgb, 0, 0, 0), calc(0.2 * var(--hs-shadow-boost, 1))) !important;
    }

    .zf-sb-js.nav-sm .container.body .col-md-3.left_col .zf-b2b-sidebar.left_col {
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* The drawer floats over the page, so the content keeps the full width. */
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav,
    .zf-sb-js.nav-sm .container.body .right_col,
    .zf-sb-js.nav-sm .container.body .top_nav {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* The footer blade hard-codes margin-left: 250px for the expanded column; below
       992px there is no column to clear in either state. */
    .zf-sb-js.nav-md footer.footer,
    .zf-sb-js.nav-sm footer.footer {
        margin-left: 0 !important;
    }
}

/* ═══ RTL ═════════════════════════════════════════════════ */
[dir="rtl"] .zf-b2b-sidebar .site_title {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .zf-b2b-sidebar .nav.side-menu > li > a,
[dir="rtl"] .zf-b2b-sidebar .nav.child_menu > li > a {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .zf-b2b-sidebar .nav.side-menu > li > a > i.fas,
[dir="rtl"] .zf-b2b-sidebar .nav.side-menu > li > a > span.fa:not(.fa-chevron-right) {
    margin: 0 !important;
}

[dir="rtl"] .zf-b2b-sidebar .nav.child_menu {
    padding-left: 0 !important;
    padding-right: 44px !important;
}

[dir="rtl"] .zf-b2b-sidebar .nav.child_menu > li > a::before {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .zf-b2b-sidebar .nav.side-menu > li > a .fa-chevron-right {
    margin-right: auto !important;
    margin-left: 0 !important;
    transform: rotate(180deg);
}

[dir="rtl"] .zf-b2b-sidebar .nav.side-menu > li.active > a .fa-chevron-right {
    transform: rotate(270deg);
}

[dir="rtl"] .zf-b2b-sidebar .x_close {
    right: auto;
    left: 14px;
}