/*
 * ============================================================
 *  XALLENGER — Master/Detail Layout System
 *  File: wwwroot/css/xal-master-detail.css
 *
 *  Provides the responsive master/detail split layout:
 *    • Desktop (> 768px): left column = master list,
 *                         right column = detail panel (inline)
 *    • Mobile  (≤ 768px): single column master list,
 *                         detail appears as animated bottom-sheet
 *
 *  NEW CSS classes (all new — not in any existing xal-*.css):
 *
 *  Layout wrapper:
 *    .xal-md                        — apply alongside container-grid container-grid--two-60-40
 *
 *  Master column:
 *    .xal-md__master                — left/top column (list)
 *    .xal-md__master--hidden-mobile — hides master when sheet is open (opt-in)
 *
 *  Detail column (desktop only):
 *    .xal-md__detail                — right column on desktop; hidden on mobile
 *    .xal-md__detail--animate-in    — fade+slide animation on first select
 *
 *  Desktop empty state:
 *    .xal-md__empty                 — placeholder shown when nothing selected
 *    .xal-md__empty-icon            — large emoji/icon
 *    .xal-md__empty-title           — heading
 *    .xal-md__empty-desc            — description text
 *
 *  Mobile bottom-sheet:
 *    .xal-md__backdrop              — semi-transparent overlay behind the sheet
 *    .xal-md__backdrop--visible     — fades in when sheet opens
 *    .xal-md__sheet                 — the slide-up sheet (fixed, off-screen by default)
 *    .xal-md__sheet--open           — slides into view (add via Blazor when item selected)
 *    .xal-md__sheet--expanded       — full-height mode (toggled by expand button)
 *    .xal-md__sheet-handle          — drag handle area at top of sheet
 *    .xal-md__sheet-handle-bar      — the visual pill inside the handle
 *    .xal-md__sheet-header          — top bar with back button + optional title + expand icon
 *    .xal-md__sheet-back            — back button (closes sheet)
 *    .xal-md__sheet-title           — optional title text in sheet header
 *    .xal-md__sheet-expand          — expand toggle button
 *    .xal-md__sheet-body            — scrollable content area inside sheet
 *    .xal-md__sheet-body--no-scroll — disables scroll (when child handles its own)
 *
 *  State modifier on wrapper:
 *    .xal-md--selected              — applied to container-grid when an item is selected
 *
 *  DEPENDS ON: xal-tokens.css
 *  USED BY:    BracketMasterDetail.razor, BoutMasterDetail.razor, BoxerMasterDetail.razor
 * ============================================================
 */


/* ============================================================
   1. DESKTOP LAYOUT  (> 768px)
   container-grid--two-60-40 already provides the two-column
   split. We manage scroll and sticky behaviour here.
   ============================================================ */

/* Master column: sticky, scrollable list */
.xal-md__master {
    display:        flex;
    flex-direction: column;
    min-height:     0;
    position:       sticky;
    top:            0;
    max-height:     calc(100vh - 80px);
    overflow-y:     auto;
    overflow-x:     hidden;
    scrollbar-width:      thin;
    scrollbar-color:      var(--xal-bg-surface) transparent;
}
.xal-md__master::-webkit-scrollbar        { width: 4px; }
.xal-md__master::-webkit-scrollbar-track  { background: transparent; }
.xal-md__master::-webkit-scrollbar-thumb  { background: var(--xal-bg-surface); border-radius: 2px; }

/* Detail column: sticky, scrollable, visible only on desktop */
.xal-md__detail {
    display:        flex;
    flex-direction: column;
    min-height:     0;
    position:       sticky;
    top:            0;
    max-height:     calc(100vh - 80px);
    overflow-y:     auto;
    overflow-x:     hidden;
    scrollbar-width:      thin;
    scrollbar-color:      var(--xal-bg-surface) transparent;
}
.xal-md__detail::-webkit-scrollbar        { width: 4px; }
.xal-md__detail::-webkit-scrollbar-track  { background: transparent; }
.xal-md__detail::-webkit-scrollbar-thumb  { background: var(--xal-bg-surface); border-radius: 2px; }

/* Desktop empty state — shown when no item is selected */
.xal-md__empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         48px 24px;
    text-align:      center;
    background:      var(--xal-bg-card);
    border:          1px solid var(--xal-border-card);
    border-radius:   var(--xal-radius-lg);
    min-height:      320px;
}
.xal-md__empty-icon {
    font-size:   40px;
    opacity:     0.25;
    line-height: 1;
}
.xal-md__empty-title {
    font-size:   var(--xal-font-base);
    font-weight: 700;
    color:       var(--xal-text-secondary);
    margin:      0;
}
.xal-md__empty-desc {
    font-size:  var(--xal-font-xs);
    color:      var(--xal-text-muted);
    line-height: 1.6;
    max-width:  200px;
    margin:     0;
}

/* When an item IS selected, empty state disappears */
.xal-md--selected .xal-md__empty {
    display: none;
}

