/* ============================================================
   ALVARÁ FC — UI V2  (Direção C: Ousada / Energética)
   Camada de estilo central. NÃO altera lógica, só aparência.
   Cores da marca mantidas: laranja #FF6600 (escudo).
   Vibe: gradientes fortes, laranja intenso, contraste marcante,
   energia de dia de jogo / torcida.
   ============================================================ */

:root {
    --laranja:            #FF6600;
    --cor-primaria:       #FF6600;
    --laranja-claro:      #ff9d3d;
    --laranja-escuro:     #d94a00;
    --laranja-neon:       #ff7a1a;
    --laranja-glow:       rgba(255, 102, 0, 0.55);

    /* Preto quase absoluto pra estourar o laranja */
    --bg-body:            #07090c;
    --bg-card:            #10131a;
    --bg-card2:           #171b24;
    --bg-elev:            #1e2430;
    --border-color:       rgba(255, 102, 0, 0.22);
    --border-strong:      rgba(255, 102, 0, 0.55);

    --text-primary:       #ffffff;
    --text-secondary:     #b9c0cc;
    --text-muted:         #7a828f;

    --shadow-md:          0 10px 30px rgba(0,0,0,0.55);
    --shadow-lg:          0 24px 60px rgba(0,0,0,0.7);
    --shadow-glow:        0 8px 34px rgba(255,102,0,0.5);

    --radius:             16px;
    --radius-lg:          24px;
}

