/* =====================================================================
   ISONLAB GEST — Design System
   Derivato da toki-template/theme.md.

   Principio applicato: il glassmorphism e' riservato alla "cornice"
   (sidebar, topbar, modali, schede di sintesi). Le superfici che
   contengono dati densi — tabelle, form lunghi — restano solide e ad
   alto contrasto: un gestionale si legge per ore e il blur sotto
   migliaia di righe e' faticoso da leggere e costoso da comporre.
   ===================================================================== */

/* ---------- 1. Token ---------- */
:root {
  /* Palette ufficiale Toki */
  --bg-main:        #e2e6eb;
  --text-main:      #443c3c;
  --brand-blue:     #3c94d4;
  --brand-blue-dark:#2b7ab5;
  --brand-blue-soft:#eaf4fc;

  /* Superfici */
  --glass-bg:       rgba(255, 255, 255, 0.40);
  --glass-bg-solid: rgba(255, 255, 255, 0.72);
  --glass-border:   rgba(255, 255, 255, 0.60);
  --glass-shadow:   0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --surface:        #ffffff;
  --surface-2:      #f6f8fa;
  --surface-3:      #eef1f5;
  --border:         #d9dfe6;
  --border-strong:  #c3ccd6;

  /* Testo */
  --text-2:         #6b6363;
  --text-3:         #938c8c;
  --text-inv:       #ffffff;

  /* Semantica */
  --ok:             #2e9e6b;
  --ok-soft:        #e6f5ee;
  --warn:           #d68b1f;
  --warn-soft:      #fdf3e2;
  --danger:         #d1495b;
  --danger-soft:    #fceaec;
  --info:           var(--brand-blue);
  --info-soft:      var(--brand-blue-soft);
  --neutral:        #8a9199;
  --neutral-soft:   #eef1f4;
  --viola:          #7c5cbf;
  --viola-soft:     #f0ebfa;

  /* Forma e movimento */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.4s var(--ease);

  --sidebar-w: 248px;
  --sidebar-w-min: 72px;
  --topbar-h: 62px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Tema scuro: stessi colori di marca, ruoli invertiti.
   Serve davvero in un gestionale usato anche di sera in laboratorio. */
[data-tema="scuro"] {
  --bg-main:        #1b1f24;
  --text-main:      #e8eaed;
  --brand-blue-soft:#15293a;

  --glass-bg:       rgba(40, 46, 54, 0.52);
  --glass-bg-solid: rgba(38, 44, 52, 0.86);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-shadow:   0 8px 32px 0 rgba(0, 0, 0, 0.30);
  --surface:        #23282f;
  --surface-2:      #1f242a;
  --surface-3:      #2a3037;
  --border:         #353c45;
  --border-strong:  #464e58;

  --text-2:         #a9b0b8;
  --text-3:         #7d858e;

  --ok-soft:        #16302a; --warn-soft: #34291a;
  --danger-soft:    #37202a; --neutral-soft: #2a3037;
  --viola-soft:     #272138;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;            /* lo scroll vive dentro le aree, non sul body */
}

#sfondo {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* ---------- 2. Struttura ---------- */
#app { position: relative; z-index: 1; display: flex; height: 100vh; }

/* --- Sidebar --- */
#sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--glass-bg-solid);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-border);
  transition: width var(--t), flex-basis var(--t);
  overflow: hidden;
}
body.sidebar-ridotta #sidebar { width: var(--sidebar-w-min); flex-basis: var(--sidebar-w-min); }
body.sidebar-ridotta .nav-testo,
body.sidebar-ridotta .nav-gruppo-titolo,
body.sidebar-ridotta .sidebar-marchio-testo,
body.sidebar-ridotta .nav-badge { opacity: 0; pointer-events: none; }

.sidebar-marchio {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px; flex: 0 0 auto;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer; user-select: none;
}
.sidebar-marchio img { width: 30px; height: 30px; flex: 0 0 30px; }
.sidebar-marchio-testo { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.3px; white-space: nowrap; transition: opacity var(--t); }
.sidebar-marchio-testo small { display: block; font-size: 0.64rem; font-weight: 400;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); margin-top: -2px; }

#nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 20px; }
.nav-gruppo-titolo {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-3); padding: 16px 10px 6px; white-space: nowrap; transition: opacity var(--t);
}
.nav-voce {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--r-md);
  color: var(--text-2); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  cursor: pointer; border: 1px solid transparent;
}
.nav-voce:hover { background: rgba(255,255,255,0.55); color: var(--text-main); }
[data-tema="scuro"] .nav-voce:hover { background: rgba(255,255,255,0.06); }
.nav-voce.attiva {
  background: var(--brand-blue); color: #fff;
  box-shadow: 0 4px 14px rgba(60, 148, 212, 0.32);
}
.nav-voce.attiva .nav-icona { opacity: 1; }
.nav-icona { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.8; }
.nav-testo { flex: 1 1 auto; transition: opacity var(--t); }
.nav-badge {
  font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; transition: opacity var(--t);
}
.nav-voce.attiva .nav-badge { background: rgba(255,255,255,0.28); }

/* --- Area principale --- */
#principale { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

#topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--glass-bg-solid);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
#titolo-pagina { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600;
  letter-spacing: -0.3px; white-space: nowrap; }
#briciole { font-size: 0.78rem; color: var(--text-3); }

#contenuto { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; }
.pagina { max-width: none; margin: 0; animation: entra 0.32s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 3. Ricerca globale ---------- */
.ricerca-globale { position: relative; flex: 0 1 380px; margin-left: auto; }
.ricerca-globale input {
  width: 100%; height: 38px; padding: 0 36px 0 36px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-main);
  font-family: var(--font); font-size: 0.85rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ricerca-globale input:focus { outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(60,148,212,0.16); }
.ricerca-globale .lente { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none; display: flex; }
.ricerca-globale kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; background: var(--surface-2);
}

/* ---------- 4. Schede ---------- */
.scheda {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.scheda-vetro {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.scheda-testa {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.scheda-titolo { font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; }
.scheda-sottotitolo { font-size: 0.78rem; color: var(--text-3); }
.scheda-corpo { padding: 12px; }
.scheda-azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- 5. KPI ---------- */
.griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kpi {
  background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  box-shadow: var(--glass-shadow); padding: 8px 12px 9px;
  transition: transform var(--t), box-shadow var(--t); cursor: default;
  position: relative; overflow: hidden;
}
.kpi.cliccabile { cursor: pointer; }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(31,38,135,0.13); }
.kpi-etichetta { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-valore { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.5px;
  margin: 1px 0 0; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: 0.7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-blue); }
.kpi.ok      .kpi-barra { background: var(--ok); }
.kpi.warn    .kpi-barra { background: var(--warn); }
.kpi.danger  .kpi-barra { background: var(--danger); }
.kpi.viola   .kpi-barra { background: var(--viola); }
.kpi-valore.ok { color: var(--ok); } .kpi-valore.danger { color: var(--danger); } .kpi-valore.warn { color: var(--warn); }

/* ---------- 6. Tabelle dati (superficie solida, massima leggibilita') ---------- */
.tabella-wrap { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: 0.8rem; background: var(--surface);
  font-variant-numeric: tabular-nums; }
table.tabella thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); text-align: left; white-space: nowrap;
  padding: 5px 9px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--border-strong); user-select: none;
}
table.tabella thead th.ordinabile { cursor: pointer; }
table.tabella thead th.ordinabile:hover { color: var(--brand-blue); }
table.tabella thead th .freccia { opacity: 0.45; font-size: 0.7em; margin-left: 3px; }
table.tabella thead th.ordinata .freccia { opacity: 1; color: var(--brand-blue); }
/* Righe compatte: in un gestionale la densita' e' la funzione principale.
   Una riga alta 26px invece di 40 significa 35 righe a schermata invece di 22. */
table.tabella tbody td { padding: 4px 9px; border-bottom: 1px solid var(--border);
  vertical-align: middle; white-space: nowrap; line-height: 1.45; }
