/* Banner di errore Blazor Server: senza questo, se un componente lancia
   un'eccezione non gestita (es. in OnInitializedAsync) il circuito SignalR
   muore e la pagina resta silenziosamente "morta" — nessun bottone risponde
   più — senza alcun segnale visibile per l'utente. Markup standard in App.razor. */
#blazor-error-ui {
    background: var(--warning-bg, #3a2f12);
    color: var(--warning-ink, #f5d76e);
    border-top: 1px solid var(--warning, #d4a017);
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    font-size: 14px;
}

#blazor-error-ui .reload {
    color: inherit;
    text-decoration: underline;
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.65rem;
}

/* Avviso "nessun trainer collegato" — usato nelle pagine con dati per-trainer
   (Atleti, Questionario, Progressioni) quando si naviga senza aver effettuato
   l'accesso (build ArcherFitnessNoLogin: il login non è obbligatorio per
   navigare, ma resta necessario per salvare, perché ogni riga è legata a un
   TrainerId reale in AspNetUsers). In questo progetto (login obbligatorio)
   non si dovrebbe mai vedere, ma la classe resta allineata tra i due progetti. */
.callout-warning {
    background: var(--warning-bg, #3a2f12);
    color: var(--warning-ink, #f5d76e);
    border: 1px solid var(--warning, #d4a017);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.callout-warning a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

/* Esito positivo di un'operazione (es. import del file rimandato dall'atleta in
   UploadReturnedProgramModal.razor) — stessa struttura di .callout-warning sopra, solo con i
   token --success-* invece di --warning-*. */
.callout-success {
    background: var(--success-bg, #1D2E20);
    color: var(--success-ink, #9BDBA5);
    border: 1px solid var(--success, #82CB8E);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Nota dell'atleta (TrainingProgramJsonDoc.AthleteFeedback, scritta nel file esportato e
   riportata qui al caricamento del file di ritorno — vedi ProgramReturnedFileParser) dentro la
   card del programma a card aperta, in AthleteDetail.razor: il badge "Nota dall'atleta" a card
   chiusa riusa .badge.changed già esistente (vedi sopra in questo file), qui invece ci va il testo
   per intero. */
.program-feedback-note {
    background: var(--accent-warm-soft);
    border: 1px solid var(--accent-warm);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.5;
}

.program-feedback-note .feedback-note-head {
    font-weight: 600;
    color: var(--accent-warm);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}

:root {
    /* Questi token "scuri" (bg/surface/ink/border) sono ormai usati SOLO dalla sidebar
       (menu laterale): il contenuto pagina (.main, vedi MainLayout.razor.css) li ridefinisce
       localmente con una variante chiara, così le due zone restano indipendenti. */
    --bg: #070504;
    --surface: #0D0907;
    --surface-2: #120D0A;
    --surface-3: #191310;
    --ink: #FFFFFF;
    --ink-muted: #F2E9E4;
    --ink-faint: #7E6155;
    --border: #201612;
    --border-strong: #2E201A;
    --accent: #E63E6D;
    --accent-strong: #FF6F94;
    --accent-soft: #2A1319;
    --accent-ink: #1F0A0F;
    --accent-warm: #E8942A;
    --accent-warm-soft: #2E1E0C;
    /* Rosa più tendente al rosso, riservato al menu laterale (voce attiva del NavMenu):
       --accent resta il rosa cremisi usato per bottoni/link nel resto dell'app, questo è
       solo per .navlink.active così il menu ha una tinta leggermente diversa e più "calda". */
    --menu-accent: #E2334F;
    --menu-accent-strong: #FF6478;
    --menu-accent-soft: #301318;
    --warning: #E7BE72;
    --warning-bg: #332A18;
    --warning-ink: #EFCB8C;
    --warning-soft: #332C1C;
    --danger: #E5766F;
    --danger-bg: #372020;
    --danger-ink: #EE948D;
    --danger-soft: #372020;
    --success: #82CB8E;
    --success-bg: #1D2E20;
    --success-ink: #9BDBA5;
    --success-soft: #1D2E20;
    --flame-1: #6B1F14;
    --flame-2: #C23B2F;
    --flame-3: #E8942A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 10px 28px rgba(0,0,0,.4);
    --radius: 10px;
    --radius-lg: 18px;
    --avatar-s: 38%;
    --avatar-l: 48%;
    --font-display: 'Barlow Condensed', "Arial Narrow", sans-serif;
    --font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", monospace;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

/* Scrollbar sottile, coerente col tema scuro — e senza le frecce su/giù dei browser
   Chromium in dark mode (color-scheme: dark qui sopra le attiva di default), che
   sui riquadri scorrevoli (list-scroll, quest-inline-list, modal-body...) non
   aggiungono nulla e occupano solo spazio. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 999px;
    border: 2px solid var(--bg);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--ink-faint);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: .2px;
}

a {
    color: var(--accent);
}

/* ---------- Bottoni ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s, border-color .12s, transform .06s;
}

.btn:hover {
    background: var(--surface-2);
}

.btn:active {
    transform: scale(.98);
}

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

.btn[disabled] {
    opacity: .5;
    cursor: default;
}

.btn svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* Gradiente rosa→rosso→arancio (fusione delle 3 palette scelte dal trainer, vedi mockup
   "Fusione al Tramonto"): non un semplice var(--accent) piatto come gli altri .btn-*. */
.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #E4432A 55%, var(--accent-warm) 100%);
    border-color: transparent;
    color: #FFFFFF;
}

.btn-primary:hover {
    /* Serve ripetere qui il gradiente: .btn:hover (sopra) ha la stessa specificità (una classe +
       :hover) e in caso di parità vince l'ultima dichiarazione nel foglio, quindi senza questa
       riga il "background: var(--surface-2)" di .btn:hover sovrascriveva il gradiente, facendo
       diventare il bottone bianco/chiaro al passaggio del mouse invece di restare rosa/rosso. */
    background: linear-gradient(135deg, var(--accent) 0%, #E4432A 55%, var(--accent-warm) 100%);
    filter: brightness(1.08);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--surface-2);
}

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

.btn-sm {
    padding: 6px 11px;
    font-size: 13px;
}

.btn-icon {
    padding: 8px;
    border-radius: 999px;
}

/* ---------- Layout di pagina ---------- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 20px;
    flex-wrap: wrap;
}

.page-head.align-center {
    align-items: center;
}

.page-title {
    font-size: 34px;
    margin: 2px 0 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.card + .card {
    margin-top: 14px;
}

/* Bug: come .cal-event.badge più sotto — --accent-soft (#2A1319) è un token scuro pensato per
   il vecchio tema scuro, mai ridefinito per l'area contenuto ora chiara (vedi .main in
   MainLayout.razor.css): i contatori delle tab dell'anagrafica (es. "3/8" sul questionario,
   il numero di check/programmi/sedute/piani — vedi AthleteDetail.razor) risultavano quindi
   pallini quasi neri nella barra tab. Usiamo qui lo stesso rosa chiaro già usato per
   .badge-light/.cal-event.badge invece del vecchio accent-soft scuro. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FBE1E9;
    color: #B0234C;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Variante esplicita di .badge con gli stessi colori, per i punti dove va indicato che il
   colore chiaro è intenzionale (es. "Attuale: X kg" nel dettaglio esercizio, "Attiva" della
   2FA in Impostazioni) e non solo l'eredità della regola base qui sopra. */
.badge-light {
    background: #FBE1E9;
    color: #B0234C;
}

.muted {
    color: var(--ink-muted);
}

/* ---------- Link del menu laterale ----------
   Tenuto qui (globale) invece che nel .razor.css di NavMenu perché NavLink è un
   componente: lo scoping CSS per-componente non si applicava in modo affidabile
   al suo <a> generato internamente. */
.navlink {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
}

.navlink:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.navlink.active {
    background: var(--menu-accent-soft);
    color: var(--menu-accent-strong);
}

/* ---------- Stat tile (home) ---------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.stat-tile .n {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
}

.stat-tile .l {
    color: var(--ink-muted);
    font-size: 12.5px;
    margin-top: 5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.stat-tile.warn .n {
    color: var(--warning-ink);
}

.stat-tile.danger .n {
    color: var(--danger-ink);
}

.stat-tile-link {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.stat-tile-link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-strong);
    transform: translateY(-1px);
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.empty-state h3 {
    color: var(--ink);
    margin-bottom: 6px;
    font-size: 20px;
}

.empty-state p {
    margin: 0 0 16px;
    font-size: 14px;
}

/* ---------- Link "torna indietro" ---------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 28px 0 14px;
    background: none;
    border: none;
    padding: 0;
}

.back-link:hover {
    color: var(--ink);
}

.back-link svg {
    width: 14px;
    height: 14px;
}

/* ---------- Form (login, registrazione, 2FA...) ---------- */
.auth-form {
    /* width:100% invece di lasciarlo "auto" (shrink-wrap): così il form riempie davvero la
       larghezza di .auth-shell-inner .card qui sotto invece di restare fermo al vecchio
       max-width:360px fisso a prescindere da quanto schermo c'è intorno. */
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Il box di login/registrazione/2FA restava piccolissimo anche su schermi grandi: niente nel
   suo albero gli dava una larghezza legata al viewport, solo il max-width:360px fisso di
   .auth-form qui sopra (più il padding di .card). clamp() lo fa crescere con lo schermo fino a
   un tetto oltre il quale un form di login diventerebbe comunque sproporzionato, restando
   comunque responsive sugli schermi stretti (width:100%, dentro al padding di .auth-shell). */
.auth-shell-inner .card {
    width: 100%;
    max-width: clamp(420px, 36vw, 560px);
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.field-input {
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
}

.field-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.field-input.invalid {
    border-color: var(--danger-ink);
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--ink-muted);
}

.field-checkbox label {
    margin: 0;
}

/* ---------- Interruttore on/off (Sezioni: attiva/disattiva voci di menu) ---------- */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    cursor: pointer;
}

.switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.switch-track {
    /* Stesso sfondo di .btn (var(--surface)), non var(--surface-3): quel tono è troppo vicino a
       var(--bg) della pagina, e l'interruttore spento finiva per leggersi come una macchia nera
       invece che come un controllo — vedi .btn sopra per il confronto. */
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    transition: background .15s, border-color .15s;
    position: relative;
}

.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink-muted);
    transition: transform .15s, background .15s;
}

.switch input:checked + .switch-track {
    /* Stesso identico gradiente di .btn-primary (invece di var(--accent-soft), troppo tenue sul
       fondo scuro): l'interruttore "acceso" deve leggersi subito come lo stesso colore dei
       bottoni primari dell'app. */
    background: linear-gradient(135deg, var(--accent) 0%, #E4432A 55%, var(--accent-warm) 100%);
    border-color: transparent;
}

.switch input:checked + .switch-track .switch-thumb {
    transform: translateX(18px);
    /* Bianco pieno come il testo di .btn-primary, per lo stesso motivo di contrasto sul gradiente. */
    background: #FFFFFF;
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.validation-message {
    color: var(--danger-ink);
    font-size: 12.5px;
    margin-top: 4px;
    display: block;
}

.text-danger {
    color: var(--danger-ink);
    font-size: 13px;
    padding-left: 18px;
    margin: 0 0 10px;
}

/* ---------- Messaggi di stato (Identity) ---------- */
.status-message {
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
}

.status-message.success {
    background: #1D2E20;
    color: #9BDBA5;
}

.status-message.error {
    background: #372020;
    color: #EE948D;
}

/* Titoletto di sotto-sezione dentro una .card (Sezioni, Impostazioni). */
.section-heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    font-weight: 700;
    margin: 24px 0 10px;
}

.section-heading:first-child {
    margin-top: 0;
}

/* ---------- Setup app authenticator ---------- */
.setup-steps {
    max-width: 480px;
    padding-left: 20px;
}

.setup-steps li {
    margin-bottom: 22px;
}

.qr-wrap {
    background: #fff;
    display: inline-block;
    padding: 12px;
    border-radius: var(--radius);
    margin: 8px 0;
}

/* ---------- Scelta tipo professionista (onboarding) ---------- */
.profession-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 10px;
    max-width: 760px;
}

.profession-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .12s, transform .06s;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.profession-card:hover {
    border-color: var(--accent-strong);
    transform: translateY(-1px);
}

.profession-card.selected {
    /* Bug: var(--accent-soft) è pensato per il tema scuro originale (quasi nero) e non è stato
       ridefinito da .main per l'area contenuto ora chiara (vedi MainLayout.razor.css): la card
       selezionata diventava un riquadro quasi nero. Stessa famiglia di bug di .cal-event/.badge
       nel calendario — qui una variante chiara dedicata alle card "selezionate/attive". */
    border-color: var(--accent);
    background: #FBE1E9;
    color: #B0234C;
}

.profession-card h3 {
    margin: 0;
    font-size: 18px;
}

/* ---------- Scheda programma (render di esempio) ---------- */
.prog-card {
    max-width: 640px;
}

.prog-note-titolo {
    font-size: 22px;
    margin-bottom: 2px;
}

.prog-giorno {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.prog-giorno-titolo {
    font-size: 18px;
    margin: 0 0 10px;
}

.prog-esercizio + .prog-esercizio {
    margin-top: 14px;
}

.prog-esercizio-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.prog-field {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 7px 12px;
    font-size: 13.5px;
}

.prog-field-nome {
    flex: 1 1 170px;
    font-weight: 600;
}

.prog-field-serie,
.prog-field-rip,
.prog-field-rec {
    font-family: var(--font-mono);
    color: var(--ink-muted);
    white-space: nowrap;
}

.prog-note-box {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ink-muted);
}

.shared-key kbd {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .5px;
}

/* =====================================================================
   Componenti condivisi: client card, avatar, config card, questionario
   config, progressioni (scheletri), modal, form field.
   Portati dal progetto HTML di riferimento (design system originale),
   riusati da Atleti / Configurazione / Questionario / Progressioni —
   non ridefinire altrove queste classi, solo aggiungerne di nuove
   specifiche per pagina. */

/* ---------- Search box (Atleti) ---------- */
.search-box {
    width: 260px;
    max-width: 100%;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
}

.search-box input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--ink-faint);
}

/* ---------- Client grid ---------- */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 14px;
}

.client-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .12s, transform .06s;
    /* Bug: senza questa riga il nome/i dati (.card-name, .card-sub, ecc.) risultavano bianchi
       nelle liste Atleti/Programmazione. È un <button>: a differenza di div/span, un bottone non
       eredita "color" dal resto della pagina, usa il default del browser — qui il default chiaro
       perché :root dichiara "color-scheme: dark" (vedi sopra) per gli scrollbar/controlli nativi.
       Le altre card-bottone dell'app (.ex-mini-card, .profession-card, .sk-card-toggle...) hanno
       già "color: inherit"; questa era rimasta indietro. */
    color: inherit;
}

.client-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.client-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.card-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.avatar {
    --hue: 210;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    background: hsl(var(--hue) var(--avatar-s) var(--avatar-l));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .5px;
}

.avatar.lg {
    width: 58px;
    height: 58px;
    font-size: 21px;
}

.card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.15;
}

.card-sub {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-top: 2px;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: auto;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.dot.ok { background: var(--success); }
.dot.warn { background: var(--warning); }
.dot.late { background: var(--danger); }
.dot.none { background: var(--ink-faint); }

.card-metrics {
    display: flex;
    gap: 16px;
    border-top: 1px solid var(--border);
    padding-top: 11px;
}

.metric .v {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15.5px;
}

.metric .k {
    font-size: 11px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ---------- Toolbar ---------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-label {
    font-size: 13px;
    color: var(--ink-muted);
    font-weight: 600;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0 14px;
}

.section-head h2 {
    font-size: 21px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    color: var(--ink-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Logiche Configurazione (card di navigazione) ---------- */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 4px;
}

.config-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .12s, transform .06s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.config-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.config-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-weight: 600;
}

.config-card p {
    margin: 0;
    font-size: 13px;
    color: var(--ink-muted);
}

/* ---------- Questionario: elenco campi configurabili ---------- */
.quest-field-list {
    display: flex;
    flex-direction: column;
}

.quest-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
}

.quest-field-row:last-child {
    border-bottom: none;
}

.quest-field-reorder {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
}

.quest-field-reorder button {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--ink-faint);
    width: 20px;
    height: 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quest-field-reorder button:hover:not([disabled]) {
    color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.quest-field-reorder button[disabled] {
    opacity: .3;
    cursor: default;
}

.quest-field-main {
    flex: 1;
    min-width: 0;
}

.quest-field-label {
    font-weight: 600;
    font-size: 14.5px;
}

.quest-field-type {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-top: 2px;
}

.quest-field-actions {
    display: flex;
    gap: 4px;
    flex: none;
}

.quest-cat-group:first-child .quest-cat-head {
    border-top: none;
    padding-top: 2px;
    margin-top: 0;
}

.quest-cat-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--accent-strong);
    padding: 16px 4px 6px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

/* Agenda (Home): "Prime visite" in rosso e "Rinnovi" in arancio, per distinguerle a colpo
   d'occhio — classi dedicate (non nth-of-type globale) per non toccare .quest-cat-head
   altrove nell'app (Questionario, Esercizi, ecc. hanno le loro card senza queste classi). */
.card-prime-visite .quest-cat-head {
    color: #E4432A;
}

.card-rinnovi .quest-cat-head {
    color: var(--accent-warm);
}

.card-rinnovi .quest-field-actions .btn-icon:not(.btn-danger) {
    color: var(--accent-warm);
}

.quest-field-row .chips {
    margin-top: 2px;
}

.quest-field-choices {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-top: 2px;
}

/* ---------- Progressioni (scheletri) ---------- */
.sk-categories {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sk-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.sk-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sk-category-head h2 {
    font-size: 18px;
}

.sk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-height: 640px;
    overflow-y: auto;
    padding-right: 6px;
}

/* Variante a piena larghezza di .sk-grid: la lista "Piani alimentari" nella scheda atleta
   (vedi AthleteDetail.razor) occupava solo metà riga a card, due colonne come i programmi di
   allenamento — ma qui ogni card ha meno contenuto in orizzontale (solo nome/data/note), quindi
   non c'è motivo di tenerle strette in due colonne. */
.sk-grid-full {
    grid-template-columns: 1fr;
}

.sk-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.sk-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.sk-card-head h3 {
    font-size: 18px;
}

.sk-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.sk-card-toggle.static {
    cursor: default;
}

.sk-card-actions {
    display: flex;
    gap: 6px;
    flex: none;
}

.sk-card.open .chev {
    transform: rotate(180deg);
}

.sk-card-preview-hint {
    font-size: 11.5px;
    color: var(--ink-faint);
    margin-top: 8px;
    text-align: center;
    cursor: pointer;
}

.sk-card.has-more:not(.open) tbody tr {
    transition: filter .15s, opacity .15s;
}

.sk-card.has-more:not(.open) tbody tr:not(:first-child) {
    filter: blur(2.5px);
    opacity: .55;
    user-select: none;
}

.scheletro-panel {
    margin-top: 10px;
    padding: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink-muted);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.chip:hover {
    border-color: var(--ink-faint);
}

.chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

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

.mode-card {
    border: 1px solid var(--border-strong);
    background: var(--bg);
    border-radius: var(--radius);
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color .12s;
}

.mode-card:hover {
    border-color: var(--ink-faint);
}

.mode-card.active {
    /* Bug: stessa causa di .profession-card.selected/.ex-mini-card.active (vedi sopra). */
    border-color: var(--accent);
    background: #FBE1E9;
}

.mode-card h4 {
    font-size: 15px;
    margin-bottom: 3px;
    font-family: var(--font-display);
    font-weight: 600;
}

.mode-card.active h4 {
    /* Con lo sfondo chiaro qui sopra, var(--accent-strong) (rosa acceso, pensato per un bg quasi
       nero) risultava poco leggibile: stesso rosa scuro usato per le altre card selezionate. */
    color: #B0234C;
}

.mode-card p {
    margin: 0;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.4;
}

.quick-setup {
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 12px;
}

.quick-setup .field-row {
    margin-bottom: 8px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.quick-setup-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-setup-note {
    font-size: 12px;
    color: var(--ink-faint);
    max-width: 58ch;
}

table.sk-editgrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 14px;
}

table.sk-editgrid th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink-faint);
    padding: 6px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.sk-editgrid td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.sk-editgrid input[type=text] {
    width: 100%;
    min-width: 56px;
    padding: 6px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font-size: 13px;
}

table.sk-editgrid td.wk {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
}

table.sk-editgrid input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex: none;
}

