/* =============================================================================
   two-level-nav.css
   Styles for the two-level navigation shell:
     • TopNav (5 fixed top-bar items)
     • ContextualLeftNav (Dashboard / Events / Schedule / My Tags / Tools)
     • MobileTopNavSheet (hamburger-driven slide-down)
     • LocationPickerDialog (admin search modal) + owner inline flyout
   Uses only existing --jbf-* / --rz-* tokens from site.css. No new color literals.
   ============================================================================= */

/* ── Top nav strip ─────────────────────────────────────────────────────────
   Underline-tab pattern (preferred per UX): inactive items show as visible
   slate text with no chrome, hover deepens the text + previews the underline,
   active item gets a plum text colour and a 3px plum underline. No filled
   background, no segmented pill - keeps the global header visually quiet so
   the contextual left rail and page content stay primary.
   Colour values are hard-coded (with !important on the inactive colour) so the
   tab is guaranteed visible even if a theme override resolves --rz-text-color
   to white or strips --jbf-segment-inactive-fg.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-topnav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    /* No outer left margin - the .header-desktop-left logo column is locked to
       the leftnav width, so TopNav starts flush at the body's left edge with
       the first item (Dashboard) aligned to the rail/body boundary. */
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

    .jbf-topnav__item {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0 16px;
        height: 48px;
        border: none;
        background: transparent;
        font-family: var(--font-overpass, "Overpass", system-ui, sans-serif);
        font-size: 14px;
        font-weight: 600;
        color: #4a5d68 !important;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        line-height: 1;
        border-bottom: 3px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .jbf-topnav__item:hover:not(.is-active) {
            color: #1f2c33 !important;
            border-bottom-color: rgba(210, 60, 119, 0.35);
            text-decoration: none;
        }

        .jbf-topnav__item.is-active {
            color: #D23C77 !important;
            border-bottom-color: #D23C77;
        }

        .jbf-topnav__item:focus-visible {
            outline: 2px solid #D23C77;
            outline-offset: 2px;
            border-radius: 2px;
        }

    .jbf-topnav__icon {
        font-size: 14px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 14px;
    }

    .jbf-topnav__label {
        display: inline-block;
    }

/* ── Contextual left nav (desktop) ─────────────────────────────────────────
   Structure:
     .jbf-leftnav            ← flex column, owns the rail's outer padding
       .jbf-leftnav__scroll  ← inner scrollable area (menu items)
       .jbf-leftnav__toggle  ← sticky bottom collapse/expand button (always visible)
   The rail itself does NOT scroll; only the inner __scroll container does. This
   keeps the toggle button pinned to the bottom of the rail at all times.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-leftnav {
    display: flex;
    flex-direction: column;
    width: var(--jbf-leftnav-w, 264px);
    flex-shrink: 0;
    background: var(--jbf-sidebar-shell-bg, #f6f5f8);
    border-right: 1px solid var(--events-border-light-color, #e6e8e9);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* Symmetric padding on top/left/right so the heading and first item have
       breathing room that matches the side gutters. Bottom padding is slightly
       larger to give the sticky toggle button room. */
    padding: 12px 12px 8px;
    gap: 0;
}

    /* Inner scroll container - holds whatever the section component renders.
       Scrollbar visuals come from the global universal rule + .jbf-scroll-y
       utility in site.css (auto-hiding thin plum scrollbar). */
    .jbf-leftnav__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .jbf-leftnav__heading {
        font-family: var(--font-overpass);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--rz-text-tertiary-color, #6c757d);
        /* Outer rail provides top padding now; just give the heading a small
           bottom gutter and align horizontally with item padding. */
        padding: 0 12px 6px;
    }

    .jbf-leftnav__item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        font-family: var(--font-overpass);
        font-size: 14px;
        font-weight: 500;
        color: var(--rz-text-color, #021922);
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        text-align: left;
        width: 100%;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .jbf-leftnav__item:hover {
            background: var(--rz-primary-lighter);
            color: var(--rz-primary-darker);
        }

        .jbf-leftnav__item.is-active {
            background: var(--rz-primary-dark);
            color: var(--rz-white, #fff);
        }

        .jbf-leftnav__item--child {
            padding-left: 28px;
            font-weight: 400;
        }

    .jbf-leftnav__divider {
        height: 1px;
        background: var(--events-border-light-color, #e6e8e9);
        margin: 8px 4px;
    }

    .jbf-leftnav__primary-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: var(--jbf-purple);
        color: var(--rz-white, #fff);
        border: none;
        font-family: var(--font-overpass);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
    }

        .jbf-leftnav__primary-btn:hover,
        .jbf-leftnav__primary-btn:focus,
        .jbf-leftnav__primary-btn:active,
        .jbf-leftnav__primary-btn:visited {
            background: var(--rz-primary-dark);
            /* Lock text color to white - without this, the generic
               .jbf-leftnav__item:hover (or any cascade from item styles) flips
               the label to the dark plum text color on hover. */
            color: var(--rz-white, #fff);
        }

/* ── Section footer ──────────────────────────────────────────────────────────
   Pinned above the collapse toggle as a sibling of .jbf-leftnav__scroll. Hosts
   section-specific CTAs (e.g. "Find Events" on the Events rail) that must stay
   visible regardless of how long the scrolling body is.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-leftnav__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--events-border-light-color, #e6e8e9);
}

    /* The primary button's own bottom gutter was sized for being inside the
       scroll area; neutralize it so the button sits flush in the footer. */
    .jbf-leftnav__footer .jbf-leftnav__primary-btn {
        margin-bottom: 0;
    }

    /* Page Content zone sits as a sibling above the section CTA (e.g. Find
       Events) inside the rail footer. Without this gap the authored content
       butts directly against the button -- give it room so the two read as
       distinct chrome rather than a single block. */
    .jbf-leftnav__footer .jbf-leftnav__footer-pagecontent {
        margin-bottom: 12px;
    }

/* ── Bottom row (toggle + optional brand) ────────────────────────────────────
   Sibling of .jbf-leftnav__scroll so it's pinned to the bottom of the rail
   (outside the scroll area) regardless of menu length. Hosts the collapse
   toggle and, on the Manage rail, a "Powered by JBFOne(tm)" attribution.
   Default justify-content: flex-end keeps the toggle pinned right when no
   brand is present; with the brand, the brand's flex:1 fills the space and
   the toggle still ends up on the right edge.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-leftnav__bottom {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.jbf-leftnav__brand {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: var(--font-overpass);
    font-size: 11px;
    font-weight: 500;
    color: var(--rz-text-tertiary-color, #6c757d);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

/* ── Collapse toggle ────────────────────────────────────────────────────── */
.jbf-leftnav__toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    color: var(--rz-text-tertiary-color, #6c757d);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .jbf-leftnav__toggle:hover {
        background: var(--rz-primary-lighter, rgba(125, 91, 129, 0.12));
        color: var(--rz-primary-darker, #5a3f5e);
        border-color: var(--rz-primary, #7D5B81);
    }

    .jbf-leftnav__toggle:focus-visible {
        outline: 2px solid var(--rz-primary, #7D5B81);
        outline-offset: 2px;
    }

/* ── Collapsed rail ──────────────────────────────────────────────────────────
   Narrow icon-only strip. We KEEP the menu items rendered so the icons stay
   visible - only the text labels (and text-only chrome like headings, dividers,
   event cards) are hidden via CSS. The toggle stays pinned at the bottom.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-leftnav.jbf-leftnav--collapsed {
    width: 56px;
    padding: 12px 6px 8px;
}

    /* Center the icons within the narrow rail and drop the side padding so the
       icon glyph itself is centered, not pushed to one side. */
    .jbf-leftnav--collapsed .jbf-leftnav__item {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
    }

    /* Text labels - hide every <span> inside menu items / primary buttons. */
    .jbf-leftnav--collapsed .jbf-leftnav__item span,
    .jbf-leftnav--collapsed .jbf-leftnav__primary-btn span {
        display: none;
    }

    /* Section headings, dividers, and event cards have no meaningful
       icon-only representation - hide them in collapsed mode. */
    .jbf-leftnav--collapsed .jbf-leftnav__heading,
    .jbf-leftnav--collapsed .jbf-leftnav__divider,
    .jbf-leftnav--collapsed .jbf-event-card {
        display: none;
    }

    /* Primary action button (e.g. "Find Events") collapses to icon-only too. */
    .jbf-leftnav--collapsed .jbf-leftnav__primary-btn {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
    }

    /* Bottom row in collapsed mode: only the toggle is rendered (the brand
       label is conditionally suppressed in the markup). Re-center the toggle
       inside the narrow rail instead of right-pinning it. */
    .jbf-leftnav--collapsed .jbf-leftnav__bottom {
        justify-content: center;
    }

/* ── Collapsible event card (used by EventsLeftNav) ──────────────────────────
   Layout:
     [name + status pill]                     ← top row inside __main
     [date range, e.g. "Jun 15-17"]            ← bottom row inside __main
                                       [chevron]
   When the card matches the current URL it gains the .is-current ring; when
   expanded it shows its sub-links and the chevron rotates.
   No avatar circle - design intentionally text-only on the left edge.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-event-card {
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 10px;
    background: var(--jbf-segment-bg, #fff);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .jbf-event-card.is-current {
        border-color: var(--rz-primary, #7D5B81);
        box-shadow: 0 0 0 1px var(--rz-primary, #7D5B81) inset;
    }

    .jbf-event-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        background: transparent;
        border: none;
        cursor: pointer;
        width: 100%;
        font-family: var(--font-overpass);
        text-align: left;
    }

    .jbf-event-card__main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .jbf-event-card__top {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    /* Row 1 - location name: primary emphasis on the card. */
    .jbf-event-card__location {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        font-size: 13px;
        color: var(--rz-text-color, #212529);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Row 2 - event name: secondary weight beneath the location. */
    .jbf-event-card__name {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 500;
        font-size: 12px;
        color: var(--rz-text-color, #021922);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jbf-event-card__dates {
        font-size: 11px;
        font-weight: 400;
        color: var(--rz-text-tertiary-color, #6c757d);
        white-space: nowrap;
    }

    /* Status pill - three muted variants. Colors stay on-brand: green-ish for
       Active, neutral slate for Upcoming, soft amber for Draft. */
    .jbf-event-card__status {
        flex: 0 0 auto;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 600;
        text-transform: capitalize;
        letter-spacing: 0.2px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .jbf-event-card__status--active {
        background: rgba(34, 139, 84, 0.14);
        color: #1f7a48;
    }

    .jbf-event-card__status--upcoming {
        background: rgba(125, 91, 129, 0.14);
        color: var(--rz-primary-darker, #5a3f5e);
    }

    /* --draft retained for any legacy callers; --incomplete is the current
       label used by EventsLeftNav for not-yet-confirmed consignor registrations. */
    .jbf-event-card__status--draft,
    .jbf-event-card__status--incomplete {
        background: rgba(176, 124, 28, 0.14);
        color: #8a5a05;
    }

    .jbf-event-card__chevron {
        flex: 0 0 auto;
        font-size: 12px;
        margin-left: 6px;
        color: var(--rz-text-tertiary-color, #6c757d);
        transition: transform 0.15s ease;
    }

    .jbf-event-card.is-expanded .jbf-event-card__chevron {
        transform: rotate(90deg);
    }

    /* Expanded body - sits inside the parent card's border + border-radius.
       Unified with the card's own background (no contrasting panel) so the
       expanded card reads as one continuous surface instead of two stacked
       boxes. The chevron rotation on the header already communicates the
       expanded state; a background shift isn't needed. */
    .jbf-event-card__body {
        padding: 4px 6px 8px;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        /* Child links: tighter than top-level items and slimmer horizontal
           padding so their hover/active pill sits comfortably inside the
           card's 10px rounded border without kissing the edges. */
        .jbf-event-card__body .jbf-leftnav__item--child {
            padding: 8px 10px 8px 24px;
            font-size: 13px;
        }

    /* Active sub-link inside an event card body - softer than the .is-active on
       top-level items because the parent card is already visually anchored. */
    .jbf-event-card__body .jbf-leftnav__item--child.is-active {
        background: var(--rz-primary-lighter);
        color: var(--rz-primary-darker);
        font-weight: 600;
    }

/* ── Layout shell (2-col grid, viewport-clamped) ─────────────────────────────
   Pin the entire shell to the visible viewport below the sticky AppHeader.
   Both columns share the same top edge and own their own vertical scroll,
   so a long Tools rail can scroll without dragging the page body - and the
   left rail can never visually drift below the body card. */
.jbf-shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    height: calc(100vh - var(--jbf-header-h, 82px));
    min-height: 0;
    overflow: hidden;
}

    .jbf-shell__header {
        /* Reserved for future in-shell banner; currently unused. */
        display: none;
    }

    .jbf-shell__leftnav {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        align-self: stretch;
    }

    /* Page-level scroll container. Scrollbar visuals come from the global
       universal `*` rule in site.css (auto-hiding thin plum scrollbar) so the
       leftnav and body share identical scroll affordance with no per-element
       custom CSS needed here. */
    .jbf-shell__body {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        align-self: stretch;
        overscroll-behavior: contain;
    }

/* Mobile-shell cutoff: anything below --bp-lg (1024) gets the mobile shell.
   Pixel literals must stay in sync with the --bp-* variables in site.css -
   CSS @media rules can't dereference custom properties. If --bp-mobile-shell-cutoff
   is ever changed, update both the literal here and the corresponding rule
   below the .jbf-mobile-sheet block. */
@media (max-width: 1023.98px) {
    .jbf-shell {
        grid-template-columns: 1fr;
        /* Release the desktop "shell-owns-the-scroll" model on mobile/tablet.
           Desktop pins .jbf-shell to 100vh - header so the leftnav + body each
           own internal scroll (so a long Tools rail can scroll without dragging
           the body). On mobile the leftnav is hidden, there is no second column,
           and the body card already releases its own height clamp at this
           viewport - keeping the shell at 100vh would force .jbf-shell__body's
           overflow-y: auto to render an inner scrollbar (visible right gutter
           on every page) on top of the document scrollbar. Letting the shell
           grow with its content collapses both into a single document scroll. */
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .jbf-shell__leftnav {
        display: none;
    }

    /* The desktop placement pins .jbf-shell__body to grid-column: 2 (column 2
       of the auto/1fr grid). After the leftnav is hidden and the grid collapses
       to a single 1fr track, that pin would push the body into an *implicit*
       second column - leaving the explicit 1fr column as a giant empty gutter
       on the left of every page (the right-shifted layout users hit on iPad
       Air 820, iPad portrait 768, and every phone). Re-pinning to column 1
       puts the body back where the single-track grid expects it.

       Height/overflow are released here for the same reason as .jbf-shell:
       on mobile we want a single document-level scroll, not an inner-container
       scroll. Pages that need an internal scroll region (rare) can opt back
       in via a page-scoped override. */
    .jbf-shell__body {
        grid-column: 1;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .jbf-topnav {
        display: none;
    }
}

/* ── Mobile top-nav sheet (hamburger, single-pane) ───────────────────────────
   Flat drawer that slides DOWN from under the AppHeader. Renders only the top
   sections as direct-navigation rows - per-section drilldown happens on the
   landing page, not inside the menu. The working-location
   chip lives in the mobile AppHeader, so the sheet is purely navigation.

   IMPORTANT - closed-state translation:
   The sheet sits at top:var(--jbf-header-h) so it starts flush below the real
   AppHeader. When closed we MUST translate by `-100% - header-h` (not just
   -100%), otherwise the sheet's bottom edge lands exactly at the header's
   bottom edge, leaving the top `header-h` band of the sheet covering the
   AppHeader. That looked like "the page is missing its header" - the header
   was actually painted underneath an invisible (but opaque) sheet panel.
   Pointer-events:none on closed-state belt-and-braces against any taps that
   try to land in the off-screen region.
   ────────────────────────────────────────────────────────────────────────── */
.jbf-mobile-sheet {
    position: fixed;
    top: var(--jbf-header-h, 82px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 35;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px 40px;
    transform: translateY(calc(-100% - var(--jbf-header-h, 82px)));
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    visibility: hidden;
    box-shadow: 0 8px 32px rgba(2, 25, 34, 0.14);
}

    .jbf-mobile-sheet.is-open {
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    /* Sheet section label at the top to orient the user */
    .jbf-mobile-sheet__nav-label {
        padding: 0 4px 10px;
        font-family: var(--font-overpass, "Overpass", system-ui, sans-serif);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--rz-text-tertiary-color, #6c757d);
    }

    /* Sheet row: simple nav item - icon + label + chevron.
       Active route gets solid plum fill. Icon uses no bubble (clean nav style). */
    .jbf-mobile-sheet__topicon {
        flex: 0 0 auto;
        width: 20px;
        text-align: center;
        font-size: 15px;
        color: var(--jbf-plum, #7d5b81);
        transition: color 0.15s ease;
    }

    .jbf-mobile-sheet__toplabel {
        flex: 1 1 auto;
        min-width: 0;
    }

    .jbf-mobile-sheet__topchev {
        flex: 0 0 auto;
        font-size: 16px;
        line-height: 1;
        color: var(--rz-text-tertiary-color, #adb5bd);
        font-weight: 400;
        transition: color 0.15s ease;
    }

    .jbf-mobile-sheet__topitem {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--events-border-light-color, #e6e8e9);
        font-family: var(--font-overpass);
        font-size: 15px;
        font-weight: 600;
        color: var(--cum-foreground, #021922);
        text-decoration: none;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

        .jbf-mobile-sheet__topitem:hover {
            background: rgba(125, 91, 129, 0.05);
            border-color: rgba(125, 91, 129, 0.25);
        }

        .jbf-mobile-sheet__topitem:hover .jbf-mobile-sheet__topchev {
            color: var(--jbf-plum, #7d5b81);
        }

        .jbf-mobile-sheet__topitem.is-active {
            background: var(--jbf-plum, #7d5b81);
            border-color: var(--jbf-plum, #7d5b81);
            color: #fff;
        }

        .jbf-mobile-sheet__topitem.is-active .jbf-mobile-sheet__topicon,
        .jbf-mobile-sheet__topitem.is-active .jbf-mobile-sheet__topchev {
            color: rgba(255, 255, 255, 0.85);
        }

/* lg+ tier (min-width: 1024px) - hide mobile sheet entirely on desktop */
@media (min-width: 1024px) {
    .jbf-mobile-sheet { display: none; }
    .jbf-mobile-overlay { display: none !important; }
}

/* ── Mobile nav backdrop overlay ────────────────────────────────────────────
   Dims the page content behind the mobile sheet. Tapping it closes the sheet
   (click handler wired in MainLayout.razor). Hidden on lg+ via the rule above.
   The z-index sits one below the sheet (35) so the sheet renders on top.
   ─────────────────────────────────────────────────────────────────────────── */
.jbf-mobile-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 34;
    cursor: pointer;
    pointer-events: none;
    transition: background 0.25s ease;
}

.jbf-mobile-overlay.is-open {
    background: rgba(2, 25, 34, 0.45);
    pointer-events: auto;
}

/* ── Mobile back-link - shown only on xs/sm/md, hidden on desktop ────────────
   Use: <a class="jbf-mobile-back" href="/section">← Back to Section</a>
   Place at the top of any child/drilldown page that loses the left rail.
   ─────────────────────────────────────────────────────────────────────────── */
.jbf-mobile-back {
    display: none;
}

/* xs/sm/md tier (max-width: 1023.98px) mirrors --bp-lg; @media can't deref vars. */
@media (max-width: 1023.98px) {
    .jbf-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 0 14px;
        font-family: var(--font-overpass, "Overpass", system-ui, sans-serif);
        font-size: 14px;
        font-weight: 600;
        color: var(--jbf-pink, #D23C77);
        text-decoration: none;
        cursor: pointer;
    }

    .jbf-mobile-back:hover {
        color: var(--jbf-purple, #7d5b81);
        text-decoration: none;
    }

    .jbf-mobile-back i {
        font-size: 12px;
    }
}

/* ── Owner inline location flyout ────────────────────────────────────────── */
.jbf-loc-flyout {
    margin: -4px 0 8px;
    padding: 8px;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 8px;
    background: var(--jbf-segment-bg, #fff);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .jbf-loc-flyout__item {
        display: block;
        padding: 10px 12px;
        border-radius: 6px;
        font-family: var(--font-overpass);
        font-size: 14px;
        color: var(--rz-text-color, #021922);
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        text-align: left;
        width: 100%;
    }

        .jbf-loc-flyout__item:hover {
            background: var(--rz-primary-lighter);
        }

        .jbf-loc-flyout__item.is-active {
            background: var(--rz-primary-dark);
            color: var(--rz-white, #fff);
        }

/* ── Admin location picker dialog (full-screen on mobile) ────────────────── */
.jbf-locdlg {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 60vh;
    gap: 12px;
}

    .jbf-locdlg__search {
        position: sticky;
        top: 0;
        background: var(--jbf-segment-bg, #fff);
        padding: 4px 0 8px;
        z-index: 1;
    }

    .jbf-locdlg__list {
        flex: 1 1 auto;
        overflow-y: auto;
        border-top: 1px solid var(--events-border-light-color, #e6e8e9);
    }

    .jbf-locdlg__row {
        display: block;
        padding: 12px 12px;
        border-bottom: 1px solid var(--events-border-light-color, #e6e8e9);
        cursor: pointer;
        font-family: var(--font-overpass);
        font-size: 14px;
        color: var(--rz-text-color, #021922);
        background: transparent;
        border-left: none;
        border-right: none;
        border-top: none;
        text-align: left;
        width: 100%;
    }

        .jbf-locdlg__row:hover {
            background: var(--rz-primary-lighter);
        }

        .jbf-locdlg__row.is-active {
            background: var(--rz-primary-lighter);
            color: var(--rz-primary-darker);
            font-weight: 600;
        }