/* ── App shell: fixed sidebar + sticky top bar for logged-in app pages ──
   Lives outside #page/#content/#primary on purpose, and every selector is
   scoped under body.has-app-shell so it can never leak onto public pages
   or be affected by the theme's own #page/#content layout rules. */

:root {
    --bx-shell-sidebar-w: 64px;
    --bx-shell-sidebar-w-expanded: 220px;
    --bx-shell-topbar-h: 64px;
    --bx-shell-accent: #4472c4;
    --bx-shell-border: #e7e9ec;
    --bx-shell-text: #5b6472;
    --bx-shell-text-active: #111827;
}

body.has-app-shell {
    background: #f7f8fa;
}

/* Content is pushed clear of the sidebar/top bar with plain margin/padding —
   the theme's own #page/#content/#primary rules are never touched.
   Expanded is the default on desktop; collapsing is an explicit, remembered
   choice made via the button at the bottom of the sidebar. */
body.has-app-shell #page {
    margin-left: var(--bx-shell-sidebar-w-expanded);
    padding-top: var(--bx-shell-topbar-h);
    transition: margin-left 0.16s ease;
}

body.has-app-shell.bx-sidebar-collapsed #page {
    margin-left: var(--bx-shell-sidebar-w);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.bx-app-sidebar {
    position: fixed;
    top: var(--global--admin-bar--height, 0px);
    left: 0;
    height: calc(100vh - var(--global--admin-bar--height, 0px));
    /* iOS Safari's 100vh is the *largest* viewport (address bar collapsed),
       not what's currently visible — with the address bar showing, that
       overshoots the real screen and pushes content (Log out) off the
       bottom with no way to reach it. dvh tracks the actual visible area;
       browsers that don't support it (pre iOS 15.4) just keep the vh line
       above. */
    height: calc(100dvh - var(--global--admin-bar--height, 0px));
    width: var(--bx-shell-sidebar-w-expanded);
    background: #fff;
    border-right: 1px solid var(--bx-shell-border);
    z-index: 2010;
    display: flex;
    flex-direction: column;
    transition: width 0.16s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.bx-sidebar-collapsed .bx-app-sidebar {
    width: var(--bx-shell-sidebar-w);
}

.bx-app-sidebar__top {
    height: var(--bx-shell-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--bx-shell-border);
}

.bx-app-sidebar__logo {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bx-app-sidebar__logo-img {
    display: block;
    width: 140px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
}

/* Collapsed: shrink to a small square mark instead of the full wordmark. */
body.bx-sidebar-collapsed .bx-app-sidebar__logo-img {
    width: 36px;
    height: 36px;
}

.bx-app-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bx-app-sidebar__nav--bottom {
    border-top: 1px solid var(--bx-shell-border);
    flex-shrink: 0;
    margin-top: auto;
}

.bx-app-sidebar__item {
    position: relative;
}

.bx-app-sidebar__item a,
.bx-app-sidebar__collapse-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 13px;
    border-radius: 8px;
    color: var(--bx-shell-text);
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.bx-app-sidebar__item a i,
.bx-app-sidebar__collapse-btn i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.bx-app-sidebar__item a:hover,
.bx-app-sidebar__collapse-btn:hover {
    background: #f2f4f7;
    color: var(--bx-shell-text-active);
}

.bx-app-sidebar__item.is-active a {
    color: var(--bx-shell-accent);
    background: rgba(68, 114, 196, 0.09);
}

/* Expanded (default): label sits inline next to its icon. */
.bx-app-sidebar__label {
    opacity: 1;
    white-space: nowrap;
}

/* Collapsed: the bar itself stays thin, and hovering an icon pops a
   small tooltip beside it instead of widening the whole bar. */
body.bx-sidebar-collapsed .bx-app-sidebar__label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1d24;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 20;
}

body.bx-sidebar-collapsed .bx-app-sidebar__item a:hover .bx-app-sidebar__label,
body.bx-sidebar-collapsed .bx-app-sidebar__collapse-btn:hover .bx-app-sidebar__label {
    opacity: 1;
    visibility: visible;
}

.bx-app-sidebar__collapse-btn i {
    transition: transform 0.16s ease;
}

body.bx-sidebar-collapsed .bx-app-sidebar__collapse-btn i {
    transform: rotate(180deg);
}

.bx-app-sidebar-backdrop {
    display: none;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.bx-app-topbar {
    position: fixed;
    top: var(--global--admin-bar--height, 0px);
    left: var(--bx-shell-sidebar-w-expanded);
    right: 0;
    z-index: 2000;
    height: var(--bx-shell-topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--bx-shell-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 10px;
    transition: left 0.16s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.bx-sidebar-collapsed .bx-app-topbar {
    left: var(--bx-shell-sidebar-w);
}

.bx-app-topbar__menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--bx-shell-text);
    cursor: pointer;
    padding: 6px;
}

.bx-app-topbar__search {
    position: relative;
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f2f4f7;
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--bx-shell-text);
}

.bx-app-topbar__search i {
    font-size: 14px;
    flex-shrink: 0;
}

.bx-app-topbar__search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    min-width: 0;
}

/* Same autocomplete dropdown Explore's own top search bar used to have
   (now retired there in favour of this one) — same explore_wine_search
   AJAX action, rebuilt under our own classes since the top bar shows on
   every app page and explore.css doesn't load outside Explore itself. */
