/* ============================================================
   AMMINISTRAZIONE E CONTRATTI
   L'elenco piatto dei documenti — una riga, un documento — e il pannello
   di un contratto. Stavano in `components.css`, che era arrivato a
   milleduecento righe: non sono componenti riusabili, sono due schermate.

   Si carica subito dopo `components.css` e prima dei fogli di pagina,
   dov'erano: una regola che prima vinceva per ordine vince ancora.
   ============================================================ */

/* ---- Amministrazione: elenco piatto, una riga = un documento ---- */
.am-chev{width:13px!important;height:13px!important;opacity:.8;}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;}
.adm-kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 16px;}
.adm-kpi-top{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.adm-kpi-top svg{width:13px;height:13px;flex-shrink:0;}
.adm-kpi-val{font-size:21px;font-weight:700;letter-spacing:-.4px;}
.adm-kpi.red .adm-kpi-val,.adm-kpi.red .adm-kpi-top{color:var(--red-dark);}

.adm-note{display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--border);border-radius:12px;padding:11px 16px;margin-bottom:16px;font-size:12.5px;}
.adm-note>svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.adm-note>span{flex:1;min-width:0;}
.adm-note .btn{flex-shrink:0;}

.adm-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 18px 10px 18px;margin-bottom:16px;overflow:hidden;}
.adm-block-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0 8px 0;}
.adm-block-head>span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.adm-filters{display:flex;gap:4px;flex-wrap:wrap;}
.adm-filter{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;}
.adm-filter:hover{background:var(--hover);color:var(--text);}
.adm-filter.active{background:var(--primary-soft);color:var(--primary-dark);}
.adm-filter span{font-size:10.5px;opacity:.7;}

/* righe a tutta larghezza della card: i separatori corrono dritti da bordo a
   bordo invece di finire con gli angoli arrotondati della riga */
.adm-row{display:flex;align-items:center;gap:13px;padding:13px 18px;margin:0 -18px;border-top:1px solid var(--border);cursor:pointer;}
.adm-block-head + .adm-row{border-top:none;}
.adm-row:hover{background:var(--hover);}
.adm-row:hover .adm-actions{opacity:1;}
.adm-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.adm-icon svg{width:15px;height:15px;}
/* Le quattro icone non sono quattro categorie qualsiasi: sono le tappe di
   una stessa storia, e l'intensita' lo dice. Previsto = tratteggiato, non
   e' ancora successo. Emesso = tinta tenue. Incassato = pieno, il denaro e'
   arrivato. Il contratto sta a parte, in un neutro caldo: e' la cornice,
   non un movimento. Erano blu, verde e grigio freddo della vecchia palette,
   e il verde per "incassato" rompeva la regola del brand. */
.adm-icon.planned{background:var(--bg);color:var(--muted);border:1px dashed var(--primary-mid);}
.adm-icon.invoice{background:var(--primary-soft);color:var(--primary-dark);}
.adm-icon.paid{background:var(--primary);color:var(--on-accent);}
.adm-icon.contract{background:var(--track);color:var(--neutral-ink);}
.adm-main{flex:1;min-width:0;}
.adm-name{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;min-width:0;}
.adm-chip{font-size:10px;font-weight:600;color:var(--muted);background:var(--track);border-radius:5px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.adm-sub{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.adm-amount{font-size:14px;font-weight:700;min-width:72px;text-align:right;}
.adm-chev{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.adm-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;opacity:0;transition:opacity .12s;}
.adm-empty{text-align:center;padding:26px 10px;color:var(--muted);}
.adm-empty svg{width:22px;height:22px;margin-bottom:8px;opacity:.6;}
.adm-empty p{font-size:12.5px;margin:0;}

/* ===== AMMINISTRAZIONE =====
   Densita' da gestionale: righe basse, divisori sottili, nessuna card per
   riga. Il primario sta nelle azioni e nella tab attiva, non nei fondi:
   grandi blocchi arancioni trasformerebbero una pagina di lavoro in una
   landing. */

/* --- Overview: quattro numeri in una fascia, ognuno una lente --- */
/* Le KPI riusano .kpi-card dell'app: qui si aggiunge solo cio' che serve a
   farle diventare un filtro cliccabile senza cambiarne l'aspetto. La usano
   Amministrazione e Progetti: una scheda sola per tutta l'applicazione. */
.adm-kpis{margin-bottom:14px;}
.kpi-click{text-align:left;cursor:pointer;font:inherit;color:inherit;padding:13px 16px;
  transition:border-color .12s,background .12s;}
.kpi-click.flat{cursor:default;}
.kpi-click .kpi-top{margin-bottom:6px;}
.kpi-click .kpi-value{margin-bottom:1px;}
.kpi-click .kpi-value small{font-size:12.5px;font-weight:500;color:var(--muted);}
.kpi-click:not(.flat):hover{border-color:var(--primary-mid);}
.kpi-click.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.kpi-click .kpi-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:0;}
.kpi-click .kpi-sub.late{color:var(--red-dark);}
/* In Amministrazione l'icona dice il verso del denaro: due entrano, due escono. */
.kpi-click .kpi-icon.in{background:var(--primary-soft);color:var(--primary-dark);}
.kpi-click .kpi-icon.out{background:var(--track);color:var(--neutral-ink);}

/* Attenzione e "da incassare per cliente" affiancati: la fascia prima era
   larga tutta la pagina con il vuoto in mezzo, e il vuoto non diceva niente. */
.adm-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
.adm-split > *{margin-bottom:0;}
.adm-side{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:4px 16px 12px 16px;}
.adm-side.calm{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:12.5px;color:var(--muted);}
.adm-side.calm svg{width:15px;height:15px;color:var(--primary);flex-shrink:0;}
.cli-row{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);
  padding:8px 0 9px 0;cursor:pointer;font:inherit;color:inherit;}
