/*
 * ============================================================
 *  XALLENGER — Live Scoring module
 *  File: wwwroot/css/xal-live-scoring.css
 *
 *  Styles for the live-scoring surfaces outside the Event
 *  Manager chrome (ringside consoles, public board) plus the
 *  EM setup tab's QR/poster pieces. Everything derives from
 *  xal-tokens.css; layout primitives come from xal-base.css.
 * ============================================================ */

/* ============================================================
   EM SETUP TAB — provisioning QR + printable viewer posters
   ============================================================ */

.xal-lv-qr {
    width:         84px;
    padding:       6px;
    background:    #fff; /* QR needs light quiet zone to scan reliably on the dark theme */
    border-radius: var(--xal-radius-sm);
    line-height:   0;
}

.xal-lv-poster {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              8px;
    padding:          32px 24px;
    text-align:       center;
    border:           1px dashed var(--xal-border-strong);
    border-radius:    var(--xal-radius-lg);
    page-break-after: always;
}

.xal-lv-poster__title {
    color:       var(--xal-text-primary);
    font-size:   28px;
    font-weight: 800;
}

.xal-lv-poster__sub {
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-lg);
}

.xal-lv-poster__qr {
    width:         260px;
    max-width:     100%;
    padding:       12px;
    background:    #fff;
    border-radius: var(--xal-radius-md);
    line-height:   0;
    margin-top:    8px;
}

.xal-lv-poster__url {
    color:      var(--xal-text-muted);
    font-size:  var(--xal-font-md);
    word-break: break-all;
}

