/*
 * ============================================================
 *  XALLENGER — Event Manager (Admin-Only) Styles
 *  File: wwwroot/css/xal-event-manager.css
 *
 *  Loaded ONLY in the Event Manager section (admin-authenticated
 *  routes). Never loaded on public-facing pages.
 *
 *  Contains:
 *    - Card admin action strips (confirm, edit, swap, remove)
 *    - Bout Sheet ring/order assignment overlay
 *    - Drag-and-drop bout ordering handles
 *    - Admin-only status overrides and inline edit states
 *    - Check-in / weigh-in admin controls
 *    - MudBlazor v9.1 form companion classes for admin forms
 *    - MudBlazor Dialog, Stepper, Form companions
 *
 *  MudBlazor companion classes in this file:
 *    xal-admin-form        → <MudForm Class="xal-admin-form">
 *    xal-admin-dialog      → <MudDialog Class="xal-admin-dialog">
 *    xal-admin-select      → <MudSelect Class="xal-admin-select">
 *    xal-admin-textfield   → <MudTextField Class="xal-admin-textfield">
 *    xal-admin-datepicker  → <MudDatePicker Class="xal-admin-datepicker">
 *    xal-admin-timepicker  → <MudTimePicker Class="xal-admin-timepicker">
 *    xal-admin-switch      → <MudSwitch Class="xal-admin-switch">
 *    xal-admin-checkbox    → <MudCheckBox Class="xal-admin-checkbox">
 *    xal-admin-autocomplete→ <MudAutocomplete Class="xal-admin-autocomplete">
 *    xal-admin-numericfield→ <MudNumericField Class="xal-admin-numericfield">
 *    xal-admin-stepper     → <MudStepper Class="xal-admin-stepper">
 *
 *  Depends on: xal-tokens.css, xal-cards.css
 * ============================================================
 */


/* ============================================================
   MUDBLAZOR ADMIN FORM CONTROLS
   All admin input styles are additive — they apply on top of
   the base xal-textfield/xal-select rules from xal-components.css
   and focus on density, label weight, and validation visuals.
   ============================================================ */

/* ── Admin form layout ── */
.xal-admin-form {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

/* Form row (two-column) */
.xal-admin-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .xal-admin-form__row { grid-template-columns: 1fr; }
}
/* Form row — three column */
.xal-admin-form__row--3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
    .xal-admin-form__row--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .xal-admin-form__row--3 { grid-template-columns: 1fr; }
}

/* Section divider inside form */
.xal-admin-form__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-admin-form__section-title {
    font-size:      var(--xal-font-xs);
    font-weight:    700;
    color:          var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom:  4px;
}

/* ── Admin TextField ──
   <MudTextField Class="xal-admin-textfield" Variant="Variant.Outlined" />
*/
.xal-admin-textfield,
.xal-admin-numericfield {

    /* Input wrapper */
    &.mud-input-outlined,
    & .mud-input-outlined {
        background-color: var(--xal-bg-input) !important;
        border-radius:    var(--xal-radius-md) !important;
    }

    /* Fieldset border */
    &.mud-input-outlined fieldset,
    & .mud-input-outlined fieldset {
        border-color:  var(--xal-border-card) !important;
        border-radius: var(--xal-radius-md) !important;
        transition:    border-color var(--xal-transition-fast) !important;
    }

    /* Focus */
    &.mud-input-outlined:focus-within fieldset,
    & .mud-input-outlined:focus-within fieldset {
        border-color:  var(--xal-gold-border) !important;
        border-width:  1.5px !important;
    }

    /* Hover */
    &.mud-input-outlined:hover:not(:focus-within) fieldset,
    & .mud-input-outlined:hover:not(:focus-within) fieldset {
        border-color: var(--xal-border-strong) !important;
    }

    /* Input text */
    & .mud-input-slot,
    & input.mud-input-slot,
    & textarea.mud-input-slot {
        color:       var(--xal-text-primary) !important;
        font-family: var(--xal-font-family) !important;
        font-size:   var(--xal-font-md) !important;
        padding:     8px 12px !important;
        caret-color: var(--xal-gold) !important;
    }
    & input.mud-input-slot::placeholder {
        color:   var(--xal-text-muted) !important;
        opacity: 1 !important;
    }

    /* Floating label */
    & .mud-input-label,
    & .mud-input-label-outlined {
        color:       var(--xal-text-muted) !important;
        font-family: var(--xal-font-family) !important;
        font-size:   var(--xal-font-md) !important;
    }
    & .mud-input-label.mud-input-label-animated,
    & .mud-input-label-outlined.mud-label-transform {
        color:       var(--xal-gold) !important;
        font-size:   var(--xal-font-xs) !important;
        font-weight: 700 !important;
    }

    /* Helper / validation */
    & .mud-input-helper-text {
        color:     var(--xal-text-muted) !important;
        font-size: var(--xal-font-xs) !important;
    }
    & .mud-input-error .mud-input-helper-text,
    & .mud-input-error-text {
        color: var(--xal-red-bright) !important;
    }
    & .mud-input-outlined.mud-input-error fieldset {
        border-color: var(--xal-red-border) !important;
    }

    /* Adornment icons */
    & .mud-input-adornment .mud-icon-root {
        color: var(--xal-text-muted) !important;
    }
    &.mud-input-outlined:focus-within .mud-input-adornment .mud-icon-root {
        color: var(--xal-gold) !important;
    }

    /* Disabled */
    & .mud-disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
    & .mud-input-outlined.mud-disabled fieldset {
        border-color: var(--xal-border) !important;
        border-style: dashed !important;
    }
}

/* ── Admin textarea ── */
.xal-admin-textarea {
    & .mud-input-slot,
    & textarea.mud-input-slot {
        min-height:  100px !important;
        resize:      vertical !important;
        line-height: 1.6 !important;
    }
}

/* ── Admin Select ──
   <MudSelect Class="xal-admin-select" Variant="Variant.Outlined" />
*/
.xal-admin-select,
.xal-admin-autocomplete {
    &.mud-input-outlined,
    & .mud-input-outlined {
        background-color: var(--xal-bg-input) !important;
        border-radius:    var(--xal-radius-md) !important;
    }
    &.mud-input-outlined fieldset,
    & .mud-input-outlined fieldset {
        border-color:  var(--xal-border-card) !important;
        border-radius: var(--xal-radius-md) !important;
        transition:    border-color var(--xal-transition-fast) !important;
    }
    &.mud-input-outlined:focus-within fieldset,
    & .mud-input-outlined:focus-within fieldset {
        border-color: var(--xal-gold-border) !important;
        border-width: 1.5px !important;
    }
    &.mud-input-outlined:hover:not(:focus-within) fieldset,
    & .mud-input-outlined:hover:not(:focus-within) fieldset {
        border-color: var(--xal-border-strong) !important;
    }
    & .mud-input-slot,
    & .mud-select-input {
        color:       var(--xal-text-primary) !important;
        font-family: var(--xal-font-family) !important;
        font-size:   var(--xal-font-md) !important;
        padding:     8px 12px !important;
    }
    & .mud-input-label,
    & .mud-input-label-outlined {
        color:     var(--xal-text-muted) !important;
        font-size: var(--xal-font-md) !important;
    }
    & .mud-input-label.mud-input-label-animated,
    & .mud-input-label-outlined.mud-label-transform {
        color:       var(--xal-gold) !important;
        font-size:   var(--xal-font-xs) !important;
        font-weight: 700 !important;
    }
    & .mud-input-adornment .mud-icon-root { color: var(--xal-text-muted) !important; }
    &.mud-input-outlined:focus-within .mud-input-adornment .mud-icon-root { color: var(--xal-gold) !important; }
    & .mud-input-helper-text { color: var(--xal-text-muted) !important; font-size: var(--xal-font-xs) !important; }
    & .mud-input-error .mud-input-helper-text { color: var(--xal-red-bright) !important; }
    & .mud-input-outlined.mud-input-error fieldset { border-color: var(--xal-red-border) !important; }
}

