/* ============================================================
   fatturazione.css — la pelle della sezione Fatturazione.

   NON e' stato disegnato qui: e' il foglio di stile del mockup approvato
   dall'utente (artifact "Fatturazione mese per mese"), travasato tale e quale.
   Chi lo modifica tenga presente che il mockup e' il riferimento visivo: se i
   due divergono, e' questo file a essere sbagliato.

   Due sole trasformazioni rispetto all'originale:
   1. tolti i token :root (nell'app arrivano da base.css), la finta cornice
      dell'app (.frame/.app/.topbar/.stage) e i pezzi da mockup (disclaimer,
      toast, badge "anteprima");
   2. ogni selettore prefissato con #view-reconciliation, cosi' le regole generiche
      (table, th, td, .btn, .note...) restano dentro la sezione e non toccano
      il resto dell'applicazione.

   La meccanica delle discrepanze (.reconcil-*) NON e' qui: vive gia' in
   components.css ed e' quella vera, non va duplicata.
   Generato da scratchpad/porta_css.py — rigenerabile.
   ============================================================ */

/* ------------------------------------------------------------------
   I NOMI DEI TOKEN DEL MOCKUP CHE NELL'APP NON ESISTONO.

   Il travaso aveva tolto il blocco :root dell'artifact dando per scontato che
   tutti quei nomi arrivassero da base.css. Quattro non ci arrivano:
   `--r` / `--r-lg` (nell'app si chiamano --radius / --radius-lg) e
   `--ok` / `--warn` (--accent2 / --accent3). Una `var()` che non risolve non
   e' un colore piu' brutto: e' una dichiarazione INVALIDA, che sparisce. Cosi'
   sono spariti l'arrotondamento degli angoli di tessere, riquadri, pillole e
   tabelle (11 usi di var(--r)) e il verde/ambra di stati, KPI e stanghette
   (15 fra var(--ok) e var(--warn)) — e dove mancava il colore restava quello
   ereditato, cioe' testo scuro su fondo scuro: "non si legge na ceppa".

   Si rimettono qui, come ALIAS dei token veri e solo dentro la sezione: il
   foglio resta il travaso verbatim del mockup, l'app resta con i suoi nomi.
   ------------------------------------------------------------------ */
#view-reconciliation {
  --r: var(--radius);
  --r-lg: var(--radius-lg);
  --ok: var(--accent2);
  --warn: var(--accent3);
}

/* ------------------------------------------------------------------
   REGOLE GENERICHE (table, th, td, h1-h4): SPECIFICITA' AZZERATA con
   :where(). Nel mockup erano selettori nudi -- `th {}` pesa (0,0,1) -- e
   qualunque regola a classe li batteva, comprese le `.reconcil-tbl th` e
   `.reconcil-cmp-tbl td` di components.css. Prefissandole con
   #view-reconciliation il travaso le aveva portate a (1,0,1), cioe' sopra
   ogni classe: alla tabella delle discrepanze e alle tabelle di confronto del
   dettaglio riga arrivavano padding 9/11px, vertical-align:top, intestazioni
   mono maiuscole da 10px e `width:100%` al posto dei loro.
   `:where(#view-reconciliation)` tiene la sezione ma NON pesa; l'elemento
   pesa quanto pesava nel mockup (`th` = 0,0,1). Le regole
   restano confinate qui dentro e tornano a perdere contro le classi, come nel
   mockup. Fanno ancora premio su base.css perche' questo foglio si carica
   dopo, a parita' di peso.
   ------------------------------------------------------------------ */
:where(#view-reconciliation) :is(h1, h2, h3, h4) {text-wrap:balance;
  font-weight:600;line-height:1.25
}

