/*
 * ============================================================
 *  XALLENGER — Base / Reset
 *  File: wwwroot/css/xal-base.css
 *
 *  Global reset, body defaults, typography utilities,
 *  scrollbar styling, MudBlazor global dark-theme reset,
 *  and print baseline.
 *  Depends on: xal-tokens.css
 * ============================================================
 */

/* ----------------------------------------------------------
   Reset
---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------
   Document
---------------------------------------------------------- */
html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--xal-bg-page);
    color: var(--xal-text);
    font-family: var(--xal-font-family);
    font-size: var(--xal-font-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */
a {
    color: var(--xal-gold);
    text-decoration: none;
    transition: var(--xal-transition-fast);
}
a:hover {
    color: var(--xal-text);
}

/* ----------------------------------------------------------
   Images / Media
---------------------------------------------------------- */
img,
video {
    max-width: 100%;
    display: block;
}

/* ----------------------------------------------------------
   Form elements baseline
---------------------------------------------------------- */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    cursor: pointer;
}

/* ----------------------------------------------------------
   Scrollbars  (Webkit + Firefox)
---------------------------------------------------------- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: var(--xal-bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--xal-bg-surface);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--xal-text-muted);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--xal-bg-surface) var(--xal-bg-secondary);
}

/* ==========================================================
   MudBlazor v9.1 — Global Dark Theme Reset
   Forces the MudBlazor root layout containers, typography,
   and shared surface elements to adopt the Xallenger dark
   palette. These rules sit at the lowest specificity
   possible so that xal-* class overrides always win without
   needing !important.
   ========================================================== */

/* Root layout shell */
.mud-layout,
.mud-main-content {
    background: var(--xal-bg-page) !important;
    color: var(--xal-text-primary) !important;
}

/* MudPaper / MudCard default surface */
.mud-paper {
    background-color: var(--xal-bg-card) !important;
    color: var(--xal-text-primary) !important;
}

/* MudAppBar */
.mud-appbar {
    background-color: var(--xal-bg-secondary) !important;
    color: var(--xal-text-primary) !important;
    border-bottom: 1px solid var(--xal-border-card) !important;
    box-shadow: none !important;
}

/* MudDrawer */
.mud-drawer,
.mud-drawer-content {
    background-color: var(--xal-bg-secondary) !important;
    color: var(--xal-text-primary) !important;
    border-right: 1px solid var(--xal-border-card) !important;
}

/* MudNavMenu */
.mud-nav-menu {
    background: transparent !important;
}
.mud-nav-item .mud-nav-link {
    color: var(--xal-text-secondary) !important;
    border-radius: var(--xal-radius-sm) !important;
    font-size: var(--xal-font-md) !important;
    font-weight: 600 !important;
    transition: var(--xal-transition-fast) !important;
}
.mud-nav-item .mud-nav-link:hover {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}
.mud-nav-item .mud-nav-link.active,
.mud-nav-item .mud-nav-link[aria-current="page"] {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
    border-left: 3px solid var(--xal-gold) !important;
}

/* Destructive menu item (e.g. Cancel Show) — the one place red belongs in a nav menu. */
.xal-mud-nav-link--danger .mud-nav-link {
    color: var(--xal-red-bright) !important;
}
.xal-mud-nav-link--danger .mud-nav-link:hover {
    background: var(--xal-red-dim) !important;
    color: var(--xal-red-bright) !important;
}
.xal-mud-nav-link--danger .mud-icon-root {
    color: inherit !important;
}

/* MudDivider */
.mud-divider {
    border-color: var(--xal-border) !important;
}

/* Global typography */
.mud-typography {
    color: var(--xal-text-primary) !important;
    font-family: var(--xal-font-family) !important;
}
.mud-typography-body1,
.mud-typography-body2 {
    color: var(--xal-text-secondary) !important;
}
.mud-typography-caption,
.mud-typography-overline {
    color: var(--xal-text-muted) !important;
}
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--xal-text-primary) !important;
    font-family: var(--xal-font-family) !important;
}

