:root {
  /* Muro di cemento/plaster (brand NS) come sfondo ricorrente di tutta l'app; --bg-solid
     resta la tinta piatta per elementi interni che non devono mostrare la foto (es. card
     annidate). --panel è la superficie opaca su cui vive ogni dato: tra un pannello e
     l'altro il muro resta a piena intensità, dietro alle tabelle dense resta comunque
     coperto dal pannello stesso, quindi "attenuato" senza bisogno di una regola dedicata. */
  --bg-solid: #ddd7cc;
  --bg-photo: url("assets/brand/npl-wall-bg-light.jpg");
  --bg-scrim: linear-gradient(180deg, rgba(255, 253, 248, 0.22), rgba(238, 231, 219, 0.5));
  --panel: #f6f3ee;
  --border: #cac2b3;
  --text: #221e19;
  --muted: #6f6659;
  --accent: #9244bc;
  --accent-contrast: #ffffff;
  --danger: #c23c28;
  --error-bg: #f6e3df;
  /* Riflesso freddo campionato dalle sfaccettature blu-ciano del logo (distinto dal blu dei
     grafici: qui è solo un effetto materico decorativo, mai un secondo colore interattivo). */
  --glow-cyan: #2f6fa8;
  /* Palette categoriale validata (dataviz skill) per i grafici: blu/arancio/acqua, distinguibili
     per CVD e leggibili sulla superficie chiara/scura di questa app. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #b8952e;
  --chart-grid: #e1e0d9;
  --chart-muted: #898781;
  /* Rilievo scolpito nello stesso materiale del logo: card/nuvolette catturano un bordo
     freddo (ciano) in alto a sinistra e un'ombra calda (viola) in basso a destra, come le
     sfaccettature del logo. Mai sulla Timeline, che resta piatta per leggibilità. */
  --panel-gradient: linear-gradient(155deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 90%, var(--accent) 10%) 100%);
  --panel-shadow:
    0 6px 18px rgba(40, 30, 20, 0.16),
    inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 35%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-solid: #17161a;
    --bg-photo: url("assets/brand/npl-wall-bg.jpg");
    --bg-scrim: linear-gradient(180deg, rgba(10, 8, 13, 0.5), rgba(10, 8, 13, 0.76));
    --panel: #201f25;
    --border: #3a3840;
    --text: #ececef;
    --muted: #a5a2ac;
    --accent: #a260c6;
    --accent-contrast: #ffffff;
    --danger: #ef6a52;
    --error-bg: #3a1f1c;
    --glow-cyan: #6fb9e8;
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #d4ac4a;
    --chart-grid: #2c2c2a;
    --chart-muted: #898781;
    --panel-shadow:
      0 10px 26px rgba(0, 0, 0, 0.55),
      inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 30%, transparent),
      inset -1px -1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

/* Interruttore manuale chiaro/scuro: vince sempre sulla preferenza di sistema, in entrambe
   le direzioni (specificità dell'attributo più alta dei blocchi :root sopra). */
:root[data-theme="dark"] {
  --bg-solid: #17161a;
  --bg-photo: url("assets/brand/npl-wall-bg.jpg");
  --bg-scrim: linear-gradient(180deg, rgba(10, 8, 13, 0.5), rgba(10, 8, 13, 0.76));
  --panel: #201f25;
  --border: #3a3840;
  --text: #ececef;
  --muted: #a5a2ac;
  --accent: #a260c6;
  --accent-contrast: #ffffff;
  --danger: #ef6a52;
  --error-bg: #3a1f1c;
  --glow-cyan: #6fb9e8;
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #d4ac4a;
  --chart-grid: #2c2c2a;
  --chart-muted: #898781;
  --panel-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 30%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
  --bg-solid: #ddd7cc;
  --bg-photo: url("assets/brand/npl-wall-bg-light.jpg");
  --bg-scrim: linear-gradient(180deg, rgba(255, 253, 248, 0.22), rgba(238, 231, 219, 0.5));
  --panel: #f6f3ee;
  --border: #cac2b3;
  --text: #221e19;
  --muted: #6f6659;
  --accent: #9244bc;
  --accent-contrast: #ffffff;
  --danger: #c23c28;
  --error-bg: #f6e3df;
  --glow-cyan: #2f6fa8;
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #b8952e;
  --chart-grid: #e1e0d9;
  --chart-muted: #898781;
  --panel-shadow:
    0 6px 18px rgba(40, 30, 20, 0.16),
    inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 35%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Font ospitati in locale (nessuna dipendenza da internet a runtime, coerente con l'app
   offline-first): Barlow per corpo/interfaccia, Big Shoulders Display per i titoli di
   sezione — un carattere industriale/geometrico che riprende il mondo del logo. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/big-shoulders-display-800.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--bg-solid);
  background-image: var(--bg-scrim), var(--bg-photo);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
}

.activation-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.activation-screen[hidden] { display: none; }

.activation-screen.splash-exit { opacity: 0; }

.splash-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.splash-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* Comparsa animata del logo: solo al primissimo avvio dell'app (vedi app.js), per non
   ripetere l'effetto — e quindi la sua enfasi — a ogni apertura successiva. */
