/* Clonazione — la pratica di voce e volto. Lo stile vive qui: la CSP scarta
   ogni <style> e ogni style="" inline. Sobrio come aula.css, e con gli stessi
   colori: e' la stessa casa, non un'altra applicazione. */
:root {
  --blu: #1c3d5a;
  --carta: #f7f5f0;
  --riga: #ddd6c9;
  --ok: #2c6e49;
  --no: #9b2226;
  --attesa: #9a6700;
  --grigio: #67788a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; background: var(--carta); color: #22303c; }

header {
  background: var(--blu); color: #fff; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
header small { opacity: .8; }
main { max-width: 980px; margin: 0 auto; padding: 12px; }

.scheda {
  background: #fff; border: 1px solid var(--riga); border-radius: 10px;
  padding: 14px; margin-bottom: 12px;
}
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 16px 0 6px; }

button {
  background: var(--blu); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font: inherit;
}
button:disabled { background: #b6c2cd; cursor: not-allowed; }
button.piano { background: #fff; color: var(--blu); border: 1px solid var(--riga); }
button.rischio { background: var(--no); }

nav.barra { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
nav.barra select, nav.barra input { padding: 7px 8px; border: 1px solid var(--riga); border-radius: 8px; font: inherit; }

/* La tabella scorre DENTRO il suo riquadro invece di allargare la pagina.
   Senza, su un telefono l'intera pagina scivolava di lato di 73 pixel: chi
   conduce la Sala la usa anche da tablet, e una pagina che si sposta mentre si
   legge un elenco di pratiche e' il modo di perdere la riga che si stava
   guardando. Trovato da bin/sporgenze.js il 18/9/2026. */
.scorrevole { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--riga); vertical-align: top; }
th { color: var(--grigio); font-weight: 600; font-size: 13px; }
tbody tr.apribile { cursor: pointer; }
tbody tr.apribile:hover { background: #f3f6f9; }

/* Lo STATO si legge a colpo d'occhio: chi conduce la Sala guarda questo. */
.stato {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--riga); background: #f1f3f5; color: #33414d;
  white-space: nowrap;
}
.stato.attiva, .stato.approvata { background: #e6f4ea; border-color: #bcdfc8; color: var(--ok); }
.stato.revocata, .stato.rifiutata { background: #fbeaea; border-color: #eec6c6; color: var(--no); }
.stato.in_approvazione, .stato.in_addestramento { background: #fdf3d8; border-color: #ecd9a0; color: var(--attesa); }

/* Il modulo della nuova pratica. */
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
label { display: block; font-size: 13px; color: var(--grigio); margin-bottom: 3px; }
input, select, textarea {
  width: 100%; padding: 8px; border: 1px solid var(--riga); border-radius: 8px;
  font: inherit; background: #fff; color: inherit;
}
textarea { min-height: 76px; resize: vertical; }
.largo { grid-column: 1 / -1; }

/* La TIMELINE dell'audit: una riga per evento, con l'impronta di catena. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 2px solid var(--riga); padding: 0 0 12px 14px; position: relative; }
.timeline li::before {
  content: ''; position: absolute; left: -5px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blu);
}
.timeline .evento { font-weight: 600; }
.timeline .impronta { font-family: ui-monospace, monospace; font-size: 11px; color: var(--grigio); word-break: break-all; }

.coppie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.coppie div { border-bottom: 1px dotted var(--riga); padding-bottom: 4px; }
.coppie dt { font-size: 12px; color: var(--grigio); }
.coppie dd { margin: 0; }

.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.nota { color: var(--grigio); font-size: 13px; }
.nascosto { display: none; }
.centro { text-align: center; }

.avviso { border-radius: 8px; padding: 9px 12px; margin: 10px 0; border: 1px solid var(--riga); background: #f1f3f5; }
.avviso.errore { background: #fbeaea; border-color: #eec6c6; color: var(--no); }
.avviso.bene { background: #e6f4ea; border-color: #bcdfc8; color: var(--ok); }
.avviso.attenzione { background: #fdf3d8; border-color: #ecd9a0; color: var(--attesa); }