/*
 * CRONUS-RUN — Tema "Modo Campo" (escuro)
 * Alternativa escura, de alto contraste, pensada pra operar sob sol forte.
 * Mesma técnica do theme-energia.css: reaproveita components.css, só
 * redefine tokens + alguns acabamentos pontuais. Inclua no lugar de
 * theme-energia.css (são mutuamente exclusivos) para pré-visualizar.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@600;700;800&display=swap');

:root {
    --color-primary: #1B2431;
    --color-primary-dark: #0B0F17;
    --color-primary-light: rgba(255, 255, 255, .05);
    --color-accent: #FFC63D;
    --color-success: #3DDC84;

    --color-bg: #0B0F17;
    --color-surface: #131A26;
    --color-surface-alt: #1B2431;
    --color-text: #F5F7FA;
    --color-text-muted: #8B96A8;
    --color-border: rgba(255, 255, 255, .08);

    --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
}

/* Cabeçalho: sem faixa colorida, só um fio dourado embaixo */
.app-header__bar { background: var(--color-bg); border-bottom: 1px solid rgba(255, 198, 61, .18); }
.pill { display: inline-flex; align-items: center; gap: 6px; }

/* Cartões: sem sombra, se distinguem pelo tom (surface x bg) + borda fina */
.card, .stat-tile { border: 1px solid rgba(255, 255, 255, .06); box-shadow: none; }
.timer-panel { box-shadow: none; }

.card__header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: var(--space-4) var(--space-5);
}
.card__header h2, .card__header h3 {
    color: var(--color-text);
    text-transform: none;
    font-size: 14px;
    font-weight: 800;
}

/* Cronômetro com glow (mesma técnica do telão) */
.timer-panel__value {
    font-family: var(--font-mono);
    color: var(--color-accent);
    text-shadow: 0 0 30px rgba(255, 198, 61, .35);
}
.stat-tile__value { color: var(--color-text); }

/* Status em pill preenchido, translúcido */
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
}
.status-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-tag--active { background: rgba(61, 220, 132, .14); color: var(--color-success); }
.status-tag--paused { background: rgba(255, 198, 61, .14); color: var(--color-accent); }

/* Botão fantasma (Som/Vibração desligados) — no claro usava --color-primary
   como cor de texto; aqui isso ficaria escuro sobre fundo escuro */
.btn--ghost { color: var(--color-text-muted); border-color: rgba(255, 255, 255, .12); }
.btn--xl.btn--accent { box-shadow: 0 14px 30px -10px rgba(255, 198, 61, .5); }

/* Campos de formulário escuros */
.form-control { background: var(--color-surface-alt); border-color: rgba(255, 255, 255, .1); color: var(--color-text); }
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus { border-color: var(--color-accent); }

/* Select de evento no cabeçalho — mesmo limite do theme-energia.css pra
   não estourar a tela no mobile com nome de evento longo */
.app-header__status { flex-wrap: wrap; row-gap: 8px; }
.app-header__status select.form-control {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 639px) {
    .app-header__status select.form-control { max-width: 100%; flex: 1 1 100%; }
}

/* Spotlight (atleta localizado na busca) */
.spotlight { background: var(--color-surface); border: 1px solid rgba(255, 198, 61, .3); border-left: none; }
.spotlight__meta { color: var(--color-text-muted); }

/* Tabela */
.table th { background: transparent; color: var(--color-text-muted); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.table td { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.table tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* 1º lugar em destaque dourado translúcido */
.position-badge--1 { background: rgba(255, 198, 61, .16); border-color: transparent; color: var(--color-accent); }

/* Textos/ícones que usavam --color-primary(-dark) como cor de LETRA — no tema
   claro isso era azul-escuro legível sobre branco; aqui esses tokens viraram
   cor de fundo escura, então o texto ficava preto sobre preto. */
.page-heading__back { color: var(--color-accent); }
.quick-card h2 { color: var(--color-text); }
.link-item__icon .icon-svg { color: var(--color-text-muted); }
.link-item strong { color: var(--color-text); }
.status-item__title { color: var(--color-text); }
.arrival-item__name { color: var(--color-text); }

/* "Secundário" (ex.: Fx/Cat/Mod em Gerenciar Eventos) — verde, não amarelo;
   amarelo fica reservado pro destaque de aba selecionada, abaixo.
   OBS: não existe botão .btn sem variante no sistema (conferido), então não
   sobrescrevemos a classe base — isso evitava atropelar as cores semânticas
   (Excluir/vermelho, Editar/azul etc., que dependiam da ordem do CSS). */
.btn--secondary { background: transparent; color: var(--color-success); border-color: var(--color-success); }

/* Abas selecionadas (Gerenciar Eventos, Configurar Evento, login e qualquer
   outro grupo "*-tabs"): título verde + contorno amarelo pra destacar */
[class$="-tabs"] .btn--primary {
    color: var(--color-success);
    background: var(--color-surface-alt);
    border-color: var(--color-accent);
}

/* Mensagem de status neutra (ex.: feedback de salvar faixa/categoria/
   modalidade em Gerenciar Eventos) usava cinza escuro fixo sobre fundo que
   agora também é escuro — texto praticamente ilegível */
.status-message { color: var(--color-text); }

/* Superfícies com fundo branco fixo (não usavam token nenhum) + texto que
   virou claro: toast, modal e tooltip ficavam com letra invisível */
.info-tip__popover { background: var(--color-surface-alt); }
.modal__panel { background: var(--color-surface); }
.toast { background: var(--color-surface); border-color: rgba(255, 255, 255, .08); }

/* Menu suspenso do desktop (submenu tinha fundo branco fixo) */
@media (min-width: 1024px) {
    .app-nav__submenu { background: var(--color-surface); border-color: rgba(255, 255, 255, .08); }
    .app-nav__link { color: var(--color-text); }
    .app-nav__link strong { color: var(--color-text); }
    .app-nav__link span { color: var(--color-text-muted); }
    .app-nav__link:hover { background: var(--color-surface-alt); }
}