/* ============================================================
   LE TRE TAGLIE DELLE ICONE

   `slIco()`, `ctIco()` e compagni chiedono un'icona piccola scrivendo
   `class="xs"`, ma la regola che la rimpicciolisce non e' mai esistita:
   dove nessun antenato dava una misura, lucide disegnava alla sua —
   ventiquattro pixel, il doppio del testo che le sta accanto.

   Stanno in cima apposta. Hanno la stessa specificita' delle regole per
   componente (`.tag svg`, `.kpi-icon svg`, `.empty-state>svg`), quindi a
   parita' vince l'ultima scritta: mettendole qui, ogni misura decisa piu'
   sotto continua a valere e queste fanno solo da rete.

   Sono scritte su `svg` e non su `.xs` per non incrociare `.btn.xs`, che
   e' un bottone e non un'icona.
   ============================================================ */
svg.lucide{width:16px;height:16px;flex-shrink:0;}
svg.l{width:20px;height:20px;}
svg.s{width:14px;height:14px;}
svg.xs{width:12px;height:12px;}

/* Header timer chip */
.header-timer{display:flex;align-items:center;gap:9px;background:var(--primary-soft);border:1px solid var(--primary-mid);border-radius:11px;padding:6px 8px 6px 12px;font-size:12.5px;}
.header-timer .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex-shrink:0;animation:pulseDot 1.4s infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.header-timer .ht-info{display:flex;flex-direction:column;line-height:1.25;}
.header-timer .ht-client{font-weight:700;color:var(--primary-dark);}
.header-timer .ht-task{color:var(--muted);font-size:11px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-timer .ht-clock{font-variant-numeric:tabular-nums;font-weight:700;margin-left:4px;}
.header-timer .ht-actions{display:flex;gap:3px;}
.header-timer .ht-actions button{width:26px;height:26px;border-radius:8px;border:none;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);}
.header-timer .ht-actions button:hover{background:var(--primary-soft);}
.header-timer .ht-actions button svg{width:13px;height:13px;}
.header-start-btn{background:var(--card);border:1px solid var(--border);}

/* KPI */
.kpis{display:grid;gap:14px;margin-bottom:18px;}
.kpis.n4{grid-template-columns:repeat(4,1fr);}
.kpis.n5{grid-template-columns:repeat(5,1fr);}
.kpis.n3{grid-template-columns:repeat(3,1fr);}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.kpi-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.kpi-icon svg{width:15px;height:15px;}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.kpi-value{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:3px;}
.kpi-sub{font-size:12px;color:var(--muted);margin-bottom:9px;}
.kpi-sub.up{color:var(--green);font-weight:600;}
.progress{height:5px;border-radius:5px;background:var(--track);overflow:hidden;}
.progress>div{height:100%;border-radius:5px;}

.layout2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start;}
.layout3{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--card-y);margin-bottom:16px;}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.card-title{font-size:14px;font-weight:700;}
.card-title .count{color:var(--muted);font-weight:500;font-size:12.5px;}
.tabbtns{display:flex;gap:6px;background:var(--track);border-radius:9px;padding:3px;flex-wrap:wrap;}
.tabbtns button,.tabbtns a{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:7px;color:var(--muted);}
.tabbtns button svg,.tabbtns a svg{width:14px;height:14px;flex-shrink:0;}
.tabbtns a{cursor:pointer;text-decoration:none;}
.tabbtns button.active,.tabbtns a.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);}

/* ---- Pillole di navigazione tra pagine di un modal (es. editor servizio) ---- */
.pager-pills{display:flex;gap:2px;flex-wrap:wrap;}
.pager-pills button{display:flex;align-items:center;gap:5px;background:transparent;border:none;padding:5px 10px;font-size:11.5px;font-weight:600;border-radius:8px;color:var(--muted);}
.pager-pills button:hover{color:var(--text);}
.pager-pills button.active{background:var(--primary-soft);color:var(--primary-dark);}
/* Il selettore deve prendere l'svg, non l'<i>: lucide sostituisce l'elemento
   e la classe si perde per strada. L'<i> resta elencato per quando le icone
   non si caricano e il segnaposto rimane al suo posto. */
.pager-pills button svg,.pager-pills button i{width:12px;height:12px;flex-shrink:0;}

/* ---- il campo ----
   La stessa grammatica stava scritta quattro volte, una per pagina
   (`.pf-wrap .field`, `.set-wrap .field`, `.tm-db .field`, `.sl-input`):
   quattro copie che si sarebbero allontanate al primo ritocco. Qui sta una
   volta; le pagine aggiungono solo quello che hanno di diverso.

   `.form-row input` in `tasks.css` resta a se': li' i campi non portano
   una classe, e dargliela vorrebbe dire toccare il markup di ogni modale
   dell'app. E' l'ultima copia rimasta. */
.field{width:100%;min-width:0;border:1px solid var(--border);background:var(--card);border-radius:9px;
  padding:8px 10px;font-size:13px;font-family:inherit;color:inherit;outline:none;}