/* Dal reset del mockup: `button{font:inherit;color:inherit;border:0;
   background:none;cursor:pointer}`. Nell'app quel reset non c'e': base.css
   eredita font-family e font-size, ma NON il colore, e un <button> senza
   `color` prende quello di sistema — testo scuro su fondo scuro.
   L'elenco vale SOLO per i bottoni del mockup: un
   `#view-reconciliation button` generico batterebbe per specificita' le
   classi .reconcil-* di components.css, che non sono prefissate, e le
   spegnerebbe tutte. Sta qui in cima, come nel mockup, cosi' le regole vere
   piu' sotto (sfondo, bordo, corpo del testo) lo sovrascrivono.
   02/09/2026 — aggiunte .mcard e .btn: sono <button> anche loro, e uscivano
   con la scritta illeggibile. */
#view-reconciliation .crumb button,
#view-reconciliation .mcard,
#view-reconciliation .btn,
#view-reconciliation .step,
#view-reconciliation .subrow,
#view-reconciliation .vs {font:inherit;color:inherit;border:0;background:none;
  cursor:pointer
}

#view-reconciliation .mono {font-family:var(--mono);font-variant-numeric:tabular-nums
}

#view-reconciliation .crumb {display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap
}

#view-reconciliation .crumb button {color:var(--accent)
}

#view-reconciliation .crumb button:hover {text-decoration:underline
}

#view-reconciliation .crumb .sep {color:#334
}

#view-reconciliation .crumb .cur {color:var(--text);font-weight:600
}

/* ── Titoli di schermata ───────────────────────────────────────────────── */
#view-reconciliation .eyebrow {font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}

#view-reconciliation .screen-h {display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:4px 0 18px
}

#view-reconciliation .screen-h h2 {font-size:22px
}

#view-reconciliation .screen-h .sub {color:var(--muted);font-size:13px;margin-left:auto
}

/* ── Anno / mesi ───────────────────────────────────────────────────────── */
#view-reconciliation .yearbar {display:flex;align-items:center;gap:6px;margin-bottom:16px
}

#view-reconciliation .ychip {padding:5px 13px;border:1px solid var(--border);border-radius:99px;font-family:var(--mono);
  font-size:12px;color:var(--muted);background:#0E1421
}

#view-reconciliation .ychip[aria-pressed="true"] {color:var(--text);border-color:var(--accent);background:#12213d
}

#view-reconciliation .months {display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px
}

#view-reconciliation .mcard {position:relative;text-align:left;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r);padding:13px 14px 12px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .15s,transform .15s
}

#view-reconciliation .mcard::before {content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--st,#2a3550)
}

#view-reconciliation .mcard:hover {border-color:#3a4a78;transform:translateY(-1px)
}

#view-reconciliation .mcard.empty {background:#111726;border-style:dashed;opacity:.72
}

#view-reconciliation .mcard .mname {font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px
}

#view-reconciliation .mcard .mstate {font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--st,#8b98b8)
}

#view-reconciliation .mcard .mtot {font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums
}

#view-reconciliation .mcard .mmeta {font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap
}

#view-reconciliation .carriers {display:flex;gap:4px;flex-wrap:wrap
}

#view-reconciliation .cc {font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;padding:2px 6px;border-radius:3px;
  background:#0E1421;border:1px solid var(--border);color:#9fb0d0
}


#view-reconciliation .open-pill {font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:99px;
  background:#3a2a10;color:var(--warn);border:1px solid #614617
}

#view-reconciliation .done-pill {font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:99px;
  background:#0f2b23;color:var(--ok);border:1px solid #17513f
}

/* ── Wizard ────────────────────────────────────────────────────────────── */
#view-reconciliation .wiz {display:grid;grid-template-columns:216px minmax(0,1fr);gap:18px;align-items:start
}

@media(max-width:780px) {
  #view-reconciliation .wiz {grid-template-columns:1fr
  }
}

#view-reconciliation .rail {display:flex;flex-direction:column;gap:2px;position:sticky;top:12px
}

#view-reconciliation .step {display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;text-align:left;
  padding:9px 10px;border-radius:var(--r);border:1px solid transparent
}