@keyframes npl-logo-reveal {
  0% { opacity: 0; transform: scale(0.82) translateY(16px); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.brand-logo-hero.reveal {
  animation: npl-logo-reveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Riflesso viola/ciano che attraversa il logo + bagliore finale sul lato destro, dove l'artwork si
   dissolve già in pixel: entrambi giocano solo alla primissima apertura, insieme al reveal del logo.
   Mascherati non sulla sagoma piena ma su una maschera dedicata (ns-logo-dark-mask.png, derivata
   dalla luminosità dell'artwork) che isola solo le zone scure — definizione dei muscoli, incisioni
   dei dischi, i pixel della dissoluzione — così il bagliore non illumina tutto il personaggio ma
   solo le sue "fessure", come richiesto. */
.splash-logo-shine,
.splash-logo-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: url("assets/brand/ns-logo-dark-mask.png");
  mask-image: url("assets/brand/ns-logo-dark-mask.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mix-blend-mode: screen;
}

.splash-logo-shine {
  background: linear-gradient(
    100deg,
    transparent 24%,
    color-mix(in srgb, var(--accent) 85%, white) 46%,
    color-mix(in srgb, var(--glow-cyan) 85%, white) 54%,
    transparent 76%
  );
  background-size: 260% 100%;
  background-position: -140% 0;
}

.splash-logo-glow {
  background: radial-gradient(
    circle at 84% 40%,
    color-mix(in srgb, var(--glow-cyan) 85%, white) 0%,
    color-mix(in srgb, var(--accent) 70%, white) 32%,
    transparent 62%
  );
}

@keyframes npl-logo-shine-sweep {
  0% { background-position: -140% 0; opacity: 0; }
  10% { opacity: 1; }
  60% { opacity: 1; }
  78% { background-position: 140% 0; opacity: 0; }
  100% { background-position: 140% 0; opacity: 0; }
}

@keyframes npl-logo-glow-burst {
  0%, 62% { opacity: 0; transform: scale(0.7); }
  76% { opacity: 1; transform: scale(1); }
  90% { opacity: 0.8; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.35); }
}

.brand-logo-hero.reveal ~ .splash-logo-shine {
  animation: npl-logo-shine-sweep 3.5s ease-in-out 0.4s both;
}

.brand-logo-hero.reveal ~ .splash-logo-glow {
  animation: npl-logo-glow-burst 3.5s ease-out 0.4s both;
}

.activation-card {
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--panel-shadow);
}

.activation-card h1 { margin: 0 0 0.6rem; font-size: 1.15rem; }

.activation-card form { margin-top: 1rem; }

.activation-card #activation-key { flex: 1; }

.activation-error {
  color: var(--danger);
  background: var(--error-bg);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

.activation-machine {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.activation-machine label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.activation-machine input { width: 100%; font-family: monospace; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar h1 {
  font-size: 1.15rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

.logo-home-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  border-radius: 4px;
  transition: filter 0.15s, transform 0.15s;
}

.logo-home-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.logo-home-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.brand-logo-hero {
  height: 260px;
  max-width: 90vw;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-gradient);
  color: var(--text);
  cursor: pointer;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 30%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

.theme-toggle:hover { border-color: var(--accent); }

.theme-icon { width: 1.15rem; height: 1.15rem; }

/* Mostra l'icona di ciò in cui si passerà cliccando, non del tema corrente: in chiaro si
   vede la luna (clic per passare a scuro), in scuro il sole (clic per tornare a chiaro). */
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

.subtitle {
  font-weight: 400;
  color: var(--muted);
}

.athlete-picker {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.inline-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
/* Un elemento con l'attributo hidden non deve mai comparire, qualunque display gli dia la sua classe
   (es. .inline-form o .delivery-result con display:flex/box, che altrimenti battono lo stile di
   default di hidden: il modulo "nuovo atleta" e il riquadro risultato link restavano visibili vuoti). */
[hidden] { display: none !important; }

select, input, textarea {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.btn {
  font: inherit;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.btn-danger { color: var(--danger); border-color: var(--danger); }

/* Logo del cliente incastonato nel muro di sfondo (skin attiva, slot 1-3 — slot 4 non lo usa, vedi
   BG_TREATMENT_BY_SLOT in skinResolver.ts). Sempre fedele ai colori reali del logo: qui si gioca solo
   con opacità/filtri/blend-mode per l'effetto, mai con una ritintura verso l'accento scelto. Fissato
   al viewport come il muro stesso (background-attachment:fixed), dietro a tutti i contenuti reali
   (inserito come primo figlio del body, z-index basso) e mai cliccabile. */
.skin-bg-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  max-width: min(50vw, 640px);
  max-height: 50vh;
}
.skin-bg-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* NB: la dissolvenza qui è data solo dall'opacità dell'immagine (vedi i singoli trattamenti sotto),
   non da un overlay — un ::after con lo stesso --bg-scrim del muro creava un riquadro visibile (i
   suoi confini, dove finisce il box del logo, si vedevano come un bordo/sfondo rettangolare sul
   muro), l'opposto dell'effetto voluto. L'opacità sui pixel del logo non ha questo problema: sfuma
   pixel per pixel, nessun bordo. */
/* 1) "Semplice": il muro resta tale, il logo spicca con una finta tridimensionalità (rilievo scolpito
   nel cemento) — doppia ombra, una chiara in alto a sinistra e una scura in basso a destra. Opacità
   bassa apposta: deve leggersi guardandolo, non competere con il testo quando ci scorre sopra. */
.skin-bg-logo-emboss img {
  opacity: 0.28;
  filter:
    drop-shadow(-1.5px -1.5px 0.5px rgba(255, 255, 255, 0.45))
    drop-shadow(2.5px 3px 2px rgba(0, 0, 0, 0.35));
}

/* 2) "Murales": il logo sembra dipinto sul cemento — si fonde con la grana della parete invece di
   stare sopra. multiply va bene sul muro chiaro (scurisce dove il muro è chiaro); sul muro scuro
   "multiply" sparirebbe nel nero, quindi lì si passa a "screen" (si fonde schiarendo). */
.skin-bg-logo-mural img { opacity: 0.26; mix-blend-mode: multiply; }
:root[data-theme="dark"] .skin-bg-logo-mural img { mix-blend-mode: screen; opacity: 0.2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skin-bg-logo-mural img { mix-blend-mode: screen; opacity: 0.2; }
}

/* 3) "Insegna luminosa": il logo si accende con un bagliore al neon nel suo stesso colore (non un
   colore fisso) — niente dissolvenza qui, un'insegna è il contrario di mimetica, ma resta comunque
   piccola e con un bagliore contenuto apposta, per non competere mai col testo che ci scorre sopra.
   Il piccolo tubo decorativo che la "alimenta" è disegnato a parte (vedi il markup creato in
   app.js/atleta.js): un vero allineamento con i tubi FOTOGRAFATI nel muro non è possibile in modo
   affidabile, perché la foto è a background-size:cover e il suo ritaglio cambia con ogni finestra. */
.skin-bg-logo-neon { max-width: min(28vw, 320px); max-height: 28vh; }
.skin-bg-logo-neon img {
  opacity: 0.55;
  filter: drop-shadow(0 0 5px var(--skin-neon-color, var(--accent))) drop-shadow(0 0 12px var(--skin-neon-color, var(--accent)));
}
.skin-bg-logo-neon .skin-bg-pipe {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  opacity: 0.6;
}

/* Rete di sicurezza leggibilità: SOLO quando una skin ha un logo incastonato nello sfondo (il look
   NS di default non ha mai bisogno di questo). Un alone morbido nel colore di sfondo attorno al
   testo "scava" il contrasto necessario qualunque cosa ci sia dietro, senza dover appoggiare ogni
   titolo/sottotitolo su un pannello opaco — più semplice e garantito di inseguire ogni singolo punto
   dell'app dove oggi il testo sta direttamente sul muro. */
body:has(#skin-bg-logo) h1,
body:has(#skin-bg-logo) h2,
body:has(#skin-bg-logo) h3,
body:has(#skin-bg-logo) .subtitle,
body:has(#skin-bg-logo) .hint,
body:has(#skin-bg-logo) .week-heading {
  text-shadow:
    0 0 4px var(--bg-solid),
    0 0 8px var(--bg-solid),
    0 0 14px var(--bg-solid);
}

/* Le aree di lavoro vere e proprie (tabelle, card, form) stanno SOPRA al logo: sono già superfici
   opache (--panel / --panel-gradient) e lo coprono da sole, quindi lo sfondo tra una sezione e
   l'altra resta quello della skin (muro o bianco luminoso) e il logo vi traspare a squarci. Qui basta
   solo portare l'area di lavoro sopra al logo (z-index). Solo con una skin attiva. */
body:has(#skin-bg-logo) #app {
  position: relative;
  z-index: 1;
}

/* Logo cliente in testata, versione notte: un leggero alone chiaro lo stacca dallo sfondo scuro anche
   quando i suoi colori sono scuri di loro (es. il blu di ProViribus) — stessa idea dell'alone che il
   logo originale ha già attorno alle lettere, solo reso esplicito. Solo con una skin attiva. */
:root[data-theme="dark"]:has(#active-skin-style) .brand-logo,
:root[data-theme="dark"]:has(#active-skin-style) .brand-logo-header {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):has(#active-skin-style) .brand-logo,
  :root:not([data-theme="light"]):has(#active-skin-style) .brand-logo-header {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
  }
}

/* Griffatura NS fissa: sempre presente, qualunque skin sia attiva (vedi skinResolver.ts) — non è
   mai influenzata dal logo o dai colori del cliente, resta un piccolo credito discreto. */
.ns-credit {
  position: fixed;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.75;
  pointer-events: none;
}
.ns-credit img { width: 14px; height: 14px; object-fit: contain; }

/* ---- Skin (rebranding a marchio cliente) ---- */

.skin-new-row { display: flex; gap: 0.5rem; margin: 0.8rem 0 1.2rem; max-width: 420px; }
.skin-new-name-input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.skin-cards { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.skin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 150px;
  padding: 1rem 0.8rem;
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: var(--text);
}
.skin-card:hover { border-color: var(--accent); }
.skin-card-active { border-color: var(--accent); border-width: 2px; }
.skin-card-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.skin-card-logo-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.7rem;
}
.skin-card-locked { opacity: 0.78; }
.skin-card-locked .skin-card-logo-placeholder { color: var(--muted); }
.skin-card-name { font-weight: 700; }
.skin-card-meta { font-size: 0.72rem; color: var(--muted); }
.skin-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.skin-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0.4rem;
}
.skin-logo-upload { display: flex; align-items: flex-start; gap: 1.2rem; }
.skin-logo-slot { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.skin-logo-slot .btn { font-size: 0.68rem; padding: 0.3rem 0.5rem; }
.skin-logo-slot-dark .skin-detail-logo,
.skin-logo-slot-dark .skin-detail-logo-placeholder { background: #201f25; }
.skin-detail-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; }
.skin-detail-logo-placeholder {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.7rem;
  text-align: center;
}
.skin-detail-header h2 { margin: 0; flex: 1; cursor: pointer; }
.skin-detail-header h2:hover { text-decoration: underline; }

.skin-candidates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 900px;
}
.skin-candidate-card {
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.skin-candidate-active { border-color: var(--accent); border-width: 2px; }
.skin-candidate-title { font-weight: 700; font-size: 0.85rem; }
.skin-candidate-colors { display: flex; gap: 0.8rem; font-size: 0.75rem; color: var(--muted); }
.skin-candidate-colors label { display: flex; flex-direction: column; gap: 0.2rem; }
.skin-candidate-colors input[type="color"] { width: 3rem; height: 1.8rem; border: 1px solid var(--border); border-radius: 6px; padding: 0; }
.skin-candidate-preview { display: flex; gap: 0.4rem; }
.skin-preview-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); }
.skin-use-candidate-btn { align-self: flex-start; }

.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  margin: 0 1.5rem;
  border-radius: 10px;
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
}

.tabs[hidden] { display: none; }

.tab-btn {
  border: none;
  background: none;
  padding: 0.7rem 1rem;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font: inherit;
}

.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main {
  padding: 1.2rem 1.5rem;
  width: 100%;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Zona Coach: stessa barra a tab dell'area atleta, ma completamente separata lato JS
   (classi coach-tab-* dedicate) per non interferire con lo stato/i pannelli dell'atleta. */
.coach-tab-panel { display: none; }
.coach-tab-panel.active { display: block; }

/* La Timeline usa tutta la larghezza disponibile (tabella larga); le altre schede restano
   leggibili con un limite di larghezza centrato. */
#tab-maxes, #tab-template, #tab-decurtazioni {
  max-width: 1100px;
  margin: 0 auto;
}

/* Titoli di sezione: carattere industriale/geometrico con alone freddo-caldo (ciano + viola,
   gli stessi colori campionati dal logo), come un'insegna al neon incassata nel cemento. */
main h2,
.activation-card h1 {
  font-family: "Big Shoulders Display", "Barlow", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--glow-cyan) 55%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

.hint { color: var(--muted); font-size: 0.9rem; margin-top: -0.3rem; }

.maxes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 1rem;
  max-width: 640px;
}

.max-card {
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: var(--panel-shadow);
}

.reference-title { margin: 1.6rem 0 0.3rem; font-size: 1rem; }

.reference-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
}

.reference-table-wrap table + table { margin-top: 0.4rem; }

/* Le tabelle di riferimento (percentuali, RPE chart colorate) sono dati storici del foglio
   MASTER: restano piatte, senza il rilievo scolpito del resto dell'app, per non confondere
   "materiale del brand" con "colori originali del coach" — due linguaggi visivi distinti. */
.reference-table {
  font-size: 0.82rem;
  white-space: nowrap;
}

.reference-table th, .reference-table td { text-align: center; padding: 0.35rem 0.5rem; }
.reference-table td:first-child, .reference-table th:first-child { text-align: left; }

/* Compatta al massimo: niente barra di scorrimento, tutta la larghezza (100%→50%, 21 colonne
   nella tabella percentuali) sta nello schermo senza tagliare nulla. */
.reference-table--tight th, .reference-table--tight td {
  padding: 0.1rem 0.12rem;
  font-size: 0.62rem;
}

#rpe-reference-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 1rem;
}

#rpe-reference-tables h4 { margin: 0 0 0.3rem; font-size: 0.85rem; }

/* Solo le celle con sfondo colorato hanno bisogno di testo scuro fisso: la colonna RPE (prima
   cella di ogni riga) non ha sfondo colorato e deve restare leggibile nel tema corrente,
   altrimenti in scuro risulta nero su nero. */
.rpe-colored-table td:not(:first-child) { color: #111111; font-weight: 600; }
.rpe-colored-table td:first-child { color: var(--text); }

.rpe-chart-editable td { padding: 0.05rem; }

table.rpe-chart-editable input[type="number"] {
  width: 1.7rem;
  text-align: center;
  padding: 0.1rem 0.02rem;
  font-size: 0.58rem;
  border-radius: 4px;
}

/* Niente freccine su/giù: risparmiano spazio e il coach scrive sempre il valore a mano
   (stessa scelta della Timeline). */
.rpe-chart-editable input[type="number"]::-webkit-outer-spin-button,
.rpe-chart-editable input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rpe-chart-editable input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#tab-rpe-chart {
  max-width: 1100px;
  margin: 0 auto;
}

.max-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.max-card input {
  width: 100%;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.day-col {
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem;
  box-shadow: var(--panel-shadow);
}

.day-col h3 { margin: 0 0 0.6rem; font-size: 1rem; }

.exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.exercise-row:last-of-type { border-bottom: none; }

.exercise-row .info { font-size: 0.9rem; }
.exercise-row .info .cat { color: var(--muted); font-size: 0.78rem; display: block; }
.note-icon { color: var(--muted); opacity: 0.7; vertical-align: middle; margin-left: 0.35em; }

.exercise-row button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
}
.exercise-row button:hover { color: var(--danger); }

.add-exercise-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.add-exercise-form select,
.add-exercise-form input {
  width: 100%;
}

.add-variant-inline {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
  border: 1px dashed var(--accent);
  border-radius: 8px;
}

.add-variant-inline[hidden] { display: none; }

.add-variant-inline .new-variant-decurtazione[hidden] { display: none; }

.new-variant-equipped-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  cursor: pointer;
  width: auto;
}

.new-variant-equipped-toggle input { width: auto; }

.new-variant-equipped-toggle[hidden] { display: none; }

.add-variant-actions {
  display: flex;
  gap: 0.4rem;
}

.add-variant-actions .btn { flex: 1; }

.day-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.day-col-header h3 { margin: 0; }

.remove-day-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}
.remove-day-btn:hover { color: var(--danger); border-color: var(--danger); }
.remove-day-btn.confirming { color: var(--danger); border-color: var(--danger); font-weight: 600; }
.remove-day-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.template-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.add-day-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.template-save-modal-box,
.template-load-modal-box { width: 420px; }

.template-save-visibility {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.template-save-visibility label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.template-load-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
  margin-top: 0.6rem;
}

.template-load-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.template-load-item-info { display: flex; flex-direction: column; gap: 0.15rem; }

.template-load-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.template-load-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.template-load-badge--generico {
  color: var(--accent);
  border-color: var(--accent);
}

.template-load-item-meta { color: var(--muted); font-size: 0.78rem; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  background: var(--panel-gradient);
  color: var(--text);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 color-mix(in srgb, var(--glow-cyan) 30%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

.filter-chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.filter-bar .filter-actions {
  display: flex;
  gap: 0.3rem;
  margin-left: 0.4rem;
}

.filter-bar .filter-actions button {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.88rem;
  box-shadow: var(--panel-shadow);
}

.data-table th, .data-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table input {
  width: 100%;
  padding: 0.3rem 0.4rem;
}

.data-table input[type="number"] { width: 5.5rem; }

.load-value { font-weight: 600; }
.load-error { color: var(--danger); font-size: 0.8rem; cursor: help; }

.timeline-scroll {
  overflow: auto;
  max-height: calc(100vh - 240px);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.timeline-table {
  /* Resta piatta e senza rilievo di proposito: è la tabella più densa dell'app (20 settimane
     per riga), bordi/ombre pesanti la renderebbero più lenta da scorrere e leggere. */
  border: none;
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  font-size: 0.7rem;
  border-collapse: separate;
  border-spacing: 0;
  /* .data-table imposta overflow:hidden per ritagliare gli angoli arrotondati dell'effetto
     rilievo: qui non serve (niente border-radius) e romperebbe l'header sticky in verticale
     (lo scroll box diventerebbe la tabella stessa invece di .timeline-scroll). */
  overflow: visible;
}

.timeline-table th, .timeline-table td {
  border-right: 1px solid var(--border);
  white-space: nowrap;
  padding: 0.1rem 0.16rem;
}

.timeline-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0.22rem;
}

.timeline-table thead tr:first-child th {
  text-align: center;
  top: 0;
}

.timeline-table thead tr:nth-child(2) th {
  top: 1.6rem;
}

.timeline-table thead tr:last-child th {
  top: 2.85rem;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.66rem;
}

.timeline-table .col-identity {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
  text-align: left;
  white-space: normal;
  min-width: 110px;
  max-width: 130px;
  padding: 0.2rem 0.35rem;
}

.timeline-table thead .col-identity { z-index: 3; }

/* Con più blocchi-era affiancati (dopo un congelamento) solo il PRIMO resta "appiccicato" a
   sinistra durante lo scroll: se restassero sticky entrambi si sovrapporrebbero, dato che tutti
   punterebbero a left:0 contemporaneamente. */
.timeline-table .col-identity.no-sticky {
  position: static;
  z-index: auto;
}

.timeline-table .identity-day { color: var(--muted); font-size: 0.63rem; display: block; }
.timeline-table .identity-cat { color: var(--muted); font-size: 0.63rem; display: block; }
.timeline-table .identity-cat .note-icon { margin-left: 0.3em; }
.timeline-table .col-identity strong { font-size: 0.72rem; }

/* Fondamentali (Squat/Panca/Stacco) sempre più marcati dei complementari: stesso principio già
   usato sul link atleta, qui applicato anche alla vista di lavoro del coach. */
.timeline-table .identity-fondamentale { font-weight: 800; font-size: 0.78rem; }
.timeline-table .identity-complementare { font-weight: 500; color: var(--muted); }

.timeline-table .week-group-start { border-left: 2px solid var(--border); }

/* Giornate alternate tra viola e ciano, stessi token già usati sul link atleta (atleta.css) così
   restano coerenti con la vista giorno/notte esistente senza introdurre nuovi colori. La colonna
   identità resta sul suo sfondo pieno (var(--panel)): è sticky e deve coprire il contenuto che le
   scorre sotto durante lo scroll orizzontale, un colore semi-trasparente la renderebbe illeggibile. */
.timeline-table td.day-band-a:not(.col-identity) {
  background: color-mix(in srgb, var(--glow-cyan) 7%, transparent);
}

.timeline-table td.day-band-b:not(.col-identity) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Bordo netto all'inizio di ogni giorno, anche a colori spenti/stampa — "riquadro" ben visibile che
   segna dove finisce un giorno e inizia il successivo. Sulla singola cella (non sulla riga: dopo un
   congelamento due blocchi-era affiancati nella stessa riga possono avere ciascuno la propria
   sequenza di giorni, quindi il cambio giorno di un blocco non implica quello dell'altro). */
.timeline-table td.day-start {
  border-top: 3px solid var(--text);
}

.timeline-table .phase-header { padding: 0.08rem 0.16rem; text-align: center; }
.timeline-table .phase-input {
  width: 100%;
  min-width: 5.5rem;
  text-align: center;
  font-size: 0.66rem;
  font-style: italic;
  color: var(--accent);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 4px;
  padding: 0.06rem 0.12rem;
}
.timeline-table .phase-input:hover { border-color: var(--border); }
.timeline-table .phase-input:focus {
  border-color: var(--accent);
  font-style: normal;
  color: var(--text);
}
.timeline-table .phase-input::placeholder { color: var(--muted); font-style: italic; }

.timeline-table input {
  width: 2rem;
  padding: 0.08rem 0.12rem;
  font-size: 0.68rem;
  border-radius: 4px;
}

/* Specificità pari a ".data-table input[type=\"number\"]" (che altrimenti vince e impone 5.5rem):
   qui vince per ordine di dichiarazione, successivo nel foglio di stile. */
.timeline-table input[type="number"] { width: 1.8rem; }
.timeline-table input.f-intensity { width: 2.8rem; }

/* Niente freccine su/giù: in una griglia così compatta si cliccano per sbaglio troppo spesso
   e non servono, il coach scrive sempre il valore a mano. */
.timeline-table input[type="number"]::-webkit-outer-spin-button,
.timeline-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.timeline-table input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Cella Rip. con IST/AMRAP scritto a mano al posto del numero (vedi saveWeekEntry): evidenziata
   come l'intensità RPE/Trova, per essere riconoscibile a colpo d'occhio nella griglia. */
.timeline-table input.f-reps.f-reps-special {
  color: var(--accent);
  font-weight: 700;
}

.timeline-table .kg-cell { text-align: center; font-weight: 600; min-width: 1.7rem; }
.timeline-table .kg-cell:not(.frozen) { cursor: pointer; }
.timeline-table .kg-cell .manual-kg-input { width: 100%; text-align: center; font-weight: 600; }
/* Carico che nasce da una riga Trova (o dal suo back-off): pastiglia piena nel colore d'accento della skin in uso,
   così si distingue a colpo d'occhio da ogni altro carico e non si perde sulle bande giorno/notte. */
.timeline-table .kg-trova-chip {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}
.timeline-table .kg-trova-hidden { color: var(--muted); font-weight: 400; }

.timeline-table .svolto-col {
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  min-width: 2.2rem;
}

/* Anteprima del range target (fondamentali, quando "target range" è attivo): due numeri sbiaditi
   impilati nella stessa cella "Kg fatti", finché l'atleta non ha ancora compilato il dato reale —
   deve restare dentro le dimensioni già esistenti della cella, mai allargarla. */
.timeline-table .svolto-col .range-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.timeline-table .svolto-col .range-low { color: var(--chart-3); opacity: 0.6; }
.timeline-table .svolto-col .range-high { color: var(--danger); opacity: 0.6; }

.timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.svolto-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  width: fit-content;
}

.rep-set-order-toggle {
  display: inline-flex;
  gap: 0.4rem;
}

.flag-btn {
  display: inline-flex;
  padding: 0.15rem;
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--panel-gradient);
  cursor: pointer;
  line-height: 0;
  box-shadow: var(--panel-shadow);
}

.flag-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.flag-btn.active { border-color: var(--accent); }
.flag-btn svg { border-radius: 2px; }

.timeline-duration-wrap { position: relative; }

.timeline-duration-btn {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
}

.timeline-duration-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  z-index: 15;
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline-duration-popover[hidden] { display: none; }

.range-toggle-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.rpe-chart-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.8rem 0; }
.rpe-chart-scope-toggle, .rpe-chart-lift-tabs { display: flex; gap: 0.4rem; }
.rpe-scope-btn.active, .rpe-lift-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.rpe-chart-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap; }

/* ---- Rateizzato: piano rate + tabella rate nella riga di dettaglio in Pagamenti ---- */
.rateizzato-detail-row > td { padding: 0.8rem 1rem; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.rateizzato-plan { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.rateizzato-plan label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.rateizzato-plan input { width: 4.5rem; }
.rateizzato-installments { max-width: 420px; }

.timeline-copy-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  color: var(--text);
}

/* ---- Modale generico (overlay a schermo intero + box centrato): finora l'app usava solo popover
   ancorati a un bottone, ma il contenuto di "copia struttura settimana" (fino a 20+20 spunte) è
   troppo per starci in un popover senza risultare compresso. ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay[hidden] { display: none; }

.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  padding: 1.2rem;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-box h3 { margin: 0 0 0.3rem; }

.modal-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.modal-actions .btn { flex: 1; }

.timeline-copy-modal-box { width: 420px; }

.timeline-copy-scope {
  display: flex;
  gap: 1.2rem;
  margin: 0.8rem 0;
  font-weight: 600;
}

.timeline-copy-scope label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.timeline-copy-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.timeline-copy-col h4 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timeline-copy-week-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
}

.timeline-copy-week-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  cursor: pointer;
}

.timeline-copy-week-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.timeline-freeze-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  color: var(--text);
}

.timeline-freeze-modal-box { width: 380px; }

.timeline-freeze-range {
  display: flex;
  gap: 1rem;
  margin: 0.8rem 0;
}

.timeline-freeze-range label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.timeline-freeze-range input {
  font-size: 0.95rem;
  color: var(--text);
}

.timeline-freeze-range input:disabled {
  background: color-mix(in srgb, var(--panel) 85%, var(--border));
  color: var(--muted);
}

.timeline-archive-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  color: var(--text);
}

.timeline-archive-modal-box { width: 420px; }

/* ---- Blocco-era congelato in Timeline: identità + settimane restano leggibili ma con un
   trattamento "ghiaccio" (gradiente freddo semi-trasparente + bordo/ombra cristallizzata) che li
   distingue subito dal blocco attivo, senza mai disabilitare i campi (i valori restano modificabili
   come oggi: "congela" blocca solo la struttura del template, non la prescrizione già inserita).
   Applicato per cella (classe "frozen" diretta su ogni <td>/<th>): una <tr> di tabella attraversa
   più blocchi affiancati, non può avere un contenitore-wrapper per singolo blocco. */
#timeline-table td.frozen,
#timeline-table th.frozen {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, #bfe3ff 22%, transparent) 0%,
    color-mix(in srgb, #eaf6ff 10%, transparent) 45%,
    color-mix(in srgb, #bfe3ff 22%, transparent) 100%
  );
  background-color: color-mix(in srgb, var(--panel) 88%, #d7edff);
}

#timeline-table td.frozen.col-identity,
#timeline-table th.frozen.col-identity {
  border-right: 2px solid color-mix(in srgb, #7dd3fc 55%, var(--border));
}

#timeline-table th.frozen { color: color-mix(in srgb, var(--muted) 70%, #7dd3fc); }

#timeline-table .era-block-separator { border-left: 3px solid color-mix(in srgb, #7dd3fc 60%, var(--accent)); }

.timeline-hide-frozen-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.timeline-hide-frozen-toggle input { width: auto; }

/* Settimane congelate: campi in sola lettura, leggibili ma chiaramente non modificabili. */
#timeline-table td.frozen input:disabled,
#timeline-table td.frozen select:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  background: transparent;
}

/* ---- Template per intervallo di settimane: selettore nella tab Template e spunte in Timeline ---- */
.template-eras-bar,
.timeline-templates-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0;
}

.timeline-templates-bar[hidden] { display: none; }

.era-chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.era-chip:hover { border-color: var(--accent); }

.era-chip.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border-color: var(--accent);
  font-weight: 600;
}

.era-chip.locked:not(.active) { color: color-mix(in srgb, var(--muted) 60%, #7dd3fc); }

.era-delete-btn { margin-left: auto; }

.timeline-template-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
}

.timeline-template-toggle input { width: auto; }
.timeline-template-toggle.locked { border-color: color-mix(in srgb, #7dd3fc 55%, var(--border)); }

.template-new-modal-box { width: 420px; }

.timeline-copy-confirm-box { width: 560px; max-width: 94vw; }

.copy-confirm-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.7rem 0; }

.copy-confirm-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.copy-confirm-arrow { color: var(--muted); }
.copy-report-list { margin: 0.6rem 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.5; }

.toast {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  box-shadow: var(--panel-shadow), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.toast.error { background: var(--error-bg); border-color: var(--danger); }

.delivery-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.delivery-form label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.delivery-result {
  background: var(--panel-gradient);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  box-shadow: var(--panel-shadow);
}

.delivery-result input {
  flex: 1;
  min-width: 220px;
  font-family: monospace;
}

.delivery-send-buttons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.btn-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

.btn-chat:hover { filter: brightness(1.08); }

/* Colori riconoscibili dei rispettivi brand: qui i bottoni sono icone esterne di terze parti, non
   elementi dell'identità NS, quindi non seguono la palette viola/ciano dell'app. */
.btn-whatsapp { background: #25d366; }
.btn-telegram { background: #229ed9; }

.delivery-send-hint { flex-basis: 100%; }

/* ---- Grafici (dashboard) ---- */
.dashboard-grid {
  display: grid;
  gap: 1.6rem;
}

.lift-section {
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--panel-shadow);
}

.lift-section h3 {
  margin: 0 0 0.7rem;
  font-size: 1.1rem;
}

.macro-chart-card { margin-bottom: 1rem; }

.day-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.day-chart-card {
  /* Annidata dentro .lift-section, già in rilievo: qui l'effetto si inverte in un incavo
     leggero invece di un secondo rilievo sopra il primo (che sarebbe troppo carico). */
  background: var(--bg-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  box-shadow:
    inset 1px 1px 3px color-mix(in srgb, var(--accent) 20%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--glow-cyan) 25%, transparent);
}

.day-chart-card h4 {
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.day-chart-card .day-chart-variants {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.chart-wrap {
  position: relative;
}

.chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--chart-muted);
  font-size: 8.5px;
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot {
  stroke: var(--panel);
  stroke-width: 2;
}

.chart-bar {
  opacity: 0.85;
}

.chart-end-label {
  fill: var(--text);
  font-size: 9px;
  font-weight: 600;
}

.chart-crosshair {
  stroke: var(--chart-muted);
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}

.chart-legend {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chart-legend-key {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.chart-legend-key-bar {
  height: 8px;
  border-radius: 2px;
  opacity: 0.85;
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.76rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 5;
  white-space: nowrap;
}

.chart-tooltip-head {
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--text);
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-tooltip-key {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}

.chart-tooltip-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.chart-tooltip-label {
  color: var(--muted);
}

.chart-tooltip-layer {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.chart-tooltip-note {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.chart-legend-mode {
  margin-left: auto;
  font-size: 0.72rem;
}

.chart-layer {
  transition: opacity 0.08s linear;
}

/* Barretta "programmato <-> effettivo" sopra i grafici della dashboard. */
.dashboard-compare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0.4rem 0 1rem;
}
.dashboard-compare-end {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.dashboard-compare input[type="range"] {
  flex: 0 1 18rem;
  min-width: 8rem;
  accent-color: var(--accent);
}

.storico-programmazioni {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.storico-programmazioni h3 { margin: 0 0 0.6rem; }

.storico-programmazioni-toolbar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.storico-archivi-popover {
  position: relative;
  display: inline-block;
}

.storico-archivi-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.6rem;
  min-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.storico-archivi-list[hidden] { display: none; }

.storico-archivio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.storico-archivio-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.storico-archivio-item-info { display: flex; flex-direction: column; gap: 0.1rem; }
.storico-archivio-item-period { color: var(--muted); font-size: 0.76rem; }

.storico-career-panel {
  display: grid;
  gap: 1.4rem;
  margin-top: 0.6rem;
}

.storico-career-lift h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.storico-career-chart {
  background: var(--bg-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}

.storico-career-panel[hidden] { display: none; }

.decurtazioni-search {
  width: 100%;
  max-width: 360px;
  margin-bottom: 0.8rem;
}

#decurtazioni-table tr.group-header td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Zona Coach ---- */

.coach-view {
  max-width: 100%;
}

.scadenziario-table td, .scadenziario-table th { white-space: nowrap; }

/* border-left su <tr> non è affidabile con border-collapse: collapse tra i browser: si applica
   alla prima cella della riga, che rende comunque il bordo colorato lungo tutto il lato sinistro. */
.scadenza-row.scadenza-scaduto td:first-child { border-left: 3px solid var(--danger); }
.scadenza-row.scadenza-in-scadenza td:first-child { border-left: 3px solid var(--chart-2); }
.scadenza-row.scadenza-ok td:first-child { border-left: 3px solid var(--chart-3); }
.scadenza-row.scadenza-mai-inviato td:first-child { border-left: 3px solid var(--muted); }
.scadenza-row.scadenza-mai-pagato td:first-child { border-left: 3px solid var(--muted); }

.scadenza-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.scadenza-badge-scaduto {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}

.scadenza-badge-in-scadenza {
  color: var(--chart-2);
  background: color-mix(in srgb, var(--chart-2) 15%, transparent);
}

.scadenza-badge-ok {
  color: var(--chart-3);
  background: color-mix(in srgb, var(--chart-3) 15%, transparent);
}

.scadenza-badge-mai-inviato {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 15%, transparent);
}

.scadenza-badge-mai-pagato {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 15%, transparent);
}

.pagamento-paid-on, .pagamento-subscription {
  font-size: 0.82rem;
  padding: 0.2rem 0.35rem;
}

/* ---- Calendario gare ---- */

.gare-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0;
}

.gare-updated-at { margin: 0; }

.gare-sources-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.gare-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

.gare-source-error {
  color: var(--danger);
  border-color: var(--danger);
}

.gare-fipl-paste {
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
}

.gare-fipl-paste summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.gare-fipl-paste[open] summary { margin-bottom: 0.5rem; }

.gare-fipl-paste-input {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.78rem;
  margin: 0.5rem 0;
  padding: 0.5rem;
}

.gare-legend {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.gare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gare-legend-item .gare-dot { width: 8px; height: 8px; }

.gare-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background: var(--muted);
  flex-shrink: 0;
}

.gare-dot[data-source="FIPL"] { background: var(--chart-2); }
.gare-dot[data-source="IPF"] { background: var(--chart-1); }
.gare-dot[data-source="EPF"] { background: var(--chart-4); }
.gare-dot[data-source="FIPE"] { background: var(--chart-3); }

.gare-calendar-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem;
}

.gare-month-card {
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  border-radius: 10px;
  padding: 0.65rem;
}

.gare-month-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  text-transform: capitalize;
}

.gare-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.gare-weekday {
  font-size: 0.6rem;
  color: var(--muted);
  text-align: center;
  padding-bottom: 0.15rem;
}

.gare-week {
  margin-bottom: 0.3rem;
}

.gare-week-daynums {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.gare-daynum {
  text-align: center;
  font-size: 0.62rem;
  color: var(--text);
  padding-bottom: 0.1rem;
}

.gare-daynum-empty { visibility: hidden; }

.gare-week-lanes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px 0;
}

.gare-bar {
  height: 6px;
  border-radius: 3px;
  margin: 0 1px;
  cursor: pointer;
  background: var(--muted);
}

.gare-bar-out { opacity: 0.35; }

.gare-bar[data-source="FIPL"] { background: var(--chart-2); }
.gare-bar[data-source="IPF"] { background: var(--chart-1); }
.gare-bar[data-source="EPF"] { background: var(--chart-4); }
.gare-bar[data-source="FIPE"] { background: var(--chart-3); }

.gare-bar:hover { filter: brightness(1.25); transform: scaleY(1.4); }

.gare-tooltip {
  position: absolute;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.76rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  max-width: 260px;
  pointer-events: none;
}

.gare-tooltip[hidden] { display: none; }

.gare-tooltip-event + .gare-tooltip-event {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.gare-tooltip-head {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
  color: var(--text);
}

.gare-tooltip-source {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

/* ---- Menu contestuale esercizio (tasto destro su Template/Timeline) ---- */
.context-menu {
  position: absolute;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  min-width: 210px;
}
.context-menu[hidden] { display: none; }
.context-menu li {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.context-menu li:hover, .context-menu li:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.context-menu li[hidden] { display: none; }
.context-menu li.disabled { opacity: 0.4; cursor: not-allowed; }
.context-menu li.disabled:hover { background: none; }

/* Pannello di scelta dell'intensità: tre colonne scorrevoli (%, RPE, Trova) al posto del <datalist>
   nativo, che non si può né ristilizzare in colonne né allargare oltre la sua UI di sistema. */
.intensity-picker {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  max-height: 60vh;
}
.intensity-picker-col {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 58vh;
  min-width: 3.6rem;
}
.intensity-picker-col + .intensity-picker-col { border-left: 1px solid var(--border); padding-left: 0.4rem; }
.intensity-picker-col-title {
  position: sticky;
  top: 0;
  background: var(--panel);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding-bottom: 0.25rem;
  margin-bottom: 0.15rem;
}
.intensity-picker-item {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.intensity-picker-item:hover, .intensity-picker-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---- Atleti: elenco + anagrafica ---- */

.atleti-roster {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.atleti-roster-row {
  background: var(--panel-gradient);
  box-shadow: var(--panel-shadow);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.atleti-roster-main {
  display: grid;
  grid-template-columns: 2rem 2.2rem 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
}

.atleti-roster-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.atleti-roster-chip {
  font-size: 0.72rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.atleti-roster-chip strong { color: var(--text); }

.atleti-roster-rank {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.atleti-roster-photo {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  flex-shrink: 0;
}

.atleti-roster-photo img { width: 100%; height: 100%; object-fit: cover; }

.atleti-roster-photo-placeholder {
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}

.atleti-roster-name {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.atleti-roster-name:hover { color: var(--accent); text-decoration: underline; }

.atleti-roster-points {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: right;
}

.atleti-roster-meta {
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 7rem;
  text-align: right;
}

#atleti-back-btn { margin-bottom: 0.8rem; }

.atleta-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.atleta-photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.atleta-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--panel-shadow);
}

.atleta-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-gradient);
  color: var(--accent);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.atleta-photo-btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.atleta-header-info { flex: 1; min-width: 200px; }
.atleta-header-info h2 { margin: 0 0 0.2rem; }

.atleta-next-gara-field {
  max-width: 340px;
  margin-top: 0.4rem;
}

.atleta-equipped-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.atleta-check-wrap { position: relative; }

.atleta-check-btn { cursor: pointer; }

.atleta-check-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 15;
  width: 280px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.7rem;
}

.atleta-check-popover[hidden] { display: none; }

.atleta-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  max-height: 220px;
  overflow-y: auto;
}

.atleta-check-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.atleta-check-upload-btn {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  cursor: pointer;
}

.atleta-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.atleta-col-left, .atleta-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.atleta-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
}

.atleta-field span { color: var(--muted); font-size: 0.72rem; }

.atleta-field input, .atleta-field select, .atleta-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.85rem;
}

.atleta-field-wide { grid-column: 1 / -1; }

.atleta-maxes-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.atleta-circ-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

.atleta-circ-fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.atleta-circ-fields[hidden] { display: none; }

/* ---- Sincronizzazione tra computer (scheda Zona Coach, solo con la funzione nella licenza) ---- */
.sync-card {
  background: var(--panel-gradient);
  border: 1px solid var(--border);
  box-shadow: var(--panel-shadow);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
  border-left: 6px solid var(--border);
}
.sync-card.sync-ok { border-left-color: var(--chart-3); }
.sync-card.sync-warn { border-left-color: var(--chart-4); }
.sync-card.sync-danger { border-left-color: var(--danger); }
.sync-status-title { font-weight: 800; font-size: 1.15rem; }
.sync-card p { margin: 0.3rem 0 0.6rem; }
.sync-lines { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.25rem; }
.sync-lines b { color: var(--text); }
.sync-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.8rem 0; }
.sync-actions .btn { padding: 0.7rem 1.4rem; font-size: 1rem; }
.sync-result { border-radius: 10px; padding: 0.7rem 1rem; margin: 0.6rem 0; font-size: 0.92rem; }
.sync-result[hidden] { display: none; }
.sync-result.ok { background: color-mix(in srgb, var(--chart-3) 16%, var(--panel)); border: 1px solid var(--chart-3); }
.sync-result.error { background: var(--error-bg); border: 1px solid var(--danger); color: var(--danger); }
.sync-config { margin-top: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 1rem; }
.sync-config summary { cursor: pointer; font-weight: 700; }
.sync-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; margin-top: 0.8rem; }
.sync-field input { font: inherit; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-solid); color: var(--text); }
.sync-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ---- Postazione secondaria: schermata di blocco e barra durante il lavoro ---- */
.satellite-lock { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; }
.satellite-lock[hidden] { display: none; }
.satellite-lock-box { width: min(760px, 100%); background: var(--panel-gradient); border: 1px solid var(--border); box-shadow: var(--panel-shadow); border-radius: 16px; padding: 1.6rem 1.8rem; }
.satellite-lock-logo { height: 54px; width: auto; display: block; margin-bottom: 0.8rem; }
.satellite-lock-box h1 { margin: 0 0 0.4rem; }
.satellite-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.45rem 1rem; background: color-mix(in srgb, var(--chart-4) 22%, var(--panel)); border-bottom: 1px solid var(--chart-4); font-size: 0.9rem; font-weight: 600; }
.satellite-bar[hidden] { display: none; }
.satellite-bar .btn { padding: 0.3rem 0.9rem; }

/* ---- Tempi di recupero (tasto cronometro, spunta e colonna in Timeline) ---- */
.timeline-checks { display: flex; flex-direction: column; gap: 0.25rem; }
.rest-times-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.45rem; }
.rest-times-btn svg { display: block; }
.timeline-table .rest-col { text-align: center; min-width: 3.2rem; }
.timeline-table select.f-rest {
  width: 3.5rem;
  padding: 0.08rem 0.1rem;
  font-size: 0.68rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-solid);
  color: var(--text);
}
.timeline-table select.f-rest:focus { border-color: var(--accent); outline: none; }