/**
 * Tema GriiipLive — baseado em :root do build em
 * site-source-downloader/.../live.audacetech.com.br/2026-04-05T14-57-11-877Z/index.html
 * Usar com body.theme-v5.theme-griiip (TV / teste).
 *
 * Cores “da página” no sentido amplo:
 * - Fundo animado (blobs + base): public/js/velocidade-bg-canvas.js (theme-griiip)
 * - Tokens de UI (painéis, bordas, tabelas herdadas): variáveis abaixo em body.theme-griiip.theme-v5
 * - body fica transparent (velocidade-ui-v5.css) para o canvas aparecer por baixo do .app
 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,600;0,700;1,400&display=swap");

body.theme-griiip.theme-v5 {
    --font-family-main: "Titillium Web", system-ui, sans-serif;
    --accent-color: #38bdf8;
    --button-primary-bg: #1d4ed8;
    --personal-best: #01f886;
    --best-overall: #cb00ff;
    --position-loss: #e90000;
    --position-gain: #01f886;
    /* Neutros levemente azulados (menos “quente” que #1b1821 / #232029) */
    --bg-main: #0f172a;
    --bg-body: #111827;
    --bg-components-dark: #131c2b;
    --bg-components-light: #1b2940;
    --bg-components: #22324c;
    --row-border-color: #334155;
    --text-color-primary: #dadadc;
    --text-color-secondary: #b0afb5;
    --rank-table-odd-row-bg: #0f1624;
    --rank-table-even-row-bg: #131b2b;
    --griiip-header-bg: #252333;
    --griiip-ticker-bg: linear-gradient(180deg, #1b263a 0%, #121a29 100%);
    /* Anúncios (ticker): alto contraste sobre o fundo escuro */
    --griiip-ticker-text: #facc15;
}

