/* =========================================================================
   ARENAFUTEBOL — Design System "Broadcast Neon"
   -------------------------------------------------------------------------
   Tema escuro estilo transmissão esportiva. Tokens + componentes que
   reestilizam o Bootstrap por baixo (para todas as telas melhorarem de uma
   vez) e classes .af-* novas para os componentes destacados.
   ========================================================================= */

:root {
    /* --- Superfícies (do mais escuro ao mais claro) --- */
    --bg-0: #080b11;   /* fundo da página */
    --bg-1: #0f141d;   /* painéis */
    --bg-2: #161d29;   /* cards */
    --bg-3: #1e2735;   /* elementos elevados / hover */
    --line: #26303f;   /* bordas */
    --line-soft: #1b232f;

    /* --- Texto --- */
    --text: #e8edf4;
    --text-muted: #93a1b3;
    --text-dim: #5f6d7e;

    /* --- Cores de marca (neon) --- */
    --neon: #2bf58a;         /* verde neon principal */
    --neon-2: #17c3b2;       /* teal */
    --cyan: #22d3ee;         /* ciano de destaque */
    --gold: #f5c451;         /* dourado (craques, troféus) */
    --danger: #ff5468;
    --warning: #ffb020;

    --neon-glow: 0 0 0 1px rgba(43, 245, 138, .35), 0 0 18px -2px rgba(43, 245, 138, .45);
    --cyan-glow: 0 0 18px -4px rgba(34, 211, 238, .5);

    /* --- Cores de Posição --- */
    --pos-gk: #f5c451;
    --pos-def: #3f9bff;
    --pos-mid: #2bf58a;
    --pos-att: #ff5a5f;

    /* --- Forma --- */
    --radius: 14px;
    --radius-sm: 9px;
    --radius-pill: 999px;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .85);

    /* Compat com nomes antigos usados em templates */
    --neon-blue: var(--cyan);
    --neon-green: var(--neon);
    --border-color: var(--line);
    --bg-panel: var(--bg-1);
    --bg-card: var(--bg-2);
    --text-main: var(--text);
}

/* ---------------------------------------------------------- Base / tipografia */
body {
    background-color: var(--bg-0);
    background-image:
        radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, .06), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(43, 245, 138, .05), transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: .1px;
}

h1, h2, h3, .display-4, .display-5, .af-display {
    font-family: 'Teko', 'Segoe UI', sans-serif;
    letter-spacing: .5px;
    line-height: 1;
}

.fw-800 { font-weight: 800; }
.text-neon { color: var(--neon) !important; }
.text-cyan { color: var(--cyan) !important; }
.text-gold { color: var(--gold) !important; }

/* Números grandes em fonte esportiva */
.af-num {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Rótulo pequeno maiúsculo (usado em stat tiles / headers) */
.af-label {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-dim);
}

/* --------------------------------------------------------------- Navbar / Footer */
.navbar-custom {
    background: linear-gradient(180deg, #0b0f16 0%, rgba(8, 11, 17, .92) 100%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.navbar-brand {
    font-family: 'Teko', sans-serif;
    font-size: 1.9rem;
    letter-spacing: 1px;
}
.nav-link {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .5px;
    color: var(--text-muted) !important;
    transition: color .2s;
}
.nav-link:hover { color: var(--neon) !important; }
.nav-link.active { color: #fff !important; }

.footer {
    margin-top: auto;
    background: #070a0f;
    border-top: 1px solid var(--line);
    padding: 22px 0;
    font-size: .8rem;
    color: var(--text-dim);
}

/* ------------------------------------------------------------------- Cards */
.card,
.af-card {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow);
}
.card-header {
    background: rgba(0, 0, 0, .22);
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .82rem;
    color: var(--text-muted);
    padding: 0.7rem 1.15rem;   /* evita que o título/ícone encoste no canto arredondado */
}
.card-body { padding: 1.1rem 1.15rem; }
.card-footer { background: rgba(0, 0, 0, .2); border-top: 1px solid var(--line); padding: 0.8rem 1.15rem; }
/* Cards com cabeçalho/tabela: respeita o arredondamento das bordas */
.af-card, .card { overflow: hidden; }

/* Faixa de destaque no topo de um card */
.af-card--accent { position: relative; overflow: hidden; }
.af-card--accent::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--neon), var(--cyan));
}

.modal-content {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
}
.modal-header, .modal-footer { border-color: var(--line); }