.test-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.test-cell label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--ink-muted);
    text-transform: none;
    font-weight: 600;
}

.test-cell input[type=text] {
    width: 60px;
}

.fillcol {
    background: none;
    border: none;
    color: var(--accent-strong);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
    margin-left: 5px;
}

.fillcol:hover {
    text-decoration: underline;
}

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,19,17,.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
    z-index: 100;
}

/* Variante con lo sfondo sfocato invece che solo scurito (Scadenzario: il mese resta visibile
   ma sfocato dietro al popup del giorno). Modificatore a parte e non il default di
   .modal-backdrop per non cambiare l'aspetto degli altri modal dell'app. */
.blur-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    /* Stessa logica fluida di .content/.sidebar (vedi MainLayout.razor.css/NavMenu.razor.css):
       640px resta il minimo (identico a prima su laptop/schermi normali), poi cresce con la
       finestra. Bug: prima era un max-width fisso, quindi su schermi grandi i popup (compreso
       quello dei check e quello delle progressioni) restavano piccoli mentre il resto della
       pagina si allargava. */
    max-width: clamp(640px, 46vw, 760px);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

.modal.wide {
    max-width: clamp(820px, 62vw, 1320px);
}

/* Popup del builder allenamento (TrainingProgramFormModal): le tabelle di settimane/esercizi
   hanno molte più colonne di un .modal.wide normale, quindi qui serve ancora più spazio — ma
   solo per questo popup, non per tutti i ".modal.wide" dell'app (check, PT session, calendario,
   template piani, progressioni...), che restano come prima. .tpb-modal-backdrop sposta il
   centraggio a destra della sidebar (stessa larghezza di NavMenu.razor.css/.sidebar) così il
   pannello più largo non può mai finire sopra al menu, qualunque sia la finestra. */
