/* ============================================================================
 * tm-theme.css — Design system unificato (OneDay Cup)
 * ============================================================================
 *
 * PERCHÉ ESISTE
 * Prima di questo file ognuna delle 29 pagine ridefiniva il proprio `:root`
 * con la propria palette, e i gradienti ambientali hardcodavano il viola
 * Multipalo. Risultato: il `primaryColor` del torneo (impostato da
 * tm-tournament-state.js su `--tm-primary-color`) non arrivava quasi mai a
 * schermo, e due tornei diversi apparivano identici.
 *
 * COME FUNZIONA
 * Qui ridefiniamo i VALORI dei token già usati dalle pagine (--bg, --card,
 * --stroke, --muted, --r-*, ...). Va incluso PER ULTIMO nel <head>, dopo gli
 * <style> inline, così vince sulla cascata: tutte le regole esistenti che
 * usano var(--...) si ricolorano da sole, senza toccare le singole pagine.
 *
 * Ogni tinta è derivata da --tm-primary-color con color-mix(): cambiare
 * torneo ricolora l'intera app, ambiente incluso.
 *
 * NB: non usare `!important` qui se non strettamente necessario — l'ordine di
 * inclusione basta. Le override puntuali stanno in fondo, sezione COMPONENTI.
 * ========================================================================= */

:root {
  /* ── Brand (sorgente: tm-tournament-state.js / tournaments/{tid}.primaryColor) */
  --tm-primary-color: #667eea;
  --primary: var(--tm-primary-color, #667eea);

  /* Scala derivata dal primario — tiene la hue del torneo */
  --primary-100: color-mix(in oklab, var(--primary) 22%, white);
  --primary-300: color-mix(in oklab, var(--primary) 62%, white);
  --primary-500: var(--primary);
  --primary-700: color-mix(in oklab, var(--primary) 74%, black);
  --primary-900: color-mix(in oklab, var(--primary) 42%, black);

  /* Velature del primario, per fondi/bordi/glow */
  --primary-a06: color-mix(in oklab, var(--primary) 6%, transparent);
  --primary-a12: color-mix(in oklab, var(--primary) 12%, transparent);
  --primary-a20: color-mix(in oklab, var(--primary) 20%, transparent);
  --primary-a35: color-mix(in oklab, var(--primary) 35%, transparent);

  /* `--secondary` resta per retrocompat, ma ora è derivato (non più viola fisso) */
  --secondary: var(--primary-700);

  /* Testo sopra il primario: bianco o nero secondo il contrasto */
  --on-primary: oklch(from var(--primary) clamp(0, (0.62 - l) * 1000, 1) 0 0);

  /* ── Superfici — near-black leggermente tinto della hue del torneo */
  --bg: color-mix(in oklab, var(--primary) 5%, #06080d);
  --surface-1: color-mix(in oklab, var(--primary) 6%, rgba(255, 255, 255, 0.045));
  --surface-2: color-mix(in oklab, var(--primary) 8%, rgba(255, 255, 255, 0.075));
  --surface-3: color-mix(in oklab, var(--primary) 10%, rgba(255, 255, 255, 0.11));

  /* Alias legacy usati dalle pagine esistenti */
  --card: var(--surface-1);
  --card-strong: var(--surface-2);

  --stroke: color-mix(in oklab, var(--primary) 14%, rgba(255, 255, 255, 0.11));
  --stroke-strong: color-mix(in oklab, var(--primary) 30%, rgba(255, 255, 255, 0.2));

  /* ── Testo */
  --text: #f6f8fc;
  --muted: rgba(246, 248, 252, 0.74);
  --muted-2: rgba(246, 248, 252, 0.52);
  --muted-3: rgba(246, 248, 252, 0.36);

  /* ── Semantici */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --info: var(--primary-300);

  /* ── Raggi */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ── Ombre + glow del torneo */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow: 0 14px 46px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.5);
  --glow: 0 10px 34px var(--primary-a35);

  /* ── Tipografia */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Safe area (PWA standalone su iOS) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Altezza reale della tab bar flottante: usata per il padding di fine pagina */
  --tabbar-h: calc(74px + var(--safe-b));
}

/* ============================================================================
 * AMBIENTE — il glow di sfondo segue il colore del torneo
 * (prima erano rgba(102,126,234) e rgba(118,75,162) hardcoded = sempre viola)
 * ========================================================================= */

body,
body.matches-theme,
.page,
.page-bg {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 22% -6%, var(--primary-a35), transparent 68%),
    radial-gradient(900px 620px at 108% 42%, var(--primary-a20), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  background-attachment: fixed;
  color: var(--text);
}

/* ============================================================================
 * FIX STRUTTURALI
 * ========================================================================= */

/* La tab bar è flottante e fixed: senza questo il contenuto finisce sotto.
   Era il bug visibile su /squadre (ultima card tagliata). */
body:has(.tm-tabbar-wrap) {
  padding-bottom: calc(var(--tabbar-h) + 14px);
}

/* Il badge versione galleggiava sopra la tab bar (id reale: tm-version-badge) */
#tm-version-badge,
.tm-version-badge,
#tm-version,
.tm-version,
[data-tm-version] {
  bottom: calc(var(--tabbar-h) + 10px) !important;
  opacity: 0.45;
  font-size: 10px;
}

/* ============================================================================
 * COMPONENTI
 * ========================================================================= */

/* ── Tab bar: stato attivo in colore torneo, non più grigio ── */
.tm-tabbar {
  background: color-mix(in oklab, var(--primary) 10%, rgba(8, 11, 17, 0.94)) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  /* era `hidden` e tagliava l'indicatore ::before della tab attiva */
  overflow: visible !important;
}

.tm-tabbar-btn {
  color: var(--muted-2) !important;
  position: relative;
}

.tm-tabbar-btn.active {
  color: var(--text) !important;
  background: var(--primary-a20) !important;
  box-shadow: inset 0 0 0 1px var(--primary-a35);
}

/* Indicatore superiore sulla tab attiva */
.tm-tabbar-btn.active::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}