/* Animate in the detail panel on desktop when first selected */
.xal-md__detail--animate-in {
    animation: xalDetailFadeIn 200ms ease forwards;
}
@keyframes xalDetailFadeIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* On desktop: hide all mobile-only sheet/backdrop elements */
.xal-md__sheet,
.xal-md__backdrop {
    display: none;
}


/* ============================================================
   1b. SHEET / INSPECTOR CHROME  (viewport-agnostic)
   Inner chrome shared by the mobile bottom-sheet and the
   desktop inspector drawer (.xal-inspector). Positioning is
   handled per-viewport in the sections below.
   ============================================================ */

/* --------------------------------------------------------
   DRAG HANDLE
-------------------------------------------------------- */
.xal-md__sheet-handle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 0 6px;
    cursor:          grab;
    flex-shrink:     0;
    background:      var(--xal-bg-card);
    border-radius:   20px 20px 0 0;
}
.xal-md__sheet-handle:active { cursor: grabbing; }
.xal-md__sheet-handle-bar {
    width:         40px;
    height:        4px;
    border-radius: 2px;
    background:    var(--xal-bg-surface, rgba(255,255,255,0.15));
}

/* --------------------------------------------------------
   SHEET HEADER
   [ ‹ Back ]   [ Title (optional) ]   [ ⤢ expand ]
-------------------------------------------------------- */
.xal-md__sheet-header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       4px 14px 8px;
    background:    var(--xal-bg-card);
    border-bottom: 1px solid var(--xal-border);
    flex-shrink:   0;
}
/* The sheet's primary escape hatch — a real chip-shaped button, not a text link.
   44px tall to meet the mobile tap floor. */
.xal-md__sheet-back {
    display:       flex;
    align-items:   center;
    gap:           6px;
    min-height:    44px;
    padding:       0 16px 0 12px;
    font-size:     14px;
    font-weight:   700;
    color:         var(--xal-text-primary);
    background:    var(--xal-bg-surface, rgba(255, 255, 255, 0.06));
    border:        1px solid var(--xal-border);
    border-radius: var(--xal-radius-pill);
    cursor:        pointer;
    transition:    color var(--xal-transition-fast), border-color var(--xal-transition-fast);
    font-family:   var(--xal-font-family);
    white-space:   nowrap;
}
.xal-md__sheet-back:hover { color: var(--xal-gold); border-color: var(--xal-gold-border); }
.xal-md__sheet-back:focus-visible {
    outline:        2px solid var(--xal-gold-border);
    outline-offset: 1px;
}

/* The title names what you are looking at, so it is sized like a heading rather than a
   caption. Titles here run long (a bracket is "Male - Elite - 187lbs - Open") and a single
   nowrap line clipped them between the Back chip and the expand button — a second line
   costs one row of sheet height and shows the whole name. */
.xal-md__sheet-title {
    flex:          1;
    min-width:     0;
    font-size:     var(--xal-font-lg);
    font-weight:   700;
    line-height:   1.25;
    color:         var(--xal-text);
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp:         2;
    overflow:      hidden;
    text-align:    center;
}

.xal-md__sheet-expand {
    background:    none;
    border:        none;
    color:         var(--xal-text-muted);
    font-size:     18px;
    line-height:   1;
    cursor:        pointer;
    padding:       6px 8px;
    border-radius: var(--xal-radius-sm);
    transition:    var(--xal-transition-fast);
    font-family:   var(--xal-font-family);
    min-width:     44px;   /* easy tap target */
    display:       flex;
    align-items:   center;
    justify-content: flex-end;
}
.xal-md__sheet-expand:hover { color: var(--xal-gold); background: var(--xal-gold-muted); }

/* --------------------------------------------------------
   SHEET BODY — scrollable content
-------------------------------------------------------- */
.xal-md__sheet-body {
    flex:                    1;
    overflow-y:              auto;
    overflow-x:              hidden;
    overscroll-behavior:     contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:         thin;
    scrollbar-color:         var(--xal-bg-surface) transparent;
}
.xal-md__sheet-body::-webkit-scrollbar       { width: 3px; }
.xal-md__sheet-body::-webkit-scrollbar-track { background: transparent; }
.xal-md__sheet-body::-webkit-scrollbar-thumb { background: var(--xal-bg-surface); border-radius: 2px; }

.xal-md__sheet-body--no-scroll { overflow: hidden; }


/* ============================================================
   1c. DESKTOP INSPECTOR DRAWER  (> 768px)
   Apply .xal-inspector alongside .xal-md__sheet: the same
   element renders as a right-hand slide-in drawer on desktop
   and falls back to the bottom-sheet rules on mobile.
   ============================================================ */

