/* ============================================================
   IMPOSTAZIONI — la pagina a righe
   ============================================================
   Un'impostazione e' una riga: etichetta, aiuto, controllo. Niente
   card dentro card. I gruppi raccolgono le righe che si leggono
   insieme; la barra in fondo dice quante modifiche aspettano.

   Nasce a zero forzature di priorita' e zero esadecimali: e' il suo
   tetto nel cricchetto, e da li' puo' solo scendere. Ogni colore
   viene dai token canonici di style-core.css, cosi' il tema chiaro
   funziona senza una riga in piu'.
   ============================================================ */

/* PROD non ha un box-sizing globale: senza questo un'altezza dichiarata e' solo
   quella del contenuto, e ogni riga da 46px ne misura 58 col padding sopra.
   Elencati uno per uno, non con *, perche' dentro i pannelli vive ancora il
   markup di prima e non deve cambiare regola sotto i piedi. */
.imp-riga,
.imp-tabella__riga,
.imp-gruppo__corpo,
.imp-barra,
.imp-btn,
.imp-azione,
.imp-cerca,
.imp-campo,
.imp-val,
.imp-sw,
.imp-seg,
.imp-seg__voce,
.imp-passo__n,
.imp-preset {
    box-sizing: border-box;
}

:root[data-tema="chiaro"] .imp-pagina {
    --imp-accento-testo: var(--accent-strong);
    /* L'ambra dell'avviso su fondo chiaro sta a 2,9 di contrasto: un avviso che
       non si legge non avvisa. Stesso colore, scurito quanto basta a passare la
       soglia. Come per l'accento qui sopra: una riga sola, non un colore
       cablato in ogni regola che nomina l'ambra. */
    --imp-avviso-testo: color-mix(in srgb, var(--warning) 82%, black);
}

/* Il respiro laterale lo mette gia' .main-content: qui solo lo spazio in fondo,
   perche' l'ultima riga non finisca sotto la barra. */
.imp-pagina {
    --imp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --imp-riga-h: 46px;
    /* L'arancio dell'accento su fondo chiaro sta a 2,4 di contrasto: come testo
       non si legge. Sul tema chiaro si scrive con la sua variante scura, che
       resta lo stesso colore ma leggibile. Una riga qui, invece di un colore
       cablato in ogni regola che nomina l'accento. */
    --imp-accento-testo: var(--accent);
    --imp-avviso-testo: var(--warning);
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-bottom: 8px;
    color: var(--text-strong);
    font-family: var(--font-ui);
}

/* ── Testata: chi sto configurando e le due azioni di pagina ────────────── */

.imp-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.imp-testata__chi {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.imp-testata__tenant {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
}

.imp-testata__azioni {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.imp-cerca {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-soft);
    color: var(--text-secondary);
}

.imp-cerca:focus-within {
    border-color: var(--panel-border-mid);
    box-shadow: var(--focus-ring);
}

.imp-cerca input {
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-strong);
    font: 500 12.5px var(--font-ui);
    width: 190px;
    min-width: 0;
}

.imp-cerca input::placeholder { color: var(--text-secondary); }

.imp-azione {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 9px;
    background: var(--accent-wash);
    color: var(--imp-accento-testo);
    font: 700 12.5px var(--font-ui);
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s;
}

.imp-azione:hover {
    background: var(--surface-hover-soft);
    border-color: var(--accent);
}

/* ── Aree: una sola visibile, le pastiglie in topbar decidono quale ─────── */

.imp-area { display: none; flex-direction: column; gap: 26px; }
.imp-area.is-active { display: flex; }

.imp-vuoto {
    padding: 40px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Gruppo: intestazione con filo, poi la card delle righe ─────────────── */

.imp-gruppo { display: flex; flex-direction: column; gap: 10px; }

.imp-gruppo__testa {
    display: flex;
    align-items: center;
    gap: 14px;
}

.imp-gruppo__titolo {
    margin: 0;
    font: 700 14px var(--font-ui);
    letter-spacing: -0.01em;
    color: var(--text-strong);
    flex: none;
}

.imp-gruppo__filo {
    flex: 1 1 auto;
    height: 1px;
    background: var(--panel-border);
}

.imp-gruppo__nota {
    flex: none;
    font: 500 11px var(--imp-mono);
    color: var(--text-secondary);
    white-space: nowrap;
}

.imp-gruppo__nota.is-avviso { color: var(--imp-avviso-testo); }

.imp-gruppo__corpo {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
    overflow: hidden;
}

/* ── La riga ────────────────────────────────────────────────────────────── */

.imp-riga {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--imp-riga-h);
    padding: 6px 16px;
    border-top: 1px solid var(--card-border);
}

