/* ============================================================
   XALLENGER — Bout Approval screen styling
   ADDITIVE, production-ready. Backs BoutApprovals.razor.

   DESIGN NOTE (per request): this master/detail layout does NOT
   use the bottom-sheet pattern from xal-master-detail.css. On
   mobile the list collapses into a horizontal "queue strip" that
   stays above the detail — both remain inline, no overlay sheet.

   Tokens used: --xal-* from xal-tokens.css.
   ============================================================ */

/* ---- small shared helpers (only if not already in your base) ---- */
.xal-ml-auto { margin-left: auto; }
.xal-text-danger  { color: var(--xal-red-bright, #ff5252); font-weight: 800; }
.xal-text-success { color: var(--xal-success, #22c55e); font-weight: 800; }
.xal-list-reset { list-style: none; margin: 0; padding: 0; }
.xal-req { color: var(--xal-red-bright, #ff5252); }
.xal-field__helper-inline { color: var(--xal-text-muted); font-weight: 600; font-size: var(--xal-font-sm); margin-left: 4px; }
.xal-empty-state--lg { padding: 64px 24px; }

/* extra chip variants for triage */
.xal-chip--warn { color: var(--xal-amber, #f5b301); border-color: var(--xal-amber-border, rgba(245,179,1,.4)); background: rgba(245,179,1,.1); }
.xal-chip--ok   { color: var(--xal-success, #22c55e); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.xal-chip--select { cursor: pointer; }

/* ============================================================
   PAGE SHELL
   ============================================================ */
.xal-approval-page {
    width: min(1280px, calc(100% - 32px));
    margin-inline: auto;
    padding-block: 24px 64px;
}

.xal-approval-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--xal-border);
}

.xal-approval-head__eyebrow {
    color: var(--xal-gold);
    font-size: var(--xal-font-sm);
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.xal-approval-head__title {
    margin: 6px 0 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 950;
    letter-spacing: -.03em;
    text-transform: uppercase;
    line-height: 1;
}
.xal-approval-head__sub {
    margin: 8px 0 0;
    color: var(--xal-text-secondary);
    font-weight: 700;
}

/* ============================================================
   MASTER / DETAIL — desktop = two columns, no overlay sheet
   ============================================================ */
.xal-approval-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ---- MASTER: the review queue ---- */
.xal-approval-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 4px;
}
.xal-approval-list::-webkit-scrollbar { width: 6px; }
.xal-approval-list::-webkit-scrollbar-thumb { background: var(--xal-border-strong); border-radius: 3px; }

.xal-approval-list__item {
    appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--xal-border-card);
    border-left: 3px solid transparent;
    border-radius: var(--xal-radius-md);
    background: var(--xal-bg-surface);
    color: var(--xal-text-primary);
    transition: var(--xal-transition-fast);
}
.xal-approval-list__item:hover {
    border-color: var(--xal-border-strong);
    background: var(--xal-bg-hover);
}
.xal-approval-list__item.is-flagged { border-left-color: var(--xal-amber, #f5b301); }
.xal-approval-list__item.is-selected {
    border-color: var(--xal-gold-border);
    border-left-color: var(--xal-gold);
    background: linear-gradient(135deg, var(--xal-gold-muted), var(--xal-bg-surface) 70%);
    box-shadow: 0 0 0 1px var(--xal-gold-border) inset;
}

.xal-approval-list__top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.xal-approval-list__bout {
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--xal-font-sm);
    color: var(--xal-text-secondary);
}
.xal-approval-list__status {
    width: 9px; height: 9px; border-radius: 50%;
    margin-left: auto;
    background: var(--xal-border-strong);
}
.xal-approval-list__status.is-approved { background: var(--xal-success, #22c55e); }
.xal-approval-list__status.is-rejected { background: var(--xal-red-bright, #ff5252); }

.xal-approval-list__matchup {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: var(--xal-font-md);
}
.xal-approval-list__vs {
    color: var(--xal-text-muted);
    font-weight: 800;
    font-size: var(--xal-font-sm);
    text-transform: uppercase;
}
.xal-approval-list__warn { display: flex; }

/* ---- DETAIL: selected matchup ---- */
.xal-approval-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.xal-approval-detail__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.xal-approval-detail__warnings .xal-card__title { color: var(--xal-red-bright, #ff5252); }
.xal-approval-detail__warn-item {
    padding: 6px 0;
    border-top: 1px solid var(--xal-border);
    color: var(--xal-text-secondary);
    font-weight: 600;
}
.xal-approval-detail__warn-item:first-child { border-top: 0; }

/* ============================================================
   DECISION CONTROLS
   ============================================================ */
.xal-approval-decide {
    padding: 18px;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    background: var(--xal-bg-primary);
}

.xal-approval-decide__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.xal-decision {
    appearance: none;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 16px;
    border: 1.5px solid var(--xal-border-card);
    border-radius: var(--xal-radius-md);
    background: var(--xal-bg-surface);
    color: var(--xal-text-primary);
    transition: var(--xal-transition-fast);
}
.xal-decision:hover { border-color: var(--xal-border-strong); }

.xal-decision__check {
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--xal-border-strong);
    font-weight: 950;
    font-size: 18px;
    color: var(--xal-text-muted);
}
.xal-decision__label {
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--xal-font-lg);
}
.xal-decision__hint {
    color: var(--xal-text-muted);
    font-size: var(--xal-font-sm);
    font-weight: 600;
}

/* APPROVE active = green */
.xal-decision--approve.is-active {
    border-color: var(--xal-success, #22c55e);
    background: rgba(34,197,94,.1);
}
.xal-decision--approve.is-active .xal-decision__check {
    border-color: var(--xal-success, #22c55e);
    background: var(--xal-success, #22c55e);
    color: #04210f;
}

/* REJECT active = red */
.xal-decision--reject.is-active {
    border-color: var(--xal-red, #cc0000);
    background: rgba(204,0,0,.12);
}
.xal-decision--reject.is-active .xal-decision__check {
    border-color: var(--xal-red-bright, #ff5252);
    background: var(--xal-red, #cc0000);
    color: #fff;
}

.xal-approval-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   MOBILE — NO bottom sheet. List becomes a horizontal queue
   strip; detail stays inline directly beneath it.
   ============================================================ */
@media (max-width: 899.98px) {
    .xal-approval-shell {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .xal-approval-list {
        position: static;
        max-height: none;
        overflow: visible;

        /* horizontal scroller of compact cards */
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .xal-approval-list::-webkit-scrollbar { height: 6px; }

    .xal-approval-list__item {
        flex: 0 0 78%;
        max-width: 320px;
        scroll-snap-align: start;
    }

    .xal-approval-decide__choices { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .xal-approval-page { width: calc(100% - 24px); }
    .xal-approval-list__item { flex-basis: 86%; }
}