@media (min-width: 769px) {
    .xal-inspector.xal-md__sheet {
        display:        flex;
        flex-direction: column;
        position:       fixed;
        /* Appbar is 64px until the 900px breakpoint bumps it to 75px */
        top:            var(--xal-appbar-height-mobile);
        right:          0;
        bottom:         0;
        z-index:        1090; /* below MudBlazor appbar (1100) and dialogs (1300) */
        /* Roomier drawer so the bracket boxer/bout cards breathe. */
        width:          min(720px, 60vw);
        background:     var(--xal-bg-card);
        border-left:    1px solid var(--xal-border-card);
        box-shadow:     var(--xal-shadow-lg);
        transform:      translateX(100%);
        transition:     transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .xal-inspector.xal-md__sheet--open {
        transform: translateX(0);
    }

    /* --------------------------------------------------------
       DESKTOP BACKDROP
       Invisible click-catcher under the drawer (no dimming on
       desktop) so clicking outside the inspector closes it —
       same behavior the mobile backdrop provides below. The
       appbar (z-index 1100) stays clickable above it.
    -------------------------------------------------------- */
    .xal-md__backdrop {
        display:        block;
        position:       fixed;
        inset:          0;
        z-index:        1089; /* just under the drawer (1090) */
        background:     transparent;
        pointer-events: none;
    }
    .xal-md__backdrop--visible {
        pointer-events: auto;
    }

    /* Mobile-only chrome */
    .xal-inspector .xal-md__sheet-handle,
    .xal-inspector .xal-md__sheet-expand {
        display: none;
    }

    /* Desktop drawer header — roomier padding and a heavier title weight.
       (The Back chip is already sized for touch in the shared chrome above.) */
    .xal-inspector .xal-md__sheet-header {
        padding: 10px 18px 12px;
    }
    .xal-inspector .xal-md__sheet-title {
        font-weight: 800;
    }
}

@media (min-width: 900px) {
    .xal-inspector.xal-md__sheet {
        top: var(--xal-appbar-height-desktop);
    }
}


/* ============================================================
   2. MOBILE LAYOUT  (≤ 768px)
   Grid already collapses to 1 column via xal-layout.css.
   We hide the detail column and use the bottom-sheet instead.
   ============================================================ */

@media (max-width: 768px) {

    /* Master column: restore to normal flow on mobile */
    .xal-md__master {
        position:   static;
        max-height: none;
        overflow:   visible;
    }

    /* Optional: hide list visually while sheet is open.
       Add .xal-md__master--hidden-mobile in Blazor for a
       "push navigation" feel. Default keeps list behind backdrop. */
    .xal-md__master--hidden-mobile {
        visibility:     hidden;
        pointer-events: none;
    }

    /* Hide the desktop detail column completely */
    .xal-md__detail {
        display: none !important;
    }

    /* --------------------------------------------------------
       BACKDROP
       Fades in behind the sheet to dim the master list.
    -------------------------------------------------------- */
    .xal-md__backdrop {
        display:         block;
        position:        fixed;
        inset:           0;
        /* Above the bottom nav (var(--mud-zindex-appbar)) so the nav is dimmed and inert
           while a sheet is open. Must be calc'd off the var, not hardcoded: MudThemeProvider
           injects its own runtime value (1300 by default) that overrides the static 1100 in
           xal-tokens.css, so any fixed number silently loses to the nav in the real app. */
        z-index:         calc(var(--mud-zindex-appbar, 1100) + 40);
        background:      rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity:         0;
        pointer-events:  none;
        transition:      opacity 280ms ease;
    }
    .xal-md__backdrop--visible {
        opacity:        1;
        pointer-events: auto;
    }

    /* --------------------------------------------------------
       BOTTOM SHEET
       Slides up from the bottom of the viewport.
       Default: hidden below the fold (translateY 100%).
       --open:  visible (translateY 0).
       --expanded: full height.
    -------------------------------------------------------- */
    .xal-md__sheet {
        display:          flex;
        flex-direction:   column;
        position:         fixed;
        left:             0;
        right:            0;
        bottom:           0;
        /* The bottom nav paints at z-index var(--mud-zindex-appbar) — 1300 at runtime, from
           MudThemeProvider's injected theme (NOT the static 1100 in xal-tokens.css, which the
           provider overrides) — and sits in the bottom ~65px of the viewport, covering the
           sheet's sticky action bar (Delete Bracket gone on Boxers, the whole Bouts footer
           gone). The open sheet must win, so it rides the same var: appbar + 50 stays below
           Mud popovers (runtime 1400) and dialogs (1550). */
        z-index:          calc(var(--mud-zindex-appbar, 1100) + 50);
        height:           88vh;
        background:       var(--xal-bg-card);
        border-top-left-radius:  20px;
        border-top-right-radius: 20px;
        box-shadow:       0 -8px 40px rgba(0, 0, 0, 0.5);
        /* Start off-screen */
        transform:        translateY(100%);
        transition:       transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
        overscroll-behavior: contain;
        /* Honour iPhone notch at bottom */
        padding-bottom:   env(safe-area-inset-bottom, 0px);
    }
    .xal-md__sheet--open {
        transform: translateY(0);
    }
    /* Expanded stops at the appbar instead of sliding under it — the appbar
       (and the logo bleeding below it) stack above the sheet, so any header
       chrome pushed into that zone becomes unreachable. */
    .xal-md__sheet--expanded {
        height: calc(100dvh - var(--xal-appbar-height-mobile, 64px));
    }

    /* Handle / header / body chrome is defined once in section 1b above. */

} /* end @media (max-width: 768px) */