/* MudTooltip */
.mud-tooltip-root .mud-tooltip {
    background: var(--xal-bg-surface) !important;
    color: var(--xal-text-primary) !important;
    border: 1px solid var(--xal-border-card) !important;
    font-size: var(--xal-font-xs) !important;
    border-radius: var(--xal-radius-sm) !important;
    box-shadow: var(--xal-shadow-md) !important;
}

/* MudSnackbar */
.mud-snackbar {
    border-radius: var(--xal-radius-md) !important;
    font-family: var(--xal-font-family) !important;
    font-size: var(--xal-font-base) !important;
}
.mud-snackbar.mud-alert-filled-success {
    background: var(--xal-status-open) !important;
    color: #fff !important;
}
.mud-snackbar.mud-alert-filled-error {
    background: var(--xal-red-bright) !important;
    color: #fff !important;
}
.mud-snackbar.mud-alert-filled-warning {
    background: var(--xal-status-weighin) !important;
    color: #000 !important;
}
.mud-snackbar.mud-alert-filled-info {
    background: var(--xal-blue-bright) !important;
    color: #fff !important;
}

/* MudAlert */
.mud-alert {
    border-radius: var(--xal-radius-md) !important;
    font-size: var(--xal-font-base) !important;
}
.mud-alert-filled-success { background: var(--xal-status-open-bg) !important;   color: var(--xal-status-open) !important;   border: 1px solid var(--xal-status-open-border) !important; }
.mud-alert-filled-error   { background: var(--xal-status-unmatched-bg) !important; color: var(--xal-status-unmatched) !important; border: 1px solid var(--xal-status-unmatched-border) !important; }
.mud-alert-filled-warning { background: var(--xal-status-weighin-bg) !important; color: var(--xal-status-weighin) !important; border: 1px solid var(--xal-status-weighin-border) !important; }
.mud-alert-filled-info    { background: var(--xal-blue-dim) !important;          color: var(--xal-blue-bright) !important;    border: 1px solid var(--xal-blue-border) !important; }

/* MudBreadcrumbs */
.mud-breadcrumb-item .mud-typography {
    color: var(--xal-text-secondary) !important;
}
.mud-breadcrumb-item:last-child .mud-typography {
    color: var(--xal-gold) !important;
}
.mud-breadcrumb-separator {
    color: var(--xal-text-muted) !important;
}

/* MudSkeleton */
.mud-skeleton {
    background: linear-gradient(
        90deg,
        var(--xal-bg-surface) 25%,
        var(--xal-bg-card) 50%,
        var(--xal-bg-surface) 75%
    ) !important;
    background-size: 400% 100% !important;
    animation: xal-shimmer 1.4s ease infinite !important;
}

@keyframes xal-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* MudProgressLinear */
.mud-progress-linear-bar1,
.mud-progress-linear-bar2 {
    background-color: var(--xal-gold) !important;
}
.mud-progress-linear {
    background-color: var(--xal-bg-surface) !important;
}

/* MudProgressCircular */
.mud-progress-circular circle {
    stroke: var(--xal-gold) !important;
}

/* MudChip — global dark base */
.mud-chip {
    background-color: var(--xal-bg-surface) !important;
    color: var(--xal-text-secondary) !important;
    border: 1px solid var(--xal-border-card) !important;
    font-size: var(--xal-font-xs) !important;
    font-weight: 700 !important;
    border-radius: var(--xal-radius-pill) !important;
}
.mud-chip:hover,
.mud-chip-clickable:hover {
    background-color: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
    border-color: var(--xal-gold-border) !important;
}
.mud-chip-color-primary {
    background-color: var(--xal-gold-dim) !important;
    color: var(--xal-gold) !important;
    border-color: var(--xal-gold-border) !important;
}

/* MudList global */
.mud-list {
    background: transparent !important;
    padding: 4px 0 !important;
}
.mud-list-item {
    color: var(--xal-text-secondary) !important;
    border-radius: var(--xal-radius-sm) !important;
    transition: var(--xal-transition-fast) !important;
    font-size: var(--xal-font-md) !important;
}
.mud-list-item:hover,
.mud-list-item-clickable:hover {
    background: var(--xal-bg-hover) !important;
    color: var(--xal-text-primary) !important;
}
.mud-list-item.mud-selected-item,
.mud-list-item-selected {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}