.tm-tabbar-btn.active i {
  color: var(--primary-300) !important;
}

/* ── Monogramma squadra: sostituisce il cerchio bianco col placeholder ──
   La hue arriva da JS (--mono-hue) derivata dal nome: ogni squadra ha un
   colore stabile e riconoscibile anche senza logo caricato. */
.tm-monogram {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(20px, 7.5vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
  background:
    linear-gradient(150deg,
      hsl(var(--mono-hue, 240) 62% 52%),
      hsl(calc(var(--mono-hue, 240) + 26) 58% 34%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.34);
  user-select: none;
}

/* ── Card squadra: più compatta, meno "blob bianco", nome protagonista ── */
.team-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-card:hover,
.team-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--stroke-strong) !important;
  box-shadow: var(--glow);
}

.team-card:active {
  transform: scale(0.985);
}

/* Il logo non è più un cerchio bianco pieno: fondo neutro e bordo sottile.
   Scopato a `img` per non schiacciare il gradiente di .tm-monogram, che usa
   lo stesso nome di classe per ereditarne dimensioni e posizione. */
.team-card img.team-logo {
  background: var(--surface-3) !important;
  border: 1px solid var(--stroke);
  border-radius: var(--r-full);
  object-fit: cover;
}

/* Il monogramma riusa .team-logo per geometria, ma tiene il proprio fondo */
.team-card .team-logo.tm-monogram {
  border: 1px solid var(--stroke);
}

/* Share: azione secondaria, non deve competere col tap sulla card */
.team-share-btn,
.share-btn {
  background: var(--surface-2) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--muted-2) !important;
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.team-share-btn:hover,
.share-btn:hover {
  opacity: 1;
  color: var(--text) !important;
}

/* ── Header/appbar: tinta del torneo invece del navy hardcoded ──
   Le pagine usano nomi diversi (.header, header, .topbar) e fondi fissi tipo
   rgba(11,15,22,.92): li riportiamo tutti sulla hue del torneo. */
body.matches-theme header,
.header,
.topbar,
.app-header {
  background: color-mix(in oklab, var(--primary) 10%, rgba(7, 10, 16, 0.9)) !important;
  border-color: var(--stroke) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Bottone "indietro" e affini dentro l'header */
.backBtn {
  background: var(--surface-2) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}

.backBtn:hover {
  background: var(--primary-a20) !important;
  border-color: var(--stroke-strong) !important;
}

/* ── Utility riusabili ── */
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: var(--primary-a12);
  border: 1px solid var(--primary-a20);
  color: var(--primary-100);
  font: 700 12px/1 var(--font);
}

.tm-btn-primary {
  background: linear-gradient(135deg, var(--primary-300), var(--primary-700));
  color: var(--on-primary);
  border: none;
  border-radius: var(--r-md);
  font: 800 15px/1 var(--font);
  padding: 13px 18px;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform 0.16s ease, filter 0.16s ease;
}

.tm-btn-primary:hover { filter: brightness(1.07); }
.tm-btn-primary:active { transform: scale(0.98); }

/* Focus visibile e coerente (accessibilità) */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

/* Fallback per browser senza color-mix(): palette statica ragionevole,
   così l'app non si sgretola su webview vecchie. */
@supports not (color: color-mix(in oklab, red 50%, blue)) {
  :root {
    --bg: #080b12;
    --surface-1: rgba(255, 255, 255, 0.055);
    --surface-2: rgba(255, 255, 255, 0.085);
    --surface-3: rgba(255, 255, 255, 0.12);
    --card: var(--surface-1);
    --card-strong: var(--surface-2);
    --stroke: rgba(255, 255, 255, 0.12);
    --stroke-strong: rgba(255, 255, 255, 0.22);
    /* Fallback statico per motori senza color-mix: qui i valori DEVONO restare
       letterali (niente color-mix, niente var che rimandino a color-mix). */
    --primary: #667eea;
    --primary-100: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-500: #667eea;
    --primary-700: #4c51bf;
    --secondary: #4c51bf;
    --primary-a06: rgba(102, 126, 234, 0.06);
    --primary-a12: rgba(102, 126, 234, 0.12);
    --primary-a20: rgba(102, 126, 234, 0.2);
    --primary-a35: rgba(102, 126, 234, 0.35);
    --glow: 0 10px 34px rgba(102, 126, 234, 0.35);
    --on-primary: #fff;
  }
}
