/*
 * ============================================================
 *  XALLENGER — Shared UI Components
 *  File: wwwroot/css/xal-components.css
 *
 *  Vendor-agnostic primitives AND single-class MudBlazor v9.1
 *  companion styles.  Every xal-* class below can be dropped
 *  directly onto a MudBlazor component's Class="" attribute:
 *
 *    <MudTextField  Class="xal-textfield" ... />
 *    <MudSelect     Class="xal-select" ... />
 *    <MudButton     Class="xal-btn--gold" ... />
 *    <MudDataGrid   Class="xal-grid" ... />
 *    <MudCheckBox   Class="xal-checkbox" ... />
 *    <MudSwitch     Class="xal-switch" ... />
 *    <MudDatePicker Class="xal-datepicker" ... />
 *    <MudTimePicker Class="xal-timepicker" ... />
 *    <MudAutocomplete Class="xal-autocomplete" ... />
 *    <MudNumericField Class="xal-numericfield" ... />
 *    <MudSlider     Class="xal-slider" ... />
 *    <MudRadioGroup Class="xal-radiogroup" ... />
 *    <MudFileUpload Class="xal-fileupload" ... />
 *    <MudCard       Class="xal-mud-card" ... />
 *    <MudDialog     Class="xal-dialog" ... />
 *
 *  SIZE VARIANTS for text inputs:
 *    xal-sm-textfield  — compact single-line (filter bars, table cells)
 *    xal-md-textfield  — standard form field  (default)
 *    xal-lg-textfield  — prominent form fields (hero / modal)
 *    xal-sm-select     — compact select
 *    xal-md-select     — standard select
 *
 *  Depends on: xal-tokens.css
 * ============================================================
 */


/* ============================================================
   SECTION 1 — BADGES  (.xal-badge)
   ============================================================ */

.xal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--xal-radius-pill);
    font-size: var(--xal-font-xs);
    font-weight: 700;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.4;
    border: 1px solid transparent;
}


/* Size modifiers */
.xal-badge--sm { font-size: 8px;  padding: 2px 6px; }
.xal-badge--lg { font-size: 10px; padding: 4px 10px; }


/* ============================================================
   SECTION 2 — BUTTONS  (.xal-btn + MudButton companions)
   ============================================================ */

/* ── Plain HTML .xal-btn base ── */
.xal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--xal-radius-md);
    font-family: var(--xal-font-family);
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--xal-transition-fast);
    text-decoration: none;
  
    white-space: nowrap;
    min-height:44px;
    line-height: 1;
    font-size: var(--xal-font-base);
    padding: 8px 16px;
    text-transform: uppercase
}
.xal-btn:disabled,
.xal-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Size modifiers */
.xal-btn--xs   { font-size: 9px;  padding: 4px 8px;   border-radius: var(--xal-radius-sm); }
.xal-btn--sm   { font-size: 10px; padding: 6px 12px; }
.xal-btn--md   { font-size: 11px; padding: 8px 16px; }
.xal-btn--lg   { font-size: 13px; padding: 10px 20px; border-radius: var(--xal-radius-lg); }
.xal-btn--full { width: 100%; }
.xal-btn--icon { padding: 7px; border-radius: var(--xal-radius-md); }

