/* Gestore SDS — foglio di stile unico, scritto a mano (nessuna libreria esterna, nessun
   passaggio di compilazione: si modifica questo file e basta ricaricare la pagina).
   Pensato per l'uso da computer, che è come viene usato il Gestore. */

/* Il carattere sta dentro il progetto (app/static/fonts/), non su un server esterno:
   l'app funziona anche senza rete verso terzi e nessuna visita viene comunicata fuori.
   È un unico file "variabile" da 48 KB che copre tutti gli spessori, invece di un file
   per ogni peso. Inter, licenza SIL Open Font. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/inter-variable-latin.woff2") format("woff2");
}

:root {
    --testo: #212a36;
    --testo-tenue: #5e6a79;
    --bordo: #e0e5eb;
    --bordo-chiaro: #eef1f5;
    --sfondo: #f7f8fa;
    --pannello: #ffffff;
    --accento: #1d4e89;
    --accento-scuro: #163c6b;
    --accento-tenue: #edf3fa;
    --rosso: #b00020;
    --rosso-sfondo: #fdecee;
    --verde: #14713a;
    --verde-sfondo: #e9f6ee;
    --ambra: #8a5a00;
    --ambra-sfondo: #fdf4e3;
    --raggio: 7px;
    /* Larghezza della colonna dei contenuti: la usano sia l'intestazione sia il corpo
       della pagina, così menu e contenuto restano allineati sullo stesso bordo. */
    --larghezza-pagina: 1200px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    /* tnum: numeri tutti della stessa larghezza, così date e numeri di revisione si
       incolonnano nelle tabelle invece di ballare da una riga all'altra.
       Il letter-spacing negativo serve a Inter, che alle dimensioni da interfaccia
       risulta altrimenti un filo largo. */
    font-feature-settings: "tnum" 1, "cv05" 1;
    letter-spacing: -0.006em;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--testo);
    background: var(--sfondo);
    margin: 0;
    padding: 0;
}

/* ---------- Intestazione e menu ---------- */

header {
    background: var(--pannello);
    border-bottom: 1px solid var(--bordo);
}

.barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--larghezza-pagina);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.marchio {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    color: var(--accento);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.55rem 0;
}

/* Logo aziendale: sfondo bianco come l'intestazione, quindi si fonde senza ritagli. */
.marchio img {
    display: block;
    height: 30px;
    width: auto;
}

/* Separatore fra il logo aziendale e il nome dell'applicazione. */
.marchio span {
    padding-left: 0.7rem;
    border-left: 1px solid var(--bordo);
}

header nav {
    display: flex;
    flex: 1;
    /* Il menu deve restare su una riga sola: andando a capo spezzava l'intestazione
       in due fasce. Lo spazio si recupera dalle spaziature, non accorciando le voci. */
    flex-wrap: nowrap;
}

header nav a {
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.75rem 0.6rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

header nav a:hover {
    color: var(--accento);
    background: var(--accento-tenue);
}

/* Voce della pagina aperta: prima non si capiva dove si era. */
header nav a.attiva {
    color: var(--accento);
    font-weight: 600;
    border-bottom-color: var(--accento);
}

.esci {
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: 0.88rem;
    white-space: nowrap;
}

.esci:hover {
    color: var(--rosso);
}

/* Il menu su una riga sola sta largo: quando la finestra si stringe si cede prima il
   superfluo (il nome dell'app accanto al logo, che il logo già identifica), poi le
   spaziature — invece di mandare le voci a capo.

   ⚠ Le soglie qui sotto sono state ricalibrate quando il carattere è passato a Inter
   (2026-08-03): Inter è circa il 3% più largo di Segoe UI e le otto voci di menu sono
   passate da 849 a 874 px, facendo ricomparire la barra di scorrimento orizzontale.
   Nota di fondo, valida anche prima di Inter: la barra è ancorata a 1200 px ma il suo
   contenuto ne chiede circa 1226, e il traboccamento è invisibile solo perché viene
   assorbito dai margini bianchi ai lati. Per questo il nome dell'app sparisce già a
   1440 px e non a 1300: sotto quella soglia i margini non bastano più.
   Se si aggiunge una nona voce di menu, queste misure vanno rifatte — misurando nel
   browser (document.documentElement.scrollWidth contro clientWidth), non a occhio. */
@media (max-width: 1440px) {
    .marchio span {
        display: none;
    }
}

@media (max-width: 1240px) {
    header nav a {
        font-size: 0.88rem;
        padding: 0.75rem 0.4rem;
    }

    .barra {
        gap: 0.75rem;
    }
}

/* Ultimo scalino: otto voci a 1024 px sforavano facendo comparire la barra di
   scorrimento orizzontale. */
@media (max-width: 1080px) {
    header nav a {
        font-size: 0.84rem;
        padding: 0.75rem 0.22rem;
    }

    .barra {
        gap: 0.5rem;
        padding: 0 1rem;
    }
}

main {
    max-width: var(--larghezza-pagina);
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
}

/* ---------- Testi ---------- */

h1 {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -0.022em;
    margin: 0 0 0.85rem;
}

h2 {
    font-size: 1.08rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    margin: 1.6rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--bordo-chiaro);
}

h3 {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.25rem;
}

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

code {
    background: var(--accento-tenue);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    font-size: 0.9em;
}

small {
    color: var(--testo-tenue);
}

/* ---------- Tabelle ---------- */

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    /* Niente overflow:hidden qui: annullerebbe le intestazioni fisse (position:sticky)
       delle colonne. Gli angoli si arrotondano sulle celle d'angolo, più sotto. */
}