.tpb-modal-backdrop { padding-left: calc(clamp(236px, 12vw, 300px) + 16px); }
.modal.wide.tpb-modal { max-width: clamp(900px, 84vw, 1680px); }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.modal-head h2 {
    font-size: 22px;
}

.modal-body {
    padding: 20px 22px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
}

/* ---------- TrainingProgramBuilder in versione pagina (Embedded="false", ProgramBuilder.razor):
   stesso builder del popup ma senza la cornice modale, quindi niente altezza massima/scroll
   interno — è la pagina intera a scorrere — vedi Components/Shared/TrainingProgramBuilder.razor. ---------- */
.tpb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tpb-head h2 {
    font-size: 22px;
    margin: 0;
}

.tpb-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

/* ---------- Form field (dentro i modal) ---------- */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Bug: .field-row è a griglia fissa 2 colonne — con 3 campi (Data/Nome/Numero sostituzioni,
   vedi DietPlanBuilder.razor) il terzo andava automaticamente a capo su una riga propria invece
   di stare sulla stessa riga degli altri due. Qui sotto una variante a 3 colonne scoped solo a
   questa pagina (niente da toccare per gli altri .field-row a 2 campi nel resto dell'app):
   Data e Numero sostituzioni restano stretti al loro contenuto naturale (data/numero piccolo),
   Nome prende tutto lo spazio restante. */
.diet-builder-page .field-row {
    grid-template-columns: minmax(150px, auto) 1fr minmax(170px, auto);
}

/* Stesso bug/stessa soluzione di .diet-builder-page qui sopra, per i 3 campi Data/Nome/Settimane
   del TrainingProgramBuilder (vedi TrainingProgramBuilder.razor): Settimane è solo un numero,
   quindi resta stretto al contenuto come Data invece di prendere lo spazio di .diet-builder-page. */
.tpb-field-row {
    grid-template-columns: minmax(150px, auto) 1fr minmax(110px, auto);
}

.field-hint {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 4px;
}

/* Nota breve accanto a un'etichetta di campo (es. "(per 100g, crudo)" su FoodFormModal): stessi
   toni di .field-hint ma inline e senza il maiuscolo/spaziatura dell'etichetta che la contiene. */
.field-hint-inline {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 11px;
    color: var(--ink-faint);
    margin-left: 6px;
}

.chev-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: var(--ink-faint);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.chev-btn:hover {
    color: var(--ink);
    background: var(--surface-3);
}

.chev {
    width: 16px;
    height: 16px;
    color: var(--ink-faint);
    transition: transform .15s;
    flex: none;
}

/* Icone del dropdown "titolo app" (NavMenu.razor: .brand-chev/.brand-menu-item), tenute qui
   (globale) e non in NavMenu.razor.css perché sono iniettate come MarkupString da Icons.cs —
   lo scoping CSS per-componente di Blazor non si applica in modo affidabile al markup grezzo. */
.brand-chev.open svg.chev {
    transform: rotate(180deg);
}

.brand-menu-item svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Chevron dei sottomenu richiudibili della sidebar (NavMenu.razor: .sidenav-subgroup-chev,
   es. "Configurazione" sotto "Allenamento") — stessa ragione di .brand-chev qui sopra: icona
   iniettata come MarkupString da Icons.cs, la regola di rotazione resta nel CSS globale. */
.sidenav-subgroup-chev.open svg.chev {
    transform: rotate(180deg);
}

/* Chevron dei titoli principali richiudibili della sidebar (NavMenu.razor:
   .sidenav-section-chev, es. "Allenamento", "Alimentazione") — stessa ragione di
   .sidenav-subgroup-chev qui sopra. */
.sidenav-section-chev.open svg.chev {
    transform: rotate(180deg);
}

/* ============================================================
   Dettaglio atleta — porting da ArcherFitness.html (header, questionario
   inline, liste Check/Programmi, card check-in, form check).
   ============================================================ */

.client-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.client-header-main { flex: 1 1 260px; min-width: 0; }
.client-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-header h1 { font-size: 28px; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    color: var(--ink-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.contact-row { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.contact-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent); text-decoration: none; }
.contact-chip svg { width: 13px; height: 13px; }
.client-notes { margin-top: 12px; font-size: 13.5px; color: var(--ink-muted); max-width: 60ch; }
.client-notes b { color: var(--ink); font-weight: 600; }
.client-actions { display: flex; gap: 8px; flex: none; }

.client-metrics {
    flex: 1 1 100%;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.client-metrics .metric .v { font-size: 22px; }
.client-metrics .metric .k { margin-top: 3px; }
.client-metrics .metric.warn .v { color: var(--warning-ink); }
.client-metrics .metric.danger .v { color: var(--danger-ink); }

.quest-status { font-size: 13px; color: var(--ink-muted); }

.quest-inline-list { display: flex; flex-direction: column; }
.quest-inline-field { margin-bottom: 14px; }
.quest-inline-field:last-child { margin-bottom: 2px; }
.quest-inline-input {
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
}
textarea.quest-inline-input { resize: vertical; min-height: 60px; }
.quest-inline-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.quest-inline-cat-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--accent-strong);
    margin: 18px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.quest-inline-list > .quest-inline-cat-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.quest-inline-choice-group { margin-top: 2px; }

.list-boxes { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.list-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.list-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.list-box-head h2 { font-size: 18px; }
.list-scroll { max-height: 640px; overflow-y: auto; padding-right: 6px; }

/* Tab di sezione sotto l'header anagrafica (dettaglio atleta): dividono
   Questionario da Check & programmi, che prima stavano tutti impilati
   in un'unica pagina lunga. Stesso linguaggio visivo dei .week-tab. */
.section-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 22px 0 20px; overflow-x: auto;
    /* Barra corta e sempre scorribile col dito/trackpad: la scrollbar qui non aggiunge
       informazione, la togliamo (resta comunque scorrevole). */
    scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
    display: flex; align-items: center; gap: 7px; flex: none;
    padding: 11px 18px; border-radius: 10px 10px 0 0;
    font-weight: 600; font-size: 14px; color: var(--ink-muted); cursor: pointer;
    border: 1px solid transparent; border-bottom: none; background: none; font-family: inherit;
}
.section-tab svg { width: 16px; height: 16px; flex: none; }
.section-tab:hover { color: var(--ink); background: var(--surface-2); }
.section-tab.active { color: var(--accent-strong); background: var(--surface-2); border-color: var(--border); border-bottom: 1px solid var(--surface-2); margin-bottom: -1px; }

/* ---------- Sessioni PT: sotto-tab "Storico sessioni" / "Andamento" (dentro la tab
   "Sessioni PT" della scheda atleta) — stile a sottolineatura, più leggero dei
   .section-tab qui sopra, per marcare che è un livello di navigazione interno. ---------- */
.pt-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tab { border: none; background: none; color: var(--ink-muted); font-weight: 700; font-size: 13.5px; padding: 10px 2px; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; white-space: nowrap; }
.pt-tab:hover { color: var(--ink); }
.pt-tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* ---------- Andamento per esercizio: griglia di mini-card + dettaglio con grafico SVG
   (calcolato lato server in C#, senza JS — vedi BuildChartSvg in AthleteDetail.razor). ---------- */
.ex-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ex-mini-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .12s, transform .06s; font: inherit; color: inherit; }
.ex-mini-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* Bug: stessa causa di .profession-card.selected qui sopra — var(--accent-soft) non ridefinito
   per l'area contenuto chiara, la card dell'esercizio selezionato diventava quasi nera. */
.ex-mini-card.active { border-color: var(--accent); background: #FBE1E9; }
.ex-mini-card .name { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.ex-mini-card .best { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
.ex-mini-card .mini-chart { width: 100%; height: auto; display: block; }
.ex-mini-card .mini-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.ex-mini-card .mini-foot .trend { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; }
.trend-up { color: var(--success-ink); }
.trend-down { color: var(--danger-ink); }
.trend-flat { color: var(--ink-faint); }

.ex-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 780px) { .ex-detail { grid-template-columns: 1fr; } }
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; overflow: visible; }
.chart-axis-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-faint); }
.chart-value-label { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--accent-strong); }
.chart-dot { fill: var(--accent-strong); stroke: var(--surface); stroke-width: 2; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-grid { stroke: var(--border); stroke-width: 1; }

/* Griglia settimanale sola-lettura (card Programma nel dettaglio atleta) */
.week-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.week-tab {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    user-select: none;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 13.5px;
    border: 1px solid transparent;
    border-bottom: none;
}
.week-tab .wk-n { font-family: var(--font-display); font-size: 14.5px; }
.week-tab:hover { color: var(--ink); background: var(--surface-2); }
.week-tab.active { color: var(--accent-strong); background: var(--surface-2); border-color: var(--border); border-bottom: 1px solid var(--surface-2); margin-bottom: -1px; }

table.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.grid-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); padding: 8px; font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.grid-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid-table tr:last-child > td { border-bottom: none; }
table.grid-table td.num, table.grid-table th.num { text-align: center; }
.row-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3); color: var(--ink-muted); font-family: var(--font-mono); font-weight: 600; font-size: 11px; flex: none; }
.ex-name-cell { display: flex; align-items: center; gap: 8px; white-space: normal; min-width: 150px; }
.ex-name { font-weight: 600; color: var(--ink); }
.cell-val { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; }
.cell-val.empty { color: var(--ink-faint); border-style: dashed; }
.test-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--accent-warm-soft); color: var(--accent-warm); font-size: 11px; font-weight: 700; }
.test-dash { color: var(--ink-faint); }
.note-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 5px; border-radius: 6px; display: inline-flex; }
.note-btn:hover { color: var(--accent-strong); background: var(--surface-3); }
.note-btn.has-note { color: var(--accent-strong); }
.note-btn svg { width: 14px; height: 14px; }
tr.note-row td { padding: 0 8px 10px; border-bottom: 1px solid var(--border); }
tr.note-row:last-child td { border-bottom: none; }
tr.note-row .note-inner { background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }

