/* ═══════════════════════════════════════════
   FUTEBOL98 — SKIN MODERNA
   Estilo painel de gerenciamento esportivo atual
   (as classes f98-* e fm-* apontam para o mesmo sistema visual)
   ═══════════════════════════════════════════ */

:root {
    /* Paleta principal */
    --fm-bg:        #0D1117;
    --fm-surface:   #161B22;
    --fm-surface-2: #1D2430;
    --fm-border:    rgba(255,255,255,0.08);
    --fm-accent:    #3DDC97;
    --fm-accent-2:  #FFD447;
    --fm-danger:    #FF5D5D;
    --fm-text:      #F2F4F8;
    --fm-muted:     #8A93A3;
    --fm-radius:    14px;
    --fm-radius-sm: 8px;
    --fm-font-display: 'Rajdhani', sans-serif;
    --fm-font-body:    'Inter', sans-serif;
    --fm-shadow: 0 10px 28px rgba(0,0,0,0.35);

    /* Fundo com leve degradê verde bem transparente — usado nos containers de tela cheia
       (Jornada, Copa, Classificação etc.), que cobrem o body inteiro com seu próprio background. */
    --fm-bg-degrade:  radial-gradient(circle at 50% -10%, rgba(143,232,190,0.16), transparent 60%), var(--fm-bg);

    /* Aliases de compatibilidade — o restante do site usa estes nomes */
    --f98-bg:         var(--fm-bg);
    --f98-bg-degrade: var(--fm-bg-degrade);
    --f98-surface:    var(--fm-surface);
    --f98-border:     var(--fm-border);
    --f98-gold:       var(--fm-accent-2);
    --f98-green:      var(--fm-accent);
    --f98-red:        var(--fm-danger);
    --f98-blue:       #5AA9FF;
    --f98-text:       var(--fm-text);
    --f98-muted:      var(--fm-muted);
    --f98-font-pixel: var(--fm-font-display);
    --f98-font-mono:  var(--fm-font-body);
    --f98-glow-gold:  none;
    --f98-glow-green: none;
}

/* Reset e base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--fm-bg-degrade);
    background-attachment: fixed;
    color: var(--fm-text);
    font-family: var(--fm-font-body);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overscroll-behavior-y: contain;
}

/* ── TELA DE LOADING ── */
.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--fm-bg-degrade);
    flex-direction: column;
}

.loading-content { text-align: center; }

.loading-logo {
    font-family: var(--fm-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    color: var(--fm-accent);
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}

.loading-bar {
    width: 300px;
    height: 8px;
    border-radius: 999px;
    background: var(--fm-surface-2);
    margin: 0 auto 1rem;
    position: relative;
    overflow: hidden;
}

.loading-fill {
    height: 100%;
    background: var(--fm-accent);
    animation: loadfill 2s ease-in-out forwards;
}

.loading-text {
    font-family: var(--fm-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fm-muted);
    letter-spacing: 0.15em;
    animation: blink 1.2s step-end infinite;
}

/* ── TIPOGRAFIA ── */
.f98-title, .fm-title {
    font-family: var(--fm-font-display);
    font-weight: 700;
    color: var(--fm-text);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.f98-subtitle {
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fm-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Rótulo de campo em destaque (ex.: telas de finanças/estatísticas) */
.f98-label, .fm-label {
    display: block;
    font-family: var(--fm-font-body);
    font-size: 0.68rem;
    color: var(--fm-muted);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.f98-data, .fm-value {
    font-family: var(--fm-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--fm-text);
}

/* ── PAINÉIS / CARTÕES ── */
.f98-panel, .fm-card {
    background: linear-gradient(160deg, var(--fm-surface) 0%, var(--fm-surface-2) 100%);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow);
    position: relative;
    padding: 1.25rem 1.5rem;
}

.f98-panel-gold { border-color: rgba(255,212,71,0.35); }
.f98-panel-green { border-color: rgba(61,220,151,0.35); }
.f98-panel-blue { border-color: rgba(90,169,255,0.45); }

.fm-banner {
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow);
    padding: 1.5rem 1.75rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.fm-crest {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(255,255,255,0.14);
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.fm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

/* ── BOTÕES ── */
.f98-btn, .fm-btn {
    font-family: var(--fm-font-display) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--fm-radius-sm) !important;
    border: none !important;
    background: var(--fm-accent) !important;
    color: #04140C !important;
    text-transform: uppercase !important;
    padding: 0.7rem 1.3rem !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    box-shadow: 0 4px 14px rgba(61,220,151,0.25) !important;
}

.f98-btn:hover, .fm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61,220,151,0.4) !important;
}

.f98-btn-green { background: var(--fm-accent) !important; color: #04140C !important; }

.f98-btn-blue, .fm-btn-blue {
    background: #3D9BDC !important;
    color: #04140C !important;
    box-shadow: 0 4px 14px rgba(61,155,220,0.25) !important;
}

.f98-btn-red, .fm-btn-danger {
    background: var(--fm-danger) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255,93,93,0.25) !important;
}

.fm-btn-outline {
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    color: var(--fm-text) !important;
    box-shadow: none !important;
}

.fm-btn-outline:hover {
    border-color: var(--fm-accent) !important;
    color: var(--fm-accent) !important;
    transform: translateY(-1px);
}

/* ── TABELAS ── */
.f98-table-wrap, .fm-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.f98-table, .fm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
}

