/* Stile della dashboard di Solida. Era dentro index.html fino alla 1.101.3:
   in un file suo il browser lo tiene in memoria fra un'apertura e l'altra
   (impronta ?v= messa dal Dockerfile, vedi impronte.sh). */
:root {
  --bg:       #F2F4F2;
  --bg2:      #E9EDE9;
  --bg3:      #E2E8E2;
  --bg4:      #DCE3DC;
  --border:   #DCE3DC;
  --border2:  #E4EAE4;
  --text:     #1E1E1D;
  --text2:    #5A5A58;
  --text3:    #60655F;   /* scurito per passare 4.5:1 su tutti i fondi (WCAG 1.4.3) */
  /* Il verde di Solida, lo stesso di solidasrl.eu (#3dad58).
     --accent-rgb serve alle tinte trasparenti: prima erano
     rimaste al bordeaux di prima e stonavano sotto un testo verde. */
  --accent:   #3DAD58;
  --accent-rgb: 61,173,88;
  --rosso:    #8C2F39;
  --rosso-rgb: 140,47,57;
  --accent2:  #2F8B45;
  --green:    #3A6B35;
  --green-rgb: 58,107,53;
  --verde-ok: #2E7D52;      /* stati "fatto/firmato" */
  --giallo:   #E6A800;      /* avvisi: puntini, barre, sfondi (decorativo) */
  --giallo-cupo: #8A6200;   /* il giallo quando e' TESTO: passa 4.5:1 su fondo chiaro (WCAG 1.4.3) */
  /* Palette SECONDARIA (categoria/tipo, non stato): la usano i badge g-badge-*,
     le chip dei tipi di file e le bande. Prima erano hex sparsi (#4299e1 ecc.);
     ora un posto solo. Il blu e' un acciaio smorzato che sta con la palette
     verde, non lo sky-blue acceso di prima. */
  --info:     #3E6E8E;  --info-rgb:     62,110,142;   /* blu: categorie, tipi info */
  --arancio:  #C06A2B;  --arancio-rgb:  192,106,43;   /* arancio smorzato */
  --viola:    #7C5BD0;  --viola-rgb:    124,91,208;   /* viola smorzato */
  --antracite: #373736;     /* l'antracite del logo, usato dal gestionale */
  --card-bg:  #FFFFFF;
  --sidebar:  56px;
  --topbar:   52px;
  /* Raggi: una scala, non 11 valori a caso. Default 6px; grande 10px per card
     e modali; piccolo 4px; pastiglia per i badge tondi. */
  --radius:      6px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --radius-pill: 999px;
  /* Spaziatura: i valori davvero usati, ora con un nome (2/4/6/8/12/16/20). */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --sans:     'Poppins', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
  --display:  'Poppins', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Tutto nella tipografia della marca (Poppins): titoli col peso display, il
   corpo con --sans. Un posto solo: se un domani si cambia font, si cambia qui. */
.tile-title, .g-title, .g-topbar-title, .mig-topbar-title, .mig-h,
#g-modal-title, .g-detail-h, .cal-day {
  font-family: var(--display);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  height: 100%;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar); height: 100%;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 0;
  z-index: 100;
}
.sidebar-logo {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  margin-bottom: var(--space-7); flex-shrink: 0;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: 0 var(--space-4); }
.nav-btn {
  width: 40px; height: 40px; border-radius: 8px;
  border: none; background: none; cursor: pointer;
  color: var(--text3); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  margin: 0 auto;
}
.nav-btn:hover { background: var(--bg4); color: var(--text2); }
.nav-btn.active { background: rgba(61,173,88,.15); color: var(--accent); }
.nav-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sidebar-bottom { padding: 0 var(--space-4); }

/* ── Layout ───────────────────────────────── */
.layout {
  margin-left: var(--sidebar);
  height: 100vh;
  display: flex; flex-direction: column;
}

/* ── Topbar ───────────────────────────────── */
.topbar {
  height: var(--topbar);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: var(--space-6);
  flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.topbar-brand {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -.02em; white-space: nowrap;
}
.topbar-brand span { color: var(--accent); }
.search-wrap {
  flex: 1; max-width: 460px; position: relative;
}
.search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; fill: var(--text3); pointer-events: none;
}
.search-input {
  width: 100%; background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 7px; padding: 7px var(--space-5) 7px 34px;
  color: var(--text); font-family: var(--sans); font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.search-input::placeholder { color: var(--text3); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,173,88,.1); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-badge {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 5px 10px; border-radius: 7px;
  background: var(--bg4); border: 1px solid var(--border);
}
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.user-name { font-size: 12px; color: var(--text2); }
.online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}

/* ── Grid ─────────────────────────────────── */
.grid {
  flex: 1; overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  gap: var(--space-5); padding: var(--space-5);
}
/* Solida: solo Posta e Agenda (vedi SOLIDA_NASCOSTI in dashboard.js) */
.grid.grid-essenziale { grid-template-rows: 1fr; }
/* Agenda: tasti dei giorni e cestino del giorno (19 set 2026) */
.g-giorni { display: flex; gap: 6px; flex-wrap: wrap; }
.g-giorno { width: 46px; padding: 6px 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg3); color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.g-giorno span { font-size: 10px; font-weight: 400; color: var(--text3); }
.g-giorno.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-giorno.sel span { color: #fff; }
.g-giorno:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-ag-righe { display: flex; flex-direction: column; gap: 6px; }
.g-ag-testa, .g-ag-riga { display: grid; grid-template-columns: 84px 80px 1fr; gap: 8px; align-items: center; }
.g-ag-testa span { font-size: 11px; color: var(--text3); font-weight: 600; }
.g-ag-giorno { font-size: 13px; color: var(--text2); }
.g-ag-vuoto { font-size: 12px; color: var(--text3); padding: 4px 0; }
.g-cestino { float: right; margin-left: 4px; cursor: pointer; opacity: .55; }
.g-cestino:hover, .g-cestino:focus { opacity: 1; }
@media (max-width: 760px) { .grid.grid-essenziale { grid-template-rows: none; } }
#agenda-body { padding: var(--space-2) var(--space-6); }
/* Segnalazione 303 (Matteo, 2 ott 2026): una nota lunga di un check point,
   su una riga sola, allargava la colonna del giorno fino a fuori schermo.
   Colonne fisse (le larghezze delle intestazioni valgono davvero) e i blocchi
   vanno a capo. Sotto i 980px la tabella scorre di lato, come prima. */
.g-agenda-tbl { table-layout: fixed; width: 100%; min-width: 980px; }
.g-agenda-tbl td { overflow-wrap: anywhere; }
/* 302: i blocchi si trascinano; la casella sotto il puntatore si vede */
[data-ag-trascina] { cursor: grab; }
.g-ag-sopra { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(var(--green-rgb), .10) !important; }
.g-ag-evento { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
/* 303: la nota dell'assegnazione nella vista Persone si vede solo in stampa */
.g-ag-nota { display: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; color: var(--text2); font-style: italic; }
.agenda-riga { display: flex; gap: var(--space-4); align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.agenda-riga.oggi .agenda-giorno { color: var(--accent); font-weight: 700; }
.agenda-giorno { flex: 0 0 72px; color: var(--text2); font-size: 12px; }
.agenda-voci { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.agenda-commessa, .agenda-assenza { padding: 1px 7px; border-radius: 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.agenda-commessa { background: rgba(61,173,88,.12); color: var(--text); }
.agenda-assenza { background: rgba(230,168,0,.15); color: var(--text); }
.agenda-assenza.da-approvare { background: transparent; border: 1px dashed var(--giallo-cupo); }
.agenda-piede { font-size: 12px; color: var(--text2); padding-top: 8px; }

/* ── Tile base ────────────────────────────── */
.tile {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.tile-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--space-6) 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tile-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tile-icon svg { width: 14px; height: 14px; fill: currentColor; }
.tile-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.tile-actions { margin-left: auto; display: flex; gap: var(--space-3); }
.tile-link {
  font-size: 11px; color: var(--text3);
  text-decoration: none; padding: 3px var(--space-4);
  border-radius: 5px; border: 1px solid var(--border);
  transition: color .15s, border-color .15s;
}
.tile-link:hover { color: var(--accent); border-color: var(--accent); }
.tile-body { flex: 1; overflow-y: auto; padding: var(--space-2) 0; min-height: 0; }
.tile-body::-webkit-scrollbar { width: 4px; }
.tile-body::-webkit-scrollbar-track { background: transparent; }
.tile-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }

/* ── Loading / empty / error states ───────── */
.state-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); color: var(--text3); font-size: 12px;
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Email tile ───────────────────────────── */
.email-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--space-6); border-bottom: 1px solid var(--border);
  transition: background .12s; cursor: pointer;
}
.email-row:last-child { border-bottom: none; }
.email-row:hover { background: var(--bg4); }
.email-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2);
  flex-shrink: 0;
}
.email-meta { flex: 1; min-width: 0; }
.email-sender { font-size: 12px; font-weight: 500; color: var(--text); }
.email-subject { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-time { font-size: 10px; color: var(--text3); white-space: nowrap; }
.email-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.email-footer {
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
  flex-shrink: 0;
}
.badge-phase2 {
  font-size: 9px; color: var(--text3); background: var(--bg4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3); letter-spacing: .04em;
}

/* ── Files tile ───────────────────────────── */
.file-row {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border);
  transition: background .12s; cursor: pointer;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--bg4); }