.field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.field.bad{border-color:var(--red);}
.field[readonly]{background:var(--field);color:var(--neutral-ink);}
.field:disabled{color:var(--neutral-ink);cursor:not-allowed;}
textarea.field{resize:vertical;line-height:1.45;}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;}
/* Pastiglia di stato generica, sorella di `.badge` ma per gli stati di una
   funzione (attiva, da collegare, spenta) invece che di un record. */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;background:var(--track);color:var(--neutral-ink);}
.tag svg{width:12px;height:12px;flex:0 0 auto;}
.tag.t-ok{background:var(--primary-soft);color:var(--primary-dark);}
.tag.t-warn{background:var(--amber-soft);color:var(--amber-dark);}
.tag.t-neutral{background:var(--track);color:var(--neutral-ink);}
/* min-height di .aselect va annullato: qui il controllo è un badge, non un campo */
.badge.aselect.badge-toggle{cursor:pointer;padding:5px 9px 5px 11px;font-size:12px;position:relative;min-height:0;gap:5px;}
.badge.aselect.badge-toggle:hover{filter:brightness(.96);}
.badge.aselect.badge-toggle.open{filter:brightness(.94);}
.badge.aselect.badge-toggle .aselect-chevron{width:11px;height:11px;opacity:.65;}
.badge-alta{background:var(--red-soft);color:var(--red-dark);}
.badge-media{background:var(--amber-soft);color:var(--amber-dark);}
.badge-bassa{background:var(--green-soft);color:var(--green-dark);}
.badge-billable{background:var(--green-soft);color:var(--green-dark);}
/* "Fatto / arrivato / a posto" e' arancione, non verde: il verde in questa
   palette resta solo il fondo della pastiglia di stato "Completato". */
.badge-ok{background:var(--primary-soft);color:var(--primary-dark);}
.badge-nonbillable{background:var(--track);color:var(--neutral-ink);}
.badge-forfait{background:var(--violet-soft);color:var(--violet);}
.badge-status-attivo{background:var(--blue-soft);color:var(--blue);}
.badge-status-completato{background:var(--green-soft);color:var(--green-dark);}
.badge-status-inrevisione{background:var(--violet-soft);color:var(--violet);}
.badge-status-incorso{background:var(--blue-soft);color:var(--blue);}
.badge-status-dafare{background:var(--track);color:var(--neutral-ink);}
.badge-status-backlog{background:var(--track);color:var(--neutral-ink);}
.badge-status-pausa{background:var(--amber-soft);color:var(--amber-dark);}
.badge-status-attesa{background:var(--violet-soft);color:var(--violet);}
.badge-status-dainiziare{background:var(--track);color:var(--neutral-ink);}
.badge-status-archiviato{background:var(--track);color:var(--neutral-ink);}
.badge-status-lead{background:var(--blue-soft);color:var(--blue);}
.badge-status-prospect{background:var(--violet-soft);color:var(--violet);}
.badge-status-concluso{background:var(--track);color:var(--neutral-ink);}
.badge-tag{background:var(--track);color:var(--neutral-ink);font-weight:700;font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;}
.badge-blocked{background:var(--red-soft);color:var(--red-dark);}
.badge-label{background:var(--track);color:var(--neutral-ink);font-weight:700;text-transform:uppercase;letter-spacing:.3px;font-size:9.5px;}
.badge-overdue{background:var(--red-soft);color:var(--red-dark);}
.badge-today{background:var(--amber-soft);color:var(--amber-dark);}
.badge-upcoming{background:var(--track);color:var(--neutral-ink);}
.client-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}
/* Testo per chi legge con lo schermo, invisibile a chi guarda: serve dove
   una colonna ha solo icone e l'intestazione resterebbe muta. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.client-mark{position:relative;overflow:hidden;width:15px;height:15px;border-radius:4px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-accent);font-size:7px;font-weight:700;letter-spacing:-.3px;line-height:1;}
.client-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;background:var(--card);}
.client-mark.empty{background:var(--track);}
.client-chip{--chip-color:var(--tint,var(--primary));--chip-bg:color-mix(in srgb, var(--tint,var(--primary)) 12%, transparent);display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:8px;padding:3px 10px 3px 4px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;vertical-align:middle;}
.client-chip:hover{border-color:var(--chip-color);}
.client-chip .chip-icon{position:relative;overflow:hidden;width:19px;height:19px;border-radius:6px;background:var(--chip-color);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:-.3px;}
.client-chip .chip-icon svg{width:11px;height:11px;}
/* La favicon copre le iniziali solo quando esiste e non e' il segnaposto:
   se non carica si toglie da sola e sotto restano le due lettere. */