.f98-table th, .fm-table th {
    font-family: var(--fm-font-body);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fm-muted);
    padding: 0.4rem 0.5rem;
    text-align: center;
}

.f98-table td, .fm-table td {
    padding: 0.55rem 0.5rem;
    background: rgba(255,255,255,0.03);
    text-align: center;
    color: var(--fm-text);
}

.f98-table tr:first-child td { color: var(--fm-accent-2); font-weight: 700; }
.f98-table tr:nth-child(2) td, .f98-table tr:nth-child(3) td { color: #7EC8E3; }
.f98-table tr.relegation td { color: var(--fm-danger); }
.f98-table tr.meu-clube td, .fm-table tr.destaque td { background: rgba(61,220,151,0.10); }

.f98-table td:first-child, .f98-table th:first-child,
.fm-table td:first-child, .fm-table th:first-child { text-align: left; }

.f98-table tr td:first-child, .fm-table tr td:first-child { border-radius: var(--fm-radius-sm) 0 0 var(--fm-radius-sm); padding-left: 0.8rem; }
.f98-table tr td:last-child, .fm-table tr td:last-child { border-radius: 0 var(--fm-radius-sm) var(--fm-radius-sm) 0; }
.f98-table tr:hover td, .fm-table tr:hover td { background: rgba(255,255,255,0.07); }

.fm-pos-pill {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

/* ── NAVBAR LATERAL ── */
.f98-nav-item {
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.7rem 1rem;
    border-radius: var(--fm-radius-sm);
    margin: 0.15rem 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--fm-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
}

.f98-nav-item:hover, .f98-nav-item.active {
    color: var(--fm-text);
    background: rgba(61,220,151,0.12);
}

.f98-nav-item.active { color: var(--fm-accent); }

/* ── PLACAR ── */
.f98-placar {
    font-family: var(--fm-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: var(--fm-accent-2);
    text-align: center;
    letter-spacing: 0.05em;
}

.f98-placar-clube {
    font-family: var(--fm-font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--fm-text);
}

/* ── EVENTOS DE PARTIDA ── */
.f98-evento {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--fm-border);
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
}

.f98-evento-min {
    font-family: var(--fm-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--fm-accent-2);
    min-width: 2.5rem;
    text-align: right;
}

.f98-evento-icon { font-size: 1rem; }

/* ── ATRIBUTOS DE JOGADOR (BARRAS) ── */
.f98-attr-bar, .fm-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
    margin: 0.2rem 0;
}

.f98-attr-fill, .fm-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--fm-accent);
    transition: width 0.4s ease;
}