.file-ext {
  width: 28px; height: 28px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0;
}
.file-meta { flex: 1; min-width: 0; }
.file-name { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-info { font-size: 10px; color: var(--text3); }
.file-date { font-size: 10px; color: var(--text3); white-space: nowrap; }
.search-active .file-row.hidden { display: none; }

/* ── Calendar tile ────────────────────────── */
.cal-row {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: 10px var(--space-6); border-bottom: 1px solid var(--border);
}
.cal-row:last-child { border-bottom: none; }
.cal-date-box {
  width: 36px; text-align: center; flex-shrink: 0;
}
.cal-day { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.cal-month { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.cal-event-title { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: var(--space-1); }
.cal-event-time { font-size: 10px; color: var(--text3); }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; }

/* ── AI tile ──────────────────────────────── */
.tile-ai { display: flex; flex-direction: column; }

/* ── Giochi tile ──────────────────────────── */
.tile-giochi { grid-column: 1 / -1; }
.giochi-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--space-6) 14px; }
.giochi-sub { font-size: 11px; color: var(--text3); padding: 10px var(--space-6) 0; }
.giochi-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 5px 11px; border-radius: var(--radius); text-decoration: none;
  background: var(--bg4); border: 1px solid var(--border);
  transition: background .12s, border-color .12s;
}
.giochi-item:hover { border-color: #8b5cf6; background: rgba(139,92,246,.07); }
.giochi-item-icon { font-size: 13px; line-height: 1; }
.giochi-item-name { font-size: 11px; font-weight: 500; color: var(--text2); white-space: nowrap; }
.ai-messages {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 0;
}
.ai-messages::-webkit-scrollbar { width: 4px; }
.ai-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
.ai-msg {
  max-width: 88%; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); font-size: 12px; line-height: 1.6;
  word-break: break-word; white-space: pre-wrap;
}
.ai-msg.user {
  background: var(--accent); color: #fff;
  align-self: flex-end; border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);
}
.ai-msg.assistant {
  background: var(--bg4); color: var(--text);
  align-self: flex-start; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  border: 1px solid var(--border);
}
.ai-msg.assistant.streaming::after {
  content: '▋'; animation: blink .8s step-end infinite; color: var(--accent);
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.ai-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-4); color: var(--text3); padding: var(--space-7);
}
.ai-empty svg { width: 28px; height: 28px; fill: var(--border2); }
.ai-empty p { font-size: 12px; text-align: center; line-height: 1.5; }
.ai-input-area {
  padding: 10px 14px; border-top: 1px solid var(--border);
  display: flex; gap: var(--space-4); align-items: flex-end; flex-shrink: 0;
}
.ai-textarea {
  flex: 1; background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: var(--space-4) 10px;
  color: var(--text); font-family: var(--sans); font-size: 12px;
  resize: none; outline: none; line-height: 1.5;
  min-height: 36px; max-height: 120px;
  transition: border-color .2s;
  overflow-y: auto;
}
.ai-textarea:focus { border-color: var(--accent); }
.ai-textarea::placeholder { color: var(--text3); }
.ai-send {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.ai-send:hover { background: var(--accent2); }
.ai-send:active { transform: scale(.93); }
.ai-send:disabled { background: var(--bg4); color: var(--text3); cursor: default; }
.ai-send svg { width: 14px; height: 14px; fill: currentColor; }
.ai-model-badge {
  font-size: 9px; color: var(--text3); letter-spacing: .04em;
  padding: var(--space-1) 7px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); white-space: nowrap; align-self: center;
}
/* ── AI suggestion chips ─────────────────────── */
.ai-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: var(--space-2) var(--space-4) var(--space-3); }
.ai-chip {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); border-radius: 14px; padding: 3px 11px;
  font-size: 11px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ai-chip:hover { background: rgba(61,173,88,.1); border-color: var(--accent); color: var(--accent); }
/* ── AI fullscreen overlay ───────────────────── */
#ai-overlay {
  display: none; position: fixed; inset: 0; z-index: 290;
  flex-direction: column; background: var(--bg);
}
#ai-overlay.open { display: flex; }
#ai-overlay .ai-messages {
  flex: 1; padding: 14px 18px; overflow-y: auto; min-height: 0;
  background: var(--bg);
}
#ai-overlay .ai-messages::-webkit-scrollbar { width: 4px; }
#ai-overlay .ai-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
#ai-overlay .ai-input-area { padding: var(--space-4) var(--space-6) 14px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── Email full-page client ─────────────────── */
#email-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); flex-direction: column;
  margin-left: var(--sidebar);
}
#email-overlay.open { display: flex; }
.ec-topbar {
  height: var(--topbar); background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: 10px; flex-shrink: 0;
}
.ec-topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.ec-close {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.ec-close:hover { color: var(--accent); border-color: var(--accent); }
.ec-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.ec-btn:hover { color: var(--accent); border-color: var(--accent); }
.ec-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ec-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.ec-body { display: flex; flex: 1; overflow: hidden; }
.ec-folders {
  width: 180px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: var(--space-4) 0;
}
.ec-folder-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 14px; cursor: pointer;
  border-radius: var(--radius); margin: 1px var(--space-3);
  font-size: 12px; color: var(--text2);
  transition: background .12s, color .12s;
}
.ec-folder-item:hover { background: var(--bg4); color: var(--text); }
.ec-folder-item.active { background: rgba(61,173,88,.12); color: var(--accent); }
.ec-folder-badge {
  margin-left: auto; background: var(--accent);
  color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 8px; padding: 1px 5px; min-width: 16px; text-align: center;
}
.ec-list {
  width: 320px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.ec-list-scroll { flex: 1; overflow-y: auto; }
.ec-list-scroll::-webkit-scrollbar { width: 4px; }
.ec-list-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
.ec-msg-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.ec-msg-row:hover { background: var(--bg4); }
.ec-msg-row.active { background: rgba(61,173,88,.08); border-left: 2px solid var(--accent); padding-left: var(--space-5); }
.ec-msg-row.unread .ec-msg-sender { font-weight: 700; color: var(--text); }
.ec-msg-top { display: flex; align-items: center; gap: var(--space-3); }
.ec-msg-sender { font-size: 12px; color: var(--text2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-msg-date { font-size: 10px; color: var(--text3); white-space: nowrap; }
.ec-msg-subject { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-msg-snippet { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ec-pagination {
  padding: var(--space-4) 14px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
  font-size: 11px; color: var(--text3);
}
.ec-pagination button {
  background: none; border: 1px solid var(--border); color: var(--text3);
  border-radius: 5px; padding: 3px var(--space-4); font-size: 11px; cursor: pointer;
}
.ec-pagination button:disabled { opacity: .4; cursor: default; }
.ec-pagination button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.ec-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ec-view-header { padding: var(--space-6) var(--space-7) var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ec-view-subject { font-size: 15px; font-weight: 600; margin-bottom: var(--space-4); }
.ec-view-meta { font-size: 11px; color: var(--text3); line-height: 1.8; }
.ec-view-meta strong { color: var(--text2); }
.ec-view-actions { display: flex; gap: var(--space-4); margin-top: 10px; }
.ec-view-body { flex: 1; overflow: hidden; position: relative; }
.ec-view-body iframe { width: 100%; height: 100%; border: none; background: #fff; }
.ec-view-plain {
  width: 100%; height: 100%; overflow-y: auto;
  padding: var(--space-6) var(--space-7); font-size: 12px; line-height: 1.7;
  color: var(--text2); white-space: pre-wrap; word-break: break-word;
}
.ec-view-plain::-webkit-scrollbar { width: 4px; }
.ec-view-plain::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
.ec-empty-view {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 13px;
}
.ec-detail-inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ec-compose {
  border-top: 1px solid var(--border); background: var(--bg2);
  flex-shrink: 0; display: none; flex-direction: column;
}
.ec-compose.open { display: flex; }
.ec-compose-header {
  display: flex; align-items: center; padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border); gap: 10px;
}
.ec-compose-title { font-size: 12px; font-weight: 600; flex: 1; }
.ec-compose-field {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border);
}
.ec-compose-label { font-size: 11px; color: var(--text3); width: 56px; flex-shrink: 0; }
.ec-compose-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 12px;
}
.ec-compose-textarea {
  background: none; border: none; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 12px;
  resize: none; min-height: 80px; max-height: 160px;
  padding: 10px var(--space-6); line-height: 1.6; width: 100%;
}
.ec-compose-footer {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border);
}

/* ── Email client estensioni ─────────────── */
.ec-action-bar {
  display: none; padding: var(--space-2) 14px; gap: var(--space-3); align-items: center;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ec-action-bar.visible { display: flex; }
.ec-search-wrap {
  flex: 1; display: flex; align-items: center; gap: var(--space-3);
  padding: 5px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ec-search-input {
  flex: 1; background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 10px;
  color: var(--text); font-family: var(--sans); font-size: 12px;
  outline: none; transition: border-color .2s;
}
.ec-search-input:focus { border-color: var(--accent); }
.ec-search-input::placeholder { color: var(--text3); }
.ec-search-badge {
  font-size: 10px; background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-1) 7px; color: var(--text3);
}
.ec-attachments {
  display: none; padding: var(--space-3) var(--space-6); gap: var(--space-3); flex-wrap: wrap;
  border-top: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;
}
.ec-attachments.visible { display: flex; }
.ec-attachment-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px var(--space-4); background: var(--bg4); border: 1px solid var(--border);
  border-radius: 5px; font-size: 11px; color: var(--text2); cursor: pointer;
  transition: border-color .12s;
}
.ec-attachment-chip:hover { border-color: var(--accent); color: var(--accent); }
.ec-attachment-chip svg { width: 11px; height: 11px; fill: currentColor; }
.ec-compose-field-sm {
  display: none; align-items: center; gap: 10px;
  padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--border);
}
.ec-compose-field-sm.visible { display: flex; }
.ec-cc-toggle {
  font-size: 10px; color: var(--text3); cursor: pointer; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: none;
  transition: color .12s, border-color .12s;
}
.ec-cc-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ── Login overlay ────────────────────────── */
#login-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 360px; background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.login-logo {
  width: 44px; height: 44px;
  background: var(--accent); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  margin: 0 auto var(--space-1);
}
.login-title {
  text-align: center; font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.login-subtitle {
  text-align: center; font-size: 12px; color: var(--text3);
  margin-top: -10px;
}
.login-field { display: flex; flex-direction: column; gap: var(--space-3); }
.login-label { font-size: 10px; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; }
.login-input {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  color: var(--text); font-family: var(--sans); font-size: 13px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,173,88,.12); }
.login-input::placeholder { color: var(--text3); }
.login-btn {
  width: 100%; padding: 11px; border-radius: 8px;
  background: var(--accent); border: none; cursor: pointer;
  color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600;
  transition: background .15s; margin-top: var(--space-1);
}
.login-btn:hover:not(:disabled) { background: var(--accent2); }
.login-btn:disabled { opacity: .55; cursor: default; }
.login-error { font-size: 12px; color: var(--accent); text-align: center; min-height: 16px; }
.logout-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: 3px 9px;
  font-size: 11px; cursor: pointer; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.logout-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Gestionale full-page overlay ──────────────── */
#gestionale-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); flex-direction: column;
  margin-left: var(--sidebar);
}
#gestionale-overlay.open { display: flex; }