/* ---------- Base ---------- */
body {
    background:
        radial-gradient(1000px 500px at 0% 0%, rgba(255,102,0,0.16), transparent 45%),
        radial-gradient(1000px 500px at 100% 10%, rgba(255,102,0,0.12), transparent 45%),
        linear-gradient(180deg, #0a0c10, var(--bg-body)) !important;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Títulos de seção — grandes, com barra laranja em bloco */
.container h5.fw-800,
.container h5.text-uppercase {
    position: relative;
    display: inline-block;
    padding: 4px 14px 4px 12px;
    color: #fff;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    border-left: 5px solid var(--laranja);
    background: linear-gradient(90deg, rgba(255,102,0,0.18), transparent);
    border-radius: 0 8px 8px 0;
}

/* ---------- Navbar topo ---------- */
.navbar-alvara {
    background: linear-gradient(90deg, #0a0c10 0%, #1a0e04 100%) !important;
    border-bottom: 2px solid var(--laranja) !important;
    box-shadow: 0 4px 30px rgba(255,102,0,0.25);
}

/* ---------- Cards ---------- */
.card,
.table-container {
    background: linear-gradient(180deg, var(--bg-card), #0b0e13) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md);
}

/* Cards de partida — borda que "acende" */
.card-match {
    background:
        radial-gradient(500px 160px at 50% -30%, rgba(255,102,0,0.16), transparent 60%),
        linear-gradient(180deg, var(--bg-card), #0b0e13) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-match:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-glow);
}

/* ---------- Tabela ---------- */
.table thead,
.table thead tr th {
    background: linear-gradient(90deg, var(--laranja-escuro), #7a2900) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0 !important;
    font-weight: 800;
}
.table tbody tr td { border-color: rgba(255,102,0,0.10) !important; }
.table-hover > tbody > tr:hover > td { background-color: rgba(255,102,0,0.12) !important; }

/* ---------- Badges de time ---------- */
.badge-team {
    border-radius: 6px !important;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---------- Placar gigante ---------- */
.score-box {
    font-size: 2.6rem !important;
    text-shadow: 0 0 18px rgba(255,102,0,0.35), 0 2px 6px rgba(0,0,0,0.6);
    letter-spacing: 2px;
}

/* Escudo/bola com halo */
.team-shield {
    box-shadow: 0 0 0 3px rgba(255,102,0,0.15), 0 6px 16px rgba(0,0,0,0.5) !important;
    border: 2px solid rgba(255,255,255,0.18) !important;
}

/* Botão de bola — cinza-grafite neutro (NÃO usar cor de time: azul/laranja/preto/verde) */
.btn-ball {
    background: radial-gradient(circle at 35% 30%, #3a4150, #1a1f29) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-ball:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.10) !important; }
.btn-ball:active { transform: scale(0.9); }

/* Status ao vivo pulsando forte */
.match-status { letter-spacing: 1px; font-weight: 800; }
.status-live {
    background: #ef4444 !important;
    color: #fff !important;
    animation: pulseLiveC 1.3s ease-in-out infinite;
}
@keyframes pulseLiveC {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* Selects / inputs */
.select-time, .select-goleiro, .form-select {
    background-color: var(--bg-card2) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}
.select-time:focus, .select-goleiro:focus, .form-select:focus {
    border-color: var(--laranja) !important;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.30) !important;
}

/* ---------- Botões ousados ---------- */
.btn { border-radius: 12px; transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease; font-weight: 800 !important; }
.btn-warning {
    background: linear-gradient(135deg, var(--laranja-claro), var(--laranja-escuro)) !important;
    border: 0 !important;
    color: #1a0d00 !important;
    box-shadow: var(--shadow-glow);
    text-transform: uppercase;
}
.btn-warning:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
.btn-success {
    background: linear-gradient(135deg, #2bd66f, #0f9b47) !important;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(43,214,111,0.4);
}
.btn-outline-danger {
    border: 2px solid #ef4444 !important;
    color: #ff5a5a !important;
}
.btn-outline-danger:hover { background: #ef4444 !important; color: #fff !important; box-shadow: 0 8px 24px rgba(239,68,68,0.4); }

.final-header { box-shadow: var(--shadow-glow); letter-spacing: 1.5px; }

/* ---------- Modais ---------- */
.modal-content {
    background: linear-gradient(180deg, var(--bg-card), #090c11) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.modal-content .modal-header.bg-dark { background: linear-gradient(90deg, var(--laranja-escuro), #5c1f00) !important; color: #fff !important; border: 0 !important; }
.modal-body .btn.w-100 { background: transparent !important; color: #fff !important; border-color: rgba(255,102,0,0.15) !important; }
.modal-body .btn.w-100:hover { background: rgba(255,102,0,0.14) !important; }
.modal-body .bg-light { background: var(--bg-card2) !important; }

/* ============================================================
   LOGIN (index.php) — impacto máximo
   ============================================================ */
body { }
.login-card {
    background: linear-gradient(180deg, rgba(20,24,32,0.96), rgba(9,12,17,0.98)) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 26px !important;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(255,102,0,0.15) !important;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(400px 200px at 50% -10%, rgba(255,102,0,0.28), transparent 60%);
    pointer-events: none;
}
.logo-container {
    border: 3px solid var(--laranja) !important;
    box-shadow: 0 0 0 8px rgba(255,102,0,0.12), 0 0 40px var(--laranja-glow) !important;
}
.login-card .form-control {
    background-color: rgba(23,27,36,0.9) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    color: #fff !important;
}
.login-card .form-control:focus {
    border-color: var(--laranja) !important;
    box-shadow: 0 0 0 4px rgba(255,102,0,0.30) !important;
}
.btn-alvara {
    background: linear-gradient(135deg, var(--laranja-claro), var(--laranja-escuro)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-glow);
    letter-spacing: 2px !important;
    text-transform: uppercase;
}
.btn-alvara:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 44px var(--laranja-glow) !important; }

.install-banner { background: linear-gradient(90deg, #1a0e04, #10131a) !important; border-top: 2px solid var(--laranja) !important; }
.btn-install { background: linear-gradient(135deg, var(--laranja-claro), var(--laranja-escuro)) !important; color: #1a0d00 !important; }

/* ---------- Nav inferior ---------- */
.alvara-nav {
    background: linear-gradient(180deg, #12141a, #07090c) !important;
    border-top: 2px solid var(--laranja) !important;
    box-shadow: 0 -6px 30px rgba(255,102,0,0.2) !important;
}
.alvara-nav a.active { color: var(--laranja) !important; }
.alvara-nav a.active i { filter: drop-shadow(0 0 8px var(--laranja-glow)); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   CORREÇÃO TEMA CLARO — legibilidade da tabela de classificação
   (jogos.php define --text-primary claro fixo no :root e usa
    color: var(--text-primary) !important nas tabelas, o que deixa
    o texto quase branco sobre fundo claro. Aqui forçamos contraste.)
   Carrega por último → vence.
   ============================================================ */
body.tema-light .table-container {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}
body.tema-light .table,
body.tema-light .table tbody tr td,
body.tema-light .table th {
    color: #1a1a2e !important;
    background: transparent !important;
}
body.tema-light .table thead,
body.tema-light .table thead tr th {
    background: #f1f3f5 !important;
    color: #495057 !important;
}
body.tema-light .table tbody tr { border-color: rgba(0,0,0,0.06) !important; }
body.tema-light .table-hover > tbody > tr:hover > td { background-color: rgba(255,102,0,0.08) !important; }
/* mantém cores semânticas legíveis no claro */
body.tema-light .table .text-success { color: #157347 !important; }
body.tema-light .table .text-danger  { color: #b02a37 !important; }
/* o score e labels que usam --text-primary claro também precisam escurecer no claro */
body.tema-light .score-box { color: #1a1a2e !important; }