/* Card check-in (elenco Check) */
.checkin-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.checkin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: relative; }
.checkin-summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; width: 100%; background: none; border: none; text-align: left; color: inherit; }
.checkin-date { font-family: var(--font-display); font-weight: 600; font-size: 19px; min-width: 150px; }
.checkin-rel { font-size: 12px; color: var(--ink-faint); display: block; font-weight: 400; font-family: var(--font-body); margin-top: 1px; }
.checkin-badges { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.unchanged { background: var(--success-bg); color: var(--success-ink); }
.badge.changed { background: var(--accent-warm-soft); color: var(--accent-warm); }
.badge.first { background: var(--surface-3); color: var(--ink-muted); }
.badge.danger { background: var(--danger-bg); color: var(--danger-ink); }
.badge svg { width: 11px; height: 11px; }
.checkin-quick { display: flex; gap: 16px; align-items: center; flex: none; }
/* Apri/Modifica/Elimina: fuori da .checkin-body apposta, così restano visibili anche a card
   chiusa (vedi AthleteDetail.razor/.checkin-actions) invece di nascondersi col resto del
   dettaglio quando .checkin-body è display:none. */
.checkin-actions { display: flex; gap: 8px; padding: 0 18px 14px; flex-wrap: wrap; }
.checkin-card.open .chev { transform: rotate(180deg); }
.chev.open { transform: rotate(180deg); }
.checkin-body { padding: 0 20px 20px; display: none; border-top: 1px solid var(--border); }
.checkin-card.open .checkin-body { display: block; padding-top: 16px; }
.checkin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 18px; }
.field-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); margin-bottom: 8px; font-weight: 700; }
.measure-list { display: flex; flex-direction: column; gap: 5px; }
.measure-row { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px dotted var(--border); padding-bottom: 4px; }
.measure-row .v { font-family: var(--font-mono); }
.note-text { font-size: 14px; color: var(--ink); white-space: pre-wrap; line-height: 1.55; }
.photo-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-thumb { width: 76px; height: 76px; border-radius: 9px; object-fit: cover; cursor: zoom-in; border: 1px solid var(--border); }