.g-topbar {
  height: var(--topbar); background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: 10px; flex-shrink: 0;
}
.g-topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.g-close {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.g-close:hover { color: var(--accent); border-color: var(--accent); }

/* ── La ricerca in testata ────────────────────────────────────────────────
   `margin-left:auto` stava sul bottone Segnala e spingeva tutto a destra;
   ora sta qui, perche' la casella e' la prima cosa dopo il titolo. */
.g-cerca-wrap { position: relative; margin-left: auto; flex: 0 1 340px; min-width: 0; }
.g-cerca-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg2, #fff); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3) 10px; font-size: 12px; font-family: inherit;
}
.g-cerca-input:focus { outline: none; border-color: var(--accent); }
.g-cerca-pannello {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: min(460px, 92vw); max-height: 68vh; overflow-y: auto;
  background: var(--bg2, #fff); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: var(--space-3);
}
.g-cerca-gruppo {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3); padding: var(--space-4) 10px var(--space-2);
}
.g-cerca-riga {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: inherit; color: var(--text); cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius); line-height: 1.35;
}
.g-cerca-riga:hover, .g-cerca-riga.scelta { background: var(--bg4, rgba(0,0,0,.06)); }
.g-cerca-riga b { font-size: 12.5px; font-weight: 600; display: block; }
.g-cerca-riga span { font-size: 11px; color: var(--text3); }
.g-cerca-nota { font-size: 11px; color: var(--text3); padding: 10px; line-height: 1.5; }
.g-body { display: flex; flex: 1; overflow: hidden; }
.g-sidenav {
  width: 160px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: var(--space-4) 0;
}
.g-nav-item {
  display: flex; align-items: center;
  padding: var(--space-4) 14px; cursor: pointer;
  border-radius: var(--radius); margin: 1px var(--space-3);
  font-size: 12px; color: var(--text2);
  transition: background .12s, color .12s;
}
.g-nav-item:hover { background: var(--bg4); color: var(--text); }
.g-nav-item.active { background: rgba(61,173,88,.12); color: var(--accent); }
.g-content { flex: 1; overflow-y: auto; padding: var(--space-7); }
.g-section { display: none; }
.g-section.active { display: block; }
.g-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); flex-wrap: wrap; }
.g-title { font-size: 15px; font-weight: 600; }
.g-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: 5px var(--space-5);
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.g-btn:hover { color: var(--accent); border-color: var(--accent); }
.g-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.g-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
.g-btn.danger { color: var(--rosso); }
.g-btn.danger:hover { color: var(--rosso); border-color: var(--rosso); }
/* Le azioni che non si usano ogni giorno stanno dietro un «⋯»: in riga
   restano due o tre tasti, e su uno schermo da 1366 la tabella ci sta. */
.g-menu { position: relative; display: inline-block; }
.g-menu-voci { position: absolute; right: 0; top: 100%; z-index: 40; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.g-menu-voci[hidden] { display: none; }
.g-menu-voci .g-btn { text-align: left; width: 100%; padding: var(--space-2) var(--space-4); }
/* Le due taglie piccole standard, al posto delle ~20 combinazioni di padding
   inline. Scopate anche sull'overlay perche' li' .g-btn e' piu' specifico. */
.g-btn.sm, #gestionale-overlay .g-btn.sm { padding: var(--space-1) var(--space-4); font-size: 11px; }
.g-btn.xs, #gestionale-overlay .g-btn.xs { padding: 1px var(--space-3); font-size: 10px; }
/* Focus da tastiera visibile ovunque (WCAG 2.4.7). :focus-visible scatta solo
   su tab/tastiera, non sul click del mouse: non "sporca" l'uso a mouse. Copre
   in un colpo bottoni, link, chip d'aiuto e colonne ordinabili. */
.g-btn:focus-visible, a:focus-visible, .g-aiuto:focus-visible,
#gestionale-overlay thead th.g-ord-col:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.g-table-wrap { overflow-x: auto; }
.g-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.g-table th {
  text-align: left; padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border2);
  color: var(--text3); font-weight: 500; white-space: nowrap;
}
.g-table td {
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  color: var(--text2); vertical-align: middle;
}
.g-table tr:hover td { background: var(--bg4); }
.g-badge {
  display: inline-block; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-lg); font-size: 10px; font-weight: 600;
}
.g-badge-green  { background: rgba(58,107,53,.15);  color: var(--green); }
.g-badge-yellow { background: rgba(255,193,7,.12);  color: var(--giallo); }
.g-badge-red    { background: rgba(140,47,57,.12);  color: var(--rosso); }
.g-badge-grey   { background: rgba(114,107,96,.14); color: #726B60; }
.g-badge-blue   { background: rgba(var(--info-rgb),.12);    color: var(--info); }
.g-badge-orange { background: rgba(var(--arancio-rgb),.12); color: var(--arancio); }
.g-badge-purple { background: rgba(var(--viola-rgb),.12);   color: var(--viola); }
.scad-strip { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5) var(--space-6); border-radius:8px; margin-bottom:var(--space-4); font-size:13px; }
.scad-strip-label { font-weight:600; }
.scad-strip-val   { font-size:15px; font-weight:700; }
.scad-strip-cnt   { font-size:11px; color:inherit; opacity:.7; margin-left:var(--space-2); }
.scad-incasso-card { background:var(--card-bg); border:2px solid rgba(var(--green-rgb),.2); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-7); flex:1; }
.scad-pagam-card  { background:var(--card-bg); border:2px solid rgba(var(--rosso-rgb),.2); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-7); flex:1; }
.scad-nav-badge   { display:inline-block; background:var(--rosso); color:#fff; border-radius:var(--radius-lg); font-size:10px; font-weight:700; padding:1px var(--space-3); margin-left:5px; vertical-align:middle; line-height:16px; }
.g-empty { color: var(--text3); font-size: 13px; padding: 30px 0; text-align: center; }

/* ── Riordinare per colonna ───────────────────────────────────────────────
   La manina compare solo sulle intestazioni che ordinano davvero: la classe
   la mette il JavaScript passandoci sopra, perche' se una colonna sia
   ordinabile dipende da quante righe ci sono, e quello cambia. */
/* Le colonne ordinabili si dichiarano: una freccina neutra ⇅ sempre visibile
   (non solo all'hover), che l'ordinamento attivo sostituisce con la vera ▲▼. */
#gestionale-overlay thead th.g-ord-col { cursor: pointer; user-select: none; }
#gestionale-overlay thead th.g-ord-col::after {
  content: ' ⇅'; font-size: 9px; opacity: .35; font-weight: 400;
}
#gestionale-overlay thead th.g-ord-col:hover { text-decoration: underline; }
#gestionale-overlay thead th.g-ord-col:hover::after { opacity: .7; }
/* quando la colonna e' quella ordinata, la freccia vera prende il posto di ⇅ */
#gestionale-overlay thead th:has(.g-ord-freccia)::after { content: none; }
.g-ord-freccia { font-size: 9px; opacity: .85; }
.g-detail-h { font-size:12px; font-weight:600; color:var(--text2); letter-spacing:.01em; margin:18px 0 var(--space-3); }
#g-modal-bg {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.65); align-items: center; justify-content: center;
}
#g-modal-bg.open { display: flex; }
#g-modal {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; width: 560px; max-width: 96vw;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
#g-modal.wide { width: 740px; }
#g-modal.grande { width: min(1160px, 94vw); max-height: 92vh; }

/* Un secondo strato di modale, che si impila SOPRA il primo (360 > 300): serve
   quando da un modulo se ne apre un altro — la stima a ore sopra il preventivo —
   senza SOSTITUIRE e chiudere il primo (era il difetto segnalato da Matteo).
   Eredita l'aspetto di #g-modal (header/body/footer sono classi condivise). */
#g-modal2-bg {
  display: none; position: fixed; inset: 0; z-index: 360;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center;
}
#g-modal2-bg.open { display: flex; }
#g-modal2 {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; width: 520px; max-width: 96vw;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}

/* La scheda progetto: finestra grande come le altre, ma con sfondo proprio
   SOTTO quello del modale condiviso (290 < 300), cosi' i sotto-moduli che
   aprono #g-modal si impilano sopra invece di sostituirla. */
#gcs-modal-bg {
  display: none; position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.65); align-items: center; justify-content: center;
}
#gcs-modal-bg.open { display: flex; }
#gs-commessa-detail {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; padding: var(--space-7);
  width: min(1160px, 94vw); max-height: 92vh; overflow-y: auto;
}
/* Segnalazione 299: a tutto schermo, a scelta di chi guarda (si ricorda). */
#gs-commessa-detail.grande { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
                             border-radius: 0; border: 0; }
#gs-commessa-detail:focus { outline: none; }  /* focus programmatico, non un controllo */
.gcs-x { position: absolute; top: var(--space-5); right: var(--space-5);
         padding: var(--space-1) var(--space-4); font-size: 12px; z-index: 2; }
/* Nella scheda commessa, che ora scorre tutta (299), la ✕ resta in vista:
   a tutto schermo non c'e' uno sfondo su cui cliccare per chiudere. */
#gs-commessa-detail > .gcs-x { position: sticky; top: 0; right: auto; align-self: flex-end;
                               margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) -26px 0; }
/* Scorre la finestra intera, non il solo pannello (segnalazione 299): con
   testata, totali e «Per famiglia» fermi, su uno schermo basso il pannello
   restava sotto il bordo e non si raggiungeva. Le linguette restano
   agganciate in alto mentre si scende.
   Tutte le distanze sulla scala --space, cosi' il ritmo resta costante. */
.gcs-head { flex-shrink: 0; display: flex; gap: var(--space-6); flex-wrap: wrap;
            align-items: flex-start; justify-content: space-between; padding-right: 34px; }
.gcs-head-id { min-width: 0; }
.gcs-head-az { display: flex; gap: var(--space-4); flex-shrink: 0; }
#gcs-numero { font-family: monospace; font-size: 12px; color: var(--text3); }
#gcs-titolo { font-size: 19px; font-weight: 600; color: var(--text); margin-top: var(--space-1);
              text-wrap: balance; }
.gcs-stato { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.gcs-totali { flex-shrink: 0; display: flex; gap: var(--space-5); flex-wrap: wrap;
              margin: var(--space-6) 0 var(--space-1); align-items: stretch; }
/* Tre gruppi — ricavi, costi, margine — invece di riquadri tutti uguali. */
.gcs-gruppo {
  flex: 1 1 200px; min-width: 180px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
}
.gcs-gruppo-h {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text3); margin-bottom: var(--space-4);
}
.gcs-tot-riga { display: flex; justify-content: space-between; gap: var(--space-5);
                align-items: baseline; padding: var(--space-1) 0; font-size: 12px; }