.client-chip .chip-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:11%;background:var(--card);}
.client-chip .chip-icon.empty{background:var(--track);color:var(--muted);}
.client-chip .chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.client-chip.sm{padding:2px 8px 2px 3px;font-size:11px;gap:6px;}
.client-chip.sm .chip-icon{width:16px;height:16px;border-radius:5px;font-size:7.5px;}
.client-chip.sm .chip-icon svg{width:9px;height:9px;}
.aselect .client-chip{border:none;background:transparent;padding:0;}
.aselect .client-chip .chip-icon{width:16px;height:16px;border-radius:6px;}
.ticket-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--muted);}
.type-icon{width:16px;height:16px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.type-icon svg{width:11px;height:11px;}
.type-icon.lg{width:26px;height:26px;border-radius:8px;}
.type-icon.lg svg{width:13px;height:13px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
/* Le frecciette su e giu' dei campi numerici: rubano spazio al numero, si
   premono per sbaglio e cambiano un importo di un'unita' senza che te ne
   accorga. Si scrive la cifra, non la si incrementa. */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* L'aria intorno alle righe la decide la densita' scelta nel profilo:
   `--row-y` vale 10px di norma e 6px in compatta (base.css). */
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700;padding:var(--head-y) 10px;border-bottom:1px solid var(--border);}
td{padding:var(--row-y) 10px;border-bottom:1px solid var(--border);}
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:var(--field);}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.quick-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.qf-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;}
.qf-chip svg{width:13px;height:13px;flex-shrink:0;}
.qf-chip.active{background:var(--primary);color:var(--on-accent);border-color:var(--primary);}
.task-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.task-toolbar .quick-filters,.task-toolbar .filters{margin-bottom:0;}
.filters-divider{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0;}
.filter-rail{display:flex;align-items:center;gap:4px;}
/* In fondo alla corsia dei filtri non c'e' solo un selettore: c'e' anche un
   interruttore, ed e' un `<button>` vero, non un `.aselect`. Senza queste
   righe restava l'unico senza cornice e piu' piccolo degli altri — in fila
   con sette riquadri sembrava un'icona decorativa invece che un comando.
   Prende la stessa misura, la stessa cornice e lo stesso acceso degli altri:
   `aria-pressed` dice quando e' premuto, ed e' anche quello che lo colora. */
/* 33x37 e non 33x33: gli `.aselect.icon-only` accanto dichiarano 33px di
   altezza ma ne prendono 37 dal `min-height` della classe base, ed e' su
   quella misura che si allineano le pastiglie dei filtri. */
.filter-rail .icon-btn{width:33px;height:37px;border:1px solid var(--border);background:var(--field);border-radius:9px;cursor:pointer;}
.filter-rail .icon-btn:hover{background:var(--field);border-color:var(--primary-mid);color:var(--muted);}
.filter-rail .icon-btn svg{width:15px;height:15px;}
.filter-rail .icon-btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-dark);}
.filter-rail .icon-btn[aria-pressed="true"]:hover{background:var(--primary-soft);color:var(--primary-dark);}
.filter-rail .icon-btn:disabled{opacity:.45;cursor:not-allowed;}
.filter-rail .icon-btn:disabled:hover{border-color:var(--border);}

.icon-btn{width:28px;height:28px;border-radius:8px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;}
.icon-btn:hover{background:var(--hover);color:var(--text);}
.icon-btn svg{width:14.5px;height:14.5px;}

/* Timer card (sidebar widget on dashboard) */
.timer-card{background:linear-gradient(160deg,var(--primary),var(--seg-3));color:var(--on-accent);border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(255,122,69,.32);}
.timer-card .status{font-size:11.5px;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px;}
.timer-card .task-name{font-size:16px;font-weight:700;margin-bottom:3px;}
.timer-card .client-name{font-size:12.5px;opacity:.85;margin-bottom:16px;}
.timer-display{font-size:38px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;margin-bottom:14px;}
.timer-actions{display:flex;gap:8px;margin-bottom:12px;}
.timer-actions .btn{background:rgba(255,255,255,.16);color:var(--on-accent);flex:1;justify-content:center;}
.timer-actions .btn.stop{background:var(--card);color:var(--primary-dark);}
.timer-actions .btn:hover{background:rgba(255,255,255,.26);}
.timer-actions .btn.stop:hover{background:var(--primary-soft);}
.timer-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;opacity:.9;}
.toggle{width:34px;height:19px;background:rgba(255,255,255,.3);border-radius:20px;position:relative;cursor:pointer;flex-shrink:0;}
.toggle.on{background:var(--card);}
.toggle::after{content:'';position:absolute;width:15px;height:15px;background:var(--card);border-radius:50%;top:2px;left:2px;transition:.15s;}
.toggle.on::after{left:17px;background:var(--primary);}
.toggle.dark{background:var(--track);}
.toggle.dark::after{background:var(--card);box-shadow:0 1px 2px rgba(46,33,25,.18);}
.toggle.dark.on::after{background:var(--primary);}
.toggle.dark.on{background:var(--primary-soft);}
/* Riga "Fatturabile" della modale ore: l'interruttore a destra, sotto
   l'etichetta una riga che dice cosa comporta dirgli di sì. */
