:root{
  --ink:#101B24;
  --paper:#EDF0EE;
  --surface:#FFFFFF;
  --line:#D6DCD8;
  --line-soft:#E7EBE8;
  --muted:#6B7A82;
  --chf:#B23A2E;
  --eur:#1E5F8C;
  --usd:#2C7A5B;
  --pos:#2C7A5B;
  --warn:#A2691C;
  --radius:3px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 80px}
/* Larghezza della pagina scelta dalla persona (app.js: applyFrameWidth(),
   salvata in users.ui_prefs._frame): «compatta» è il default storico. */
.wrap[data-width="wide"]{max-width:1500px}
.wrap[data-width="full"]{max-width:none}
h1,h2,h3{margin:0;font-weight:600}
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.masthead h1{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.2px}
.masthead .sub{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:4px}
.masthead .count{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* nav */
nav{display:flex;gap:2px;margin-bottom:18px;flex-wrap:wrap}
nav button{
  font:inherit;font-size:12px;letter-spacing:.02em;padding:7px 14px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius);color:var(--muted);
}
nav button:hover{color:var(--ink);background:#E3E7E4}
nav button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
nav button:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--eur);outline-offset:1px}

/* sotto-navigazione: Impostazioni e Log, ciascuno con le proprie sotto-schede */
.subnav{display:flex;gap:2px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subnav button{
  font:inherit;font-size:11px;letter-spacing:.02em;padding:5px 12px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius);color:var(--muted);
}
.subnav button:hover{color:var(--ink);background:#E3E7E4}
.subnav button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* month rail — signature */
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}
.rail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rail-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.rail-track{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.mchip{
  flex:0 0 auto;min-width:62px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius);padding:6px 8px 5px;cursor:pointer;text-align:left;font:inherit;
  display:flex;flex-direction:column;gap:5px;
}
.mchip:hover{border-color:var(--muted)}
.mchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.mchip[aria-pressed="true"] .mchip-k,.mchip[aria-pressed="true"] .mchip-v{color:var(--paper)}
.mchip[aria-pressed="true"] .spark i{background:#8FA3AE}
.mchip-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.mchip-v{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;height:16px;gap:1px}
.spark i{display:block;width:100%;background:#C3CBC6;min-height:1px}

/* controls */
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:4px}
.rate-fields{display:flex;gap:14px;align-items:flex-end}
.field label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
select,input[type=text],input[type=number]{
  font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);min-width:120px;
}
.check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding-bottom:5px;cursor:pointer}
.check input{accent-color:var(--ink)}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.kpi{background:var(--surface);padding:14px 16px}
.kpi .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.kpi .v{font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.4px}
.kpi .n{font-size:11px;color:var(--muted);margin-top:2px}
.neg{color:var(--chf)}.pos{color:var(--pos)}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-head h2{font-family:var(--serif);font-size:17px;font-weight:500}
.panel-head .hint{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.panel-body{padding:6px 0}
.pad{padding:16px}

/* category ledger */
.cat-row{position:relative;display:grid;grid-template-columns:1fr auto auto auto 22px;gap:10px;align-items:center;
  padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.cat-row:last-child{border-bottom:none}
.cat-row .bar{position:absolute;left:0;top:0;bottom:0;background:#EAEEEB;z-index:0}
.cat-row>*{position:relative;z-index:1}
.cat-row:hover .bar{background:#E1E7E3}
.cat-name{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.cat-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-amt{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.cat-pct{font-family:var(--mono);font-size:11px;color:var(--muted);width:46px;text-align:right}
.cat-n{font-family:var(--mono);font-size:11px;color:var(--muted);width:34px;text-align:right}
.drill{background:#F7F9F8;border-bottom:1px solid var(--line-soft);padding:4px 16px 10px 33px}
.drill div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:12px;color:#3B4B54}
.drill .m{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.seg button{font:inherit;font-size:11px;padding:4px 11px;border:none;background:var(--surface);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cat-row.macro .cat-name{font-weight:600}
.cat-row.sub{padding-left:38px;background:#FAFBFA}
.cat-row.sub .bar{background:#EDF1EE}
.cat-row.sub .cat-name{font-size:12px;color:#3B4B54}
.cat-row.sub .cat-amt{font-size:12px}
.chev{font-family:var(--mono);font-size:9px;color:var(--muted);width:9px;flex:0 0 auto}
.grp-head{display:flex;gap:8px;align-items:center;padding:10px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.grp-head input{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);margin:0 6px 6px 0}
.pill .n{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pill.shared{border-color:#BFDCCB;background:#F3FAF6}
.shared-toggle{padding:0;margin-left:2px;gap:4px}
.shared-toggle input{accent-color:var(--pos)}
.split-tbl input[type=number]{width:74px;min-width:0;text-align:right;font-family:var(--mono);font-size:12px;padding:3px 6px}
.split-tbl td{white-space:nowrap}
.inherit input[type=number]{color:var(--muted);background:#FAFBFA}
.sum-ok{color:var(--pos)}
.sum-warn{color:var(--chf)}
.subj{display:grid;grid-template-columns:16px 1fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.subj input[type=text]{width:100%}
.swatch{width:12px;height:12px;border-radius:3px}
.subj-link{display:flex;align-items:center;gap:8px}
.badge.subj-unlinked{color:var(--warn);border-color:#EBD9BC;margin-left:6px}
.badge.orphan{color:var(--warn);border-color:#EBD9BC;margin-left:6px}
/* Verifica AC per riga (docs/AC-SYNC-DESIGN.md, decisione 4): confermato resta
   discreto (lo stato normale), differisce/mancante richiamano l'attenzione
   come .orphan sopra. */
.badge.verify-confirmed{color:var(--pos);border-color:#BFDCCB;margin-left:6px}
.badge.verify-differs{color:var(--chf);border-color:#E8C6C2;margin-left:6px}
.badge.verify-missing{color:var(--warn);border-color:#EBD9BC;margin-left:6px}
/* Righe del registro invii email (app/static/js/email_admin.js) — stessa
   tavolozza delle tre righe sopra: in sospeso=warn, inviata=pos, fallita=chf. */
.badge.mail-pending{color:var(--warn);border-color:#EBD9BC}
.badge.mail-sent{color:var(--pos);border-color:#BFDCCB}
.badge.mail-failed{color:var(--chf);border-color:#E8C6C2}
tr.mail-row-failed{background:#FBF3F2}
.iv-rows{margin:0 0 8px;padding-left:18px;font-size:12px;color:var(--ink);max-height:160px;overflow-y:auto}
.iv-rows li{padding:2px 0}
.iv-rows li.muted{color:var(--muted)}
.kpi .bar-mini{height:3px;background:var(--line-soft);margin-top:8px;border-radius:2px;overflow:hidden}
.kpi .bar-mini i{display:block;height:100%}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:7px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:hover{background:#F7F9F8}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.conv-amount{display:block;font-size:10px;color:var(--muted);cursor:default}
/* Cambio per riga: il campo resta stretto e monospace come le cifre accanto;
   vuoto mostra in grigio il cambio generale (il placeholder), compilato
   mostra in nero quello della riga. */
.fx-cell{white-space:nowrap}
.fx-cell input{width:72px;font-family:var(--mono);font-size:11px;padding:2px 4px;text-align:right}
.fx-cell input::placeholder{color:var(--muted);opacity:.7}
.fx-cell .fx-static{font-family:var(--mono);font-size:11px}
.fx-cell .fx-static.global{color:var(--muted)}
.fx-mark{font-size:10px;color:var(--warn);margin-left:4px;cursor:default}
.scroll{overflow-x:auto}
.tag{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:2px;border:1px solid;letter-spacing:.04em}
.tag.chf{color:var(--chf);border-color:#E8C6C2}
.tag.eur{color:var(--eur);border-color:#BFD4E1}
.tag.usd{color:var(--usd);border-color:#BFDBCC}
.desc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td select{font-size:12px;padding:3px 5px;min-width:150px}
.internal td{opacity:.5}
/* Riga disattivata (creditore): stesso attenuamento di .user-card.off, ma
   per una riga di tabella invece che per una card. */
tr.off td{opacity:.55}
/* Scadenzario: mese già passato, stesso bordo d'accento di tr.private ma nel
   colore "scaduto" invece del giallo di avviso — la riga resta leggibile
   (niente opacity), solo segnalata. */
tr.sched-past>td:first-child{box-shadow:inset 2px 0 0 var(--chf)}
/* Scadenzario: righe delle rate di un mese espanso, stessa resa di
   .cat-row.sub (indentazione, sfondo e carattere più piccoli) portata sulla
   tabella. */
tr.sched-detail td{background:#FAFBFA;font-size:12px;color:#3B4B54}
tr.sched-detail td:first-child{padding-left:32px}
/* Barretta di quota in una cella di tabella — stessa idea di .kpi .bar-mini
   ma senza il vincolo del contenitore .kpi. */
.mini-bar{display:inline-block;width:60px;height:4px;background:var(--line-soft);
  border-radius:2px;overflow:hidden;vertical-align:middle}
.mini-bar i{display:block;height:100%;background:var(--muted)}
.badge.active{color:var(--pos);border-color:#BFDCCB}
.badge.inactive{color:var(--muted)}

/* trend chart */

/* buttons */
button.act{font:inherit;font-size:12px;padding:6px 12px;border:1px solid var(--ink);background:var(--ink);
  color:var(--paper);border-radius:var(--radius);cursor:pointer}
button.act:hover{background:#22323E}
button.ghost{font:inherit;font-size:12px;padding:6px 12px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);border-radius:var(--radius);cursor:pointer}
button.ghost:hover{border-color:var(--muted)}
button.danger{border-color:#E0C0BC;color:var(--chf);background:var(--surface)}
button.danger:hover{background:#FBF2F1}
button.mini{font:inherit;font-size:11px;padding:3px 8px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius);cursor:pointer;color:var(--muted)}
button.mini:hover{color:var(--chf);border-color:#E0C0BC}

/* drop zone */
.drop{border:1.5px dashed var(--line);border-radius:var(--radius);padding:34px 20px;text-align:center;
  background:#F7F9F8;cursor:pointer;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--eur);background:#EFF5F9}
.drop p{margin:0 0 4px;font-family:var(--serif);font-size:17px}
.drop small{color:var(--muted);font-size:12px}
.log{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;white-space:pre-wrap}

/* rules */
.rule{display:grid;grid-template-columns:104px 190px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.rule input,.rule select{width:100%;min-width:0}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty p{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 6px}
.note{font-size:12px;color:var(--muted);padding:0 16px 14px;line-height:1.5}
.banner{background:#FDF6EC;border:1px solid #EBD9BC;color:var(--warn);padding:9px 14px;border-radius:var(--radius);
  font-size:12px;margin-bottom:16px}
[hidden]{display:none !important}
@media(max-width:640px){
  .wrap{padding:20px 12px 60px}
  .masthead h1{font-size:24px}
  .cat-row{grid-template-columns:1fr auto auto 22px;gap:8px}
  .cat-n{display:none}
  .desc{max-width:140px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ============================================================
   Aggiunte della versione multiutente
   ============================================================ */

/* barra utente */
.userbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.userbar .who{text-align:right;line-height:1.3}
.userbar .who b{display:block;font-size:13px;font-weight:600}
.userbar .who span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.badge{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  padding:2px 7px;border:1px solid var(--line);border-radius:10px;color:var(--muted);white-space:nowrap}
.badge.admin{color:var(--chf);border-color:#E8C6C2}
.badge.user{color:var(--eur);border-color:#BFD4E1}
.badge.viewer{color:var(--muted)}
.badge.mine{color:var(--pos);border-color:#BFDCCB}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#toast div{background:var(--ink);color:var(--paper);font-size:13px;padding:9px 16px;border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(16,27,36,.22);max-width:min(560px,92vw)}
#toast div.err{background:var(--chf)}
#toast div.ok{background:var(--pos)}

/* proposta non bloccante «Avvisare i partner del pagamento?» (docs/PAYMENT-
   NOTIFICATION.md): sopra un eventuale modal ancora aperto dietro di lei
   (z-index 70) — a differenza del toast non è una notifica passiva, porta
   due azioni, quindi deve restare cliccabile anche con la scheda Debiti
   ancora sullo schermo. */
.notify-proposal{position:fixed;right:20px;bottom:26px;z-index:75;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(16,27,36,.28);padding:12px 14px;width:min(320px,84vw);
  display:flex;flex-direction:column;gap:10px}
.notify-proposal-text{font-size:13px;line-height:1.4}
.notify-proposal-actions{display:flex;gap:8px;justify-content:flex-end}

/* nota discreta «Partner già avvisati per questo pagamento», sotto «Pagato
   da» nella tabella delle rate — mai un toast, regola 3 del contratto. */
.notify-note{font-size:11px;color:var(--muted);margin-top:2px}

/* dialoghi */
.modal{position:fixed;inset:0;background:rgba(16,27,36,.45);display:flex;align-items:center;justify-content:center;
  z-index:70;padding:20px}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  width:min(560px,100%);max-height:88vh;overflow:auto}
.modal-card h2{font-family:var(--serif);font-size:19px;font-weight:500}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.modal-body{padding:16px 18px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line-soft)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.form-grid .field input,.form-grid .field select{width:100%}

/* tabella audit */
.audit-changes{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-word;max-width:340px}
.audit-act{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:1px 6px;border:1px solid var(--line);
  border-radius:2px;white-space:nowrap}
.audit-act.del{color:var(--chf);border-color:#E8C6C2}
.audit-act.new{color:var(--pos);border-color:#BFDCCB}
.audit-act.auth{color:var(--eur);border-color:#BFD4E1}

/* utenti */
.rights{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 16px;margin-top:10px}
.rights label{display:flex;align-items:center;gap:7px;font-size:12px;color:#3B4B54;cursor:pointer}
.user-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;background:var(--surface)}
.user-card .top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.user-card .who b{font-size:14px}
.user-card .who small{color:var(--muted);font-size:12px}
.user-card.off{opacity:.6}
.row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}

/* login */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  width:min(420px,92vw);padding:34px 32px;text-align:center}
.login-card h1{font-family:var(--serif);font-size:28px;font-weight:500;margin-bottom:4px}
.login-card .sub{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:26px}
.ms-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font:inherit;font-size:14px;
  padding:11px 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  cursor:pointer;color:var(--ink)}
.ms-btn:hover{border-color:var(--muted);background:#F7F9F8}
.ms-logo{width:18px;height:18px;flex:0 0 auto}
.login-note{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.5}
.login-err{background:#FBF2F1;border:1px solid #E8C6C2;color:var(--chf);font-size:12px;padding:9px 12px;
  border-radius:var(--radius);margin-bottom:18px}
.dev-form{display:flex;flex-direction:column;gap:10px;margin-top:14px;text-align:left}

/* rifiniture della vista movimenti e delle liste amministrative */
#txTable td:first-child{white-space:nowrap}
#txTable .row-actions button{padding:3px 7px}
/* La tabella dei movimenti deve stare nella finestra: ogni colonna ha un tetto
   e le azioni sono icone. Quello che non ci sta viene troncato con i puntini. */
#txTable .desc{max-width:210px}
#txTable .type{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:12px}
#txTable .date{white-space:nowrap;font-family:var(--mono);font-size:12px}
#txTable .grp-cell{color:var(--muted);font-size:12px;max-width:110px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#txTable td select{min-width:132px}
#txTable td,#txTable th{padding:6px 8px}
.user-card .who b{display:block}
.keyrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line-soft)}
.keyrow:last-child{border-bottom:none}
.keyrow .k{font-family:var(--mono);font-size:12px}


/* ============================================================
   Lingua e drill-down fino al movimento
   ============================================================ */

/* selettore della lingua */
.lang-picker{min-width:0;width:auto;font-size:12px;padding:3px 6px}
.login-lang{margin:0 auto 18px;display:block}

/* affordance del clic: righe, celle e barre che aprono i movimenti */
.clickable{cursor:pointer}
td.clickable:hover{background:#E7EDE9}
tr.clickable:hover{background:#F7F9F8}
/* Debiti saldati per intero (app.js: debitClosed()): verde chiaro, un tono
   più scuro al passaggio del mouse così il colore non sparisce sotto
   l'hover generico — stessa specificità, dichiarato dopo. */
tr.paid-off{background:#E6F4EA}
tr.paid-off.clickable:hover{background:#D9EEDF}
.kpi.clickable:hover{background:#F7F9F8}
.drill div.clickable:hover{color:var(--ink);text-decoration:underline}
.row-zoom{font:inherit;font-size:11px;line-height:1;color:var(--muted);background:transparent;
  border:1px solid transparent;border-radius:var(--radius);padding:2px 4px;cursor:pointer}
.row-zoom:hover{color:var(--ink);border-color:var(--line);background:var(--surface)}

/* finestra del drill-down */
.modal-card.wide{width:min(940px,100%);max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column}
.modal-card.wide>.modal-head,.modal-card.wide>.drill-meta,.modal-card.wide>.modal-foot{flex:0 0 auto}
/* Solo la tabella scorre: intestazione, conteggio e pulsanti restano a vista. */
.modal-card.wide>.modal-body{flex:1 1 auto;min-height:0;display:flex}
.modal-card.wide>.modal-body>.scroll{flex:1 1 auto;overflow:auto}
.modal-crumbs{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-top:4px}
.drill-meta{font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px 18px;
  border-bottom:1px solid var(--line-soft);background:#F7F9F8}
.modal-card.wide .modal-body{padding:0}
.modal-card.wide .modal-body .note{padding:18px}
.drill-tbl th{position:sticky;top:0;z-index:2}
.drill-tbl td{padding:6px 12px}
.drill-tbl .desc{max-width:260px}
.drill-tbl td select{min-width:170px}
.drill-hint{margin-right:auto;padding:0;text-align:left;max-width:420px}
@media(max-width:640px){
  .drill-tbl .desc{max-width:120px}
  .drill-hint{display:none}
}


/* movimenti privati */
button.mini.lock{padding:3px 6px;line-height:1;filter:grayscale(1);opacity:.55}
button.mini.lock:hover:not(:disabled){filter:none;opacity:1;border-color:var(--warn)}
button.mini.lock.on{filter:none;opacity:1;border-color:#EBD9BC;background:#FDF6EC}
button.mini.lock:disabled{cursor:default;opacity:.3}
.lock-mark{margin-right:5px;font-size:11px;filter:grayscale(1);opacity:.75}
tr.private>td:first-child{box-shadow:inset 2px 0 0 var(--warn)}


/* ============================================================
   Selezione multipla e azioni di gruppo
   ============================================================ */

/* la tabella scorre dentro di sé: i filtri e la barra restano a vista */
.tx-scroll{max-height:min(58vh,560px);overflow:auto}
.tx-scroll thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line)}

th.pick,td.pick{width:28px;padding-left:12px;padding-right:0}
td.pick input,th.pick input{accent-color:var(--ink);cursor:pointer;margin:0;display:block}
tr.picked{background:#EFF5F9}
tr.picked:hover{background:#E7EFF6}

button.mini.icon{padding:3px 7px;font-size:12px;line-height:1.2}

.bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#EFF5F9}
.bulk-count{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--eur);white-space:nowrap}
.bulk-bar select{min-width:170px}
@media(max-width:640px){
  .bulk-bar button{flex:1 1 auto}
  .tx-scroll{max-height:none}
}


/* ordine delle regole */
.rule-order{display:flex;align-items:center;gap:3px}
.rule-pos{font-family:var(--mono);font-size:11px;color:var(--muted);width:20px;text-align:right}
.rule-order button{padding:2px 5px;line-height:1}
.rule-order button:disabled{opacity:.25;cursor:default}
.rule-order button:disabled:hover{color:var(--muted);border-color:var(--line)}

/* intestazioni ordinabili */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sorted{color:var(--ink)}
.sort-arrow{margin-left:4px;font-size:9px}

/* casella di ricerca compatta delle tabelle dati (tableFilterInput) */
.tbl-filter{min-width:170px;font-size:12px;padding:4px 8px}

/* colonne ridimensionabili a trascinamento (sortableTable).
   La maniglia sta TUTTA dentro la propria cella: se sbordasse nella <th>
   accanto, quella la coprirebbe (stesso z-index, DOM successivo) e sotto le
   intestazioni sticky diventerebbe incliccabile. */
.col-grip{position:absolute;top:0;bottom:0;right:0;width:8px;cursor:col-resize;
  background:transparent;z-index:4}
.col-grip:hover{background:linear-gradient(to right,transparent 4px,var(--muted) 4px,var(--muted) 6px,transparent 6px)}
body.resizing{cursor:col-resize;user-select:none}
table.resized{table-layout:fixed}
table.resized td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* account legato al tenant */
.badge.m365{color:var(--eur);border-color:#BFD4E1;font-size:9px;padding:1px 5px}
.user-card .row-actions{flex-wrap:wrap}


/* ============================================================
   Conguaglio
   ============================================================ */

/* segno del rimborso quote nella tabella movimenti e nel drill-down: le
   righe sono già attenuate (internal=True), il segno le distingue solo dai
   giroconti veri. */
.settle-mark{margin-right:5px;font-size:11px;color:var(--eur)}

.settle-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px}
.settle-hint > div{flex:1 1 auto;min-width:220px}
.settle-subtitle{font-family:var(--serif);font-size:14px;font-weight:500;margin:18px 0 8px;padding:0 16px}
.settle-subtitle:first-child{margin-top:0}
.settle-suggestions{padding-top:0}
.settle-months-tools{padding:0 16px 8px}
.settle-owes{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.settle-owes:last-child{border-bottom:none}
/* Il soldo pagato da un account non collegato: un avviso, non una nota di
   servizio — senza di lui i totali del conguaglio non tornano e nessuno
   capisce perché. */
.settle-warn{background:#FDF6EC;border:1px solid #EBD9BC;color:var(--warn);
  padding:9px 14px;border-radius:var(--radius);margin:0 16px 14px}
tr.settle-unlinked{opacity:.55;font-style:italic}
.kpi.settle-unlinked{opacity:.55}


/* ============================================================
   Debiti
   ============================================================ */

/* pallino sulla scheda: quanti debiti sono ancora aperti (state.debits_open).
   Si ricrea a ogni render() perché I18N.apply() riscrive il textContent del
   bottone e lo butterebbe via. */
.nav-badge{display:inline-block;margin-left:6px;padding:0 5px;border-radius:8px;
  background:var(--chf);color:#fff;font-size:10px;line-height:15px;min-width:15px;
  text-align:center;font-family:var(--mono);vertical-align:1px}
nav button[aria-selected="true"] .nav-badge{background:var(--paper);color:var(--chf)}

/* Il dettaglio di un debito riusa la larghezza di modal-card.wide, ma impila
   più blocchi (KPI, allegato, rate) invece del solo .scroll che il drill-down
   presuppone: qui il corpo scorre come colonna, non come riga a un figlio. */
.modal-card.wide .modal-body.stack{display:flex;flex-direction:column;gap:16px;
  overflow-y:auto;padding:16px 18px}

/* Importo di una rata non collegata: campo, marcatore "modificato a mano" e
   pulsante di ripristino sulla stessa riga, allineati a destra come il resto
   della colonna .num. */
.inst-amount-edit{display:inline-flex;align-items:center;gap:6px}
.inst-amount-edit input{min-width:90px}
.inst-manual-mark{color:var(--muted);cursor:help}

/* Un debito porta zero o più allegati (DebitAttachment): una riga per file,
   icona · nome (link di scarico) · dimensione · caricato da · data · azione.
   Le colonne di metadati si comprimono su schermi stretti invece di
   costringere la riga a scorrere in orizzontale. */
.attachment-list{display:flex;flex-direction:column;gap:2px;padding:4px 16px}
.attachment-row{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.attachment-row:last-child{border-bottom:none}
.attachment-icon{flex:0 0 auto;font-size:14px}
.attachment-name{flex:1 1 auto;min-width:0;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-name:hover{text-decoration:underline}
.attachment-meta{flex:0 0 auto;color:var(--muted);font-size:11px;font-family:var(--mono);
  white-space:nowrap}
.attachment-row .row-actions{flex:0 0 auto}

/* Grafici — un linguaggio solo per i quattro pannelli che ne hanno uno:
   "Andamento previsto" (Scadenzario, app/static/js/forecast_chart.js),
   "Uscite ed entrate per mese" (Andamento), "Ripartizione per soggetto" e
   "Ripartizione nel tempo" (Ripartizione), questi ultimi tre in
   app/static/js/charts.js, che tiene anche le primitive comuni. Tutti disegnati a mano in SVG, nessuna libreria
   (CLAUDE.md: "Frontend senza build step e senza dipendenze"), tutti con
   queste classi: chi ne aggiunge un quarto non reinventa né le tinte né le
   tacche né il fuoco da tastiera.
   Nessuna tinta nuova: var(--chf) per le uscite e lo scaduto, var(--pos) per
   le entrate, var(--muted) per il neutro e il da-pagare, var(--eur) per il
   fuoco e il marcatore "oggi". Il colore di una serie (soggetto, categoria)
   arriva invece inline da subjColor()/catColor(), che sono già la tavolozza
   del resto dell'interfaccia. */
.chart-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:0 16px 6px}
.chart-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chart-hint{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.chart-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.chart-legend-swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;background:var(--muted)}
.chart-unit{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);
  cursor:help;border:1px solid var(--line);border-radius:2px;padding:1px 5px}
.chart-box{padding:4px 16px 14px}
.chart-box svg{display:block}
.chart-box .chart-hit{fill:transparent;stroke:none}
.chart-box .chart-bar-group{cursor:pointer}
.chart-box .chart-bar-group:hover .chart-hit{fill:var(--line-soft)}
.chart-box .chart-bar-group:focus{outline:none}
.chart-box .chart-bar-group:focus .chart-hit{fill:var(--line-soft);stroke:var(--eur);stroke-width:2}
.chart-box .chart-bar-group:hover .chart-seg,
.chart-box .chart-bar-group:focus .chart-seg{opacity:.82}
.chart-box .chart-axis-label{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.chart-box .chart-axis-label.current{fill:var(--eur);font-weight:600}
.chart-box .chart-tick-label{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.chart-box .chart-gridline{stroke:var(--line-soft);stroke-width:1}
.chart-box .chart-baseline{stroke:var(--line);stroke-width:1}
.chart-box .chart-today-mark{fill:var(--eur)}
/* Barre orizzontali (Ripartizione): il nome del soggetto sta a sinistra di
   ogni riga e l'importo a destra — è quello che tiene TUTTI gli attori
   leggibili anche quando sono molti, dove delle colonne verticali
   sovrapporrebbero le etichette. */
.chart-box .chart-row-label{font-size:11.5px;fill:var(--ink)}
.chart-box .chart-row-label.muted{fill:var(--muted)}
.chart-box .chart-row-value{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart-empty{padding:0 16px 16px;color:var(--muted);font-size:13px}

textarea{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);width:100%;resize:vertical}

/* selettore di data (datepicker.js) */
.dp-pop{position:absolute;z-index:90;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,27,36,.18);padding:10px;width:238px}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-family:var(--serif);font-size:14px}
.dp-nav{font:inherit;font-size:15px;line-height:1;padding:2px 9px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius);cursor:pointer;color:var(--ink)}
.dp-nav:hover{border-color:var(--muted)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);text-align:center;padding:3px 0}
.dp-day{font:inherit;font-size:12px;padding:5px 0;border:1px solid transparent;background:transparent;
  border-radius:var(--radius);cursor:pointer;text-align:center;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dp-day:hover{background:#E3E7E4}
.dp-day.other{color:var(--muted);opacity:.55}
.dp-day.today{border-color:var(--eur)}
.dp-day.sel{background:var(--ink);color:var(--paper)}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line-soft)}
.inst-date-edit input{width:110px;font-family:var(--mono);font-size:12px;padding:3px 6px}

/* anteprima «Rendi private» */
.pp-line{font-size:13px;line-height:1.5;padding:7px 10px;border-radius:var(--radius);margin-bottom:8px}
.pp-line.ok{background:#EFF6F1;border:1px solid #BFDCCB}
.pp-line.info{background:#F7F9F8;border:1px solid var(--line-soft);color:#3B4B54}
.pp-line.warn{background:#FDF6EC;border:1px solid #EBD9BC;color:var(--warn)}
.pp-line.skip{background:#FBF2F1;border:1px solid #E8C6C2;color:var(--chf)}
.pp-line.muted{color:var(--muted);padding:2px 10px}
.modal-body label.check{margin:-2px 0 10px 10px}

/* «il pagamento supera la rata»: marca la rata coperta solo in parte */
.spread-partial{font-size:11px;color:var(--warn);border:1px solid #EBD9BC;background:#FDF6EC;
  border-radius:999px;padding:1px 7px;margin-left:6px}

/* ============================================================
   Importazione guidata (docs/GUIDED-IMPORT.md)
   ============================================================ */

/* il pulsante accanto alla zona di trascinamento: la via manuale, non l'ovvia */
.gi-launch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 0}
.gi-launch .hint{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}

/* La barra dell'anteprima sta ferma come intestazione e piede: solo la tabella
   scorre (stessa struttura del drill-down). */
.modal-card.wide>.gi-tools{flex:0 0 auto}
.gi-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:9px 18px;border-bottom:1px solid var(--line-soft);background:#F7F9F8}
.gi-summary{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#3B4B54}
.gi-summary .gi-totals{font-family:var(--mono);font-size:11px;color:var(--muted)}
.gi-tool-btns{display:flex;gap:6px}

/* blocchi del passo 1 */
.gi-block{border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px 14px;background:#FCFDFC}
.gi-block-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:8px}
.gi-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.gi-row .field{flex:1 1 220px}
.gi-tpl-acts{display:flex;gap:6px;padding-bottom:2px}
.gi-tpl-name{flex:1 1 220px;min-width:180px}
.gi-note{padding:0}
.modal-body.stack .gi-block .pp-line{margin:8px 0 0}

/* le prime righe del file, così come la banca le ha scritte */
table.gi-sample{font-size:12px;width:auto;min-width:100%}
table.gi-sample th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);white-space:nowrap}
table.gi-sample td{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* la tabella dell'anteprima: rosso = non importabile, ambra = doppione */
table.gi-preview td,table.gi-preview th{padding:5px 10px;font-size:12px}
table.gi-preview tr.gi-bad{background:#FBF2F1}
table.gi-preview tr.gi-bad td{color:var(--chf)}
table.gi-preview tr.gi-dup{background:#FDF6EC}
table.gi-preview .date{font-family:var(--mono);font-size:11px;white-space:nowrap}
table.gi-preview .desc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.gi-preview .type{color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi-state{max-width:260px}
.gi-badge{display:inline-block;font-size:11px;line-height:1.3;padding:1px 7px;margin:1px 4px 1px 0;
  border-radius:999px;border:1px solid var(--line)}
.gi-badge.ok{color:var(--muted);border-color:var(--line-soft)}
.gi-badge.bad{color:var(--chf);border-color:#E8C6C2;background:#FBF2F1}
.gi-badge.dup{color:var(--warn);border-color:#EBD9BC;background:#FDF6EC}
.gi-badge.warn{color:var(--warn);border-color:#EBD9BC}
.inst-pay{display:flex;gap:8px;align-items:center;margin-top:3px;font-size:12px}
.inst-pay-info.clickable{cursor:pointer;text-decoration:underline dotted}
.inst-remaining{font-size:12px}
.badge.inst-st.st-partial{color:var(--warn);border-color:#EBD9BC}

/* possibili doppioni */
.dup-group{border-top:1px solid var(--line,#ddd);padding:8px 14px}
.dup-key{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;margin-bottom:4px}
.dup-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0;font-size:13px}
.dup-desc{flex:1 1 220px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dup-cat{color:var(--muted)}
.dup-dismissed{padding:8px 14px;border-top:1px solid var(--line,#ddd);font-size:13px}
.dup-badge{margin-left:6px}