/* ═══════════════════════════════════════════════════════════════
   Z-INDEX HIERARCHY — Single source of truth for all layers.
   ─────────────────────────────────────────────────────────────
   RULE: Every z-index in the app MUST use these variables.
         Never hardcode z-index values in other CSS files.
         Changing a value here updates the entire app safely.

   Layer stack (bottom → top):
     content (0) < scrollbar (50) < sidebar (80)
     < topbar (100) < modal (1000) < back-header (1001) < hamburger-dropdown (1002)
     < toast (9999) < hint (100000)

   ARCHITECTURE (v0.12.88 — Voltar is ALWAYS above modals):
     The fixed-top "Voltar" button MUST remain clickable even when
     a regular modal is open (user reported dead clicks when modals
     covered the back header at the old z-index 101).
     Full-screen overlays (live-scoring, TV mode, player stats) still
     sit above everything — they provide their own close buttons.
     #hamburger-dropdown is a SIBLING of <header class="topbar">.
     Hamburger dropdown stays above back-header so menu shows on top.
     DO NOT add --z-back-header-lowered (removed in v0.10.24).
     See tests.html "Z-Index Hierarchy" for automated guards.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --z-content:              0;
  --z-bracket-scrollbar:   50;
  --z-sidebar:             80;
  --z-topbar:             100;
  --z-modal:             1000;
  --z-back-header:       1001;   /* ABOVE modal so Voltar is clickable at all times */
  --z-hamburger-dropdown: 1002;  /* ABOVE back-header so menu shows on top          */
  --z-toast:             9999;
  --z-hint:            100000;
}

/* ═══════════════════════════════════════════════════════════════
   TEMAS — Variáveis CSS para todos os componentes
   Ordem de ciclagem: dark → light → sunset → ocean
   ═══════════════════════════════════════════════════════════════ */

/* v0.17.25: paleta Apple HIG. 4 temas — 2 light + 2 dark — cada um com
   identidade própria mas todos atingindo WCAG AAA pra texto principal.
   Cores systemColors oficiais da Apple onde aplicável.

   Mapping:
   - Noturno (dark) — Apple Dark Mode: systemBlue accent on systemGray6 dark
   - Claro (light) — Apple Light Mode: systemBlue accent on white
   - Pôr do Sol (light warm) — sépia/cream com amber-700 accent (modo leitura)
   - Oceano (dark navy) — preserva identidade cyan/teal sobre navy profundo
*/

:root, [data-theme="dark"] {
  /* NOTURNO — Apple Dark Mode */
  --bg-darker: #111114;        /* systemBackground dark — off-black, never pure #000 */
  --bg-dark: #1c1c1e;          /* systemGray6 dark */
  --bg-card: #2c2c2e;          /* systemGray5 dark */
  --bg-card-hover: #3a3a3c;    /* systemGray4 dark */

  --primary-color: #0a84ff;    /* systemBlue dark */
  --primary-hover: #5ac8fa;    /* systemTeal dark */
  --secondary-color: #bf5af2;  /* systemPurple dark */
  --secondary-hover: #d18df7;

  --text-main: #ebebf5;         /* secondaryLabel dark @ 100% */
  --text-muted: #98989d;        /* tertiaryLabel dark */
  --text-bright: #f2f2f7;       /* near-white — evita branco puro, melhor leitura em fundo escuro */

  --border-color: #38383a;      /* systemGray3 dark */
  --border-focus: #0a84ff;

  --danger-color: #ff453a;      /* systemRed dark */
  --success-color: #30d158;     /* systemGreen dark */
  --info-color: #0a84ff;

  /* Componentes */
  --btn-secondary-bg: #2c2c2e;
  --btn-secondary-text: #ebebf5;
  --btn-secondary-hover: #3a3a3c;
  --btn-danger-ghost-text: #ff6961;
  --btn-danger-ghost-bg: rgba(255,69,58,0.18);
  --btn-danger-ghost-border: rgba(255,69,58,0.4);
  --info-pill-bg: rgba(255,255,255,0.06);
  --info-box-bg: rgba(255,255,255,0.04);
  --stat-box-bg: rgba(255,255,255,0.05);
  --card-org-border: rgba(10,132,255,0.3);
  --card-part-border: rgba(191,90,242,0.3);

  /* v0.17.31: hero-box tokens — acompanham o tema (dark→dark, light→light),
     ligeiramente mais escuros que cards comuns pra dar destaque. */
  --hero-bg: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255,255,255,0.85);
  --hero-glass-bg: rgba(255,255,255,0.15);
  --hero-glass-bg-hover: rgba(255,255,255,0.25);
  --hero-glass-border: rgba(255,255,255,0.25);
  --hero-pill-active-bg: rgba(255,255,255,0.18);
  --hero-pill-active-border: rgba(255,255,255,0.35);
  --hero-pill-inactive-bg: rgba(0,0,0,0.12);
  --hero-pill-inactive-border: rgba(255,255,255,0.08);
  --hero-pill-glow: rgba(255,255,255,0.1);
}

