/* ══════════════════════════════════════════════════════════════════════
   FINPLUS OSTIA — PIANIFICAZIONE & GARE  ·  v2
   ----------------------------------------------------------------------
   Estensione di finplus_design_system_v1.css ("WATERLINE"). Riprende i
   token e il linguaggio visivo già introdotti dalla v1 e li porta sulle
   due sezioni rimaste indietro: la tabella settimanale e la vista Gare,
   allineandole alla card "Allenamento giornaliero".

   Foglio di SOLA PRESENTAZIONE. Nessun selettore dipende da classi che
   non esistano già: non richiede modifiche a app.js, alle route Flask o
   ai modelli. Il file JS gemello (finplus_planner_races_v2.js) è
   FACOLTATIVO e aggiunge due sole cose: la marcatura della riga di oggi
   e l'auto-crescita dei campi allenamento su mobile.

   INSTALLAZIONE — in templates/index.html, come ULTIMI due riferimenti
   del documento, subito dopo three_views_layout_patch.js:

       <link rel="stylesheet" href="/static/finplus_planner_races_v2.css?v=2" />
       <script src="/static/finplus_planner_races_v2.js?v=2"></script>

   Per tornare indietro: togliere quelle due righe. Nessun altro file
   cambia.

   Gli !important sono usati solo dove i fogli esistenti (styles.css,
   mobile_*_patch, e lo <style> che app.js inietta a runtime in <head>)
   li usano a loro volta: senza, non vincerebbero la cascata.
   ══════════════════════════════════════════════════════════════════════ */


/* ─── 0. TOKEN AGGIUNTIVI ──────────────────────────────────────────────
   Tre tinte di fascia, calcolate come la stessa tinta del colore pieno
   diluita al 6-8% su bianco: abbastanza da separare le tre colonne a
   colpo d'occhio, abbastanza poco da non abbassare il contrasto del
   testo che ci sta sopra (misurato: 12.4:1 nel caso peggiore).      */

:root {
  --tint-m:      #FFF5EA;   /* mattina   — ambra tenue  */
  --tint-p:      #EDF7FC;   /* pomeriggio— acqua tenue  */
  --tint-s:      #F4F1FA;   /* sera      — viola tenue  */
  --tint-m-line: #F0DCC4;
  --tint-p-line: #C8E3F2;
  --tint-s-line: #DCD5EE;

  /* Chevron dei select: disegnato una volta, riusato ovunque */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23005E8A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
  --chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238BA3B5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE A — CORREZIONI PUNTUALI
   Tre difetti visibili a schermo, ognuno con una causa precisa.
   ══════════════════════════════════════════════════════════════════════ */

/* A.1 — LEGGENDA ILLEGGIBILE
   styles.css dà alle pill `color:#fff` su `.pill` (0,1,0) e il fondo
   colorato su `.pill.m` (0,2,0). La v1 ha spostato il colore del testo
   su `.pill.m` (0,2,0) lasciando `background:transparent` su `.pill`
   (0,1,0): il fondo pieno ha continuato a vincere e il testo colorato è
   finito sopra il proprio stesso colore. Risultato: cinque rettangoli
   muti. Qui la regola si chiude alla stessa specificità del fondo.   */

.legend .pill,
.pill.m, .pill.p, .pill.s, .pill.c, .pill.n {
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  white-space: nowrap;
}
/* Il pallino pieno restituisce il colore come informazione, senza
   sacrificare la leggibilità del testo (WCAG 1.4.1: mai il solo colore) */
.legend .pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill.n { color: var(--warning); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}


/* A.2 — IL SELETTORE CATEGORIA NELLA TOPBAR
   app.js inietta a runtime uno <style id="dualCategoryStyle"> in <head>:
   arriva dopo questo foglio e a parità di specificità vince lui. Da
   quando la v1 ha reso scura la topbar, il pulsante non attivo è
   inchiostro scuro su vetro scuro — praticamente invisibile.        */

.topbar .audience-buttons .btn-ghost {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 36px;
}
.topbar .audience-buttons .btn-ghost:hover {
  background: rgba(255,255,255,.26) !important;
}
.topbar .audience-buttons .btn-ghost.active {
  background: #FFFFFF !important;
  color: var(--navy) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.22) !important;
}
.topbar .audience-chip {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}


/* A.3 — "NON PIANIFICATA" TAGLIATO A METÀ
   La colonna orario è larga 82px e l'etichetta più lunga ne chiede 118.
   Si allargano le colonne e si riduce di mezzo punto il corpo della sola
   etichetta lunga. La tabella cresce di ~90px: è il motivo per cui la
   colonna Giorno diventa fissa (B.2).                                */

col.daycol   { width: 224px; }
col.timecol  { width: 146px; }
col.poolcol  { width: 116px; }
col.traincol { width: 114px; }

#plannerView table { min-width: 1352px; }


/* ══════════════════════════════════════════════════════════════════════
   PARTE B — TABELLA DI PIANIFICAZIONE
   ══════════════════════════════════════════════════════════════════════ */

/* B.1 — LE TRE FASCE DIVENTANO TRE COLONNE VERE
   Oggi il colore della fascia vive solo nella riga di testata: sotto,
   nove celle identiche. L'occhio deve ricostruire ogni volta a quale
   fascia appartiene la cella che sta guardando. La tinta scende lungo
   tutta la colonna e un filo verticale chiude i tre gruppi.

   Il colore passa da `background-image` e non da `background-color`:
   così non entra in conflitto con le regole zebra di styles.css, che
   usano la scorciatoia `background` e resettano solo il colore.      */

#plannerView tbody tr.row-day td:nth-child(n+2):nth-child(-n+4) {
  background-image: linear-gradient(var(--tint-m), var(--tint-m));
}
#plannerView tbody tr.row-day td:nth-child(n+5):nth-child(-n+7) {
  background-image: linear-gradient(var(--tint-p), var(--tint-p));
}
#plannerView tbody tr.row-day td:nth-child(n+8):nth-child(-n+10) {
  background-image: linear-gradient(var(--tint-s), var(--tint-s));
}

/* Filo di chiusura fra un gruppo e il successivo */
#plannerView tbody tr.row-day td:nth-child(4),
#plannerView tbody tr.row-day td:nth-child(7) {
  border-right: 2px solid var(--line);
}

/* La testata di secondo livello eredita la tinta della propria fascia:
   Orario / Vasca / Doc smettono di essere una fascia grigia unica */
#plannerView thead tr:nth-child(2) th:nth-child(-n+3) {
  background: var(--tint-m);
  color: #7A4506;
  border-color: var(--tint-m-line);
}
#plannerView thead tr:nth-child(2) th:nth-child(n+4):nth-child(-n+6) {
  background: var(--tint-p);
  color: #005E8A;
  border-color: var(--tint-p-line);
}
#plannerView thead tr:nth-child(2) th:nth-child(n+7) {
  background: var(--tint-s);
  color: #453575;
  border-color: var(--tint-s-line);
}
#plannerView thead th.shift-h {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 10px 8px;
  border-color: transparent;
}
#plannerView thead tr:nth-child(2) th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 7px 8px;
}


/* B.2 — LA COLONNA GIORNO RESTA FERMA
   Con dieci colonne la tabella scorre in orizzontale su qualunque
   portatile. Se scorre via anche il giorno, si perde il riferimento
   della riga che si sta compilando: la colonna si ancora a sinistra. */

