/* Organizer navigation presentation. Registered by OrganizerNavigationAppearanceAsset. */

@media only screen and (max-width: 767px) {
    /* --- Navigation toggle button --- */
    .ui-refresh #secondary-nav-btn {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-default) !important;
        border-radius: var(--radius-md) !important;
        color: var(--fg-default) !important;
        font-size: var(--font-size-sm);
        font-weight: 500;
        box-shadow: none !important;
        outline: none !important;
    }

    /* --- Sidebar navigation dropdown — increase top padding only when open
       so the first nav item clears the "Navigation" toggle button that
       overlays the top of #secondary-nav on mobile. When closed (height:0),
       no extra padding so content doesn't leak out. --- */
    .ui-refresh:where(:not(.has-organizer-menu)) #secondary-nav.open {
        padding-top: var(--space-12) !important;
    }

    /* --- Sidebar: Create New button needs extra top margin on mobile ---
       The nav button (40px tall at top:72px) overlaps the sidebar (also top:72px).
       Sidebar padding-top is ~12px (cascade issue), so content starts at 84px
       while the button ends at 112px = 28px overlap. Add enough margin to clear it. */
    .ui-refresh:where(:not(.has-organizer-menu)) .account-nav-switcher-row {
        margin-top: 30px !important;
    }

}

@media only screen and (max-width: 767px) {
    /* Quick links dropdown — constrain to viewport on small tablets */
    .ui-refresh #event-navbar-details .dropdown-menu {
        min-width: 0;
        width: calc(100vw - var(--space-6));
    }
}

/* Retained main/admin/workspace Bootstrap navbar and fixed rail geometry.
   Zero-specificity guards preserve the legacy cascade without competing with
   the adopted Grid/Flex layout. Admin open state remains Bootstrap-owned. */

/* The legacy #account-details is pinned to a fixed width:40% (60% at narrower
   widths), so its big empty box — z-index:1030 — sits over the left nav and
   intercepts clicks on the bookmark/quick-nav. Shrink it to its content and
   centre it (matching #event-navbar-details) with a collision-safe cap, so it
   only ever covers the account name itself and can't overrun the left cluster. */
body:where(:not(.has-organizer-menu)).ui-refresh #account-details {
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(40vw, calc(100vw - 640px));
}

/* Admin dropdown opens on CLICK in ui-refresh, not hover. The legacy grid menu
   is revealed purely by CSS (`.admin:hover ul` in navigation.css), so the JS
   `.open` toggle alone doesn't drive it. Suppress the hover reveal and key
   visibility off the `.open` class the click handler sets (app.js
   initHoverDropdowns). */
body.ui-refresh #admin-nav:hover > ul {
    visibility: hidden;
}

body.ui-refresh #admin-nav.open > ul {
    visibility: visible;
    /* Keep the 3-column grid while open. Bootstrap's `.open > .dropdown-menu`
       (specificity 0,2,0) otherwise beats `.admin ul { display: grid }`
       (0,1,1) and forces display:block once `.open` is set — but only while
       NOT hovered, since `.admin:hover ul` (0,2,1) restores grid. That made
       the popover reflow (grid ↔ block) as the cursor entered/left. */
    display: grid !important;
}


/* === Top-bar layout: proper flexbox alignment ===
   The Bootstrap .navbar uses floats internally; we convert to flex so every
   element in the bar is vertically centered in the 60px navbar height. */
/* 1. Navbar itself: flex row, vertically centered */
.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
}

/* Logo: center the brand SVG within the navbar height. The logo→quick-nav gap
   lives here (padding-right) so it's defined in one place — space-4 (16px). */
body.ui-refresh .navbar-custom .navbar-header {
    float: none !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--space-4) 0 0;
}

/* Left-align the logo with the sidebar content edge (= the Create New button):
   the account-nav insets its content by padding var(--space-2) plus its
   reserved scrollbar-gutter, so the logo starts at that same x for a clean
   left rail. No right padding here — the gap to the nav lives on
   .navbar-header above. */