.gcs-tot-lab { color: var(--text2); }
.gcs-tot-val { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gcs-tot-val.red { color: var(--rosso); }
.gcs-tot-val.giallo { color: var(--giallo-cupo); }
.gcs-tot-val.strong { font-weight: 700; }
.gcs-tot-riga:has(.strong) { border-top: 1px solid var(--border2);
                             margin-top: var(--space-2); padding-top: var(--space-3); }
/* Budget ore: registrate su previste (19 set 2026) */
.g-barra-ore { background: var(--bg3); border-radius: var(--radius-sm); height: 10px; overflow: hidden; margin: var(--space-3) 0 var(--space-1); }
.g-barra-ore > div { height: 100%; transition: width .4s; }
/* Il margine: il numero derivato, in evidenza. */
.gcs-gruppo-margine { display: flex; flex-direction: column; justify-content: center; }
.gcs-margine-val { font-size: 24px; font-weight: 700; line-height: 1.1;
                   font-variant-numeric: tabular-nums; }
.gcs-margine-pct { font-size: 13px; font-weight: 600; margin-top: var(--space-1); }
.gcs-margine-val.green, .gcs-margine-pct.green { color: var(--verde-ok); }
.gcs-margine-val.red,   .gcs-margine-pct.red   { color: var(--rosso); }
.gcs-margine-base { font-size: 10px; color: var(--text3); margin-top: var(--space-1); }
.gcs-campi {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-5) var(--space-7); margin: var(--space-6) 0 var(--space-3);
}
.gcs-campo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gcs-campo-full { grid-column: 1 / -1; }
.gcs-k { font-size: 10px; color: var(--text3); letter-spacing: .02em; }
.gcs-v { font-size: 12px; color: var(--text); word-break: break-word; }
.gcs-tabs { flex-shrink: 0; margin-top: var(--space-6);
            position: sticky; top: calc(-1 * var(--space-7)); z-index: 1;
            background: var(--bg2); padding-top: var(--space-4); }
.gcs-pannello { flex: 0 0 auto; min-height: 140px; }
.gcs-azioni { flex-shrink: 0; margin-top: var(--space-6); display: flex; gap: var(--space-4); }
/* La tendina coi dati del progetto e la tabella per famiglia (299). */
.gcs-dettagli { flex-shrink: 0; margin-top: var(--space-5); }
.gcs-dettagli > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text2);
                          padding: var(--space-3) 0; list-style: none; user-select: none; }
.gcs-dettagli > summary::-webkit-details-marker { display: none; }
.gcs-dettagli > summary::before { content: '▸'; display: inline-block; width: 1.2em; color: var(--text3);
                                  transition: transform .15s; }
.gcs-dettagli[open] > summary::before { transform: rotate(90deg); }
.gcs-dettagli > summary:hover { color: var(--text); }
#gcs-famiglie { display: flex; margin-top: var(--space-3); }
#gcs-famiglie:empty { display: none; }

/* Scheda anagrafica: stessa finestra grande (piu' stretta, non ha tab). */
#gsa-modal-bg {
  display: none; position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.65); align-items: center; justify-content: center;
}
#gsa-modal-bg.open { display: flex; }
#gs-anagrafica-detail {
  position: relative;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; padding: var(--space-7);
  width: min(1040px, 94vw); max-height: 92vh; overflow-y: auto;
}
#gs-anagrafica-detail:focus { outline: none; }
/* Titolo sopra, dati in griglia, referenti a tutta larghezza sotto: affiancati
   la tabella a 5 colonne usciva dalla scheda e nascondeva Modifica/Elimina. */
#gcd-ragione { font-size: 19px; font-weight: 600; color: var(--text);
               padding-right: 40px; text-wrap: balance; }
.gsa-referenti { margin-top: var(--space-7); padding-top: var(--space-6);
                 border-top: 1px solid var(--border2); }
.gsa-referenti-h { display: flex; justify-content: space-between; align-items: center;
                   gap: var(--space-5); margin-bottom: var(--space-4); }
.gsa-referenti-h .gcs-gruppo-h { margin-bottom: 0; }
.g-modal-header {
  padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.g-modal-title { font-size: 14px; font-weight: 600; flex: 1; }
.g-modal-body { padding: var(--space-6) var(--space-7); overflow-y: auto; flex: 1; }
.g-modal-footer {
  padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border);
  display: flex; gap: var(--space-4); justify-content: flex-end; flex-shrink: 0;
}
.g-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--space-6); margin-bottom: 10px; }
.g-fgrid.full { grid-template-columns: 1fr; }
.g-field { display: flex; flex-direction: column; gap: var(--space-2); }
.g-label { font-size: 11px; color: var(--text3); font-weight: 500; }
.g-input {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; font-size: 12px;
  color: var(--text); width: 100%; outline: none;
  transition: border-color .15s;
}
.g-input:focus { border-color: var(--accent); }
select.g-input option { background: var(--bg4); }
/* Il campo commessa che si cerca scrivendo (gComCampo, richiesta di Raffaele):
   l'elenco sta nel flusso del modulo, sotto la casella, non galleggia. */
.g-comcampo { min-width: 0; }
.g-comcampo-elenco {
  margin-top: 3px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg4);
}
.g-comcampo-voce { padding: 6px 10px; font-size: 12px; cursor: pointer; line-height: 1.35; }
.g-comcampo-voce + .g-comcampo-voce { border-top: 1px solid var(--border); }
.g-comcampo-voce:hover, .g-comcampo-voce.evid { background: var(--bg2); }
.g-comcampo-voce.evid { box-shadow: inset 3px 0 0 var(--accent); }
.g-comcampo-voce .chi { color: var(--text3); margin-left: 6px; }
.g-comcampo-voce.chiusa { color: var(--text3); }
.g-comcampo-voce.vuota, .g-comcampo-voce.nessuna { color: var(--text3); font-style: italic; }
.g-comcampo-voce.nessuna { cursor: default; }
.g-comcampo-nota { color: var(--rosso); font-size: 11px; margin-top: 2px; }
.g-comcampo-nota:empty { display: none; }
/* Segnalazione 35 di Matteo: «la finestra dove si scrive i testi di
   introduzione e conclusione e' piccola e se la stretcho mi va fuori dalla
   finestra principale». Si tira solo in altezza, e piu' larga del modale non
   ci va comunque. */
textarea.g-testo-lungo { resize: vertical; max-width: 100%; min-height: 120px; }
/* Segnalazione 269 di Matteo, lo stesso guaio della 35 su un'altra casella:
   la descrizione di una segnalazione, tirata in orizzontale, usciva dallo
   schermo e non si riprendeva piu'. La regola vale ora per tutte le caselle
   di testo del gestionale; restano libere solo le descrizioni delle righe,
   che si allargano apposta dentro la loro tabella. */
textarea.g-input:not(.g-riga-descr) { resize: vertical; max-width: 100%; }
.g-righe-wrap { margin-top: var(--space-4); }

/* ── AI components ────────────────────────────────────────────────── */
.ai-btn {
  background: rgba(61,173,88,.1); border: 1px solid rgba(61,173,88,.3);
  color: var(--accent); border-radius: var(--radius); padding: 3px 10px;
  font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.ai-btn:hover { background: rgba(61,173,88,.18); }
.ai-btn:disabled { opacity: .45; cursor: default; }
.ai-panel {
  margin-top: 10px; background: rgba(61,173,88,.05);
  border: 1px solid rgba(61,173,88,.18); border-radius: var(--radius-lg);
  padding: 11px 14px; font-size: 12px;
  animation: ai-in .18s ease;
}
.ai-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.ai-panel-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
}
.ai-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.ai-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ai-section-lbl { font-size: 10px; font-weight: 600; color: var(--text3); margin-bottom: 3px; }
.ai-section-val { color: var(--text); line-height: 1.55; }
.ai-bozza-wrap {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 11px 14px; margin-bottom: 10px;
}
.ai-bozza-lbl { font-size: 10px; font-weight: 600; color: var(--text3); margin-bottom: 7px; }
.ai-tag {
  display: inline-block; background: rgba(76,175,125,.1);
  border: 1px solid rgba(76,175,125,.22); color: var(--green);
  border-radius: var(--radius-sm); padding: 1px 7px; font-size: 11px; margin: var(--space-1) var(--space-1) 0 0;
}
.ai-spin { display: inline-block; animation: ai-spin .65s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.g-righe-hdr { font-size: 11px; color: var(--text3); font-weight: 500; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-4); }
.g-righe-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.g-righe-tbl th { color: var(--text3); font-weight: 500; text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.g-righe-tbl td { padding: 3px var(--space-2); }
/* Ogni voce del preventivo su due righe allineate: sopra il preventivo
   interno (quello del cliente), sotto quello del professionista esterno —
   importo sotto il prezzo, ricarico sotto lo sconto, risultato sotto il totale. */
.g-righe-tbl tr:not(.g-riga-est) > td { padding-top: var(--space-3); }
.g-righe-tbl tr.g-riga-est > td { background: var(--bg); padding-bottom: var(--space-3);
                                  border-bottom: 1px solid var(--border); }
.g-est-lab { font-size: 10px; color: var(--text3); text-transform: uppercase;
             letter-spacing: .04em; text-align: right; }
.g-est-nota { font-size: 10px; color: var(--text3); }
.g-est-input { border-style: dashed; font-size: 11px; }
/* Segnalazioni: il numero in evidenza e la casella di ricerca. */
.seg-numero { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--accent);
              background: rgba(var(--green-rgb), .10); border-radius: 4px; padding: 0 6px; }
.seg-cerca-box { display: inline-flex; gap: var(--space-2); align-items: center; }
.seg-cerca-box .g-input { width: 260px; padding: var(--space-2) var(--space-4); font-size: 12px; }
@media (max-width: 760px) { .seg-cerca-box, .seg-cerca-box .g-input { width: 100%; } }
/* L'avviso dalla commessa: in testa il preventivo e il già fatturato. */
.gav-testa { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr); gap: var(--space-6);
             margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.gav-gia { background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.gav-numeri { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 12px; color: var(--text2); }
.gav-numeri strong { color: var(--text); white-space: nowrap; }
@media (max-width: 760px) { .gav-testa { grid-template-columns: 1fr; } }
/* Interruzione di pagina: il comando da copiare, e la nota sulla riga. */
.g-salto-chip { font: inherit; font-size: 10px; font-weight: 400; color: var(--text2); background: var(--bg);
                border: 1px dashed var(--border2); border-radius: 9px; padding: 0 7px; margin-left: var(--space-3);
                cursor: pointer; vertical-align: middle; white-space: nowrap; }
.g-salto-chip:hover { border-color: var(--accent); color: var(--accent); }
.g-salto-chip code { font-size: 10px; }
.g-salto-nota { font-size: 10px; color: var(--accent); margin-top: 2px; }
/* Visore PDF nella pagina (gPdfAnteprima): sopra a tutte le finestre. */
#g-pdfv-bg { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.7);
             align-items: center; justify-content: center; }
