/* === ZAPCALENDAR — CONTABILITÀ & FINANZE === */

#est-app{
  --rose:#E8547A;--rose-dark:#C43D63;--rose-light:#F9D0DC;--rose-pale:#FDF0F4;
  --gold:#C9A84C;--gold-light:#F5EDD5;
  --ink:#1A1A2E;--ink-mid:#3D3D56;--ink-light:#7A7A9A;
  --surface:#FFFFFF;--surface-alt:#FAF8FB;--border:#EDE8F2;
  --success:#2ECC8F;--danger:#E85454;--warning:#F4A623;--info:#5B8CF5;
  --sidebar-w:240px;--radius:16px;--radius-sm:10px;
  --shadow:0 4px 24px rgba(26,26,46,.08);--shadow-lg:0 12px 48px rgba(26,26,46,.14);
}
#est-app, #est-app *, #est-app *::before, #est-app *::after{box-sizing:border-box;margin:0;padding:0;}
#est-app{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--surface-alt);color:var(--ink);display:flex;min-height:100vh;}

/* SIDEBAR */
#est-app #sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--ink);position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:100;transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
#est-app #sidebar.collapsed{transform:translateX(-100%);}
#est-app .sidebar-logo{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
#est-app .sidebar-logo h1{font-size:1.05rem;font-weight:700;color:#fff;}
#est-app .sidebar-logo .tagline{font-size:.65rem;color:var(--rose-light);opacity:.7;margin-top:2px;letter-spacing:.05em;text-transform:uppercase;}

/* YEAR SELECTOR in sidebar */
#est-app .year-selector-wrap{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
#est-app .year-selector-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);font-weight:700;margin-bottom:6px;}
#est-app .year-selector{display:flex;align-items:center;gap:6px;}
#est-app .year-btn{background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit;}
#est-app .year-btn:hover{background:var(--rose);color:#fff;}
#est-app .year-display{flex:1;text-align:center;font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:.02em;}
/* year-add-btn: stile inline in updateYearUI */

#est-app .sidebar-section-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);padding:16px 18px 6px;font-weight:700;}
#est-app .nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;color:rgba(255,255,255,.55);cursor:pointer;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:inherit;font-size:.85rem;font-weight:500;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#est-app .nav-item:hover{color:#fff;background:rgba(255,255,255,.05);}
#est-app .nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(232,84,122,.25),rgba(232,84,122,.05));}
#est-app .nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rose);border-radius:0 2px 2px 0;}
#est-app .nav-item .icon{font-size:.9rem;width:18px;text-align:center;}
#est-app .sidebar-months{display:grid;grid-template-columns:1fr 1fr;padding:3px 10px;gap:2px;}
#est-app .nav-month{font-size:.75rem;padding:5px;color:rgba(255,255,255,.5);cursor:pointer;border-radius:6px;transition:all .15s;text-align:center;border:none;background:none;font-family:inherit;font-weight:500;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#est-app .nav-month:hover{background:rgba(255,255,255,.07);color:#fff;}
#est-app .nav-month.active{background:var(--rose);color:#fff;}
#est-app .sidebar-bottom{margin-top:auto;padding:13px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:6px;}
#est-app .btn-sidebar-action{flex:1;padding:8px 5px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px;}
#est-app .btn-save{background:var(--rose);color:#fff;}#est-app .btn-save:hover{background:var(--rose-dark);}
#est-app .btn-load{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}#est-app .btn-load:hover{background:rgba(255,255,255,.18);color:#fff;}
#est-app #import-file{display:none;}

/* MAIN */
#est-app #main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s;}

/* TOPBAR */
#est-app #topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:101;}
#est-app .topbar-left{display:flex;align-items:center;gap:12px;}
#est-app .topbar-right{display:flex;align-items:center;gap:9px;}
#est-app #topbar-title{font-size:1.05rem;font-weight:700;color:var(--ink);}
#est-app .topbar-year-badge{background:var(--rose-pale);color:var(--rose);font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:20px;}
#est-app #hamburger{background:none;border:none;cursor:pointer;padding:7px;border-radius:7px;transition:background .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#est-app #hamburger:hover{background:var(--rose-pale);}
#est-app #hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.3s;}
#est-app .btn-topbar{padding:7px 13px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:700;transition:all .2s;display:flex;align-items:center;gap:5px;}
#est-app .btn-pdf{background:var(--rose-pale);color:var(--verde-ink,var(--rose));}#est-app .btn-pdf:hover{background:var(--rose);color:#fff;}
#est-app .btn-compare{background:rgba(91,140,245,.12);color:var(--info);}#est-app .btn-compare:hover{background:var(--info);color:#fff;}
#est-app #autosave{font-size:.68rem;color:var(--success);font-weight:700;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .3s;}
#est-app #autosave.show{opacity:1;}
#est-app .as-dot{width:6px;height:6px;border-radius:50%;background:var(--success);}

/* OVERLAY */
#est-app #overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99;}
/* cursor:pointer indispensabile su iOS Safari: senza di esso i div non ricevono click */
#est-app #overlay.show{display:block;cursor:pointer;touch-action:manipulation;}

/* PAGE */
#est-app #page-content{padding:22px;flex:1;}

/* TOAST */
#est-app #toast{position:fixed;bottom:20px;right:20px;background:var(--bottone-scuro,var(--ink));color:#fff;padding:11px 17px;border-radius:12px;font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:9999;display:flex;align-items:center;gap:9px;transform:translateY(70px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);max-width:320px;}
#est-app #toast.show{transform:translateY(0);opacity:1;}
#est-app #toast.success .tdot{background:var(--success);}#est-app #toast.error .tdot{background:var(--danger);}
#est-app .tdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* CARDS */
#est-app .card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:1px solid var(--border);}
#est-app .card+.card{margin-top:16px;}
#est-app .card-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#est-app .card-title .accent{color:var(--rose);}

/* STATS */
/* auto-fit guarda lo spazio disponibile, non la finestra: su iPad orizzontale
   le due barre laterali lasciano solo 512px, e quattro colonne da 107px
   tagliavano gli importi ("23.730,00 €" ne chiede 132). */