#plannerView .table-wrap {
  overflow: auto;
  border-radius: var(--radius);
  scrollbar-width: thin;
}
#plannerView thead th:first-child,
#plannerView tbody tr.row-day td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}
/* Il bordo destro della colonna fissa diventa un'ombra: si vede solo
   quando c'è davvero del contenuto che le scorre sotto */
#plannerView tbody tr.row-day td.day-cell {
  box-shadow: 6px 0 12px -8px rgba(10,29,51,.35);
}
#plannerView thead th:first-child {
  background: var(--surface-2);
}


/* B.3 — LA CELLA DEL GIORNO
   Diventa l'intestazione di riga che già è nei fatti: nome in
   condensato, data in cifre tabulari, azioni allineate in alto a
   destra, il collegamento all'allenamento come bersaglio pieno e
   l'anteprima del testo limitata a due righe — perché è un'anteprima,
   non il contenuto.                                                  */

#plannerView .day-cell {
  padding: 14px 14px 12px !important;
  vertical-align: top;
}
#plannerView .day-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.05;
}
#plannerView .day-date {
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text-mid);
}
#plannerView .day-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
#plannerView .day-cell .icon-btn {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.86);
  border-color: var(--line);
}
#plannerView .day-cell .icon-btn:hover {
  background: #fff;
  border-color: var(--aqua-mid);
  transform: none;
}

/* Il link "Allenamento giornaliero" era testo sottolineato tratteggiato:
   diventa una riga cliccabile alta 36px, che è ciò che è sempre stata */
#plannerView .day-main-link {
  margin-top: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--aqua-dark);
  transition: background-color .15s ease, border-color .15s ease;
}
#plannerView .day-main-link:hover {
  background: #fff;
  border-color: var(--aqua-mid);
}
#plannerView .day-main-status {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
}

/* Anteprima dell'allenamento: due righe, poi taglio pulito */
#plannerView .day-cell .helper {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px !important;
  line-height: 1.45;
  color: var(--text-mid);
}

/* Oggi: barra di livello a sinistra + data in evidenza.
   La classe .is-today la applica finplus_planner_races_v2.js; senza il
   file JS questa regola semplicemente non si attiva mai.             */
#plannerView tbody tr.row-day.is-today td.day-cell {
  box-shadow: inset 4px 0 0 var(--aqua-mid), 6px 0 12px -8px rgba(10,29,51,.35);
}
#plannerView tbody tr.row-day.is-today .day-date {
  color: var(--aqua-dark);
  font-weight: 800;
}
#plannerView tbody tr.row-day.is-today .day-date::after {
  content: "OGGI";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 2px;
  border-radius: 999px;
  background: var(--aqua-mid);
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
}


/* B.4 — I SELECT DI ORARIO E VASCA
   Nove select nativi per riga, ognuno disegnato dal sistema operativo in
   modo diverso. Con `appearance:none` tornano a essere lo stesso oggetto
   su Windows, macOS e Android; la freccia è un SVG unico.            */

#plannerView .compact-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 6px 20px 6px 9px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--text);
  background-color: rgba(255,255,255,.94);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 6px center;
  border-color: var(--line);
  text-overflow: ellipsis;
}
#plannerView .compact-select:hover:not(:disabled) {
  border-color: var(--aqua-mid);
  background-color: #fff;
}
#plannerView .compact-select:disabled {
  background-color: rgba(255,255,255,.55);
  background-image: var(--chevron-muted);
  color: var(--text-mid);
  opacity: 1;                 /* l'opacità di sistema abbassa il contrasto */
  cursor: default;
}

/* Fascia annullata: rosso, e il fondo prende una rigatura diagonale.
   Il colore da solo non basta — chi non distingue il rosso vede
   comunque una superficie diversa da tutte le altre.                 */
#plannerView td.status-cancelled {
  background-image:
    repeating-linear-gradient(135deg,
      rgba(176,0,22,.07) 0 6px,
      rgba(176,0,22,0)   6px 12px) !important;
}
#plannerView .select-cancelled {
  color: var(--danger);
  border-color: #E3B4B9;
  background-color: rgba(253,235,236,.9);
  font-weight: 800;
}

/* Fascia non pianificata: ambra, corpo ridotto perché l'etichetta è
   lunga il doppio di qualunque orario                                */
#plannerView td.status-unplanned {
  background-image:
    linear-gradient(rgba(150,89,10,.05), rgba(150,89,10,.05)) !important;
}
#plannerView .select-unplanned {
  color: var(--warning);
  border-color: #E8CFA4;
  background-color: rgba(255,244,226,.9);
  font-weight: 800;
}

/* "NON PIANIFICATA" e "ANNULLATA" sono lunghe il doppio di un orario:
   corpo ridotto e margini stretti, così entrano per intero invece di
   finire in puntini. */
#plannerView .select-unplanned,
#plannerView .select-cancelled {
  font-size: 10.5px;
  letter-spacing: -.014em;
  padding: 6px 14px 6px 5px;
  background-position: right 2px center;
}


/* B.5 — LA COLONNA "DOC"
   Un pallino di stato e due pulsanti in 104px: vanno allineati alla
   stessa griglia, non lasciati galleggiare.                          */

#plannerView .session-icon-box {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 3px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}
#plannerView .session-icon-box .icon-btn {
  width: 30px;
  height: 30px;
  font-size: 14px;
  background: rgba(255,255,255,.86);
  border-color: var(--line);
}
#plannerView .session-icon-box .icon-btn:hover {
  background: #fff;
  border-color: var(--aqua-mid);
  transform: none;
}
#plannerView .status-dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
#plannerView .status-dot.inherited { border-color: #B9DFCE; }
#plannerView .status-dot.custom    { border-color: #D8C9F2; }
#plannerView .status-dot.cancelled { border-color: #E3B4B9; }
#plannerView .status-dot.unplanned { border-color: #E8CFA4; }
#plannerView .status-dot.empty     { border-color: var(--line); }


/* B.6 — RIGA E RITMO
   Le righe sono già card. Resta da dare respiro alle celle e da tenere
   la riga sotto il puntatore evidenziata per tutta la sua larghezza —
   compresa la colonna fissa, che scorrendo si stacca dal resto.      */

#plannerView tbody tr.row-day td {
  border-top-color: var(--line);
  border-bottom-color: var(--line);
  padding: 10px 10px;
}
/* styles.css illumina già la riga in hover con `background !important`:
   qui si aggiunge solo il bordo, che quella regola non tocca.        */
#plannerView tbody tr.row-day:hover td {
  border-top-color: var(--aqua-mid);
  border-bottom-color: var(--aqua-mid);
}


/* B.7 — NOTE DELLA SETTIMANA
   Il titolo gridava quanto quello della tabella pur riguardando un campo
   facoltativo: scende al rango di etichetta e lascia la scena al
   contenuto.                                                          */

#plannerView .notes-banner {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#plannerView .notes-title {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 8px;
}
#plannerView #weeklyNotes { min-height: 74px; }


/* ══════════════════════════════════════════════════════════════════════
   PARTE B-bis — DISTANZE
   I metri sono un dato, non una decorazione: cifre tabulari, colore
   sobrio, mai in concorrenza con orario e vasca, che restano
   l'informazione principale della cella.
   ══════════════════════════════════════════════════════════════════════ */

/* Totale della settimana, nella testata della tabella */
.week-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.week-total:empty { display: none; }
.week-total.is-empty {
  background: transparent;
  color: var(--text-mid);
  border: 1px dashed var(--line-strong);
  font-weight: 700;
}

/* Totale del giorno, nella prima colonna */
#plannerView .day-metres {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--aqua-soft);
  color: var(--aqua-dark);
  border: 1px solid #A9D8EC;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  cursor: help;
}

