/* =============================================================================
 * Cruscotto — Foglio di stile principale
 * Brand Denver: grigio antracite + accento rosso #EA3A3A
 * Tipografia: Inter (Google Fonts)
 * ============================================================================= */


/* --- Variabili di sistema --------------------------------------------------- */
:root {
    /* Palette neutra */
    --bg-page:       #fafafa;
    --bg-surface:    #ffffff;
    --bg-hover:      #f5f5f5;

    --text-primary:   #1d1d1f;
    --text-secondary: #6b6b6b;
    --text-tertiary:  #9b9b9b;
    --text-on-accent: #ffffff;

    --border:        #e5e5e5;
    --border-strong: #d4d4d4;

    /* --- IL COLORE FA UNA COSA SOLA -----------------------------------------
     * Regola non negoziabile, decisa il 01/09 dopo il primo collaudo: il ROSSO
     * significa «manca merce» — lo stato 🔴 dell'evadibilità — e nient'altro.
     *
     * Prima di questa regola il rosso Denver era anche il pulsante primario, il
     * filtro attivo, la sottolineatura del segmento, il badge della sidebar, il
     * bordo dell'ordine impegnato e quello degli avvisi: trentatré usi, per
     * cose che non avevano niente in comune. Il colore che grida «manca» diceva
     * anche «premi qui», e chi guardava una lista non sapeva più quale delle
     * due cose stesse leggendo.
     *
     * Il rosso del marchio resta dov'è vero: nel LOGO, che è un SVG e se lo porta
     * dentro. In questo foglio la variabile non ha più nessun uso — verificato,
     * zero occorrenze — e resta scritta perché è il colore Denver e qualcuno
     * prima o poi lo cercherà qui.
     *
     * Attenzione a non riprenderla per un pulsante distruttivo: `.btn-danger`
     * usa `--status-error`, che è il rosso degli stati, ed è giusto così — un
     * pulsante che cancella e una riga che non si può evadere sono due allarmi,
     * non un allarme e un marchio.
     * ---------------------------------------------------------------------- */
    --brand-red:       #EA3A3A;   /* il colore del marchio. Non usarlo nell'interfaccia. */
    --brand-red-hover: #d12f2f;
    --brand-gray:      #4c4c4c;

    /* Interfaccia: ciò che è premibile, attivo o selezionato. Grigi, sempre.
       Il primario si distingue dal secondario per RIEMPIMENTO e PESO, non per
       tinta — se davanti al browser non basta, si scurisce `--azione-fondo` di
       un passo e cambia ovunque insieme. */
    --azione-fondo:       #e9e9ec;
    --azione-fondo-hover: #dcdce1;
    --azione-bordo:       #c9c9ce;
    --azione-testo:       #1d1d1f;

    /* Lo stato «attivo» di un controllo (segmento scelto, chip acceso, badge
       con un numero): antracite pieno. È l'unico nero della pagina e per
       questo si vede senza gridare. */
    --ui-attivo:        #2b2b2f;
    --ui-attivo-testo:  #ffffff;
    --focus-ring:       rgba(29, 29, 31, 0.14);

    /* Stati di evadibilità (cfr. CLAUDE.md §3.4) — gli UNICI colori del sistema */
    --status-success: #16a34a; /* 🟢 evadibile */
    --status-warning: #eab308; /* 🟡 parziale  */
    --status-orange:  #f97316; /* 🟠 posticipare */
    --status-error:   #dc2626; /* 🔴 genera RDP / errore */

    /* Tipografia */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* --- LA SCALA TIPOGRAFICA ------------------------------------------------
     * Sei misure, non una di più. Chi ne aggiunge una settima sta descrivendo
     * un caso particolare, non una gerarchia — e una gerarchia con dodici
     * livelli non è una gerarchia, è una macchia.
     *
     * E un solo modo di dire «importante»: il PESO. Non il colore (quello
     * dice altro, vedi sopra), non la dimensione a caso, non una cornice.
     *
     * Le cifre vogliono `--font-cifre`: senza, in una colonna di numeri le
     * larghezze diverse fanno ballare le unità e la colonna smette di essere
     * confrontabile a occhio, che è l'unica ragione per cui esiste.
     * ---------------------------------------------------------------------- */
    --t-pagina:    20px;   /* h1 — uno per schermata */
    --t-sezione:   15px;   /* h2 */
    --t-corpo:     13px;   /* testo, celle di tabella, controlli */
    --t-piccolo:   12px;   /* secondario: il sotto-titolo di una riga */
    --t-micro:     11px;   /* codici, firme, note a margine */
    --t-etichetta: 10px;   /* intestazioni di colonna, maiuscoletto */

    --p-normale: 400;
    --p-medio:   500;
    --p-forte:   600;

    --font-cifre: 'Inter', ui-monospace, monospace;
    --font-codice: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* --- DENSITÀ -------------------------------------------------------------
     * Righe basse e costanti. Nessun elemento cambia altezza col contenuto: il
     * testo si tronca, non va a capo — così l'occhio scende in verticale senza
     * dover ritrovare ogni volta dov'è la riga dopo.
     * ---------------------------------------------------------------------- */
    --riga-alta:  32px;   /* riga di lista principale */
    --riga-bassa: 28px;   /* riga figlia, dentro un ordine aperto */

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Dimensioni layout */
    --topbar-height:     56px;
    --sidebar-width:     240px;
    --content-max-width: 1200px;

    /* Misura del testo discorsivo.
       Le tabelle possono prendersi tutta la larghezza — è la loro natura —
       ma un paragrafo lungo 1400px è illeggibile: oltre gli 80-90 caratteri
       per riga l'occhio perde il ritorno a capo. Questa variabile è il
       guinzaglio della prosa, ovunque compaia.

       ATTENZIONE A `ch`: NON è un carattere. È la larghezza dello ZERO, che
       in Inter è più larga della minuscola media, quindi 72ch rendono ~93
       caratteri per riga e non 72 (contati sulla schermata vera il 22/08,
       non stimati). Chi tocca questo numero pensando in caratteri lo sposta
       del 30% senza accorgersene.

       E la misura vale per la prosa LIBERA. Dentro un riquadro largo un
       paragrafo solo lascia vuoto il 60% della cornice e sembra un errore
       di impaginazione: lì si affiancano gli elementi (vedi
       `.freschezza-avvisi` in proposta.css) invece di allungare la riga. */
    --misura-testo: 72ch;
}