/* MudPopover / MudMenu paper */
.mud-popover-paper {
    background: var(--xal-bg-card) !important;
    border: 1px solid var(--xal-border-strong) !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.60) !important;
    color: var(--xal-text-primary) !important;
}

/* MudExpansionPanel */
.mud-expand-panel {
    background: var(--xal-bg-card) !important;
    border: 1px solid var(--xal-border) !important;
    border-radius: var(--xal-radius-md) !important;
}
.mud-expand-panel-header {
    color: var(--xal-text-primary) !important;
    background: var(--xal-bg-secondary) !important;
    border-radius: var(--xal-radius-md) var(--xal-radius-md) 0 0 !important;
}
.mud-expand-panel-header:hover {
    background: var(--xal-gold-muted) !important;
}
.mud-expand-panel-content {
    background: var(--xal-bg-card) !important;
}

/* ----------------------------------------------------------
   Typography Utilities
   Prefix: .xal-text-*
---------------------------------------------------------- */
.xal-text-gold      { color: var(--xal-gold) !important; }
.xal-text-red       { color: var(--xal-red-bright) !important; }
.xal-text-blue      { color: var(--xal-blue-bright) !important; }
.xal-text-green     { color: var(--xal-status-open) !important; }
.xal-text-black     { color: var(--xal-text-black) !important; }
.xal-text-amber     { color: var(--xal-status-weighin) !important; }
.xal-text-muted     { color: var(--xal-text-muted) !important; }
.xal-text-secondary { color: var(--xal-text-secondary) !important; }
.xal-text-white     { color: var(--xal-text) !important; }
.xal-text-disabled  { color: var(--xal-text-disabled) !important; }

/* Inline stroke icon (XalIcon component) — sizes with the surrounding font,
   colors via currentColor, so it drops into any slot that held an emoji. */
.xal-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.18em;
}

.xal-text-xs   { font-size: var(--xal-font-xs) !important; }
.xal-text-sm   { font-size: var(--xal-font-sm) !important; }
.xal-text-base { font-size: var(--xal-font-base) !important; }
.xal-text-md   { font-size: var(--xal-font-md) !important; }
.xal-text-lg   { font-size: var(--xal-font-lg) !important; }
.xal-text-xl   { font-size: var(--xal-font-xl) !important; }
.xal-text-2xl  { font-size: var(--xal-font-2xl) !important; }

.xal-font-normal   { font-weight: 400 !important; }
.xal-font-medium   { font-weight: 500 !important; }
.xal-font-semibold { font-weight: 600 !important; }
.xal-font-bold     { font-weight: 700 !important; }
.xal-font-black    { font-weight: 800 !important; }