#g-pdfv-bg.open { display: flex; }
#g-pdfv { background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px;
          width: min(960px, 96vw); height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.g-pdfv-barra { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6);
                border-bottom: 1px solid var(--border); flex-shrink: 0; }
.g-pdfv-barra strong { margin-right: auto; font-size: 14px; }
#g-pdfv-pagine { flex: 1; overflow: auto; background: #6b6b6b; padding: var(--space-6); }
#g-pdfv-pagine canvas { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto var(--space-6);
                        background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
@media (max-width: 760px) { #g-pdfv { width: 100vw; height: 100vh; border-radius: 0; }
  #g-pdfv-pagine { padding: var(--space-3); } }
.g-righe-tbl td .g-input { padding: var(--space-2) 7px; font-size: 11px; }
/* Il numero della riga (269): stretto, centrato, senza le frecce del campo
   numerico che in 5% di larghezza coprirebbero la cifra. */
.g-righe-tbl td .g-riga-num { text-align: center; padding-left: 2px; padding-right: 2px; -moz-appearance: textfield; }
.g-righe-tbl td .g-riga-num::-webkit-inner-spin-button,
.g-righe-tbl td .g-riga-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* La descrizione della riga: si lavora dentro la casella. Parte da una riga,
   cresce col testo e si tira dall'angolo (anche in larghezza, fino a quanto
   la colonna permette di sforare: il resto della riga si sposta). */
.g-righe-tbl textarea.g-riga-descr { display: block; width: 100%; min-height: 30px; resize: both;
  box-sizing: border-box; line-height: 1.4; font-family: inherit; overflow-y: auto; }
/* 296: la casella che mostra grassetto e colori al posto dei segni (gRicco in
   gest-preventivi.js). Si comporta come le textarea che sostituisce. */
.g-ricco { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; cursor: text;
  line-height: 1.5; box-sizing: border-box; }
.g-ricco.g-testo-lungo { resize: vertical; min-height: 150px; max-height: 60vh; }
.g-righe-tbl .g-ricco.g-riga-descr { display: block; width: 100%; min-height: 30px; max-height: 180px;
  resize: both; line-height: 1.4; }
.g-righe-tbl tr.g-riga-sel > td { background: rgba(var(--green-rgb), .12); }
/* Segnalazione 319: la tabella righe del preventivo a colonne fisse (le
   larghezze stanno nel colgroup, gPrevColgroup): i numeri hanno la misura
   delle cifre, la descrizione tutto il resto. Le caselle si tirano solo in
   altezza e mostrano tutto il testo, senza tetto. Sotto i 900 px la tabella
   non si schiaccia: scorre di lato dentro il suo riquadro. */
.g-righe-prev { table-layout: fixed; min-width: 900px; }
.g-righe-wrap:has(> .g-righe-prev) { overflow-x: auto; }
/* Segnalazione 292: l'anteprima delle ore da Toggl. */
/* Segnalazione 309: costi e costo orario in Dashboard (gStrDisegna). */
.g-str-info { font-size: 11px; color: var(--text3); }
.g-str-voce { cursor: pointer; }
.g-str-voce:hover td { background: var(--bg); }
.g-str-freccia { display: inline-block; width: 12px; color: var(--accent); }
.g-str-dett > td { background: var(--bg); padding: var(--space-3) var(--space-5) var(--space-4) 28px; }
.g-str-nota { font-size: 11px; color: var(--text2); margin-bottom: var(--space-2); }
.g-str-righe { width: 100%; border-collapse: collapse; font-size: 11px; }
.g-str-righe td { padding: 2px 0; border-bottom: 1px solid var(--border); }
.g-str-somma td { border-top: 1px solid var(--border2); }
.gt-tabella { table-layout: fixed; width: 100%; }
.gt-tabella td { vertical-align: top; overflow-wrap: anywhere; }
.gt-tabella td .g-input { padding: 4px 6px; font-size: 12px; }
.gt-tabella tr.gt-ferma td { opacity: .55; }
.g-righe-prev td { overflow-wrap: anywhere; }
.g-righe-prev textarea.g-riga-descr, .g-righe-prev .g-ricco.g-riga-descr { resize: vertical; max-height: none; }
/* L'ultimo preventivo su cui si e' lavorato, evidenziato nell'elenco (richiesta
   di Matteo). Era invisibile: la regola sopra vale solo dentro .g-righe-tbl, non
   nella lista. Un filo piu' marcata, con una barra verde a sinistra per vederla
   a colpo d'occhio. */
/* L'ultima voce consultata in ogni elenco (gUltimeApplica in gestionale.js):
   riga di tabella con sfondo e barra a sinistra, scheda con il bordo. */
tr.g-ultima > td { background: rgba(var(--green-rgb), .16) !important; }
tr.g-ultima > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.g-ultima:not(tr) { box-shadow: inset 0 0 0 2px var(--accent); background-color: rgba(var(--green-rgb), .10) !important; }
.g-totale-row { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); margin-top: 10px; font-size: 13px; }
.g-totale-val { font-weight: 600; color: var(--accent); }

/* ── Personale inner tabs ── */
.g-inner-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); }
.g-inner-tab {
  padding: var(--space-4) var(--space-6); font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--text3); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; margin-bottom: -1px;
}
.g-inner-tab:hover { color: var(--text); }
.g-inner-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Appuntamenti in Agenda (segnalazione 306, passo 2) */
.g-segmenti { display: inline-flex; }
.g-segmenti .g-btn { border-radius: 0; }
.g-segmenti .g-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.g-segmenti .g-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.g-segmenti .g-btn[aria-pressed="true"] { background: rgba(124,58,237,.12); color: #5B21B6; border-color: #7C3AED; position: relative; }
.g-app-sett { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.g-app-sett .testa { padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.g-app-sett .testa.oggi { color: #5B21B6; background: rgba(124,58,237,.06); }
.g-app-sett .giornata { min-height: 24px; padding: 2px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); cursor: pointer; }
.g-app-sett .ore { position: relative; border-left: 1px solid var(--border); cursor: pointer; }
.g-app-sett .ore.festa { background: repeating-linear-gradient(45deg, #fff, #fff 4px, var(--bg2) 4px, var(--bg2) 8px); }
.g-app-sett .riga-ora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bg3); pointer-events: none; }
.g-app-sett .etichetta-ora { position: relative; font-size: 10px; color: var(--text3); text-align: right; padding-right: 4px; }
.g-app-blocco { position: absolute; background: #7C3AED; color: #fff; border-radius: 4px; padding: 2px 4px; font-size: 11px;
  line-height: 1.25; overflow: hidden; box-shadow: 0 0 0 1px #fff; }
.g-app-blocco.tocca, .g-app-voce.tocca { cursor: pointer; }
.g-app-blocco b { font-weight: 600; }
.g-app-voce { background: #7C3AED; color: #fff; border-radius: 4px; padding: 1px 4px; font-size: 11px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-app-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.g-app-mese .testa { padding: 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--border); }
.g-app-mese .giorno { min-height: 96px; padding: 4px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); cursor: pointer; min-width: 0; }
.g-app-mese .giorno:nth-child(7n+1) { border-left: 0; }
.g-app-mese .giorno.fuori { background: var(--bg2); color: var(--text3); }
.g-app-mese .num { font-size: 11px; font-weight: 600; margin-bottom: 3px; }
.g-app-mese .giorno.oggi .num { color: #fff; background: #7C3AED; border-radius: 9px; padding: 0 6px; display: inline-block; }
@media (max-width: 760px) {
  .g-app-mese .giorno { min-height: 60px; }
  .g-app-voce { font-size: 10px; }
}
/* Attività (segnalazione 315): due colonne, schede compatte */
.g-att-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .g-att-colonne { grid-template-columns: 1fr; } }
.g-att-col-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text3); padding-bottom: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.g-att-card { cursor: pointer; border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; background: var(--bg2); }
.g-att-card.mio { border-left-color: var(--accent); }
.g-att-card:hover { border-color: var(--accent); }
.g-att-tit { font-size: 13px; font-weight: 500; color: var(--text); }
.g-att-chi { font-size: 12px; color: var(--text2); margin: 2px 0 1px; }
.g-att-ultimo { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tab-conta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--border); color: var(--text3); font-size: 10px; line-height: 16px; text-align: center; font-weight: 500; }
.g-inner-panel { display: none; }
.g-inner-panel.active { display: block; }

/* ══ Tema Solida ════════════════════════════════════════════════════════════
   Il gestionale deve somigliare a quello che le persone di Solida usano tutti
   i giorni. I due colori non sono scelti a occhio: sono quelli del marchio,
   presi contando i pixel del logo (immagini/layout/logo.png) —
   #373736 antracite sul 79,5% del logo, #3DAD58 verde sul 9,1%. Sono anche i
   due colori su cui EV GEST costruisce le sue pagine, quindi il gestionale
   nuovo e quello vecchio si somigliano senza sembrare copiati.
   Tutto confinato in #gestionale-overlay: posta, file, calendario e AI non
   cambiano aspetto.                                                        */

#gestionale-overlay {
  /* Un solo posto per la palette: i vecchi nomi --sol-* ora RIFERISCONO i token
     globali, invece di ripeterne i valori (erano duplicati identici). */
  --sol-verde:     var(--accent);
  --sol-verde-cupo:var(--accent2);
  --sol-antracite: var(--antracite);
  --sol-riga:      var(--bg);
  --sol-bordo:     var(--border);
  --sol-testo:     var(--text);
  font-family: var(--sans);
  font-size: 13px;
  background: #FFFFFF;
  color: var(--sol-testo);
}

/* testata: nome della sezione in antracite, chiusa dal filo verde */
#gestionale-overlay .g-topbar {
  background: #FFFFFF;
  border-bottom: 2px solid var(--sol-verde);
  padding-left: 18px;
}
#gestionale-overlay .g-topbar-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  letter-spacing: .02em;
}
#gestionale-overlay .g-close:hover { color: var(--sol-verde); border-color: var(--sol-verde); }