/* Colour variants */
.xal-btn--gold    { background: var(--xal-gold-dim); color: var(--xal-gold);           border-color: var(--xal-gold-border); }
.xal-btn--gold:hover:not(:disabled) { background: var(--xal-gold); color: #000; border-color: var(--xal-gold); }

.xal-btn--gold-full {
    background: var(--xal-gold);
    color: #000 !important;
    border-color: var(--xal-gold-border);
}

    .xal-btn--gold-full:hover:not(:disabled) {
        background: #B8960B !important;
        color: #000;
        border-color: #B8960B !important;
        box-shadow: none;
    }

.xal-btn--outline { background: transparent;         color: var(--xal-text-secondary); border-color: var(--xal-border-card); }
.xal-btn--outline:hover:not(:disabled) { border-color: var(--xal-gold-border); color: var(--xal-gold); background: var(--xal-gold-muted); }

.xal-btn--ghost   { background: var(--xal-bg-surface); color: var(--xal-text-secondary); border-color: var(--xal-border); }
.xal-btn--ghost:hover:not(:disabled) { background: var(--xal-bg-card); color: var(--xal-text); border-color: var(--xal-border-card); }

.xal-btn--danger  { background: var(--xal-red-dim);  color: var(--xal-red-bright);     border-color: var(--xal-red-border); }
.xal-btn--danger:hover:not(:disabled) { background: var(--xal-red); color: #fff; border-color: var(--xal-red); }

.xal-btn--dark    { background: var(--xal-bg-surface); color: var(--xal-text-secondary); border-color: var(--xal-border-card); }
.xal-btn--dark:hover:not(:disabled) { background: var(--xal-bg-card); color: var(--xal-text); }

/* ── MudButton companion classes ──
   Apply directly: <MudButton Class="xal-mud-btn--gold" Variant="Variant.Filled">
   These target MudBlazor's own rendered button elements.

   MudMenu is a special case: Class="xal-mud-btn--gold" lands on MudMenu's
   own wrapping <div class="mud-menu">, NOT on the inner activator <button>
   (which MudBlazor always tags .mud-menu-button-activator regardless of
   Class). The descendant selectors below cover that case too — compounded
   with .mud-ripple (MudBlazor puts that class on the activator itself, not
   just a child splash element) so this beats the .mud-ripple rule below at
   equal specificity instead of losing to it by source order.
---------------------------------------------------------------- */

/* Gold — primary CTA (matches xal-btn--gold intent) */
.xal-mud-btn--gold.mud-button-root,
.xal-mud-btn--gold.mud-button-filled,
.xal-mud-btn--gold .mud-menu-button-activator.mud-ripple {
    background-color: var(--xal-gold) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: var(--xal-radius-md) !important;
    font-family: var(--xal-font-family) !important;
    letter-spacing: 0.4px !important;
    box-shadow: none !important;
    border: 1px solid var(--xal-gold) !important;
}
.xal-mud-btn--gold.mud-button-root:hover,
.xal-mud-btn--gold.mud-button-filled:hover,
.xal-mud-btn--gold .mud-menu-button-activator:hover {
    background-color: #B8960B !important;
    border-color: #B8960B !important;
    box-shadow: none !important;
}
.xal-mud-btn--gold .mud-ripple { background: rgba(212,175,55,0.25) !important; }

/* Gold outlined */
.xal-mud-btn--gold-outline.mud-button-root,
.xal-mud-btn--gold-outline.mud-button-outlined {
    background-color: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
    border: 1px solid var(--xal-gold-border) !important;
    font-weight: 700 !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: none !important;
}
.xal-mud-btn--gold-outline.mud-button-root:hover,
.xal-mud-btn--gold-outline.mud-button-outlined:hover {
    background-color: var(--xal-gold-dim) !important;
    border-color: var(--xal-gold) !important;
}

/* Red — destructive / secondary brand */
.xal-mud-btn--red.mud-button-root,
.xal-mud-btn--red.mud-button-filled {
    background-color: var(--xal-red) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: none !important;
    border: 1px solid var(--xal-red) !important;
}
.xal-mud-btn--red.mud-button-root:hover,
.xal-mud-btn--red.mud-button-filled:hover {
    background-color: var(--xal-red-bright) !important;
    border-color: var(--xal-red-bright) !important;
}

/* Danger — delete / remove */
.xal-mud-btn--danger.mud-button-root,
.xal-mud-btn--danger.mud-button-outlined {
    background-color: var(--xal-red-dim) !important;
    color: var(--xal-red-bright) !important;
    border: 1px solid var(--xal-red-border) !important;
    font-weight: 700 !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: none !important;
}
.xal-mud-btn--danger.mud-button-root:hover {
    background-color: var(--xal-red) !important;
    color: #fff !important;
    border-color: var(--xal-red) !important;
}

/* Ghost — tertiary / subtle */
.xal-mud-btn--ghost.mud-button-root {
    background-color: var(--xal-bg-surface) !important;
    color: var(--xal-text-secondary) !important;
    border: 1px solid var(--xal-border-card) !important;
    font-weight: 600 !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: none !important;
}
.xal-mud-btn--ghost.mud-button-root:hover {
    background-color: var(--xal-bg-card) !important;
    color: var(--xal-text) !important;
    border-color: var(--xal-border-strong) !important;
}

/* ----------------------------------------------------------------
   Bridge: xal-btn-ui--* fill utilities applied to a <MudButton>.
   Those utilities are authored for plain <button> and only set a
   resting background. On a MudButton, MudBlazor's own `.mud-button:hover`
   paints a translucent action-overlay whose selector out-specifies the
   single-class utility, erasing its fill — a gold Save button turns to
   black-on-dark on hover. Re-assert the utility's fill (and legible ink)
   for the hover/focus states so the button stays readable. Plain <button>
   usage is untouched because every selector here requires .mud-button-root.
---------------------------------------------------------------- */
.mud-button-root.xal-btn-ui--primary:hover,
.mud-button-root.xal-btn-ui--primary:focus-visible {
    background-color: var(--xal-gold) !important;
    color: #000 !important;
    filter: brightness(1.08);
}
.mud-button-root.xal-btn-ui--danger:hover,
.mud-button-root.xal-btn-ui--danger:focus-visible {
    background-color: var(--xal-red) !important;
    color: #fff !important;
    filter: brightness(1.08);
}
.mud-button-root.xal-btn-ui--secondary:hover,
.mud-button-root.xal-btn-ui--secondary:focus-visible {
    background-color: rgba(255, 255, 255, .07) !important;
    filter: brightness(1.2);
}
.mud-button-root.xal-btn-ui--info:hover,
.mud-button-root.xal-btn-ui--info:focus-visible {
    background-color: var(--xal-blue-dim) !important;
    filter: brightness(1.12);
}
.mud-button-root.xal-btn-ui--success:hover,
.mud-button-root.xal-btn-ui--success:focus-visible {
    background-color: var(--xal-status-open-bg) !important;
    filter: brightness(1.12);
}

/* Size helpers for MudButton */
.xal-mud-btn--sm.mud-button-root { font-size: var(--xal-font-xs) !important; padding: 4px 12px !important; min-height: 30px !important; }
.xal-mud-btn--md.mud-button-root { font-size: var(--xal-font-base) !important; padding: 6px 16px !important; min-height: 36px !important; }
.xal-mud-btn--lg.mud-button-root { font-size: var(--xal-font-md) !important; padding: 8px 20px !important; min-height: 44px !important; }
.xal-mud-btn--full.mud-button-root {
    width: 100% !important;
    display: flex !important;
}

/* MudIconButton */
.xal-mud-icon-btn.mud-icon-button {
    color: var(--xal-text-muted) !important;
    border-radius: var(--xal-radius-md) !important;
    transition: var(--xal-transition-fast) !important;
}
.xal-mud-icon-btn.mud-icon-button:hover {
    color: var(--xal-gold) !important;
    background: var(--xal-gold-muted) !important;
}
.xal-mud-icon-btn--danger.mud-icon-button:hover {
    color: var(--xal-red-bright) !important;
    background: var(--xal-red-dim) !important;
}


/* ============================================================
   SECTION 3 — TEXT FIELDS  (MudTextField, MudNumericField)
   ============================================================

   MudBlazor v9.1 rendered DOM for Outlined variant:
     div.mud-input-control
       div.mud-input.mud-input-outlined  ← our scope anchor
         input.mud-input-slot            ← the <input>
         fieldset                        ← the border frame
           legend                        ← the label notch

   Usage:
     <MudTextField Class="xal-textfield" Variant="Variant.Outlined" />
     <MudTextField Class="xal-sm-textfield" Variant="Variant.Outlined" />
     <MudTextField Class="xal-lg-textfield" Variant="Variant.Outlined" />
*/

/* ── Shared base — applies to all sizes ── */
.xal-textfield,
.xal-sm-textfield,
.xal-md-textfield,
.xal-lg-textfield,
.xal-numericfield,
.xal-sm-numericfield {

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

    /* The fieldset border frame */
    &.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 ring */
    &.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 ring */
    &.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-outlined input.mud-input-slot,
    &.mud-input-outlined textarea.mud-input-slot,
    & .mud-input-outlined input.mud-input-slot,
    & .mud-input-outlined textarea.mud-input-slot {
        color: var(--xal-text-primary) !important;
        font-family: var(--xal-font-family) !important;
        caret-color: var(--xal-gold) !important;
    }

    /* Input placeholder */
    &.mud-input-outlined input.mud-input-slot::placeholder,
    & .mud-input-outlined input.mud-input-slot::placeholder {
        color: var(--xal-text-muted) !important;
        opacity: 1 !important;
    }

    /* Floating label — resting */
    & .mud-input-label,
    & .mud-input-label-outlined {
        color: var(--xal-text-muted) !important;
        font-family: var(--xal-font-family) !important;
        transition: var(--xal-transition-fast) !important;
    }

    /* Floating label — focused / filled */
    & .mud-input-label.mud-input-label-animated,
    & .mud-input-label-outlined.mud-input-label-animated.mud-label-transform {
        color: var(--xal-gold) !important;
    }

    /* Helper / validation text */
    & .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;
    }

    /* Error border */
    & .mud-input-outlined.mud-input-error fieldset {
        border-color: var(--xal-red-border) !important;
    }

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

    /* Clear button */
    & .mud-input-clear-button.mud-icon-button {
        color: var(--xal-text-muted) !important;
    }
    & .mud-input-clear-button.mud-icon-button:hover {
        color: var(--xal-text-primary) !important;
        background: var(--xal-bg-hover) !important;
    }

    /* Disabled state */
    & .mud-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;
    }
}

