/* Posta in arrivo: un banco di lavoro, non una pagina di contenuti.
 *
 * Stessi materiali della chat - superficie bianca su tela chiara, filo di bordo,
 * raggio unico - perche' sono due stanze della stessa applicazione e chi passa
 * dall'una all'altra non deve accorgersi di cambiare prodotto.
 *
 * Gli stati della posta e la scala di confidenza hanno etichette esplicite:
 * il colore aiuta a orientarsi, ma non sostituisce il significato. */

.posta-page {
    font-size: .95rem;

    --pt-primario: #06c;
    --pt-scuro: #17324d;
    --pt-tenue: #5b6f82;
    --pt-linea: #dfe4ea;
    --pt-linea-tenue: #eef1f5;
    --pt-superficie: #fff;
    --pt-tela: #f7f9fc;
    --pt-selezione: #e6f0fa;

    /* Attesa e livelli semantici della confidenza. */
    --pt-conf-bassa: #b32b21;
    --pt-conf-media: #895900;
    --pt-conf-alta: #007a52;
    --pt-attesa: #a66300;
    --pt-attesa-tenue: #fdf3e0;

    --pt-raggio: 14px;
    --pt-cima: 232px; /* altezza di intestazione e barra: la sovrascrive posta.js */
}

/* Bootstrap Italia fissa `p, ul, ol, dl` a 1rem, e a 1.125rem sopra i 576px: una
   regola sull'elemento vince sull'ereditarieta', quindi un paragrafo senza classe
   dentro un pannello ne ignora la misura e resta a 18px. Qui torna a ereditare. */
.posta-page .riquadro p:not([class]),
.posta-page .posta-anteprima-corpo p:not([class]),
.posta-page .posta-vuoto {
    font-size: inherit;
}

/* Numeri che stanno in colonna: orari, conteggi, confidenze. Senza cifre di
   larghezza fissa una colonna di ore balla di riga in riga. */
.posta-page .num {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- barra ----- */

.posta-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--pt-linea);
    margin-bottom: 1rem;
}

.posta-barra h1 {
    font-size: 1.35rem;
    margin: 0;
    color: var(--pt-scuro);
}

.posta-barra .casella {
    color: var(--pt-tenue);
    font-size: .875rem;
}

.posta-barra .azioni {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* Il numero che apre la pagina: quanti aspettano una persona. Se e' zero non
   deve gridare, quindi il colore arriva solo quando c'e' davvero qualcosa. */
.posta-attesa-conteggio {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .875rem;
    color: var(--pt-tenue);
}

.posta-attesa-conteggio strong {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--pt-scuro);
}

.posta-attesa-conteggio.pieno strong {
    color: var(--pt-attesa);
}

/* Nota tecnica richiudibile: sta dopo il lavoro, non davanti. */
.posta-nota summary {
    cursor: pointer;
    font-size: .8125rem;
    color: var(--pt-tenue);
    padding: .25rem 0;
}

.posta-nota summary:hover {
    color: var(--pt-primario);
}

.posta-nota p {
    font-size: .8125rem;
    color: var(--pt-tenue);
    max-width: 70ch;
    margin: .5rem 0 0;
}

/* ------------------------------------------------------------- il banco ----- */

.posta-banco {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1.05fr) minmax(0, 1.35fr);
    gap: 1rem;
    height: calc(100dvh - var(--pt-cima));
    min-height: 28rem;
}

.posta-colonna {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--pt-superficie);
    border: 1px solid var(--pt-linea);
    border-radius: var(--pt-raggio);
    overflow: hidden;
}

.posta-colonna.trasparente {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.posta-scorre {
    overflow-y: auto;
    min-height: 0;
    flex: 1;
    overscroll-behavior: contain;
}

/* ------------------------------------------------------------- cartelle ----- */

.posta-gruppo + .posta-gruppo {
    margin-top: 1.25rem;
}

.posta-gruppo > h2 {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pt-tenue);
    margin: 0 0 .35rem .25rem;
}

.posta-cartella {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    color: var(--pt-scuro);
    text-decoration: none;
    line-height: 1.3;
}