table.tabella tbody td.avvolgi { white-space: normal; }
/* Righe alternate: l'occhio segue la riga senza perdersi fra le colonne. */
table.tabella tbody tr:nth-child(even) { background: var(--surface-2); }
table.tabella tbody tr:nth-child(even):hover,
table.tabella tbody tr:hover { background: var(--brand-blue-soft); }
table.tabella tbody tr { transition: background var(--t-fast); }
table.tabella tbody tr:hover { background: var(--surface-2); }
table.tabella tbody tr.cliccabile { cursor: pointer; }
table.tabella tbody tr.selezionata { background: var(--brand-blue-soft); }
table.tabella tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.negativo { color: var(--danger); }
.positivo { color: var(--ok); }
.sfumato { color: var(--text-3); }
.troncato { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 7. Etichette di stato ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 7px; border-radius: var(--r-pill);
  font-size: 0.69rem; font-weight: 600; white-space: nowrap; line-height: 1.6;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.badge.senza-punto::before { display: none; }
.badge-ok      { background: var(--ok-soft);      color: var(--ok); }
.badge-warn    { background: var(--warn-soft);    color: var(--warn); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--brand-blue-dark); }
.badge-neutro  { background: var(--neutral-soft); color: var(--text-2); }
.badge-viola   { background: var(--viola-soft);   color: var(--viola); }

/* ---------- 8. Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-main);
  font-family: var(--font); font-size: 0.845rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
  box-shadow: 0 2px 10px rgba(60,148,212,0.28); }
.btn-primario:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.btn-pericolo { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-pericolo:hover { filter: brightness(0.93); background: var(--danger); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-fantasma:hover { background: var(--surface-3); color: var(--text-main); }
.btn-piccolo { height: 29px; padding: 0 10px; font-size: 0.79rem; border-radius: var(--r-sm); }
.btn-icona { width: 36px; padding: 0; flex: 0 0 36px; }
.btn-icona.btn-piccolo { width: 29px; flex-basis: 29px; }
.gruppo-btn { display: inline-flex; }
.gruppo-btn .btn { border-radius: 0; margin-left: -1px; }
.gruppo-btn .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.gruppo-btn .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.gruppo-btn .btn.attivo { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; z-index: 1; }

/* ---------- 9. Form ---------- */
.griglia-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 6; min-width: 0; }
.campo.c1{grid-column:span 1}.campo.c2{grid-column:span 2}.campo.c3{grid-column:span 3}
.campo.c4{grid-column:span 4}.campo.c5{grid-column:span 5}.campo.c6{grid-column:span 6}
.campo.c8{grid-column:span 8}.campo.c9{grid-column:span 9}.campo.c12{grid-column:span 12}
.campo > label { font-size: 0.775rem; font-weight: 500; color: var(--text-2); }
.campo > label .obb { color: var(--danger); margin-left: 2px; }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 36px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-main);
  font-family: var(--font); font-size: 0.86rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.campo textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.campo select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23938c8c' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(60,148,212,0.16); }
.campo input:disabled, .campo select:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.campo input.errore, .campo select.errore { border-color: var(--danger); }
.campo .aiuto { font-size: 0.73rem; color: var(--text-3); }
.campo .msg-errore { font-size: 0.73rem; color: var(--danger); }
.campo-inline { display: flex; align-items: center; gap: 8px; }
.campo-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-blue); cursor: pointer; }
.campo-inline label { font-size: 0.84rem; cursor: pointer; }
.separatore-form { grid-column: 1 / -1; font-family: var(--font-display); font-size: 0.82rem;
  font-weight: 600; color: var(--brand-blue); letter-spacing: 0.4px; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--border); margin-top: 8px; }