/* ── Admin DatePicker / TimePicker ── */
.xal-admin-datepicker,
.xal-admin-timepicker {
    &.mud-input-outlined,
    & .mud-input-outlined {
        background-color: var(--xal-bg-input) !important;
        border-radius:    var(--xal-radius-md) !important;
    }
    &.mud-input-outlined fieldset,
    & .mud-input-outlined fieldset {
        border-color:  var(--xal-border-card) !important;
        border-radius: var(--xal-radius-md) !important;
    }
    &.mud-input-outlined:focus-within fieldset,
    & .mud-input-outlined:focus-within fieldset {
        border-color: var(--xal-gold-border) !important;
        border-width: 1.5px !important;
    }
    & .mud-input-slot,
    & input.mud-input-slot {
        color:       var(--xal-text-primary) !important;
        font-size:   var(--xal-font-md) !important;
        padding:     8px 12px !important;
        caret-color: var(--xal-gold) !important;
    }
    & .mud-input-label { color: var(--xal-text-muted) !important; }
    & .mud-input-label.mud-label-transform { color: var(--xal-gold) !important; font-weight: 700 !important; }
    & .mud-input-adornment .mud-icon-root { color: var(--xal-text-muted) !important; }
    &.mud-input-outlined:focus-within .mud-input-adornment .mud-icon-root { color: var(--xal-gold) !important; }
}

/* ── Admin Switch ──
   <MudSwitch Class="xal-admin-switch" T="bool" />
*/
.xal-admin-switch.mud-switch {
    font-family: var(--xal-font-family) !important;
}
.xal-admin-switch .mud-switch-content {
    color:     var(--xal-text-secondary) !important;
    font-size: var(--xal-font-md) !important;
}
.xal-admin-switch .mud-switch-track {
    background-color: var(--xal-bg-surface) !important;
    border:           1px solid var(--xal-border-strong) !important;
}
.xal-admin-switch .mud-switch-thumb {
    background-color: var(--xal-text-muted) !important;
}
.xal-admin-switch.mud-checked .mud-switch-track {
    background-color: var(--xal-gold-dim) !important;
    border-color:     var(--xal-gold-border) !important;
}
.xal-admin-switch.mud-checked .mud-switch-thumb {
    background-color: var(--xal-gold) !important;
}
.xal-admin-switch .mud-ripple { background: transparent !important; }
.xal-admin-switch .mud-ripple:hover,
.xal-admin-switch .mud-ripple:focus-within { background: var(--xal-gold-glow) !important; }

/* ── Admin Checkbox ──
   <MudCheckBox Class="xal-admin-checkbox" T="bool" />
*/
.xal-admin-checkbox.mud-checkbox {
    color: var(--xal-text-primary) !important;
}
.xal-admin-checkbox .mud-checkbox-label {
    color:     var(--xal-text-secondary) !important;
    font-size: var(--xal-font-md) !important;
}
.xal-admin-checkbox .mud-button-root.mud-icon-button {
    color:         var(--xal-text-muted) !important;
    border-radius: var(--xal-radius-sm) !important;
}
.xal-admin-checkbox .mud-button-root.mud-icon-button:hover {
    color:      var(--xal-gold) !important;
    background: var(--xal-gold-muted) !important;
}
.xal-admin-checkbox.mud-checked .mud-button-root.mud-icon-button {
    color: var(--xal-gold) !important;
}
.xal-admin-checkbox .mud-ripple { background: var(--xal-gold-glow) !important; }

/* ── Auto-generate preview (session-card dry run) ── */
.xal-bs-preview { display: flex; gap: 12px; flex-wrap: wrap; }
.xal-bs-preview__ring {
    flex:          1 1 220px;
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    background:    var(--xal-bg-secondary);
    padding:       10px;
}
.xal-bs-preview__ring-title {
    font-size:     var(--xal-font-sm);
    font-weight:   700;
    color:         var(--xal-text-primary);
    margin-bottom: 6px;
}
.xal-bs-preview__bout {
    padding:   2px 4px;
    font-size: var(--xal-font-sm);
    color:     var(--xal-text-secondary);
}
.xal-bs-preview__bout--warn {
    background:    var(--xal-gold-muted);
    border-radius: var(--xal-radius-sm);
}
.xal-bs-preview__meta { color: var(--xal-text-muted); }
.xal-bs-preview__break {
    text-align:    center;
    font-style:    italic;
    padding:       3px 4px;
    margin:        3px 0;
    font-size:     var(--xal-font-xs);
    color:         var(--xal-text-muted);
    border-top:    1px dashed var(--xal-border);
    border-bottom: 1px dashed var(--xal-border);
}

/* ── Admin Dialog ──
   <MudDialog Class="xal-admin-dialog">
   MudBlazor v9.1 DOM:
     div.mud-dialog
       div.mud-dialog-title
       div.mud-dialog-content
       div.mud-dialog-actions
*/
.xal-admin-dialog.mud-dialog {
    background:    var(--xal-bg-card) !important;
    border:        1px solid var(--xal-border-strong) !important;
    border-radius: var(--xal-radius-lg) !important;
    box-shadow:    var(--xal-shadow-lg) !important;
    color:         var(--xal-text-primary) !important;
    font-family:   var(--xal-font-family) !important;
    min-width:     380px !important;
}
@media (max-width: 440px) {
    .xal-admin-dialog.mud-dialog {
        min-width: calc(100vw - 32px) !important;
        margin:    16px !important;
    }
}
.xal-admin-dialog .mud-dialog-title,
.xal-admin-dialog.mud-dialog .mud-dialog-title {
    background:    var(--xal-bg-secondary) !important;
    border-bottom: 2px solid var(--xal-gold-border) !important;
    color:         var(--xal-gold) !important;
    font-size:     var(--xal-font-lg) !important;
    font-weight:   800 !important;
    font-family:   var(--xal-font-family) !important;
    padding:       14px 20px !important;
    letter-spacing: 0.3px !important;
}
.xal-admin-dialog .mud-dialog-content,
.xal-admin-dialog.mud-dialog .mud-dialog-content {
    background:  var(--xal-bg-card) !important;
    color:       var(--xal-text-secondary) !important;
    padding:     20px !important;
    font-size:   var(--xal-font-md) !important;
    line-height: 1.6 !important;
    overflow-y:  auto !important;
}
/* Forms inside dialog */
.xal-admin-dialog .mud-dialog-content .xal-admin-form {
    padding: 0 !important;
}
.xal-admin-dialog .mud-dialog-actions,
.xal-admin-dialog.mud-dialog .mud-dialog-actions {
    background:     var(--xal-bg-secondary) !important;
    border-top:     1px solid var(--xal-border) !important;
    padding:        12px 16px !important;
    gap:            8px !important;
    justify-content: flex-end !important;
    flex-wrap:      wrap !important;
}

/* Danger variant dialog (destructive confirm) */
.xal-admin-dialog--danger .mud-dialog-title {
    border-bottom-color: var(--xal-red-border) !important;
    color:               var(--xal-red-bright) !important;
}

/* ── Split Bracket dialog member rows ──
   <div class="xal-row xal-split-member"> name/club stack + group MudSelect.
   The group select holds a single letter, so it stays a fixed narrow column
   and the boxer identity gets the rest of the row.
*/
.xal-split-member__identity {
    flex:      1;
    min-width: 0;
}
.xal-split-member__name {
    color:     var(--xal-text-primary);
    font-size: var(--xal-font-lg);
    font-weight: 600;
}
.xal-split-member__club {
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-md);
}
.xal-split-member .xal-split-member__group {
    flex:  0 0 88px;
    width: 88px;
}
.xal-split-member .xal-split-member__group .mud-input-slot,
.xal-split-member .xal-split-member__group .mud-select-input {
    font-size:   var(--xal-font-lg) !important;
    font-weight: 600 !important;
    text-align:  center !important;
}