.xal-uppercase  { text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.xal-truncate   { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.xal-nowrap     { white-space: nowrap !important; }

/* ----------------------------------------------------------
   Spacing Utilities
---------------------------------------------------------- */
.xal-p-0 {
    padding: 0
}

.xal-p-1 {
    padding: 4px;
}

.xal-p-2 {
    padding: 8px;
}

.xal-p-3 {
    padding: 12px;
}

.xal-p-4 {
    padding: 16px;
}

.xal-pt-0 {
    padding-top: 0
}

.xal-pt-1 {
    padding-top: 4px;
}

.xal-pt-2 {
    padding-top: 8px;
}

.xal-pt-3 {
    padding-top: 12px;
}

.xal-pt-4 {
    padding-top: 16px;
}



.xal-m-0 {margin:0}
.xal-m-1 {
    margin: 4px;
}
.xal-m-2 {
    margin: 8px;
}
.xal-m-3 {
    margin: 12px;
}
.xal-m-4 {
    margin: 16px;
}
.xal-mt-0  { margin-top: 0; }
.xal-mt-1  { margin-top: 4px; }
.xal-mt-2  { margin-top: 8px; }
.xal-mt-3  { margin-top: 12px; }
.xal-mt-4  { margin-top: 16px; }
.xal-mb-0  { margin-bottom: 0; }
.xal-mb-1  { margin-bottom: 4px; }
.xal-mb-2  { margin-bottom: 8px; }
.xal-mb-3  { margin-bottom: 12px; }
.xal-mb-4  { margin-bottom: 16px; }

/* ----------------------------------------------------------
   Text Alignment Utilities
---------------------------------------------------------- */
.xal-text-left   { text-align: left; }
.xal-text-center { text-align: center; }
.xal-text-right  { text-align: right; }

/* ----------------------------------------------------------
   Display Utilities
---------------------------------------------------------- */
.xal-flex         { display: flex; }
.xal-flex-col     { display: flex; flex-direction: column; }
.xal-flex-center  { display: flex; align-items: center; justify-content: center; }
.xal-flex-between { display: flex; align-items: center; justify-content: space-between; }
.xal-flex-end { display: flex; justify-content: flex-end;}
.xal-flex-wrap    { flex-wrap: wrap; }
.xal-flex-1       { flex: 1; }
.xal-flex-shrink-0{ flex-shrink: 0; }
.xal-gap-1        { gap: 4px; }
.xal-gap-2        { gap: 8px; }
.xal-gap-3        { gap: 12px; }
.xal-gap-4        { gap: 16px; }
.xal-gap-5 {
    gap: 32px;
}

/* Responsive: column on mobile, row on desktop */
@media (max-width: 767px) {
    .xal-flex--col-mobile {
        flex-direction: column;
    }
}

.xal-hidden  { display: none !important; }
.xal-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   Width Utilities for MudBlazor Components
   Usage: <MudSelect Class="xal-select xal-w-xs" />
          <MudTextField Class="xal-md-textfield xal-w-md" />
   
   These target the mud-input-control wrapper that MudBlazor
   generates around form components.
---------------------------------------------------------- */

/* Direct width classes (for non-Mud elements) */
.xal-w-xs  { width: 80px !important;  min-width: 80px !important;  max-width: 80px !important; }
.xal-w-sm  { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
.xal-w-md  { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
.xal-w-lg  { width: 300px !important; min-width: 300px !important; max-width: 300px !important; }
.xal-w-xl  { width: 400px !important; min-width: 400px !important; max-width: 400px !important; }
.xal-w-full { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.xal-w-50 {
    width: 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
}
.xal-w-auto { width: auto !important; min-width: auto !important; max-width: none !important; }

/* MudBlazor component width classes */
/* These work on MudSelect, MudTextField, MudAutocomplete, MudNumericField, MudDatePicker, etc. */
.xal-w-xs.mud-input-control,
.mud-input-control.xal-w-xs {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

.xal-w-sm.mud-input-control,
.mud-input-control.xal-w-sm {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.xal-w-md.mud-input-control,
.mud-input-control.xal-w-md {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.xal-w-lg.mud-input-control,
.mud-input-control.xal-w-lg {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

.xal-w-xl.mud-input-control,
.mud-input-control.xal-w-xl {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
}

.xal-w-full.mud-input-control,
.mud-input-control.xal-w-full {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Legacy aliases (for backwards compatibility) */
.xal-size-xs { width: 80px !important; }
.xal-size-sm { width: 120px !important; }
.xal-size-md { width: 200px !important; }
.xal-size-lg { width: 300px !important; }
/* ----------------------------------------------------------
   Divider
---------------------------------------------------------- */
.xal-divider {
    height: 1px;
    background: var(--xal-border);
    border: none;
    margin: 0;
}
.xal-divider--thick {
    height: 2px;
    background: var(--xal-border-card);
}

/* ----------------------------------------------------------
   Section chrome
---------------------------------------------------------- */

.xal-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--xal-bg-secondary);
    border-radius: var(--xal-radius-md);
    border: 1px solid var(--xal-border);
}

.xal-section-title {
    font-size: var(--xal-font-md);
    font-weight: 800;
    color: var(--xal-gold);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
}
.xal-section-desc {
    font-size: var(--xal-font-base);
    color: var(--xal-text-muted);
    line-height: 1.7;
    max-width: 720px;
}
.xal-list-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 13px 3px;
    background: var(--xal-bg-secondary);
    border-bottom: 1px solid var(--xal-border);
}
.xal-list-section-title {
    font-size: var(--xal-font-xs);
    font-weight: 700;
    color: var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.xal-list-section-count {
    font-size: var(--xal-font-xs);
    font-weight: 700;
    background: var(--xal-bg-surface);
    color: var(--xal-text-secondary);
    border-radius: var(--xal-radius-pill);
    padding: 2px 7px;
}

/* ----------------------------------------------------------
   Mobile pager
---------------------------------------------------------- */
.xal-mobile-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    border-top: 1px solid var(--xal-border);
    gap: 8px;
}
.xal-mobile-pager__btn {
    background: var(--xal-bg-card);
    border: 1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
    color: var(--xal-text-secondary);
    font-size: var(--xal-font-base);
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
    transition: var(--xal-transition-fast);
}
.xal-mobile-pager__btn:hover:not(:disabled) {
    border-color: var(--xal-gold-border);
    color: var(--xal-gold);
}
.xal-mobile-pager__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.xal-mobile-pager__info {
    font-size: var(--xal-font-sm);
    color: var(--xal-text-muted);
    text-align: center;
    flex: 1;
}

.xal-winner--red {
    color: var(--xal-red-bright);
}
.xal-winner--blue {
    color: var(--xal-blue-bright);
}

/* ------------------------------------------------------------
   Public application chrome: desktop topbar + mobile bottom nav
------------------------------------------------------------ */
.xal-layout--public-chrome {
    /* No reserved bottom padding: the bottom nav is an in-flow flex child of
       the 100dvh shell (see .xal-bottom-slot--public), so the scrollable page
       region ends exactly where the bar begins — no height math to drift. */
    min-height: 100dvh;
    background: var(--xal-bg-page);
    color: var(--xal-text-primary);
}

.xal-appbar--public {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--xal-appbar-height-mobile, 64px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border-bottom: 1px solid var(--xal-border-card);
    background: rgba(13, 13, 13, .94);
    backdrop-filter: blur(14px);
}

.xal-appbar__logo--link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    text-decoration: none;
}

    .xal-appbar__logo--link img {
        width: clamp(112px, 16vw, 168px);
        object-fit: contain;
    }

.xal-appbar__nav {
    display: none;
    align-items: stretch;
    min-width: 0;
    flex: 1 1 auto;
}

.xal-appbar__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--xal-radius-pill);
    background: transparent;
    color: var(--xal-text-secondary);
    font: inherit;
    font-size: var(--xal-font-lg, .9375rem);
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

    .xal-appbar__nav-link:hover,
    .xal-appbar__nav-link:focus-visible {
        color: var(--xal-gold);
        border-color: var(--xal-gold-border);
        background: var(--xal-bg-selected);
        outline: none;
        transform: translateY(-1px);
    }

.xal-appbar__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: currentColor;
    line-height: 1;
}

.xal-appbar__nav-text {
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}

.xal-appbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: 10px;
}

.xal-layout__page--public {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    /* Pages are flex children now; never let tall content compress
       instead of scrolling. width:100% restores block-like filling —
       flex auto margins otherwise absorb free space before stretch,
       shrinking self-centered containers (margin-inline auto +
       max-width, e.g. .sp-page-detail) to their content width. */
    .xal-layout__page--public > * {
        flex-shrink: 0;
        width: 100%;
    }

/* ------------------------------------------------------------
   Global legal footer — rendered by MainLayout at the end of the
   scrollable page region. margin-top:auto pins it to the bottom
   of the viewport on pages shorter than the screen.
------------------------------------------------------------ */
.xal-footer {
    margin-top: auto;
    padding: 28px 16px;
    border-top: 1px solid var(--xal-border);
    color: var(--xal-text-secondary);
    text-align: center;
    background: var(--xal-bg-primary);
}

    .xal-footer p {
        margin: 0 0 6px;
    }

.xal-footer__links {
    display: flex;
    justify-content: center;
    gap: 18px;
}

    .xal-footer__links a {
        color: var(--xal-text-secondary);
        text-decoration: underline;
    }

        .xal-footer__links a:hover {
            color: var(--xal-text-primary);
        }

/* Deployed build stamp. Deliberately quiet: it is there so we can tell which build
   an environment is running, not for visitors to read. */
.xal-footer__version {
    align-self: center;
    color: var(--xal-text-muted);
    font-size: var(--xal-font-base);
}

/* Environment name, shown on every environment including Production, so the
   check a tester makes is a positive one: the footer always names where you are. */
.xal-footer__env {
    align-self: center;
    color: var(--xal-text-muted);
    font-size: var(--xal-font-base);
}

.xal-footer__env--nonprod {
    color: var(--xal-env);
    font-weight: 700;
}

/* ------------------------------------------------------------
   Mobile bottom nav and SectionOutlet override support
------------------------------------------------------------ */
/* In-flow flex child of the 100dvh .xal-layout column (header / scrolling
   page / this slot). The bar sizes itself from its content, so scaled-up
   device fonts grow the bar instead of clipping the labels, and the page
   region above can never be covered. */
.xal-bottom-slot--public {
    flex-shrink: 0;
}

.xal-bottom-slot__override:empty {
    display: none;
}

.xal-bottom-slot__override:not(:empty) + .xal-bottom-nav--public {
    display: none;
}

/* Double-class selector: xal-layout.css loads after this file and its base
   .xal-bottom-nav rule (height:60px, display:flex) would otherwise win the
   cascade. Height is intentionally content-driven — never hardcode it here:
   device font scaling grows the labels, and a fixed height clips them. */
.xal-bottom-nav.xal-bottom-nav--public {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    height: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--xal-border-card);
    background: rgba(13, 13, 13, .96);
    backdrop-filter: blur(14px);
}

    /* Idle tabs read as raised keys (visible border + surface), not bare
       text — mobile has no hover state to reveal that these are tappable. */
    .xal-bottom-nav--public .xal-bottom-nav__tab {
        min-width: 0;
        min-height: 48px;
        width: 100%;
        padding: 4px 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        border: 1px solid var(--xal-border-card);
        border-radius: var(--xal-radius-md);
        background: var(--xal-bg-card);
        color: var(--xal-text-secondary);
        font: inherit;
        font-size: var(--xal-font-base);
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }

        .xal-bottom-nav--public .xal-bottom-nav__tab:hover,
        .xal-bottom-nav--public .xal-bottom-nav__tab:focus-visible {
            color: var(--xal-gold);
            border-color: var(--xal-gold-border);
            background: var(--xal-bg-selected);
            outline: none;
        }

        /* Touch feedback in place of hover */
        .xal-bottom-nav--public .xal-bottom-nav__tab:active {
            transform: scale(.96);
            background: var(--xal-bg-selected);
        }

.xal-bottom-nav__tab-icon {
    line-height: 1;
}

/* Scoped under --public so it outranks the 9px base label rule in
   xal-layout.css — 11px is the readability floor for these labels.
   Labels wrap rather than truncate: with device font scaling active,
   "MY SHOWS" at ~145% is wider than a tab, and an ellipsis there
   reads as broken. The content-driven bar grows to fit the wrap. */
.xal-bottom-nav--public .xal-bottom-nav__tab-label {
    max-width: 100%;
    font-size: var(--xal-font-base);
    letter-spacing: .03em;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

/* Text link — one treatment for inline anchors and link-styled buttons
   (e.g. the login form's "Reset password" / "Create an account"). */
.xal-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--xal-gold);
    font-family: var(--xal-font-family);
    font-size: var(--xal-font-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .xal-link:hover {
        text-decoration: underline;
    }

/* Map link — venue text that opens the location in a maps app or new tab.
   Inherits the row's font so it drops into cards and info rows; gold plus a
   soft persistent underline mark it tappable without hover (touch users). */
.xal-map-link {
    color: var(--xal-gold);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--xal-gold) 45%, transparent);
    text-underline-offset: 3px;
}

    .xal-map-link:hover {
        text-decoration-color: var(--xal-gold);
    }

.xal-more-menu {
    position: relative;
}

.xal-more-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-pill);
    color: var(--xal-text-secondary);
    cursor: pointer;
    list-style: none;
}

    .xal-more-menu__trigger::-webkit-details-marker {
        display: none;
    }