.imp-riga:first-child { border-top: 0; }

.imp-riga__testo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.imp-riga__label {
    font: 600 13px var(--font-ui);
    color: var(--text-strong);
    flex: none;
}

.imp-riga__aiuto {
    font: 400 12px var(--font-ui);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-riga__controllo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Riga che apre un editor: tutta la riga e' il bersaglio. */
.imp-riga--apribile { cursor: pointer; }
.imp-riga--apribile:hover { background: var(--surface-hover-soft); }

.imp-riga__freccia {
    font-size: 11px;
    color: var(--text-tertiary);
    transition: transform 0.16s var(--ease-enter);
}

.imp-riga.is-aperta .imp-riga__freccia { transform: rotate(180deg); }
.imp-riga.is-aperta { background: var(--surface-hover-soft); }

.imp-pannello {
    padding: 4px 16px 18px;
    border-top: 1px solid var(--card-border);
    background: var(--panel-bg);
}

.imp-pannello[hidden] { display: none; }

/* ── Controlli ─────────────────────────────────────────────────────────── */

/* Il valore: una pastiglia mono che si legge e si clicca per cambiarla. */
.imp-val {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    padding: 5px 10px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--text-strong);
    font: 500 12px var(--imp-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Campo di testo in linea: stessa forma della pastiglia, ma si scrive. */
.imp-campo {
    width: 220px;
    max-width: 44vw;
    padding: 5px 10px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--text-strong);
    font: 500 12px var(--imp-mono);
    outline: none;
}

.imp-campo:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.imp-campo::placeholder { color: var(--text-tertiary); }
.imp-campo--largo { width: 300px; }
.imp-campo--stretto { width: 110px; text-align: right; }

/* Le due tendine della fascia silenziosa, strette come i campi che stavano
   qui prima: un orario e una freccia non chiedono piu' spazio di cosi'. */
#np-quiet-range .oe-dd { width: 128px; }

select.imp-campo { cursor: pointer; font-family: var(--font-ui); }

textarea.imp-campo {
    width: 300px;
    min-height: 46px;
    resize: vertical;
    font-family: var(--font-ui);
    line-height: 1.5;
}

/* Una riga che segnala un valore che non torna: il filo a sinistra e l'aiuto
   colorato bastano, senza rubare spazio al controllo. */
.imp-riga--avviso { box-shadow: inset 2px 0 0 var(--warning); }
.imp-riga--avviso .imp-riga__aiuto { color: var(--imp-avviso-testo); }

/* Una funzione che il piano non comprende: si vede — è la vetrina di cosa si
   compra passando di livello — ma non si accende, e la riga lo dice. */
.imp-riga--fuoripiano { opacity: 0.72; }
.imp-riga--fuoripiano .imp-riga__aiuto { color: var(--imp-accento-testo); }

/* Il logo che finisce sui documenti: anteprima piccola, in riga. */
.imp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 34px;
    flex: none;
    padding: 3px;
    border: 1px dashed var(--panel-border-mid);
    border-radius: 8px;
    background: var(--panel-soft);
    overflow: hidden;
}

.imp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imp-logo__vuoto { font-size: 9px; line-height: 1.2; text-align: center; color: var(--text-secondary); }

/* Interruttore: 38x22, pallino 18. */
.imp-sw {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 38px;
    height: 22px;
    flex: none;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--panel-soft);
    cursor: pointer;
    transition: background 0.16s;
}

.imp-sw::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: transform 0.16s, background 0.16s;
}

.imp-sw:checked { background: var(--accent); }
.imp-sw:checked::after { transform: translateX(16px); background: var(--accent-contrast); }
.imp-sw:focus-visible { box-shadow: var(--focus-ring); }
.imp-sw:disabled { opacity: 0.45; cursor: not-allowed; }

/* Segmentato: al massimo tre voci. */
.imp-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-soft);
}

