/* ── SCROLLBAR (dark theme) ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* ── GRUPPI SPEND ── */
.gruppo-spend-row { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.gruppo-spend-row:last-child { border-bottom: none; }
.gruppo-spend-head { display: flex; justify-content: space-between; align-items: baseline; }
.gruppo-spend-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.gruppo-spend-total { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gruppo-spend-detail { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }
/* ── ICONS ── */
.icon {
width: 14px; height: 14px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
vertical-align: -2px; display: inline-block;
}
.tab .icon { width: 13px; height: 13px; margin-right: 5px; }
.btn .icon { width: 12px; height: 12px; margin-right: 4px; }
/* ── BUTTONS ── */
.btn {
border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer;
font-size: var(--text-sm); padding: var(--space-3) var(--space-6);
transition: all var(--duration-slow) var(--ease-spring);
}
.btn-ghost { background: var(--accent-subtle); border-color: rgba(var(--accent-rgb),0.25); color: var(--accent-light); }
.btn-ghost:hover { background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-rgb),0.45); color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-glow-lg); }
.btn-outline { background: transparent; color: var(--text-tertiary); }
.btn-outline:hover { background: var(--border-subtle); color: var(--text-primary); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
/* Press feedback globale */
button:not(:disabled):active { transform: scale(0.97); }
/* Focus visibile da tastiera (il glow resta per l'hover) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-cell:focus-visible { outline: none; } /* ha già il proprio stato focus dedicato */
.settings-toggle input:focus-visible + .settings-toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ── KPI ── */
.kpi-period-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }
.kpi-period-toggle { display: flex; gap: var(--space-2); background: var(--bg-surface); border-radius: var(--radius-full); padding: 4px; border: 1px solid var(--border-subtle); }
.kpi-period-btn { padding: var(--space-3) var(--space-8); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: all var(--duration-fast); }
.kpi-period-btn:hover { color: var(--text-primary); }
.kpi-period-btn.active { background: var(--accent-muted); color: var(--accent-light); }
/* Segmented a icone (schermo/sole/luna) — selettore tema in Impostazioni.
Pattern Linear/GitHub: compatto, intuitivo, ottimo in responsive. Il nome
testuale sta in aria-label + title; la caption live sotto la label dice la
scelta corrente. Validato in docs/mockups/impostazioni-aspetto-v2.html. */
.iconseg { display: inline-flex; gap: var(--space-1); padding: 3px; flex: none; background: var(--bg-input); border-radius: var(--radius-full); border: 1px solid var(--border-subtle); }
.iconseg button { border: 0; background: none; cursor: pointer; padding: var(--space-3); width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center; color: var(--text-tertiary); transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); }
.iconseg button:hover { color: var(--text-heading); }
.iconseg button.active { background: var(--bg-elevated); color: var(--text-heading); box-shadow: var(--shadow-sm); }
.iconseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.iconseg svg { width: 16px; height: 16px; }
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-8); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sotto 640px scatta il bottom-nav mobile: le card KPI non entrano piu
in 4 colonne (il valore 40px overflow-a per costruzione), stack a 1. */
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
padding: var(--space-8); transition: border-color var(--duration-fast);
}
.kpi:hover { border-color: var(--border-strong); }
.kpi-label { font-size: var(--text-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-3); }
.kpi-value { font-size: var(--text-4xl); font-weight: var(--weight-black); color: var(--text-primary); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: var(--text-xs); margin-top: var(--space-2); }
.kpi-delta { font-size: var(--text-xs); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.kpi-delta.pos { color: var(--success); }
.kpi-delta.neg { color: var(--error); }
.kpi-delta.neutral { color: var(--text-tertiary); }
/* ── KPI HERO — pattern per il KPI-tesi (una risposta grande + progress) ── */
.kpi.is-hero {
padding: var(--space-10) var(--space-12);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-12);
position: relative; overflow: hidden;
}
.kpi-hero-main { position: relative; z-index: 1; min-width: 0; }
.kpi-hero-lbl {
font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4);
}
.kpi-hero-value {
font-size: 54px; font-weight: var(--weight-black); letter-spacing: -0.03em;
color: var(--accent-light); line-height: 1;
font-variant-numeric: tabular-nums;
display: flex; align-items: baseline; gap: 4px;
}
.kpi-hero-value .cents { font-size: 26px; font-weight: var(--weight-bold); opacity: 0.6; }
.kpi-hero-value.is-over { color: var(--error); }
.kpi-hero-sub { font-size: var(--text-md); color: var(--text-secondary); margin-top: var(--space-5); }
.kpi-hero-sub b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.kpi-hero-progress { position: relative; z-index: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-end; }
.kpi-hero-bar { width: 200px; height: 6px; background: var(--border-subtle); border-radius: 999px; overflow: hidden; }
.kpi-hero-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4); transition: width var(--duration-slow) var(--ease-spring); }
.kpi-hero-bar-fill.is-over { background: var(--error); box-shadow: 0 0 10px rgba(248, 113, 113, 0.4); }
/* Variante segmentata: usata dal hero di Movimenti per ripartire le uscite per bucket */
.kpi-hero-bar.is-segmented { display: flex; gap: 1px; padding: 0; box-shadow: none; }
.kpi-hero-bar.is-segmented .seg { height: 100%; transition: width var(--duration-slow) var(--ease-spring); }
.kpi-hero-bar.is-segmented .seg-empty { font-size: var(--text-2xs); color: var(--text-tertiary); padding: 0 var(--space-2); }
/* Hero Movimenti: valore segno-based (verde saldo positivo, rosso negativo) */
.mn-hero .kpi-hero-value { color: var(--success); }
.mn-hero .kpi-hero-value.is-neg { color: var(--error); }
/* Trigger periodo dentro l'eyebrow del hero — bottone inline che apre il modal */
/* Movimenti hero — la label del periodo è un chip cliccabile, non testo.
«Il flusso di» resta overline sopra; il chip ha icona calendario a
sinistra e chevron a destra, con bordo e fondo visibili: parla la
stessa lingua del chip «Categoria» nella toolbar sotto. */
.mn-hero-lbl { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.mn-hero-overline {
font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-tertiary); font-weight: var(--weight-semibold);
}
.mn-period-trigger {
background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-6);
color: var(--text-heading); font: inherit;
font-size: var(--text-base); font-weight: var(--weight-semibold);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--space-4);
transition: border-color var(--duration-fast), background var(--duration-fast);
transition: color var(--duration-fast) var(--ease-spring);
}
.mn-period-trigger:hover { border-color: var(--accent); background: var(--bg-elevated); }
.mn-period-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow-sm); }
.mn-period-trigger .icon { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.mn-period-trigger-chev { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.kpi-hero-progress-lbl { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; justify-content: space-between; width: 200px; }
.kpi-hero-progress-lbl b { color: var(--text-secondary); font-weight: var(--weight-semibold); }
@media (max-width: 640px) {
.kpi.is-hero { grid-template-columns: 1fr; padding: var(--space-8) var(--space-8) var(--space-10); gap: var(--space-8); }
.kpi-hero-value { font-size: 42px; }
.kpi-hero-value .cents { font-size: 20px; }
.kpi-hero-progress { min-width: 0; align-items: stretch; width: 100%; }
.kpi-hero-bar, .kpi-hero-progress-lbl { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kpi-hero-bar-fill { transition: none; } }
/* ── UTILITY COLORS ── */
.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.gray { color: var(--text-dim); }
.purple { color: var(--purple-l); }
.cyan { color: var(--cyan); }
/* ── CARDS ── */
.card {
background: var(--bg-surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: var(--space-8);
}
.card-title {
font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-tertiary); margin-bottom: var(--space-6);
display: flex; justify-content: space-between; align-items: center;
}
.card-title-hint { font-size: var(--text-2xs); color: var(--accent-light); font-weight: var(--weight-medium); text-transform: none; letter-spacing: 0.02em; }
.card-title-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 var(--space-2);
border-radius: var(--radius-full);
background: rgba(251, 191, 36, 0.15); color: var(--warning);
font-size: var(--text-2xs); font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
text-transform: none; letter-spacing: 0;
}
/* ── DA CLASSIFICARE (Panoramica: lista movimenti senza categoria) ── */
.dc-empty { color: var(--success); font-size: var(--text-sm); padding: var(--space-4) 0; }
.dc-row {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
width: 100%; padding: var(--space-3) var(--space-2);
background: none; border: none; border-bottom: 1px solid var(--border-subtle);
font-family: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer;
transition: background var(--duration-fast) var(--ease-spring);
}
.dc-row:hover { background: var(--bg-elevated); }
.dc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.dc-desc { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-amount { color: var(--warning); font-weight: var(--weight-bold); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dc-more {
display: block; width: 100%; margin-top: var(--space-3);
background: none; border: none; padding: 0;
font-family: inherit; font-size: var(--text-2xs); color: var(--accent-light);
cursor: pointer; text-align: left;
transition: color var(--duration-fast);
}
.dc-more:hover { color: var(--accent); }
/* ── EMPTY STATE (pattern riusabile: Da classificare, Cosa notare, futuri gruppi) ──
Regola: sentence-case sul titolo (il card-title sopra è già uppercase,
due uppercase nella stessa card si pestano). Variante .is-positive per
i vuoti-traguardo ("Tutto classificato" ≠ "Nessun dato"). */
.empty-state {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--space-3); padding: var(--space-8) var(--space-6);
}
.empty-state-icon {
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: var(--bg-elevated); color: var(--text-tertiary);
margin-bottom: var(--space-2);
}
.empty-state-icon svg { width: 16px; height: 16px; }
.empty-state-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.empty-state-sub { font-size: var(--text-xs); color: var(--text-tertiary); max-width: 220px; line-height: 1.5; }
.empty-state.is-positive .empty-state-icon { background: rgba(52, 211, 153, 0.10); color: var(--success); }
/* ── NOTIF CARD ── */
.notif-card {
background: var(--bg-surface); border: 1px solid var(--border-subtle);
border-left: 3px solid var(--warning); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
padding: var(--space-6) var(--space-8); margin-bottom: var(--space-10);
}
.notif-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-6); margin-bottom: var(--space-2);
}
.notif-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); }
.notif-text { font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-relaxed); }
.notif-cta {
margin-top: var(--space-5); font-size: var(--text-xs); font-weight: var(--weight-semibold);
color: var(--warning); background: none;
border: none; border-bottom: 1px solid rgba(251,191,36,0.4);
padding: 0 0 1px; cursor: pointer; letter-spacing: 0.02em;
transition: border-color var(--duration-fast), color var(--duration-fast);
}
.notif-cta:hover { color: var(--orange); border-color: var(--orange); }
.notif-close {
background: none; border: none; color: var(--text-disabled);
font-size: var(--text-lg); line-height: 1; cursor: pointer; padding: 0;
flex-shrink: 0; transition: color var(--duration-fast);
}
.notif-close:hover { color: var(--text-tertiary); }
/* ── CSP BUCKETS ── */
.csp-stacked { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-8); background: var(--border-subtle); gap: 1px; }
.csp-seg { transition: opacity var(--duration-fast); }
.csp-seg:hover { opacity: 0.8; }
.bucket-item { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.bucket-item:last-child { border-bottom: none; }
.bucket-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bucket-bar-bg { flex: 1; background: var(--border-default); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
.bucket-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--duration-entrance) var(--ease-spring); }
.bucket-bar-fill.is-over-expense { background: var(--error); }
.bucket-bar-fill.is-over-income { background: var(--success); }
.bucket-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); min-width: 150px; display: flex; align-items: center; gap: var(--space-3); }
.bucket-pct { font-size: var(--text-xl); font-weight: var(--weight-black); min-width: 45px; font-variant-numeric: tabular-nums; }
.bucket-pct.is-over-expense { color: var(--error); }
.bucket-pct.is-over-income { color: var(--success); }
.bucket-pct-target { font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-disabled); margin-left: var(--space-2); }
.bucket-amount { font-size: var(--text-xs); color: var(--text-secondary); text-align: right; min-width: 80px; font-variant-numeric: tabular-nums; }
.csp-empty { color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--space-6) 0; }
/* ── NETTO DISPONIBILE / MESE (Panoramica) ── */
/* Colonne divergenti (pattern DS — vedi docs/DESIGN-SYSTEM.md) */
.divergent-columns { min-height: 160px; overflow: visible; }
.divergent-columns .dc-baseline { stroke: var(--tick-color); stroke-width: var(--tick-width); }
.divergent-columns .dc-connector { stroke: var(--tick-color); stroke-width: 1; stroke-dasharray: 3 3; }
.divergent-columns .dc-col.is-pos rect { fill: var(--success); }
.divergent-columns .dc-col.is-neg rect { fill: var(--error); }
.divergent-columns .dc-col.dc-saldo rect { fill: var(--accent-light); }
.divergent-columns .dc-label { fill: var(--text-tertiary); font-size: 10px; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.divergent-columns .dc-label--saldo { fill: var(--accent-light); font-weight: var(--weight-semibold); text-transform: none; }
.netto-view-toggle .kpi-period-btn { font-size: var(--text-2xs); padding: 2px 8px; }
/* ── MOVIMENTI ── */
.mov-toolbar { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; flex-wrap: wrap; }
.mov-mese-select {
background: var(--border); border: 1px solid var(--border-mid); border-radius: var(--r-md);
padding: 4px 10px; color: var(--text); font-size: 11px; font-weight: 600; cursor: pointer;
appearance: none; -webkit-appearance: none; padding-right: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
}
.mov-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mov-filter-btn {
padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer;
}
.mov-filter-btn.active { background: var(--border-subtle); color: var(--text-primary); border-color: var(--border-strong); }
.mov-search {
background: var(--border); border: 1px solid var(--border-mid); border-radius: var(--r-md);
padding: 6px 12px; color: var(--text); font-size: 12px; width: 200px;
}
.mov-search::placeholder { color: var(--text-xdim); }
.mov-table { width: 100%; border-collapse: collapse; }
.mov-table th {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-xdim); padding: 8px 10px; text-align: left;
border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
}
.mov-table th:hover { color: var(--text-muted); }
.mov-table td { padding: 9px 10px; font-size: var(--text-sm); border-bottom: 1px solid var(--bg-input); font-variant-numeric: tabular-nums; }
.mov-table tr:hover td { background: var(--bg-elevated); }
.mov-importo-neg { color: var(--red); font-weight: 600; }
.mov-importo-pos { color: var(--green); font-weight: 600; }
.cat-badge {
display: inline-block; padding: 2px 8px; border-radius: 20px;
font-size: 10px; font-weight: 600; background: var(--border); color: var(--text-muted);
}
.da-classificare { background: rgba(251,191,36,0.08); color: var(--warning); }
.cell-edit { cursor: pointer; }
.cell-edit:hover .cat-badge { border: 1px solid var(--purple); }
.cell-edit:hover { color: var(--purple-l) !important; }
.cell-edit.saving { opacity: .45; pointer-events: none; }
.cell-edit.saved { animation: cell-flash var(--duration-entrance) ease-out; }
@keyframes cell-flash { from { background: rgba(var(--accent-rgb),.22); border-radius: 4px; } }
/* ── CELL POPOVER ── */
.cpop {
position: fixed; z-index: var(--z-popover);
min-width: 200px; max-width: 260px;
background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md), var(--shadow-glow-sm);
font-size: var(--text-sm); overflow: hidden;
animation: cpop-in var(--duration-fast) ease-out;
}
@keyframes cpop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.cpop-search {
width: 100%; box-sizing: border-box; padding: var(--space-4) var(--space-5);
background: transparent; border: none; border-bottom: 1px solid var(--border-default);
color: var(--text-primary); font: inherit; font-size: var(--text-sm); outline: none;
}
.cpop-search::placeholder { color: var(--text-disabled); }
.cpop.no-search .cpop-search { display: none; }
.cpop-list {
list-style: none; margin: 0; padding: 4px;
max-height: 220px; overflow-y: auto;
}
.cpop-list li {
padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--text-secondary);
cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpop-list li.active { background: var(--accent-muted); color: var(--text-primary); }
.cpop-list li::before { content: ""; display: inline-block; width: 10px; flex-shrink: 0; }
.cpop-list li.selected::before { content: "✓"; color: var(--accent); font-size: var(--text-2xs); }
.cpop-list li mark { background: none; color: var(--accent); font-weight: var(--weight-semibold); }
.cpop-list li.create { color: var(--accent); font-style: italic; }
.cpop-list .cpop-empty { color: var(--text-disabled); font-style: italic; cursor: default; }
.mov-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.pag-btn { background: var(--border-subtle); border: none; color: var(--text-secondary); padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.pag-btn:hover { background: var(--border-strong); color: var(--text-primary); }
.pag-btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
/* ── CATEGORIE ── */
.cat-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.cat-row:last-child { border-bottom: none; }
.cat-name-wrap { display: flex; align-items: center; gap: 8px; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-rank {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
background: var(--accent-muted); color: var(--accent-light);
font-size: var(--text-2xs); font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.cat-name { font-size: var(--text-sm); color: var(--text-secondary); }
.cat-bar-wrap { flex: 1; margin: 0 12px; min-width: 60px; }
.cat-bar-bg { background: var(--border-subtle); border-radius: var(--radius-full); height: 5px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--duration-slow) var(--ease-spring); }
.cat-amount { font-size: var(--text-sm); font-weight: var(--weight-bold); min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
/* ── INVESTIMENTI ── */
.inv-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv-month { font-size: 11px; color: var(--text-muted); width: 30px; flex-shrink: 0; }
.inv-track { flex: 1; background: var(--border); border-radius: 4px; height: 20px; position: relative; overflow: hidden; }
.inv-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; transition: width var(--duration-entrance) var(--ease-spring); }
.inv-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-target { font-size: 11px; width: 80px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.inv-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.inv-stat { background: var(--surface-alt); border-radius: var(--r-md); padding: 10px; text-align: center; }
.inv-stat-val { font-size: var(--text-xl); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.inv-stat-label { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: var(--space-1); }
/* ── METER ── */
.meter-track { background: var(--border-subtle); border-radius: var(--radius-md); height: 12px; overflow: hidden; margin: var(--space-4) 0; }
.meter-fill { height: 100%; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--blue), var(--accent)); transition: width var(--duration-entrance) var(--ease-spring); }
.meter-labels { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* ── FISCALE ── */
.scadenza-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 16px; margin-bottom: 10px; display: flex; justify-content: space-between;
align-items: center; transition: border-color 0.2s;
}
.scadenza-card:hover { border-color: var(--border-mid); }
.scadenza-card.urgente { border-color: #7f1d1d; background: rgba(248,113,113,0.06); }
.scadenza-card.prossima{ border-color: #78350f; background: rgba(251,191,36,0.06); }
.scadenza-card.ok { border-color: #064e3b; background: rgba(52,211,153,0.06); }
.scadenza-card.scaduto { border-color: var(--border-strong); background: var(--bg-surface); }
.scadenza-titolo { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-1); }
.scadenza-info { font-size: var(--text-xs); color: var(--text-tertiary); }
.scadenza-right { text-align: right; }
.scadenza-importo { font-size: var(--text-2xl); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.scadenza-data { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.countdown { font-size: var(--text-xs); font-weight: var(--weight-bold); margin-top: var(--space-1); }
.fiscale-input {
background: var(--border-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-5); color: var(--text-primary); font-size: var(--text-base); width: 130px; font-variant-numeric: tabular-nums;
}
.fiscale-input:focus { outline: none; border-color: var(--accent); }
.fiscale-config { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-8); }
.fiscale-config-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.fiscale-config-label { font-size: 12px; color: var(--text-muted); min-width: 220px; }
.riepilogo-fiscale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.rf-card { background: var(--surface-alt); border-radius: var(--r-md); padding: 12px; text-align: center; }
.rf-val { font-size: var(--text-2xl); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.rf-label { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: var(--space-1); }
/* ── INSIGHTS ── */
.insight-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.insight-item:last-child { border-bottom: none; }
.insight-icon {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
background: color-mix(in srgb, currentColor 12%, transparent);
color: var(--text-tertiary);
}
.insight-icon .icon { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
.insight-icon--success { color: var(--success); }
.insight-icon--error { color: var(--error); }
.insight-icon--warning { color: var(--warning); }
.insight-icon--accent { color: var(--accent-light); }
.insight-icon--info { color: var(--info); }
.insight-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.insight-text strong { color: var(--text-primary); }
.insight-more {
display: block; width: 100%; margin-top: var(--space-3);
background: none; border: none; padding: var(--space-2);
font-family: inherit; font-size: var(--text-xs); color: var(--accent-light);
cursor: pointer; text-align: center;
transition: color var(--duration-fast);
}
.insight-more:hover { color: var(--accent); }
/* ── PROIEZIONI ── */
.proj-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.proj-row:last-child { border-bottom: none; }
.proj-label { font-size: 12px; color: var(--text-muted); flex: 1; }
.proj-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ricorrente-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ricorrente-item:last-child { border-bottom: none; }
.ricorrente-nome { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--space-4); }
.ricorrente-freq { color: var(--text-tertiary); font-size: var(--text-2xs); margin-right: var(--space-5); }
.ricorrente-importo { color: var(--error); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.runway-big { font-size: var(--text-hero); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; letter-spacing: -2px; text-align: center; margin: var(--space-6) 0 var(--space-2); }
.runway-label { text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-8); }
/* ── SAVINGS GOALS (card salvadanaio, riusato dalla tab Salvadanai) ── */
.bg-goal-card {
background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8); margin-bottom: var(--space-5);
}
.bg-goal-card:last-child { margin-bottom: 0; }
/* ── SKELETON SCREENS ── */
.skeleton-dashboard { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.skel-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skel-kpi { height: 90px; border-radius: var(--radius-lg); background: var(--bg-elevated); animation: skel-pulse var(--duration-pulse) ease-in-out infinite; }
.skel-card { border-radius: var(--radius-lg); background: var(--bg-elevated); animation: skel-pulse var(--duration-pulse) ease-in-out infinite; }
@keyframes skel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ── MOVIMENTI REDESIGN (Semina) ── */
.movimenti-new {
--mn-fixed: #7d8db8;
--mn-inv: var(--c-inv);
--mn-sav: var(--c-savings);
--mn-gf: var(--c-guilt);
--mn-prev: var(--c-tax);
--mn-in: var(--c-income);
--mn-ink: var(--text-primary);
--mn-ink-dim: var(--text-secondary);
--mn-ink-mute: var(--text-secondary);
--mn-card: var(--bg-surface);
--mn-card-hi: var(--bg-elevated);
--mn-border: var(--border-default);
--mn-violet: var(--accent);
}
.movimenti-new .mn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.movimenti-new .mn-title-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.movimenti-new .mn-title { font-size: 22px; font-weight: 500; margin: 0; color: var(--mn-ink); letter-spacing: .01em; }
.movimenti-new .mn-title em { font-style: italic; color: var(--mn-inv); font-weight: 500; }
.movimenti-new .mn-title-btn { display: inline-flex; align-items: baseline; gap: 6px; background: transparent; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; cursor: pointer; color: inherit; font-family: inherit; transition: background .15s; }
.movimenti-new .mn-title-btn:hover { background: color-mix(in srgb, var(--mn-violet) 8%, transparent); }
.movimenti-new .mn-title-chevron { color: var(--mn-ink-mute); font-size: 11px; }
/* Period modal */
.pm-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); width: min(400px, calc(100vw - 32px)); box-shadow: var(--shadow-xl); padding: var(--space-12); }
.pm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-8); }
.pm-head h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0; color: var(--text-primary); }
.pm-tabs { display: flex; gap: var(--space-2); background: var(--bg-input); border-radius: var(--radius-md); padding: 3px; margin-bottom: var(--space-8); }
.pm-tabs .pm-tab { flex: 1; background: transparent; border: 0; color: var(--text-secondary); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-base); font-family: inherit; transition: color var(--duration-fast), background var(--duration-fast); }
.pm-tabs .pm-tab.on { background: var(--bg-surface); color: var(--text-primary); }
.pm-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.pm-months .pm-year { grid-column: 1 / -1; font-size: 11px; color: var(--mn-ink-mute, #8a90ac); text-transform: uppercase; letter-spacing: .1em; margin-top: 8px; margin-bottom: 2px; }
.pm-months .pm-year:first-child { margin-top: 0; }
.pm-months button { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4) var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; font-family: inherit; transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast); }
.pm-months button:hover { border-color: var(--accent); color: var(--text-primary); }
.pm-months button.on { background: color-mix(in srgb, var(--accent) 20%, var(--bg-surface)); border-color: var(--accent); color: var(--text-primary); }
.pm-all { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 9px var(--space-6); color: var(--text-secondary); font-size: var(--text-base); cursor: pointer; font-family: inherit; transition: border-color var(--duration-fast), color var(--duration-fast); }
.pm-all:hover { border-color: var(--accent); color: var(--text-primary); }
.pm-all.on { background: color-mix(in srgb, var(--accent) 20%, var(--bg-surface)); border-color: var(--accent); color: var(--text-primary); }
.pm-sect-lbl { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-4); }
.pm-presets { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pm-preset { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-3) var(--space-6); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.pm-preset:hover { border-color: var(--accent); color: var(--text-primary); }
.pm-preset.on { background: color-mix(in srgb, var(--accent) 20%, var(--bg-surface)); border-color: var(--accent); color: var(--text-primary); }
.pm-dates { display: flex; gap: var(--space-4); align-items: center; }
.pm-dates input[type=date] { flex: 1; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); padding: 9px var(--space-6); font-family: inherit; font-size: var(--text-base); color-scheme: dark; }
.pm-dates input[type=date]:focus { outline: none; border-color: var(--accent); }
.pm-arrow { color: var(--text-secondary); font-size: var(--text-base); }
.pm-summary { text-align: center; color: var(--text-secondary); font-size: var(--text-sm); padding: var(--space-5); background: var(--bg-input); border-radius: var(--radius-md); margin-top: var(--space-6); min-height: 16px; }
.pm-summary strong { color: var(--text-primary); }
.pm-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
/* Manage categories modal */
.mc-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); width: min(520px, calc(100vw - 32px)); max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 22px 16px; border-bottom: 1px solid var(--border-subtle); }
.mc-head h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); color: var(--text-primary); }
.mc-head .mc-sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.mc-close { background: transparent; border: 0; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.mc-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.mc-list { overflow-y: auto; padding: 8px 12px; flex: 1; min-height: 200px; max-height: 50vh; }
.mc-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 10px; transition: background .12s; }
.mc-row:hover { background: var(--bg-elevated); }
.mc-row .mc-glyph { width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--h) 14%, var(--bg-surface)); color: var(--h); }
.mc-row .mc-glyph svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-row .mc-info .mc-name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); }
.mc-row .mc-info .mc-meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }
.mc-row .mc-actions { display: flex; gap: 6px; }
.mc-row .mc-btn { background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); border-radius: var(--radius-md); padding: 5px var(--space-5); font-size: var(--text-xs); cursor: pointer; font-family: inherit; }
.mc-row .mc-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.mc-row .mc-btn.mc-btn-danger { color: var(--error); border-color: rgba(248,113,113,0.2); }
.mc-row .mc-btn.mc-btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); }
.mc-row .mc-bucket-sel { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-secondary); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-family: inherit; }
.mc-row .mc-lock { color: var(--text-disabled); font-size: var(--text-xs); font-style: italic; padding: var(--space-2) var(--space-4); }
.mc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); padding: 0 22px; }
.mc-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: var(--text-base); font-weight: var(--weight-medium); padding: var(--space-5) var(--space-8); cursor: pointer; font-family: inherit; transition: color var(--duration-fast), border-color var(--duration-fast); }
.mc-tab:hover { color: var(--text-secondary); }
.mc-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); background: var(--accent-muted); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.mc-tab-content { display: none; flex-direction: column; flex: 1; min-height: 0; }
.mc-tab-content.active { display: flex; }
.mc-add-form--regole { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 560px) { .mc-add-form--regole { grid-template-columns: 1fr; } }
.mc-add-form--gruppi { grid-template-columns: 1fr auto; }
.gruppo-cat-picker { margin-top: 12px; }
.gruppo-cat-picker-label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.gruppo-cat-checkboxes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); max-height: 180px; overflow-y: auto; }
.gruppo-cat-check { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 5px var(--space-5); cursor: pointer; transition: border-color var(--duration-fast); }
.gruppo-cat-check:hover { border-color: var(--accent); }
.gruppo-cat-check input:checked + span { color: var(--text-primary); }
.gruppo-cat-check:has(input:checked) { border-color: var(--accent); background: var(--accent-muted); }
.mc-add { padding: var(--space-8) 22px 22px; border-top: 1px solid var(--border-subtle); background: var(--bg-input); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.mc-add-lbl { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-5); }
.mc-add-form { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; }
.mc-add-form input, .mc-add-form select { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-md); padding: 9px var(--space-6); font-family: inherit; font-size: var(--text-base); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a90ac' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.mc-add-form input { background-image: none; }
.mc-add-form input:focus, .mc-add-form select:focus { outline: none; border-color: var(--accent); }
.mc-add-btn { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); border-radius: var(--radius-md); padding: 9px var(--space-8); cursor: pointer; font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); }
.mc-add-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (max-width: 560px) {
.mc-add-form { grid-template-columns: 1fr; }
}
.movimenti-new .mn-controls { display: flex; gap: 8px; align-items: center; }
.movimenti-new .mn-toolbar { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); flex-wrap: wrap; }
.movimenti-new .mn-toolbar .mn-search { flex: 1; min-width: 180px; width: auto; }
.movimenti-new .mn-search { background: var(--mn-card); border: 1px solid var(--mn-border); border-radius: 10px; color: var(--mn-ink); padding: 8px 12px; font-size: 13px; width: 200px; transition: border-color .15s; font-family: inherit; }
.movimenti-new .mn-search::placeholder { color: var(--mn-ink-mute); }
.movimenti-new .mn-search:focus { outline: none; border-color: var(--mn-violet); }
.movimenti-new .mn-cat-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--mn-card); border: 1px solid var(--mn-border); color: var(--mn-ink-dim); border-radius: 10px; padding: 8px 12px; font-size: 12px; cursor: pointer; font-family: inherit; max-width: 200px; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; }
.movimenti-new .mn-cat-btn:hover { border-color: var(--mn-violet); color: var(--mn-ink); }
.movimenti-new .mn-cat-btn.mn-cat-btn--active { border-color: var(--mn-violet); color: var(--mn-ink); background: color-mix(in srgb, var(--mn-violet) 12%, var(--mn-card)); }
.movimenti-new .mn-cat-btn-chevron { color: var(--mn-ink-mute); font-size: 10px; }
/* Categoria filter modal */
.cf-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); width: min(420px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.cf-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-10) 22px var(--space-6); }
.cf-head h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0; color: var(--text-primary); }
.cf-close { background: transparent; border: 0; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.cf-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.cf-search { margin: 0 22px var(--space-6); background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-md); padding: 9px var(--space-6); font-family: inherit; font-size: var(--text-base); }
.cf-search:focus { outline: none; border-color: var(--accent); }
.cf-search::placeholder { color: var(--text-secondary); }
.cf-list { overflow-y: auto; padding: 4px 12px 16px; flex: 1; }
.cf-item { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-5); align-items: center; padding: 9px var(--space-5); border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary); font-size: var(--text-base); }
.cf-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.cf-item.cf-on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text-primary); }
.cf-item.cf-on .cf-count { color: var(--accent-light); font-weight: var(--weight-semibold); }
.cf-item.cf-clear { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-3); padding-top: var(--space-6); padding-bottom: var(--space-6); color: var(--accent-light); }
.cf-item.cf-clear:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cf-item .cf-glyph { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--h, var(--text-secondary)) 14%, var(--bg-surface)); color: var(--h, var(--text-secondary)); }
.cf-item .cf-glyph svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-item .cf-count { color: var(--text-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cf-item mark { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text-primary); padding: 0 2px; border-radius: 2px; }
.cf-empty { color: var(--text-secondary); text-align: center; padding: 30px 20px; font-size: var(--text-base); }
.movimenti-new .mn-sort { background: var(--mn-card); border: 1px solid var(--mn-border); color: var(--mn-ink-dim); border-radius: 10px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s; font-family: inherit; }
.movimenti-new .mn-sort:hover { border-color: var(--mn-violet); color: var(--mn-ink); }
.movimenti-new .mn-sort.active { border-color: var(--mn-violet); color: var(--mn-ink); background: color-mix(in srgb, var(--mn-violet) 12%, var(--mn-card)); }
.movimenti-new .mn-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 24px; }
.movimenti-new .mn-f { --hue: var(--mn-ink-dim); cursor: pointer; background: var(--mn-card); border: 1px solid var(--mn-border); border-radius: 12px; padding: 10px 16px 9px; display: flex; flex-direction: column; gap: 3px; transition: transform .12s ease, border-color .15s, background .15s; font-family: inherit; text-align: left; }
.movimenti-new .mn-f:hover { transform: translateY(-1px); border-color: var(--hue); }
.movimenti-new .mn-f:focus-visible { outline: 2px solid var(--mn-violet); outline-offset: 2px; }
.movimenti-new .mn-f-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-ink-mute); display: flex; align-items: center; gap: 6px; }
.movimenti-new .mn-f-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
.movimenti-new .mn-f-val { font-size: 14px; color: var(--mn-ink-dim); font-variant-numeric: tabular-nums; }
.movimenti-new .mn-f.on { background: color-mix(in srgb, var(--hue) 12%, var(--mn-card)); border-color: var(--hue); }
.movimenti-new .mn-f.on .mn-f-label, .movimenti-new .mn-f.on .mn-f-val { color: var(--mn-ink); }
.movimenti-new .mn-f[data-b="Tutti"] { --hue: var(--mn-violet); }
.movimenti-new .mn-f[data-b="Fixed_Costs"] { --hue: var(--mn-fixed); }
.movimenti-new .mn-f[data-b="Investimenti"] { --hue: var(--mn-inv); }
.movimenti-new .mn-f[data-b="Savings_Goals"] { --hue: var(--mn-sav); }
.movimenti-new .mn-f[data-b="Guilt_Free"] { --hue: var(--mn-gf); }
.movimenti-new .mn-f[data-b="Entrata"] { --hue: var(--mn-in); }
.movimenti-new .mn-f[data-b="Previdenza"] { --hue: var(--mn-prev); }
.movimenti-new .mn-f.mn-f-warn { --hue: #f87171; }
.movimenti-new .mn-f.mn-f-warn .mn-f-label::before { animation: mn-pulse var(--duration-pulse) ease-in-out infinite; }
@keyframes mn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Card riepilogo filtri categoria */
.movimenti-new .mn-cs { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 20px; background: color-mix(in srgb, var(--mn-violet) 8%, var(--mn-card)); border: 1px solid color-mix(in srgb, var(--mn-violet) 30%, var(--mn-border)); border-radius: 12px; flex-wrap: wrap; }
.movimenti-new .mn-cs-left { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
.movimenti-new .mn-cs-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mn-ink-mute); }
.movimenti-new .mn-cs-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.movimenti-new .mn-cs-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--h) 15%, var(--mn-card)); border: 1px solid color-mix(in srgb, var(--h) 40%, var(--mn-border)); color: var(--mn-ink); border-radius: 20px; padding: 4px 6px 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; transition: background .15s; }
.movimenti-new .mn-cs-chip:hover { background: color-mix(in srgb, var(--h) 25%, var(--mn-card)); }
.movimenti-new .mn-cs-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--h) 25%, transparent); font-size: 9px; color: var(--mn-ink); }
.movimenti-new .mn-cs-clear { background: transparent; border: 1px dashed var(--mn-border); color: var(--mn-ink-mute); border-radius: 20px; padding: 4px 12px; font-size: 11px; cursor: pointer; font-family: inherit; }
.movimenti-new .mn-cs-clear:hover { border-color: var(--mn-violet); color: var(--mn-ink); border-style: solid; }
.movimenti-new .mn-cs-right { text-align: right; }
.movimenti-new .mn-cs-tot-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mn-ink-mute); margin-bottom: 4px; }
.movimenti-new .mn-cs-tot { font-size: 22px; font-weight: 600; color: var(--mn-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.movimenti-new .mn-cs-tot.mn-cs-tot-pos { color: var(--mn-in); }
.movimenti-new .mn-cs-tot.mn-cs-tot-neg { color: var(--mn-ink); }
.movimenti-new .mn-day {
margin-bottom: 22px;
animation: mn-day-in 320ms var(--ease-spring) both;
animation-delay: calc(var(--stagger-i, 0) * 40ms);
}
@keyframes mn-day-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .movimenti-new .mn-day { animation: none; } }
.movimenti-new .mn-day-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 8px; border-bottom: 1px solid var(--mn-border); margin-bottom: 4px; }
.movimenti-new .mn-day-h h3 { font-size: 15px; margin: 0; color: var(--mn-ink-dim); font-weight: 300; letter-spacing: .015em; }
.movimenti-new .mn-day-h h3 b { color: var(--mn-ink); font-weight: 600; }
.movimenti-new .mn-day-net { font-size: 12px; color: var(--mn-ink-mute); font-variant-numeric: tabular-nums; }
.movimenti-new .mn-day-net b { color: var(--mn-ink-dim); font-weight: 600; }
.movimenti-new .mn-mov {
--hue: var(--mn-ink-mute);
--bucket-hue: var(--text-tertiary);
display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center;
padding: 14px 12px 14px 14px; border-radius: 12px;
background: var(--bg-surface); border: 1px solid var(--border-subtle);
min-height: 56px; position: relative;
transition: background var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-spring);
}
/* Bottoni utility del toolbar (occhio privacy, seleziona bulk). */
.movimenti-new .mn-tool-btn {
width: 32px; height: 32px; border-radius: 8px;
background: none; border: 1px solid var(--border-default);
color: var(--text-secondary); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.movimenti-new .mn-tool-btn:hover { border-color: var(--border-strong); color: var(--text-heading); }
.movimenti-new .mn-tool-btn[aria-pressed="true"] {
background: var(--accent-muted); border-color: var(--accent);
color: var(--accent-light);
}
.movimenti-new .mn-tool-btn svg { width: 16px; height: 16px; }
/* Occhio chiuso: blur sulle descrizioni. Reveal on hover (mouse) o focus.
Solo descrizioni, non importi né categorie (scelta 13 lug). */
.movimenti-new.privacy-on .mn-desc {
filter: blur(6px);
transition: filter var(--duration-fast) var(--ease-default);
user-select: none;
}
.movimenti-new.privacy-on .mn-desc:hover,
.movimenti-new.privacy-on .mn-desc:focus,
.movimenti-new.privacy-on .mn-mov:focus-within .mn-desc { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.movimenti-new.privacy-on .mn-desc { transition: none; }
}
/* Barra sticky in modalità selezione. Compare sotto il toolbar quando
.select-mode è attiva. Contatore + Deseleziona + Elimina + Esci. */
.movimenti-new .mn-bulk-bar {
position: sticky; top: 0; z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--space-6);
padding: var(--space-4) var(--space-8);
margin: var(--space-4) 0 var(--space-6);
background: var(--accent-muted); border: 1px solid var(--accent);
border-radius: var(--radius-lg);
color: var(--text-heading);
font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.movimenti-new .mn-bulk-count { font-variant-numeric: tabular-nums; }
.movimenti-new .mn-bulk-link {
background: none; border: none; cursor: pointer;
color: var(--accent-light);
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.movimenti-new .mn-bulk-link:hover { color: var(--text-heading); }
.movimenti-new .mn-bulk-danger {
background: var(--error); border: none; cursor: pointer;
color: #fff; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold);
padding: var(--space-3) var(--space-8); border-radius: var(--radius-full);
transition: background var(--duration-fast);
}
.movimenti-new .mn-bulk-danger:hover { background: color-mix(in srgb, var(--error) 80%, #fff); }
.movimenti-new .mn-bulk-danger:disabled { opacity: 0.4; cursor: not-allowed; }
/* Modalità selezione: checkbox al posto del glyph, ⋮ nascosto, click sull
riga toggla il check. Le celle inline-edit si disattivano (pointer-events). */
.movimenti-new.select-mode .mn-mov { cursor: pointer; }
.movimenti-new.select-mode .mn-glyph { display: none; }
.movimenti-new.select-mode .mn-more { display: none; }
.movimenti-new.select-mode .mn-desc,
.movimenti-new.select-mode .mn-cat,
.movimenti-new.select-mode .mn-bucket { pointer-events: none; }
.movimenti-new .mn-check {
width: 36px; height: 36px; border-radius: 11px;
background: var(--bg-input); border: 1.5px solid var(--border-default);
display: none; align-items: center; justify-content: center;
color: transparent;
transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.movimenti-new.select-mode .mn-check { display: inline-flex; }
.movimenti-new.select-mode .mn-mov.is-selected {
background: var(--accent-subtle);
border-color: var(--accent);
}
.movimenti-new.select-mode .mn-mov.is-selected .mn-check {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.movimenti-new .mn-check svg { width: 18px; height: 18px; }
/* Kebab «⋮» sul row: apre modale Dettagli movimento (modifica + elimina).
Su desktop: visibile a hover (o focus da tastiera). Su mobile: sempre visibile. */
.movimenti-new .mn-more {
width: 28px; height: 28px; border-radius: 8px;
border: none; background: none; cursor: pointer;
color: var(--text-tertiary);
display: inline-flex; align-items: center; justify-content: center;
opacity: 0;
transition: background var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
}
.movimenti-new .mn-mov:hover .mn-more,
.movimenti-new .mn-more:focus-visible { opacity: 1; }
.movimenti-new .mn-more:hover { background: var(--bg-input); color: var(--text-heading); }
.movimenti-new .mn-more svg { width: 16px; height: 16px; fill: currentColor; }
@media (pointer: coarse) {
.movimenti-new .mn-more { opacity: 1; }
}
.movimenti-new .mn-mov::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
background: var(--bucket-hue); border-radius: 999px;
opacity: 0.85;
}
.movimenti-new .mn-mov:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.movimenti-new .mn-mov:hover .mn-glyph { transform: scale(1.12) rotate(-4deg); }
.movimenti-new .mn-glyph { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--hue) 14%, var(--mn-card)); color: var(--hue); transition: transform .18s cubic-bezier(.34,1.56,.64,1); cursor: pointer; }
.movimenti-new .mn-glyph:hover { outline: 1px solid var(--hue); outline-offset: 2px; }
.movimenti-new .mn-glyph svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.movimenti-new .mn-mid { min-width: 0; }
.movimenti-new .mn-desc { font-size: 14px; font-weight: 500; color: var(--mn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.movimenti-new .mn-desc[contenteditable="true"] { white-space: normal; overflow: visible; outline: 1px solid var(--mn-violet); border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.movimenti-new .mn-meta { font-size: 11.5px; color: var(--mn-ink-mute); display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.movimenti-new .mn-meta .mn-cat { color: var(--hue); cursor: pointer; }
.movimenti-new .mn-meta .mn-bucket { color: var(--mn-ink-mute); cursor: pointer; }
.movimenti-new .mn-meta .mn-cat:hover, .movimenti-new .mn-meta .mn-bucket:hover { color: var(--mn-ink); }
.movimenti-new .mn-meta .mn-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mn-ink-mute); }
.movimenti-new .mn-amt { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; color: var(--mn-ink); }
.movimenti-new .mn-amt.neg { color: var(--mn-ink); }
.movimenti-new .mn-amt.pos { color: var(--mn-in); }
.movimenti-new .mn-amt.seed { color: var(--mn-inv); }
.movimenti-new .mn-amt small { font-size: 12px; color: var(--mn-ink-mute); margin-left: 1px; }
.movimenti-new .mn-mov[data-b="Fixed_Costs"] { --hue: var(--mn-fixed); }
.movimenti-new .mn-mov[data-b="Investimenti"] { --hue: var(--mn-inv); }
.movimenti-new .mn-mov[data-b="Savings_Goals"] { --hue: var(--mn-sav); }
.movimenti-new .mn-mov[data-b="Guilt_Free"] { --hue: var(--mn-gf); }
.movimenti-new .mn-mov[data-b="Entrata"] { --hue: var(--mn-in); }
.movimenti-new .mn-mov[data-b="Previdenza"] { --hue: var(--mn-prev); }
.movimenti-new .mn-empty { color: var(--mn-ink-mute); text-align: center; padding: 40px 20px; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.movimenti-new .mn-empty-msg { font-size: var(--text-sm); color: var(--text-tertiary); }
.movimenti-new .mn-empty-cta {
background: var(--accent-muted); border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--accent-light);
border-radius: var(--radius-md); padding: var(--space-3) var(--space-8);
font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit;
transition: background var(--duration-fast) var(--ease-spring), transform var(--duration-fast) var(--ease-spring);
}
.movimenti-new .mn-empty-cta:hover { background: rgba(var(--accent-rgb), 0.22); }
.movimenti-new .mn-empty-cta:active { transform: scale(0.97); }
.movimenti-new .mn-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.movimenti-new .mn-mov.mn-saving .mn-amt { opacity: .5; }
.movimenti-new .mn-mov.mn-saved { animation: mn-flash var(--duration-entrance) ease; }
@keyframes mn-flash { 0% { background: color-mix(in srgb, var(--mn-violet) 20%, transparent); } 100% { background: transparent; } }
.movimenti-new .mn-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-12); font-size: var(--text-xs); color: var(--text-tertiary); gap: var(--space-6); flex-wrap: wrap; }
.movimenti-new .mn-pag-pill { display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 3px; }
.movimenti-new .mn-pag-btn {
background: transparent; border: none; color: var(--text-tertiary);
border-radius: var(--radius-full); min-width: 30px; height: 30px;
font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: inherit;
cursor: pointer; padding: 0 var(--space-3);
transition: background var(--duration-fast) var(--ease-spring), color var(--duration-fast) var(--ease-spring);
}
.movimenti-new .mn-pag-btn:hover:not(:disabled) { color: var(--text-primary); }
.movimenti-new .mn-pag-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.movimenti-new .mn-pag-btn.mn-pag-btn-active { background: var(--accent-muted); color: var(--accent-light); }
.movimenti-new .mn-pag-gap { color: var(--text-tertiary); padding: 0 var(--space-2); align-self: center; user-select: none; }
.movimenti-new .mn-pag-size-btn {
background: transparent; border: none; color: var(--text-tertiary);
font-family: inherit; font-size: var(--text-xs); cursor: pointer;
padding: var(--space-2) var(--space-3);
appearance: none; -webkit-appearance: none;
transition: color var(--duration-fast);
}
.movimenti-new .mn-pag-size-btn:hover { color: var(--text-primary); }
.movimenti-new .mn-pag-size-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
.movimenti-new .mn-pagination { flex-direction: column; align-items: stretch; }
.movimenti-new .mn-pag-pill { justify-content: center; }
.movimenti-new .mn-pag-info,
.movimenti-new .mn-pag-size-btn { align-self: center; }
}
.movimenti-new .mn-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mn-border); }
.movimenti-new .mn-add-btn { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--mn-violet) 15%, var(--mn-card)); border: 1px solid color-mix(in srgb, var(--mn-violet) 40%, var(--mn-border)); color: var(--mn-ink); border-radius: 10px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; font-family: inherit; }
.movimenti-new .mn-add-btn:hover { background: color-mix(in srgb, var(--mn-violet) 25%, var(--mn-card)); border-color: var(--mn-violet); }
.movimenti-new .mn-add-btn .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.movimenti-new .mn-add-btn--ghost { background: var(--mn-card); border-color: var(--mn-border); color: var(--mn-ink-dim); }
.movimenti-new .mn-add-btn--ghost:hover { background: var(--mn-card-hi); color: var(--mn-ink); }
@media (max-width: 560px) {
.movimenti-new .mn-head { flex-direction: column; align-items: stretch; }
.movimenti-new .mn-search { width: 100%; }
.movimenti-new .mn-controls { flex-wrap: wrap; }
}
/* ── PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── CSV Import dropzone ── */
.csv-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-16) var(--space-10); border: 2px dashed var(--border-default); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); text-align: center; }
.csv-dropzone:hover, .csv-dropzone.drag-over { border-color: var(--accent); background: var(--accent-subtle); }
.csv-dropzone.drag-over svg { stroke: var(--accent); }
.csv-dropzone-label { font-size: var(--text-base); color: var(--text-secondary); font-weight: var(--weight-medium); }
.csv-dropzone-hint { font-size: var(--text-xs); color: var(--text-secondary); }
.csv-dropzone.has-file { border-style: solid; border-color: var(--success); background: rgba(52,211,153,0.06); }
.csv-dropzone.has-file svg { stroke: var(--success); }
.csv-import-status { font-size: var(--text-base); min-height: 20px; text-align: center; margin-top: var(--space-6); }
.csv-import-status.success { color: var(--success); }
.csv-import-status.error { color: var(--error); }
.csv-import-status.loading { color: var(--text-secondary); }
.csv-confirm-btn { display: block; width: 100%; margin-top: var(--space-6); padding: var(--space-5) var(--space-8); background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-lg); font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit; transition: background var(--duration-fast); }
.csv-confirm-btn:hover { background: var(--accent-hover); }
.csv-confirm-btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* ── Rule proposal snackbar ── */
.rule-snack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); z-index: var(--z-popover); display: flex; align-items: center; gap: var(--space-5); background: var(--bg-elevated); border: 1px solid var(--border-default); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); box-shadow: var(--shadow-lg); transition: transform var(--duration-normal) ease; max-width: calc(100vw - 32px); }
.rule-snack.visible { transform: translateX(-50%) translateY(0); }
.rule-snack-icon { font-size: 18px; flex-shrink: 0; }
.rule-snack-text { font-size: var(--text-base); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-snack-text strong { color: var(--text-primary); }
.rule-snack-btn { border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit; transition: background var(--duration-fast); flex-shrink: 0; }
.rule-snack-yes { background: var(--accent); color: var(--on-accent); }
.rule-snack-yes:hover { background: var(--accent-hover); }
.rule-snack-no { background: transparent; color: var(--text-secondary); border: none; padding: var(--space-2) var(--space-3); font-size: var(--text-lg); line-height: 1; }
.rule-snack-no:hover { color: var(--text-primary); }
@media (max-width: 560px) {
.rule-snack { flex-wrap: wrap; gap: 8px; }
.rule-snack-text { width: 100%; }
}
/* ── MODAL OVERLAY ── */
.modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: var(--z-auth); animation: modalFadeIn var(--duration-normal) ease; }
.modal-box { background: var(--bg-surface); border: 1px solid rgba(var(--accent-rgb),0.15); border-radius: var(--radius-2xl); padding: var(--space-16) var(--space-12); width: 90%; max-width: 380px; box-shadow: var(--shadow-glow-lg), 0 0 80px rgba(var(--accent-rgb),0.06), var(--shadow-lg); animation: modalSlideUp var(--duration-normal) ease; transition: max-width var(--duration-slow) var(--ease-spring); }
.modal-box h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0 0 var(--space-10); text-align: center; }
.modal-box .auth-pin-input { background: var(--bg-input); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); font-size: var(--text-lg); color: var(--text-primary); outline: none; transition: border-color var(--duration-normal), box-shadow var(--duration-normal); }
.modal-box .auth-pin-input::placeholder { color: var(--text-disabled); }
.modal-box .auth-pin-input:focus { border-color: var(--accent); box-shadow: var(--shadow-glow-md), var(--shadow-glow-lg); }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ── SETTINGS PAGE ── */
.settings-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; interpolate-size: allow-keywords; }
.settings-section-header { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; user-select: none; }
.settings-section-header::-webkit-details-marker { display: none; }
.settings-section[open] > .settings-section-header { margin-bottom: 12px; transition: margin-bottom var(--duration-slow) var(--ease-spring); }
.settings-chevron { margin-left: auto; color: #6b7280; transition: transform var(--duration-slow) var(--ease-spring); flex-shrink: 0; }
.settings-section[open] > .settings-section-header .settings-chevron { transform: rotate(180deg); }
.settings-section::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--duration-slow) var(--ease-spring), opacity var(--duration-slow) var(--ease-default), content-visibility var(--duration-slow) allow-discrete; }
.settings-section[open]::details-content { block-size: auto; opacity: 1; }
.settings-body { animation: none; }
@media (prefers-reduced-motion: reduce) {
.settings-section::details-content,
.settings-section[open] > .settings-section-header,
.settings-chevron { transition: none; }
}
@keyframes settingsExpand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.settings-section-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.settings-section-icon .icon { width: 16px; height: 16px; }
.settings-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.settings-row:first-of-type { border-top: none; }
.settings-label { font-size: 13px; color: var(--text-muted); }
.settings-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--toggle-track-off); border-radius: var(--radius-full); transition: background var(--duration-slow) var(--ease-spring); }
.settings-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--toggle-thumb); border-radius: 50%; transition: transform var(--duration-slow) var(--ease-spring); }
.settings-toggle input:checked + .settings-toggle-slider { background: var(--accent); }
.settings-toggle input:checked + .settings-toggle-slider::before { transform: translateX(16px); }
/* ── PATRIMONIO ── */
#tab-patrimonio { padding: var(--space-4) 0; }
.pn-h { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: var(--space-10); margin-bottom: var(--space-12); border-bottom: 1px solid var(--border-subtle); }
.pn-h-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.pn-h-name { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -0.015em; margin: 0; }
.pn-h-time { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.pn-hero { display: flex; align-items: flex-end; gap: var(--space-10); margin-bottom: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.pn-hero-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }
.pn-hero-val { font-size: var(--text-hero); font-weight: var(--weight-black); color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.pn-hero-delta { display: inline-flex; align-items: baseline; gap: var(--space-4); font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-3); }
.pn-hero-delta b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pn-hero-delta-arrow { font-size: var(--text-xs); }
.pn-spark { margin: calc(-1 * var(--space-8)) 0 var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }
.pn-spark svg { width: 100%; height: 60px; display: block; opacity: 0; animation: pn-spark-in 700ms var(--ease-spring) 120ms forwards; }
.pn-spark-lbl { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); font-weight: var(--weight-semibold); }
@keyframes pn-spark-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pn-spark svg { animation: none; opacity: 1; } }
.pn-break { margin-bottom: var(--space-12); }
.pn-break-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin: 0 0 var(--space-6); }
.pn-bar { display: flex; height: 32px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); background: var(--border-subtle); }
.pn-seg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: #fff; transition: opacity var(--duration-normal) var(--ease-spring), flex-basis var(--duration-slow) var(--ease-spring); min-width: 0; }
.pn-seg:hover { opacity: 0.85; }
.pn-seg-empty { flex: 1; }
.pn-legend { display: flex; gap: var(--space-8); flex-wrap: wrap; font-size: var(--text-sm); }
.pn-legend-item { display: flex; align-items: center; gap: var(--space-4); color: var(--text-secondary); }
.pn-legend-item .dot { width: 10px; height: 10px; border-radius: var(--radius-xs); flex-shrink: 0; }
.pn-legend-item b { color: var(--text-primary); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pn-assets-section { margin-top: var(--space-4); }
.pn-assets-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.pn-assets-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: var(--weight-semibold); }
.pn-cta { background: var(--accent-subtle); border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--text-primary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); transition: transform var(--duration-fast) var(--ease-spring), background var(--duration-normal); }
.pn-cta:hover { background: var(--accent-muted); }
.pn-cta:active { transform: scale(0.97); }
.pn-cta .icon { width: 12px; height: 12px; }
.pn-list { display: flex; flex-direction: column; gap: var(--space-4); }
.pn-asset { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); display: flex; align-items: center; gap: var(--space-6); transition: border-color var(--duration-normal), background var(--duration-normal); }
.pn-asset:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.pn-asset.is-pulsing { animation: pn-pulse 900ms var(--ease-spring); }
@keyframes pn-pulse {
0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.35); border-color: rgba(52,211,153,0.55); }
60% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); border-color: var(--border-subtle); }
}
@media (prefers-reduced-motion: reduce) { .pn-asset.is-pulsing { animation: none; } }
.pn-asset-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.pn-asset-icon .icon { width: 16px; height: 16px; }
.pn-asset-mid { flex: 1; min-width: 0; }
.pn-asset-name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 2px; }
.pn-asset-sub { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-4); }
.pn-badge { padding: 1px var(--space-3); border-radius: var(--radius-xs); font-weight: var(--weight-semibold); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.pn-badge-live { background: rgba(52,211,153,0.15); color: var(--success); }
.pn-badge-manual { background: rgba(107,114,128,0.15); color: var(--text-secondary); }
.pn-asset-val { text-align: right; font-variant-numeric: tabular-nums; }
.pn-asset-val-main { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pn-asset-val-delta { font-size: var(--text-xs); margin-top: 2px; }
.pn-asset-val-delta.pos { color: var(--success); }
.pn-asset-val-delta.neg { color: var(--error); }
.pn-asset-val-delta.neutral { color: var(--text-tertiary); }
.pn-empty { color: var(--text-tertiary); text-align: center; padding: var(--space-16) var(--space-8); font-size: var(--text-sm); }
/* Modale saldi liquidità */
.pn-liq-box {
width: 100%;
max-width: min(calc(100vw - 32px), 540px);
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow-y: auto;
transition:
max-width var(--duration-slow) var(--ease-spring),
max-height var(--duration-slow) var(--ease-spring);
}
.pn-liq-box h3 { text-align: left; }
.pn-liq-hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-6); line-height: var(--leading-normal); }
.pn-liq-privacy { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-6); margin: 0 0 var(--space-10); background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.22); border-radius: var(--radius-md); }
.pn-liq-privacy-icon { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.pn-liq-privacy-text { min-width: 0; }
.pn-liq-privacy-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; margin-bottom: 2px; }
.pn-liq-privacy-sub { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); }
.pn-liq-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-10); }
.pn-liq-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; transition: grid-template-columns var(--duration-slow) var(--ease-spring); }
.pn-liq-label { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-primary); min-width: 0; }
.pn-liq-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pn-liq-input { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); color: var(--text-primary); font-size: var(--text-base); font-family: inherit; width: 100%; text-align: right; font-variant-numeric: tabular-nums; transition: border-color var(--duration-normal) var(--ease-spring), box-shadow var(--duration-slow) var(--ease-spring); }
.pn-liq-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.6), 0 0 20px rgba(var(--accent-rgb), 0.5), 0 0 40px 4px rgba(var(--accent-rgb), 0.3); }
.pn-liq-currency { color: var(--text-tertiary); font-size: var(--text-base); }
.pn-liq-actions { display: flex; gap: var(--space-4); justify-content: flex-end; }
/* Aggiunta asset custom */
.pn-liq-row { grid-template-columns: minmax(0, 1fr) 130px auto 24px; }
.pn-liq-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pn-liq-del { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); display: grid; place-items: center; opacity: 0; transition: opacity var(--duration-fast), color var(--duration-fast), background var(--duration-fast); }
.pn-liq-row:hover .pn-liq-del { opacity: 1; }
.pn-liq-del:hover { color: var(--error); background: rgba(248,113,113,0.08); }
.pn-liq-del-placeholder { width: 24px; }
.pn-liq-add-wrap { margin: var(--space-4) 0 var(--space-8); padding-top: var(--space-6); border-top: 1px dashed var(--border-subtle); }
.pn-liq-add-toggle { background: none; border: 1px dashed var(--border-default); color: var(--text-secondary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast); width: 100%; justify-content: center; }
.pn-liq-add-toggle:hover { border-color: var(--accent); color: var(--text-primary); background: var(--accent-subtle); border-style: solid; }
.pn-liq-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-3); align-items: center; animation: settingsExpand var(--duration-slow) var(--ease-spring); overflow: hidden; }
.pn-liq-add-name, .pn-liq-add-saldo { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); color: var(--text-primary); font-size: var(--text-sm); font-family: inherit; font-variant-numeric: tabular-nums; transition: border-color var(--duration-fast); }
.pn-liq-add-name:focus, .pn-liq-add-saldo:focus { outline: none; border-color: var(--accent); }
.pn-liq-add-name::placeholder, .pn-liq-add-saldo::placeholder { color: var(--text-disabled); }
.pn-liq-add-saldo { width: 100px; text-align: right; }
.pn-liq-add-kind { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }
.pn-liq-add-kind:focus { outline: none; border-color: var(--accent); }
.pn-liq-add-confirm { background: var(--accent); border: none; color: var(--on-accent); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit; transition: background var(--duration-fast); }
.pn-liq-add-confirm:hover { background: var(--accent-hover); }
.pn-liq-add-confirm:active { transform: scale(0.97); }
@media (max-width: 560px) {
.pn-liq-add-form { grid-template-columns: 1fr; }
.pn-liq-add-saldo { width: 100%; text-align: left; }
}
/* ── BOTTOM SHEET (mobile) ── */
.bottom-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
.bottom-sheet-backdrop.open { display: block; }
.bottom-sheet { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-elevated); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); padding: var(--space-4) var(--space-8) var(--space-12); z-index: var(--z-toast); transform: translateY(100%); transition: transform var(--duration-normal) ease; }
.bottom-sheet.open { display: block; transform: translateY(0); }
.bottom-sheet-handle { width: 36px; height: 4px; background: var(--border-default); border-radius: var(--radius-full); margin: 0 auto var(--space-6); }
.bottom-sheet-item { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-lg); color: var(--text-secondary); cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.bottom-sheet-item:hover { background: var(--border-default); }
.bottom-sheet-item .icon { width: 18px; height: 18px; }
.bottom-sheet-item--danger { color: var(--error); }
.bottom-sheet-divider { height: 1px; background: var(--border-default); margin: var(--space-2) 0; }
/* ═══════════════════════════════════════════════════════════════════════════
IMPOSTAZIONI · REGOLE AUTOMATICHE (mockup Fable 5 · disamina notturna 11 lug)
═══════════════════════════════════════════════════════════════════════════ */
.settings-hint { display: block; font-size: var(--text-2xs); color: var(--text-disabled); margin-top: 2px; line-height: var(--leading-normal); }
.settings-version { margin-top: var(--space-8); text-align: center; font-size: var(--text-2xs); color: var(--text-disabled); }
.rules-empty { padding: var(--space-8); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }
.rules-hint { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-disabled); }
.rules-group { margin-top: var(--space-6); interpolate-size: allow-keywords; }
.rules-group:first-child { margin-top: 0; }
.rules-group::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--duration-slow) var(--ease-spring), opacity var(--duration-slow) var(--ease-default), content-visibility var(--duration-slow) allow-discrete; }
.rules-group[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.rules-group::details-content { transition: none; }
}
.rules-group-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-2); font-size: var(--text-sm); color: var(--text-primary); }
.rules-group-head::-webkit-details-marker { display: none; }
.rules-group-head strong { font-weight: var(--weight-semibold); }
.rules-group-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rules-group-count { font-weight: var(--weight-regular); color: var(--text-tertiary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; margin-left: var(--space-2); }
.rules-group-head .settings-chevron { margin-left: auto; color: var(--text-tertiary); transition: transform var(--duration-fast); }
.rules-group[open] > .rules-group-head .settings-chevron { transform: rotate(180deg); }
.rules-group-body { padding-top: var(--space-2); }
.rule-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6); background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-3); transition: border-color var(--duration-fast); }
.rule-card:hover { border-color: var(--border-default); }
.rule-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex-wrap: wrap; }
.rule-pattern { font-family: inherit; font-size: var(--text-xs); background: var(--bg-surface); color: var(--accent-light); padding: var(--space-2) var(--space-4); border-radius: var(--radius-xs); }
.rule-arrow { color: var(--text-disabled); font-size: var(--text-sm); }
.rule-target { font-size: var(--text-sm); color: var(--text-secondary); }
.rule-x { appearance: none; border: none; background: none; color: var(--text-tertiary); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: color var(--duration-fast), background var(--duration-fast); }
.rule-x:hover { color: var(--error); background: var(--bg-surface); }
.rule-x:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; }
.rule-x .icon { width: 14px; height: 14px; }
/* ── SALVADANAI (buste) — refactor 13 lug: layout .goal-* da mockup
proposta-salvadanai-esecutiva.html. Naming allineato al mockup (goal è UI,
fund è entità DB). Card ora ha 3 blocchi: top (ring+nome+meta), big (importo
protagonista «ancora da versare»), state (pace/warn/done), actions (Versa+Dettagli). */
.salvadanai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.salvadanai-empty { padding: var(--space-12) var(--space-6); text-align: center; }
.salvadanai-empty-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-3); }
.salvadanai-empty-hint { font-size: var(--text-sm); color: var(--text-secondary); max-width: 42ch; margin: 0 auto; line-height: 1.5; }
/* Header stats + src strip */
.salvadanai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.salvadanai-head h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-heading); margin: 0; letter-spacing: -0.01em; }
.salvadanai-stats { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.salvadanai-stats strong { color: var(--text-secondary); font-weight: var(--weight-semibold); }
.salvadanai-src {
display: flex; justify-content: space-between; align-items: center;
gap: var(--space-6); flex-wrap: wrap;
background: var(--accent-subtle); border: 1px solid var(--accent-muted);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
margin: var(--space-4) 0 var(--space-8);
font-size: var(--text-sm); color: var(--text-secondary);
}
.salvadanai-src strong { color: var(--accent-light); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.salvadanai-src a { color: var(--accent-light); text-decoration: none; font-weight: var(--weight-semibold); cursor: pointer; }
.salvadanai-src a:hover { color: var(--text-heading); }
/* Goal card */
.goal {
padding: var(--space-10);
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: 14px;
display: flex; flex-direction: column;
transition: border-color var(--duration-fast);
}
.goal:hover { border-color: var(--border-default); }
.goal.has-warn { border-color: color-mix(in srgb, var(--warning) 30%, var(--border-subtle)); }
.goal.is-done { border-color: color-mix(in srgb, var(--success) 35%, var(--border-subtle)); }
.goal-top { display: flex; gap: var(--space-6); align-items: center; margin-bottom: var(--space-5); }
.goal-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.goal-ring-open { border: 2px dashed var(--border-default); border-radius: 50%; width: 56px; height: 56px; }
.goal-ring-pct {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: var(--text-xs); font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
.goal-name {
font-size: var(--text-md); font-weight: var(--weight-bold);
color: var(--text-heading);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.goal-meta {
font-size: var(--text-xs); color: var(--text-tertiary);
margin-top: 2px; font-variant-numeric: tabular-nums;
}
.goal-big {
font-size: var(--text-xl); font-weight: var(--weight-black);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--text-heading);
}
.goal-big small {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
color: var(--text-tertiary); margin-left: var(--space-3);
letter-spacing: 0;
}
.goal-pace { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-4); line-height: var(--leading-normal); }
.goal-warn {
font-size: var(--text-xs); color: var(--warning);
margin-top: var(--space-4); line-height: var(--leading-normal);
font-variant-numeric: tabular-nums;
}
.goal-warn a { color: var(--accent-light); text-decoration: none; }
.goal-done { font-size: var(--text-xs); color: var(--success); margin-top: var(--space-4); font-weight: var(--weight-semibold); }
.goal-actions {
display: flex; gap: var(--space-4);
margin-top: auto;
padding-top: var(--space-6);
}
.goal-actions .btn { font-size: var(--text-xs); padding: var(--space-3) var(--space-6); }
/* Card «Aggiungi» tratteggiata in fondo alla griglia */
.goal-add {
border: 1px dashed var(--border-default);
border-radius: 14px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--space-4);
min-height: 170px; cursor: pointer;
color: var(--text-tertiary);
background: none; font: inherit;
transition: border-color var(--duration-fast), color var(--duration-fast);
}
.goal-add:hover { border-color: var(--accent); color: var(--accent-light); }
.goal-add-icon {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-elevated);
display: flex; align-items: center; justify-content: center;
}
.goal-add-icon svg { width: 16px; height: 16px; }
.goal-add-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
/* Bottone × su card archiviata: elimina definitivamente. Si vede al hover
sulla card (o sempre su mobile). */
.goal-archived-del {
position: absolute; top: var(--space-4); right: var(--space-4);
width: 26px; height: 26px; border-radius: 50%;
border: none; background: var(--bg-page);
color: var(--text-tertiary); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.goal.is-archived:hover .goal-archived-del,
.goal-archived-del:focus-visible { opacity: 1; }
.goal-archived-del:hover { color: var(--error); background: var(--error-tint); }
.goal-archived-del svg { width: 12px; height: 12px; }
@media (pointer: coarse) {
.goal-archived-del { opacity: 1; }
}
/* Salvadanai modali */
.sd-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.sd-overlay.is-open { display: flex; }
.sd-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-12); width: min(440px, calc(100vw - var(--space-16))); box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
.sd-modal-head { margin-bottom: var(--space-8); }
.sd-modal-head h3 { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); }
.sd-modal-sub { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; }
.sd-modal-body { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-10); }
.sd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sd-field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.sd-field input { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); padding: var(--space-4) var(--space-6); outline: none; transition: border-color var(--duration-fast); }
.sd-field input:focus { border-color: var(--accent); }
.sd-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-4); }
.sd-modal-actions--split { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.sd-modal-wide { width: min(560px, calc(100vw - var(--space-16))); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-input); }
.btn-danger { color: var(--error); }
.btn-danger:hover { color: #fff; background: var(--error); border-color: var(--error); }
/* Modale «Dettagli movimento» (.md-*) — modifica ed eliminazione.
Movimenti manuali: tutti i campi editabili. Movimenti importati: solo
descrizione. Motivazione della restrizione: privacy delle descrizioni
pre-esistenti in estratti conto senza toccare la verità della banca. */
.md-body { display: flex; flex-direction: column; gap: var(--space-6); }
.md-field { display: flex; flex-direction: column; gap: var(--space-3); }
.md-field-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.md-field-label small { color: var(--text-tertiary); font-weight: var(--weight-normal); margin-left: var(--space-3); }
.md-field input, .md-field select, .md-field textarea {
background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-md); color: var(--text-heading);
font: inherit; font-size: var(--text-base); padding: 10px var(--space-6);
outline: none; transition: border-color var(--duration-fast);
}
.md-field input:focus, .md-field select:focus, .md-field textarea:focus { border-color: var(--accent); }
.md-field input:disabled, .md-field select:disabled {
color: var(--text-tertiary); background: var(--bg-page);
cursor: not-allowed;
}
.md-row { display: flex; gap: var(--space-5); }
.md-row > .md-field { flex: 1; min-width: 0; }
.md-note {
font-size: var(--text-xs); color: var(--text-tertiary);
background: var(--bg-input); border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
line-height: var(--leading-normal);
}
.md-note.is-warn { color: var(--warning); background: var(--warning-tint); }
/* Modale «Versa»: importo protagonista + campi data/nota inline (mockup) */
.sd-versa-amount {
display: flex; align-items: baseline; gap: var(--space-3);
background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); padding: var(--space-8);
margin-bottom: var(--space-5);
}
.sd-versa-amount .cur { font-size: var(--text-lg); color: var(--text-tertiary); }
.sd-versa-amount input {
flex: 1; background: none; border: none; outline: none;
color: var(--text-heading);
font-family: inherit;
font-size: var(--text-4xl); font-weight: var(--weight-black);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
padding: 0; min-width: 0;
}
.sd-versa-amount input::placeholder { color: var(--text-disabled); }
.sd-versa-fields { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-8); }
.sd-versa-fields > .sd-field { flex: 1; min-width: 140px; }
/* Modale Dettagli: header con saldo grande, storia .hist stile mockup */
.fund-detail-summary {
display: grid; grid-template-columns: auto 1fr;
align-items: center; gap: var(--space-8);
padding: var(--space-8);
background: var(--bg-input); border-radius: var(--radius-lg);
}
.fund-detail-summary .goal-ring, .fund-detail-summary .goal-ring-open { width: 72px; height: 72px; }
.fund-detail-saldo {
font-size: var(--text-2xl); font-weight: var(--weight-bold);
color: var(--text-heading); font-variant-numeric: tabular-nums;
}
.fund-detail-target { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.fund-detail-history-label {
font-size: var(--text-2xs); font-weight: var(--weight-semibold);
color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.1em;
margin: var(--space-6) 0 var(--space-3);
}
.fund-detail-history { max-height: 280px; overflow-y: auto; }
.h-row {
display: flex; align-items: baseline; gap: var(--space-5);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-sm);
}
.h-row:last-child { border-bottom: none; }
.h-date {
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
width: 60px; flex-shrink: 0;
font-size: var(--text-xs);
}
.h-amt {
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
width: 84px; flex-shrink: 0;
}
.h-amt.in { color: var(--c-savings); }
.h-amt.out { color: var(--text-secondary); }
.h-src {
color: var(--text-tertiary);
font-size: var(--text-xs);
line-height: var(--leading-normal);
flex: 1; min-width: 0;
}
.h-src em { color: var(--text-secondary); font-style: normal; }
.h-del {
appearance: none; border: none; background: none;
color: var(--text-tertiary); cursor: pointer;
padding: var(--space-2); border-radius: var(--radius-sm);
flex-shrink: 0;
}
.h-del:hover { color: var(--error); background: var(--bg-surface); }
.h-del .icon { width: 12px; height: 12px; }
.alloc-empty { padding: var(--space-8); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); }
/* Archivio buste */
.salvadanai-archive { margin-top: var(--space-12); border-top: 1px solid var(--border-subtle); padding-top: var(--space-8); interpolate-size: allow-keywords; }
.salvadanai-archive-head { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: var(--space-4) 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); user-select: none; }
.salvadanai-archive-head::-webkit-details-marker { display: none; }
.salvadanai-archive-head:hover { color: var(--text-primary); }
.salvadanai-archive-count { color: var(--text-tertiary); font-weight: 400; margin-left: var(--space-2); }
.salvadanai-archive .settings-chevron { width: 16px; height: 16px; color: var(--text-tertiary); transition: transform var(--duration-slow) var(--ease-spring); }
.salvadanai-archive[open] > .salvadanai-archive-head .settings-chevron { transform: rotate(180deg); }
.salvadanai-archive::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--duration-slow) var(--ease-spring), opacity var(--duration-slow) var(--ease-default), content-visibility var(--duration-slow) allow-discrete; }
.salvadanai-archive[open]::details-content { block-size: auto; opacity: 1; }
.salvadanai-grid-archive { margin-top: var(--space-6); }
.fund-card-archived { opacity: 0.65; cursor: default; }
.fund-card-archived:hover { border-color: var(--border-subtle); }
.fund-badge-archived { color: var(--text-tertiary); }
/* ── SMISTAMENTO (inbox row + chip dispatch) ── */
.salvadanai-inbox {
display: flex; align-items: center; gap: var(--space-4);
font-size: var(--text-xs); color: var(--text-tertiary);
padding: var(--space-4) var(--space-2); margin-bottom: var(--space-6);
}
.salvadanai-inbox a {
color: var(--accent-light); text-decoration: none; font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap;
}
.salvadanai-inbox a:hover { color: var(--text-heading); }
.sm-mov {
background: var(--bg-input); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7);
margin-bottom: var(--space-5);
}
.sm-mov:last-child { margin-bottom: 0; }
.sm-mov-desc { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.sm-mov-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin: var(--space-1) 0 var(--space-5); font-variant-numeric: tabular-nums; }
.sm-chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sm-chip {
appearance: none; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold);
border-radius: 999px; padding: var(--space-3) var(--space-7); cursor: pointer;
background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-secondary);
transition: border-color var(--duration-fast), color var(--duration-fast);
}
.sm-chip:hover { border-color: var(--accent); color: var(--accent-light); }
.sm-chip.is-free { border-style: dashed; color: var(--text-tertiary); }
.sm-chip.is-free:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.sm-chip.is-done { pointer-events: none; opacity: 0.5; border-color: var(--success); color: var(--success); }
.sm-done-label { font-size: var(--text-xs); color: var(--success); font-weight: var(--weight-semibold); margin-top: var(--space-3); }
/* ═══ COMPONENT · CALENDARIO (.dp-*) ═══
Datepicker unico dell'app — validato+codificato 12 lug 2026, mockup
docs/mockups/proposta-date-picker.html. Due modalità via
[data-mode="giorno"|"mese"]. Zero token nuovi: derivato dal DS.
L' nativo è nascosto e sincronizzato dal JS. */
/* Trigger visibile che sostituisce l'input nativo */
.dp-field {
display: inline-flex; align-items: center; justify-content: space-between;
gap: var(--space-5); width: 100%;
background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-md); color: var(--text-primary);
font: inherit; font-size: var(--text-base);
padding: 9px var(--space-6); cursor: pointer; text-align: left;
transition: border-color var(--duration-fast) var(--ease-default);
}
.dp-field:hover { border-color: var(--border-strong); }
.dp-field:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow-sm); }
.dp-field .dp-placeholder { color: var(--text-tertiary); }
.dp-field .icon { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }
/* Overlay a schermo pieno — riusa il pattern degli altri overlay dell'app */
.dp-overlay {
position: fixed; inset: 0; z-index: var(--z-overlay);
background: var(--bg-overlay); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
padding: var(--space-8);
}
.dp-overlay.is-open { display: flex; animation: dp-fade var(--duration-normal) var(--ease-default); }
@keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }
/* Finestra — nessuna animazione sul .dp: il JS ricrea il nodo ad ogni
render interno (navigazione mesi, cambio vista, selezione), e un
dp-in su un nodo appena montato faceva ripartire fade+scale ogni
volta, sembrava una vibrazione ad ogni click. L'apertura è
comunque animata dal fade dell'overlay. */
.dp {
width: min(320px, 100%);
background: var(--bg-surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
@keyframes dp-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.dp-overlay.is-open { animation: none; }
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.dp-head--center { justify-content: center; }
.dp-nav {
appearance: none; background: none; border: none;
width: 32px; height: 32px; border-radius: var(--radius-sm);
color: var(--text-secondary); cursor: pointer;
display: grid; place-items: center;
transition: background var(--duration-fast);
}
.dp-nav:hover { background: var(--bg-elevated); color: var(--text-primary); }
.dp-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-label {
appearance: none; background: none; border: none;
color: var(--text-heading); font: inherit; font-size: var(--text-base); font-weight: var(--weight-bold);
cursor: pointer; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
transition: background var(--duration-fast);
}
.dp-label:hover { background: var(--bg-elevated); }
/* Vista giorni */
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); }
.dp-dow span { text-align: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); text-transform: uppercase; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.dp-day {
appearance: none; background: none;
border: 1px solid transparent; border-radius: var(--radius-full);
width: 100%; aspect-ratio: 1;
color: var(--text-primary); font: inherit; font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
cursor: pointer; display: grid; place-items: center;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.dp-day:hover { background: var(--bg-elevated); }
.dp-day--today { border-color: var(--accent-light); color: var(--accent-light); }
.dp-day--selected, .dp-day--selected:hover { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); }
.dp-day--selected:hover { background: var(--accent-hover); }
.dp-day--out { visibility: hidden; }
.dp-day--disabled, .dp-day--disabled:hover { color: var(--text-disabled); cursor: default; background: none; }
/* Vista mesi / anni — griglia 3× */
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.dp-month {
appearance: none; background: none;
border: 1px solid transparent; border-radius: var(--radius-md);
color: var(--text-primary); font: inherit; font-size: var(--text-sm);
padding: var(--space-6) var(--space-2); cursor: pointer; text-align: center;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.dp-month:hover { background: var(--bg-elevated); }
.dp-month--today { border-color: var(--accent-light); color: var(--accent-light); }
.dp-month--selected, .dp-month--selected:hover { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); }
.dp-month--selected:hover { background: var(--accent-hover); }
.dp-month--disabled, .dp-month--disabled:hover { color: var(--text-disabled); cursor: default; background: none; }
.dp-years { max-height: 216px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); scrollbar-width: thin; }
/* Footer con azioni rapide + Annulla/OK */
.dp-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: var(--space-6); padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.dp-actions { display: flex; gap: var(--space-2); }
.dp-quick {
appearance: none; background: none; border: none;
color: var(--accent-light); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
cursor: pointer; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
transition: background var(--duration-fast), color var(--duration-fast);
}
.dp-quick:hover { background: var(--accent-muted); }
.dp-quick--muted { color: var(--text-tertiary); }
.dp-quick--muted:hover { background: var(--bg-elevated); color: var(--text-secondary); }
/* ═══ COMPONENT · CALENDARIO RANGE (.dpr-*) ═══
Variante range del datepicker, usata inline (non modale) — validata
12 lug 2026, mockup docs/mockups/proposta-date-picker-range.html.
Selezione a due tocchi: prima l'inizio, poi la fine; terzo tocco
ricomincia. Preset dentro al calendario. Zero token nuovi. */
.dpr { display: block; }
.dpr .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.dpr .dp-nav, .dpr .dp-label { /* riusa gli stili del .dp base */ }
.dpr-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); }
.dpr-dow span { text-align: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); text-transform: uppercase; }
/* Grid range: nessun gap orizzontale — la fascia diventa una banda continua
invece che una fila di quadrati staccati. Le celle giorno restano
separate perché il cerchio (40px) è più stretto della cella. */
.dpr-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--space-2); }
.dpr-cell {
position: relative; height: 44px; display: grid; place-items: center;
}
/* Fascia range confermato — pattern Airbnb tradotto in dark: il contrasto
lo fa la luminanza, non la tinta. Banda --accent-muted (più chiara della
superficie), numeri dentro la banda --text-heading semibold, estremi
cerchio pieno accent con testo bianco. Sugli estremi la banda
parte/finisce a metà cella: tocca il cerchio a filo, zero buchi. */
.dpr-cell.in-range::before {
content: ''; position: absolute; inset: 0;
background: var(--accent-muted);
z-index: 0;
}
.dpr-cell.range-start::before { inset: 0 0 0 50%; }
.dpr-cell.range-end::before { inset: 0 50% 0 0; }
.dpr-cell.range-start.range-end::before { display: none; } /* single-day: nessuna banda */
/* Anteprima al passaggio del mouse — banda più tenue della confermata
(accent-subtle vs muted): «sto guardando» pesa meno di «ho scelto».
Al mouseleave le classi range-preview* spariscono. */
.dpr-cell.range-preview::before {
content: ''; position: absolute; inset: 0;
background: var(--accent-subtle);
z-index: 0;
}
.dpr-cell.range-preview.preview-end::before { inset: 0 50% 0 0; }
.dpr-cell.range-preview.preview-start::before { inset: 0 0 0 50%; }
/* Numeri dentro la fascia: luminosi e semibold, come il nero sul grigio
chiaro di Airbnb. Gli estremi restano bianchi sul cerchio pieno. */
.dpr-cell.in-range .dpr-day:not(.dpr-day--selected),
.dpr-cell.range-preview .dpr-day:not(.dpr-day--selected) {
color: var(--text-heading);
font-weight: var(--weight-semibold);
}
.dpr-day {
position: relative; z-index: 1;
width: 40px; height: 40px; border-radius: var(--radius-full);
background: none; border: 1px solid transparent;
color: var(--text-primary); font: inherit; font-size: var(--text-sm);
font-variant-numeric: tabular-nums; cursor: pointer;
display: grid; place-items: center;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
/* Hover = cerchio vuoto (pattern Airbnb): bordo visibile, nessun fondo */
.dpr-day:hover { border-color: var(--accent-light); }
/* L'anello «oggi» esiste solo a selezione vuota: il JS toglie la classe
appena parte una selezione (dentro la banda sembrerebbe un terzo estremo) */
.dpr-day--today { border-color: var(--accent-light); color: var(--accent-light); }
.dpr-day--selected, .dpr-day--selected:hover { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); border-color: transparent; }
.dpr-day--selected:hover { background: var(--accent-hover); }
.dpr-day--out { visibility: hidden; }
.dpr-day--disabled, .dpr-day--disabled:hover { color: var(--text-disabled); cursor: default; background: none; border-color: transparent; }
.dpr-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: var(--space-6); padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap; gap: var(--space-4);
}
.dpr-presets { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dpr-preset {
background: none; border: 1px solid var(--border-default);
border-radius: var(--radius-full); color: var(--text-secondary);
font: inherit; font-size: var(--text-xs); padding: 4px var(--space-5); cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.dpr-preset:hover { border-color: var(--border-strong); color: var(--text-primary); }
.dpr-preset.is-active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent-light); }
/* Contatore giorni selezionati — l'unico testo di stato rimasto dopo la
rimozione delle chip Dal/Al: la selezione la racconta il calendario. */
.dpr-count { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-left: auto; }
/* ═══ COMPONENT · DIALOG (.dlg-*) ═══
Confirm/prompt DS-conform che sostituisce window.confirm/prompt nativi.
Validato 10 lug 2026. API: showConfirm(...) / showPrompt(...) in
js/ui/dialog.js. Overlay singleton, riusa il pattern .dp-overlay. */
.dlg-overlay {
position: fixed; inset: 0; z-index: var(--z-overlay);
background: var(--bg-overlay); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
padding: var(--space-8);
}
.dlg-overlay.is-open { display: flex; animation: dp-fade var(--duration-normal) var(--ease-default); }
.dlg {
width: min(400px, 100%);
background: var(--bg-surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); padding: var(--space-10);
box-shadow: var(--shadow-lg);
animation: dp-in var(--duration-normal) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
.dlg-overlay.is-open, .dlg { animation: none; }
}
.dlg-head { margin-bottom: var(--space-8); }
.dlg-title { color: var(--text-heading); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.dlg-message { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-normal); }
.dlg-body { margin-bottom: var(--space-8); }
.dlg-input {
width: 100%; background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-md); color: var(--text-heading);
font: inherit; font-size: var(--text-base); padding: 10px var(--space-6);
outline: none; transition: border-color var(--duration-fast);
}
.dlg-input:focus { border-color: var(--accent); box-shadow: var(--shadow-glow-sm); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--space-4); }
/* ═══════════════════════════════════════════════════════════════════════════
COMPONENT · PANNELLI PIANO DI SPESA (.ps-panel-*)
Accordion 3 pannelli (Metti da parte, Copri le spese, Vivi il resto).
Implementa il pattern DS «Collapsible con riassunto»: header cliccabile
intero, chevron ruotante, riga di riassunto sotto il titolo quando chiuso.
Base tecnica: /. Ratio: una sezione chiusa non deve
diventare muta — se chiudere costa informazione, nessuno chiude.
═══════════════════════════════════════════════════════════════════════════ */
.ps-panel { list-style: none; margin: 0 0 var(--space-4); }
.ps-panel summary { list-style: none; cursor: pointer; }
.ps-panel summary::-webkit-details-marker { display: none; }
.ps-panel-head {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-8) var(--space-10);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: border-color var(--duration-fast) var(--ease-default);
}
.ps-panel[open] .ps-panel-head {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom-color: transparent;
}
.ps-panel-head:hover { border-color: var(--border-default); }
.ps-panel-num {
width: var(--step-num-size); height: var(--step-num-size);
border-radius: 50%;
background: var(--step-num-bg);
color: var(--step-num-fg);
font-size: var(--text-sm); font-weight: var(--weight-bold);
display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.ps-panel-titles { min-width: 0; }
.ps-panel-title {
color: var(--text-heading);
font-size: var(--text-md); font-weight: var(--weight-bold);
letter-spacing: -0.005em;
}
.ps-panel-sub {
color: var(--text-tertiary);
font-size: var(--text-xs);
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-panel-sub .attention { color: var(--warning); }
.ps-panel-eur {
color: var(--text-heading);
font-size: var(--text-md); font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
.ps-panel-eur small {
color: var(--text-tertiary);
font-size: var(--text-2xs); font-weight: var(--weight-normal);
margin-left: 4px;
}
.ps-panel-chev {
width: 16px; height: 16px;
color: var(--text-secondary);
transition: transform var(--duration-normal) var(--ease-default);
}
.ps-panel[open] .ps-panel-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.ps-panel-chev { transition: none; }
}
.ps-panel-body {
border: 1px solid var(--border-subtle);
border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: var(--space-4) 0 var(--space-4);
}
/* Righe delle voci — hairline sottile, mai secondo tono di sfondo. */
.ps-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-6) var(--space-10);
border-bottom: 1px solid var(--border-subtle);
}
.ps-row:last-child { border-bottom: none; }
.ps-row-dot {
width: 6px; height: 6px; border-radius: 50%;
flex: 0 0 6px;
}
.ps-row-body { min-width: 0; }
.ps-row-name {
color: var(--text-primary);
font-size: var(--text-base); font-weight: var(--weight-semibold);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-row-meta {
color: var(--text-tertiary);
font-size: var(--text-xs); margin-top: 2px;
}
.ps-row-meta .lock { display: inline-flex; align-items: center; gap: 4px; }
.ps-row-meta .lock svg { width: 11px; height: 11px; }
.ps-row-eur {
color: var(--text-heading);
font-size: var(--text-base); font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
.ps-row-eur small {
color: var(--text-tertiary);
font-size: var(--text-2xs); font-weight: var(--weight-normal);
margin-left: 4px;
}
/* Salvadanaio: micro progress bar sotto il nome. */
.ps-row--fund {
grid-template-columns: auto 1fr auto auto;
}
.ps-row-progress {
grid-column: 2 / span 2;
margin-top: var(--space-4);
height: 4px;
background: var(--progress-track);
border-radius: var(--radius-full);
overflow: hidden;
}
.ps-row-progress-fill {
height: 100%;
background: var(--progress-fill-neutral);
border-radius: var(--radius-full);
transition: width var(--duration-slow) var(--ease-default);
}
.ps-row-progress-fill.is-complete { background: var(--success); }
.ps-row-link {
color: var(--accent-light);
font-size: var(--text-xs); font-weight: var(--weight-semibold);
text-decoration: none;
}
.ps-row-link:hover { color: var(--text-heading); }
/* Bottone «+ Aggiungi voce fissa» dentro il pannello Copri le spese. */
.ps-row-add {
display: flex; align-items: center; gap: var(--space-4);
width: 100%;
padding: var(--space-6) var(--space-10);
background: none; border: none; cursor: pointer;
color: var(--accent-light);
font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
text-align: left;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
transition: background var(--duration-fast) var(--ease-default);
}
.ps-row-add:hover { background: var(--accent-subtle); }
.ps-row-add svg { width: 14px; height: 14px; }
.ps-empty {
padding: var(--space-8) var(--space-10);
color: var(--text-tertiary);
font-size: var(--text-xs);
font-style: italic;
}
/* ═════ MODALE «Modifica il piano di spesa» (.pse-*) ═════
Palette «Whisper» validata 11 lug 2026. Sheet contenitore --bg-surface con
bordo --border-subtle e radius 2xl. Hero interno con gradient accent
lievissimo (6%→0), batteria mini live 26px, riga di stato coi numeri e
chip di salute. Body: righe voci separate da hairline sottile.
Zero secondi toni di sfondo, zero card annidate. */
.pse-modal {
width: min(520px, 100%);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: dp-in var(--duration-normal) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
.pse-modal { animation: none; }
}
.pse-hero {
padding: 24px 24px 20px;
border-bottom: 1px solid var(--border-subtle);
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 6%, var(--bg-surface)) 0%,
var(--bg-surface) 100%);
}
.pse-hero-title {
color: var(--text-heading);
font-size: var(--text-lg); font-weight: var(--weight-bold);
letter-spacing: -0.01em; margin-bottom: 2px;
}
.pse-hero-sub {
color: var(--text-secondary);
font-size: var(--text-sm);
margin-bottom: var(--space-8);
}
.pse-hero-batt-row {
display: flex; align-items: center; gap: var(--space-6);
margin-bottom: var(--space-6);
}
.pse-hero-batt-row .ps-batt { flex: 1 1 auto; }
.pse-hero-status {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
flex-wrap: wrap;
}
.pse-hero-numbers {
color: var(--text-tertiary);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
.pse-hero-numbers strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* Status a fianco dei numeri: testo bold semantico (mockup v3), non chip.
Il chip vive sull'hero della pagina; qui la modale «Whisper» resta calma. */
.pse-hero-status-lbl { font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════════
COMPONENT · SCENA METEO — hero Piano di Spesa (.pse-hero-meteo)
═══════════════════════════════════════════════════════════════
Sostituisce .ps-batt-* (SUPERSEDED). Tesi: il sole è fermo (= entrate),
è il cielo che cambia col piano. Scena panoramica con overlay numeri,
non componente-cruscotto. Stati sano/attn/morto guidati da data-state
sul container (.pse-hero-meteo). Regole di coerenza fisica: nel morto
il sole è dietro le nuvole → glint sull'acqua = 0, raggi = 0.12; mare
mosso via crossfade tra set-calmo e set-rough (niente animazione del
path d, Safari non la regge). Elementi interni con prefisso .psm-. */
.pse-hero-meteo {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-input);
isolation: isolate;
}
.pse-hero-meteo-stage { display: block; width: 100%; }
.pse-hero-meteo-stage svg { display: block; width: 100%; height: auto; }
.pse-hero-meteo-overlay {
position: absolute; left: var(--space-8); bottom: var(--space-8);
background: var(--met-scrim);
border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
border-radius: var(--radius-lg);
padding: 11px 15px 12px;
}
.pse-hero-meteo-overlay .k {
font-size: var(--text-2xs); font-weight: var(--weight-bold);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-secondary);
}
.pse-hero-meteo-overlay .v {
font-size: 29px; font-weight: var(--weight-bold);
letter-spacing: -0.02em; color: var(--text-heading);
font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pse-hero-meteo-overlay .s {
font-size: var(--text-xs); color: var(--text-secondary);
}
@media (max-width: 480px) {
.pse-hero-meteo-overlay { left: 10px; bottom: 10px; padding: 8px 12px 9px; }
.pse-hero-meteo-overlay .v { font-size: var(--text-2xl); }
}
/* Nuvole: entrano ed escono con le transizioni di stato.
Posizioni fuori-frame default in sano; scivolano dentro in attn/morto. */
.pse-hero-meteo .psm-cloud { fill: var(--met-cloud); transition: transform .8s var(--ease-spring); }
.pse-hero-meteo .psm-cl-a { transform: translate(-180px, 52px); }
.pse-hero-meteo .psm-cl-b { transform: translate(950px, 60px); }
.pse-hero-meteo .psm-cl-c { transform: translate(-280px, 104px); }
.pse-hero-meteo .psm-cl-d { transform: translate(990px, 118px); }
.pse-hero-meteo[data-state="attn"] .psm-cl-a { transform: translate(120px, 52px); }
.pse-hero-meteo[data-state="attn"] .psm-cl-b { transform: translate(492px, 66px); }
.pse-hero-meteo[data-state="morto"] .psm-cl-a { transform: translate(70px, 42px) scale(1.15); }
.pse-hero-meteo[data-state="morto"] .psm-cl-b { transform: translate(512px, 52px) scale(1.2); }
.pse-hero-meteo[data-state="morto"] .psm-cl-c { transform: translate(290px, 96px); }
.pse-hero-meteo[data-state="morto"] .psm-cl-d { transform: translate(668px, 112px); }
/* Sole, halo, raggi, veil (nube davanti al sole) */
.pse-hero-meteo .psm-halo { opacity: .9; transition: opacity .8s var(--ease-spring); }
.pse-hero-meteo[data-state="attn"] .psm-halo { opacity: .45; }
.pse-hero-meteo[data-state="morto"] .psm-halo { opacity: .2; }
.pse-hero-meteo .psm-rays {
opacity: 1; transform-origin: 0 0;
animation: psm-turn 140s linear infinite;
transition: opacity .8s var(--ease-spring);
}
.pse-hero-meteo[data-state="attn"] .psm-rays { opacity: .45; }
.pse-hero-meteo[data-state="morto"] .psm-rays { opacity: .12; }
.pse-hero-meteo .psm-veil { opacity: 0; transition: opacity .8s var(--ease-spring); }
.pse-hero-meteo[data-state="attn"] .psm-veil { opacity: .38; }
.pse-hero-meteo[data-state="morto"] .psm-veil { opacity: .6; }
/* Luccichio sul mare — coerenza fisica: nel morto il sole è coperto,
quindi nessuna luce diretta sull'acqua → opacity 0, non basso. */
.pse-hero-meteo .psm-glint { transition: opacity .8s var(--ease-spring); }
.pse-hero-meteo[data-state="attn"] .psm-glint { opacity: .35; }
.pse-hero-meteo[data-state="morto"] .psm-glint { opacity: 0; }
/* Velo generale del cielo coperto (rect fullsize) */
.pse-hero-meteo .psm-gloom { opacity: 0; transition: opacity .8s var(--ease-spring); }
.pse-hero-meteo[data-state="attn"] .psm-gloom { opacity: .10; }
.pse-hero-meteo[data-state="morto"] .psm-gloom { opacity: .22; }
/* Pioggia gentile: un fatto del cielo, non una punizione */
.pse-hero-meteo .psm-rain { opacity: 0; transition: opacity .7s var(--ease-spring); }
.pse-hero-meteo[data-state="morto"] .psm-rain { opacity: 1; }
.pse-hero-meteo[data-state="morto"] .psm-rain line { animation: psm-fall 1.7s linear infinite; }
.pse-hero-meteo .psm-rain line:nth-child(2n) { animation-delay: .55s; }
.pse-hero-meteo .psm-rain line:nth-child(3n) { animation-delay: .95s; }
.pse-hero-meteo .psm-rain line:nth-child(5n) { animation-delay: 1.3s; }
/* Onde: due set (calmo + rough), crossfade su cambio stato */
.pse-hero-meteo .psm-wave { stroke: var(--met-wave); animation: psm-drift 16s ease-in-out infinite alternate; }
.pse-hero-meteo .psm-w2 { animation-duration: 21s; animation-delay: -6s; }
.pse-hero-meteo .psm-w3 { animation-duration: 26s; animation-delay: -12s; }
.pse-hero-meteo .psm-wave--calm,
.pse-hero-meteo .psm-wave--rough { transition: opacity .8s var(--ease-spring); }
.pse-hero-meteo .psm-wave--rough { opacity: 0; }
.pse-hero-meteo[data-state="morto"] .psm-wave--calm { opacity: 0; }
.pse-hero-meteo[data-state="morto"] .psm-wave--rough { opacity: 1; }
.pse-hero-meteo .psm-wave--rough.psm-w1 { animation-duration: 9s; }
.pse-hero-meteo .psm-wave--rough.psm-w2 { animation-duration: 10.5s; animation-delay: -3s; }
.pse-hero-meteo .psm-wave--rough.psm-w3 { animation-duration: 12s; animation-delay: -7s; }
@keyframes psm-turn { to { transform: rotate(360deg); } }
@keyframes psm-fall {
0% { transform: translateY(0); opacity: 0; }
12% { opacity: .9; }
80% { opacity: .75; }
100% { transform: translateY(158px); opacity: 0; }
}
@keyframes psm-drift {
from { transform: translateX(0); }
to { transform: translateX(-46px); }
}
@media (prefers-reduced-motion: reduce) {
.pse-hero-meteo .psm-cloud,
.pse-hero-meteo .psm-halo,
.pse-hero-meteo .psm-rays,
.pse-hero-meteo .psm-veil,
.pse-hero-meteo .psm-glint,
.pse-hero-meteo .psm-gloom,
.pse-hero-meteo .psm-rain,
.pse-hero-meteo .psm-wave,
.pse-hero-meteo .psm-wave--calm,
.pse-hero-meteo .psm-wave--rough { transition: none; animation: none; }
}
/* ═══════════════════════════════════════════════════════════════
COMPONENT · CARD METEO — variante compatta (.pse-meteo-card)
═══════════════════════════════════════════════════════════════
Sorella di .pse-hero-meteo (scena panoramica). Rappresentazione
alternativa quando lo spazio non regge la scena: stile «widget
meteo del telefono» — icona grande, parola di stato, € libere.
Consumatori: hero mini del wizard (step 2/3) e modale «Modifica
il piano». Stati sano/attn/morto guidati da data-state sul
container. Icone interne con prefisso .psm-i-* (crossfade).
Promossa dal mockup v7 (D4) il 15 lug 2026. */
.pse-meteo-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.pse-meteo-card-top { display: flex; align-items: center; gap: 14px; }
.pse-meteo-card-icon { position: relative; width: 52px; height: 52px; flex: none; }
.pse-meteo-card-icon svg {
position: absolute; inset: 0; opacity: 0; transform: scale(.88);
transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring);
}
.pse-meteo-card[data-state="sano"] .psm-i-sun,
.pse-meteo-card[data-state="attn"] .psm-i-mix,
.pse-meteo-card[data-state="morto"] .psm-i-rain { opacity: 1; transform: scale(1); }
.pse-meteo-card-state {
font-size: var(--text-base); font-weight: var(--weight-bold);
color: var(--text-heading); line-height: 1.2;
}
.pse-meteo-card-value {
font-size: 22px; font-weight: var(--weight-bold);
letter-spacing: -0.02em; color: var(--text-heading);
font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pse-meteo-card-cap {
font-size: var(--text-2xs); color: var(--text-secondary); margin-top: 2px;
}
.pse-meteo-card .psm-i-rain-drops line { stroke: var(--info); }
.pse-meteo-card[data-state="morto"] .psm-i-rain-drops line {
animation: psm-i-drip 1.8s ease-in infinite;
}
.pse-meteo-card .psm-i-rain-drops line:nth-child(2) { animation-delay: .5s; }
.pse-meteo-card .psm-i-rain-drops line:nth-child(3) { animation-delay: 1s; }
@keyframes psm-i-drip {
0% { transform: translateY(-4px); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pse-meteo-card-icon svg { transition: none; }
.pse-meteo-card .psm-i-rain-drops line { animation: none; }
}
.pse-body { padding: var(--space-4) 0 var(--space-6); }
.pse-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-6) 24px;
border-bottom: 1px solid var(--border-subtle);
}
.pse-row:last-child { border-bottom: none; }
.pse-row-info { min-width: 0; }
.pse-row-name {
color: var(--text-primary);
font-size: var(--text-base); font-weight: var(--weight-semibold);
display: inline-flex; align-items: center; gap: var(--space-3);
}
.pse-row-name .lock {
width: 12px; height: 12px; color: var(--text-tertiary); flex: 0 0 12px;
}
.pse-row-meta {
color: var(--text-tertiary);
font-size: var(--text-xs);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.pse-row-locked-val {
color: var(--text-heading);
font-size: var(--text-base); font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.pse-warn {
padding: var(--space-4) 24px;
color: var(--warning);
font-size: var(--text-xs);
background: var(--warning-tint);
}
.pse-actions {
display: flex; justify-content: flex-end; align-items: center;
gap: var(--space-4);
padding: var(--space-6) 24px;
border-top: 1px solid var(--border-subtle);
}
/* Overrides della mini batteria dentro l'hero della modale: allargata per
respirare nello spazio disponibile senza perdere metafora. */
.pse-hero .ps-batt.ps-batt--mini { min-width: 0; }
/* ═════ Wizard first-time (.pse-wizard-*) ═════
Riusa .pse-modal come contenitore. Aggiunge un indicator 3 dot in cima
e uno spazio step con input pesante allo step 1 (entrate). Gli step 2 e 3
riusano le stesse .pse-row / .ps-batt del pattern «Modifica il piano»,
così l'utente incontra la stessa grammatica visuale che ritroverà a regime. */
.pse-wizard-steps {
display: flex; justify-content: center; align-items: center;
gap: var(--space-3); margin-bottom: var(--space-8);
}
.pse-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border-strong);
transition: background var(--duration-fast) var(--ease-default),
width var(--duration-fast) var(--ease-default);
}
.pse-wizard-dot.is-current { background: var(--accent); width: 20px; border-radius: var(--radius-full); }
.pse-wizard-dot.is-done { background: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .pse-wizard-dot { transition: none; } }
.pse-wizard-body {
padding: 12px 24px 24px;
min-height: 220px;
}
.pse-wizard-heading {
color: var(--text-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
}
.pse-wizard-lead {
color: var(--text-secondary);
font-size: var(--text-base);
line-height: var(--leading-normal);
margin-bottom: var(--space-10);
max-width: 44ch;
}
/* Input entrate — pesante e centrato, formato coerente con .ds-input-sheet */
.pse-wizard-income {
display: flex; align-items: baseline; justify-content: center;
gap: var(--space-4);
padding: var(--space-8) 0;
}
.pse-wizard-income .prefix {
color: var(--text-tertiary);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
}
.pse-wizard-income input {
background: none; border: none; outline: none;
color: var(--text-heading);
font-family: inherit;
font-size: var(--text-hero);
font-weight: var(--weight-black);
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
text-align: left;
width: 260px;
min-width: 0;
border-bottom: 2px solid var(--border-default);
padding-bottom: 4px;
transition: border-color var(--duration-fast);
}
.pse-wizard-income input:focus { border-bottom-color: var(--accent); }
.pse-wizard-hint {
text-align: center;
color: var(--text-tertiary);
font-size: var(--text-sm);
margin-top: var(--space-4);
}
.pse-wizard-hint a {
color: var(--accent-light); text-decoration: none; cursor: pointer;
font-weight: var(--weight-semibold);
}
/* Riepilogo finale — grande batteria hero + numeri centrali */
.pse-wizard-summary { text-align: center; }
.pse-wizard-summary .ps-batt { margin: var(--space-8) 0; }
.pse-wizard-numbers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin: var(--space-8) 0;
}
.pse-wizard-num {
padding: var(--space-6);
background: var(--bg-input);
border-radius: var(--radius-md);
text-align: center;
}
.pse-wizard-num-label {
color: var(--text-tertiary);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
.pse-wizard-num-val {
color: var(--text-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
/* Campo etichetta+input (modale «Aggiungi voce fissa»). */
.ps-field { display: flex; flex-direction: column; gap: var(--space-3); }
.ps-field-label {
color: var(--text-secondary);
font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPONENT · BATTERIA PIANO DI SPESA (.ps-batt-*)
Sintesi del piano come batteria orizzontale a 3 segmenti (Accumula, Necessario,
Libere) con nubbin a destra. Direzione B «carica residua» validata 11 lug 2026,
mockup docs/mockups/proposta-piano-spesa-v3-palette-review.html sez. B.
Ratio cromatico:
- Cassa neutra --border-strong: la scocca non porta stato.
- Allocato (Accumula + Necessario) in viola tonale a due gradini (60% e 32%
sull'input): sono soldi già impegnati, hanno una sola personalità.
- Libere = la carica: colore semantico (success/warning) + alone dedicato.
- Glow di stato: 3 strati color-mix intorno alla cassa. È rinforzo del segnale,
non informazione (lo stato vive già nel colore Libere e nella chip). Solo hero.
- Stato morto (libere = 0): corpo grigio spento voluto, contrasto basso è
dichiarato. L'informazione la porta la chip --error (4.77:1). Brace rossa
intorno + nubbin rosso.
- Percentuali FUORI dai segmenti (bianco 14px su accent è 3.99:1, sotto AA).
Le label sotto in colonna verticale con nome + % + euro.
- Gap 2px tra segmenti (--bg-input visibile): senza gap i due viola distano
1.35:1 e il confine sparisce.
═══════════════════════════════════════════════════════════════════════════ */
/* Hero verticale: riga eyebrow+entrate, scena meteo contenuta e centrata,
separatore sottile, footer con chip di stato a sinistra e CTA a destra. */
.ps-hero {
display: flex; flex-direction: column;
gap: var(--space-8);
padding: var(--space-4) 0;
}
/* SCENA METEO come hero (consumatore Piano di Spesa).
La scena ha viewBox 760×340 (aspect 2.235:1): a piena larghezza su desktop
diventerebbe un poster (altezza 500px+). La cappiamo a 1000px e centriamo.
Il problema: capping → bande laterali vuote. La soluzione architetturale:
lo SFONDO (cielo, mare, velo overcast) vive sul CONTAINER a piena larghezza;
lo SVG capped porta solo il PRIMO PIANO (sole, nuvole, onde, pioggia, glint).
I 3 di sfondo dell'SVG (cielo/mare/psm-gloom) sono nascosti QUI: il
gradiente del container traspare al loro posto, identico sulle bande e sotto
la scena → zero seam per costruzione, in tutti gli stati. I mockup standalone
(senza wrapper .ps-hero) tengono i loro rect e restano invariati.
⚠ ACCOPPIAMENTO: gli stop del gradiente sotto rispecchiano i dell'SVG
in _renderMeteoScene() (js/views/budget.js). Orizzonte 236/340 = 69.412%;
stop cielo-lo 160.5/340 = 47.206% (offset .68 del rect cielo alto 236).
L'overcast rispecchia le opacità di .psm-gloom (attn .10 / morto .22).
Se cambia uno, aggiorna l'altro. */
.ps-hero > .pse-hero-meteo {
--_met-overcast: transparent;
background:
linear-gradient(var(--_met-overcast), var(--_met-overcast)),
linear-gradient(to bottom,
var(--met-sky-hi) 0%,
var(--met-sky-lo) 47.206%,
var(--met-sky-haze) 69.412%,
var(--met-sea-hi) 69.412%,
var(--met-sea-lo) 100%
);
}
.ps-hero > .pse-hero-meteo[data-state="attn"] { --_met-overcast: color-mix(in srgb, var(--met-cloud) 10%, transparent); }
.ps-hero > .pse-hero-meteo[data-state="morto"] { --_met-overcast: color-mix(in srgb, var(--met-cloud) 22%, transparent); }
.ps-hero > .pse-hero-meteo > .pse-hero-meteo-stage { max-width: 1000px; margin: 0 auto; }
.ps-hero > .pse-hero-meteo svg > rect { display: none; }
.ps-hero-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--space-6); flex-wrap: wrap;
}
.ps-hero-eyebrow {
color: var(--text-tertiary);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: var(--weight-semibold);
}
.ps-hero-income {
color: var(--text-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.ps-hero-income small {
color: var(--text-tertiary);
font-size: var(--text-xs);
font-weight: var(--weight-normal);
margin-left: var(--space-3);
}
.ps-hero-divider {
height: 1px; background: var(--border-subtle);
margin: 0;
}
.ps-hero-foot {
display: flex; justify-content: space-between; align-items: center;
gap: var(--space-6); flex-wrap: wrap;
}
.ps-hero-foot .btn { display: inline-flex; align-items: center; gap: var(--space-3); }
.ps-hero-foot .btn svg { width: 14px; height: 14px; }
/* Batteria — taglia hero (dimensioni da mockup v3-palette-review) */
.ps-batt {
position: relative;
display: flex; align-items: stretch;
height: 56px;
border: 3px solid var(--border-strong);
border-radius: 14px;
background: var(--bg-input);
padding: 3px;
gap: 2px;
transition: border-color var(--duration-normal) var(--ease-default);
}
/* Nubbin: capsula piccola a destra, simboleggia il polo positivo.
right: -width per fare in modo che il LEFT del nubbin coincida col border-box
right del contenitore (attaccato al bordo, non a distanza dal bordo).
Dimensioni 8x26 da mockup v3. */
.ps-batt::after {
content: '';
position: absolute;
right: -8px; top: 50%; transform: translateY(-50%);
width: 8px; height: 26px;
border-radius: 0 4px 4px 0;
background: var(--border-strong);
transition: background var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default);
}
.ps-batt-seg {
position: relative;
height: 100%;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
transition: width var(--duration-normal) var(--ease-default),
background var(--duration-normal) var(--ease-default);
}
/* Percentuale DENTRO il segmento (layout Fable). Deroga alla regola «% fuori»
del prompt originale: il testo è large bold (--text-2xl 22px), quindi WCAG
large-text (3:1); sul viola tonale 60% il contrasto col bianco è ~7:1, sul
32% ancora più alto. Segmenti troppo stretti (<12%) nascondono la % via
overflow: hidden, la lettura vive comunque nella label sotto. */
.ps-batt-pct {
color: var(--on-accent);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
white-space: nowrap;
}
.ps-batt.is-dead .ps-batt-pct { color: var(--text-secondary); }
/* Allocato: due tonalità di viola sul --bg-input, distanza percettiva netta
grazie al gap 2px (senza gap i due viola distano 1.35:1). */
.ps-batt-seg--accumula { background: color-mix(in srgb, var(--accent) 60%, var(--bg-input)); }
.ps-batt-seg--necessario { background: color-mix(in srgb, var(--accent) 32%, var(--bg-input)); }
.ps-batt-seg--libere { background: var(--success); }
/* Glow di stato — SOLO taglia hero. Tre strati sul semantico dello stato:
anello a filo 30% + alone vicino 22% blur 16px + alone ambiente 10% blur 44px.
È rinforzo, non informazione. Statico (il DS vieta i glow ambient animati). */
.ps-batt.is-healthy {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent),
0 0 16px 0 color-mix(in srgb, var(--success) 22%, transparent),
0 0 44px 8px color-mix(in srgb, var(--success) 10%, transparent);
}
.ps-batt.is-healthy::after { background: var(--success); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--success) 45%, transparent); }
.ps-batt.is-healthy .ps-batt-seg--libere { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--success) 45%, transparent); }
.ps-batt.is-attention {
border-color: color-mix(in srgb, var(--warning) 40%, var(--border-strong));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent),
0 0 16px 0 color-mix(in srgb, var(--warning) 22%, transparent),
0 0 44px 8px color-mix(in srgb, var(--warning) 10%, transparent);
}
.ps-batt.is-attention .ps-batt-seg--libere { background: var(--warning); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--warning) 45%, transparent); }
.ps-batt.is-attention::after { background: var(--warning); }
/* Stato «morto» — libere = 0. Il corpo perde saturazione VOLUTAMENTE: l'informazione
la porta la chip .ds-status-chip--error (4.77:1 su tint). Brace rossa intorno. */
.ps-batt.is-dead {
border-color: var(--border-default);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--error) 22%, transparent),
0 0 14px 0 color-mix(in srgb, var(--error) 14%, transparent),
0 0 44px 8px color-mix(in srgb, var(--error) 6%, transparent);
}
/* Correzione 13 lug: 32/16% risultavano indistinguibili l'uno dall'altro e dal
--bg-input (gap invisibile); l'utente leggeva «batteria vuota» in contraddizione
col chip «Hai allocato tutto». Alzate a 65/38% mantenendo la desaturazione
(nessuna tinta accent): il corpo dice «pieno ma spento», la brace rossa dice
perché. Contrasto sui segmenti resta sotto 3:1 verso il testo (voluto: la
lettura vive sulla chip --error, 4.77:1 su tint). */
.ps-batt.is-dead .ps-batt-seg--accumula { background: color-mix(in srgb, var(--text-disabled) 65%, var(--bg-input)); }
.ps-batt.is-dead .ps-batt-seg--necessario { background: color-mix(in srgb, var(--text-disabled) 38%, var(--bg-input)); }
.ps-batt.is-dead .ps-batt-seg--libere { background: transparent; }
.ps-batt.is-dead::after { background: var(--error); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--error) 50%, transparent); }
@media (prefers-reduced-motion: reduce) {
.ps-batt, .ps-batt::after, .ps-batt-seg { transition: none; }
}
/* Label sotto la batteria: nome + % + euro per ogni segmento.
Allineate in proporzione ai segmenti (via width inline), non in terzi fissi. */
/* Label sotto — colonne allineate ai segmenti. Layout Fable: NAME uppercase
piccolo sopra, importo bold heading sotto. Nessuna %: la % vive dentro
il segmento; qui la conseguenza monetaria. */
.ps-batt-legend {
display: flex; margin-top: var(--space-6); gap: 2px;
padding: 0 6px;
}
.ps-batt-legend-item {
min-width: 0;
display: flex; flex-direction: column; gap: var(--space-3);
align-items: center;
overflow: hidden;
text-align: center;
}
.ps-batt-legend-name {
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.ps-batt-legend-num {
color: var(--text-heading);
font-variant-numeric: tabular-nums;
font-weight: var(--weight-bold);
font-size: var(--text-md);
white-space: nowrap;
}
/* Mini batteria — modale «Modifica il piano», 26px alta, bordo 1.5px, niente glow.
Tiene colori e nubbin per continuità di lettura. */
.ps-batt.ps-batt--mini {
height: 26px;
border-width: 1.5px;
border-radius: 8px;
padding: 1.5px;
box-shadow: none !important;
}
.ps-batt.ps-batt--mini::after {
width: 5px; height: 12px; right: -5px;
border-radius: 0 2px 2px 0;
box-shadow: none !important;
}
.ps-batt.ps-batt--mini .ps-batt-seg--libere { box-shadow: none !important; }
.ps-batt.ps-batt--mini .ps-batt-pct { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
COMPONENT · PROIEZIONI (.pj-*)
Direzione C validata 11 lug: 3 domande numerate (step-head), hero runway 48px,
forecast card, ricorrenti rows, chart-note dashed. Mockup:
docs/mockups/proposta-proiezioni.html (blocchi RUNWAY + FORECAST + RICORRENTI).
═══════════════════════════════════════════════════════════════════════════ */
/* Sub-titolo pagina */
.pj-subtitle {
font-size: var(--text-sm);
color: var(--text-tertiary);
margin: var(--space-2) 0 var(--space-6);
line-height: var(--leading-normal);
}
/* Runway hero — la protagonista */
.pj-runway { margin: var(--space-3) 0 var(--space-4); }
.pj-runway-big {
font-size: var(--text-hero); /* 48px */
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 1.1;
color: var(--warning);
font-variant-numeric: tabular-nums;
}
.pj-runway-big.is-ok { color: var(--success); }
.pj-runway-big.is-danger { color: var(--error); }
.pj-runway-big small {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
letter-spacing: 0;
margin-left: var(--space-4);
}
.pj-runway-sub {
font-size: var(--text-sm);
color: var(--text-tertiary);
margin-top: var(--space-3);
font-variant-numeric: tabular-nums;
}
.pj-runway-sub strong { color: var(--text-secondary); font-weight: var(--weight-semibold); }
/* Scala 0-12 mesi */
.pj-runway-scale {
position: relative; height: 6px;
background: var(--progress-track);
border-radius: var(--radius-xs);
margin: var(--space-8) 0 var(--space-16);
max-width: 480px;
}
.pj-runway-fill {
height: 100%; border-radius: var(--radius-xs);
background: var(--warning);
}
.pj-runway-fill.is-ok { background: var(--success); }
.pj-runway-fill.is-danger { background: var(--error); }
.pj-runway-mark {
position: absolute; top: var(--space-5);
font-size: var(--text-2xs);
color: var(--text-disabled);
transform: translateX(-50%);
font-variant-numeric: tabular-nums;
}
/* Riga sorgente saldo (con Modifica) */
.pj-runway-src {
font-size: var(--text-xs);
color: var(--text-disabled);
margin-top: calc(-1 * var(--space-6));
margin-bottom: var(--space-4);
}
.pj-runway-src a {
color: var(--accent-light); text-decoration: none;
cursor: pointer; font-weight: var(--weight-semibold);
}
.pj-runway-src a:hover { color: var(--text-heading); }
/* Forecast card (blocco 2) */
.pj-fc {
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-8);
margin: var(--space-4) 0;
}
.pj-fc-net {
font-size: var(--text-2xl);
font-weight: var(--weight-black);
letter-spacing: -0.02em;
color: var(--success);
font-variant-numeric: tabular-nums;
}
.pj-fc-net.is-red { color: var(--error); }
.pj-fc-net small {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
margin-left: var(--space-3);
letter-spacing: 0;
}
.pj-fc-rows { margin-top: var(--space-6); }
.pj-fc-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--space-6);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
}
.pj-fc-row:last-child { border-bottom: none; }
.pj-fc-name {
display: inline-flex; align-items: center; gap: var(--space-4);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.pj-fc-name .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pj-fc-val {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
/* Ricorrenti (blocco 3) */
.pj-ric-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--space-6);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle);
}
.pj-ric-row:last-child { border-bottom: none; }
.pj-ric-name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.pj-ric-meta {
font-size: var(--text-2xs);
color: var(--text-disabled);
margin-top: 1px;
font-variant-numeric: tabular-nums;
}
.pj-ric-amt {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.pj-ric-tot {
display: flex; justify-content: space-between;
font-size: var(--text-xs);
color: var(--text-tertiary);
padding-top: var(--space-5);
margin-top: var(--space-1);
border-top: 1px solid var(--border-default);
font-variant-numeric: tabular-nums;
}
.pj-ric-tot strong { color: var(--text-secondary); font-weight: var(--weight-semibold); }
/* Nota grafico in fondo, dashed */
.pj-chart-note {
border: 1px dashed var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
margin-top: var(--space-12);
font-size: var(--text-sm);
color: var(--text-tertiary);
line-height: var(--leading-normal);
}
.pj-chart-note strong { color: var(--text-secondary); font-weight: var(--weight-semibold); }
/* Stato vuoto (nessun saldo impostato) */
.pj-runway-empty {
color: var(--text-tertiary);
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
padding: var(--space-8) 0;
}
.pj-runway-empty a { color: var(--accent-light); text-decoration: none; cursor: pointer; font-weight: var(--weight-bold); }
/* ═════ .step-head · header di fase numerata (pattern DS trasversale) ═════
Codificato 13 lug 2026, spec dal mockup Proiezioni C validato (blocco q-head).
Consumatori: Proiezioni (3 domande numerate), Piano di Spesa (già usa
.ps-panel-num — stessa grammatica, wrapper diverso perché è dentro accordion).
Ratio: si usa solo quando l'ordine 1-2-3 è vero (sequenza logica). Su un
elenco piatto la numerazione mente e va tolta. */
.step-head {
display: flex; align-items: center;
gap: var(--space-5);
margin: var(--space-12) 0 var(--space-5);
}
.step-num {
width: var(--step-num-size); height: var(--step-num-size);
border-radius: 50%;
background: var(--step-num-bg);
color: var(--step-num-fg);
font-size: var(--text-xs); font-weight: var(--weight-bold);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.step-title {
font-size: var(--text-md); font-weight: var(--weight-bold);
color: var(--text-primary);
letter-spacing: -0.005em;
}
.step-sum {
margin-left: auto;
font-size: var(--text-xs);
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════════════
DS PATTERNS · normativi (.ds-*)
Pattern trasversali codificati dopo review Piano di Spesa v2 (11 lug 2026).
Documentati in docs/DESIGN-SYSTEM.md, showcase in docs/mockups/patterns-ds.html.
Zero letterali hardcoded: tutto via token, ricette parametriche via color-mix.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ .ds-status-chip · chip di stato semantica ═══
Riassume in una parola lo stato di una vista («Piano sano», «Poche libere»,
«Hai allocato tutto»). Fondo tinto tenue del semantico, testo pieno.
Ratio: solo per stati con carico informativo, mai decorativa. Copy fattuale,
mai colpevolizzante (feedback-no-guilt-mechanics). */
.ds-status-chip {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-full);
font-size: var(--text-sm); font-weight: var(--weight-semibold);
line-height: 1; white-space: nowrap;
background: var(--bg-elevated);
color: var(--text-primary);
}
.ds-status-chip .ds-status-chip-icon { width: 12px; height: 12px; flex: 0 0 12px; }
.ds-status-chip--success { background: var(--success-tint); color: var(--success); }
.ds-status-chip--warning { background: var(--warning-tint); color: var(--warning); }
.ds-status-chip--error { background: var(--error-tint); color: var(--error); }
/* ═══ .ds-stepper · stepper pillola ±1 ═══
Aggiustamento fine di un valore numerico (uso primario: % del piano di
spesa). Passo ±1 dai bottoni tondi, tap sul valore centrale apre il
.ds-input-sheet per la digitazione libera.
Ratio: l'affordance percettiva è il glifo +/− in --text-heading, non il
cerchio (il cerchio sta a 1.27:1 su elevated, sotto la soglia di
percezione). Sostituisce .ps-step-btn (rimozione a fine migrazione). */
.ds-stepper {
display: inline-flex; align-items: center;
background: var(--bg-elevated);
border-radius: var(--radius-full);
padding: var(--space-1);
gap: var(--space-1);
user-select: none;
}
.ds-stepper-btn {
width: 56px; height: 56px;
border: none; padding: 0;
border-radius: 50%;
background: var(--bg-surface);
color: var(--text-heading);
font-size: var(--text-3xl); font-weight: var(--weight-bold);
line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default);
}
.ds-stepper-btn:hover { background: var(--accent-subtle); }
.ds-stepper-btn:active { background: var(--accent-muted); }
.ds-stepper-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.ds-stepper-btn:disabled {
opacity: var(--opacity-disabled); cursor: not-allowed;
background: var(--bg-surface); color: var(--text-disabled);
}
.ds-stepper-val {
min-width: 72px; padding: 0 var(--space-4);
background: none; border: none;
color: var(--text-heading);
font-size: var(--text-3xl); font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
text-align: center; cursor: pointer;
line-height: 1;
}
.ds-stepper-val:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: var(--radius-sm); }
.ds-stepper.is-disabled .ds-stepper-val { color: var(--text-disabled); cursor: not-allowed; }
/* ═══ .ds-input-sheet · sheet radicale per input numerico ═══
Digitazione libera con display protagonista. Overlay sopra le modali
(z-modal-above): deroga dichiarata all'anti-pattern «overlay su overlay»,
motivata da: input atomico, breve, ritorna al chiamante senza navigazione.
Ratio: la % è protagonista perché è il patto; l'euro sotto è feedback della
conseguenza sulle entrate. Se cambiano le entrate, l'euro cambia, il patto
resta. Riusa la base overlay del calendario (.dp-overlay) per coerenza
di apertura/chiusura, non riscrive una terza superficie. */
.ds-input-sheet-overlay {
position: fixed; inset: 0; z-index: var(--z-modal-above);
background: var(--bg-overlay); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
padding: var(--space-8);
}
.ds-input-sheet-overlay.is-open { display: flex; animation: dp-fade var(--duration-normal) var(--ease-default); }
.ds-input-sheet {
width: min(360px, 100%);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-2xl);
padding: 28px 26px 22px;
box-shadow: var(--shadow-lg);
animation: dp-in var(--duration-normal) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
.ds-input-sheet-overlay.is-open, .ds-input-sheet { animation: none; }
}
.ds-input-sheet-head {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-8);
color: var(--text-secondary);
font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.ds-input-sheet-head .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.ds-input-display {
color: var(--text-heading);
font-size: var(--text-display);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 1;
text-align: center;
font-variant-numeric: tabular-nums;
margin-bottom: var(--space-4);
}
.ds-input-display .caret {
display: inline-block; width: 3px; height: 0.7em;
background: var(--accent); margin-left: 4px; vertical-align: middle;
animation: ds-caret-blink var(--duration-blink) steps(2, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
.ds-input-display .caret { animation: none; }
}
@keyframes ds-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ds-input-euro-live {
color: var(--text-tertiary);
font-size: var(--text-base);
text-align: center;
margin-bottom: var(--space-12);
font-variant-numeric: tabular-nums;
}
.ds-input-sheet-actions {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-6);
}
.ds-btn-clear {
padding: var(--space-4) var(--space-8);
background: none;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
color: var(--text-primary);
font-size: var(--text-base); font-weight: var(--weight-semibold);
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast);
}
.ds-btn-clear:hover { border-color: var(--border-strong); color: var(--text-heading); }
.ds-btn-clear:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.ds-btn-ok-primary {
width: 56px; height: 56px;
border-radius: 50%; border: none;
background: var(--accent); color: var(--on-accent);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-glow-lg);
transition: background var(--duration-fast), transform var(--duration-fast);
}
.ds-btn-ok-primary:hover { background: var(--accent-hover); }
.ds-btn-ok-primary:active { transform: scale(0.96); }
.ds-btn-ok-primary:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.ds-btn-ok-primary svg { width: 22px; height: 22px; }
/* Wheel picker per touch (pointer coarse). Su desktop non compare. */
.ds-wheel { display: none; }
@media (pointer: coarse) {
.ds-input-display { display: none; }
.ds-wheel {
display: block; position: relative;
height: 200px; margin-bottom: var(--space-8);
background: var(--bg-input);
border-radius: var(--radius-lg);
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
}
.ds-wheel-track {
height: 100%; overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.ds-wheel-track::-webkit-scrollbar { display: none; }
.ds-wheel-item {
height: 44px; display: flex; align-items: center; justify-content: center;
scroll-snap-align: center;
color: var(--text-tertiary);
font-size: var(--text-2xl); font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.ds-wheel-item.is-center {
color: var(--text-heading);
font-size: var(--text-4xl); font-weight: var(--weight-black);
}
.ds-wheel-selector {
position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(-50%); height: 44px;
border-top: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
pointer-events: none;
}
}
/* ═══════════════════════════════════════════════════════════════
PANORAMICA · «IL QUADERNO DEL MATTINO»
Tesi: la Panoramica non è un cruscotto, è la prima pagina
di un quaderno. Un numero protagonista, tutto il resto
sussurra in righe, non in scatole.
═══════════════════════════════════════════════════════════════ */
#tab-overview { background-image: var(--gradient-ambient); background-repeat: no-repeat; }
.qm-greet { font-size: var(--text-xl); line-height: var(--leading-normal); color: var(--text-secondary); margin-bottom: 0; }
.qm-greet b { color: var(--text-heading); font-weight: 650; }
.qm-greet-date { font-size: var(--text-base); color: var(--text-secondary); white-space: nowrap; }
.qm-hero-row {
display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-24);
align-items: end; margin-bottom: 56px;
}
.qm-hero-lbl {
font-size: var(--text-xs); font-weight: var(--weight-bold);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: var(--space-5);
}
.qm-hero-num {
font-size: 68px; font-weight: var(--weight-bold);
letter-spacing: -0.04em; line-height: 1;
font-variant-numeric: tabular-nums;
background: var(--gradient-word); -webkit-background-clip: text; background-clip: text;
color: transparent; padding-bottom: 4px;
}
.qm-hero-num small { font-size: 34px; font-weight: var(--weight-semibold); }
.qm-hero-num.is-over {
background: linear-gradient(120deg, var(--error), var(--mattone-600));
-webkit-background-clip: text; background-clip: text;
}
.qm-hero-sub { font-size: var(--text-md); color: var(--text-secondary); margin-top: var(--space-4); }
.qm-hero-sub b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.qm-hero-bar {
position: relative; height: 5px; border-radius: var(--radius-full);
background: var(--bg-elevated); margin-top: var(--space-10); max-width: 420px;
}
.qm-hero-bar-fill {
height: 100%; border-radius: var(--radius-full);
background: var(--accent);
transition: width var(--duration-slow) var(--ease-default);
}
.qm-hero-bar-fill.is-over { background: var(--error); }
.qm-hero-bar-tick {
position: absolute; top: -3px; bottom: -3px; width: var(--tick-width);
background: var(--border-strong); border-radius: 1px;
}
.qm-hero-bar-cap {
display: flex; justify-content: space-between; max-width: 420px;
margin-top: 7px; font-size: var(--text-xs); color: var(--text-tertiary);
}
.qm-kpis { border-top: 1px solid var(--border-subtle); }
.qm-kpi-row {
display: grid; grid-template-columns: 1fr auto auto;
align-items: baseline; gap: var(--space-6);
padding: 13px 2px; border-bottom: 1px solid var(--border-subtle);
}
.qm-kpi-row .k { font-size: var(--text-sm); color: var(--text-secondary); }
.qm-kpi-row .v {
font-size: var(--text-lg); font-weight: 650; color: var(--text-heading);
font-variant-numeric: tabular-nums; text-align: right;
}
.qm-kpi-row .d {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}
.qm-kpi-row .d.up { color: var(--success); }
.qm-kpi-row .d.down { color: var(--error); }
.qm-kpi-row .d.flat { color: var(--text-tertiary); }
.qm-sec {
display: flex; align-items: baseline; justify-content: space-between;
margin: 0 0 var(--space-8);
}
.qm-sec h2 {
font-size: var(--text-xs); font-weight: var(--weight-bold);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
}
.qm-sec a {
font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--accent-light); text-decoration: none; cursor: pointer;
}
.qm-sec a:hover { text-decoration: underline; }
/* «Il piano, oggi» — Direzione A: riga del quaderno */
.qm-pa {
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 15px 2px; margin-bottom: 56px;
}
.qm-pa-line { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
.qm-pa-dot {
width: 8px; height: 8px; border-radius: 50%; align-self: center; flex: none;
}
.qm-pa[data-state="ok"] .qm-pa-dot { background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 45%, transparent); }
.qm-pa[data-state="warn"] .qm-pa-dot { background: var(--warning); box-shadow: 0 0 10px color-mix(in srgb, var(--warning) 40%, transparent); }
.qm-pa[data-state="crit"] .qm-pa-dot { background: var(--error); box-shadow: 0 0 10px color-mix(in srgb, var(--error) 40%, transparent); }
.qm-pa-verdict { font-size: var(--text-md); font-weight: 650; }
.qm-pa[data-state="ok"] .qm-pa-verdict { color: var(--success); }
.qm-pa[data-state="warn"] .qm-pa-verdict { color: var(--warning); }
.qm-pa[data-state="crit"] .qm-pa-verdict { color: var(--error); }
.qm-pa-num { font-size: var(--text-md); color: var(--text-secondary); }
.qm-pa-num b { color: var(--text-heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.qm-pa-sub {
font-size: var(--text-sm); color: var(--text-tertiary);
margin: 6px 0 0 18px; max-width: 62ch;
}
/* Dove va il netto — donut */
.qm-netto-wrap {
display: flex; align-items: center; gap: var(--space-12);
margin-bottom: 56px; padding: 8px 0;
}
.qm-netto-wrap canvas { width: 140px; height: 140px; flex-shrink: 0; }
.qm-netto-legend { display: grid; gap: 7px; font-size: var(--text-sm); }
.qm-netto-legend .li {
display: flex; align-items: center; gap: var(--space-4); color: var(--text-primary);
}
.qm-netto-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.qm-netto-legend .pc {
margin-left: auto; color: var(--text-tertiary);
font-variant-numeric: tabular-nums; padding-left: var(--space-8);
}
/* Proiezione sparkline */
.qm-proj canvas { width: 100%; max-height: 120px; }
.qm-proj-cap {
display: flex; justify-content: space-between;
font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 6px;
}
/* Appunto veloce v2 — trigger → form inline → toast */
.qa-trigger {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 13px 2px;
border: 0; border-bottom: 1px solid var(--border-subtle);
background: none; cursor: pointer; font: inherit;
color: var(--text-tertiary);
transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.qa-trigger:hover, .qa-trigger:focus-visible {
background: var(--bg-elevated); color: var(--text-secondary);
margin: 0 -10px; padding: 13px 12px; border-radius: var(--radius-md);
}
.qa-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qa-trigger-ico {
width: 30px; height: 30px; border-radius: var(--radius-md); flex: none;
display: grid; place-items: center;
background: var(--bg-elevated);
font-size: 15px; font-weight: 400; color: var(--text-tertiary);
transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.qa-trigger:hover .qa-trigger-ico,
.qa-trigger:focus-visible .qa-trigger-ico {
background: var(--accent-muted); color: var(--accent);
}
.qa-trigger-label { font-size: var(--text-base); font-weight: 500; }
.qa-expanded { padding: 14px 2px 16px; border-bottom: 1px solid var(--border-subtle); }
.qa-form { display: flex; gap: 8px; align-items: center; }
.qa-input {
flex: 1; min-width: 0; height: 40px; padding: 0 12px;
background: var(--bg-input); border: 1px solid var(--border-default);
border-radius: var(--radius-md); color: var(--text-primary);
font: inherit; font-size: var(--text-base); outline: none;
transition: border-color var(--duration-fast) var(--ease-default);
}
.qa-input::placeholder { color: var(--text-tertiary); }
.qa-input:focus { border-color: var(--accent); }
.qa-input.amt { flex: 0 0 100px; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.qa-input.error { border-color: var(--error); }
.qa-error-msg { font-size: var(--text-xs); color: var(--error); margin-top: 6px; padding-left: 2px; }
.qa-btn {
height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-md);
background: var(--accent); color: var(--on-accent);
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
cursor: pointer; flex: none; white-space: nowrap;
transition: background var(--duration-fast) var(--ease-default), opacity var(--duration-fast);
}
.qa-btn:hover { background: var(--accent-hover); }
.qa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qa-toast {
display: flex; align-items: center; gap: 10px;
padding: 12px 2px; border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-base); color: var(--text-secondary);
animation: qa-fadein var(--duration-slow) var(--ease-spring);
}
.qa-toast-check {
width: 30px; height: 30px; border-radius: var(--radius-md); flex: none;
display: grid; place-items: center;
background: var(--success-tint); color: var(--success); font-size: 14px;
}
.qa-toast-body { flex: 1; min-width: 0; }
.qa-toast-body b { color: var(--text-primary); font-weight: 550; }
.qa-toast-undo {
border: 0; background: none; cursor: pointer;
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--accent-light); padding: 6px 10px;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-default);
}
.qa-toast-undo:hover { background: var(--accent-muted); }
.qa-toast-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes qa-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Mic inline nel campo descrizione */
.mic-svg { width: 18px; height: 18px; }
.mic-svg > * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qa-desc-wrap { flex: 1; min-width: 0; min-height: 40px; position: relative; display: flex; align-items: center; }
.qa-desc-wrap .qa-input { width: 100%; padding-right: 42px; }
.qa-mic-inline {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border-radius: var(--radius-sm);
border: 0; background: none; cursor: pointer;
display: grid; place-items: center; color: var(--text-tertiary);
transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.qa-mic-inline:hover { color: var(--accent); background: var(--accent-muted); }
.qa-mic-inline:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Stato registrazione / trascrizione — stessa altezza dell'input, niente salti */
.qa-rec-inline, .qa-proc-inline {
flex: 1; min-width: 0; height: 40px; border-radius: var(--radius-md);
display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
}
.qa-rec-inline { background: var(--error-tint); border: 1px solid var(--error); }
.qa-rec-dot {
width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--error);
animation: qa-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes qa-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.qa-rec-label { flex: 1; font-size: var(--text-sm); color: var(--text-secondary); }
.qa-rec-timer { font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.qa-rec-stop {
width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--error);
transition: background var(--duration-fast) var(--ease-default);
}
.qa-rec-stop:hover { background: var(--error-tint); }
.qa-rec-stop:focus-visible { outline: 2px solid var(--error); outline-offset: -2px; }
.qa-rec-stop-ico { width: 11px; height: 11px; border-radius: 2px; background: var(--error); }
.qa-proc-inline { background: var(--bg-input); border: 1px solid var(--border-default); }
.qa-proc-spinner {
width: 15px; height: 15px; border-radius: 50%; flex: none;
border: 1.5px solid var(--border-default); border-top-color: var(--accent);
animation: qa-spin 0.8s linear infinite;
}
@keyframes qa-spin { to { transform: rotate(360deg); } }
.qa-proc-text { font-size: var(--text-sm); color: var(--text-tertiary); }
@media (prefers-reduced-motion: reduce) {
.qa-rec-dot, .qa-proc-spinner { animation-duration: 0.01ms !important; }
}
@media (max-width: 760px) {
.qa-form { flex-direction: column; align-items: stretch; }
.qa-input.amt { flex: none; width: 100%; }
.qa-btn { height: 44px; font-size: var(--text-base); }
}
/* Duo: salvadanai + movimenti */
.qm-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); margin-bottom: 56px; }
.qm-duo--single { grid-template-columns: 1fr; }
.qm-rowlist { border-top: 1px solid var(--border-subtle); }
.qm-r {
display: flex; align-items: center; gap: var(--space-6); padding: 12px 2px;
border-bottom: 1px solid var(--border-subtle);
transition: background var(--duration-fast) var(--ease-default);
}
.qm-r:hover {
background: var(--bg-elevated); margin: 0 -10px; padding: 12px 10px;
border-radius: var(--radius-md);
}
.qm-mini-ring { position: relative; width: 34px; height: 34px; flex: none; }
.qm-mini-ring svg { width: 100%; height: 100%; }
.qm-r-body { flex: 1; min-width: 0; }
.qm-r-body b {
display: block; font-size: var(--text-base); font-weight: 550;
color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qm-r-body span { font-size: var(--text-xs); color: var(--text-tertiary); }
.qm-r-amt {
font-size: var(--text-base); font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums; color: var(--text-heading);
}
.qm-r-amt.in { color: var(--c-income); }
.qm-r-ico {
width: 30px; height: 30px; border-radius: var(--radius-md); flex: none;
display: grid; place-items: center; background: var(--bg-elevated);
color: var(--text-tertiary);
}
.cat-ico { width: 16px; height: 16px; flex: none; }
/* Da Classificare — riga d'azione quieta */
.qm-da-class {
margin-bottom: 56px;
}
/* Nota del mese: una sola osservazione */
.qm-insight {
display: flex; gap: var(--space-6); align-items: flex-start;
padding: 16px 18px; border-radius: var(--radius-lg);
background: var(--accent-muted);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
margin-bottom: 56px;
}
.qm-insight .spark { font-size: 15px; line-height: 1.4; }
.qm-insight p { font-size: var(--text-base); color: var(--text-primary); max-width: 68ch; margin: 0; }
.qm-insight p b { color: var(--text-heading); }
/* ═══════════════════════════════════════════════════════════════════
PERSONALIZZAZIONE PANORAMICA (15 lug 2026)
Mostra/nascondi i blocchi del quaderno. Un solo ingresso testuale
«Personalizza» accanto al saluto, che assorbe lo stato «N nascoste».
In modalità: interruttori (.settings-toggle) accanto ai titoli; i
blocchi spenti diventano una riga sottile «Titolo è nascosto».
Tutti valori composti da token esistenti — nessun token nuovo.
═══════════════════════════════════════════════════════════════════ */
/* Testata: saluto + trigger su una riga */
.qm-greet-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-3) var(--space-8); flex-wrap: wrap;
margin-bottom: var(--space-16);
}
/* Trigger «Personalizza» — ghost link + conteggio secondario */
.qm-plink {
display: inline-flex; align-items: center; gap: var(--space-3);
border: 0; background: none; cursor: pointer; font: inherit;
font-size: var(--text-base); font-weight: var(--weight-medium);
color: var(--text-secondary);
padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
transition: background var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default);
}
.qm-plink:hover { background: var(--accent-subtle); color: var(--text-heading); }
.qm-plink:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qm-plink svg { display: block; flex: none; }
.qm-plink[aria-expanded="true"] { color: var(--accent-light); background: var(--accent-muted); }
.qm-plink-count { color: var(--text-tertiary); white-space: nowrap; }
/* Header modalità: «Scegli cosa tenere qui» + subcopy + Fatto */
.qm-compose-bar {
display: none;
padding: var(--space-6) var(--space-8) var(--space-8);
margin-bottom: var(--space-12);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.qm-composing .qm-compose-bar { display: block; }
.qm-compose-bar-top {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-6); margin-bottom: var(--space-2);
}
.qm-compose-bar h2 { font-size: var(--text-md); font-weight: 650; color: var(--text-heading); }
.qm-compose-bar p { font-size: var(--text-sm); color: var(--text-secondary); }
.qm-compose-done {
border: 0; background: var(--accent); color: var(--on-accent);
font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer;
padding: var(--space-3) var(--space-8); border-radius: var(--radius-full); flex: none;
transition: background var(--duration-fast) var(--ease-default);
}
.qm-compose-done:hover { background: var(--accent-hover); }
.qm-compose-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Helper visibilità legati alla modalità (.qm-composing sta su #tab-overview).
Le regole «mostra» sono ancorate all'id per battere in specificità la «nascondi». */
#tab-overview .compose-only { display: none; }
#tab-overview.qm-composing .compose-only { display: inline-flex; }
#tab-overview.qm-composing .qm-sec.compose-only { display: flex; }
.qm-composing .qm-sec { align-items: center; }
.qm-composing .qm-sec a { display: none; }
.qm-grow { flex: 1; }
/* Colonna interna di un duo con due blocchi impilati (Andamento + Movimenti) */
.qm-duo-col { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
/* Tag «Sempre in pagina» sui blocchi fissi (solo in modalità) */
.qm-fix-tag {
font-size: var(--text-xs); font-weight: var(--weight-medium);
color: var(--text-secondary);
padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
background: var(--bg-elevated); border: 1px solid var(--border-subtle);
}
/* Riga «Titolo è nascosto» — solo blocco spento in modalità */
.qm-off-label { display: none; }
.qm-off-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.qm-off-tag { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
/* Stato blocco spento (is-off) */
.qm-block.is-off { display: none; } /* fuori modalità: scompare del tutto */
.qm-composing .qm-block.is-off { display: block; }
.qm-composing .qm-block.is-off .qm-block-body { display: none; }
.qm-composing .qm-block.is-off .qm-sec {
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: var(--space-6) 2px; margin-bottom: 0;
}
.qm-composing .qm-block.is-off .qm-sec h2 { display: none; }
.qm-composing .qm-block.is-off .qm-off-label { display: inline; }
/* Ricomposizione griglia quando una colonna del duo è vuota (solo fuori modalità) */
.qm-duo.qm-duo--single { grid-template-columns: 1fr; }
@media (max-width: 760px) {
.qm-hero-row { grid-template-columns: 1fr; gap: 28px; }
.qm-hero-num { font-size: 52px; }
.qm-duo { grid-template-columns: 1fr; gap: 40px; }
.qm-greet-row { margin-bottom: var(--space-12); }
}