/*
 * ============================================================
 *  XALLENGER — Application Chrome Layout
 *  File: wwwroot/css/xal-layout.css
 *
 *  Responsive outer-shell layout for the Boxing Event
 *  Management application (Blazor WASM).
 *
 *  Depends on: xal-tokens.css  (must be imported first)
 *
 *  Breakpoints
 *  -----------
 *  Mobile  (default)  : < 768 px
 *  Desktop             : ≥ 768 px
 *
 *  Chrome structure
 *  ----------------
 *  Mobile:
 *    .xal-layout                        (full-viewport flex column)
 *      .xal-appbar                      (top bar: logo + actions)
 *      .xal-layout__body                (flex row, fills remaining height)
 *        .xal-layout__page              (scrollable main content)
 *      .xal-bottom-nav                  (tab bar, fixed to bottom)
 *
 *  Desktop (≥ 768 px):
 *    .xal-layout
 *      .xal-appbar                      (top bar: logo left, actions right)
 *      .xal-layout__body
 *        .xal-sidenav                   (persistent left nav, 160 px wide)
 *        .xal-layout__page              (scrollable main content)
 *      (bottom nav hidden)
 *
 *  Usage in MainLayout.razor:
 *    <link rel="stylesheet" href="css/xal-tokens.css" />
 *    <link rel="stylesheet" href="css/xal-layout.css" />
 * ============================================================
 */


/* =============================================================
   0.  BOX-SIZING RESET + BASE
   ============================================================= */

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

html {
    height: 100%;
    /* Prevent iOS bounce on the document root */
    overscroll-behavior: none;
}

body {
    height: 100%;
    font-family: var(--xal-font-family);
    font-size: var(--xal-font-md);
    line-height: 1.5;
    color: var(--xal-text-primary);
    background: var(--xal-bg-page);
    /* Lock the viewport — scrolling happens inside .xal-layout__page */
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--xal-font-family);
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =============================================================
   1.  ROOT LAYOUT SHELL
   ============================================================= */

/*
 * .xal-layout
 *   Full-viewport flex column.  Every page/layout in the app
 *   renders inside this element.
 */
.xal-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;          /* dynamic viewport height (handles mobile chrome) */
    overflow: hidden;
    background: var(--xal-bg-page);
    position: relative;
}

/*
 * .xal-layout__body
 *   Fills the space between the top app bar and the bottom nav
 *   (mobile) or the full remaining height (desktop).
 *   Houses both the side nav (desktop) and the scrollable page.
 */
.xal-layout__body {
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
    position: relative;
    min-height: 0;          /* critical: prevents flex children from overflowing */
}

/*
 * .xal-layout__page
 *   The scrollable content region.  Every routed page component
 *   renders here.  On mobile it fills the full width; on desktop
 *   it sits to the right of .xal-sidenav.
 */
.xal-layout__page {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--xal-bg-page);
    /* No -webkit-overflow-scrolling:touch here: it makes iOS Safari trap
       position:fixed descendants (drawers/sheets rendered by routed pages)
       inside this scroller, cropping them behind the bottom nav. Momentum
       scrolling is the default since iOS 13, so the property is pure risk. */
    overscroll-behavior-y: contain;
}


/* =============================================================
   2.  TOP APP BAR  (.xal-appbar)
   ============================================================= */

.xal-appbar {
    /* Mobile height by default */
    height: var(--xal-appbar-height-mobile);
    /*background: var(--xal-bg-secondary);*/
    /* Signature red accent line at the base of the bar */
    border-bottom: 2px solid var(--xal-red);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: var(--mud-zindex-appbar);
    /* Allow logo to bleed below the bar on mobile */
    overflow: visible;
}

/* Outside Production the appbar's signature red accent line turns teal. Ambient,
   costs no layout height, and is always paired with the .xal-env-badge label
   beside the logo — an unlabelled color change would just read as a defect. */