#est-app .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px;margin-bottom:16px;}
#est-app .stat-card{background:var(--surface);border-radius:var(--radius);padding:17px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s;}
#est-app .stat-card:hover{transform:translateY(-2px);}
#est-app .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
#est-app .stat-card.green::before{background:var(--success);}#est-app .stat-card.red::before{background:var(--danger);}#est-app .stat-card.gold::before{background:var(--gold);}#est-app .stat-card.blue::before{background:var(--info);}#est-app .stat-card.rose::before{background:var(--rose);}
#est-app .stat-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);margin-bottom:7px;}
#est-app .stat-value{font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1;}
#est-app .stat-value.pos{color:var(--success);}#est-app .stat-value.neg{color:var(--danger);}
#est-app .stat-sub{font-size:.68rem;color:var(--ink-light);margin-top:5px;display:flex;align-items:center;gap:4px;}
#est-app .stat-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:1.8rem;opacity:.1;}
/* delta vs previous year */
#est-app .delta{font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap;}
#est-app .delta.up{background:rgba(46,204,143,.12);color:#1a9966;}
#est-app .delta.down{background:rgba(232,84,84,.12);color:var(--danger);}
#est-app .delta.neu{background:rgba(122,122,154,.1);color:var(--ink-light);}

/* CHARTS */
#est-app .charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-top:12px;}
#est-app .chart-card{background:var(--surface);border-radius:var(--radius);padding:14px;border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer;transition:border-color .18s,box-shadow .18s;position:relative;}
#est-app .chart-card:hover{border-color:var(--rose);box-shadow:0 6px 28px rgba(232,84,122,.13);}
#est-app .chart-card:hover .chart-expand-hint{opacity:1;}
#est-app .chart-expand-hint{position:absolute;top:10px;right:12px;font-size:.65rem;color:var(--rose);font-weight:700;opacity:0;transition:opacity .18s;background:var(--rose-pale);padding:2px 7px;border-radius:20px;pointer-events:none;}
#est-app .chart-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);margin-bottom:8px;}
#est-app .charts-grid.full{grid-template-columns:1fr;}

