/* modals always need to open over sidebars */
.ui-refresh .modal {
    z-index: 1080;
}

/* ===== Event page layout adjustments (NOT account-hub pages) =====
   Event pages have #content-container without .account class.
   Account-hub pages have #content-container.account and keep their own
   breadcrumbs, save buttons, and padding. */
.ui-refresh #content-container #main-container {
    margin-top: 0;
}
/* Scrollbar at the window edge, content still centred.
   Legacy keeps overflow-y:auto + the Bootstrap column width (col-lg-9) on the
   same element (#main-content), so the scrollbar lands mid-page beside the
   empty right gutter. Instead make #main-content full width (the scroll stays
   on it — App.scrollToError / updateFormHeight depend on that) and move the
   column width onto an inner wrapper that re-centres the content. The 60px
   subtracted from 100svh matches #content-container's `top: 60px` (global
   top-nav height) so the scroll area reaches the viewport bottom. */
.ui-refresh #content-container #main-content {
    max-height: calc(100svh - 60px);
    padding-top: 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
}
.ui-refresh #content-container #main-content:has(#seating_chart) {
    padding: 0;
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
    max-width: calc(100% + 30px);
}
/* Inner wrapper carries the column (col-md-10 / col-lg-{cols}); drop the
   float and centre it so its 75% width resolves to the same content width as
   the legacy centred #main-content. */
.ui-refresh #content-container #main-content > #main-content-inner {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Legacy layout.css sets body.dashboard #inner { max-height: calc(100svh - 120px) }
   which is 60px shorter than #main-content's scroll height above, misplacing
   the scrollbar on dashboard event pages (e.g. themes). Remove the constraint
   so #main-content is the sole scroll container. */
body.ui-refresh.dashboard #content-container #inner {
    max-height: none;
}

.ui-refresh #content-container #main-content:has(.event-settings-doc) {
    width: 100%;
    max-width: 100%;
}
/* Themes page uses the page-paper background (not the surface-card background
   other event-setup pages use) so the cards float on the same uniform black
   as the body — no gray strip exposed on the sides. */
.ui-refresh.dashboard #main-content:has(.theme-card-grid) {
    background-color: var(--bg-page) !important;
    width: 100%;
    max-width: 100%;
}
/* Integrations page: same treatment as Themes above — it carries body.dashboard
   (IntegrationController sets bodyClass) but renders as a standard subpage-head
   list page, so #main-content must use the page paper, not the surface card
   color that components.css gives dashboard+subpage-head pages. */
.ui-refresh.dashboard #main-content:has(#integration-container) {
    background-color: var(--bg-page) !important;
}
/* Setup list pages (.list-page): same trick as .event-settings-doc above —
   widen #main-content to the full viewport so its overflow-y scrollbar
   sits at the viewport's right edge instead of inside the col-lg-9 right
   gutter. The list content itself is re-centered via max-width below. */
.ui-refresh #content-container #main-content-inner:has(.event-settings-doc),
.ui-refresh #content-container #main-content-inner:has(.list-page),
.ui-refresh #content-container #main-content:has(.list-page) {
    width: 100%;
    max-width: 100%;
}
/* Doc pages (.event-settings-doc) share this breakout with list pages so
   both page types resolve their centered `min(--doc-max-width, 100% - ...)`
   width against the same zero-padding box — otherwise .event-settings-doc
   pages keep the legacy 20px/side padding and render 40px narrower than
   .list-page pages below ~1760px viewports. */
.ui-refresh #content-container #main-content:has(.list-page):has(#main-content-inner),
.ui-refresh #content-container #main-content:has(.event-settings-doc):has(#main-content-inner) {
    padding: 0;
}
/* Fixed height (not just the max-height cap above): on a short list (e.g.
   session-multiple-update/index.php's "Update in Browser" grid with only a
   couple of rows) #main-content collapses to content height, and since it's
   the overflow-y:auto scroll container (legacy layout.css), an open
   timepicker/dropdown that extends past the short content bottom gets
   CLIPPED and spawns an inner scrollbar instead of just having room. Same
   fix as the .account #main-content:has(.list-page) block below, applied to
   plain event pages — filling the viewport gives short event list-pages that
   same headroom always. */
.ui-refresh #content-container:not(.account) #main-content:has(.list-page) {
    height: calc(100svh - 60px);
}

/* At the tablet breakpoint, legacy layout.css keeps the event rail visible
   while shrinking .nav-margin's content offset to 60px. The full-width list
   page breakout above then starts behind the 190px rail, clipping the event
   integrations heading and left card column. Keep this correction specific to
   the integration index: other event list pages may have their own responsive
   rail layout. */
@media (min-width: 768px) and (max-width: 992px) {
    .ui-refresh.has-event-icon-nav #content-container:not(.account) #main-content:has(#integration-container) {
        width: calc(100vw - 190px);
        margin-left: 130px;
        margin-right: 0;
    }
}

/* noMenu="small" pages get Bootstrap's fixed-width legacy `.container` class stacked on
   `.page-body`, trapping .list-page's own scrollbar inside it instead of the viewport edge. */
.ui-refresh .page-body.container:has(.list-page),
.ui-refresh .page-body.container:has(.list-page) #content-container {
    width: 100%;
}

@media (min-width: 768px) {
    .ui-refresh #content-container.account #main-content:has(.list-page) {
        width: 100%;
        /* Legacy `.account #main-content { max-height: calc(100vh - 165px) }`
           (layout.css) assumes ~165px of chrome above/below the scroll
           container — a pre-ui-refresh top-nav + breadcrumb-bar height that no
           longer exists. ui-refresh's actual account top-nav is 76px, so the
           stale formula stopped the container ~89px short of the real
           viewport bottom on every account list page, showing as dead gray
           space below an otherwise-short list (independent of .list-page's
           own padding). #secondary-nav has no such cap and correctly fills to
           the viewport edge — match it here.

           overflow-x/-y !important — General::popover()'s shared JS
           (helpers/General.php) resets `#main-content`'s inline `overflow` to
           plain `auto` on every tooltip's `hide.bs.popover` (to undo the
           `visible` it sets on `show` so popovers can escape clipping). That
           shorthand touches BOTH axes, flipping overflow-x from this layout's
           intended `hidden` (set in base layout.css) to `auto` — which can
           reveal a horizontal scrollbar strip and eat into the vertical space
           this fix just reclaimed, depending on scrollbar rendering. Pin both
           axes so the JS toggle can't touch them; popovers already render via
           `data-container: 'body'` so they don't need the overflow escape here. */
        max-height: calc(100svh - 60px) !important;
        /* Fixed height (not just the max-height cap above): on a short list
           (e.g. Customize Fields for an object with 2 rows) #main-content
           collapses to content height, and since it's the overflow-y:auto
           scroll container, an open Add Field dropdown that extends past the
           short content bottom gets CLIPPED and spawns an inner scrollbar.
           Event-level pages (payment page) never hit this because their
           content is tall enough that the open menu stays inside;
           filling the viewport gives account list pages that same headroom
           always. This also completes the intent noted above — #secondary-nav
           fills to the viewport edge, and now the content column truly does
           too instead of showing dead space below a short list. */
        height: calc(100svh - 60px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    /* The legacy 165px rule caps `.account #inner` too. Without matching relief
       here, #main-content (raised above) spills 89px past #inner/#content-
       container — invisible while ancestors are overflow:visible, but
       General::popover()'s hide handler sets #content-container to
       overflow:auto on every tooltip close, clipping the spill and making the
       89px dead strip reappear. Raising #inner lets the chain genuinely reach
       the viewport bottom so there is nothing to clip. */
    .ui-refresh #content-container.account:has(.list-page) #inner {
        max-height: calc(100svh - 76px);
    }
    /* Report-grid pages toggle this container's vertical scrollbar purely on
       row count (10 vs 50 rows per page, filtering, etc.) — the fixed
       max-height above means it never scrolls for any other reason. Each
       toggle shifts the whole grid (and the filter funnel sitting flush at
       its right edge, see communicate.css's .dt-filter-pop rule) sideways by
       the scrollbar's width. Reserve the gutter so the width never changes.
       Scoped to .comm-report (not every account list page) — same idiom as
       components.css's #secondary-nav.account-nav and a2a-revamp-base.css's
       #main-content, both already using scrollbar-gutter: stable. */
    .ui-refresh #content-container.account #main-content:has(.list-page):has(.comm-report) {
        scrollbar-gutter: stable;
    }
}
/* Account form pages (Basic Details, Policies, Analytics): drop #main-content's
   legacy 20px top padding so the only gap above the content is the subpage-head's
   own margin-top. #main-content is a BFC (overflow-y:auto), so that margin stays
   contained rather than collapsing out. Scoped via :has(.account-form) so
   other account pages keep their padding.

   Also widen the scroll container to the full viewport (it's col-lg-9 = 75% by
   default) so its overflow-y scrollbar sits at the screen's right edge instead
   of hugging the content column. The form itself stays centered via its
   --doc-max-width rule in components.css — same pattern as the event-settings
   and setup list pages. */
.ui-refresh #content-container.account #main-content:has(.account-form) {
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    /* Fill vertically to the viewport bottom. Legacy `.account #main-content`
       subtracts 165px (for the old breadcrumb + save bars ui-refresh removed),
       ending the scroll container short. #content-container is fixed at top:60px
       and the account-form #main-container adds an 8px (--space-2) margin, so the
       container starts 68px down — subtract that to reach the bottom edge. */
    max-height: calc(100svh - 68px);
}
/* Tighten the top gap to --space-2, matching the reduced top spacing the
   account list pages use. */
.ui-refresh #content-container.account:has(.account-form) #main-container {
    margin-top: var(--space-2);
}
/* Webhooks create/update: unlike other .account-form pages, the webhook
   record has its own .list-page view (view.php) with a 0-margin top gap.
   Drop the account-form margin back to 0 so navigating between the view and
   the create/update form doesn't shift the breadcrumb row by 8px. Overrides
   the rule above via source order — same specificity, :has(.webhook-form) is
   a subset of :has(.account-form). max-height compensates by 8px so the
   scroll container still reaches the viewport bottom (see the .account-form
   rule's 68px comment above). */
