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

/* Bootstrap 3 strips border-top-radius on navbar dropdowns; restore it */
body.ui-refresh .navbar-custom .dropdown-menu {
    border-radius: var(--radius-lg) !important;
}
/* Top-nav dropdown items match their triggers: 13px, same color as the
   event-URL dropdown font (--fg-default). Scoped to the top navbar so other
   ui-refresh dropdowns keep the default 14px. */
body.ui-refresh .navbar-custom .dropdown-menu > li > a,
body.ui-refresh .navbar-custom .dropdown-menu > li.dropdown-header {
    font-size: 13px;
    color: var(--fg-default);
}
/* Nav dropdown AJAX loading placeholder (Recent / Bookmarks): skeleton rows
   reusing the dashlet skeleton primitives (skeleton-bar / skeleton-line-*).
   Injected by App.navDropdownLoadingHtml() while the menu contents load. */
.ui-refresh .dropdown-menu > li.dropdown-loading {
    display: block;
    padding: var(--space-2) var(--space-4);
}
.ui-refresh .dropdown-menu > li.dropdown-loading .skeleton-bar {
    display: block;
    height: 10px;
    /* Not --bg-muted (the skeleton-bar default): on dark surfaces it sits a
       hair below the dropdown's --bg-surface and disappears. --state-hover is
       an alpha overlay, so it reads on whatever surface the menu paints. */
    background: var(--state-hover);
}
.ui-refresh .dropdown-menu > li.dropdown-loading .skeleton-line-full,
.ui-refresh .dropdown-menu > li.dropdown-loading .skeleton-line-medium {
    margin-bottom: var(--space-2);
}

/* =====================================================================
   PAPER-AWARE CHROME
   ---------------------------------------------------------------------
   The paper-system tokens cover ui-refresh content by default, but a lot
   of the surrounding chrome — top navbar, dropdown menus, form inputs,
   modals — is styled in legacy backend.css with hardcoded values that
   don't follow the tokens. Without these rules, dark mode lights up the
   dashboard area but leaves the navbar and dropdowns blindingly bright.
   Every rule below points at a flipping token from tokens.css, so a
   single declaration is correct in all surface modes — no mode-specific
   overrides. tokens.css is the single source of truth for surface tones. */

body.ui-refresh .navbar-custom.navbar-inverse,
body.ui-refresh .navbar-inverse.navbar-fixed-top {
    background: var(--bg-page) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}
body.ui-refresh .navbar-inverse .navbar-nav > li > a,
body.ui-refresh .navbar-inverse .navbar-text,
body.ui-refresh .navbar-inverse .navbar-brand {
    color: var(--fg-default) !important;
}
body.ui-refresh .navbar-inverse .navbar-nav > li > a:hover,
body.ui-refresh .navbar-inverse .navbar-nav > li > a:focus {
    color: var(--ink) !important;
    background: var(--bg-muted) !important;
}

/* External shared reports retain a non-inverse navbar. Organizer inverse
   navbars already get their border and shadow from the surface rule above. */
body.ui-refresh .navbar-custom:where(:not(.navbar-inverse)) {
    border-bottom-color: transparent;
    box-shadow: var(--shadow-top-navbar);
}

/* Account/event details bar in the navbar (jltimm (#1)) */
body.ui-refresh #account-details,
body.ui-refresh #event-navbar-details {
    color: var(--fg-default) !important;
}
body.ui-refresh #account-details .event-name,
body.ui-refresh #event-navbar-details .event-name {
    color: var(--fg-default) !important;
}

/* Search input in navbar */
body.ui-refresh .nav-search .form-control {
    background: var(--bg-page) !important;
    border-color: var(--border-default) !important;
    color: var(--fg-default) !important;
}
body.ui-refresh .nav-search .form-control::placeholder {
    color: var(--fg-subtle) !important;
}
/* Legacy navbar search (main.php) — same treatment so it flips in dark. */
body.ui-refresh .navbar-form .form-control {
    background: var(--bg-page) !important;
    border-color: var(--border-default) !important;
    color: var(--fg-default) !important;
}
body.ui-refresh .navbar-form .form-control::placeholder {
    color: var(--fg-subtle) !important;
}