/* ── Admin Stepper ──
   <MudStepper Class="xal-admin-stepper">
   MudBlazor v9.1 DOM:
     div.mud-stepper
       div.mud-step-header (each step)
       div.mud-step-content
*/
.xal-admin-stepper.mud-stepper {
    background:    transparent !important;
    border-radius: var(--xal-radius-lg) !important;
}
/* Step header row */
.xal-admin-stepper .mud-step-header {
    background:    var(--xal-bg-secondary) !important;
    border-bottom: 1px solid var(--xal-border) !important;
    padding:       12px 16px !important;
    cursor:        pointer !important;
    transition:    background var(--xal-transition-fast) !important;
}
.xal-admin-stepper .mud-step-header:hover {
    background: var(--xal-gold-muted) !important;
}
/* Step icon */
.xal-admin-stepper .mud-step-label .mud-step-icon {
    background:  var(--xal-bg-surface) !important;
    border:      1px solid var(--xal-border-card) !important;
    color:       var(--xal-text-muted) !important;
    font-weight: 700 !important;
    font-size:   var(--xal-font-base) !important;
}
/* Active step icon */
.xal-admin-stepper .mud-step-label.mud-step-active .mud-step-icon,
.xal-admin-stepper .mud-step-header.mud-step-active .mud-step-icon {
    background:   var(--xal-gold) !important;
    border-color: var(--xal-gold) !important;
    color:        #000 !important;
}
/* Completed step icon */
.xal-admin-stepper .mud-step-label.mud-step-completed .mud-step-icon,
.xal-admin-stepper .mud-step-header.mud-step-completed .mud-step-icon {
    background:   var(--xal-status-open) !important;
    border-color: var(--xal-status-open) !important;
    color:        #fff !important;
}
/* Step label text */
.xal-admin-stepper .mud-step-label .mud-typography {
    color:       var(--xal-text-secondary) !important;
    font-size:   var(--xal-font-base) !important;
    font-weight: 600 !important;
}
.xal-admin-stepper .mud-step-label.mud-step-active .mud-typography {
    color: var(--xal-gold) !important;
}
/* Connector line */
.xal-admin-stepper .mud-step-connector {
    border-color: var(--xal-border-strong) !important;
}
.xal-admin-stepper .mud-step-connector.mud-step-connector-completed {
    border-color: var(--xal-status-open) !important;
}
/* Step content area */
.xal-admin-stepper .mud-step-content {
    background:  var(--xal-bg-card) !important;
    padding:     16px !important;
    border-left: 2px solid var(--xal-border-strong) !important;
    margin-left: 20px !important;
}
/* Stepper action buttons */
.xal-admin-stepper .mud-stepper-nav {
    display:         flex;
    gap:             8px;
    padding:         12px 16px;
    background:      var(--xal-bg-secondary) !important;
    border-top:      1px solid var(--xal-border) !important;
    justify-content: flex-end;
}


/* ============================================================
   SHOW CARD — Admin Actions
   ============================================================ */

.xal-show-card__admin-strip {
    display:     flex;
    gap:         6px;
    padding:     10px 14px;
    border-top:  1px solid var(--xal-border);
    background:  var(--xal-bg-secondary);
    flex-wrap:   wrap;
    align-items: center;
}
.xal-show-card__admin-strip-label {
    font-size:      var(--xal-font-xs);
    font-weight:    700;
    color:          var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right:   4px;
    flex-shrink:    0;
}
.xal-show-card--admin         { border-color: var(--xal-border-card); }
.xal-show-card--admin:hover   { border-color: var(--xal-gold-border); }


/* ============================================================
   BOXER CARD — Admin Actions
   ============================================================ */

.xal-boxer-card__admin-actions {
    display:     flex;
    gap:         8px;
    padding:     10px 14px;
    border-top:  1px solid var(--xal-border);
    background:  var(--xal-bg-secondary);
    flex-wrap:   wrap;
    align-items: center;
}

.xal-boxer-card__status-override {
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     6px 10px;
    background:  var(--xal-bg-surface);
    border:      1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    font-size:   var(--xal-font-xs);
    color:       var(--xal-text-muted);
}
.xal-boxer-card__status-override select {
    background:  transparent;
    border:      none;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-xs);
    font-weight: 700;
    outline:     none;
    cursor:      pointer;
}

.xal-boxer-card__checkin-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     7px 14px;
    background:  var(--xal-bg-secondary);
    border-top:  1px solid var(--xal-border);
    flex-wrap:   wrap;
}
.xal-boxer-card__checkin-label {
    font-size:      var(--xal-font-xs);
    color:          var(--xal-text-muted);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink:    0;
}

/* Weight input — used for check-in / weigh-in */
.xal-boxer-card__weight-input {
    background:    var(--xal-bg-input);
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-sm);
    color:         var(--xal-text);
    font-size:     var(--xal-font-base);
    padding:       4px 8px;
    width:         80px;
    outline:       none;
    text-align:    center;
    transition:    var(--xal-transition-fast);
}
.xal-boxer-card__weight-input:focus       { border-color: var(--xal-gold-border); }
.xal-boxer-card__weight-input--over       { border-color: var(--xal-red-border); color: var(--xal-red-bright); }
.xal-boxer-card__weight-input--ok         { border-color: var(--xal-status-open-border); color: var(--xal-status-open); }

/* MudNumericField weight input companion */
.xal-weight-input.mud-input-outlined,
.xal-weight-input .mud-input-outlined {
    background:    var(--xal-bg-input) !important;
    border-radius: var(--xal-radius-sm) !important;
    width:         90px !important;
}
.xal-weight-input .mud-input-outlined fieldset {
    border-color:  var(--xal-border-card) !important;
    border-radius: var(--xal-radius-sm) !important;
}
.xal-weight-input .mud-input-outlined:focus-within fieldset {
    border-color: var(--xal-gold-border) !important;
}
.xal-weight-input input.mud-input-slot {
    color:      var(--xal-text-primary) !important;
    font-size:  var(--xal-font-md) !important;
    text-align: center !important;
    padding:    5px 8px !important;
}
/* Over-weight state */
.xal-weight-input--over .mud-input-outlined fieldset {
    border-color: var(--xal-red-border) !important;
}
.xal-weight-input--over input.mud-input-slot {
    color: var(--xal-red-bright) !important;
}
/* OK state */
.xal-weight-input--ok .mud-input-outlined fieldset {
    border-color: var(--xal-status-open-border) !important;
}
.xal-weight-input--ok input.mud-input-slot {
    color: var(--xal-status-open) !important;
}


/* ============================================================
   BOUT CARD — Admin Actions
   ============================================================ */

.xal-bout-card__admin-actions {
    display:     flex;
    gap:         8px;
    padding:     10px 16px;
    border-top:  1px solid var(--xal-border);
    background:  var(--xal-bg-secondary);
    flex-wrap:   wrap;
    align-items: center;
}
/* Push danger button far right */
.xal-bout-card__admin-actions .xal-btn--danger { margin-left: auto; }
/* Same for MudButton danger */
.xal-bout-card__admin-actions .xal-mud-btn--danger { margin-left: auto; }


/* ============================================================
   BOUT SHEET — Ring & Order Assignment
   ============================================================ */

.xal-bout-sheet-item {
    display:        flex;
    flex-direction: column;
    border-radius:  var(--xal-radius-lg);
    overflow:       hidden;
    border:         1px solid var(--xal-border-card);
    transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}
.xal-bout-sheet-item:hover {
    border-color: var(--xal-gold-border);
    box-shadow:   var(--xal-shadow-gold);
}
.xal-bout-sheet-item .xal-bout-card { border: none; border-radius: 0; }
.xal-bout-sheet-item .xal-bout-card:hover { border-color: transparent; box-shadow: none; }

.xal-bout-sheet-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     7px 12px;
    background:  linear-gradient(90deg, var(--xal-bg-surface), var(--xal-bg-secondary));
    border-bottom: 1px solid var(--xal-border);
    flex-wrap:   wrap;
}

.xal-bout-sheet-drag-handle {
    color:       var(--xal-text-muted);
    font-size:   14px;
    cursor:      grab;
    padding:     2px 4px;
    border-radius: var(--xal-radius-sm);
    flex-shrink: 0;
    transition:  var(--xal-transition-fast);
    line-height: 1;
    user-select: none;
}
.xal-bout-sheet-drag-handle:hover  { color: var(--xal-gold); }
.xal-bout-sheet-drag-handle:active { cursor: grabbing; }

.xal-bout-sheet-order {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      var(--xal-gold-dim);
    border:          1px solid var(--xal-gold-border);
    color:           var(--xal-gold);
    font-size:       var(--xal-font-xs);
    font-weight:     800;
    flex-shrink:     0;
}