.diff-callout { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; }
.diff-callout.unchanged { background: var(--success-bg); color: var(--success-ink); }
.diff-callout.changed { background: var(--accent-warm-soft); color: var(--accent-warm); }
.diff-callout ul { margin: 6px 0 0; padding-left: 18px; }
.diff-callout li { margin-bottom: 2px; }

.day-block { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.day-head { background: var(--surface-2); padding: 8px 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; }
table.ex-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ex-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); padding: 7px 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
table.ex-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
table.ex-table td.num, table.ex-table th.num { font-family: var(--font-mono); text-align: right; }
table.ex-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.checkin-foot { display: flex; gap: 8px; margin-top: 6px; }

/* Form check-in: misure dinamiche + editor scheda giorni/esercizi */
.misura-row, .ex-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.misura-row input:first-child { flex: 1 1 40%; }
.misura-row input:last-child { flex: 1 1 30%; }
.ex-row { flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.ex-row input { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: var(--surface); }
.ex-row .ex-nome { flex: 2 1 160px; }
.ex-row .ex-num { flex: 1 1 62px; width: 62px; }
.ex-row .ex-note { flex: 2 1 140px; }
/* Cestino sempre rosso (non solo all'hover, come voluto dal trainer) e leggermente più grande
   (16px -> 18px) per essere più riconoscibile: cambiato qui perché la classe è condivisa da
   tutti i pulsanti cestino dell'app (Programmi, Check, Sessioni PT, Piano alimentare), non solo
   dal piano alimentare. In precedenza .row-del non dava mai una dimensione esplicita al suo
   <svg> — nel layout a 2 parti di .diet-item-row (introdotto per il fix precedente, vedi sotto)
   l'icona senza width/height risultava di fatto priva di area cliccabile/visibile, non solo poco
   contrastata: impostarla qui la rende affidabile ovunque. */
.row-del { background: none; border: none; color: var(--danger); cursor: pointer; padding: 4px; flex: none; }
.row-del svg { width: 18px; height: 18px; }
.row-del:hover { filter: brightness(0.85); }
/* Usato per il pasto in DietPlanBuilder.razor: sotto i 3 pasti minimi (pranzo/cena obbligatori)
   il cestino resta visibile ma disabilitato invece di scomparire, così il perché è chiaro dal
   title al passaggio del mouse. */
.row-del:disabled { opacity: .35; cursor: not-allowed; }
.row-del:disabled:hover { color: var(--ink-muted); }

/* ---- ExercisePicker: combobox di selezione esercizio dalla libreria (Configurazione › Esercizi),
   al posto del campo testo libero, usato dentro .ex-row in Check/Programmi/Sessioni PT. ---- */
.ex-row .ex-picker { flex: 2 1 160px; position: relative; }
.ex-picker-input {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px;
    background: var(--surface); color: var(--ink); font-size: 13.5px; font-family: inherit;
    cursor: pointer; text-align: left; box-sizing: border-box;
}
.ex-picker-input:hover { border-color: var(--ink-faint); }
.ex-picker-input.open { border-color: var(--accent); }
.ex-picker-input .chev { width: 14px; height: 14px; flex: none; color: var(--ink-faint); transition: transform .15s; }
.ex-picker-input.open .chev { transform: rotate(180deg); }
.ex-picker-value { display: flex; flex-direction: column; gap: 1px; overflow: hidden; min-width: 0; }
.ex-picker-value.placeholder { color: var(--ink-faint); }
.ex-picker-value .ex-picker-value-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-picker-value .grp { color: var(--ink-faint); font-size: 11.5px; margin-left: 6px; }

/* Sottotitolo attrezzo, ovunque compaia il nome di un esercizio (libreria e picker). */
.ex-tool-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* Scrim trasparente a tutta pagina: chiude il pannello con un click fuori, senza JS (stesso
   principio del .modal-backdrop, ma invisibile e sotto al pannello anziché sopra al contenuto). */
.ex-picker-scrim { position: fixed; inset: 0; z-index: 39; background: transparent; border: none; padding: 0; cursor: default; }

.ex-picker-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; min-width: 260px;
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 8px;
}
.ex-picker-search {
    width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 9px;
    background: var(--bg); color: var(--ink); font-size: 13px; font-family: inherit; margin-bottom: 6px; box-sizing: border-box;
}
.ex-picker-list { max-height: 220px; overflow-y: auto; }
.ex-picker-group-head {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--accent-strong); padding: 8px 6px 4px;
}
.ex-picker-group-head:first-child { padding-top: 2px; }
.ex-picker-item {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: var(--ink);
}
.ex-picker-item .ex-picker-item-tool { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.ex-picker-item:hover, .ex-picker-item.hover { background: var(--surface-3); }
.ex-picker-item.selected { color: var(--accent-strong); font-weight: 600; }
.ex-picker-empty { padding: 10px 8px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.ex-picker-add {
    display: flex; align-items: center; gap: 6px; padding: 9px 8px; margin-top: 4px;
    border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--accent-strong);
}
.ex-picker-add:hover { background: var(--surface-3); }
.ex-picker-add svg { width: 15px; height: 15px; flex: none; }

/* ---- Elenco libreria esercizi (Configurazione › Esercizi) — stessa griglia di quest-field-*. ---- */
.ex-lib-row .quest-field-label { font-size: 14.5px; }

.day-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; background: var(--surface-2); }
.day-editor-head { display: flex; gap: 8px; margin-bottom: 10px; }
.day-editor-head input { flex: 1; }
.add-row-btn { font-size: 12.5px; color: var(--accent); background: none; border: none; cursor: pointer; font-weight: 600; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }

/* ---- Builder piano alimentare (Alimentazione › Programmi Alimentari) — stessa impostazione di
   .day-editor/.ex-row qui sopra, un livello in più (giornata tipo > pasto > riga macro). ---- */
.diet-daytype { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; background: var(--surface-2); }
.diet-daytype-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.diet-daytype-head input { flex: 1; }
/* Freccia per comprimere/espandere la giornata tipo (vedi DayTypeEdit.Collapsed): con più
   giornate tipo nello stesso piano, poterle chiudere evita di dover scrollare tutta la pagina
   per lavorare su quella che interessa. Riusa .chev (già in FoodPicker/altrove), ruotato con la
   classe "open" quando la giornata è espansa — stessa convenzione di .ex-picker-input.open. */
/* Usato sia dall'header di ogni giornata tipo sia da quello di ogni pasto (Colazione/Pranzo/...
   dentro la giornata, vedi Pages/DietPlanBuilder.razor) — stesso pulsante freccia per comprimere/
   espandere, a due livelli di annidamento diversi. */
.collapse-toggle { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; flex: none; }
.collapse-toggle .chev { color: var(--ink-muted); }
.collapse-toggle.open .chev { transform: rotate(180deg); }
/* Compare solo a giornata chiusa, accanto al nome: senza dover espandere, il trainer vede subito
   quanti pasti contiene quella giornata tipo. */