.f98-attr-fill.high { background: var(--fm-accent-2); }
.f98-attr-fill.elite { background: #7EC8E3; }

/* ── ANIMAÇÕES ── */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes loadfill {
    0% { width: 0; }
    30% { width: 35%; }
    60% { width: 70%; }
    80% { width: 85%; }
    100% { width: 100%; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-in { animation: slideIn 0.3s ease; }

@keyframes f98-sparkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 0.9; transform: scale(1.15) rotate(12deg); }
}

@keyframes f98-pulso-suave {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.f98-sparkle { display: inline-block; animation: f98-sparkle 2.4s ease-in-out infinite; }

/* ── RESPONSIVO ── */

/* Menu de navegação — linha horizontal no desktop, ícone de hambúrguer abrindo um MudDrawer no mobile
   (ver MainLayout.razor). Escondido um ou outro por CSS pra não duplicar o estado do menu em Blazor. */
.f98-hamburger { display: none !important; }

@media (max-width: 900px) {
    .f98-navbar-desktop { display: none !important; }
    .f98-hamburger { display: inline-flex !important; }
}

@media (max-width: 768px) {
    .f98-panel, .fm-card { padding: 1rem; }
    .loading-logo { font-size: 1.1rem; }
}

/* Telas pequenas (celular) — reduz respiro geral, deixa botões/painéis mais compactos e evita
   que linhas com vários elementos (ex.: cabeçalhos de tela com título + botão voltar) estourem
   a largura pedindo scroll horizontal na página inteira. */
@media (max-width: 600px) {
    .f98-panel, .fm-card { padding: 0.85rem; }
    .f98-btn, .fm-btn { padding: 0.6rem 1rem !important; font-size: 0.8rem !important; }
    .f98-title, .fm-title { font-size: 0.85rem; }
    .f98-home-card { padding: 1.4rem; }
    .f98-table th, .fm-table th { font-size: 0.58rem; padding: 0.3rem 0.35rem; }
    .f98-table td, .fm-table td { font-size: 0.78rem; padding: 0.45rem 0.35rem; }
}

/* Tela da rodada (JornadaScreen) — lista de jogos + painel de estatísticas lado a lado têm min-width
   fixo (400px/280px) que não cabe numa tela de celular; empilha em coluna única abaixo do breakpoint. */
@media (max-width: 700px) {
    .f98-jornada-colunas { flex-direction: column; }
    .f98-jornada-colunas > div { min-width: 100% !important; }

    .f98-classificacao-grid { grid-template-columns: 1fr !important; }
}

/* ── OVERRIDES MUDBLAZOR ── */
.mud-drawer { background: var(--fm-bg-degrade) !important; border-right: 1px solid var(--fm-border) !important; }
.mud-appbar { background: var(--fm-bg) !important; border-bottom: 1px solid var(--fm-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important; }
.mud-table-cell { font-family: var(--fm-font-body) !important; color: var(--fm-text) !important; }
.mud-paper { background: var(--fm-surface) !important; }
.mud-card { background: var(--fm-surface) !important; border: 1px solid var(--fm-border) !important; border-radius: var(--fm-radius) !important; }
.mud-input-root { font-family: var(--fm-font-body) !important; }

/* Filtros de busca (ex.: Clubes, Mercado) — dá um acabamento mais "retrô" aos campos padrão do MudBlazor */
.f98-filtros .mud-input-outlined-border { border-color: var(--fm-border) !important; border-radius: 6px !important; }
.f98-filtros .mud-input { background: var(--fm-surface-2); border-radius: 6px; }
.f98-filtros .mud-input-label { font-family: var(--fm-font-mono); letter-spacing: 0.04em; }
.f98-filtros .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--f98-gold) !important; }
.f98-filtros .mud-input-outlined.mud-shrink .mud-input-outlined-border { border-color: var(--f98-gold) !important; border-width: 2px !important; }
.f98-filtros .mud-input-outlined.mud-shrink .mud-input-label { color: var(--f98-gold) !important; }

/* Abas (ex.: seletor de liga) — a aba selecionada precisa se destacar bem das demais.
   Vários elementos internos do MudBlazor (toolbar, wrapper, painel) pintam o fundo com a cor
   "Primary" do tema (amarelo-placar) — forçamos todos de volta pro fundo escuro, senão o texto
   fica ilegível em cima do amarelo. */
.mud-tabs-toolbar,
.mud-tabs-toolbar-inner,
.mud-tabs-scroll-container,
.mud-tabs-toolbar .mud-paper {
    background: var(--fm-surface-2) !important;
    border-radius: var(--fm-radius-sm);
}
.mud-tab {
    font-family: var(--fm-font-body) !important;
    font-weight: 600 !important;
    color: var(--fm-muted) !important;
    opacity: 1 !important;
    transition: background 0.15s, color 0.15s;
}
.mud-tab:hover { color: var(--fm-text) !important; }
.mud-tab.mud-tab-active {
    background: rgba(61,220,151,0.14) !important;
    color: var(--fm-accent) !important;
}
/* Indicador deslizante — mantém só uma linha fina de destaque, não um bloco preenchido */
.mud-tab-slider {
    background-color: var(--fm-accent) !important;
    height: 3px !important;
}
/* Classe real que o MudBlazor aplica quando Color="Color.Primary" — pinta o fundo inteiro da
   barra de amarelo sem !important; sem esta regra específica, o override acima de .mud-tabs-toolbar
   não tem efeito nela (são seletores diferentes, mesma especificidade). */
.mud-tabs-toolbar-primary {
    background-color: var(--fm-surface-2) !important;
    color: var(--fm-muted) !important;
}
.mud-tabs-toolbar-primary .mud-tab.mud-tab-active {
    color: var(--fm-accent) !important;
}
.mud-tabs-toolbar-primary .mud-tab.mud-tab-active:hover {
    background-color: rgba(61,220,151,0.14) !important;
}

/* ── BANDEIRAS DE PAÍSES (Formatacao.Bandeira) ── */
.f98-bandeira {
    width: 1.9em;
    height: 1.425em;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.15);
    image-rendering: pixelated;
}