.posta-cartella:hover {
    background: var(--pt-linea-tenue);
    text-decoration: none;
    color: var(--pt-scuro);
}

.posta-cartella.attiva {
    background: var(--pt-selezione);
    font-weight: 600;
}

.posta-cartella .conteggio {
    color: var(--pt-tenue);
    font-size: .8125rem;
    flex-shrink: 0;
}

.posta-cartella.attesa .conteggio {
    color: var(--pt-attesa);
    font-weight: 700;
}

.posta-cartella.attesa.vuota .conteggio {
    color: var(--pt-tenue);
    font-weight: 400;
}

/* ---------------------------------------------------------- elenco mail ----- */

.posta-riga {
    display: block;
    padding: .7rem .85rem .7rem .7rem;
    border-bottom: 1px solid var(--pt-linea-tenue);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
}

.posta-riga:hover {
    background: var(--pt-tela);
    color: inherit;
    text-decoration: none;
}

.posta-riga.aperta {
    background: var(--pt-selezione);
}

/* La corsia: lo stato e' una proprieta' della riga intera, e si legge scorrendo
   la colonna invece di leggere una pillola per volta. */
.corsia-attesa { border-left-color: var(--pt-attesa); }
.corsia-assegnata { border-left-color: #b3c7dc; }
.corsia-lavorazione { border-left-color: var(--pt-primario); }
.corsia-chiusa { border-left-color: transparent; }

.posta-riga.corsia-chiusa .posta-oggetto,
.posta-riga.corsia-chiusa .posta-mittente {
    color: var(--pt-tenue);
}

.posta-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.posta-mittente {
    display: block;
    min-width: 0;
    font-weight: 600;
    color: var(--pt-scuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.posta-quando {
    font-size: .75rem;
    color: var(--pt-tenue);
    flex-shrink: 0;
}

.posta-oggetto {
    display: block;
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.posta-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--pt-tenue);
    min-width: 0;
}

.posta-piede .ufficio {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.posta-piede .attesa {
    color: var(--pt-attesa);
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------- confidenza --- */

/* Fasce descrittive fisse; la tacca segue invece la soglia configurata.
   Colore, numero ed etichetta comunicano insieme il livello. */
.misura.bassa, .confidenza-legenda .bassa { --conf-colore: var(--pt-conf-bassa); }
.misura.media, .confidenza-legenda .media { --conf-colore: var(--pt-conf-media); }
.misura.alta, .confidenza-legenda .alta { --conf-colore: var(--pt-conf-alta); }

.confidenza-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-bottom: .85rem;
    font-size: .75rem;
    color: var(--pt-scuro);
}

.confidenza-legenda :is(.bassa, .media, .alta) {
    color: var(--conf-colore);
    border-bottom: 3px solid var(--conf-colore);
    font-weight: 600;
}

.confidenza-spiegazione { flex-basis: 100%; color: var(--pt-tenue); }

.misura {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.misura .barra {
    position: relative;
    width: 3.5rem;
    height: 7px;
    border-radius: 3px;
    background: #dfe4ea;
    overflow: visible;
}

.misura .livello {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    background: var(--conf-colore);
}

.misura .soglia {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--pt-scuro);
    box-shadow: 0 0 0 1px var(--pt-superficie);
}

.misura .valore {
    font-size: .75rem;
    color: var(--conf-colore);
    font-weight: 600;
}

.misura-etichetta { font-size: .75rem; color: var(--conf-colore); font-weight: 600; }
.misura.grande .barra { width: 7rem; height: 9px; }
.misura.grande :is(.valore, .misura-etichetta) { font-size: .875rem; }

/* ------------------------------------------------------------- anteprima ---- */

.posta-anteprima-testa {
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--pt-linea);
}

.posta-anteprima-testa h2 {
    font-size: 1.15rem;
    margin: 0 0 .2rem;
    color: var(--pt-scuro);
}

.posta-anteprima-testa .mittente {
    font-size: .8125rem;
    color: var(--pt-tenue);
    margin: 0;
}

/* Il verdetto dell'analisi: l'unica cosa che il lettore deve poter contestare. */
.posta-verdetto {
    padding: .75rem 1.25rem;
    background: var(--pt-tela);
    border-bottom: 1px solid var(--pt-linea);
}

.posta-verdetto.in-attesa {
    background: var(--pt-attesa-tenue);
}

.posta-verdetto .ufficio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    color: var(--pt-scuro);
}

.posta-verdetto .motivo {
    margin: .3rem 0 0;
    font-size: .8125rem;
    color: var(--pt-tenue);
    max-width: 68ch;
}

.posta-corpo {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.6;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    max-width: 72ch;
}

.posta-anteprima-corpo {
    padding: 1rem 1.25rem;
}

.posta-anteprima-azioni {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--pt-linea);
    background: var(--pt-superficie);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.posta-vuoto {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--pt-tenue);
    max-width: 40ch;
    margin: 0 auto;
}

