:root {
    --geex-sidebar-width: 290px;
    --geex-content-gap: 0px;
}

/* Sidebar width */
.geex-sidebar,
.sidebar,
#sidebar {
    width: var(--geex-sidebar-width);
    min-width: var(--geex-sidebar-width);
    max-width: var(--geex-sidebar-width);
    box-sizing: border-box;
}

/* Sidebar in your real layout */
.geex-main-content--with-sidebar > .geex-sidebar,
.geex-main-content--with-sidebar > .sidebar,
.geex-main-content--with-sidebar > #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--geex-sidebar-width);
    height: 100vh;
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Content offset */
.geex-dashboard--with-sidebar .geex-content {
    margin-left: var(--geex-sidebar-width);
    width: calc(100% - var(--geex-sidebar-width));
    max-width: calc(100% - var(--geex-sidebar-width));
    box-sizing: border-box;
}

/* Header offset — this is the missing part in your screenshot */
.geex-dashboard--with-sidebar .geex-header,
.geex-dashboard--with-sidebar header.geex-header,
.geex-dashboard--with-sidebar .header,
.geex-dashboard--with-sidebar header {
    margin-left: var(--geex-sidebar-width);
    width: calc(100% - var(--geex-sidebar-width));
    max-width: calc(100% - var(--geex-sidebar-width));
    box-sizing: border-box;
}

/* Avoid horizontal overflow */
.geex-content,
.geex-main-content {
    min-width: 0;
    box-sizing: border-box;
}

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

/* Mobile / tablet */
@media (max-width: 1199.98px) {
    /* ====================================================================
       OVERRIDE the Geex theme's default mobile sidebar rule, which is:
           @media (max-width: 1199px) { .geex-sidebar { display: none;
                                                        width: 0; } }
       That kills the entire element on mobile, making any slide animation
       worthless. We force the sidebar back to its desktop geometry — fixed
       positioning, full width, off-screen via transform — so the drawer
       actually has substance to slide into view when opened.
       ==================================================================== */
    .geex-main-content--with-sidebar > .geex-sidebar,
    .geex-main-content--with-sidebar > .sidebar,
    .geex-main-content--with-sidebar > #sidebar {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0;
        left: 0;
        width: var(--geex-sidebar-width) !important;
        min-width: var(--geex-sidebar-width) !important;
        max-width: var(--geex-sidebar-width) !important;
        height: 100vh;
        max-height: 100vh;
        /* Geex's desktop rule has top: 22px / inset-inline-start: 22px /
           border-radius: 33px — looks great on desktop, weird on a phone
           drawer. Reset to flush edges so the drawer fills the left side. */
        inset-inline-start: 0;
        border-radius: 0;
        z-index: 1040;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .geex-dashboard--with-sidebar .geex-content,
    .geex-dashboard--with-sidebar .geex-header,
    .geex-dashboard--with-sidebar header.geex-header,
    .geex-dashboard--with-sidebar .header,
    .geex-dashboard--with-sidebar header {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

        /* Leave room at the top-left of the header so the hamburger button
       (fixed in that corner) doesn't sit on top of the logo or title. */
        .geex-dashboard--with-sidebar .geex-header,
        .geex-dashboard--with-sidebar header.geex-header,
        .geex-dashboard--with-sidebar .geex-content__header {
            padding-left: 60px;
        }

    body.geex-sidebar-open .geex-main-content--with-sidebar > .geex-sidebar,
    body.geex-sidebar-open .geex-main-content--with-sidebar > .sidebar,
    body.geex-sidebar-open .geex-main-content--with-sidebar > #sidebar {
        transform: translateX(0);
    }
}

/* ===================================================================
   Mobile hamburger button + drop-down backdrop.

   The toggle is rendered in _Layout.cshtml (only when isLoggedIn).
   On desktop (≥1200px) both are hidden — the static sidebar takes over.
   On mobile (≤1199.98px) the toggle is always visible; the backdrop
   only appears while body.geex-sidebar-open is set, dimming the page
   beneath the drawer.
   =================================================================== */
/* Mobile hamburger button + drop-down backdrop + close-X inside drawer.
   All three are hidden on desktop; the @media (max-width: 1199.98px) block
   below brings them into view on mobile viewports. */
.geex-mobile-toggle,
.geex-sidebar-backdrop,
.geex-sidebar__close-mobile {
    display: none;
}

@media (max-width: 1199.98px) {
    .geex-mobile-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
        padding: 8px;
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, .12);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
        cursor: pointer;
        /* Above the backdrop (1030), below the sidebar (1040). When the
           drawer is open it's hidden behind the sidebar anyway. */
        z-index: 1035;
        -webkit-tap-highlight-color: transparent;
    }

    .geex-mobile-toggle__bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #1f2937;
        border-radius: 2px;
        transition: transform .15s ease, opacity .15s ease;
    }

    /* When the drawer is open, morph the three bars into an X — gives
       the user a visual handle on the toggle's state even though the
       button itself is mostly hidden behind the sidebar. */
    body.geex-sidebar-open .geex-mobile-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.geex-sidebar-open .geex-mobile-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    body.geex-sidebar-open .geex-mobile-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .geex-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .42);
        z-index: 1030;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.geex-sidebar-open .geex-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Close-X inside the sidebar drawer. Renamed from Geex's original
       .geex-sidebar__close to break their jQuery binding (see comment in
       _Sidebar_Admin.cshtml). Replicates the original positioning. */
    .geex-sidebar__close-mobile {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        font-size: 22px;
        line-height: 1;
        color: #475569;
        text-decoration: none;
        border-radius: 6px;
        z-index: 2;
    }

        .geex-sidebar__close-mobile:hover {
            background: rgba(15, 23, 42, .06);
            color: #dc2626;
        }
}