/* Gestione Posta — foglio di stile */

:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#111827;
  --ink-2:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --brand:#15803d;
  --brand-scuro:#166534;
  --focus:#a7e0bb;
  --nonletta:#f3fbf5;
  --info-ink:#14532d;
  --info-bordo:#bbf7d0;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --riga-y:.8rem;
  --brand-ink:#ffffff;
  --side-bg:#10231a;
  --side-ink:#c2d6c8;
  --side-ink-2:#8aa694;
  --side-on:#1d6340;
  --ok:#047857;
  --ok-bg:#ecfdf5;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --err:#b91c1c;
  --err-bg:#fef2f2;
  --info-bg:#effaf2;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  /* la colonna cresce insieme al testo: deve stare larga abbastanza
     da non tagliare i nomi delle cartelle e dei settori */
  --side-w:clamp(275px, 17rem, 420px);
}

/* Dimensione dei caratteri.
   La misura vera arriva dal server, scritta direttamente sul tag <html>
   (l'amministratore la sceglie per tutti, ognuno può ritoccarla nel proprio
   profilo). Qui c'è solo il ripiego, se per qualunque motivo mancasse.
   Tutto il resto del foglio è in rem, quindi cambia insieme. */
html{font-size:17px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none !important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0 0 .25rem;letter-spacing:-.01em}
h2{font-size:1.2rem;margin:0 0 .6rem}
h3{font-size:1rem;margin:0 0 .75rem;letter-spacing:.01em}
h4{font-size:.85rem;margin:1rem 0 .25rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#f3f4f6;padding:.1em .35em;border-radius:4px}
.muted{color:var(--muted)}
.small{font-size:.85em}
.nowrap{white-space:nowrap}
.center{text-align:center}
.err{color:var(--err)}

/* ================= impianto: colonna + contenuto ================= */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
@media (min-width:1001px){
  body{background:linear-gradient(90deg,var(--side-bg) 0,var(--side-bg) var(--side-w),var(--bg) var(--side-w))}
}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:1.4rem 1.6rem 5rem;min-width:0}

/* ---------------- colonna di sinistra ---------------- */
.sidebar{
  background:var(--side-bg);color:var(--side-ink);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:.9em .7em 2em;display:flex;flex-direction:column;gap:.2em;
  /* le cartelle restano leggibili senza diventare enormi quando il testo
     dei messaggi viene ingrandito al massimo */
  font-size:clamp(15px, .85rem, 21px)
}
/* Quando le voci non ci stanno tutte, la colonna deve scorrere: senza
   questo le righe si schiacciano una sull'altra e l'indirizzo della PEC
   finisce mezzo nascosto sotto la cartella che segue. */