/* === Top-bar search (ui-refresh) ===
   Collapsed: just the magnifier button. Open: an absolutely-positioned panel
   (anchored to the button's right edge) expands LEFT into the empty topbar
   space — never overlapping the grid/bell/avatar that sit to its right. */
body.ui-refresh .nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
/* Magnifier toggle button — sized to match the grid/bell icon buttons */
body.ui-refresh .ui-search-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg-muted);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
}
body.ui-refresh .ui-search-btn:hover {
    color: var(--fg-default);
    background: var(--state-hover);
}
body.ui-refresh .nav-search.is-open .ui-search-btn {
    visibility: hidden;
}
/* Panel anchored to the right edge of .nav-search, expands leftward */
body.ui-refresh .ui-search-panel {
    position: absolute;
    right: 0;
    top: calc(50% - 16px); /* center in 60px navbar without transform */
    z-index: 1050; /* above Bootstrap dropdowns (1000) and the navbar (1030) so the results dropdown escapes page content */
}
/* The form is the visible search box — no shadow (it's part of the topbar,
   not a floating card). Border appears on open to delineate the input area. */
body.ui-refresh .ui-search-panel #search-form {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    transition: width 0.22s ease-out, opacity 0.15s ease-out;
}
body.ui-refresh .nav-search.is-open .ui-search-panel #search-form {
    width: 320px;
    opacity: 1;
    border-color: var(--border-default);
    background: var(--bg-page);
}
/* The form's overflow:hidden (needed for the slide-open width animation) also
   clips the type-selector dropdown, which opens below the 32px-tall box. Bootstrap
   adds .open to the .ui-search-type wrapper while the dropdown is open, so un-clip
   only then — by that point the panel has finished expanding, so nothing spills
   during the open animation. */
body.ui-refresh .ui-search-panel #search-form:has(.ui-search-type.open) {
    overflow: visible;
}
/* Leading magnifier inside the box */
body.ui-refresh .ui-search-lead {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--fg-subtle);
}
/* Input fills the middle */
body.ui-refresh .ui-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 32px;
    font-size: var(--font-size-sm);
    color: var(--fg-default);
    font-family: var(--font-family);
    padding: 0 var(--space-1) 0 0;
}
body.ui-refresh .ui-search-input::placeholder {
    color: var(--fg-subtle);
}
/* Events type selector at the trailing edge.
   Override Bootstrap's .input-group-btn { width: 1% } which collapses it. */
body.ui-refresh .ui-search-type {
    flex: 0 0 auto;
    width: auto !important;
    display: flex !important;
}
body.ui-refresh .ui-search-type .btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 32px;
    color: var(--fg-muted) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium);
    padding: 0 var(--space-3) !important;
    margin: 0 !important;
}
body.ui-refresh .ui-search-type .btn:hover {
    background: var(--state-hover) !important;
    color: var(--fg-default) !important;
}

/* === Topbar icon buttons (grid, bell, avatar) ===
   .nav-profile is display:flex from the collapse rules below. We flex ONLY the
   real desktop items (:not(.visible-xs)) — the .visible-xs mobile menu rows
   (My Profile / Switch Account / Admin / Logout) MUST stay hidden on desktop;
   forcing display on them leaks the text into the bar. */
body.ui-refresh .navbar-custom .nav-profile > li:not(.visible-xs) {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}
@media (min-width: 768px) {
    body.ui-refresh .navbar-custom .nav-profile > li.visible-xs,
    body.ui-refresh .navbar-custom .navbar-nav > li.visible-xs,
    body.ui-refresh .navbar-custom #main-nav > li.visible-xs {
        display: none !important;
    }}