#view-reconciliation .step:hover {background:#161e30
}

#view-reconciliation .step[aria-current="true"] {background:#12213d;border-color:#2c4676
}

#view-reconciliation .step .k {width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-size:11px;border:1px solid var(--border);background:#0E1421;color:var(--muted)
}

#view-reconciliation .step.done .k {background:#0f2b23;border-color:#17513f;color:var(--ok)
}

#view-reconciliation .step.open .k {background:#3a2a10;border-color:#614617;color:var(--warn)
}

#view-reconciliation .step[aria-current="true"] .k {border-color:var(--accent);color:var(--accent)
}

#view-reconciliation .step .lbl {font-size:13px;font-weight:500;line-height:1.3
}

#view-reconciliation .step .hint {font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;display:block
}

#view-reconciliation .progress {margin:14px 0 0;padding:12px 11px;border:1px solid var(--border);border-radius:var(--r);background:#0E1421
}

#view-reconciliation .progress .plabel {display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:7px
}

#view-reconciliation .bar {height:5px;border-radius:99px;background:#1b2338;overflow:hidden
}

#view-reconciliation .bar i {display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--teal))
}

#view-reconciliation .panel {background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px
}

#view-reconciliation .panel h3 {font-size:17px;margin-bottom:4px
}

#view-reconciliation .panel .lead {color:var(--muted);font-size:13px;margin-bottom:16px;max-width:64ch
}

/* ── Elementi comuni ───────────────────────────────────────────────────── */
#view-reconciliation .filerow {display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--r);background:#0E1421;margin-bottom:8px
}

#view-reconciliation .filerow .ic {font-size:16px
}

#view-reconciliation .filerow .n {font-size:13px;font-weight:500
}

#view-reconciliation .filerow .m {font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;display:block
}

#view-reconciliation .check {font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:99px;white-space:nowrap
}

#view-reconciliation .check.ok {background:#0f2b23;color:var(--ok);border:1px solid #17513f
}

#view-reconciliation .check.info {background:#0f1a2e;color:#7dabff;border:1px solid #2c4676
}

#view-reconciliation .check.warn {background:#3a2a10;color:var(--warn);border:1px solid #614617
}

#view-reconciliation .check.bad {background:#3a1414;color:#fca5a5;border:1px solid #6b1f1f
}

#view-reconciliation .alert {border-radius:var(--r);padding:13px 14px;margin:12px 0;font-size:13px;display:flex;gap:11px;align-items:flex-start
}

#view-reconciliation .alert.warn {background:#241a08;border:1px solid #614617;border-left:3px solid var(--warn)
}

#view-reconciliation .alert.bad {background:#2a1010;border:1px solid #6b1f1f;border-left:3px solid var(--danger)
}

#view-reconciliation .alert.info {background:#0f1a2e;border:1px solid #2c4676;border-left:3px solid var(--accent)
}

#view-reconciliation .alert.lock {background:#0c1c19;border:1px solid #17513f;border-left:3px solid var(--ok)
}

#view-reconciliation .alert b {display:block;margin-bottom:3px
}

#view-reconciliation .alert .acts {display:flex;gap:8px;margin-top:10px;flex-wrap:wrap
}

/* ------------------------------------------------------------------
   I BOTTONI SONO QUELLI DELLA PIATTAFORMA, NON QUELLI DEL MOCKUP.

   Unico punto in cui l'app vince sull'artifact, e lo ha deciso l'utente
   (02/09/2026): i rettangoli blu piatti del mockup (#1d4ed8, bordo #2563eb)
   stonavano con il resto dell'applicazione. Qui `.btn` e `.btn.pri` prendono
   le stesse dichiarazioni di `.btn-ghost` e `.btn-solid` di components.css,
   cosi' i comandi della Fatturazione sono identici a quelli di ogni altra
   sezione. Il markup non cambia (resta class="btn" / "btn pri" / "btn
   ghost"): le classi del mockup restano il vocabolario, il vestito e' quello
   di casa.
   ------------------------------------------------------------------ */