/* --- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--t-corpo);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--t-pagina); letter-spacing: -0.02em; }
h2 { font-size: var(--t-sezione); }
h3 { font-size: var(--t-corpo); }

p { margin: 0; }
p + p { margin-top: var(--space-3); }

/* Un link si riconosce dal fatto che si sottolinea passandoci sopra, non
   perché è colorato: in una lista di 250 righe il colore sarebbe un tappeto. */
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}


/* --- Layout app (utente autenticato) ---------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--space-6);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}
.topbar-brand:hover {
    text-decoration: none;
    color: var(--text-primary);
}

/* Logo Denver nella topbar: visibile SOLO su mobile (sotto 768px),
   perché su desktop il logo vive nella sidebar. */
.topbar-logo-mobile {
    display: none;
    height: 26px;
    width: auto;
}

.topbar-app-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.topbar-spacer { flex: 1; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-secondary);
}

.topbar-user-name { color: var(--text-primary); font-weight: 500; }
.topbar-user-role { color: var(--text-tertiary); }

.topbar-logout {
    color: var(--text-secondary);
    text-decoration: none;
}
.topbar-logout:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - var(--topbar-height));
}

.sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--space-5) var(--space-4);

    /* Resta ferma mentre la pagina scorre, sotto la topbar che è già sticky.
       `align-self: start` non è un dettaglio: in una griglia l'elemento viene
       stirato a tutta altezza per default, e un elemento stirato non si
       "appiccica" mai — sticky sembrerebbe semplicemente non funzionare.
       L'altezza esplicita più `overflow-y` servono al giorno in cui le voci
       saranno più dello schermo: senza, le ultime diventerebbero irraggiungibili. */
    position: sticky;
    top: var(--topbar-height);
    align-self: start;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
}

