/* ─────────────────────────────────────────────────────────────────
   Layout: pagine, viste, sezioni.
   ───────────────────────────────────────────────────────────────── */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  gap: var(--sp-4);
  overflow: hidden auto;
}
.page--no-pad { padding: 0; }
.page__section { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Schermata Login ──────────────────────────────────────────── */
.login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--c-bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.login-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.login-card__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--c-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.login-card__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
.login-card__subtitle { font-size: var(--fs-body-sm); color: var(--c-text-muted); }
.login-error {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
}

/* ── Tab navigator (tabs + view) ──────────────────────────────── */
.view { display: none; flex-direction: column; gap: var(--sp-4); }
.view.is-active { display: flex; }

/* ── Pre-match / configurazione partita ──────────────────────── */
.match-form { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.match-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ha-toggle { display: flex; gap: var(--sp-2); }
.ha-toggle .btn { flex: 1; }

/* ── Roster (presenze) ────────────────────────────────────────── */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.roster__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  min-height: var(--tap-rec);
}
.roster__item.is-present {
  background: var(--c-success-soft);
  border-color: var(--c-success);
}
.roster__num {
  font-size: 17px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  width: 28px;
  text-align: center;
}
.roster__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Court (formazione) ───────────────────────────────────────── */
.court {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  position: relative;
  aspect-ratio: 3 / 2;
}
.court::before {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  top: 50%;
  height: 2px;
  background: var(--c-border-strong);
  transform: translateY(-1px);
}
.court__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  text-align: center;
  position: relative;
  min-height: 84px;
  cursor: pointer;
}
.court__slot.is-filled {
  border-style: solid;
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
}
.court__slot-pos {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--c-text-subtle);
}
.court__slot-num { font-size: 22px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.court__slot-name { font-size: 11px; font-weight: var(--fw-medium); color: var(--c-brand-text); margin-top: 2px; }

.bench {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-surface-sunk);
  border-radius: var(--r-md);
  min-height: 64px;
}
.bench__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  min-height: 36px;
}

/* ── Stats table (riepilogo set) ─────────────────────────────── */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.stats-table th, .stats-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--c-divider);
}
.stats-table th { color: var(--c-text-muted); font-weight: var(--fw-bold); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table tr:hover td { background: var(--c-surface-alt); }

/* ── Vista Coach ──────────────────────────────────────────────── */
.coach-hero {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.coach-hero__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
}
.coach-hero__team-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-align: center;
}
.coach-hero__sets {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
.set-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-surface-sunk);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
}
.set-chip.is-live {
  background: var(--c-brand);
  color: var(--c-text-on-brand);
  animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

/* ── Utilities responsive ─────────────────────────────────────── */
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

/* Stack verticale con divisori (per liste flat) */
.divider { height: 1px; background: var(--c-divider); border: none; margin: var(--sp-3) 0; }

/* Schermo piccolo (≤ 380px): riduci tipografia score */
@media (max-width: 380px) {
  :root { --fs-display: 32px; }
  .player-card { min-height: 78px; }
  .player-card__num { font-size: 22px; }
}