.sidebar > *{flex:0 0 auto}
.sidebar .brand{
  display:flex;align-items:center;gap:.55em;color:#fff;font-weight:600;
  text-decoration:none;padding:.4em .55em 1.1em;font-size:1.05em
}
.sidebar .brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.55em;background:var(--brand);color:#fff;font-size:1em;flex:0 0 auto}
.brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* il pulsante "Scrivi", in cima alle cartelle */
.side-scrivi{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--brand);color:#fff;font-weight:600;text-decoration:none;
  padding:.6em .8em;border-radius:8px;margin:0 .1em .5em;font-size:1.02em
}
.side-scrivi:hover{background:var(--brand-scuro);color:#fff;text-decoration:none}
.side-scrivi .side-ico{opacity:1}
/* lo stesso pulsante dentro la sezione PEC: un po' di aria sopra, perché
   lì viene dopo le cartelle e non in testa alla colonna */
.side-scrivi-pec{margin-top:.45em}
.side-scrivi.on{background:var(--brand-scuro);color:#fff}

.side-title{
  font-size:.75em;text-transform:uppercase;letter-spacing:.12em;
  color:var(--side-ink-2);padding:1.1em .6em .35em;font-weight:700
}
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-item{
  display:flex;align-items:center;gap:.6em;padding:.5em .6em;border-radius:8px;
  color:var(--side-ink);font-size:1em;text-decoration:none;line-height:1.25
}
.side-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.side-item.on{background:var(--side-on);color:#fff;font-weight:600}
.side-ico{width:1.15em;height:1.15em;flex:0 0 auto;display:grid;place-items:center;opacity:.85}
.side-ico .ico{width:1.15em;height:1.15em;display:block}
.side-item.on .side-ico{opacity:1}
.side-dot{width:.6em;height:.6em;border-radius:50%;background:var(--sc,#64748b);flex:0 0 auto;margin:0 .3em}
.side-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-n{
  font-size:.78em;background:rgba(255,255,255,.12);color:var(--side-ink);
  border-radius:999px;padding:.05em .45em;font-weight:600;flex:0 0 auto;
  font-variant-numeric:tabular-nums
}
.side-n-strong{background:var(--brand);color:#fff}
.side-item.on .side-n{background:rgba(255,255,255,.2);color:#fff}

.side-toggle{
  display:none;background:none;border:0;font-size:1.3rem;color:var(--ink-2);
  cursor:pointer;padding:.2rem .4rem;line-height:1
}

@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);z-index:200;
    transform:translateX(-100%);transition:transform .2s ease;height:100%
  }
  body.side-open .sidebar{transform:translateX(0)}
  body.side-open::after{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150
  }
  .side-toggle{display:block}
  .content{padding:1rem .9rem 4rem}
}

/* ---------------- barra in alto ---------------- */
.topbar{
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1em;padding:.55em 1.4em;min-height:3.4em;
  /* come la colonna: non deve gonfiarsi quando si ingrandisce il testo */
  font-size:clamp(15px, .85rem, 21px)
}
@media (max-width:1000px){.topbar{padding:.5em .9em;gap:.6em}}
.searchbox{flex:1 1 auto;max-width:34em}
.searchbox input{width:100%;padding:.5em .75em;border:1px solid var(--line-2);border-radius:9px;font-size:1em;background:#fff}
.inline-form{display:inline;margin:0}
.scarica-form{flex:0 0 auto;margin:0}
.btn-scarica{display:inline-flex;align-items:center;gap:.4em;padding:.45em .85em;
  border:1px solid var(--brand);border-radius:9px;background:var(--info-bg);color:var(--brand);
  font:inherit;font-size:1em;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-scarica:hover{background:var(--brand);color:#fff}
.btn-scarica[disabled]{opacity:.6;cursor:progress}
.btn-scarica-ico{font-size:1.1em;line-height:1;display:inline-block}
.btn-scarica[disabled] .btn-scarica-ico{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:700px){.btn-scarica-testo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .btn-scarica{padding:.45em .6em}}
.usermenu{display:flex;align-items:center;gap:.7em;font-size:1em;margin-left:auto;flex:0 0 auto;white-space:nowrap}
.user-chip{color:var(--ink-2);font-weight:500;display:inline-block;max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);transition:background .3s;flex:0 0 auto}
.sync-dot.busy{background:var(--brand)}
.sync-dot.err{background:var(--err)}

.wrap{max-width:1000px;margin:0 auto;padding:1.5rem 1rem 4rem}
.wrap.wide{max-width:none}

/* ---------------- messaggi ---------------- */
.flash{padding:.75rem 1rem;border-radius:var(--radius);margin:0 0 1rem;font-size:.95rem;border:1px solid transparent}
.flash-ok{background:var(--ok-bg);color:var(--ok);border-color:#a7f3d0}
.flash-error{background:var(--err-bg);color:var(--err);border-color:#fecaca}
.flash-warn{background:var(--warn-bg);color:var(--warn);border-color:#fde68a}
.flash-info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-bordo)}

/* ---------------- intestazione pagina ---------------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.page-head p{margin:0}
.count{display:inline-block;margin-left:.5rem;padding:.1rem .5rem;border-radius:6px;background:#e8edf4;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}

/* ---- entrata / uscita dentro un settore ---- */
.schede{display:flex;gap:.4rem;margin:0 0 1rem;border-bottom:2px solid var(--line);flex-wrap:wrap}
.schede .scheda{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;
  border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:#f3f4f6;
  color:var(--ink-2);text-decoration:none;font-size:.95rem;font-weight:600;position:relative;bottom:-2px}
.schede .scheda:hover{background:#e9ecef}
.schede .scheda-attiva{background:#fff;color:var(--brand);border-color:var(--line);
  box-shadow:inset 0 3px 0 var(--brand)}
.schede .scheda-attiva:hover{background:#fff}
.schede .scheda-n{padding:.05rem .45rem;border-radius:20px;background:#e8edf4;color:var(--muted);
  font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.schede .scheda-attiva .scheda-n{background:var(--info-bg);color:var(--brand)}
@media (max-width:700px){
  .schede .scheda{flex:1;justify-content:center;padding:.6rem .5rem;font-size:.92rem}
}

.subnav{display:flex;gap:.2rem;margin:0 0 1.25rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subnav a{padding:.5rem .8rem;color:var(--ink-2);font-size:.95rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{text-decoration:none;color:var(--brand)}
.subnav a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ---------------- schede ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.1rem;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:1.1rem;align-items:start}

/* ---------------- moduli ---------------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{
  width:100%;padding:.5rem .65rem;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--brand)}
textarea{resize:vertical;line-height:1.55}
input[type=color]{width:40px;height:34px;padding:2px;border:1px solid var(--line-2);border-radius:6px;background:#fff}
label>span{display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:.25rem;font-weight:500}
label.inline{display:inline-flex;align-items:center;gap:.4rem;font-size:.93rem;font-weight:400}
label.inline input{width:auto}
.lbl{display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:.25rem;font-weight:500}
.hint{font-size:.85rem;color:var(--muted);margin:.15rem 0 .6rem;line-height:1.45}
.form{display:flex;flex-direction:column;gap:.8rem}
.stack{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.form-inline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}
.form-inline-grid .full{grid-column:1/-1}
.row-form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.checkgroup{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.stacked-cell{display:flex;flex-direction:column;gap:.2rem}
.cond{display:flex;gap:.3rem;flex-wrap:wrap}
.cond select{width:auto;min-width:130px}
.cond input{min-width:160px}

.btn{
  display:inline-block;padding:.5rem .95rem;border:1px solid var(--line-2);border-radius:8px;background:#fff;
  color:var(--ink);font:inherit;font-size:.93rem;font-weight:500;cursor:pointer;text-align:center
}
.btn:hover{background:#f9fafb;text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-scuro)}
.btn-quiet{background:#f9fafb}
.btn-danger{color:var(--err);border-color:#fecaca;background:#fff}
.btn-danger:hover{background:var(--err-bg)}
.btn-block{width:100%}
.btn-sm{padding:.3rem .65rem;font-size:.85rem}
.btn-plain{background:none;border:0;padding:.3rem .2rem;color:var(--brand);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none}
.btn-plain:hover{text-decoration:underline}
.btn-plain-danger{color:var(--err)}

/* ---------------- filtri ---------------- */
/* I filtri stanno chiusi finché non servono: con i caratteri grandi
   occuperebbero mezzo schermo prima ancora di vedere le email. */
.filters-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:1rem;box-shadow:var(--shadow)
}
.filters-box > summary{
  cursor:pointer;list-style:none;padding:.6rem .9rem;display:flex;align-items:center;gap:.5rem;
  font-weight:600;color:var(--ink-2);user-select:none;border-radius:var(--radius)
}
.filters-box > summary::-webkit-details-marker{display:none}
.filters-box > summary:hover{background:#f9fafb}
.filters-box .fb-ico{display:inline-block;transition:transform .15s ease;color:var(--muted)}
.filters-box[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.filters-box[open] .fb-ico{transform:rotate(90deg)}
.fb-on{
  font-size:.78em;font-weight:700;background:var(--info-bg);color:var(--brand);
  border-radius:999px;padding:.1em .6em;text-transform:uppercase;letter-spacing:.04em
}
.filters{
  display:flex;gap:.5rem;align-items:flex-end;margin-bottom:1rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .9rem
}
/* dentro il riquadro apribile la cornice la mette già lui */
.filters-box .filters{background:none;border:0;border-radius:0;margin-bottom:0;box-shadow:none}
.filters select,.filters input{width:auto}
.filters .f{display:flex;flex-direction:column;gap:.15rem}
.filters .f > span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
/* in em, così i riquadri restano proporzionati al testo che contengono */
.filters .f select{min-width:7em}
.filters .f-testo input{min-width:13em}
.filters .f-mitt input{min-width:12em}
.filters .f-data input{width:10em}
.filters-actions{display:flex;gap:.5rem;align-items:center;margin-left:auto}

/* ---------------- elenco conversazioni ---------------- */
.empty{background:#fff;border:1px dashed var(--line-2);border-radius:var(--radius);padding:3rem 1rem;text-align:center}
.empty-icon{font-size:2.2rem;margin:0 0 .5rem}
.empty p{margin:.2rem 0}

/* "Seleziona tutte", sopra l'elenco */
.sel-tutti{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  padding:.35rem .1rem .6rem;color:var(--muted);font-size:.92rem}
.sel-tutti input{width:1.5em;height:1.5em;min-width:24px;min-height:24px;cursor:pointer;accent-color:var(--brand)}
.sel-tutti:hover{color:var(--ink-2)}

.convlist{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.conv{border-bottom:1px solid var(--line)}
/* le due intestazioni della pagina "Da lavorare" */
.conv-gruppo{padding:.5rem 1rem;font-size:.85rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--info-ink);background:var(--info-bg);
  border-bottom:1px solid var(--info-bordo)}
.conv-gruppo-2{border-top:3px solid var(--brand);margin-top:0}
.conv-riga{position:relative;overflow:hidden}
.conv:last-child{border-bottom:0}
.conv-slide{display:flex;align-items:stretch;background:#fff;position:relative;z-index:1}
.conv:hover .conv-slide{background:#f8fafc}
.conv.unread .conv-slide{background:var(--nonletta)}
.conv.unread .conv-from,.conv.unread .conv-subject{font-weight:700}
/* caselle di spunta grandi, comode da centrare col dito o col mouse */
.conv-check{display:flex;align-items:center;padding:0 .6rem 0 .9rem;cursor:pointer}
.conv-check input{width:1.5em;height:1.5em;min-width:24px;min-height:24px;cursor:pointer;accent-color:var(--brand)}
.conv-check:hover input{outline:2px solid var(--info-bordo);outline-offset:2px}
/* il testo della riga: dentro c'è il collegamento (mittente, oggetto,
   anteprima) e sotto le etichette, che stanno fuori dal collegamento
   perché quella dello stato è un pulsante */
.conv-testo{flex:1;min-width:0;padding:var(--riga-y) 1rem var(--riga-y) .25rem}
.conv-main{display:block;color:var(--ink);min-width:0}
.conv-main:hover{text-decoration:none}
.conv-line1{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.conv-from{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* nel codice la data sta prima del mittente (serve allo schermo stretto):
   qui l'ordine visivo torna quello giusto, con la data a destra */
.conv-date{font-size:.85rem;color:var(--muted);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums;order:2}
.conv-line2{display:flex;align-items:center;gap:.45rem;margin-top:.15rem}
.conv-subject{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgcount{font-size:.78rem;background:#e8edf4;color:var(--muted);border-radius:8px;padding:0 .4rem;font-weight:600}
.clip{font-size:.9rem}
.conv-line3{display:block;margin-top:.2rem}
.snippet{font-size:.93rem;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-line4{display:flex;gap:.45rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.conv-actions{display:flex;align-items:center;gap:.2rem;padding:0 .8rem;flex:0 0 auto}

/* ---- azioni rapide di riga (scorrimento verso sinistra) ---- */
.conv-quick{position:absolute;top:0;bottom:0;right:0;display:none;z-index:0}
.quick-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  width:5.2rem;height:100%;border:0;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;
  color:#fff;background:var(--brand)}
.quick-b.quick-ass{background:var(--brand-scuro)}
.quick-b.quick-ces{background:var(--err)}
.quick-i{font-size:1.25rem;line-height:1}
.conv-drawer{background:var(--info-bg);border-top:1px solid var(--info-bordo);padding:.6rem .9rem}
.drw-riga{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* a schermo largo le due scelte stanno una accanto all'altra */
@media (min-width:1001px){
  .conv-drawer{display:flex;gap:.6rem 2rem;flex-wrap:wrap;align-items:center}
  .drw-riga + .drw-riga{border-left:1px solid var(--info-bordo);padding-left:2rem}
}
.drw-eti{font-weight:700;color:var(--info-ink);font-size:.9rem}
.conv-drawer select{max-width:100%}

@media (max-width:1000px){
  .conv-scorri.conv-tocco .conv-quick,
  .conv-scorri.conv-aperta .conv-quick{display:flex}

  /* Su schermo stretto mittente e oggetto vanno a capo invece di finire
     in "…": la riga si allunga un po', ma si legge tutto senza aprire.
     L'ordine è: data e ora, mittente, oggetto, anteprima, etichette —
     ognuno sulla sua riga e per tutta la larghezza. I pulsanti di riga
     spariscono (si arriva alle azioni scorrendo verso sinistra), così il
     testo non deve dividersi la riga con nessuno. */
  .conv-scorri .conv-actions{display:none}
  .conv-line1{display:block}
  .conv-date{display:block;margin:0 0 .1rem}
  .conv-line2{align-items:baseline;margin-top:0}
  .conv-from,.conv-subject{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:break-word}
  .conv-testo{padding-right:.9rem}
  /* le etichette una accanto all'altra finché c'è spazio */
  .conv-line4{gap:.4rem .5rem;margin-top:.4rem}
  /* tre azioni nel pannello: si stringono un po' per starci comode */
  .quick-b{width:4.6rem;font-size:.75rem}
  .conv-scorri .conv-slide{transition:transform .18s ease;will-change:transform;touch-action:pan-y}
}

.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;padding:.15rem .55rem;border-radius:999px;background:#f3f4f6;color:var(--ink-2);font-weight:600;white-space:nowrap}
/* l'etichetta dello stato che si può premere per segnare "lavorata" */
.chip-azione{border:1px solid transparent;cursor:pointer;font-family:inherit;
  line-height:inherit;transition:filter .12s}
.chip-azione .chip-segno{opacity:.45;font-weight:700;margin-left:.1rem}
.chip-azione:hover{filter:brightness(.94)}
.chip-azione:hover .chip-segno{opacity:1}
.chip-azione:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chip-sector{background:color-mix(in srgb,var(--sc,#64748b) 12%,#fff);color:var(--sc,#475569);border:1px solid color-mix(in srgb,var(--sc,#64748b) 28%,#fff)}
.chip-none{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-user{background:var(--info-bg);color:var(--info-ink)}
.st-nuovo{background:var(--info-bg);color:var(--brand)}
.st-lavoro{background:#fefce8;color:#a16207}
.st-risposto{background:var(--ok-bg);color:var(--ok)}
.st-chiuso{background:#f3f4f6;color:var(--muted)}
.chip-cestino{background:#fef2f2;color:var(--err);border:1px solid #fecaca}
/* l'esito di una PEC: consegnata, oppure no */
.chip-err{background:var(--err-bg);color:var(--err);border:1px solid #fecaca}

.avatar{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--info-bordo);color:var(--info-ink);font-size:.8em;font-weight:700;flex:0 0 auto;line-height:1}
.avatar-out{background:#bbf7d0;color:#065f46}
.who{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;color:var(--muted)}
.replied{font-size:.82rem;color:var(--ok)}
.watching{font-size:.82rem;color:#c2410c;background:#fff7ed;padding:.1rem .45rem;border-radius:6px}
.tag{font-size:.75rem;background:#f3f4f6;color:var(--muted);padding:.05rem .35rem;border-radius:5px}

.bulkbar{position:sticky;top:56px;z-index:20;display:flex;gap:.8rem;align-items:center;background:var(--info-bg);border:1px solid var(--info-bordo);border-radius:var(--radius);padding:.65rem 1rem;margin-bottom:.6rem;font-size:.93rem;flex-wrap:wrap}
.bulkbar select{width:auto}

.pager{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:1.2rem;font-size:.93rem;color:var(--muted)}

/* ---------------- conversazione ---------------- */
.conv-head{margin-bottom:1.1rem}
.conv-head-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;flex-wrap:wrap}
.back{font-size:.93rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.conv-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px, 19rem, 420px);gap:1.3rem;align-items:start}
@media (max-width:1100px){.conv-layout{grid-template-columns:1fr}}
/* Con i caratteri grandi (la classe la mette il server oltre una certa
   misura) le due colonne si impilano: meglio il pannello sotto che il
   testo del messaggio strizzato in poche parole per riga. */
html.fs-largo .conv-layout{grid-template-columns:1fr}
html.fs-largo .reply-to{grid-template-columns:1fr}
/* col carattere grande i nomi lunghi non ci stanno più: meglio andare a capo */
html.fs-largo .conv-line1{display:block}
html.fs-largo .conv-date{float:right;margin-left:.6rem}
html.fs-largo .conv-line2{align-items:baseline}
html.fs-largo .conv-from,html.fs-largo .conv-subject{white-space:normal;overflow:visible;
  text-overflow:clip;overflow-wrap:break-word}

.msg{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.9rem;overflow:hidden;box-shadow:var(--shadow)}
.msg-out{border-color:#bbf7d0;background:#f7fefb}
.msg-head{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.msg-out .msg-head{border-bottom-color:#d1fae5}
.msg-meta{min-width:0;flex:1}
/* Chi ha scritto è la prima cosa che si cerca con l'occhio:
   più grande e in grassetto, indirizzo compreso. */
.msg-from{font-size:1.12rem;font-weight:700;line-height:1.35}
.msg-from .msg-mail{font-weight:700;color:var(--ink-2);word-break:break-all}
.msg-from .muted{font-weight:600}
.msg-sub{font-size:.85rem;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis}

/* l'indirizzo si può cliccare per metterlo in rubrica */
a.msg-mail{text-decoration:none;border-bottom:1px dotted var(--line-2)}
a.msg-mail:hover{color:var(--brand);border-bottom-color:var(--brand);text-decoration:none}
.rub-piu{
  font-size:.72em;font-weight:700;vertical-align:.12em;margin-left:.25em;
  color:var(--brand);border:1px solid var(--info-bordo);background:var(--info-bg);
  border-radius:5px;padding:0 .3em;white-space:nowrap
}
a.msg-mail:hover .rub-piu{background:var(--brand);color:#fff;border-color:var(--brand)}
/* i pulsanti in cima al riquadro: rispondere e stampare */
.msg-azioni{margin-left:auto;align-self:center;display:flex;align-items:center;gap:.4rem}
/* "Rispondi" è un pulsante pieno: da lì si riparte, deve saltare all'occhio */
.msg-rispondi{
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  background:var(--brand);color:#fff;font-weight:600;font-size:.92rem;
  padding:.42rem .8rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer
}
.msg-rispondi:hover{background:var(--brand-scuro);color:#fff;text-decoration:none}
/* "Inoltra": sta accanto a Rispondi, ma è il gesto secondario — bordo e
   basta, così non litiga con il verde pieno del rispondere */
.msg-inoltra{
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;
  color:var(--ink-2);font-weight:600;font-size:.92rem;
  padding:.4rem .7rem;text-decoration:none;cursor:pointer
}
.msg-inoltra:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.msg-inoltra-alt{font-weight:500;font-size:.86rem;padding:.4rem .55rem}
/* la PEC da approvare, nella pagina che si apre dal collegamento ricevuto
   per email: si deve leggere come una citazione, staccata dal resto */
.pec-anteprima{
  margin:1rem 0;padding:.9rem 1.1rem;background:#f6f8f7;
  border-left:3px solid var(--brand);border-radius:0 8px 8px 0;line-height:1.6
}
/* gli allegati che si portano dietro quando si inoltra */
.allegati-orig{display:flex;flex-direction:column;gap:.3rem;margin:.3rem 0}
.allegati-orig label{font-size:.93rem}
/* la stampante: quadrata, defilata, sempre nello stesso posto */
.msg-stampa{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border:1px solid var(--line-2);border-radius:8px;
  background:#fff;color:var(--ink-2);font-size:1.02rem;line-height:1;
  text-decoration:none;cursor:pointer
}
.msg-stampa:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
/* il cestino ha la stessa forma della stampante, ma è rosso quando lo si sfiora */
.msg-cestina:hover{border-color:var(--err);color:var(--err)}
/* il più recente si riconosce a colpo d'occhio, senza gridare */
.msg-ultimo{box-shadow:0 0 0 2px var(--info-bordo), var(--shadow)}
.thread-ordine{font-size:.85rem;margin:-.2rem 0 .6rem}

/* PEC: il timbro sotto ogni messaggio mandato, e le sue etichette */
.pec-ricevute{margin:.7rem 0 0;display:flex;flex-direction:column;gap:.3rem}
.pec-ric{font-size:.9rem;padding:.35rem .6rem;border-radius:8px;background:#f1f7f2;border:1px solid #cfe6d5}
.pec-ric-ko{background:#fff5f5;border-color:#f3c9c9}
.pec-ric strong{margin-right:.4rem}
.chip-pec{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.chip-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}

.msg-body{padding:1rem 1.1rem}
.textbody{font-size:1.05rem;line-height:1.65;word-break:break-word;overflow-wrap:anywhere}
.quoted{margin-top:.9rem;border-left:3px solid var(--line-2);padding-left:.8rem}
.quoted summary{cursor:pointer;font-size:.88rem;color:var(--muted);list-style:none;user-select:none}
.quoted summary::-webkit-details-marker{display:none}
.quoted summary::before{content:"⋯ ";font-weight:700}
.quoted summary:hover{color:var(--brand)}
.quoted-body{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
/* la citazione dentro un messaggio HTML: chiusa non occupa niente */
.quoted-html{margin-top:.7rem}
.quoted-html iframe{margin-top:.5rem;opacity:.85}
.plainbody{white-space:pre-wrap;font-size:.95rem;background:#f9fafb;padding:.9rem;border-radius:8px;border:1px solid var(--line);overflow-x:auto}
.htmlbody{width:100%;border:0;min-height:80px;display:block;background:#fff}
.toggle-text{margin-top:.4rem}
.attachments{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.att{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;padding:.35rem .7rem;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-2)}
.att:hover{background:#f9fafb;text-decoration:none}
.att-missing{opacity:.6}

.reply{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.reply textarea{font-size:1.02rem}
.reply-to{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.6rem}
@media (max-width:700px){.reply-to{grid-template-columns:1fr}}
.signature-preview{margin-top:.6rem;padding:.65rem .85rem;background:#f9fafb;border:1px solid var(--line);border-radius:8px;font-size:.88rem}
.signature-preview pre{margin:.4rem 0;white-space:pre-wrap;font-family:inherit;color:var(--ink-2)}
/* la firma non si rifà vedere per intero a ogni email: resta una riga,
   e chi vuole controllarla la apre */
.firma-chiusa{display:inline}
.firma-chiusa > summary{display:inline;cursor:pointer;color:var(--muted);list-style:none;user-select:none}
.firma-chiusa > summary::-webkit-details-marker{display:none}
.firma-chiusa > summary:hover{color:var(--brand);text-decoration:underline}
.firma-chiusa[open] > summary{display:block;margin-bottom:.3rem}
.reply-opts{display:flex;gap:1.2rem;align-items:center;margin-top:.7rem;flex-wrap:wrap;font-size:.9rem}
.reply-opts input[type=file]{width:auto;font-size:.85rem}
.reply-actions{display:flex;gap:.8rem;align-items:center;margin-top:.9rem;flex-wrap:wrap;font-size:.88rem}
/* il titolo "Rispondi" con accanto i due comandi che si cercano sempre */
.reply-testa{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.reply-testa h2{margin:0}
.reply-testa-azioni{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.campo-allegati-testa{margin:0}
.campo-allegati-testa .allegati-scegli{
  border:1px solid var(--line-2);border-radius:8px;padding:.45rem .8rem;
  color:var(--ink-2);font-weight:600;text-decoration:none
}
.campo-allegati-testa .allegati-scegli:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.allegati-scelti:empty{display:none}
.reply-nota{font-size:.85rem;margin:-.4rem 0 .8rem}
/* "questa email arriva da un indirizzo tuo: rispondi invece a…" */
.a-suggeriti{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin-top:.35rem;font-size:.85rem}
.a-sugg{border:1px solid var(--brand);background:#fff;color:var(--brand);
  border-radius:999px;padding:.2rem .7rem;font:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer}
.a-sugg:hover{background:var(--brand);color:#fff}
/* il modulo che accetta i file trascinati sopra */
.zona-file{position:relative}
.zona-file.trascina{outline:2px dashed var(--brand);outline-offset:6px;border-radius:var(--radius)}
.zona-file.trascina::after{
  content:'Lascia qui i file da allegare';
  position:absolute;inset:-6px;border-radius:var(--radius);
  background:rgba(22,163,74,.10);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;pointer-events:none;z-index:2
}
@media (max-width:700px){
  .reply-testa-azioni{margin-left:0;width:100%}
  .reply-testa-azioni .btn{flex:1}
}

/* ---- file scelti prima dell'invio: anteprima e × per toglierli ---- */
.campo-allegati{margin-top:.7rem}
.campo-allegati input[type=file]{width:auto;font-size:.85rem}
.allegati-scegli{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;background:#fff}
.allegati-scegli:hover{text-decoration:none;background:#f3f4f6}
.allegati-lista{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.allegato-scelto{display:flex;align-items:center;gap:.5rem;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:.35rem .45rem}
.allegato-scelto.allegato-troppo{background:var(--err-bg);border-color:#fecaca}
.allegato-apri{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0;text-decoration:none;color:inherit}
.allegato-apri:hover .allegato-nome{text-decoration:underline}
.allegato-mini{width:2.4rem;height:2.4rem;flex:none;border-radius:6px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.allegato-ico{display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1}
.allegato-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.allegato-peso{flex:none;font-size:.8rem;color:var(--muted)}
.allegato-togli{flex:none;width:2rem;height:2rem;border:1px solid var(--line);background:#fff;border-radius:6px;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:0}
.allegato-togli:hover{background:var(--err-bg);border-color:#fecaca;color:var(--err)}
.allegato-tutti{padding:.15rem 0}
.allegati-avviso{margin:.4rem 0 0;font-size:.83rem;color:var(--muted)}
.allegati-avviso.allegati-male{color:var(--err);font-weight:600}
@media (max-width:700px){
  .allegato-togli{width:2.6rem;height:2.6rem;font-size:1.4rem}
  .allegato-mini{width:2.8rem;height:2.8rem}
}

.assigned-note{font-size:.9rem;color:var(--ok);background:var(--ok-bg);padding:.45rem .65rem;border-radius:8px;margin:0 0 .6rem}
.notes{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.notes li{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:.55rem .75rem}
.note-head{font-size:.83rem;margin-bottom:.2rem}
.note-body{font-size:.92rem}
.timeline{list-style:none;margin:0;padding:0;font-size:.88rem;display:flex;flex-direction:column;gap:.45rem}
.timeline li{display:flex;gap:.5rem;line-height:1.4}
.tl-date{color:var(--muted);flex:0 0 95px;font-size:.8rem}
.tl-text{flex:1}

/* ---------------- tabelle ---------------- */
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);padding:.55rem .6rem;font-weight:600}
.table td{padding:.6rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.row-off{opacity:.55}
.group-sep td{background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem .6rem}
.group-name{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--ink-2)}
.group-note{font-size:.82rem;color:var(--muted);margin-left:.6rem}
.group-sep + tr td{border-top:0}
.row-total td{font-weight:600;background:#fafbfc}
.table-users td input[type=text],.table-users td input[type=email]{min-width:140px}
.table-users td code{background:transparent;padding:0;color:var(--ink-2);font-size:.9rem}
.table-users .hint{margin:.1rem 0 0}

.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:.93rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* ---------------- cruscotto ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1.1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.95rem;box-shadow:var(--shadow)}
.kpi-n{display:block;font-size:1.8rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-l{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
.kpi-warn{border-color:#fed7aa;background:#fffbf5}
.kpi-warn .kpi-n{color:var(--warn)}
.kpi-alert{border-color:#fecaca;background:#fffafa}
.kpi-alert .kpi-n{color:var(--err)}

.chart{display:flex;align-items:flex-end;gap:4px;height:160px;padding:.5rem 0;overflow-x:auto}
.chart-col{flex:1 1 0;min-width:16px;max-width:56px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars{display:flex;gap:2px;align-items:flex-end;height:100%}
.bar{flex:1;border-radius:3px 3px 0 0;min-height:2px}
.bar-in{background:#93c5fd}
.bar-out{background:#6ee7b7}
.chart-x{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.25rem;white-space:nowrap}
.legend{font-size:.85rem;color:var(--muted);margin:.4rem 0 0;display:flex;gap:.8rem;align-items:center}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.25rem}
.sw-in{background:#93c5fd}
.sw-out{background:#6ee7b7}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot-ok{background:#10b981}
.dot-warn{background:#f59e0b}
.dot-err{background:#ef4444}
.dot-info{background:#9ca3af}

.logbox{background:#111827;color:#e5e7eb;padding:.9rem;border-radius:8px;font-size:.8rem;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.cron-url{background:#f3f4f6;padding:.7rem;border-radius:8px;font-size:.82rem;word-break:break-all;border:1px solid var(--line);margin:.3rem 0 .5rem}
.pwd-box{display:flex;flex-direction:column;gap:.3rem}
.pwd{font-size:1.15rem;font-weight:700;letter-spacing:.05em;background:#fff;padding:.3rem .6rem;border-radius:6px;display:inline-block;align-self:flex-start;border:1px solid #a7f3d0}
.suggest{list-style:none;margin:0;padding:0;font-size:.9rem;display:flex;flex-direction:column;gap:.3rem}

/* ---------------- scelta della dimensione dei caratteri ---------------- */
/* Anteprima della misura scelta: scritta nei pixel veri, così si vede
   subito come sarà, qualunque misura si stia usando adesso. */
/* ---------------- casella personale ---------------- */
.chip-mia{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-bordo)}
.side-nota{
  color:var(--side-ink-2);font-size:.82em;padding:0 .75em .5em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* la riga che separa la posta di lavoro da quella personale */
.side-sep{
  height:1px;background:rgba(255,255,255,.14);
  margin:1.1em .6em .2em;flex:0 0 auto
}
.side-sep + .side-title{padding-top:.6em}

/* ---------------- rubrica ---------------- */
.rub-campo{position:relative}
.rub-sugg{
  position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:2px;
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
  box-shadow:0 6px 20px rgba(16,24,40,.14);max-height:16rem;overflow-y:auto
}
.rub-voce{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.45rem .7rem;font-family:inherit;font-size:.95rem;line-height:1.3;color:var(--ink)
}
.rub-voce strong{display:block;font-weight:600}
.rub-voce span{display:block;font-size:.85em;color:var(--muted)}
.rub-voce:hover,.rub-voce.on{background:var(--info-bg)}
/* l'elenco degli indirizzi senza nome può essere lungo: scorre dentro il
   riquadro invece di allungare la pagina all'infinito */
.rub-proposte{display:block;max-height:30rem;overflow-y:auto;width:100%}
.rub-proposte td{padding:.3rem .8rem .3rem 0;vertical-align:middle}
.rub-proposte tr{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--line)}
.rub-proposte tr:last-child{border-bottom:0}
.rub-proposte td:first-child{min-width:0;overflow-wrap:break-word}
.tabella{width:100%;border-collapse:collapse}
.tabella th{
  text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:.4rem .7rem;border-bottom:1px solid var(--line)
}
.tabella td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.tabella tr:last-child td{border-bottom:0}
.tabella tbody tr:hover{background:#f9fafb}

/* ---------------- aspetto e firma ---------------- */
.tema-scelte{display:flex;gap:.4rem;flex-wrap:wrap;margin:-.3rem 0 .2rem}
.tema-p{display:inline-flex;border-radius:6px;overflow:hidden;border:1px solid var(--line-2)}
.tema-p span{display:block;width:18px;height:18px}
.colori2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:600px){.colori2{grid-template-columns:1fr}}
.colori2 input[type=color]{width:100%;height:2.4rem;padding:2px;cursor:pointer}
.logo-ora{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.6rem .8rem;background:#f9fafb;border:1px solid var(--line);border-radius:8px}
.logo-ora img{max-width:180px;max-height:80px;height:auto;display:block}
.firma-lav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:900px){.firma-lav{grid-template-columns:1fr}}
.firma-anteprima{
  background:#fff;border:1px dashed var(--line-2);border-radius:8px;
  padding:.9rem;margin:.4rem 0 .2rem;overflow-x:auto
}
.firma-anteprima img{max-width:100%;height:auto}
textarea.mono,pre.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.45}
pre.mono{background:#f3f4f6;padding:.6rem .8rem;border-radius:6px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.tabellina{border-collapse:collapse;font-size:.88rem;margin:.2rem 0 .4rem}
.tabellina td{padding:.15rem .8rem .15rem 0;vertical-align:top}
.riga-bottoni{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.fs-esempio{
  margin:.2rem 0 0;padding:.6rem .85rem;background:#f9fafb;
  border:1px dashed var(--line-2);border-radius:8px;color:var(--ink-2);
  line-height:1.4;overflow-wrap:anywhere
}

/* ---------------- accesso e installazione ---------------- */
.login-page{background:linear-gradient(180deg,var(--info-bg) 0%,var(--bg) 380px);display:grid;place-items:start center;min-height:100vh}
.login-page .wrap{max-width:440px;padding-top:8vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.8rem;box-shadow:0 4px 24px rgba(16,24,40,.08)}
.login-head{text-align:center;margin-bottom:1.4rem}
.login-mark{width:46px;height:46px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:23px;margin:0 auto .7rem}
.login-head h1{font-size:1.3rem;margin:0}
.login-head p{margin:.2rem 0 0;font-size:.9rem}
.login-foot{font-size:.85rem;text-align:center;margin:1.1rem 0 0}

.install-page .wrap{max-width:680px}
.install-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.8rem;box-shadow:var(--shadow);margin-top:2rem}
.steps{display:flex;list-style:none;margin:1rem 0 1.5rem;padding:0;gap:.4rem;font-size:.82rem}
.steps li{flex:1;text-align:center;padding:.4rem .2rem;border-radius:8px;background:#f3f4f6;color:var(--muted)}
.steps li.done{background:var(--info-bg);color:var(--brand)}
.steps li.cur{background:var(--brand);color:#fff;font-weight:600}
.todo{font-size:.95rem;line-height:1.7;padding-left:1.2rem}

/* ---- Bozze -------------------------------------------------------
   La riga che dice «salvata alle 10:42» sta accanto ai pulsanti e non
   deve farsi notare: è una conferma, non un avviso. Diventa ambra solo
   quando il salvataggio NON è riuscito, perché quello sì va visto. */
.bozza-stato{font-size:.85rem;color:var(--muted);align-self:center}
.bozza-stato-male{color:var(--warn);font-weight:600}
.bozza-ripresa{background:var(--ok-bg);border:1px solid #a7f3d0;color:var(--ok);
  border-radius:8px;padding:.45rem .7rem;margin:.4rem 0 0}
.bozza-allegati{margin-top:.6rem}
.bozza-allegati .lbl{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.3rem}

@media print{.sidebar,.topbar,.subnav,.filters,.filters-box,.reply,.conv-side{display:none}.app{display:block}}