/* CHART MODAL */
#est-app .chart-modal-backdrop{position:fixed;inset:0;background:rgba(26,26,46,.7);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
#est-app .chart-modal-backdrop.hidden{display:none;}
#est-app .chart-modal{background:var(--card,var(--surface));border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:860px;padding:22px;position:relative;}
#est-app .chart-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
#est-app .chart-modal-title{font-size:1rem;font-weight:700;color:var(--ink);}
#est-app .chart-modal-actions{display:flex;gap:8px;align-items:center;}
#est-app .chart-modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-light);padding:3px 8px;border-radius:6px;line-height:1;touch-action:manipulation;}
#est-app .chart-modal-close:hover{background:var(--rose-pale);color:var(--rose);}
@media(max-width:600px){#est-app .chart-modal{padding:14px;}#est-app .chart-modal-backdrop{padding:10px;}}
/* La scelta del PDF (1.50): completo o rapido. Usa la stessa finestra dei
   grafici, piu' stretta; le due scelte sono bottoni grandi con due righe,
   cosi' si capisce cosa c'e' dentro prima di scaricarlo.
   Lo sfondo e' --card e non --surface: dentro #est-app --surface e' un
   bianco fisso, e in tema scuro la finestra restava bianca con le scritte
   chiare (succedeva gia' a "Ingrandisci" dei grafici, sistemata insieme). */
#est-app .chart-modal.pdf-scelta{max-width:440px;}
#est-app .pdf-opzione{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;padding:13px 15px;margin-top:10px;border:1.5px solid var(--border);border-radius:12px;background:var(--card,var(--surface));color:var(--ink);font-family:inherit;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s;}
#est-app .pdf-opzione:hover,#est-app .pdf-opzione:focus-visible{border-color:var(--rose);background:var(--rose-pale);outline:none;}
#est-app .pdf-opz-t{font-size:.92rem;font-weight:700;color:var(--ink);}
#est-app .pdf-opz-s{font-size:.76rem;line-height:1.45;color:var(--ink-light);}

/* COLLAPSIBLE CHARTS SECTION */
#est-app .charts-section{}
#est-app .charts-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:14px;margin-bottom:0;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s;}
#est-app .charts-toggle:hover{background:var(--rose-pale);}
#est-app .charts-toggle-label{font-size:.8rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;}
#est-app .charts-toggle-arrow{font-size:.75rem;color:var(--ink-light);transition:transform .25s;display:inline-block;}
#est-app .charts-toggle-arrow.open{transform:rotate(180deg);}
#est-app .charts-collapsible{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s;max-height:0;opacity:0;}
#est-app .charts-collapsible.open{max-height:800px;opacity:1;}

/* Mobile stat-card: testo più piccolo */
@media(max-width:500px){
  #est-app .stat-label{font-size:.62rem;}
  #est-app .stat-value{font-size:1.05rem;}
  #est-app .stat-icon{display:none;}
  #est-app .stat-card{padding:12px 11px;}
  #est-app .saldo-card{padding:10px 12px;}
  #est-app .saldo-card .saldo-label{font-size:.6rem;letter-spacing:.02em;}
  #est-app .saldo-input-wrap input{font-size:.95rem;}
  #est-app .stat-sub{font-size:.6rem;gap:2px;flex-direction:column;align-items:flex-start;}
  #est-app .saldo-label-full{display:none;}
  #est-app .saldo-label-short{display:inline;}
}
@media(min-width:501px){
  #est-app .saldo-label-short{display:none;}
  #est-app .saldo-label-full{display:inline;}
}

/* FORM */
#est-app .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:16px;align-items:end;}
#est-app .form-group{display:flex;flex-direction:column;gap:5px;}
#est-app .form-label{font-size:.72rem;font-weight:700;color:var(--ink-mid);text-transform:uppercase;letter-spacing:.04em;}
#est-app .form-control{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);transition:all .2s;outline:none;width:100%;}
#est-app .form-control:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(232,84,122,.1);}
#est-app select.form-control{cursor:pointer;}
#est-app .btn{padding:9px 17px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:700;transition:all .2s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
#est-app .btn-primary{background:var(--rose);color:#fff;}#est-app .btn-primary:hover{background:var(--rose-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,84,122,.35);}
#est-app .btn-danger{background:#FFF0F0;color:var(--danger);}#est-app .btn-danger:hover{background:var(--danger);color:#fff;}
#est-app .btn-ghost{background:transparent;color:var(--ink-light);border:1.5px solid var(--border);}#est-app .btn-ghost:hover{border-color:var(--rose);color:var(--rose);}
#est-app .btn-success{background:rgba(46,204,143,.1);color:#1a9966;}#est-app .btn-success:hover{background:var(--success);color:#fff;}
#est-app .btn-info{background:rgba(91,140,245,.1);color:var(--info);}#est-app .btn-info:hover{background:var(--info);color:#fff;}
#est-app .btn-sm{padding:5px 10px;font-size:.75rem;border-radius:7px;}

/* TABLE */
#est-app .table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);}
#est-app table{width:100%;border-collapse:collapse;font-size:.875rem;}
#est-app thead th{background:var(--surface-alt);padding:10px 13px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
#est-app tbody td{padding:11px 13px;border-bottom:1px solid var(--border);color:var(--ink-mid);vertical-align:middle;}
#est-app tbody tr:last-child td{border-bottom:none;}
#est-app tbody tr:hover td{background:var(--rose-pale);}
#est-app .text-right{text-align:right;}#est-app .text-center{text-align:center;}
#est-app tfoot td{padding:10px 13px;font-weight:700;font-size:.8rem;border-top:2px solid var(--border);}
#est-app tfoot tr.foot-ent td{background:rgba(46,204,143,.08);color:#1a9966;}
#est-app tfoot tr.foot-usc td{background:rgba(232,84,84,.08);color:var(--danger);}
#est-app tfoot tr.foot-utile td{background:rgba(91,140,245,.08);color:var(--info);}
#est-app tfoot tr.foot-cassa td{background:rgba(232,84,122,.08);color:var(--rose);}
#est-app .sticky-col{position:sticky;left:0;background:var(--surface);z-index:5;}
#est-app thead .sticky-col{background:var(--surface-alt);}
#est-app tfoot tr.foot-ent td:first-child{background:rgba(46,204,143,.15);}
#est-app tfoot tr.foot-usc td:first-child{background:rgba(232,84,84,.15);}
#est-app tfoot tr.foot-utile td:first-child{background:rgba(91,140,245,.15);}
#est-app tfoot tr.foot-cassa td:first-child{background:rgba(232,84,122,.15);}

/* BADGE */
#est-app .badge{display:inline-block;padding:3px 9px;border-radius:100px;font-size:.7rem;font-weight:700;}
#est-app .badge-gold{background:var(--gold-light);color:#8a6510;}
#est-app .badge-green{background:rgba(46,204,143,.12);color:#1a9966;}

/* SUGGESTION */
#est-app .suggestion-box{background:var(--gold-light);border:1.5px solid rgba(201,168,76,.4);border-radius:8px;padding:9px 13px;font-size:.8rem;color:#6a5010;display:flex;align-items:center;gap:8px;margin-top:5px;cursor:pointer;transition:background .15s;}
#est-app .suggestion-box:hover{background:#eedfa0;}
#est-app .suggestion-box strong{color:#8a6510;}
/* (1.85) Sotto la categoria della spesa: dove va nella Redditivita'. */
/* riga intera della griglia: dentro la colonna della categoria la allungava e,
   con align-items:end, sul computer la tendina finiva piu' in alto delle altre */
#est-app .sp-dest{grid-column:1/-1;margin-top:-4px;font-size:.74rem;line-height:1.45;color:var(--ink-light);}
#est-app .sp-dest.linea{color:#3559b8;}
#est-app .sp-dest.servizio{color:var(--success);}
#est-app .redd-come{margin-top:10px;font-size:.7rem;line-height:1.55;color:var(--ink-light);}
#est-app .redd-come b{color:var(--ink);font-weight:700;}
/* (1.86) servizi simili trattati in modo diverso dalle linee: si dice qui, dove si leggono i numeri */
#est-app .redd-controllo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding:8px 12px;border-radius:10px;background:rgba(238,143,60,.1);border:1px solid rgba(238,143,60,.45);font-size:.74rem;line-height:1.45;color:var(--ink);}
#est-app .redd-controllo span{flex:1 1 200px;min-width:0;}
#est-app .redd-controllo button{flex:0 0 auto;padding:5px 12px;border-radius:100px;border:1px solid rgba(238,143,60,.6);background:var(--surface);color:var(--ink);font-weight:700;font-size:.72rem;cursor:pointer;}

/* MONTH */
/* auto-fit guarda lo spazio REALMENTE disponibile, non la larghezza della
   finestra: l'area contenuti della Contabilità è ~880px anche su uno schermo
   da 1440 (due barre laterali si prendono 508px), quindi due colonne da 434px
   erano troppo strette per il form che ne chiede 630. Così va su due colonne
   solo quando ci stanno davvero. */
#est-app .month-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(560px,1fr));gap:16px;margin-top:16px;}
#est-app .entrate-section, #est-app .spese-section{background:var(--surface);border-radius:var(--radius);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow);}
#est-app .section-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:13px;border-bottom:2px solid var(--border);}
#est-app .section-header h3{font-size:.95rem;font-weight:700;color:var(--ink);}
#est-app .section-total{margin-left:auto;font-size:1.1rem;font-weight:700;}
#est-app .entrate-section .section-total{color:var(--success);}#est-app .spese-section .section-total{color:var(--danger);}

/* ── MODALITÀ SLIM / EXPERT ─────────────────────────────────── */
/* Default: expert mode — tutto visibile */
#est-app .slim-only{ display: none !important; }

/* In slim mode */
#est-app.mode-slim .expert-only{ display: none !important; }
#est-app.mode-slim .slim-only{ display: flex !important; }
#est-app.mode-slim .bundle-form{ display: none !important; }
#est-app.mode-slim .ent-mode-toggle{ display: none !important; }
#est-app.mode-slim .tempo-col{ display: none !important; }
#est-app.mode-slim .tempo-hdr{ display: none !important; }

/* Pulsante toggle in topbar */
#est-app #mode-toggle-btn{
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  letter-spacing: .02em;
  transition: all .2s;
}
#est-app:not(.mode-slim) #mode-toggle-btn{
  background: rgba(91,140,245,.12);
  color: var(--info);
  border: 1.5px solid rgba(91,140,245,.25);
}
#est-app.mode-slim #mode-toggle-btn{
  background: rgba(232,84,122,.1);
  color: var(--rose);
  border: 1.5px solid rgba(232,84,122,.25);
}
#est-app .pag-pills{display:flex;gap:6px;flex-wrap:wrap;}
#est-app .pag-pill{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#est-app .pag-pill.sel-contanti{background:#E8F5E9;border-color:#2ECC8F;color:#1a9966;}
#est-app .pag-pill.sel-pos{background:#E3F2FD;border-color:#5B8CF5;color:#2a5bd4;}
#est-app .pag-pill.sel-mance{background:var(--gold-light);border-color:var(--gold);color:#7a6010;}
#est-app .pag-pill.sel-custom{background:rgba(232,84,122,.1);border-color:var(--rose);color:var(--rose);}
#est-app .pag-pill.sel-buono{background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(232,84,122,.1));border-color:var(--gold);color:#7a4000;font-weight:700;}
#est-app .pag-pill:not([class*="sel-"]):hover{border-color:var(--rose);color:var(--rose);}
/* BUONI REGALO */
#est-app .buono-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:.68rem;font-weight:700;background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(232,84,122,.12));border:1px solid rgba(201,168,76,.45);color:#7a4000;}
#est-app .buono-form-wrap{background:rgba(201,168,76,.07);border:1.5px solid rgba(201,168,76,.3);border-radius:10px;padding:11px 13px;margin-top:8px;}
#est-app .buono-form-title{font-size:.7rem;font-weight:700;color:#8a6010;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
#est-app .buono-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;transition:border-color .15s;flex-wrap:wrap;}
#est-app .buono-card:hover{border-color:var(--gold);}
#est-app .buono-card.scaduto{opacity:.5;border-style:dashed;}
#est-app .buono-card.esaurito{opacity:.45;}
#est-app .buono-num{font-size:1.05rem;font-weight:700;color:var(--gold);min-width:44px;}
#est-app .buono-info{flex:1;min-width:100px;}
#est-app .buono-info-nome{font-size:.82rem;font-weight:600;color:var(--ink);}
#est-app .buono-info-sub{font-size:.66rem;color:var(--ink-light);margin-top:2px;}
#est-app .buono-bar-wrap{flex:1.5;min-width:80px;height:7px;background:var(--border);border-radius:100px;overflow:hidden;}
#est-app .buono-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--success),var(--gold));transition:width .5s;}
#est-app .buono-bar.low{background:linear-gradient(90deg,var(--warning),var(--danger));}
#est-app .buono-amounts{text-align:right;min-width:90px;}
#est-app .buono-residuo{font-size:.92rem;font-weight:700;color:var(--success);}
#est-app .buono-iniziale{font-size:.62rem;color:var(--ink-light);}
#est-app .badge-pag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:700;}
#est-app .badge-contanti{background:#E8F5E9;color:#1a9966;}
#est-app .badge-pos{background:#E3F2FD;color:#2a5bd4;}
#est-app .badge-mance{background:var(--gold-light);color:#7a6010;}
#est-app .entrate-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:10px;}
#est-app .entrate-table-wrap table{width:100%;border-collapse:collapse;font-size:.83rem;}
#est-app .entrate-table-wrap thead th{background:var(--surface-alt);padding:8px 11px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light);border-bottom:1px solid var(--border);}
#est-app .entrate-table-wrap tbody td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--ink-mid);vertical-align:middle;}
#est-app .entrate-table-wrap tbody tr:last-child td{border-bottom:none;}
#est-app .entrate-table-wrap tbody tr:hover td{background:rgba(46,204,143,.04);}
/* Registro raccolto per giorno (1.50). L'intestazione del giorno e' un
   bottone largo quanto la tabella: data, quante voci, totale del giorno.
   Il fondo sta sul bottone e non sulla cella, perche' sul telefono le celle
   di .tab-schede hanno lo sfondo trasparente con !important (sistema.css). */