/* Posters print on white paper — dark-theme text would vanish. */
@media print {
    .xal-lv-poster { border: none; }
    .xal-lv-poster__title { color: #000; }
    .xal-lv-poster__sub,
    .xal-lv-poster__url { color: #333; }
}

/* ============================================================
   RINGSIDE CONSOLES — supervisor, judge tablet, provisioning
   Standalone /live routes used at the ring. Deliberately no EM
   chrome: the supervisor is an official (often not the
   organizer) and the judge tablet has no user login at all.
   Same family look via the kicker/title grammar + tokens.
   ============================================================ */

.xal-lv-head {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.xal-lv-head__row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.xal-lv-hint {
    margin:      0;
    color:       var(--xal-text-secondary);
    font-size:   var(--xal-font-md);
    line-height: 1.5;
}

/* ── Card: the ringside surface (replaces bare MudPaper) ── */
.xal-lv-card {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding:        14px 16px;
    background:     var(--xal-bg-card);
    border:         1px solid var(--xal-border-card);
    border-radius:  var(--xal-radius-lg);
}
.xal-lv-card__title {
    margin:         0;
    color:          var(--xal-gold);
    font-size:      var(--xal-font-md);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Sub-section label (deductions, premature ending) ── */
.xal-lv-sub {
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
}

/* ── Corner-colored boxer names ── */
.xal-lv-name { font-weight: 700; }
.xal-lv-name--red  { color: var(--xal-red-bright); }
.xal-lv-name--blue { color: var(--xal-blue-bright); }
.xal-lv-vs {
    color:          var(--xal-text-muted);
    font-size:      var(--xal-font-sm);
    font-weight:    800;
    text-transform: uppercase;
}

/* ── LIVE pill (viewer landing + boards) ── */
.xal-lv-live {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        4px 10px;
    border-radius:  var(--xal-radius-pill);
    background:     var(--xal-red-dim);
    border:         1px solid var(--xal-red-border);
    color:          var(--xal-red-bright);
    font-size:      var(--xal-font-xs);
    font-weight:    900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.xal-lv-live::before {
    content:       "";
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--xal-red-bright);
    animation:     xal-lv-pulse 1.6s ease-in-out infinite;
}
@keyframes xal-lv-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .xal-lv-live::before { animation: none; }
}

/* ── Supervisor: ordered bout rows ── */
.xal-lv-bout {
    display:       flex;
    align-items:   center;
    gap:           10px 12px;
    padding:       10px 12px;
    border:        1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
    flex-wrap:     wrap;
}
.xal-lv-bout--active {
    border-color: var(--xal-gold-border);
    background:   var(--xal-bg-selected);
}
.xal-lv-bout__ord {
    min-width:  26px;
    text-align: center;
    font-weight: 800;
    font-size:  var(--xal-font-md);
    color:      var(--xal-text-secondary);
}
.xal-lv-bout__names {
    flex:        1 1 200px;
    min-width:   0;
    display:     flex;
    align-items: baseline;
    gap:         8px;
    flex-wrap:   wrap;
}
.xal-lv-bout__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* ── Score-entry grid (supervisor keys the paper cards) ── */
.xal-lv-grid-wrap { overflow-x: auto; }
.xal-lv-grid {
    border-collapse: collapse;
    width:           100%;
}
.xal-lv-grid th {
    padding:        6px 8px;
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
    border-bottom:  1px solid var(--xal-border);
    text-align:     center;
    white-space:    nowrap;
}
.xal-lv-grid td {
    padding:       8px;
    border-bottom: 1px solid var(--xal-border);
    text-align:    center;
}
.xal-lv-grid th:first-child,
.xal-lv-grid td:first-child { text-align: left; }
.xal-lv-grid tr:last-child td { border-bottom: none; }
.xal-lv-grid__judge {
    font-weight: 700;
    font-size:   var(--xal-font-md);
    color:       var(--xal-text-primary);
    white-space: nowrap;
}
.xal-lv-pair {
    display:         flex;
    gap:             6px;
    justify-content: center;
}
.xal-lv-pair .mud-input-control {
    width:  72px;
    margin: 0 !important;
}

/* ── Corner-tinted score inputs ── */
.xal-lv-score--red  .mud-input-outlined { background: var(--xal-corner-red-bg) !important; }
.xal-lv-score--red  .mud-input-outlined fieldset { border-color: var(--xal-corner-red-glow) !important; }
.xal-lv-score--blue .mud-input-outlined { background: var(--xal-corner-blue-bg) !important; }
.xal-lv-score--blue .mud-input-outlined fieldset { border-color: var(--xal-corner-blue-glow) !important; }
.xal-lv-score--red  .mud-input-outlined input.mud-input-slot,
.xal-lv-score--blue .mud-input-outlined input.mud-input-slot {
    text-align:  center;
    font-weight: 700;
    font-size:   var(--xal-font-lg) !important;
}

/* Judge tablet: venue-lighting size (one round on screen at a time) */
.xal-lv-score--lg .mud-input-outlined { min-height: 60px !important; }
.xal-lv-score--lg .mud-input-outlined input.mud-input-slot {
    font-size: 24px !important;
    padding:   14px !important;
}

/* ============================================================
   PUBLIC BOARD — the open-scoring broadcast board (D19)
   Mobile-first: the 5-judge board must fit ~380px.
   ============================================================ */

.xal-lv-versus {
    display:         flex;
    align-items:     baseline;
    justify-content: center;
    gap:             8px;
    flex-wrap:       wrap;
    text-align:      center;
    font-size:       var(--xal-font-lg);
}

.xal-lv-board-wrap { overflow-x: auto; }
.xal-lv-board {
    border-collapse: collapse;
    width:           100%;
    min-width:       320px;
}
.xal-lv-board th {
    padding:        7px 8px;
    font-size:      var(--xal-font-xs);
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--xal-text-muted);
    border-bottom:  1px solid var(--xal-border-strong);
    text-align:     center;
    white-space:    nowrap;
}
.xal-lv-board td {
    padding:       9px 8px;
    border-bottom: 1px solid var(--xal-border);
    text-align:    center;
    white-space:   nowrap;
    font-variant-numeric: tabular-nums;
}
.xal-lv-board th:first-child,
.xal-lv-board td:first-child {
    text-align: left;
    white-space: normal;
}
.xal-lv-board tr:last-child td { border-bottom: none; }
.xal-lv-board__label {
    font-weight: 700;
    font-size:   var(--xal-font-md);
    color:       var(--xal-text-primary);
}
.xal-lv-board__red  { color: var(--xal-red-bright); font-weight: 600; }
.xal-lv-board__blue { color: var(--xal-blue-bright); font-weight: 600; }
.xal-lv-board__dash { color: var(--xal-text-muted); }
.xal-lv-board__total {
    font-weight: 800;
    font-size:   var(--xal-font-lg);
    background:  var(--xal-bg-secondary);
}
.xal-lv-board__deductions {
    color:     var(--xal-text-secondary);
    font-size: var(--xal-font-md);
}

/* ── Landing: ring picker link cards ── */
.xal-lv-ring-link {
    color:           var(--xal-text-primary);
    text-decoration: none;
    transition:      var(--xal-transition-fast);
}
.xal-lv-ring-link:hover {
    color:        var(--xal-text-primary);
    border-color: var(--xal-gold-border);
    background:   var(--xal-bg-selected);
}
.xal-lv-ring-link__name {
    font-size:   var(--xal-font-lg);
    font-weight: 800;
}