.cli-row:hover .cli-bar > i{background:var(--primary-dark);}
.cli-top{display:flex;align-items:center;gap:8px;}
.cli-top b{margin-left:auto;}
.cli-top b{font-size:13px;font-variant-numeric:tabular-nums;}
.cli-bar{display:flex;height:4px;border-radius:4px;background:var(--track);margin-top:6px;overflow:hidden;}
.cli-bar > i{display:block;height:100%;background:var(--primary);transition:background .12s;}
.cli-bar > i.late{background:var(--red-dark);}
.cli-top > em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--red-dark);margin-left:-2px;}
.cli-more{font-size:11.5px;color:var(--muted);padding-top:8px;}

/* Grafico a colonne, fatto con l'altezza degli elementi invece che con un
   SVG: sei mesi e due serie non giustificano una libreria, e cosi' si
   ridimensiona da solo con la colonna che lo contiene. */
.flow{display:flex;flex-direction:column;padding:12px 16px 10px 16px;}
.flow-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.flow-head > span{font-size:13px;font-weight:700;letter-spacing:-.1px;}
.flow-head > em{font-style:normal;font-size:11px;color:var(--muted);font-weight:600;}
.flow-plot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;flex:1;min-height:128px;
  align-items:end;padding-top:8px;}
.flow-col{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;cursor:help;
  border-radius:7px;padding:4px 1px;transition:background .12s;}
.flow-col:hover{background:var(--bg);}
.flow-col.now{background:var(--bg);}
.flow-val{font-size:11px;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.flow-val.neg{color:var(--red-dark);}
.flow-val.vuoto{color:var(--muted);font-weight:600;}
@media(max-width:1280px){.flow-bar{width:6px;}.flow-bars{gap:1px;}.flow-m{font-size:9px;}}
/* Tre barre attaccate, una per serie: staccate sembravano mesi diversi,
   impilate sembravano un'altra unita' di misura. La barra vuota tiene il
   posto, cosi' la stessa serie sta sempre nella stessa posizione. */
.flow-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:1.5px;width:100%;min-height:0;}
.flow-bar{display:flex;flex-direction:column-reverse;justify-content:flex-start;
  width:8px;height:100%;border-radius:3px;overflow:hidden;}
.flow-bar > i{display:block;width:100%;border-radius:3px;}
.flow-bar > i.incassato{background:var(--primary);}
.flow-bar > i.atteso{background:var(--primary-soft);border:1px solid var(--primary-mid);box-sizing:border-box;}
.flow-bar > i.uscita{background:var(--dim);}
.flow-m{font-size:10px;font-weight:600;color:var(--muted);text-transform:capitalize;}
.flow-col.now .flow-m{color:var(--primary-dark);}
.flow-legend{display:flex;gap:14px;flex-wrap:wrap;padding-top:10px;margin-top:2px;
  border-top:1px solid var(--border);font-size:10.5px;color:var(--muted);font-weight:600;}
.flow-legend span{display:inline-flex;align-items:center;gap:5px;}
.flow-legend i{width:9px;height:9px;border-radius:3px;display:block;}
.flow-legend i.incassato{background:var(--primary);}
.flow-legend i.atteso{background:var(--primary-soft);border:1px solid var(--primary-mid);}
.flow-legend i.uscita{background:var(--dim);}