.bill-switch{margin:4px 0 16px;padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:var(--field);}
.bill-switch>span{display:flex;flex-direction:column;gap:2px;}
.bill-switch>span small{font-size:11.5px;font-weight:500;color:var(--muted);}
.no-timer{text-align:center;padding:22px 10px;}
.no-timer p{color:rgba(255,255,255,.85);font-size:13px;margin:0 0 14px 0;}


.evsa-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--border);}
.evsa-row:first-child{border-top:none;}
.evsa-name{font-size:13px;font-weight:600;margin-bottom:3px;}
.evsa-bar-bg{width:100%;height:6px;background:var(--track);border-radius:6px;}
.evsa-bar{height:100%;border-radius:6px;background:var(--primary);}
.evsa-over{background:var(--red);}
.evsa-diff{font-size:11.5px;font-weight:700;margin-left:10px;white-space:nowrap;}

/* Ticket summary mini stats (dashboard) */
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mini-stat{text-align:center;padding:10px 6px;border-radius:10px;background:var(--bg);border:1px solid var(--border);}
.mini-stat .n{font-size:18px;font-weight:700;}
.mini-stat .l{font-size:11px;color:var(--muted);margin-top:2px;}

/* Sales mini card */
.sales-mini-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--border);font-size:13px;}
.sales-mini-row:first-child{border-top:none;}

/* Project cards v2 */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.proj-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px;box-shadow:var(--shadow);cursor:pointer;}
.proj-card:hover{border-color:var(--primary-mid);}
.proj-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.proj-card .name{font-weight:700;font-size:14px;margin-bottom:2px;}
.proj-card .client{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.proj-card .svc-row{font-size:11.5px;color:var(--muted);margin:8px 0;}
.proj-card .metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;}
.proj-card .metric{background:var(--bg);border-radius:9px;padding:8px 10px;}
.proj-card .metric .l{font-size:10.5px;color:var(--muted);}
.proj-card .metric .v{font-size:13.5px;font-weight:700;margin-top:2px;}
.proj-card .meta-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:8px 0 5px 0;}
.proj-card .period{font-size:11.5px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}

/* Services */
.service-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--border);border-radius:11px;margin-bottom:8px;background:var(--card);}
.service-card .sname{font-weight:700;font-size:13.5px;margin-bottom:3px;}
.service-card .smeta{font-size:11.5px;color:var(--muted);}
.service-card .sprice{font-weight:700;font-size:14px;color:var(--primary-dark);white-space:nowrap;margin-left:12px;}

.empty-state{text-align:center;padding:40px 20px;color:var(--muted);}
.empty-state>svg{width:32px;height:32px;margin-bottom:12px;color:var(--dim);}
.empty-state h3{color:var(--text);font-size:14.5px;margin:0 0 6px 0;}
.empty-state p{font-size:13px;margin:0 0 16px 0;}
/* Il pulsante e' inline: un <button> in display:flex resta di livello
   blocco e il text-align del contenitore non lo centra. */
.empty-state .btn{display:inline-flex;justify-content:center;}

/* Livelli espliciti: il drawer è il contesto, la modale è il focus e sta
   sopra, la conferma sopra a tutto. Senza questo vincevano per ordine nel DOM. */
.modal-overlay{position:fixed;inset:0;background:var(--scrim);display:none;align-items:flex-start;justify-content:flex-end;z-index:200;}
#drawerOverlay{z-index:200;}
#modalOverlay{z-index:300;}
#confirmOverlay{z-index:360;}
.modal-overlay.centered{align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);padding:24px;width:100%;max-width:480px;max-height:100vh;overflow-y:auto;border-radius:16px;}
.modal-overlay:not(.centered) .modal{border-radius:0;height:100vh;max-height:100vh;box-shadow:-12px 0 40px rgba(20,20,43,.15);}
.modal.wide{max-width:720px;}
.modal.xwide{max-width:860px;}
.modal.drawer{max-width:760px;}
.modal.drawer.wide{max-width:1040px;}
.modal h2{margin:0 0 18px 0;font-size:17px;}
.modal-sub{font-size:12.5px;color:var(--muted);margin:-12px 0 18px 0;}
/* Nota dentro un modulo: dice la conseguenza di cio' che si e' appena
   scelto, li' dove si e' scelto. */
.form-note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--primary-dark);background:var(--primary-soft);border-radius:9px;padding:8px 11px;margin:-6px 0 14px;}
.form-note svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;}

