/*
  REPORT UTENTI (report.php) — pagina admin: barra stagione/azioni, box
  totali, filtri, tabella "a card" con famiglie (genitore + minori
  annidati, stesso colore di riga). Le pill di qualifica/squadra usano
  colori storici del gestionale (non le varianti di badges.css: qui
  servono più sfumature di quante badges.css ne preveda e questi stessi
  colori sono condivisi con scheda.php/report-atleti.php).
*/

/* ===== Barra stagione + azioni admin ===== */
.area-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  background: var(--color-bg-header);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.area-info-bar-left,
.area-info-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.area-info-bar-right {
  margin-left: auto;
}

.area-info-stagione strong {
  color: var(--color-brand);
}

@media (max-width: 850px) {
  .area-info-bar {
    flex-direction: column;
    text-align: center;
  }

  .area-info-bar-right {
    margin-left: 0;
    justify-content: center;
  }
}

/* .alert-success è ora in css/components/alerts.css (componente condiviso,
   caricato da ogni pagina tramite main.css): qui c'era una versione quasi
   identica, spostata per avere un'unica definizione invece di due che
   potevano andare fuori sincrono. */

/* ===== Box totali ===== */
.info-box {
  max-width: 900px;
  margin: 0 auto var(--space-5);
  padding: var(--space-3);
  text-align: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.info-box .pill {
  margin: 3px;
}

/* Sotto i 680px le pill mostrano la sigla breve invece del testo intero */
.pill-text-short {
  display: none;
}

@media (max-width: 680px) {
  .pill-text-full {
    display: none;
  }

  .pill-text-short {
    display: inline;
  }
}

/* ===== Filtri ===== */
.filters-container {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80% */
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.filters-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.filter-group {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-group label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.filter-group input[type="text"],
.filter-group select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-group input[type="text"]:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.filter-group .radio-group,
.filter-group .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  min-height: 44px;
}

.radio-group label,
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-regular);
  cursor: pointer;
  margin: 0;
}

.radio-group input,
.checkbox-row input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-brand);
}

/* ===== Barra azioni email multiple ===== */
.email-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

.email-actions-bar__left,
.email-actions-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#selectedCount {
  padding: var(--space-1) var(--space-3);
  background: var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

#selectedCount.has-selection {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

/* ===== Tabella report — grid a colonne fisse (somma = 1200px = --container-max) ===== */
.report-table-scroll {
  overflow-x: auto;
  width: 100%;
  padding-bottom: var(--space-4);
}