th, td {
    padding: 0.38rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--bordo-chiaro);
    vertical-align: top;
}

th {
    background: #f3f6f9;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--testo-tenue);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 1;
}

thead tr:first-child th:first-child {
    border-top-left-radius: var(--raggio);
}

thead tr:first-child th:last-child {
    border-top-right-radius: var(--raggio);
}

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

tbody tr:hover td {
    background: #f6f9fc;
}

/* ---------- Moduli ---------- */

form label {
    display: block;
    margin-top: 0.7rem;
    margin-bottom: 0.15rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Nota sotto a un campo: deve stare su una riga sua, non affiancarsi al campo. */
form small {
    display: block;
    max-width: 620px;
    margin-top: 0.2rem;
}

input, select, textarea {
    width: 100%;
    max-width: 400px;
    padding: 0.35rem 0.5rem;
    font: inherit;
    color: inherit;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accento);
    outline-offset: -1px;
    border-color: var(--accento);
}

/* Nelle tabelle i campi non devono allargarsi a tutta la cella. */
td input, td select {
    max-width: 100%;
}

/* Campi che devono occupare tutta la colonna: oggetto e testo dell'email, dove i 400 px
   standard costringerebbero a scrivere in una feritoia. */
input.largo, textarea.largo {
    max-width: 100%;
}

textarea.largo {
    font-family: inherit;
}

button, input[type="submit"] {
    width: auto;
    margin-top: 0.8rem;
    padding: 0.4rem 1rem;
    font: inherit;
    font-weight: 550;
    letter-spacing: -0.003em;
    color: #fff;
    background: var(--accento);
    border: 1px solid var(--accento);
    border-radius: var(--raggio);
    cursor: pointer;
}

button:hover, input[type="submit"]:hover {
    background: var(--accento-scuro);
}

/* Azione di contorno (es. ripristina i testi di partenza): visibile ma non in evidenza
   quanto il pulsante principale della pagina. */
button.secondario {
    color: var(--testo-tenue);
    background: var(--pannello);
    border-color: var(--bordo);
    font-weight: 500;
}

button.secondario:hover {
    color: var(--accento);
    background: var(--accento-tenue);
    border-color: var(--accento);
}

/* Azione irreversibile (es. elimina cliente): deve costare un attimo di esitazione,
   quindi rosso pieno e mai lo stesso blu delle azioni di tutti i giorni. */
button.pericolo {
    background: var(--rosso);
    border-color: var(--rosso);
}

button.pericolo:hover {
    background: #8c0019;
    border-color: #8c0019;
}

/* Le caselle di spunta non devono occupare tutta la larghezza: la regola generica qui
   sopra le stirava, mandando l'etichetta a capo. */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    max-width: none;
    margin: 0 0.4rem 0 0;
    padding: 0;
    vertical-align: middle;
}

/* ---------- Avvisi ---------- */

/* Usati sia come paragrafo (avviso a tutta larghezza) sia come testo dentro una cella:
   il riquadro va solo al paragrafo, altrimenti sballa le tabelle. */
p.errore, p.ok, p.avviso {
    padding: 0.5rem 0.8rem;
    border-radius: var(--raggio);
    border-left: 3px solid;
    margin: 0.6rem 0;
}

p.errore {
    color: var(--rosso);
    background: var(--rosso-sfondo);
    border-left-color: var(--rosso);
}

p.ok {
    color: var(--verde);
    background: var(--verde-sfondo);
    border-left-color: var(--verde);
}

p.avviso {
    color: var(--ambra);
    background: var(--ambra-sfondo);
    border-left-color: var(--ambra);
}

.errore {
    color: var(--rosso);
}

.ok {
    color: var(--verde);
}

.avviso {
    color: var(--ambra);
}

/* Spiegazione di contorno (es. perché un pulsante non c'è): si legge se la si cerca,
   ma non compete con il contenuto della pagina. */
.nota {
    color: var(--testo-tenue);
    font-size: 0.9rem;
}

/* Testo dell'email così com'è partito: a capo e spaziature vanno rispettati, ma il
   carattere resta quello del resto della pagina (non è codice). */
pre.testo-email {
    font: inherit;
    white-space: pre-wrap;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    max-width: 620px;
}

/* ---------- Elenchi filtrabili (usati nei moduli cliente/prodotto) ---------- */

.filtro-select {
    margin-bottom: 0.3rem;
}

.lista-filtrabile {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--pannello);
    padding: 0.4rem 0.6rem;
    max-width: 400px;
}

.lista-filtrabile label.voce-checkbox {
    display: block;
    font-weight: normal;
    margin-top: 0;
    padding: 0.2rem 0;
}

/* Serve esplicitamente: la regola qui sopra imposta display:block e da sola vincerebbe
   sull'attributo [hidden] usato dal filtro di ricerca, lasciando le voci visibili. */
.lista-filtrabile label.voce-checkbox[hidden] {
    display: none;
}

.lista-filtrabile label.voce-checkbox:hover {
    background: var(--accento-tenue);
}

/* ---------- Etichette dei prodotti scelti ---------- */

.chip-selezionati {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.2rem;
    max-width: 400px;
}

.chip-selezionati:empty {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accento-tenue);
    border: 1px solid #ccd9ea;
    border-radius: 1rem;
    padding: 0.1rem 0.25rem 0.1rem 0.6rem;
    font-size: 0.85rem;
}

.chip-rimuovi {
    width: auto;
    margin: 0;
    border: none;
    background: none;
    color: var(--testo-tenue);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
}

.chip-rimuovi:hover {
    background: none;
    color: var(--rosso);
}