#est-app .entrate-table-wrap tbody tr.reg-testa td{padding:0;border-bottom:1px solid var(--border);}
#est-app .reg-testa-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border:0;background:var(--surface-alt);font-family:inherit;font-size:.8rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;touch-action:manipulation;}
#est-app .reg-testa-btn:hover{background:var(--rose-pale);}
#est-app .reg-freccia{display:inline-flex;color:var(--ink-light);transition:transform .15s;}
#est-app tbody.reg-giorno:not(.chiuso) .reg-freccia{transform:rotate(90deg);}
#est-app .reg-giorno-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#est-app .reg-conta{margin-left:auto;font-weight:600;font-size:.74rem;color:var(--ink-light);white-space:nowrap;}
#est-app .reg-tot{font-weight:800;color:var(--verde-ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
#est-app tbody.reg-giorno.chiuso tr:not(.reg-testa){display:none;}
#est-app .reg-tutti{display:inline-flex;gap:6px;margin-left:auto;}
#est-app .reg-gc{display:none;}
@media(max-width:768px){
  #est-app .tab-schede tr.reg-testa{display:block;padding:0;}
  #est-app .tab-schede tr.reg-testa td{display:block;width:100%;}
  #est-app .reg-testa-btn{padding:12px 14px;}
  #est-app .reg-tutti{margin-left:0;}
  /* Voci compatte: operatrice, cliente e pagamento su una riga sola, senza
     etichette. Da cinque righe per voce a due. */
  /* a capo dopo l'importo: senza, un nome corto ("Sara") risalirebbe sulla
     prima riga accanto al trattamento */
  #est-app .registro-giorni tr:not(.reg-testa)::after{content:'';order:2;flex:0 0 100%;height:0;}
  /* il padding di .tab-schede tr (sistema.css) qui non arriva: il reset
     "#est-app *" di questo foglio pesa di piu' e lo azzera */
  #est-app .registro-giorni tbody tr:not(.reg-testa){padding:9px 12px;}
  #est-app .registro-giorni td[data-label]{flex:0 1 auto;margin-top:4px;gap:6px;}
  #est-app .registro-giorni td[data-label]::before{content:none;}
  #est-app .registro-giorni td[data-label]:not(:empty)+td[data-label]:not(:empty)::before{content:'·';flex:0 0 auto;letter-spacing:0;color:var(--t3);font-weight:700;}
  /* matita e cestino sulla prima riga, dopo l'importo (stesso order: li
     mette in fila l'ordine delle celle); il trattamento prende lo spazio che
     resta e, se e' lungo, va a capo lui */
  #est-app .registro-giorni td[data-ruolo="titolo"]{flex:1 1 0;}
  #est-app .registro-giorni td[data-ruolo="azioni"]{order:2;flex:0 0 auto;margin:0;gap:6px;align-self:center;}
  #est-app .registro-giorni td[data-ruolo="azioni"] .btn{min-height:32px;min-width:34px;padding:4px 8px;}
}
@media(max-width:480px){
  /* "Mer 30": il mese e' gia' il titolo della pagina */
  #est-app .reg-gl,#est-app .reg-gm{display:none;}
  #est-app .reg-gc{display:inline;}
}
#est-app .tratt-lb{margin-top:12px;}
#est-app .tratt-lb-item{display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--surface-alt);border-radius:8px;margin-bottom:5px;font-size:.8rem;}
#est-app .tratt-lb-nome{flex:1;font-weight:600;color:var(--ink-mid);}
#est-app .tratt-lb-bar-wrap{flex:1.5;height:6px;background:var(--border);border-radius:100px;overflow:hidden;}
#est-app .tratt-lb-bar{height:100%;border-radius:100px;background:var(--success);}
#est-app .tratt-lb-count{font-size:.72rem;color:var(--ink-light);min-width:28px;text-align:right;}
#est-app .tratt-lb-amt{font-weight:700;color:var(--success);min-width:80px;text-align:right;}
/* Edit entrata modal */
#est-app .edit-entrata-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:12px;}
#est-app .edit-entrata-overlay.hidden{display:none;}
#est-app .edit-entrata-modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:460px;padding:22px;box-sizing:border-box;}
#est-app .edit-entrata-modal h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:16px;}

