/* Desktop defaults — MUST stay above the @media block below: CSS resolves
   same-specificity ties by source order regardless of which side is inside
   a media query, so a default declared *after* the mobile override would
   silently win back on mobile every time. (Found by code review — this bug
   was live: .k-filter-select and .k-cookie-banner's mobile overrides were
   both being cancelled by their own desktop defaults declared below them.) */
.k-cookie-banner { bottom: 0; }
.k-filter-select { width: 200px; }

/* ── Admin nav: desktop defaults ──
   Desktop shows the persistent left MudDrawer; the custom mobile bar/panel
   below are display:none here and switched on inside the @media block. */
.k-admin-topbar,
.k-admin-topbar-spacer,
.k-admin-backdrop,
.k-admin-mobile-drawer { display: none; }

/* Bottom nav is a mobile-only shell; hidden on desktop, switched to
   display:flex inside the @media block. Without this default it fell
   through to block layout and rendered as unstyled links at page end. */
.k-bottomnav { display: none; }

/* Persistent drawer, positioned below the public app bar on desktop */
.mud-drawer.k-admin-drawer {
  top: var(--mud-appbar-height);
  height: calc(100vh - var(--mud-appbar-height));
  z-index: 900;
  position: fixed;
  overflow-y: auto;
  border-right: 1px solid var(--mud-palette-divider) !important;
}
.mud-drawer.k-admin-drawer.mud-drawer--open ~ div:not(.mud-main-content) {
  margin-left: 0 !important;
}

/* Drawer header (shared desktop + mobile) */
.k-admin-drawer-header {
  background-color: var(--mud-palette-primary);
  border-bottom: 1px solid var(--mud-palette-divider);
}

/* Nav link styling (shared desktop drawer + mobile panel) */
.k-admin-drawer .mud-nav-link,
.k-admin-mobile-drawer .mud-nav-link {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02857em;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  margin: 2px 0;
}
.k-admin-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
.k-admin-mobile-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
  border-left: 3px solid var(--mud-palette-primary);
}
.k-admin-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled),
.k-admin-mobile-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
  background-color: rgba(255,255,255,0.05);
}