/* --- Richiede attenzione: solo cose con un pulsante accanto --- */
.adm-attention{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:4px 16px 8px 16px;}
.adm-attention.calm{display:flex;align-items:center;gap:10px;padding:13px 16px;
  font-size:12.5px;color:var(--muted);}
.adm-attention.calm svg{width:15px;height:15px;color:var(--primary);flex-shrink:0;}
.att-head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted);padding:8px 0 6px 0;}
.att-head svg{width:13px;height:13px;}
.att-count{background:var(--primary-soft);color:var(--primary-dark);border-radius:20px;
  padding:1px 7px;font-size:10.5px;}
/* Colonne fisse: icona, titolo elastico, cliente, stato, importo, azione.
   Il titolo e' l'unico che si allarga, tutto il resto sta incolonnato.

   Le colonne vivono sulla lista, non sulla riga: ogni riga era una griglia
   per conto suo, quindi "auto" si misurava sul contenuto di quella riga
   soltanto e i clienti finivano ognuno a un'altezza diversa. Con subgrid le
   righe prendono le colonne della lista e si incolonnano davvero. La prima
   dichiarazione resta come ripiego per i browser senza subgrid. */
.att-list{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto 72px 116px;
  column-gap:10px;}
.att-row{display:grid;grid-column:1 / -1;
  grid-template-columns:16px minmax(0,1fr) auto auto 72px 116px;
  grid-template-columns:subgrid;
  align-items:center;column-gap:10px;padding:6px 0;border-top:1px solid var(--border);min-height:40px;}
.att-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-cli{display:flex;min-width:0;}
.att-row .btn{justify-content:center;}
.att-ico{width:15px;height:15px;flex-shrink:0;color:var(--muted);}
.att-ico.late{color:var(--red-dark);}

/* Il motivo e' una pastiglia, non testo colorato: una parola rossa in mezzo
   a una frase grida, una pastiglia dice "questo e' uno stato" e si distingue
   dal titolo senza alzare la voce. */
/* La pastiglia si stringe sul testo: da quando le colonne sono comuni, una
   nota corta si allargherebbe fino alla larghezza della piu' lunga. */
.att-note{justify-self:start;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);
  border:1px solid var(--border);border-radius:20px;padding:2px 9px;white-space:nowrap;}
.att-note.late{color:var(--red-dark);background:var(--red-soft);border-color:transparent;}
.att-amount{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;}
.att-more{border:none;background:none;padding:9px 0 2px 0;font-size:12px;font-weight:600;
  color:var(--primary-dark);cursor:pointer;}
.att-more:hover{text-decoration:underline;}

/* --- Archivio: e' il cuore, quindi si vede che e' il cuore --- */
.adm-archive{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
/* Ingrandito, l'archivio va in una modale grande: prende quasi tutto lo
   spazio ma lascia il bordo scuro intorno, che e' la differenza fra "sono
   dentro una vista temporanea" e "l'applicazione e' cambiata". Sta sullo
   stesso livello delle altre modali; le tendine e i dettagli si aprono sopra. */
.adm-modalw{position:fixed;inset:0;z-index:200;background:var(--scrim);
  display:flex;align-items:center;justify-content:center;padding:18px;animation:admfade .14s ease;}
@keyframes admfade{from{opacity:0}to{opacity:1}}
/* Altezza minima generosa: si apre per guardare tanti dati, e una modale
   che cambia statura fra quattro righe e cinquanta sarebbe un posto diverso
   ogni volta. */
.adm-archive.big{width:min(1760px,100%);min-height:min(78vh,100%);max-height:100%;
  display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(20,20,43,.28);}
.adm-archive.big #admArchiveBody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;}
.adm-archive.big .adm-tablewrap{flex:1;}
/* Scorrendo mille righe le intestazioni restano, altrimenti a meta' elenco
   non si sa piu' quale colonna e' quale. */
.adm-archive.big .adm-table thead th{position:sticky;top:0;z-index:2;}
.adm-archive.big .adm-pager{position:sticky;bottom:0;background:var(--card);}
body.adm-locked{overflow:hidden;}

.adm-archhead{display:flex;align-items:stretch;border-bottom:1px solid var(--border);}
/* Sottolineatura, non chip: e' navigazione, non un filtro fra tanti. */
/* `overflow-y:hidden` non e' pignoleria: la sottolineatura della scheda attiva
   sporge di un pixel sotto il bordo (`margin-bottom:-1px`), e quando un asse
   non e' `visible` l'altro diventa `auto` da solo. Risultato: una barra di
   scorrimento verticale per un pixel, che su una striscia alta 40px si vede
   solo come due freccette in un angolo. */
.adm-tabs{display:flex;gap:2px;padding:0 18px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;
  scrollbar-width:none;align-items:stretch;}
.adm-tabs::-webkit-scrollbar{display:none;}
.adm-tab{display:flex;align-items:center;gap:7px;padding:10px 14px;border:none;background:none;
  font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.adm-tab svg{width:15px;height:15px;}
.adm-tab:hover{color:var(--text);}
.adm-tab span{font-size:11px;font-weight:700;background:var(--bg);border:1px solid var(--border);
  border-radius:6px;padding:1px 6px;color:var(--muted);}
.adm-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary);}
.adm-tab.active span{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark);}
.adm-expand{display:flex;align-items:center;gap:6px;flex-shrink:0;border:none;background:none;
  cursor:pointer;padding:0 16px;font-size:12.5px;font-weight:600;color:var(--muted);
  border-left:1px solid var(--border);}
