/* ── Design tokens ────────────────────────────────────────────────────────
   Paleta central dos dois temas. Novas telas devem usar estas variáveis em
   vez de cores fixas — assim o dark mode funciona sem precisar de um override
   [data-theme="dark"] por classe (motivo das dezenas de regras mais abaixo,
   que podem ser migradas gradualmente para os tokens nas próprias views).
   O Bootstrap 5.3 recebe data-bs-theme junto com data-theme (ver _Layout),
   então componentes nativos sem override aqui já saem corretos no escuro. */
:root {
    --bg: #ffffff;              /* fundo da página */
    --surface: #ffffff;         /* cards, painéis, tabelas */
    --surface-2: #f9fafb;       /* cabeçalhos, listras, filtros */
    --surface-3: #f3f4f6;       /* inputs, hovers, badges */
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --border-subtle: #f0f0f0;   /* separadores finos dentro de cards/listas */
    --input-bg: #ffffff;        /* fundo de inputs/selects */
    --text: #111827;
    --text-2: #374151;          /* texto secundário */
    --text-muted: #6b7280;
    --link: #2563eb;
    --link-hover: #1d4ed8;
    --accent-surface: #eff6ff;  /* hover azulado (botões/atalhos) */
    --accent-border: #bfdbfe;
    --gold: #d4a520;            /* dourado da marca (igual nos dois temas) */

    /* ── Tokens de painel ──────────────────────────────────────────────────
       As telas com layout próprio (Home, Jogos, Times, Relatórios, Estatísticas,
       competições…) desenham a própria hierarquia de superfícies dentro do
       <style> da view. Estes tokens dão a essa hierarquia um equivalente em
       cada tema: --p-0 é o fundo do painel e --p-4 o nível mais destacado.
       Os valores do dark reproduzem exatamente a paleta que essas views já
       usavam, então o tema escuro não muda de aparência. */
    --p-0: #ffffff;             /* fundo do painel/página */
    --p-1: #f8f9fa;             /* seções, cabeçalhos de bloco */
    --p-2: #ffffff;             /* cards */
    --p-3: #f1f3f5;             /* linhas alternadas, blocos elevados */
    --p-4: #e9ecef;             /* hover, chips */
    /* Variante "azulada" das superfícies (telas Serviços, Treinadores,
       TransfermarktLogs, que usam uma paleta navy em vez do cinza neutro). */
    --p-alt: #f6f8fb;
    --p-alt-2: #eaeff6;
    --p-alt-3: #d9e2ee;

    --line: #e5e7eb;            /* borda padrão dos painéis */
    --line-soft: #f0f1f3;       /* separador sutil */
    --line-strong: #d1d5db;

    --text-strong: #0f172a;     /* títulos/números em destaque */
    --text-dim: #6b7280;        /* rótulos */
    --text-dimmer: #6e7683;     /* separadores textuais, placeholders (contraste AA no branco) */
    --gold-ink: #8a6a0a;        /* dourado como TEXTO (o da marca não contrasta no claro) */

    /* Acentos semânticos usados como texto/ícone sobre o painel */
    --ok: #15803d;
    --ok-2: #16a34a;
    --bad: #b91c1c;
    --bad-2: #dc2626;
    --info: #2563eb;
    --warn: #b45309;
    --purple: #7c3aed;

    /* Superfícies tingidas (badges e blocos de status) */
    --ok-surface: #dcfce7;
    --bad-surface: #fee2e2;
    --warn-surface: #fef3c7;
    --purple-surface: #ede9fe;
    --info-surface: #dbeafe;

    /* Fundo real da página. Diferente de --p-0 porque NÃO é redefinido dentro
       de .theme-dark-zone: os degradês que dissolvem um herói escuro no corpo
       da página precisam da cor de quem está embaixo, não a do próprio herói. */
    --page-bg: #ffffff;
}

[data-theme="dark"] {
    --page-bg: #0f0f0f;
}

/* .theme-dark-zone: trecho que continua escuro nos dois temas — heróis com
   foto de fundo, faixas com scrim, banners da identidade preto+dourado. Basta
   redefinir os tokens localmente; as regras da view não mudam. */