.toast-wrap{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:400;}
.toast{background:var(--inverse);color:var(--on-inverse);padding:11px 16px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(46,33,25,.24);display:flex;align-items:center;gap:8px;animation:toastin .2s ease;}
/* La via d'uscita sta dentro al toast: si legge e si preme senza spostarsi. */
.kbd{font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;background:var(--hover);flex-shrink:0;}
.toast-undo{background:rgba(255,255,255,.16);color:var(--on-inverse);border:none;border-radius:7px;padding:4px 10px;font-size:12px;font-weight:700;margin-left:4px;font-family:inherit;}
.toast-undo:hover{background:rgba(255,255,255,.28);}
@keyframes toastin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* L'impaginazione delle Impostazioni sta tutta in `settings.css`, col
   prefisso `set-`: qui restava solo un doppione di quelle regole. */

.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.breadcrumb a:hover{color:var(--primary);}
.searchdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(20,20,43,.12);z-index:50;padding:8px;display:none;max-height:340px;overflow-y:auto;}
.searchdrop.open{display:block;}
.searchdrop .grp-label{font-size:10.5px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 8px 2px 8px;}
.searchdrop .res-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;cursor:pointer;}
.searchdrop .res-row:hover{background:var(--hover);}

/* ===== CUSTOM SELECT (AppSelect) ===== */
.aselect{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--field);border-radius:9px;padding:8px 10px;font-size:13px;cursor:pointer;position:relative;min-height:37px;}
.aselect:hover{border-color:var(--primary-mid);}
.aselect.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--card);}
.aselect .aselect-value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.aselect .aselect-value.placeholder{color:var(--muted);}
.aselect .aselect-chevron{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.aselect .aselect-ico{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.aselect .aselect-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.aselect.sm{padding:6px 8px;font-size:12.5px;min-height:31px;}
/* variante "chip" — pillola compatta con label+valore uniti, stile filtro */
.aselect.chip{display:inline-flex;width:auto;min-height:0;border-radius:999px;padding:7px 13px;background:var(--card);border-color:var(--border);color:var(--muted);font-weight:600;gap:7px;}
.aselect.chip:hover{border-color:var(--primary-mid);}
.aselect.chip .aselect-value{flex:none;color:inherit;}
.aselect.chip .fc-label{color:var(--muted);font-weight:600;}
.aselect.chip.active{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-dark);}
.aselect.chip.active .fc-label{color:var(--primary-dark);}
.aselect.chip.open{box-shadow:0 0 0 3px var(--primary-soft);}
.aselect.chip.active.open{box-shadow:0 0 0 3px var(--primary-mid);}
.aselect.chip .fc-clear{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--primary-dark);flex-shrink:0;}
.aselect.chip .fc-clear:hover{background:var(--primary-mid);}
.aselect.chip .fc-clear svg{width:11px;height:11px;}
.aselect.chip.rect{border-radius:9px;background:var(--card);}
.aselect.chip.rect .fc-label{color:var(--muted);font-weight:600;}
.aselect.chip.rect .fc-val{color:var(--text);font-weight:700;}
.aselect.chip.rect.active{background:var(--card);border-color:var(--border);color:var(--text);}
.aselect.chip.rect.active .fc-label{color:var(--muted);}
.aselect.chip.rect.active:hover{border-color:var(--primary-mid);}

.aselect.icon-only{width:33px;height:33px;padding:0;justify-content:center;flex-shrink:0;gap:0;}
.aselect.icon-only svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.aselect.icon-only.active{background:var(--primary-soft);border-color:var(--primary-soft);}
.aselect.icon-only.active svg{color:var(--primary-dark);}
.dot-indicator{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--primary);border:2px solid var(--card);}
/* Sopra #genericPopover (650): un selettore aperto da dentro un riquadro
   finirebbe dietro al riquadro stesso, invisibile e non premibile. Non si
   sovrappongono mai per sbaglio: aprire un riquadro chiude questo. */
#appSelectPanel{background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:0 16px 40px rgba(20,20,43,.16);z-index:660;padding:6px;max-height:280px;display:flex;flex-direction:column;animation:aselectin .12s ease;}
@keyframes aselectin{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.aselect-search{padding:4px 4px 8px 4px;}
.aselect-search input{width:100%;border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit;outline:none;}
.aselect-search input:focus{border-color:var(--primary);}
.aselect-list{overflow-y:auto;flex:1;}
.aselect-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;}
.aselect-opt:hover{background:var(--hover);}
.aselect-opt.sel{background:var(--primary-soft);color:var(--primary-dark);font-weight:600;}
.aselect-opt .aselect-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* Il segno del cliente davanti a una voce: un gradino piu' grande dei
   quindici pixel di una riga di elenco, perche' qui e' l'unica cosa che
   distingue due voci che si somigliano, e sotto ai diciotto le due
   lettere non si leggono piu'. */