.ui-refresh #content-container.account:has(.webhook-form) #main-container {
    margin-top: 0;
}
.ui-refresh #content-container.account #main-content:has(.webhook-form) {
    max-height: calc(100svh - 60px);
    /* General::popover()'s shared hide.bs.popover handler (helpers/General.php)
       unconditionally resets #content-container's and #main-content's inline
       `overflow` to plain `auto` on every popover close (e.g. the "Webhook
       headers" / "Field name" info-icon tooltips below) — that shorthand
       touches both axes and turns #content-container (normally overflow:visible)
       into a second, independent scroll container around #main-content, since
       #content-container's own scrollHeight already exceeds its clientHeight
       here. Pin both axes with !important so neither element can be turned
       into a competing scroll container. */
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Align SAML configuration create/update vertically with their list page, so
   navigating into a configuration does not shift the breadcrumb row down. */
.ui-refresh #content-container.account:has(#saml-config-form) #main-container {
    margin-top: 0;
}
.ui-refresh #content-container.account #main-content:has(#saml-config-form) {
    max-height: calc(100svh - 60px);
}
.ui-refresh #content-container.account:has(.webhook-form) {
    overflow: visible !important;
}
/* Account-hub doc + TOC pages (e.g. custom-domain/update) use .event-settings-doc
   instead of .account-form, so they miss the widening above and fall into the
   generic subpage-head rule (which doesn't widen). Apply the same full-viewport
   scroll-container treatment so the overflow scrollbar sits at the screen's right
   edge — the doc + TOC stay centered via their own --doc-max-width rule. */
.ui-refresh #content-container.account #main-content:has(.event-settings-doc) {
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100svh - 68px);
}
.ui-refresh #content-container.account:has(.event-settings-doc) #main-container {
    margin-top: var(--space-2);
}
/* Account pages that render _subpage-head inline (e.g. My Profile): override
   the legacy white #main-content background so the page reads as --bg-page
   with card panels sitting on top, matching the event setup pages.
   Also widen to full viewport width so the scrollbar hugs the right edge
   (same fix as .list-page above — #main-content is col-lg-9 = 75% by default).
   max-height matches the list-page formula: 60px top-nav + 16px #main-container
   margin-top = 76px offset. */
.ui-refresh #content-container.account #main-content:has(.subpage-head):not(:has(.account-form)) {
    padding-top: 0;
}

@media (min-width: 768px) {
    /* .ui-refresh #content-container.account #main-content:has(.subpage-head):not(:has(.account-form)) { */
    /*     margin-left: -15px; */
    /*     margin-right: -15px; */
    /*     width: calc(100% + 30px); */
    /*     max-width: calc(100% + 30px); */
    /*     max-height: calc(100svh - 76px) !important; */
    /*     overflow-x: hidden !important; */
    /*     overflow-y: scroll !important; */
    /* } */
    /* .ui-refresh #content-container.account:has(.subpage-head):not(:has(.account-form)) #inner { */
    /*     max-height: calc(100svh - 76px); */
    /* } */
}
/* Hide the legacy breadcrumb bar on event pages — replaced by .subpage-head
   (used by Event Settings, Registrant Types, and Registration Form). */
.ui-refresh #content-container:not(.account) #breadcrumb-container {
    display: none;
}
/* Hide legacy breadcrumb on account list pages (e.g. account integrations) —
   _subpage-head.php is rendered inline instead. Same for account form pages
   that render _subpage-head.php themselves (e.g. account Basic Details). */
.ui-refresh #content-container.account:has(.list-page) #breadcrumb-container,
.ui-refresh #content-container.account:has(.subpage-head) #breadcrumb-container {
    display: none;
}
/* Hide legacy fixed-position breadcrumb save buttons on event pages */
.ui-refresh #content-container:not(.account) .btn-container .breadcrumb-btn.btn-primary,
.ui-refresh #content-container:not(.account) .btn-container .breadcrumb-btn.btn-default {
    display: none !important;
}
/* main.php unconditionally renders a second, legacy Breadcrumbs::widget as a
   direct child of .page-body, above #content-container entirely -- outside
   every #breadcrumb-container rule above, which only reaches the copy nested
   inside #content-container. Pages that render their own _subpage-head or
   .list-page (this admin dashboard included) don't clear $this->params
   ['breadcrumbs'], so that legacy trail still renders. It's merely restyled
   transparent/muted below rather than hidden, so it leaks through as a ghost
   crumb above the real one -- most visible on lighter surface tones, easy to
   miss against very dark ones like midnight. */
.ui-refresh .page-body:has(.subpage-head) > .breadcrumb,
.ui-refresh .page-body:has(.list-page) > .breadcrumb {
    display: none;
}
.ui-refresh .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
}
.ui-refresh .breadcrumb > li {
    color: var(--fg-muted);
    margin: 0;
    padding: 0;
}
/* backend.css builds this as a 12x12 box with an SVG chevron background, so
   overriding only `content` renders both. Reset every property it sets. */
.ui-refresh .breadcrumb > li + li::before {
    content: "/";
    display: inline-block;
    width: auto;
    height: auto;
    background-image: none;
    vertical-align: baseline;
    margin-right: 10px;
    padding: 0;
    color: var(--fg-subtle);
}
.ui-refresh .breadcrumb > li a {
    color: var(--fg-muted);
    transition: color var(--transition-fast);
}
.ui-refresh .breadcrumb > li a:hover {
    color: var(--fg-default);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ui-refresh .breadcrumb > .active {
    color: var(--fg-default);
    font-weight: var(--font-weight-semibold);
}
/* Legacy layout.css hardcodes `background: white` here, so it can't follow
   the surface tokens. */
body.ui-refresh #modal-breadcrumbs {
    background-color: var(--card);
    border-bottom: 1px solid var(--line);
}
.ui-refresh .breadcrumb .event-icon {
    display: none;
}
.ui-refresh .breadcrumb .breadcrumb-main-page {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}
.ui-refresh .page-body {
    padding-top: var(--space-4);
}

/* ===== Sidebar (iframe) Flex Layout ===== */
/* Replaces the legacy fixed-position header/footer approach with a
   three-row flex column: title | scrollable content | footer.
 *
 * Slide animation: the legacy stylesheet animates `width: 0 → 33%` over
 * 400ms (`#main-container, #sidebar { transition: all 0.4s ease }`).
 * A width transition forces a relayout on every frame — and the iframe
 * inside the drawer re-flows its content (input-groups, kv hint icons,
 * translate-button addons, CkEditor toolbars) at every intermediate
 * width, so the slide visibly stutters on the tabbed form drawers. The
 * reorder drawer doesn't notice because its single-column list lays out
 * trivially at any width.
 *
 * Override that: render the drawer at its final width on first paint
 * and animate `transform: translateX(100% → 0)` instead. Runs on the
 * compositor, no per-frame layout. Width-class rules below now apply
 * unconditionally (no `.open` requirement) so the drawer is sized before
 * the slide starts. */
.ui-refresh #sidebar {
    overflow: hidden;
    height: 100svh;
    bottom: 0;
    top: 0;
    box-shadow: var(--sh-drawer);
    /* Legacy `#sidebar { background: white }` (layout.css) otherwise shows
       through as a white flash on dark surfaces in the gap between the skeleton
       hiding and the iframe fading in. Paint the drawer the same --bg-page the
       iframe body uses so the reveal is seamless. */
    background-color: var(--bg-page);
}

.ui-refresh.sidebar-open {
    overflow: hidden;
}

/* Width rules apply whether or not `.open` is present — the drawer is
 * always rendered at its target width; `.open` only toggles transform.
 * `.small.open` / `.large.open` legacy selectors are matched at the same
 * specificity (1,2,0), so source-order (this file loads after backend
 * via UiRefreshAsset depends) wins. */
.ui-refresh #sidebar.small {
    /* 720 (not 600) so the Visibility tab's condition-builder rows
     * (`field` / `operator` / `value` triplet) lay out side-by-side
     * without wrapping at common locale label widths. */
    width: 720px;
    max-width: 100vw;
}

.ui-refresh #sidebar.large {
    width: 1200px;
    max-width: 100vw;
}

.ui-refresh #sidebar.xs-fixed {
    width: 500px;
    max-width: 100vw;
}

.ui-refresh #sidebar.open {
    transform: translateX(0);
    padding-bottom: 0;
}

body.sidebar.ui-refresh {
    padding-top: 0;
    /* Constrain the iframe's body so the inner `.sidebar-body` owns all
     * scrolling. Without this, sub-pixel rounding (e.g. the footer's 1px
     * top border) bleeds 1px past the viewport and the iframe itself
     * gets a scrollbar — content on short tabs (General/Capacity/etc.)
     * still appears to "scroll the drawer" instead of staying put. */
    overflow: hidden;
}

/* `body { overflow: hidden }` alone doesn't stop the iframe's <html> element
 * from carrying its own 1px scroll (the html's scrollHeight runs 1px past
 * its clientHeight on most setups). Lock html when hosting a sidebar layout
 * so the outer drawer truly cannot scroll — `.sidebar-body` is the only
 * scrollable region. `:has()` is broadly supported on all modern browsers. */
html:has(> body.sidebar.ui-refresh) {
    overflow: hidden;
    height: 100%;
}


.ui-refresh.sidebar {
    padding-top: 0;
}

.ui-refresh .user-history {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ui-refresh #sidebar-pjax-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.ui-refresh .sidebar-title {
    background-color: transparent;
    position: static;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: transparent;
    justify-content: space-between;
    padding: var(--space-3) var(--sidebar-x-padding);
    border-bottom: 1px solid var(--panel-border);
    z-index: auto;
    width: auto;
}

.ui-refresh .sidebar-title h4 {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-default);
    float: none;
}
/* Drawer header: title and subtitle share one baseline rather than stacking, so
   the header stays a single compact row. The subtitle names the record that's
   open (e.g. "Name: Registrant List") while the title stays a static, scannable
   label — the convention the ajax-drawerify skill sets for update drawers.
   Stacked, the two read as competing headings; side by side the subtitle reads
   as a qualifier on the title, which is what it is. */
.ui-refresh .sidebar-title-text {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    /* Take the row's spare width and allow shrinking, so a long record name
       truncates instead of shoving the close button off the header. */
    flex: 1 1 auto;
    min-width: 0;
}
.ui-refresh .sidebar-title-text > h4 {
    flex: 0 0 auto;
}
.ui-refresh .sidebar-subtitle {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    margin-top: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Separator so the pair doesn't read as one run-on string. Carried on the
   subtitle so it only ever appears when there is a subtitle to separate. */
.ui-refresh .sidebar-title-text > .sidebar-subtitle::before {
    content: '·';
    margin-right: var(--space-2);
    color: var(--fg-subtle);
}
.ui-refresh .close-icon-btn {
    float: none;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    color: var(--fg-muted);
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    flex-shrink: 0;
}

.ui-refresh .close-icon-btn:hover {
    color: var(--fg-default);
    background-color: var(--bg-muted);
}

.ui-refresh .sidebar-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
    margin-left: 0;
    min-height: 0;
}