#view-reconciliation .btn {background:transparent;color:var(--muted);
  border:1px solid var(--border);padding:.4rem .85rem;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:500;transition:all .15s
}

#view-reconciliation .btn:hover {border-color:var(--accent);color:var(--accent)
}

#view-reconciliation .btn.pri {background:var(--accent);color:#fff;
  border:1px solid transparent;padding:.45rem .9rem;font-weight:600;
  transition:filter .15s
}

#view-reconciliation .btn.pri:hover {filter:brightness(1.1);color:#fff;
  border-color:transparent
}

#view-reconciliation .btn:disabled {opacity:.45;cursor:not-allowed
}

#view-reconciliation .btn:disabled:hover {border-color:var(--border);
  color:var(--muted);filter:none
}

#view-reconciliation .btn.pri:disabled:hover {background:var(--accent);
  border-color:transparent;color:#fff
}

#view-reconciliation .btn.ghost {background:transparent
}

#view-reconciliation .tblwrap {overflow-x:visible;border:1px solid var(--border);border-radius:var(--r);background:#0E1421
}

:where(#view-reconciliation) table {border-collapse:collapse;
  width:100%;font-size:12.5px
}

:where(#view-reconciliation) th {text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:9px 11px;border-bottom:1px solid var(--border);white-space:nowrap;font-weight:400
}

:where(#view-reconciliation) td {padding:9px 11px;
  border-bottom:1px solid #1b2338;vertical-align:top
}

:where(#view-reconciliation) tr:last-child td {border-bottom:0
}

:where(#view-reconciliation) td.n {font-family:var(--mono);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap
}

#view-reconciliation .pos {color:var(--danger)
}

#view-reconciliation .neg {color:var(--ok)
}

#view-reconciliation .stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin-bottom:16px
}

#view-reconciliation .stat {background:#0E1421;border:1px solid var(--border);border-radius:var(--r);padding:11px 12px
}

#view-reconciliation .stat .v {font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums
}

#view-reconciliation .stat .l {font-size:11px;color:var(--muted);margin-top:2px
}

#view-reconciliation .stat.good .v {color:var(--ok)
}

#view-reconciliation .stat.warn .v {color:var(--warn)
}

#view-reconciliation .stat.bad .v {color:var(--danger)
}

#view-reconciliation .sublist {display:flex;flex-direction:column;gap:7px
}

#view-reconciliation .subrow {display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--r);background:#0E1421
}

#view-reconciliation .subrow.hot {border-color:#2c4676;background:#0f1a2e
}

#view-reconciliation .subrow .t {font-size:13px;font-weight:500
}

#view-reconciliation .subrow .d {font-size:11.5px;color:var(--muted);margin-top:2px
}

/* ------------------------------------------------------------------
   LE FINESTRE DEI DUBBI (passo 3). Non vengono dal mockup: li' la riga
   aveva un tasto "Apri" che portava in un'altra linguetta, e l'utente ha
   chiesto l'opposto — la riga si apre su se stessa e mostra sotto le sue
   spedizioni, senza uscire dal passo. La riga e' un <button> (si apre da
   tastiera): le serve larghezza piena e testo a sinistra, che un bottone
   non ha di suo.
   ------------------------------------------------------------------ */
#view-reconciliation .subrow {width:100%;text-align:left
}

#view-reconciliation .subrow .caret {font-family:var(--mono);color:var(--muted)
}

#view-reconciliation .subrow[aria-expanded="true"] {border-color:#2c4676;
  border-bottom-left-radius:0;border-bottom-right-radius:0
}

#view-reconciliation .subpanel {border:1px solid #2c4676;border-top:0;
  border-radius:0 0 var(--r) var(--r);background:#0E1421;padding:2px 12px 12px;
  margin-top:-7px
}

#view-reconciliation .note {font-size:12px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--border)
}