.diet-daytype-mealcount { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
/* Totale kcal + scomposizione proteine/carbo/grassi della giornata tipo (vedi DayTypeKcal/
   DayTypeMacroGrams in DietPlanBuilder.razor) — raggruppati qui solo per andare a capo insieme
   se la riga dell'header è troppo stretta, non sono più un bottone: il vecchio popup di dettaglio
   kcal per pasto è stato tolto (vedi commento su MealKcal), l'unico scopo di questo gruppo adesso
   è mostrare i numeri, non aprire nulla. */
.diet-daytype-totals { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
/* Il totale kcal resta nel colore d'accento dell'app (stesso --accent di bottoni/link): è IL
   numero di sintesi della giornata, va distinto a colpo d'occhio dal gruppo proteine/carbo/grassi
   qui sotto, che invece è la sua scomposizione nei tre pezzi che lo compongono.
   Bug: var(--accent-soft) (#2A1319) è un token scuro pensato per il vecchio tema scuro, mai
   ridefinito per l'area contenuto ora chiara (stessa famiglia di bug di .badge/.profession-card.
   selected/.mode-card.active, vedi sopra in questo file) — il pillolo risultava quasi nero invece
   che un richiamo leggero del colore d'accento. Sfondo bianco (var(--surface)) invece del vecchio
   token scuro. */
.diet-daytype-kcal { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); white-space: nowrap; padding: 6px 10px; background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; }
/* Scomposizione proteine/carbo/grassi (vedi DayTypeMacroGrams) — un unico blocco con sfondo
   neutro, deliberatamente diverso dal colore del totale kcal qui sopra: lo stacco di colore rende
   immediato distinguere "questo è un totale" da "questi sono i pezzi che lo dividono". Le tre
   etichette (Prot./Carbo/Grassi) restano testo, non solo numeri, per non dover indovinare quale
   valore sia quale. */
.diet-daytype-macros { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; padding: 6px 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; }
.diet-macro-chip { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.diet-macro-chip b { font-size: 13px; font-weight: 700; color: var(--ink); }
.diet-meal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.diet-meal-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.diet-meal-head input { flex: 1; max-width: 280px; }
/* .diet-item-row è ora un contenitore a 2 parti SENZA wrap (.diet-item-fields che cresce/va a
   capo + il cestino): prima select/FoodPicker/quantità/note-sostituzioni e il cestino crescevano
   tutti insieme nello stesso flex-wrap, e sulle finestre più strette (o con la libreria alimenti
   cresciuta a 358 voci, che allarga il FoodPicker) i campi arrivavano a riempire l'intera riga
   lasciando il cestino "Rimuovi riga" senza spazio per andare a capo in modo visibile — spariva
   di fatto, il trainer non aveva più modo di togliere una riga macro aggiunta per errore. Ora il
   cestino è un fratello del gruppo di campi, non un membro dello stesso flex-wrap: ha sempre la
   sua larghezza riservata in fondo alla riga, qualunque cosa faccia .diet-item-fields al suo
   interno (va a capo lei, non lui). */
.diet-item-row { display: flex; align-items: flex-start; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.diet-item-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; }
.diet-item-cat { flex: 0 1 120px; }
.diet-item-food { flex: 2 1 180px; }
/* FoodPicker (vedi Shared/FoodPicker.razor) ha preso il posto dell'input libero .diet-item-food:
   stessa sagoma/proporzione nella riga, ma la classe .ex-picker è sul suo elemento radice (non
   possiamo scrivere .diet-item-food direttamente sul componente) — .ex-row .ex-picker qui sopra
   è la stessa regola per ExercisePicker ma scoped a .ex-row, serve l'equivalente per .diet-item-fields. */
.diet-item-fields .ex-picker { flex: 2 1 180px; position: relative; }
.diet-item-qty { flex: 1 1 110px; }
.diet-item-subs { flex: 3 1 220px; min-height: 38px; resize: vertical; }
/* Cestino "Rimuovi riga": mai coinvolto nel wrap dei campi (vedi sopra), sempre della sua
   larghezza naturale, allineato all'inizio della riga come il resto (.diet-item-row è
   align-items: flex-start). */
.diet-item-del { flex: none; }

/* Riga di inserimento esercizio (builder programma) */
.entry-add-btn { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.entry-add-btn:hover { filter: brightness(1.08); }
.entry-status { font-size: 12px; margin-top: 9px; padding: 6px 10px; border-radius: 8px; line-height: 1.5; }
.entry-status.warn { background: var(--danger-bg); color: var(--danger-ink); }
.entry-status.ok { background: var(--success-bg); color: var(--success-ink); }
/* Tipo esecuzione per esercizio (builder programma) — select a comparsa nella riga, STESSO
   stile sempre: niente evidenziazione quando si sceglie un tipo diverso da "Classica" (richiesta
   esplicita, a differenza del mockup che invece coloriva il select). Solo il pannello sotto la
   riga cambia in base al tipo. */
.ex-row select.ex-type {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--surface);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    flex: 1 1 150px;
}

.ex-type-panel { border: 1px solid var(--accent); border-top: none; border-radius: 0 0 8px 8px; background: var(--surface); padding: 10px 12px 11px; margin-top: -7px; margin-bottom: 7px; font-size: 13px; }
/* Riga con etichetta pannello + freccetta comprimi/espandi (solo per i tipi con più righe
   dentro, vedi isListType in TrainingProgramBuilder.razor) — .collapse-toggle/.chev.open sono
   lo stesso pulsante già usato per giornata tipo/pasto in DietPlanBuilder.razor, riusato pari
   pari qui invece di inventarne uno nuovo. */
.panel-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/* flex:1 + min-width:0 sull'etichetta: le etichette più lunghe (es. quella del Piramidale) si
   accorciano/vanno a capo invece di spingere .collapse-toggle fuori dalla riga — senza questo,
   su pannelli con etichetta lunga la freccetta può restare non visibile. */
.panel-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #B0234C; flex: 1 1 auto; min-width: 0; }
.panel-label-row .collapse-toggle { flex: none; }

/* Drop Set / Piramidali: una riga = una fase */
.drop-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.drop-row:last-of-type { margin-bottom: 0; }
.drop-n { flex: 0 0 64px; font-weight: 700; color: var(--ink-muted); font-size: 12.5px; }
.drop-row input[type=text] { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: var(--bg); font-size: 13px; width: 100px; }
.drop-row .row-del { padding: 2px; }
.drop-row .row-del svg { width: 15px; height: 15px; }
.pct-field { display: flex; align-items: center; gap: 4px; }
.pct-field input { width: 56px; text-align: right; border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: var(--bg); font-size: 13px; }
.pct-field span { font-size: 13px; color: var(--ink-muted); }
.serie-sync-hint { color: var(--ink-faint); font-size: 11.5px; margin-top: 8px; line-height: 1.4; }

/* Rest-Pause / Cluster Set / pausa di gruppo di Jump Set e Superserie: campi a griglia semplice */
.rp-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-field { display: flex; flex-direction: column; gap: 4px; }
.rp-field label { font-size: 11px; color: var(--ink-muted); font-weight: 600; }
.rp-field input { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: var(--bg); font-size: 13px; width: 112px; }
.rp-field input:disabled { color: var(--ink-faint); }
.rp-hint { color: var(--ink-faint); font-size: 12px; margin-top: 8px; line-height: 1.5; }

/* Jump Set / Superserie: elenco di esercizi dentro il pannello */
.subex-row { display: flex; gap: 7px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.subex-row:last-of-type { margin-bottom: 0; }
.subex-letter { flex: 0 0 18px; font-weight: 800; color: #B0234C; font-size: 13px; }
.subex-row input { border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; background: var(--bg); font-size: 13px; }
/* L'esercizio è un <ExercisePicker> (scelta dalla libreria, non testo libero) come nella riga
   principale — stessa regola di .ex-row .ex-picker, qui perché .subex-row non è dentro .ex-row. */
.subex-row .ex-picker { flex: 2 1 130px; position: relative; }
.subex-num { flex: 1 1 66px; width: 66px; }
.subex-row .row-del { padding: 2px; }
.subex-row .row-del svg { width: 15px; height: 15px; }

.copy-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13.5px;
}

/* ---------- Calendario (vista mensile, /calendar) ---------- */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cal-nav-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .2px;
    text-transform: capitalize;
}

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

.cal-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.cal-grid-wrap {
    flex: 2;
    min-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-grid-head {
    margin-bottom: 6px;
}

.cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-faint);
    padding: 4px 0;
}

.cal-day {
    min-height: 84px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background .12s, border-color .12s;
}

.cal-day:hover {
    background: var(--surface-2);
}

.cal-day.other-month {
    opacity: .4;
}

.cal-day.today .cal-day-num {
    color: var(--accent-ink);
    background: var(--accent);
    border-radius: 999px;
}

.cal-day-num {
    font-size: 12.5px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.cal-event {
    font-size: 10.5px;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bug: .cal-event eredita anche la classe .badge (vedi CalendarPage.razor/Scadenzario.razor),
   i cui sfondi "-soft"/"-bg" (--accent-soft, --accent-warm-soft, --danger-bg) sono pensati per
   il tema scuro originale e non sono stati ridefiniti da .main per l'area contenuto ora chiara
   (a differenza di bg/surface/ink, vedi MainLayout.razor.css): il risultato erano chip quasi
   nere che, impilate nella cella (fino a 3 per giorno), facevano sembrare nero l'intero giorno.
   Qui le sovrascriviamo con varianti chiare apposta per le chip del calendario, senza toccare
   .badge/.badge.changed/.badge.danger usati altrove nell'app (liste, storico, ecc.). */
.cal-event.badge {
    background: #FBE1E9;
    color: #B0234C;
}

.cal-event.badge.changed {
    background: #FBE7D2;
    color: #A85A12;
}

.cal-event.badge.danger {
    background: #FBDCD6;
    color: #B23522;
}

.cal-event-more {
    font-size: 10.5px;
    color: var(--ink-faint);
    padding: 0 2px;
}

/* Pallino compatto per mobile (vedi @media sotto), dove i .cal-event non entrano nella cella. */
.cal-day-dot {
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.cal-detail {
    flex: 1;
    min-width: 280px;
    position: sticky;
    top: 20px;
}

@media (max-width: 760px) {
    .search-box { width: 100%; }
    .field-row { grid-template-columns: 1fr; }
    .diet-builder-page .field-row { grid-template-columns: 1fr; }
    .tpb-field-row { grid-template-columns: 1fr; }
    .sk-grid { grid-template-columns: 1fr; max-height: none; overflow-y: visible; padding-right: 0; }
    .client-header { flex-direction: column; }
    .client-header-main { flex: none; width: 100%; }
    .list-scroll { max-height: none; overflow-y: visible; padding-right: 0; }
    .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    .cal-day { min-height: 56px; padding: 4px; }
    .cal-event { display: none; }
    .cal-event-more { display: none; }
    .cal-day-events { min-height: 6px; flex-direction: row; flex-wrap: wrap; }
    .cal-day-dot { display: inline-block; }
    .cal-detail { position: static; }
}