.xal-layout--nonprod .xal-appbar {
    border-bottom-color: var(--xal-env);
}

/* ── Logo ── */
.xal-appbar__logo {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    line-height: 0;
    padding: 6px 0 0;        /* top cushion only — bottom intentionally bleeds */
    /* Sit above content that scrolls beneath the bleed */
    position: relative;
    z-index: 1;
}

.xal-appbar__logo img {
    /* On mobile: taller than the bar so it bleeds over the red border line */
    height: calc(var(--xal-appbar-height-mobile) + 14px);
    width: auto;
    display: block;
    object-fit: contain;
}

/* ── Spacer pushes actions to the right on mobile ── */
.xal-appbar__spacer {
    flex: 1;
}

/* ── Actions cluster (bell + avatar) ── */
.xal-appbar__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}


/* =============================================================
   3.  ICON BUTTON  (.xal-icon-btn)
   Shared by app bar, sidebar footer, etc.
   ============================================================= */

.xal-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--xal-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xal-text-secondary);
    font-size: 18px;
    transition: var(--xal-transition-fast);
    flex-shrink: 0;
}

/* Notification bell is the appbar's one attention surface — it gets a larger slot than the
   other icon buttons (44px also meets the mobile tap floor) and a glyph to match
   (the .xal-icon sizes to 1.15em, so font-size scales the bell). */
.xal-icon-btn--bell {
    width: 44px;
    height: 44px;
    font-size: 26px;
}

.xal-icon-btn:hover {
    color: var(--xal-gold);
    background: var(--xal-gold-muted);
}

.xal-icon-btn:focus-visible {
    outline: 2px solid var(--xal-gold-border);
    outline-offset: 1px;
}

/* Notification badge on the bell icon. 11px is the caption readability floor —
   the count is the whole point of the badge, so it never goes below it. */
.xal-icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    background: var(--xal-red);
    border-radius: var(--xal-radius-pill);
    border: 2px solid var(--xal-bg-secondary);
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}


/* =============================================================
   4.  AVATAR CHIP  (.xal-avatar-chip)
   User identity pill used in app bar and sidebar footer.
   ============================================================= */

.xal-avatar-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--xal-radius-pill);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--xal-transition-fast);
    flex-shrink: 0;
}

.xal-avatar-chip:hover {
    background: var(--xal-bg-hover);
    border-color: var(--xal-border);
}

/* The circular monogram / photo */
.xal-avatar-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--xal-gold);
    color: #000;
    font-size: var(--xal-font-xs);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

.xal-avatar-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Text labels (name + role) visible only on desktop */
.xal-avatar-chip__info {
    display: none;
}

.xal-avatar-chip__name {
    font-size: var(--xal-font-sm);
    font-weight: 600;
    color: var(--xal-text-primary);
    white-space: nowrap;
    line-height: 1.2;
}

.xal-avatar-chip__role {
    font-size: var(--xal-font-xs);
    color: var(--xal-text-muted);
    white-space: nowrap;
    line-height: 1.2;
}


/* =============================================================
   5.  BOTTOM TAB BAR  (.xal-bottom-nav)
   Mobile only — hidden at desktop breakpoint.
   ============================================================= */

.xal-bottom-nav {
    height: var(--xal-bottom-nav-height);
    background: var(--xal-bg-secondary);
    border-top: 1px solid var(--xal-border-card);
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    position: relative;
    z-index: var(--mud-zindex-appbar);
}

/* When a page injects its own SectionContent into the bottom slot,
   hide the default navigation bar so only the CTA bar shows. */
.xal-bottom-slot:has(.sp-mobile-cta-bar) .xal-bottom-nav {
    display: none;
}

/* ── Individual tab ── */
.xal-bottom-nav__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    cursor: pointer;
    color: var(--xal-text-muted);
    transition: var(--xal-transition-fast);
    position: relative;
    /* Touch target padding without affecting visual size */
    -webkit-tap-highlight-color: transparent;
}

