/* Live scoreboard in full screen (TV / projector, and the "manhinh" live-screen account).
   Club identity shared with the printed PDFs and public pages: navy band with the
   pink / blue / lime stripe, lime "NỘI DUNG" pill, lane chips, gold / silver / bronze discs,
   UTM-Avo type, sponsors on a white strip at the bottom. Loaded after styles.css; every rule is
   scoped to .sb-fullscreen so the admin's control view is unchanged. */

/* Pieces the admin's (non-fullscreen) scoreboard also shows */
.sb-athlete-name { font-weight: 700; }
.sb-nowrap { white-space: nowrap; }
.sb-ev-num { display: inline-block; background: #85C61E; color: #001A66; font-size: 0.72em; font-weight: 700; padding: 0.12em 0.5em; border-radius: 0.3em; margin-right: 0.5em; vertical-align: middle; }
.sb-rank-disc { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-weight: 700; color: #fff; background: rgba(148, 163, 184, 0.25); }
.sb-rank-disc.sb-m1 { background: #D4A017; }
.sb-rank-disc.sb-m2 { background: #9AA3B5; }
.sb-rank-disc.sb-m3 { background: #B87333; }

@font-face { font-family: 'UTM-Avo'; src: url('UTM-Avo.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'UTM-Avo'; src: url('UTM-AvoBold.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'UTM-Avo'; src: url('UTM-AvoItalic.ttf'); font-weight: 400; font-style: italic; font-display: swap; }

html body .sb-fullscreen {
    --tv-navy: #002CA6;
    --tv-deep: #001A66;
    --tv-blue: #018CF0;
    --tv-lime: #85C61E;
    --tv-pink: #E90763;
    --tv-gold: #D4A017;
    --tv-silver: #9AA3B5;
    --tv-bronze: #B87333;
    --tv-sponsor-h: clamp(52px, 9vh, 104px);
    --tv-stripe: linear-gradient(90deg, var(--tv-pink) 0 33.33%, var(--tv-blue) 33.33% 66.66%, var(--tv-lime) 66.66% 100%);
    background: radial-gradient(120% 90% at 85% 0%, #00318f 0%, var(--tv-deep) 45%, #000b2e 100%) !important;
    color: #fff;
    font-family: 'UTM-Avo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    padding: clamp(8px, 1.4vh, 20px) clamp(10px, 1.6vw, 32px) calc(var(--tv-sponsor-h) + clamp(8px, 1.2vh, 16px)) !important;
}

/* ---------- Top band: logo + meet name, club stripe underneath ---------- */
html body .sb-fullscreen .scoreboard-header {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 clamp(6px, 1vh, 12px) !important;
    margin: 0 0 clamp(8px, 1.4vh, 16px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}
html body .sb-fullscreen .scoreboard-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(3px, 0.5vh, 6px);
    background: var(--tv-stripe);
    border-radius: 3px;
}
html body .sb-fullscreen .sb-header-brand-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: clamp(10px, 1.4vw, 24px) !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important; /* styles.css caps the card at 65% for the admin header */
}
html body .sb-fullscreen .sb-tournament-logo {
    height: clamp(40px, 8vh, 96px) !important;
    width: auto !important;
    max-width: 22vw !important;
    object-fit: contain !important;
    background: #fff;
    border-radius: 12px;
    padding: 4px 8px;
}
html body .sb-fullscreen .scoreboard-header h2,
html body .sb-fullscreen .sb-tournament-title {
    color: #fff !important;
    font-size: clamp(1.1rem, 3.1vw, 3.4rem); /* no !important: fitSbTournamentName() shrinks it inline to fit */
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Fullscreen toggle: small and out of the way */
html body .sb-fullscreen .btn-fullscreen {
    position: fixed !important;
    top: 8px !important; right: 8px !important;
    opacity: 0.25;
    transform: scale(0.8);
}
html body .sb-fullscreen .btn-fullscreen:hover { opacity: 1; }

/* ---------- Sponsors: white strip across the bottom, like the PDF footer ---------- */
html body .sb-fullscreen .sb-header-sponsors-card {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: var(--tv-sponsor-h) !important;
    margin: 0 !important;
    padding: clamp(6px, 1vh, 12px) clamp(16px, 4vw, 80px) !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: clamp(12px, 3vw, 64px) !important;
    z-index: 5 !important;
}
html body .sb-fullscreen .sb-header-sponsors-card::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--tv-stripe);
}
html body .sb-fullscreen .sb-header-sponsors-card .sb-sponsor-logo,
html body .sb-fullscreen .sb-header-sponsors-card[class*="sb-sponsors-"] .sb-sponsor-logo {
    height: calc(var(--tv-sponsor-h) * 0.72) !important;
    max-height: none !important;
    width: auto !important;
    max-width: 16vw !important;
    object-fit: contain !important;
    flex: 0 1 auto !important;
}
html body .sb-fullscreen .sb-header-spacer { display: none !important; }

/* ---------- Event bar ---------- */
html body .sb-fullscreen .sb-event-header {
    background: linear-gradient(90deg, var(--tv-navy), #0038c7) !important;
    border: none !important;
    border-left: clamp(5px, 0.5vw, 10px) solid var(--tv-lime) !important;
    border-radius: 14px !important;
    padding: clamp(8px, 1.4vh, 18px) clamp(12px, 1.6vw, 28px) !important;
    margin: 0 0 clamp(8px, 1.4vh, 16px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
html body .sb-fullscreen .sb-event-header-left { min-width: 0; }
html body .sb-fullscreen .sb-event-title {
    font-size: clamp(1rem, 2.3vw, 2.6rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.4em 0.6em !important;
}
html body .sb-fullscreen .sb-ev-num {
    display: inline-block;
    background: var(--tv-lime);
    color: var(--tv-deep);
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.25em 0.7em;
    border-radius: 0.4em;
    white-space: nowrap;
}
html body .sb-fullscreen .sb-event-title-en {
    font-size: clamp(0.75rem, 1.35vw, 1.5rem) !important;
    font-style: italic;
    color: #aabef0 !important;
    letter-spacing: 0.5px !important;
    margin-top: 0.25em !important;
}
html body .sb-fullscreen .sb-event-sub { margin-top: 0.45em; }
html body .sb-fullscreen .sb-heat-tag {
    font-size: clamp(0.7rem, 1.05vw, 1.15rem) !important;
    font-weight: 700 !important;
    padding: 0.2em 0.8em !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    letter-spacing: 0.5px !important;
}
html body .sb-fullscreen .sb-heat-tag-final {
    background: var(--tv-lime) !important;
    color: var(--tv-deep) !important;
    border-color: var(--tv-lime) !important;
}
/* Race clock / best time: big digital panel */
html body .sb-fullscreen .sb-header-clock,
html body .sb-fullscreen .sb-event-best-time {
    display: inline-block;
    font-family: 'SF Mono', 'Roboto Mono', 'Consolas', monospace !important;
    font-size: clamp(1.6rem, 4.4vw, 5rem) !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 0.08em 0.35em !important;
    border-radius: 12px !important;
    background: rgba(0, 10, 40, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    text-shadow: none !important;
    white-space: nowrap;
}
html body .sb-fullscreen .sb-header-clock.finished,
html body .sb-fullscreen .sb-event-best-time { color: var(--tv-lime) !important; }

/* ---------- Lanes: one row each, rows share the height ---------- */
html body .sb-fullscreen .scoreboard-board {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body .sb-fullscreen .sb-table tbody {
    justify-content: flex-start !important;
    gap: clamp(4px, 0.7vh, 10px) !important;
}
html body .sb-fullscreen .sb-table tbody tr {
    display: grid !important;
    grid-template-columns: 7% 9% minmax(0, 1fr) 17% 8%;
    align-items: center !important;
    flex: 1 1 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 clamp(6px, 1vw, 18px) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
}
html body .sb-fullscreen .sb-table tbody tr::before { display: none !important; }
html body .sb-fullscreen .sb-table tbody tr.sb-empty {
    flex: 0.55 1 0 !important;
    opacity: 0.3 !important;
    background: rgba(255, 255, 255, 0.025) !important;
}
html body .sb-fullscreen .sb-table tbody tr.sb-winner-row {
    background: linear-gradient(90deg, rgba(212, 160, 23, 0.32), rgba(212, 160, 23, 0.08) 60%, rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(212, 160, 23, 0.55) !important;
}
html body .sb-fullscreen .sb-table td {
    padding: 0 clamp(4px, 0.6vw, 12px) !important;
    font-size: clamp(1rem, 2.4vw, 2.8rem) !important;
    font-weight: 600 !important;
    color: #fff !important;
    border: none !important;
    background: transparent !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Lane chip */
html body .sb-fullscreen .sb-table td.sb-lane {
    text-align: center !important;
    width: auto !important;
}
html body .sb-fullscreen .sb-table td.sb-lane::after { display: none !important; }
html body .sb-fullscreen .sb-table td.sb-lane {
    font-size: 0 !important; /* number drawn by the chip below */
}
html body .sb-fullscreen .sb-table td.sb-lane::before {
    content: attr(data-lane);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.5em;
    border-radius: 0.3em;
    background: var(--tv-navy);
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: clamp(1rem, 2.3vw, 2.6rem);
    font-weight: 700;
}
/* Club: logo or coloured code */
html body .sb-fullscreen .sb-table td.sb-club-flag {
    text-align: left !important;
    display: flex !important;
    align-items: center;
    gap: 0.35em;
    width: auto !important;
}
html body .sb-fullscreen .sb-club-code {
    font-size: clamp(0.8rem, 1.5vw, 1.7rem) !important;
    color: #c8d4f5 !important;
    font-weight: 700 !important;
}
html body .sb-fullscreen .sb-club-badge {
    font-size: clamp(0.75rem, 1.4vw, 1.6rem) !important;
    padding: 0.2em 0.55em !important;
    border-radius: 0.35em !important;
    max-width: none !important;
    font-weight: 700 !important;
}
html body .sb-fullscreen .sb-club-logo {
    width: clamp(26px, 4.2vh, 56px) !important;
    height: clamp(26px, 4.2vh, 56px) !important;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
}
/* Name */
html body .sb-fullscreen .sb-table td.sb-name {
    text-align: left !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
}
html body .sb-fullscreen .sb-surname,
html body .sb-fullscreen .sb-athlete-name { font-weight: 700 !important; font-size: inherit !important; letter-spacing: 0.5px; }
html body .sb-fullscreen .sb-relay-members {
    display: block;
    font-size: 0.45em !important;
    opacity: 0.75 !important;
    margin-top: 0.15em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Time */
html body .sb-fullscreen .sb-table td.sb-result {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    display: flex !important;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5em;
}
html body .sb-fullscreen .sb-time { font-weight: 700 !important; color: #fff !important; font-size: 1.05em !important; }
html body .sb-fullscreen .sb-time.sb-split { color: #fbbf24 !important; }
html body .sb-fullscreen .sb-split-dist { color: #fbbf24 !important; font-size: 0.6em !important; margin-left: 6px; }
html body .sb-fullscreen .sb-waiting { color: rgba(255, 255, 255, 0.3) !important; }
html body .sb-fullscreen .sb-dq { color: var(--tv-pink) !important; font-weight: 700 !important; }
html body .sb-fullscreen .sb-dnf { color: #aab3c8 !important; font-weight: 700 !important; }
html body .sb-fullscreen .sb-delta {
    display: inline-block;
    font-size: 0.45em !important;
    color: #aabef0 !important;
    font-weight: 400 !important;
}
/* Rank disc */
html body .sb-fullscreen .sb-table tbody tr td.sb-rank { text-align: center !important; width: auto !important; overflow: visible !important; }
html body .sb-fullscreen .sb-rank-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1em;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
html body .sb-fullscreen .sb-rank-disc.sb-m1 { background: var(--tv-gold); box-shadow: 0 0 18px rgba(212, 160, 23, 0.6); }
html body .sb-fullscreen .sb-rank-disc.sb-m2 { background: var(--tv-silver); }
html body .sb-fullscreen .sb-rank-disc.sb-m3 { background: var(--tv-bronze); }
html body .sb-fullscreen .sb-rank-none { color: rgba(255, 255, 255, 0.35); }

/* ---------- Event summary (top 4): same bar and rows as the heat screen ---------- */
html body .sb-fullscreen .sb-summary-board tbody tr {
    grid-template-columns: 8% 11% minmax(0, 1fr) 22%;
    flex: 0 0 auto !important;
    height: clamp(64px, 13vh, 150px) !important;
}
html body .sb-fullscreen .sb-summary-board tbody tr.sb-silver-row {
    background: linear-gradient(90deg, rgba(154, 163, 181, 0.28), rgba(154, 163, 181, 0.06) 60%, rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(154, 163, 181, 0.45) !important;
}
html body .sb-fullscreen .sb-summary-board tbody tr.sb-bronze-row {
    background: linear-gradient(90deg, rgba(184, 115, 51, 0.28), rgba(184, 115, 51, 0.06) 60%, rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(184, 115, 51, 0.45) !important;
}
html body .sb-fullscreen .sb-summary-board td { font-size: clamp(1rem, 2.8vw, 3.2rem) !important; }
html body .sb-fullscreen .sb-summary-viewer-empty {
    color: rgba(255, 255, 255, 0.5); text-align: center; font-size: clamp(1rem, 2vw, 2rem); padding: 10vh 0;
}

/* ---------- Back button of the live-screen account: small, top right ---------- */
body.viewer-mode .viewer-back-btn {
    top: 8px !important;
    left: auto !important;
    right: 8px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    opacity: 0.35;
    background: rgba(0, 10, 40, 0.5) !important;
    color: #fff !important;
}
body.viewer-mode .viewer-back-btn:hover, body.viewer-mode .viewer-back-btn:focus { opacity: 1; }

/* ---------- Phones (portrait) ---------- */
@media (max-width: 768px) {
    html body .sb-fullscreen {
        --tv-sponsor-h: 48px;
        padding: 8px 8px calc(var(--tv-sponsor-h) + 8px) !important;
    }
    html body .sb-fullscreen .scoreboard-header { padding-right: 70px !important; }
    html body .sb-fullscreen .sb-tournament-logo { height: 40px !important; padding: 2px 5px; border-radius: 8px; }
    html body.viewer-mode .sb-fullscreen .scoreboard-header h2,
    html body .sb-fullscreen .scoreboard-header h2,
    html body .sb-fullscreen .sb-tournament-title {
        font-size: 0.95rem !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 0 !important;
    }
    html body .sb-fullscreen .sb-sponsor-logo { max-width: 22vw !important; }
    html body .sb-fullscreen .sb-event-header { padding: 8px 10px !important; border-radius: 10px !important; flex-wrap: wrap !important; gap: 6px !important; }
    html body .sb-fullscreen .sb-event-title { font-size: 0.95rem !important; }
    html body .sb-fullscreen .sb-event-title-en { font-size: 0.72rem !important; }
    html body .sb-fullscreen .sb-heat-tag { font-size: 0.62rem !important; }
    html body .sb-fullscreen .sb-header-clock,
    html body .sb-fullscreen .sb-event-best-time { font-size: 1.5rem !important; border-radius: 8px !important; }
    html body .sb-fullscreen .sb-table tbody { gap: 5px !important; }
    html body .sb-fullscreen .sb-table tbody tr {
        grid-template-columns: 40px 52px minmax(0, 1fr) auto 36px;
        flex: 0 0 auto !important;
        height: clamp(48px, 8.2vh, 64px) !important;
        padding: 0 6px !important;
        border-radius: 10px !important;
    }
    html body .sb-fullscreen .sb-table tbody tr.sb-empty { height: 34px !important; }
    html body .sb-fullscreen .sb-summary-board tbody tr { grid-template-columns: 44px 52px minmax(0, 1fr) auto; height: 64px !important; }
    html body .sb-fullscreen .sb-summary-board td { font-size: 1.05rem !important; }
    html body .sb-fullscreen .sb-table td { font-size: 0.95rem !important; padding: 0 3px !important; }
    /* Long names (4-5 words in capitals) wrap to a second line instead of being cut */
    html body .sb-fullscreen .sb-table td.sb-name {
        font-size: 0.88rem !important;
        white-space: normal !important;
        line-height: 1.32 !important;
        padding-top: 2px !important; padding-bottom: 2px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    html body .sb-fullscreen .sb-athlete-name { letter-spacing: 0.2px; }
    html body .sb-fullscreen .sb-table td.sb-lane::before { font-size: 0.95rem; }
    html body .sb-fullscreen .sb-club-code { font-size: 0.7rem !important; }
    html body .sb-fullscreen .sb-club-badge { font-size: 0.68rem !important; padding: 2px 5px !important; }
    html body .sb-fullscreen .sb-club-logo { width: 26px !important; height: 26px !important; }
    html body .sb-fullscreen .sb-time, html body .sb-fullscreen .sb-result { font-size: 1rem !important; }
    html body .sb-fullscreen .sb-rank-disc { width: 1.7em; height: 1.7em; font-size: 0.85rem; }
    html body .sb-fullscreen .sb-table tbody tr td.sb-rank { width: auto !important; }
}