/* TASSE */
#est-app .tasse-section{margin-top:13px;padding:12px;background:var(--gold-light);border-radius:10px;border:1px solid rgba(201,168,76,.25);}
#est-app .tasse-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
#est-app .tasse-label{font-size:.76rem;font-weight:700;color:#7a6010;}
#est-app .tasse-value{font-size:.92rem;font-weight:700;color:var(--gold);}
#est-app input[type="range"]{width:100%;accent-color:var(--gold);cursor:pointer;}
#est-app .tasse-info{display:flex;justify-content:space-between;margin-top:4px;font-size:.7rem;color:#8a6510;}

/* SPESE GROUPS */
#est-app .spesa-group{margin-bottom:6px;}
#est-app .spesa-group summary{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;background:var(--surface-alt);border-radius:8px;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--ink-mid);list-style:none;transition:background .15s;}
#est-app .spesa-group summary:hover{background:var(--rose-pale);}
#est-app .spesa-group[open] summary{border-radius:8px 8px 0 0;background:var(--rose-pale);color:var(--ink);}
#est-app .spesa-group-total{font-weight:700;color:var(--danger);}
#est-app .spesa-items{border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;}
#est-app .spesa-item{display:flex;align-items:center;justify-content:space-between;padding:6px 11px;font-size:.78rem;color:var(--ink-light);border-bottom:1px solid var(--border);}
#est-app .spesa-item:last-child{border-bottom:none;}
#est-app .no-spese{color:var(--ink-light);font-size:.875rem;font-style:italic;padding:16px 0;text-align:center;}

/* NOTE */
#est-app .note-section{margin-top:16px;background:var(--surface);border-radius:var(--radius);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow);}
#est-app .note-title{font-size:.95rem;font-weight:700;margin-bottom:9px;color:var(--ink);}
#est-app textarea.form-control{min-height:75px;resize:vertical;}

/* PROMEMORIA */
#est-app .reminder-list{display:flex;flex-direction:column;gap:6px;}
#est-app .reminder-item{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--surface-alt);border-radius:8px;border:1px solid var(--border);font-size:.875rem;}
#est-app .reminder-item.done{opacity:.5;}#est-app .reminder-item.done .reminder-text{text-decoration:line-through;}
#est-app .reminder-text{flex:1;color:var(--ink-mid);}
#est-app .reminder-date{font-size:.72rem;color:var(--ink-light);white-space:nowrap;}
#est-app .reminder-check{cursor:pointer;accent-color:var(--rose);width:15px;height:15px;}
#est-app .reminder-del{background:none;border:none;cursor:pointer;color:var(--ink-light);padding:2px 4px;font-size:.9rem;}
#est-app .reminder-del:hover{color:var(--danger);}
#est-app .reminder-form{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;}
#est-app .reminder-form input{flex:1;min-width:120px;}

/* COMPARE PAGE */
#est-app .compare-year-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px;}
#est-app .compare-year-row .form-group{min-width:130px;}
#est-app .compare-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
#est-app .compare-kpi{background:var(--surface);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;}
#est-app .compare-kpi-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);margin-bottom:8px;}
#est-app .compare-kpi-row{display:flex;justify-content:center;gap:18px;}
#est-app .compare-kpi-item{text-align:center;}
#est-app .compare-kpi-year{font-size:.65rem;color:var(--ink-light);margin-bottom:2px;}
#est-app .compare-kpi-val{font-size:1.05rem;font-weight:700;}

/* SETTINGS */
#est-app .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#est-app .cat-item{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--surface-alt);border-radius:8px;border:1px solid transparent;transition:border-color .15s;margin-bottom:5px;}
#est-app .cat-item:hover{border-color:var(--border);}
#est-app .cat-item-name{flex:1;font-size:.875rem;color:var(--ink-mid);}
#est-app .cat-item label{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:.72rem;color:var(--ink-light);}
#est-app .helper-text{font-size:.75rem;color:var(--ink-light);margin-bottom:11px;line-height:1.5;}

/* FILTERS */
#est-app .filters-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-end;}
#est-app .filters-row .form-group{min-width:135px;}