/* Metri della singola fascia, sotto il menu della vasca */
#plannerView .shift-metres {
  margin-top: 5px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  cursor: help;
}

/* Card "Allenamento giornaliero": fondo scuro, quindi testo chiaro */
.today-shift-metres {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  cursor: help;
}
.today-day-metres {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

@media (max-width: 820px) {
  .week-total { margin-right: 0; font-size: 12px; }
  #plannerView .day-metres { margin-top: 6px; }
  /* Nell'intestazione del giorno della vista mobile */
  .mpc5-count.mpc5-metres {
    background: rgba(255,255,255,.28);
    font-variant-numeric: tabular-nums;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE A-zero — I CARATTERI
   Due sole famiglie, come prima: una per il testo e una per le
   etichette in maiuscoletto. Cambiano le famiglie, non l'impianto.

     Inter        il testo. Lettere più aperte e più alte di Barlow a
                  parità di corpo: si legge meglio da lontano, che è
                  come si guarda un telefono appoggiato sul bordo
                  vasca, e i numeri restano distinti anche piccoli.
     Inter Tight  titoli ed etichette. Stessa mano, disegno più
                  stretto: i due caratteri stanno insieme senza
                  stonare, cosa che due famiglie diverse non fanno.

   Le variabili sono definite in styles.css: qui vengono riscritte,
   e questo foglio è l'ultimo a caricarsi. Così il carattere si cambia
   da un punto solo, senza toccare il file storico.

   font-synthesis: none — se un peso non arriva, meglio vedere il peso
   sbagliato che una finta grassettatura disegnata dal browser.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

body,
.field, textarea, select, input, button {
  font-family: var(--font);
  font-synthesis: none;
}

/* Il titolo della card "allenamento di oggi" nominava Barlow Condensed
   per esteso invece di usare la variabile: rimasto solo, sarebbe finito
   su un carattere di sistema qualunque e sarebbe stato l'unico pezzo
   dell'applicazione a sembrare di un'altra applicazione. */
.today-hero-title h2 { font-family: var(--font-cond); }

/* Inter ha le cifre della stessa larghezza solo se glielo si chiede:
   senza questo, i totali in colonna ballano di qualche pixel. */
.swx-m-input, .swx-total, .swt-tot, .swt-total,
.users-count, .week-total, .st-v { font-variant-numeric: tabular-nums; }


/* ══════════════════════════════════════════════════════════════════════
   PARTE B-quater — ALLENAMENTO A TESTO LIBERO
   Si scrive sopra, il conto compare sotto. Le due zone sono separate da
   un'etichetta e da un fondo diverso perché non si confondano: la prima
   si modifica, la seconda si legge (tranne il totale di riga, che è
   l'unica cosa correggibile e infatti è l'unico campo con un bordo).

   Il riepilogo è deliberatamente fitto: serve a dare un colpo d'occhio
   sul conto, non a essere riletto parola per parola.
   ══════════════════════════════════════════════════════════════════════ */

.swx {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swx-area,
.swx-pre {
  width: 100%;
  min-height: 132px;
  max-height: 420px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
  box-sizing: border-box;
}
.swx-area:focus {
  outline: none;
  border-color: var(--aqua-mid);
  box-shadow: 0 0 0 3px rgba(0,150,199,.14);
}
.swx-pre { background: var(--surface-2); resize: none; overflow: auto; }

.swx-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mid);
}
.swx-hint b {
  font-weight: 800;
  color: var(--aqua-dark);
  font-variant-numeric: tabular-nums;
}

.swx-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.swx-cap-t { flex: 0 1 auto; min-width: 0; }

.swx-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.swx-empty {
  margin: 0;
  padding: 16px 14px;
  font-size: 13px;
  color: var(--text-mid);
  text-align: center;
}

.swx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
}
.swx-row + .swx-row { border-top: 1px solid var(--surface-2); }

/* Riga che non produce metri: è un titolo di blocco, non una serie. */
.swx-row.is-title { background: var(--surface-2); }
.swx-row.is-title .swx-text {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Riga con il totale imposto a mano: una barretta a sinistra, così si
   vede a colpo d'occhio quali numeri non li ha messi il programma. */
.swx-row.is-manual { box-shadow: inset 3px 0 0 var(--warning, #D07C00); }

.swx-main { min-width: 0; }
.swx-text {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.swx-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
}
.swx-calc,
.swx-gear,
.swx-skip,
.swx-manual {
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.swx-calc {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--aqua-dark);
  background: rgba(0,150,199,.10);
  font-variant-numeric: tabular-nums;
}
.swx-gear {
  font-weight: 700;
  color: var(--text-mid);
  background: var(--surface-2);
}
.swx-skip {
  font-weight: 700;
  color: #8A5B00;
  background: var(--warning-soft, #FDF0D9);
  white-space: normal;
  cursor: help;
}
.swx-manual {
  font-weight: 700;
  color: #8A5B00;
  background: transparent;
  padding-left: 0;
}

.swx-mbox {
  display: flex;
  align-items: center;
  gap: 4px;
}
.swx-m {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--aqua-dark);
  font-variant-numeric: tabular-nums;
}
.swx-m-input {
  width: 76px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--aqua-dark);
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.swx-m-input:focus {
  outline: none;
  border-color: var(--aqua-mid);
  box-shadow: 0 0 0 3px rgba(0,150,199,.14);
}
/* Le frecce del campo numerico mangiano metà cella su schermi stretti. */
.swx-m-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.swx-m-input::-webkit-outer-spin-button,
.swx-m-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.swx-unit { font-size: 11px; font-weight: 700; color: var(--text-mid); }

.swx-reset {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.swx-reset:hover { background: var(--surface-2); color: var(--aqua-dark); border-color: var(--line); }
.swx-reset:focus-visible { outline: none; box-shadow: var(--focus); }

.swx-total {
  flex: none;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.swx-total.is-empty {
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Sul telefono il totale di riga scende sotto il testo: affiancarlo
   lascerebbe alla descrizione una colonna larga tre parole. */
@media (max-width: 620px) {
  /* Il corpo del testo resta ai 16px imposti dal sistema di design: sotto
     i 16px iOS ingrandisce la pagina da solo al primo tocco. Qui si alza
     solo l'altezza minima, con !important perché la regola anti-zoom
     porta con sé un min-height da 46px pensato per i campi di una riga. */
  .swx-area, .swx-pre { min-height: 148px !important; }

  /* Sul telefono la riga si sdoppia: sopra l'esercizio per intero, sotto
     il totale allineato a destra.

     Affiancarli funziona nella finestra, che è larga quasi quanto lo
     schermo, ma non dentro la scheda della pianificazione, dove fra
     bordi e rientri restano al testo poche decine di pixel: righe come
     "12x50 2 misti/2 pull 10"" finivano incolonnate due lettere per
     riga. Meglio una riga più alta che una colonna illeggibile. */
  .swx-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding: 10px;
  }
  .swx-main { flex: 1 1 100%; }
  .swx-mbox { margin-left: auto; }
  .swx-text { font-size: 14.5px; line-height: 1.4; }
  .swx-sub { font-size: 12px; }

  /* La pianificazione allarga a tutta riga ogni campo che le capita
     dentro (.mpc5-field input): il campo dei metri va tenuto stretto,
     altrimenti si mangia lo spazio dell'esercizio. */
  .swx-row .swx-m-input,
  .mpc5-field .swx-m-input {
    flex: 0 0 auto;
    width: 92px;
    min-height: 44px;
  }
  .swx-skip { white-space: normal; }
  .swx-total { font-size: 15px; }

  /* Dentro la scheda della pianificazione il promemoria su come si
     scrive comparirebbe una volta per ogni fascia aperta: tre volte
     lo stesso testo in mezza schermata. Resta nella finestra
     dell'allenamento, dove si apre una volta sola. */
  .mpc5-training-field .swx-hint { display: none; }
  .mpc5-training-field .swx-cap { font-size: 10px; }
}

/* La casella dell'allenamento dentro la pianificazione aveva un'altezza
   minima di 220px, pensata per quando era un campo di testo qualunque e
   conveniva farlo grande. Adesso cresce da sola con quello che ci si
   scrive: imporgliene 220 lascia solo un riquadro vuoto sotto l'ultima
   riga, e allontana il riepilogo dei metri.

   Il corpo torna a 16px: sotto quella misura iOS ingrandisce la pagina
   al primo tocco sul campo, ed era esattamente quello che succedeva qui
   con i 13,5px imposti da quella stessa regola. */
.mpc5-training-field .swx-area {
  min-height: 132px !important;
  max-height: none;
  font-size: 16px !important;
  line-height: 1.7 !important;
  padding: 12px 14px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE B-ter — ALLENAMENTO IN TABELLA (forma precedente, ancora usata
   per rileggere gli allenamenti già inseriti)
   Quattro colonne che ripetono il foglio dell'istruttore: ripetizioni,
   distanza, totale calcolato, esercizio. La colonna del totale non è
   modificabile e si vede che non lo è: fondo pieno, niente bordo, cifre
   tabulari allineate a destra come in un registro.
   ══════════════════════════════════════════════════════════════════════ */

.swt {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.swt-head,
.swt-row {
  display: grid;
  grid-template-columns: 100px 92px 78px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}

.swt-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.swt-head .swt-h-2 { text-align: right; padding-right: 6px; }
/* Sopra i 620px l'intestazione di colonna c'è: i placeholder nelle celle
   strette diventano rumore e per giunta vengono tagliati. */
@media (min-width: 621px) {
  .swt-reps::placeholder, .swt-dist::placeholder { color: transparent; }
}

.swt-rows { max-height: 46vh; overflow-y: auto; }
.swt-row + .swt-row { border-top: 1px solid var(--surface-2); }
.swt-row:hover { background: rgba(0,150,199,.04); }

.swt-row input {
  min-height: 38px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}
.swt-row input:focus { outline: none; border-color: var(--aqua-mid); box-shadow: 0 0 0 3px rgba(0,150,199,.14); }
.swt-row input:disabled { background: var(--surface-2); color: var(--text-mid); opacity: 1; }
.swt-reps, .swt-dist { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Le frecce del campo numerico e l'indicatore della lista suggerimenti
   mangiano metà cella su schermi stretti e tagliano il numero: via
   entrambi, si scrive col tastierino. */
.swt-row input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.swt-row input[type="number"]::-webkit-outer-spin-button,
.swt-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.swt-dist::-webkit-calendar-picker-indicator { display: none !important; }

/* Il totale è calcolato: si legge, non si tocca. */
.swt-tot {
  text-align: right;
  padding-right: 4px;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--aqua-dark);
  letter-spacing: .02em;
}

/* Riga di sola descrizione: è un titolo di blocco, non una serie. */
.swt-row.is-note .swt-note {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--surface-2);
}

.swt-del {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3, #7A9190);
  font-size: 13px;
  cursor: pointer;
}
.swt-del:hover { background: var(--danger-soft); color: var(--danger); border-color: #E3B4B9; }
.swt-del:focus-visible { outline: none; box-shadow: var(--focus); }

.swt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.swt-add {
  min-height: 38px;
  padding: 0 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--aqua-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.swt-add:hover { border-color: var(--aqua-mid); border-style: solid; }
.swt-total {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.swt-total.is-empty { color: var(--text-mid); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Sul telefono le tre colonne numeriche restano in riga — sono strette
   e si compilano col tastierino — mentre l'esercizio scende sotto, dove
   ha tutta la larghezza per essere letto. */
@media (max-width: 620px) {
  .swt-head { display: none; }
  .swt-row {
    grid-template-columns: 1fr 1fr auto 36px;
    grid-template-areas:
      "reps dist tot del"
      "note note note note";
    gap: 8px;
    padding: 10px;
  }
  .swt-reps { grid-area: reps; }
  .swt-dist { grid-area: dist; }
  .swt-tot  { grid-area: tot; min-width: 62px; }
  .swt-note { grid-area: note; }
  .swt-del  { grid-area: del; }
  .swt-reps::placeholder, .swt-dist::placeholder { font-size: 12px; }
  .swt-rows { max-height: none; }
  .swt-foot { flex-wrap: wrap; }
  .swt-add { flex: 1 1 auto; }
  .swt-total { font-size: 15px; }
  .swt-row + .swt-row { border-top: 1px solid var(--line); }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE C — SEZIONE GARE
   ══════════════════════════════════════════════════════════════════════ */

/* C.1 — LA BARRA DI RICERCA
   Ricerca e filtro sono l'unico modo per trovare una gara quando ce ne
   sono trenta: meritano la larghezza piena e la stessa altezza.      */

#racesView .race-toolbar {
  gap: 10px;
  margin-bottom: 16px;
  align-items: stretch;
}
#racesView #raceSearch {
  flex: 1 1 320px;
  min-height: 46px;
  font-size: 14px;
}
#racesView #raceCategoryFilter {
  appearance: none;
  -webkit-appearance: none;
  min-height: 46px;
  max-width: 210px;
  padding-right: 30px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  font-weight: 700;
}


/* C.2 — L'IMPAGINATO
   L'editor a sinistra è alto quanto tutta la pagina e oggi trascina lo
   scorrimento anche quando si vuole solo guardare la lista. Su schermi
   larghi resta ancorato e scorre per conto proprio: la lista e il
   dettaglio riprendono il ruolo principale, che è quello giusto — si
   consultano le gare molto più spesso di quanto se ne creino.        */

@media (min-width: 1080px) {
  #racesView .race-layout {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 18px;
  }
  #racesView #raceEditorCard {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 28px);
    overflow: auto;
    scrollbar-width: thin;
  }

  /* Chi le gare non le modifica — atleti e in genere chiunque non sia
     istruttore — non vede l'editor. Senza questo blocco la lista si
     infilava comunque nella colonna stretta lasciata libera dall'editor
     e mezzo schermo restava vuoto.

     La soluzione non è solo allargare: la lista prende il posto che era
     dell'editor e il dettaglio della gara occupa la colonna grande,
     restando in vista mentre si scorrono le gare. Stessa forma della
     pagina dell'istruttore, con la lista al posto del modulo. */
  .app.swimmer-mode #racesView .race-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .app.swimmer-mode #racesView .race-layout > section {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-areas:
      "lista     dettaglio"
      "riepilogo dettaglio"
      "vuoto     dettaglio";
    align-items: start;
    gap: 18px;
  }
  .app.swimmer-mode #racesView .race-list-wrap { grid-area: lista; }
  .app.swimmer-mode #racesView #raceSpecSummary { grid-area: riepilogo; }
  .app.swimmer-mode #racesView .race-detail-panel {
    grid-area: dettaglio;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 28px);
    overflow: auto;
    scrollbar-width: thin;
  }
  /* In colonna unica le schede restano una sotto l'altra: affiancarle
     dentro 400px le spezzerebbe. */
  .app.swimmer-mode #racesView .race-list { grid-template-columns: 1fr; }
}

/* L'editor scende di un gradino: è uno strumento, non il contenuto */
#racesView #raceEditorCard {
  background: rgba(248,251,254,.94);
  border: 1px solid var(--line);
  box-shadow: none;
}
#racesView #raceEditorCard .card-head {
  border-bottom: 1px solid var(--line);
}
#racesView #raceEditorCard .card-head h3 {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mid);
}


/* C.3 — LA SCHEDA GARA
   Era un rettangolo con tre righe di testo dello stesso peso. Diventa
   una scheda con una gerarchia sola: nome, poi coordinate, poi le
   specialità, poi il conteggio iscritti come dato numerico.          */

#racesView .race-card {
  position: relative;
  padding: 16px 16px 14px 18px;
  border-width: 1px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#racesView .race-card::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--line);
  transition: background-color .16s ease;
}
#racesView .race-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--aqua-mid);
}
#racesView .race-card:hover::before { background: var(--aqua-mid); }