/* Drawer forms that render a plain .panel between the title and footer
   (e.g. Edit Track/Location) — let the panel grow so the Save/Cancel footer
   is pushed to the bottom of the drawer instead of floating mid-height under
   a short form (design cleanup #12). */
.ui-refresh .sidebar-form > .panel {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
}

/* No divider under the form's section title (e.g. "Track Details") inside the
   drawer — backend.css gives .panel-default > .panel-heading a bottom border;
   drop it here so the drawer reads as one clean surface (design cleanup #12). */
.ui-refresh .sidebar-form > .panel > .panel-heading {
    border-bottom: none;
}

.ui-refresh .sidebar-form > #child-pjax-grid,
.ui-refresh .sidebar-body {
    flex: 1;
    /* Flex children default to `min-height: auto` which refuses to shrink
     * below their content size — when tab content grows past the body's
     * allocated space, the body itself overflows the form (pushing the
     * footer off-screen) instead of scrolling internally. Forcing min-height
     * to 0 lets the body honour its `flex: 1` and contain its own scroll. */
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
}

.ui-refresh .ajax-drawer .panel-default {
    background-color: transparent !important;
}

.ui-refresh.sidebar .user-history-panels {
    padding: var(--space-2);
}

.ui-refresh .sidebar-footer {
    background-color: transparent;
    position: static;
    flex-shrink: 0;
    display: flex;
    justify-content: end;
    width: auto;
    margin-left: 0;
    padding: var(--space-3) var(--sidebar-x-padding);
    border-top: 1px solid var(--panel-border);
    z-index: auto;
}

.ui-refresh .sidebar-footer .btn-container {
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    max-width: 685px;
    flex-grow: 1;
}

.ui-refresh .sidebar-footer .btn-container .btn {
    flex: 1 0 0;
}

/* The footer now sits on the same transparent (--bg-page) surface as the rest
   of the drawer, but .btn-default (components.css) also fills with --bg-page —
   without this, Cancel would vanish into the footer and read as outline-only.
   Give it the same solid-surface treatment as .btn-neutral (components.css)
   so it stays a visible, clickable control next to the filled Save button. */
.ui-refresh .sidebar-footer .btn-container .btn-default {
    background: var(--bg-surface) !important;
}
/* Our rule above outranks the base .btn-default:hover (components.css) —
   4 class selectors vs. its 3 — so without this the hover feedback is
   permanently masked by the resting-state fill. Re-declare hover at the same
   specificity level as our own base rule so it wins over it in turn. */
.ui-refresh .sidebar-footer .btn-container .btn-default:hover {
    background: var(--bg-muted) !important;
}

/* Legacy iframe sidebar (create/update forms not yet migrated to the in-page
   AjaxDrawer — e.g. event-type). The shared drawer chrome reads
   --sidebar-x-padding from .ajax-drawer, which isn't an ancestor here, so the
   header/footer padding computes to an invalid value and collapses to 0.
   Define the padding for the iframe context; .sidebar-footer's own
   transparent background already matches the --bg-page form body here, so no
   override is needed. Scoped to body.iframe so the real AjaxDrawer (never
   inside an iframe) is untouched. */
body.iframe.ui-refresh {
    --sidebar-x-padding: var(--space-5);
}
/* A legacy iframe sidebar that wraps its content in .sidebar-body (borrowing
   the AjaxDrawer's own flex/scroll mechanism — flex:1, min-height:0,
   overflow-y:auto — without migrating the whole page) only picks up that
   mechanism's sparse default padding (--space-2) here, since the more
   generous --space-4/--sidebar-x-padding pairing below is scoped to
   .ajax-drawer. Match it anyway so the form content lines up with the
   title/footer's own --sidebar-x-padding above. */
body.iframe.ui-refresh .sidebar-body {
    padding: var(--space-4) var(--sidebar-x-padding);
}

/* Ajax-drawer footers match the other refreshed drawers (`.ajax-drawer-footer`,
 * e.g. email-domains): Cancel/Save are right-aligned, auto-width pills — NOT
 * the full-width stretch the shared `.sidebar-footer` applies (PR #2327 review).
 * Scoped to `.ajax-drawer` so the legacy iframe `#sidebar` drawers, which share
 * this footer, keep their existing stretched layout. */
.ui-refresh .ajax-drawer .sidebar-footer .btn-container {
    flex-grow: 0;
    justify-content: flex-end;
}
.ui-refresh .ajax-drawer .sidebar-footer .btn-container .btn {
    flex: 0 0 auto;
}

/* Legacy iframe sidebar drawer (event-type et al.): the body is otherwise
   content-height, so the footer floats mid-drawer under a short form. Fill the
   iframe viewport and make the body a flex column; the form body (.etf-drawer-body)
   takes the remaining height and scrolls, pinning the footer to the bottom.
   Scoped via #sidebar-pjax-form so modals (#modal-pjax-form) stay untouched. */
html:has(> body.iframe.ui-refresh:has(#sidebar-pjax-form)) {
    height: 100%;
}
body.iframe.ui-refresh:has(#sidebar-pjax-form) {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
body.iframe.ui-refresh:has(#sidebar-pjax-form) .etf-drawer-body,
/* report/search.php's "Additional Search Filters" drawer (every report grid
   except contacts, which uses the AjaxDrawer variant instead) has the same
   bare-`<div>`-under-`<body>` shape as event-type's .etf-drawer-body, just
   with its own wrapper class. Without this, the div gets no flex-grow from
   anywhere and sizes to its content, leaving the Save/Cancel footer
   stranded mid-drawer with dead space below it instead of pinned to the
   bottom. */
body.iframe.ui-refresh:has(#sidebar-pjax-form) .report-search-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Footer buttons float right at their natural width (matching the ajax-drawer
   footers above) instead of the shared full-width stretch. */
body.iframe.ui-refresh .sidebar-footer .btn-container {
    flex-grow: 0;
    justify-content: flex-end;
}
body.iframe.ui-refresh .sidebar-footer .btn-container .btn {
    flex: 0 0 auto;
}

.ui-refresh .sidebar-saving-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99999;
}

.ui-refresh .sidebar-skeleton {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--bg-surface);
}

.ui-refresh .sidebar-skeleton__title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    height: 53px;
}

.ui-refresh .sidebar-skeleton__body {
    flex: 1;
    overflow: hidden;
    padding: var(--space-4);
}

.ui-refresh .sidebar-skeleton__row {
    margin-bottom: var(--space-4);
}

.ui-refresh .sidebar-skeleton__footer {
    flex-shrink: 0;
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    width: 685px;
    padding: var(--space-4);
}

.ui-refresh .sidebar-skeleton__block {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: sidebar-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.ui-refresh .sidebar-skeleton__block--title {
    width: 110px;
    height: 18px;
}

.ui-refresh .sidebar-skeleton__block--close {
    width: 18px;
    height: 18px;
    opacity: 0.5;
}

.ui-refresh .sidebar-skeleton__block--label {
    width: 80px;
    height: 10px;
    margin-bottom: var(--space-1);
}

.ui-refresh .sidebar-skeleton__block--input {
    width: 100%;
    height: 32px;
}

.ui-refresh .sidebar-skeleton__block--button {
    width: 70px;
    height: 32px;
    flex: 1 0 0;
    max-width: 600px;
}

.ui-refresh .sidebar-skeleton__block--button-primary {
    opacity: 0.6;
}

@keyframes sidebar-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-refresh .sidebar-skeleton__block {
        animation: none;
        background: var(--bg-muted);
    }
}

.ui-refresh .sidebar-form [name="addMultiple"] {
    margin-bottom: var(--space-2);
}