body.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 0 calc(var(--space-2) + 12px) !important;
    height: 100% !important;
    line-height: 1 !important;
    float: none !important;
}

body.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) .navbar-brand img {
    height: 28px !important;
    width: auto !important;
    display: block;
}


/* 2. Collapse fills remaining space as a flex row */
body.ui-refresh .navbar-custom .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    float: none !important;
    padding: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}


/* 3. Right-side order: search first (margin-left:auto pushes it right),
   then grid/bell/avatar — so order is [nav links] … [🔍] [grid·bell·avatar] */
body.ui-refresh .navbar-custom .navbar-collapse > .navbar-right {
    float: none !important;
}

body.ui-refresh .navbar-custom .navbar-collapse .nav-search {
    order: 1;
    margin-left: auto !important;
}

body.ui-refresh .navbar-custom .navbar-collapse .nav-profile {
    order: 2;
    margin-left: 4px !important;
    display: flex !important;
    align-items: center !important;
}


/* === Quick-nav links (Events / Contacts / Recent / Bookmarks) ===
   Design spec: font-size:13px; font-weight:600; color:var(--muted);
                gap:var(--space-5) (20px) between items — on the 4px scale and
                ~1.5x the 13px type for comfortable scanning; padding:4px 2px
                per item; gap:5px label→caret */
body.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) #main-nav {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-5) !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) #main-nav > li {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}

body.ui-refresh .navbar-custom:where(:not(.organizer-header__navbar)) #main-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    padding: 4px 2px !important;
    line-height: 1 !important;
}


/* Secondary thin bar above content */
body.ui-refresh .subnav {
    background: var(--bg-page) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.ui-refresh:where(:not(.has-organizer-menu)) #event-navbar-details {
    position: fixed;
    top: 0;
    height: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    /* Cap to the SMALLER of an aesthetic 40vw and the space actually free
       between the side clusters (~320px reserved each side). `min()` — not
       `max()` — so at narrow widths the centred title can't overrun the left
       nav (logo/quick-nav/bookmark) and swallow their clicks. */
    max-width: min(40vw, calc(100vw - 640px));
}

.ui-refresh:where(:not(.has-organizer-menu)) #secondary-nav {
    top: 60px !important;
}

/* Hide the legacy collapse chevron by default in ui-refresh — on tablet-sized
   account pages the existing collapsed secondary-nav flow still needs it as
   the only visible control that can reopen the nav. */
body.ui-refresh #secondary-nav .submenu-responsive {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 992px) {
    body.ui-refresh #secondary-nav.account-nav .submenu-responsive {
        display: block !important;
    }}


/* ===== Account nav: Collapse control (icon-only rail) ===== */
/* Snap, don't slide: kill the legacy `transition: width .3s` on both the nav
   and the content-reserving wrapper so pinning is instant. */
.ui-refresh #secondary-nav.account-nav,
.ui-refresh .responsive-account-setup.nav-margin {
    transition: none !important;
}


@media (min-width: 993px) {
    .ui-refresh:where(:not(.has-organizer-menu)) #secondary-nav.account-nav.pinned {
        width: 56px !important;
        overflow-x: hidden;
    }

    /* Content offset: shrink the reserved margin from the full panel to the rail.
       Match the fixed content width to the same 56px chrome so full-width layouts
       reclaim the desktop space instead of keeping the legacy 295px subtraction. */
    .ui-refresh .responsive-account-setup.nav-margin.account-nav-pinned {
        margin-left: 56px !important;
    }

    .ui-refresh .responsive-account-setup.nav-margin.account-nav-pinned .full-width {
        width: calc(100vw - 56px) !important;
    }}


/* General collapse chevron for event-page sidebars (no .account-nav). The
   base rule in layout.css hardcodes a white background + lavender border,
   which never adapts to dark mode. Re-point at surface tokens so the button
   follows warm/bright/dark automatically. */