/* ── SM size variant — compact (filter bars, table cells) ── */
.xal-sm-textfield,
.xal-sm-numericfield {
    & .mud-input-outlined input.mud-input-slot,
    & .mud-input-outlined textarea.mud-input-slot {
        font-size: var(--xal-font-base) !important;
        padding: 5px 10px !important;
    }
    & .mud-input-outlined {
        min-height: 32px !important;
    }
    & .mud-input-label,
    & .mud-input-label-outlined {
        font-size: var(--xal-font-base) !important;
        top: 6px !important;
    }
    & .mud-input-label-outlined.mud-label-transform {
        top: -6px !important;
    }
}

/* ── MD size variant — standard form field ── */
.xal-md-textfield,
.xal-md-numericfield,
.xal-numericfield {
    & .mud-input-outlined input.mud-input-slot,
    & .mud-input-outlined textarea.mud-input-slot {
        font-size: var(--xal-font-md) !important;
        padding: 8px 12px !important;
    }
    & .mud-input-outlined {
        min-height: 52px !important;
    }
    & .mud-input-label,
    & .mud-input-label-outlined {
        font-size: var(--xal-font-md) !important;
    }
}

/* Mobile-friendly sizing for touch inputs */
@media (max-width: 768px) {
    .xal-md-textfield,
    .xal-md-select,
    .xal-numericfield {
        & .mud-input-outlined input.mud-input-slot,
        & .mud-input-outlined textarea.mud-input-slot,
        & .mud-input-slot {
            font-size: 16px !important; /* Prevents iOS zoom on focus */
            padding: 12px 14px !important;
        }
        & .mud-input-outlined {
            min-height: 48px !important; /* Touch-friendly height */
        }
        & .mud-input-label,
        & .mud-input-label-outlined {
            font-size: 16px !important;
        }
    }

    .xal-datepicker,
    .xal-timepicker {
        & .mud-input-outlined {
            min-height: 48px !important;
        }
        & .mud-input-outlined input.mud-input-slot,
        & input.mud-input-slot {
            font-size: 16px !important;
            padding: 12px 14px !important;
        }
        & .mud-input-label,
        & .mud-input-label-outlined {
            font-size: 16px !important;
        }
    }

    /* Make radio buttons and checkboxes larger for touch */
    .xal-radio .mud-button-root.mud-icon-button,
    .xal-checkbox .mud-button-root.mud-icon-button {
        width: 48px !important;
        height: 48px !important;
    }

    /* Increase button min height for touch targets */
    .xal-btn,
    .mud-button-root {
        min-height: 48px !important;
    }
}

/* ── LG size variant — modal / hero inputs ── */
.xal-lg-textfield {
    & .mud-input-outlined input.mud-input-slot,
    & .mud-input-outlined textarea.mud-input-slot {
        font-size: var(--xal-font-lg) !important;
        padding: 11px 14px !important;
    }
    & .mud-input-outlined {
        min-height: 50px !important;
    }
    & .mud-input-label,
    & .mud-input-label-outlined {
        font-size: var(--xal-font-lg) !important;
    }
}

/* ── Default (no size suffix = MD) ── */
.xal-textfield {
    & .mud-input-outlined input.mud-input-slot,
    & .mud-input-outlined textarea.mud-input-slot {
        font-size: var(--xal-font-md) !important;
        padding: 8px 12px !important;
    }
    & .mud-input-outlined { min-height: 40px !important; }
}

/* ── MudTextField multi-line / textarea ── */
.xal-textarea,
.xal-textfield.xal-textarea {
    & .mud-input-outlined textarea.mud-input-slot {
        min-height: 80px !important;
        resize: vertical !important;
        line-height: 1.6 !important;
    }
}


/* ============================================================
   SECTION 4 — SELECT  (MudSelect, MudAutocomplete)
   ============================================================

   MudBlazor v9.1 rendered DOM:
     div.mud-input-control
       div.mud-input.mud-input-outlined.mud-select
         div.mud-input-slot (or input for Autocomplete)
         fieldset > legend
     div.mud-popover (dropdown)
       div.mud-list > div.mud-list-item
*/

.xal-select,
.xal-sm-select,
.xal-md-select,
.xal-autocomplete {

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

    /* Border frame */
    &.mud-input-outlined fieldset,
    & .mud-input-outlined fieldset,
    & .mud-select 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;
    }

    /* Selected display text */
    & .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;
    }

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

    /* Dropdown chevron */
    & .mud-select-input .mud-input-adornment .mud-icon-root,
    & .mud-input-adornment-end .mud-icon-root {
        color: var(--xal-text-muted) !important;
        transition: color var(--xal-transition-fast), transform var(--xal-transition-fast) !important;
    }
    &.mud-input-outlined:focus-within .mud-input-adornment .mud-icon-root {
        color: var(--xal-gold) !important;
    }

    /* Helper text */
    & .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; }
}


/* SM select */
.xal-sm-select {
    & .mud-input-slot,
    & .mud-select-input {
        font-size: var(--xal-font-base) !important;
        padding: 5px 10px !important;
    }
    & .mud-input-outlined { min-height: 32px !important; }
    & .mud-input-label,
    & .mud-input-label-outlined { font-size: var(--xal-font-base) !important; }
}

/* MD select — standard form field (matches .xal-md-textfield height) */
.xal-md-select,
.xal-autocomplete {
    & .mud-input-slot,
    & .mud-select-input {
        font-size: var(--xal-font-md) !important;
        padding: 8px 12px !important;
    }
    & .mud-input-outlined { min-height: 52px !important; }
    & .mud-input-label,
    & .mud-input-label-outlined { font-size: var(--xal-font-md) !important; }
}

/* ── MudSelect dropdown popover ── */
.mud-popover-paper .xal-select-popover,
.xal-select-popover.mud-popover-paper {
    background: var(--xal-bg-card) !important;
    border: 1px solid var(--xal-border-strong) !important;
    border-radius: var(--xal-radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.60) !important;
}

/* MudSelect list items (global — MudBlazor appends to body) */
.mud-select-popover .mud-list-item,
.mud-list-item-text {
    color: var(--xal-text-secondary) !important;
    font-size: var(--xal-font-md) !important;
    font-family: var(--xal-font-family) !important;
}
.mud-select-popover .mud-list-item:hover {
    background: var(--xal-bg-hover) !important;
    color: var(--xal-text-primary) !important;
}
.mud-select-popover .mud-list-item.mud-selected-item {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}
.mud-select-popover .mud-list-item .mud-checkbox {
    color: var(--xal-text-muted) !important;
}
.mud-select-popover .mud-list-item .mud-checkbox.mud-checked {
    color: var(--xal-gold) !important;
}


/* ============================================================
   SECTION 5 — CHECKBOX  (MudCheckBox)
   ============================================================

   Usage: <MudCheckBox Class="xal-checkbox" T="bool" />

   MudBlazor v9.1 DOM:
     label.mud-checkbox
       span.mud-button-root.mud-icon-button
         span.mud-checkbox-icons
           svg  (checked / unchecked icons)
       span.mud-checkbox-label
*/