[data-theme="light"] {
  /* CLARO — Apple Light Mode */
  --bg-darker: #f2f2f7;        /* systemGray6 */
  --bg-dark: #ffffff;          /* systemBackground */
  --bg-card: #ffffff;
  --bg-card-hover: #f9f9fb;

  --primary-color: #007aff;    /* systemBlue */
  --primary-hover: #0051d5;
  --secondary-color: #af52de;  /* systemPurple */
  --secondary-hover: #8e3ec4;

  --text-main: #1c1c1e;         /* near-black label */
  --text-muted: #6c6c70;        /* systemGray2 */
  --text-bright: #1c1c1e;       /* near-black — evita preto puro, idêntico ao text-main */

  --border-color: #d1d1d6;      /* systemGray4 */
  --border-focus: #007aff;

  --danger-color: #ff3b30;      /* systemRed */
  --success-color: #34c759;     /* systemGreen */
  --info-color: #007aff;

  /* Componentes */
  --btn-secondary-bg: #e5e5ea;  /* systemGray5 */
  --btn-secondary-text: #1c1c1e;
  --btn-secondary-hover: #d1d1d6;
  --btn-danger-ghost-text: #ff3b30;
  --btn-danger-ghost-bg: rgba(255,59,48,0.1);
  --btn-danger-ghost-border: rgba(255,59,48,0.3);
  --info-pill-bg: rgba(0,0,0,0.05);
  --info-box-bg: rgba(0,0,0,0.03);
  --stat-box-bg: rgba(0,0,0,0.04);
  --card-org-border: rgba(0,122,255,0.25);
  --card-part-border: rgba(175,82,222,0.25);

  /* v0.17.31: hero-box light — soft blue tint, dark text, slightly darker
     than white cards (#fff) to keep visual hierarchy. */
  --hero-bg: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  --hero-text: #1c1c1e;
  --hero-text-soft: rgba(28,28,30,0.7);
  --hero-glass-bg: rgba(0,0,0,0.06);
  --hero-glass-bg-hover: rgba(0,0,0,0.12);
  --hero-glass-border: rgba(0,0,0,0.18);
  --hero-pill-active-bg: rgba(0,0,0,0.12);
  --hero-pill-active-border: rgba(0,0,0,0.28);
  --hero-pill-inactive-bg: rgba(0,0,0,0.04);
  --hero-pill-inactive-border: rgba(0,0,0,0.10);
  --hero-pill-glow: rgba(0,0,0,0.08);
}