[data-theme="dark"],
.theme-dark-zone {
    color-scheme: dark; /* scrollbars e controles nativos escuros */
    --bg: #121212;
    --surface: #1a1a1a;
    --surface-2: #232323;
    --surface-3: #2a2a2a;
    --border: #333;
    --border-strong: #444;
    --border-subtle: #2a2a2a;
    --input-bg: #2a2a2a;
    --text: #e5e7eb;
    --text-2: #cbd5e1;
    --text-muted: #9ca3af;
    --link: #6ea8fe;
    --link-hover: #93c5fd;
    --accent-surface: #25324a;
    --accent-border: #3b4a63;

    /* Painéis: mesmos valores que as views já usavam chumbados */
    --p-0: #0f0f0f;
    --p-1: #161616;
    --p-2: #1a1a1a;
    --p-3: #1e1e1e;
    --p-4: #262626;
    --p-alt: #0f172a;
    --p-alt-2: #1e293b;
    --p-alt-3: #334155;
    --line: #262626;
    --line-soft: #1e1e1e;
    --line-strong: #2a2a2a;

    --text-strong: #f1f5f9;
    --text-dim: #6b7280;
    --text-dimmer: #4b5563;
    --gold-ink: var(--gold);

    --ok: #4ade80;
    --ok-2: #22c55e;
    --bad: #f87171;
    --bad-2: #ef4444;
    --info: #60a5fa;
    --warn: #fbbf24;
    --purple: #c084fc;

    --ok-surface: #14532d;
    --bad-surface: #2d0a0a;
    --warn-surface: #1a1200;
    --purple-surface: #3b0764;
    --info-surface: #0a1628;
}

/* Jogadores */
.jogador {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    color: white;
    text-align: center;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    border: 2px solid white;
    transition: transform 0.2s;
    user-select: none; /* impede seleção de texto */
    pointer-events: auto; /* só clique, sem arrastar */
    cursor: move;
}

    .jogador:hover {
        transform: scale(1.1);
    }

    .jogador .numero {
        font-size: 14px;
        line-height: 1;
    }

    .jogador .nome {
        font-size: 10px;
        line-height: 1;
        margin-top: 2px;
    }

    .jogador.casa {
        background: #007BFF;
    }

    .jogador.visitante {
        background: #DC3545;
    }

/* Campo */
.campo {
    position: relative;
    aspect-ratio: 2 / 3;
    max-width: 100%;
    height: auto;
    max-height: 600px;
    background: url('/images/campo.png') no-repeat center center;
    background-size: cover; /* ← troque contain por cover */
    border: 2px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

/* ── Mapa de calor: canvas inserido como primeiro filho do elemento-campo alvo,
   então fica atrás das linhas do campo e dos jogadores (que vêm depois no DOM).
   Compartilhado entre /Jogos/Analisar e /Jogadores/Estatisticas. ── */
.heatmap-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
    opacity: .85;
}

    .campo .jogador {

        font-weight: normal !important;
        font-size: 11px !important;
        color: black !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        text-align: center !important;
    }

        .campo .jogador img.camisa-img {
            width: 32px;
            height: 32px;
            margin-bottom: 4px;
        }

        .campo .jogador div {
            font-size: 11px;
            color: black;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            line-height: normal;
            display: block;
        }

/* Camiseta estilizada */
.camisa-img {
    height: 45px;
    width: auto;
    margin-bottom: 6px;
}