@media (max-width: 599.98px) {
  /* App-shell layout: this is the actual fix for the bottom bar
     jitter/mispositioning, not another position:fixed patch. The root
     cause is that the mobile browser's own address-bar toolbar
     collapses/expands in response to *document*-level scrolling, which
     drags position:fixed elements out of sync with the visible viewport.
     Production sites (confirmed: YouTube mobile) solve this by never
     letting the document itself scroll — only an inner content pane
     scrolls, so the toolbar never animates and there's nothing for a
     fixed bottom bar to fight.
     MudBlazor's own CSS already ships `.mud-appbar{flex-shrink:0}` and
     `.mud-main-content{flex:1 1 auto}` — they're just inert today because
     `.mud-layout` (their parent) is never `display:flex`. Turning that on
     activates MudBlazor's existing layout, it isn't fought or duplicated. */
  /* Declared here (not on .k-bottomnav itself) so anything else that needs
     to clear the bar's height — e.g. the cookie banner below — can read the
     same var() instead of duplicating the calc(). */
  html { --k-bottomnav-height: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html, body { height: 100%; overflow: hidden; }
  .mud-layout { display: flex; flex-direction: column; }
  .mud-main-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Top app bar: hidden entirely, not just the nav buttons. The bottom
     nav's Home tab already covers what the logo linked to, and there's
     nothing else up there worth keeping (no search bar on this site) —
     unlike YouTube/Instagram, which keep a slim top bar alongside their
     bottom nav for search/notifications, this site has no such content to
     put there. mobile.css must load AFTER MudBlazor.min.css in App.razor
     for this override to reliably win — see the note there. */
  .k-topappbar { display: none; }

  /* Admin nav (mobile): custom fixed top bar + slide-in panel, mirroring the
     bottom nav. MudBlazor's Responsive drawer is not used here — it gets
     trapped in .mud-main-content's overflow:auto stacking/clipping context
     (grayed, unclickable, clipped under the bar). These custom elements are
     position:fixed to the viewport, so they escape that container. */
  html { --k-admin-topbar-height: 56px; }

  /* Hide the desktop persistent drawer on mobile. */
  .mud-drawer.k-admin-drawer { display: none !important; }

  /* The persistent drawer is Open=true, so MudBlazor shifts the main content
     with margin-left: var(--mud-drawer-width-left). display:none on the drawer
     doesn't clear that, so neutralise it on mobile (no-op for public pages,
     which have no drawer). Otherwise the body is pushed sideways like desktop. */
  .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }

  /* Fixed, full-width top bar glued to the top. */
  .k-admin-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--k-admin-topbar-height);
    padding: 0 4px 0 4px;
    background-color: var(--mud-palette-appbar-background);
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    z-index: 1200;
  }
  .k-admin-topbar-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* In-flow spacer reserves the fixed bar's height so content isn't hidden. */
  .k-admin-topbar-spacer { display: block; height: var(--k-admin-topbar-height); }

  /* Tap-to-close backdrop, below the always-visible top bar. */
  .k-admin-backdrop {
    display: block;
    position: fixed;
    top: var(--k-admin-topbar-height); left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 1190;
  }

  /* Slide-in nav panel, below the top bar so its close button stays tappable. */
  .k-admin-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--k-admin-topbar-height); left: 0;
    height: calc(100dvh - var(--k-admin-topbar-height));
    width: min(82vw, 300px);
    background-color: var(--mud-palette-drawer-background);
    border-right: 1px solid var(--mud-palette-divider);
    z-index: 1195;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .k-admin-mobile-drawer.k-open { transform: translateX(0); }

  .k-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    /* `bottom: 0` alone still mispositions during the mobile address-bar
       collapse/expand transition — this is the CSS fallback for browsers
       without the visualViewport API; bottomNav.js overrides `bottom`
       live via JS once the bar mounts, which is the actual fix. */
    z-index: 1100;
    height: var(--k-bottomnav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--mud-palette-appbar-background);
    border-top: 1px solid var(--mud-palette-divider);
    box-shadow: 0 -1px 4px rgba(0,0,0,.4);
  }

  .k-bottomnav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 8px 4px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none; background: none; border: 0; cursor: pointer;
    font-size: .6875rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  }
  .k-bottomnav-item > span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .k-bottomnav-item.k-active { color: var(--mud-palette-primary); }
  .k-bottomnav-item .mud-icon-root { font-size: 1.625rem; }
  .k-bottomnav-item .mud-avatar { height: 26px; width: 26px; font-size: .875rem; }

  /* content occlusion — bottom nav would otherwise cover the footer / page bottom */
  .k-main-container { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

  /* PageHeader title is Typo.h3 (3rem/48px) — still too large next to a
     wrapped action button on a narrow screen even after Wrap.Wrap kicks in */
  .k-pageheader .mud-typography-h3 { font-size: 1.75rem; }

  /* ListEventsPage filters: full-width below 600px instead of a fixed 200px
     each. No !important needed — width now lives in this external class
     (ListEventsPage.razor uses Class="k-filter-select", not an inline
     style), so this override wins on normal specificity/source order. */
  .k-filter-select { width: 100%; }

  /* Cookie banner: sit above the bottom nav instead of covering it. */
  .k-cookie-banner { bottom: var(--k-bottomnav-height); }
}

/* Featured EventCard: EventCard.razor renders two separate blocks for a
   featured event (desktop side-by-side vs. mobile identical-to-regular),
   toggled with MudBlazor's own CSS-only d-none/d-sm-block/d-block/d-sm-none
   responsive display utilities — no custom CSS needed here at all. See
   wiki/concepts/mobile-navigation.md for why two blocks instead of one
   reshaped element. */