.ui-refresh .sidebar-data-table-wrapper {
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ui-refresh .sidebar-data-table-wrapper .table {
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.ui-refresh .sidebar-data-table-wrapper .table > thead > tr > th {
    font-weight: var(--font-weight-bold);
    color: var(--fg-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--input-border);
}

.ui-refresh .sidebar-data-table-wrapper .table > thead > tr > th,
.ui-refresh .sidebar-data-table-wrapper .table > tbody > tr > td {
    padding: var(--space-2) var(--space-4);
    vertical-align: middle;
}

.ui-refresh .sidebar-data-table-wrapper .table > tbody > tr > td {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-refresh .sidebar-data-table-wrapper .table > tbody > tr:last-child > td {
    border-bottom: none;
}

.ui-refresh .sidebar-data-table-wrapper .table > tbody > tr:hover > td {
    background-color: transparent;
}

.ui-refresh .role-table-wrapper {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ui-refresh .role-table-wrapper .table {
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.ui-refresh .role-table-wrapper .table > thead > tr > th {
    font-weight: var(--font-weight-semibold);
    color: var(--fg-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.ui-refresh .role-table-wrapper .account-name-cell {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-refresh .role-table-wrapper .table > thead > tr > th,
.ui-refresh .role-table-wrapper .table > tbody > tr > td {
    padding: var(--space-2) var(--space-4);
    vertical-align: middle;
}

.ui-refresh .role-table-wrapper .table > tbody > tr:last-child > td {
    border-bottom: none;
}

.ui-refresh .role-table-wrapper .table > tbody > tr:hover > td {
    background-color: transparent;
}


.ui-refresh .sidebar-subtitle-badge-wrap {
    position: relative;
    display: inline-block;
}

.ui-refresh .sidebar-subtitle-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-subtle);
    color: var(--fg-default);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    border: none;
    cursor: default;
}

.ui-refresh button.sidebar-subtitle-badge {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ui-refresh button.sidebar-subtitle-badge:hover {
    background: var(--bg-muted, #E8E8EC);
}

.ui-refresh .sidebar-subtitle-badge-chevron {
    font-size: 9px;
    color: var(--fg-default);
    margin-right: 0 !important;
}

.ui-refresh .sidebar-subtitle-badge-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10;
    min-width: 160px;
    padding: var(--space-1) 0;
}

.ui-refresh .sidebar-subtitle-badge-dropdown-item {
    display: block;
    padding: 6px var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--fg-default);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.ui-refresh .sidebar-subtitle-badge-dropdown-item:hover {
    background: var(--bg-muted, #F4F4F5);
    color: var(--fg-default);
    text-decoration: none;
}

.ui-refresh .label-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 0 var(--space-2);
}

.ui-refresh.sidebar .label-row,
.ui-refresh .ajax-drawer .label-row {
    padding: 0;
}

/* `.label-row` uses display:flex which would otherwise beat the UA
 * [hidden] { display: none } rule. Restore hide behavior. */
.ui-refresh .label-row[hidden] {
    display: none;
}

.ui-refresh .label-row .control-label {
    margin-bottom: 0;
}

/* Wider label slot for rows whose label text exceeds the default 60px
 * (e.g., "Icon Color"). Use on each `.label-row` in a panel to keep the
 * inputs vertically aligned across rows. */
.ui-refresh .label-row--wide .control-label {
    flex: 0 0 80px;
}

/* Krajee ColorInput inside a `.label-row`: flip the input-group so the hex
 * text input sits on the left and the color-picker swatch on the right, size
 * the two halves equally, and lock the total width to 140px so it lines up
 * with the icon picker's 140px trigger above it. */
.ui-refresh .label-row .spectrum-group {
    display: inline-flex;
    flex-direction: row-reverse;
    height: var(--input-height) !important;
    box-sizing: border-box;
}
/* The input fills the whole pill. Trim its `var(--space-2) var(--space-3)`
 * padding (from `.ui-refresh .form-control`) horizontally to match the icon
 * trigger's tighter content area; the height needs `!important` so the
 * `.form-control { height: var(--input-height) }` rule can't pull it back to
 * 40px. */
.ui-refresh .label-row .spectrum-group > .spectrum-input {
    height: 100% !important;
    padding: 0 var(--space-2) !important;
}
/* `.input-group-html5 .input-group-sp { width: 60px !important; }` from
 * `web/css/active-form.css` would otherwise pin the swatch addon to 60px and
 * leave the text input with the rest. Override with `!important` so the two
 * halves split the 140px container evenly. */
.ui-refresh .label-row .spectrum-group > .input-group-addon,
.ui-refresh .label-row .spectrum-group > .spectrum-input {
    display: block;
    min-width: 0 !important;
    box-sizing: border-box;
}
.ui-refresh .label-row .spectrum-group > .input-group-addon {
    width: auto !important;
}
.ui-refresh .label-row .spectrum-group > .spectrum-input {
    width: 72px !important;
}
/* Restore the connected-pill look after flipping. Bootstrap squares the
 * input's left corners (`.input-group .form-control:last-child`) and the
 * addon's right corners (`.input-group-addon:first-child`) for the un-flipped
 * layout — both equal-specificity to ours, so we use `!important` to win. */
.ui-refresh .label-row .spectrum-group > .spectrum-input {
    border-top-left-radius: var(--input-radius) !important;
    border-bottom-left-radius: var(--input-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.ui-refresh .label-row .spectrum-group > .input-group-addon {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--input-radius) !important;
    border-bottom-right-radius: var(--input-radius) !important;
    /* Drop the inner divider border (the addon's visual-left edge) and
     * restore the outer-right border that Bootstrap zeros on `:first-child`. */
    border-left: 0 !important;
    border-right: 1px solid var(--input-border) !important;
    /* Strip the addon's default 5px 6px !important padding so the swatch can
     * fill its half of the row evenly with the text input. */
    padding: 0 !important;
}

/* `spectrum-overrides.css:141` styles every `.sp-replacer` as a self-bordered
 * card; inside our flipped label-row pill the addon already provides the
 * border, so neutralize the swatch's own chrome and let it fill the addon.
 * Switch to flex so the swatch + chevron (which Spectrum lays out via
 * `float: left` at fixed pixel sizes) center inside the addon. */
.ui-refresh .label-row .spectrum-group .sp-replacer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding-left: var(--space-3);
    padding-right: var(--space-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.ui-refresh .label-row .spectrum-group .sp-replacer .sp-preview,
.ui-refresh .label-row .spectrum-group .sp-replacer .sp-dd {
    float: none;
    margin: 0;
}
.ui-refresh .label-row .spectrum-group .sp-replacer .sp-preview {
    border-color: var(--border-subtle);
    border-radius: var(--space-1);
    overflow: hidden;
}
/* Mirror the icon picker's CSS-drawn chevron (`web/css/ui-refresh/icon-picker.css:71`)
 * so the rating color trigger's caret reads the same as the icon trigger's. The
 * vendor ▼ glyph in `.sp-dd` is hidden via `font-size: 0`, then a 4x4 rotated
 * border on `::before` paints the thin "v" shape. */
.ui-refresh .label-row .spectrum-group .sp-replacer .sp-dd {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
}
.ui-refresh .label-row .spectrum-group .sp-replacer .sp-dd::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 5px;
    height: 5px;
    border-right: 1px solid var(--fg-default);
    border-bottom: 1px solid var(--fg-default);
    transform: rotate(45deg);
}

/* Match the icon picker trigger's 140px min-width so the two rows line up. */
.ui-refresh select.icon-alignment-select {
    width: 140px;
}

.ui-refresh select.typeahead-length-select {
    width: var(--space-10);
    height: var(--space-7) !important;
    padding: 2px;
}

/* Rating panel's "Choices" + "Step" dropdowns — match the 140px icon picker
 * + spectrum-group widths below them in the same panel. */
.ui-refresh select.rating-select {
    width: 72px;
}

/* Masking Settings panel — sentence-style row for s_mask_offset + s_mask_reveal.
 * Reads "Reveal [first ▾] [ 4 ] characters" with each piece flowing inline. */
.ui-refresh .masked-sentence-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 0 var(--space-2);
}
.ui-refresh .masked-sentence-row .control-label {
    margin: 0;
}
.ui-refresh select.masked-position-select {
    width: 110px;
}
.ui-refresh input.masked-count-input {
    width: 90px;
}

/* Generic label-plus-toggle row: label and toggle sit side-by-side with a
 * fixed gap. Used for boolean fields in sidebar panel bodies.
 * .toggle-row is the canonical name; .sidebar-toggle-row is kept for legacy views. */
.ui-refresh .toggle-row,
.ui-refresh .sidebar-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
}

.ui-refresh .toggle-row > label,
.ui-refresh .sidebar-toggle-row > label {
    margin-bottom: 0;
}

.ui-refresh .toggle-row .checkbox-toggle,
.ui-refresh .sidebar-toggle-row .checkbox-toggle {
    margin: 0;
}

.ui-refresh .icon-label-row .control-label {
    flex: 0 0 60px;
}

.ui-refresh #typeahead-settings {
    gap: var(--space-3);
    padding: 0;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ===== Mini-switch override for legacy .checkbox-toggle =====
 * Replaces the em-based green/white "ON/OFF" toggle from backend.css with the
 * compact 30x18 pill switch from the design system (Toggles, checkboxes,
 * segmented). The underlying <input type=checkbox> + <span data-on data-off>
 * markup is preserved so form submission still works; the data-on/data-off
 * text is hidden via the :before pseudo-element and the track + thumb are
 * redrawn. */
.ui-refresh .checkbox-toggle {
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 18px;
}

.ui-refresh .length-type-row {
    overflow: hidden;
    display: flex;
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ui-refresh .length-type-row:focus-within {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
}

.ui-refresh .length-type-row > input.form-control,
.ui-refresh .length-type-row > select.form-control.length-type {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.ui-refresh .length-type-row > input.form-control {
    flex: 1;
    min-width: 0;
}

.ui-refresh .length-type-row > select.form-control.length-type {
    flex: 0 0 auto;
    width: auto;
    border-left: 1px solid var(--input-border) !important;
}

.ui-refresh .checkbox-toggle span {
    top: 0;
    left: 0;
    width: 30px;
    height: 18px;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 999px;
    background: var(--border-strong);
    overflow: visible;
    transition: background var(--transition-fast);
}
.ui-refresh .checkbox-toggle span:before {
    display: none;
}
.ui-refresh .checkbox-toggle span:after {
    width: 14px;
    height: 14px;
    top: 2px;
    margin-left: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(44, 47, 58, 0.15);
    transition: left var(--transition-fast);
}
.ui-refresh .checkbox-toggle input[type=checkbox]:not(:checked) + span {
    background: var(--border-strong);
    padding: 0;
}
.ui-refresh .checkbox-toggle input[type=checkbox]:not(:checked) + span:after {
    left: 2px;
}
.ui-refresh .checkbox-toggle input[type=checkbox]:checked + span {
    background-color: var(--accent-primary);
    padding: 0;
}
.ui-refresh .checkbox-toggle input[type=checkbox]:checked + span:after {
    left: 14px;
}

.ui-refresh .checkbox-toggle input[type=checkbox][disabled] + span {
    opacity: .5;
}

.ui-refresh .tooltip.folder-admin-tooltip {
    opacity: 1;
}

.ui-refresh .tooltip.folder-admin-tooltip .tooltip-inner {
    background-color: var(--bg-surface);
    color: var(--fg-muted);
    border: 1px solid var(--border-strong);
    font-size: var(--font-size-xs);
    box-shadow: var(--shadow-md);
    max-width: none;
    white-space: nowrap;
}

.ui-refresh .tooltip.folder-admin-tooltip.top .tooltip-arrow {
    border-top-color: var(--border-strong);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.ui-refresh .tooltip.folder-admin-tooltip.top .tooltip-arrow::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: -5px;
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: var(--bg-surface) transparent transparent;
}

.ui-refresh .update-user-account .folder-container {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ui-refresh .update-user-account .folder-card {
    padding-left: 0;
    padding-right: var(--space-4);
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: none;
    font-size: var(--font-size-xs);
}

.ui-refresh .update-user-account .folder-card .col-sm-11 {
    padding-left: var(--space-2);
}

.ui-refresh .update-user-account .role-group-link,
.ui-refresh .update-user-account .role-group-link span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
}

.ui-refresh .update-user-account .role-group-link:hover,
.ui-refresh .update-user-account .role-group-link:focus {
    color: var(--fg-muted);
    text-decoration: none;
}

.ui-refresh .update-user-account .folder-card:focus,
.ui-refresh .update-user-account .folder-card:active,
.ui-refresh .update-user-account .folder-card.role-list-title-open {
    background-color: transparent !important;
    border-color: transparent !important;
}

.ui-refresh .update-user-account .folder-card:hover {
    background-color: var(--state-hover) !important;
}

.ui-refresh .update-user-account .folder-name {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ui-refresh .update-user-account .folder-name::before {
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--font-weight-normal);
    content: '\f07b';
    color: var(--fg-muted);
}

.ui-refresh .update-user-account .checkbox-toggle {
    margin: 0;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: end;
    width: fit-content;
}

.ui-refresh .update-user-account .checkbox {
    float: right;
}

.ui-refresh .update-user-account .checkbox-toggle span {
    top: 0;
    left: 0;
}

.ui-refresh .update-user-account .help-block:empty {
    display: none;
}

.ui-refresh .role-table-wrapper .table > thead > tr > th:nth-child(3),
.ui-refresh .role-table-wrapper .table > tbody > tr > td:nth-child(3) {
    width: 25%;
}

.ui-refresh .role-table-wrapper .form-group {
    margin-bottom: 0;
}

.ui-refresh .role-table-wrapper select.form-control {
    text-overflow: ellipsis;
    padding-right: var(--space-6);
}

.ui-refresh .role-table-wrapper .help-block:empty {
    display: none;
}



.ui-refresh .sidebar-form .panel-heading,
body.iframe-modal .panel-heading {
    color: var(--fg-default);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    border-bottom: none;
}

.ui-refresh .ajax-drawer .panel-heading,
body.iframe-modal .panel-heading {
    padding-left: 0;
    padding-right: 0;
}

.ui-refresh .ajax-drawer p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
}

.ui-refresh .sidebar-panel-heading .sidebar-panel-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-refresh .sidebar-panel-heading .sidebar-panel-title-row .badges-container {
    display: inline-flex;
}

.ui-refresh .sidebar-panel-heading .sidebar-panel-subtitle {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--fg-muted);
    margin-top: var(--space-1);
}

.ui-refresh .user-details-card {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    background-color: var(--bg-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3, 12px);
}
.ui-refresh .ajax-drawer .field-sponsor-created_at .form-control-static {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}
.ui-refresh .user-details-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ui-refresh .user-details-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--fg-default);
}

.ui-refresh .update-user-account textarea.form-control {
    resize: none;
}

.ui-refresh .user-details-email {
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    line-height: 1;
}

.ui-refresh .update-user-account .user-details-body .field-userinviteform-usertypename {
    display: none;
}

.ui-refresh.sidebar .panel-body,
.ui-refresh .ajax-drawer .panel-body,
.ui-refresh .ajax-drawer .panel-body .discount_settings_container,
.ui-refresh .ajax-drawer .capacity-settings,
.ui-refresh .ajax-drawer #package-settings,
body.ui-refresh.iframe-modal .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: 0;
}

.ui-refresh .panel-body .vis-section {
    border-bottom: none;
    margin-bottom: var(--space-5);
    padding-bottom: 0;
}

.ui-refresh .panel-body .vis-section:last-child {
    margin-bottom: 0;
}

.ui-refresh .panel-body .vis-section .toggles-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ui-refresh.sidebar .panel-body {
    padding: 0 var(--space-2);
}

.ui-refresh .ajax-drawer .panel-body {
    padding: 0;
}

.ui-refresh .ajax-drawer .sidebar-body {
    padding: var(--space-4) var(--sidebar-x-padding);
    position: relative;
}

/* AddressInput inside a drawer — this block owns the box outright.
 *
 * The widget's markup is Bootstrap 3 `form-horizontal` sitting on a `.col-sm-12`,
 * and four separate legacy rules pile spacing onto it:
 *   - bootstrap.css:3078  `.form-horizontal .form-group` pulls EVERY row back out
 *     by 15px on each side, straight through whatever padding the box has
 *   - `.col-sm-12` adds its own 15px gutters
 *   - address-input.css:5 sets `padding: 0 30px 15px` plus a #CCC border
 *   - active-form.css:6 pins another 30px with !important
 * Tuning the padding value cannot win against the negative margins: the declared
 * padding reads large in devtools while the fields sit flush against the border.
 *
 * So neutralise all of it and lay the box out here with flex. `gap` replaces every
 * margin, which also means the padding below is literally uniform on all four
 * sides — no compensating for a trailing row's margin. Change --space-5 in one
 * place to resize the box.
 *
 * Scoped to .ajax-drawer: the legacy sidebar, the frontend registration forms and
 * every other AddressInput consumer keep the markup they were built against. */
.ui-refresh .ajax-drawer .new-form .billing_address .address-widget-container,
.ui-refresh .ajax-drawer .address-widget-container {
    padding: 0 !important;
}

.ui-refresh .ajax-drawer .address-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    margin: 0;
    /* Top is one step tighter than the other three: the first row's label carries
     * its own leading (base.css:38 gives .control-label a block box plus
     * --space-1 below it), so a matching --space-3 up here reads as too much. */
    padding: var(--space-1) var(--space-3) var(--space-3);
}

/* Rows and fields keep no bootstrap spacing of their own — the flex gap above is
 * the single source of vertical rhythm. */
.ui-refresh .ajax-drawer .address-details .form-group {
    margin: 0;
    padding: 0;
}

/* Bootstrap gives .form-horizontal .form-group a clearfix (bootstrap.css:6548).
 * Under flex those pseudo-elements become flex items and open phantom gaps. */
.ui-refresh .ajax-drawer .address-details .form-group::before,
.ui-refresh .ajax-drawer .address-details .form-group::after {
    display: none;
}

/* City / State / Zip share a row via flex rather than bootstrap floats, so they
 * divide the available width evenly whatever the drawer size. */
.ui-refresh .ajax-drawer .address-details .address-inline {
    display: flex;
    gap: var(--space-3);
}

.ui-refresh .ajax-drawer .address-details .address-inline > [class*="col-"] {
    float: none;
    width: auto;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* The widget emits its phone/website row unconditionally
 * (widgets/views/AddressInput.php:261) but fills it only when those fields were
 * requested, and the contact billing address asks for neither. Hiding it also
 * removes it as a flex item, so it contributes no gap.
 *
 * Match on "no element children at all" rather than on a missing .form-group: the
 * city/state/zip row's children are bare `.col-sm-4` divs with no form-group
 * class, so a :has(> .form-group) test would hide that row too. */
.ui-refresh .ajax-drawer .address-details .address-inline:not(:has(> *)) {
    display: none;
}

/* The `.billing_address` wrapper's only child is the field's own .form-group,
 * which makes that form-group match the sidebar's `:last-child { margin-bottom:
 * 0 }` rule (components.css) meant for the last field in the whole tab panel.
 * That strips its bottom margin and collapses the gap before whatever field
 * follows it. Restore the standard field rhythm here regardless of position. */
.ui-refresh .ajax-drawer .billing_address > .form-group {
    margin-bottom: var(--space-4);
}

.ui-refresh.sidebar .new-form .input-group-addon,
.ui-refresh .ajax-drawer .new-form .input-group-addon {
    font-size: var(--font-size-xs);
}

.ui-refresh.sidebar .sidebar-collapse-stack.in,
.ui-refresh.sidebar .sidebar-collapse-stack.collapsing,
.ui-refresh .ajax-drawer .sidebar-collapse-stack.in,
.ui-refresh .ajax-drawer .sidebar-collapse-stack.collapsing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ui-refresh .update-user-account .admin-settings-body .field-useraccount-expires_on,
.ui-refresh .update-user-account .admin-settings-body .field-userinviteform-expires_on {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-refresh .update-user-account .admin-settings-body .field-useraccount-expires_on > label,
.ui-refresh .update-user-account .admin-settings-body .field-userinviteform-expires_on > label,
.ui-refresh .update-user-account .bridge-user > label {
    white-space: nowrap;
    margin: 0;
    width: 90px;
    flex-shrink: 0;
}

.ui-refresh .update-user-account .admin-settings-body .field-useraccount-expires_on::before,
.ui-refresh .update-user-account .admin-settings-body .field-userinviteform-expires_on::before {
    display: none;
}

.ui-refresh .update-user-account .admin-settings-body .hasDatepicker {
    max-width: 150px;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.ui-refresh.sidebar .panel-body::before,
.ui-refresh.sidebar .panel-body::after,
.ui-refresh .ajax-drawer .panel-body::before,
.ui-refresh .ajax-drawer .panel-body::after {
    display: none;
}

.ui-refresh .update-user-account .bridge-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
}

.ui-refresh .update-user-account .bridge-user > label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    margin: 0;
    white-space: nowrap;
}

.ui-refresh .update-user-account .bridge-user > label i {
    color: var(--fg-subtle);
    cursor: help;
}

.ui-refresh .update-user-account .bridge-user .form-group {
    margin: 0;
}

.ui-refresh .ui-datepicker.ui-widget {
    background-color: var(--bg-surface);
    box-shadow: var(--sh-md);
}

.ui-refresh .ui-datepicker thead th {
    color: var(--fg-default);
}

.ui-refresh .ui-datepicker {
    font-family: var(--font-family);
    color: var(--fg-muted);
    font-size: var(--font-size-xs);
}

.ui-refresh .ui-datepicker .ui-datepicker-header {
    color: var(--fg-default);
}

.ui-refresh .ui-datepicker .ui-datepicker-months,
.ui-refresh .ui-datepicker .ui-datepicker-years {
    color: var(--fg-default);
    z-index: 100;
}

.ui-refresh ul.ui-datepicker-months,
.ui-refresh ul.ui-datepicker-years {
    box-shadow: var(--sh-md);
}

.ui-refresh .ui-datepicker .ui-datepicker-months li,
.ui-refresh .ui-datepicker .ui-datepicker-years li {
    background-color: var(--bg-surface);
}

.ui-refresh .ui-datepicker td a,
.ui-refresh .ui-datepicker td span {
    color: var(--fg-muted);
}

.ui-refresh .ui-datepicker td.ui-datepicker-current-day:not(.ui-datepicker-today) a.ui-state-active {
    color: var(--fg-on-accent);
}

.ui-refresh .ui-datepicker-calendar tbody td.ui-datepicker-other-month a {
    color: var(--fg-subtle) !important;
    opacity: .5;
}

.ui-refresh .ui-datepicker-calendar tbody td.ui-datepicker-other-month:hover a {
    color: var(--fg-on-accent) !important;
}

.ui-refresh .ui-datepicker-calendar tbody .ui-datepicker-today:not(.ui-datepicker-unselectable) {
    background-color: var(--bg-subtle);
}

.ui-refresh .ui-datepicker .ui-datepicker-title {
    color: var(--fg-default);
}

.ui-refresh .update-user-account .form-control {
    font-size: var(--font-size-xs);
    height: 32px;
}

.ui-refresh .new-form .form-control,
.ui-refresh .new-form select.form-control,
.ui-refresh .new-form .btn.dropdown-toggle {
    height: var(--input-height);
}

.ui-refresh .input-group .form-control:first-child {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.ui-refresh .new-ui-select {
    padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
    background-position: calc(100% - .8em) center !important;
}

/* BootstrapMultiselect trigger button — match the sidebar form-control sizing.
   The plugin sets height inline (style="...height: 32px"), so !important is
   needed for the token-driven height to win. The .sidebar-form scope on the
   drawer selector raises specificity above the chunkier dashlet rule in
   components.css (.ui-refresh .ajax-drawer .multiselect-native-select > ...). */
.ui-refresh.sidebar .sidebar-form .multiselect.dropdown-toggle,
.ui-refresh .ajax-drawer .sidebar-form .multiselect.dropdown-toggle {
    height: var(--input-height) !important;
    min-height: 0 !important;
    padding: 0 var(--space-3) !important;
    font-size: var(--font-size-input);
}
.ui-refresh.sidebar .sidebar-form .multiselect.dropdown-toggle .multiselect-selected-text,
.ui-refresh .ajax-drawer .sidebar-form .multiselect.dropdown-toggle .multiselect-selected-text {
    font-size: var(--font-size-xs);
}

/* Match input-group-addon heights to the 32px input so the Translate
 * button (which Bootstrap renders as a 40px `.btn`) doesn't stand taller
 * than the field it's attached to. Same height treatment for the
 * `lang-name`, `google-translate`, and pricing `$` addons so the whole
 * input-group reads as one row regardless of which addons are present.
 *
 * `!important` on height + `box-sizing: border-box` is required because the
 * pricing tab's `$` addon ends up at 38px otherwise — line-height + the
 * input-group's `display: table` layout conspire to size the cell to its
 * content rather than honour the height we set. */
.ui-refresh.sidebar .sidebar-form .input-group-addon,
.ui-refresh .ajax-drawer .sidebar-form .input-group-addon {
    height: 32px;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    line-height: 30px;
    font-size: var(--font-size-xs);
    vertical-align: middle;
}

/* Pricing's currency widget renders the `$` addon alongside a `display:
 * block` input (Kartik's currency-input widget breaks Bootstrap's normal
 * `.input-group .form-control { display: table-cell }` rule). With mixed
 * block + table-cell siblings inside `display: table`, the row grows to
 * accommodate the largest cell — the addon ended up 38px tall while the
 * input stayed at 32px. Switch this specific input-group to flex layout
 * so both children align to a common 32px height.
 *
 * `.label-add-on` and `.currency-label` are the Kartik classes applied to
 * the wrapping `.input-group` for prefix/suffix labels.
 *
 * The `.ajax-drawer .sidebar-form` sibling on every selector below extends
 * the same rules to the ui-refresh ajax drawer (e.g. the early bird dates
 * grid), which reuses this addon markup but isn't inside `.sidebar`. */
.ui-refresh.sidebar .sidebar-form .label-add-on.input-group,
.ui-refresh .ajax-drawer .sidebar-form .label-add-on.input-group,
.ui-refresh.sidebar .sidebar-form .currency-label.input-group,
.ui-refresh .ajax-drawer .sidebar-form .currency-label.input-group {
    display: flex;
    align-items: stretch;
}
.ui-refresh.sidebar .sidebar-form .label-add-on > input.form-control,
.ui-refresh .ajax-drawer .sidebar-form .label-add-on > input.form-control,
.ui-refresh.sidebar .sidebar-form .currency-label > input.form-control,
.ui-refresh .ajax-drawer .sidebar-form .currency-label > input.form-control {
    flex: 1;
}
.ui-refresh.sidebar .sidebar-form .label-add-on > .input-group-addon,
.ui-refresh .ajax-drawer .sidebar-form .label-add-on > .input-group-addon,
.ui-refresh.sidebar .sidebar-form .currency-label > .input-group-addon,
.ui-refresh .ajax-drawer .sidebar-form .currency-label > .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `flex-basis: max-content` makes the addon grow to fit its label text
     * (e.g. "people to select"), while `min-width: 36px` keeps short-glyph
     * addons like `$` at a comfortable 36px box. `flex: 0 0` (no grow / no
     * shrink) means the input next to the addon takes the remaining space.
     * (Plain `flex: 0 0 auto` was using min-content basis in this context
     * and clamped long-text addons to ~11px, leaving the text overflowing
     * past the box.) */
    min-width: 36px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: max-content;
    padding: 0 var(--space-3);
    height: var(--input-height);
    line-height: 1;
}
/* The label inside the addon: zero out Bootstrap's default margins/padding
 * so it doesn't shift the centered content. `white-space: nowrap` +
 * `flex-shrink: 0` prevent the label from being shrunk below its text
 * content — without these, the label inside a long-text addon (e.g.
 * "people to select") gets squashed to 11px while the text overflows
 * the addon's box. With nowrap + no-shrink the addon grows to fit the
 * label's full text. */
.ui-refresh.sidebar .sidebar-form .label-add-on > .input-group-addon > label,
.ui-refresh .ajax-drawer .sidebar-form .label-add-on > .input-group-addon > label,
.ui-refresh.sidebar .sidebar-form .currency-label > .input-group-addon > label,
.ui-refresh .ajax-drawer .sidebar-form .currency-label > .input-group-addon > label {
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Drop the legacy `.visibility-conditions { border: 1px solid #e9ecef;
 * border-radius: 6px }` chrome — in dark mode that resolves to a bright
 * off-white outer box that completely dominates the "All dates and times"
 * reveal. Replace with a clean indented look: small left-border accent
 * so the reveal still reads as grouped under the toggle.
 *
 * Only HORIZONTAL padding on the collapse element itself — vertical
 * padding on `.collapse` produces residual height that snaps away when
 * Bootstrap finishes the close animation with `display:none`. Top
 * spacing comes via a margin-top on the first inner child (lede `<p>`)
 * which lives inside the collapse's overflow:hidden BFC and animates
 * with the height. */
/* Default `.visibility-conditions` reveal — used by the early-bird reveal
 * (#early_price_settings) and any other "toggle reveals a panel of
 * settings" group. The legacy box (`border: 1px solid #e9ecef; margin:
 * 15px; padding: 15px 15px 0`) renders as a bright off-white box in dark
 * mode AND its vertical margin/padding snap away when Bootstrap closes
 * the collapse with `display:none`. Replace with a clean dark-mode-safe
 * box:
 *   - Subtle translucent border + rounded corners (visible in both modes)
 *   - Horizontal padding on the .collapse itself (vertical-safe — doesn't
 *     contribute to animated height)
 *   - Vertical breathing room via margin on the first/last visible inner
 *     children, which live inside the collapse's overflow:hidden BFC and
 *     are part of the animated height (no snap). */
/* Applies in both the legacy iframe sidebar (`body.sidebar`) and the in-page
   AjaxDrawer (`.ajax-drawer`) — the early-bird reveal in the Edit Fees drawer
   is the same `.visibility-conditions` disclosure and needs the same card. */
.ui-refresh.sidebar .visibility-conditions,
.ui-refresh .ajax-drawer .visibility-conditions {
    border: 1px solid var(--inset-overlay-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--inset-overlay);
    margin: 0 !important;
    padding: 0 var(--space-4) !important;
}
.ui-refresh.sidebar .visibility-conditions > *:first-child,
.ui-refresh .ajax-drawer .visibility-conditions > *:first-child {
    margin-top: var(--space-3);
}
.ui-refresh.sidebar .visibility-conditions > *:last-child,
.ui-refresh .ajax-drawer .visibility-conditions > *:last-child {
    margin-bottom: var(--space-3);
}
/* Bootstrap legacy `.radio input[type="radio"]` and `.checkbox input` are
 * `position: absolute; margin-left: -20px` so the input floats 20px to
 * the LEFT of its label text. Inside our `.visibility-conditions` box
 * that pushes the input past the box's left border. Restructure the
 * `.radio`/`.checkbox` label as a flex row so:
 *   - The input sits inline at the left of the label
 *   - Long label text wraps cleanly under the TEXT (not under the input)
 *   - The input is fixed-size and doesn't shrink */
.ui-refresh.sidebar .visibility-conditions .radio,
.ui-refresh.sidebar .visibility-conditions .checkbox,
.ui-refresh .ajax-drawer .visibility-conditions .radio,
.ui-refresh .ajax-drawer .visibility-conditions .checkbox {
    padding-left: 0;
}
.ui-refresh.sidebar .visibility-conditions .radio > label,
.ui-refresh.sidebar .visibility-conditions .checkbox > label,
.ui-refresh .ajax-drawer .visibility-conditions .radio > label,
.ui-refresh .ajax-drawer .visibility-conditions .checkbox > label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding-left: 0;
}
.ui-refresh.sidebar .visibility-conditions .radio input[type="radio"],
.ui-refresh.sidebar .visibility-conditions .checkbox input[type="checkbox"],
.ui-refresh .ajax-drawer .visibility-conditions .radio input[type="radio"],
.ui-refresh .ajax-drawer .visibility-conditions .checkbox input[type="checkbox"] {
    position: static;
    margin: 0;
    flex-shrink: 0;
    /* Optical alignment with the first line of label text — radios are
     * usually 16px diameter against ~20px line-height text, so a tiny
     * top offset puts the dot vertical-center against the first line's
     * x-height instead of its baseline. */
    margin-top: 2px;
}

/* The date range reveal (#datetime-conditions) uses a simpler indented
 * treatment instead of a box — the content (just From/To pickers + a
 * time zone caption) reads cleaner without surrounding chrome. Overrides
 * the default box style above. */
.ui-refresh.sidebar #datetime-conditions {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 0 0 var(--space-4) !important;
    margin-left: 4px !important;
    border-left: 2px solid var(--border-subtle) !important;
}
.ui-refresh.sidebar #datetime-conditions > p:first-child {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Date range fields inside the Visibility tab's "All dates" reveal use
 * legacy Bootstrap horizontal-form classes (`col-sm-2 control-label` +
 * two `col-sm-5` input columns) WITHOUT a `.row` parent. Bootstrap's
 * media-query `col-sm-*` rules carry their own widths and floats that
 * fight our flex layout. `!important` on width/flex/float resets is the
 * cheapest way to nuke them in this scoped context.
 *
 * Note: scoped to **direct children** of `#datetime-conditions` (`> .form-group`)
 * so we only flex the OUTER From/To row; the kv-form-bs3 widget wraps each
 * date/time input in its own nested `.form-group` and we want that to stay
 * a normal block (otherwise it inherits flex + wraps + gap, producing the
 * mysterious 18px of empty space around the input).
 *
 * Final layout per row: small "From"/"To" label + Date picker + Time
 * picker, all aligned on one horizontal row. */
.ui-refresh.sidebar #datetime-conditions > .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.ui-refresh.sidebar #datetime-conditions > .form-group > .control-label {
    width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
    float: none !important;
}
/* The label ALSO matches `[class^="col-"]` (it has both `col-sm-2` and
 * `control-label`). Without :not, this rule wins by source order over the
 * `.control-label` rule above, expanding the label back to 117px. Exclude
 * .control-label so the label-specific rule keeps its 40px width. */
.ui-refresh.sidebar #datetime-conditions > .form-group > [class^="col-"]:not(.control-label),
.ui-refresh.sidebar #datetime-conditions > .form-group > [class*=" col-"]:not(.control-label) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    float: none !important;
}
.ui-refresh.sidebar #datetime-conditions > p {
    margin: 0 0 var(--space-2);
    color: var(--fg-muted);
}
.ui-refresh.sidebar #datetime-conditions > .col-sm-12 {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    margin-top: var(--space-2);
}
/* Reset the kv-form-bs3 inner form-group inside each col to a plain
 * block — no flex, no margin — so the date/time input fills the column
 * width and there's no 18px of phantom flex space around it. */