body.ui-refresh .navbar-custom .nav-profile > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    color: var(--fg-default) !important;
    background: transparent !important;
    line-height: 1 !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}
body.ui-refresh .navbar-custom .nav-profile > li > a:hover,
body.ui-refresh .navbar-custom .nav-profile > li > a:focus {
    background: var(--state-hover) !important;
    color: var(--fg-default) !important;
}
/* Icons: 16px glyph at weight 300 (FA Pro Light) in muted gray so the
   grid/bell read as quiet utility tools matching the thin SVG search icon —
   not bold focal points. Hover lifts to the default ink for feedback. */
body.ui-refresh .navbar-custom .nav-profile > li > a i,
body.ui-refresh .navbar-custom .nav-profile > li > a .fa-2x {
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: var(--fg-muted) !important;
}
body.ui-refresh .navbar-custom .nav-profile > li > a:hover i,
body.ui-refresh .navbar-custom .nav-profile > li > a:focus i {
    color: var(--fg-default) !important;
}
/* Divider between the icon cluster and the avatar (design spec) */
body.ui-refresh .navbar-custom .nav-profile > li#profile-tab {
    margin-left: var(--space-2) !important;
    padding-left: var(--space-3) !important;
    border-left: 1px solid var(--border-default) !important;
}
/* Avatar stays as-is (it's an image, not an icon) — just fix the container */
body.ui-refresh .navbar-custom .nav-profile > li.has-avatar > a,
body.ui-refresh .navbar-custom .nav-profile > li > a:has(img) {
    width: auto !important;
    padding: 0 4px !important;
}
/* navigation.css gives .navbar-nav a 5px top margin, which drops this cluster
   ~2px below the bar's vertical center while the search button (separate
   container) stays centered. Zero it so the whole right side lines up. */
body.ui-refresh .navbar-custom .nav-profile {
    margin-top: 0 !important;
}
/* Notification badge: smaller + tighter so it reads as a count dot on the
   16px bell rather than a heavy blob (notifications.css ships an 18px badge). */
body.ui-refresh #app-notifications .notification-badge {
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 8px;
    font-weight: 700;
    top: 4px;
    right: 4px;
    padding: 0 3px;
}

/* === Swoogo Admin grid menu (#admin-nav dropdown) ===
   Staff-only 3-column launcher in the top bar. navigation.css:118-192 styles it
   for the legacy UI: every cell is a centred icon-over-label stack
   (`.admin ul li i { display: block }`) at fa-2x, on top of gap:16px + li
   padding:10px + the generic .dropdown-menu anchor padding. That measures
   ~807x851 and scrolls at max-height:85vh (issue #3123). It also hardcodes
   swoogo-gray/lavender with !important, so on dark paper the labels
   (gray-800), headings (gray-900) and dividers (gray-300) are unreadable or
   glaring.

   navigation.css, utility.css and staff-indicator.css all ship in
   LoggedInAsset -- they load in legacy mode too -- so nothing there is
   edited. This block is additive and gated on body.ui-refresh. Every
   selector below carries the #admin-nav id, so it outranks all of
   navigation.css on specificity; !important appears only where the legacy
   declaration being overridden is itself !important (flagged inline).

   The .open/visibility mechanics live in the section above and are
   deliberately NOT duplicated here. In particular nothing below declares
   `display` on the <ul>: `.admin ul { display: grid }` (0,1,1) already beats
   Bootstrap's `.dropdown-menu { display: none }` (0,1,0), so this menu is
   ALWAYS display:grid and is hidden purely with `visibility`. An id-level
   `display` here would strand it visible when closed. */

/* Container. 4px row rhythm / 8px column gutter + an 8px inset. */
body.ui-refresh #admin-nav > ul.dropdown-menu {
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2);
    text-align: left;
    /* `.admin ul { transition: visibility .4s ease }`: visibility interpolates
       as a step function, so hidden->visible is instant but visible->hidden
       lags 400ms and click-to-close feels broken. Every other ui-refresh
       dropdown snaps. */
    transition: none;
}