.imp-seg__voce {
    padding: 5px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 12px var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.imp-seg__voce:hover { color: var(--text-secondary); }

.imp-seg__voce.is-attiva {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

/* ── La tabella della mappatura colonne ─────────────────────────────────── */

.imp-tabella {
    --imp-cols: 1.1fr 1.1fr 120px 92px;
    display: flex;
    flex-direction: column;
}

.imp-tabella--due { --imp-cols: 1fr 1.4fr; }

/* I permessi di un ruolo per volta: a sinistra il blocco, a destra il suo
   interruttore. Le colonne erano tre, una per ruolo, e non c'era spazio per una
   quarta — ne' su un portatile ne', soprattutto, sul telefono, dove erano tre
   caselle da 54px senza testata sopra a dire di chi fossero. */
.imp-tabella--permessi { --imp-cols: minmax(0, 1fr) 92px; }

/* La fila dei ruoli sopra la tabella: si sceglie quello da configurare. */
.imp-ruolo__scelta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Un ruolo messo da parte resta cliccabile ma smette di chiamare l'attenzione:
   e' li' solo per poterlo rimettere in elenco. */
.imp-ruolo--nascosto { opacity: 0.55; }

.imp-ruolo__testata {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Il nome si cambia dove si legge, senza un modale per due parole. */
.imp-ruolo__nome {
    flex: 1 1 200px;
    min-width: 0;
    font-weight: 600;
}

.imp-tabella__cella {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* La colonna dell'Admin non si tocca: e' li' per far vedere che ha tutto. */
.imp-tabella__cella--bloccata { opacity: 0.55; }

.imp-tabella__blocco {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Le tab rientrate sotto il loro modulo, come nella pagina Moduli. */
.imp-tabella__blocco--annidato {
    margin-left: 18px;
    padding-left: 12px;
    border-left: 2px solid var(--card-border);
}

.imp-tabella__riga {
    display: grid;
    grid-template-columns: var(--imp-cols);
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 4px 16px;
    border-top: 1px solid var(--card-border);
}

.imp-tabella__testa {
    border-top: 0;
    min-height: 34px;
    background: var(--panel-soft);
    font: 500 10px var(--imp-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}


/* ── L'elenco delle persone ─────────────────────────────────────────────
   Una riga per persona. Prima ognuna ne occupava quattro — testata, poi email
   e ruolo, poi il reparto — e con dieci persone diventava un muro. */

.imp-utente {
    display: grid;
    grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: var(--imp-riga-h);
    padding: 4px 4px 4px 0;
    border-top: 1px solid var(--card-border);
    box-sizing: border-box;
}

.imp-utente:first-child { border-top: 0; }

.imp-utente__avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 26px;
}

.imp-utente__nome {
    font: 600 13px var(--font-ui);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-utente__email {
    font: 400 12px var(--imp-mono);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-utente__ruolo {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--panel-soft);
    font: 500 10px var(--imp-mono);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.imp-utente__apri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.16s, transform 0.16s var(--ease-enter);
}

.imp-utente__apri:hover { background: var(--surface-hover-soft); color: var(--text-strong); }
.imp-utente__apri.is-aperto { transform: rotate(180deg); }
.imp-utente--virtuale { opacity: 0.7; }

.imp-utente__campi {
    padding: 4px 0 14px;
    border-top: 1px solid var(--card-border);
}

.imp-utente__campi[hidden] { display: none; }

@media (max-width: 620px) {
    .imp-tabella--permessi { --imp-cols: minmax(0, 1fr) 54px; }
    .imp-tabella--permessi .imp-tabella__riga { gap: 6px; padding-inline: 10px; }
}

@media (max-width: 768px) {
    /* Sul telefono l'email non ci sta accanto al nome: scende sotto. */
    .imp-utente {
        grid-template-columns: 26px minmax(0, 1fr) auto auto;
        grid-template-areas: "avatar nome ruolo apri" ". email email email";
        row-gap: 2px;
        padding: 8px 0;
    }
    .imp-utente__avatar { grid-area: avatar; }
    .imp-utente__nome { grid-area: nome; }
    .imp-utente__ruolo { grid-area: ruolo; }
    .imp-utente__apri { grid-area: apri; }
    .imp-utente__email { grid-area: email; }
}

/* ── Elenchi dentro un pannello (stati, postazioni, utenti) ─────────────── */

.imp-elenco { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

/* Le opzioni di una variante stanno sotto il loro gruppo: il rientro e il filo
   a sinistra dicono a occhio dove finisce un gruppo e dove comincia l'altro,
   che in un elenco piatto di nomi non si capirebbe. */
.imp-riga--annidata {
    margin-left: 22px;
    padding-left: 12px;
    border-left: 2px solid var(--card-border);
}

/* ── Una serie di numerazione ───────────────────────────────────────────
   Sette controlli non stanno su una riga sola senza tagliarne qualcuno, e
   tredici serie una sotto l'altra diventerebbero un muro: si spezza in due,
   sopra chi e' (sigla e nome, con interruttore e cestino), sotto cosa fa
   (effetto, dove va la merce, causale). Le tre scelte sono pastiglie e non
   campi: il valore e' chiuso, si sceglie da una tendina .ui-dd. */

.imp-serie {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.imp-serie__capo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* La sigla e' corta per natura — «00», «ACQ», «RL» — e in monospazio le
   colonne di sigle si leggono incolonnate. `min-width: 0` non serve qui
   perche' la larghezza e' fissa: serve al nome, che e' l'unico a crescere. */
.imp-serie__sigla {
    width: 84px;
    flex: 0 0 auto;
    font-family: var(--imp-mono);
    text-transform: uppercase;
}

.imp-serie__capo .flex-grow { min-width: 0; }

.imp-serie__scelte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.imp-serie__scelta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 12px var(--font-ui);
    cursor: pointer;
}

.imp-serie__scelta:hover,
.imp-serie__scelta.is-aperta { background: var(--accent-wash); color: var(--imp-accento-testo); }

/* Una serie che sposta merce senza dire dove non si salva: il vincolo sul
   database la rifiuta. Si vede prima, non al Salva. */
.imp-serie__scelta--manca {
    border-color: var(--warning);
    color: var(--imp-avviso-testo);
}

/* Spenta resta in elenco apposta: quasi sempre la serie che manca esiste gia'
   ed e' solo spenta, e riaccenderla e' un interruttore invece di un doppione
   che il vincolo di unicita' rifiuterebbe. */
.imp-serie--spenta { opacity: 0.55; }

.imp-aggiungi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px dashed var(--panel-border-mid);
    border-radius: 9px;
    background: transparent;
    color: var(--imp-accento-testo);
    font: 600 12px var(--font-ui);
    cursor: pointer;
}

.imp-aggiungi:hover { background: var(--accent-wash); }

.imp-azioni-pannello {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
}

.imp-nota {
    padding-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.imp-nota.is-avviso { color: var(--imp-avviso-testo); }

/* Una nota che spiega tutta l'area, non una riga: sta in fondo, fuori dai
   riquadri, e non occupa i 46px di una riga che non si puo' cliccare. */
.imp-nota--area {
    max-width: 78ch;
    padding: 0 2px;
    margin: 0;
}

/* ── La barra: quante modifiche aspettano, e i due tasti ────────────────── */

/* Sticky, ultima figlia: resta a vista mentre si scorre e si posa in fondo
   quando si arriva alla fine. Non fissa alla finestra, perche' il contenitore
   che scorre e' .main-content, non il documento. */
.imp-barra {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    margin-top: 4px;
    padding: 8px 18px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel-soft);
    box-shadow: var(--elev-2);
}

.imp-barra__stato {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font: 500 12.5px var(--font-ui);
    color: var(--text-secondary);
}

.imp-barra__pallino {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--panel-border-mid);
}

.imp-barra.is-sporca .imp-barra__stato { color: var(--text-secondary); }
.imp-barra.is-sporca .imp-barra__pallino { background: var(--accent); }

.imp-barra__azioni { display: flex; align-items: center; gap: 10px; flex: none; }

/* ── Colore d'accento ──
   Le pastiglie mostrano il colore, non il suo nome: un elenco di parole
   («arancio bruciato», «verde ottanio») si legge ma non si sceglie. Il nome
   resta nel title, per chi passa col mouse e per chi legge con la tastiera. */
.imp-accenti {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.imp-accento {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--tinta);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.imp-accento:hover { transform: scale(1.12); }
/* L'anello sta FUORI dalla pastiglia, non dentro: un bordo interno mangia il
   colore proprio nel momento in cui lo si sta guardando per sceglierlo. */
.imp-accento.is-scelto {
    box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px var(--text-strong);
}

.imp-accento-libero {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px dashed var(--panel-border-mid);
    border-radius: 50%;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    cursor: pointer;
}
.imp-accento-libero:hover { color: var(--text-strong); border-color: var(--text-tertiary); }
/* L'input nativo resta cliccabile ma invisibile: il suo aspetto lo decide il
   sistema operativo, e in mezzo a sette cerchi si vedrebbe che e' un intruso. */
.imp-accento-libero input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.imp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--panel-border-mid);
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font: 600 12.5px var(--font-ui);
    cursor: pointer;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.imp-btn:hover { background: var(--surface-hover-soft); color: var(--text-strong); }

.imp-btn--pieno {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

.imp-btn--pieno:hover { background: var(--accent-strong); color: var(--accent-contrast); }

.imp-btn--rischio { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.imp-btn--rischio:hover { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }

.imp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Il contatore della pastiglia di sezione sta in style-core.css accanto a
   .pill-tab: lo usano tre moduli, e qui si vestiva coi token --imp-*, che sono
   dichiarati su `.imp-pagina` mentre la pastiglia vive in topbar. */

/* ── Wizard di primo accesso ────────────────────────────────────────────── */

.imp-wizard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-border-mid);
    border-radius: var(--radius-card);
    background: var(--panel-mid);
    overflow: hidden;
}

.imp-wizard__testa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

.imp-wizard__badge {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-wash);
    color: var(--imp-accento-testo);
    font: 700 10px var(--imp-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex: none;
}

/* min-width:0 e non auto: un flex:1 non scende sotto la larghezza intrinseca
   del suo contenuto, e con un titolo lungo — «Tempi di consegna dei fornitori»,
   non piu' quello corto del tenant — spingeva fuori dal pannello il bottone di
   uscita. Con lo zero il titolo va a capo e non esce piu' niente. */
.imp-wizard__titolo { flex: 1 1 auto; min-width: 0; font: 700 15px var(--font-ui); }

.imp-wizard__salta {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 500 12px var(--font-ui);
    cursor: pointer;
    text-decoration: underline;
}

.imp-wizard__salta:hover { color: var(--text-secondary); }

.imp-passi {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--card-border);
}

.imp-passo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-left: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.imp-passo:first-child { border-left: 0; }

.imp-passo__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--panel-soft);
    color: var(--text-secondary);
    font: 700 11px var(--imp-mono);
}

.imp-passo__testo { display: flex; flex-direction: column; gap: 2px; }
.imp-passo__nome { font: 600 12.5px var(--font-ui); }
.imp-passo__meta { font: 400 11px var(--font-ui); color: var(--text-secondary); }

.imp-passo.is-attivo { color: var(--text-strong); }
.imp-passo.is-attivo .imp-passo__n { background: var(--accent); color: var(--accent-contrast); }

.imp-wizard__corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.imp-wizard__domanda { font: 700 14px var(--font-ui); }
.imp-wizard__aiuto { font: 400 12.5px var(--font-ui); line-height: 1.5; color: var(--text-secondary); }

.imp-preset-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.imp-preset {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--panel-bg);
    text-align: left;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s;
}

.imp-preset:hover { border-color: var(--panel-border-mid); }

.imp-preset.is-scelto {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.imp-preset__nome {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 13px var(--font-ui);
    color: var(--text-strong);
}

.imp-preset__pallino {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--panel-border-mid);
}

.imp-preset.is-scelto .imp-preset__pallino { background: var(--accent); }
.imp-preset__desc { font: 400 12px var(--font-ui); line-height: 1.45; color: var(--text-secondary); }
.imp-preset__meta { font: 500 11px var(--imp-mono); color: var(--text-secondary); }
.imp-preset.is-scelto .imp-preset__meta { color: var(--imp-accento-testo); }

.imp-wizard__avviso {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.imp-wizard__avviso strong { color: var(--imp-avviso-testo); }
.imp-wizard__azioni { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Sotto i 1000px l'aiuto va a capo sotto l'etichetta ─────────────────── */

@media (max-width: 1000px) {
    .imp-riga__testo { flex-direction: column; align-items: flex-start; gap: 2px; }
    .imp-riga__aiuto { white-space: normal; }
    .imp-tabella { --imp-cols: 1fr 1fr 92px; }
    .imp-tabella--due { --imp-cols: 1fr 1.2fr; }
}

/* ============================================================
   TELEFONO — sotto i 768px, sui token --pr-* di Atelier
   ============================================================ */

@media (max-width: 768px) {
    /* Il dock galleggia a 18px dal fondo ed e' alto una cinquantina: la barra
       si mette sopra di lui, e il contenitore fa spazio a tutti e due. */
    body.page-impostazioni #contenitore-dati {
        padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }

    .imp-pagina {
        gap: 18px;
        padding-bottom: 0;
        font-family: var(--pr-font, var(--font-ui));
        color: var(--pr-ink, var(--text-strong));
    }

    .imp-testata { flex-direction: column; align-items: stretch; gap: 10px; }
    .imp-testata__azioni { justify-content: space-between; }
    .imp-cerca { flex: 1 1 auto; }
    .imp-cerca input { width: 100%; }

    .imp-gruppo__titolo {
        font-size: 11px;
        letter-spacing: var(--pr-ls-micro, 0.08em);
        text-transform: uppercase;
        color: var(--pr-text-2, var(--text-secondary));
    }

    .imp-gruppo__corpo {
        border-color: var(--pr-line, var(--panel-border));
        background: var(--pr-surface, var(--panel-mid));
    }

    .imp-riga {
        min-height: 54px;
        padding: 10px 14px;
        border-color: var(--pr-line, var(--card-border));
    }

    /* Niente flex-wrap: il wrap decide prima di restringere, quindi bastava un
       aiuto un po' lungo per spedire il controllo su una riga tutta sua e far
       diventare 112px una riga da 54. Scendono sotto solo i controlli larghi -
       un campo o un segmentato - e quelli lo dichiarano. */
    .imp-riga:has(.imp-riga__controllo .imp-campo),
    .imp-riga--impilata {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .imp-riga:has(.imp-riga__controllo .imp-campo) .imp-riga__controllo,
    .imp-riga--impilata .imp-riga__controllo { width: 100%; }

    .imp-riga__testo { flex-direction: column; align-items: flex-start; gap: 2px; }
    .imp-riga__label { font-size: 13.5px; color: var(--pr-ink, var(--text-strong)); }
    .imp-riga__aiuto { font-size: 11.5px; white-space: normal; color: var(--pr-text-2, var(--text-secondary)); }

    /* Il controllo largo scende sotto, a tutta riga: sul telefono un
       segmentato o un campo accanto all'etichetta lascia due colonne da
       nulla e taglia via il testo. */
    .imp-riga__controllo { min-height: var(--touch-min); }
    .imp-riga--impilata .imp-seg { width: 100%; }
    .imp-riga--impilata .imp-seg__voce { flex: 1 1 0; text-align: center; }
    .imp-riga .imp-campo { width: 100%; max-width: none; }
    .imp-riga .imp-campo--stretto { width: 110px; }

    /* La griglia a quattro colonne diventa "COLONNA → campo". */
    .imp-tabella__testa { display: none; }
    .imp-tabella__riga {
        grid-template-columns: 1fr auto;
        gap: 10px;
        min-height: 46px;
        padding: 8px 14px;
    }
    .imp-barra {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 39;
        min-height: 62px;
        margin: 0;
        padding: 10px 14px;
        border-color: var(--pr-line, var(--panel-border));
        border-radius: var(--pr-r-card, var(--radius-card));
        background: var(--pr-surface, var(--panel-soft));
        box-shadow: var(--pr-shadow-dock, var(--elev-3));
    }

    .imp-barra__stato { font-size: 12px; }
    .imp-btn { height: var(--touch-min); }

    .imp-passi { flex-wrap: wrap; }
    .imp-passo { flex: 1 1 45%; border-left: 0; padding: 10px 12px; }
    .imp-preset-griglia { grid-template-columns: 1fr; }
}

/* ── Le procedure guidate ──────────────────────────────────────
   Il guscio e' .imp-wizard, lo stesso di Impostazioni: qui c'e'
   solo cio' che serve a sovrapporlo alla pagina e a vestire il
   corpo di un passo. Un secondo wizard avrebbe voluto dire un
   secondo vestito da tenere allineato al primo. */

.sis-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg-base) 72%, transparent);
    /* Niente backdrop-filter: diventerebbe il blocco contenitore di
       qualunque position:fixed dentro, e il pannello si ritroverebbe
       ritagliato invece che sovrapposto. */
}