.ui-refresh.sidebar #datetime-conditions .form-group .form-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto;
}

.ui-refresh .update-user-account .panel-default {
    margin-bottom: var(--space-4);
}

.ui-refresh .update-user-account .checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.ui-refresh .sidebar-body .account-permissions-body {
    margin-bottom: var(--space-4);
}

/* Sidebar tab bar styles live in web/css/sidebar-tab-bar.css (loaded via
 * SidebarTabBarAsset). master added a duplicate inline copy here; dropped
 * during merge to keep the extracted asset as the single source of truth. */

/* ===== Folder Drill-Down ===== */
.ui-refresh .fd-breadcrumb-wrap {
    padding: 0 var(--space-3, 12px);
    border-bottom: 1px solid var(--input-border);
}

.ui-refresh .fd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ui-refresh .fd-breadcrumb::-webkit-scrollbar {
    display: none;
}

.ui-refresh .fd-breadcrumb-item {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-refresh .fd-breadcrumb-link {
    color: var(--fg-muted);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.ui-refresh .fd-breadcrumb-link:hover {
    color: var(--fg-default);
}

.ui-refresh .fd-breadcrumb-current {
    color: var(--fg-default);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.ui-refresh .fd-breadcrumb-home {
    font-size: var(--font-size-sm);
}

.ui-refresh .fd-breadcrumb-sep {
    font-size: 8px;
    color: var(--fg-muted);
    flex-shrink: 0;
}

.ui-refresh .fd-header-row {
    display: flex;
    align-items: center;
}

.ui-refresh .fd-header-row .fd-breadcrumb {
    flex: 1;
    min-width: 0;
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
}

.ui-refresh .fd-grant-all {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding-left: var(--space-3, 12px);
    margin-left: auto;
    border-left: 1px solid var(--input-border);
    padding-right: 2px;
}

.ui-refresh .fd-grant-all-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    white-space: nowrap;
}

.ui-refresh .fd-toggle {
    width: 30px;
    height: 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 0;
    background: var(--border-strong);
    position: relative;
    transition: background var(--transition-fast);
}

.ui-refresh .fd-toggle.fd-toggle-on {
    background: var(--accent-primary);
}

.ui-refresh .fd-toggle-knob {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left var(--transition-fast);
    box-shadow: 0 1px 2px rgba(44, 47, 58, 0.15);
}

.ui-refresh .fd-toggle.fd-toggle-on .fd-toggle-knob {
    left: 14px;
}

.ui-refresh .fd-rows {
    padding: 2px 0;
}

.ui-refresh .fd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--space-3, 12px);
    height: 40px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ui-refresh .fd-row:hover {
    background: var(--state-hover);
}

.ui-refresh .fd-row:has(.fd-drill-btn:hover) {
    background: transparent;
}

.ui-refresh .fd-row-name {
    flex: 1;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-refresh .fd-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ui-refresh .fd-folder-icon {
    flex-shrink: 0;
    color: var(--border-strong);
}

.ui-refresh .fd-folder--active .fd-folder-icon {
    color: var(--accent-primary);
}

.ui-refresh .fd-folder--active .fd-row-name {
    color: var(--accent-primary);
}

.ui-refresh .fd-chevron {
    color: var(--border-strong);
}

.ui-refresh .fd-drill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.ui-refresh .fd-drill-btn:hover {
    background: var(--state-hover);
}

.ui-refresh .fd-drill-btn:hover .fd-chevron {
    color: var(--fg-muted);
}

.ui-refresh .fd-checkmark {
    color: var(--color-selected);
}

.ui-refresh .fd-badge {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    line-height: 1.2;
}

.ui-refresh .fd-empty {
    padding: var(--space-5) 14px;
    color: var(--fg-subtle);
    font-size: var(--font-size-sm);
    text-align: center;
}

.ui-refresh .fd-container-wrap {
    position: relative;
}

.ui-refresh .fd-admin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface);
    opacity: 0.5;
    pointer-events: auto;
    z-index: 1;
    border-radius: var(--radius-lg);
}