.aselect-opt .client-mark,.aselect>.client-mark{width:18px;height:18px;border-radius:5px;font-size:8px;}
.aselect-opt svg{width:14px;height:14px;flex-shrink:0;}
.aselect-opt .aselect-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aselect-opt .aselect-check{width:13px;height:13px;color:var(--primary);flex-shrink:0;}
.aselect-opt.aselect-all{font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);border-radius:0;margin-bottom:4px;padding:8px 10px 11px 10px;}
.aselect-opt.aselect-all .aselect-label{color:inherit;}
.aselect-opt.aselect-all .aselect-check{color:var(--primary);}
.aselect-empty{padding:14px 10px;font-size:12.5px;color:var(--muted);text-align:center;}
.aselect-group-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700;padding:8px 10px 3px 10px;}
/* Multi-selezione come campo: il badge dice quanti sono spuntati senza
   dover aprire la tendina; "crea nuovo" sta in fondo, staccato dalle
   opzioni, perche' non e' una di esse. */
.aselect-badge{font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);
  border-radius:20px;padding:1px 7px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.aselect-opt .aselect-sub{font-size:10.5px;color:var(--muted);font-weight:600;flex-shrink:0;}
.aselect-opt.aselect-create{border-top:1px solid var(--border);border-radius:0 0 8px 8px;margin-top:4px;
  padding-top:10px;color:var(--primary-dark);font-weight:700;}
.aselect-opt.aselect-create svg{width:13px;height:13px;color:var(--primary-dark);}
.aselect-opt.aselect-create:hover{background:var(--primary-soft);}

/* ===== TOOLTIP E ICONA INFORMATIVA =====
   Il riquadro sta sul body con posizione fissa, quindi non viene tagliato
   dai pannelli che scorrono; lo posiziona showTip() in popover.js. */
.app-tip{position:fixed;z-index:900;max-width:300px;background:var(--inverse);color:var(--on-inverse);
  border-radius:10px;padding:9px 12px;font-size:11.5px;line-height:1.55;font-weight:500;
  letter-spacing:.1px;box-shadow:0 12px 30px rgba(46,33,25,.26);pointer-events:none;
  opacity:0;transform:translateY(3px);transition:opacity .13s ease,transform .13s ease;}
.app-tip.sotto{transform:translateY(-3px);}
.app-tip.on{opacity:1;transform:none;}
/* La punta lega il riquadro all'icona che l'ha aperto: senza, il testo
   sembra comparire a caso in mezzo alla pagina. --tip-x la fa puntare
   all'icona anche quando il riquadro e' stato spostato dal bordo. */
.app-tip::after{content:'';position:absolute;left:var(--tip-x,50%);margin-left:-5px;
  border:5px solid transparent;}
.app-tip.sopra::after{top:100%;border-top-color:var(--inverse);}
.app-tip.sotto::after{bottom:100%;border-bottom-color:var(--inverse);}
/* La prima riga puo' portare un titolo breve: aiuta quando la spiegazione
   e' lunga tre righe. */
.app-tip b{display:block;color:var(--on-inverse);font-weight:700;margin-bottom:3px;}
/* Prospetto nel tooltip: etichette a sinistra, cifre a destra incolonnate.
   Sono quattro numeri da confrontare, non una frase da leggere. */
.app-tip .tip-grid{display:grid;grid-template-columns:auto auto;gap:1px 16px;
  margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.14);}
.app-tip .tip-k{color:var(--on-inverse-dim);}
.app-tip .tip-v{text-align:right;font-weight:700;color:var(--on-inverse);font-variant-numeric:tabular-nums;}
.app-tip .tip-v.tot{color:var(--primary-mid);}
.app-tip .tip-v.neg{color:var(--on-inverse-neg);}
.app-tip .tip-full{grid-column:1 / -1;color:var(--on-inverse-dim);}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border-radius:50%;color:var(--muted);cursor:help;flex-shrink:0;vertical-align:middle;}
.info-tip svg{width:13px;height:13px;}
.info-tip:hover,.info-tip:focus-visible{color:var(--primary-dark);outline:none;}

/* ===== SEGMENTED TOGGLE (Fatturabile) ===== */
.seg-toggle{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card);}
.seg-toggle button{border:none;background:transparent;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:5px;}
.seg-toggle button svg{width:13px;height:13px;}
.seg-toggle button:not(.active):hover{background:var(--hover);}
.seg-toggle button.active.yes{background:var(--green-soft);color:var(--green-dark);}
.seg-toggle button.active.no{background:var(--track);color:var(--text);}
.seg-toggle.sm button{padding:5px 9px;font-size:11.5px;}
.seg-toggle.sm button svg{width:11px;height:11px;}

