# UI reference — FranCoach

Stato aggiornato al 28 luglio 2026.

## Identità visiva

- Sfondo pagina quasi nero.
- Superfici:
  - `--surface-0`: fondo pagina;
  - `--surface-1`: card e controlli;
  - `--surface-2`: hover, popover e livelli elevati;
  - `--surface-sunken`: input e aree incassate.
- Accento principale lime `--francoach-yellow`.
- Verde per trend positivi, rosso per trend negativi, ambra per avvisi.
- Testo principale bianco; testo secondario `--francoach-gray-300`.
- Card con raggio ampio, bordo traslucido e ombra morbida.

## Regole di contrasto

- Testo nero su pulsanti e badge lime pieni.
- Testo chiaro e bordo visibile su pulsanti scuri o outline.
- Nessuna superficie bianca dentro card scure.
- Header e footer delle card trasparenti.
- Azioni nelle tabelle sempre distinguibili dallo sfondo.
- Focus visibile con outline ad alto contrasto.

## Navigazione

### Coach

- Sidebar con icone grandi.
- Una sola voce attiva, derivata dalla route corrente.
- Selettore atleta nella topbar.
- Dashboard generale quando nessun atleta è selezionato.
- Dashboard contestuale quando un atleta è selezionato.

### Atleta

- Barra inferiore:
  - Home;
  - Workout;
  - Nutrizione;
  - Metriche;
  - Storico pesi.
- Barra superiore con logo, notifiche e impostazioni.

## Card e pulsanti

- `.card` e `.card-francoach` condividono la stessa superficie scura.
- Padding laterale dei pulsanti aumentato.
- `.btn-outline-secondary` usa testo e bordo chiari.
- Le card della dashboard coach contestuale contengono un link alla relativa sezione.
- `.dashboard-stat` dispone icona, poi valore e dettaglio sulla riga successiva.

## Profilo

- `.profile-identity` usa la superficie scura della card, senza gradiente bianco.
- `.profile-inline-form` è trasparente.
- Il selettore `available_days[]` non usa sfondo bianco.
- Il selettore `equipment_ids[]` usa:
  - testo chiaro e bordo visibile a riposo;
  - sfondo lime e testo nero quando selezionato.
- Profilo coach dell’atleta organizzato in anagrafica, profilo sportivo, obiettivi, attrezzatura, limitazioni e note.

## Allenamento

- Timer recupero fisso durante lo scorrimento.
- Giornate del piano `.plan-day` senza sfondo bianco.
- Serie su superficie trasparente/scura.
- RIR e RPE in pannello espandibile.
- Frecce precedente/successivo fisse nella navigazione esercizi.
- GIF di esecuzione prioritaria; copertina a larghezza piena come fallback.
- Card video assente quando non esiste un video.
- Stato autosave testuale: “Salvataggio…”, “Salvato”, “Errore”.
- Nessun pulsante manuale “Completa serie”.

## Nutrizione

- Pasti e macro senza sfondi bianchi.
- Elementi pasto con padding laterale ridotto.
- Grafico macro compatto.
- Alternative con azione carrello.

## Responsive

- Griglie Bootstrap progressive.
- Card a colonna singola su mobile.
- Tabelle in contenitore `.table-responsive`.
- Azioni principali raggiungibili senza overflow orizzontale.
- Verifica manuale richiesta a 360×800, 390×844, 768×1024, 1280×800 e 1440×900.