.adm-expand svg{width:15px;height:15px;}
.adm-expand:hover{color:var(--primary-dark);background:var(--bg);}

.adm-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;}
.adm-search{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:6px 6px 6px 11px;font-size:13px;flex:1;min-width:190px;max-width:290px;}
.adm-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--card);}
.adm-search svg{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.adm-search input{border:none;outline:none;background:none;font:inherit;font-size:13px;width:100%;color:var(--text);}
.adm-search .s-clear{display:flex;align-items:center;border:none;background:none;cursor:pointer;
  color:var(--muted);padding:3px 5px;border-radius:7px;flex-shrink:0;}
.adm-search .s-clear svg{width:13px;height:13px;}
.adm-search .s-clear:hover{background:var(--border);color:var(--text);}
/* Il campo vuoto non ha niente da svuotare: la x compare quando serve. */
.adm-search input:placeholder-shown ~ .s-clear{display:none;}

/* I filtri come pastiglie separate, una per dimensione: icona in testa,
   valore al posto dell'etichetta quando sono accesi, x per spegnerli.
   Spente restano bianche; accese si riempiono di arancio scuro, perche' un
   filtro attivo e' la spiegazione di perche' la tabella sotto mostra sei
   righe invece di sessanta e va vista senza cercarla. */
.adm-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.adm-filters .aselect.chip.rect{border-radius:9px;padding:7px 11px;gap:6px;background:var(--card);
  border:1px solid var(--border);color:var(--muted);font-weight:600;}
.adm-filters .aselect.chip.rect:hover{border-color:var(--primary-mid);color:var(--text);}
.adm-filters .aselect-chevron{opacity:.7;}
.adm-filters .aselect.chip.rect.active{background:var(--primary-dark);border-color:var(--primary-dark);
  color:var(--on-accent);box-shadow:0 1px 3px rgba(232,93,37,.28);}
.adm-filters .aselect.chip.rect.active:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.adm-filters .aselect.chip.rect.active .fc-val{color:var(--on-accent);font-weight:700;}
.adm-filters .aselect.chip.rect.active .aselect-ico{color:var(--on-accent);opacity:.9;}
.adm-filters .aselect.chip.rect.active .fc-clear{color:var(--on-accent);}
.adm-filters .aselect.chip.rect.active .fc-clear:hover{background:rgba(255,255,255,.25);}
.adm-filters .aselect.chip.rect.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.adm-filters .fs-clear{border:none;background:none;cursor:pointer;padding:6px 4px;
  font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:underline;}
.adm-filters .fs-clear:hover{color:var(--primary-dark);}
.adm-tb-right{margin-left:auto;display:flex;gap:7px;align-items:center;}

/* Il piede dice sempre quante righe ci sono: il conteggio e' la risposta a
   "sto guardando tutto?". I tasti di pagina compaiono solo quando c'e'
   davvero una seconda pagina. */
.adm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);}
.adm-pager b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.adm-pagebtns{display:flex;align-items:center;gap:4px;}
.pg-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;
  border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;}
.pg-btn svg{width:14px;height:14px;}
.pg-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary-dark);}
.pg-btn:disabled{opacity:.4;cursor:default;}
.pg-num{font-size:12px;font-weight:600;color:var(--text);padding:0 6px;font-variant-numeric:tabular-nums;}

/* --- La tabella --- */
.adm-tablewrap{overflow-x:auto;}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;}
.adm-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;
  color:var(--muted);padding:9px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg);white-space:nowrap;}
