/*
   Tema del gestionale.

   I colori stanno tutti qui come variabili: le pagine non scrivono mai un colore
   letterale. Serve a due cose, cambiare tema senza rincorrere i file e, soprattutto,
   mantenere il significato dei colori sempre lo stesso (verde entra, rosso esce).
*/

:root {
    --inchiostro: #0f172a;
    --inchiostro-tenue: #475569;
    --inchiostro-fioco: #94a3b8;

    --sfondo: #f1f5f9;
    --superficie: #ffffff;
    --bordo: #e2e8f0;
    --bordo-marcato: #cbd5e1;

    --barra-sfondo: #141b2d;
    --barra-testo: #aab4c8;
    --barra-testo-attivo: #ffffff;
    --barra-sezione: #64748b;
    --barra-attiva: #1e293b;
    --barra-accento: #22c55e;

    --azione: #16a34a;
    --azione-scura: #15803d;

    --positivo: #16a34a;
    --negativo: #dc2626;
    --informativo: #2563eb;
    --neutro: #64748b;
    --avviso: #b45309;

    --raggio: 10px;
    --raggio-piccolo: 6px;
    --ombra: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);

    --larghezza-barra: 232px;

    color-scheme: light;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--inchiostro);
    /* Lo stack parte da system-ui: su ogni sistema e' il carattere che quel sistema
       disegna meglio, con l'hinting giusto per il suo schermo. Segoe UI resta subito
       dopo per le versioni di Windows in cui system-ui non si risolve.

       15px e non 14: un gestionale si guarda per otto ore di fila, e un punto di corpo
       in piu' vale piu' di qualunque altra cosa si possa fare alla leggibilita'. */
    font-family: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* Cifre a larghezza fissa, ovunque e non solo nelle tabelle: senza, l'1 e' piu'
       stretto dell'8, le migliaia non si incolonnano e due importi uno sotto l'altro
       non si confrontano a occhio. In un gestionale i numeri stanno dappertutto. */
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
a { color: inherit; }

/* ------------------------------------------------------------------ impianto */

.guscio {
    display: flex;
    min-height: 100vh;
}

.interruttore-barra { display: none; }

.barra-laterale {
    width: var(--larghezza-barra);
    flex: 0 0 var(--larghezza-barra);
    background: var(--barra-sfondo);
    color: var(--barra-testo);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.marchio {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    color: #fff;
}

.marchio-segno {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--barra-accento), #0ea5e9);
    flex: 0 0 auto;
}

.marchio { text-decoration: none; }
.marchio:hover .marchio-testo strong { color: #fff; }

.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }

.marchio-testo strong {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Le due lettere che danno il nome al prodotto, in verde: si riconosce il marchio con la
   coda dell'occhio, ed e' lo stesso segno che porta la testata del sito. */
.marchio-testo strong em { font-style: normal; color: var(--barra-accento); }

.marchio-testo small {
    color: var(--barra-sezione);
    font-size: .68rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-top: .1rem;
}

.colonna-principale {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.intestazione {
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.intestazione-azienda { flex: 1 1 auto; min-width: 0; }
.intestazione-utente { display: flex; align-items: center; gap: 1rem; }

.apri-barra { display: none; cursor: pointer; font-size: 1.25rem; }

.nome-utente { color: var(--inchiostro-tenue); text-decoration: none; }
.nome-utente:hover { color: var(--inchiostro); }

.modulo-uscita { margin: 0; }
.pulsante-uscita {
    background: none; border: 0; padding: 0;
    color: var(--inchiostro-tenue); cursor: pointer;
}
.pulsante-uscita:hover { color: var(--negativo); }

.contenuto { padding: 1.25rem 1.5rem 3rem; flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ navigazione */

.navigazione { padding: .25rem .5rem 2rem; display: flex; flex-direction: column; gap: 1px; }

.voce-nav {
    display: flex; align-items: center; gap: .55rem;
    padding: .46rem .7rem;
    color: var(--barra-testo);
    text-decoration: none;
    border-radius: var(--raggio-piccolo);
    font-size: .875rem;
}

.voce-nav:hover { background: var(--barra-attiva); color: var(--barra-testo-attivo); }

.voce-nav.attiva {
    background: var(--barra-attiva);
    color: var(--barra-testo-attivo);
    box-shadow: inset 2px 0 0 var(--barra-accento);
}

.sezione-nav { margin-top: .5rem; }

.titolo-sezione {
    width: 100%;
    display: flex; align-items: center; gap: .55rem;
    background: none; border: 0;
    padding: .4rem .7rem;
    color: var(--barra-sezione);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
}

.titolo-sezione-testo { flex: 1 1 auto; text-align: left; }
.freccia-sezione { font-size: .9rem; }
.voci-sezione { display: flex; flex-direction: column; gap: 1px; }
.voci-sezione .voce-nav { padding-left: 2rem; }

/* ------------------------------------------------------------------ selettore azienda */

.selettore-azienda { position: relative; }

.azienda-attiva {
    background: none; border: 0; padding: 0;
    font-size: .95rem; font-weight: 600;
    color: var(--inchiostro);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none;
}

.freccia-giu { color: var(--inchiostro-fioco); font-size: .75rem; }

.elenco-aziende {
    position: absolute; top: calc(100% + .4rem); left: 0;
    min-width: 260px; z-index: 30;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    padding: .25rem;
}

.elenco-aziende form { margin: 0; }

.voce-azienda {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; text-align: left;
    background: none; border: 0;
    padding: .45rem .6rem;
    border-radius: var(--raggio-piccolo);
    cursor: pointer; text-decoration: none; color: inherit;
}

.voce-azienda:hover { background: var(--sfondo); }
.voce-azienda.corrente { background: #ecfdf5; }
.voce-azienda small { color: var(--inchiostro-fioco); font-size: .72rem; }
.voce-aggiungi { color: var(--azione); font-weight: 600; }

.etichetta-dimostrativa {
    background: #fef3c7; color: var(--avviso);
    border-radius: 999px; padding: .05rem .45rem;
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    margin-left: .35rem;
}

/* ------------------------------------------------------------------ intestazione pagina */

.intestazione-pagina { margin-bottom: 1rem; }

.briciole { font-size: .78rem; color: var(--inchiostro-fioco); margin-bottom: .35rem; }
.briciole a { text-decoration: none; color: var(--inchiostro-fioco); }
.briciole a:hover { color: var(--inchiostro-tenue); }
.briciole-separatore { margin: 0 .35rem; }
.briciole-corrente { color: var(--inchiostro-tenue); font-weight: 600; }

.intestazione-riga { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.titolo-pagina { font-size: 1.5rem; flex: 1 1 auto; }
.conteggio-record { color: var(--inchiostro-fioco); font-weight: 400; font-size: .95rem; margin-left: .3rem; }
.intestazione-azioni { display: flex; gap: .5rem; align-items: center; }
.sottotitolo-pagina { color: var(--inchiostro-tenue); margin: .35rem 0 0; }

/* ------------------------------------------------------------------ pulsanti */

.btn-azione {
    background: var(--azione); border: 1px solid var(--azione); color: #fff;
    border-radius: var(--raggio-piccolo);
    padding: .42rem .9rem; font-weight: 600;
}
.btn-azione:hover { background: var(--azione-scura); border-color: var(--azione-scura); color: #fff; }

.btn-contorno {
    background: var(--superficie); border: 1px solid var(--bordo-marcato); color: var(--inchiostro-tenue);
    border-radius: var(--raggio-piccolo); padding: .35rem .7rem;
}
.btn-contorno:hover { background: var(--sfondo); color: var(--inchiostro); }

/* ------------------------------------------------------------------ indicatori */

/* Le schede degli indicatori.

   «auto-fill» metteva colonne vuote quando gli indicatori erano pochi, e su telefono ne
   incolonnava **una per riga**: cinque indicatori erano cinque schermate di scorrimento
   prima di arrivare a un dato. Con «auto-fit» le colonne si distribuiscono su quanti
   indicatori ci sono davvero, e sotto i 560px si passa a due per riga — che e' il modo in
   cui si leggono i numeri su un telefono, a coppie, senza scorrere. */
.riga-indicatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: .75rem;
    margin-bottom: 1.1rem;
}

/* Il colore del tono sta su una barretta a sinistra e non piu' su un pallino accanto
   all'etichetta: il pallino era largo sette pixel e il colore — che e' l'informazione —
   non si vedeva. La barretta si legge con la coda dell'occhio, che e' come si guarda un
   cruscotto. */
.scheda-indicatore {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: .85rem 1rem .85rem 1.15rem;
    overflow: hidden;
}

.scheda-indicatore::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--neutro);
}

.valore-indicatore {
    font-size: 1.65rem; font-weight: 700; line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* L'etichetta sta sotto il numero ma si legge prima: tutta maiuscola e spaziata, perche'
   a quel corpo e' la forma piu' leggibile, e perche' cosi' non compete con la cifra. */
.etichetta-indicatore {
    color: var(--inchiostro-tenue);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .35rem;
}

/* Resta per le pagine che lo usano ancora fuori dagli indicatori. */
.pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); display: none; }

.tono-positivo    .valore-indicatore { color: var(--positivo); }
.tono-positivo::before    { background: var(--positivo); }
.tono-negativo    .valore-indicatore { color: var(--negativo); }
.tono-negativo::before    { background: var(--negativo); }
.tono-informativo .valore-indicatore { color: var(--informativo); }
.tono-informativo::before { background: var(--informativo); }
.tono-neutro      .valore-indicatore { color: var(--inchiostro); }
.tono-neutro::before      { background: var(--bordo-marcato); }

/* ------------------------------------------------------------------ pannelli e moduli */

.pannello {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.pannello-avviso { max-width: 44rem; }
.titolo-pannello { font-size: 1rem; margin-bottom: .75rem; }
.titolo-pannello:not(:first-child) { margin-top: 1.5rem; }
.nota { color: var(--inchiostro-tenue); font-size: .85rem; }
.sottotesto { color: var(--inchiostro-fioco); }

.griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem 1rem;
}

.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo > span { font-size: .78rem; color: var(--inchiostro-tenue); font-weight: 600; }
.campo-largo { grid-column: span 2; }
.campo-stretto { max-width: 150px; }

.azioni-modulo { display: flex; gap: .5rem; margin-top: 1rem; }

.messaggio-errore { color: var(--negativo); margin-top: .75rem; }
.messaggio-esito {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: var(--raggio-piccolo); padding: .5rem .75rem; margin-bottom: 1rem;
}

.griglia-permessi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .4rem .9rem;
}

.permesso { display: flex; align-items: baseline; gap: .45rem; font-size: .85rem; }
.permesso code { color: var(--inchiostro-fioco); font-size: .72rem; }

.distintivo {
    border-radius: 999px; padding: .1rem .5rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.distintivo-verde { background: #dcfce7; color: #166534; }
.distintivo-grigio { background: var(--sfondo); color: var(--inchiostro-tenue); }

/* ------------------------------------------------------------------ lista standard */

.lista-standard { display: flex; gap: 1rem; align-items: flex-start; }
.lista-corpo {
    flex: 1 1 auto; min-width: 0;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.lista-barra {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--bordo);
}

.lista-barra-sinistra { display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; }
.lista-barra-destra { display: flex; align-items: center; gap: .5rem; }
.lista-ricerca { min-width: 220px; max-width: 320px; flex: 1 1 220px; }
.lista-conteggio-selezione { font-size: .82rem; color: var(--inchiostro-tenue); white-space: nowrap; }

.lista-menu-colonne { padding: .35rem; max-height: 340px; overflow-y: auto; }
.lista-menu-colonne .dropdown-item { display: flex; gap: .5rem; align-items: center; cursor: pointer; }

.lista-tabella-contenitore { overflow-x: auto; }

.lista-tabella { margin: 0; font-size: .875rem; }
.lista-tabella thead th {
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    color: var(--inchiostro-tenue);
    font-weight: 600; font-size: .78rem;
    white-space: nowrap;
    padding: .6rem .85rem;
}
.lista-tabella thead th.ordinabile { cursor: pointer; user-select: none; }
.lista-tabella thead th.ordinabile:hover { color: var(--inchiostro); }
.lista-tabella tbody td { padding: .55rem .85rem; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.lista-tabella tbody tr:last-child td { border-bottom: 0; }
.lista-tabella tbody tr.cliccabile { cursor: pointer; }
.lista-tabella tbody tr:hover { background: #f8fafc; }
.lista-tabella tbody tr.selezionata { background: #f0fdf4; }
.lista-tabella tbody tr.riga-spenta { color: var(--inchiostro-fioco); }
.lista-tabella .numerica { text-align: right; font-variant-numeric: tabular-nums; }
.lista-tabella .col-selezione { width: 36px; }
.lista-tabella .freccia { margin-left: .25rem; color: var(--inchiostro-fioco); }
.riga-dettaglio > td { background: #f8fafc; }

.lista-stato { text-align: center; color: var(--inchiostro-fioco); padding: 2rem 1rem; }

.lista-paginazione {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .6rem .85rem;
    border-top: 1px solid var(--bordo);
    color: var(--inchiostro-tenue); font-size: .82rem;
}
.lista-paginazione-pulsanti { display: flex; gap: .4rem; }

.lista-filtri {
    flex: 0 0 236px; width: 236px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: .85rem;
    display: flex; flex-direction: column; gap: .75rem;
}

.lista-filtri-titolo {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 600; color: var(--informativo); font-size: .85rem;
}

/* ------------------------------------------------------------------ errore Blazor */

#blazor-error-ui {
    background: #fff4e5;
    border-top: 2px solid var(--avviso);
    bottom: 0; display: none; left: 0; position: fixed; width: 100%;
    padding: .7rem 1.25rem; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .7rem; }

/* ------------------------------------------------------------------ schermi stretti */

@media (max-width: 860px) {
    .barra-laterale {
        position: fixed; left: 0; top: 0; z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
    }

    .interruttore-barra:checked ~ .barra-laterale { transform: translateX(0); }

    /* Il pulsante del menu e' il bersaglio piu' premuto del telefono: 44px per 44px, che
       e' la misura sotto la quale un dito sbaglia. */
    .apri-barra {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-left: -.5rem;
        border-radius: var(--raggio-piccolo);
        font-size: 1.35rem; line-height: 1;
    }

    .apri-barra:active { background: var(--sfondo); }

    .contenuto { padding: 1rem; }

    /* align-items torna a stretch, e non è un dettaglio: in colonna, con flex-start,
       ogni elemento si dimensiona sul proprio contenuto. Una tabella larga allargherebbe
       il riquadro oltre lo schermo, e lo scorrimento orizzontale previsto dentro
       .lista-tabella-contenitore non scatterebbe mai perché il contenitore è cresciuto
       insieme alla tabella: a scorrere sarebbe tutta la pagina. */
    .lista-standard { flex-direction: column; align-items: stretch; }
    .lista-filtri { width: 100%; flex: 1 1 auto; order: -1; }

    .campo-largo { grid-column: span 1; }
}

/* ------------------------------------------------------------------ linguette */

.linguette {
    display: flex; gap: .25rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--bordo);
    margin-bottom: -1px;
}

.linguetta {
    background: none; border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--raggio-piccolo) var(--raggio-piccolo) 0 0;
    padding: .45rem .85rem;
    color: var(--inchiostro-tenue);
    font-size: .875rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
}

.linguetta:hover { color: var(--inchiostro); background: #f8fafc; }

.linguetta.scelta {
    background: var(--superficie);
    border-color: var(--bordo);
    color: var(--inchiostro);
    box-shadow: inset 0 2px 0 var(--azione);
}

.linguetta-conteggio {
    background: var(--sfondo); color: var(--inchiostro-tenue);
    border-radius: 999px; padding: 0 .4rem;
    font-size: .72rem; font-weight: 700;
}

.linguette + .pannello { border-top-left-radius: 0; }

/* ------------------------------------------------------------------ schede e moduli */

.campo-riquadro {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    background: #f8fafc;
    font-size: .85rem;
}

.campo-con-pulsante { display: flex; gap: .4rem; align-items: stretch; }
.campo-con-pulsante .form-control { flex: 1 1 auto; min-width: 0; }

.nota-campo { color: var(--inchiostro-fioco); font-size: .75rem; }
.avviso-campo { color: var(--avviso); font-size: .75rem; }
.esito-campo { color: var(--positivo); font-size: .75rem; }

.riquadro-modifica {
    border: 1px solid var(--bordo-marcato);
    border-radius: var(--raggio);
    background: #f8fafc;
    padding: .9rem 1rem;
    margin-top: 1rem;
}

.messaggio-errore-riquadro {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: var(--raggio-piccolo); padding: .6rem .85rem; margin-bottom: 1rem;
}

.elenco-errori { margin: .4rem 0 0; padding-left: 1.2rem; }
.elenco-errori li { margin-bottom: .15rem; }

.btn-pericolo { color: var(--negativo); border-color: #fecaca; }
.btn-pericolo:hover { background: var(--negativo); border-color: var(--negativo); color: #fff; }

.distintivo-rosso { background: #fee2e2; color: #991b1b; }

/* Giallo: qualcosa è in corso e aspetta una decisione — un inventario aperto, un
   conteggio a metà. Non è un errore, ma non è nemmeno finito. */
.distintivo-giallo { background: #fef3c7; color: #92400e; }
.riga-attenzione > td { background: #fffbeb; }

/* Blu: in viaggio. Lo usa lo stato di una fattura trasmessa e non ancora arrivata a
   destinazione, che non e' ne' un problema ne' un risultato: e' un'attesa che dipende
   da qualcun altro. */
.distintivo-blu { background: #dbeafe; color: #1e40af; }

/* La barra d'azioni di una tabella interna: i pulsanti non devono andare a capo
   su schermi stretti, meglio che la tabella scorra. */
.lista-tabella td.numerica .btn + .btn { margin-left: .3rem; }

.avviso-riquadro {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: var(--raggio-piccolo); padding: .5rem .75rem; margin: .5rem 0;
}

.riquadro-riconoscimento {
    margin-top: .75rem;
    padding: .6rem .85rem;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    border-radius: var(--raggio-piccolo);
}

.pannello-stretto { max-width: 52rem; }
.titolo-sotto { font-size: .92rem; font-weight: 600; margin: 1rem 0 .4rem; }
.elenco-passi { margin: .4rem 0 .8rem; padding-left: 1.3rem; }
.elenco-passi li { margin-bottom: .35rem; }
.pannello-stretto code {
    background: var(--sfondo); border-radius: 4px; padding: .05rem .3rem; font-size: .85em;
}

/* Su schermo stretto una tabella dentro un pannello deve scorrere da sola invece di
   allargare la pagina: il resto del contenuto resta leggibile e non si perde il filo. */
@media (max-width: 860px) {
    .pannello .lista-tabella {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .pannello .lista-tabella tbody td { white-space: nowrap; }
}

/* ------------------------------------------------------------------ documenti */

/* Elenco di suggerimenti sotto un campo di ricerca (cliente, articolo). Non e' un
   <datalist>: quello non permette di mostrare due righe per voce ne' di sapere quale
   identificativo e' stato scelto. */
.suggerimenti {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bordo-marcato);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    box-shadow: var(--ombra);
    max-height: 260px;
    overflow-y: auto;
    margin-top: .25rem;
}

.suggerimento {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-align: left;
    padding: .45rem .6rem;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.suggerimento:last-child { border-bottom: 0; }
.suggerimento:hover, .suggerimento:focus-visible { background: var(--sfondo); }
.suggerimento span { font-size: .78rem; color: var(--inchiostro-tenue); }

.riquadro-cliente {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    background: var(--sfondo);
    padding: .5rem .65rem;
    margin-top: .35rem;
    line-height: 1.45;
}

.barra-aggiunta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.barra-aggiunta .form-control { flex: 1 1 18rem; min-width: 0; }

/* Le righe di un documento sono una tabella di campi: senza margini interni ridotti
   non ci stanno nove colonne su un portatile. */
.righe-documento td { padding: .25rem .3rem; vertical-align: middle; }
.righe-documento .form-control, .righe-documento .form-select { padding: .2rem .35rem; }
.righe-documento .distintivo { margin-top: .2rem; }
.riga-testo > td { background: #f8fafc; font-style: italic; }
.riga-testo .form-control { font-style: italic; }

.azioni-riga { white-space: nowrap; text-align: right; }
.azioni-riga .btn + .btn { margin-left: .2rem; }

.griglia-totali {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 24rem);
    gap: 1.25rem;
    align-items: start;
}

.colonna-riepilogo h3, .colonna-totali h3 {
    font-size: .92rem; font-weight: 600; margin-bottom: .4rem;
}

.voce-totale {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .2rem 0;
    border-bottom: 1px solid var(--bordo);
}

.voce-totale:last-of-type { border-bottom: 0; }

.voce-forte {
    font-weight: 700;
    font-size: 1.02rem;
    border-top: 2px solid var(--bordo-marcato);
    border-bottom: 0;
    padding-top: .35rem;
    margin-top: .15rem;
}

.colonna-totali .campo { margin-top: .75rem; }

/* La tela su cui il cliente firma il rapporto di intervento. Alta il giusto per una
   firma col dito su un tablet, e con la riga tratteggiata che dice dove firmare. */
.tela-firma {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: 140px;
    border: 1px dashed var(--bordo-marcato);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    touch-action: none;
}

.elenco-collegamenti { margin: .3rem 0 1rem; padding-left: 1.2rem; }
.elenco-collegamenti li { margin-bottom: .2rem; }

.anteprima-logo { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.anteprima-logo img {
    max-height: 60px; max-width: 220px;
    border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    background: var(--superficie); padding: .25rem;
}

.griglia-interruttori {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .35rem 1rem;
    margin-bottom: 1rem;
}

/* Un campo che e' una casella da spuntare: etichetta a destra e sulla stessa riga,
   non sopra come negli altri campi. */
.campo-interruttore { flex-direction: row; align-items: center; gap: .45rem; }
.campo-interruttore > span { font-weight: 400; color: var(--inchiostro); }
.campo-interruttore input[type=checkbox] { flex: 0 0 auto; }

.testo-attenzione { color: var(--avviso); font-weight: 600; }

@media (max-width: 860px) {
    .griglia-totali { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ pagamenti */

/* Il riepilogo dello scaduto per anzianita' sta nel pannello dei filtri: deve essere
   stretto e leggibile, non una tabella vera. */
.tabella-anzianita { font-size: .8rem; margin-top: .25rem; }
.tabella-anzianita td { padding: .2rem .25rem; border-bottom: 1px solid var(--bordo); }
.tabella-anzianita tr:last-child td { border-bottom: 0; }

/* Un modulo che sta dentro una barra di azioni: senza questo il form andrebbe a capo
   da solo e il pulsante finirebbe su una riga sua. */
.modulo-in-linea { display: inline; }

.riga-spenta > td { color: var(--inchiostro-fioco); }

/* La riga di totali in fondo a una tabella. */
.lista-tabella tfoot td {
    border-top: 2px solid var(--bordo-marcato);
    padding: .55rem .85rem;
}

/* Coppie etichetta/valore: i dati di una scheda che si leggono e non si modificano.
   A due colonne quando c'è spazio, incolonnate sotto i 560px, perché un IBAN accanto
   alla sua etichetta su uno schermo da telefono manderebbe la pagina a scorrere. */
.coppie-dati {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
    margin: 0;
}

.coppie-dati dt { color: var(--inchiostro-fioco); }
.coppie-dati dd { margin: 0; }

@media (max-width: 560px) {
    .coppie-dati { grid-template-columns: 1fr; gap: 0; }
    .coppie-dati dd { margin-bottom: .6rem; }

    /* ---------------------------------------------------------- il telefono sul serio

       Un gestionale sul telefono non e' un ripiego: si apre in magazzino con una mano
       sola, o in macchina davanti a un cliente. Quello che segue serve a non far
       scorrere mezzo schermo prima di vedere un dato. */

    /* Due indicatori per riga invece di uno: cinque numeri stanno in tre righe e si
       leggono tutti insieme, che e' il motivo per cui esiste un cruscotto. */
    .riga-indicatori {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .scheda-indicatore { padding: .7rem .7rem .7rem .85rem; }

    /* Il valore si rimpicciolisce quanto basta a non andare a capo: «1.234.567,89 €» in
       mezza colonna di telefono non ci sta, e un numero spezzato su due righe non e' piu'
       un numero. */
    .valore-indicatore { font-size: 1.2rem; }
    .etichetta-indicatore { font-size: .66rem; letter-spacing: .03em; }

    /* L'intestazione: il nome dell'azienda e' quello che serve sapere, il proprio nome no
       — chi guarda il telefono sa chi e'. Si toglie il nome e resta il pulsante d'uscita,
       cosi' niente va a capo e la riga resta alta una riga sola. */
    .intestazione { gap: .5rem; padding: .4rem .75rem; }
    .intestazione-utente .nome-utente { display: none; }

    /* I filtri sopra l'elenco occupavano una schermata intera prima di arrivare alla
       prima riga di dati. Si richiudono: restano a un tocco, non in mezzo ai piedi. */
    .lista-filtri > .pannello { padding: 0; }

    .titolo-pagina { font-size: 1.3rem; }

    .contenuto { padding: .75rem; }

    /* Le tabelle larghe scorrono gia' dentro il loro contenitore. Qui si aggiunge il
       segno che si puo' scorrere: senza, una colonna tagliata a meta' si legge come un
       difetto invece che come un invito a trascinare. */
    .lista-tabella-contenitore {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) 100% 0,
            linear-gradient(to right, rgba(15, 23, 42, .10), rgba(15, 23, 42, 0)),
            linear-gradient(to left, rgba(15, 23, 42, .10), rgba(15, 23, 42, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* ------------------------------------------------------------------ magazzino */

/* Il campo in cui si scrive la quantità contata, dentro una cella di tabella: largo
   quanto basta a un numero, allineato a destra come il numero che sostituisce. */
.campo-conteggio {
    width: 100%;
    max-width: 7rem;
    text-align: right;
}

.testo-positivo { color: var(--positivo); }

/* Una scheda di scelta fra alternative che si escludono (il metodo di valorizzazione):
   incolonnate, con la spiegazione sotto il nome. */
.griglia-interruttori > .campo-interruttore {
    align-items: start;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bordo);
}

.griglia-interruttori > .campo-interruttore:last-child { border-bottom: 0; }

/* L'XML di una fattura elettronica mostrato a schermo: monospazio, a capo dove serve e
   un'altezza massima, perche' un file di cinquanta righe non deve spingere il resto della
   pagina fuori vista. Il contenuto non si riformatta: quello che si legge qui dentro deve
   essere byte per byte quello trasmesso. */
.blocco-xml {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 28rem;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    padding: .9rem 1rem;
    border-radius: .5rem;
    margin: 0;
}

.testo-monospazio {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
}

/* ------------------------------------------------------------------ accesso e iscrizione

   Le pagine di accesso non hanno la barra laterale: sono la porta d'ingresso, e di solito
   ci si arriva da un link in un'email. Un pannello centrato e stretto, perche' un modulo
   di sei campi larghi mille pixel si legge male. */
.pagina-accesso {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.pannello-accesso {
    width: 100%;
    max-width: 34rem;
}

.titolo-accesso {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

/* Il codice di invito si legge carattere per carattere: monospazio, spaziato e grande.
   E' il campo che si copia a mano da un'email, cioe' quello in cui si sbaglia. */
.campo-codice {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ striscia della beta

   Sta sotto l'intestazione e sopra il contenuto, su ogni schermata. Non si chiude: un
   tester deve sapere sempre che sta usando una versione di prova, e un avviso che si
   nasconde non lo dice piu'. */
.striscia-beta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.25rem;
    background: #1e293b;
    color: #e2e8f0;
    font-size: .82rem;
    line-height: 1.35;
}

.striscia-beta-scaduta { background: #7f1d1d; }

.striscia-marchio {
    font-weight: 700;
    letter-spacing: .12em;
    font-size: .7rem;
    padding: .12rem .45rem;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .18);
}

.striscia-testo { flex: 1 1 18rem; }

.striscia-azione {
    color: #fff;
    text-decoration: underline;
    white-space: nowrap;
}

.striscia-azione:hover { opacity: .85; }

/* ------------------------------------------------------------------ analisi */

/* L'istogramma di un mese, dentro una cella di tabella. Niente libreria di grafici: una
   barra è un div con una larghezza in percentuale, e un grafico vero servirebbe a far
   sembrare più ricca una tabella che si legge già. */
.barra-mese {
    height: .55rem;
    min-width: 4rem;
    background: rgba(15, 23, 42, .08);
    border-radius: 999px;
    overflow: hidden;
}

.barra-mese > span {
    display: block;
    height: 100%;
    background: var(--positivo);
    border-radius: 999px;
}

/* ------------------------------------------------------------------ cassa */

/* Il campo in cui si batte il codice: grande, perché è l'unico posto in cui si guarda
   mentre si passa la merce, e largo quanto la riga. */
.campo-scansione {
    flex: 1 1 24rem;
    min-width: 0;
    font-size: 1.1rem;
    padding: .7rem .8rem;
}

/* Meno, quantità, più: tre controlli che stanno insieme dentro una cella. */
.gruppo-quantita {
    display: flex;
    gap: .25rem;
    align-items: center;
    justify-content: flex-end;
}

.gruppo-quantita .btn {
    padding: .2rem .55rem;
    font-size: 1rem;
    line-height: 1.2;
}

/* Il totale da incassare: è il numero che l'operatore legge a voce al cliente, e deve
   essere il più grande della pagina. */
.totale-cassa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 2px solid var(--bordo-marcato);
}

.totale-cassa > span { color: var(--inchiostro-tenue); }

.totale-cassa > strong {
    font-size: 1.9rem;
    font-variant-numeric: tabular-nums;
}

.riga-pagamento { align-items: end; margin-bottom: .4rem; }

.btn-incassa { font-size: 1.05rem; padding: .6rem 1.2rem; }

/* Il resto da dare: va letto da un metro di distanza, mentre si apre il cassetto. */
.resto-grande {
    font-size: 1.6rem;
    font-weight: 600;
    margin: .3rem 0 0;
}

/* ------------------------------------------------------------------ api e webhook */

/* Un segreto appena creato: si legge una volta sola, quindi si deve poter selezionare
   tutto in un colpo e si deve vedere bene. A capo dove serve, perché una chiave di
   cinquanta caratteri non deve mandare la pagina a scorrere. */
.segreto-nuovo {
    margin: .6rem 0 0;
    padding: .7rem .8rem;
    background: var(--inchiostro);
    color: #fff;
    border-radius: var(--raggio-piccolo);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    user-select: all;
}

/* Un esempio di codice nella documentazione: scorre in orizzontale per conto suo, così
   una riga lunga non allarga la pagina. */
.esempio-codice {
    margin: .5rem 0;
    padding: .7rem .8rem;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .82rem;
    line-height: 1.45;
    overflow-x: auto;
}

/* Il richiamo alla richiesta di invito, sotto il modulo di accesso.
   Separato da una riga: non e' un'altra cosa da fare per chi sta entrando, e'
   la risposta a chi non puo' entrare. */
.invito-beta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bordo);
    text-align: center;
}

.invito-beta p {
    margin: 0 0 .6rem;
    color: var(--inchiostro-tenue);
    font-size: .9rem;
}

/* Una tabella di poche colonne non deve prendersi tutta la larghezza dello schermo: il
   primo campo resta a sinistra, l'ultimo finisce a un palmo di distanza, e due valori che
   vanno confrontati non si guardano piu' insieme. Si ferma dove il contenuto finisce. */
.tabella-stretta { max-width: 44rem; }

/* ------------------------------------------------------------------ azioni rapide di riga

   Le due o tre cose che su una riga si fanno piu' spesso, senza doverla aprire. Stanno in
   fondo, restano **tenui finche' non si passa sopra la riga**: una fila di pulsanti colorati
   ripetuta per venti righe sposta l'attenzione dai dati, che sono il motivo per cui la
   lista esiste. Su telefono si vedono sempre, perche' il passaggio del mouse non c'e'. */

.col-azioni { width: 1%; white-space: nowrap; text-align: right; }

.azioni-riga { display: inline-flex; gap: .25rem; justify-content: flex-end; }

.btn-riga {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 .5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--raggio-piccolo);
    color: var(--inchiostro-tenue);
    font-size: .95rem; line-height: 1;
    cursor: pointer;
    opacity: .35;
    transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

tr:hover .btn-riga, tr:focus-within .btn-riga { opacity: 1; }

.btn-riga:hover {
    background: var(--sfondo);
    border-color: var(--bordo-marcato);
    color: var(--inchiostro);
}

.btn-riga.pericolo:hover { background: #fef2f2; border-color: #fecaca; color: var(--negativo); }

.btn-riga:disabled { opacity: .18; cursor: not-allowed; }

/* Il testo che leggono solo i lettori di schermo: l'intestazione della colonna delle
   azioni c'e' per loro, ma a schermo sarebbe una parola in piu' su ogni lista. */
.solo-lettori {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 560px) {
    .btn-riga { opacity: 1; min-width: 34px; height: 34px; }
}

/* ------------------------------------------------------------------ finestra di conferma */

.velo {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

.finestra-conferma {
    background: var(--superficie);
    border-radius: var(--raggio);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
    padding: 1.4rem 1.5rem 1.25rem;
    width: 100%;
    max-width: 30rem;
}

.finestra-conferma p { margin: .6rem 0 0; color: var(--inchiostro-tenue); }

.azioni-finestra {
    display: flex; gap: .6rem; justify-content: flex-end;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    /* Sul telefono i due pulsanti prendono tutta la riga, e quello pericoloso sta sotto:
       il pollice arriva prima su «lascia stare», che e' l'ordine giusto. */
    .azioni-finestra { flex-direction: column-reverse; }
    .azioni-finestra .btn { width: 100%; }
}

/* ------------------------------------------------------------------ la scelta dei dati di esempio

   Il pannello della prima scelta non e' un pannello come gli altri: e' una domanda, ed e'
   la prima cosa che un tester legge. Bordo verde a sinistra e sfondo appena tinto, perche'
   si distingua dai riquadri che riportano numeri senza urlare. */

.pannello-scelta {
    border-left: 4px solid var(--azione);
    background: linear-gradient(to right, #f0fdf4, var(--superficie) 45%);
}

.pannello-scelta p { margin: .5rem 0 0; }

.azioni-scelta { display: flex; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* La riga che ricorda che i dati non sono tuoi, con il modo di toglierli accanto: il
   pulsante sta li' e non in un menu, perche' chi lo cerca lo cerca adesso. */
.riga-esempio {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}

.riga-esempio .nota { display: block; }

@media (max-width: 560px) {
    .azioni-scelta .btn, .riga-esempio .btn { width: 100%; }
    .riga-esempio { align-items: stretch; }
}