:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --navy: #0f172a;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --danger: #ef4444;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ---------------- Topbar ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { font-size: 18px; font-weight: 500; }
.brand-strong { font-weight: 800; }
/* piccola etichetta con la versione installata, giusto per poter controllare
   al volo (senza aprire log o file) se un aggiornamento e' stato applicato
   davvero - vedi _ricostruisci-motore.bat per il perche' a volte non lo era */
.brand-version { font-size: 10px; font-weight: 400; opacity: 0.55; vertical-align: middle; margin-left: 2px; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.tab-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tab-btn.active { background: #fff; color: var(--navy); }
.user-box { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 13px; }
.user-box select {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}
.user-box select option { color: #0f172a; }

/* ---------------- Layout ---------------- */
main { padding: 20px 24px 60px; max-width: 1600px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

h1 { font-size: 22px; margin: 0; font-weight: 700; }
h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

.planning-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.spacer { flex: 1; }
.hint { color: var(--text-muted); font-size: 12px; font-style: italic; }

.view-toggle { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle button {
  border: none; background: transparent; padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--text-muted);
  border-right: 1px solid var(--border);
}
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: var(--navy); color: #fff; }

.nav-controls { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; width: 30px; height: 30px;
  cursor: pointer; font-size: 16px; color: var(--text); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--bg); }
.btn-outline {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 7px 14px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.btn-outline:hover { background: var(--bg); }
.btn-primary {
  border: none; background: var(--navy); color: #fff; border-radius: 8px; padding: 8px 16px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-primary:hover { background: #1e293b; }
.btn-danger {
  border: none; background: #fef2f2; color: var(--danger); border-radius: 8px; padding: 8px 16px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-danger:hover { background: #fee2e2; }

.range-label { font-weight: 600; font-size: 14px; }

input[type="search"], input[type="text"], input[type="date"], input[type="number"], textarea, select {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit;
  background: var(--surface); color: var(--text);
}
input[type="search"] { min-width: 200px; }

/* ---------------- Legend ---------------- */
.legend-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.legend-pill, .status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap;
}
/* pulsante piccolo per nascondere/mostrare la legenda e guadagnare spazio
   verticale nella vista Planning (la preferenza si ricorda per-browser,
   vedi caricaLegendaSalvata/applicaLegendaVisibile in planning.js) */
.legend-toggle-btn { width: 22px; height: 22px; font-size: 10px; flex: none; }
.legend-row.legend-nascosta .legend { display: none; }

/* ---------------- Planning grid ---------------- */
/* la pagina Planning esce dal max-width centrale della pagina, cosi' su
   schermi larghi si vedono piu' colonne/collaboratori possibile - il
   "tetto" e' stato allargato (da 780px a 1100px di meta'-contenuto) su
   richiesta di Enrico, dopo aver approvato un mockup a confronto: sui
   monitor normali (fino a ~2200px) il planning ora usa quasi tutta la
   larghezza dello schermo, mentre su schermi molto larghi (ultra-wide)
   resta comunque un margine minimo ai lati per non allungare troppo le
   colonne dei giorni */
#tab-planning.tab-panel {
  max-width: none; width: 100vw; box-sizing: border-box;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(16px, calc(50vw - 1100px)); padding-right: max(16px, calc(50vw - 1100px));
}
.zoom-controls { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px 4px; }
.zoom-label { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 34px; text-align: center; }
/* --gz-scale controlla la dimensione di righe/colonne/testo della griglia:
   1 = default (piu' compatto di prima), si puo' rimpicciolire/ingrandire
   con i pulsanti +/- dello zoom senza toccare la struttura della tabella */
/* "overflow-y: auto" (prima era "visible") + un "max-height" calcolato al
   volo da planning.js (vedi adattaAltezzaGriglia) sono quello che serve
   perche' la testata (righe .grid-head-cell/.employee-head, "position:
   sticky") resti davvero fissa scorrendo il personale: senza un contenitore
   che scorre DAVVERO al proprio interno lo sticky non ha effetto (il
   browser fa scorrere la pagina intera, non questo box, e la testata se ne
   va via con tutto il resto) - vedi anche la nota su .grid-head-cell. */
.grid-wrapper { --gz-scale: 1; overflow-x: auto; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* NIENTE "min-width: max-content" qui: con colonne minmax(X, 1fr), quella
   regola faceva calcolare la larghezza in base al testo piu' lungo dentro
   le celle (es. un nome cliente lungo), invece che rispettare il minimo
   dichiarato nelle colonne - risultato: colonne larghissime o strette in
   modo incoerente da un giorno all'altro ("vista corrotta"). Senza,
   ogni colonna resta almeno al suo minimo e si allarga solo se c'e' spazio;
   lo scroll orizzontale del wrapper scatta solo quando serve davvero. */
.planning-grid { display: grid; width: 100%; }
.grid-row { display: contents; }
.grid-cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: calc(3px * var(--gz-scale)) calc(5px * var(--gz-scale));
  /* altezza fissa: le attivita' dello stesso giorno si affiancano invece di
     impilarsi (vedi renderGrid in planning.js), quindi la riga non deve piu'
     crescere con il numero di attivita'. Ridotta da 52 a 44px (richiesta
     esplicita: righe piu' strette per vederne di piu' senza scorrere) -
     .employee-cell e .avatar sono stati stretti in proporzione qui sotto
     cosi' la riga resta equilibrata invece di lasciare il nome del
     collaboratore "vuoto" rispetto alle celle attivita' accanto. */
  height: calc(44px * var(--gz-scale));
  min-width: calc(110px * var(--gz-scale));
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: calc(3px * var(--gz-scale));
  overflow: hidden;
}
/* cella "a doppia riga": quando un giorno/collaboratore supera
   SOGLIA_ORE_DOPPIA_RIGA ore totali (vedi renderGrid in planning.js) le
   attivita' non si restringono piu' all'infinito per stare tutte affiancate
   su una riga sola - diventerebbero illeggibili anche a occhio nudo, tooltip
   o no. La cella raddoppia altezza (stessa riga della griglia: essendo un
   grid CSS le altre celle di quel collaboratore, quel giorno, si allargano
   di conseguenza, lasciando solo dello spazio vuoto sotto se non ne hanno
   bisogno) e mostra due righe interne (.grid-cell-riga), meta' attivita'
   ciascuna: il raddoppio salta all'occhio da solo, segnalando subito che
   quel giorno ha davvero troppe ore. */
.grid-cell.grid-cell-doppia {
  height: calc(88px * var(--gz-scale));
  flex-direction: column;
  align-items: stretch;
  gap: calc(2px * var(--gz-scale));
}
.grid-cell-riga {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: calc(3px * var(--gz-scale));
  overflow: hidden;
}
.grid-cell:hover { background: #f8fafc; }
.grid-cell.weekend { background: #fafafa; }
.grid-head-cell {
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  padding: calc(7px * var(--gz-scale)) calc(6px * var(--gz-scale));
  font-weight: 700;
  font-size: calc(11.5px * var(--gz-scale));
  text-align: center;
  background: #f8fafc;
  /* resta visibile scorrendo in verticale tra i collaboratori: vedi
     .grid-wrapper piu' sotto, che ha un'altezza massima calcolata al volo
     (planning.js) e scorre al suo interno - "top: 0" e' relativo a QUEL
     contenitore, non alla pagina, cosi' non serve inseguire l'altezza della
     topbar. Non e' bastato mettere "position: sticky" da solo: senza
     un'altezza massima + scroll proprio sul contenitore, l'elemento non ha
     nulla rispetto a cui restare fermo e scorre via con la pagina. */
  position: sticky;
  top: 0;
  z-index: 5;
}
.grid-head-cell .dow { display:block; color: var(--text-muted); font-weight: 500; font-size: 0.92em; text-transform: uppercase; }
.employee-cell {
  border-bottom: 1px solid var(--border);
  border-right: 2px solid var(--border);
  padding: calc(4px * var(--gz-scale)) calc(10px * var(--gz-scale));
  display: flex;
  align-items: center;
  gap: calc(6px * var(--gz-scale));
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 4;
  font-weight: 600;
  font-size: calc(13px * var(--gz-scale));
  min-width: calc(150px * var(--gz-scale));
}
.employee-head {
  border-bottom: 2px solid var(--border);
  border-right: 2px solid var(--border);
  /* angolo in alto a sinistra: sticky sia in orizzontale (gia' cosi') sia
     ora in verticale (come .grid-head-cell, stesso motivo - vedi li'), cosi'
     resta fermo in entrambe le direzioni di scorrimento - z-index piu' alto
     di entrambi gli altri due sticky (colonna nomi e riga date) perche' e'
     la loro intersezione */
  position: sticky;
  left: 0;
  top: 0;
  background: #f8fafc;
  z-index: 7;
  min-width: calc(150px * var(--gz-scale));
}
.avatar {
  width: calc(20px * var(--gz-scale)); height: calc(20px * var(--gz-scale)); border-radius: 50%; background: #e2e8f0; color: #475569;
  display: flex; align-items: center; justify-content: center; font-size: calc(9.5px * var(--gz-scale)); font-weight: 700; flex-shrink: 0;
}
.activity-chip {
  border-radius: 5px; padding: calc(2px * var(--gz-scale)) calc(5px * var(--gz-scale)); color: #fff; font-size: calc(11px * var(--gz-scale)); line-height: 1.2;
  cursor: pointer; overflow: hidden; box-sizing: border-box;
  /* la larghezza vera arriva inline da renderGrid (proporzionale alle ore
     rispetto al riferimento giornaliero): flex-basis "auto" cosi' rispetta
     quella percentuale invece di dividersi lo spazio in parti uguali */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 3px;
}
.activity-chip .chip-title { font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-chip .chip-sub { display: block; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-chip .chip-ore { display: block; opacity: 0.85; font-weight: 600; font-size: 0.95em; }
.activity-chip:hover { filter: brightness(1.08); z-index: 2; }
/* attivita' troppo strette per leggersi (vedi soglia in renderGrid): si
   mostra solo il titolo troncato, il resto si legge dal tooltip al passaggio
   del mouse */
.activity-chip.chip-compatta .chip-sub, .activity-chip.chip-compatta .chip-ore { display: none; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 100;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.modal-small { max-width: 440px; }
.modal-large { max-width: 820px; }
/* modale Dettaglio attivita': con Cliente/Impianto/Note/Note Report/Stato/
   Ore/Orario/Titolo impilati uno sopra l'altro, sugli schermi piu' piccoli
   (es. i portatili in ufficio, non solo i monitor grandi) non restava quasi
   piu' altezza per la griglia operatori (fino a ~26 collaboratori/righe
   virtuali) prima di sbattere contro il "max-height: 90vh" del modale - si
   vedeva si' e no la prima riga. Soluzione (scelta tra 2 proposte, vedi
   CLAUDE.md): due colonne fianco a fianco invece di tutto impilato -
   Operatori ha cosi' una colonna TUTTA SUA, alta quanto il modale, che non
   dipende piu' da quanti altri campi ci sono sopra. Vedi .dettaglio-cols
   qui sotto. */
.modal-xxl { max-width: 1140px; }
.modal-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 18px; flex: 1; }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.modal-body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-body label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.modal-body .field-label-group { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* modale Dettaglio attivita' in due colonne: i campi "normali" a sinistra,
   gli Operatori in una colonna dedicata a destra (vedi nota su .modal-xxl
   qui sopra per il perche'). "align-items: start" cosi' ogni colonna resta
   alta quanto il proprio contenuto, invece di essere stirata alla stessa
   altezza dell'altra. */
.dettaglio-cols { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.col-sinistra { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.col-operatori { display: flex; flex-direction: column; gap: 6px; }
.col-operatori > label:first-child { margin-bottom: 0; font-weight: 600; font-size: 13px; color: #334155; }
#fOperatoriCerca { margin: 0; }
.operatori-grid {
  /* 2 colonne dense nella colonna dedicata (vedi .col-operatori): con il
     roster attuale (fino a ~26 tra collaboratori e righe virtuali) ci
     stanno tutti visibili senza scorrere sulla maggior parte degli schermi;
     il campo "Cerca per nome" sopra (#fOperatoriCerca) e il max-height
     restano comunque cosi' la lista si tiene comoda anche se il team
     dovesse crescere ancora in futuro */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; max-height: 430px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #fafbfc;
}
.operatori-grid label { flex-direction: row; align-items: center; font-weight: 400; gap: 6px; font-size: 13px; }
.operatori-grid label.filtro-nascosto { display: none; }
@media (max-width: 900px) {
  /* schermi molto stretti: le due colonne non ci starebbero comunque
     affiancate leggibili, si torna a impilarle come prima */
  .dettaglio-cols { grid-template-columns: 1fr; }
}
.modal-footer { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }

/* ---------------- Gantt ---------------- */
/* menu contestuale (tasto destro) sulle card del Planning */
.context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 150px;
  padding: 4px;
  z-index: 100;
}
.context-menu[hidden] { display: none; }
.context-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer;
}
.context-menu button:hover { background: #f1f5f9; }
.context-menu button.danger { color: var(--danger); }
.context-menu button.danger:hover { background: #fef2f2; }

.gantt-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.gantt-chart { min-width: max-content; }
.gantt-row-header {
  display: grid; grid-template-columns: 260px 90px 1fr; border-bottom: 2px solid var(--border);
  font-weight: 700; font-size: 12px; background: #f8fafc; position: sticky; top: 0; z-index: 5;
}
.gantt-row-header > div { padding: 10px 12px; border-right: 1px solid var(--border); }
.gantt-group-row, .gantt-task-row {
  display: grid; grid-template-columns: 260px 90px 1fr; border-bottom: 1px solid var(--border); align-items: center;
}
.gantt-group-row { background: #f8fafc; font-weight: 700; cursor: pointer; }
.gantt-label { padding: 10px 12px; border-right: 1px solid var(--border); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-days { padding: 10px 12px; border-right: 1px solid var(--border); color: var(--text-muted); }
.gantt-timeline { position: relative; height: 40px; }
.gantt-bar {
  position: absolute; top: 6px; height: 28px; border-radius: 6px; background: #6366f1; color: #fff;
  font-size: 11.5px; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden;
  cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.gantt-bar.group { background: #1e293b; font-weight: 700; }
.gantt-bar:active { cursor: grabbing; }
.gantt-addtask { padding: 6px 12px; }
.gantt-addtask button { font-size: 12px; padding: 4px 10px; }
.gantt-delete-btn { margin-left: 6px; opacity: 0.5; cursor: pointer; }
.gantt-delete-btn:hover { opacity: 1; }

/* ---------------- Dashboard ---------------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.kpi-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.kpi-value { font-size: 30px; font-weight: 800; }
.kpi-value.warn { color: #dc2626; }
.kpi-unit { font-size: 16px; font-weight: 600; margin-left: 2px; color: var(--text-muted); }

.chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.chart-card-small { display: flex; flex-direction: column; }
.stato-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; justify-content: center; }
.stato-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.stato-legend-dot { width: 9px; height: 9px; border-radius: 50%; }

.table-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.table-header h3 { margin: 0; flex: 1; }
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; }

/* ---------------- Riga filtri anagrafiche (solo consultazione) ---------------- */
.filter-row th { padding: 4px 8px; background: var(--bg, #f8fafc); }
.filter-row input[type="text"] {
  width: 100%; min-width: 0; padding: 5px 8px; font-size: 12px; font-weight: 400;
  text-transform: none; border-radius: 6px;
}
.util-bar-wrap { display: flex; align-items: center; gap: 8px; }
.util-bar-bg { width: 70px; height: 6px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.util-bar-fill { height: 100%; background: var(--accent); }
.ferie-tag { color: var(--danger); font-size: 11px; margin-left: 4px; }

/* ---------------- Operatori tab ---------------- */
#operatoriTable td, #operatoriTable th { padding: 10px 12px; }
.pill-active { color: #16a34a; font-weight: 600; }
.pill-inactive { color: var(--text-muted); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; margin-right: 12px; }
.link-btn.danger { color: var(--danger); }

/* ---------------- Cantieri: nome cliccabile (apre lo storico attivita') ---------------- */
.cantiere-link { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; font-size: inherit; text-align: left; }
.cantiere-link:hover { text-decoration: underline; }
.storico-toolbar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.storico-toolbar label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12px; color: #334155; }
.storico-riepilogo { color: var(--text-muted); font-size: 12.5px; margin-bottom: 10px; }
.storico-riepilogo b { color: var(--text); }

/* ---------------- Print ---------------- */
@media print {
  .topbar, .planning-toolbar, .legend-row, #printPlanning, #printGantt { display: none !important; }
  main { padding: 0; max-width: none; }
  .grid-wrapper, .gantt-wrapper { overflow: visible; border: none; box-shadow: none; }
}
/* stampa dello storico attivita' di un cantiere (Anagrafica Cantieri): la
   classe si aggiunge al <body> solo per la durata della stampa (vedi
   cantieri.js), cosi' questa regola non tocca la stampa normale del
   Planning quando il modale non e' quello aperto */
@media print {
  body.stampa-storico-attiva > *:not(#modalStoricoCantiereOverlay) { display: none !important; }
  body.stampa-storico-attiva #modalStoricoCantiereOverlay { position: static; background: none; padding: 0; display: block; }
  body.stampa-storico-attiva #modalStoricoCantiereOverlay .modal { box-shadow: none; max-height: none; max-width: none; margin: 0; }
  body.stampa-storico-attiva #modalStoricoCantiereOverlay .modal-footer,
  body.stampa-storico-attiva #modalStoricoCantiereOverlay .icon-btn,
  body.stampa-storico-attiva #modalStoricoCantiereOverlay #scFiltra { display: none !important; }
}

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .chart-row { grid-template-columns: 1fr; }
}

/* ---------------- Login ---------------- */
.app-hidden { display: none; }
.login-screen { display: none; position: fixed; inset: 0; background: var(--navy); align-items: center; justify-content: center; z-index: 200; }
.login-screen.open { display: flex; }
.login-card { background: #fff; border-radius: 14px; padding: 32px; width: 100%; max-width: 340px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 14px; }
.login-brand { font-size: 22px; text-align: center; margin-bottom: 4px; }
.login-hint { color: var(--text-muted); font-size: 13px; text-align: center; margin: 0 0 6px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.login-error { color: var(--danger); font-size: 13px; min-height: 16px; }
.login-submit { width: 100%; padding: 10px; font-size: 14px; }

/* ---------------- User box / link inverse ---------------- */
.link-btn-inverse { background: none; border: none; color: #cbd5e1; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.link-btn-inverse:hover { color: #fff; }

/* ---------------- Sub-tabs (Anagrafiche) ---------------- */
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* ---------------- Sub-tabs (Dashboard) ---------------- */
.dash-subpanel { display: none; }
.dash-subpanel.active { display: block; }

/* ---------------- Tabelle ordinabili (Dashboard > Clienti/Cantieri) ---------------- */
#dashCantieriTable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
#dashCantieriTable th[data-sort]:hover { color: var(--accent); }
#dashCantieriTable th.sort-active { color: var(--accent); }

/* ---------------- Heatmap ore x stato (Dashboard > Per collaboratore) ---------------- */
.heatmap-cell { text-align: center; font-variant-numeric: tabular-nums; }
.heatmap-cell.ha-ore { border-radius: 4px; font-weight: 600; }
.heatmap-nome { white-space: nowrap; font-weight: 600; }

/* ---------------- Alert soglie ore (Dashboard > Alert) ---------------- */
.alert-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.alert-pill.sopra { background: #fef3c7; color: #92400e; }
.alert-pill.sotto { background: #fee2e2; color: #991b1b; }
.alert-pill.ok { background: #dcfce7; color: #166534; }

.hint-block { margin: -6px 0 12px; }

/* ---------------- Form grid (Impostazioni) ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.form-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
.settings-actions { display: flex; align-items: center; gap: 12px; }
.settings-esito { font-size: 13px; color: var(--text-muted); }
.settings-esito.ok { color: #16a34a; }
.settings-esito.err { color: var(--danger); }
.settings-subpanel { display: none; }
.settings-subpanel.active { display: block; }
.settings-help-list { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: #334155; line-height: 1.6; }
.settings-help-list code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---------------- Manutenzioni modal extras ---------------- */
.inline-fields { display: flex; gap: 8px; align-items: center; }
.giorni-settimana { display: flex; gap: 6px; flex-wrap: wrap; }
.giorni-settimana button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px; width: 34px; height: 34px;
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.giorni-settimana button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.promemoria-row { display: flex; gap: 8px; margin-bottom: 8px; }
.promemoria-row input[type="email"] { flex: 1; }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.audit-info { font-size: 11.5px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; }

/* Riga compatta orario+canale / doppio promemoria nel dettaglio attivita'
   (vedi CLAUDE.md, aggiornamento 2026-09-10): tutto su una riga sola per
   non far scorrere il modale. ".promemoria-etichetta" forza "row" perche'
   ".modal-body label" di base impila etichetta+campo in colonna. */
.promemoria-riga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.promemoria-etichetta {
  display: flex; flex-direction: row !important; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; color: #334155; white-space: nowrap;
}
.promemoria-checkbox { font-weight: 600; }
.promemoria-testo-prima { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.promemoria-separatore { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }

/* ---------------- Assistente IA (chat) ---------------- */
.assistente-avviso { background: #fffbeb; border-color: #fde68a; color: #92400e; font-size: 13px; }
.assistente-card { display: flex; flex-direction: column; height: 60vh; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; }
.chat-bubble.utente { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 2px; }
.chat-bubble.ia { align-self: flex-start; background: #f1f5f9; color: var(--text); border-bottom-left-radius: 2px; }
.chat-bubble.sistema { align-self: center; background: transparent; color: var(--text-muted); font-style: italic; font-size: 12px; }
.chat-azione-box { align-self: flex-start; max-width: 85%; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 12px 14px; }
.chat-azione-box .azione-buttons { display: flex; gap: 8px; margin-top: 10px; }
.chat-form { display: flex; gap: 10px; margin-top: 10px; }
.chat-form input { flex: 1; }

/* ---------------- Manutenzioni tab ---------------- */
.pill-mini { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pill-mini.on { background: #dcfce7; color: #166534; }
.pill-mini.off { background: #f1f5f9; color: #64748b; }

/* ---------------- Drag & drop attivita' nel planning ---------------- */
.employee-cell.employee-virtuale { font-style: italic; color: #475569; background: #f8fafc; }
.employee-cell.employee-virtuale .avatar { background: #fef3c7; }
.activity-chip.dragging { opacity: 0.4; }
.grid-cell.drop-target { background: #dbeafe !important; outline: 2px dashed #60a5fa; outline-offset: -2px; }
/* riordino libero dentro la stessa cella (vedi riordinaNellaCella in
   planning.js): bordo bianco spesso sulla card su cui si sta per rilasciare,
   distinto dall'evidenziazione azzurra usata per lo spostamento tra celle */
.activity-chip.chip-drop-target { box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 2px #1d4ed8; }
.activity-chip.chip-manutenzione { border: 1.5px dashed rgba(255,255,255,0.7); }

/* ---------------- Proposte da email (Assistente IA) ---------------- */
.proposte-email-list { display: flex; flex-direction: column; gap: 10px; }
.proposta-email-item { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 10px; padding: 12px 14px; }
.proposta-email-item .proposta-titolo { font-weight: 700; color: var(--text); }
.proposta-email-item .proposta-meta { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; }
.proposta-email-item .proposta-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.proposta-email-item .proposta-fields input, .proposta-email-item .proposta-fields select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.proposta-email-item .azione-buttons { display: flex; gap: 8px; }
.pill-mini.confidenza-alta { background: #dcfce7; color: #166534; }
.pill-mini.confidenza-media { background: #fef9c3; color: #854d0e; }
.pill-mini.confidenza-bassa { background: #fee2e2; color: #991b1b; }

.proposta-email-item.tipo-completa_esistente { border-color: #bbf7d0; background: #f0fdf4; }
.proposta-email-item.tipo-crea_nuova { border-color: #bfdbfe; background: #eff6ff; }
.proposta-email-item.tipo-sposta_giorno_dopo { border-color: #fed7aa; background: #fff7ed; }
.proposta-email-item.tipo-non_riconosciuto { border-color: #e2e8f0; background: #f8fafc; }
.proposta-email-item.proposta-ore-zero { border-color: #fdba74; background: #fff7ed; }
.rap-sezione-ore-zero { margin: 16px 0 2px; font-size: 14px; color: #9a3412; }

/* ---------------- Modale collaboratore: campi accesso ---------------- */
#opAccessoCampi { margin: 8px 0 10px 22px; padding-left: 10px; border-left: 2px solid var(--border); }