/* Logo Denver in cima alla sidebar (desktop) */
.sidebar-logo {
    display: block;
    width: 140px;
    height: auto;
    margin: 0 auto var(--space-6);
}

.sidebar-section-title {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Aria fra un gruppo e l'altro: è quella che fa leggere la sidebar come tre
   blocchi invece che come un elenco unico di nove voci. */
.sidebar-section-title + .sidebar-link { margin-bottom: 0; }
.sidebar-link + .sidebar-section-title { margin-top: var(--space-5); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Flex e non block: il badge è un elemento a sé, ancorato a destra, e non
   una parola in fondo alla frase che può andare a capo. */
.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
}
.sidebar-link-testo { min-width: 0; }
.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-link.is-active {
    background: var(--bg-hover);
    color: var(--text-primary);
    font-weight: 500;
}

/* Il contenuto è limitato in larghezza E centrato nello spazio che resta a
   destra della sidebar. Sotto i ~1500px non si nota alcuna differenza rispetto
   all'allineamento a sinistra — il contenuto riempie comunque —, mentre su uno
   schermo largo il vuoto si divide in due invece di ammassarsi tutto sul bordo
   destro, dove sembrava una pagina non finita di caricare. */
.main {
    padding: var(--space-8) var(--space-10);
    max-width: calc(var(--content-max-width) + var(--space-10) * 2);
    margin-inline: auto;
    width: 100%;
}

.main h1 + p,
.main h2 + p {
    color: var(--text-secondary);
    margin-top: var(--space-2);
    max-width: var(--misura-testo);
}

.main > h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.main > p,
.main > ul { max-width: var(--misura-testo); }


/* --- Sezioni di pagina ------------------------------------------------------
 * Il ritmo va a due velocità: molto spazio fra sezioni diverse, poco fra gli
 * elementi della stessa sezione. Senza questa distinzione tutto sta alla
 * stessa distanza da tutto e la pagina si legge come un muro.
 * ---------------------------------------------------------------------------- */
.sezione { margin-top: var(--space-12); }
.sezione:first-child { margin-top: 0; }

.sezione-titolo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}
.sezione-titolo h2 { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: var(--p-forte); }

.main ul {
    padding-left: var(--space-5);
    margin: var(--space-3) 0;
    color: var(--text-secondary);
}
.main li + li { margin-top: var(--space-1); }

.app-footer {
    padding: var(--space-4) var(--space-8);
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
}


/* --- Layout auth (login) ---------------------------------------------------- */
.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.auth-logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0;
}

.auth-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.auth-footer {
    margin: 0;
    font-size: 12px;
    color: var(--text-tertiary);
}


/* =============================================================================
 * FORM — sistema unico, definito qui e solo qui
 * =============================================================================
 *
 * COME SI SCRIVE UN FORM IN CRUSCOTTO
 *
 *   <form method="post" class="card">
 *       <div class="form-group">                        ← un campo, uno sotto l'altro
 *           <label for="x" class="form-label">Etichetta</label>
 *           <input type="text" id="x" name="x">
 *           <p class="form-hint">Spiegazione facoltativa.</p>
 *       </div>
 *
 *       <div class="form-row">                          ← DUE campi affiancati
 *           <div class="form-group">…</div>
 *           <div class="form-group">…</div>
 *       </div>
 *
 *       <div class="form-actions">                      ← pulsanti, allineati a destra
 *           <button type="submit" class="btn btn-primary">Salva</button>
 *       </div>
 *   </form>
 *
 * ATTENZIONE a `.form-row`: è una griglia a DUE colonne, non il contenitore di
 * un campo singolo. Per un campo solo si usa `.form-group`. (Sbagliarlo mette
 * l'etichetta a sinistra e il controllo a destra, che è come ci si accorge
 * dell'errore.)
 *
 * I CONTROLLI NON HANNO BISOGNO DI CLASSI. Lo stile è agganciato agli elementi
 * (`input`, `select`, `textarea`), quindi un campo scritto senza classe ha
 * comunque l'aspetto giusto. Le classi `.form-input` e `.form-select` restano
 * valide come sinonimi espliciti e sono usate nelle pagine già scritte, ma
 * dimenticarle non produce più un controllo grigio di sistema.
 *
 * I BOTTONI invece la classe la vogliono: `.btn` più la variante
 * (`.btn-primary`, `.btn-secondary`, `.btn-danger`). Lì la scelta è semantica —
 * dice quanto è importante o pericolosa l'azione — e non si può indovinare
 * dall'elemento HTML.
 * ============================================================================= */

