# Guida grafica modali (stile moderno)

Questa guida spiega **come replicare la grafica delle finestre/modali** in un’altra app **identica** a questa.

## Obiettivo
Uniformare tutte le modali con:
- bordi arrotondati
- ombra morbida
- header con gradiente
- body con padding uniforme
- footer con sfondo chiaro e separatore
- pulsante primario coerente

## 1) CSS globale (consigliato)
Copia gli stessi blocchi CSS in **app/static/app.css** della nuova app:

- Stile globale del contenitore modale:
  - `.modal-content` con `border-radius`, `box-shadow`, `display: flex`.
- Header globale:
  - `.modal-header` con gradiente e layout flessibile.
- Body globale:
  - `.modal-body` con padding e overflow.
- Footer globale:
  - `.modal-footer` con bordo superiore e sfondo soft.
- Pulsante primario:
  - `.modal-content .btn-primary` con colore coerente.
- Chiusura:
  - `.modal-header .btn-close` con `filter: invert(1)` per leggibilità su gradiente.

> Nota: in questa app gli stili sono in **app/static/app.css** all’inizio del file. Nell’app gemella devono stare nello stesso punto.

## 2) Markup HTML/Jinja delle modali
Assicurati che **tutte le modali** usino le classi standard di Bootstrap:
- `.modal`
- `.modal-dialog`
- `.modal-content`
- `.modal-header`
- `.modal-body`
- `.modal-footer`

Non è obbligatoria una classe extra (`modern-modal`), perché lo stile è **globale** su `.modal-content`, `.modal-header`, `.modal-body`, `.modal-footer`.

### Esempio minimo
```html
<div class="modal fade" id="modalExample" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Titolo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Contenuto...
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
        <button class="btn btn-primary">Salva</button>
      </div>
    </div>
  </div>
</div>
```

## 3) Modali fullscreen su mobile
Se usi `.modal-fullscreen-sm-down`, **mantieni il gradiente del header** anche in sticky mode. Nel progetto originale è stato corretto con:
- `.modal-dialog.modal-fullscreen-sm-down .modal-header { background: linear-gradient(...); }`

Questo evita che il background venga sovrascritto dal colore del body.

## 4) Checklist rapida
- [ ] CSS globale copiato in app/static/app.css
- [ ] Tutte le modali usano `.modal-content`, `.modal-header`, `.modal-body`, `.modal-footer`
- [ ] Nessuna modale ha markup custom che salta il `.modal-header`
- [ ] Modali fullscreen mobile hanno header sticky con gradiente

## 5) Dove si trovano gli stili (stessa struttura)
- Stili globali: **app/static/app.css** (inizio file)
- Correzione fullscreen mobile: **app/static/app.css** (sezione “Make modal usable on mobile”)

## 6) Debug rapido
Se una modale non mostra la grafica:
1. Verifica che esista `.modal-content` nella struttura.
2. Verifica che ci sia un `.modal-header` (non solo titolo nel body).
3. Controlla conflitti CSS che sovrascrivono `background` o `border-radius`.
4. Se è fullscreen, controlla la regola sticky header.

---

Se la struttura è identica, non servono adattamenti: copia le stesse parti negli stessi file.