#racesView .race-card.selected-race {
  border-color: var(--aqua-dark);
  background: var(--aqua-pale);
  box-shadow: 0 0 0 1px var(--aqua-dark), var(--shadow);
  transform: none;
}
#racesView .race-card.selected-race::before {
  background: var(--aqua-dark);
  top: 0; bottom: 0;
  width: 4px;
}

#racesView .race-title {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--navy);
}
#racesView .race-meta {
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  font-weight: 600;
}
/* Titolo e azioni restano sulla stessa riga anche quando la scheda è
   stretta: i due pulsanti scendevano sotto al nome e la scheda perdeva
   la sua riga d'intestazione. */
#racesView .race-head {
  align-items: start;
  flex-wrap: nowrap;
  gap: 10px;
}
#racesView .race-head > div:first-child { min-width: 0; }
/* Il contenitore dei due pulsanti è scritto inline da app.js
   (display:flex; flex-wrap:wrap): senza !important si impilerebbero in
   colonna appena la scheda si stringe. */
#racesView .race-head > div:last-child {
  flex: none !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
#racesView .race-card .mini-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.9);
}
#racesView .race-card .mini-btn:hover {
  background: #fff;
  border-color: var(--aqua-mid);
  transform: none;
}

/* Le specialità sono etichette, non pulsanti: tinta d'acqua e basta */
#racesView .race-card .badge {
  background: var(--aqua-soft);
  border-color: #A9D8EC;
  color: var(--aqua-dark);
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
}