.form-group { margin-bottom: var(--space-4); }

.form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Testo esplicativo sotto un campo. */
.form-hint {
    margin-top: var(--space-1);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.form-hint strong { color: var(--text-primary); font-weight: 500; }

/* --- Controlli: lo stile sta sugli elementi, le classi sono sinonimi -------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea,
.form-input,
.form-select {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 6px var(--space-3);
    font-family: var(--font-family);
    font-size: var(--t-corpo);
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus {
    border-color: var(--ui-attivo);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

input::placeholder,
textarea::placeholder { color: var(--text-tertiary); }

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--bg-hover);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

textarea { min-height: 96px; resize: vertical; }

/* Select: via la resa nativa del sistema operativo, freccia disegnata da noi.
   È la differenza più visibile fra un form curato e uno lasciato al browser. */
select,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}
select:disabled { background-color: var(--bg-hover); }

/* File: il controllo nativo è il più brutto di tutti. Stilizziamo il campo e
   il bottone interno, così "Scegli file" somiglia agli altri bottoni. */
input[type="file"] {
    padding: var(--space-2);
    color: var(--text-secondary);
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}
input[type="file"]::file-selector-button:hover {
    background: var(--bg-hover);
    border-color: var(--ui-attivo);
}


/* --- Bottoni ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px var(--space-4);
    font-size: var(--t-corpo);
    font-weight: var(--p-medio);
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* PRIMARIO E SECONDARIO SI DISTINGUONO PER RIEMPIMENTO E PESO, non per tinta.
   Il primario era rosso: su una riga di lista competeva con il pallino dello
   stato, che è l'unica cosa che ha diritto a un colore. */
.btn-primary {
    background: var(--azione-fondo);
    color: var(--azione-testo);
    border-color: var(--azione-bordo);
    font-weight: var(--p-forte);
}
.btn-primary:hover {
    background: var(--azione-fondo-hover);
    color: var(--azione-testo);
    text-decoration: none;
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-hover); text-decoration: none; }

.btn-block { display: flex; width: 100%; }
.btn-lg    { padding: var(--space-3) var(--space-5); font-size: var(--t-sezione); }


/* --- Alert / messaggi ------------------------------------------------------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: var(--space-4);
}
.alert-error {
    background: rgba(220, 38, 38, 0.06);
    color:      var(--status-error);
    border: 1px solid rgba(220, 38, 38, 0.18);
}


/* --- Status badge (per stati di evadibilità futuri) ------------------------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: 500;
}
.status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-ok      { color: var(--status-success); }
.status-warning { color: var(--status-warning); }
.status-orange  { color: var(--status-orange);  }
.status-error   { color: var(--status-error);   }


/* --- Card ------------------------------------------------------------------- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}


/* --- Definition list (per anagrafica veloce nei card) ----------------------- */
.dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
    font-size: 14px;
    margin: 0;
}
.dl dt {
    color: var(--text-secondary);
    font-weight: 500;
}
.dl dd {
    margin: 0;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}