.xal-bout-sheet-ring-label {
    font-size:      var(--xal-font-xs);
    font-weight:    700;
    color:          var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink:    0;
}
.xal-bout-sheet-ring-select {
    background:    var(--xal-bg-input);
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-sm);
    color:         var(--xal-text);
    font-size:     var(--xal-font-xs);
    font-weight:   700;
    padding:       3px 8px;
    outline:       none;
    cursor:        pointer;
    transition:    var(--xal-transition-fast);
    min-width:     80px;
}
.xal-bout-sheet-ring-select:focus { border-color: var(--xal-gold-border); }

/* Ring color dots */
.xal-bout-sheet-ring-dot         { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xal-bout-sheet-ring-dot--1      { background: #E63946; }
.xal-bout-sheet-ring-dot--2      { background: #42A5F5; }
.xal-bout-sheet-ring-dot--3      { background: #22C55E; }
.xal-bout-sheet-ring-dot--4      { background: #F59E0B; }

/* Ring border accents */
.xal-bout-sheet-item--ring-1     { border-left: 3px solid #E63946; }
.xal-bout-sheet-item--ring-2     { border-left: 3px solid #42A5F5; }
.xal-bout-sheet-item--ring-3     { border-left: 3px solid #22C55E; }
.xal-bout-sheet-item--ring-4     { border-left: 3px solid #F59E0B; }

/* Drag-and-drop states */
.xal-bout-sheet-item--drag-over {
    border-color: var(--xal-gold);
    box-shadow:   0 0 0 2px var(--xal-gold-border);
    background:   var(--xal-gold-muted);
}
.xal-bout-sheet-item--dragging { opacity: 0.5; cursor: grabbing; }

/* Bout sheet list container */
.xal-bout-sheet-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }

/* Ring group */
.xal-bout-sheet-ring-group        { display: flex; flex-direction: column; gap: 8px; }
.xal-bout-sheet-ring-group-header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       6px 12px;
    background:    var(--xal-bg-secondary);
    border-radius: var(--xal-radius-md);
    border:        1px solid var(--xal-border);
}
.xal-bout-sheet-ring-group-title {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    color:          var(--xal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.xal-bout-sheet-ring-group-count {
    font-size:     var(--xal-font-xs);
    font-weight:   700;
    background:    var(--xal-bg-surface);
    color:         var(--xal-text-muted);
    border-radius: var(--xal-radius-pill);
    padding:       1px 7px;
    margin-left:   auto;
}

/* MudSelect ring selector companion */
.xal-ring-select.mud-input-outlined,
.xal-ring-select .mud-input-outlined {
    background:    var(--xal-bg-input) !important;
    border-radius: var(--xal-radius-sm) !important;
    min-height:    30px !important;
}
.xal-ring-select .mud-input-outlined fieldset {
    border-color:  var(--xal-border-card) !important;
    border-radius: var(--xal-radius-sm) !important;
}
.xal-ring-select .mud-input-outlined:focus-within fieldset {
    border-color: var(--xal-gold-border) !important;
}
.xal-ring-select .mud-input-slot {
    font-size:   var(--xal-font-xs) !important;
    font-weight: 700 !important;
    padding:     4px 8px !important;
    color:       var(--xal-text-primary) !important;
}


/* ============================================================
   ADMIN PAGE CHROME OVERRIDES
   ============================================================ */

.xal-admin-options-btn {
    display:     flex;
    align-items: center;
    gap:         5px;
    background:  var(--xal-bg-card);
    border:      1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-sm);
    font-weight: 600;
    padding:     6px 11px;
    cursor:      pointer;
    transition:  var(--xal-transition-fast);
}
.xal-admin-options-btn:hover {
    background:   var(--xal-gold-muted);
    border-color: var(--xal-gold-border);
    color:        var(--xal-gold);
}

/* MudIconButton admin options companion */
.xal-admin-options-icon-btn.mud-icon-button {
    color:         var(--xal-text-muted) !important;
    border:        1px solid var(--xal-border-card) !important;
    border-radius: var(--xal-radius-md) !important;
    transition:    var(--xal-transition-fast) !important;
}
.xal-admin-options-icon-btn.mud-icon-button:hover {
    color:        var(--xal-gold) !important;
    background:   var(--xal-gold-muted) !important;
    border-color: var(--xal-gold-border) !important;
}

/* Inline edit mode banner */
.xal-card--editing {
    border-color: var(--xal-gold) !important;
    box-shadow:   0 0 0 2px var(--xal-gold-border) !important;
}
.xal-card-edit-banner {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        6px 14px;
    background:     var(--xal-gold-muted);
    border-bottom:  1px solid var(--xal-gold-border);
    font-size:      var(--xal-font-xs);
    font-weight:    700;
    color:          var(--xal-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Confirmation required banner */
.xal-bout-card__confirm-banner {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       7px 14px;
    background:    var(--xal-status-pending-bg);
    border-bottom: 1px solid var(--xal-status-pending-border);
    font-size:     var(--xal-font-xs);
    font-weight:   700;
    color:         var(--xal-status-pending);
}

/* Admin page section header with action button */
.xal-admin-section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 16px;
    background:      var(--xal-bg-secondary);
    border-bottom:   1px solid var(--xal-border);
    gap:             8px;
    flex-wrap:       wrap;
}
.xal-admin-section-header__title {
    font-size:      var(--xal-font-sm);
    font-weight:    700;
    color:          var(--xal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.xal-admin-section-header__count {
    font-size:     var(--xal-font-xs);
    font-weight:   700;
    background:    var(--xal-bg-surface);
    color:         var(--xal-text-muted);
    border-radius: var(--xal-radius-pill);
    padding:       2px 8px;
    margin-left:   6px;
}

/* Admin inline loading overlay */
.xal-admin-loading-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(6,6,6,0.65);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         50;
    border-radius:   inherit;
    backdrop-filter: blur(1px);
}
.xal-admin-loading-overlay .mud-progress-circular circle {
    stroke: var(--xal-gold) !important;
}


/* ============================================================
   EVENT MANAGER LANDING — Hero + Format Tickets
   ============================================================ */

.xal-em-hero {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-top:     20px;
    margin-bottom:  22px;
}
.xal-em-hero__eyebrow {
    color:          var(--xal-gold);
    font-size:      var(--xal-font-md);
    font-weight:    900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.xal-em-hero__subtitle {
    margin:    2px 0 0;
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-lg);
    max-width: 640px;
}

/* Format cards — styled like a fight-night ticket stub, one per show format */
.xal-em-format-grid {
    display:        grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:            16px;
    margin-bottom:  30px;
}
@media (max-width: 720px) {
    .xal-em-format-grid { grid-template-columns: 1fr; }
}

.xal-em-format-card {
    position:      relative;
    display:       flex;
    align-items:   center;
    gap:           16px;
    width:         100%;
    padding:       20px 22px;
    background:    var(--xal-bg-card);
    border:        1px solid var(--xal-border-card);
    border-left:   3px solid var(--xal-gold);
    border-radius: var(--xal-radius-lg);
    box-shadow:    var(--xal-shadow-sm);
    font-family:   var(--xal-font-family);
    text-align:    left;
    cursor:        pointer;
    transition:    var(--xal-transition-base);
}
.xal-em-format-card:hover,
.xal-em-format-card:focus-visible {
    border-color:  var(--xal-gold-border);
    box-shadow:    var(--xal-shadow-gold);
    transform:     translateY(-2px);
}

.xal-em-format-card__icon {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    font-size:       26px;
    background:      var(--xal-bg-surface);
    border:          1px solid var(--xal-border);
    border-radius:   50%;
}

.xal-em-format-card__body {
    flex:     1;
    min-width: 0;
}
.xal-em-format-card__label {
    color:          var(--xal-gold);
    font-size:      var(--xal-font-xs);
    font-weight:    900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.xal-em-format-card__title {
    margin:      4px 0 3px;
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-xl);
    font-weight: 800;
}
.xal-em-format-card__desc {
    margin:      0;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.5;
}

/* Section header above the show grid — bigger than the dense admin-table
   variant (.xal-admin-section-header), since this sits under a page hero
   rather than inside a compact data table. */
.xal-em-section-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin:          8px 0 18px;
}
.xal-em-section-header__title {
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-xl);
    font-weight: 800;
}
.xal-em-section-header__count {
    font-size:     var(--xal-font-md);
    font-weight:   700;
    background:    var(--xal-bg-surface);
    color:         var(--xal-text-muted);
    border-radius: var(--xal-radius-pill);
    padding:       2px 10px;
}

/* ============================================================
   EVENT MANAGER — Page Header
   Scoped chrome for the shared EventManagerLayout header so the
   kicker pill, subtitle, and Options trigger read at the right
   weight without touching the public-page versions of the same
   base classes.
   ============================================================ */

/* Kicker pill — a notch larger/legible than the base .xal-kicker
   (used on public pages); this is the section's identity chip. */
.xal-em-header .xal-em-kicker {
    padding:        7px 15px;
    font-size:      var(--xal-font-base);
    letter-spacing: 0.1em;
}

/* Subtitle (location · sanction #) — was muted grey and hard to read;
   lift to primary text and give it a touch more size + spacing. */
.xal-em-header .xal-em-header__subtitle {
    margin-top:     2px;
    color:          var(--xal-text-primary);
    font-size:      var(--xal-font-md);
    font-weight:    600;
    letter-spacing: 0.01em;
}

/* Options trigger — a genuine primary action, not an overflow menu.
   Bigger tap target, heavier label, and a soft gold lift so it
   holds the top-right corner instead of getting lost. */
.xal-em-options-trigger.xal-more-menu__trigger--gold {
    min-height:    42px;
    padding:       10px 18px;
    font-size:     var(--xal-font-md);
    font-weight:   800;
    box-shadow:    var(--xal-shadow-gold);
}
.xal-em-options-trigger.xal-more-menu__trigger--gold .mud-icon-root {
    font-size: 20px !important;
}


/* ============================================================
   EVENT MANAGER — Draw Final Brackets CTA
   The most important action on the Brackets tab. Give it room
   to breathe and pair the button with a one-line rationale so
   it reads as a deliberate, weighty step.
   ============================================================ */

.xal-em-draw-cta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    flex-wrap:       wrap;
    margin:          20px 0 22px;
    padding:         16px 20px;
    background:      linear-gradient(90deg, var(--xal-gold-muted), transparent 70%);
    border:          1px solid var(--xal-gold-border);
    border-left:     3px solid var(--xal-gold);
    border-radius:   var(--xal-radius-lg);
}
.xal-em-draw-cta__copy {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.xal-em-draw-cta__label {
    color:          var(--xal-text-primary);
    font-size:      var(--xal-font-lg);
    font-weight:    800;
    letter-spacing: 0.01em;
}
.xal-em-draw-cta__hint {
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-md);
}
.xal-em-draw-cta__btn.xal-btn-ui--primary {
    flex-shrink: 0;
    box-shadow:  var(--xal-shadow-gold);
}

@media (max-width: 640px) {
    .xal-em-draw-cta { align-items: stretch; }
    .xal-em-draw-cta__btn.xal-btn-ui { width: 100%; }
}


/* ============================================================
   EVENT MANAGER — Brackets summary bar
   Replaces two cramped default <h3> lines with a single tidy
   strip: draw status on the left, live totals on the right.
   ============================================================ */

.xal-em-brackets { margin-bottom: 8px; }

.xal-em-brackets-summary {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
    margin:          18px 0 12px;
    padding:         12px 18px;
    background:      var(--xal-bg-secondary);
    border:          1px solid var(--xal-border);
    border-radius:   var(--xal-radius-lg);
}
.xal-em-brackets-summary__status {
    display:     flex;
    align-items: baseline;
    gap:         10px;
    flex-wrap:   wrap;
    min-width:   0;
}
.xal-em-brackets-summary__label {
    color:          var(--xal-text-muted);
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.xal-em-brackets-summary__value {
    color:       var(--xal-gold);
    font-size:   var(--xal-font-lg);
    font-weight: 800;
}
.xal-em-brackets-summary__totals {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-shrink: 0;
}
.xal-em-brackets-summary__stat {
    color:          var(--xal-text-secondary);
    font-size:      var(--xal-font-md);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.xal-em-brackets-summary__stat strong {
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-xl);
    font-weight: 800;
    margin-right: 4px;
}


/* ============================================================
   EVENT MANAGER — Bracket detail flyout (sub-tabs + bouts list)
   Two tabs inside the inspector drawer: Boxers (roster
   management) and Bouts (the drawn tree). The tab bar pins to
   the top of the sheet, the per-tab action bar pins to the
   bottom, and content scrolls between them.
   ============================================================ */

/* Override the base .xal-bracket-detail flex/height so the sheet
   body scrolls the whole thing and sticky top/bottom bars work. */
.xal-brk-flyout {
    display:    block;
    height:     auto;
    min-height: 100%;
}

/* Sticky tab bar. The pill tray inside is translucent by design, so the BAR (not
   the tray) carries the opaque backdrop — otherwise roster cards scroll visibly
   through the tabs. Padding, not margin: a margin gutter would leave a
   see-through strip around the tray for content to show through. */
.xal-brk-flyout__tabs {
    position:   sticky;
    top:        0;
    z-index:    2;
    padding:    12px;
    background: var(--xal-bg-surface, var(--xal-bg-secondary));
}

.xal-brk-flyout__content {
    padding: 0 12px 12px;
}

.xal-brk-flyout__actions {
    position:      sticky;
    bottom:        0;
    z-index:       2;
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    padding:       12px;
    background:    var(--xal-bg-secondary);
    border-top:    1px solid var(--xal-border-card);
}
.xal-brk-flyout__actions .xal-btn {
    flex:      1 1 calc(50% - 4px);
    min-width: 120px;
}
/* Destructive action sits apart on its own full-width line.
   Scoped under __actions so it outranks the .xal-btn flex shorthand. */
.xal-brk-flyout__actions .xal-brk-flyout__danger {
    flex-basis: 100%;
}

/* Selected roster card — highlight so "Remove Boxer" has an obvious target.
   inset shadow gives a gold left accent without shifting the card layout. */
.xal-brk-boxer--selected {
    background: var(--xal-gold-muted);
    box-shadow: inset 3px 0 0 var(--xal-gold);
}

/* Inline add-boxer picker (Boxers tab) */
.xal-brk-addboxer {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-top:     12px;
    padding:        12px;
    background:     var(--xal-bg-secondary);
    border:         1px solid var(--xal-border);
    border-radius:  var(--xal-radius-md);
}

/* ── Round-grouped bouts list (replaces the old raw table) ── */
.xal-brk-round { margin-bottom: 14px; }

.xal-brk-round__header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             8px;
    margin-bottom:   8px;
    padding-bottom:  5px;
    border-bottom:   1px solid var(--xal-border);
}
.xal-brk-round__name {
    font-size:      var(--xal-font-md);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--xal-gold);
}
.xal-brk-round__count {
    font-size:      var(--xal-font-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--xal-text-muted);
}

.xal-brk-bout {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 12px;
    margin-bottom: 6px;
    background:    var(--xal-bg-card);
    border:        1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
}
.xal-brk-bout__no {
    flex-shrink:           0;
    min-width:             30px;
    font-size:             var(--xal-font-sm);
    font-weight:           800;
    color:                 var(--xal-text-muted);
    font-variant-numeric:  tabular-nums;
}
.xal-brk-bout__corners {
    flex:                  1;
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   10px;
    min-width:             0;
}
.xal-brk-bout__corner       { min-width: 0; display: flex; align-items: center; }
.xal-brk-bout__corner--red  { justify-content: flex-start; }
.xal-brk-bout__corner--blue { justify-content: flex-end; }

/* Name + club stacked, with the corner accent running down both lines. */
.xal-brk-bout__boxer {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    min-width:      0;
}
.xal-brk-bout__corner--red  .xal-brk-bout__boxer { border-left:  3px solid var(--xal-corner-red);  padding-left:  8px; }
.xal-brk-bout__corner--blue .xal-brk-bout__boxer { border-right: 3px solid var(--xal-corner-blue); padding-right: 8px; align-items: flex-end; text-align: right; }

.xal-brk-bout__name {
    font-size:     var(--xal-font-md);
    font-weight:   700;
    color:         var(--xal-text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     100%;
}
/* Team/club — a quiet second line so same-club matchups read at a glance. */
.xal-brk-bout__club {
    font-size:     var(--xal-font-sm);
    font-weight:   600;
    color:         var(--xal-text-secondary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     100%;
}

/* BYE / "Winner of Bout #N" — a quiet, non-boxer placeholder */
.xal-brk-bout__placeholder {
    font-size:     var(--xal-font-sm);
    font-weight:   600;
    font-style:    italic;
    color:         var(--xal-text-muted);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.xal-brk-bout__vs {
    flex-shrink:    0;
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}


/* ============================================================
   BOUT SHEETS — Running-order workspace
   Context rail (Schedule › Session › Sheet), grouped action
   toolbar, and the per-bout reorder control.
   ============================================================ */

/* ── Context rail ── */
.xal-bs-rail {
    display:       flex;
    align-items:   center;
    gap:           18px;
    flex-wrap:     wrap;
    margin:        18px 0 16px;
    padding:       14px 18px;
    background:    var(--xal-bg-card);
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
}
.xal-bs-rail__lead {
    display:        flex;
    flex-direction: column;
    padding-right:  18px;
    border-right:   1px solid var(--xal-border);
}
.xal-bs-rail__eyebrow {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
.xal-bs-rail__lead-title {
    font-size:   var(--xal-font-md);
    font-weight: 800;
    color:       var(--xal-text-primary);
    white-space: nowrap;
}
.xal-bs-rail__path {
    display:     flex;
    align-items: flex-end;
    gap:         10px;
    flex-wrap:   wrap;
    flex:        1;
    min-width:   0;
}
/* Each picker segment: an uppercase label above a compact dropdown, so the
   selects sit close together as a path rather than spreading edge-to-edge. */
.xal-bs-seg {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           0 1 200px;
    min-width:      150px;
}
.xal-bs-seg__label {
    padding-left:   2px;
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
/* Kill the MudSelect label-margin now that the label lives outside the control */
.xal-bs-seg .mud-input-control { margin: 0 !important; }
.xal-bs-rail__chev {
    color:          var(--xal-text-muted);
    font-size:      18px;
    flex-shrink:    0;
    padding-bottom: 16px; /* lift the chevron toward the dropdowns' vertical centre */
}
.xal-bs-rail__count {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    margin-left:    auto;
    padding-left:   18px;
    border-left:    1px solid var(--xal-border);
}
.xal-bs-rail__count strong {
    font-size:             var(--xal-font-2xl);
    font-weight:           800;
    line-height:           1;
    color:                 var(--xal-gold);
    font-variant-numeric:  tabular-nums;
}
.xal-bs-rail__count span {
    margin-top:     3px;
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--xal-text-secondary);
}
@media (max-width: 767px) {
    .xal-bs-rail       { flex-direction: column; align-items: stretch; }
    .xal-bs-rail__lead { padding-right: 0; padding-bottom: 10px; border-right: none; border-bottom: 1px solid var(--xal-border); }
    .xal-bs-rail__path { flex-direction: column; align-items: stretch; }
    .xal-bs-seg         { flex: 1 1 auto; }
    .xal-bs-rail__chev  { display: none; }
    .xal-bs-rail__count { margin-left: 0; padding-left: 0; border-left: none; flex-direction: row; align-items: baseline; gap: 8px; }
}

/* ── Session-card publication bar (Draft / Published) ── */
.xal-bs-publish {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px 16px;
    margin:          0 0 18px;
    padding:         14px 18px;
    background:      var(--xal-bg-secondary);
    border:          1px solid var(--xal-border);
    border-radius:   var(--xal-radius-lg);
}
.xal-bs-publish__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.xal-bs-publish__label  { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--xal-text-muted); }
.xal-bs-publish__hint   { font-size: 12px; color: var(--xal-text-secondary); }

/* ── Grouped action toolbar (build · share · results) ── */
.xal-bs-actions {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin:         0 0 18px;
    padding:        14px 18px;
    background:     var(--xal-bg-secondary);
    border:         1px solid var(--xal-border);
    border-radius:  var(--xal-radius-lg);
}
.xal-bs-actions__group {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.xal-bs-actions__group + .xal-bs-actions__group {
    padding-top: 16px;
    border-top:  1px solid var(--xal-border);
}
.xal-bs-actions__label {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
.xal-bs-actions__btns {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    align-items: center;
}
/* Destructive action reads as danger without competing with the primary */
.xal-bs-actions__danger.xal-btn-ui--ghost {
    border-color: var(--xal-red-border);
    color:        var(--xal-red-bright);
}
.xal-bs-actions__danger.xal-btn-ui--ghost:hover {
    background: var(--xal-red-dim);
}
/* Desktop: lay the groups side by side with generous separation + dividers.
   Below this the groups stack with top dividers (mobile-first rules above). */
@media (min-width: 900px) {
    .xal-bs-actions { flex-direction: row; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
    .xal-bs-actions__group + .xal-bs-actions__group {
        padding-top:  0;
        border-top:   none;
        padding-left: 32px;
        border-left:  1px solid var(--xal-border);
    }
}

/* ── Per-bout reorder control ── */
.xal-bs-pos {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
}
/* Arrows sit side by side so target sizes can meet WCAG 2.5.8 / touch guidelines
   (36px pointer, 44px touch) without inflating the row height. */
.xal-bs-pos__steps {
    display:        flex;
    flex-direction: row;
    gap:            4px;
}
.xal-bs-pos__step {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      var(--xal-bg-surface);
    border:          1px solid var(--xal-border-card);
    border-radius:   var(--xal-radius-sm);
    color:           var(--xal-text-secondary);
    cursor:          pointer;
    transition:      var(--xal-transition-fast);
}
.xal-bs-pos__step:hover:not(:disabled) { border-color: var(--xal-gold-border); color: var(--xal-gold); }
.xal-bs-pos__step:disabled             { opacity: 0.3; cursor: not-allowed; }
.xal-bs-pos__step .mud-icon-root       { font-size: 22px; }

/* The number IS a button — click to jump the bout to any position. */
.xal-bs-pos__num {
    display:              inline-flex;
    flex-direction:       column;
    align-items:          center;
    justify-content:      center;
    gap:                  1px;
    min-width:            46px;
    height:               46px;
    padding:              0 6px;
    background:           var(--xal-bg-input);
    border:               1px solid var(--xal-gold-border);
    border-radius:        var(--xal-radius-md);
    color:                var(--xal-gold);
    font-size:            var(--xal-font-xl);
    font-weight:          800;
    line-height:          1;
    cursor:               pointer;
    transition:           var(--xal-transition-fast);
    font-variant-numeric: tabular-nums;
}
.xal-bs-pos__num:hover { background: var(--xal-gold-muted); box-shadow: 0 0 0 2px var(--xal-gold-border); }
.xal-bs-pos__num small {
    font-size:      8px;
    font-weight:    800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
    line-height:    1;
}
.xal-bs-pos__remove {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      transparent;
    border:          1px solid var(--xal-border);
    border-radius:   var(--xal-radius-sm);
    color:           var(--xal-text-muted);
    cursor:          pointer;
    transition:      var(--xal-transition-fast);
}
.xal-bs-pos__remove:hover        { border-color: var(--xal-red-border); color: var(--xal-red-bright); background: var(--xal-red-dim); }
.xal-bs-pos__remove .mud-icon-root { font-size: 18px; }

.xal-bs-pos__static {
    font-size:            var(--xal-font-xl);
    font-weight:          800;
    color:                var(--xal-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Corner cells: red left, blue right, each with its corner accent bar
   running down the name + club, club on a quiet second line ── */
.xal-bs-corner        { min-width: 0; }
.xal-bs-corner--red   { border-left:  3px solid var(--xal-corner-red);  padding-left:  10px; }
.xal-bs-corner--blue  { border-right: 3px solid var(--xal-corner-blue); padding-right: 10px; align-items: flex-end; text-align: right; }
.xal-bs-corner__name  { font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xal-bs-corner__club  { font-size: var(--xal-font-md); color: var(--xal-text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Loser / scratched corners recede so un-entered rows pop while keying results */
.xal-bs-corner--dim   { opacity: 0.45; }

/* ── Officials assignment grid: corner-striped boxer cells.
   Both stripes sit left (the columns are side by side in a table,
   so the bout-card's mirrored right-stripe would read as noise). ── */
.xal-oa-corner        { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.xal-oa-corner--red   { border-left: 3px solid var(--xal-corner-red);  padding-left: 8px; }
.xal-oa-corner--blue  { border-left: 3px solid var(--xal-corner-blue); padding-left: 8px; }

/* ── Result entry: the "Winner" pill on each corner (ADR-0015 N2) ──
   Outline = tap to record; solid gold = recorded winner (tap to change). */
.xal-bs-winner {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           fit-content;
    min-height:      36px;
    margin-top:      4px;
    padding:         2px 16px;
    background:      transparent;
    border:          1px solid var(--xal-border);
    border-radius:   999px;
    color:           var(--xal-text-muted);
    font-size:       var(--xal-font-base);
    font-weight:     800;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      var(--xal-transition-fast);
}
.xal-bs-winner:hover {
    border-color: var(--xal-gold-border);
    color:        var(--xal-gold);
}
.xal-bs-winner--won {
    background:   var(--xal-gold);
    border-color: var(--xal-gold);
    color:        #1a1a1a;
}
.xal-bs-winner--won:hover {
    color:      #1a1a1a;
    box-shadow: 0 0 0 2px var(--xal-gold-border);
}
/* Winner pills follow their corner's alignment inside the flex column */
.xal-bs-corner--blue .xal-bs-winner,
.xal-bout-card__fighter--blue .xal-bs-winner { align-self: flex-end; }

/* Touch sizing where the mobile cards take over from the grid (<600px):
   44px minimum targets per WCAG 2.5.5 / Apple HIG / Material. */
@media (max-width: 599.98px) {
    .xal-bs-pos__step   { width: 44px; height: 44px; }
    .xal-bs-pos__remove { width: 44px; height: 44px; }
    .xal-bs-winner      { min-height: 44px; padding: 2px 18px; }
}

/* The rail's "n/N recorded" denominator stays quiet next to the big count */
.xal-bs-rail__count-of {
    font-size:   var(--xal-font-md);
    font-weight: 700;
    color:       var(--xal-text-secondary);
}

/* Simple stacked list rows (intermissions, result uploads) — render at every width */
.xal-bs-listrow {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         8px 2px;
    border-bottom:   1px solid var(--xal-border);
}


/* ============================================================
   BOUT SHEETS — "Add bouts" inspector (UnassignedBoutsComponent)
   ============================================================ */

.xal-bs-add {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  14px;
    /* Match the grid's 16px cell inset so the header, actions and filters
       line up with the bout columns below (the inspector body has no padding). */
    padding:        0 16px;
}

.xal-bs-add__head { display: flex; flex-direction: column; gap: 4px; }
.xal-bs-add__eyebrow {
    color:          var(--xal-gold);
    font-size:      var(--xal-font-xs);
    font-weight:    900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.xal-bs-add__title {
    margin:      0;
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-xl);
    font-weight: 800;
}
.xal-bs-add__hint {
    margin:    0;
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-md);
}

.xal-bs-add__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.xal-bs-add__filters { display: flex; gap: 14px; flex-wrap: wrap; }
.xal-bs-add__filters .xal-bs-seg { flex: 0 1 220px; }


/* ============================================================
   EVENT MANAGER — page intro head (Bouts, Find Opponent)
   Eyebrow/title/hint framing that tells the user what the tab
   is for, with live KPI counts and an optional labeled action
   group. Same visual grammar as the bout-sheets context rail.
   ============================================================ */

.xal-em-head {
    display:       flex;
    align-items:   flex-start;
    gap:           16px 28px;
    flex-wrap:     wrap;
    margin:        18px 0 16px;
    padding:       16px 18px;
    background:    var(--xal-bg-card);
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
}

.xal-em-head__lead {
    flex:           1 1 300px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}
.xal-em-head__back { align-self: flex-start; margin-bottom: 6px; }
.xal-em-head__eyebrow {
    color:          var(--xal-gold);
    font-size:      var(--xal-font-xs);
    font-weight:    900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.xal-em-head__title {
    margin:      0;
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-xl);
    font-weight: 800;
}
.xal-em-head__hint {
    margin:      0;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.5;
    max-width:   60ch;
}

.xal-em-head__counts {
    display:     flex;
    gap:         26px;
    align-items: center;
    padding:     6px 0;
}

.xal-em-head__action {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
    padding-left:   28px;
    border-left:    1px solid var(--xal-border);
    /* Wide enough for the longest schedule name ("Saturday - Semi Finals - 8/29/2026") */
    max-width:      320px;
}
.xal-em-head__action-label {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
.xal-em-head__action-hint {
    margin:      0;
    color:       var(--xal-text-muted);
    font-size:   var(--xal-font-md);
    line-height: 1.45;
}

/* ── Labeled control groups (filter pill trays) ── */
.xal-em-ctl-row {
    display:   flex;
    gap:       16px 20px;
    flex-wrap: wrap;
    margin:    16px 0 14px;
}
.xal-em-ctl {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.xal-em-ctl__label {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
.xal-em-ctl__hint {
    margin:      0;
    color:       var(--xal-text-muted);
    font-size:   var(--xal-font-md);
    line-height: 1.45;
    max-width:   52ch;
}

/* Even tray: every control takes an equal share of the row and centres inside its own
   share, so the group reads as one balanced band instead of three left-packed clusters
   of different widths. Auto-columns rather than a fixed three, because a tray drops
   controls the show has no use for (a single-gender show shows no gender filter). */
.xal-em-ctl-row--even {
    display:            grid;
    grid-auto-flow:     column;
    grid-auto-columns:  minmax(0, 1fr);
    align-items:        end;
    /* Fills its container (the tray sits in a flex card, where a grid child would
       otherwise shrink to its contents and defeat the even split). */
    width:              100%;
}
.xal-em-ctl--center {
    align-items: center;
    text-align:  center;
}

/* ── Filter strip ──
   Deliberately NOT an .xal-em-head card. Three controls don't warrant a second header block
   above the list, and the card's chrome plus a stacked label row cost more height than the
   controls themselves. Labels sit inline instead, so the strip is one control tall and every
   item — Clear included — is centred by the flex row rather than by hand. */
.xal-em-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px 24px;
    margin:      4px 0 12px;
}
.xal-em-filters__group {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
}
.xal-em-filters__label {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
    white-space:    nowrap;
}
/* The pills keep their 44px touch target; only the group's own inset comes down. */
.xal-em-filters .xal-pill-tabs {
    padding: 4px;
}
.xal-em-filters .xal-md-select {
    min-width: 190px;
}
/* Clear closes the strip on the right. */
.xal-em-filters__actions {
    margin-left: auto;
}
.xal-em-filters__actions .mud-button-root {
    min-width: 116px;
    padding:   9px 26px;
}

@media (max-width: 899.98px) {
    /* Stacked — a three-up strip leaves each control too narrow to use on a phone. */
    .xal-em-filters {
        flex-direction: column;
        align-items:    stretch;
        gap:            10px;
    }
    .xal-em-filters__actions {
        margin-left:     0;
        justify-content: center;
    }
}

@media (max-width: 899.98px) {
    /* Stacked, still centred — a row of thirds on a phone leaves each control too narrow
       to read its own label. */
    .xal-em-ctl-row--even {
        grid-auto-flow:    row;
        grid-auto-columns: auto;
        justify-items:     center;
    }
    .xal-em-ctl-row--even .xal-em-ctl { width: 100%; }
}

/* ── Tappable KPI chip (a kpi-block that doubles as a list filter) ── */
.xal-kpi-chip {
    padding:       8px 14px;
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    background:    transparent;
    font:          inherit;
    cursor:        pointer;
}
.xal-kpi-chip:hover {
    border-color: var(--xal-gold-border);
}
.xal-kpi-chip.active {
    border-color: var(--xal-gold-border);
    background:   rgba(212, 175, 55, .11);
}

@media (max-width: 899.98px) {
    .xal-em-head { flex-direction: column; align-items: stretch; }
    /* In column direction the lead's 300px flex-basis would become dead height */
    .xal-em-head__lead { flex-basis: auto; }
    .xal-em-head__action {
        padding-left: 0;
        padding-top:  12px;
        border-left:  none;
        border-top:   1px solid var(--xal-border);
        max-width:    none;
    }
}


/* ============================================================
   EVENT MANAGER — Show Settings (uniform section grammar)
   Every group on the settings page is the same anatomy:
   section card (title + hint) → stack of setting rows
   (name + description left, control right). Settings that only
   exist because a parent toggle is on sit in a __sub block
   behind a gold dependency rule.
   ============================================================ */

.xal-em-set-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap:                   16px;
    align-items:           start;
}
/* Two independent stacks so cards pack tightly — a plain grid of cards would align
   rows across columns, leaving dead space under the shorter card of each row. */
.xal-em-set-col {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    min-width:      0;
}

.xal-em-set {
    background:    var(--xal-bg-card);
    border:        1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    overflow:      hidden;
}
.xal-em-set__head {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    padding:        13px 18px;
    background:     var(--xal-bg-secondary);
    border-bottom:  1px solid var(--xal-border);
}
.xal-em-set__title {
    margin:         0;
    color:          var(--xal-gold);
    font-size:      var(--xal-font-md);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.xal-em-set__hint {
    margin:      0;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.5;
}

.xal-em-set__body {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        16px 18px;
}

/* ── Setting row: name + description left, control right ── */
.xal-em-set__row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px 18px;
    flex-wrap:       wrap;
}
.xal-em-set__text {
    flex:           1 1 220px;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.xal-em-set__name {
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-md);
    font-weight: 700;
}
.xal-em-set__desc {
    margin:      0;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.5;
    max-width:   52ch;
}
.xal-em-set__ctl {
    flex:        0 0 auto;
    display:     flex;
    align-items: center;
}
/* Wide controls (selects, dates, numbers) get a consistent width and
   drop to a full-width line under the text when the row wraps. */
.xal-em-set__ctl--input { flex: 1 1 220px; max-width: 340px; }
.xal-em-set__ctl--input > * { width: 100%; }
/* Row name doubles as the control's label — kill Mud's label margin */
.xal-em-set .mud-input-control { margin: 0 !important; }

/* ── Dependent settings: revealed behind a gold dependency rule ── */
.xal-em-set__sub {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    padding:        2px 0 2px 14px;
    border-left:    3px solid var(--xal-gold-border);
}

/* ── Inline note (Stripe status, manual-collection explainer) ── */
.xal-em-set__note {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    margin:        0;
    padding:       10px 12px;
    background:    var(--xal-bg-secondary);
    border:        1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
    color:         var(--xal-text-secondary);
    font-size:     var(--xal-font-md);
    line-height:   1.5;
}
.xal-em-set__note--ok {
    border-color: var(--xal-status-open-border);
    color:        var(--xal-text-primary);
}
.xal-em-set__note--ok .mud-icon-root {
    color:       var(--xal-status-open);
    flex-shrink: 0;
    margin-top:  1px;
}

.xal-em-set__stack {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
}

/* Radio options read at body size, not Mud's default */
.xal-em-set .mud-radio .mud-typography,
.xal-em-set .mud-radio-content {
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-md);
}

/* ── Sticky save bar ── */
.xal-em-set-save {
    position:        sticky;
    bottom:          0;
    z-index:         5;
    display:         flex;
    justify-content: flex-end;
    margin-top:      16px;
    padding:         12px 18px;
    background:      var(--xal-bg-secondary);
    border:          1px solid var(--xal-border-card);
    border-bottom:   none;
    border-radius:   var(--xal-radius-lg) var(--xal-radius-lg) 0 0;
    box-shadow:      0 -6px 18px rgba(0, 0, 0, 0.35);
}
.xal-em-set-save .xal-btn-ui { box-shadow: var(--xal-shadow-gold); }
@media (max-width: 640px) {
    .xal-em-set-save .xal-btn-ui { width: 100%; }
}

/* ── Admins tab: current-admins list ──
   Card-per-person instead of a cramped table so the layout reflows on
   mobile and long emails wrap instead of colliding with the next column. */
.xal-admin-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.xal-admin-list__item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px 16px;
    flex-wrap:       wrap;
    padding:         12px 14px;
    background:      var(--xal-bg-secondary);
    border:          1px solid var(--xal-border-card);
    border-radius:   var(--xal-radius-md);
}
.xal-admin-list__id {
    flex:           1 1 220px;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            3px;
}
.xal-admin-list__name {
    display:      flex;
    align-items:  center;
    gap:          8px;
    flex-wrap:    wrap;
    color:        var(--xal-text-primary);
    font-size:    var(--xal-font-lg);
    font-weight:  700;
}
.xal-admin-list__email {
    color:         var(--xal-text-secondary);
    font-size:     var(--xal-font-md);
    overflow-wrap: anywhere;
}
.xal-admin-list__meta {
    display:     flex;
    align-items: center;
    gap:         10px 12px;
    flex-wrap:   wrap;
}
.xal-admin-list__date {
    color:       var(--xal-text-muted);
    font-size:   var(--xal-font-md);
    white-space: nowrap;
}


/* ============================================================
   WEIGH-INS — inspector detail (check-in / daily weigh-in / bracket)
   Setting-row grammar (.xal-em-set__row/name) is reused for the
   switch rows; this block only adds the inspector's own framing.
   ============================================================ */

.xal-wi-detail {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    padding:        16px;
}

/* Identity header — the sheet title already carries the boxer's name */
.xal-wi-detail__id {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.xal-wi-detail__id-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.xal-wi-detail__club {
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-md);
    font-weight: 700;
}
.xal-wi-detail__meta {
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.45;
}

/* Labeled groups — same grammar as the bout-sheets action groups */
.xal-wi-detail__group {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding-top:    14px;
    border-top:     1px solid var(--xal-border);
}
.xal-wi-detail__group-label {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}
.xal-wi-detail__group-action { align-self: flex-start; }

/* Daily weigh-in entry */
.xal-wi-detail__weight-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.xal-wi-detail__weight-input { max-width: 150px; }
.xal-wi-detail__weight-row .mud-input-control { margin: 0 !important; }

/* Current bracket + made-weight verdict */
.xal-wi-detail__bracket {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.xal-wi-detail__bracket-name {
    color:       var(--xal-text-primary);
    font-size:   var(--xal-font-md);
    font-weight: 700;
}

/* Missed-weight move: bracket picker + confirm button */
.xal-wi-detail__move {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.xal-wi-detail__move .xal-form-select {
    flex:      1 1 220px;
    min-width: 0;
}


/* ============================================================
   EVENT MANAGER — Payments selection bar
   ============================================================ */

/* The reference field sits directly beside Confirm payment because it only
   applies to that one action — the adjacency says so without a tooltip. */
.xal-pay-bar__confirm {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1 1 320px;
    min-width:   0;
}
.xal-pay-bar__confirm .xal-textfield {
    flex:      1 1 auto;
    min-width: 0;
}
.xal-pay-bar__confirm .mud-button-root {
    flex: 0 0 auto;
}

/* Actions cluster keeps its own rhythm when the bar wraps. */
.xal-pay-bar__actions {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}

/* On a phone the bar's default column stacking grows tall enough to swallow the
   list it's meant to act on. A fixed three-row grid keeps it compact: who's
   selected, the reference + its button, then the remaining actions. */
@media (max-width: 520px) {
    .xal-action-bar.xal-pay-bar {
        display:               grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "meta    clear"
            "confirm confirm"
            "actions actions";
        gap:     8px;
        padding: 10px 12px;
    }
    .xal-pay-bar .xal-action-bar__meta { grid-area: meta; align-self: center; }
    .xal-pay-bar__clear   { grid-area: clear; }
    /* Reference + its button stay on one line — the base bar's full-width button
       rule would otherwise squeeze the input to nothing. */
    .xal-pay-bar__confirm {
        grid-area:             confirm;
        display:               grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .xal-pay-bar__confirm .xal-btn-ui { width: auto; }
    .xal-pay-bar__actions {
        grid-area:             actions;
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   EVENT MANAGER — Advancing Champions header actions
   ============================================================ */

/* Return to Roster and Submit Champions read as a matched pair, so they travel
   together as one unit when the header cluster wraps. */
.xal-champion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* On a phone the pair takes its own full-width row and splits it evenly, rather
   than stacking and pushing the bracket list they act on below the fold. */
@media (max-width: 640px) {
    .xal-champion-actions {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

        .xal-champion-actions .xal-btn-ui {
            min-width: 0;
            padding-inline: 8px;
        }
}


/* ── END xal-event-manager.css ── */