:root{
  --bg:#cfdff1; --card:#ffffff; --ink:#1f2630; --muted:#6b7480;
  --line:#e2e6ec; --accent:#2563a8; --accent-d:#1c4d85;
  --green:#1f7a44; --red:#c0392b; --warn:#b9770e; --warnbg:#fdf3e2;
  --done:#eef7f0; --underbg:#fdecea;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);font-size:16.5px;padding-top:48px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:.9em}
code{background:#eef0f3;padding:1px 5px;border-radius:4px;font-size:.9em}

.topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--accent-d);color:#fff;padding:10px 20px;
  position:fixed;top:0;left:0;right:0;z-index:50;height:48px;box-sizing:border-box}
.topbar .brand{color:#fff;font-weight:bold;font-size:1.5em}
.topbar nav a{color:#dce7f3;margin-left:18px}
.topbar nav a:hover{color:#fff;text-decoration:none}
.topbar .logout{color:#ffd9d4}

.wrap{max-width:1080px;margin:22px auto;padding:0 18px}
h1{font-size:1.5em;margin:.2em 0 .6em}
h2{font-size:1.1em;margin:1.4em 0 .4em}

.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px}
.flash.ok{background:#e8f5ec;color:var(--green);border:1px solid #bfe3cb}
.flash.err{background:var(--underbg);color:var(--red);border:1px solid #f3c4bf}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin:18px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card.auth{max-width:340px;margin:8vh auto;text-align:center}
.auth h1{margin-top:0}
.auth form{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:14px}
label{display:flex;flex-direction:column;gap:4px;font-size:.85em;color:var(--muted)}
input,select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;color:var(--ink)}
input:focus,select:focus{outline:2px solid #cfe0f2;border-color:var(--accent)}

button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;
  padding:7px 14px;border-radius:6px;color:var(--ink)}
button:hover{background:#f0f2f5}
button.primary,.btn-sm.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-d)}
button.warn{background:var(--warnbg);border-color:#eccf95;color:var(--warn)}
.btn-sm{padding:3px 9px;font-size:.82em;border-radius:5px}
.btn-sm.danger,button.danger{color:var(--red);border-color:#eec9c5}
.btn-sm.danger:hover{background:var(--underbg)}
.inline-form{display:inline-flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:8px 0}

table.grid{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grid th,.grid td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.grid thead th{background:#eef2f6;font-size:.8em;text-transform:uppercase;letter-spacing:.03em;color:#55606c}
.grid .num{text-align:right;font-variant-numeric:tabular-nums}
.grid tfoot td{background:#f7f9fb}
.alert-row{background:var(--underbg)}
.neg{color:var(--red);font-weight:bold}
.badge{background:var(--red);color:#fff;font-size:.7em;padding:1px 5px;border-radius:4px;margin-left:4px}

.conto-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.conto-head h1{margin:.1em 0}
.kpi{display:flex;gap:10px}
.kpi>div{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px;text-align:right}
.kpi span{display:block;font-size:.72em;color:var(--muted);text-transform:uppercase}
.kpi b{font-size:1.15em}
.kpi .neg b{color:var(--red)}

.mese h2{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--accent);padding-bottom:3px}
.saldo-fine{font-size:.7em;color:var(--muted);font-weight:normal}
table.mov input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px}
table.mov input:hover{border-color:var(--line)}
table.mov input:focus{background:#fff}
table.mov input.n{text-align:right;max-width:110px}
.mov .chk{width:34px;text-align:center}
.mov .az{width:120px;text-align:right;white-space:nowrap}
.mov .lire{color:var(--muted);font-size:.85em}
.mov .saldo{font-weight:bold}
.chkbtn{border:none;background:none;font-size:1.1em;padding:0}
tr.done{background:var(--done)}
tr.under .saldo{color:var(--red)}
tr.addrow{background:#fafbfc}
tr.addrow input{border-color:var(--line)}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.form-grid .wide{grid-column:1/-1}
.form-grid button{align-self:start}
.add-mese h3{margin-top:0}

@media(max-width:640px){
  .kpi{width:100%;justify-content:space-between}
  .mov .az{width:auto}
  .mov .lire{display:none}
}

/* --- griglia editabile --- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.toolbar .row-lbl{flex-direction:row;align-items:center;gap:6px}
.mov .mcol{width:80px}
.mov input.mese-in{font-size:.85em;color:var(--muted);max-width:74px;text-align:center}
.mov td.az{width:auto;white-space:nowrap;text-align:right}
.mov td.az button{padding:2px 6px;font-size:.85em;line-height:1.2;margin-left:2px;border-radius:5px}
.mov td.az button.danger{color:var(--red);border-color:#eec9c5}
.mov td.az button:hover{background:#eef2f6}
.kpi .neg b{color:var(--red)}
@media(max-width:680px){
  .mov .mcol{width:64px}
  .mov td.az button{padding:2px 4px}
}

/* --- pannello parametri conto --- */
.conto-settings{margin:6px 0}
.set-grid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;background:#f7f9fb;
  border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.set-grid label{font-size:.72em}
.set-grid input{padding:5px 8px}
.set-grid input.n{max-width:110px;text-align:right}
.set-grid label.ck{flex-direction:row;align-items:center;gap:5px;font-size:.85em;color:var(--ink)}

/* --- colonna e barra carta di credito --- */
.mov .cartah, .mov .cartacol{background:#fbf4e8}
.mov .cartacol input{color:#9a6b1a}
tr.cartarow{background:#fdf8ef}
tr.cartarow.done{background:#eef7f0}
.carta-bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  background:#fbf1df;border:1px solid #ecd9b5;border-radius:0 0 8px 8px;
  padding:7px 12px;margin-top:-1px;font-size:.9em}
.carta-bar > span:first-child{font-weight:bold;color:#9a6b1a}
.carta-bar label{flex-direction:row;align-items:center;gap:5px;font-size:1em;color:var(--ink)}
.carta-bar input.budget-in{max-width:90px;text-align:right;padding:4px 7px}
.carta-bar b{font-variant-numeric:tabular-nums}
.carta-bar b.neg{color:var(--red)}

/* --- griglia unica: testata FISSA (ancorata, niente jitter) --- */
body:has(#fixed-top) .wrap{margin-top:0; max-width:none}
#fixed-top{position:fixed; top:48px; left:0; right:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.ft-inner{max-width:none; margin:0 auto; padding:8px 18px 10px}
table.grid.unica{overflow:visible}
table.mov.unica thead th{position:sticky; top:var(--head-top,150px); z-index:30; box-shadow:0 2px 4px rgba(0,0,0,.12)}
.mov .attn{width:1%; white-space:nowrap; text-align:center; padding:0 8px}
.mov td.attn .badge{margin:0}
/* descrizione larga, colonne numeriche contenute */
.mov .desc{min-width:300px}
.mov .desc input{width:100%}
.mov .num{width:104px}
.mov .saldo{width:104px}
/* banda mese = riga separatore (scorre con le righe, NON bloccata) */
tr.mese-row td{
  padding:9px 14px; background:var(--accent-d); border-top:2px solid var(--accent);
  color:#ffffff; font-weight:bold; font-size:1.1em;
}
tr.mese-row .ml{font-size:1.1em}
tr.mese-row .saldo-fine{float:right; font-weight:normal; opacity:1; color:rgba(255,255,255,.92)}
tr.budget-row td{padding:0; border:0; background:transparent}
/* entrate verde, uscite rosso */
.mov input.verde{color:var(--green); font-weight:bold}
.mov input.rosso{color:var(--red); font-weight:bold}

/* --- colonna spese varie --- */
.mov .spvh, .mov .spvcol{background:#eef5f1}
.mov .spvcol input{color:#1c6b54}

/* --- barre budget grandi (carta + spese varie) --- */
.budget-bars{display:flex;flex-wrap:wrap;gap:12px;margin-top:-1px}
.bbar{flex:1 1 320px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:14px 18px;border-radius:0 0 8px 8px;font-size:1.05em;border:1px solid}
.bbar.carta{background:#fbf1df;border-color:#ecd9b5}
.bbar.spv{background:#e9f4ef;border-color:#c6e3d6}
.bbar .btit{font-weight:bold;font-size:1.05em;flex:1 1 100%}
.bbar.carta .btit{color:#9a6b1a}
.bbar.spv .btit{color:#1c6b54}
.bbar label{flex-direction:row;align-items:center;gap:6px;font-size:1em;color:var(--ink);font-weight:bold}
.bbar input.budget-in{max-width:120px;text-align:right;padding:7px 10px;font-size:1.05em;
  border:2px solid #cdd5de;border-radius:6px}
.bbar .bv{font-size:1em;white-space:nowrap}
.bbar label{white-space:nowrap}
.bbar .bv b{font-size:1.15em;font-variant-numeric:tabular-nums}
.bbar b.neg{color:var(--red)}

/* --- pannello impostazioni conto PIU' GRANDE --- */
.set-grid{gap:14px 22px; padding:16px 18px}
.set-grid label{font-size:.95em; color:var(--muted); gap:6px}
.set-grid input{padding:9px 12px; font-size:1.1em; border:2px solid #cdd5de; border-radius:7px}
.set-grid input.n{max-width:150px}
.conto-head h1{font-size:1.7em}

/* --- post-it promemoria --- */
.postit{background:#fff8c4; border:1px solid #e6d873; border-left:6px solid #e0c020;
  border-radius:8px; padding:10px 16px; margin:12px 0; box-shadow:0 2px 5px rgba(0,0,0,.08)}
.postit summary{font-weight:bold; cursor:pointer; color:#7a5d00; font-size:1.05em; list-style:none}
.postit summary::-webkit-details-marker{display:none}
.postit summary::before{content:'▸ '; }
.postit[open] summary::before{content:'▾ '; }
.postit textarea{width:100%; margin-top:10px; border:1px solid #d8c965; border-radius:6px;
  padding:10px 12px; font:inherit; font-size:1em; background:#fffdf0; resize:vertical; min-height:120px}
.postit-hint{font-size:.8em; color:#9a8a3a; margin-top:5px}

/* KPI compatti nella toolbar (stessa riga di Copia mese) */
.toolbar .kpi{gap:8px}
.toolbar .kpi>div{padding:6px 12px}
.toolbar .kpi b{font-size:1.05em}
.budget-row .budget-bars{margin:0}

/* cruscotto: colonna ATTN separata */
.cruscotto .attn{width:1%; white-space:nowrap; text-align:center; padding:0 8px}
.cruscotto .attn .badge{margin:0}

/* === TESTATA COMPATTA (meno spazio verticale) === */
.ft-inner{padding:5px 18px 6px}
.conto-head{gap:16px; margin-bottom:2px}
.conto-head h1{font-size:1.35em; margin:2px 0}
.set-grid{padding:8px 14px; gap:7px 18px}
.set-grid label{font-size:.82em; gap:3px}
.set-grid input{padding:6px 9px; font-size:.98em; border-width:1px}
.set-grid input.n{max-width:130px}
.toolbar{margin:6px 0 4px}
.toolbar .kpi>div{padding:4px 11px}
.toolbar .kpi span{font-size:.62em}
.toolbar .kpi b{font-size:1em}
.postit{padding:7px 14px; margin:8px 0}
/* intestazioni colonne su una riga sola, più basse */
table.mov.unica thead th{white-space:nowrap; padding:5px 8px; font-size:.74em}

/* cruscotto: pulsante "Apri →" su una sola riga */
.cruscotto td:last-child{white-space:nowrap; text-align:right}
.cruscotto .btn-sm{white-space:nowrap; display:inline-block}

/* colonne MESE e ✓ piu' larghe e leggibili (c'è spazio sul monitor grande) */
.mov .mcol{width:120px}
.mov input.mese-in{font-size:.98em; max-width:110px; color:var(--ink); text-align:center}
.mov .chk{width:48px; text-align:center}
.mov .chk input[type=checkbox]{width:18px; height:18px; cursor:pointer}

/* titolo conto piu' grande (proporzionato) + colonna MESE a larghezza fissa */
.conto-head h1{font-size:1.85em; margin:2px 0}
.mov .mcol{min-width:130px; width:130px}
.mov input.mese-in{min-width:100px; max-width:120px; font-size:1em; text-align:center; color:var(--ink)}

/* === tipo conto + aggancio revolving === */
.conto-title{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.tipo-badge{font-size:.72em; font-weight:bold; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em}
.tipo-badge.cc{background:#e3eefb; color:#1c4d85}
.tipo-badge.rev{background:#fde6cf; color:#9a5b12}
.tag-rev{background:#fde6cf; color:#9a5b12; padding:2px 8px; border-radius:12px; font-size:.85em}
/* colonna numero assoluto (solo carte revolving) */
.mov .rownum{width:1%; white-space:nowrap; text-align:right; color:var(--muted);
  font-variant-numeric:tabular-nums; font-weight:bold; padding-right:10px}
/* colonna aggancio (solo conti correnti) */
.mov th.aggh{width:210px}
.mov .aggh, .mov td.agg{background:#f3f0fa}
.mov td.agg{white-space:nowrap; text-align:center}
.mov td.agg .agg-fields{display:inline-flex; gap:5px; margin-left:6px; vertical-align:middle}

.mov td.agg .rev-num{width:64px; text-align:center; border:1px solid var(--line); border-radius:5px; padding:3px 5px; background:#fff}
.mov td.agg input[type=checkbox]{width:17px; height:17px; vertical-align:middle; cursor:pointer}
/* uscita bloccata quando agganciata */
.mov input[data-field="uscite"][readonly]{background:#f3f0fa; color:#8a7fb0; font-style:italic}

/* righe fisse di addebito (carta mese prec + spese varie mese) */
.mov tr.addebito td{background:#f6f3ee; font-style:italic; color:#5a5246; border-top:1px dashed var(--line)}
.mov tr.addebito .desc{font-weight:bold}
.mov tr.addebito .num b{font-style:normal;display:block;text-align:right;padding:4px 6px;border:1px solid transparent}
.mov tr.addebito .saldo{font-weight:bold; font-style:normal}
.mov tr.addebito .saldo.neg{color:var(--red)}

/* colonna Tipo (categoria riga) */
.mov th.cath{width:150px}
.mov td.catcol{padding:2px 4px}
.mov td.catcol .cat-in{width:100%; font-size:.86em; padding:3px 4px; border:1px solid var(--line); border-radius:6px; background:#fff}
/* righe Carta / Spese varie: non muovono il saldo -> evidenziate */
.mov tr.cat-carta td{background:#d3d6db}      /* carta di credito: grigio visibile ma tenue */
.mov tr.cat-spvarie td{background:#fcf4c9}     /* spese varie: giallino tenue */
.mov tr.cat-carta .saldo, .mov tr.cat-spvarie .saldo{color:#9aa0a6; font-style:italic}
.mov tr.cat-carta input.n.rosso, .mov tr.cat-spvarie input.n.rosso{font-weight:bold}
.mov tr.cat-carta input[readonly], .mov tr.cat-spvarie input[readonly]{background:transparent; color:#bbb}

/* righe Revolving: muovono il saldo (rata della carta), evidenziate in rosso tenue */
.mov tr.cat-revolving td{background:#f6c8c2}
.mov tr.cat-revolving .saldo{color:inherit; font-style:normal}
.mov td.agg .rev-carta{width:100%; font-size:.86em; padding:3px 4px; border:1px solid var(--line); border-radius:6px; background:#fff}

/* importo rata revolving: rosso (e' un'uscita che scala il saldo), non grigio */
.mov tr.cat-revolving input.n.rosso[readonly]{color:var(--red); -webkit-text-fill-color:var(--red); opacity:1; background:transparent; font-weight:bold}

/* === FOCUS UNIFORME su tutti i campi: il "bel blu" quando si digita, identico ovunque === */
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border:2px solid var(--accent) !important;
  box-shadow:0 0 0 3px rgba(37,99,168,.22) !important;
  background:#fff !important;
}

/* === paletta colore per le righe normali === */
.pal-wrap{position:relative; display:inline-block}
.palette{position:absolute; right:0; top:100%; margin-top:3px; z-index:60; display:none;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.18); white-space:nowrap}
.palette.open{display:block}
.palette i{display:inline-block; width:20px; height:20px; border-radius:50%;
  margin:2px; cursor:pointer; border:1px solid rgba(0,0,0,.12); vertical-align:middle}
.palette i:hover{transform:scale(1.18); box-shadow:0 0 0 2px rgba(37,99,168,.25)}