#view-reconciliation .note code {font-family:var(--mono);font-size:11.5px;color:#9fb0d0
}

#view-reconciliation .navrow {display:flex;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap
}

#view-reconciliation .navrow .sp {margin-left:auto
}

#view-reconciliation .hidden {display:none!important
}

#view-reconciliation .rtc-lbl { font-size: .72rem; color: var(--text-dim);
}

#view-reconciliation .rtc-val { font-size: .95rem; font-weight: 700;
}

#view-reconciliation .delta-ok { color: var(--accent2, #10B981);
}

#view-reconciliation .mutlbl { color: var(--muted, #94A3B8);
}

#view-reconciliation .mono { font-family: var(--mono, 'Space Mono', monospace);
}

#view-reconciliation #discroot {margin-top:14px
}

#view-reconciliation #discroot table {border-collapse:collapse
}

#view-reconciliation #discroot input[type=number] {background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:4px;padding:.15rem .3rem
}

/* ── Passo 5: interruttore fra le due viste del mese ───────────────────── */
#view-reconciliation .viewswitch {display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:99px;
  background:#0E1421;margin-bottom:14px
}

#view-reconciliation .viewswitch .vs {padding:5px 15px;border-radius:99px;font-size:12.5px;color:var(--muted);
  border:1px solid transparent;white-space:nowrap
}

#view-reconciliation .viewswitch .vs:hover {color:var(--text)
}

#view-reconciliation .viewswitch .vs.on {background:#12213d;border-color:#2c4676;color:var(--text);font-weight:600
}

#view-reconciliation .viewswitch .vs .n {font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:5px
}

#view-reconciliation .viewswitch .vs.on .n {color:#7dabff
}

/* selezione clienti: pallino che si accende, non una casella quadrata */
#view-reconciliation .cli-tbl td.cli-act,
#view-reconciliation .cli-tbl th.cli-act {text-align:center;width:42px
}

#view-reconciliation .cli-chk {appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  border:1.5px solid #35446e;background:#0E1421;cursor:pointer;position:relative;
  vertical-align:middle;margin:0;transition:box-shadow .15s,background .15s,border-color .15s
}

#view-reconciliation .cli-chk:hover {border-color:var(--accent)
}

#view-reconciliation .cli-chk:checked {background:var(--accent);border-color:#7dabff;
  box-shadow:0 0 0 3px rgba(59,130,246,.20),0 0 12px 2px rgba(59,130,246,.55)
}

#view-reconciliation .cli-chk:checked::after {content:"";position:absolute;inset:4.5px;border-radius:50%;background:#fff
}

#view-reconciliation .cli-chk:indeterminate {background:#12213d;border-color:#7dabff;box-shadow:0 0 0 3px rgba(59,130,246,.14)
}

#view-reconciliation .cli-chk:indeterminate::after {content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;
  border-radius:2px;background:#7dabff
}

#view-reconciliation .cli-tbl tr.sel td {background:rgba(59,130,246,.07)
}

/* prezzo al cliente scritto a mano (dettaglio spedizione) */
#view-reconciliation .manual-price {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap
}

#view-reconciliation .manual-price input {width:7rem;text-align:right
}

#view-reconciliation .manual-price .rst {font-size:.8rem;color:var(--accent);background:none;border:0;cursor:pointer;
  text-decoration:underline
}
/* 3.96.0 — il tasto adesso esiste sempre e si nasconde con `hidden` invece di
   essere creato dentro un if (index.js::_detTotale). Oggi funzionerebbe anche
   senza questa riga, perche' la regola qui sopra non tocca `display` e quella
   del browser per [hidden] vale: e' scritta perche' il giorno che qualcuno
   aggiungesse un `display:inline-block` li' sopra, il tasto resterebbe visibile
   sempre — e sarebbe un difetto invisibile a chi fa la modifica. */
#view-reconciliation .manual-price .rst[hidden] {display:none}

