/* Console Tool WA — foglio di stile unico (Piano 10 T2).
   Ordine: 1) variabili · 2) guscio (barra a sinistra, main) · 3) componenti
   condivisi (.pannello .intestazione bottoni .elenco .badge .campo .flash
   .passi) · 4) pezzi specifici delle sezioni (coda, chat, cruscotto, accesso).
   Un solo raggio (10px), un solo set di colori: le sezioni nuove usano queste
   classi, non ne inventano di proprie. */

/* ---------- 1. Variabili ---------- */
:root {
  --primario: #0d5349; --primario-soft: #e2ede9;
  --sfondo: #f4f6f4; --sfondo-2: #eef1ee;
  --pannello: #ffffff;
  --bordo: #dde3e0; --bordo-forte: #c9d2ce;
  --testo: #14201d; --testo-debole: #5b6a66; --testo-debolissimo: #7b8a86;
  --ok: #2c7a52; --ok-soft: #e3f1e8;
  --attenzione: #9a6407; --attenzione-soft: #f8eeda;
  --pericolo: #a02f28; --pericolo-soft: #fae6e4;
  --info: #2456a6; --info-soft: #e3ecfb;
  --fumetto-in: #eef1ee; --fumetto-out: #dcece6;
  --raggio: 10px; --raggio-piccolo: 7px;
  --ombra: 0 1px 2px rgba(20,32,29,.06), 0 8px 24px -12px rgba(20,32,29,.18);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; display: flex; min-height: 100vh; background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.5 "Instrument Sans", -apple-system, BlinkMacSystemFont,
       "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primario); }
code { font-family: var(--mono); font-size: 13px; }
h2 { font-size: 15px; margin: 22px 0 10px; }
h3 { font-size: 14px; margin: 18px 0 8px; }
.pannello > h2:first-child, .pannello > h3:first-child { margin-top: 0; }

/* ---------- 2. Guscio ---------- */
.sidebar {
  width: 224px; flex: none; background: var(--pannello); color: var(--testo-debole);
  border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; padding: 18px 12px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .logo { color: var(--testo); font-weight: 700; font-size: 16px; padding: 0 12px 16px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a {
  padding: 8px 12px; color: var(--testo-debole); text-decoration: none;
  border-radius: var(--raggio-piccolo);
}
.sidebar nav a:hover { background: var(--sfondo-2); color: var(--testo); }
.sidebar nav a.attiva { background: var(--primario-soft); color: var(--primario); font-weight: 600; }
.autonomia {
  margin-top: 12px; padding: 12px; font-size: 12px; color: var(--testo-debolissimo);
  border-top: 1px solid var(--bordo);
}
.autonomia strong { color: var(--testo-debole); }
a.autonomia { display: block; text-decoration: none; border-radius: var(--raggio-piccolo); }
a.autonomia:hover { background: var(--sfondo-2); }
a.autonomia:hover strong, a.autonomia.attiva strong { color: var(--primario); }
.account {
  margin-top: auto; padding: 12px 12px 0; border-top: 1px solid var(--bordo);
  font-size: 12px; color: var(--testo-debolissimo);
}
.account .email { color: var(--testo); font-weight: 600; word-break: break-all; }
.account .ruolo { color: var(--testo-debole); }
.account .azioni { display: flex; gap: 12px; margin-top: 8px; align-items: center; }
.account a, .account button.link { color: var(--primario); text-decoration: none; font-size: 12px; }
.account a:hover, .account button.link:hover { text-decoration: underline; }

main { flex: 1; min-width: 0; padding: 0 28px 40px; }

/* Intestazione di pagina: h1 + riga che dice a cosa serve la sezione.
   Un eventuale blocco .azioni (bottoni) si mette a destra. */
.intestazione {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
  align-items: end; padding: 22px 0 14px; border-bottom: 1px solid var(--bordo);
  margin-bottom: 20px;
}
.intestazione h1 { grid-column: 1; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.intestazione .sotto { grid-column: 1; margin: 3px 0 0; color: var(--testo-debole); font-size: 14px; }
.intestazione .azioni { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- 3. Componenti ---------- */
.pannello {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 16px 18px; margin-bottom: 16px;
}

/* Bottoni: 34px di altezza, .mini 28px. Valgono anche per i link (a.bottone,
   a.primario, a.secondario) così un link può sembrare un bottone. */
button, .bottone, a.primario, a.secondario {
  font: inherit; font-size: 14px; line-height: 1; height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--bordo-forte); background: var(--pannello); color: var(--testo);
  border-radius: var(--raggio-piccolo); cursor: pointer; text-decoration: none;
  white-space: nowrap; vertical-align: middle;
}
button:hover, .bottone:hover, a.secondario:hover { border-color: var(--testo-debole); background: var(--sfondo-2); }
button:disabled { opacity: .55; cursor: wait; }
.primario, button.primario, a.primario {
  background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600;
}
.primario:hover, button.primario:hover, a.primario:hover { background: #0a4239; border-color: #0a4239; }
.secondario, button.secondario, a.secondario { background: var(--pannello); border-color: var(--bordo-forte); color: var(--testo); }
.pericolo, button.pericolo, button.stop, button.mini.stop {
  color: var(--pericolo); border-color: #e6b8b3; background: var(--pannello);
}
.pericolo:hover, button.pericolo:hover, button.stop:hover, button.mini.stop:hover {
  background: var(--pericolo-soft); border-color: var(--pericolo);
}
.mini, button.mini, a.mini { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
button.mini.attivo { background: var(--testo); color: #fff; border-color: var(--testo); }
button.link {
  border: none; background: none; padding: 0; height: auto; cursor: pointer;
  color: inherit; text-decoration: underline; font-size: inherit; display: inline;
}
button.link:hover { background: none; border: none; }
.bottoni { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

/* Campi: input, select e textarea con lo stesso bordo e la stessa altezza dei bottoni. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  font: inherit; font-size: 14px; color: var(--testo); background: var(--pannello);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-piccolo);
  padding: 0 10px; height: 34px; max-width: 100%;
}
textarea { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; }
select[multiple] { height: auto; min-height: 84px; min-width: 180px; padding: 4px; }
form > textarea { display: block; width: 100%; margin: 8px 0; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primario-soft); border-color: var(--primario);
}
/* L'attributo hidden vince su qualunque display di classe (.campo è flex,
   form > textarea è block): senza questa riga el.hidden = true non nasconde. */
[hidden] { display: none !important; }
/* .campo = etichetta sopra al campo; .campi mette più .campo in riga. */
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--testo-debole); min-width: 0; }
.campo > span:first-child, .campo > .etichetta { font-weight: 600; color: var(--testo-debole); }
.campo input, .campo select, .campo textarea { color: var(--testo); }
.campi { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campi .campo { flex: 1 1 180px; }
.campi .campo.largo { flex-basis: 100%; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form textarea { width: 100%; }
.inline-form label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--testo-debole); }
.inline-form input[type=number] { width: 84px; }

/* Tabelle */
table.elenco {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--pannello);
  border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden;
  margin: 10px 0;
}
table.elenco th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--testo-debole);
  background: var(--sfondo-2); padding: 9px 12px; border-bottom: 1px solid var(--bordo);
  letter-spacing: .2px;
}
table.elenco td { padding: 9px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
table.elenco tr:last-child td { border-bottom: none; }
table.elenco tr:hover td { background: var(--sfondo); }
table.elenco form { margin: 0; }
table.elenco details summary { cursor: pointer; color: var(--primario); font-size: 13px; }
table.elenco details form { margin-top: 8px; }
.pannello > table.elenco:last-child { margin-bottom: 0; }

/* Badge: pillole di stato. Neutro di base; .ok .spento .auto .attenzione .pericolo. */
.badge, .stato {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.6;
  padding: 1px 9px; border-radius: 999px; background: var(--sfondo-2);
  color: var(--testo-debole); letter-spacing: .3px; white-space: nowrap;
  vertical-align: middle;
}
.badge.ok, .stato-approvato { background: var(--ok-soft); color: var(--ok); }
.badge.spento, .stato-completato, .stato-bozza { background: var(--sfondo-2); color: var(--testo-debolissimo); }
.badge.auto, .badge.follow-up { background: var(--info-soft); color: var(--info); }
.badge.attenzione, .stato-in_approvazione, .stato-programmato, .stato-in_corso { background: var(--attenzione-soft); color: var(--attenzione); }
.badge.pericolo, .stato-rifiutato, .stato-in_pausa, .stato-annullato { background: var(--pericolo-soft); color: var(--pericolo); }
.badge.holding { background: var(--ok-soft); color: var(--ok); }
/* Piano 9 §review finale (item 3): i segnali di pausa/tetto devono spiccare
   nella riga, non confondersi con gli altri badge neutri */
.badge.pausa { background: #6f1d17; color: #fff; }
.badge.tetto { background: #b45309; color: #fff; }
.conteggio { background: var(--sfondo-2); color: var(--testo-debole); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; vertical-align: middle; }

/* Messaggi flash */
.flash {
  background: var(--attenzione-soft); border: 1px solid #e9d9b3; color: var(--testo);
  border-radius: var(--raggio); padding: 10px 14px; margin-bottom: 14px;
}
.flash.ok { background: var(--ok-soft); border-color: #bfe0cc; }
.flash.allarme { background: var(--pericolo-soft); border-color: #efc4bd; }
/* Piano 9 §review finale (item 3): il banner di pausa è il segnale di
   sicurezza principale dello strumento — deve saltare all'occhio su ogni
   pagina, non passare per un flash qualunque */
.pausa-banner {
  background: #6f1d17; border: 2px solid #4a1310; color: #fff; font-weight: 600;
  padding: 14px 18px; margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.pausa-banner .mini { background: #fff; color: #6f1d17; border-color: #fff; }
.pausa-banner .inline-form { margin-left: auto; }

/* Indicatore a passi: <ol class="passi"><li class="fatto">…</li><li class="corrente">…</li><li>…</li></ol> */
ol.passi { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; margin: 0 0 18px; counter-reset: passo; flex-wrap: wrap; }
.passi li {
  counter-increment: passo; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; font-size: 13px; color: var(--testo-debolissimo);
  border-radius: 999px; background: var(--pannello); border: 1px solid var(--bordo);
}
.passi li::before {
  content: counter(passo); width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--sfondo-2); color: var(--testo-debole);
}
.passi li.corrente { color: var(--testo); font-weight: 600; border-color: var(--primario); }
.passi li.corrente::before { background: var(--primario); color: #fff; }
.passi li.fatto { color: var(--testo-debole); }
.passi li.fatto::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }

/* Testi di servizio */
.nota { font-size: 12px; color: var(--testo-debole); margin: 6px 0 0; }
.vuoto { color: var(--testo-debole); }
.errore { color: var(--pericolo); font-size: 13px; }
.meta { color: var(--testo-debole); font-size: 13px; }
.chip {
  display: inline-flex; gap: 6px; align-items: baseline; background: var(--sfondo-2);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 2px;
}
.chip.attivo { background: var(--primario-soft); color: var(--primario); font-weight: 600; }
.chip.speciale { background: var(--pericolo-soft); color: var(--pericolo); }
.chip a { color: inherit; text-decoration: none; }
.paginazione { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--testo-debole); }
.griglia-metriche { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.metrica {
  display: flex; flex-direction: column; gap: 2px; background: var(--sfondo);
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px;
  text-decoration: none; color: var(--testo);
}
.metrica strong { font-size: 22px; }
.metrica span { font-size: 12px; color: var(--testo-debole); }
a.metrica:hover { border-color: var(--primario); }
.elenco-accessi { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.elenco-accessi li { padding: 4px 0; break-inside: avoid; }
.elenco-accessi .si { color: var(--ok); font-weight: 700; margin-right: 6px; }
.elenco-accessi .no { color: var(--testo-debolissimo); font-weight: 700; margin-right: 6px; }
.stadi-scelta { display: flex; gap: .75rem; flex-wrap: wrap; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: 8px 12px; font-size: 13px; }
.stadi-scelta legend { font-size: 12px; color: var(--testo-debole); padding: 0 4px; }
.corpo-template { max-width: 320px; white-space: pre-wrap; }

/* ---------- 4. Coda ---------- */
.riepilogo-coda {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 10px 16px; margin-bottom: 14px; font-size: 13px;
}
.metrica-coda strong { font-size: 17px; }
.metrica-coda.verde strong { color: var(--ok); }
.metrica-coda.giallo strong { color: var(--attenzione); }
.metrica-coda.rosso strong { color: var(--pericolo); }
.legenda { margin-left: auto; color: var(--testo-debole); }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }
.pallino.verde { background: var(--ok); }
.pallino.giallo { background: var(--attenzione); }
.pallino.rosso { background: var(--pericolo); }
.pallino.grigio { background: var(--bordo-forte); }
.riga {
  background: var(--pannello); border: 1px solid var(--bordo); border-left-width: 4px;
  border-radius: var(--raggio); padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--ombra);
}
.colore-verde { border-left-color: var(--ok); }
.colore-giallo { border-left-color: var(--attenzione); }
.colore-rosso { border-left-color: var(--pericolo); }
.riga-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nome { font-weight: 600; color: var(--testo); text-decoration: none; border-bottom: 1px dashed var(--testo-debole); }
.countdown { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.countdown.urgente { color: var(--pericolo); }
.countdown.chiusa { color: var(--testo-debole); font-weight: 400; }
.estratto .msg { background: var(--fumetto-in); border-radius: 10px 10px 10px 3px; display: inline-block; padding: 6px 11px; margin: 6px 0 0; max-width: 75%; }
.estratto { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.estratto { display: flex; flex-direction: column; align-items: flex-start; }
.estratto .msg.tu {
  align-self: flex-end; background: var(--fumetto-out);
  border-radius: 10px 10px 3px 10px; text-align: left;
}
.estratto .msg.tu .ts { display: block; color: var(--testo-debole); font-size: 11px; margin-top: 2px; text-align: right; }
.bozza textarea {
  width: 100%; margin-top: 10px; background: var(--ok-soft);
  resize: none; overflow: hidden; min-height: 64px;   /* cresce da sola (console.js) */
}
/* Scheda del lead aperta in riga nella Coda */
.scheda-lead {
  margin: 10px 0 4px; padding: 12px 14px; background: var(--sfondo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.scheda-lead-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.scheda-lead-testa button, .scheda-lead-testa .mini { margin-left: auto; }
.scheda-lead-testa button + .mini, .scheda-lead-testa .mini + button { margin-left: 0; }
.scheda-lead-dati { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: 14px; }
.scheda-lead-dati dt { color: var(--testo-debole); }
.scheda-lead-dati dd { margin: 0; }
.scheda-lead .flash { margin: 0 0 10px; }
.scheda-lead .inline-form { margin-top: 6px; }
.form-note { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.form-note .campo { flex: 1 1 260px; }
.form-note textarea { width: 100%; min-width: 180px; }
/* nella tabella Contatti la casella e Salva stanno su una riga sola */
.elenco .form-note { flex-wrap: nowrap; align-items: center; min-width: 220px; }
.elenco .form-note textarea { width: auto; flex: 1 1 140px; min-width: 120px; height: 34px; min-height: 34px; }
.bozza-template { white-space: pre-wrap; margin-top: 10px; padding: .5rem .75rem; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-piccolo); }
.motivi { margin: 8px 0 0; padding-left: 18px; color: var(--testo-debole); font-size: 13px; }
.fonti { font-size: 12px; color: var(--testo-debole); margin: 6px 0 0; }
.stati { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.attivita { margin-top: 22px; color: var(--testo-debole); font-size: 13px; }
.attivita p { margin: 6px 0; }
.attivita summary { cursor: pointer; }

/* ---------- 4. Conversazione ---------- */
.scheda .meta { margin: 0 0 8px; }
.scheda-azioni { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; align-items: center; }
.assistente { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.assistente form { margin: 0; }
.thread { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.fumetto { max-width: 70%; padding: 8px 12px; border-radius: 12px; }
.fumetto.lead { background: var(--fumetto-in); align-self: flex-start; border-bottom-left-radius: 3px; }
.fumetto.nostro { background: var(--fumetto-out); align-self: flex-end; border-bottom-right-radius: 3px; }
.fumetto .ts { display: block; font-size: 11px; color: var(--testo-debole); margin-top: 3px; }
.composer { display: flex; gap: 8px; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; }
.composer textarea { flex: 1 1 320px; }
.composer-chiuso { color: var(--testo-debole); font-style: italic; }

/* ---------- 4. Autonomia ---------- */
.tabella-autonomia td { vertical-align: middle; }
.tabella-autonomia .inline-form { gap: 4px; margin: 0; }
.tabella-autonomia input[type=number] { width: 60px; padding: 0 6px; }
tr.rischio-alto td:first-child strong { color: var(--pericolo); }

/* ---------- 4. Accesso ---------- */
.pagina-accesso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.riquadro-accesso {
  display: flex; flex-direction: column; gap: 14px; min-width: 22rem;
  padding: 2rem; background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.riquadro-accesso h1 { margin: 0 0 4px; font-size: 20px; }
.riquadro-accesso .errore { margin: 0; }

/* ---------- 4. Guida (Piano 10 T8) ---------- */
/* Indice in cima: due colonne di link alle ancore; le sezioni e le ricette
   stanno in .pannello come tutto il resto. */
.guida-indice { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.guida-indice li { break-inside: avoid; padding: 3px 0; }
.guida-indice li.sotto-voce { padding-left: 18px; font-size: 13px; }
.guida-indice a { text-decoration: none; }
.guida-indice a:hover { text-decoration: underline; }
.guida h2 { scroll-margin-top: 16px; }
.guida .pannello > h2 { font-size: 17px; }
.guida .pannello ul, .guida .pannello ol { margin: 6px 0 10px; padding-left: 22px; }
.guida .pannello li { margin: 3px 0; }
.guida .puoi, .guida .non-puoi, .guida .cosa { margin: 10px 0 0; }
.guida .puoi strong, .guida .non-puoi strong, .guida .cosa strong { display: block; margin-bottom: 2px; }
.guida .non-puoi { color: var(--testo-debole); }
.guida .solo-admin { color: var(--attenzione); font-weight: 600; font-size: 12px; }
.guida .torna-su { font-size: 12px; margin-top: 8px; }
.guida .domanda { margin: 14px 0 0; font-weight: 600; }
.guida .domanda + p { margin-top: 2px; }
.guida .badge { vertical-align: middle; }
.guida .bottone-nome { font-weight: 600; white-space: nowrap; }