/* ---------- 10. Barra filtri ---------- */
.barra-filtri { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.barra-filtri .campo { grid-column: unset; flex: 0 0 auto; min-width: 150px; }
.barra-filtri input, .barra-filtri select { height: 30px; font-size: 0.8rem; }
.barra-filtri .cerca { flex: 1 1 230px; min-width: 190px; }
.spazio { flex: 1 1 auto; }

/* ---------- 11. Modali ---------- */
.velo {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(24, 28, 34, 0.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: sfuma 0.22s var(--ease);
}
@keyframes sfuma { from { opacity: 0 } to { opacity: 1 } }
.modale {
  background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: var(--r-xl); box-shadow: 0 24px 70px rgba(0,0,0,0.26);
  width: 100%; max-width: 680px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: sali 0.3s var(--ease);
}
@keyframes sali { from { opacity: 0; transform: translateY(18px) scale(0.985) } to { opacity: 1; transform: none } }
.modale.larga { max-width: 1080px; } .modale.xl { max-width: 1340px; } .modale.stretta { max-width: 470px; }
.modale-testa { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); flex: 0 0 auto; }
.modale-titolo { font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; }
.modale-corpo { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.modale-piede { display: flex; gap: 9px; justify-content: flex-end; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); flex: 0 0 auto; }

/* ---------- 12. Notifiche ---------- */
#notifiche { position: fixed; bottom: 22px; right: 22px; z-index: 1000;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.notifica {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 17px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  box-shadow: 0 10px 34px rgba(0,0,0,0.15);
  font-size: 0.86rem; max-width: 420px;
  animation: entra-dx 0.3s var(--ease);
}
@keyframes entra-dx { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }
.notifica.uscita { animation: esci-dx 0.25s var(--ease) forwards; }
@keyframes esci-dx { to { opacity: 0; transform: translateX(26px) } }
.notifica.ok { border-left-color: var(--ok); } .notifica.ok .n-icona { color: var(--ok); }
.notifica.errore { border-left-color: var(--danger); } .notifica.errore .n-icona { color: var(--danger); }
.notifica.warn { border-left-color: var(--warn); } .notifica.warn .n-icona { color: var(--warn); }

/* ---------- 13. Stati vuoti e caricamento ---------- */
.vuoto { text-align: center; padding: 52px 20px; color: var(--text-3); }
.vuoto img { width: 64px; height: 64px; opacity: 0.45; margin-bottom: 14px; }
.vuoto h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.vuoto p { font-size: 0.85rem; margin-bottom: 16px; }

.scheletro { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: brilla 1.4s infinite; border-radius: var(--r-sm); height: 14px; }
@keyframes brilla { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.giro { width: 17px; height: 17px; border: 2px solid var(--border-strong);
  border-top-color: var(--brand-blue); border-radius: 50%; animation: gira 0.7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg) } }

/* ---------- 14. Paginazione ---------- */
.paginazione { display: flex; align-items: center; gap: 9px; padding: 6px 12px;
  border-top: 1px solid var(--border); background: var(--surface-2); font-size: 0.82rem; color: var(--text-2); }