/* -------------------------------------------------------- Subnav (menu do jogo) */
.af-subnav {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px;
}
.af-subnav__item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--radius-sm);
    color: var(--text-muted); text-decoration: none;
    font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px;
    transition: background .15s, color .15s;
}
.af-subnav__item i { font-size: .95rem; }
.af-subnav__item:hover { background: var(--bg-3); color: #fff; }
.af-subnav__item.is-active {
    background: linear-gradient(180deg, rgba(43, 245, 138, .16), rgba(43, 245, 138, .06));
    color: var(--neon); box-shadow: inset 0 0 0 1px rgba(43, 245, 138, .3);
}
.af-subnav__item.is-disabled { color: var(--text-dim); cursor: not-allowed; opacity: .6; }
@media (max-width: 575px) {
    .af-subnav__item span { display: none; }
    .af-subnav__item { padding: 10px 14px; }
}

/* Tiles compactos do cabeçalho (rodada/data) — proporção equilibrada */
.af-hdr-tile {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    min-width: 92px;
    display: flex; flex-direction: column; gap: 2px;
}
.af-hdr-tile__val {
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 1.05rem; color: var(--text); line-height: 1.1;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Stat tiles */
.af-stat {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.af-stat__value { font-family: 'Teko', sans-serif; font-size: 2rem; font-weight: 600; line-height: 1; }
.af-stat__label { text-transform: uppercase; letter-spacing: 1.4px; font-size: .66rem; font-weight: 700; color: var(--text-dim); }

/* ------------------------------------------------------------- Escudo (badge) */
.af-badge {
    --sz: 48px;
    width: var(--sz); height: var(--sz);
    min-width: var(--sz);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #223047, #10161f);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
}
.af-badge img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }
/* Crest-fallback colorido: cor determinística via --hue (filtro team_hue) */
.af-badge__crest {
    width: 100%; height: 100%;
    align-items: center; justify-content: center;
    font-family: 'Teko', sans-serif; font-weight: 600;
    font-size: calc(var(--sz) * .38);
    letter-spacing: .5px; color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    background:
        linear-gradient(135deg,
            hsl(var(--hue, 210), 58%, 46%),
            hsl(var(--hue, 210), 60%, 26%));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.af-badge--ring { box-shadow: 0 0 0 2px rgba(43, 245, 138, .35); }

/* -------------------------------------------------------------- Placar / VS */
.af-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.af-score {
    font-family: 'Teko', sans-serif; font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    letter-spacing: 2px; color: #fff;
    text-shadow: 0 0 22px rgba(34, 211, 238, .35);
}
.af-vs {
    font-family: 'Teko', sans-serif; font-weight: 600;
    color: var(--cyan); border: 1px solid rgba(34, 211, 238, .4);
    border-radius: var(--radius-pill); padding: 2px 14px; font-size: 1.1rem;
}

/* ------------------------------------------------------------- Posições (badge) */
.pos-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 22px; padding: 0 6px;
    font-weight: 800; font-size: .72rem;
    border-radius: 6px; color: #06121a;
    text-transform: uppercase;
}
[data-pos="GK"] { background: var(--pos-gk); }
[data-pos="DF"], [data-pos="CB"], [data-pos="LB"], [data-pos="RB"], [data-pos="LWB"], [data-pos="RWB"] { background: var(--pos-def); color: #fff; }
[data-pos="MF"], [data-pos="CDM"], [data-pos="CM"], [data-pos="CAM"], [data-pos="LM"], [data-pos="RM"] { background: var(--pos-mid); }
[data-pos="FW"], [data-pos="ST"], [data-pos="CF"], [data-pos="LW"], [data-pos="RW"] { background: var(--pos-att); color: #fff; }

/* Nota de overall */
.af-ovr {
    font-family: 'Teko', sans-serif; font-weight: 600;
    min-width: 32px; text-align: center; font-size: 1.15rem;
    color: var(--text-muted);
}
.af-ovr--elite { color: var(--gold); }
.af-ovr--good { color: var(--neon); }
/* Níveis por overall (régua FUT, ver ovr_class): bronze <65 / prata 65-74 / ouro 75+ */
.af-ovr--bronze { color: #cd8b5f; }
.af-ovr--silver { color: #cfd8e3; }
.af-ovr--gold { color: var(--gold); }

/* ------------------------------------------------------------------ Tabelas */
.table { color: var(--text); vertical-align: middle; }
.table thead th {
    background: #0c1119; color: var(--text-dim);
    border-bottom: 1px solid var(--line);
    font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.table td, .table th { border-color: var(--line-soft); }
.table-hover tbody tr:hover { background: rgba(43, 245, 138, .06); color: #fff; }
.table-active, .table-active > td { background: rgba(34, 211, 238, .08) !important; }
.af-row-me { box-shadow: inset 3px 0 0 var(--cyan); }

/* Cabeçalho de tabela clicável (ordenação) */
.af-sort { cursor: pointer; user-select: none; transition: color .15s; }
.af-sort:hover { color: var(--text) !important; }
.af-sort.is-active { color: var(--neon) !important; }

/* --------------------------------------------------------------- Formulários */
.form-control, .form-select {
    background: #0b0f16; border: 1px solid var(--line); color: var(--text);
    border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus, .form-select:focus {
    background: #0b0f16; color: #fff;
    border-color: var(--cyan); box-shadow: var(--cyan-glow);
}

/* ------------------------------------------------------------------- Botões */
.btn { font-weight: 700; border-radius: var(--radius-sm); letter-spacing: .3px; }

.btn-success, .btn-primary, .af-btn--primary {
    background: linear-gradient(180deg, var(--neon), #17c96e);
    border: none; color: #04140a;
    box-shadow: 0 8px 20px -8px rgba(43, 245, 138, .6);
}
.btn-success:hover, .btn-primary:hover, .af-btn--primary:hover {
    background: linear-gradient(180deg, #4dff9f, var(--neon)); color: #04140a;
    box-shadow: var(--neon-glow);
}
.btn-info { background: linear-gradient(180deg, var(--cyan), #14b8d4); border: none; color: #04121a; }
.btn-info:hover { color: #04121a; box-shadow: var(--cyan-glow); }

.btn-outline-light { border-color: var(--line); color: var(--text-muted); }
.btn-outline-light:hover { background: var(--bg-3); border-color: var(--neon); color: #fff; }
.btn-outline-success { border-color: rgba(43, 245, 138, .5); color: var(--neon); }
.btn-outline-success:hover { background: var(--neon); color: #04140a; }
.btn-outline-danger { border-color: rgba(255, 84, 104, .5); color: var(--danger); }

.btn-dark-outline { border: 1px solid var(--line); color: var(--text-muted); background: transparent; }
.btn-dark-outline:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .05); }

/* ------------------------------------------------------------------- Badges */
.badge.bg-secondary { background: var(--bg-3) !important; color: var(--text-muted); font-weight: 700; }
.badge.bg-dark { background: #0c1119 !important; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- Utilitários */
.truncate-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.af-divider { height: 1px; background: var(--line); border: 0; margin: 1rem 0; }

/* Lista com scroll estilizada */
.scrollable-list::-webkit-scrollbar, .af-scroll::-webkit-scrollbar { width: 8px; }
.scrollable-list::-webkit-scrollbar-thumb, .af-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.scrollable-list::-webkit-scrollbar-track, .af-scroll::-webkit-scrollbar-track { background: transparent; }

/* Item de jogador (elenco / escalação) */
.af-player-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
    transition: background .15s;
}
.af-player-row:hover { background: rgba(255, 255, 255, .03); }
.af-player-row .af-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------- Campo/radar (transmissão) */
.af-pitch {
    position: relative;
    width: 100%; max-width: 300px; aspect-ratio: 105 / 68; margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, .28); border-radius: 8px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 10%, transparent 10% 20%),
        linear-gradient(180deg, #1a4a2a, #123a20);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.af-pitch__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .28); transform: translateX(-50%); }
.af-pitch__circle {
    position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .28); border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* Áreas de pênalti (esquerda/direita) */
.af-pitch__box {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 15%; height: 46%;
    border: 2px solid rgba(255, 255, 255, .28);
}
.af-pitch__box--l { left: 0; border-left: none; }
.af-pitch__box--r { right: 0; border-right: none; }
.af-ball {
    position: absolute; left: 50%; top: 50%;
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #b9c2cf);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 8px 1px rgba(255, 255, 255, .35);
    transform: translate(-50%, -50%);
    transition: left .5s ease, top .5s ease;
}
.af-ball--goal { box-shadow: 0 0 16px 5px var(--neon); }
.af-status { opacity: .85; font-size: .66rem; }

/* Animação de gol no log da partida */
@keyframes af-goal-flash {
    0% { background: rgba(43, 245, 138, .35); }
    100% { background: transparent; }
}
.log-goal { animation: af-goal-flash 1.4s ease-out; }

/* ------------------------------------------------------------ Sino de alertas */
.af-bell-btn {
    position: relative; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
    color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.af-bell-btn:hover, .af-bell-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.af-bell-btn.has-new { color: var(--gold); }
.af-bell-btn.has-new i { animation: af-bell-ring 1s ease-in-out 2; transform-origin: 50% 0; }
.af-bell-count {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #e5484d; color: #fff; font-size: .68rem; font-weight: 700;
    line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg-0);
}
@keyframes af-bell-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .af-bell-btn.has-new i { animation: none; } }
.af-bell-menu { width: 360px; max-width: calc(100vw - 32px); max-height: 65vh; overflow-y: auto; padding: 0; }
.af-bell-menu .dropdown-header { position: sticky; top: 0; background: var(--bg-2); padding: .6rem .9rem; z-index: 1; }
.af-bell-item {
    display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .9rem;
    border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-muted); line-height: 1.35;
}
.af-bell-item i { margin-top: .15rem; }
.af-bell-item.is-new { color: #fff; background: rgba(255, 255, 255, .04); }
.af-bell-item--success i { color: var(--neon); }
.af-bell-item--error i { color: #e5484d; }
.af-bell-item--warning i { color: var(--gold); }
.af-bell-item--info i { color: var(--cyan); }
.af-bell-sep {
    padding: .35rem .9rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted); border-top: 1px solid var(--line);
}
.af-bell-empty { padding: 1rem .9rem; font-size: .85rem; color: var(--text-muted); border-top: 1px solid var(--line); }