/* Kansas — stili dell'app. Caricato da index.html. */
:root {
  --brand:#5D0FC3;
  --bg:#3D0A87;          /* main app surface — deep brand purple */
  --bg-deep:#2A0764;     /* tabbar / darker accents */
  --fg:#ffffff;
  --muted:rgba(255,255,255,0.62);
  --line:rgba(255,255,255,0.18);
  --line2:rgba(255,255,255,0.28);
  --card:rgba(255,255,255,0.10);   /* "frosted" card on purple */
  --pos:#5cf2a3;         /* slightly brighter green for purple bg contrast */
  --neg:#ff8a8a;         /* slightly brighter red for purple bg contrast */
  --warn:#fbbf24;
  --accent:#b98bff;      /* giroconti, focus, sync bar */
  --page:#1a0533;        /* desktop preview body bg */
  --frame:#2A0764;       /* desktop preview phone frame */
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--page); color:#999;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
.stage { min-height:100vh; padding:32px 16px 80px; display:flex;
  flex-direction:column; align-items:center; gap:24px; }

.phone { width:380px; max-width:100%; background:#0d0220; border-radius:44px; padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--frame); position:relative; }
.phone-screen { background:var(--bg); color:var(--fg); border-radius:32px; overflow:hidden;
  height:780px; font-size:15px; line-height:1.4; position:relative; display:flex; flex-direction:column; }

/* Mobile: app full-screen, no phone frame, respect iOS safe areas */
@media (max-width:640px) {
  html,body { background:var(--bg); }
  .stage { padding:0; min-height:100vh; gap:0; }
  .phone { width:100%; max-width:100%; background:transparent; border-radius:0; padding:0;
    box-shadow:none; }
  .phone-screen { border-radius:0; height:100vh;
    height:100dvh; min-height:600px; }
  /* NIENTE override di .app-header qui: questo blocco @media sta PRIMA
     della regola base di .app-header e a parità di specificità vince
     l'ultima scritta, quindi l'override non arrivava mai in fondo.
     Il padding-top vive nella regola base (vedi più sotto). */
}

/* Login overlay */
.login-overlay { position:fixed; inset:0; background:#5D0FC3; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  gap:24px; }
.login-overlay.hidden { display:none; }
.login-logo { width:104px; height:104px; display:block; }
.login-logo svg { width:100%; height:100%; display:block; }
.login-card { width:100%; max-width:340px; display:flex; flex-direction:column; gap:14px; }
.login-title { font-size:11px; font-weight:700; letter-spacing:0.32em;
  text-transform:uppercase; color:rgba(255,255,255,0.7); text-align:center; margin:0; }
.login-card .field { padding:0; border:none; gap:6px; }
.login-card .field-label { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.6); }
.login-card input[type=text],
.login-card input[type=password] { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2);
  color:#fff; padding:14px; font-family:inherit; font-size:16px; outline:none; width:100%;
  text-align:center; letter-spacing:0.1em; }
.login-card input[type=text]:focus,
.login-card input[type=password]:focus { border-color:#fff; }
.login-card input[type=text]::placeholder,
.login-card input[type=password]::placeholder { color:rgba(255,255,255,0.4); }
.login-submit { background:#fff; color:#5D0FC3; border:none; padding:16px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; cursor:pointer; margin-top:6px; }
.login-submit:active { transform:scale(0.98); }
.login-error { color:#fff; font-size:11px; text-align:center; min-height:14px;
  letter-spacing:0.18em; text-transform:uppercase; }
.login-overlay.shake .login-card { animation:shake 0.3s; }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-8px); }
  40%,80% { transform:translateX(8px); }
}

/* App header — brand block (logo + account) | active page | user */
/* Il padding-top sta qui e non nel @media mobile: quel blocco viene prima
   nel foglio e a parità di specificità perdeva sempre contro questa regola.
   Con viewport-fit=contain la status bar la riserva e la disegna iOS,
   quindi questo padding è solo aria sotto la barra di sistema. Il max()
   tiene buono anche chi l'inset lo riporta davvero (browser fuori da
   standalone).

   Storia del valore: 52px all'inizio, poi 16px "per compattare", poi di
   nuovo su. A 16px in standalone iOS lo header sta attaccato alla barra e
   il velo di leggibilità del sistema sfuma pill e badge dentro la status
   bar: si legge male. Si vede solo sul telefono, non in Playwright. Sotto
   i 36px torna il problema; non scendere senza guardarlo su iPhone. */
.app-header { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:max(env(safe-area-inset-top, 0px), 36px) 16px 12px;
  border-bottom:1px solid var(--line);
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }

.brand-block { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
.brand-logo { width:24px; height:24px; flex-shrink:0; color:var(--fg); display:block;
  background:transparent; border:none; padding:0; cursor:pointer; font-family:inherit; }
.brand-logo:active { transform:scale(0.92); }
.brand-logo svg { width:100%; height:100%; display:block; }

.acc-select { background:transparent; color:var(--fg); border:1px solid var(--line2);
  padding:7px 10px; font-size:14px; font-weight:600; font-family:inherit;
  outline:none; cursor:pointer; min-width:0; flex:0 1 auto; max-width:100%;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden; border-radius:8px; }
.acc-select:hover { border-color:var(--fg); }


/* User badge: small initial-pill on the right */
.user-badge { font-size:11px; font-weight:700; letter-spacing:0.05em;
  color:var(--fg); cursor:pointer; padding:0; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,0.10);
  border:1px solid var(--line2); font-family:inherit;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-badge:hover { background:rgba(255,255,255,0.18); border-color:var(--fg); }

.scroll { flex:1; overflow-y:auto; position:relative;
  padding-bottom:calc(100px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* Offline / sync queue banner */
.offline-banner { background:rgba(251,191,36,0.10); color:var(--warn);
  border-bottom:1px solid rgba(251,191,36,0.40); padding:10px 14px;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  text-align:center; }
.offline-banner .offline-retry { background:transparent; color:var(--warn);
  border:1px solid var(--warn); font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; padding:4px 8px; margin-left:6px;
  cursor:pointer; }
.offline-banner .offline-retry:hover { background:var(--warn); color:var(--bg); }

/* Pull-to-refresh indicator (mobile only) */
.ptr-indicator { position:absolute; top:0; left:0; right:0; z-index:6;
  display:none; align-items:center; justify-content:center;
  height:0; overflow:hidden; pointer-events:none;
  background:var(--bg-deep); color:var(--fg);
  font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; transition:height 0.18s ease-out; }
.ptr-indicator.ready .ptr-text { color:var(--pos); }
.ptr-indicator.refreshing .ptr-text::before { content:'↻ '; display:inline-block;
  animation:ptr-spin 0.8s linear infinite; transform-origin:center; }
@keyframes ptr-spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@media (max-width:640px) {
  .ptr-indicator { display:flex; }
}

.tabbar { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line2);
  background:var(--bg-deep); padding-bottom:calc(14px + env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.tabbar button { background:transparent; border:none; color:var(--muted); padding:14px 0 10px;
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:4px; transition:color 0.15s; }
.tabbar button.active { color:var(--fg); }
.tabbar button:active { transform:scale(0.95); }
.tabbar svg { width:20px; height:20px; }

.page { display:none; }
.page.active { display:block; }

.fab { position:absolute; right:calc(18px + env(safe-area-inset-right));
  bottom:calc(80px + env(safe-area-inset-bottom)); width:60px; height:60px;
  background:var(--fg); color:#000; border:none; border-radius:50%;
  font-size:30px; font-weight:300; line-height:1;
  box-shadow:0 8px 24px rgba(255,255,255,0.18); cursor:pointer; z-index:50;
  transition:transform 0.12s; }
.fab:hover { transform:scale(1.05); }
.fab:active { transform:scale(0.94); }

/* Analytics: una sola riga per la cassa di oggi (i dettagli vivono in Home) */
.cash-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:10px 16px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  border-bottom:1px solid var(--line); }
.cash-line .cl-total { display:flex; align-items:baseline; gap:8px; flex-shrink:0; }
.cash-line .cl-total .l { font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted); }
.cash-line .cl-total b { font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; }
.cash-line .cl-methods { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cash-line .cl-methods b { font-weight:600; color:var(--fg); }
.cash-line .pos { color:var(--pos); } .cash-line .neg { color:var(--neg); }

.filter-bar { background:rgba(251,191,36,0.10); border-bottom:1px solid rgba(251,191,36,0.40);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }
.filter-bar .lbl { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--warn); }
.filter-bar .val { font-size:14px; font-weight:700; color:var(--fg); margin-top:2px; }
.filter-bar button { background:transparent; border:1px solid var(--warn); color:var(--warn);
  padding:6px 10px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }

.balances { padding:16px; padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  display:flex; flex-direction:column; gap:12px; }
.balance-total { font-size:36px; font-weight:900; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1; }
.balance-total.pos { color:var(--pos); } .balance-total.neg { color:var(--neg); }
.balance-sub { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); margin-top:6px; }
/* Methods — one row per method so the list grows with custom methods and
   amounts never wrap (3 side-by-side cards broke at 5 digits). */
.balance-methods { display:flex; flex-direction:column; gap:0;
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.balance-row { display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; min-width:0; border-bottom:1px solid var(--line); }
.balance-row:last-child { border-bottom:none; }
.balance-row .m { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; min-width:0; }
.balance-row .m > span:not(.m-ico) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-ico { display:inline-flex; width:18px; height:18px; flex-shrink:0; color:var(--fg); }
.m-ico svg { width:100%; height:100%; display:block; }
/* Initial-letter pill for NRDC per-user rows */
.m-ico.person-ini { width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,0.10); border:1px solid var(--line2);
  align-items:center; justify-content:center; font-size:10px;
  font-weight:700; letter-spacing:0; color:var(--fg); }
.balance-row .c { font-size:10px; color:var(--muted); }
.balance-row .v { font-variant-numeric:tabular-nums; font-weight:700; font-size:14px;
  letter-spacing:-0.01em; }
.balance-row .v.pos { color:var(--pos); } .balance-row .v.neg { color:var(--neg); }

section { padding:16px; border-top:1px solid var(--line);
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
h2 { font-size:15px; font-weight:700; letter-spacing:-0.01em;
  margin:0 0 4px; color:var(--fg); }
.hint { font-size:12px; color:var(--muted); font-style:italic;
  margin-top:0; margin-bottom:12px; line-height:1.4; }

.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.section-head h2 { margin:0; }
.section-head .sh-right { display:flex; align-items:baseline; gap:10px; flex-shrink:0; }
.section-head .sh-period { color:var(--fg); font-size:10px; font-weight:700; letter-spacing:0.1em; }
.section-total { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em; }
.section-total.warn { color:var(--warn); }
.section-total.pos { color:var(--pos); }
.section-total.muted { color:var(--muted); }

/* Collapsible sections (arretrate/future/crediti). Default = collapsed,
   tap on the head expands. The total stays visible in the header so
   urgency (warn color) is always signalled even when the body is hidden. */
section.collapsible .section-head { cursor:pointer; user-select:none;
  padding:4px 0; gap:8px; }
section.collapsible .section-head h2 { display:flex; align-items:center; gap:6px; }
section.collapsible .section-head h2::before {
  content:'\203A'; display:inline-block; font-weight:700; color:var(--muted);
  transition:transform 0.18s ease; transform:rotate(0deg); width:10px; text-align:center; }
section.collapsible.is-open .section-head h2::before { transform:rotate(90deg); color:var(--fg); }
section.collapsible:not(.is-open) > .hint,
section.collapsible:not(.is-open) > [id$="-list"] { display:none; }

.tx-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:13px 0; border-bottom:1px solid var(--line);
  transition:background 0.15s; margin-left:-16px; margin-right:-16px;
  padding-left:16px; padding-right:16px; min-height:44px; position:relative; }
.tx-row[onclick]:hover { background:rgba(255,255,255,0.04); }
.tx-row[onclick]:active { background:rgba(255,255,255,0.10); }
.tx-row[onclick]::after { content:'›'; position:absolute; right:6px; top:50%;
  transform:translateY(-50%); color:var(--muted); font-size:18px; opacity:0.5; pointer-events:none; }
.tx-row[onclick] { padding-right:22px; }
.tx-row:last-child { border-bottom:none; }
.tx-row .d { font-size:11px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
.tx-row .t { font-weight:500; font-size:14px; }
.tx-row .a { grid-column:2; grid-row:1 / span 3; align-self:center;
  font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; }
.tx-row .a.pos { color:var(--pos); } .tx-row .a.neg { color:var(--neg); }
.tx-row .meta { font-size:11px; color:var(--muted); }

/* Dashboard tx search + quick filters */
.tx-search { position:relative; margin:8px 0 10px; }
.tx-search input { width:100%; padding:11px 36px 11px 12px;
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  font-family:inherit; font-size:16px; outline:none; }
.tx-search input:focus { border-color:var(--fg); }
.tx-search input::placeholder { color:var(--muted); font-size:13px; }
.tx-search-clear { position:absolute; right:6px; top:50%;
  transform:translateY(-50%); width:30px; height:30px;
  background:transparent; border:none; color:var(--muted);
  font-family:inherit; font-size:16px; cursor:pointer; display:none; }
.tx-search.has-text .tx-search-clear { display:block; }
.tx-search-clear:hover { color:var(--fg); }

/* One horizontally scrollable row that bleeds to the screen edges: the
   chips grow with every custom payment method, three wrapped rows ate
   the screen before the first transaction. */
/* Una riga sola, senza scroll: tre chip per il verso a sinistra e il
   metodo come pill-select a destra (stesso controllo di Analytics). Prima
   i metodi erano chip in una riga scorrevole e l'ultimo usciva tagliato
   dal bordo dello schermo. */
.tx-filters { display:flex; flex-wrap:nowrap; gap:5px; margin:0 0 12px;
  align-items:center; min-width:0; }
.tx-filters button { flex-shrink:0; background:transparent; color:var(--muted);
  border:1px solid var(--line); height:32px; padding:0 10px; font-family:inherit;
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; border-radius:8px; }
.tx-filters button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.tx-filters .pill-select { margin-left:auto; height:32px; font-size:10px;
  padding:0 24px 0 10px; background-position:right 8px center; max-width:46%;
  overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1; }

.show-more-btn { display:block; width:100%; margin:14px 0 4px;
  padding:14px; background:transparent; border:1px solid var(--line2);
  color:var(--fg); font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer;
  transition:background 0.15s; }
.show-more-btn:hover { background:rgba(255,255,255,0.08); border-color:var(--fg); }
.show-more-btn:active { transform:scale(0.99); }
.show-more-btn .show-more-meta { color:var(--muted); font-weight:500;
  letter-spacing:0.1em; text-transform:none; margin-left:4px; }

/* Pill-select (scope, metodo): stesso look dei bottoni del period nav */
.pill-select { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:8px; height:38px; padding:0 28px 0 12px; font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer; outline:none; -webkit-appearance:none; appearance:none; flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px; }
.pill-select:focus-visible { border-color:var(--fg); }
.pill-select.is-set { border-color:var(--fg); }

/* Period nav (‹ label › + scope) and the filter row (vs + metodo) */
.period-row { display:flex; flex-direction:column; align-items:stretch;
  gap:8px; padding:10px 16px 10px; border-bottom:1px solid var(--line);
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
.an-filters { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.period-nav { display:flex; align-items:center; gap:6px; width:100%; }
.period-nav button { background:transparent; border:1px solid var(--line2); color:var(--fg);
  width:38px; height:38px; font-size:20px; font-family:inherit; cursor:pointer;
  transition:background 0.15s; padding:0; line-height:1; border-radius:8px;
  flex-shrink:0; }
.period-nav button:not(:disabled):hover { background:rgba(255,255,255,0.10); }
.period-nav button:not(:disabled):active { background:rgba(255,255,255,0.18); transform:scale(0.95); }
.period-nav button:disabled { opacity:0.25; cursor:not-allowed; }
/* Period label is itself a button — tap to jump back to the current period.
   flex:1 lets it stretch across the available width between the arrows. */
.period-nav .label { font-size:14px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--fg); padding:8px 12px; flex:1 1 auto;
  height:38px; text-align:center; background:transparent;
  border:1px solid var(--line2); border-radius:8px; cursor:pointer;
  font-family:inherit; transition:background 0.15s; }
.period-nav .label:hover { background:rgba(255,255,255,0.06); border-color:var(--line); }
.period-nav .label.is-current { color:var(--pos); }

.compare-row { display:flex; align-items:center; gap:6px; flex-shrink:0; min-width:0; }
.cmp-label { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); flex-shrink:0; }
.cmp-seg { display:flex; gap:0; }
.cmp-seg button { background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:0 10px; height:34px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
  margin-right:-1px; white-space:nowrap; }
.cmp-seg button:first-child { border-radius:8px 0 0 8px; }
.cmp-seg button:last-child { border-radius:0 8px 8px 0; }
.cmp-seg button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }

.delta { font-size:10px; font-weight:700; margin-left:6px; padding:1px 4px;
  background:rgba(255,255,255,0.06); border-radius:1px; }
.delta.up   { color:var(--pos); }
.delta.down { color:var(--neg); }
.delta.same { color:var(--muted); }
.kpi-cmp { font-size:10px; color:var(--muted); margin-top:4px;
  letter-spacing:0.05em; font-variant-numeric:tabular-nums; }
.bar .v .delta { display:inline-block; }

.kpis { padding:12px 16px 8px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi { background:var(--card); border:1px solid var(--line); padding:12px;
  border-radius:10px; transition:background 0.15s, border-color 0.15s; }
.kpi.kpi-tap { cursor:pointer; }
.kpi.kpi-tap:hover { background:rgba(255,255,255,0.12); border-color:var(--fg); }
.kpi.kpi-tap:active { transform:scale(0.99); }
.kpi.kpi-tap::after { content:'›'; float:right; color:var(--muted);
  font-size:16px; line-height:0.6; opacity:0.5; }
.kpi .label { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); }
.kpi .value { font-size:20px; font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em; margin-top:4px; }
.kpi .value.pos { color:var(--pos); } .kpi .value.neg { color:var(--neg); }
.kpi .kpi-sub { font-size:10px; color:var(--muted); margin-top:3px;
  letter-spacing:0.05em; font-variant-numeric:tabular-nums; }

/* Operative breakdown strip — Tatuaggi (Resident+Guest) and Materiale */
.kpis-ops-wrap { padding:0 16px 8px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
.kpis-ops-wrap:empty { display:none; }
.kpis-ops-head { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 6px; }
.kpis-ops { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpis-ops .kpi { background:rgba(76,242,163,0.06);
  border-color:rgba(76,242,163,0.30); }

.chart-wrap { padding:0 16px 4px; }
.chart-title { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; }
.chart-title h3 { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; margin:0; color:var(--muted); }
.chart-title .legend { display:flex; gap:8px; font-size:10px; color:var(--muted); }
.chart-title .legend i { display:inline-block; width:8px; height:8px; margin-right:4px; vertical-align:middle; }
svg.chart { width:100%; display:block; font-family:inherit; }
svg.chart text { fill:var(--muted); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
svg.chart .grid { stroke:var(--line); stroke-width:1; }
svg.chart .axis { stroke:var(--line2); stroke-width:1; }

.bar-list { padding:0 16px; }
.bar { display:grid; grid-template-columns:1fr auto; gap:3px 10px;
  align-items:center; padding:7px 0; font-size:13px;
  cursor:pointer; transition:background 0.1s; padding-left:6px; padding-right:6px;
  margin:0 -6px; border:1px solid transparent; border-radius:6px; }
.bar:hover { background:rgba(255,255,255,0.04); border-color:var(--line); }
.bar:active { background:rgba(255,255,255,0.08); }
.bar .name { grid-row:1; grid-column:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar .name::after { content:'›'; color:var(--muted); margin-left:4px; font-weight:400; }
.bar .track { grid-row:2; grid-column:1 / -1; background:var(--card); height:8px; position:relative;
  border-radius:4px; overflow:hidden; }
.bar .fill { height:100%; border-radius:4px; }
.bar .fill.pos { background:var(--pos); opacity:0.8; }
.bar .fill.neg { background:var(--neg); opacity:0.8; }
.bar .v { grid-row:1; grid-column:2; font-variant-numeric:tabular-nums; font-weight:700; text-align:right; font-size:12px; white-space:nowrap; }
.bar .v.pos { color:var(--pos); } .bar .v.neg { color:var(--neg); }
.bar .meta { font-size:10px; color:var(--muted); margin-left:6px; }

/* Modal backdrop */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:199;
  display:none; animation:fadeIn 0.2s ease; }
.modal-backdrop.active { display:block; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Bottom-sheet modals */
.modal { position:fixed; bottom:0; left:0; right:0; background:var(--bg); z-index:200;
  display:none; flex-direction:column;
  border-radius:16px 16px 0 0;
  max-height:92dvh; overflow-y:auto;
  box-shadow:0 -4px 32px rgba(0,0,0,0.18);
  padding-bottom:env(safe-area-inset-bottom); }
.modal.active { display:flex; animation:slideUp 0.28s cubic-bezier(.32,1,.44,1); }
.modal.modal-stack { z-index:220; }
.modal.modal-stack.active { display:flex; }
.modal#confirm-modal { z-index:240; }

/* ─── FATTURE (TWWTS Studio · Giorgio only) ─── */
.fatture-head { padding:12px 16px 6px; display:flex; flex-direction:column; gap:8px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
.fatture-head h2 { margin:0; font-size:15px; font-weight:700; color:var(--fg); }
.fatture-head h2 .muted { font-weight:400; color:var(--muted); margin-left:6px; }
.fatt-year-tabs { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; }
.fatt-year-tabs button { background:transparent; border:1px solid var(--line2);
  color:var(--muted); padding:6px 12px; font-family:inherit; font-size:11px;
  font-weight:700; letter-spacing:0.18em; cursor:pointer; border-radius:8px;
  flex-shrink:0; }
.fatt-year-tabs button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.fatt-totals { padding:0 16px 8px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
.fatt-totals .cell { padding:10px 12px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; }
.fatt-totals .cell .l { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); display:block; }
.fatt-totals .cell .v { font-size:16px; font-weight:700; color:var(--fg); margin-top:4px;
  display:block; font-variant-numeric:tabular-nums; }

.fatt-list { padding:6px 16px 100px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right)); }
.fatt-row { display:grid; grid-template-columns:auto 1fr auto;
  gap:10px; align-items:center; padding:14px 12px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; transition:background 0.12s;
  margin-bottom:8px; background:var(--card); }
.fatt-row:hover { background:rgba(255,255,255,0.04); }
.fatt-row .num { font-size:13px; font-weight:700; color:var(--fg);
  background:rgba(255,255,255,0.06); padding:6px 10px; border-radius:8px;
  font-variant-numeric:tabular-nums; min-width:52px; text-align:center; }
.fatt-row .body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fatt-row .body .client { font-size:13px; font-weight:700; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fatt-row .body .meta { font-size:10px; color:var(--muted); letter-spacing:0.04em; }
.fatt-row .total { font-size:14px; font-weight:700; color:var(--fg);
  font-variant-numeric:tabular-nums; }
.fatt-empty { padding:24px 12px; text-align:center; color:var(--muted); font-size:12px;
  border:1px dashed var(--line); border-radius:10px; }

/* Numero progressivo banner inside the fattura modal */
.fatt-num-banner { padding:14px 16px; text-align:center;
  background:rgba(255,255,255,0.04); border-bottom:1px solid var(--line);
  font-size:18px; font-weight:700; letter-spacing:0.08em; color:var(--fg);
  font-variant-numeric:tabular-nums; }

.fatt-recap { padding:12px 16px; background:rgba(255,255,255,0.04);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.fatt-recap .lbl { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.fatt-recap .row { display:flex; justify-content:space-between; font-size:13px;
  color:var(--fg); font-variant-numeric:tabular-nums; }
.fatt-recap .row.total { padding-top:6px; margin-top:4px;
  border-top:1px dashed var(--line); font-weight:700; font-size:15px; }

/* ─── SOCI cards (analytics fondo, solo Giorgio·studio) ─── */
.soci-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  padding:6px 0; align-items:stretch; }
.soci-card { background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 8px 10px; display:flex; flex-direction:column;
  gap:4px; cursor:pointer; transition:background 0.12s, border-color 0.12s;
  height:100%; min-width:0; }
.soci-card:hover { background:rgba(255,255,255,0.04); border-color:var(--line2); }
.soci-card.active { border-color:var(--fg); background:rgba(255,255,255,0.06); }
.soci-card .name { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.soci-card .net { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.soci-card .net.pos { color:var(--pos); }
.soci-card .net.neg { color:var(--neg); }
.soci-card .stats { display:flex; flex-direction:column; gap:2px;
  font-size:10px; color:var(--muted); margin-top:6px; line-height:1.4;
  font-variant-numeric:tabular-nums; }
.soci-card .stats .row { display:flex; justify-content:space-between; gap:4px;
  white-space:nowrap; }
.soci-card .stats .row > span:first-child { overflow:hidden;
  text-overflow:ellipsis; flex-shrink:1; min-width:0; }
.soci-card .stats .v { color:var(--fg); flex-shrink:0; }
.soci-card .pending { font-size:10px; font-weight:700; color:var(--warn);
  margin-top:6px; padding:4px 6px; background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.40); border-radius:6px; text-align:center;
  line-height:1.3; }
.soci-card .rimb-btn { background:transparent; color:var(--fg);
  border:1px solid var(--line2); padding:8px 6px; font-family:inherit;
  font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; border-radius:6px; margin-top:auto; }
.soci-card .rimb-btn:hover { background:rgba(255,255,255,0.06); border-color:var(--fg); }

/* Rimborso modal — input importo grande ma usabile (non come quello del modal principale) */
.rimb-amount-input { font-size:24px !important; font-weight:700 !important;
  text-align:center; font-variant-numeric:tabular-nums;
  padding:14px !important; }

.soci-detail { padding:8px 0 4px; }
.soci-detail h3 { margin:6px 0 8px; font-size:12px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.soci-detail .tx { display:grid; grid-template-columns:auto 1fr auto;
  gap:8px; align-items:center; padding:8px 6px; border-bottom:1px solid var(--line);
  font-size:12px; }
.soci-detail .tx .d { color:var(--muted); font-variant-numeric:tabular-nums; }
.soci-detail .tx .n { color:var(--fg); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.soci-detail .tx .a { font-weight:700; font-variant-numeric:tabular-nums; }
.soci-detail .tx .a.pos { color:var(--pos); }
.soci-detail .tx .a.neg { color:var(--neg); }
.soci-detail .tx .a.pending { color:var(--warn); }
.soci-detail .empty { padding:12px; color:var(--muted); font-size:11px; text-align:center; }

/* ─── Gestore categorie ─── */
.modal.cat-tall { height:92dvh; }
.cat-mgr-search { padding:12px 16px; display:flex; gap:8px; align-items:center;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  border-bottom:1px solid var(--line); flex-shrink:0; }
.cat-mgr-search input { flex:1; min-width:0; padding:11px; background:var(--card);
  color:var(--fg); border:1px solid var(--line); font-family:inherit;
  font-size:16px; outline:none; border-radius:8px; }
.cat-mgr-search input:focus { border-color:var(--fg); }
.cat-mgr-select-btn { flex-shrink:0; height:42px; padding:0 12px; background:transparent;
  border:1px solid var(--line2); color:var(--fg); border-radius:8px; font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; }
.cat-mgr-select-btn.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }

.cat-mgr-list { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 16px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
.cat-group-head { display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0 6px; font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted); }
.cat-group-head small { font-weight:600; letter-spacing:0.05em; text-transform:none; }
.cat-row { display:flex; align-items:center; gap:12px; padding:11px 0; min-height:52px;
  border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.12s; }
.cat-row:hover { background:rgba(255,255,255,0.04); }
.cat-row .cat-main { flex:1; min-width:0; }
.cat-row .cat-name { font-size:15px; font-weight:600; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-row .cat-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.cat-row .cat-count { font-variant-numeric:tabular-nums; font-weight:700;
  font-size:13px; color:var(--muted); flex-shrink:0; }
.cat-row .cat-count.pos { color:var(--pos); } .cat-row .cat-count.neg { color:var(--neg); }
.cat-check { width:24px; height:24px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line2); display:flex; align-items:center; justify-content:center;
  color:var(--bg); }
.cat-check svg { width:14px; height:14px; }
.cat-row.selected .cat-check { background:var(--pos); border-color:var(--pos); }
.cat-row.selected .cat-name { color:var(--pos); }
.cat-row.target .cat-check { background:var(--fg); border-color:var(--fg); }
.cat-row.target .cat-name { color:var(--fg); }
.cat-row.source { opacity:0.5; }
.cat-mgr-empty { padding:32px 12px; font-size:13px; color:var(--muted); text-align:center; }

/* Probabili doppioni: suggeriti in cima, un tap per unirli */
.cat-dupes { margin:12px 0 4px; padding:12px; border-radius:10px;
  border:1px solid rgba(251,191,36,0.40); background:rgba(251,191,36,0.08); }
.cat-dupes-head { font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--warn); margin-bottom:4px; }
.cat-dupes-hint { font-size:11px; color:var(--muted); margin-bottom:6px; }
.cat-dupe { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-top:1px solid rgba(251,191,36,0.20); }
.cat-dupe:first-of-type { border-top:none; }
.cat-dupe-names { display:flex; flex-wrap:wrap; gap:2px 10px; font-size:13px; min-width:0; }
.cat-dupe-name small { color:var(--muted); font-size:11px; margin-left:3px; }
.cat-dupe .btn { flex-shrink:0; }

.cat-mgr-bar { position:absolute; left:0; right:0; bottom:0;
  background:var(--bg-deep); border-top:1px solid var(--line2);
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cat-mgr-bar .cmb-count { font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.cat-mgr-bar .cmb-actions { display:flex; gap:6px; }
.cat-mgr-bar .cmb-btn { background:transparent; color:var(--fg);
  border:1px solid var(--line2); padding:9px 12px; font-family:inherit; border-radius:8px;
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer; }
.cat-mgr-bar .cmb-btn:disabled { opacity:0.4; cursor:default; }
.cat-mgr-bar .cmb-btn.merge { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.cat-mgr-bar .cmb-btn:not(:disabled):hover { background:rgba(255,255,255,0.10); }
.cat-mgr-bar .cmb-btn.merge:not(:disabled):hover { background:var(--pos); border-color:var(--pos); }

/* Barra di conferma in fondo al picker "Unisci in…" */
.cat-pick-bar { flex-shrink:0; background:var(--bg-deep); border-top:1px solid var(--line2);
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px; }
.cat-pick-bar .msg { font-size:13px; line-height:1.45; color:var(--fg); }
.cat-pick-bar .msg.muted { color:var(--muted); }
.cat-pick-bar .actions { display:flex; gap:8px; }
.cat-pick-bar .actions .submit { padding:13px; }

/* Picker di gruppo (chip + "nuovo") */
.group-chips { display:flex; flex-wrap:wrap; gap:6px; }
.group-chips input { margin-top:6px; }
.cat-edit-meta { font-size:12px; color:var(--muted); line-height:1.5; }
.cat-edit-meta b { color:var(--fg); font-weight:600; }
@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
.modal-header {
  display:grid; grid-template-columns:44px 1fr 44px;
  align-items:center; padding:16px 12px 10px; border-bottom:1px solid var(--line);
  background:var(--bg); position:sticky; top:0; z-index:5;
}
.modal-header h2 { margin:0; font-size:11px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--fg); text-align:center; }
.modal-header .close-btn {
  width:44px; height:44px; background:var(--card); border:1px solid var(--line);
  color:var(--fg); font-family:inherit; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all 0.15s;
}
.modal-header .close-btn:hover { background:var(--neg); border-color:var(--neg); color:#000; }
.modal-header .close-btn:active { transform:scale(0.92); }
.modal-header .spacer { width:44px; }
.swipe-handle {
  height:4px; width:36px; background:rgba(255,255,255,0.25); border-radius:4px;
  margin:12px auto 4px; cursor:ns-resize; flex-shrink:0;
}

form { padding:0; display:flex; flex-direction:column; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* New form layout — compact top row: amount · date · method live close together */
.amount-block { display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.amount-block .amount { font-size:38px; line-height:1; padding:0;
  border:none; border-bottom:none; }
.amount-block .amount::placeholder { color:#3a3a3a; }

/* Date row: chips + picker on a single line — label hidden (kind toggle
   above + picker icon already convey context). JS still updates the
   hidden text so screen readers / future surfaces keep the semantic. */
.date-inline { display:flex; align-items:center; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--line); gap:6px; }
.date-inline .date-label { display:none; }
.date-inline .date-quick { display:flex; gap:0; flex:1 1 auto; }
.date-inline .date-quick button { background:transparent; color:var(--muted);
  border:1px solid var(--line); padding:9px 10px; font-family:inherit;
  font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  cursor:pointer; flex:1; margin-right:-1px; white-space:nowrap; }
.date-inline .date-quick button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.date-inline input[type=date] { flex:0 1 150px; padding:10px 10px; background:var(--card);
  color:var(--fg); border:1px solid var(--line); font-family:inherit; font-size:14px; outline:none;
  text-align:right; margin:0; }

/* Live preview: Cassa Contanti €4.275 → €4.300 (+25) */
.cassa-preview { padding:8px 16px; background:rgba(255,255,255,0.04);
  border-bottom:1px solid var(--line); font-size:11px; color:var(--muted);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-height:0; }
.cassa-preview:empty { display:none; }
.cassa-preview .lbl { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; }
.cassa-preview .arrow { color:var(--muted); margin:0 4px; }
.cassa-preview .new { font-variant-numeric:tabular-nums; font-weight:700; color:var(--fg); }
.cassa-preview .new.pos { color:var(--pos); } .cassa-preview .new.neg { color:var(--neg); }
.cassa-preview .delta { font-variant-numeric:tabular-nums; font-weight:700; margin-left:6px; }
.cassa-preview .delta.pos { color:var(--pos); } .cassa-preview .delta.neg { color:var(--neg); }

.field { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }

.status-seg { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); }
.status-seg button { background:transparent; color:var(--muted); border:none; border-right:1px solid var(--line);
  padding:10px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.status-seg button:last-child { border-right:none; }
.status-seg button.active { background:var(--fg); color:var(--bg); }
.status-hint-line { font-size:10px; color:var(--muted); font-style:italic; }

.cat-selected-line { font-size:11px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }

.submit-row { padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  border-top:1px solid var(--line); margin-top:0; display:flex; flex-direction:column; gap:8px; }
.submit { background:var(--fg); color:var(--bg); border:none; padding:16px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; cursor:pointer; width:100%; transition:opacity 0.15s; }
.submit:disabled { cursor:not-allowed; }
.submit.edit-delete { background:transparent; color:var(--neg); border:1px solid var(--neg); }
.submit.edit-delete:hover { background:var(--neg); color:#000; }

form .toggle { margin:0; }
.toggle { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1px solid var(--line); }
.toggle button { background:transparent; color:var(--muted); border:none;
  padding:13px 8px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.toggle button.active { background:var(--fg); color:var(--bg); }
.toggle button[data-kind=transfer].active { background:var(--accent); color:var(--bg-deep); }

.transfer-box { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); padding:14px;
  display:flex; flex-direction:column; gap:12px; }
.transfer-row { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:end; }
.transfer-arrow { color:var(--accent); font-size:24px; padding-bottom:6px; text-align:center; }
.transfer-row .col { display:flex; flex-direction:column; gap:6px; }
.transfer-row .label { margin-bottom:0; }
.transfer-row .chips { gap:4px; }
.transfer-row .chip { padding:6px 9px; font-size:11px; }
.transfer-row .chip.active { background:var(--accent); color:var(--bg-deep); border-color:var(--accent); }
.transfer-warn { font-size:10px; color:#fbbf24; padding:6px 0; }

.tx-row.transfer { background:rgba(185,139,255,0.07); margin-left:-16px; margin-right:-16px;
  padding-left:16px; padding-right:16px; border-bottom-color:rgba(185,139,255,0.18); }
.tx-row .a.transfer { color:var(--accent); }
.tx-row .transfer-icon { display:inline-block; color:var(--accent); margin-right:4px; }

/* Arrears */
.arrear-row { display:grid; grid-template-columns:1fr auto auto auto; gap:8px;
  align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.arrear-row .edit-btn { background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:5px 8px; font-family:inherit; font-size:11px; cursor:pointer; line-height:1; }
.arrear-row .edit-btn:hover { color:var(--fg); border-color:var(--fg); }
.arrear-row:last-child { border-bottom:none; }
.arrear-row .desc { font-size:13px; font-weight:500; color:var(--fg); }
.arrear-row .meta { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
.arrear-row .amt { font-variant-numeric:tabular-nums; font-weight:700; color:var(--warn); font-size:13px; }
.arrear-row .pay-btn { background:var(--fg); color:var(--bg); border:none;
  padding:6px 10px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.arrear-row .pay-btn:hover { background:var(--pos); }
.arrear-row.paid .desc { text-decoration:line-through; color:var(--muted); }
.arrear-row.paid .amt { color:var(--muted); text-decoration:line-through; }
.arrear-row.paid .pay-btn { background:var(--muted); cursor:default; }
.arrear-empty { padding:24px 12px; font-size:12px; color:var(--muted); text-align:center;
  letter-spacing:0.05em; line-height:1.6; }
.arrear-empty strong { display:block; color:var(--fg); font-size:14px;
  letter-spacing:0.08em; margin-bottom:4px; }
.arrear-empty .empty-icon { display:block; font-size:30px; margin-bottom:8px;
  opacity:0.5; line-height:1; }

/* Progress bar for partial payments */
.progress { height:3px; background:rgba(255,255,255,0.06); margin-top:6px;
  grid-column:1 / -1; position:relative; }
.progress > span { display:block; height:100%; background:var(--warn); transition:width 0.3s; }
.progress.future > span { background:var(--muted); }
.arrear-row.partial { background:rgba(251,191,36,0.04); margin-left:-16px; margin-right:-16px;
  padding-left:16px; padding-right:16px; }
.arrear-row .residual { font-size:10px; color:var(--warn); margin-top:2px; }

.acconto-methods { display:flex; gap:5px; width:100%; }
.acconto-methods button { flex:1; background:var(--card); border:1px solid var(--line); color:var(--fg);
  padding:7px 8px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.acconto-methods button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }

/* Future expenses */
.arrear-row.future .desc { color:var(--fg); }
.arrear-row.future .amt { color:var(--muted); }
.arrear-row.future .meta { color:var(--muted); }
.future-tag { font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); padding:2px 5px; border:1px solid var(--line); margin-left:6px; }
/* Category chip on arrear / credit rows so the user sees what the
   pending entry will book under once paid. */
.cat-tag { font-size:10px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg); background:rgba(255,255,255,0.06);
  padding:1px 6px; border-radius:3px; }

/* Credits — mirror of arrears for incoming income */
.credit-row { display:grid; grid-template-columns:1fr auto auto; gap:8px;
  align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.credit-row:last-child { border-bottom:none; }
.credit-row .desc { font-size:13px; font-weight:500; color:var(--fg); }
.credit-row .meta { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
.credit-row .amt { font-variant-numeric:tabular-nums; font-weight:700; color:var(--pos); font-size:13px; }
.credit-row .pay-btn { background:var(--fg); color:var(--bg); border:none;
  padding:6px 10px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.credit-row .pay-btn:hover { background:var(--pos); }
.credit-row.paid .desc { text-decoration:line-through; color:var(--muted); }
.credit-row.paid .amt { color:var(--muted); text-decoration:line-through; }
.credit-row.paid .pay-btn { background:var(--muted); cursor:default; }

/* Recurring transactions section */
.rec-row { display:grid; grid-template-columns:1fr auto auto; gap:8px;
  align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.rec-row:last-child { border-bottom:none; }
.rec-row .desc { font-size:13px; font-weight:500; color:var(--fg); }
.rec-row .meta { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
.rec-row .amt  { font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
.rec-row .amt.neg { color:var(--neg); }
.rec-row .amt.pos { color:var(--pos); }
.rec-row .rec-actions { display:flex; gap:5px; }
.rec-row .rec-applied { font-size:11px; color:var(--pos); font-weight:700; padding:4px 8px;
  border:1px solid var(--pos); letter-spacing:0.1em; }
.rec-row .rec-state { font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); padding:4px 6px; border:1px solid var(--line); align-self:center; white-space:nowrap; }
.rec-btn { background:var(--card); border:1px solid var(--line); color:var(--muted);
  padding:5px 8px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; }
.rec-btn:hover { color:var(--fg); border-color:var(--fg); }
.rec-add-btn { background:transparent; border:1px dashed var(--line); color:var(--muted);
  padding:10px; width:100%; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; margin-top:4px; }
.rec-add-btn:hover { border-color:var(--fg); color:var(--fg); }
/* Recurring edit modal specifics */
.rec-day-input { width:60px; padding:8px; background:var(--bg); color:var(--fg);
  border:1px solid var(--line2); font-family:inherit; font-size:14px; text-align:center; outline:none; }
.rec-day-input:focus { border-color:var(--fg); }

.amount { font-size:42px; font-weight:900; letter-spacing:-0.03em;
  background:transparent; color:var(--fg); border:none;
  border-bottom:2px solid var(--line); width:100%; text-align:center;
  padding:8px 0; outline:none; font-variant-numeric:tabular-nums; font-family:inherit; }
.amount.pos { color:var(--pos); } .amount.neg { color:var(--neg); }
.amount:focus { border-bottom-color:var(--fg); }
.label { font-size:10px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block; }
.label small { font-size:10px; font-weight:400; letter-spacing:0.05em; text-transform:none;
  color:var(--muted); margin-left:6px; font-style:italic; }
input[type=text],input[type=date],input[type=number] { width:100%; padding:11px; background:var(--card);
  color:var(--fg); border:1px solid var(--line); font-family:inherit; font-size:16px; outline:none; }
input:focus { border-color:var(--fg); }
.btn { background:var(--card); border:1px solid var(--line2); color:var(--fg);
  padding:9px 14px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.btn:active { transform:scale(0.95); }

.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { background:var(--card); border:1px solid var(--line); color:var(--fg);
  padding:7px 11px; font-size:12px; font-family:inherit; cursor:pointer; }
.chip.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.cat-search { position:relative; }
.cat-results { background:var(--card); border:1px solid var(--line); border-top:1px solid var(--line2);
  max-height:200px; overflow:auto; }
.cat-results button { display:block; width:100%; text-align:left;
  background:transparent; border:none; color:var(--fg); padding:10px 12px;
  font-family:inherit; font-size:13px; border-bottom:1px solid var(--line); cursor:pointer; }
.cat-results button.create { color:var(--pos); font-weight:700; }
.cat-similar { padding:8px 12px; font-size:12px; color:var(--warn); border-bottom:1px solid var(--line); }
.cat-similar button { display:inline; width:auto; padding:2px 6px; border:1px solid var(--warn);
  border-radius:4px; color:var(--fg); margin:0 2px; font-size:12px; }
.cat-results button:hover { background:rgba(255,255,255,0.06); }

.toast { position:fixed; top:30%; left:50%;
  transform:translate(-50%, -20px);
  background:rgba(20,4,55,0.95); border:1px solid var(--line2); padding:14px 22px;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--pos); z-index:300; opacity:0; pointer-events:none;
  transition:opacity 0.22s ease-out, transform 0.28s cubic-bezier(0.2,0.8,0.2,1); }
.toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.toast-undo { background:none; border:none; color:var(--accent, #b98bff); font:inherit;
  text-decoration:underline; cursor:pointer; padding:0 0 0 4px; }
/* Barra sottile in alto: lampeggia mentre un refresh mirato riallinea i
   dati col server in background (l'UI è già aggiornata in ottimistico). */
#sync-bar { position:fixed; top:0; left:0; right:0; height:2px; z-index:400;
  background:linear-gradient(90deg, transparent, var(--accent,#b98bff), transparent);
  background-size:200% 100%; opacity:0; transition:opacity .2s; pointer-events:none; }
body.syncing #sync-bar { opacity:1; animation:syncslide 1s linear infinite; }
@keyframes syncslide { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Loading skeletons (shimmer placeholders shown while bootstrap fetches) */
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.skel, .skel-row, .skel-tx, .skel-total {
  background:linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite linear;
  border-radius:3px; }
.skel-total { display:inline-block; height:36px; width:62%; margin:0; }
.skel-row   { height:42px; margin-bottom:6px; }
.skel-tx    { height:54px; margin:8px 0; }

/* Budget mensili per categoria (analytics) */
.budget-add-btn { float:right; background:transparent; border:1px solid var(--line2);
  color:var(--fg); font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; padding:4px 10px; cursor:pointer; }
.budget-row { padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.budget-row .budget-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.budget-row .name { font-size:13px; color:var(--fg); }
.budget-row .v { font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); }
.budget-track { height:5px; background:var(--line); margin-top:6px; overflow:hidden; }
.budget-track span { display:block; height:100%; background:var(--pos); transition:width .3s ease; }
.budget-row.warn .budget-track span { background:#ffb84d; }
.budget-row.over .budget-track span { background:var(--neg); }
.budget-row.over .v { color:var(--neg); font-weight:700; }
.budget-alert { font-size:11px; color:var(--neg); margin-top:4px; }

/* Export CSV */
.export-row { padding:16px 0 6px; text-align:center; }
.export-btn { background:transparent; border:1px solid var(--line2); color:var(--fg);
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; padding:10px 16px; cursor:pointer; }
.export-btn:hover { background:rgba(255,255,255,0.06); }

/* Ricerca globale (dash) */
.global-search-btn { display:block; width:100%; margin-top:8px; background:transparent;
  border:1px dashed var(--line2); color:var(--fg); font-family:inherit; font-size:11px;
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:11px; cursor:pointer; }
.global-search-head { display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 4px; font-size:11px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
.global-search-head button { background:none; border:none; color:var(--fg); font:inherit;
  text-decoration:underline; cursor:pointer; }

/* Accessibilità: focus visibile da tastiera su bottoni e div interattivi */
button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent, #b98bff); outline-offset:2px; }

/* Micro-transizioni sui controlli tappabili */
.chip, .pay-btn, .btn, .export-btn, .rec-btn, .edit-btn, .budget-add-btn,
.global-search-btn, .show-more-btn { transition:background .15s ease, color .15s ease,
  border-color .15s ease, transform .1s ease; }
.fab { transition:transform .12s ease, background .15s ease; }
.fab:active { transform:scale(0.92); }

/* Rispetta chi ha disattivato le animazioni a livello di sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; }
}

/* Impostazioni: lista di righe, non una pila di bottoni bianchi */
.settings-user { display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line); }
.settings-user .avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.12); border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.settings-user .who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.settings-user .who b { font-size:15px; }
.settings-user .who span { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-list { display:flex; flex-direction:column; padding:6px 0 10px; }
.settings-row { display:flex; align-items:center; gap:12px; width:100%;
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:inherit; font-size:15px; text-align:left;
  padding:14px 16px; cursor:pointer; min-height:52px; }
.settings-row:last-child { border-bottom:none; }
.settings-row:hover { background:rgba(255,255,255,0.05); }
.settings-row:active { background:rgba(255,255,255,0.10); }
.settings-row .ico { width:22px; height:22px; flex-shrink:0; color:var(--muted); display:flex; }
.settings-row .ico svg { width:100%; height:100%; display:block; }
.settings-row .txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.settings-row .txt small { font-size:11px; color:var(--muted); font-weight:400; }
.settings-row .chev { color:var(--muted); font-size:18px; opacity:0.6; }
.settings-row.danger { color:var(--neg); }
.settings-row.danger .ico { color:var(--neg); }
.settings-section { font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted); padding:14px 16px 4px; }

/* Icone SVG inline (niente glifi Unicode: su Android ⚙ ✎ ⬇ diventano emoji) */
.edit-btn svg, .rec-btn svg, .export-btn svg, .link-btn svg {
  width:14px; height:14px; display:inline-block; vertical-align:-2px; }
.link-btn { background:none; border:none; color:var(--fg); font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover { color:var(--pos); }

/* ─── Desktop: Home e Analytics affiancate, ognuna scorre da sé ─── */
@media (min-width:1100px) {
  .stage { padding:24px 16px 32px; }
  .phone { width:1120px; max-width:calc(100vw - 32px); }
  .phone-screen { height:calc(100vh - 56px); min-height:640px; }
  .app-header { padding-top:14px; }
  .scroll { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; padding-bottom:0; }
  .page { display:block; overflow-y:auto; min-height:0; height:100%;
    padding-bottom:110px; -webkit-overflow-scrolling:touch; }
  #page-analytics, #page-fatture { border-left:1px solid var(--line); }
  /* Fatture prende il posto di Analytics quando è attiva */
  body[data-tab="fatture"] #page-analytics { display:none; }
  body:not([data-tab="fatture"]) #page-fatture { display:none; }
  .fatt-back { display:inline-flex; }
  .tabbar { display:none; }
  .ptr-indicator { display:none; }
  .fab { bottom:28px; }
  .modal { max-width:560px; margin:0 auto; }
  .cat-mgr-bar { max-width:560px; margin:0 auto; }
}
.fatt-back { display:none; align-items:center; gap:6px; background:transparent;
  border:1px solid var(--line2); color:var(--muted); border-radius:8px; padding:6px 10px;
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; cursor:pointer; }
.fatt-back:hover { color:var(--fg); border-color:var(--fg); }
.fatture-head .fh-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ─── Categorie vere: azione sul gruppo nel gestore ─── */
.cat-group-head .cgh-act { background:transparent; border:1px solid var(--line2); color:var(--fg);
  border-radius:6px; padding:4px 8px; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
.cat-group-head .cgh-act:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.cat-group-head .cgh-right { display:flex; align-items:center; gap:8px; }
.cat-convert-hint { margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:12px;
  color:var(--muted); background:var(--card); border:1px solid var(--line); line-height:1.45; }
.cat-convert-hint b { color:var(--fg); font-weight:600; }
.cat-convert-list { padding:0 16px; font-size:13px; line-height:1.5; }
.cat-convert-list b { font-weight:600; }