/* Cells: the <li> is only a grid item; all padding and the hover rect move to
   the <a> so the whole cell is one clickable, uniformly rounded row.
   Deliberately NOT min-width:0 here: with `white-space: nowrap` labels, an
   explicit 0 disables the browser's content-based automatic minimum size for
   the grid item, and the (shrink-to-fit, absolutely positioned) menu can
   collapse each column toward zero instead of sizing to fit its labels. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border-radius: 0;
}
/* `.admin ul li:not(.heading, .build-id):hover { background: swoogo-gray-100 }`
   (#F5F5F5FA) is a near-white glare block on dark paper. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li:hover {
    background-color: transparent;
}

/* Compact icon + label row, ~32px tall (accounting for the staff badge --
   see below), replacing the ~97px centred stack. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: var(--line-height-sm);
    white-space: nowrap;
    text-align: left;
    /* !important REQUIRED: `.admin ul li a { color: var(--swoogo-gray-800)
       !important }` (#343A40) is what makes all 28 labels near-invisible on
       dark -- it beats the tokenised --fg-default at 5231/5255. */
    color: var(--fg-default) !important;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
/* !important REQUIRED: `.admin ul li a { background-color: transparent
   !important }` otherwise swallows the hover fill. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:hover,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:focus,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:focus-visible {
    background-color: var(--state-hover) !important;
    color: var(--fg-default) !important;
}

/* Icons: 14px glyph in a fixed 16px optical box so labels align down each
   column regardless of glyph width. Neutralises `.admin ul li i
   { display: block }` -- the actual cause of the stacked cell -- and its
   hardcoded --swoogo-lavender-300 (#534AEB), which also ignored the
   data-accent setting. margin is zeroed (the generic
   `.ui-refresh .dropdown-menu > li > a > i` rule sets margin-right) in favour
   of the flex gap. line-height:1 keeps the box hugging the glyph so the
   composite badge below stays anchored to the icon rather than a 20px line
   box. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a > i,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a > .ga-wl-icon {
    flex: 0 0 16px;
    display: inline-block;
    width: 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: var(--fg-muted);
}
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:hover > i,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:focus > i,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:hover > .ga-wl-icon,
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a:focus > .ga-wl-icon {
    color: var(--fg-default);
}
/* Composite icon (Go Attend White-Label = mobile + palette badge). Its <i>s
   are NOT direct children of the <a>, so neither the rule above nor the
   generic `> a > i` combinator reaches them -- that is exactly why these two
   glyphs alone stayed saturated indigo while the other 28 went muted grey.
   utility.css also hardcodes `background: #fff` on the badge punch-out,
   which is a white dot on dark paper. */
body.ui-refresh #admin-nav .ga-wl-icon > i {
    display: inline;
    color: inherit;
    font-size: inherit;
}
body.ui-refresh #admin-nav .ga-wl-icon__badge {
    background: var(--bg-surface);
}

/* Headings + build row are the two full-width rows. `grid-column: 1 / -1`
   rather than the legacy `span 3` so the 2-column step below cannot spawn an
   implicit 3rd column. display:block also fixes a latent bug: as flex
   containers these <li>s would collapse the leading whitespace of their
   anonymous text item, eating the space after "build:" in the footer row. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li.heading,
body.ui-refresh #admin-nav > ul.dropdown-menu > li.build-id {
    display: block;
    grid-column: 1 / -1;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}
body.ui-refresh #admin-nav > ul.dropdown-menu > li.heading {
    /* !important REQUIRED: `.mt-10 { margin-top: 10px !important }`
       (utility.css) sits on 4 of the 5 headings and on the build row. */
    margin-top: var(--space-3) !important;
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-weight: var(--font-weight-semibold);
    /* was --swoogo-gray-900 (#0D0D0D): invisible on dark */
    color: var(--fg-muted);
    /* was --swoogo-gray-300 (#DEE2E6): far brighter than the dark --line */
    border-bottom: 1px solid var(--border-default);
}
body.ui-refresh #admin-nav > ul.dropdown-menu > li.heading:first-child {
    margin-top: 0 !important;
}
body.ui-refresh #admin-nav > ul.dropdown-menu > li.build-id {
    margin-top: var(--space-3) !important;
    padding: var(--space-2) var(--space-2) 0;
    /* was --swoogo-gray-600 (#6B7280), under the dark --muted-2 floor */
    color: var(--fg-subtle);
    border-top: 1px solid var(--border-default);
}