/* Fundo da página alinhado ao app de referência */
body.theme-griiip.theme-v5 {
    font-family: var(--font-family-main);
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Lista completa visível: scroll na página, não dentro da tabela de corrida */
body.theme-griiip.theme-v5 .app {
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto auto auto auto auto !important;
}

/* Painéis: superfície sólida (sem vidro roxo v5) */
body.theme-griiip.theme-v5 .topbar,
body.theme-griiip.theme-v5 .record-strip,
body.theme-griiip.theme-v5 .sim-panel,
body.theme-griiip.theme-v5 .table-wrap {
    background: var(--bg-components-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--row-border-color) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.theme-griiip.theme-v5 .topbar:hover,
body.theme-griiip.theme-v5 .record-strip:hover {
    border-color: var(--row-border-color) !important;
}

/* Linha principal do cabeçalho: metadados da sessão (XML) — destaque em relação à linha de versão */
body.theme-griiip.theme-v5 .header-meta {
    font-family: var(--font-family-main);
    font-weight: 700;
    font-size: clamp(0.78rem, 1.25vw, 1.05rem);
    color: #f8fafc !important;
    letter-spacing: 0.025em;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

body.theme-griiip.theme-v5 .version-line {
    color: var(--text-color-secondary);
    font-size: 0.68rem;
}

body.theme-griiip.theme-v5 .clock {
    color: var(--text-color-primary);
    font-family: var(--v5-mono);
}

/* Faixa tipo ticker / avisos (referência: barra por baixo do cabeçalho) */
body.theme-griiip.theme-v5 .griiip-ticker {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    background: var(--griiip-ticker-bg);
    border: 1px solid var(--row-border-color);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--griiip-ticker-text);
    letter-spacing: 0.04em;
}

body.theme-griiip.theme-v5 .griiip-ticker .griiip-ticker-seg {
    color: var(--griiip-ticker-text);
}

body.theme-griiip.theme-v5 .griiip-ticker[hidden] {
    display: none !important;
}

body.theme-griiip.theme-v5 .griiip-ticker-track {
    display: inline-flex;
    gap: 4rem;
    white-space: nowrap;
    animation: griiip-ticker-marquee 32s linear infinite;
}

@keyframes griiip-ticker-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-griiip.theme-v5 .griiip-ticker-track {
        animation: none;
    }
}

body.theme-griiip.theme-v5 .griiip-foot {
    margin: 0;
    text-align: center;
    font-size: 0.62rem;
    color: var(--text-color-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 8px 2px;
    opacity: 0.85;
}

/* Bandeira de pista: coluna Fl. + cabeçalho (não barra lateral em ::before) */
body.theme-griiip.theme-v5 .table-wrap--race {
    position: relative;
    padding-left: 0;
    overflow: visible;
    max-height: none;
}

body.theme-griiip.theme-v5 .table-wrap:not(.table-wrap--race) {
    overflow: auto;
}

/* Página de teste: deixar de forçar altura da grelha (evita cortar linhas) */
body.theme-griiip.theme-v5 .grid-main {
    overflow: visible !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
}

body.theme-griiip.theme-v5 .table-wrap.compact.table-wrap--race {
    padding-left: 0;
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    height: auto !important;
}

body.theme-griiip.theme-v5 .table-wrap--race > table {
    position: static !important;
    height: auto !important;
}

body.theme-griiip.theme-v5 .table-wrap--race tbody tr {
    height: auto !important;
}

body.theme-griiip.theme-v5 .table-wrap--service {
    max-height: none !important;
    overflow: visible !important;
}

body.theme-griiip.theme-v5 thead {
    background: var(--griiip-header-bg) !important;
    border-bottom: 1px solid var(--row-border-color);
}

body.theme-griiip.theme-v5 thead th {
    font-family: var(--font-family-main) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-color-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em !important;
    padding: 5px 6px !important;
    border-bottom-color: var(--row-border-color) !important;
}

body.theme-griiip.theme-v5 th,
body.theme-griiip.theme-v5 td {
    border-bottom: 1px solid var(--row-border-color) !important;
}

body.theme-griiip.theme-v5 tbody tr:nth-child(odd) {
    background: var(--rank-table-odd-row-bg) !important;
}

body.theme-griiip.theme-v5 tbody tr:nth-child(even) {
    background: var(--rank-table-even-row-bg) !important;
}

body.theme-griiip.theme-v5 tbody tr:hover {
    background: rgba(245, 0, 70, 0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(203, 0, 255, 0.12);
}

body.theme-griiip.theme-v5 tbody tr.record-holder {
    background: linear-gradient(
        90deg,
        rgba(203, 0, 255, 0.12) 0%,
        rgba(42, 39, 48, 0.98) 38%
    ) !important;
    box-shadow: inset 4px 0 0 var(--accent-color);
}

body.theme-griiip.theme-v5 tbody tr.record-holder td.speed-max-record {
    color: var(--best-overall);
    text-shadow: 0 0 14px rgba(203, 0, 255, 0.35);
}

/* Coluna P — destaque branco como referência */
body.theme-griiip.theme-v5 .cell-pos {
    font-family: var(--font-family-main) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}

body.theme-griiip.theme-v5 .cell-pilot,
body.theme-griiip.theme-v5 .col-name {
    font-family: var(--font-family-main) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    color: var(--text-color-primary) !important;
}

body.theme-griiip.theme-v5 .record-strip-pilot {
    text-transform: uppercase !important;
}

body.theme-griiip.theme-v5 .cell-num {
    font-family: var(--font-family-main) !important;
    font-weight: 700 !important;
    color: #fff !important;
}

body.theme-griiip.theme-v5 .speed-now,
body.theme-griiip.theme-v5 .cell-kph-em {
    color: #f5f3ff;
}

body.theme-griiip.theme-v5 .speed-max:not(.speed-max-record) {
    color: var(--text-color-primary);
}

body.theme-griiip.theme-v5 .pos-p1 {
    color: #fcda4c !important;
    text-shadow: 0 0 10px rgba(252, 218, 76, 0.3);
}

body.theme-griiip.theme-v5 .pos-top3 {
    color: #c7c5d0 !important;
}

body.theme-griiip.theme-v5 .record-strip {
    border-left: 3px solid var(--accent-color);
    background: var(--bg-components-dark) !important;
}

body.theme-griiip.theme-v5 .record-strip-label {
    color: var(--text-color-secondary);
}

body.theme-griiip.theme-v5 .record-strip-value {
    color: #7dd3fc;
    text-shadow: none;
}

body.theme-griiip.theme-v5 .record-strip-pilot {
    color: var(--text-color-primary);
}

body.theme-griiip.theme-v5 .metric-chip {
    background: var(--bg-main);
    border-color: var(--row-border-color);
}

body.theme-griiip.theme-v5 .metric-chip .mv {
    color: var(--accent-color);
}

body.theme-griiip.theme-v5 .btn-validation {
    border-color: #1d4ed8 !important;
    background: #1e3a8a !important;
    color: #dbeafe !important;
}

body.theme-griiip.theme-v5 .pit-excess {
    color: #f14e68;
}

body.theme-griiip.theme-v5 .sim-panel {
    border-color: #5c3d24 !important;
    background: var(--bg-components-dark) !important;
}

body.theme-griiip.theme-v5 .btn-sim {
    font-family: var(--font-family-main);
}

body.theme-griiip.theme-v5 .btn-sim-on {
    background: linear-gradient(135deg, #4a0a22 0%, #d3003e 100%);
    border-color: var(--accent-color);
    color: #fff5f7;
}

body.theme-griiip.theme-v5 .env-pill--dev {
    border-color: var(--row-border-color);
}

body.theme-griiip.theme-v5 .grid-main .section-label {
    color: var(--text-color-secondary);
}

body.theme-griiip.theme-v5 .small {
    color: var(--text-color-secondary);
}

/**
 * Visão única (sem scroll na página): TV (theme-tv-single) e teste (theme-teste-single).
 */
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) {
    overflow: hidden !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 4px !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .app {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    gap: 4px !important;
}

body.theme-griiip.theme-v5.theme-tv-single .app {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
}

body.theme-griiip.theme-v5.theme-teste-single .app {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .topbar {
    padding: 4px 10px !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .version-line {
    font-size: 0.58rem !important;
    margin-top: 2px !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .header-meta {
    font-size: clamp(0.78rem, 1.35vw, 1.08rem) !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .clock {
    font-size: clamp(0.72rem, 1.35vw, 0.92rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .griiip-ticker {
    min-height: 20px !important;
    padding: 2px 8px !important;
    font-size: clamp(0.52rem, 0.95vw, 0.68rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .record-strip {
    padding: 3px 8px !important;
    gap: 4px 8px !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .record-strip-value {
    font-size: clamp(0.82rem, 2vw, 1.12rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .record-strip-label {
    font-size: 0.55rem !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .metric-chip .mk {
    font-size: 0.48rem !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .metric-chip .mv {
    font-size: clamp(0.62rem, 1.15vw, 0.76rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .griiip-foot {
    padding: 2px 4px !important;
    font-size: 0.52rem !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race {
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100%;
    --tv-thead-h: clamp(1.28rem, 3vh, 1.95rem);
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race > table {
    position: absolute !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race thead {
    position: static !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race thead th {
    height: var(--tv-thead-h) !important;
    padding: 1px 4px !important;
    font-size: clamp(0.48rem, 0.78vw, 0.68rem) !important;
    vertical-align: middle !important;
    line-height: 1.1 !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race tbody tr {
    height: calc((100% - var(--tv-thead-h)) / var(--race-rows, 34)) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race tbody td {
    padding: 0 4px !important;
    font-size: clamp(0.48rem, 0.88vw, 0.78rem) !important;
    line-height: 1.12 !important;
    vertical-align: middle !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .cell-flag,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .cell-pos,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-p,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-position {
    font-size: clamp(0.52rem, 0.95vw, 0.82rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .cell-pilot,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-name {
    font-size: clamp(0.48rem, 0.85vw, 0.76rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .speed-now,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .cell-kph-em,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-kph {
    font-size: clamp(0.5rem, 0.92vw, 0.82rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .speed-max,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .speed-max-record,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-max {
    font-size: clamp(0.48rem, 0.88vw, 0.78rem) !important;
}

body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single)
    .table-wrap--race
    tbody
    tr.record-holder
    td.speed-max-record {
    font-size: clamp(0.52rem, 0.95vw, 0.85rem) !important;
}

body.theme-griiip.theme-v5.theme-tv-single .table-wrap--race .empty {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(22, 20, 29, 0.94);
    border-radius: 8px;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    padding: 12px;
    text-align: center;
}

/* Teste: coluna P / exc / pit (classes col-*) */
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-num,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-exc,
body.theme-griiip.theme-v5:is(.theme-tv-single, .theme-teste-single) .table-wrap--race .col-pit {
    font-size: clamp(0.46rem, 0.82vw, 0.72rem) !important;
}

/* Teste: .grid-main flex entre corrida e serviço */
body.theme-griiip.theme-v5.theme-teste-single .grid-main {
    overflow: hidden !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap.compact.table-wrap--race {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
    align-self: stretch !important;
}

/* Serviço: altura ao conteúdo (poucas linhas) — evita “metade vazia” entre RESGATEs */
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    max-height: none !important;
    align-self: stretch !important;
    --tv-thead-h: clamp(1.28rem, 3vh, 1.95rem);
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service > table {
    position: static !important;
    width: 100% !important;
    height: auto !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service thead {
    position: static !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service thead th {
    height: var(--tv-thead-h) !important;
    padding: 1px 4px !important;
    font-size: clamp(0.48rem, 0.78vw, 0.68rem) !important;
    vertical-align: middle !important;
    line-height: 1.1 !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service tbody tr {
    height: auto !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service tbody td {
    padding: 0 4px !important;
    font-size: clamp(0.48rem, 0.88vw, 0.78rem) !important;
    line-height: 1.12 !important;
    vertical-align: middle !important;
}

body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-p,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-position,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-name,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-kph,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-max,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-num,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-exc,
body.theme-griiip.theme-v5.theme-teste-single .table-wrap--service .col-pit {
    font-size: clamp(0.46rem, 0.82vw, 0.74rem) !important;
}

body.theme-griiip.theme-v5.theme-teste-single .section-label {
    font-size: clamp(0.52rem, 0.85vw, 0.62rem) !important;
    padding: 0 1px !important;
}

body.theme-griiip.theme-v5.theme-teste-single .badge-test {
    font-size: 0.48rem !important;
    padding: 1px 4px !important;
}

/* Altura do painel PIT: definida na página (teste/produção: cabeçalho + 2 linhas no corpo) */
body.theme-griiip.theme-v5:is(.theme-teste-single, .theme-tv-single) .pit-log-panel {
    max-height: none !important;
}

/**
 * Grelhas SPEED + Live Timing — mesma superfície que o Live Timing (#0b101a)
 * e marco exterior (borda + sombra). Aplica-se à corrida, serviço e Live Timing completo.
 */
body.theme-griiip.theme-v5.theme-teste-single .grid-main .table-wrap.compact.table-wrap--race,
body.theme-griiip.theme-v5.theme-teste-single .grid-main .table-wrap.table-wrap--service,
body.theme-griiip.theme-v5.theme-teste-single #liveTimingTableWrap.table-wrap--race {
    background: #0b101a !important;
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.95),
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* Cabeçalho e linhas alternadas — tons do Live Timing (sobre variáveis griiip) */
body.theme-griiip.theme-v5.theme-teste-single .grid-main .grid-table > thead {
    background: #1a1e2a !important;
}

body.theme-griiip.theme-v5.theme-teste-single .grid-main .grid-table > thead > tr > th {
    background: #1a1e2a !important;
    color: #a1a1aa !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #202435 !important;
}

body.theme-griiip.theme-v5.theme-teste-single .grid-main .grid-table > tbody > tr:nth-child(odd):not(.record-holder):not(.row-service) {
    background: #0f121b !important;
}

body.theme-griiip.theme-v5.theme-teste-single .grid-main .grid-table > tbody > tr:nth-child(even):not(.record-holder):not(.row-service) {
    background: #121623 !important;
}

body.theme-griiip.theme-v5.theme-teste-single .grid-main .grid-table > tbody > tr > td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #202435 !important;
}