.bx-app-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 380px;
    overflow-y: auto;
    z-index: 8100;
}

.bx-app-search-dropdown.is-open {
    display: block;
}

.bx-app-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.12s;
}

.bx-app-search-item:last-child {
    border-bottom: none;
}

.bx-app-search-item:hover,
.bx-app-search-item.is-active {
    background: #f0f4ff;
}

.bx-app-search-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    flex-shrink: 0;
    background: #fafafa;
}

.bx-app-search-thumb--empty {
    display: inline-block;
    background: #f0f0f0;
}

.bx-app-search-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bx-app-search-label {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vintage + case size, split onto their own line so a long wine name can't
   truncate them off-screen (they used to be squeezed into the same
   single-line, ellipsis-truncated string as the name). */
.bx-app-search-sub {
    font-size: 12px;
    color: #888;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bx-app-search-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e8eeff;
    color: #4472c4;
}

.bx-app-search-badge--vintage {
    background: #f0f0f0;
    color: #888;
}

.bx-app-search-loading,
.bx-app-search-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #888;
    font-style: italic;
}

.bx-app-search-loading i {
    color: #4472c4;
    font-size: 15px;
    flex-shrink: 0;
}

.bx-app-search-empty {
    font-style: normal;
    color: #aaa;
}

.bx-app-topbar__right {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
}

.bx-app-topbar__notification a {
    display: flex;
    color: var(--bx-shell-text);
    font-size: 18px;
    position: relative;
}

/* Hidden on desktop — shown as a normal item in the main nav list on mobile
   instead, styled identically via the shared .bx-app-sidebar__item a rules
   (see the mobile media query below for the visibility swap). */
.bx-app-sidebar__notification-item {
    display: none;
}

.bx-app-sidebar__badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: red;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.bx-app-topbar__account img {
    border-radius: 50%;
    display: block;
}

.bx-app-topbar__account .fa-circle-user {
    font-size: 28px;
    color: var(--bx-shell-text);
}

/* ── Responsive: off-canvas sidebar below tablet width ─────────────────── */

@media (max-width: 782px) {
    /* Selectors are duplicated at the same specificity as their collapsed-
       state counterparts above (rather than just overridden once) so this
       mobile reset always wins regardless of a stored desktop preference —
       otherwise a visitor who collapsed the sidebar on desktop would see
       that state's higher-specificity rules leak into the mobile layout. */
    body.has-app-shell #page,
    body.has-app-shell.bx-sidebar-collapsed #page {
        margin-left: 0;
    }

    .bx-app-topbar,
    body.bx-sidebar-collapsed .bx-app-topbar {
        left: 0;
    }

    .bx-app-topbar__menu-btn {
        display: block;
    }

    /* Give the name/vintage/size text more room on a narrow dropdown by
       shrinking the badge instead of letting it crowd them out. */
    .bx-app-search-badge {
        font-size: 9px;
        padding: 2px 5px;
        letter-spacing: 0;
    }

    /* iOS Safari auto-zooms the page on focus for any text input with a
       computed font-size under 16px — the 14px desktop size was triggering
       that. 16px here stops the zoom without affecting desktop at all. */
    .bx-app-topbar__search input {
        font-size: 16px;
    }

    .bx-app-sidebar,
    body.bx-sidebar-collapsed .bx-app-sidebar {
        transform: translateX(-100%);
        width: var(--bx-shell-sidebar-w-expanded);
        transition: transform 0.2s ease;
    }

    .bx-app-sidebar__logo-img,
    body.bx-sidebar-collapsed .bx-app-sidebar__logo-img {
        width: 140px;
        height: 28px;
    }

    /* Mobile is always a full slide-in panel — the desktop collapse/expand
       toggle doesn't apply here, so its button is hidden and labels always
       sit inline next to their icon instead of behaving as a hover tooltip. */
    .bx-app-sidebar__label,
    body.bx-sidebar-collapsed .bx-app-sidebar__label {
        position: static;
        transform: none;
        background: none;
        color: inherit;
        padding: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bx-app-sidebar__collapse-item {
        display: none;
    }

    /* Only the main list scrolls internally when it's taller than the
       viewport — the bottom nav (Notifications/Help/Log out) stays pinned
       and visible instead of being pushed off the bottom of the screen.
       Scoped to mobile only: on desktop this same element positions the
       collapsed-mode hover tooltips, which need overflow left alone to
       escape sideways — see the collapsed-state rules above. */
    .bx-app-sidebar__nav:not(.bx-app-sidebar__nav--bottom) {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Notifications move from the top bar into the sidebar's bottom nav on
       mobile — the top bar is too cramped to also fit a bell icon there
       alongside the menu button, search, and account avatar. */
    .bx-app-topbar__notification {
        display: none;
    }

    .bx-app-sidebar__notification-item {
        display: block;
    }

    body.bx-sidebar-open .bx-app-sidebar {
        transform: translateX(0);
    }

    body.bx-sidebar-open .bx-app-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        /* Must sit strictly between the top bar (2000) and the sidebar
           (2010) — above the top bar so it dims/disables it too while the
           menu is open, below the sidebar so the slid-in menu itself stays
           crisp and clickable on top of the dimmed backdrop. */
        z-index: 2005;
    }
}