.xal-checkbox.mud-checkbox {
    color: var(--xal-text-primary);
}
.xal-checkbox .mud-checkbox-label {
    color: var(--xal-text-secondary);
    font-size: var(--xal-font-md) !important;
    font-family: var(--xal-font-family) !important;
}
.xal-checkbox .mud-button-root.mud-icon-button {
    color: var(--xal-text-muted) !important;
    border-radius: var(--xal-radius-sm) !important;
}
.xal-checkbox .mud-button-root.mud-icon-button:hover {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}
.xal-checkbox.mud-checked .mud-button-root.mud-icon-button {
    color: var(--xal-gold) !important;
}
.xal-checkbox.mud-disabled .mud-button-root.mud-icon-button {
    color: var(--xal-text-disabled) !important;
}
.xal-checkbox .mud-ripple {
    background: var(--xal-gold-glow) !important;
}

/* On-dark variant — photo/overlay backgrounds (e.g. the login card) where
   the default secondary label color is unreadable. !important because
   MudBlazor's own stylesheet also colors the label. */
.xal-checkbox--on-dark .mud-checkbox-label {
    color: #fff !important;
}

.xal-checkbox--on-dark:not(.mud-checked) .mud-button-root.mud-icon-button {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ============================================================
   SECTION 6 — RADIO BUTTONS  (MudRadioGroup / MudRadio)
   ============================================================

   Usage:
     <MudRadioGroup Class="xal-radiogroup">
       <MudRadio Class="xal-radio" Value="..." />
*/

.xal-radiogroup {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xal-radiogroup--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.xal-radio.mud-radio {
    color: var(--xal-text-primary) !important;
}
.xal-radio .mud-radio-content {
    color: var(--xal-text-secondary) !important;
    font-size: var(--xal-font-md) !important;
    font-family: var(--xal-font-family) !important;
}
.xal-radio .mud-button-root.mud-icon-button {
    color: var(--xal-text-muted) !important;
}
.xal-radio .mud-button-root.mud-icon-button:hover {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}
.xal-radio.mud-checked .mud-button-root.mud-icon-button {
    color: var(--xal-gold) !important;
}
.xal-radio .mud-ripple {
    background: transparent !important;
}
.xal-radio .mud-ripple:hover,
.xal-radio .mud-ripple:focus-within {
    background: var(--xal-gold-glow) !important;
}


/* ============================================================
   SECTION 7 — SWITCH  (MudSwitch)
   ============================================================

   Usage: <MudSwitch Class="xal-switch" T="bool" />

   MudBlazor v9.1 DOM:
     span.mud-switch-base  (the clickable track wrapper)
       span.mud-switch-track
       span.mud-switch-thumb
     span.mud-switch-content  (label text beside)
*/

.xal-switch.mud-switch {
    /* ensure the component inherits our font */
    font-family: var(--xal-font-family) !important;
}
.xal-switch .mud-switch-content {
    color: var(--xal-text-secondary) !important;
    font-size: var(--xal-font-md) !important;
    font-family: var(--xal-font-family) !important;
}
/* Unchecked track */
.xal-switch .mud-switch-track {
    background-color: var(--xal-bg-surface) !important;
    border: 1px solid var(--xal-border-strong) !important;
    transition: background-color var(--xal-transition-fast) !important;
}
/* Unchecked thumb */
.xal-switch .mud-switch-thumb {
    background-color: var(--xal-text-muted) !important;
    box-shadow: var(--xal-shadow-sm) !important;
    transition: background-color var(--xal-transition-fast), transform var(--xal-transition-fast) !important;
}
/* Checked — gold track + thumb */
.xal-switch.mud-checked .mud-switch-track {
    background-color: var(--xal-gold-dim) !important;
    border-color: var(--xal-gold-border) !important;
}
.xal-switch.mud-checked .mud-switch-thumb {
    background-color: var(--xal-gold) !important;
}
/* Hover ripple */
.xal-switch .mud-switch-base:hover .mud-switch-track {
    border-color: var(--xal-border-strong) !important;
}
.xal-switch.mud-checked .mud-switch-base:hover .mud-switch-track {
    border-color: var(--xal-gold) !important;
}
.xal-switch .mud-ripple {
    background: transparent !important;
}
.xal-switch .mud-ripple:hover,
.xal-switch .mud-ripple:focus-within {
    background: var(--xal-gold-glow) !important;
}
/* Disabled */
.xal-switch.mud-disabled {
    opacity: 0.40 !important;
    cursor: not-allowed !important;
}


/* ============================================================
   SECTION 8 — DATE / TIME PICKERS
   ============================================================

   Usage:
     <MudDatePicker Class="xal-datepicker" Variant="Variant.Outlined" />
     <MudTimePicker Class="xal-timepicker" Variant="Variant.Outlined" />

   The input portion re-uses the xal-textfield base rules.
   Picker panel overrides are scoped to .mud-picker.
*/

.xal-datepicker,
.xal-timepicker {

    /* Input field — inherits textfield base */
    &.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-family: var(--xal-font-family) !important;
        font-size: var(--xal-font-md) !important;
        caret-color: var(--xal-gold) !important;
    }
    & .mud-input-label,
    & .mud-input-label-outlined {
        color: var(--xal-text-muted) !important;
    }
    & .mud-input-label.mud-input-label-animated,
    & .mud-input-label-outlined.mud-label-transform {
        color: var(--xal-gold) !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;
    }
}

/* ── Picker panel (calendar / clock) ── */
.mud-picker-content {
    background: var(--xal-bg-card) !important;
    color: var(--xal-text-primary) !important;
    border: 1px solid var(--xal-border-strong) !important;
    border-radius: var(--xal-radius-lg) !important;
    box-shadow: var(--xal-shadow-lg) !important;
}

/* Picker toolbar (month/year header) */
.mud-picker-header,
.mud-picker-toolbar {
    background: var(--xal-bg-secondary) !important;
    color: var(--xal-text-primary) !important;
    border-bottom: 1px solid var(--xal-border) !important;
    border-radius: var(--xal-radius-lg) var(--xal-radius-lg) 0 0 !important;
}
.mud-picker-toolbar .mud-typography {
    color: var(--xal-text-primary) !important;
    font-family: var(--xal-font-family) !important;
}
.mud-picker-toolbar .mud-button-root {
    color: var(--xal-text-secondary) !important;
}
.mud-picker-toolbar .mud-button-root:hover {
    color: var(--xal-gold) !important;
    background: var(--xal-gold-muted) !important;
}

/* Calendar day cells */
.mud-day-button .mud-button-root,
.mud-picker-calendar-header-day,
.mud-day {
    color: var(--xal-text-secondary) !important;
    font-size: var(--xal-font-base) !important;
    font-family: var(--xal-font-family) !important;
    border-radius: 50% !important;
}
.mud-day:hover .mud-button-root {
    background: var(--xal-gold-muted) !important;
    color: var(--xal-gold) !important;
}
.mud-day.mud-selected .mud-button-root,
.mud-day-selected {
    background: var(--xal-gold) !important;
    color: #000 !important;
}
.mud-day.mud-today .mud-button-root,
.mud-day-today {
    border: 1px solid var(--xal-gold-border) !important;
    color: var(--xal-gold) !important;
}
.mud-day.mud-outside-month .mud-button-root,
.mud-day-outside-month {
    color: var(--xal-text-disabled) !important;
}
.mud-picker-calendar-header-day {
    color: var(--xal-text-muted) !important;
    font-weight: 700 !important;
    font-size: var(--xal-font-xs) !important;
    text-transform: uppercase !important;
}

/* Nav arrows in calendar */
.mud-picker-nav-button .mud-icon-button {
    color: var(--xal-text-muted) !important;
}
.mud-picker-nav-button .mud-icon-button:hover {
    color: var(--xal-gold) !important;
    background: var(--xal-gold-muted) !important;
}

/* Clock face */
.mud-clock {
    background: var(--xal-bg-surface) !important;
    border: 1px solid var(--xal-border) !important;
}
.mud-clock-pin,
.mud-clock-pointer {
    background: var(--xal-gold) !important;
}
.mud-clock-number {
    color: var(--xal-text-secondary) !important;
    font-family: var(--xal-font-family) !important;
}
.mud-clock-number.mud-selected,
.mud-clock-number-selected {
    background: var(--xal-gold) !important;
    color: #000 !important;
}

/* Picker action buttons (OK / Cancel) */
.mud-picker-actions .mud-button-root {
    color: var(--xal-text-secondary) !important;
    font-weight: 700 !important;
    font-family: var(--xal-font-family) !important;
    text-transform: uppercase !important;
    font-size: var(--xal-font-xs) !important;
    letter-spacing: 0.5px !important;
}
.mud-picker-actions .mud-button-root:hover {
    color: var(--xal-gold) !important;
    background: var(--xal-gold-muted) !important;
}
.mud-picker-actions .mud-button-color-primary {
    color: var(--xal-gold) !important;
}


/* ============================================================
   SECTION 9 — SLIDER  (MudSlider)
   ============================================================

   Usage: <MudSlider Class="xal-slider" />
*/

.xal-slider.mud-slider {
    color: var(--xal-gold) !important;
}
.xal-slider .mud-slider-track {
    background-color: var(--xal-bg-surface) !important;
    border-color: var(--xal-border-strong) !important;
}
.xal-slider .mud-slider-track-false {
    background-color: var(--xal-bg-surface) !important;
}
.xal-slider .mud-slider-track-true {
    background-color: var(--xal-gold) !important;
}
.xal-slider .mud-slider-thumb {
    background-color: var(--xal-gold) !important;
    border: 2px solid var(--xal-gold) !important;
    box-shadow: 0 0 0 3px var(--xal-gold-glow) !important;
    width: 18px !important;
    height: 18px !important;
}
.xal-slider .mud-slider-thumb:hover {
    box-shadow: 0 0 0 5px var(--xal-gold-glow) !important;
}
.xal-slider .mud-slider-value-label {
    background: var(--xal-bg-secondary) !important;
    color: var(--xal-gold) !important;
    font-size: var(--xal-font-xs) !important;
    font-weight: 700 !important;
    border: 1px solid var(--xal-gold-border) !important;
    border-radius: var(--xal-radius-sm) !important;
}
.xal-slider .mud-input-helper-text {
    color: var(--xal-text-muted) !important;
    font-size: var(--xal-font-xs) !important;
}


/* ============================================================
   SECTION 10 — FILE UPLOAD  (MudFileUpload)
   ============================================================

   Usage: <MudFileUpload Class="xal-fileupload" T="IBrowserFile" />
*/

.xal-fileupload.mud-file-upload,
.xal-fileupload {
    & .mud-file-upload-dropzone,
    & .mud-drop-zone {
        border: 2px dashed var(--xal-border-card) !important;
        border-radius: var(--xal-radius-lg) !important;
        background: var(--xal-bg-input) !important;
        color: var(--xal-text-muted) !important;
        transition: var(--xal-transition-fast) !important;
        padding: 24px !important;
        text-align: center !important;
    }
    & .mud-file-upload-dropzone:hover,
    & .mud-drop-zone:hover,
    & .mud-file-upload-dropzone.mud-dragover,
    & .mud-drop-zone.mud-dragover {
        border-color: var(--xal-gold-border) !important;
        background: var(--xal-gold-muted) !important;
        color: var(--xal-gold) !important;
    }
}


/* ============================================================
   SECTION 11 — FORM CONTROLS  (plain HTML — vendor-agnostic)
   Kept for non-MudBlazor contexts and filter bars.
   ============================================================ */

.xal-form-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.xal-form-group--grow { flex: 1; min-width: 120px; }

/* Fixed-proportion select filters (e.g. two selects + a search textbox
   that should read as roughly 25% / 25% / 50%). Pair with
   .xal-form-group--grow on the remaining field, which fills whatever
   space is left. */
.xal-form-group--quarter { flex: 0 1 25%; min-width: 140px; }

@media (max-width: 767px) {
    .xal-form-group--quarter { flex: 1 1 100%; }
}

.xal-form-label {
    font-size: var(--xal-font-base);
    font-weight: 700;
    color: var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.xal-form-select {
    background: var(--xal-bg-input);
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    color: var(--xal-text);
    font-size: var(--xal-font-md);
    padding: 6px 9px;
    width: 100%;
    outline: none;
    appearance: none;
    transition: var(--xal-transition-fast);
    height:40px;
}
.xal-form-select:focus { border-color: var(--xal-gold-border); }

.xal-form-input {
    background: var(--xal-bg-input);
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    color: var(--xal-text);
    font-size: var(--xal-font-base);
    padding: 6px 9px;
    width: 100%;
    outline: none;
    transition: var(--xal-transition-fast);
}
.xal-form-input:focus { border-color: var(--xal-gold-border); }
.xal-form-input::placeholder { color: var(--xal-text-muted); }

.xal-form-textarea {
    background: var(--xal-bg-input);
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    color: var(--xal-text);
    font-size: var(--xal-font-base);
    padding: 8px 10px;
    width: 100%;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: var(--xal-transition-fast);
}
.xal-form-textarea:focus { border-color: var(--xal-gold-border); }


/* ============================================================
   SECTION 12 — OVERFLOW / OPTIONS MENU  (.xal-menu)
   ============================================================ */

.xal-menu-anchor { position: relative; display: inline-block; }
.xal-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--xal-bg-card);
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    box-shadow: var(--xal-shadow-lg);
    z-index: 200;
    overflow: hidden;
    display: none;
}
.xal-menu--open { display: block; }
.xal-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: var(--xal-font-base);
    color: var(--xal-text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--xal-border);
    transition: var(--xal-transition-fast);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
}
.xal-menu__item:last-child { border-bottom: none; }
.xal-menu__item:hover { background: var(--xal-gold-muted); color: var(--xal-gold); }
.xal-menu__item--danger:hover { background: var(--xal-red-dim); color: var(--xal-red-bright); }
.xal-menu__item__icon { font-size: 13px; flex-shrink: 0; }
.xal-menu__divider { height: 1px; background: var(--xal-border); margin: 2px 0; }