[data-theme="sunset"] {
  /* PÔR DO SOL — light warm cream/sépia (modo leitura) com accent amber */
  --bg-darker: #f5efe6;        /* warm cream darker */
  --bg-dark: #faf6f0;          /* cream */
  --bg-card: #fffdf8;          /* near-white warm */
  --bg-card-hover: #f5efe6;

  --primary-color: #b45309;    /* amber-700 */
  --primary-hover: #92400e;    /* amber-800 */
  --secondary-color: #c2410c;  /* orange-700 */
  --secondary-hover: #9a3412;

  --text-main: #44403c;         /* warm gray-700 */
  --text-muted: #78716c;        /* warm gray-500 */
  --text-bright: #1c1917;       /* warm gray-900 */

  --border-color: #d6cfc4;      /* cream border */
  --border-focus: #b45309;

  --danger-color: #b91c1c;      /* red-700 */
  --success-color: #15803d;     /* green-700 */
  --info-color: #b45309;

  /* Componentes */
  --btn-secondary-bg: #ede5d6;  /* lighter cream */
  --btn-secondary-text: #44403c;
  --btn-secondary-hover: #d6cfc4;
  --btn-danger-ghost-text: #b91c1c;
  --btn-danger-ghost-bg: rgba(185,28,28,0.08);
  --btn-danger-ghost-border: rgba(185,28,28,0.25);
  /* v0.17.43: opacidade alta pra info/stat boxes em Sunset — antes
     rgba 0.05/0.06 ficavam quase invisíveis quando o card pai tinha
     overlay escuro de venue photo (dark teal sobre foto), e o texto
     warm-gray-700 sumia. Cream opaco com 88% garante que o box é
     lido tanto sobre bg cream da página quanto sobre overlay escuro. */
  --info-pill-bg: rgba(255,253,248,0.88);
  --info-box-bg: rgba(255,253,248,0.88);
  --stat-box-bg: rgba(255,253,248,0.88);
  --card-org-border: rgba(180,83,9,0.3);
  --card-part-border: rgba(194,65,12,0.3);

  /* v0.17.31: hero-box light cream — warm amber tint, dark text. */
  --hero-bg: linear-gradient(135deg, #fed7aa 0%, #fcd34d 100%);
  --hero-text: #1c1917;
  --hero-text-soft: rgba(28,25,23,0.7);
  --hero-glass-bg: rgba(0,0,0,0.06);
  --hero-glass-bg-hover: rgba(0,0,0,0.12);
  --hero-glass-border: rgba(0,0,0,0.18);
  --hero-pill-active-bg: rgba(0,0,0,0.12);
  --hero-pill-active-border: rgba(0,0,0,0.28);
  --hero-pill-inactive-bg: rgba(0,0,0,0.04);
  --hero-pill-inactive-border: rgba(0,0,0,0.10);
  --hero-pill-glow: rgba(0,0,0,0.08);
}

[data-theme="ocean"] {
  /* OCEANO — dark navy profundo com accent cyan/teal */
  --bg-darker: #0c1e35;        /* deep navy */
  --bg-dark: #122a42;
  --bg-card: #1c3d5e;
  --bg-card-hover: #244c75;

  --primary-color: #22d3ee;    /* cyan-400 */
  --primary-hover: #67e8f9;    /* cyan-300 */
  --secondary-color: #38bdf8;  /* sky-400 */
  --secondary-hover: #7dd3fc;

  --text-main: #cce7f4;         /* pale blue */
  --text-muted: #7fb3d0;
  --text-bright: #f0f9ff;

  --border-color: #2c5e85;
  --border-focus: #22d3ee;

  --danger-color: #fb7185;      /* rose-400 */
  --success-color: #34d399;     /* emerald-400 */
  --info-color: #22d3ee;

  /* Componentes */
  --btn-secondary-bg: #245478;
  --btn-secondary-text: #a5f3fc;
  --btn-secondary-hover: #2e6590;
  --btn-danger-ghost-text: #fda4af;
  --btn-danger-ghost-bg: rgba(251,113,133,0.18);
  --btn-danger-ghost-border: rgba(251,113,133,0.40);
  --info-pill-bg: rgba(10,40,70,0.50);
  --info-box-bg: rgba(10,40,70,0.40);
  --stat-box-bg: rgba(10,40,70,0.40);
  --card-org-border: rgba(34,211,238,0.35);
  --card-part-border: rgba(56,189,248,0.35);

  /* v0.17.31: hero-box ocean — deep navy/teal, white text. */
  --hero-bg: linear-gradient(135deg, #0e4d6b 0%, #1e3a5f 100%);
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255,255,255,0.85);
  --hero-glass-bg: rgba(255,255,255,0.15);
  --hero-glass-bg-hover: rgba(255,255,255,0.25);
  --hero-glass-border: rgba(255,255,255,0.25);
  --hero-pill-active-bg: rgba(255,255,255,0.18);
  --hero-pill-active-border: rgba(255,255,255,0.35);
  --hero-pill-inactive-bg: rgba(0,0,0,0.20);
  --hero-pill-inactive-border: rgba(255,255,255,0.08);
  --hero-pill-glow: rgba(255,255,255,0.1);
}

:root {
  
  /* Tipografia */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Sombras e Efeitos */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-glow: 0 0 15px rgba(46, 160, 67, 0.4);
  
  /* Transições */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-darker);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  /* v1.6.16-beta: trava font scaling do sistema operacional.
     Sem isto, Android com "Tamanho de fonte" aumentado em
     Acessibilidade aplicava multiplicador sobre rem/em — fontes
     ficavam infladas e quebravam layouts calibrados (especialmente
     live scoring que tinha placar gigante não cabendo na tela em
     telas com font scaling acima de 100%). iOS Safari já ignora
     esse setting por default, mas Android Chrome aplicava.
     "none" trava em 100% (autor-defined sizes); "100%" tem mesmo
     efeito mas é a forma standard. Apps esportivos com UI
     calibrada milímetro precisam consistência cross-device. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
}

/* Utilitários */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.full-width { width: 100%; }

/* Scrollbar Bonita */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark); 
}
::-webkit-scrollbar-thumb {
  background: var(--bg-card-hover); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* ── Light theme overrides for inline styles ────────────────────────────── */
[data-theme="light"] .card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .card h4,
[data-theme="light"] .card h3,
[data-theme="light"] .card h2 {
  color: var(--text-bright) !important;
}

/* v0.17.31: hero-box agora usa --hero-* tokens definidos por tema (linhas
   58-99). Light themes têm gradient soft (claro) com texto escuro; dark
   themes mantêm gradient escuro com texto branco. Slightly darker que
   cards comuns pra preservar hierarquia visual. */
.hero-box {
  background: var(--hero-bg) !important;
  color: var(--hero-text) !important;
  filter: none !important;
}

/* v0.17.52: removido o override de v0.17.47 que forçava tokens dark
   nesses overlays. Pedido do usuário: "na partida casual o fundo está
   sempre escuro. deveria respeitar o tema escolhido pelo usuário."
   O bg dos overlays agora usa var(--bg-darker) (theme-aware) em vez
   de #0a0e1a hardcoded. Como bg respeita tema, os tokens de texto
   (--text-main, --text-bright) também devem respeitar — voltam a ser
   herdados naturalmente do tema ativo. Light themes ficam com bg cream
   + texto warm-gray; dark themes ficam com bg navy + texto branco. */
#casual-match-overlay,
#live-scoring-overlay {
  /* Em light themes (Claro/Pôr do Sol), os tints rgba(255,255,255,...)
     usados nos cards/elementos internos ficam invisíveis sobre bg cream.
     Override com tints dark equivalentes via attribute selector. Cobre
     os 4 valores mais comuns usados no overlay. */
}
[data-theme="light"] #casual-match-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="light"] #live-scoring-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="sunset"] #casual-match-overlay [style*="rgba(255,255,255,0.04)"],
[data-theme="sunset"] #live-scoring-overlay [style*="rgba(255,255,255,0.04)"] {
  background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] #casual-match-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="light"] #live-scoring-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="sunset"] #casual-match-overlay [style*="rgba(255,255,255,0.02)"],