.adm-table th.num{text-align:right;}
.adm-table th.s{cursor:pointer;}
.adm-table th.s:hover{color:var(--text);}
.adm-table th .ord{color:var(--primary-dark);}
.adm-table td{padding:0 14px;height:52px;border-bottom:1px solid var(--border);vertical-align:middle;}
.adm-table tbody tr{cursor:pointer;}
.adm-table tbody tr:hover{background:var(--bg);}
.adm-table tbody tr:last-child td{border-bottom:none;}
.adm-table td.strong{font-weight:700;color:var(--text);}
.adm-table td.dim{color:var(--muted);}
.adm-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.adm-table td.late{color:var(--red-dark);font-weight:600;}
.adm-table td.neg{color:var(--red-dark);}
.adm-table td small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);margin-top:1px;}
.adm-table td.ell{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-table td.act{width:44px;text-align:right;padding-right:10px;}
.dimmed{color:var(--muted);font-weight:500;}
.adm-cat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.adm-cat svg{width:13px;height:13px;opacity:.7;}

.adm-empty2{text-align:center;padding:46px 20px;color:var(--muted);}
.adm-empty2>svg{width:22px;height:22px;opacity:.5;margin-bottom:10px;}
.adm-empty2 p{font-size:13px;margin:0 0 14px 0;}
/* .btn e' display:flex: da solo in un blocco si allarga e resta a sinistra.
   Qui va in linea, cosi' il text-align del contenitore lo centra. */
.adm-empty2 .btn{display:inline-flex;justify-content:center;}

/* --- Dettaglio spesa dentro la tabella ---
   Tre sezioni con la loro intestazione e la loro icona: descrizione,
   riepilogo, riaddebiti. Le intestazioni servono a riconoscere il blocco
   aprendo due spese di fila, senza doverne leggere il contenuto. */
.exp-detail-row td{height:auto;padding:0;background:var(--bg);}
.exp-detail-row:hover{background:var(--bg);}
.exdet{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;padding:16px 18px;align-items:start;}
.exs-note{grid-column:1 / -1;}
.exs h4{display:flex;align-items:center;gap:7px;margin:0 0 9px 0;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.exs h4 svg{width:13px;height:13px;color:var(--primary-dark);}
.exs h4 em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;font-size:11px;}
.exs h4 .btn{margin-left:auto;text-transform:none;letter-spacing:0;}
.exs-note p{margin:0;font-size:12.5px;color:var(--ink-soft,var(--muted));line-height:1.55;}

.exs-sum{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:12px 14px;}
.exs-row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;}
.exs-row + .exs-row{border-top:1px solid var(--border);}
.exs-row svg{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.exs-row > span{color:var(--muted);}
.exs-row > b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;}
.exs-row > b.tot{font-size:14px;color:var(--primary-dark);}
.exs-row > b.tot.neg{color:var(--red-dark);}
.exs-hist{border-top:1px solid var(--border);margin-top:4px;padding-top:8px;font-size:11.5px;color:var(--muted);}
.exs-hist > span{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}

.exs-list{display:flex;flex-direction:column;gap:5px;}
.exs-cli{display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:7px 8px 7px 11px;}
.exs-cli:hover{border-color:var(--primary-mid);}
.exs-cli > b{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums;}
.exs-cli .icon-btn{width:24px;height:24px;flex-shrink:0;}
.exs-cli .icon-btn svg{width:12px;height:12px;}
.exs-tot{display:flex;align-items:center;gap:9px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--border);font-size:12.5px;}
.exs-tot svg{width:14px;height:14px;color:var(--muted);}
.exs-tot > span{color:var(--muted);}
.exs-tot > b{margin-left:auto;font-size:14px;font-variant-numeric:tabular-nums;}
.exs-empty{margin:0;font-size:12px;color:var(--muted);}

@media(max-width:1100px){
  .exdet{grid-template-columns:1fr;}
  /* Sotto i 1100 le due meta' non stanno piu' affiancate senza schiacciarsi:
     la fascia di attenzione perderebbe i titoli e il grafico le colonne. */
  .adm-split{grid-template-columns:1fr;}
}
/* Su schermo stretto la tabella non si comprime: ogni riga diventa una
   scheda con le quattro cose che servono per riconoscerla. */
@media(max-width:760px){
  .adm-kpis2{grid-template-columns:1fr;}
  .adm-modalw{padding:10px;}
  .adm-search{max-width:none;}
  .adm-filters{width:100%;}
  .adm-expand{padding:0 12px;}
  .adm-table thead{display:none;}
  .adm-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 14px;
    border-bottom:1px solid var(--border);position:relative;}
  .adm-table td{display:block;height:auto;padding:0;border:none;}
  .adm-table td.ell{max-width:none;white-space:normal;}
  .adm-table td.act{position:absolute;right:10px;top:10px;width:auto;}
  .adm-table td.num{text-align:left;}
}