.ui-refresh #folder-access-container {
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* ===== Manage Folder Sidebar ===== */

.ui-refresh .manage-folder-sidebar .profile-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ui-refresh .manage-folder-sidebar .add-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed var(--fg-muted);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--fg-muted);
    font-size: 18px;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ui-refresh .manage-folder-sidebar .add-user-avatar:hover {
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}

.ui-refresh .manage-folder-sidebar .folder-meta-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    border: 1px solid var(--panel-border);
    border-radius: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.ui-refresh .manage-folder-sidebar .manage-folder-body {
    padding-top: 0;
}

.ui-refresh .manage-folder-sidebar .folder-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.ui-refresh .manage-folder-sidebar .folder-meta-row label {
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-muted, #6b7280);
    margin-bottom: 0;
}

.ui-refresh .manage-folder-sidebar .folder-meta-row > span,
.ui-refresh .manage-folder-sidebar .folder-meta-owner > span:not(.user-avatar) {
    font-size: var(--font-size-xs, 12px);
    color: var(--fg-default, #1f2937);
}

.ui-refresh .manage-folder-sidebar .folder-meta-owner {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

/* ===== Folder Manage Users Modal ===== */

.ui-refresh .folder-manage-users-modal .fmu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
}

.ui-refresh .folder-manage-users-modal .fmu-header::before,
.ui-refresh .folder-manage-users-modal .fmu-header::after {
    display: none;
}

.ui-refresh .folder-manage-users-modal .fmu-search {
    padding: var(--space-3) 15px var(--space-3);
}

.ui-refresh .folder-manage-users-modal .fmu-search .form-control {
    height: 36px;
    font-size: var(--font-size-sm);
}

.ui-refresh .folder-manage-users-modal .fmu-body {
    display: flex;
    padding: 0;
    height: 400px;
    overflow: hidden;
}

.ui-refresh .folder-manage-users-modal .fmu-available,
.ui-refresh .folder-manage-users-modal .fmu-granted {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ui-refresh .folder-manage-users-modal .fmu-granted {
    border-left: 1px solid var(--border-subtle);
}

.ui-refresh .folder-manage-users-modal .fmu-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 14px;
    min-height: 40px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.ui-refresh .folder-manage-users-modal .fmu-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: normal;
    color: var(--fg-muted);
    cursor: pointer;
    margin: 0;
}

.ui-refresh .folder-manage-users-modal .fmu-select-all-label input[type="checkbox"] {
    margin: 0;
}

.ui-refresh .folder-manage-users-modal #fmu-available-list,
.ui-refresh .folder-manage-users-modal #fmu-granted-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.ui-refresh .folder-manage-users-modal .fmu-role-group {
    margin-bottom: 2px;
}