/* The 7 badged rows wrap their label in a <div class="inline-staff-indicator">
   inside the inline <a>. `.ui-refresh .inline-staff-indicator` already makes
   it inline-flex (see above in this file), so the div-in-inline-a case is
   handled -- restated here only for a tighter 4px gap. No min-width:0: since
   all cells in a grid column share one track width regardless of row, a wide
   badge already can't inflate anything but its OWN column, and a fixed 0
   would zero the badge's min-content contribution to that sizing instead
   (risking the badge itself getting clipped). The badge itself is compacted
   to fit inside the 20px label line-box so badged rows keep the same height
   as plain ones. */
body.ui-refresh #admin-nav > ul.dropdown-menu > li > a > .inline-staff-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
/* `.ui-refresh .badge` (padding:2px 10px + 1px border, line-height:150%) is
   24px tall, which overflows the 20px label line-box and would make badged
   rows taller than plain ones. Compact it to fit inside this one menu. */
body.ui-refresh #admin-nav .staff-indicator {
    line-height: 16px;
    padding: 0 var(--space-2);
    border-width: 0;
}

/* Trigger states. The shared `.nav-profile > li > a` rule forces
   `background: transparent !important` and the glyph to --fg-muted
   !important, so today the grid button has no pressed affordance and looks
   identical to the bell even while you are inside the admin module (Nav sets
   .active on #admin-nav; `.admin.active` in navigation.css is fully
   overridden). */
body.ui-refresh #admin-nav.open > a {
    background: var(--state-hover) !important;
}
body.ui-refresh #admin-nav.active > a i,
body.ui-refresh #admin-nav.open > a i {
    color: var(--accent-primary) !important;
}

/* Below 1200px navigation.css hides `li.admin`, but the ui-refresh topbar
   rule `.nav-profile > li:not(.visible-xs) { display: flex !important }`
   (see above in this file) un-hides it -- so the menu IS reachable at
   768-1199px, where 3 columns (~750px) run off the left edge. Drop to 2; the
   full-width rows follow via `grid-column: 1 / -1`. Plain `1fr` (not
   `minmax(0, 1fr)`) so each column keeps its content-based automatic minimum
   -- see the note on the <li> rule above for why an explicit 0 collapses a
   nowrap column instead of sizing it to fit. */
@media (max-width: 1200px) {
    body.ui-refresh #admin-nav > ul.dropdown-menu {
        grid-template-columns: repeat(2, 1fr);
    }}

/* === Top-bar search results dropdown ===
   Results are position:absolute inside .ui-search-panel (no transform on the
   panel — we use calc() for centering instead, so fixed children stay relative
   to the viewport and absolute children to the panel as expected).
   The panel sits at z-index 1050 inside the fixed navbar, which puts the
   dropdown above page content (z-index auto) without fighting Bootstrap.
   Font weight: h4 + .fwb stacks to 700 — too heavy in Inter; reduce to medium. */