/* menu: chiaro come la home, accento verde sull'attivo (verso il sito) */
#gestionale-overlay .g-sidenav {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: var(--space-5) 0;
  width: 172px;
}
#gestionale-overlay .g-nav-item {
  color: var(--text2);
  font-size: 12px;
  border-radius: var(--radius);
  margin: 1px var(--space-3);
  padding: var(--space-4) 14px;
}
#gestionale-overlay .g-nav-item:hover { background: var(--bg4); color: var(--text); }
#gestionale-overlay .g-nav-item.active {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  font-weight: 600;
}

/* contenuto: il .pagina di EV GEST — bianco, arioso, largo quanto serve */
#gestionale-overlay .g-content { padding: 18px 22px; background: #FFFFFF; }
/* Segnalazione 329 di Sara: il tasto «torna su» (fisso in basso a destra,
   42px a 24px dal fondo) copriva la freccia «pagina dopo» degli elenchi.
   Lo spazio in fondo fa salire l'ultima riga sopra il tasto. */
#gestionale-overlay .g-content { padding-bottom: 84px; }
#gestionale-overlay .g-title {
  font-size: 17px; color: var(--text); font-weight: 600;
}
#gestionale-overlay .g-header {
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sol-bordo);
}

/* tabelle: intestazione verde piena, righe alternate, filo verde in fondo */
#gestionale-overlay .g-table {
  border-left: 1px solid var(--sol-bordo);
  border-right: 1px solid var(--sol-bordo);
  font-size: 12px;
}
#gestionale-overlay .g-table th {
  background: var(--card-bg);              /* bianco: serve allo sticky */
  color: var(--text2);                     /* testo neutro, non verde pieno */
  font-weight: 600;                        /* 600, non bold */
  text-transform: none;                    /* niente maiuscolo forzato */
  font-size: 11px;
  letter-spacing: 0;
  border-bottom: 2px solid var(--accent);  /* il filo verde, l'unico accento */
  padding: 7px 9px;
  position: sticky; top: var(--g-testa-h, 0px); z-index: 1;
}
/* Segnalazione 282 di Matteo (26/09): «in tutte le sezioni quando scorro in
   giù la pagina tieni fissa l'intestazione sopra». Le intestazioni delle
   colonne erano già dichiarate fisse, ma non restavano: il contenitore della
   tabella scorreva di lato da sé (overflow-x: auto), e una cosa fissa resta
   ferma rispetto al contenitore che scorre più vicino, cioè quello, che in
   verticale non scorre mai. Su schermo largo il contenitore non scorre più da
   sé (una tabella più larga fa scorrere di lato la pagina) e la barra della
   sezione — titolo e tasti — resta in cima; le colonne si fermano subito
   sotto, all'altezza che gFissaIntestazioni() scrive in --g-testa-h. Sul telefono
   resta com'era: lì scorrere di lato la tabella serve. */
@media (min-width: 761px) {
  #gestionale-overlay .g-content { overflow-x: auto; }
  #gestionale-overlay .g-section > .g-table-wrap,
  #gestionale-overlay .g-section > div > .g-table-wrap { overflow-x: visible; }
  /* Segnalazione 285 (26/09): una tabella più annidata (i vocabolari delle
     Impostazioni) ha ancora il contenitore che scorre di lato, e dentro quello
     le colonne «ferme» a --g-testa-h scendevano di quanto è alta la barra e
     coprivano le prime righe. Lì si fermano in cima al proprio contenitore,
     cioè restano dove sono. */
  #gestionale-overlay .g-table-wrap .g-table th { top: 0; }
  #gestionale-overlay .g-section > .g-table-wrap .g-table th,
  #gestionale-overlay .g-section > div > .g-table-wrap .g-table th { top: var(--g-testa-h, 0px); }
  /* La barra copre anche il margine in cima alla pagina (--g-pad, misurato
     da gFissaIntestazioni): senza, le righe si vedevano passare nella fascia
     sopra la barra. */
  /* Segnalazione 305 di Matteo (05/10): la barra è larga quanto la finestra,
     la tabella a volte di più (titoli lunghi senza spazi). Scorrendo di lato
     la barra se ne va con la pagina e a destra resta una striscia scoperta,
     dove si vedevano passare le righe. Ombre piene, alte quanto la barra, la
     prolungano a destra: ognuna è una copia della barra spostata, quindi il
     passo (400px) deve restare sotto la sua larghezza minima su schermo largo
     (~490px a 761px), o fra una copia e l'altra resta un buco. Le bianche, alzate di
     1px, lasciano vedere sotto le grigie solo il filo in fondo. Le ombre non
     allargano la pagina, un elemento in più sì. */
  #gestionale-overlay .g-section > .g-header {
    position: sticky; top: calc(-1 * var(--g-pad, 0px)); z-index: 3; background: #FFFFFF;
    padding-top: var(--g-pad, 0px); margin-top: calc(-1 * var(--g-pad, 0px));
    box-shadow:
      400px -1px #FFFFFF, 800px -1px #FFFFFF, 1200px -1px #FFFFFF, 1600px -1px #FFFFFF,
      2000px -1px #FFFFFF, 2400px -1px #FFFFFF, 2800px -1px #FFFFFF,
      400px 0 var(--sol-bordo), 800px 0 var(--sol-bordo), 1200px 0 var(--sol-bordo),
      1600px 0 var(--sol-bordo), 2000px 0 var(--sol-bordo), 2400px 0 var(--sol-bordo),
      2800px 0 var(--sol-bordo);
  }
}
#gestionale-overlay .g-table td {
  border-bottom: 1px solid var(--sol-bordo);
  color: var(--sol-testo);
  padding: var(--space-3) 9px;
}
/* le righe alterne rendono leggibili le tabelle larghe (commesse ha 10 colonne) */
#gestionale-overlay .g-table tbody tr:nth-child(even) td { background: var(--sol-riga); }
/* Segnalazione 286: in Commesse le righe di cui chi guarda è project manager
   hanno un fondo appena diverso e un filo a sinistra. Sta fra le righe
   alterne e il passaggio del mouse: vince sulle prime, cede al secondo. */
#gestionale-overlay .g-table tbody tr.g-riga-mia td { background: rgba(var(--accent-rgb),.10); }
#gestionale-overlay .g-table tbody tr.g-riga-mia td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#gestionale-overlay .g-table tbody tr:hover td { background: rgba(var(--accent-rgb),.08); }
#gestionale-overlay .g-table tr:last-child td { border-bottom: 1px solid var(--sol-verde); }
/* gli importi si leggono incolonnati a destra, in cifre a larghezza fissa */
#gestionale-overlay .g-table td.num,
#gestionale-overlay .g-table td[data-num] {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* bottoni: la .submit di EV GEST, verde piena e maiuscola */
#gestionale-overlay .g-btn { border-radius: var(--radius-sm); font-size: 11px; }
#gestionale-overlay .g-btn.primary {
  background: var(--sol-verde);
  border: 1px solid var(--sol-verde-cupo);
  color: #FFFFFF;
  font-weight: 600;
}
#gestionale-overlay .g-btn.primary:hover {
  background: var(--sol-verde-cupo); border-color: var(--sol-antracite);
}
#gestionale-overlay .g-btn:hover { color: var(--sol-verde); border-color: var(--sol-verde); }

/* linguette: il .pannello di EV GEST */
#gestionale-overlay .g-inner-tabs { border-bottom: 1px solid var(--sol-verde); }
#gestionale-overlay .g-inner-tab { font-size: 11px; letter-spacing: .01em; }
#gestionale-overlay .g-inner-tab.active {
  color: var(--sol-verde-cupo); font-weight: 600; border-bottom-color: var(--sol-verde);
}

#gestionale-overlay .g-input:focus { border-color: var(--sol-verde); }
#gestionale-overlay .g-totale-val { color: var(--sol-verde-cupo); font-weight: 600; }
#gestionale-overlay .g-badge-green { background: rgba(61,173,88,.16); color: var(--sol-verde-cupo); }
/* Contrasto (verifica di ergonomia, 18 set 2026, misurato con axe-core): le
   etichette erano sotto il 4,5:1 di WCAG AA — gialle 1,8:1, verdi 3,4:1, blu
   4,3:1 — e il bianco dei tasti verdi 2,9:1. Solo il TESTO si scurisce (e lo
   sfondo dei tasti pieni): i colori del marchio restano quelli delle barre,
   dei bordi e delle linguette. Valori calcolati per stare sopra 4,6:1. */
#gestionale-overlay .g-badge-green  { color: #267138; }
#gestionale-overlay .g-badge-yellow { color: #896400; }
#gestionale-overlay .g-badge-blue   { color: #3a6886; }
#gestionale-overlay .g-badge-purple { color: #7556c5; }
#gestionale-overlay .g-btn.primary  { background: #2e8543; border-color: #267138; }
#gestionale-overlay .g-btn.primary:hover { background: #267138; }
#gestionale-overlay .g-inner-tab.active { color: #267138; }

/* Il blocco per lo smartphone sta DOPO il tema di proposito: le regole del
   tema hanno la stessa specificita' (#gestionale-overlay .g-sidenav) e, a
   parita', vince l'ultima scritta. Standogli prima veniva scavalcato, e sul
   telefono il menu restava una colonna scura larga 172px invece di una
   striscia orizzontale — visto in una schermata vera con un browser. */
/* ── Il gestionale sullo smartphone ──────────────────────────────────────────
   Tre cose rompono su uno schermo stretto, e sono queste:

   1. il menu laterale fisso da 160px si mangia meta' schermo. Diventa una
      striscia orizzontale scorrevole sopra il contenuto: nessun panino da
      aprire, tutte le voci restano raggiungibili con un dito.
   2. i moduli a due colonne diventano illeggibili: passano a una.
   3. i campi sotto i 16px fanno ingrandire la pagina da soli su iPhone
      quando ci si tocca dentro, e poi resta ingrandita. Si portano a 16px:
      e' l'unico modo di impedirlo senza bloccare lo zoom alle dita, che
      toglierla e' una cattiveria verso chi ci vede poco.

   Le tabelle scorrevano gia' per conto loro (.g-table-wrap), e restano cosi':
   su una griglia di 7 giorni per 22 commesse non c'e' impaginazione che tenga,
   e scorrere di lato e' onesto. */