.ui-refresh .folder-manage-users-modal .fmu-role-header {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    cursor: pointer;
    user-select: none;
}

.ui-refresh .folder-manage-users-modal .fmu-role-header:hover {
    background: var(--state-hover);
}

.ui-refresh .folder-manage-users-modal .fmu-role-checkbox {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}

.ui-refresh .folder-manage-users-modal .fmu-chevron {
    font-size: 10px;
    width: 12px;
    display: inline-block;
    cursor: pointer;
    padding: var(--space-1);
    margin-right: var(--space-1);
}

.ui-refresh .folder-manage-users-modal .fmu-role-count {
    margin-left: var(--space-1);
}

.ui-refresh .folder-manage-users-modal .fmu-role-group.collapsed .fmu-role-users {
    display: none;
}

.ui-refresh .folder-manage-users-modal .fmu-user-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 14px 5px 32px;
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    font-size: var(--font-size-xs);
}

.ui-refresh .folder-manage-users-modal .fmu-user-row:hover {
    background: var(--state-hover);
}

.ui-refresh .folder-manage-users-modal .fmu-role-checkbox,
.ui-refresh .folder-manage-users-modal .fmu-user-checkbox,
.ui-refresh .folder-manage-users-modal .fmu-select-all-label input[type="checkbox"] {
    border-color: var(--fg-subtle);
}

.ui-refresh .folder-manage-users-modal .fmu-user-row .fmu-user-checkbox {
    margin: 0 0 0 auto;
    flex-shrink: 0;
}

.ui-refresh .folder-manage-users-modal .fmu-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-refresh .folder-manage-users-modal .fmu-granted-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 14px;
    font-size: var(--font-size-xs);
}

.ui-refresh .folder-manage-users-modal .fmu-empty {
    padding: var(--space-5) 14px;
    color: var(--fg-subtle);
    font-size: var(--font-size-sm);
    text-align: center;
}