/* "Iscritti: 2" — il numero è il dato, il resto è etichetta */
#racesView .race-card .helper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--text-mid);
  font-weight: 600;
}
#racesView .race-card .helper strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}


/* C.4 — LISTA E PANNELLO DI DETTAGLIO */

#racesView .race-list {
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 12px;
}
#racesView .race-list-title,
#racesView .race-detail-title {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}
#racesView .race-list-title::after,
#racesView .race-detail-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Scelta la gara, l'istruzione su come sceglierla sparisce. */
#racesView .race-detail-panel.has-race .race-detail-subtitle { display: none; }

#racesView .race-detail-subtitle {
  color: var(--text-mid);
  margin-bottom: 12px;
}


/* C.5 — I RIQUADRI DI DETTAGLIO
   Tre blocchi azzurri uno accanto all'altro producevano una superficie
   piatta: tutto evidenziato, quindi niente evidenziato. Tornano bianchi
   con un filo d'acqua in testa, come le card della vista giornaliera. */

#racesView .detail-box,
#racesView .detail-box.highlighted {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#racesView .detail-box.highlighted::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aqua-mid), var(--aqua));
}
#racesView .detail-box h4 {
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--navy);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
#racesView .detail-grid {
  gap: 14px;
}
@media (min-width: 900px) {
  #racesView .detail-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
#racesView .detail-text {
  color: var(--text-mid);
  line-height: 1.55;
  white-space: pre-wrap;
}
#racesView .detail-box .poster-preview {
  max-height: 240px;
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}


/* C.6 — LE SPECIALITÀ COME INTERRUTTORI
   Sono <label class="badge"> con dentro una checkbox: oggi sembrano
   etichette morte e il bersaglio è alto 20px. Diventano interruttori
   veri, alti 38px, con uno stato acceso che si vede da lontano.     */

#racesView .chip-list .badge:has(input.participantSpec) {
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mid);
  gap: 8px;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
#racesView .chip-list .badge:has(input.participantSpec):hover {
  border-color: var(--aqua-mid);
  background: var(--aqua-pale);
}
#racesView .chip-list .badge:has(input.participantSpec:checked) {
  background: var(--aqua-mid);
  border-color: var(--aqua-mid);
  color: #fff;
}
#racesView .chip-list .badge input.participantSpec {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  flex: none;
}
#racesView .chip-list .badge:has(input.participantSpec:focus-visible) {
  box-shadow: var(--focus);
}

/* Ripiego per i browser senza :has() — nessuno stato acceso, ma il
   bersaglio resta grande e leggibile */
@supports not selector(:has(*)) {
  #racesView .chip-list .badge {
    min-height: 38px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
  }
}


/* C.7 — TABELLA DEGLI ISCRITTI */

#racesView .participant-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--line);
}
#racesView .participant-table th {
  background: var(--surface-3);
  color: var(--text-mid);
  border-color: var(--line);
  font-size: 10.5px;
  letter-spacing: .08em;
  white-space: nowrap;
}
#racesView .participant-table td {
  border-color: var(--line);
  line-height: 1.55;
}
#racesView .participant-table tbody tr:nth-child(even) td {
  background: rgba(242,247,251,.7);
}
#racesView .participant-table td:first-child strong {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
}
#racesView .participant-table .mini-btn {
  border-color: #E3B4B9;
  color: var(--danger);
  background: var(--danger-soft);
  white-space: nowrap;
}
#racesView .participant-table .mini-btn:hover {
  background: #F9DADD;
  transform: none;
}


/* C.8 — STATI VUOTI
   "Nessuna gara corrisponde ai filtri" è un momento di incertezza: va
   trattato come un messaggio, non come un buco nel layout.           */

#racesView .empty,
#racesView #raceDetailInline.empty {
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: rgba(248,251,254,.8);
  color: var(--text-mid);
  padding: 26px 20px;
  font-size: 13.5px;
  line-height: 1.6;
}

#racesView .poster-box {
  border-radius: 12px;
  background: rgba(248,251,254,.9);
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE C-bis — SELETTORE SPECIALITÀ
   ══════════════════════════════════════════════════════════════════════ */

#racesView .spec-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
#racesView .spec-free {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}
#racesView .spec-picker select,
#racesView .spec-free input { min-height: 42px; }
#racesView .spec-free input { font-size: 13px; }

/* La specialità scelta dagli elenchi si distingue da quella scritta a
   mano: è una voce riconosciuta, e le statistiche potranno contarla. */
#racesView .badge-spec {
  background: var(--aqua-soft);
  border-color: #A9D8EC;
  color: var(--aqua-dark);
}

@media (max-width: 620px) {
  #racesView .spec-picker { grid-template-columns: 1fr 1fr; }
  #racesView .spec-picker > button { grid-column: 1 / -1; }
}


/* Riepilogo delle iscrizioni: una misura sola (quante iscrizioni) su
   più specialità, quindi una tinta sola. Qui il colore non distingue
   nulla — a distinguere è la lunghezza della barra. */