/* --- Tabelle (preset per uso futuro: ordini, articoli, giacenze) ----------- */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-corpo);
}
.table th {
    text-align: left;
    font-weight: var(--p-forte);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: var(--t-etichetta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.table td {
    height: var(--riga-alta);
    padding: var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.table tbody tr:hover { background: var(--bg-hover); }
.table .numeric { text-align: right; }


/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 768px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar    { display: none; } /* mobile: nascosta (in futuro hamburger) */
    .main       { padding: var(--space-5); }
    .topbar     { padding: 0 var(--space-4); }

    /* Mobile: nascondo il testo "Cruscotto", mostro il logo Denver al suo posto */
    .topbar-app-name    { display: none; }
    .topbar-logo-mobile { display: block; }

    /* Mobile: nella user-info resta solo "Esci", nome e ruolo vanno via */
    .topbar-user-name,
    .topbar-user-role { display: none; }

    /* Mobile: definition list (card profilo) impilato in singola colonna */
    .dl {
        grid-template-columns: 1fr;
        gap: var(--space-3) 0;
    }
    .dl dt { margin-top: var(--space-2); }
    .dl dt:first-child { margin-top: 0; }
}


/* --- Flash messages (sopravvivono a un redirect) ---------------------------- */
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
}
.flash-success { background: rgba(22, 163, 74, 0.06);  color: var(--status-success); border-color: rgba(22, 163, 74, 0.18); }
.flash-error   { background: rgba(220, 38, 38, 0.06);  color: var(--status-error);   border-color: rgba(220, 38, 38, 0.18); }
.flash-warning { background: rgba(234, 179, 8, 0.06);  color: #a16207;                border-color: rgba(234, 179, 8, 0.25); }
.flash-info    { background: rgba(107, 107, 107, 0.06); color: var(--text-secondary); border-color: var(--border); }


/* --- Toolbar in cima alle pagine di lista (titolo + azioni a destra) ------- */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    gap: var(--space-3);
}


/* Form a campi impilati: senza un limite di larghezza un campo si stira per
   tutta la card e diventa sgradevole da leggere e da compilare. Da mettere sul
   <form>, non serve nei form a due colonne che si limitano già da soli. */
.form-narrow { max-width: 560px; }


/* --- Form: layout a due colonne e barra dei pulsanti ------------------------ */
/* (I controlli sono definiti nella sezione FORM più in alto: qui c'è solo la
   disposizione, non l'aspetto dei campi.) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    justify-content: flex-end;
}
.form-actions-spread { justify-content: space-between; }


/* --- Checkbox: etichetta e casella sulla stessa riga ------------------------ */
/* La casella non deve prendere lo stile dei campi di testo: larghezza automatica
   e nessun bordo custom, altrimenti diventa un quadrato enorme. */
.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-corpo);
    color: var(--text-primary);
    cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--ui-attivo);
    cursor: pointer;
}


/* --- Pallino con il numero di domande in sospeso, nella sidebar ------------- */
.sidebar-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: var(--space-2);
    border-radius: 9px;
    background: var(--ui-attivo);
    color: var(--ui-attivo-testo);
    font-size: var(--t-micro);
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}


/* --- Bottone piccolo, per le azioni dentro una riga di tabella -------------- */
.btn-small {
    padding: var(--space-1) var(--space-3);
    font-size: var(--t-piccolo);
}

/* Le due risposte ai casi di forecast stanno affiancate sotto lo stato. */
.fs-risposta {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}


/* --- Impostazioni: i due campi che non sono un campo solo ------------------- */
/* I giorni lavorativi sono sette caselle in fila, non una stringa da battere a
   mano; un numero di giorni non ha bisogno di un campo largo mezza pagina. */
.giorni-settimana {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}
.giorni-settimana .form-checkbox { margin: 0; }

.input-corto { max-width: 140px; }

/* La tabella delle chiusure sta dentro un form: niente hover da lista
   cliccabile e campi che riempiono la cella. */
.table-form td { padding: var(--space-2); }
.table-form tbody tr:hover { background: transparent; }
.table-form input { margin: 0; }


/* --- Bottoni: variante "pericolosa" per cancellazione --------------------- */
.btn-danger {
    background: transparent;
    color: var(--status-error);
    border-color: var(--status-error);
}
.btn-danger:hover {
    background: rgba(220, 38, 38, 0.06);
    color: var(--status-error);
    text-decoration: none;
}


/* --- Tabella con riga cliccabile (lista utenti) --------------------------- */
.table-clickable tbody tr { cursor: pointer; }


/* --- Status badge per utenti (varianti del .status base) ------------------ */
.status-disattivato { color: var(--text-tertiary); }
.status-cancellato  { color: var(--text-tertiary); text-decoration: line-through; }