/* ============================================================
   SECTION 13 — AVATARS  (.xal-avatar)
   ============================================================ */

.xal-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--xal-border-card);
    background: var(--xal-bg-surface);
    line-height: 1;
}
.xal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.xal-avatar--xs  { width: 24px; height: 24px; font-size: 8px;  border-width: 1px; }
.xal-avatar--sm  { width: 32px; height: 32px; font-size: 10px; border-width: 1px; }
.xal-avatar--md  { width: 44px; height: 44px; font-size: 13px; border-width: 2px; }
.xal-avatar--lg  { width: 56px; height: 56px; font-size: 17px; border-width: 2px; }
.xal-avatar--xl  { width: 72px; height: 72px; font-size: 22px; border-width: 3px; }

.xal-avatar--c1 { background: var(--xal-avatar-c1); }
.xal-avatar--c2 { background: var(--xal-avatar-c2); }
.xal-avatar--c3 { background: var(--xal-avatar-c3); }
.xal-avatar--c4 { background: var(--xal-avatar-c4); }
.xal-avatar--c5 { background: var(--xal-avatar-c5); }
.xal-avatar--c6 { background: var(--xal-avatar-c6); }
.xal-avatar--c7 { background: var(--xal-avatar-c7); }
.xal-avatar--c8 { background: var(--xal-avatar-c8); }

