/* Archivio sportivo — direzione visiva: foglio di cronometraggio.
   Regole sottili, maiuscoletto spaziato, cifre tabellari. La sola cosa
   che grida sono i conteggi delle righe: sono la forma dell'archivio. */

:root {
  --paper:       #E9EBEE;
  --surface:     #FFFFFF;
  --ink:         #0E1620;
  --ink-soft:    #5C6875;
  --rule:        #C7CDD4;
  --signal:      #0B3FD1;
  --signal-soft: #E4EAFB;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --- intestazione ------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
}
.topbar__marchio {
  font: 700 22px/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar__versione {
  font: 500 10px/1 var(--data);
  letter-spacing: 0.06em;
  /* Piu' tenue del nome utente ma sopra 4.5:1 sul fondo scuro: a 10px
     un grigio piu' scuro scende sotto la soglia di leggibilita'. */
  color: #7D8B99;
}
.topbar__archivio {
  font: 600 13px/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  border-left: 1px solid #3A4756;
  padding-left: 16px;
}
.topbar__cambia {
  font: 500 10px/1 var(--data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93A1B0;
}
.topbar__cambia:hover { color: var(--paper); }
.topbar__spazio { flex: 1; }
.topbar__utente {
  font: 500 11px/1 var(--data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93A1B0;
}
.topbar form { margin: 0; }
.topbar button {
  background: none;
  border: 1px solid #3A4756;
  color: var(--paper);
  font: 500 10px/1 var(--data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}
.topbar button:hover { border-color: var(--paper); }

/* --- impianto ----------------------------------------------------------- */

.impianto {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: calc(100vh - 49px);
}

.rail {
  border-right: 1px solid var(--rule);
  padding: 20px 0;
  position: sticky;
  top: 0;
}
.rail__titolo,
.eyebrow {
  font: 500 10px/1 var(--data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rail__titolo { padding: 0 20px 12px; }

.rail__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.rail__voce:hover { background: var(--signal-soft); text-decoration: none; }
.rail__voce[aria-current="page"] {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--signal);
}
.rail__nome {
  font: 600 17px/1.1 var(--display);
  letter-spacing: 0.02em;
}
.rail__voce[aria-current="page"] .rail__nome { color: var(--signal); }

/* Elemento firma: il conteggio righe in cifre condensate tabellari. */
.rail__conto {
  font: 700 26px/0.8 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  opacity: 0.7;
}
.rail__conto--vista {
  font: 500 10px/1 var(--data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 1;
}

.contenuto { padding: 24px 28px 64px; min-width: 0; }

/* --- indice ------------------------------------------------------------- */

.frontespizio { max-width: 720px; }
.frontespizio h1 {
  font: 700 clamp(34px, 6vw, 54px)/0.95 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 6px 0 14px;
}
.frontespizio p { color: var(--ink-soft); max-width: 52ch; }

.indice { margin-top: 32px; border-top: 1px solid var(--rule); }
.indice__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.indice__riga:hover { text-decoration: none; }
/* Archivio dichiarato ma non ancora caricato: si vede che c'e', si vede
   che non si apre. */
.indice__riga--assente { color: var(--ink-soft); }
.indice__riga--assente .indice__nome { opacity: 0.55; }
.indice__nome a { color: inherit; }
.indice__nome a:hover { color: var(--signal); text-decoration: none; }

/* Azioni in fondo alla riga: aprire, e per chi amministra caricare. */
.azioni {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 10px/1 var(--data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.azioni .inerte { color: var(--rule); }
.indice__riga:hover .indice__nome { color: var(--signal); }
.indice__nome {
  font: 600 26px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.indice__colonne {
  font: 400 12px/1.5 var(--data);
  color: var(--ink-soft);
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.indice__conto {
  font: 700 40px/0.8 var(--display);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.indice__conto small {
  display: block;
  font: 500 9px/1 var(--data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 5px;
}

/* --- griglia dati ------------------------------------------------------- */

.testata { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.testata h1 {
  font: 700 30px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 4px 0 0;
}
.testata__conteggio {
  font: 400 12px/1 var(--data);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.involucro { margin-top: 18px; background: var(--surface); border: 1px solid var(--rule); }

/* La griglia scorre dentro di se', non insieme alla pagina: vedi il blocco
   "schermo largo" in fondo, dove prende l'altezza che avanza. */
.scorrevole { overflow: auto; }

table.dati { border-collapse: collapse; width: 100%; font: 400 13px/1.4 var(--data); }
table.dati th, table.dati td {
  padding: 7px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
table.dati thead th {
  position: sticky;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font: 500 10px/1.2 var(--data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: none;
}
table.dati thead th a { color: var(--paper); display: block; }
table.dati thead th a:hover { color: #9FB6F5; text-decoration: none; }
table.dati thead th .verso { color: #6E8BE0; }
table.dati tbody tr:nth-child(even) { background: #F6F7F9; }
table.dati tbody tr:hover { background: var(--signal-soft); }
table.dati td { font-variant-numeric: tabular-nums; }
table.dati td.nullo { color: var(--rule); }

/* Prima colonna ancorata a sinistra: scorrendo in orizzontale su schermo
   piccolo si perdeva il riferimento di quale riga si stia leggendo. Lo
   sfondo va dichiarato esplicitamente, altrimenti il contenuto delle altre
   colonne trasparirebbe sotto. */
table.dati thead th:first-child,
table.dati tbody td:first-child,
table.dati tr.filtri td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
table.dati thead th:first-child { z-index: 3; background: var(--ink); }
table.dati tbody tr:nth-child(odd)  td:first-child { background: var(--surface); }
table.dati tbody tr:nth-child(even) td:first-child { background: #F6F7F9; }
table.dati tbody tr:hover td:first-child { background: var(--signal-soft); }
table.dati tr.filtri td:first-child { background: #F0F2F5; }
table.dati tbody td:first-child,
table.dati thead th:first-child {
  box-shadow: inset -1px 0 0 var(--rule);
}

tr.filtri td { padding: 6px 8px; background: #F0F2F5; }
tr.filtri input {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 5px 7px;
  font: 400 12px var(--data);
  color: var(--ink);
}
tr.filtri input:focus { border-color: var(--signal); outline: none; }

.vuoto { padding: 40px 16px; text-align: center; color: var(--ink-soft); }
.vuoto strong { display: block; font: 600 20px/1.2 var(--display); text-transform: uppercase; color: var(--ink); }

/* --- paginazione -------------------------------------------------------- */

.paginazione {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rule);
  font: 400 11px/1 var(--data);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.paginazione a, .paginazione span.inerte {
  border: 1px solid var(--rule);
  padding: 6px 10px;
  color: var(--ink);
}
.paginazione a:hover { border-color: var(--signal); text-decoration: none; }
.paginazione span.inerte { color: var(--rule); }
.paginazione .posizione { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- accesso ed errori -------------------------------------------------- */

.centrata {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.scheda {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--signal);
  padding: 28px;
}
.scheda h1 {
  font: 700 28px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 8px 0 20px;
}
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font: 500 10px/1 var(--data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 9px 10px;
  font: 400 14px var(--body);
  color: var(--ink);
  background: var(--surface);
}
.campo input:focus { border-color: var(--signal); outline: none; }
.bottone {
  width: 100%;
  background: var(--signal);
  color: #fff;
  border: none;
  padding: 11px;
  font: 500 11px/1 var(--data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.bottone:hover { background: #0935AB; }
.avviso {
  border-left: 3px solid #B3261E;
  background: #FBEAE8;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
/* Stesso impianto dell'avviso, per l'esito riuscito. */
.riuscito {
  border-left: 3px solid var(--signal);
  background: var(--signal-soft);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
/* Sopra la pagina dell'archivio, a tutta larghezza come la barra pilota. */
.riuscito--barra {
  margin: 0;
  padding: 10px 24px;
  border-left: none;
  border-bottom: 1px solid var(--rule);
}
.avviso p, .riuscito p { margin: 0 0 6px; }
.avviso p:last-child, .riuscito p:last-child { margin-bottom: 0; }
.avviso .minuto, .riuscito .minuto { color: var(--ink-soft); }

/* Doppia classe: .scheda arriva dopo nel foglio e altrimenti vincerebbe lei. */
.scheda.scheda--larga { max-width: 560px; margin-top: 18px; }
.campo input[type="file"] {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 9px 10px;
  font: 400 13px var(--data);
  color: var(--ink);
}
.nota {
  font-size: 13px;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 12px;
  margin: 16px 0;
}

/* --- htmx e mobile ------------------------------------------------------ */

.involucro.htmx-request { opacity: 0.55; transition: opacity 120ms ease; }

@media (max-width: 820px) {
  .impianto { grid-template-columns: 1fr; }
  .rail {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 14px 0 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
  }
  .rail__titolo { display: none; }
  .rail__voce {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-top: none;
    border-right: 1px solid var(--rule);
    padding: 10px 16px 14px;
    min-height: 44px;
  }
  .rail__voce[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--signal); }
  .rail__conto { font-size: 20px; }
  .contenuto { padding: 18px 16px 48px; }
  .indice__nome { font-size: 21px; }
  .indice__conto { font-size: 30px; }

  /* Bersagli tattili: sotto i 44px il dito sbaglia. */
  .indice__riga { padding: 16px 0; min-height: 44px; }
  .paginazione { flex-wrap: wrap; gap: 6px; padding: 12px; }
  .paginazione a, .paginazione span.inerte {
    padding: 12px 14px;
    min-width: 44px;
    text-align: center;
  }
  .paginazione .posizione { margin-left: 0; width: 100%; padding-top: 4px; }
  tr.filtri input { min-width: 110px; padding: 9px 8px; font-size: 13px; }
  table.dati th, table.dati td { padding: 10px 12px; }
  .topbar { padding: 12px 16px; }
  .topbar__marchio { font-size: 18px; }
  .topbar__versione { display: none; }
  .topbar button { padding: 10px 12px; }
}

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

/* --- barra del pilota attivo -------------------------------------------- */

.barra-pilota {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.barra-pilota__form { display: flex; align-items: center; gap: 8px; margin: 0; }
.barra-pilota label {
  font: 500 10px/1 var(--data);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.barra-pilota select {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1 var(--display);
  letter-spacing: 0.02em;
  padding: 7px 10px;
  max-width: 260px;
}
.barra-pilota select:focus { border-color: var(--signal); outline: none; }
.barra-pilota__nota {
  font: 400 11px/1 var(--data);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.barra-pilota form { margin: 0; }
button.mini {
  background: none;
  border: 1px solid var(--signal);
  color: var(--signal);
  font: 500 10px/1 var(--data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 11px;
  cursor: pointer;
}
button.mini:hover { background: var(--signal); color: #fff; }
button.mini--tenue { border-color: var(--rule); color: var(--ink-soft); }
button.mini--tenue:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.senza-filtro { color: #B3261E; }

@media (max-width: 820px) {
  .barra-pilota { padding: 10px 16px; gap: 8px; }
  .barra-pilota select { font-size: 16px; padding: 10px; min-height: 44px; }
  button.mini { padding: 11px 12px; min-height: 44px; }
}

.barra-pilota__separatore {
  width: 1px;
  align-self: stretch;
  background: var(--rule);
  margin: 0 2px;
}
button.mini--attivo { background: var(--signal); color: #fff; }
button.mini--attivo:hover { background: #0935AB; }

@media (max-width: 820px) {
  .barra-pilota__separatore { display: none; }
}

/* --- schermo largo: la pagina sta in una schermata ---------------------- */

/* Su schermo largo la pagina non scorre: scorrono i due riquadri che hanno
   davvero contenuto in eccesso, l'elenco delle tabelle e la griglia. Serve
   perche' la barra di scorrimento orizzontale della griglia sta in fondo al
   suo riquadro: se il riquadro e' alto quanto la tabella, quella barra
   finisce oltre mille pixel sotto il bordo dello schermo.

   L'altezza non e' calcolata con una costante ma lasciata decidere al
   flex: la griglia prende quel che avanza dopo testata e paginazione,
   qualunque sia l'altezza della finestra o l'ingombro di cio' che le sta
   sopra. Su telefono nulla di tutto questo: li' si scorre col dito e la
   pagina si comporta normalmente. */
@media (min-width: 821px) {
  body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .centrata { flex: 1; min-height: 0; }

  /* align-items:start e righe automatiche farebbero dimensionare la cella
     sul contenuto, che cosi' sfonda il contenitore invece di scorrere.
     minmax(0,1fr) le permette di rimpicciolirsi sotto la misura naturale. */
  .impianto {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }

  .rail {
    position: static;
    min-height: 0;
    overflow-y: auto;
  }

  /* overflow:auto, non scroll: sulle pagine che ci stanno (una tabella) non
     compare nessuna barra, sull'indice lungo si'. */
  /* flex:1 serve alla pagina di scelta archivio, dove .contenuto e' figlio
     diretto del body; dentro .impianto e' una cella di griglia e viene
     ignorato. */
  .contenuto {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 24px;
  }

  .testata, .frontespizio { flex: none; }

  .involucro {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .scorrevole { flex: 1; min-height: 0; }
  .paginazione { flex: none; }
}