/* ── 3.96.0 — riga confermata in sola lettura ─────────────────────────────
   Le righe della sezione «Confermate» nascono bloccate: il dettaglio si apre
   e si legge, ma non si tocca finche' non si gira il lucchetto nella colonna
   delle azioni.
   Il blocco vero lo fa l'attributo `inert`, messo da index.js: toglie clic
   E messa a fuoco da tastiera, ed e' la sola cosa che copra tutti e due —
   `pointer-events:none` da solo lascia passare il Tab, e un pannello che si
   raggiunge col Tab non e' bloccato. Qui resta come rete di sicurezza per i
   browser senza `inert`, piu' il grigio che si vede.
   ⚠ E' una guardia contro lo scivolone di mano, NON un permesso: il server
   accetta la PATCH lo stesso. Farne un permesso vero vuol dire persistere un
   flag sulla riga, cioe' toccare il modello dati. */
#view-reconciliation .reconcil-det-lock {
  display:flex; gap:.5rem; align-items:center;
  margin:0 0 .6rem; padding:.5rem .7rem; border-radius:8px;
  background:rgba(78,168,255,.08); border:1px solid rgba(78,168,255,.3);
  color:var(--text); font-size:.82rem;
}
#view-reconciliation .reconcil-det-bloccato {
  pointer-events:none; opacity:.72; filter:saturate(.7);
}

/* ── KPI: sempre a vista, dentro il mese e sull'anno ───────────────────── */
#view-reconciliation .kpibar,
#view-reconciliation .ykpi {display:grid;gap:9px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))
}

#view-reconciliation .kpi {background:#0E1421;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;
  position:relative;overflow:hidden
}

#view-reconciliation .kpi::before {content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;
  background:var(--kc,#2a3550)
}

#view-reconciliation .kpi .kl {font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px
}

#view-reconciliation .kpi .kv {font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums;margin-top:3px;
  line-height:1.2
}

#view-reconciliation .kpi .ks {font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px
}

#view-reconciliation .kpi.up .kv {color:var(--ok)
}

#view-reconciliation .kpi.warn .kv {color:var(--warn)
}

#view-reconciliation .kpi.bad .kv {color:var(--danger)
}

#view-reconciliation .kpi .moved {color:var(--accent);font-family:var(--mono);font-size:10px;margin-left:4px
}

/* La riga TOTALE non e' piu' solo delle tabelle per cliente: ce l'ha anche
   l'elenco delle fatture del passo 2, che non e' una .cli-tbl (14 colonne e
   larghezza minima non c'entrano niente con quattro colonne). */
#view-reconciliation tr.tot td {border-top:1px solid var(--border);font-weight:600;background:#0c1220
}

#view-reconciliation tr.tot td:first-child {color:var(--muted);font-weight:400
}

#view-reconciliation .cli-open {font-family:var(--mono);color:var(--warn)
}

#view-reconciliation .cli-zero {font-family:var(--mono);color:var(--muted)
}

#view-reconciliation .closedbar {display:flex;gap:11px;align-items:flex-start;background:#0c1c19;border:1px solid #17513f;
  border-left:3px solid var(--ok);border-radius:var(--r);padding:13px 14px;margin:12px 0;font-size:13px
}

#view-reconciliation .closedbar b {display:block;margin-bottom:3px
}

#view-reconciliation .closedbar .acts {display:flex;gap:8px;margin-top:10px;flex-wrap:wrap
}