.xal-avatar--verified {
    border-color: var(--xal-blue-bright);
    box-shadow: 0 0 0 1px var(--xal-blue-bright);
}
.xal-avatar--red-corner  { border-color: var(--xal-corner-red);  box-shadow: 0 0 10px var(--xal-corner-red-glow); }
.xal-avatar--blue-corner { border-color: var(--xal-corner-blue); box-shadow: 0 0 10px var(--xal-corner-blue-glow); }

.xal-avatar__verified-badge {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--xal-blue-bright);
    border: 2px solid var(--xal-bg-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; line-height: 1; color: #fff; font-weight: 700;
}
.xal-avatar--lg .xal-avatar__verified-badge,
.xal-avatar--xl .xal-avatar__verified-badge { width: 20px; height: 20px; font-size: 10px; }


/* ============================================================
   SECTION 14 — EMPTY STATE / SKELETON / ALERTS
   ============================================================ */

.xal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
}
.xal-empty__icon  { font-size: 36px; line-height: 1; opacity: 0.4; }
.xal-empty__title { font-size: var(--xal-font-lg); font-weight: 700; color: var(--xal-text-secondary); }
.xal-empty__desc  { font-size: var(--xal-font-base); color: var(--xal-text-muted); max-width: 280px; line-height: 1.6; }

@keyframes xal-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.8; }
}
.xal-skeleton {
    background: var(--xal-bg-surface);
    border-radius: var(--xal-radius-sm);
    animation: xal-pulse 1.6s ease-in-out infinite;
}
.xal-skeleton--text   { height: 10px; width: 100%; }
.xal-skeleton--title  { height: 14px; width: 60%; }
.xal-skeleton--avatar { border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; }
.xal-skeleton--card   { height: 120px; border-radius: var(--xal-radius-lg); width: 100%; }

.xal-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--xal-radius-md);
    border: 1px solid transparent;
    font-size: var(--xal-font-base);
    line-height: 1.5;
}
.xal-alert__icon  { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.xal-alert__body  { flex: 1; }
.xal-alert__title { font-weight: 700; margin-bottom: 2px; }
.xal-alert__desc  { color: var(--xal-text-secondary); font-size: var(--xal-font-sm); }

.xal-alert--success { background: var(--xal-status-open-bg);       border-color: var(--xal-status-open-border);       color: var(--xal-status-open); }
.xal-alert--warning { background: var(--xal-status-weighin-bg);     border-color: var(--xal-status-weighin-border);     color: var(--xal-status-weighin); }
.xal-alert--error   { background: var(--xal-status-unmatched-bg);   border-color: var(--xal-status-unmatched-border);   color: var(--xal-status-unmatched); }
.xal-alert--info    { background: var(--xal-blue-dim);              border-color: var(--xal-blue-border);              color: var(--xal-blue-bright); }

/*
 * xal-nav-tabs.css
 * Navigation tabs — behave like buttons, drive page routing
 * Each tab is a clickable link; active state driven by current URL
 *
 * Usage:
 *   <MudTabs Class="xal-nav-tabs" ActivePanelIndex="@_activeTabIndex" ActivePanelIndexChanged="@OnTabChanged">
 *     <MudTabPanel Text="Dashboard" />
 *     <MudTabPanel Text="Check-ins" />
 *     ...
 *   </MudTabs>
 *
 * Or use MudButton styled as tabs (simpler for routing):
 *   <div class="xal-nav-tabs">
 *     <NavLink href="dashboard" class="xal-nav-tab" Match="NavLinkMatch.All">Dashboard</NavLink>
 *     ...
 *   </div>
 */

/* ══════════════════════════════════════════════════════════════
   OPTION A: MudTabs with programmatic ActivePanelIndex
   ══════════════════════════════════════════════════════════════ */

/* Base tabs container */
.xal-nav-tabs.mud-tabs,
.xal-nav-tabs {
    background: var(--xal-bg-secondary);
    border-bottom: 1px solid var(--xal-border);
    border-radius: 0;
    box-shadow: none;
    min-height: 48px;
}

    /* MudBlazor paints the tab bar --mud-palette-surface (white) and the slider
       --mud-palette-primary (blue); both must be re-skinned or they leak through. */
    .xal-nav-tabs .mud-tabs-tabbar {
        background-color: var(--xal-bg-secondary) !important;
        border-radius: 0;
    }

    .xal-nav-tabs .mud-tab-slider {
        background: var(--xal-gold) !important;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    /* Tab button — looks clickable, not just selectable */
    .xal-nav-tabs .mud-tab {
        position: relative;
        color: var(--xal-text-muted);
        font-size: var(--xal-font-sm);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        min-height: 48px;
        min-width: 100px;
        padding: 0 20px;
        border-radius: 0;
        cursor: pointer;
        transition: color .15s ease, background .15s ease, border-color .15s ease;
    }

        /* Hover — clear interactive feedback */
        .xal-nav-tabs .mud-tab:hover {
            color: var(--xal-text-primary);
            background: var(--xal-bg-hover);
        }

        /* Active tab — gold highlight */
        .xal-nav-tabs .mud-tab.mud-tab-active,
        .xal-nav-tabs .mud-tab[aria-selected="true"] {
            color: var(--xal-gold);
            background: transparent;
        }

            /* Active tab underline indicator */
            .xal-nav-tabs .mud-tab.mud-tab-active::after,
            .xal-nav-tabs .mud-tab[aria-selected="true"]::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--xal-gold);
                border-radius: 3px 3px 0 0;
            }

        /* Ripple on click */
        .xal-nav-tabs .mud-tab .mud-ripple {
            background: var(--xal-gold-glow);
        }

    /* Tab count badge */
    .xal-nav-tabs .xal-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 20px;
        padding: 0 6px;
        margin-left: 8px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 800;
        background: var(--xal-bg-surface);
        color: var(--xal-text-muted);
    }

    .xal-nav-tabs .xal-tab-count--green {
        background: var(--xal-status-open-bg);
        color: var(--xal-status-open);
    }

    .xal-nav-tabs .xal-tab-count--red {
        background: var(--xal-status-unmatched-bg);
        color: var(--xal-status-unmatched);
    }

    .xal-nav-tabs .xal-tab-count--amber {
        background: var(--xal-status-weighin-bg);
        color: var(--xal-status-weighin);
    }