body.ui-refresh .nav-search .results {
    top: 36px;
    right: 0;
    width: 320px;
    border: 1px solid var(--border-default);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 10;
}
body.ui-refresh .nav-search .results .list-group {
    border-radius: 0;
    margin: 0;
}
body.ui-refresh .nav-search .results .list-group-item {
    border-left: 0;
    border-right: 0;
    border-color: var(--border-subtle);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--fg-default);
    transition: background var(--transition-fast);
}
body.ui-refresh .nav-search .results .list-group-item:first-child {
    border-top: 0;
    border-radius: 0;
}
body.ui-refresh .nav-search .results .list-group-item:last-child {
    border-radius: 0;
}
body.ui-refresh .nav-search .results .list-group-item:hover {
    background: var(--state-hover);
    color: var(--fg-default);
}
/* The heading uses h4 (browser-bold) + .fwb (700) — reduce to medium in Inter */
body.ui-refresh .nav-search .results .list-group-item-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.3;
    margin: 0 0 var(--space-1);
    color: var(--fg-default);
}
body.ui-refresh .nav-search .results .list-group-item-text {
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    margin: 0;
}
/* Skeleton loading rows — reuse the same list-group-item padding so the
   panel doesn't resize when real results swap in. */
body.ui-refresh .nav-search .results .search-skeleton-item {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
body.ui-refresh .nav-search .results .search-skeleton-item:last-child {
    border-bottom: 0;
}
body.ui-refresh .nav-search .results .search-skeleton-title {
    height: 13px;
    width: 72%;
    margin-bottom: var(--space-1);
}
body.ui-refresh .nav-search .results .search-skeleton-sub {
    height: 11px;
    width: 48%;
}
body.ui-refresh .navbar-custom #main-nav > li > a {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--fg-default) !important;
    background: transparent !important;
    transition: color var(--transition-fast) !important;
}
body.ui-refresh .navbar-custom #main-nav > li > a:hover,
body.ui-refresh .navbar-custom #main-nav > li > a:focus-visible,
body.ui-refresh .navbar-custom #main-nav > li.open > a {
    color: var(--accent-primary) !important;
    background: transparent !important;
}
/* Bookmark toggle: when the current page is bookmarked, its icon carries
   `.bookmarked`. Surface the active state in the accent colour instead of the
   default muted nav-icon colour it would otherwise inherit. */
body.ui-refresh .navbar-custom #update-bookmark .fa-bookmark.bookmarked {
    color: var(--accent-primary) !important;
}
/* Give the bookmark toggle the same boxed icon-button outline as the
   favourite star (#event-navbar-details .event-set-favorite). The extra
   `#organizer-header` ancestor id is needed to out-specificity the
   `#main-nav > li > a` color rule above, which also carries !important. */
body.ui-refresh #organizer-header .navbar-custom #update-bookmark > a {
    display: inline-grid !important;
    place-items: center !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--fg-subtle) !important;
}
body.ui-refresh #organizer-header .navbar-custom #update-bookmark > a:hover,
body.ui-refresh #organizer-header .navbar-custom #update-bookmark > a:focus-visible {
    color: var(--accent-primary) !important;
}

/* Caret: replace Bootstrap CSS triangle with ▾ text character at 9px,
   matching design spec exactly (.car { font-size:9px; color:var(--muted-2) }) */
body.ui-refresh .navbar-custom #main-nav .caret {
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--fg-subtle) !important;
    vertical-align: baseline !important;
    /* The ▾ glyph's ink sits in the lower half of its em box, so flex
       centering leaves it looking too low — nudge it up to optically centre. */
    transform: translateY(-1px) !important;
}
body.ui-refresh .navbar-custom #main-nav .caret::before {
    content: '▾';
}
body.ui-refresh .navbar-custom #main-nav > li > a:hover .caret,
body.ui-refresh .navbar-custom #main-nav > li.open > a .caret {
    color: var(--accent-primary) !important;
}

/* All other .caret elements in the topbar (event-identity dropdown) — use
   the same ▾ glyph treatment as #main-nav so all topbar chevrons match. */
body.ui-refresh .navbar-custom .caret {
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--fg-subtle) !important;
    vertical-align: baseline !important;
    transform: none !important;
}
body.ui-refresh .navbar-custom .caret::before {
    content: '▾';
}