/* --- Grid permessi nel form utenti (modulo + select livello) -------------- */
.permessi-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    margin-top: var(--space-3);
}
.permessi-grid > label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
/* I select dei permessi contengono parole corte (none/read/write/admin): a
   larghezza piena occuperebbero tutta la colonna senza alcun guadagno. */
.permessi-grid select { max-width: 220px; }


/* --- Mobile tweaks per i form e i grid lunghi ----------------------------- */
@media (max-width: 768px) {
    .form-row      { grid-template-columns: 1fr; }
    .permessi-grid { grid-template-columns: 1fr; gap: var(--space-1) 0; }
    .permessi-grid > label { margin-top: var(--space-3); }
    .page-toolbar  { flex-direction: column; align-items: stretch; }
}


/* --- Attesa: spinner e stato per le operazioni lunghe ----------------------- */
/* Attivati da assets/js/app.js sui form con data-attesa. */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid var(--border-strong);
    border-top-color: var(--ui-attivo);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Chi ha chiesto meno animazioni al sistema operativo non deve subire una
   rotellina che gira: resta un indicatore statico, che comunica lo stesso. */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: var(--ui-attivo); opacity: 0.6; }
}

.attesa {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    font-size: var(--t-corpo);
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Bottone in attesa: resta leggibile ma chiaramente non ripremibile. */
.btn.is-loading {
    opacity: 0.65;
    cursor: progress;
}

.file-scelto { color: var(--text-primary); }


/* --- Utility piccole --------------------------------------------------------- */
.text-muted   { color: var(--text-secondary); }
.text-subtle  { color: var(--text-tertiary); }

/* Visibile solo ai lettori di schermo: serve alle intestazioni di colonna che
   non hanno un testo (la colonna delle spunte), che senza resterebbero mute. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.numeric      { font-variant-numeric: tabular-nums; }


/* =============================================================================
 * PRIMITIVE COMUNI — promosse qui il 01/09
 * =============================================================================
 *
 * `.prosa`, `.avviso`, `.riquadri`, `.chip` e i colori `.ev-*` erano definiti
 * quattro volte: in clienti.css, magazzini.css, produzione.css e
 * come-funziona.css. Ogni copia portava lo stesso commento — «alla terza
 * pagina si promuovono» — e la terza pagina era arrivata da un pezzo.
 *
 * Il sintomo non era la duplicazione in sé ma quello che ci girava intorno:
 * ritoccare un avviso significava ritoccarlo in quattro posti, e chi ne
 * dimenticava uno lasciava due schermate che dicevano la stessa cosa con due
 * facce diverse. È metà del «poca gerarchia visiva» del collaudo.
 * ============================================================================= */

/* --- Prosa: il testo che spiega --------------------------------------------
 * `app.css` tiene al guinzaglio solo i paragrafi figli diretti di `.main`, e
 * quasi tutti i nostri stanno dentro una <section>. Questa classe è il
 * guinzaglio esplicito.
 * -------------------------------------------------------------------------- */
.prosa {
    max-width: var(--misura-testo);
    color: var(--text-secondary);
    font-size: var(--t-corpo);
    line-height: 1.55;
    margin-top: var(--space-2);
}
.prosa strong, .prosa b { color: var(--text-primary); font-weight: var(--p-medio); }


/* --- Avvisi: una barretta a sinistra, non una cornice -----------------------
 * Una cornice è un riquadro dentro un riquadro, e a forza di riquadri la
 * pagina diventa un elenco di scatole tutte dello stesso peso.
 * -------------------------------------------------------------------------- */
.avviso {
    border-left: 3px solid var(--border-strong);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
    font-size: var(--t-corpo);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: var(--misura-testo);
}
.avviso strong { color: var(--text-primary); font-weight: var(--p-medio); }

/* Attenzione ≠ allarme. Il rosso qui non c'entra: è riservato allo stato 🔴.
   Un avviso che chiede di guardare qualcosa prende l'ambra; se un giorno
   servirà un avviso che dice «manca merce», userà `.avviso-manca`. */
.avviso-attenzione { border-left-color: var(--status-orange); color: var(--text-primary); }
.avviso-nota       { border-left-color: var(--border); }
.avviso-manca      { border-left-color: var(--status-error); color: var(--text-primary); }


/* --- Riquadri di riepilogo: il numero grande e la sua etichetta ------------- */
.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.riquadro {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--bg-surface);
}