/* ══════════════════════════════════════════════════════════════
   OPTION B: NavLink-based tabs (simpler for page routing)
   ══════════════════════════════════════════════════════════════ */

/* Shell/scroller split: the outer div owns the chrome (bg, border, sticky)
   so the mobile overflow scrim can sit fixed over the inner scrolling row. */
.xal-nav-tabs-navlink {
    background: var(--xal-bg-secondary);
    border-bottom: 1px solid var(--xal-border);
}

.xal-nav-tabs-navlink__scroll {
    display: flex;
    align-items: stretch;
    /* Tab sets wider than the viewport (e.g. 5 tabs on a phone) scroll sideways */
    overflow-x: auto;
}

.xal-nav-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Grow to fill the bar edge-to-edge; min-width is the mobile shrink floor
       (horizontal scroll takes over below it — see the 768px override). */
    flex: 1 1 auto;
    min-height: 52px;
    min-width: 100px;
    padding: 0 20px;
    color: var(--xal-text-muted);
    font-size: var(--xal-font-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

    .xal-nav-tab:hover {
        color: var(--xal-text-primary);
        background: var(--xal-bg-hover);
        text-decoration: none;
    }

    /* Active NavLink gets the gold treatment */
    .xal-nav-tab.active,
    .xal-nav-tab[aria-current="page"] {
        color: var(--xal-gold);
        background: transparent;
    }

        .xal-nav-tab.active::after,
        .xal-nav-tab[aria-current="page"]::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--xal-gold);
            border-radius: 3px 3px 0 0;
        }

/* ══════════════════════════════════════════════════════════════
   ADMIN WORKSPACE (/admin/workspace)
   Support-console grids, filter toolbar, detail-drawer field rows,
   and the MudPagination skin (first MudPagination in the app —
   without this it renders Mud's default blue/white look).
   ══════════════════════════════════════════════════════════════ */

/* Workspace tab variant: the panels are the work surface — real margins around the grids,
   and desk-readable tab labels (the shared skin's 10px uppercase is too small here). */
.xal-workspace-tabs .mud-tab {
    font-size: var(--xal-font-lg);
}

.xal-workspace-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--xal-border);
}

.xal-workspace-tabs .mud-tabs-panels {
    padding: 20px 24px 24px;
}

.xal-workspace-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}

.xal-workspace-search {
    flex: 1 1 280px;
    max-width: 420px;
}

.xal-workspace-filter {
    flex: 0 1 180px;
}

.xal-workspace-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.xal-workspace-chip-clear {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 4px;
    font-size: inherit;
    line-height: 1;
}

    .xal-workspace-chip-clear:hover {
        color: var(--xal-gold);
    }

.xal-workspace-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Sortable column header — a button that inherits the grid header's type treatment.
   The workspace grids page and sort server-side (SortMode.None), so this label is the
   sort control: click to sort, click again to flip. */
.xal-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

    .xal-sort-label:hover,
    .xal-sort-label--active {
        color: var(--xal-gold);
    }

.xal-sort-label__icon {
    font-size: 11px;
}

.xal-sort-label__icon--asc {
    transform: rotate(180deg);
}

/* MudPagination skin — match the app's dark surface + gold accent.
   The page buttons are MudButtons inside .mud-pagination-item <li>s; the selected page
   renders as .mud-button-filled-primary (Mud blue) and must be re-skinned. */
.xal-workspace-pager .mud-pagination-item .mud-button-root {
    color: var(--xal-text-muted);
}

    .xal-workspace-pager .mud-pagination-item .mud-button-root:hover {
        background: var(--xal-bg-hover);
        color: var(--xal-text-primary);
    }

.xal-workspace-pager .mud-pagination-item .mud-typography {
    color: var(--xal-text-muted);
}

.xal-workspace-pager .mud-pagination-item-selected .mud-button-filled-primary {
    background: var(--xal-gold) !important;
    color: #141414 !important;
    font-weight: 700;
}

/* Workspace drawer: same shell as the help drawer, sized for a desktop support console.
   Two-class selector so it wins over .xal-help-drawer's 420px regardless of file order. */
.xal-help-drawer.xal-workspace-drawer {
    width: min(680px, 100vw);
}

    /* The help drawer's 420px-tuned padding is too tight at desk width. */
    .xal-help-drawer.xal-workspace-drawer .xal-help-drawer__head {
        padding: 18px 24px 14px;
    }

    .xal-help-drawer.xal-workspace-drawer .xal-help-drawer__body {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 20px 24px 28px;
    }

/* Drawer content is grouped into titled sections — no loose text floating in the panel */
.xal-workspace-drawer__section-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--xal-border);
    color: var(--xal-gold);
    font-size: var(--xal-font-md);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.xal-workspace-fields {
    display: flex;
    flex-direction: column;
}

/* Pinned action bar: the record's jump-off points live here, not loose in the body */
.xal-workspace-drawer__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 24px;
    /* The drawer runs to the viewport bottom edge — keep the last
       button clear of the iPhone home indicator. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: var(--xal-border-card);
    background: var(--xal-bg-secondary);
}

/* Club roster row — the whole row is a "find them in the Users tab" control */
.xal-workspace-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid var(--xal-border);
    background: transparent;
    color: var(--xal-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .xal-workspace-member:last-child {
        border-bottom: none;
    }

    .xal-workspace-member:hover .xal-workspace-member__name {
        color: var(--xal-gold);
        text-decoration: underline;
    }

/* Drawer detail rows: muted label beside value */
.xal-workspace-field {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 5px 0;
}

.xal-workspace-registration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xal-border);
}

    .xal-workspace-registration:last-child {
        border-bottom: none;
    }

.xal-workspace-code {
    font-size: 12px;
    background: var(--xal-bg-surface);
    border: 1px solid var(--xal-border);
    border-radius: 4px;
    padding: 1px 6px;
    word-break: break-all;
}

/* Rows are drawer-openers on the workspace grids */
.xal-workspace-toolbar ~ .xal-grid .mud-table-row {
    cursor: pointer;
}

/* Mobile card counterpart for each workspace grid (xal-tables.css swaps
   .xal-grid.xal-table for .xal-mobile-list at 767px). Users/Clubs/Shows cards
   are drawer-openers (button); Notifications/Payments have no drawer, so the
   card carries the whole row (--static). */