/* ===== SPESE =====
   Estendono il linguaggio .adm- della pagina Amministrazione invece di
   inventarne uno parallelo: una spesa e' una riga come una fattura, solo
   che si apre e mostra chi se la porta. */
.adm-kpi-val small{font-size:12px;font-weight:600;color:var(--muted);margin-left:2px;letter-spacing:0;}
.exp-card{border-bottom:1px solid var(--border);}
.exp-card:last-of-type{border-bottom:none;}
.exp-card > .adm-row{border-top:none;}
.exp-card.open{background:var(--field);}
.exp-card.open > .adm-row{background:var(--hover);}
.exp-detail{padding:4px 18px 16px 18px;}
.exp-note{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 12px 0;}
.exp-note.tight{margin:6px 0 0 0;}
.exp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.exp-head > span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.exp-head-act{display:flex;gap:6px;align-items:center;min-width:0;}
/* Il riepilogo accanto a un pulsante: sei pixel di distanza li facevano
   leggere come una cosa sola. Si accorcia lui quando lo spazio manca,
   perche' il pulsante non puo' sparire. */
.exp-head-stat{font-size:11.5px;color:var(--muted);font-weight:600;margin-right:8px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Una riga per cliente: chi, quanto ti costa, quanto gli chiedi, quanto ci
   guadagni. Le tre cifre incolonnate perche' si leggono confrontandole. */
.exp-allocs{border:1px solid var(--border);border-radius:11px;background:var(--card);overflow:hidden;}
.exp-alloc{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 132px 62px;align-items:center;
  gap:10px;padding:9px 12px;border-top:1px solid var(--border);}
.exp-alloc:first-child{border-top:none;}
.exp-alloc-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.exp-alloc-num{display:flex;flex-direction:column;gap:1px;text-align:right;}
.exp-alloc-num span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.exp-alloc-num b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.exp-alloc-act{display:flex;gap:2px;justify-content:flex-end;}

.exp-history{border:1px solid var(--border);border-radius:11px;background:var(--card);overflow:hidden;}
.exp-hist-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 96px;gap:12px;align-items:center;
  padding:8px 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);}
.exp-hist-row:first-child{border-top:none;}
.exp-hist-row b{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;}
.exp-renew-recap{background:var(--bg);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;font-size:12px;color:var(--muted);margin-bottom:4px;}
.exp-renew-recap b{color:var(--text);}

/* Spiegazione sotto un campo di modale: dice la conseguenza di una scelta,
   non ripete l'etichetta. */
.form-hint{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px;}
.form-hint b{color:var(--text);font-weight:700;}

@media(max-width:820px){
  .exp-alloc{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;}
  .exp-alloc-num{flex-direction:row;align-items:baseline;gap:6px;text-align:left;}
  .exp-alloc-act{grid-column:2;}
}
.fin-bar{height:4px;background:var(--track);border-radius:4px;overflow:hidden;}
.fin-bar>div{height:100%;background:var(--primary);}
@media(max-width:680px){.adm-sub{white-space:normal;}.adm-right{gap:8px;}.adm-amount{min-width:0;}.adm-actions{opacity:1;}}

/* ---- Pannello contratto: solo impaginazione, la veste e' quella dell'app ---- */
.modal.drawer.split{padding:0;display:flex;flex-direction:column;overflow:hidden;}
.ctp-fixed{flex-shrink:0;padding:18px 24px 0 24px;border-bottom:1px solid var(--border);}
.ctp-scroll{flex:1;overflow-y:auto;padding:20px 24px 30px 24px;}
.ctp-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.ctp-topbar .breadcrumb{margin-bottom:0;}
.ctp-top-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.ctp-dates{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;}
.ctp-dates svg{width:13px;height:13px;}
/* Riepilogo economico del contratto: card piena in gradiente primario */
.ctm-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:linear-gradient(120deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:16px;padding:22px 26px;color:var(--on-accent);margin-bottom:14px;}
.ctm-card::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);}
.ctm-card::after{content:'';position:absolute;right:50px;bottom:-90px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.06);}
/* i due blocchi stanno larghi quanto il loro contenuto; è il tachimetro,
   con i margini automatici, a prendersi in parti uguali lo spazio che
   avanza — così risulta centrato fra testo e riquadri, non solo sulla
   mezzeria geometrica della card, dove sembrava spostato a sinistra */