/* ---------- 15. Schede a linguette ---------- */
.linguette { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.linguetta { padding: 9px 15px; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 0.86rem; font-weight: 500; color: var(--text-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast); }
.linguetta:hover { color: var(--text-main); }
.linguetta .nav-badge { margin-left: 6px; opacity: 1; position: static;
  background: var(--danger); color: #fff; font-size: 0.64rem; padding: 0 5px; }
.linguetta.attiva .nav-badge { background: var(--brand-blue); }
.linguetta.attiva { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }

/* ---------- 16. Utilita' ---------- */
.riga { display: flex; align-items: center; gap: 10px; }
.riga-tra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.colonna { display: flex; flex-direction: column; gap: 10px; }
.griglia-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.griglia-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.7rem; font-weight: 600; color: #fff; flex: 0 0 28px; letter-spacing: 0.3px; }
.pt { font-size: 0.78rem; color: var(--text-3); }
.grassetto { font-weight: 600; }
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.nascosto { display: none !important; }
.puntatore { cursor: pointer; }

.barra-avanzamento { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.barra-avanzamento > div { height: 100%; background: var(--brand-blue); border-radius: var(--r-pill);
  transition: width var(--t); }
.barra-avanzamento.ok > div { background: var(--ok); }
.barra-avanzamento.warn > div { background: var(--warn); }
.barra-avanzamento.danger > div { background: var(--danger); }

/* Cursore macchina da scrivere del template Toki */
.cursore { color: var(--brand-blue); font-weight: 700; animation: lampeggia 1s infinite; }
@keyframes lampeggia { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------- 17. Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1080px) {
  :root { --sidebar-w: var(--sidebar-w-min); }
  .nav-testo, .nav-gruppo-titolo, .sidebar-marchio-testo, .nav-badge { opacity: 0; pointer-events: none; }
  body.sidebar-aperta #sidebar { width: var(--sidebar-w-full, 248px); flex-basis: 248px; position: absolute;
    z-index: 50; height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,0.2); }
  body.sidebar-aperta .nav-testo, body.sidebar-aperta .nav-gruppo-titolo,
  body.sidebar-aperta .sidebar-marchio-testo, body.sidebar-aperta .nav-badge { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
  #contenuto { padding: 14px; }
  .campo { grid-column: span 12 !important; }
  .ricerca-globale { flex-basis: 150px; }
  #titolo-pagina { font-size: 1rem; }
  .modale { max-height: 94vh; }
}

@media print {
  #sidebar, #topbar, #notifiche, #sfondo, .barra-filtri, .scheda-azioni { display: none !important; }
  body, #contenuto { overflow: visible; height: auto; background: #fff; }
  .scheda { border: none; box-shadow: none; }
}

/* =====================================================================
   19. Toki — la chat
   Il pulsante sta su ogni schermata; il pannello si apre sopra senza
   spostare il contenuto sottostante.
   ===================================================================== */

#toki-bottone {
  position: fixed; right: 20px; bottom: 20px; z-index: 880;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow: 0 6px 22px rgba(31, 38, 135, 0.22);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  padding: 0;
}
#toki-bottone img { width: 34px; height: 34px; pointer-events: none; }
#toki-bottone:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 30px rgba(60, 148, 212, 0.34); }
#toki-bottone.attivo { background: var(--brand-blue); }
#toki-bottone.attivo img { filter: brightness(0) invert(1); }
#toki-bottone.spento { opacity: 0.62; }
#toki-bottone .toki-pallino {
  position: absolute; top: 4px; right: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--surface);
}

#toki-pannello {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 890;
  width: 440px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--glass-bg-solid);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -14px 0 44px rgba(31, 38, 135, 0.14);
  transition: transform var(--t);
}
#toki-pannello.chiuso { transform: translateX(105%); pointer-events: none; }

.toki-testa {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  height: var(--topbar-h); padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--glass-border);
}
.toki-testa img { width: 30px; height: 30px; flex: 0 0 30px; }
.toki-intestazione { flex: 1 1 auto; line-height: 1.2; min-width: 0; }
.toki-intestazione strong { font-family: var(--font-display); font-size: 0.96rem; display: block; }
.toki-intestazione .pt { font-size: 0.72rem; }

.toki-conversazione {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
}

.toki-msg { display: flex; }
.toki-msg.toki-utente { justify-content: flex-end; }
.toki-msg.toki-toki { flex-direction: column; align-items: flex-start; }
.toki-bolla {
  max-width: 100%; padding: 8px 12px; border-radius: var(--r-md);
  font-size: 0.855rem; line-height: 1.5; overflow-wrap: anywhere;
}
.toki-utente .toki-bolla {
  background: var(--brand-blue); color: #fff; border-bottom-right-radius: 4px; max-width: 85%;
}
.toki-toki .toki-bolla {
  background: var(--surface); border: 1px solid var(--border);
  border-bottom-left-radius: 4px; width: 100%;
}
.toki-bolla p { margin: 0 0 6px; } .toki-bolla p:last-child { margin-bottom: 0; }
.toki-bolla code { font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-3); padding: 1px 4px; border-radius: 4px; }
.toki-lista { margin: 4px 0 6px 16px; padding: 0; }
.toki-lista li { margin-bottom: 2px; }
table.tok-tab { font-size: 0.76rem; margin: 6px 0; }
table.tok-tab thead th { padding: 3px 7px; }
table.tok-tab tbody td { padding: 3px 7px; }

