/* =====================================================================
   Daily Budget — foglio di stile
   Ottimizzato per iPhone 15 Pro Max (430 × 932 pt), tema scuro.
   ===================================================================== */

:root{
  --bg:            #080B0A;
  --bg-elev:       #101614;
  --card:          #131A18;
  --card-2:        #18211E;
  --line:          rgba(255,255,255,.075);
  --line-strong:   rgba(255,255,255,.14);

  --text:          #EDF3F0;
  --text-dim:      #93A49D;
  --text-faint:    #63736C;

  --mint:          #34E0A1;
  --mint-soft:     #7CF2C4;
  --mint-dim:      rgba(52,224,161,.14);
  --amber:         #F7C86B;
  --amber-dim:     rgba(247,200,107,.14);
  --red:           #FF6B72;
  --red-dim:       rgba(255,107,114,.14);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;

  --pad: 20px;

  /* I ritagli dello schermo, con un tetto massimo. In standalone iOS dichiara
     un inset inferiore ben più grande dei 34pt dell'home indicator, e senza
     limite la barra in basso si gonfia fino a mangiarsi il contenuto. */
  --sb: min(env(safe-area-inset-bottom, 0px), 34px);
  --st: min(env(safe-area-inset-top, 0px), 62px);

  --shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  --ease: cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* ─────────── impalcatura ───────────
   Il guscio non scorre mai: body è una colonna alta quanto la finestra, il
   contenuto sta in mezzo e scorre per conto suo, la tab bar è l'ultimo
   elemento della colonna.
   ⚠️ La tab bar NON è position:fixed e non deve tornare a esserlo. Lo era,
   agganciata a un'altezza di finestra che iOS al primo disegno non ha ancora
   deciso: si vedeva staccata dal fondo all'apertura e si sistemava solo
   cambiando scheda. Da ultimo elemento di una colonna che finisce dove
   finisce la finestra non c'è più niente da calcolare. */
html,body{ height:100%; }

body{
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-text-size-adjust:100%;
  margin:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(52,224,161,.10) 0%, rgba(52,224,161,0) 55%),
    radial-gradient(90% 50% at 90% 8%, rgba(124,242,196,.05) 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

button,input{ font:inherit; color:inherit; }
button{ border:0; background:none; cursor:pointer; }
[hidden]{ display:none !important; }

.label{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:600;
}
.hint{ margin:8px 0 0; font-size:13px; color:var(--text-dim); line-height:1.45; }
.foot-note{ margin:18px 0 0; text-align:center; font-size:12px; color:var(--text-faint); }

.value-xl{ display:block; font-size:34px; font-weight:800; letter-spacing:-.03em; }
.value-lg{ display:block; font-size:27px; font-weight:750; letter-spacing:-.02em; }
.value-md{ display:block; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.value-sm{ display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.neg{ color:var(--red); }
.pos{ color:var(--mint); }

/* ------------------------------------------------------------ ACCESSO */
.gate{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--st) + 24px) 28px calc(var(--sb) + 24px);
}
.gate-inner{ width:100%; max-width:360px; text-align:center; animation:rise .5s var(--ease) both; }
.brand-mark{ margin-bottom:20px; filter:drop-shadow(0 8px 24px rgba(52,224,161,.35)); }
.gate h1{ margin:0 0 10px; font-size:31px; font-weight:800; letter-spacing:-.03em; }
.gate-sub{ margin:0 0 28px; color:var(--text-dim); font-size:15px; line-height:1.5; }
#gate-form{ display:grid; gap:12px; }
#gate-key{
  width:100%; padding:16px 18px;
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:var(--r-md); text-align:center; letter-spacing:.12em;
}
#gate-key:focus{ outline:none; border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-dim); }
.gate-error{ min-height:20px; margin:14px 0 0; color:var(--red); font-size:14px; }

/* ---------------------------------------------------------------- APP */
.app{
  flex:1; min-height:0;
  width:100%; max-width:480px; margin:0 auto;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* L'unica parte che scorre. overflow-x:hidden non è decorativo: con un solo
   asse dichiarato l'altro diventa auto da solo. */
.scroller{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  padding:0 var(--pad) 20px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

.topbar{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(var(--st) + 10px) var(--pad) 12px;
  background:var(--bg);
}
.topbar-title{ text-align:center; line-height:1.15; }
.topbar-title span{ display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; text-transform:capitalize; }
.topbar-title small{ display:block; font-size:11px; color:var(--text-faint); margin-top:2px; }
.topbar-title small.warn{ color:var(--amber); }
.icon-btn{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; color:var(--text-dim);
  background:var(--card); border:1px solid var(--line);
  transition:transform .15s var(--ease), color .15s;
}
.icon-btn:active{ transform:scale(.9); color:var(--mint); }

.view{ display:none; animation:fade .28s var(--ease) both; }
.view.is-active{ display:flex; flex-direction:column; flex:1 0 auto; }

/* Su "Oggi" il contenuto si distribuisce sull'altezza invece di ammucchiarsi
   in alto: l'anello respira e il pulsante scende verso la tab bar. */
#today-body{ display:flex; flex-direction:column; flex:1 0 auto; }
#today-body .ring-wrap{ margin-top:auto; }
#today-body .grid-3{ margin-top:auto; }
#today-empty{ margin:auto 0; }
.view-title{ margin:6px 0 4px; font-size:28px; font-weight:800; letter-spacing:-.03em; }
.view-sub{ margin:0 0 18px; color:var(--text-dim); font-size:14px; }
.section-title{ margin:26px 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }

/* ------------------------------------------------------------- ANELLO */
.ring-wrap{
  position:relative; width:258px; height:258px;
  margin:4px auto 6px;
  animation:rise .5s var(--ease) both;
}
.ring{ width:100%; height:100%; overflow:visible; }
.ring-track{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:15; }
.ring-value{
  fill:none; stroke:url(#ringGrad); stroke-width:15; stroke-linecap:round;
  stroke-dasharray:590.6; stroke-dashoffset:590.6;
  filter:drop-shadow(0 0 14px rgba(52,224,161,.4));
  transition:stroke-dashoffset .9s var(--ease), stroke .3s;
}
.ring-value.over{ stroke:var(--red); filter:drop-shadow(0 0 14px rgba(255,107,114,.4)); }
.ring-value.warn{ stroke:var(--amber); filter:drop-shadow(0 0 14px rgba(247,200,107,.4)); }
.ring-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 34px;
}
.ring-caption{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.ring-amount{
  display:block; margin:6px 0 2px;
  font-size:clamp(38px, 13vw, 52px); font-weight:800; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.ring-sub{ font-size:13px; color:var(--text-dim); }

.status-pill{
  display:block; width:fit-content; max-width:100%;
  margin:2px auto 18px; padding:7px 15px;
  border-radius:999px; font-size:13px; font-weight:600;
  background:var(--mint-dim); color:var(--mint);
  border:1px solid rgba(52,224,161,.22);
}
.status-pill.warn{ background:var(--amber-dim); color:var(--amber); border-color:rgba(247,200,107,.22); }
.status-pill.over{ background:var(--red-dim);   color:var(--red);   border-color:rgba(255,107,114,.22); }

/* --------------------------------------------------------------- CARD */
.card{
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-row .right,.goal-target{ text-align:right; }
.card-total{ text-align:center; padding:22px 18px; }
.card-projection .value-lg{ margin-top:6px; }
.card-projection .value-lg.neg{ color:var(--red); }
.card-goal .bar{ margin-top:14px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.mini-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:13px 10px; text-align:center;
}
.mini-card .label{ font-size:10.5px; margin-bottom:5px; }
.mini-card .value-sm{ font-variant-numeric:tabular-nums; }

.line{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.line:last-child{ border-bottom:0; }
.line span{ color:var(--text-dim); }
.line b{ font-weight:700; font-variant-numeric:tabular-nums; }
.line-total{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line-strong); border-bottom:0; }
.line-total span{ color:var(--text); font-weight:600; }
.line-total b{ color:var(--mint); font-size:18px; }

.progress-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.progress-head .value-xl{ font-variant-numeric:tabular-nums; }
.progress-foot{ display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px; color:var(--text-dim); }

.bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar-lg{ height:11px; }
.bar-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--mint), var(--mint-soft));
  transition:width .8s var(--ease), background .3s;
}
.bar-amber{ background:linear-gradient(90deg, var(--amber), #FFE0A3); }
.bar-red{ background:linear-gradient(90deg, var(--red), #FF9EA3); }

.banner{
  display:flex; align-items:center; gap:12px;
  background:var(--amber-dim); border:1px solid rgba(247,200,107,.25);
  border-radius:var(--r-md); padding:14px; margin-bottom:14px;
}
.banner p{ margin:0; font-size:13.5px; color:#FFE3B0; flex:1; }

/* -------------------------------------------------------------- LISTE */
.list{ display:grid; gap:10px; }
.row{
  display:flex; align-items:center; gap:13px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px;
  transition:transform .15s var(--ease), border-color .2s;
}
.row:active{ transform:scale(.985); }
.row.is-off{ opacity:.42; }
.row-main{ flex:1; min-width:0; }
.row-main b{ display:block; font-size:15.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-main small{ display:block; font-size:12.5px; color:var(--text-faint); margin-top:2px; }
.row-amount{ font-size:16px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.row-amount.pos{ color:var(--mint); }
.row-amount.neg{ color:var(--red); }
.row-chevron{ color:var(--text-faint); flex:none; }
.list-empty{ text-align:center; color:var(--text-faint); font-size:14px; padding:26px 10px; }

/* ------------------------------------------------------------ GRAFICO */
.chart{ margin-top:16px; }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart-bar{ fill:var(--mint); opacity:.85; }
.chart-bar.over{ fill:var(--red); }
.chart-goal{ stroke:rgba(255,255,255,.3); stroke-width:1; stroke-dasharray:3 4; }
.chart-axis{ fill:var(--text-faint); font-size:9px; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:11.5px; color:var(--text-faint); }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-mint{ background:var(--mint); }
.dot-red{ background:var(--red); }
.dot-line{ width:12px; height:0; border-top:1px dashed rgba(255,255,255,.5); border-radius:0; }

/* ------------------------------------------------------------ BOTTONI */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:var(--r-md);
  font-size:15.5px; font-weight:650; letter-spacing:-.01em;
  transition:transform .14s var(--ease), opacity .2s, background .2s;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:linear-gradient(180deg, var(--mint-soft), var(--mint)); color:#04120C; box-shadow:0 12px 26px -14px rgba(52,224,161,.8); }
.btn-secondary{ background:var(--card-2); border:1px solid var(--line-strong); color:var(--text); }
.btn-ghost{ color:var(--text-dim); }
.btn-ghost.danger{ color:var(--red); }
.btn-lg{ padding:17px 24px; font-size:16.5px; border-radius:var(--r-lg); }
.btn-block{ display:flex; width:100%; margin-bottom:10px; }
.btn-small{ padding:9px 14px; font-size:13.5px; border-radius:var(--r-sm); background:rgba(255,255,255,.1); flex:none; }
#btn-update{ margin-top:4px; }
#btn-add-fixed{ margin-top:6px; }

.empty-state{ text-align:center; padding:56px 20px; animation:rise .45s var(--ease) both; }
.empty-emoji{ font-size:46px; margin-bottom:14px; }
.empty-state h2{ margin:0 0 8px; font-size:23px; font-weight:750; letter-spacing:-.02em; }
.empty-state p{ margin:0 0 24px; color:var(--text-dim); font-size:15px; }

/* ------------------------------------------------------------- TABBAR */
/* ⚠️ In colonna, non position:fixed. Vedi il commento sull'impalcatura. */
.tabbar{
  flex:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:8px 10px calc(8px + var(--sb));
  background:rgba(10,14,13,.96);
  border-top:1px solid var(--line);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0; color:var(--text-faint);
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  transition:color .2s;
}
.tab svg{ width:23px; height:23px; }
.tab.is-active{ color:var(--mint); }
.tab:active{ opacity:.6; }

/* -------------------------------------------------------------- SHEET */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); animation:fade .25s var(--ease) both; }
.sheet-panel{
  position:relative; width:100%; max-width:480px;
  max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#182120,#101614);
  border:1px solid var(--line-strong); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:10px 20px calc(var(--sb) + 22px);
  animation:slideUp .34s var(--ease) both;
}
.sheet-grabber{ width:40px; height:4px; border-radius:99px; background:rgba(255,255,255,.2); margin:0 auto 16px; }
.sheet-title{ margin:0 0 6px; font-size:22px; font-weight:750; letter-spacing:-.02em; }
.sheet-sub{ margin:0 0 20px; font-size:14px; color:var(--text-dim); }
.sheet-actions{ display:flex; gap:10px; margin-top:22px; }
.sheet-actions .btn{ flex:1; }
.sheet-actions .btn-ghost{ flex:0 0 auto; }

.amount-field{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:var(--r-md); padding:14px 18px;
}
.amount-field .cur{ font-size:26px; font-weight:700; color:var(--text-faint); }
.amount-field input{
  flex:1; min-width:0; width:100%; background:none; border:0; outline:none;
  font-size:34px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.amount-field.sm{ padding:11px 15px; }
.amount-field.sm .cur{ font-size:18px; }
.amount-field.sm input{ font-size:22px; font-weight:700; }
.amount-field:focus-within{ border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-dim); }

.text-field{
  width:100%; padding:13px 16px; margin-top:12px;
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:var(--r-md); outline:none; font-size:15px;
}
.text-field::placeholder{ color:var(--text-faint); }
.text-field:focus{ border-color:var(--mint); box-shadow:0 0 0 4px var(--mint-dim); }

.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--text-dim); }
.field .text-field{ margin-top:0; }

.quick-row{ display:flex; gap:8px; margin-top:14px; }
.chip{
  flex:1; padding:11px 0; border-radius:var(--r-sm);
  background:var(--card); border:1px solid var(--line-strong);
  font-size:14.5px; font-weight:650; color:var(--text);
  transition:transform .12s var(--ease), background .2s;
}
.chip:active{ transform:scale(.93); background:var(--card-2); }
.chip-plus{ color:var(--mint); border-color:rgba(52,224,161,.3); }
.quick-hint{ margin:9px 0 0; font-size:12px; color:var(--text-faint); }

.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; font-size:15px; }
.switch{
  appearance:none; -webkit-appearance:none;
  width:50px; height:30px; flex:none; border-radius:99px;
  background:rgba(255,255,255,.13); position:relative;
  transition:background .25s var(--ease);
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%; background:#fff;
  transition:transform .25s var(--ease);
}
.switch:checked{ background:var(--mint); }
.switch:checked::after{ transform:translateX(20px); }

.preview{
  margin-top:18px; padding:15px;
  background:var(--mint-dim); border:1px solid rgba(52,224,161,.2);
  border-radius:var(--r-md); font-size:14.5px; line-height:1.5; color:var(--mint-soft);
}
.preview b{ font-weight:800; }
.preview.neutral{ background:rgba(255,255,255,.05); border-color:var(--line); color:var(--text-dim); }
.preview.alert{ background:var(--red-dim); border-color:rgba(255,107,114,.25); color:#FFC2C5; }

/* -------------------------------------------------------------- TOAST */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sb) + 86px);
  z-index:90; max-width:88vw;
  padding:12px 20px; border-radius:99px;
  background:rgba(24,33,31,.96); border:1px solid var(--line-strong);
  font-size:14px; font-weight:600; box-shadow:var(--shadow);
  animation:rise .3s var(--ease) both;
}
.toast.err{ border-color:rgba(255,107,114,.4); color:#FFC2C5; }

/* ---------------------------------------------------------- ANIMAZIONI */
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes slideUp{ from{ transform:translateY(100%) } to{ transform:none } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Schermi piccoli (SE / mini) */
@media (max-width:380px){
  :root{ --pad:16px; }
  .ring-wrap{ width:226px; height:226px; }
}

/* Riepilogo entrate/uscite fisse nella scheda "Fisse" */
.net-split{
  display:flex; justify-content:center; gap:20px;
  margin:10px 0 4px; font-size:13.5px; color:var(--text-dim);
}
.net-split b{ font-weight:750; font-variant-numeric:tabular-nums; }
#btn-add-income{ margin-top:6px; }