.xal-bottom-nav__tab:hover {
    color: var(--xal-text-secondary);
}

/* Active state */
.xal-bottom-nav__tab--active {
    color: var(--xal-gold);
}

/* Gold indicator bar at top of active tab */
.xal-bottom-nav__tab--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--xal-gold);
    border-radius: 0 0 3px 3px;
}

/* Tab icon */
.xal-bottom-nav__tab-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tab label */
.xal-bottom-nav__tab-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

/* Badge on a tab icon */
.xal-bottom-nav__tab-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--xal-red);
    border-radius: var(--xal-radius-pill);
    border: 2px solid var(--xal-bg-secondary);
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* =============================================================
   6.  LEFT SIDE NAV  (.xal-sidenav)
   Desktop only — hidden at mobile breakpoint.
   Primary persistent navigation.
   ============================================================= */

.xal-sidenav {
    /* Hidden by default (mobile-first) */
    display: none;
    width: var(--xal-sidebar-width);
    background: var(--xal-bg-secondary);
    border-right: 1px solid var(--xal-border-card);
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Push content down to clear the logo bleed from the appbar */
    padding-top: 24px;
    z-index: 150;
    /* Subtle scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--xal-bg-surface) transparent;
}

/* ── Nav section header (optional grouping label) ── */
.xal-sidenav__section-label {
    padding: 16px 16px 6px;
    font-size: var(--xal-font-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xal-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* First section label has less top padding */
.xal-sidenav__section-label:first-child {
    padding-top: 10px;
}

/* ── Divider between nav sections ── */
.xal-sidenav__divider {
    height: 1px;
    background: var(--xal-border);
    margin: 6px 0;
    flex-shrink: 0;
}

/* ── Individual nav item ── */
.xal-sidenav__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    font-size: var(--xal-font-base);
    font-weight: 600;
    color: var(--xal-text-secondary);
    cursor: pointer;
    transition: var(--xal-transition-fast);
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    /* Ensure full-width tap target */
    margin: 0;
}

.xal-sidenav__item:hover {
    background: var(--xal-gold-muted);
    color: var(--xal-text-primary);
    border-left-color: var(--xal-gold-border);
}

/* Active / current route */
.xal-sidenav__item--active {
    color: var(--xal-gold);
    background: var(--xal-bg-selected);
    border-left-color: var(--xal-gold);
}

.xal-sidenav__item--active:hover {
    background: var(--xal-bg-selected-hover);
}

/* Nav icon */
.xal-sidenav__item-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Nav label text */
.xal-sidenav__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline badge / count pill on a nav item */
.xal-sidenav__item-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--xal-red);
    border-radius: var(--xal-radius-pill);
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.xal-sidenav__item-badge--gold {
    background: var(--xal-gold);
    color: #000;
}

/* ── Sidebar footer (user identity + settings) ── */
.xal-sidenav__footer {
    margin-top: auto;
    padding: 10px 12px;
    border-top: 1px solid var(--xal-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.xal-sidenav__footer-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--xal-gold);
    color: #000;
    font-size: var(--xal-font-xs);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

.xal-sidenav__footer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.xal-sidenav__footer-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.xal-sidenav__footer-name {
    font-size: var(--xal-font-base);
    font-weight: 600;
    color: var(--xal-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.xal-sidenav__footer-role {
    font-size: var(--xal-font-xs);
    color: var(--xal-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.xal-sidenav__footer-action {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--xal-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--xal-text-muted);
    cursor: pointer;
    transition: var(--xal-transition-fast);
}

.xal-sidenav__footer-action:hover {
    color: var(--xal-gold);
    background: var(--xal-gold-muted);
}


/* =============================================================
   7.  SCROLLBAR STYLING
   Applies to .xal-layout__page and .xal-sidenav
   ============================================================= */

.xal-layout__page::-webkit-scrollbar,
.xal-sidenav::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.xal-layout__page::-webkit-scrollbar-track,
.xal-sidenav::-webkit-scrollbar-track {
    background: transparent;
}

.xal-layout__page::-webkit-scrollbar-thumb,
.xal-sidenav::-webkit-scrollbar-thumb {
    background: var(--xal-bg-surface);
    border-radius: 2px;
}

.xal-layout__page::-webkit-scrollbar-thumb:hover,
.xal-sidenav::-webkit-scrollbar-thumb:hover {
    background: var(--xal-border-strong);
}


/* =============================================================
   8.  FOCUS RING — accessibility default
   ============================================================= */

:focus-visible {
    outline: 2px solid var(--xal-gold-border);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* =============================================================
   9.  DESKTOP BREAKPOINT  (≥ 768 px)
   ============================================================= */

@media (min-width: 768px) {

    /* ── App bar ── */
    .xal-appbar {
        height: var(--xal-appbar-height-desktop);
        padding: 0 20px;
        overflow: visible;   /* allow logo to bleed into the sidenav below */
    }

    .xal-appbar__logo {
        padding: 8px 0 0;    /* top only — logo bleeds downward intentionally */
        /* Pull left by the appbar's own padding so the logo centre
           aligns with the sidenav column rather than its right edge */
        margin-left: -20px;
        width: var(--xal-sidebar-width);
        justify-content: center;
    }

    .xal-appbar__logo img {
        /* Taller than the bar so it bleeds down into the sidenav */
        height: calc(var(--xal-appbar-height-desktop) + 20px);
    }

    /* Expose name + role labels on the avatar chip */
    .xal-avatar-chip__info {
        display: flex;
        flex-direction: column;
    }

    /* ── Bottom nav — hidden on desktop ── */
    .xal-bottom-nav {
        display: none;
    }

    /* ── Side nav — visible on desktop ── */
    .xal-sidenav {
        display: flex;
    }

}


/* =============================================================
   10.  WIDE DESKTOP  (≥ 1024 px)
        Optional: slightly wider sidebar
   ============================================================= */

@media (min-width: 1024px) {

    .xal-appbar {
        padding: 0 24px;
    }

    /* Re-align logo offset with the wider padding */
    .xal-appbar__logo {
        margin-left: -24px;
    }

}


/* =============================================================
   11.  UTILITY HELPERS
   ============================================================= */

/* Visually hidden (accessible) */
.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-width: 0;
}

/* ============================================================
   Container Grid Utilities
   ============================================================ */

.container-grid {
    display: grid;
    gap: 20px;
}

.container-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.container-grid--three > * {
    min-width: 0;
    overflow: hidden;
}

.container-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.container-grid--two-60-40 {
    grid-template-columns: 1fr 0.65fr;
    gap: 20px;
}

    .container-grid--two-60-40 > div {
        min-width: 0;
        overflow: hidden;
    }

.container-grid--dashboard {
    grid-template-columns: 2fr 1.5fr;
    gap: 20px;
}

    .container-grid--dashboard > div {
        min-width: 0;
        overflow: hidden;
    }

@media (max-width: 1200px) {
    .container-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .container-grid--three,
    .container-grid--two,
    .container-grid--two-60-40,
    .container-grid--dashboard {
        grid-template-columns: 1fr;
    }
}

/*
 * ============================================================
 *  XALLENGER — Layout Utilities
 *  File: wwwroot/css/xal-layout-utils.css
 *
 *  Additional layout utilities to complement xal-layout.css
 *  These classes reduce the need for inline styles and provide
 *  consistent spacing and layout patterns application-wide.
 *
 *  Depends on: xal-tokens.css
 * ============================================================
 */

/* ============================================================
   PAGE CONTAINERS
   ============================================================ */

/* Constrains content width with responsive padding */
.xal-page-container {
    margin: 50px auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .xal-page-container {
        padding: 0 24px;
    }
}

/* Centered content for forms and focused content */
.xal-centered {
    max-width: 600px;
    margin: 0 auto;
}

/* Wide centered content for tables and dashboards */
.xal-centered--wide {
    max-width: 900px;
    margin: 0 auto;
}

/* Full-width content (no max-width constraint) */
.xal-centered--full {
    max-width: none;
}


/* ============================================================
   PAGE HEADER LAYOUT
   ============================================================ */

/* Two-row on mobile, single-row on desktop */
.xal-page-header-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .xal-page-header-row {
        flex-direction: row;
        /* Top-align so a multi-line title block (kicker + title + subtitle)
           doesn't push the actions button into the middle of the stack —
           matches the public show-details identity row. */
        align-items: flex-start;
        justify-content: space-between;
    }
}

/* Actions container within page header */
.xal-page-header-row__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Page header with tabs below */
.xal-page-header--with-tabs {
    margin-bottom: 0;
}

    .xal-page-header--with-tabs + .xal-nav-tabs {
        margin-top: -8px;
        margin-bottom: 20px;
    }


/* ============================================================
   SECTION SPACING
   ============================================================ */

/* Standard section margin */
.xal-section {
    margin-bottom: 8px;
    margin-bottom: 8px;
}

/* Compact section margin */
.xal-section--compact {
    margin-bottom: 20px;
}

/* Large section margin */
.xal-section--large {
    margin-bottom: 48px;
}

/* Section with visual separation */
.xal-section--bordered {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--xal-border);
    margin-bottom: 24px;
}


/* ============================================================
   CARD GRIDS
   ============================================================ */

/* Auto-fit card grid (280px minimum) */
.xal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Compact card grid (220px minimum) */
.xal-card-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* Wide card grid (320px minimum) */
.xal-card-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Two-column card grid (fixed) */
.xal-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .xal-card-grid--two {
        grid-template-columns: 1fr;
    }
}

/* Three-column card grid (fixed) */
.xal-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .xal-card-grid--three {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .xal-card-grid--three {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SPLIT LAYOUTS
   ============================================================ */

/* Settings/preferences style split (nav + content) */
.xal-split-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .xal-split-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Wider sidebar split */
.xal-split-layout--wide {
    grid-template-columns: 280px 1fr;
}

/* Narrower sidebar split */
.xal-split-layout--narrow {
    grid-template-columns: 200px 1fr;
}


/* ============================================================
   STICKY PANELS
   ============================================================ */

/* Sticky sidebar/panel */
.xal-sticky-panel {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sticky with custom top offset */
.xal-sticky-panel--offset {
    top: var(--xal-subheader-top, 52px);
}

/* Sticky footer */
.xal-sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--xal-bg-secondary);
    border-top: 1px solid var(--xal-border);
    padding: 12px 16px;
    margin-top: auto;
    z-index: 10;
}


/* ============================================================
   HORIZONTAL SCROLL CONTAINERS
   ============================================================ */

/* Horizontal scroll container for cards/tables */
.xal-scroll-x {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--xal-bg-surface) transparent;
}

    .xal-scroll-x::-webkit-scrollbar {
        height: 4px;
    }

    .xal-scroll-x::-webkit-scrollbar-track {
        background: transparent;
    }

    .xal-scroll-x::-webkit-scrollbar-thumb {
        background: var(--xal-bg-surface);
        border-radius: 2px;
    }

/* Scroll container for tables */
.xal-scroll-x--table {
    display: block;
    gap: 0;
}

/* Scroll container that snaps to items */
.xal-scroll-x--snap {
    scroll-snap-type: x mandatory;
}

    .xal-scroll-x--snap > * {
        scroll-snap-align: start;
    }





/* ============================================================
   PADDING UTILITIES
   ============================================================ */

.xal-p--none {
    padding: 0;
}

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

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

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

.xal-p--lg {
    padding: 24px;
}

.xal-px--none {
    padding-left: 0;
    padding-right: 0;
}

.xal-px--xs {
    padding-left: 4px;
    padding-right: 4px;
}

.xal-px--sm {
    padding-left: 8px;
    padding-right: 8px;
}

.xal-px--md {
    padding-left: 16px;
    padding-right: 16px;
}

.xal-px--lg {
    padding-left: 24px;
    padding-right: 24px;
}

.xal-py--none {
    padding-top: 0;
    padding-bottom: 0;
}

.xal-py--xs {
    padding-top: 4px;
    padding-bottom: 4px;
}

.xal-py--sm {
    padding-top: 8px;
    padding-bottom: 8px;
}

.xal-py--md {
    padding-top: 16px;
    padding-bottom: 16px;
}

.xal-py--lg {
    padding-top: 24px;
    padding-bottom: 24px;
}


/* ============================================================
   WIDTH/HEIGHT UTILITIES
   ============================================================ */

.xal-w--full {
    width: 100%;
}

.xal-w--auto {
    width: auto;
}

.xal-w--screen {
    width: 100vw;
}

.xal-h--full {
    height: 100%;
}

.xal-h--auto {
    height: auto;
}

.xal-h--screen {
    height: 100vh;
}

.xal-min-h--0 {
    min-height: 0;
}

.xal-min-w--0 {
    min-width: 0;
}

.xal-max-w--full {
    max-width: 100%;
}

.xal-max-w--none {
    max-width: none;
}


/* ============================================================
   OVERFLOW UTILITIES
   ============================================================ */

.xal-overflow--hidden {
    overflow: hidden;
}

.xal-overflow--auto {
    overflow: auto;
}

.xal-overflow--visible {
    overflow: visible;
}

.xal-overflow--scroll {
    overflow: scroll;
}

.xal-overflow-x--hidden {
    overflow-x: hidden;
}

.xal-overflow-x--auto {
    overflow-x: auto;
}

.xal-overflow-y--hidden {
    overflow-y: hidden;
}

.xal-overflow-y--auto {
    overflow-y: auto;
}


/* ============================================================
   POSITION UTILITIES
   ============================================================ */

.xal-relative {
    position: relative;
}

.xal-absolute {
    position: absolute;
}

.xal-fixed {
    position: fixed;
}

.xal-sticky {
    position: sticky;
}

.xal-inset-0 {
    inset: 0;
}

.xal-top-0 {
    top: 0;
}

.xal-right-0 {
    right: 0;
}

.xal-bottom-0 {
    bottom: 0;
}

.xal-left-0 {
    left: 0;
}


/* ============================================================
   Z-INDEX UTILITIES
   ============================================================ */

.xal-z--0 {
    z-index: 0;
}

.xal-z--10 {
    z-index: 10;
}

.xal-z--20 {
    z-index: 20;
}

.xal-z--30 {
    z-index: 30;
}

.xal-z--40 {
    z-index: 40;
}

.xal-z--50 {
    z-index: 50;
}

.xal-z--auto {
    z-index: auto;
}


/* ============================================================
   RESPONSIVE VISIBILITY
   ============================================================ */

/* Hide on mobile (show on desktop) */
.xal-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .xal-hide-mobile {
        display: block;
    }
}

.xal-hide-mobile--flex {
    display: none;
}

@media (min-width: 768px) {
    .xal-hide-mobile--flex {
        display: flex;
    }
}

/* Hide on desktop (show on mobile) */
.xal-hide-desktop {
    display: block;
}

@media (min-width: 768px) {
    .xal-hide-desktop {
        display: none;
    }
}

.xal-hide-desktop--flex {
    display: flex;
}

@media (min-width: 768px) {
    .xal-hide-desktop--flex {
        display: none;
    }
}

.xal-default-layout {
    width: 95%; 
    margin: 0 auto;
}

/*.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: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
}*/