/* Pagina di revisione: pensata prima di tutto per lo schermo dell'iPhone. */

:root {
    --sfondo: #f6f7f9;
    --carta: #ffffff;
    --testo: #1d2330;
    --tenue: #5b6475;
    --bordo: #d9dde4;
    --attenzione: #b42318;
    --errore-sfondo: #fde8e7;
    --avviso: #9a6700;
    --avviso-sfondo: #fff4d6;
    --info: #0b57d0;
    --info-sfondo: #e8f0fe;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sfondo: #14171c;
        --carta: #1d2128;
        --testo: #e6e9ef;
        --tenue: #9aa3b2;
        --bordo: #343a45;
        --attenzione: #ff7b72;
        --errore-sfondo: #3d1d1c;
        --avviso: #e3b341;
        --avviso-sfondo: #3a2e12;
        --info: #8ab4f8;
        --info-sfondo: #1c2a40;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 900px; margin: 0 auto; padding: 12px 16px 48px; }

.testata { background: var(--carta); border-bottom: 1px solid var(--bordo); padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testata-titolo { color: var(--testo); font-weight: 600; text-decoration: none; }
.testata-esci { display: flex; align-items: center; gap: 10px; margin: 0; }
.testata-utente { color: var(--tenue); font-size: 0.92em; }
.pulsante-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--info); font: inherit; font-weight: 600; cursor: pointer; }
.modulo-login { max-width: 420px; }

.conteggio, .vuoto, .nota { color: var(--tenue); }

/* Account: colore ED etichetta, sempre insieme. */
.account {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border-left: 6px solid var(--colore-account, var(--tenue));
    background: color-mix(in srgb, var(--colore-account, var(--tenue)) 15%, var(--carta));
    font-weight: 600;
    font-size: 0.9em;
}
.account-sconosciuto { --colore-account: var(--attenzione); color: var(--attenzione); }

