/* Pagina "Video" (video.html): inserimento del codice e viewer di una partita condivisa.
   Vive in un file a sé e non in css/style.css perché serve solo qui: style.css è già 160 KB e
   viene scaricato da ogni pagina, mentre questo lo scarica solo chi apre un video condiviso.

   L'impianto visivo ricalca MatchViewer/MontageViewer dell'app: player a sinistra, colonna
   laterale con tab a destra, stesse convenzioni di colore (blu navy per la selezione, verde per
   il punto, rosso per l'errore). */

/* L'attributo hidden nasconde con "display: none" dallo stylesheet del browser, che ha priorita'
   piu' bassa di qualunque regola scritta qui: .vw-loading { display: flex } lo sovrascriveva, e
   la rotellina di caricamento restava visibile anche senza aver inserito nessun codice. I tre
   stati della pagina (gate / loading / viewer) si alternano proprio con hidden, quindi la regola
   vale per tutti e tre. */
[hidden] { display: none !important; }

body.video-page {
  background: var(--grey-50);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.vw-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ── Stato 1: richiesta del codice ───────────────────────────────── */

.vw-gate {
  max-width: 520px;
  margin: 3rem auto;
  text-align: center;
}

.vw-gate-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--navy);
  margin: 0 0 0.6rem;
}

.vw-gate-sub {
  color: var(--grey-600);
  margin: 0 0 1.8rem;
  line-height: 1.5;
}

.vw-gate-form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Monospace e spaziato: il codice va letto o dettato un carattere alla volta, e le lettere
   maiuscole sono l'unica forma in cui viene generato (vedi ShareService nell'app). */
.vw-code-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  width: 250px;
  max-width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s;
}
.vw-code-input:focus { border-color: var(--navy); }
.vw-code-input::placeholder { color: #c3c8d4; letter-spacing: 0.22em; }

.vw-gate-btn { padding: 0.7rem 1.6rem; font-size: 1rem; }

.vw-gate-error {
  margin: 1.2rem auto 0;
  max-width: 420px;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ── Stato 2: caricamento ────────────────────────────────────────── */

.vw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5rem 1rem;
  color: var(--grey-600);
}

.vw-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--grey-200);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: vw-spin 0.8s linear infinite;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* ── Stato 3: viewer ─────────────────────────────────────────────── */

.vw-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.vw-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--navy);
}

.vw-teams {
  margin: 0.2rem 0 0;
  color: var(--grey-600);
  font-size: 0.95rem;
}

.vw-change-code {
  background: transparent;
  border: 1px solid var(--grey-200);
  border-radius: 9px;
  color: var(--grey-600);
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vw-change-code:hover { border-color: var(--navy); color: var(--navy); }

/* Player a sinistra, colonna delle tab a destra: sotto i 900px passano in colonna, con il player
   sopra, perché su un telefono la lista sotto al video è l'unico ordine leggibile. */
.vw-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.2rem;
  align-items: start;
}

.vw-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.vw-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vw-now {
  margin: 0.6rem 0 0;
  min-height: 1.2em;
  color: var(--grey-600);
  font-size: 0.9rem;
}

.vw-sidebar {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Stessa idea della sidebar del MatchViewer: scorre da sola, senza allungare la pagina. */
  max-height: calc(100vh - 220px);
}

.vw-tabs {
  display: flex;
  gap: 3px;
  padding: 0.6rem 0.6rem 0;
  border-bottom: 1px solid var(--grey-200);
  flex-shrink: 0;
}

.vw-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  background: rgba(0, 0, 0, 0.045);
  color: var(--grey-600);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vw-tab:hover:not(.vw-tab-active) { background: rgba(0, 0, 0, 0.08); color: var(--text); }

.vw-tab-active,
.vw-tab-active:hover {
  background: #fff;
  border-color: var(--grey-200);
  border-bottom-color: #fff;
  color: var(--navy);
  font-weight: 700;
}

.vw-tab-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
}

/* ── Elenco punti / clip ─────────────────────────────────────────── */

.vw-set-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 9px;
  padding: 0.45rem 0.7rem;
  margin: 0.5rem 0 0.35rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.vw-set-toggle:first-child { margin-top: 0; }
.vw-set-arrow { transition: transform 0.15s; }
.vw-set-toggle.vw-open .vw-set-arrow { transform: rotate(180deg); }
.vw-set-count { font-weight: 500; color: var(--grey-600); }

.vw-point {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 9px;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.35rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vw-point:hover { border-color: var(--blue-light); }
.vw-point.vw-current { border-color: var(--navy); background: rgba(5, 39, 103, 0.05); }

.vw-point-num {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--grey-600);
  margin-bottom: 0.3rem;
}

/* Nome squadra / punteggio / "+1", come nella card punto dell'app. */
.vw-score {
  display: grid;
  grid-template-columns: 1fr auto 1.6rem;
  gap: 0.1rem 0.5rem;
  align-items: center;
}
.vw-score-team  { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-score-value { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.vw-score-plus  { font-size: 0.78rem; font-weight: 700; color: #1e8e3e; visibility: hidden; }
.vw-score-plus.vw-shown { visibility: visible; }

/* ── Elenco azioni ───────────────────────────────────────────────── */

.vw-event {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  margin: 0 0 0.3rem 0.7rem;
  width: calc(100% - 0.7rem);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vw-event:hover { background: var(--grey-50); }
.vw-event.vw-current { border-color: var(--navy); background: rgba(5, 39, 103, 0.06); }

/* Stessa convenzione di colore delle azioni nell'app: punto, errore, palla ancora in gioco. */
.vw-event-kill    { border-left-color: #1e8e3e; }
.vw-event-error   { border-left-color: #d93025; }
.vw-event-in_play { border-left-color: var(--blue-light); }

.vw-event-label  { font-size: 0.85rem; font-weight: 600; color: var(--text); flex-shrink: 0; }
.vw-event-player { font-size: 0.78rem; color: var(--grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-event-metric { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--navy); flex-shrink: 0; }
.vw-event-quality {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grey-600);
  flex-shrink: 0;
}

/* ── Statistiche ─────────────────────────────────────────────────── */

.vw-stats-controls {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.vw-chip {
  border: 1px solid var(--grey-200);
  background: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey-600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vw-chip:hover { border-color: var(--blue-light); }
.vw-chip.vw-chip-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.vw-stats-team {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}

.vw-stats-wrap { overflow-x: auto; margin-bottom: 1.2rem; }

.vw-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.vw-stats-table th,
.vw-stats-table td {
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid var(--grey-200);
  text-align: center;
}
.vw-stats-table th { color: var(--grey-600); font-weight: 600; }
.vw-stats-table thead tr:first-child th { color: var(--navy); font-weight: 700; }
.vw-stats-table td:first-child,
.vw-stats-table th:first-child { text-align: left; }
.vw-stats-table tbody tr:hover { background: var(--grey-50); }
.vw-stats-table tfoot td { font-weight: 700; color: var(--navy); }

/* Separatore fra i tre gruppi di colonne (Battuta / Ricezione / Attacco). */
.vw-group-start { border-left: 1px solid var(--grey-200); }

.vw-empty {
  color: var(--grey-600);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 1rem;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.vw-footer {
  padding: 1.2rem 1rem;
  text-align: center;
  color: var(--grey-600);
  font-size: 0.85rem;
}
.vw-footer a { color: var(--navy); font-weight: 600; }

/* ── Schermi stretti ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .vw-body { grid-template-columns: minmax(0, 1fr); }
  .vw-sidebar { max-height: none; }
  .vw-tab-body { max-height: 60vh; }
}