/* ── TELA INICIAL (Home) ── */
.f98-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.f98-home-card {
    cursor: pointer;
    text-align: center;
    padding: 2rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.f98-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.45);
}

.f98-home-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.2rem;
}

.f98-home-recurso { text-align: center; }

/* ── SELEÇÃO DE PAÍSES (Novo Jogo) ── */
.f98-selpaises-layout {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.f98-selpaises-lista {
    flex: 1;
    min-width: 0;
    max-height: 56vh;
    overflow-y: auto;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    background: rgba(0,0,0,0.18);
}

.f98-selpaises-linha {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--fm-border);
    cursor: pointer;
    transition: background 0.1s;
}

.f98-selpaises-linha:last-child { border-bottom: none; }
.f98-selpaises-linha:hover { background: rgba(255,255,255,0.05); }
.f98-selpaises-linha.selecionado { background: rgba(61,220,151,0.14); }
.f98-selpaises-linha input[type="checkbox"] { cursor: pointer; accent-color: var(--fm-accent); }

.f98-selpaises-nome {
    flex: 1;
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fm-text);
}

.f98-selpaises-qtd {
    font-size: 0.72rem;
    color: var(--fm-muted);
    white-space: nowrap;
}

.f98-selpaises-lateral {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: sticky;
    top: 0;
}

.f98-selpaises-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--fm-border);
}

@media (max-width: 720px) {
    .f98-selpaises-layout { flex-direction: column; }
    .f98-selpaises-lateral { width: 100%; position: static; }
}

/* ── INPUT NUMÉRICO/TEXTO CRU (fora do MudBlazor) ── */
.f98-input {
    background: var(--fm-surface-2);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    color: var(--fm-text);
    font-family: var(--fm-font-body);
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
}

.f98-input:focus {
    outline: none;
    border-color: var(--fm-accent);
}