/* ===== CUSTOM DATE PICKER (AppDatePicker) ===== */
.adate{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--field);border-radius:9px;padding:8px 10px;font-size:13px;cursor:pointer;min-height:37px;}
.adate:hover{border-color:var(--primary-mid);}
.adate.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--card);}
.adate.sm{padding:6px 8px;font-size:12.5px;min-height:31px;}
.adate .adate-icon{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.adate .adate-value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.adate .adate-value.placeholder{color:var(--muted);}
#appDatePanel{background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:0 16px 40px rgba(20,20,43,.16);z-index:600;padding:10px;animation:aselectin .12s ease;}
.adate-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.adate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:11.5px;text-align:center;}
.adate-grid .dow{font-weight:700;color:var(--muted);padding:4px 0;font-size:10px;}
.adate-grid .day{padding:6px 0;border-radius:7px;cursor:pointer;}
.adate-grid .day:hover{background:var(--hover);}
.adate-grid .day.today{background:var(--primary-soft);color:var(--primary-dark);font-weight:700;}
.adate-grid .day.selected{background:var(--primary);color:var(--on-accent);font-weight:700;}
.adate-grid .day.empty{cursor:default;}
.adate-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.link-btn{background:none;border:none;color:var(--primary);font-size:12px;font-weight:600;cursor:pointer;padding:2px;}
.link-btn:hover{text-decoration:underline;}
/* ===== CUSTOM TIME PICKER (AppTimePicker) ===== */
.tp{position:relative;display:block;min-width:0;}
.tp-field{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 11px;border:1px solid var(--border);
  border-radius:10px;background:var(--card);cursor:text;transition:border-color .12s,box-shadow .12s;}
.tp-field:hover{border-color:var(--dim);}
.tp.open .tp-field,.tp-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.tp.invalid .tp-field{border-color:var(--red);}
.tp.invalid.open .tp-field,.tp.invalid .tp-field:focus-within{box-shadow:0 0 0 3px var(--red-soft);}
.tp.disabled .tp-field{background:var(--field);opacity:.6;cursor:not-allowed;}
.tp.sm .tp-field{height:32px;padding:0 6px 0 9px;gap:6px;}
.tp .tp-ic{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
.tp.open .tp-ic{color:var(--primary-dark);}
/* Due classi e non una: dentro una `.form-row` la regola generica
   `.form-row input` di tasks.css e' piu' forte di `.tp-input` da sola, e il
   campo dell'orario si ritrovava un bordo e un fondo suoi dentro al
   contenitore che ne ha gia' uno. */
.tp .tp-input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:13.5px;
  font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;padding:0;outline:none;}
.tp .tp-input:focus{background:transparent;border:none;}
.tp .tp-input::placeholder{color:var(--muted);font-weight:400;}
.tp-btn{width:24px;height:24px;border:none;background:transparent;border-radius:6px;display:flex;align-items:center;
  justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0;padding:0;}
.tp-btn:hover{background:var(--hover);color:var(--text);}
.tp-btn svg{width:14px;height:14px;transition:transform .15s;}
.tp.open .tp-chev svg{transform:rotate(180deg);}
.tp-clear{display:none;}
.tp.has-value.clearable .tp-clear{display:flex;}
.tp-err{font-size:11.5px;color:var(--red-dark);font-weight:600;margin-top:5px;}
.tp-err:empty{display:none;}

/* Il pannello e' appeso al corpo della pagina, non al campo: dentro una modale
   che scorre o una scheda col bordo tagliato, un pannello appeso al campo
   verrebbe reciso a meta'. Il prezzo e' collocarlo a mano. */
#appTimePanel.tp-pop{position:fixed;z-index:600;background:var(--card);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-lift);padding:10px 8px 6px;
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .14s,transform .14s;}
#appTimePanel.tp-pop.up{transform:translateY(4px) scale(.98);transform-origin:bottom left;}
#appTimePanel.tp-pop.open{opacity:1;transform:none;}
.tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.tp-col{min-width:0;}
.tp-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);
  text-align:center;padding:0 0 6px;}
/* La sfumatura in cima e in fondo dice che l'elenco continua, senza dover
   mostrare una barra di scorrimento dentro un pannello alto duecento pixel. */
.tp-list{height:196px;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;padding:78px 2px;
  display:flex;flex-direction:column;gap:2px;border-radius:10px;outline:none;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);}
.tp-list::-webkit-scrollbar{display:none;}
.tp-list.short{height:auto;padding:0 2px;-webkit-mask-image:none;mask-image:none;}
.tp-opt{flex-shrink:0;height:34px;border:none;background:transparent;border-radius:9px;font:inherit;font-size:14px;
  font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;cursor:pointer;padding:0;}
.tp-opt:hover:not(:disabled):not(.sel){background:var(--hover);}
.tp-opt.sel{background:var(--primary);color:var(--on-accent);font-weight:700;}
.tp-opt.kb:not(.sel){box-shadow:inset 0 0 0 2px var(--primary-soft);}
.tp-opt:disabled{color:var(--dim);cursor:not-allowed;text-decoration:line-through;}
/* Un minuto fuori dal passo scritto a mano: valido, ma non uno dei proposti. */
.tp-opt.off-step{font-style:italic;}
.tp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:6px 4px 0;
  border-top:1px solid var(--border);}
.tp-link{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--primary-dark);
  cursor:pointer;padding:5px 6px;border-radius:7px;}