.xal-workspace-card {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* buttons inherit centered flex alignment globally */
    gap: 4px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: var(--xal-bg-card);
    border: none;
    border-bottom: 1px solid var(--xal-border);
    text-align: left;
    font: inherit;
    color: var(--xal-text-primary);
}

    .xal-workspace-card:last-child {
        border-bottom: none;
    }

    button.xal-workspace-card {
        cursor: pointer;
    }

.xal-workspace-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.xal-workspace-card__title {
    font-weight: 600;
}

/* Sub-text floor: 13px muted, never --xal-font-sm */
.xal-workspace-card__line,
.xal-workspace-card__meta {
    font-size: var(--xal-font-md);
    color: var(--xal-text-muted);
    overflow-wrap: anywhere;
}

.xal-workspace-card__amount {
    font-weight: 700;
}

/* No hover tooltips on touch — delivery errors show in full */
.xal-workspace-card__error {
    font-size: var(--xal-font-md);
    color: var(--xal-status-weighin);
    overflow-wrap: anywhere;
}

/* ── Workspace on a phone: the support console follows the caller ── */
@media (max-width: 767px) {
    /* !important: MudTabs writes its MinimumTabWidth default (160px) as an
       inline style on every tab — five of those can never fit a phone. All five
       tabs must fit without scrolling, sized for a 360px viewport. */
    .xal-nav-tabs.xal-workspace-tabs .mud-tab {
        font-size: 11px;
        letter-spacing: normal;
        min-width: 0 !important;
        padding: 0 6px;
    }

    .xal-workspace-tabs .mud-tabs-panels {
        padding: 16px 10px 20px;
    }

    /* Toolbar stacks: search on top, filters pair up beneath */
    .xal-workspace-search {
        flex: 1 1 100%;
    }

    .xal-workspace-filter {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .xal-workspace-toolbar .xal-btn-ui {
        flex: 1 1 auto;
    }

    /* Jump-filter chips: pill-sized visuals, finger-sized clear target */
    .xal-workspace-chip-clear {
        min-width: 32px;
        min-height: 32px;
    }

    .xal-workspace-pager {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* Drawer detail rows: label above value — 140px columns don't fit */
    .xal-workspace-field {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }

    .xal-help-drawer.xal-workspace-drawer .xal-help-drawer__head {
        padding: 14px 16px 12px;
    }

    .xal-help-drawer.xal-workspace-drawer .xal-help-drawer__body {
        gap: 20px;
        padding: 16px 16px 24px;
    }

    .xal-workspace-drawer__foot {
        flex-direction: column;
        align-items: stretch;
    }

        .xal-workspace-drawer__foot .xal-btn-ui {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
}

/* Sticky variant — pins the tab row to the top of the scrollable
   page region (.xal-layout__page); the appbar sits outside it. */
.xal-nav-tabs-navlink--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Mobile: the underline bar becomes the same scrollable gold-chip nav as
   public Show Details (.sp-m2-chips), incl. the right-edge overflow scrim.
   767px matches the grid→card-list breakpoint in xal-tables.css. */
@media (max-width: 767px) {
    .xal-nav-tabs-navlink {
        background: rgba(6, 6, 6, .95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--xal-border-card);
        timeline-scope: --xal-nav-tabs-x;
    }

    .xal-nav-tabs-navlink__scroll {
        gap: 8px;
        padding: 10px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-timeline: --xal-nav-tabs-x x;
    }

        .xal-nav-tabs-navlink__scroll::-webkit-scrollbar {
            display: none;
        }

    /* Overflow cue: fades the right edge so cut-off tabs read as scrollable. */
    .xal-nav-tabs-navlink::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 1px;
        width: 48px;
        background: linear-gradient(to left, rgba(6, 6, 6, .95) 25%, transparent);
        pointer-events: none;
    }

    /* Where scroll-driven animations are supported, hide the cue at scroll end. */
    @supports (animation-timeline: scroll()) {
        .xal-nav-tabs-navlink::after {
            animation: xal-nav-tabs-scrim-fade linear both;
            animation-timeline: --xal-nav-tabs-x;
        }
    }

    .xal-nav-tab {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 44px;
        padding: 8px 16px;
        border: 1px solid var(--xal-border-card);
        border-radius: var(--xal-radius-pill);
        background: var(--xal-bg-surface);
        color: var(--xal-text-secondary);
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

        .xal-nav-tab:hover {
            background: var(--xal-bg-surface);
            color: var(--xal-text-secondary);
        }

        .xal-nav-tab.active,
        .xal-nav-tab[aria-current="page"] {
            background: var(--xal-gold);
            border-color: var(--xal-gold);
            color: #000;
        }

            .xal-nav-tab.active::after,
            .xal-nav-tab[aria-current="page"]::after {
                display: none;
            }
}

@keyframes xal-nav-tabs-scrim-fade {
    0%, 85% { opacity: 1; }
    100%    { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   OPTION C: Pill tabs — gold pill buttons in a rounded tray.
   Shared by public Show Details (TabNavigation) and the
   event-manager sub-navigation (e.g. Bouts).
   ══════════════════════════════════════════════════════════════ */

.xal-pill-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-pill);
    background: rgba(255, 255, 255, .035);
}

.xal-pill-tab {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--xal-radius-pill);
    background: transparent;
    color: var(--xal-text-secondary);
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

    .xal-pill-tab.active,
    .xal-pill-tab:hover {
        border-color: var(--xal-gold-border);
        background: rgba(212, 175, 55, .11);
        color: var(--xal-gold);
    }

    .xal-pill-tab:disabled {
        cursor: default;
    }

.xal-pill-tab__count {
    margin-left: 6px;
    color: inherit;
    opacity: .82;
}

@media (max-width: 899.98px) {
    .xal-pill-tabs {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: var(--xal-radius-xl);
    }

    /* --row: stay on one line on phones (e.g. the 3 bout-type pills) */
    .xal-pill-tabs--row {
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 6px;
        border-radius: var(--xal-radius-pill);
    }

        .xal-pill-tabs--row .xal-pill-tab {
            min-height: 40px;
            padding: 0 4px;
            font-size: var(--xal-font-base);
        }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .xal-nav-tabs .mud-tab {
        min-width: 80px;
        padding: 0 12px;
        font-size: 11px;
    }

    .xal-nav-tab {
        min-width: 80px;
        padding: 0 12px;
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════════════════
   BLOCKING BUSY OVERLAY
   Full-screen indeterminate gate for server operations that must
   not be interrupted or re-entered (e.g. running the tournament
   draw). State-driven: the page renders it while its busy flag is
   set. Above MudBlazor dialogs (~1400), below help (1450).
   ══════════════════════════════════════════════════════════════ */

.xal-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 1440;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
}

.xal-busy-overlay__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 380px;
    padding: 28px 24px;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    background: var(--xal-bg-card);
    text-align: center;
}

.xal-busy-overlay__title {
    font-weight: 700;
    font-size: 1.05rem;
}

.xal-busy-overlay__body {
    margin: 0;
    font-size: var(--xal-font-md);
    color: var(--xal-text-muted);
}