:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #dfe3e8;
  --text: #1c2430;
  --text-muted: #5b6472;
  --primary: #0066cc;
  --primary-dark: #0052a3;
  --danger: #e74c3c;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Una parola piu' larga dello schermo (un indirizzo email, un URL, un nome
   di file) va a capo invece di allargare la pagina. break-word e non
   anywhere: non cambia la larghezza minima delle celle di tabella, che
   restano leggibili e scorrono nel loro contenitore. */
body { overflow-wrap: break-word; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nessun tetto: ogni pagina arriva ai bordi dello schermo, meno il respiro
   laterale. C'erano tre varianti (1080 standard, 1320 "wide", senza tetto per
   designer e vista classica) e si vedeva: passando da una pagina all'altra il
   contenuto saltava avanti e indietro, e su uno schermo largo restavano fasce
   bianche mentre le tabelle scorrevano in orizzontale. Una sola regola, quindi
   nessun salto -- e niente piu' scelta da fare quando si aggiunge una pagina.
   Il prezzo e' che un modulo di pochi campi si allarga oltre il necessario:
   pagato dove serviva, arginato dal cap sui controlli piu' sotto. */
.container { max-width: none; margin: 0 auto; padding: 0 20px; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
/* Il marchio esteso al posto della scritta: l'altezza e' l'unica misura
   fissata, la larghezza segue le proporzioni del file (alto 144px contro i 48
   di resa, per restare nitido sugli schermi a densita' doppia e tripla).
   La topbar e' cresciuta con lui: 64px di barra lasciano 8px di respiro sopra
   e sotto il marchio, che a 56px sarebbe arrivato a filo. display:block toglie
   lo spazio sotto la riga di testo che l'immagine erediterebbe da inline. */
.topbar .logo { display: flex; align-items: center; flex: none; }
.topbar .logo img { display: block; height: 48px; width: auto; }
.topbar nav a { margin-right: 16px; color: var(--text-muted); font-size: 14px; }
.topbar nav a.active { color: var(--primary); font-weight: 600; }
.topbar .user-info { font-size: 14px; color: var(--text-muted); }
/* Voci e utente stanno in un contenitore solo perche' su schermo stretto
   devono richiudersi insieme dietro l'hamburger. Su schermo largo il
   contenitore prende lo spazio dopo il marchio e i margini automatici della
   <nav> la tengono al centro, come faceva lo space-between a tre elementi. */
.topbar-menu { flex: 1; min-width: 0; display: flex; align-items: center; margin-left: 24px; }
.topbar-menu nav { margin: 0 auto; }
.topbar-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; flex: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.topbar-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .15s ease, opacity .15s ease; }
.topbar-toggle { -webkit-tap-highlight-color: transparent; }
.topbar-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar-open .topbar-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar-open .topbar-toggle span:nth-child(2) { opacity: 0; }
.topbar-open .topbar-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* La soglia e' quella del menu piu' lungo, il fornitore: sette voci piu' nome
   e azienda smettono di stare su una riga poco sotto i 1200px, e a quel punto
   la barra andava a capo in colonne illeggibili sopra al titolo. Il menu
   aperto spinge giu' la pagina invece di coprirla: su un telefono non c'e'
   niente da vedere "dietro", e cosi' non serve gestire lo scroll bloccato. */