/* SALDO */
#est-app .saldo-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px;}
#est-app .saldo-card{background:var(--surface-alt);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border);text-align:center;}
#est-app .saldo-card .saldo-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);margin-bottom:7px;}
#est-app .saldo-card input{text-align:center;font-size:1.15rem;font-weight:700;}
#est-app .saldo-input-wrap{display:flex;align-items:center;justify-content:center;gap:6px;}
#est-app .euro-sym{font-size:1.2rem;font-weight:700;color:var(--ink-light);}

/* RIEPILOGO TABLE */
#est-app .riepilogo-table th:first-child, #est-app .riepilogo-table td:first-child{position:sticky;left:0;z-index:5;min-width:160px;background:var(--surface);}
#est-app .riepilogo-table thead th:first-child{background:var(--surface-alt);}

/* EMPTY */
#est-app .empty-state{text-align:center;padding:36px 20px;color:var(--ink-light);}
#est-app .empty-icon{font-size:2.4rem;margin-bottom:9px;opacity:.32;}

/* ANIMATIONS */
#est-app .fade-in{animation:fadeIn .3s ease forwards;}
@keyframes fadeIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}

/* MOBILE */
@media(max-width:900px){
  #est-app #sidebar{transform:translateX(-100%);}
  #est-app #sidebar.open{transform:translateX(0);}
  #est-app #sidebar.collapsed{transform:translateX(-100%);}
  #est-app #main{margin-left:0!important;}
  #est-app .stats-row{grid-template-columns:repeat(2,1fr);}
  #est-app .charts-grid{grid-template-columns:1fr;}
  #est-app .month-grid{grid-template-columns:1fr;}
  #est-app .settings-grid{grid-template-columns:1fr;}
  #est-app .saldo-row{grid-template-columns:1fr;}
  #est-app .compare-kpi-grid{grid-template-columns:repeat(2,1fr);}
  #est-app #page-content{padding:13px;}
}
@media(max-width:500px){
  #est-app .stats-row{grid-template-columns:1fr;}
  #est-app .form-row{grid-template-columns:1fr;}
  #est-app .filters-row{flex-direction:column;}
  #est-app .compare-kpi-grid{grid-template-columns:1fr;}
}
/* Fix #M1 — topbar su schermi molto stretti (≤ 420px):
   nascondi il badge anno (già visibile nel titolo) e comprimi autosave */
@media(max-width:420px){
  #est-app .topbar-year-badge{display:none;}
  #est-app #autosave .as-dot{margin-right:0;}
  #est-app #autosave span:not(.as-dot){display:none;} /* mostra solo il pallino verde */
  #est-app .btn-topbar{padding:6px 8px;font-size:.72rem;gap:3px;}
  #est-app #topbar{padding:0 10px;}
  #est-app .topbar-left{gap:8px;}
  #est-app .topbar-right{gap:6px;}
}

/* ── ADATTAMENTO A SCHERMI STRETTI ──────────────────────────────────
   Il markup della Contabilità è generato da JavaScript con stili inline
   (una quarantina di griglie a colonne fisse e una quindicina di larghezze
   minime). Uno style="" batte qualunque regola del foglio, media query
   comprese: per questo le griglie qui sopra NON collassavano davvero e il
   contenuto usciva dallo schermo pur essendo il CSS responsive già corretto.
   Le regole seguenti neutralizzano quegli stili solo sotto la soglia mobile. */
/* Vale a OGNI dimensione: un figlio di griglia ha min-width:auto e non scende
   sotto la larghezza del proprio contenuto, così una colonna si prendeva tutto
   lo spazio e l'altra veniva schiacciata (nel mese la colonna spese finiva a
   223px e il testo veniva tagliato; nel magazzino la classifica usciva del tutto). */
#est-app .month-grid>*,
#est-app .settings-grid>*,
#est-app .saldo-row>*,
#est-app .stats-row>*,
#est-app .charts-grid>*,
#est-app .compare-kpi-grid>*,
#est-app .form-row>*,
#est-app .entrate-section,
#est-app .spese-section,
#est-app .fade-in>*,
/* Anche le celle delle griglie scritte inline dal JavaScript. Serve soprattutto
   ai grafici: ApexCharts fissa la larghezza in pixel al momento del disegno e
   non la ricalcola più. Se la cella si dimensiona sul contenuto e il contenuto
   è il grafico, la larghezza è indeterminata e la libreria ripiega sui suoi
   300px di default, che su uno schermo da 360 non ci stanno. Così invece la
   cella ha una larghezza propria e il grafico ci si adatta. */
#est-app [style*="grid-template-columns"]>*{ min-width:0; }

/* Le tabelle larghe non si comprimono: scorrono dentro la loro scheda */
#est-app .card:has(table){ overflow-x:auto; }

@media(max-width:900px){
  #est-app [style*="min-width"]{ min-width:0 !important; }
}