.ui-refresh .folder-manage-users-modal .fmu-available-title,
.ui-refresh .folder-manage-users-modal .fmu-granted-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ui-refresh .folder-manage-users-modal .fmu-available-title .badge,
.ui-refresh .folder-manage-users-modal .fmu-granted-title .badge {
    line-height: 150%;
}

.ui-refresh .badge,
.ui-refresh .badges-container .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 150%;
    border: 1px solid var(--input-border);
    width: fit-content;
}

.ui-refresh .badge,
.ui-refresh .badges-container .prop,
.ui-refresh .badges-container .badge,
.ui-refresh .badges-container .badge.gray {
    color: var(--fg-muted);
    background: var(--bg-subtle);
}

.ui-refresh .badge.primary,
.ui-refresh .badges-container .prop.primary,
.ui-refresh .badges-container .badge.primary,
.ui-refresh .badges-container .badge.primary a {
    color: var(--primary-ink);
    background: var(--accent-subtle);
    border-color: var(--accent-muted);
}

/* Popover badges wrap their text in an <a>; badge.css colors that link with
   light-only values, so take the pill's ui-refresh color instead. */
.ui-refresh .badges-container .badge a {
    color: inherit;
    background: transparent !important;
}

/* override the purple badges with ok for now until we have a ui-refresh version of purple badges */
.ui-refresh .badge.ok,
.ui-refresh .badges-container .badge.purple {
    color: var(--ok);
    background: var(--ok-bg);
    border-color: var(--ok-line);
}
.ui-refresh .badges-container .prop.ok {
    color: var(--ok);
    background: var(--ok-bg);
}
.ui-refresh .badges-container .prop.ok:hover {
    border-color: var(--ok-line);
}

.ui-refresh .badge.warn {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-line);
}
.ui-refresh .badges-container .prop.warn {
    color: var(--warn);
    background: var(--warn-bg);
}
.ui-refresh .badges-container .prop.warn:hover {
    border-color: var(--warn-line);
}

.ui-refresh .folder-manage-users-modal .fmu-footer {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4);
}

.ui-refresh .folder-manage-users-modal .fmu-footer-buttons {
    display: flex;
    gap: var(--space-2, 8px);
    max-width: 400px;
    margin-left: auto;
}

.ui-refresh .folder-manage-users-modal .fmu-footer-buttons .btn {
    flex: 1;
}

/* User History sidebar */

.ui-refresh .sidebar-subheader {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-default);
    margin: 0 0 var(--space-2);
}

.ui-refresh .user-activity .sidebar-subheader {
    margin-top: var(--space-4);
}

.ui-refresh .activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ui-refresh .audit-row {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ui-refresh .audit-row:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.ui-refresh .audit-row-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.ui-refresh .audit-row-head:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.ui-refresh .activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--bg-muted);
    color: var(--fg-muted);
}

.ui-refresh .activity-icon-edit,
.ui-refresh .activity-icon-create,
.ui-refresh .activity-icon-delete,
.ui-refresh .activity-icon-action {
    background: var(--accent-soft);
    color: var(--accent-primary);
}

.ui-refresh .activity-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-default);
    line-height: 1.3;
    margin-right: var(--space-6);
}

.ui-refresh .activity-fields {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-refresh .activity-verb {
    flex-shrink: 0;
    color: var(--fg-muted);
    font-weight: 400;
}

.ui-refresh .activity-time {
    font-size: 12px;
    color: var(--fg-muted);
    flex-shrink: 0;
}

.ui-refresh .activity-chevron {
    color: var(--fg-muted);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.ui-refresh .audit-row.expanded .activity-chevron {
    transform: rotate(180deg);
}

.ui-refresh .audit-row-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-normal) ease-out;
}

.ui-refresh .audit-row.expanded .audit-row-body-wrap {
    grid-template-rows: 1fr;
}

.ui-refresh .audit-row-body {
    overflow: hidden;
}

.ui-refresh .audit-row.expanded .audit-row-body {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--panel-border);
    background: var(--bg-surface);
}

.ui-refresh .activity-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--fg-muted);
}

.ui-refresh .activity-meta-name {
    color: var(--fg-default);
    font-weight: 500;
}

.ui-refresh .activity-meta-dot {
    color: var(--fg-muted);
}

.ui-refresh .activity-diff {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(90px, 1fr);
    row-gap: var(--space-2);
    column-gap: var(--space-2);
    font-size: 13px;
    align-items: center;
    margin-top: var(--space-3);
}

.ui-refresh .activity-diff-label {
    color: var(--fg-muted);
    padding-right: var(--space-1);
}

.ui-refresh .activity-diff-values {
    display: contents;
}

.ui-refresh .activity-old,
.ui-refresh .activity-new {
    justify-self: start;
}

.ui-refresh .activity-old,
.ui-refresh .activity-new {
    font-size: 12px;
    padding: 0 var(--space-1);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ui-refresh .activity-old,
.ui-refresh .activity-old a {
    color: var(--fg-muted) !important;
    text-decoration: line-through;
}

.ui-refresh .activity-new,
.ui-refresh .activity-new a {
    color: var(--primary-ink) !important;
}

/* When a pill's value is a link (e.g. role), stretch the anchor so the whole pill is clickable. */
.ui-refresh .activity-old:has(a),
.ui-refresh .activity-new:has(a) {
    padding: 0;
}

.ui-refresh .activity-old a,
.ui-refresh .activity-new a {
    display: inline-block;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
    text-decoration: inherit;
    transition: background-color var(--transition-fast);
}

.ui-refresh .activity-old a:hover {
    background-color: var(--bg-subtle);
    color: var(--ink) !important;
}

.ui-refresh .activity-new a:hover {
    background-color: var(--accent-subtle);
}

.ui-refresh .activity-arrow {
    color: var(--fg-muted);
    font-size: 11px;
}

/* ----- Group Info panel (registrant detail, ui-refresh design option 2a:
   bordered cards, two-line content) ----- */

/* The .rd-profile .panel bridge (components.css) sets overflow: hidden to
   clip panel content to its rounded corners — which also clips the kebab
   dropdown-menu's open state for cards near the bottom of the list, since
   the menu is position: absolute and can extend past the panel's edge.
   Let it escape instead. Same technique as .comm-overflow-visible; !important
   needed since the bridge rule (.rd-profile .panel.report-view) outranks a
   plain .rd-group-info selector. */
.ui-refresh .rd-group-info,
.ui-refresh .rd-group-info .panel-body {
    overflow: visible !important;
}

.ui-refresh .rd-group-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ui-refresh .rd-group-card {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-3) var(--space-3);
}

.ui-refresh .rd-group-card--current {
    border-color: var(--accent-primary);
}

.ui-refresh .rd-group-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ui-refresh .rd-group-card__identity {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.ui-refresh .rd-group-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-refresh .rd-group-card__badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
}

.ui-refresh .rd-group-card__badge--primary {
    background: var(--accent-primary);
    color: var(--fg-on-accent);
}

.ui-refresh .rd-group-card__badge--danger {
    background: var(--danger-soft);
    color: var(--danger-primary);
}

.ui-refresh .rd-group-card__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.ui-refresh .rd-group-card__head-actions:not(:has(.rd-group-card__price + .btn-group)) .rd-group-card__price {
    margin-right: calc(var(--space-2) + 26px);
}

.ui-refresh .rd-group-card__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-default);
    white-space: nowrap;
}

/* ButtonDropdown (yii\bootstrap) always appends a <span class="caret">, and
   always adds the .btn class — there's no widget option to suppress either,
   so both are overridden here to get the design's plain icon-only trigger. */
.ui-refresh .rd-group-card__kebab.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    box-shadow: none;
    color: var(--fg-muted);
    font-size: 14px;
    line-height: 1;
}

.ui-refresh .rd-group-card__kebab.btn:hover,
.ui-refresh .rd-group-card__kebab.btn:focus {
    background: var(--bg-muted);
    color: var(--fg-default);
}

.ui-refresh .rd-group-card__kebab .caret {
    display: none;
}

.ui-refresh .rd-group-card__meta {
    margin-top: var(--space-1);
    font-size: 12.5px;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-refresh .rd-group-card__meta a {
    color: inherit;
}

.ui-refresh .activity-load-more {
    display: flex;
    justify-content: center;
}

.ui-refresh .activity-load-more-btn {
    font-size: 13px;
    font-weight: 500;
}

/* ===== Event Header — token alignment ===== */
/* CSS-only polish for the event name bar. Applies to all event pages.
   Values are near-identical to legacy — just swapped to design tokens. */
.ui-refresh .event-details {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-4);
}
.ui-refresh .event-name {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--fg-default);
}
.ui-refresh .event-details .favorite-container {
    margin-left: var(--space-3);
    display: flex;
    align-items: center;
}
.ui-refresh .event-details .event-set-favorite {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
}
.ui-refresh .event-details .event-set-favorite .fa-star {
    color: var(--yellow-30);
}
.ui-refresh .event-details .btn-sm {
    height: 28px;
    padding: 0 var(--space-2);
}

/* Hide the border on the mobile event-details bar — the event name sits
   in the navbar on ui-refresh, so the legacy bottom border just creates
   a double-line artifact below the nav tabs. */
.ui-refresh .event-details.visible-xs {
    border-bottom: none;
}

/* ===== Mobile: Event page layout ===== */
@media only screen and (max-width: 767px) {
    /* Mobile navbar is taller (hamburger + mobile event header).
       Adjust the content area height to account for the extra chrome.
       Bottom padding reserves space for the fixed-bottom sticky header
       so it doesn't overlap the last form fields. */
    .ui-refresh #content-container:not(.account) #main-content {
        max-height: calc(100svh - 120px);
        padding-bottom: 60px;
    }

}
/* Mass-action bar ("With Checked Records") overlapping the table above it.
 * `.bottom-row .grid-action { margin-top: -50px }` (ajax-datatables.css) pulls
 * the button up to sit level with the legacy DataTables pagination row. In
 * ui-refresh's `.list-page` wrapper (contact/index.php, invitees.php) that row
 * doesn't exist in the same place, so the same offset instead pulls the button
 * up into the table/toolbar above it — happens regardless of row count, since
 * it's a fixed offset, not a layout-dependent one. */
.ui-refresh .list-page .bottom-row .grid-action {
    margin-top: 0;
}