.tp-link:hover{background:var(--primary-soft);}
.tp-link.muted{color:var(--muted);}
.tp-link.muted:hover{background:var(--hover);color:var(--text);}
.tp-link:disabled{opacity:.4;cursor:not-allowed;background:none;}
@media (prefers-reduced-motion:reduce){#appTimePanel.tp-pop,.tp-list,.tp-btn svg{transition:none;scroll-behavior:auto;}}

/* ===== POPOVER generico (event detail, ecc.) ===== */
/* Il riquadro non puo' essere piu' alto della finestra: senza tetto, su uno
   schermo basso il contenuto finiva sotto il bordo e non lo raggiungevi in
   nessun modo. Con il tetto scorre dentro se stesso. */
#genericPopover{background:var(--card);border:1px solid var(--border);border-radius:13px;box-shadow:0 20px 50px rgba(20,20,43,.2);z-index:650;padding:16px;width:290px;animation:aselectin .12s ease;max-height:calc(100vh - 20px);overflow-y:auto;overscroll-behavior:contain;}
.pop-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px;}
.pop-title{font-weight:700;font-size:14.5px;margin-bottom:2px;}
.pop-sub{font-size:12px;color:var(--muted);margin-bottom:10px;}
.pop-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-top:1px solid var(--border);}
.pop-row:first-of-type{border-top:none;}
.pop-row label{color:var(--muted);}
.pop-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.pop-actions button{flex:1;min-width:70px;gap:5px;justify-content:center;}
.pop-actions button svg{width:13px;height:13px;flex-shrink:0;}

/* ===== ACTION MENU generico (Modifica/Duplica/Archivia/Elimina, ecc.) ===== */
.action-menu{display:inline-flex;}
#actionMenuPanel{background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:0 16px 40px rgba(20,20,43,.16);z-index:600;padding:6px;animation:aselectin .12s ease;}
.action-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:12.8px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;}
.action-menu-item:hover{background:var(--hover);}
.action-menu-item.danger{color:var(--red-dark);}
.action-menu-item.off{opacity:.45;cursor:not-allowed;}
.action-menu-item.off:hover{background:transparent;}
.action-menu-item svg{width:14px;height:14px;flex-shrink:0;}

/* ===== SCHEDA CLIENTE — header, alert, timeline, note, mini-progetti ===== */
.section-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700;margin:18px 0 10px 0;padding-top:14px;border-top:1px solid var(--border);}
.section-title:first-child{margin-top:0;padding-top:0;border-top:none;}

.client-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.client-header-left{display:flex;gap:14px;align-items:flex-start;}
.client-header .cname{font-size:20px;font-weight:700;letter-spacing:-.2px;}
.client-header .clegal{font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.client-header .cmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;}

.alert-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber-dark);font-size:12.8px;font-weight:600;margin-bottom:8px;cursor:pointer;}
.alert-row:last-child{margin-bottom:0;}
.alert-row.danger{background:var(--red-soft);color:var(--red-dark);}
/* Non un allarme: un'informazione. Stesso impianto, tono primario. */
.alert-row.info{background:var(--primary-soft);color:var(--primary-dark);}
a.alert-row{text-decoration:none;}
.alert-row:hover{filter:brightness(.98);}
.alert-row b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;}
.alert-row span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.alert-row .go{margin-left:auto;opacity:.6;}
.alert-row svg{width:15px;height:15px;flex-shrink:0;}
/* "ce ne sono altri": non e' un avviso, e' il modo di vederli tutti */
.alert-more{display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:none;font:inherit;
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:10px;}
.alert-more:hover{background:var(--hover);color:var(--text);}
/* avviso che si può mettere a tacere: la x resta discreta finché non ci si passa sopra */
.alert-x{margin-left:auto;background:none;border:none;padding:2px;display:flex;align-items:center;color:inherit;opacity:.55;border-radius:6px;}
.alert-x:hover{opacity:1;background:rgba(0,0,0,.06);}
.alert-x svg{width:14px;height:14px;}

.timeline-item{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--border);font-size:12.8px;}
.timeline-item:first-child{border-top:none;}
.timeline-item .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);margin-top:5px;flex-shrink:0;}
.timeline-item .when{color:var(--muted);font-size:11px;margin-bottom:2px;}

/* ---- Note e storico (scheda cliente) ---- */
.jr-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.jr-section{margin-top:30px;padding-top:24px;border-top:1px solid var(--border);}
.sec-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sec-stat{font-size:11.5px;font-weight:600;color:var(--muted);}

/* Riepilogo compatto: sostituisce una fila di kpi-card dove i numeri sono
   di contorno alla tabella e non meritano un quarto di schermata. */
.tsum{display:flex;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 4px;margin-bottom:12px;}
.tsum-item{display:flex;align-items:baseline;gap:7px;padding:2px 16px;border-left:1px solid var(--border);}
.tsum-item:first-child{border-left:none;}
.tsum-item span{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;}
.tsum-item b{font-size:14px;font-weight:700;white-space:nowrap;}
td.nowrap,th.nowrap{white-space:nowrap;}