#racesView .spec-summary { margin-bottom: 0; }
#racesView .spec-summary .card-head h3 {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
}
.spec-sum-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#racesView .spec-summary .ss-val em {
  font-size: 11px;
  min-width: 0;
  margin-left: 6px;
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE C-ter — STATISTICHE
   Due domande, due grafici. Le barre sono HTML: si adattano alla
   larghezza senza deformare il testo, e reggono il telefono meglio di
   un SVG a viewBox fisso.

   La palette degli stili è passata dal validatore di accessibilità:
   banda di luminosità, soglia di croma, separazione in daltonismo e
   contrasto sul fondo. Nessun colore porta da solo l'informazione —
   ogni barra ha nome e metri scritti accanto.
   ══════════════════════════════════════════════════════════════════════ */

#statsView { display: grid; gap: var(--space-lg, 16px); }

.stats-cat {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Filtri di periodo: una riga sola, sopra i grafici */
.stats-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.stats-chip {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-mid);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.stats-chip:hover { border-color: var(--aqua-mid); color: var(--aqua-dark); }
.stats-chip.is-active {
  background: var(--aqua-mid);
  border-color: var(--aqua-mid);
  color: #FFFFFF;
}
.stats-chip:focus-visible { outline: none; box-shadow: var(--focus); }

/* Numeri di testa: il dato grande, l'etichetta sopra, il contesto sotto */
.stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.stat-tile {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.st-k {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.st-v {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.st-s { font-size: 12px; color: var(--text-mid); }

/* ─── Metri per settimana ─── */

.stats-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;                      /* lo stacco fra le barre resta visibile */
  height: 230px;
  padding: 26px 0 0;
  border-bottom: 1px solid var(--line-strong);
}
.sb-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  position: relative;
  cursor: default;
}
.sb-col:focus-visible { outline: none; }
.sb-col:focus-visible .sb-bar { box-shadow: var(--focus); }
.sb-track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.sb-bar {
  width: 100%;
  background: var(--aqua-mid);
  border-radius: 4px 4px 0 0;    /* estremità arrotondata, base sull'asse */
  transition: filter .15s ease;
  min-height: 2px;
}
.sb-col:hover .sb-bar, .sb-col:focus-visible .sb-bar { filter: brightness(1.15); }
.sb-col.is-zero .sb-track {
  border-bottom: 2px dotted var(--line-strong);
  align-self: flex-end;
  height: 0;
  flex: none;
}
.sb-col.is-zero .sb-x { color: var(--ink-3, #7A9190); font-weight: 600; }

.sb-x {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-peak {
  position: absolute;
  top: -22px;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--aqua-dark);
  white-space: nowrap;
}
/* Riga della media: riferimento, non dato — quindi tratteggiata e tenue */
.sb-avg {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed var(--line-strong);
  pointer-events: none;
  margin-bottom: 22px;           /* le etichette dell'asse stanno sotto */
}
.sb-avg span {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: var(--surface);
  padding: 0 4px;
}

/* ─── Ripartizione per stile ─── */

.stats-strokes { display: grid; gap: 10px; }
.ss-row {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) minmax(96px, auto);
  gap: 12px;
  align-items: center;
  cursor: default;
}
.ss-row:focus-visible { outline: none; }
.ss-row:focus-visible .ss-track { box-shadow: var(--focus); border-radius: 999px; }
.ss-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ss-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c);
  flex: none;
}
.ss-dot.is-texture,
.ss-fill.is-texture {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, rgba(255,255,255,0) 2px 5px);
}
.ss-track {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.ss-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--c);
  transition: filter .15s ease;
}
.ss-row:hover .ss-fill { filter: brightness(1.1); }
.ss-val {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ss-val em {
  display: inline-block;
  margin-left: 8px;
  min-width: 34px;
  font-style: normal;
  font-weight: 700;
  color: var(--text-mid);
}

/* ─── Contorno ─── */

.stats-empty {
  padding: 26px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: rgba(248,251,254,.8);
  color: var(--text-mid);
  text-align: center;
  font-size: 13.5px;
}
.stats-note { margin-top: 14px; }
.stats-table { margin-top: 16px; }

/* Quattro colonne strette — settimana, metri, allenamenti, giorni — che
   in 340px ci stanno comode. Senza questo si prendevano il min-width da
   1100px pensato per la griglia settimanale e sul telefono finivano
   tagliate a metà, senza nemmeno una barra per scorrerle. */
.stats-table .tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stats-table table {
  min-width: 0;
  width: 100%;
}
.stats-table summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--aqua-dark);
  padding: 6px 0;
}
.stats-table summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.stats-tip {
  position: absolute;
  z-index: 200;
  max-width: 260px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  box-shadow: 0 6px 20px rgba(10,29,51,.28);
}
.stats-tip.is-visible { opacity: 1; }

.tabs .t-short { display: none; }

/* Una scheda nascosta deve sparire davvero. La regola che dà alle schede
   `display: flex !important` è più specifica di `.hidden`, quindi senza
   questa riga la scheda riservata all'istruttore resterebbe visibile a
   tutti — cliccabile per giunta, anche se poi la vista non si apre. */
.tabs .tab.hidden { display: none !important; }