/* --------------------------------------------------------------- allegati --- */

.posta-allegati {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.posta-allegati li {
    border: 1px solid var(--pt-linea);
    border-radius: 8px;
    padding: .2rem .55rem;
    font-size: .8125rem;
    color: var(--pt-tenue);
}

.posta-allegati li strong {
    color: var(--pt-scuro);
    font-weight: 600;
}

/* --------------------------------------------------------------- scrivania -- */

.posta-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

.posta-filtro {
    border: 1px solid var(--pt-linea);
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .8125rem;
    color: var(--pt-scuro);
    text-decoration: none;
    background: var(--pt-superficie);
}

.posta-filtro:hover {
    border-color: var(--pt-primario);
    color: var(--pt-primario);
    text-decoration: none;
}

.posta-filtro.attivo {
    background: var(--pt-scuro);
    border-color: var(--pt-scuro);
    color: #fff;
}

.posta-filtro .conteggio {
    opacity: .7;
    margin-left: .3rem;
}

/* Una pratica della coda: griglia fissa, cosi' le colonne si allineano fra righe
   e niente puo' sfondare in orizzontale come faceva la tabella. */
.pratica {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0 1rem;
    align-items: start;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--pt-linea-tenue);
    border-left: 3px solid transparent;
}

.pratica:last-child { border-bottom: 0; }

.pratica .quando {
    font-size: .8125rem;
    color: var(--pt-tenue);
    padding-top: .1rem;
}

.pratica .quando span {
    display: block;
}

.pratica .quando .attesa-lunga {
    color: var(--pt-attesa);
    font-weight: 600;
}

.pratica .oggetto {
    font-weight: 600;
    color: var(--pt-scuro);
    text-decoration: none;
}

.pratica .oggetto:hover { text-decoration: underline; }

.pratica .mittente,
.pratica .sintesi {
    font-size: .8125rem;
    color: var(--pt-tenue);
    margin: .15rem 0 0;
    max-width: 78ch;
}

.pratica .azioni {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
}

.pratica .azioni form { display: inline; }

/* Azione secondaria: un comando, non un bottone. Tre bottoni per riga facevano
   un muro blu in cui non si distingueva piu' quale fosse il passo successivo. */
.azione-quieta {
    background: none;
    border: 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--pt-primario);
    text-decoration: underline;
    cursor: pointer;
}

.azione-quieta:hover { color: var(--pt-scuro); }

/* Comandi che tolgono qualcosa. Restano comandi, non bottoni: l'unica differenza
   e' che si vedono per quello che sono. */