.elenco { list-style: none; margin: 0; padding: 0; }
.voce {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.voce-riga { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.attesa, .dettagli { color: var(--tenue); font-size: 0.9em; }
.destinatari { margin-top: 6px; overflow-wrap: anywhere; }

.sezione {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 10px;
}
.sezione h2 { margin: 0 0 4px; font-size: 1.05em; }

.campi { margin: 0; }
.campi dt { margin-top: 10px; color: var(--tenue); font-size: 0.85em; }
.campi dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.indirizzo { margin-left: 6px; }
.lista-indirizzi { margin: 0; padding-left: 1.2em; }

.sorgente {
    max-height: 70vh;
    overflow: auto;
    font-size: 0.8em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.errore { color: var(--attenzione); font-weight: 600; }
.assente { color: var(--tenue); font-style: italic; }

.oggetto { margin-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.titolo-messaggio { margin: 4px 0 14px; font-size: 1.25em; overflow-wrap: anywhere; }
.lista-indirizzi .nome { font-weight: 600; }
.lista-indirizzi .indirizzo { margin-left: 0; color: var(--tenue); }

/* Corpo HTML: iframe sandbox con sfondo chiaro fisso (l'HTML delle email è pensato per il bianco). */
.corpo-html {
    display: block;
    width: 100%;
    height: 60vh;
    min-height: 260px;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: #fff;
}
/* Con dettaglio.js l'altezza segue il contenuto. */
.corpo-html.adattato { min-height: 0; }
.corpo-testo { white-space: pre-wrap; overflow-wrap: anywhere; }

details { margin-top: 10px; }
summary { cursor: pointer; color: var(--tenue); }

.tabella { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.tabella th, .tabella td { padding: 4px 6px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; overflow-wrap: anywhere; }

.allegati { list-style: none; margin: 0; padding: 0; }
.allegati li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.allegati li:last-child { border-bottom: 0; }
.allegati a { overflow-wrap: anywhere; }
.anteprima { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--bordo); border-radius: 4px; background: #fff; }

.campi-tecnici { font-size: 0.85em; }

@media (min-width: 700px) {
    .campi { display: grid; grid-template-columns: 11em 1fr; gap: 8px 16px; }
    .campi dt, .campi dd { margin: 0; }
}

/* Controlli automatici */
.lista-avvisi { list-style: none; margin: 0; padding: 0; }
.avviso { margin-top: 8px; padding: 8px 10px; border-left: 5px solid; border-radius: 6px; }
.avviso-titolo { font-weight: 600; }
.avviso-dettaglio { font-size: 0.92em; }
.avviso-elementi { margin: 4px 0 0; padding-left: 1.2em; font-size: 0.92em; overflow-wrap: anywhere; }
.avvisi-ok p { margin: 0; }
.livello-errore { border-color: var(--attenzione); background: var(--errore-sfondo); }
.livello-avviso { border-color: var(--avviso); background: var(--avviso-sfondo); }
.livello-info { border-color: var(--info); background: var(--info-sfondo); }

.badge-avvisi { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; }
.badge { padding: 1px 8px; border-left: 4px solid; border-radius: 4px; font-size: 0.8em; }
.badge.livello-errore { color: var(--attenzione); }
.badge.livello-avviso { color: var(--avviso); }
.badge.livello-info { color: var(--info); }
.avviso-altri { margin-top: 2px; font-size: 0.92em; }

/* Azioni */
.pulsante {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.pulsante-invia { background: #1a7f37; color: #fff; }
.pulsante-scarta { background: var(--errore-sfondo); color: var(--attenzione); border: 1px solid var(--attenzione); }
.pulsante-secondario { background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); }

.barra-azioni {
    position: sticky; bottom: 0; z-index: 1;
    /* Quattro pulsanti: due righe sul telefono, una sola da 600 px in su. */
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch;
    margin: 16px -16px -48px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--carta); border-top: 1px solid var(--bordo);
}
.barra-azioni .pulsante { padding: 0 10px; text-align: center; }
.barra-azioni > .nota { grid-column: 1 / -1; }
@media (min-width: 600px) {
    .barra-azioni { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.barra-conferma { display: flex; gap: 10px; margin-top: 16px; }
.barra-conferma .pulsante:first-of-type { flex: 2; }
.barra-conferma .pulsante-secondario { flex: 1; }
.riepilogo-invia { border-left: 5px solid #1a7f37; }
.riepilogo-scarta { border-left: 5px solid var(--attenzione); }
.etichetta-ccn { padding: 0 6px; border-radius: 4px; background: var(--info-sfondo); color: var(--info); font-size: 0.8em; font-weight: 600; }

.flash { padding: 10px 12px; border-radius: 8px; border-left: 5px solid; }
.flash-ok { border-color: #1a7f37; background: #e6f4ea; color: #0f5323; }
.flash-avviso { border-color: var(--avviso); background: var(--avviso-sfondo); }
.flash-errore { border-color: var(--attenzione); background: var(--errore-sfondo); color: var(--attenzione); }
@media (prefers-color-scheme: dark) {
    .flash-ok { background: #12301b; color: #7ee2a0; }
}

/* Modifica */
.flash-info { border-color: var(--info); background: var(--info-sfondo); }
.badge-modificato { display: inline-block; margin-top: 6px; }
.modulo label, .modulo legend { display: block; margin-top: 14px; font-weight: 600; }
.modulo input[type=text], .modulo input[type=password], .modulo input[type=number], .modulo textarea, .modulo select {
    width: 100%; padding: 10px; font: inherit; color: var(--testo); background: var(--carta);
    border: 1px solid var(--bordo); border-radius: 8px;
}
.modulo textarea { resize: vertical; }
.modulo [aria-invalid=true] { border-color: var(--attenzione); }
.modulo fieldset { margin-top: 14px; border: 1px solid var(--bordo); border-radius: 8px; }
.modulo .scelta { display: flex; gap: 8px; align-items: center; font-weight: normal; margin-top: 6px; overflow-wrap: anywhere; }
.errore-campo { margin: 4px 0 0; color: var(--attenzione); font-size: 0.92em; }
.editor-corpo { margin-top: 6px; min-height: 300px; }

/* Impostazioni (S6c) */
.testata-impostazioni { color: var(--info); font-weight: 600; text-decoration: none; }
.indice-impostazioni { margin: 8px 0 4px; font-size: 0.92em; line-height: 2; }
.sezione h3 { margin: 18px 0 0; font-size: 1em; }
.lista-dispositivi { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-dispositivi li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.modulo-account { border-top: 1px solid var(--bordo); padding-top: 6px; }
.riga-account { display: flex; gap: 12px; align-items: flex-end; }
.riga-account label:first-child { flex: 1; }
.modulo input[type=color] { display: block; width: 64px; height: 44px; padding: 2px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); }
.qr { width: 240px; max-width: 100%; margin: 8px auto; background: #fff; padding: 8px; border-radius: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.segreto { overflow-wrap: anywhere; font-size: 1.05em; }
.codici-riserva { columns: 2; padding-left: 20px; font-size: 1.15em; line-height: 1.9; }
.passi { padding-left: 20px; }

/* Rifinitura iPhone (S6b) */
.striscia-account {
    position: sticky; top: 0; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    margin: -12px -16px 10px; padding: 8px 16px;
    background: var(--carta); border-bottom: 1px solid var(--bordo);
    font-size: 0.92em;
}
.striscia-indirizzo { overflow-wrap: anywhere; }
.striscia-destinatari { color: var(--tenue); white-space: nowrap; }
.richiudibile { margin-top: 0; }
.richiudibile > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--testo); list-style: none; min-height: 32px; }
.richiudibile > summary::-webkit-details-marker { display: none; }
.richiudibile > summary::before { content: "▸"; color: var(--tenue); width: 1em; }
.richiudibile[open] > summary::before { content: "▾"; }
.richiudibile > summary h2 { display: inline; margin: 0; }
.richiudibile > summary .nota { font-size: 0.85em; }

/* Invio automatico (S8): conto alla rovescia e Trattieni */
.auto-stato { margin-top: 6px; font-size: 0.85em; color: var(--info); }
.auto-stato.auto-trattenuto, .auto-box.auto-trattenuto { color: var(--avviso); }
.auto-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--info); background: var(--info-sfondo); border-radius: 4px; }
.auto-box.auto-trattenuto { border-color: var(--avviso); }
.auto-box p { margin: 0; flex: 1 1 14em; }
.auto-box form { margin: 0; }