/* ============================================================
   Le tabelle stanno DENTRO il pannello.

   (1) LE 13 COLONNE DELLE DISCREPANZE. Blocco "#discroot .reconcil-tbl"
   copiato dal <style> dell'artifact: larghezze in percentuale su un
   <colgroup>, testo che va a capo, celle piu' strette. Nel travaso era
   stato scartato perche' l'app non emetteva il colgroup — adesso
   _buildMatchedTable lo emette con le stesse classi (c-chk, c-trk, c-cor,
   c-cli, c-dat, c-des, c-eur, c-ano, c-azi). Colonne, titoli, ordine e
   comportamenti restano quelli di oggi: qui si toccano solo le larghezze.

   Una riga dell'artifact NON e' stata portata: quella che toglieva anche il
   limite di ALTEZZA (`overflow:visible;max-height:none`). Serviva li' perche'
   il mockup aveva 12 righe finte; con 7.770 righe vere il tetto verticale
   serve, ed e' il punto (2).

   (2) GLI ELENCHI LUNGHI scorrono dentro il loro contenitore, cosi' i comandi
   che stanno sotto restano sempre a vista. Il tetto e' in `em` (segue la
   densita' scelta dall'utente in Impostazioni) e in `vh` (segue la finestra):
   nessuna altezza fissa in pixel. Il comando "Mostra tutto" aggiunge
   .reconcil-tbl-flat, che il tetto lo toglie e lascia scorrere la pagina.
   ============================================================ */

#view-reconciliation #discroot .reconcil-tbl {table-layout:fixed;width:100%;
  min-width:0;font-size:12px
}
#view-reconciliation #discroot .reconcil-tbl th {font-size:.62rem;line-height:1.25;
  padding:.35rem .3rem;white-space:normal;word-break:normal;vertical-align:bottom
}
#view-reconciliation #discroot .reconcil-tbl td {padding:.4rem .3rem;
  white-space:normal;overflow-wrap:anywhere;vertical-align:top
}
#view-reconciliation #discroot .reconcil-tbl td.mono {font-size:.68rem;line-height:1.3
}
#view-reconciliation #discroot .reconcil-tbl td.small {font-size:.72rem
}
#view-reconciliation #discroot .reconcil-tbl td.num {font-size:.75rem
}
#view-reconciliation #discroot .reconcil-tbl col.c-chk {width:26px
}
#view-reconciliation #discroot .reconcil-tbl col.c-trk {width:9%
}
#view-reconciliation #discroot .reconcil-tbl col.c-cor {width:5%
}
#view-reconciliation #discroot .reconcil-tbl col.c-cli {width:8.5%
}
#view-reconciliation #discroot .reconcil-tbl col.c-dat {width:6.5%
}
#view-reconciliation #discroot .reconcil-tbl col.c-des {width:9%
}
#view-reconciliation #discroot .reconcil-tbl col.c-eur {width:6.6%
}
#view-reconciliation #discroot .reconcil-tbl col.c-ano {width:10.5%
}
#view-reconciliation #discroot .reconcil-tbl col.c-azi {width:88px
}
#view-reconciliation #discroot .reconcil-anomalia-badge {white-space:normal;
  text-align:left;line-height:1.25;padding:.2rem .45rem;font-size:.7rem;
  display:inline-block
}
#view-reconciliation #discroot .reconcil-row-ico {padding:.1rem .18rem;font-size:.85rem
}
#view-reconciliation #discroot .reconcil-actions-cell {white-space:nowrap !important;
  padding-left:0;padding-right:0
}
#view-reconciliation #discroot .reconcil-det-grid {grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}
#view-reconciliation #discroot .reconcil-detail {overflow-wrap:anywhere
}
#view-reconciliation #discroot .reconcil-det-info {font-size:.86em
}
#view-reconciliation #discroot .reconcil-totals-bar {flex-wrap:wrap
}
#view-reconciliation #discroot .reconcil-subtabs {flex-wrap:wrap;gap:.4rem;align-items:center
}
#view-reconciliation #discroot .reconcil-det-footer {flex-wrap:wrap
}
#view-reconciliation #discroot .reconcil-legend {overflow-wrap:anywhere
}