@media (max-width: 760px) {
  /* L'overlay lasciava scoperti i 56px della barra laterale della dashboard:
     su un telefono da 390px e' un settimo dello schermo, occupato dalle icone
     di un'altra applicazione. Visto in una schermata vera. */
  #gestionale-overlay { margin-left: 0; }
  #gestionale-overlay .g-body { flex-direction: column; }
  #gestionale-overlay .g-sidenav {
    width: auto; border-right: none;
    /* su mobile la nav diventa una barra orizzontale: cambia solo la forma,
       il fondo chiaro e' quello del tema. */
    border-bottom: 2px solid var(--sol-verde);
    display: flex; overflow-x: auto; overflow-y: hidden;
    padding: var(--space-3) var(--space-3); gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #gestionale-overlay .g-sidenav::-webkit-scrollbar { display: none; }
  #gestionale-overlay .g-nav-item {
    white-space: nowrap; margin: 0; flex-shrink: 0;
    padding: 9px 13px; font-size: 13px;
  }
  /* l'avviso dei permessi, che nel menu orizzontale non ci starebbe */
  #g-avviso-permessi { order: 99; white-space: normal; min-width: 100%; margin: var(--space-3) var(--space-1) 0; }

  .g-content { padding: 14px var(--space-5); }
  .g-header { gap: var(--space-4); }
  .g-title { font-size: 16px; }

  /* i moduli: una colonna sola */
  .g-fgrid, .g-fgrid.full { grid-template-columns: 1fr; }

  /* la modale prende quasi tutto lo schermo, e i bottoni stanno larghi */
  #g-modal, #g-modal.wide, #g-modal.grande { width: 100%; max-width: 100%; max-height: 92vh;
                            border-radius: 12px 12px 0 0; }
  #g-modal-bg, #gcs-modal-bg, #gsa-modal-bg { align-items: flex-end; }
  #gs-commessa-detail, #gs-anagrafica-detail { width: 100%; max-width: 100%; max-height: 92vh;
                        border-radius: 12px 12px 0 0; }
  .g-modal-header, .g-modal-body, .g-modal-footer { padding-left: 14px; padding-right: 14px; }
  .g-modal-footer .g-btn { flex: 1; padding: 10px var(--space-5); }

  /* 16px: sotto questa misura iOS ingrandisce la pagina da solo al tocco */
  .g-input, #gestionale-overlay input, #gestionale-overlay select,
  #gestionale-overlay textarea { font-size: 16px; }

  /* dita, non puntatori: i bersagli piccoli diventano toccabili */
  .g-btn { padding: var(--space-4) 14px; }
  .g-inner-tab { padding: 10px var(--space-5); }

  /* la testata: il titolo puo' accorciarsi, i bottoni no */
  #gestionale-overlay .g-topbar { padding-left: var(--space-5); padding-right: var(--space-4); gap: var(--space-3); }
  #gestionale-overlay .g-topbar-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .g-close { padding: var(--space-3) 10px; flex-shrink: 0; }
  #gestionale-overlay .tile-icon { display: none; }
  /* Su un telefono in testata non ci sta tutto: la casella va a capo e prende
     la riga intera, e la testata cresce invece di comprimere i bottoni. */
  #gestionale-overlay .g-topbar { flex-wrap: wrap; height: auto; padding-bottom: var(--space-4); }
  .g-cerca-wrap { order: 3; flex: 1 0 100%; margin-left: 0; }
  .g-cerca-input { padding: 9px 10px; font-size: 16px; }
  .g-cerca-pannello { width: 100%; right: auto; left: 0; }
  .g-cerca-riga { padding: 11px 10px; }
}

/* schermi molto stretti: si toglie anche l'ultimo superfluo */
@media (max-width: 420px) {
  .g-content { padding: 10px var(--space-4); }
  #gestionale-overlay .g-topbar-title { font-size: 13px; }
  .g-table { font-size: 11px; }
  /* la scheda commessa e le carte KPI vanno in colonna */
  #gcs-totali { gap: var(--space-4) !important; }
}

#gestionale-overlay .g-badge-grey  { background: rgba(55,55,54,.12);  color: var(--sol-antracite); }
#gestionale-overlay .g-modal-header { border-bottom: 2px solid var(--sol-verde); }
#gestionale-overlay .g-label { color: var(--text2); font-size: 11px; letter-spacing: 0; font-weight: 500; }

/* Job cost panel */

/* ── KPI cards ── */
.kpi-card {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); padding: var(--space-6) 18px;
}
.kpi-card-label { font-size: 10px; font-weight: 600; color: var(--text3);  margin-bottom: var(--space-3); }
.kpi-card-val   { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.kpi-card-val.red   { color: var(--rosso); }
.kpi-card-val.green { color: var(--green); }
/* ── KPI Dashboard nuovo layout ── */
.kpi-dash-row { display:grid; gap:14px; margin-bottom:var(--space-6); }
.kpi-dash-row.cols-4 { grid-template-columns: repeat(4,1fr); }
.kpi-dash-row.cols-2 { grid-template-columns: 1fr 1fr; }
@media(max-width:960px){ .kpi-dash-row.cols-4 { grid-template-columns: repeat(2,1fr); } .kpi-dash-row.cols-2 { grid-template-columns: 1fr; } }
@media(max-width:560px){ .kpi-dash-row.cols-4 { grid-template-columns: 1fr; } }
.kpi-dash-row.cols-5 { grid-template-columns: repeat(5,1fr); }
@media(max-width:1100px){ .kpi-dash-row.cols-5 { grid-template-columns: repeat(3,1fr); } }
@media(max-width:600px){ .kpi-dash-row.cols-5 { grid-template-columns: repeat(2,1fr); } }
.kpi-big-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px var(--space-7); }
.kpi-big-card-lbl { font-size:10px; font-weight:700; color:var(--text3);  margin-bottom:var(--space-3); }
.kpi-big-card-val { font-size:28px; font-weight:800; color:var(--text); line-height:1.1; margin-bottom:var(--space-3); }
.kpi-big-card-val.green { color:var(--green); }
.kpi-big-card-val.red   { color:var(--rosso); }
.kpi-trend { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; margin-right:var(--space-3); }
.kpi-trend.up   { color:var(--green); }
.kpi-trend.down { color:var(--rosso); }
.kpi-widget { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px var(--space-7); }
.kpi-widget-title { font-size:11px; font-weight:700; color:var(--text3);  margin-bottom:14px; }
.kpi-skel { background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%); background-size:200% 100%; animation:kpi-skel-anim 1.2s infinite; border-radius:var(--radius); }
@keyframes kpi-skel-anim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.kpi-chart-tooltip { position:fixed; background:#111; color:#fff; font-size:11px; padding:var(--space-3) 10px; border-radius:var(--radius); pointer-events:none; z-index:9999; border:1px solid #333; white-space:nowrap; display:none; }
.kpi-prv-row,.kpi-com-row { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--border); cursor:pointer; font-size:12px; }
.kpi-prv-row:last-child,.kpi-com-row:last-child { border-bottom:none; }
.kpi-prv-row:hover,.kpi-com-row:hover { opacity:.8; }
/* ── Prima nota ── */
.pn-saldo-box {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) 18px; border-radius: var(--radius-lg);
  background: var(--bg2); border: 1px solid var(--border2);
  flex: 1; min-width: 130px;
}
.pn-saldo-label { font-size: 11px; font-weight: 600; color: var(--text3); }
.pn-saldo-val   { font-size: 22px; font-weight: 800; }
.pn-saldo-val.green { color: var(--green); }
.pn-saldo-val.red   { color: var(--rosso); }
.pn-row-entrata td { color: var(--text) !important; }
.pn-row-entrata td:nth-child(5) { color: var(--green) !important; font-weight: 600; }
.pn-row-uscita  td:nth-child(5) { color: var(--rosso) !important; font-weight: 600; }