.ctm-left{position:relative;z-index:1;min-width:0;flex:0 1 auto;}
.ctm-left .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.85;}
.ctm-left .v{font-size:36px;font-weight:800;letter-spacing:-1px;margin-top:2px;font-variant-numeric:tabular-nums;}
.ctm-left .sub{font-size:12.5px;opacity:.85;margin-top:4px;}
/* stesso rapporto del viewBox ritagliato: il disegno riempie il box esatto */
.ctm-gauge{position:relative;z-index:1;width:150px;aspect-ratio:186/101;flex-shrink:0;margin-left:auto;margin-right:auto;}
/* solo il figlio diretto: da discendente prendeva anche l'svg della spunta,
   lo rendeva assoluto e il suo contenitore collassava a zero, mandando
   l'icona fuori centro di mezza icona in basso a destra */
.ctm-gauge > svg{position:absolute;inset:0;width:100%;height:100%;}
.ctm-gauge .pct{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);font-size:23px;font-weight:800;line-height:1;}
.ctm-gauge .cap{position:absolute;left:50%;top:88%;transform:translateX(-50%);font-size:10.5px;font-weight:600;opacity:.8;white-space:nowrap;}
.ctm-right{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto;}
.ctm-chip{display:flex;justify-content:space-between;gap:18px;min-width:178px;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 13px;font-size:12.5px;}
.ctm-chip .k{opacity:.85;}
.ctm-chip .v{font-weight:700;font-variant-numeric:tabular-nums;}
/* Stato a conti chiusi: stessa forma, peso visivo ridotto. Non richiede
   attenzione, quindi non ha il colore pieno del blocco con del residuo. */
.ctm-card.settled{background:linear-gradient(120deg,var(--hover) 0%,var(--primary-soft) 100%);border:1px solid var(--border);color:var(--text);}
.ctm-card.settled::before{background:rgba(255,122,69,.06);}
.ctm-card.settled::after{background:rgba(255,122,69,.05);}
.ctm-card.settled .ctm-left .k{color:var(--primary-dark);opacity:1;display:flex;align-items:center;gap:7px;}
.ctm-card.settled .ctm-left .k svg{width:14px;height:14px;}
.ctm-card.settled .ctm-left .sub{color:var(--muted);opacity:1;}
.ctm-card.settled .ctm-chip{background:var(--card);border:1px solid var(--border);}
.ctm-card.settled .ctm-chip .k{color:var(--muted);opacity:1;}
/* la conca va dal 16% (bordo interno dell'arco) al 92% (linea di base):
   il centro esatto sarebbe 54%, ma un filo più in basso sta meglio */
.ctm-gauge .check{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);color:var(--primary);display:flex;}
.ctm-gauge .check svg{width:26px;height:26px;stroke-width:2.6;}
@media(max-width:820px){.ctm-card{flex-wrap:wrap;gap:18px;}.ctm-left{width:100%;}.ctm-right{flex:1;}.ctm-chip{min-width:0;}}
/* tab a sottolineatura */
/* Con molte schede i titoli si spezzavano su due righe e la barra diventava
   frastagliata: meglio tenerli su una riga e far scorrere, cosi' l'unica cosa
   che cambia e' quanto se ne vede. */
.ctp-tabs{display:flex;gap:18px;margin-top:16px;overflow-x:auto;scrollbar-width:none;}
.ctp-tabs::-webkit-scrollbar{display:none;}
.ctp-tab{display:flex;align-items:center;gap:7px;padding:11px 0;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;}
.ctp-tab:hover{color:var(--text);}
/* Senza questa regola le icone restano ai 24px con cui lucide le disegna:
   i tab dei contratti non ne hanno, quelli dei servizi sì. */
.ctp-tab svg{width:15px;height:15px;flex-shrink:0;}
.ctp-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary);}
.ctp-tab .count{font-size:11px;font-weight:700;background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:1px 7px;border-radius:6px;}
.ctp-tab.active .count{background:var(--primary-soft);color:var(--primary-dark);border-color:transparent;}
.ctp-tab .count.alert{background:var(--red-soft);color:var(--red-dark);border-color:transparent;}

