/* web/public/assets/css/live-doc.css — DEV-146 ถ่ายทอดสดหวย "ดึง auto": layout-only additions for the /live page (new-mgmt docs/front/LIVE/01-spec.md §7.2).
   The page keeps live.css (dark background, red navbar, white list card with the red border, .list-live rows); this file adds the state chip,
   the controls outside the player, the "นับถอยหลังออกผล" board card, the offline card, the switch buttons and today's rows — in the ORIGINAL
   colours only (bootstrap red / yellow / green / grey, #C0392B of live.css). Owner rules: text ≥ 17 px, taps ≥ 48 px, no animation but the
   slow LIVE dot (off under prefers-reduced-motion). Loaded with ?v=<deploy> (shared/legacyAssets.ts VERSIONED_CSS). */
.live-doc { font-size: 17px; }
.live-doc small, .live-doc .small { font-size: 17px; }
#navlive .nav-link, #navlive .bt-back { font-size: 17px; }
#navlive .navbar-brand { font-size: 20px; }
#navlive .navbar-brand:not(.bt-back) { min-height: 48px; display: inline-flex; align-items: center; }
#navlive .navbar-toggler { min-height: 48px; min-width: 48px; }
#navlive .bt-back { min-height: 48px; justify-content: center; }
#navlive .nav-link { min-height: 48px; display: flex; align-items: center; }

.live-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 8px 6px; }
.live-hero__name { font-size: 22px; margin: 0; }
.live-hero__times { width: 100%; margin: 0; color: #fff; font-size: 17px; min-height: 0; }
.live-hero__times:empty { display: none; }

.live-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 2px 12px; border-radius: 999px; font-size: 17px; font-weight: 700; color: #fff; background: #6c757d; line-height: 1.2; }
.live-badge--soon { background: #ffc107; color: #1d2124; }
.live-badge--live { background: #dc3545; }
.live-badge--resulted { background: #28a745; }
.live-badge--board { background: #007bff; }
.live-badge--idle { background: #6c757d; }
.live-badge--off { background: #495057; }
.live-badge__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: live-dot 2.4s ease-in-out infinite; }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-badge__dot { animation: none; } }

.live-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 8px 4px; }
.live-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 8px 18px; font-size: 17px; font-weight: 700; border-radius: 8px; text-decoration: none; line-height: 1.2; cursor: pointer; }
.live-btn:hover, .live-btn:focus { text-decoration: none; }
.live-btn--unmute { background: #dc3545; color: #fff; border: 0; }
.live-btn--unmute:hover, .live-btn--unmute:focus { background: #C0392B; color: #fff; }
.live-btn--bet { background: #ffc107; color: #1d2124; border: 0; width: 100%; margin: 8px 0; font-size: 20px; }
.live-btn--bet:hover, .live-btn--bet:focus { background: #e0a800; color: #1d2124; }
.live-btn--ghost { background: #fff; color: #1d2124; border: 1px solid #ccc; }
.live-btn--ghost:hover, .live-btn--ghost:focus { color: #C0392B; border-color: #C0392B; }
.live-source, .live-viewers, .live-stale { margin: 0; color: #fff; font-size: 17px; }
.live-source { width: 100%; }
.live-source:empty { display: none; }

.live-offline { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 8px; }
.live-offline__title { color: #ffc107; font-size: 22px; margin: 0; }

.live-board { background: #fff; border: 1px solid #dc3545; border-radius: 8px; padding: 14px 16px; margin: 8px; color: #1d2124; text-align: center; }
.live-board--hero { margin: 8px 0; }
.live-board__title { margin: 0; font-size: 17px; color: #6c757d; }
.live-board__name { margin: 2px 0 4px; font-size: 22px; color: #dc3545; }
.live-board__times, .live-board__caption, .live-board__note { margin: 2px 0; font-size: 17px; }
.live-board__caption--ok { color: #28a745; font-weight: 700; }
.live-count { font-size: 40px; font-weight: 700; letter-spacing: 1px; margin: 4px 0; color: #C0392B; font-variant-numeric: tabular-nums; line-height: 1.1; }
.live-count--over { color: #6c757d; }
.live-result { display: flex; justify-content: center; gap: 28px; margin: 6px 0; }
.live-result__pair { display: flex; flex-direction: column; align-items: center; }
.live-result__label { font-size: 17px; color: #6c757d; }
.live-result__num { font-size: 32px; font-weight: 700; color: #1d2124; letter-spacing: 2px; line-height: 1.2; }
.live-result__full { margin: 0; font-size: 17px; }
.live-boards { padding: 0 0 8px; }

.live-next__btn { display: block; width: 100%; min-height: 48px; background: #fff; border: 0; border-bottom: #eee 1px solid; color: #1d2124; text-align: left; padding: 0; font-size: 17px; cursor: pointer; }
.live-next__btn:hover, .live-next__btn:focus { color: #C0392B; outline: none; }
.live-next__btn.is-active { background: #fff5f5; }
.live-next__btn .list-live { padding: 8px 10px; min-height: 48px; }
.live-next__state { font-size: 17px; color: #dc3545; white-space: nowrap; font-weight: 700; }
.live-today { list-style: none; margin: 0; padding: 0; }
.live-today__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-bottom: #eee 1px solid; font-size: 17px; color: #1d2124; }
.live-today__row--done { color: #6c757d; }
.live-today__name { font-weight: 700; }
.live-today__status { text-align: right; color: #dc3545; font-weight: 700; }
.live-today__row--done .live-today__status, .live-today__row--scheduled .live-today__status { color: #6c757d; font-weight: 400; }
.live-today__time { color: #6c757d; }
.live-today__result { grid-column: 1 / -1; }
.live-today__result b { font-size: 20px; letter-spacing: 1px; }
.live-today__head, .live-empty { margin: 8px 10px 4px; font-size: 17px; color: #6c757d; }
#pills-huay { height: auto; min-height: 200px; }
#pills-tab01 .nav-link { font-size: 17px; min-height: 48px; display: flex; align-items: center; justify-content: center; }