@media(max-width:560px){
  /* Colonne fisse imposte inline: su telefono una sola colonna */
  #est-app [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* LEADERBOARD */
#est-app .leaderboard-wrap{margin-top:4px;}
#est-app .leaderboard-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:7px;transition:all .15s;}
#est-app .leaderboard-item:hover{border-color:var(--rose);transform:translateX(2px);}
#est-app .lb-rank{font-size:1.05rem;font-weight:700;width:28px;text-align:center;flex-shrink:0;}
/* min-width:0 perché un elemento flex non scende sotto la larghezza del proprio
   testo: su schermo stretto il nome della categoria non andava a capo e la riga
   sbordava, schiacciando la barra a zero.
   (1.85) Ma con flex:1 contro flex:2 della barra, su un telefono al nome
   restavano 35px e si spezzava lettera per lettera ("Affi/tto"). Ora la riga
   va a capo da sola quando non c'e' posto (flex-wrap, nessuna media query):
   sopra il numero e il nome, sotto barra, percentuale e cifra. */
#est-app .lb-cat{flex:1 1 150px;min-width:0;overflow-wrap:anywhere;font-size:.875rem;font-weight:600;color:var(--ink-mid);}
#est-app .lb-bar-wrap{flex:2 1 120px;min-width:0;height:8px;background:var(--border);border-radius:100px;overflow:hidden;}
#est-app .lb-bar{height:100%;border-radius:100px;background:var(--rose);transition:width .6s cubic-bezier(.34,1.2,.64,1);}
#est-app .lb-amt{font-size:.9rem;font-weight:700;color:var(--danger);white-space:nowrap;min-width:90px;text-align:right;}
#est-app .lb-pct{font-size:.7rem;color:var(--ink-light);min-width:38px;text-align:right;}

/* CONFRONTO ridisegnato */
#est-app .confronto-header-card{background:linear-gradient(135deg,var(--rose-pale),rgba(91,140,245,.06));border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;}
#est-app .confronto-vs{font-size:1.4rem;font-weight:700;color:var(--ink-light);padding:0 10px;}
#est-app .sezione-confronto{margin-bottom:24px;}
#est-app .sezione-confronto-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-light);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
#est-app .sezione-confronto-title::after{content:'';flex:1;height:1px;background:var(--border);}
#est-app .confronto-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px;}
#est-app .confronto-block-header{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:13px 18px;background:var(--surface-alt);border-bottom:1px solid var(--border);align-items:center;gap:8px;}
#est-app .confronto-block-header .cb-label{font-size:.73rem;font-weight:700;color:var(--ink-light);text-transform:uppercase;letter-spacing:.05em;}
/* La cifra è una parola sola ("-1.240,00 €") e non va a capo: in una colonna da
   90px a 1.15rem sbordava. clamp() la rimpicciolisce quanto serve sugli schermi
   stretti e la lascia intera sul desktop. */
#est-app .confronto-block-header .cb-val{font-size:clamp(.82rem,2.1vw,1.15rem);font-weight:700;text-align:center;min-width:0;}
#est-app .confronto-month-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 18px;border-bottom:1px solid var(--border);}
#est-app .confronto-month-row:last-child{border-bottom:none;}
#est-app .confronto-month-row:hover{background:var(--rose-pale);}
#est-app .confronto-month-row .ml{font-size:.78rem;color:var(--ink-mid);}
#est-app .confronto-month-row .mv{font-size:.88rem;font-weight:600;text-align:center;}
#est-app .delta-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:100px;font-size:.73rem;font-weight:700;}
#est-app .delta-pill.su{background:rgba(46,204,143,.15);color:#1a9966;}
#est-app .delta-pill.giu{background:rgba(232,84,84,.12);color:var(--danger);}
#est-app .delta-pill.pari{background:rgba(122,122,154,.1);color:var(--ink-light);}
#est-app .confronto-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}

/* CSV */
#est-app .csv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
#est-app .csv-box{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;}
#est-app .csv-box h4{font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:5px;}
#est-app .csv-box p{font-size:.75rem;color:var(--ink-light);margin-bottom:8px;line-height:1.5;}
#est-app .csv-fmt{background:var(--ink);color:#a5f3d4;font-family:monospace;font-size:.68rem;padding:7px 9px;border-radius:6px;margin-bottom:8px;overflow-x:auto;white-space:pre;}

/* MODAL */
#est-app .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto;}
#est-app .modal-backdrop.hidden{display:none;}
#est-app .modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:740px;margin:auto;}
#est-app .modal-header{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;}
#est-app .modal-header h2{font-size:1.05rem;font-weight:700;color:var(--ink);flex:1;}
#est-app .modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-light);padding:3px 8px;border-radius:6px;transition:all .15s;line-height:1;}
#est-app .modal-close:hover{background:var(--rose-pale);color:var(--rose);}
#est-app .modal-body{padding:22px;max-height:80vh;overflow-y:auto;}
@media(max-width:620px){#est-app .csv-grid{grid-template-columns:1fr;}#est-app .confronto-chart-grid{grid-template-columns:1fr;}}

/* REDDITIVITÀ TRATTAMENTI */
#est-app .redd-toggle{display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:18px;max-width:320px;}
#est-app .redd-toggle-btn{flex:1;padding:8px 12px;border:none;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;touch-action:manipulation;background:var(--surface-alt);color:var(--ink-light);transition:all .15s;}
#est-app .redd-toggle-btn.active{background:var(--rose);color:#fff;}
#est-app .redd-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;}
#est-app .redd-card:hover{border-color:var(--rose);}
#est-app .redd-nome{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
#est-app .redd-nums{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;}
#est-app .redd-num{text-align:center;}
#est-app .redd-num-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light);font-weight:700;margin-bottom:2px;}
#est-app .redd-num-val{font-size:.95rem;font-weight:700;}
#est-app .redd-bar-wrap{width:100%;height:7px;background:var(--border);border-radius:100px;overflow:hidden;margin-top:8px;}
#est-app .redd-bar{height:100%;border-radius:100px;background:var(--success);transition:width .5s cubic-bezier(.34,1.2,.64,1);}
#est-app .redd-bar.neg{background:var(--danger);}
#est-app .redd-margin{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;}
#est-app .redd-margin.pos{background:rgba(46,204,143,.12);color:#1a9966;}
#est-app .redd-margin.neg{background:rgba(232,84,84,.1);color:var(--danger);}
#est-app .redd-summary{background:linear-gradient(135deg,var(--rose-pale),rgba(91,140,245,.06));border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:18px;}
@media(max-width:600px){#est-app .redd-nums{gap:10px;}#est-app .redd-card{grid-template-columns:1fr;}}
/* TEMPO INPUTS in impostazioni */
#est-app .tempo-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0;}
#est-app .tempo-input-group input{width:48px;padding:4px 5px;font-size:.75rem;text-align:center;border:1.5px solid var(--border);border-radius:6px;font-family:inherit;}
#est-app .tempo-input-group input:focus{border-color:var(--rose);outline:none;}
#est-app .tempo-label{font-size:.62rem;color:var(--ink-light);white-space:nowrap;}
/* BUNDLE FORM */
#est-app .bundle-form{background:rgba(91,140,245,.05);border:1.5px solid rgba(91,140,245,.2);border-radius:10px;padding:13px;margin-bottom:12px;}
#est-app .bundle-title{font-size:.75rem;font-weight:700;color:var(--info);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
#est-app .edit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:12px;}
#est-app .edit-modal-overlay.hidden{display:none;}
/* Fix #M3: box-sizing + width esplicito garantisce che il modal non esca mai dal viewport */
#est-app .edit-modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:480px;padding:24px;box-sizing:border-box;}
#est-app .edit-modal h3{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
#est-app .edit-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}

/* ── Integrazione layout: modulo Contabilità dentro la vista di ZapCalendar ── */
#vista-gestione{overflow:hidden;position:relative}
#est-app{flex:1;height:100%;min-height:0;overflow:hidden;position:relative}
#est-app #sidebar{position:absolute;top:0;left:0;bottom:0;height:100%;min-height:0}
#est-app #main{height:100%;min-height:0;overflow-y:auto}
@media (max-width:768px){#est-app #page-content{padding-bottom:150px}}
/* Sul telefono sotto c'e' la barra dell'app (62px, fissa, sopra a tutto):
   il menu della Contabilita' arrivava fino in fondo allo schermo e le sue
   ultime voci — Salva e Carica — ci finivano sotto, impossibili da toccare. */
@media (max-width:768px){#est-app #sidebar{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}}

/* FASE 17 — La Contabilità veste i colori e i font di ZapCalendar */
#est-app{
  --rose: var(--verde);
  --rose-dark: var(--verde-vivo);
  --rose-light: var(--verde-glow);
  --rose-pale: var(--verde-soft);
  --gold: var(--verde-vivo);
  --gold-light: var(--verde-soft);
  --ink: var(--t1);
  --ink-mid: var(--t2);
  --ink-light: var(--t3);
  /* La superficie delle schede segue quella dell'app. Era bianco fisso:
     in chiaro e' la stessa cosa (--card e' #FFFFFF), ma col tema scuro
     grafici, tabella del riepilogo, schede della redditivita', classifiche
     e bottoni del pagamento restavano riquadri bianchi — e i bottoni del
     pagamento, con la scritta chiara del tema scuro, illeggibili. */
  --surface: var(--card, #FFFFFF);
  --surface-alt: var(--sfondo);
  --border: var(--bordo);
  --success: var(--verde-vivo);
  --radius: var(--r, 16px);
  --radius-sm: 10px;
  font-family: var(--ff, 'Segoe UI', sans-serif);
}
#est-app h1, #est-app h2, #est-app #topbar-title{ font-family: var(--fd, inherit); }


/* =====================================================
   IL MENU DELLA CONTABILITA' QUANDO LA BARRA E' STRETTA
   =====================================================
   Stesso interruttore del menu principale (<html data-barra="stretta">):
   una volta stretto tutto, resta stretto tutto, e non si devono imparare
   due comandi diversi. Il tasto hamburger continua a fare la sua cosa —
   far sparire il menu del tutto — che e' un gesto diverso e serve.

   Qui le voci avevano quasi tutte solo la scritta: senza icona, stringendo,
   sarebbero rimaste delle righe vuote. Adesso ne hanno una tutte.

   I mesi restano su due colonne con la sigla di tre lettere: un'icona per
   "Marzo" non vorrebbe dire niente, mentre "Mar" si legge anche a 32px ed
   e' la cosa che si cambia piu' spesso.

   Sotto i 900px non si applica niente: li' il menu e' un pannello che entra
   da sinistra col hamburger, e stretto non avrebbe senso.                  */
@media (min-width: 901px) {
  :root[data-barra="stretta"] #est-app #sidebar { width: 72px; transition: width .18s ease, transform .3s cubic-bezier(.4,0,.2,1); }
  :root[data-barra="stretta"] #est-app #main { margin-left: 72px; }

  :root[data-barra="stretta"] #est-app .nav-testo,
  :root[data-barra="stretta"] #est-app .sidebar-section-label,
  :root[data-barra="stretta"] #est-app .year-selector-label,
  :root[data-barra="stretta"] #est-app #year-chips,
  :root[data-barra="stretta"] #est-app .sidebar-logo h1,
  :root[data-barra="stretta"] #est-app .sidebar-logo .tagline { display: none; }

  :root[data-barra="stretta"] #est-app .sidebar-logo { padding: 14px 6px 12px; text-align: center; }
  :root[data-barra="stretta"] #est-app .nav-item {
    display: flex; align-items: center; justify-content: center;
    padding: 11px 0; gap: 0;
  }
  :root[data-barra="stretta"] #est-app .nav-item .ic { margin: 0; }

  /* L'anno: restano le frecce e il numero, senza etichetta ne' pasticche */
  :root[data-barra="stretta"] #est-app .year-selector-wrap { padding: 8px 6px; }
  :root[data-barra="stretta"] #est-app .year-selector { gap: 2px; }
  :root[data-barra="stretta"] #est-app .year-display { font-size: .82rem; }
  :root[data-barra="stretta"] #est-app .year-btn { padding: 2px 4px; }

  /* I mesi: due colonne strette, la sigla si legge lo stesso */
  :root[data-barra="stretta"] #est-app .sidebar-months { padding: 3px 5px; gap: 3px; }
  :root[data-barra="stretta"] #est-app .nav-month { padding: 7px 2px; font-size: .68rem; text-align: center; }

  /* Salva e Carica in fondo: restano le icone */
  :root[data-barra="stretta"] #est-app .sidebar-bottom { flex-direction: column; padding: 10px 6px; gap: 5px; }
  :root[data-barra="stretta"] #est-app .btn-sidebar-action {
    justify-content: center; padding: 9px 0; font-size: 0; gap: 0;
  }
  :root[data-barra="stretta"] #est-app .btn-sidebar-action .ic { font-size: initial; }
}


/* Le pasticche degli anni: lo stile stava scritto dentro il tag in index.html,
   e li' vinceva su tutto — a menu stretto non si potevano nascondere. */
#est-app #year-chips{ margin-top:7px; display:flex; gap:5px; flex-wrap:wrap; }

/* Col dito anche i mesi del menu stretto devono essere prendibili: 28px
   sono pochi, e i mesi sono la cosa che si cambia piu' spesso. */
@media (min-width: 901px) and (pointer: coarse) {
  :root[data-barra="stretta"] #est-app .nav-month { padding: 11px 2px; }
  :root[data-barra="stretta"] #est-app .nav-item { padding: 13px 0; }
}