/* fatture come schede separate, non righe con filetti */
.inv-card{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;}
.inv-card:hover{border-color:var(--primary);}
.inv-card-icon{width:34px;height:34px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.inv-card-icon svg{width:15px;height:15px;}
.inv-card-num{font-size:12px;font-weight:700;color:var(--muted);width:78px;flex-shrink:0;}
.inv-card-main{flex:1;min-width:0;}
.inv-card-main .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv-card-main .s{font-size:12px;color:var(--muted);margin-top:2px;}
.inv-card-main .late{color:var(--red-dark);font-weight:600;}
.inv-card-amount{font-size:14.5px;font-weight:700;min-width:88px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;}
.inv-card-amount .of{display:block;font-size:11px;font-weight:500;color:var(--muted);}

/* righe movimenti: filetto pieno, senza angoli arrotondati agli estremi */
.ctp-scroll .adm-row{border-radius:0;margin:0;padding-left:0;padding-right:0;}
/* l'intestazione ha già la sua linea: la prima riga non ne aggiunge un'altra */
.ctp-scroll .pf-head + .adm-row{border-top:none;}
.ctp-scroll .pf-head.no-rule{border-bottom:none;padding-bottom:4px;margin-bottom:10px;}
.adm-actions.show{opacity:1;}
/* l'icona dentro un pulsante non deve prendere il colore delle icone di sezione */
.pf-head .btn svg{color:inherit;}
.ctp-doc-link{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:600;color:var(--primary-dark);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctp-doc-link svg{width:14px;height:14px;flex-shrink:0;}
.ctp-doc-form{display:flex;gap:8px;}
.ctp-doc-form input{flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:12.5px;font-family:inherit;}
.ctp-notes{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;color:var(--text);}
.ctd-empty{font-size:12.5px;color:var(--muted);margin:2px 0 0 0;}



.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start;}
.note-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.note-card.pinned{background:var(--field);border-color:var(--primary);}
.note-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;}
.note-card .ntitle{flex:1;min-width:0;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;word-break:break-word;}
.note-card .ntitle svg{width:13px;height:13px;color:var(--primary-dark);flex-shrink:0;}
.note-card .ntext{font-size:12.8px;line-height:1.5;color:var(--text);margin-bottom:12px;white-space:pre-wrap;word-break:break-word;}
.note-card .nmeta{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.note-card .nauthor{display:flex;align-items:center;gap:6px;min-width:0;}
.note-card .navatar{width:18px;height:18px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;flex-shrink:0;}
.note-card .ntags{display:flex;gap:4px;flex-wrap:wrap;}
.note-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s;}
.note-card:hover .note-actions,.note-card:focus-within .note-actions{opacity:1;}
.note-actions .icon-btn{width:24px;height:24px;}
.note-actions .icon-btn svg{width:12.5px;height:12.5px;}

.qf-chip .qf-count{font-size:10.5px;font-weight:700;opacity:.6;}
.act-feed{padding:6px 18px 14px 18px;}
.act-day + .act-day{margin-top:6px;}
.act-day-label{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:14px 0 8px 0;}
.act-day-label span{background:var(--track);border-radius:20px;padding:1px 7px;font-size:10px;letter-spacing:0;}
.act-rows{position:relative;}
.act-rows::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:1px;background:var(--border);}
.act-row{position:relative;display:flex;align-items:flex-start;gap:11px;padding:7px 0;}
.act-icon{position:relative;width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--card);}
.act-icon svg{width:14px;height:14px;}
.act-text{flex:1;min-width:0;font-size:12.8px;line-height:1.45;padding-top:5px;word-break:break-word;}
.act-time{flex-shrink:0;font-size:11px;color:var(--muted);font-weight:600;padding-top:7px;}
@media(max-width:560px){.act-time{display:none;}}

.sidebar-summary .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:12.8px;}
.sidebar-summary .row:first-child{border-top:none;}
.sidebar-summary .row label{color:var(--muted);display:flex;align-items:center;gap:9px;min-width:0;}
.sidebar-summary .row label svg{width:14px;height:14px;flex-shrink:0;color:var(--dim);stroke-width:2;}
.card-title.with-icon{display:flex;align-items:center;gap:10px;}
.card-title.with-icon>svg{width:15px;height:15px;padding:5px;box-sizing:content-box;border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);flex-shrink:0;stroke-width:2;}

.proj-mini{border-top:1px solid var(--border);padding:12px 0;}
.proj-mini:first-child{border-top:none;}
.proj-mini .pname{font-weight:700;font-size:13.5px;margin-bottom:4px;}
.proj-mini .pmeta{font-size:11.5px;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap;}

.econ-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px;}
.econ-row:first-child{border-top:none;}
.econ-row b{font-weight:700;text-align:right;}

.card-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.client-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px;box-shadow:var(--shadow);cursor:pointer;}
.client-card:hover{border-color:var(--primary-mid);}
.client-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.client-card .name{font-weight:700;font-size:14px;}
.client-card .contact{font-size:12px;color:var(--muted);margin-bottom:10px;}
.client-card .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11.5px;color:var(--muted);}
.client-card .stats b{color:var(--text);display:block;font-size:13px;}