.ui-refresh #secondary-nav .submenu-responsive {
    color: var(--fg-subtle);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: none;
    padding: var(--space-3) var(--space-1);
    cursor: pointer;
}

.ui-refresh .collapsed .submenu-responsive {
    margin-left: 6px;
}

.ui-refresh #secondary-nav .submenu-responsive:hover {
    color: var(--fg-default);
    background-color: var(--state-hover);
}

.ui-refresh #secondary-nav .submenu-responsive .fal {
    font-size: var(--font-size-base);
    font-weight: 400 !important;
}


/* EXPANDED: 180px total column (design sidebar width). The fixed-position
   column needs an explicit width since its children are width-driven; the
   anchors then fill the 152px inner (180 − 28px nav padding). */
body:where(:not(.has-organizer-menu)).ui-refresh #icon-nav.is-expanded {
    width: 190px !important;
}


/* COLLAPSED (user pinned to icon-only): override the is-expanded rules.
   The element keeps the PHP-applied .is-expanded class, so these collapsed
   overrides use .is-expanded.is-collapsed (2 classes) to win on specificity.
   Fixed 56px (measured) instead of auto so the secondary-nav/content offsets
   below can be authored in pure CSS — no JS measurement, no first-paint jump. */
body:where(:not(.has-organizer-menu)).ui-refresh #icon-nav.is-expanded.is-collapsed {
    width: 56px !important;
}


/* === Secondary-nav + content offsets: CSS-authoritative (no JS jump) ===
   Desktop-only: tablet/mobile already have responsive overrides in layout.css
   that collapse these offsets, so keep the ui-refresh rail math above 992px.
   The event icon-nav is a fixed-width rail (190px expanded, 56px collapsed).
   The secondary nav (249px) sits flush against it, and content clears both.
   PHP renders `.has-event-icon-nav` + (optionally) `.nav-collapsed` on <body>
   from the nav-collapse cookie, so these offsets are correct at first paint —
   the JS no longer measures + sets inline left/margin after load. Scoped to
   .has-event-icon-nav so the account-hub (which also uses .nav-margin but has
   no 180px rail) is untouched. */
@media (min-width: 993px) {
    body:where(:not(.has-organizer-menu)).ui-refresh.has-event-icon-nav #secondary-nav:not(.account-nav) {
        left: 190px;
    }

    body.ui-refresh.has-event-icon-nav .nav-margin {
        margin-left: 439px !important; /* 190 rail + 249 secondary */
    }

    body.ui-refresh.has-event-icon-nav .icon-nav-margin {
        margin-left: 190px;
    }

    body:where(:not(.has-organizer-menu)).ui-refresh.has-event-icon-nav.nav-collapsed #secondary-nav:not(.account-nav) {
        left: 56px;
    }

    body.ui-refresh.has-event-icon-nav.nav-collapsed .nav-margin {
        margin-left: 305px !important; /* 56 rail + 249 secondary */
    }

    body.ui-refresh.has-event-icon-nav.nav-collapsed .icon-nav-margin {
        margin-left: 56px;
    }

    /* The fixed-position content uses .full-width { width: calc(100vw - <rail>) }
       from the legacy layout.css, where <rail> is the OLD ~59px / 295px rail. Our
       rail is 180/56 (and +249 secondary), so the width must subtract the same
       amount the margin above adds — otherwise the content is ~121px too wide and
       spills past the viewport whenever the rail is expanded. */
    body.ui-refresh.has-event-icon-nav:not(.nav-collapsed) .icon-nav-margin .full-width {
        width: calc(100vw - 190px) !important;
    }

    body.ui-refresh.has-event-icon-nav:not(.nav-collapsed) .nav-margin .full-width {
        width: calc(100vw - 439px) !important;
    }

    body.ui-refresh.has-event-icon-nav.nav-collapsed .icon-nav-margin .full-width {
        width: calc(100vw - 56px) !important;
    }

    body.ui-refresh.has-event-icon-nav.nav-collapsed .nav-margin .full-width {
        width: calc(100vw - 305px) !important;
    }}