/* Avatar account menu — same details/panel chrome as .xal-more-menu, but the
   trigger is the user's avatar rather than a pill. */
.xal-avatar-menu__trigger {
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}

    .xal-avatar-menu__trigger::-webkit-details-marker {
        display: none;
    }

.xal-avatar-menu__panel {
    width: 200px;
}

/* Gold variant — same trigger/panel chrome and position as .xal-more-menu,
   used where the menu is a primary action rather than an overflow ("More")
   menu, e.g. the Event Manager Options menu. */
.xal-more-menu__trigger--gold {
    border-color: var(--xal-gold);
    background: var(--xal-gold);
    color: #000;
    font-weight: 700;
}
    .xal-more-menu__trigger--gold:hover {
        background: #B8960B;
        border-color: #B8960B;
    }

.xal-more-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 280px;
    max-height: min(70vh, 520px);
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    background: var(--xal-bg-card);
    box-shadow: var(--xal-shadow-lg);
    /* Had no z-index, so it painted below any sibling with an explicit
       one — e.g. the Event Manager sticky section nav (z-index: 30),
       which clipped the panel's last item. Sit above sticky in-page
       content, below the appbar's own z-index:40 is fine since the panel
       only ever opens downward from below the appbar anyway. */
    z-index: 50;
}