/* ── Guida overlay ──────────────────────────── */
#guida-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); flex-direction: column;
  margin-left: var(--sidebar);
}
#guida-overlay.open { display: flex; }
.guida-topbar {
  height: var(--topbar); background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: 10px; flex-shrink: 0;
}
.guida-topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.guida-close {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.guida-close:hover { color: var(--accent); border-color: var(--accent); }
.guida-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 24px; flex-shrink: 0; background: var(--bg);
}
.guida-tab {
  padding: 11px 18px; font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--text3); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; margin-bottom: -1px;
}
.guida-tab:hover { color: var(--text); }
.guida-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.guida-body { flex: 1; overflow-y: auto; }
.guida-panel { display: none; }
.guida-panel.active { display: block; }
.guida-content { padding: 32px 36px; max-width: 800px; }
.guida-h1 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 28px; letter-spacing: -.02em; }
.guida-h2 { font-size: 14px; font-weight: 600; color: var(--text); margin: 26px 0 9px; letter-spacing: 0; }
.guida-h2:first-of-type { margin-top: 0; }
.guida-p { font-size: 12px; color: var(--text2); line-height: 1.75; margin-bottom: var(--space-4); }
.guida-ul, .guida-ol { padding-left: var(--space-7); margin-bottom: 10px; }
.guida-ul li, .guida-ol li { font-size: 12px; color: var(--text2); line-height: 1.8; }
.guida-code {
  display: inline; background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 7px; font-family: monospace; font-size: 11px;
  color: var(--accent);
}
.guida-tip {
  background: rgba(61,173,88,.06); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px;
  margin: var(--space-5) 0; font-size: 12px; color: var(--text2); line-height: 1.7;
}
.guida-tip strong { color: var(--text); }
.guida-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-5) 0; padding: 14px var(--space-6);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
}
.guida-flow-step {
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 5px var(--space-5);
  font-size: 11px; font-weight: 600; color: var(--text2);
}
.guida-flow-arrow { color: var(--text3); font-size: 14px; }
.guida-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
/* Roadmap */
.rm-content { padding: 32px 36px; max-width: 800px; }
.rm-section { margin-bottom: 32px; }
.rm-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 10px;
}
.rm-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rm-item {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-5) var(--space-6); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
}
.rm-item-text { flex: 1; }
.rm-item-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: var(--space-1); }
.rm-item-desc { font-size: 11px; color: var(--text3); }
.rm-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-lg); white-space: nowrap; flex-shrink: 0; margin-top: 1px; }
.rm-badge-done { background: rgba(76,175,125,.15); color: var(--green); }
.rm-badge-wip  { background: rgba(255,193,7,.12);  color: var(--giallo); }
.rm-badge-plan { background: rgba(150,150,150,.12); color: #999; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 760px) {
  body { overflow: auto; }
  .sidebar { width: 100%; height: 50px; flex-direction: row; top: auto; bottom: 0; border-right: none; border-top: 1px solid var(--border); padding: 0 var(--space-4); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar-logo { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; justify-content: space-around; padding: 0; gap: 0; }
  .sidebar-bottom { padding: 0; }
  .layout { margin-left: 0; margin-bottom: calc(50px + env(safe-area-inset-bottom)); height: auto; }
  .grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; overflow: visible; }
  .tile { min-height: 280px; }
  .tile-ai { min-height: 360px; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .topbar {
    padding-left: calc(var(--space-5) + env(safe-area-inset-left));
    padding-right: calc(var(--space-5) + env(safe-area-inset-right));
    gap: var(--space-4);
  }
  .search-wrap { display: none; }
  .topbar-brand { font-size: 15px; }
  .topbar-right { margin-left: 0; }
  .user-name { display: none; }
  .grid {
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
    gap: var(--space-4);
  }
  .tile { min-height: 240px; }
  .tile-ai { min-height: 320px; }
  .tile-header { padding: var(--space-5) var(--space-5) var(--space-4); }
  .tile-title { font-size: 13px; }
}

/* ── Barra in testa all'overlay AI a tutto schermo ─────────────────────── */
.svc-bar {
  height: 42px; min-height: 42px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.svc-bar-logo {
  width: 24px; height: 24px; background: var(--accent);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.svc-bar-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text2); }
.svc-bar-close {
  border: none; background: none; cursor: pointer; font-size: 18px;
  color: var(--text3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); line-height: 1;
  transition: background .15s, color .15s;
}
.svc-bar-close:hover { background: var(--bg4); color: var(--text); }
/* ── File Manager WebDAV ──────────────────────────────────── */
#file-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); flex-direction: column;
  margin-left: var(--sidebar);
}
#file-overlay.open { display: flex; }
.fm-topbar {
  height: var(--topbar); background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: 10px; flex-shrink: 0;
}
.fm-topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.fm-close {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.fm-close:hover { color: var(--accent); border-color: var(--accent); }
.fm-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.fm-btn:hover { color: var(--accent); border-color: var(--accent); }
.fm-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.fm-btn.primary:hover { background: var(--accent2); }
.fm-btn:disabled { opacity: .4; cursor: default; }
.fm-breadcrumb {
  padding: var(--space-3) var(--space-7); background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12px; color: var(--text3); flex-shrink: 0; flex-wrap: wrap;
}
.fm-bc-sep { color: var(--border2); }
.fm-bc-item {
  color: var(--text2); cursor: pointer; padding: var(--space-1) 5px;
  border-radius: var(--radius-sm); transition: color .12s, background .12s;
}
.fm-bc-item:hover { color: var(--accent); background: var(--bg4); }
.fm-bc-item.active { color: var(--text); font-weight: 500; cursor: default; }
.fm-main { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.fm-toolbar {
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-4);
  flex-shrink: 0; background: var(--bg);
}
.fm-search-input {
  flex: 1; max-width: 280px; background: var(--bg4);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 10px; color: var(--text); font-family: var(--sans); font-size: 12px;
  outline: none; transition: border-color .2s;
}
.fm-search-input:focus { border-color: var(--accent); }
.fm-search-input::placeholder { color: var(--text3); }
.fm-list { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.fm-list::-webkit-scrollbar { width: 4px; }
.fm-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
.fm-item {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s; font-size: 12px;
}
.fm-item:last-child { border-bottom: none; }
.fm-item:hover { background: var(--bg4); }
.fm-item.selected { background: rgba(61,173,88,.08); border-left: 2px solid var(--accent); padding-left: 14px; }
.fm-item-icon {
  width: 28px; height: 28px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.fm-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
.fm-item-meta { font-size: 10px; color: var(--text3); white-space: nowrap; }
.fm-item-size { font-size: 10px; color: var(--text3); white-space: nowrap; min-width: 50px; text-align: right; }
.fm-folder-icon { background: rgba(100,149,237,.15); color: #6495ed; font-size: 13px; }
.fm-list.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; background: rgba(61,173,88,.03); }
.fm-action-bar {
  display: none; padding: var(--space-3) var(--space-6); background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center; gap: var(--space-4); font-size: 12px; flex-shrink: 0;
}
.fm-action-bar.visible { display: flex; }
.fm-action-file { flex: 1; color: var(--text2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-upload-progress {
  display: none; padding: var(--space-3) var(--space-6); background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center; gap: 10px; flex-shrink: 0;
}
.fm-upload-progress.visible { display: flex; }
.fm-progress-bar { flex: 1; height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; }
.fm-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .2s; }
.fm-progress-label { font-size: 11px; color: var(--text3); white-space: nowrap; }
.fm-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 12px; flex-direction: column; gap: var(--space-4); padding: 40px; }

/* ── Calendario Nativo CalDAV ─────────────────────────────── */
#cal-native-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); flex-direction: column;
  margin-left: var(--sidebar);
}
#cal-native-overlay.open { display: flex; }
.cln-topbar {
  height: var(--topbar); background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-7); gap: 10px; flex-shrink: 0;
}
.cln-topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cln-close {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.cln-close:hover { color: var(--accent); border-color: var(--accent); }
.cln-btn {
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: var(--radius); padding: var(--space-2) 10px;
  font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap;
}
.cln-btn:hover { color: var(--accent); border-color: var(--accent); }
.cln-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cln-btn.primary:hover { background: var(--accent2); }
.cln-month-nav { display: flex; align-items: center; gap: var(--space-3); }
.cln-month-label { font-size: 13px; font-weight: 600; min-width: 130px; text-align: center; }
.cln-body { display: flex; flex: 1; overflow: hidden; }
.cln-grid-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cln-weekdays {
  display: grid; grid-template-columns: repeat(7,1fr);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg2);
}
.cln-weekday {
  padding: var(--space-4) var(--space-2); text-align: center;
  font-size: 10px; font-weight: 600; color: var(--text3);
  letter-spacing: .05em; text-transform: uppercase;
}
.cln-grid {
  flex: 1; display: grid; grid-template-columns: repeat(7,1fr);
  grid-auto-rows: 1fr; overflow-y: auto;
}
.cln-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  transition: background .1s; min-height: 70px;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.cln-cell:hover { background: var(--bg4); }
.cln-cell.other-month { opacity: .4; }
.cln-cell.today .cln-cell-num {
  background: var(--accent); color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.cln-cell.selected { background: rgba(61,173,88,.06); }
.cln-cell-num { font-size: 12px; font-weight: 500; color: var(--text2); }
.cln-pill {
  font-size: 10px; background: var(--accent); color: #fff;
  border-radius: 3px; padding: 1px 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: opacity .1s;
}
.cln-pill:hover { opacity: .85; }
.cln-pill.green { background: var(--green); }
.cln-more { font-size: 9px; color: var(--text3); padding: 0 var(--space-2); }
.cln-sidebar {
  width: 280px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.cln-sidebar-header {
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.cln-sidebar-body { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.cln-sidebar-body::-webkit-scrollbar { width: 4px; }
.cln-sidebar-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-sm); }
.cln-event-item {
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s; font-size: 12px;
}
.cln-event-item:hover { background: var(--bg4); }
.cln-event-title { font-weight: 500; color: var(--text); margin-bottom: var(--space-1); }
.cln-event-time  { font-size: 10px; color: var(--text3); }
.cln-event-loc   { font-size: 10px; color: var(--text3); }
.cln-event-detail {
  display: none; padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border); background: var(--bg2);
}
.cln-event-detail.visible { display: block; }
.cln-event-detail-title { font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
.cln-event-detail-meta  { font-size: 11px; color: var(--text3); line-height: 1.8; }
.cln-event-detail-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); }
.cln-empty-sidebar {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 12px; text-align: center; padding: var(--space-7);
}
/* Event form modal */
#cln-modal-bg {
  display: none; position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center;
}
#cln-modal-bg.open { display: flex; }
#cln-modal {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; width: 420px; max-width: 96vw;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.cln-modal-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; flex-shrink: 0;
}
.cln-modal-title { font-size: 14px; font-weight: 600; flex: 1; }
.cln-modal-body { padding: var(--space-6) 18px; overflow-y: auto; flex: 1; }
.cln-modal-footer {
  padding: 10px 18px; border-top: 1px solid var(--border);
  display: flex; gap: var(--space-4); justify-content: flex-end; flex-shrink: 0;
}
.cln-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.cln-label { font-size: 11px; color: var(--text3); font-weight: 500; }
.cln-input {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; font-size: 12px;
  color: var(--text); width: 100%; outline: none;
  transition: border-color .15s; font-family: var(--sans);
}
.cln-input:focus { border-color: var(--accent); }

/* ── Plan gating (Blocco 3) ──────────────────── */
.nav-btn-locked { opacity: .58; position: relative; }
.nav-lock {
  position: absolute; bottom: 3px; right: 3px;
  color: var(--text3); line-height: 1; pointer-events: none;
}
.tile-locked { opacity: .70; }
.tile-plan-badge {
  font-size: 9px; color: var(--text3);
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); margin-left: auto;
  letter-spacing: .03em; white-space: nowrap;
}
#upgrade-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5);
  align-items: center; justify-content: center;
}
.upgrade-card {
  width: 360px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 32px 28px; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.upgrade-lock-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(61,173,88,.1); display: flex;
  align-items: center; justify-content: center; color: var(--accent);
}
.upgrade-lock-icon svg { width: 22px; height: 22px; fill: currentColor; }
.upgrade-svc  { font-size: 16px; font-weight: 700; color: var(--text); text-align: center; }
.upgrade-msg  { font-size: 13px; color: var(--text2); text-align: center; line-height: 1.6; }
.upgrade-close-btn {
  padding: 9px 24px; border-radius: 8px; margin-top: var(--space-2);
  background: none; border: 1px solid var(--border);
  color: var(--text2); font-family: var(--sans); font-size: 13px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.upgrade-close-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Segnalazione 316: i file del sopralluogo, in una griglia di anteprime. */
.gsp-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-4); }
.gsp-file { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gsp-anteprima { height: 96px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.gsp-anteprima:hover { border-color: var(--accent); }
.gsp-nome { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsp-info { font-size: 10px; color: var(--text3); }