.records-box-report {
  display: flex;
  flex-direction: column;
  min-width: 900px;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.records-header-report,
.user-card-report {
  display: grid;
  grid-template-columns: 30px 350px 110px 130px 250px 185px 145px;
  font-size: var(--text-sm);
  align-items: center;
}

.records-header-report {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
  padding: var(--space-2) 0;
}

.records-header-report > div {
  padding-left: var(--space-3);
}

/* Righe scure alternate come in organico.css/result-row.css: dark-700 e
   gray-600, testo bianco. L'alternanza segue le famiglie (genitore + i
   suoi minori restano sempre nello stesso tono, vedi $row_color_class in
   report.php), non le singole righe. */
.user-card-report {
  background: rgba(28, 29, 34, 0.8); /* var(--color-dark-700) all'80% */
  color: var(--color-text-inverse);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.user-card-report.row-gray {
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80% */
}

/* Colonne dispari leggermente più chiare delle pari (stesso effetto del
   report legacy di SITO). Assegnato per classe di colonna (non nth-child):
   il box nome/cognome del genitore copre più righe e i minori non hanno
   una propria cella "nome" nel DOM (è dentro il box, vedi .tesserato-box),
   quindi il conteggio dei figli per riga non è più un multiplo fisso di 7. */
.user-card-report .checkbox-cell,
.user-card-report .data-nascita,
.user-card-report .email-col,
.user-card-report .squadra {
  background: rgba(255, 255, 255, 0.2);
}

.user-card-report .tesserato-cell,
.user-card-report .cellulare,
.user-card-report .qualifica {
  background: rgba(0, 0, 0, 0.35);
}

.user-card-report > div {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.user-card-report .checkbox-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-card-report .user-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-brand);
}

/* Colonna "Nome e cognome": un unico box bianco stondato come
   .table-referente (tables.css), ma testo nero invece che rosso — copre
   genitore + tutti i suoi minori insieme, non una card per riga. Lo span
   di righe (grid-row) è impostato inline in report.php perché dipende
   dal numero di minori della famiglia. */
.tesserato-cell {
  display: flex;
  align-items: center;
  padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.tesserato-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}

.tesserato-box__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tesserato-box__line--minore {
  padding-left: var(--space-4);
}

.tesserato-box a {
  color: inherit;
  text-decoration: underline;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

.tesserato-box .tesserato__branch {
  color: var(--color-text-muted);
}

/* Atleti temporanei (pre-registrati, non ancora iscritti per davvero —
   vedi register.php): visibili di default in tabella, segnalati col
   nome in rosso per distinguerli a colpo d'occhio dai tesserati veri.
   Sovrascrive .tesserato-box a (color:inherit) grazie alla seconda
   classe, non serve altro. */
.tesserato-box a.tesserato-nome--temp {
  color: var(--color-danger);
}

.icon-user-table svg circle,
.icon-user-table svg path {
  stroke: var(--color-brand);
}

.icon-user-table--minore svg circle,
.icon-user-table--minore svg path {
  stroke: var(--color-red-500);
}

.data-nascita,
.cellulare,
.email-col {
  display: flex;
  align-items: center;
  padding-left: var(--space-3);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualifica,
.squadra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: var(--space-3);
}

/* ===== Pill — colori fissi del gestionale ===== */
.pill {
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--text-xs);
  line-height: 1;
}

.pill-qualifica-totale     { background: rgb(161, 161, 161); }
.pill-qualifica-atleta     { background: rgb(255, 99, 3); }
.pill-qualifica-genitore   { background: #f079be; }
.pill-qualifica-organico   { background: #3577d9; }
.pill-qualifica-utente     { background: #9c9116; }
.pill-qualifica-associato  { background: #80339e; }
.pill-qualifica-altro      { background: #6c757d; }

.pill-squadra-atleta     { background: rgb(255, 99, 3); }
.pill-squadra-assegnata  { background: #3577d9; }

/* Varianti usate da report-atleti.php/scheda.php (iscrizione, pagamenti,
   certificato medico): stessi colori del gestionale storico. Si combinano
   con .pill (es. class="pill pill-ok"), tranne .pill-rata che è
   autonoma (usata anche da sola per importi/quote, senza .pill). */
.pill-ok          { background: #2ecc71; }
.pill-ko          { background: #ec2705; }
.pill-scaduto     { background: #e18709; }
.pill-non-rinnova { background: #6c757d; }

.pill-rata {
  display: inline-block;
  background: #3577d9;
  color: #fff;
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.pill-date-ok {
  margin-left: 4px;
}

/* Link che avvolge una pill (es. certificato medico -> certificato.php) */
a.pill-link,
a.pill-link:visited {
  text-decoration: none;
  color: #fff;
}

a.pill-link:hover {
  color: #fff;
  opacity: 0.9;
}

/* Bordo di evidenza per i certificati "non agonistica" */
.pill-non-agonistica {
  border: 3px solid var(--color-brand);
}

.ruolo-extra {
  opacity: 0.85;
}

.hidden-placeholder {
  visibility: hidden;
  height: 20px;
  width: 0;
  display: inline-block;
}

/* ===== Stato vuoto ===== */
.empty-state-report {
  color: var(--color-danger);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  text-align: center;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: rgba(211, 47, 47, 0.1);
  border-radius: var(--radius-md);
}

/* ===== Scrollbar orizzontale fissa in basso (tabella più larga dello schermo) ===== */
.horizontal-scroll-helper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: var(--z-dropdown);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
  display: none;
}

.horizontal-scroll-helper-content {
  height: 1px;
}

@media (max-width: 850px) {
  .records-box-report,
  .records-header-report,
  .user-card-report {
    min-width: 1200px;
    width: 1200px;
  }
}