/* ===== Event Name in Navbar (replaces event-details bar) ===== */
/* Mirrors #account-details horizontal positioning. Vertical centering uses
   flexbox so it stays centered regardless of content height (buttons, star). */
.ui-refresh #event-navbar-details {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1030;
    text-align: center;
    padding: 10px 0;
}
/* event-details becomes static so it doesn't interfere with dropdown positioning.
   text-align: center keeps the inline-flex event-name centered. */
.ui-refresh #event-navbar-details .event-details {
    background: transparent;
    padding: 4px 10px;
    border: none;
    border-bottom: none;
    z-index: auto;
    position: static;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    max-width: 100%;
    min-width: 0;
}
/* inline-flex shrinks to content width so the dropdown centers on the actual
   text, not the full-width container. position: relative makes it the
   positioning context for the dropdown. */
.ui-refresh #event-navbar-details .event-name {
    color: var(--fg-default);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    gap: var(--space-2);
    position: relative;
    white-space: nowrap;
}
.ui-refresh #event-navbar-details .event-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Event status indicator (ui-refresh navbar only): dot · bold name · status pill · #id chip */
.ui-refresh #event-navbar-details .event-name-text {
    font-weight: var(--font-weight-semibold);
    color: var(--fg-default);
}
.ui-refresh #event-navbar-details .event-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
}
.ui-refresh #event-navbar-details .event-status-dot[data-status="live"] {
    background: var(--color-success);
}
.ui-refresh #event-navbar-details .event-status-dot[data-status="cancelled"] {
    background: var(--color-error);
}
/* .event-status-pill rules moved to components.css as the shared .status-pill
   component (see "Status pill" there) so the CFS site-status badge can reuse
   the same draft/live/cancelled/closed/archived treatment. */
.ui-refresh #event-navbar-details .event-status-pill--interactive {
    cursor: pointer;
    appearance: none;
    transition: border-color var(--transition-fast);
}
.ui-refresh #event-navbar-details .event-status-pill--interactive:hover,
.ui-refresh #event-navbar-details .event-status-control.open .event-status-pill--interactive {
    border-color: currentColor;
    outline: none;
}
.ui-refresh #event-navbar-details .event-status-pill--interactive:focus-visible {
    box-shadow: 0 0 0 2px var(--border-default);
    outline: none;
}
.ui-refresh #event-navbar-details .event-status-pill--interactive .caret {
    border-top: 3px solid currentColor;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    opacity: 0.65;
}
.ui-refresh #event-navbar-details .event-go-live-action {
    flex: 0 0 auto;
    background: var(--accent-subtle);
    color: var(--accent-hover);
    border-color: var(--accent-muted);
}
.ui-refresh #event-navbar-details .event-status-control {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.ui-refresh #event-navbar-details .event-status-control .event-status-menu {
    left: 0;
    transform: none;
    min-width: 160px;
    padding: var(--space-1);
}
.ui-refresh #event-navbar-details .event-status-menu > li > .event-status-option {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-default);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    text-align: left;
}
.ui-refresh #event-navbar-details .event-status-menu > li > .event-status-option:hover,
.ui-refresh #event-navbar-details .event-status-menu > li > .event-status-option:focus {
    background: var(--state-hover);
    outline: none;
}
.ui-refresh .confirm-dialog__subtitle .event-go-live-impact-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    text-align: left;
}
.ui-refresh .confirm-dialog .event-go-live-impact-list > li {
    margin-top: 0;
}
/* The btn-group IS the chip — one border, one background, one radius */
.ui-refresh #event-navbar-details .btn-group {
    flex: 0 0 auto;
    position: static;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--fg-muted);
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1;
}
/* Both buttons inside are transparent/borderless — the group is the visual chip */
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    height: 100%;
    line-height: 1;
    padding: 0 var(--space-1);
    box-shadow: none;
}
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip {
    padding-left: var(--space-2);
}
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret {
    padding-right: var(--space-2);
}
/* Keep the inner buttons transparent in EVERY state — the .btn-group is the
   visual chip. Bootstrap's focus/active and the generic
   `.open > .btn.dropdown-toggle` rule (components.css) otherwise paint a solid
   dark box on the caret when its dropdown opens, breaking the pill. */
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret,
.ui-refresh #event-navbar-details .btn-group.open > .btn.event-id-chip,
.ui-refresh #event-navbar-details .btn-group.open > .btn.event-id-caret,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip:hover,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip:focus,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-chip:active,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret:hover,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret:focus,
.ui-refresh #event-navbar-details .btn-group .btn.event-id-caret:active {
    background: transparent !important;
    box-shadow: none !important;
}
.ui-refresh #event-navbar-details .btn-group:hover {
    background: var(--state-hover);
    color: var(--fg-default);
}
/* Match the 3px topbar caret style */
.ui-refresh #event-navbar-details .btn-group .btn .caret {
    border-top: 3px solid currentColor;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-bottom: 0;
    width: 0;
    height: 0;
    opacity: 0.45;
    margin: 0 0 0 2px;
}
/* Favorite button: proper icon-button matching design's .qnav-icon style */
.ui-refresh #event-navbar-details .favorite-container {
    flex: 0 0 auto;
    margin-left: var(--space-1);
    display: flex;
    align-items: center;
}
.ui-refresh #event-navbar-details .event-set-favorite {
    display: inline-grid !important;
    place-items: center !important;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--fg-subtle);
    background: transparent;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.ui-refresh #event-navbar-details .event-set-favorite:hover {
    color: var(--accent-primary);
}
.ui-refresh #event-navbar-details .event-favorite-icon {
    font-size: 13px !important;
    color: inherit !important;
    line-height: 1;
}
/* Favorited state: accent-colored filled star. Favorited markup is `fa fa-star`
   (solid, weight 900); unfavorited is `fal fa-star` (light). Exclude .fal so
   only the filled star gets the accent. */