@media (max-width: 820px) {
  /* La barra di navigazione in fondo passa da tre voci a quattro: le
     etichette accorciate evitano che i nomi vadano a capo a metà parola. */
  .tabs { grid-template-columns: repeat(4, 1fr) !important; }
  .tabs .tab { font-size: 9.5px !important; gap: 2px; }
  .tabs .t-long { display: none; }
  .tabs .t-short { display: inline; }

  /* Chi non è istruttore vede tre schede: la griglia si stringe di una
     colonna, altrimenti resterebbe un buco dove stava la quarta. Le
     etichette restano brevi — "Allenamento Giornaliero" per esteso non
     entrerebbe comunque — ma con un terzo di spazio in più si può
     alzare il corpo, che a 9,5px era al limite del leggibile. */
  .app.tabs-3 .tabs { grid-template-columns: repeat(3, 1fr) !important; }
  .app.tabs-3 .tabs .tab { font-size: 11px !important; }

  /* Sotto i 620px l'etichetta della media si sovrappone al picco:
     resta la riga tratteggiata, che è il riferimento vero. */
  .sb-avg span { display: none; }
  .stats-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .st-v { font-size: 23px; white-space: nowrap; }

  .stats-filters { margin-left: 0; width: 100%; }
  .stats-bars { height: 190px; gap: 3px; }
  .sb-x { font-size: 9px; }
  /* Solo le date marcate: le altre si sovrapporrebbero */
  .sb-col:not(.is-tick) .sb-x { visibility: hidden; }
  .sb-peak { font-size: 10.5px; }
  .ss-row { grid-template-columns: 1fr auto; grid-template-areas: "key val" "track track"; gap: 4px 10px; }
  .ss-key { grid-area: key; }
  .ss-val { grid-area: val; }
  .ss-track { grid-area: track; }
  .st-v { font-size: 26px; }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE D — MOBILE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* D.1 — IL CAMPO ALLENAMENTO ERA ALTO SETTE RIGHE
     `min-height:132px` a 13px di corpo e interlinea 1.35 dà circa sette
     righe visibili: per un allenamento da venti righe significa
     scorrere dentro un riquadro dentro una pagina che a sua volta
     scorre — la peggiore delle interazioni su un telefono. L'altezza
     minima sale a circa metà schermo e il JS gemello la fa poi crescere
     fino al contenuto, così nella maggior parte dei casi lo scorrimento
     interno sparisce del tutto.                                      */

  .mpc5-field textarea,
  .mpc5-training-field textarea {
    min-height: clamp(220px, 38vh, 480px) !important;
    max-height: 72vh;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    padding: 10px 11px !important;
  }

  /* Il riepilogo chiuso mostra tre righe invece di una: si capisce di
     quale allenamento si tratta senza doverlo aprire */
  .mpc5-session-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
  }

  /* D.2 — Fascia aperta: si distingue da quelle chiuse */
  .mpc5-session.is-open {
    background: #fff;
    border-color: var(--aqua-mid);
    box-shadow: 0 4px 14px rgba(0,113,158,.10);
  }
  .mpc5-session-toggle { min-height: 52px; }
  .mpc5-day-toggle     { min-height: 56px; }

  /* Le fasce prendono il colore che hanno ovunque nell'app. L'attributo
     data-shift-key contiene alias variabili ('mattina' / 'morning' / 'm'),
     quindi ci si àncora all'ordine di rendering, che è fisso: mattina,
     pomeriggio, sera. */
  .mpc5-day-body > section.mpc5-session:nth-of-type(1) { border-left: 4px solid var(--morning); }
  .mpc5-day-body > section.mpc5-session:nth-of-type(2) { border-left: 4px solid var(--afternoon); }
  .mpc5-day-body > section.mpc5-session:nth-of-type(3) { border-left: 4px solid var(--evening); }
  .mpc5-day-body > section.mpc5-session.is-cancelled   { border-left-color: var(--danger); }

  .mpc5-save {
    min-height: 46px;
    background: var(--aqua-mid);
    letter-spacing: .04em;
  }

  /* D.4 — VISTA MOBILE v6: ORARIO E VASCA SONO ELENCHI, NON TESTO LIBERO
     I due campi erano <input> di testo: dal telefono non c'era modo di
     scegliere ANNULLATA o NON PIANIFICATA. Ora sono <select> con le stesse
     voci della tabella web, disegnati come il resto dei controlli. */

  /* "NON PIANIFICATA" e' l'etichetta piu' lunga: la colonna dell'orario
     prende un terzo di larghezza in piu' di quella della vasca, altrimenti
     finisce in puntini. */
  .mpc5-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }

  .mpc5-select {
    width: 100%;
    min-height: 44px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 12px;
    border: 1px solid rgba(13,31,53,.14);
    background-color: #FFFFFF;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding: 8px 26px 8px 9px;
    font-size: 13px;
    font-weight: 700;
    color: #0D1F35;
    font-variant-numeric: tabular-nums;
  }
  .mpc5-select:disabled {
    background-color: #F2F7FB;
    background-image: var(--chevron-muted);
    color: var(--text-mid);
    opacity: 1;               /* l'opacità di sistema abbassa il contrasto */
  }
  .mpc5-select:focus-visible { outline: none; box-shadow: var(--focus); }

  /* Le fasce non pianificate ora restano visibili: vanno distinte a colpo
     d'occhio da quelle attive, senza sembrare un errore. */
  .mpc5-status.is-unplanned {
    color: var(--warning);
    background: var(--warning-soft);
  }
  .mpc5-session.is-unplanned { background: #FFFDF7; }
  .mpc5-day-body > section.mpc5-session.is-unplanned { border-left-color: var(--warning); }

  .mpc5-reset {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: #FFFFFF;
    color: var(--text-mid);
    font-size: 12.5px;
    font-weight: 700;
  }
  .mpc5-reset:hover { border-color: var(--aqua-mid); color: var(--aqua-dark); }

  .mpc5-training-field .mpc5-empty { margin-top: 0; text-align: left; }

  /* D.3 — Gare su mobile: la scheda resta un bersaglio unico e ampio */
  #racesView .race-list { grid-template-columns: 1fr; }
  #racesView .race-card { padding: 14px 14px 12px 16px; }
  #racesView .race-title { font-size: 17px; }
  #racesView #raceCategoryFilter { max-width: none; }
  #racesView .detail-box { padding: 14px; }

  /* La tabella iscritti scorre per conto suo, mai la pagina intera */
  #racesView .participant-table-wrap { overflow-x: auto; }
  #racesView .participant-table { min-width: 460px; }
}


/* D.5 — SUI TELEFONI STRETTI ORARIO E VASCA VANNO IN COLONNA
   Affiancati su 390px lasciano ~130px di testo utile, e "NON PIANIFICATA"
   ne chiede di più: finirebbe di nuovo in puntini. Una riga ciascuno costa
   40px di altezza e restituisce etichette intere. */