[data-theme="sunset"] #live-scoring-overlay [style*="rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.03) !important;
}

[data-theme="light"] .topbar {
  background: var(--bg-dark);
  border-bottom-color: var(--border-color) !important;
}

[data-theme="light"] .badge {
  border: 1px solid var(--border-color);
}

/* Light theme: fix text colors in views */
[data-theme="light"] .text-muted,
[data-theme="light"] [style*="color:var(--text-muted)"] {
  color: var(--text-muted) !important;
}

/* Smooth theme transition */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body, .topbar, .card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ─── iOS input auto-zoom fix ─────────────────────────────────────────
 * Safari no iPhone dá zoom automático quando o usuário toca num input
 * cujo font-size é menor que 16px. Isso cortava o layout inteiro (topbar
 * saindo da tela, modais truncadas). A contramedida padrão é forçar
 * font-size:16px em TODOS os campos editáveis em devices touch — o zoom
 * só dispara abaixo desse limiar.
 *
 * Usamos @media (hover: none) + (pointer: coarse) para pegar iOS/Android
 * sem afetar layout desktop (onde 14px fica bonito em inputs compactos).
 */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Boot skeleton — pintado no FCP, removido quando o router monta a view.
   Adicionado em v0.17.62 pra reduzir LCP no mobile slow-4G (era 9.8s,
   alvo <4s). Ver docs/beta-readiness.md item #6 e docs/lighthouse/README.md.
   ═══════════════════════════════════════════════════════════════════ */
.skeleton-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .skeleton-block,
[data-theme="sunset"] .skeleton-block {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}

.skeleton-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  transform: translateX(-100%);
}

[data-theme="light"] .skeleton-shimmer::after,
[data-theme="sunset"] .skeleton-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 50%,
    transparent 100%
  );
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Respeita reduced-motion: usuários com prefers-reduced-motion não veem
   a animação shimmer, só o background sólido — comunica loading sem irritar. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after {
    animation: none;
  }
}

/* Screen-reader only: visualmente escondido mas lido por leitores de tela.
   Útil pra headings que existem por estrutura semântica mas não fazem parte
   do design visual. Padrão recomendado pelo WAI (https://www.w3.org/TR/wai-aria-practices-1.2/). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}