.sis-corpo {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
}

.sis-attesa {
    padding: 28px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg);
    text-align: center;
    color: var(--text-secondary);
}

/* I numeri di QUESTO fornitore: quanti ordini ha adesso e quanti
   gia' scaduti. Sono il motivo per cui vale la pena compilare, e
   stanno sopra il campo, non in fondo alla schermata. */
.sis-fatti {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-strong);
}

.sis-fatti strong { font-weight: 700; }

.sis-nota {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* La proposta ricavata dallo storico. Si vede e non si scrive da
   sola: il campo resta vuoto finche' non si preme «Usa». Un numero
   gia' scritto lo si salva senza guardarlo, ed e' cosi' che 75
   fornitori si sono ritrovati un 7 che nessuno aveva scelto. */
.sis-proposta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-strong) 4%, var(--panel-bg));
}

.sis-proposta__val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.sis-proposta__txt {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.sis-campo {
    display: block;
    margin-bottom: 4px;
}

.sis-campo__lbl {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sis-campo .input-field-modern { width: 100%; }

/* Il fornitore che non sta in anagrafica: non gli si mostra un
   campo, perche' quel numero non avrebbe dove essere scritto. */
.sis-assente {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--warning);
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning) 6%, var(--panel-bg));
}

.sis-assente__tit {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.sis-assente__txt {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* I modi di pagare che ricorrono. Ognuno dice, sotto, cosa farebbe
   davvero alle uscite di questo fornitore: e' l'unico modo perche'
   chi sceglie un evento che PROD non sa ancora datare non torni al
   piano di cassa e lo trovi uguale a prima. */
.sis-preset-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

.sis-preset {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-bg);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.sis-preset:hover { border-color: var(--accent); }

.sis-preset.is-scelto {
    border-color: var(--accent);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
}

/* Sceglibile, ma oggi non colloca niente: si smorza invece di
   sparire. Toglierlo nasconderebbe una condizione che il fornitore
   ha davvero, e la sceglierebbe qualcun altro senza saperlo. */
.sis-preset.is-muto .sis-preset__eff { color: var(--warning); }

.sis-preset__lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.sis-preset__eff {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Spinge Salta e Salva a destra, lasciando Indietro a sinistra. */
.sis-spazio { flex: 1; }

@media (max-width: 640px) {
    .sis-overlay { padding: 12px; align-items: flex-start; }
    .sis-proposta { gap: 8px; }
    .sis-proposta__txt { flex-basis: 100%; }
    .sis-preset-lista { grid-template-columns: 1fr; }
}

/* Cosa manca a una scheda, dentro la procedura guidata: la cosa
   e il perché, una riga per lacuna. Il filo rosso a sinistra
   distingue ciò che fa scartare la fattura da ciò che la peggiora
   soltanto. */
.sis-manca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--warning);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-strong) 4%, var(--panel-bg));
}