/* Cosa Toki ha appena creato: e' il riscontro immediato. */
.toki-modifica {
  margin-top: 8px; width: 100%;
  background: var(--ok-soft); border: 1px solid var(--ok);
  border-left-width: 3px; border-radius: var(--r-md); padding: 9px 11px;
  animation: entra 0.3s var(--ease);
}
.toki-mod-testa { display: flex; align-items: center; gap: 6px; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--ok); font-weight: 600; margin-bottom: 3px; }
.toki-mod-segno { display: flex; }
.toki-mod-tipo { color: var(--text-3); }
.toki-mod-titolo { font-weight: 600; font-size: 0.87rem; line-height: 1.3; }
.toki-mod-dett { font-size: 0.78rem; color: var(--text-2); margin-top: 2px; }
.toki-mod-azioni { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.toki-conferma {
  margin-top: 8px; width: 100%;
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-left-width: 3px; border-radius: var(--r-md); padding: 9px 11px;
}
.toki-conf-testa { display: flex; align-items: center; gap: 6px; color: var(--warn); margin-bottom: 4px; font-size: 0.82rem; }
.toki-conf-testo { font-size: 0.83rem; line-height: 1.45; }

.toki-pensa { display: flex; gap: 4px; padding: 10px 12px; }
.toki-pensa span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
  animation: tokiSalta 1.3s infinite; }
.toki-pensa span:nth-child(2) { animation-delay: 0.18s; }
.toki-pensa span:nth-child(3) { animation-delay: 0.36s; }
@keyframes tokiSalta { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4 }
                       30% { transform: translateY(-5px); opacity: 1 } }

.toki-benvenuto { text-align: center; padding: 18px 8px; }
.toki-benv-logo { width: 54px; height: 54px; margin-bottom: 10px; }
.toki-benv-titolo { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.toki-avviso { margin-top: 14px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--warn); font-size: 0.78rem;
  display: flex; gap: 6px; align-items: flex-start; text-align: left; }

.toki-composizione { flex: 0 0 auto; padding: 10px 12px 12px; border-top: 1px solid var(--glass-border); }
.toki-riga-input { display: flex; gap: 6px; align-items: flex-end; }
.toki-riga-input textarea {
  flex: 1 1 auto; resize: none; min-height: 36px; max-height: 140px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-main);
  font-family: var(--font); font-size: 0.86rem; line-height: 1.4;
}
.toki-riga-input textarea:focus { outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(60, 148, 212, 0.16); }
.toki-allegati { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.toki-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--brand-blue-soft);
  color: var(--brand-blue-dark); font-size: 0.74rem; }

@media (max-width: 620px) {
  #toki-pannello { width: 100vw; }
  #toki-bottone { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  #toki-bottone img { width: 30px; height: 30px; }
}

/* Proposta dai documenti scansionati: dati letti, modificabili prima di registrare. */
.toki-proposta { margin-top: 8px; width: 100%; background: var(--surface);
  border: 1px solid var(--brand-blue); border-left-width: 3px;
  border-radius: var(--r-md); padding: 9px 11px; }
.toki-prop-testa { display: flex; align-items: center; gap: 6px; color: var(--brand-blue-dark);
  font-size: 0.8rem; margin-bottom: 7px; }
.toki-prop-campi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.toki-prop-campi label { display: flex; flex-direction: column; gap: 2px;
  font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; }
.toki-prop-campi input, .toki-prop-campi select,
.toki-proposta table input {
  height: 26px; padding: 0 6px; font-size: 0.79rem; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-main); width: 100%;
}
.toki-prop-campi input:focus, .toki-prop-campi select:focus,
.toki-proposta table input:focus { outline: none; border-color: var(--brand-blue); background: var(--surface); }
.toki-proposta table td { padding: 2px 4px; }

/* La riga appena arrivata da Toki lampeggia: l'aggiornamento c'e' stato,
   e si deve vedere che c'e' stato. */
@keyframes riga-arrivata {
  0%   { background: var(--brand-blue-soft, #e8f2fb); }
  70%  { background: var(--brand-blue-soft, #e8f2fb); }
  100% { background: transparent; }
}
tbody tr.riga-nuova {
  animation: riga-arrivata 4s ease-out;
  box-shadow: inset 3px 0 0 var(--brand-blue, #3c94d4);
}