.ui-refresh #event-navbar-details .event-favorite-icon.fa-star:not(.fal) {
    color: var(--accent-primary) !important;
}
/* ===== Quick Links Dropdown ===== */
.ui-refresh #event-navbar-details .dropdown-menu {
    text-align: left;
    min-width: 380px;
    padding: var(--space-1) 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* Center the dropdown under the trigger instead of left-aligning */
    left: 50%;
    transform: translateX(-50%);
}
.ui-refresh #event-navbar-details .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--fg-default);
    transition: background var(--transition-fast);
}
.ui-refresh #event-navbar-details .dropdown-menu > li > a:hover,
.ui-refresh #event-navbar-details .dropdown-menu > li > a:focus {
    background: var(--state-hover);
    color: var(--fg-default);
}
.ui-refresh #event-navbar-details .dropdown-menu > li > a strong {
    color: var(--fg-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
}
.ui-refresh #event-navbar-details .dropdown-menu .event-url {
    font-size: var(--font-size-xs);
    color: var(--fg-subtle);
}
.ui-refresh #event-navbar-details .dropdown-menu .copy-to-clipboard {
    color: var(--fg-subtle);
    transition: color var(--transition-fast);
}
.ui-refresh #event-navbar-details .dropdown-menu .copy-to-clipboard:hover {
    color: var(--accent-primary);
}
/* Favorite star — accent color on hover, smooth transition */
.ui-refresh #event-navbar-details .event-favorite-icon {
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.ui-refresh #event-navbar-details .event-favorite-icon:hover {
    color: var(--accent-primary);
}
.ui-refresh #event-navbar-details .event-favorite-icon.fa-star {
    -webkit-text-stroke-color: inherit;
    -webkit-text-stroke-width: inherit;
}
.ui-refresh #event-navbar-details .event-favorite-icon.fa-star.fal {
    color: var(--swoogo-gray-600);
}