/* Círculo de jogador no campo */
.player-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: #fff; /* sobrescrito pelas variantes -casa e -vis via CSS var */
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    flex-shrink: 0;
    line-height: 1;
}
.player-circle-casa  { background: var(--cor-camisa-casa, #dc2626); color: var(--cor-numero-casa, #fff); }
.player-circle-vis   { background: var(--cor-camisa-vis,  #2563eb); color: var(--cor-numero-vis,  #fff); }
.player-circle-team  { background: var(--cor-camisa-casa, #dc2626); }
.player-circle-empty {
    background: rgba(255,255,255,0.12);
    border: 2px dashed rgba(255,255,255,0.35);
}
.player-name {
    font-size: 10px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    max-width: 64px;
    margin: 2px auto 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
}

/* Blocos de times */
.bloco-time {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.bloco-casa {
    background-color: #e6f0ff;
    border: 2px solid #99c2ff;
}

.bloco-visitante {
    background-color: #ffe6e6;
    border: 2px solid #ff9999;
}

/* Sidebar */
.sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 1rem;
}

    .sidebar .nav-link {
        font-size: 1.1rem;
        margin: 0.2rem 0;
    }

        .sidebar .nav-link:hover {
            background-color: #495057;
            border-radius: 4px;
        }

/* Dropdown */
.dropdown-menu {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .dropdown-menu.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tabela de classificação */
.tabela-classificacao td,
.tabela-classificacao th {
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

    .tabela-classificacao td.nome-time {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }

/* Faixas laterais */
tr.libertadores td:first-child {
    border-left: 5px solid #0d6efd;
}

tr.pre-libertadores td:first-child {
    border-left: 5px solid #0dcaf0;
}

tr.sulamericana td:first-child {
    border-left: 5px solid #198754;
}

tr.rebaixado td:first-child {
    border-left: 5px solid #dc3545;
}

/* Cards de jogos */
.proximos-jogos .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.proximos-jogos .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card {
    border-radius: 6px;
    overflow: hidden;
}

.card-header {
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.card-body {
    font-size: 0.85rem;
}

    .card-body img {
        border-radius: 4px;
        background-color: #fff;
        padding: 2px;
    }

    .card-body .badge {
        font-size: 0.8rem;
        padding: 0.4em 0.6em;
    }

    .card-body .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

/* Jogador duplicado */
.duplicado {
    border: 2px solid red;
    background-color: #ffe5e5;
}

/* Cabeçalho fixo da tabela. O fundo sólido evita que as linhas apareçam por
   trás ao rolar — mas não pode valer para <thead class="table-dark">, senão o
   branco cobre o fundo escuro do Bootstrap e sobra texto branco no branco. */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2; /* garante que fique acima das linhas */
}

.table thead:not(.table-dark) th {
    background-color: var(--surface);
}

/* Título fixo do calendário */
.sticky-title {
    position: sticky;
    top: 0;
    background-color: rgba(0,0,0,0.6); /* fundo para contraste */
    padding: 8px;
    z-index: 2
}

.jogo-card {
    font-size: 3.8rem;
    width: 100%; /* ocupa toda a largura da coluna */
}

    .jogo-card img {
        width: 40px;
        height: 40px;
    }
/* Estilo da tabela de jogadores */
.jogadores-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

/* Variáveis da tabela (Bootstrap): força texto claro e listras sutis,
   independentemente do tema — esta tabela fica sempre sobre fundo escuro
   (imagem do time + overlay). Sem isto, no dark mode as linhas listradas
   herdam texto preto sobre fundo quase preto e ficam ilegíveis. */
.jogadores-table.table,
[data-theme="dark"] .jogadores-table.table {
    --bs-table-color: #f1f5f9;
    --bs-table-bg: transparent;
    --bs-table-striped-color: #f1f5f9;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: rgba(255, 255, 255, 0.16);
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

    /* Cabeçalho */
    .jogadores-table.table thead th,
    [data-theme="dark"] .jogadores-table.table thead th {
        background-color: rgba(0, 0, 0, 0.55) !important;
        color: #cbd5e1;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        padding: 10px 8px;
        white-space: nowrap;
    }

    /* Linhas da tabela */
    .jogadores-table tbody tr {
        cursor: grab; /* mãozinha */
        transition: background 0.15s ease;
    }

        .jogadores-table tbody tr:active {
            cursor: grabbing; /* mão fechada ao arrastar */
            opacity: 0.7; /* fica meio transparente */
        }

        /* Hover para dar feedback visual (a tabela não usa .table-hover) */
        .jogadores-table tbody tr:hover td {
            background-color: rgba(255, 255, 255, 0.12);
        }

    /* Células */
    .jogadores-table td {
        padding: 9px 8px;
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Imagem da camisa */
    .jogadores-table img {
        display: block;
        margin: 0 auto;
    }

/* ── Logotipo (navbar) ────────────────────────────────────────────────── */
.navbar-brand.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

    .brand-mark {
        flex-shrink: 0;
        display: block;
    }

.brand-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-name {
    font-family: "Arial Black", "Arial Narrow", Arial, sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .12em;
    line-height: 1;
    color: #f5f5f0;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gold);
}

.brand-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--gold);
    margin-top: 3px;
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   Overrides de componentes Bootstrap e de classes custom das views que ainda
   têm cores claras fixas. Todos usam os design tokens do topo do arquivo —
   ajuste a paleta lá, não aqui. Conforme as views migrarem para os tokens,
   estas regras podem ser removidas. */
[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--text);
}

/* Navbar */
[data-theme="dark"] .navbar {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
    color: var(--text-2) !important;
}
[data-theme="dark"] .navbar-toggler {
    border-color: var(--border-strong);
}
[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* ── Barra de navegação com a identidade do logo (preto + dourado) ──────── */
/* Aplica nos dois temas; vem depois das regras de navbar do dark mode para
   vencer por ordem em empates de especificidade. */
.navbar.brand-nav {
    background-color: #141414 !important;
    border-bottom: 2px solid var(--gold) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

    .brand-nav .nav-link {
        color: #e7e5df !important;
        font-weight: 600;
        transition: color .15s ease;
    }

        .brand-nav .nav-link:hover,
        .brand-nav .nav-link:focus,
        .brand-nav .nav-link.active,
        .brand-nav .nav-item.show > .nav-link {
            color: var(--gold) !important;
        }

    /* Barra expandida: item numa linha só e um fio dourado sob a seção atual */
    @media (min-width: 1200px) {
        .brand-nav .navbar-nav .nav-link {
            white-space: nowrap;
            font-size: .95rem;
            padding-left: .5rem;
            padding-right: .5rem;
            box-shadow: inset 0 -2px 0 transparent;
        }

        .brand-nav .navbar-nav .nav-link.active {
            box-shadow: inset 0 -2px 0 var(--gold);
        }
    }

    /* Menu recolhido (hambúrguer): tudo alinhado à esquerda, inclusive o usuário */
    @media (max-width: 1199.98px) {
        .brand-nav .navbar-collapse .navbar-nav.align-items-center { align-items: flex-start !important; }
        .brand-nav .navbar-collapse .ms-auto { margin-left: 0 !important; }
    }

    .brand-nav .nav-link:focus-visible,
    .brand-nav .dropdown-item:focus-visible,
    .brand-nav #theme-toggle-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .brand-nav .navbar-toggler {
        border-color: #3a3a3a;
    }

    .brand-nav .navbar-toggler-icon {
        filter: invert(1);
    }

    .brand-nav .dropdown-menu {
        background-color: #1a1a1a;
        border: 1px solid #333;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    }

    .brand-nav .dropdown-item {
        color: #e7e5df;
    }

        .brand-nav .dropdown-item:hover,
        .brand-nav .dropdown-item:focus {
            background-color: #262626;
            color: var(--gold);
        }

    .brand-nav .dropdown-divider {
        border-top-color: #333;
    }

    .brand-nav .dropdown-item-text {
        color: #9a958a;
    }

    /* Emoji do menu tingidos num dourado discreto (emoji ignoram color,
       mas respondem a filter). */
    .brand-nav .gold-ico {
        display: inline-block;
        margin-right: 3px;
        opacity: .85;
        filter: grayscale(1) sepia(1) saturate(700%) hue-rotate(5deg) brightness(1.05);
    }

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-2);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-3);
    color: #fff;
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-item-text {
    color: var(--text-muted);
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .card-header {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .card-footer {
    background-color: var(--surface-2);
    border-color: var(--border);
}

/* Tables */
[data-theme="dark"] .table {
    /* Conjunto completo de variáveis: cor de texto E de fundo de cada estado,
       senão as linhas listradas herdam texto preto sobre fundo escuro
       (ilegível) e o fundo base vira branco. */
    --bs-table-color: var(--text);
    --bs-table-bg: var(--surface);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: var(--surface-3);
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: var(--surface-3);
    --bs-table-border-color: var(--border);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .table thead:not(.table-dark) th {
    background-color: var(--surface-2) !important;
    color: var(--text);
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--border);
}

/* ── Lista em cards (.player-row) no dark mode ────────────────────────────
   Telas Jogadores e Treinadores não usam a tabela .table; renderizam cards
   .player-row com fundo branco fixo. Sem isto, no dark mode as linhas ficam
   claras (diferente da tabela do Times). Casa a mesma paleta da .table. */
[data-theme="dark"] .player-row {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .player-row:last-child,
[data-theme="dark"] .player-row:only-child {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .player-row:hover {
    background: var(--surface-3);
}
[data-theme="dark"] .player-photo {
    background: var(--surface-3);
    border-color: var(--border);
}
[data-theme="dark"] .player-name-link {
    color: var(--link);
}
[data-theme="dark"] .tr-name {
    color: var(--text);
}
[data-theme="dark"] .player-meta {
    color: var(--text-muted);
}
[data-theme="dark"] .player-club-name {
    color: var(--text-2);
}

/* Telas Jogos, Home e Times (.cf-*) e Relatórios (.rpt-*): migradas para os
   design tokens direto nas views — não precisam mais de overrides dark aqui. */

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--surface-3);
    color: var(--text);
    border-color: var(--border-strong);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--surface-3);
    color: var(--text);
    border-color: #7c3aed;
    box-shadow: 0 0 0 .2rem rgba(124,58,237,.25);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border-strong);
}
[data-theme="dark"] .btn-light {
    background-color: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text);
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--link);
    border-color: var(--link);
}

/* Alerts (cores semânticas próprias, fora da paleta de tokens) */
[data-theme="dark"] .alert-info {
    background-color: #0d2444;
    border-color: #1e40af;
    color: #93c5fd;
}
[data-theme="dark"] .alert-warning {
    background-color: #2a1f08;
    border-color: #b45309;
    color: #fde68a;
}
[data-theme="dark"] .alert-success {
    background-color: #052e16;
    border-color: #15803d;
    color: #86efac;
}
[data-theme="dark"] .alert-danger {
    background-color: #2d0a0a;
    border-color: #b91c1c;
    color: #fca5a5;
}

/* Text utilities */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--text) !important;
}

/* Background utilities */
[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--surface-2) !important;
}

/* Borders */
[data-theme="dark"] .border {
    border-color: var(--border) !important;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--surface-2);
    color: #fff;
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--link);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

/* site.css specific (cores semânticas casa/visitante, fora dos tokens) */
[data-theme="dark"] .bloco-casa {
    background-color: #0a1a3a !important;
    border-color: #2563eb !important;
}
[data-theme="dark"] .bloco-visitante {
    background-color: #2d0a0a !important;
    border-color: #dc2626 !important;
}
[data-theme="dark"] .duplicado {
    background-color: #2d0a0a !important;
    border-color: #dc2626 !important;
}
[data-theme="dark"] .sticky-title {
    background-color: rgba(0,0,0,0.8);
}

/* Toast */
[data-theme="dark"] .toast:not(.text-bg-success):not(.text-bg-danger) {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* Tela Scout (.sc-*) e multiselects (.ms-*): migradas para os design tokens
   direto nas views (Scout, Relatórios, Treinadores, Times) — sem overrides. */

/* Resultado da disputa de pênaltis (mata-mata) exibido junto ao placar.
   var(--text-muted) resolve para o cinza certo em cada tema — não precisa
   mais de override dark. */
.cf-pen-score,
.lib-pen,
.sul-pen,
.ucl-pen,
.bra-jogo-pen,
.copa-jogo-pen,
.placar-pen,
.hoje-pen {
    display: inline-block;
    margin-left: .25rem;
    font-size: .72em;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Botão "Sincronizar jogos" das telas fixas de competição (_BotaoSincronizarJogos).
   Fica sempre sobre o hero escuro de cada competição, por isso é translúcido em
   branco e não usa as cores do tema. */
.sinc-jogos-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background .15s ease, border-color .15s ease;
}

.sinc-jogos-btn:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .6);
}