@media (max-width: 460px) {
  .mpc5-grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE E — STAMPA
   La v1 nasconde già cornice e pulsanti. Qui si aggiunge solo ciò che
   riguarda le due sezioni: le tinte di fascia devono sopravvivere alla
   conversione in PDF, perché sono l'unica cosa che distingue le tre
   colonne su carta.
   ══════════════════════════════════════════════════════════════════════ */

@media print {
  #plannerView tbody tr.row-day td:nth-child(n+2):nth-child(-n+4),
  #plannerView tbody tr.row-day td:nth-child(n+5):nth-child(-n+7),
  #plannerView tbody tr.row-day td:nth-child(n+8):nth-child(-n+10),
  #plannerView thead tr:nth-child(2) th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #plannerView thead th:first-child,
  #plannerView tbody tr.row-day td:first-child { position: static; box-shadow: none; }
  #plannerView .day-cell .helper { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  #racesView #raceEditorCard { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE F — GESTIONE UTENZE
   Una finestra sola con due schermate, elenco e scheda, perché su un
   telefono un modale sopra l'altro non si chiude più.

   Nell'elenco le tre azioni non pesano uguale e non si vedono uguali:
   Modifica è neutra, Disattiva è l'interruttore di tutti i giorni,
   il cestino è piccolo e rosso solo al passaggio. La conferma di
   cancellazione prende il posto della riga, così si legge il nome di
   chi sta per sparire invece di fidarsi di un "sei sicuro?".
   ══════════════════════════════════════════════════════════════════════ */

.modal-card-wide { max-width: 720px; width: 100%; }

.users-msg {
  display: none;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.users-msg.is-visible { display: block; }
.users-msg.is-ok {
  background: var(--success-soft, #E4F5EC);
  color: var(--success, #128A5C);
}
.users-msg.is-error {
  background: var(--danger-soft, #FBE7E9);
  color: var(--danger, #C02537);
}

.users-count {
  margin-bottom: 8px;
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.users-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
}

.users-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.users-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.users-row + .users-row,
.users-confirm + .users-row,
.users-row + .users-confirm { border-top: 1px solid var(--surface-2); }

/* Disattivata: si vede che c'è ma che non conta, senza nasconderla. */
.users-row.is-off { background: var(--surface-2); }
.users-row.is-off .users-avatar { opacity: .5; }
.users-row.is-off .users-name > span:first-child { color: var(--text-mid); }

.users-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aqua-soft, #DCF0F8);
  color: var(--aqua-dark);
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.users-info { min-width: 0; }

.users-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.users-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.users-tag.is-you { background: var(--aqua-soft, #DCF0F8); color: var(--aqua-dark); }
.users-tag.is-off { background: var(--danger-soft, #FBE7E9); color: var(--danger, #C02537); }

.users-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11.5px;
}
.users-user { color: var(--text-mid); font-weight: 600; }

/* Il ruolo è l'informazione che si cerca davvero in questo elenco:
   ha un colore suo, non è colore soltanto — c'è scritto cosa fa. */
.users-role {
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--text-mid);
}
.users-role.is-coach        { background: rgba(0,150,199,.12);  color: var(--aqua-dark); }
.users-role.is-race_manager { background: rgba(206,31,114,.10); color: #A8185C; }
.users-role.is-swimmer      { background: var(--surface-2);     color: var(--text-mid); }

.users-cat {
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-mid);
}

.users-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.users-btn {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.users-btn:hover:not(:disabled) { border-color: var(--aqua-mid); color: var(--aqua-dark); }
.users-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.users-btn:disabled { opacity: .45; cursor: not-allowed; }

.users-btn.is-danger {
  width: 34px;
  padding: 0;
  border-color: transparent;
  font-size: 14px;
}
.users-btn.is-danger:hover:not(:disabled) {
  background: var(--danger-soft, #FBE7E9);
  border-color: #E3B4B9;
  color: var(--danger, #C02537);
}
.users-btn.is-danger-solid {
  background: var(--danger, #C02537);
  border-color: var(--danger, #C02537);
  color: #fff;
}
.users-btn.is-danger-solid:hover { filter: brightness(1.08); color: #fff; }

.users-confirm {
  padding: 12px;
  background: var(--danger-soft, #FBE7E9);
}
.users-confirm-text {
  font-size: 13px;
  line-height: 1.5;
  color: #7C1622;
}
.users-confirm-text b { font-weight: 800; }
.users-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── scheda ─────────────────────────────────────────────── */

.users-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.users-field { display: flex; flex-direction: column; gap: 5px; }
.users-field > label {
  font-family: var(--font-cond, 'Barlow Condensed'), sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.users-field .field { width: 100%; box-sizing: border-box; }
.users-field.is-locked > label { opacity: .55; }
.users-help {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-mid);
}

.users-pw { display: flex; gap: 6px; align-items: stretch; }
.users-pw .field { flex: 1 1 auto; min-width: 0; }
.users-pw-btn {
  flex: none;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.users-pw-btn:hover { color: var(--aqua-dark); border-color: var(--aqua-mid); }
.users-pw-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.users-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* ── telefono ───────────────────────────────────────────── */
@media (max-width: 620px) {
  /* La riga passa a due piani: sopra chi è, sotto cosa gli si può fare.
     Affiancare tre pulsanti a un nome lascerebbe al nome due parole. */
  .users-row {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "avatar info"
      "azioni azioni";
    row-gap: 8px;
    padding: 12px;
  }
  .users-avatar { grid-area: avatar; width: 34px; height: 34px; }
  .users-info   { grid-area: info; }
  .users-actions { grid-area: azioni; }
  .users-actions .users-btn { flex: 1 1 auto; min-height: 44px; }
  .users-actions .users-btn.is-danger { flex: 0 0 44px; width: 44px; }
  .users-name > span:first-child { white-space: normal; }
  .users-form-actions { flex-direction: column-reverse; }
  .users-form-actions .btn,
  .users-form-actions .btn-secondary { width: 100%; min-height: 44px; }
  .users-pw { flex-wrap: wrap; }
  .users-pw .field { flex: 1 1 100%; }
  .users-pw-btn { flex: 1 1 0; min-height: 40px; }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE G — SECONDO FATTORE
   Il riquadro del codice prende il posto di quello di accesso, non gli
   si mette sopra: su un telefono due finestre sovrapposte sono una
   trappola, perché quella sotto resta cliccabile e quella sopra non si
   chiude più.

   Il campo delle sei cifre è volutamente grande e monospaziato: si
   digita di fretta, guardando il telefono nell'altra mano, mentre il
   codice sta per scadere.
   ══════════════════════════════════════════════════════════════════════ */

.mfa-card { max-width: 420px; }

.mfa-msg {
  display: none;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.mfa-msg.is-visible { display: block; }
.mfa-msg.is-ok    { background: var(--success-soft, #E4F5EC); color: var(--success, #128A5C); }
.mfa-msg.is-error { background: var(--danger-soft, #FBE7E9); color: var(--danger, #C02537); }

.mfa-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mid);
}

/* Il QR su fondo bianco pieno: i lettori faticano sui fondi colorati. */
.mfa-qr {
  width: 200px;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.mfa-qr svg { display: block; width: 100%; height: auto; }

.mfa-open {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  text-align: center;
  text-decoration: none;
  line-height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.mfa-key {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.mfa-key-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-cond, 'Inter Tight'), sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.mfa-key-value {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy);
  word-break: break-all;
  user-select: all;
}

/* Le sei cifre: grandi, spaziate, allineate al centro. */
.mfa-code {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: .28em;
  text-indent: .28em;          /* compensa lo spazio dopo l'ultima cifra */
  min-height: 56px !important;
}
.mfa-go { width: 100%; min-height: 46px; }

.mfa-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.mfa-link {
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--aqua-dark);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  min-height: 34px;
}
.mfa-link:hover { text-decoration: underline; }
.mfa-link:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* I codici di recupero si leggono una volta sola: vanno visti bene. */
.mfa-recovery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
}
.mfa-recovery code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
  user-select: all;
}
.mfa-recovery-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.mfa-recovery-actions .btn-secondary { flex: 1 1 0; min-height: 44px; }

.mfa-fallback {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

.mfa-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}
.mfa-confirm input { width: 20px; height: 20px; flex: none; }

/* ── stato del secondo fattore nell'elenco utenze ──────────────────── */

.users-mfa,
.users-locked {
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
}
.users-mfa.is-on   { background: var(--success-soft, #E4F5EC); color: var(--success, #128A5C); }
.users-mfa.is-wait { background: var(--warning-soft, #FDF0D9); color: #8A5B00; }
.users-locked      { background: var(--danger-soft, #FBE7E9); color: var(--danger, #C02537); }

/* ── interruttore nella scheda utente ─────────────────────────────── */

.users-switch {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.users-switch-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.users-switch-main input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}
.users-switch-main b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.users-switch-main .users-help { margin-top: 3px; }

@media (max-width: 620px) {
  .mfa-code { font-size: 24px !important; letter-spacing: .22em; text-indent: .22em; }
  .mfa-recovery { grid-template-columns: 1fr; }
  .mfa-links { flex-direction: column; }
  .mfa-link { text-align: center; min-height: 44px; }
}


/* ══════════════════════════════════════════════════════════════════════
   PARTE H — NOTE DELLA SETTIMANA
   La card ha due titoli quasi identici, uno sopra l'altro: quello della
   barra grigia ("Note importanti settimanali", messo da
   finplus_ui_patch_v3.js) e quello originale dentro il riquadro ("Note
   importanti della settimana"). Su un telefono sono due righe sprecate
   che dicono la stessa cosa: resta quello della barra, che porta anche
   lo stato e il pulsante.

   La casella cresce con il testo — l'altezza la calcola
   finplus_ui_patch_v3.js — e qui si toglie il tetto che la teneva a tre
   righe con la barra di scorrimento dentro.
   ══════════════════════════════════════════════════════════════════════ */

.week-notes-card .notes-title { display: none; }

.week-notes-card #weeklyNotes {
  max-height: none;
  overflow-y: hidden;          /* cresce invece di scorrere dentro */
  line-height: 1.55;
  resize: vertical;
}

/* La nota in sola lettura (atleti): si legge tutta, niente riquadrino. */
.week-notes-card #weeklyNotesPreview {
  max-height: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* Quando una nota c'è, la card si deve notare: una barra colorata a
   sinistra la distingue dalle altre schede della giornata. */
.week-notes-card:not(.week-notes-empty) {
  border-left: 4px solid var(--warning, #D07C00);
}
.week-notes-card:not(.week-notes-empty) .week-notes-subtitle {
  color: #8A5B00;
  font-weight: 700;
}