.riquadro-numero {
    font-size: 24px;
    font-weight: var(--p-forte);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.riquadro-etichetta {
    margin-top: var(--space-1);
    font-size: var(--t-piccolo);
    color: var(--text-secondary);
}

/* La riga in euro sotto il numero in pezzi. Non è un secondo numero grande:
   è la stessa quantità detta in un'altra unità, e va letta dopo. */
.riquadro-euro {
    margin-top: 2px;
    font-size: var(--t-piccolo);
    font-weight: var(--p-medio);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}


/* --- Chip: un valore scelto, o un filtro acceso ---------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: var(--t-piccolo);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    background: var(--bg-surface);
}
a.chip:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }

.chip.is-active {
    background: var(--ui-attivo);
    border-color: var(--ui-attivo);
    color: var(--ui-attivo-testo);
    font-weight: var(--p-forte);
}
.chip.is-active:hover { background: var(--ui-attivo); color: var(--ui-attivo-testo); }
.chip.is-spento { opacity: 0.45; cursor: default; }

/* La × che toglie un filtro: dentro la pastiglia, non accanto. */
.chip-via {
    font-size: var(--t-corpo);
    line-height: 1;
    opacity: 0.7;
}
.chip-via:hover { opacity: 1; }


/* --- Briciole: dove sono e come torno indietro ----------------------------- */
.briciole {
    font-size: var(--t-piccolo);
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}
.briciole a { color: var(--text-secondary); }


/* =============================================================================
 * LE SPIEGAZIONI SI NASCONDONO
 * =============================================================================
 * Tutta la prosa didattica di Cruscotto — i paragrafi che raccontano perché un
 * numero è quello — porta la classe `.spiegazione` e sparisce quando il corpo
 * ha `is-senza-prosa`. In produzione quei testi non ci saranno: nasconderli è
 * il modo di vedere già adesso la schermata vera invece di quella da collaudo.
 *
 * Lo stato vive in un cookie letto da PHP, non in localStorage: così la classe
 * è già sul <body> alla prima pittura e non c'è il lampeggio della prosa che
 * compare e sparisce. Il JavaScript scrive lo stesso cookie e toglie la classe
 * subito, senza ricaricare.
 *
 * COSA NON È UNA SPIEGAZIONE, e quindi non si nasconde: la fascia di
 * freschezza (dice da quando sono i dati — è un fatto sul calcolo, non una
 * lezione), il «perché» accanto a un verdetto in riga (è metà del verdetto),
 * gli avvisi, e il corpo di «Come funziona», che è una pagina fatta di prosa e
 * senza prosa sarebbe una pagina bianca.
 * ============================================================================= */
body.is-senza-prosa .spiegazione { display: none !important; }

.interruttore-prosa {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--t-piccolo);
    cursor: pointer;
    white-space: nowrap;
}
.interruttore-prosa:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
body:not(.is-senza-prosa) .interruttore-prosa {
    background: var(--ui-attivo);
    border-color: var(--ui-attivo);
    color: var(--ui-attivo-testo);
}


/* =============================================================================
 * MENU A DISCESA — un <details>, non un pannello aperto dal JavaScript
 * =============================================================================
 * Vale per i due usi che abbiamo: il menu «Azioni» in fondo a una riga e il
 * menu di una intestazione di colonna. Sono la stessa cosa — un pulsante che
 * apre un pannellino — e avere due meccanismi per la stessa cosa è il modo
 * più sicuro di farli divergere.
 *
 * `<details>` e non JavaScript perché si apre lo stesso quando il JavaScript
 * non c'è: è la regola che vale per l'alberatura degli ordini, per i filtri e
 * per l'ordinamento, e non c'è ragione di fare un'eccezione qui.
 * ============================================================================= */
.menu { position: relative; display: inline-block; }

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--t-piccolo);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu > summary:hover { background: var(--bg-hover); color: var(--text-primary); }
.menu[open] > summary { background: var(--bg-hover); color: var(--text-primary); }