.azione-quieta.pericolo { color: #d92828; }
.azione-quieta.pericolo:hover { color: #a31515; }

/* Bootstrap Italia mette il testo di aiuto in linea accanto al campo: in una
   colonna stretta finisce di fianco all'input invece che sotto. */
.riquadro .form-group .form-text {
    display: block;
    width: 100%;
    margin-top: .25rem;
}

.pratica .stato-testo {
    font-size: .75rem;
    color: var(--pt-tenue);
}

/* ------------------------------------------------------------- dettaglio ---- */

.posta-dettaglio {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.riquadro {
    background: var(--pt-superficie);
    border: 1px solid var(--pt-linea);
    border-radius: var(--pt-raggio);
    padding: 1.25rem;
}

.riquadro + .riquadro { margin-top: 1rem; }

.riquadro > h2 {
    font-size: .95rem;
    color: var(--pt-scuro);
    margin: 0 0 .75rem;
}

/* Il verdetto in testa a un riquadro: fascia a tutta larghezza, non un blocco
   rientrato. E' la prima cosa che si guarda aprendo il messaggio. */
.riquadro > .posta-verdetto.nel-riquadro {
    margin: -.25rem -1.25rem 1rem;
    border-top: 1px solid var(--pt-linea);
}

.riquadro-sezione {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--pt-linea);
}

/* Dati riconosciuti: coppie, non una tabella. Erano il caso in cui una tabella
   dentro una colonna stretta sfondava e tagliava le parole. */
.dati-letti {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    gap: .3rem .75rem;
    font-size: .875rem;
    margin: 0;
}

.dati-letti dt {
    color: var(--pt-tenue);
    font-weight: 400;
}

.dati-letti dd {
    margin: 0;
    color: var(--pt-scuro);
    word-break: break-word;
}

/* La storia: una fila verticale, non una tabella con cinque colonne che non ci
   stanno. Il filo a sinistra tiene insieme i passaggi. */
.storia {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--pt-linea-tenue);
}

.storia li {
    position: relative;
    padding: 0 0 1rem;
}

.storia li:last-child { padding-bottom: 0; }

.storia li::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: .45rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pt-linea);
}

.storia li.a-mano::before { background: var(--pt-attesa); }

.storia .passo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

.storia .azione {
    font-weight: 600;
    color: var(--pt-scuro);
}

.storia .chi,
.storia .quando {
    font-size: .8125rem;
    color: var(--pt-tenue);
}

.storia .motivo {
    margin: .15rem 0 0;
    font-size: .8125rem;
    color: var(--pt-tenue);
    max-width: 70ch;
}

.storia .spostamento {
    font-size: .8125rem;
    color: var(--pt-tenue);
}

/* ------------------------------------------------------------- simulatore --- */

.posta-compositore {
    background: var(--pt-superficie);
    border: 1px solid var(--pt-linea);
    border-radius: var(--pt-raggio);
    overflow: hidden;
}

.compositore-intestazioni {
    padding: .5rem 1.25rem;
    border-bottom: 1px solid var(--pt-linea);
    background: var(--pt-tela);
    font-size: .875rem;
    color: var(--pt-tenue);
}

.compositore-corpo { padding: 1.75rem 1.25rem 1.25rem; }

.compositore-corpo input,
.compositore-corpo textarea {
    width: 100%;
}

.compositore-corpo textarea.form-control {
    min-height: 16rem;
    line-height: 1.6;
}

.compositore-piede {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--pt-linea);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scenario {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--pt-superficie);
    border: 0;
    border-bottom: 1px solid var(--pt-linea-tenue);
    padding: .7rem .9rem;
    cursor: pointer;
}

.scenario:last-child { border-bottom: 0; }

.scenario:hover { background: var(--pt-tela); }

.scenario strong {
    display: block;
    color: var(--pt-scuro);
    font-size: .95rem;
}

.scenario span {
    font-size: .8125rem;
    color: var(--pt-tenue);
}

.scenario.difficile strong::after {
    content: " — caso difficile";
    color: var(--pt-attesa);
    font-weight: 400;
    font-size: .8125rem;
}

/* ------------------------------------------------------------------ varie --- */

.posta-avviso {
    position: sticky;
    top: .5rem;
    z-index: 5;
}

@media (max-width: 1199.98px) {
    .posta-banco {
        grid-template-columns: 13rem minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    /* Sotto i 1200 l'anteprima non ha piu' una larghezza leggibile: si apre la
       pagina di dettaglio, che e' lo stesso contenuto senza compressione. */
    .posta-banco .posta-anteprima { display: none; }
}

@media (max-width: 767.98px) {
    .posta-banco {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .posta-banco .posta-indice { display: none; }
    .posta-scorre { overflow-y: visible; }
    .posta-dettaglio { grid-template-columns: minmax(0, 1fr); }
    .pratica { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
    .pratica .azioni { padding-top: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .posta-page * { transition: none !important; }
}