/* (2) il tetto degli elenchi lunghi, e il comando che lo toglie */
#view-reconciliation .reconcil-tbl-wrap,
#view-reconciliation .tblwrap {max-height:min(62vh,44em);overflow-y:auto
}
#view-reconciliation .reconcil-tbl-wrap.reconcil-tbl-flat,
#view-reconciliation .tblwrap.reconcil-tbl-flat {max-height:none;overflow-y:visible
}

/* ------------------------------------------------------------------
   PASSO 5 — le due tabelle restano quelle di rates (14 colonne per cliente,
   una riga per fattura per corriere): scelta dell'utente, non si tolgono
   colonne. Il problema di larghezza si risolve col solo layout.

   .tblwrap nel mockup era `overflow-x:visible` perche' li' le tabelle erano
   strette (9 colonne). Con 14 colonne quel `visible` fa scorrere di lato la
   PAGINA INTERA e i comandi finiscono fuori schermo: qui lo scorrimento
   orizzontale sta DENTRO il contenitore, e la larghezza minima della tabella
   e' in `em` cosi' segue la densita' scelta dall'utente invece di schiacciare
   le colonne fino a spezzare le parole.
   ------------------------------------------------------------------ */
#view-reconciliation .tblwrap {overflow-x:auto
}
#view-reconciliation .tblwrap .cli-tbl {min-width:64em
}
#view-reconciliation .tblwrap .cli-tbl td,
#view-reconciliation .tblwrap .cli-tbl th {white-space:nowrap
}

/* La tessera vuota accetta il rilascio dei file: mentre ci passi sopra col
   trascinamento deve dirlo, come fa la zona di caricamento del passo 1.
   Non viene dal mockup — li' la tessera non riceveva niente. */
#view-reconciliation .mcard.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ------------------------------------------------------------------
   LE RICHIESTE DELL'UTENTE DEL 02/09/2026.

   Le regole della barra di ricerca (.reconcil-search-*) stanno in
   components.css: sono della meccanica, non del mockup, e li' restano. Qui si
   riveste la barra per la SOLA sezione Fatturazione, che e' l'unico posto in
   cui si vede; questo foglio si carica dopo components.css e il prefisso
   #view-reconciliation aggiunge un id, quindi vince senza !important.
   ------------------------------------------------------------------ */

/* Piu' respiro sopra e sotto: la barra non e' piu' incollata al titolo del
   mese ne' a quello che viene dopo. Spaziature dai token di base.css, non a
   pixel: seguono la densita' scelta dall'utente. */
#view-reconciliation .reconcil-search-block {margin:var(--pad-xl) 0
}

/* Forma ad ASOLA, non rettangolo. */
#view-reconciliation .reconcil-search-field {border-radius:999px
}

/* Tolta la lente, il segnaposto partirebbe attaccato al bordo: il respiro
   orizzontale se lo prende l'input. Il grigio opaco del testo segnaposto non
   si tocca, e' quello di components.css. */
#view-reconciliation .reconcil-search-input {padding:var(--pad-sm) var(--pad-lg)
}

/* La X che toglie una fattura dalla sessione (passo 1) e il comando di
   eliminazione multipla: ROSSI gia' da fermi — e' quello che fanno, si deve
   vedere prima di cliccare — e accesi quando ci passi sopra.
   `:not(:disabled)` serve perche' a mese chiuso il fieldset di sola lettura
   li disabilita, e un tasto morto non deve illuminarsi. */
#view-reconciliation .btn.del {color:var(--danger)
}

#view-reconciliation .btn.del:not(:disabled):hover {border-color:var(--danger);
  color:#fca5a5;box-shadow:0 0 0 3px rgba(239,68,68,.16)
}

/* Tabella delle fatture del passo 2: le due colonne numeriche vanno centrate
   con la loro intestazione. Prima le celle stavano a destra (regola .n) e i
   titoli a sinistra come gli altri th: sembravano due colonne diverse.
   Classe propria, cosi' le tabelle della meccanica restano intatte. */
#view-reconciliation .tbl-fatture th.n,
#view-reconciliation .tbl-fatture td.n {
  text-align: center;
}