.menu-pannello {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: left;
    /* Il testo dentro un menu torna alla lingua normale: senza, eredita il
       maiuscoletto delle intestazioni di colonna e diventa illeggibile. */
    font-size: var(--t-corpo);
    font-weight: var(--p-normale);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary);
}
.menu-pannello-sinistra { right: auto; left: 0; }

/* Una voce del menu: un link, un pulsante o un pulsante dentro un form suo.
   Tutte e tre devono somigliarsi, quindi lo stile sta sulla forma. */
.menu-voce,
.menu-pannello .btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--t-corpo);
    font-weight: var(--p-normale);
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    white-space: nowrap;
}
.menu-voce:hover,
.menu-pannello .btn:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.menu-voce.is-attiva { font-weight: var(--p-forte); }

.menu-titolo {
    padding: var(--space-1) var(--space-3);
    font-size: var(--t-etichetta);
    font-weight: var(--p-forte);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}
.menu-riga { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.menu-pannello select,
.menu-pannello input { margin: var(--space-1) 0; }
.menu-pannello .form-actions { margin-top: var(--space-2); justify-content: stretch; }
.menu-pannello .form-actions .btn { justify-content: center; }


/* =============================================================================
 * INTESTAZIONI DI COLONNA CHE ORDINANO E FILTRANO (lib/tabella.php)
 * ============================================================================= */

/* Il menu eredita il maiuscoletto della riga di intestazione: qui si tolgono
   solo il bordo e il fondo, perché dentro una riga già incorniciata un secondo
   bordo per colonna farebbe sette scatole in fila. */
.col-menu > summary {
    padding: 2px var(--space-1);
    border-color: transparent;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.col-menu > summary:hover,
.col-menu[open] > summary { background: var(--bg-surface); color: var(--text-primary); }

.col-menu.is-attiva > summary { color: var(--text-primary); }

/* Il triangolino compare al passaggio o quando il menu è aperto: settanta
   triangolini fissi su una lista di dieci colonne sarebbero un merletto. */
.col-triangolo { font-size: 8px; opacity: 0; transition: opacity 0.1s ease; }
.col-menu:hover .col-triangolo,
.col-menu[open] .col-triangolo { opacity: 0.5; }

.col-freccia { font-size: 10px; margin-left: 2px; }
.col-punto   { font-size: 14px; line-height: 1; margin-left: 2px; }

/* Su una colonna numerica il menu si apre verso sinistra, altrimenti esce
   dallo schermo sull'ultima colonna a destra. */
.cella-num .menu-pannello { right: 0; left: auto; }

.menu-glifo { display: inline-block; width: 12px; color: var(--text-tertiary); }
.menu-form  { margin: 0; }

/* --- I filtri accesi, sopra la lista ---------------------------------------- */
.filtri-accesi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* --- La ricerca libera ------------------------------------------------------ */
.barra-ricerca {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.barra-ricerca input[type="search"] { width: 300px; max-width: 100%; }

/* La riga sopra la lista: ricerca a sinistra, filtri accesi accanto, conteggi
   a destra. Una riga sola, 32px, al posto della card da un quarto di schermo. */
.barra-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.barra-lista-fine { margin-left: auto; font-size: var(--t-piccolo); color: var(--text-secondary); }


/* --- Paginazione ------------------------------------------------------------
 * Condivisa da Articoli e RDP. Il numero di righe per pagina è una scelta
 * dell'utente e non una costante nostra: chi ha un monitor grande vuole 250
 * righe, chi lavora dal telefono ne vuole 25.
 * ---------------------------------------------------------------------------- */
.paginazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--text-secondary);
}
.paginazione-gruppo { display: flex; align-items: center; gap: var(--space-2); }

.pag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2);
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}
.pag-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.pag-link.is-active {
    color: var(--ui-attivo-testo);
    background: var(--ui-attivo);
    border-color: var(--ui-attivo);
    font-weight: var(--p-forte);
}
.pag-link.is-spento {
    color: var(--text-tertiary);
    background: var(--bg-page);
    border-color: var(--border);
    pointer-events: none;
}
.pag-salto { color: var(--text-tertiary); padding: 0 2px; }