.sis-manca.is-bloccante { border-left-color: var(--error); }

.sis-manca__cosa {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.sis-manca__perche {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Il foglio della firma email. La firma era un riquadro di solo testo e
   arrivava a destinazione senza grassetti, senza collegamenti e col logo in
   fondo invece che al suo posto; qui si incolla com'e' nel programma di posta,
   e cio' che si vede e' cio' che parte. Il foglio non ha altezza fissa: una
   firma con l'avviso privacy e' lunga il doppio di una con tre righe, e un
   tetto che va bene a una taglia l'altra. */
.imp-firma {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--panel-border-mid);
    border-radius: 8px;
    background: var(--panel-soft);
    overflow: hidden;
}

.imp-firma__barra {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-mid);
}

.imp-firma__cmd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.imp-firma__cmd:hover {
    background: var(--panel-bg);
    color: var(--text-strong);
}

.imp-firma__foglio {
    min-height: 96px;
    max-height: 320px;
    padding: 10px 12px;
    overflow: auto;
    color: var(--text-strong);
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.imp-firma__foglio:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.imp-firma__foglio img { max-width: 100%; height: auto; }

/* La firma incollata porta con se' le larghezze del programma da cui viene:
   una tabella pensata per una finestra da mille pixel sfonderebbe il riquadro.
   Scorre dentro il suo spazio invece di allargare la pagina. */
.imp-firma__foglio table {
    max-width: 100%;
    table-layout: auto;
}