/* Event Manager Options menu: right-aligned like "More" on desktop, but on
   mobile the header stacks and this trigger sits at the left edge — where
   right:0 would push the 280px panel off the left of the screen (clipping
   "…ttings"/"…mpions"). Anchor it left there and clamp to the viewport. */
@media (max-width: 767.98px) {
    .xal-more-menu--options .xal-more-menu__panel {
        right: auto;
        left: 0;
        width: min(280px, calc(100vw - 32px));
    }
}

/* Desktop: no bottom footer/dock; distribute six top links evenly before More/Sign In */
@media (min-width: 900px) {
    .xal-appbar--public {
        min-height: var(--xal-appbar-height-desktop, 75px);
        padding-inline: clamp(24px, 3vw, 56px);
        gap: clamp(18px, 2vw, 36px);
    }

    .xal-appbar__logo--link img {
        width: clamp(132px, 14vw, 176px);
    }

    .xal-appbar__nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(88px, 1fr));
        gap: clamp(2px, 0.5vw, 12px);
        align-items: center;
        /* Fill the available width (flex: 1 1 auto on .xal-appbar__nav
           already grows it) rather than islanding at a fixed 920px next
           to the logo — each link centers within its own wider column. */
        width: 100%;
    }

    .xal-appbar__nav-link {
        width: 100%;
        padding-inline: clamp(10px, 1vw, 18px);
    }

    .xal-appbar__actions {
        margin-left: clamp(24px, 3vw, 48px);
    }

    .xal-bottom-slot--public {
        display: none;
    }
}

/* Mid-desktop/tablet tightening before switching to mobile */
@media (min-width: 900px) and (max-width: 1120px) {
    .xal-appbar--public {
        gap: 14px;
        padding-inline: 20px;
    }

    .xal-appbar__logo--link img {
        width: 128px;
    }

    .xal-appbar__nav {
        grid-template-columns: repeat(5, minmax(74px, 1fr));
        gap: 6px;
    }

    .xal-appbar__nav-link {
        gap: 5px;
        padding-inline: 8px;
        font-size: var(--xal-font-base, .6875rem);
    }

    .xal-appbar__nav-icon svg {
        width: 20px;
        height: 20px;
    }

    .xal-appbar__actions {
        gap: 8px;
        margin-left: 6px;
    }
}

@media (max-width: 899.98px) {
    .xal-appbar__nav {
        display: none;
    }
}

@media (max-width: 520px) {
    .xal-appbar--public {
        padding-inline: 12px;
    }

    .xal-more-menu__label {
        display: none;
    }
}


/* ----------------------------------------------------------
   Print baseline
---------------------------------------------------------- */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    .xal-no-print { display: none !important; }
}