@media (max-width: 1180px) {
  .topbar .container { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .topbar .logo img { height: 44px; }
  .topbar-toggle { display: flex; }
  .topbar-menu {
    display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch;
    margin: 10px 0 0; padding-top: 4px; border-top: 1px solid var(--border);
  }
  .topbar.topbar-open .topbar-menu { display: flex; }
  .topbar-menu nav { margin: 0; display: flex; flex-direction: column; }
  .topbar nav a { margin: 0; padding: 12px 4px; font-size: 16px; border-bottom: 1px solid #eef0f3; }
  .topbar nav a:hover { text-decoration: none; background: var(--bg); }
  .topbar .user-info {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 14px 4px 4px; font-size: 15px;
  }
  .topbar .user-info .user-info-sep { display: none; }
  .topbar .user-info a[href="/logout.php"] { margin-left: auto; }
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 380px;
}
.auth-card h1 { font-size: 20px; margin: 0 0 4px; }
.auth-card p.subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
/* Il tetto e' la contropartita del .container senza tetto: "larghezza piena"
   deve valere per cio' che la sa usare -- tabelle, canvas, elenchi -- non per
   una casella "Nome" lunga quanto lo schermo, che e' piu' difficile da
   compilare, non piu' comoda.
   E' una variabile ereditata, non un valore fisso, cosi' i contenitori in cui
   il 100% e' voluto davvero la spengono per tutto cio' che contengono invece
   di dover elencare ogni singolo controllo: vedi --field-max piu' sotto. */
/* input[type=search] era rimasto fuori da questo elenco: la casella "Cerca"
   di pratiche.php restava larga quanto il default del browser -- una scatola
   di 180px in cima a un modulo di filtri. Si notava poco a 1080px, molto a
   tutta larghezza. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=search], input[type=date], select, textarea {
  width: 100%;
  max-width: var(--field-max, 560px);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

/* Dove il controllo DEVE riempire cio' che lo contiene: la cella di una
   tabella o di una griglia ripetibile (la colonna ha gia' la sua larghezza),
   una modale (ce l'ha anche lei, ed e' spesso piu' stretta del tetto), e
   l'editor di scripting, che di larghezza vive. */
table, dialog, .pv-modal, .repeatable-grid { --field-max: none; }

.js-inline-document-create { margin-top:8px; }
.inline-document-dialog { width:min(620px, calc(100vw - 32px)); max-height:85vh; }
.inline-document-dialog .instance-dialog-body form > label { margin-top:12px; }

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; text-align: center; margin-top: 20px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }

.alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-error { background: #fdecec; color: var(--danger); border: 1px solid #f5c6c6; }
.alert-success { background: #e8f6ec; color: #1c7c3c; border: 1px solid #bfe6cb; }
.alert-warning { background: #fff4e0; color: #8a5300; border: 1px solid #f2d9a6; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 13px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-todo { background: #e8f0fe; color: var(--primary-dark); }
.badge-watch { background: #f1eefb; color: #6b3fc4; }
.badge-muted { background: #eee; color: var(--text-muted); }
/* Un fatto che richiede un intervento, non uno stato fra gli altri: usa i
   colori dell'errore perche' e' quello che e' -- l'email non e' arrivata e
   qualcuno deve correggere l'indirizzo. */
.badge-danger { background: #fdecec; color: var(--danger); }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 16px;
}
.page-header h1 { font-size: 22px; margin: 0; }
.page-header nav { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-outline.active { border-color: var(--primary); color: var(--primary); background: #eaf3fc; }

/* Una tabella larga scorre dentro la card, mai la pagina: stesso principio
   di .do-grid-wrap e .process-table-wrap, per le tabelle che non ne avevano
   uno proprio. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table th { white-space: nowrap; }

.empty-state { color: var(--text-muted); padding: 24px; text-align: center; }

/* Dashboard unificata Processi. */
.processi-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0 28px;
}
.processi-heading h1 { margin: 0 0 6px; font-size: 28px; }
.processi-heading p { margin: 0; color: var(--text-muted); }
.processi-tools { width: min(100%, 480px); }
.processi-search { margin: 0 0 10px; }
.processi-search input[type=search] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.processi-search input[type=search]:focus { outline: 2px solid rgba(0,102,204,.18); border-color: var(--primary); }

/* -- Intestazione: titolo (con l'hamburger della vista classica accanto) a
   sinistra, ricerca e interruttore di vista a destra. -- */
.processi-heading-title { display: flex; align-items: center; gap: 14px; }
.classic-hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0 9px; flex: 0 0 40px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.classic-hamburger:hover { border-color: #cbd2da; background: #f7f9fb; }
.classic-hamburger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.classic-hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--text); }

/* Interruttore di vista: due <form> POST affiancati che devono leggersi come
   un unico controllo segmentato, da cui i bordi tolti all'interno. */
.view-switch { display: flex; justify-content: flex-end; }
.view-switch form { display: flex; }
.view-switch-btn {
  padding: 7px 14px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.view-switch form:first-child .view-switch-btn { border-radius: 8px 0 0 8px; }
.view-switch form:last-child .view-switch-btn { border-radius: 0 8px 8px 0; border-left: 0; }
.view-switch-btn:hover { background: #f7f9fb; color: var(--text); }
.view-switch-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.view-switch-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* -- Vista "classica": colonna dei processi + una tabella per volta. -- */
.classic-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 36px; }
/* La colonna sparisce dalla griglia invece di restare larga zero: cosi' la
   tabella si riprende davvero lo spazio, che e' il motivo per cui la si
   chiude. */
.classic-layout.classic-collapsed { grid-template-columns: minmax(0, 1fr); }
.classic-layout.classic-collapsed .classic-sidebar { display: none; }
.classic-sidebar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 0; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto;
}
.classic-nav-group + .classic-nav-group { margin-top: 6px; border-top: 1px solid #e9ecef; padding-top: 6px; }
.classic-nav-group h2 {
  margin: 0; padding: 10px 16px 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.classic-nav-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 16px; border: 0; border-left: 3px solid transparent; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.classic-nav-item:hover { background: #f7f9fb; color: var(--primary); }
.classic-nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.classic-nav-item.active { background: #eaf3fc; border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.classic-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classic-nav-plus { color: var(--text-muted); font-size: 17px; line-height: 1; }
.classic-nav-start:hover .classic-nav-plus { color: var(--primary); }

.classic-picker {
  display: none; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.classic-picker { -webkit-tap-highlight-color: transparent; }
.classic-picker:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.classic-picker-caption { color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.classic-picker-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
/* Disegnata e non un carattere: il triangolino Unicode cambia forma e verso
   da un font all'altro, e su Android usciva come una freccia a destra. */
.classic-picker-chevron {
  width: 9px; height: 9px; margin: -4px 4px 0 0; flex: none;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.classic-picker-open .classic-picker-chevron { transform: rotate(-135deg); margin-top: 4px; }

.classic-main { min-width: 0; }
.classic-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.classic-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid #e9ecef;
}
.classic-panel-header h2 { margin: 0; font-size: 18px; }
.classic-panel .process-table-wrap { max-height: calc(100vh - 220px); }
.classic-panel .functional-empty { padding: 22px 20px; }

.processi-section { margin-bottom: 36px; }
.processi-section-title { margin-bottom: 14px; }
.processi-section-title h2 { margin: 0; font-size: 20px; }
.processi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.functional-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; align-items: start; }
/* Quattro tile (Creazione, Da fare, In osservazione, Archiviate) stanno su
   una riga sola solo se c'e' spazio: sotto i 1100px tornano due per riga,
   invece di stringersi fino a rendere illeggibili i titoli delle pratiche. */
@media (max-width: 1100px) { .functional-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.process-tile {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.process-tile:hover { box-shadow: 0 6px 20px rgba(28,36,48,.08); border-color: #cbd2da; }
.functional-tile { height: 440px; display: flex; flex-direction: column; }
/* min-height: con quattro tile un titolo lungo ("In osservazione") va a capo
   mentre gli altri no, e i corpi delle tile partirebbero ad altezze diverse.
   Riservare l'altezza di due righe li tiene allineati comunque. */
.functional-tile > h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 17px 20px; min-height: 62px; box-sizing: border-box; border-bottom: 1px solid #e9ecef; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
.functional-tile-body { flex: 1; min-height: 0; overflow: auto; }
.tile-dialog-trigger { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 0; border-radius: 6px; background: #eaf3fc; color: var(--primary); cursor: pointer; }
.tile-dialog-trigger:hover { background: #d8eafb; }
.tile-dialog-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tile-dialog-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.functional-empty { min-height: 290px; padding: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; font-size: 14px; }
.compact-practice-list { display: flex; flex-direction: column; }
.compact-practice-row { width: 100%; padding: 15px 20px; border: 0; border-bottom: 1px solid #e9ecef; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.compact-practice-row:last-child { border-bottom: 0; }
.compact-practice-row:hover { background: #f7f9fb; color: var(--primary); }
.compact-practice-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.compact-practice-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.compact-practice-row:hover .compact-practice-icon { stroke: var(--primary); }
.creation-process-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid #e9ecef; }
.creation-process-row:last-child { border-bottom: 0; }
.creation-process-row strong { display: block; font-size: 14px; }
.creation-process-row p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.process-table-wrap { width: 100%; overflow: auto; }
.processi-table { min-width: 650px; }
.processi-table th, .processi-table td { white-space: nowrap; padding: 8px; }
.processi-table .filter-row input { min-width: 80px; }
.practice-link { border: 0; padding: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.practice-link:hover { text-decoration: underline; }
.processi-ongoing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ongoing-tile { height: 440px; display: flex; flex-direction: column; }
.ongoing-tile-header {
  width: 100%;
  padding: 18px 20px;
  border-bottom: 1px solid #e9ecef;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
}
.ongoing-tile-body { flex: 1; min-height: 0; overflow: auto; }
.ongoing-title { font-size: 17px; font-weight: 700; }
.process-count-badge { padding: 4px 9px; border-radius: 20px; background: #f1f3f5; color: #46505c; font-size: 12px; font-weight: 600; white-space: nowrap; }
.process-list-dialog {
  width: min(1100px, calc(100vw - 40px));
  max-width: 1100px;
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.process-list-dialog::backdrop { background: rgba(16, 24, 40, .52); }
.process-list-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.process-list-dialog-header h2 { margin: 0 0 4px; font-size: 20px; }
.process-list-dialog-header p { margin: 0; color: var(--text-muted); font-size: 13px; }
.process-list-dialog .process-table-wrap { max-height: calc(100vh - 165px); padding: 12px 22px 22px; }
.process-instance-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid #edf0f3; }
.process-instance-row:last-of-type { border-bottom: 0; }
.instance-summary { flex: 1; min-width: 0; }
.instance-summary strong { display: block; margin-bottom: 6px; font-size: 14px; overflow-wrap: anywhere; }
.instance-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--text-muted); font-size: 12px; }
.instance-state { font-weight: 700; }
.instance-state.urgent { color: #e74c3c; }
.instance-state.due-soon { color: #f39c12; }
.instance-state.normal { color: #7f8c8d; }
.tile-no-results { padding: 18px 0; color: var(--text-muted); text-align: center; font-size: 13px; }
.processi-empty { padding: 22px; border: 1px dashed #cbd2da; border-radius: 12px; color: var(--text-muted); background: rgba(255,255,255,.55); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 720px) {
  .processi-heading { align-items: stretch; flex-direction: column; margin-top: 24px; }
  .processi-tools { width: 100%; }
  .processi-grid, .functional-tiles, .processi-ongoing-grid { grid-template-columns: minmax(0, 1fr); }
  /* Su schermo stretto la colonna della vista classica va sopra la tabella,
     non accanto: 260px + una tabella non ci stanno. */
  .classic-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .classic-sidebar { position: static; max-height: none; }
  /* Selettore al posto del secondo hamburger: la colonna e' una tendina,
     chiusa finche' non la si apre, qualunque cosa ricordi lo stato "colonna
     chiusa" del desktop (per questo le due regole di display qui sotto
     vengono dopo .classic-collapsed e hanno la sua stessa specificita'). */
  .classic-hamburger { display: none; }
  .classic-picker { display: flex; }
  .classic-layout .classic-sidebar, .classic-layout.classic-collapsed .classic-sidebar { display: none; }
  .classic-layout.classic-picker-open .classic-sidebar { display: block; }
  .view-switch { justify-content: flex-start; }
  .functional-tile { height: auto; min-height: 320px; }
  .process-list-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .process-instance-row { align-items: flex-start; }
}

.step-list { list-style: none; margin: 0; padding: 0; }
.step-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: grab;
}
.step-item .step-order {
  background: var(--bg);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.step-item.dragging { opacity: 0.4; }

dialog.creazione-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
dialog.creazione-dialog::backdrop {
  background: rgba(0,0,0,0.45);
}

/* -- Righe di tabella cliccabili (ToDo/Watch, Creazione): l'intera riga
   apre la modale invece di un bottone dedicato in colonna -- vedi
   [data-open-dialog] in runtime-ui.js. -- */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: var(--bg); }
.row-chevron { color: var(--text-muted); text-align: right; width: 20px; }

/* -- Filtro testuale per colonna (ToDo/Watch): una riga sotto l'header con
   un input per colonna, filtrata via JS (applyColumnFilters() in
   runtime-ui.js) -- stessa tabella del resto dell'app, solo un input più
   piccolo al posto del testo della colonna. -- */
tr.filter-row th {
  padding: 4px 10px 8px;
}
tr.filter-row input[type=text] {
  width: 100%;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: normal;
}

/* -- Modale "quasi schermo intero" per la pratica (ToDo/Watch): tab
   orizzontali in testa (una per form disponibile sullo stage corrente),
   corpo scrollabile, footer con le azioni dello stage -- vedi
   render_instance_dialog() in dashboard.php. -- */
/* [open] è necessario, non decorativo: dialog.instance-dialog da solo ha la
   STESSA specificità di "dialog:not([open])" nello UA stylesheet (0,0,1,1
   in entrambi i casi) -- senza [open] questa regola vince il pareggio per
   ordine nel cascade e forza display:flex anche a dialog chiuso, che quindi
   resta nel normale flusso del documento invece di sparire, rompendo il
   layout della pagina e intercettando i click destinati ad altri elementi. */
dialog.instance-dialog[open] {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(1200px, 96vw);
  height: min(820px, 92vh);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
dialog.instance-dialog::backdrop {
  background: rgba(0,0,0,0.45);
}
/* Effetto "carte impilate", INVERTITO su correzione esplicita rispetto al
   primo giro di questa rifinitura: la Modale 1 (l'antenato, sotto) NON
   viene più toccata in nessun modo quando si apre una Modale 2 sopra di lei
   -- resta sempre a piena dimensione (regola sopra, invariata). È invece la
   Modale 2 stessa, quando aperta in impilamento (data-stack-dialog, vedi
   runtime-ui.js), a diventare più COMPATTA e centrata -- cosi i bordi della
   Modale 1 a piena dimensione restano visibili tutt'intorno, non solo su un
   margine. ~75% delle dimensioni normali in entrambe le direzioni. */
dialog.instance-dialog.dialog-stacked-on-top {
  width: min(900px, 76vw);
  height: min(620px, 68vh);
}
/* Resta necessario ANCHE con la Modale 2 più piccola: il ::backdrop di un
   <dialog> copre comunque l'INTERO viewport nel top layer, non solo l'area
   dietro al proprio riquadro per quanto ridotto -- quello della Modale 2
   (aperta dopo, quindi sopra nello stacking) scurirebbe/coprirebbe
   comunque l'intera Modale 1 sottostante se non reso trasparente (bug
   confermato con screenshot reali + document.elementFromPoint()/un
   backdrop rosso opaco di prova). Lo scurimento della pagina resta fornito
   dal ::backdrop della Modale 1, mai toccata. */
dialog.instance-dialog.dialog-stacked-on-top::backdrop {
  background: transparent;
}
/* Decisione 111: un dialogo che contiene una griglia ripetibile si allarga,
   fino a 1180 px ed entro il 95% della finestra, cosi' le sue colonne, con
   intestazioni e aiuti, si leggono senza scorrere di lato. Senza griglia il
   dialogo resta com'e' (480 px la creazione, 900 px la Modale 2 impilata).
   Sotto i 600 px non cambia niente: la griglia e' gia' una scheda per riga
   (vedi sotto, @media max-width 760px), e la Modale 2 e' a tutto schermo.
   `:has()` e' letto da Chrome 105, Safari 15.4 e Firefox 121: un browser piu'
   vecchio ignora la regola e tiene la larghezza di prima. */
@media (min-width: 601px) {
  dialog.creazione-dialog:has(fieldset.repeatable-grid) { width: min(1180px, 95vw); max-width: 95vw; }
}
@media (min-width: 761px) {
  dialog.instance-dialog.dialog-stacked-on-top:has(fieldset.repeatable-grid) { width: min(1180px, 95vw); }
}
.instance-dialog-header {
  flex-shrink: 0;
  padding: 16px 20px 0;
}
.instance-dialog-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.instance-dialog-title { font-size: 16px; font-weight: 700; margin: 0; }
.instance-dialog-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.instance-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.instance-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.instance-tab-btn:hover:not(.active) { color: var(--text); }

.instance-dialog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}
.instance-tab-panel { display: none; }
.instance-tab-panel.active { display: block; }

.instance-dialog-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.instance-dialog-footer .footer-spacer { flex: 1; }

.ro-field { margin-bottom: 14px; }
.ro-field-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }

/* -- Campo Radio Group a runtime (core/forms.php::render_form_field_input()):
   opzioni una sotto l'altra, stesso spacing delle altre etichette. -- */
.form-radio-group { margin-top: 4px; }
.form-radio-option { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.form-radio-option input[type=radio] { margin: 0; }

/* -- Campo Allegato: nome/link del file già caricato sopra l'input di
   sostituzione, quando presente. -- */
.form-attachment-current { font-size: 13px; color: var(--text-muted); margin: 4px 0 8px; }

/* -- Un blocco per azione nella modale "Avvia" di creazione.php: ogni
   azione dello stage di creazione ha ormai la sua form indipendente, un
   separatore leggero le distingue quando ce n'è più di una. -- */
.creazione-action-block { border-top: 1px solid var(--border); padding-top: 4px; }
.creazione-action-block:first-of-type { border-top: none; padding-top: 0; }

/* -- Selettore "N ruoli tra M" condiviso (public/assets/js/role-select.js):
   un bottone che riassume la selezione, un popup con una checkbox per riga
   al click -- stesso componente ovunque nell'app si assegnino più ruoli
   (admin/users.php, designer ToDo/Watch/"Available to roles"). -- */
.role-select-trigger {
  display: block;
  width: 100%;
  /* Sta in fila con gli altri controlli di un modulo e deve avere il loro
     stesso tetto, altrimenti e' l'unico che scappa a tutta larghezza. */
  max-width: var(--field-max, 560px);
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  color: var(--text);
}
.role-select-trigger:hover { border-color: var(--primary); }
.role-select-popup {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.role-select-row {
  display: block;
  font-weight: normal;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.role-select-row:hover { background: var(--bg); }
.role-select-row input[type=checkbox] { margin-right: 4px; }
.role-select-empty { font-size: 13px; color: var(--text-muted); padding: 6px 8px; }
.ro-field-value { font-size: 14px; }

/* -- Indicatore di caricamento globale ritardato (vedi runtime-ui.js): mai
   visibile subito, solo se una navigazione/submit resta in attesa oltre la
   soglia -- niente lampeggiamenti su risposte già veloci. Nascosto di
   default via opacity+pointer-events (non display:none, per poter
   transizionare la comparsa invece di uno scatto secco); .visible è
   l'unica classe che JS aggiunge/toglie. */
.global-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.global-loader.visible {
  opacity: 1;
  pointer-events: auto;
}
.global-loader-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: global-loader-spin 0.7s linear infinite;
}
@keyframes global-loader-spin {
  to { transform: rotate(360deg); }
}

/* -------------------- Oggetti dati (admin) --------------------
   Due tabelle a celle editabili: la struttura di un oggetto
   (admin/data_objects.php) e la griglia dei suoi record
   (admin/data_object_records.php). Gli input dentro una cella devono
   perdere il margine verticale che hanno di default come campi di form a
   pila (app.css sopra), altrimenti ogni riga della tabella diventa alta il
   doppio del necessario. */

/* Una griglia larga scorre DENTRO il proprio contenitore: la pagina non
   deve mai scorrere orizzontalmente per colpa sua. */
.do-grid-wrap { overflow-x: auto; }

.do-fields-table, .do-records-table { min-width: 100%; }
.do-fields-table th, .do-records-table th { white-space: nowrap; }
.do-fields-table td, .do-records-table td { vertical-align: middle; }

.do-fields-table input[type=text],
.do-fields-table select,
.do-fields-table textarea,
.do-records-table input[type=text],
.do-records-table input[type=number],
.do-records-table input[type=date],
.do-records-table input[type=datetime-local],
.do-records-table select,
.do-records-table textarea {
  margin: 0;
  width: 100%;
  min-width: 120px;
}

.do-fields-table textarea, .do-records-table textarea { min-height: 0; }

/* Campo Relazione nell'editor di struttura: due tendine impilate (oggetto
   bersaglio + campo etichetta) nella stessa cella che per gli altri tipi
   ospita le opzioni scritte a mano -- si alternano, non convivono. */
.do-field-relation select { margin-bottom: 4px; }
.do-field-relation select:last-child { margin-bottom: 0; }

/* Colonna a scelta collegata a un oggetto dati (form-designer.js): quando
   la fonte è un oggetto, l'elenco di opzioni scritte a mano non sparisce ma
   si ritira dietro una nota -- così togliere la fonte lo ritrova intatto. */
.fd-options-source-note {
  color: var(--text-muted);
  font-size: 11px;
  margin: 4px 0 0;
}

/* Griglia ripetibile delle form di processo. */
/* min-width: 0 toglie il min-content che i browser danno ai <fieldset>: senza,
   il riquadro si allarga quanto la tabella e a scorrere di lato e' l'intera
   modale invece della sola .repeatable-grid-scroll. */
.repeatable-grid { border: 1px solid var(--border); border-radius: 8px; margin: 14px 0; padding: 12px; min-width: 0; }
.repeatable-grid legend { font-weight: 600; padding: 0 6px; }
.repeatable-grid-scroll { overflow-x: auto; }
.repeatable-grid table { min-width: 100%; }
.repeatable-grid th { white-space: nowrap; }
/* Aiuto di colonna (decisione 107): sotto l'intestazione, a capo e piu' stretto del campo. */
.repeatable-grid th .field-help { white-space: normal; min-width: 180px; max-width: 260px; margin: 4px 0 0; font-weight: 400; }
.repeatable-grid td { vertical-align: top; }
.repeatable-grid td input, .repeatable-grid td select, .repeatable-grid td textarea { margin: 0; min-width: 120px; }
.repeatable-grid td textarea { min-height: 42px; }
.repeatable-grid-total { float: right; padding: 7px 4px; }
/* Piu' riepiloghi (decisione 105): ognuno sotto il precedente, allineati a destra, invece di affiancarsi. */
.repeatable-grid-total + .repeatable-grid-total { clear: right; padding-top: 2px; }
.repeatable-grid-total-later { color: var(--text-muted); }
.inline-document-dialog { width: min(560px, calc(100vw - 32px)); }

/* Campo Documento con "ogni volta un documento nuovo": al posto dell'elenco
   c'è il documento collegato a questa riga, e nient'altro. */
.document-reference-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.document-reference-cell .btn {
  white-space: nowrap;
}
.document-reference-chosen {
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---------- Pannello fornitore, piani e assistenza ---------- */
/* Nessuna nuova palette: gli stessi token di :root gia' usati dal resto
   dell'applicazione (--primary per il proprio, --danger per lo sforamento,
   --text-muted per il contorno), cosi' queste pagine appartengono
   visivamente al prodotto invece di sembrare un'area a parte. */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-label { margin-top: 4px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

.usage-row { margin: 12px 0; }
.usage-row-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 4px; }
.usage-row-head .usage-numbers { color: var(--text-muted); }
.usage-bar { height: 8px; border-radius: 999px; background: #e9edf2; overflow: hidden; }
.usage-bar-fill { height: 100%; background: var(--primary); }
.usage-bar-fill.over { background: var(--danger); }
.usage-unlimited { color: var(--text-muted); font-size: 12px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.plan-card.current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.plan-card h3 { margin: 0; font-size: 17px; }
.plan-price { margin: 8px 0 14px; font-size: 24px; font-weight: 700; }
.plan-price small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.plan-card ul { margin: 0 0 16px; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.plan-card ul li { margin: 3px 0; }
.plan-card .plan-cta { margin-top: auto; }

.support-thread { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.support-message { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
/* La risposta del fornitore si distingue dal proprio messaggio a colpo
   d'occhio: in un thread di assistenza sapere "chi ha parlato" conta piu'
   del testo stesso. */
.support-message-provider { background: #eef4fd; border-color: #cfe0f7; }
.support-message-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.support-message-body { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }

/* -- Store: colonna dei filtri a sinistra, catalogo a destra. --
   Stessa forma della colonna della vista classica (.classic-sidebar):
   larghezza fissa, appiccicata in alto mentre il catalogo scorre, e sopra al
   catalogo -- non accanto -- quando lo schermo non regge due colonne. */
.store-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.store-layout-empty { grid-template-columns: minmax(0, 1fr); }
.store-filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto;
}
.store-filters h2 {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.store-filters-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #e9ecef;
  color: var(--text-muted); font-size: 12px;
}
@media (max-width: 900px) {
  .store-layout { grid-template-columns: minmax(0, 1fr); }
  .store-filters { position: static; max-height: none; }
}

/* -- Store: guida di approfondimento di un flusso (public/store_guida.php). --
   E' l'unica pagina applicativa con una misura di lettura: qui non si opera,
   si legge un documento lungo con una trentina di schermate, e a tutta
   larghezza su uno schermo largo le righe di testo diventerebbero illeggibili
   mentre le schermate si ingrandirebbero oltre la loro risoluzione. */
.guide { max-width: 1120px; margin: 0 auto; padding: 8px 0 72px; }
.guide-back { margin: 16px 0 0; font-size: 14px; }
.guide-back-end { margin-top: 48px; }
.guide-header { padding: 28px 0 24px; border-bottom: 2px solid var(--text); }
.guide-eyebrow, .guide-section-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0f6e55;
}
.guide-header h1 { margin: 0 0 12px; font-size: clamp(30px, 4.5vw, 44px); line-height: 1.1; }
.guide-summary { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-muted); max-width: 70ch; }
.guide-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  margin: 24px 0 0; background: var(--border); border: 1px solid var(--border);
}
.guide-facts div { background: var(--surface); padding: 10px 14px; }
.guide-facts dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.guide-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.guide-disclaimer {
  margin: 16px 0 0; padding: 10px 14px; font-size: 13px; color: #6a4b0e;
  background: #fbf3e2; border-left: 3px solid #c9971f;
}
.guide-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.guide-toc { margin: 24px 0 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-toc ol { margin: 0; padding-left: 20px; columns: 2 240px; column-gap: 32px; font-size: 14px; line-height: 1.8; }

.guide-section { padding-top: 48px; scroll-margin-top: 16px; }
.guide-section h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.guide-intro, .guide-text { font-size: 16px; line-height: 1.6; max-width: 72ch; }
.guide-intro { color: var(--text-muted); margin: 0 0 20px; }
.guide-text { margin: 0 0 14px; }
.guide-note { margin: -6px 0 16px 18px; padding: 8px 12px; border-left: 4px solid #8a6212; background: #fbf3e0; color: #5c4208; font-size: 14px; font-style: italic; }
.guide-note::before { content: "Non va nella lettera"; display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.guide-list { margin: 0 0 14px; padding-left: 22px; max-width: 72ch; line-height: 1.6; }
.guide-list li { margin-bottom: 8px; }
.guide code {
  font-size: .9em; background: #eef1f4; border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px;
}

.guide-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.guide-table-wrap table { min-width: 640px; }
.guide-table-wrap td { vertical-align: top; line-height: 1.5; }
.guide-person { font-weight: 600; white-space: nowrap; }

.guide-role {
  display: inline-block; padding: 2px 8px; border: 1px solid currentColor; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.guide-c-verde { color: #0f6e55; }
.guide-c-rosso { color: #a33327; }
.guide-c-ambra { color: #8a6212; }
.guide-c-blu { color: #1f4f8f; }
.guide-c-inchiostro { color: var(--text); }
.guide-c-grigio { color: var(--text-muted); }

.guide-map { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-map-stop { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
.guide-stage {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #9aa5b1;
  border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column;
}
.guide-stage-creazione { border-left-color: #0f6e55; }
.guide-stage-archivio { border-left-color: var(--text-muted); background: #f0f2f5; }
.guide-stage-name { font-weight: 700; font-size: 13px; letter-spacing: .03em; }
.guide-stage-who { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.guide-branches { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.guide-branches li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.guide-when { font-size: 12px; font-weight: 600; color: #8a6212; background: #f5ebd6; padding: 1px 8px; border-radius: 3px; white-space: nowrap; }
.guide-target { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text); }
.guide-branch-severe .guide-target { color: #a33327; }
.guide-map-note { padding: 12px 16px; border: 1px dashed #b9c4bd; background: #f3f6f4; font-size: 14px; line-height: 1.55; }

.guide-step { margin: 36px 0 0; }
.guide-step figcaption { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 24px; padding-bottom: 12px; }
.guide-step-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 2px; }
.guide-step-number { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.guide-step h3 { margin: 0 0 4px; font-size: 18px; }
.guide-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 70ch; }
.guide-step img {
  display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(28, 36, 48, .06), 0 8px 24px rgba(28, 36, 48, .06);
}

/* "Come adottarlo": prima l'elenco dei passi, da leggere in un colpo
   d'occhio, poi gli stessi passi illustrati. Il numero e' un cerchio pieno e
   non l'occhiello "Passo NN" del percorso: sono i passi di chi adotta, non
   quelli di chi lavora nel flusso, e non devono confondersi con loro. */
.guide-adoption-summary {
  margin: 0 0 8px; padding: 16px 20px 16px 44px; background: #e2efe9;
  border: 1px solid #b7d6c8; border-radius: var(--radius); font-size: 15px; line-height: 1.9;
  font-weight: 600; color: #0b4f3d;
}
.guide-adoption-step { margin: 32px 0 0; }
.guide-adoption-step figcaption { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 12px; }
.guide-adoption-number {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: #0f6e55; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.guide-adoption-step h3 { margin: 4px 0 4px; font-size: 18px; }
.guide-adoption-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 70ch; }
.guide-adoption-step img + img { margin-top: 16px; }
.guide-adoption-step img {
  display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(28, 36, 48, .06), 0 8px 24px rgba(28, 36, 48, .06);
}

@media (max-width: 760px) {
  .guide-map-stop, .guide-step figcaption { grid-template-columns: 1fr; }
  .guide-step-who { flex-direction: row; align-items: center; }
}

/* Pagine legali (informativa, termini) -- layout standalone come le pagine
   pre-autenticazione: si leggono anche senza essere collegati, quindi non
   passano da render_topbar(). Misura di lettura stretta e non la larghezza
   piena delle pagine applicative: qui si legge, non si opera. */
.legal-page { background: var(--bg); padding: 24px 16px 64px; }
.legal-doc {
  max-width: 720px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 32px 36px;
  line-height: 1.65;
}
.legal-back { margin: 0 0 20px; font-size: 14px; }
.legal-doc h1 { font-size: 24px; margin: 0 0 4px; }
.legal-doc h2 { font-size: 16px; margin: 28px 0 8px; }
.legal-doc p, .legal-doc li { font-size: 15px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0 16px; }
.legal-version {
  margin: 0 0 20px; color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.legal-draft { margin-bottom: 24px; }
/* Segnaposto ancora da compilare: visibili di proposito. Un segnaposto
   invisibile e' un segnaposto che finisce in produzione. */
.legal-todo {
  background: #fff3cd; border-bottom: 1px dashed #b8860b;
  color: #6b4e00; padding: 0 3px;
}
.legal-links { font-size: 14px; color: var(--text-muted); }
.legal-links a { color: var(--text-muted); }
/* Accettazione alla registrazione: la casella e il suo testo su una riga
   sola, allineati in alto perche' il testo va a capo. */
.legal-accept {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 20px 0 4px; font-size: 14px; line-height: 1.5;
}
.legal-accept input { width: auto; margin: 3px 0 0; flex: none; }

/* Piano scelto sulla vetrina, mostrato in cima al modulo di registrazione:
   chi ha cliccato "Business" deve ritrovare Business scritto qui, non
   un'iscrizione generica. Non e' una card: e' un riquadro di contesto dentro
   una card che c'e' gia'. */
.signup-plan {
  border: 1px solid var(--primary); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 20px; background: #f5f8ff;
}
.signup-plan-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.signup-plan-name { font-size: 16px; font-weight: 700; }
.signup-plan-price { font-size: 14px; color: var(--text-muted); margin-left: 6px; }
.signup-plan-note { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.signup-plan-change { display: inline-block; margin-top: 8px; font-size: 13px; }

/* Filtri dello Storico (pratiche.php): la ricerca libera occupa la riga
   intera, gli altri filtri si dispongono in colonne quante ne entrano. */
.pratiche-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.pratiche-filter-search { grid-column: 1 / -1; }
.pratiche-filters-toggle { display: none; }
/* Su un telefono otto campi in colonna spingevano i risultati due schermate
   piu' giu': resta la ricerca, il resto si apre dal pulsante. La classe la
   mette runtime-ui.js, quindi senza JS non si nasconde niente. */
@media (max-width: 760px) {
  .js-filters-collapsible .pratiche-filters-toggle { display: block; grid-column: 1 / -1; justify-self: start; }
  .js-filters-collapsible:not(.filters-open) .pratiche-filters-grid > :not(.pratiche-filter-search):not(.pratiche-filters-toggle) { display: none; }
}

/* Pagina Log del pannello fornitore. Il livello e' un'informazione da
   cogliere scorrendo la colonna, non da leggere: colore e peso fanno il
   lavoro che farebbe rileggere ogni riga. */
.log-settings, .log-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.log-settings label, .log-filters label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 4px;
}
.log-settings select, .log-settings input, .log-filters select, .log-filters input { margin: 0; }
.log-level {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid transparent;
}
.log-level-debug    { background: #eef2f5; color: #55636b; border-color: #dde4e9; }
.log-level-info     { background: #e8f1fd; color: #1c4e86; border-color: #cfe0f7; }
.log-level-warning  { background: #fdf3d8; color: #7a5a05; border-color: #f2e2ae; }
.log-level-error    { background: #fbe4e1; color: #96322a; border-color: #f2cac4; }
.log-level-critical { background: #96322a; color: #fff; border-color: #7d271f; }
.log-context summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.log-context pre {
  margin: 6px 0 0; padding: 8px; background: #f6f8f9; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
.log-path { font-size: 11px; color: var(--text-muted); margin-top: 4px; word-break: break-all; }
.log-muted { color: var(--text-muted); font-size: 12px; }
.log-pager { display: flex; gap: 8px; margin-top: 14px; }

/* I controlli del catalogo codici partono dalla stessa linea anche quando
   le etichette occupano un numero diverso di righe. */
.discount-code-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px 16px;
  --field-max: none;
}
.discount-code-fields > div { display: flex; flex-direction: column; min-width: 0; }
.discount-code-fields label { flex: 1; margin-top: 12px; }
.discount-code-fields input, .discount-code-fields select { box-sizing: border-box; }

.company-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  max-width: 1000px;
  --field-max: none;
}
.company-create-form > div { display: flex; flex-direction: column; min-width: 0; }
.company-create-form label { flex: 1; margin: 0 0 6px; }
.company-create-form input, .company-create-form select { box-sizing: border-box; }
.company-create-invitation, .company-create-actions { grid-column: 1 / -1; }
.company-create-invitation label { display: flex; align-items: baseline; gap: 8px; }
.company-create-invitation small { color: var(--text-muted); }
.company-create-actions { align-items: flex-start; }
@media (max-width: 760px) {
  .company-create-form { grid-template-columns: minmax(0, 1fr); }
}

.log-system {
  margin: 0; padding: 12px; background: #14202a; color: #d6e2e8;
  border-radius: 8px; font-size: 12px; line-height: 1.5;
  max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Schermo stretto (telefono) ----------
   Le regole di pagina restano accanto ai loro componenti; qui solo cio' che
   vale per tutta l'applicazione quando lo schermo e' quello di un telefono:
   meno respiro laterale, card meno imbottite, la barra secondaria (Admin,
   Fornitore) come striscia orizzontale che scorre invece di tre righe di
   bottoni, e le modali della pratica a schermo intero. */
@media (max-width: 760px) {
  .container { padding: 0 14px; }
  .card { padding: 16px; }
  /* nowrap: in colonna, con il wrap ogni riga prenderebbe la larghezza del
     proprio contenuto invece di quella della pagina. */
  .page-header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 18px 0 14px; }
  .page-header h1 { font-size: 20px; }
  .page-header nav {
    position: relative; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none;
  }
  .page-header nav::-webkit-scrollbar { display: none; }
  .page-header nav .btn { flex: none; white-space: nowrap; padding: 8px 12px; }

  .auth-card { width: 100%; max-width: 380px; padding: 24px 20px; }
  .auth-page { padding: 16px; }

  dialog.instance-dialog[open], dialog.instance-dialog.dialog-stacked-on-top {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .instance-dialog-body { padding: 16px; }
  .instance-dialog-footer { padding: 12px 16px; }
  .instance-dialog-footer .btn { flex: 1 1 auto; text-align: center; }

  /* Griglia ripetibile EDITABILE: una scheda per riga, etichetta sopra ogni
     campo. Cinque colonne di controlli da scorrere di lato una per una sono
     il modo peggiore di compilare su un telefono. La griglia in sola lettura
     resta una tabella: si legge, e scorrerla basta. */
  fieldset.repeatable-grid { padding: 10px; }
  fieldset.repeatable-grid table, fieldset.repeatable-grid tbody,
  fieldset.repeatable-grid tr, fieldset.repeatable-grid td { display: block; width: 100%; }
  fieldset.repeatable-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  fieldset.repeatable-grid tr.js-grid-row {
    position: relative; margin: 0 0 12px; padding: 8px 12px 12px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  }
  fieldset.repeatable-grid td { padding: 6px 0; border: 0; }
  /* L'intestazione sparisce: l'aiuto della colonna si ripete sotto la cella della prima riga. */
  fieldset.repeatable-grid tr.js-grid-row:first-child td[data-help]::after { content: attr(data-help); display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
  fieldset.repeatable-grid td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
  }
  fieldset.repeatable-grid td input, fieldset.repeatable-grid td select,
  fieldset.repeatable-grid td textarea { min-width: 0; width: 100%; }
  fieldset.repeatable-grid td.repeatable-grid-row-actions { position: absolute; top: 6px; right: 8px; width: auto; padding: 0; }
  fieldset.repeatable-grid tr.js-grid-row td:first-child { padding-right: 48px; }
  .repeatable-grid-total { float: none; text-align: right; }

  .legal-doc { padding: 22px 18px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: 1fr; }

  /* 16px e' la misura sotto la quale Safari su iPhone ingrandisce la pagina
     al tocco su un campo, e poi non torna indietro da solo. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=datetime-local], input[type=search], input[type=date], select, textarea { font-size: 16px; }
}

/* Aiuto di un campo (decisione 100): testo semplice sotto il campo. */
.field-help { margin: 4px 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-muted); max-width: 72ch; }
.ro-field .field-help { margin: 2px 0 0; }