@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --radius: 14px;
    --radius-sm: 8px;

    --bg: #FAFAFA;
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --border: rgba(0,0,0,0.08);

    --accent: #0071E3;
    --accent-hover: #0077ED;
    --income: #34C759;
    --expense: #FF3B30;
    --transfer: #C9971C;

    --glass-bg: rgba(255,255,255,0.5);
    --glass-bg-strong: rgba(255,255,255,0.75);
    --glass-border: rgba(255,255,255,0.6);
    --glass-highlight: rgba(255,255,255,0.9);
    --glass-shadow:
        0 8px 32px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 0 0 1px rgba(255,255,255,0.15);
    --row-hover: rgba(0,0,0,0.03);

    --pill-active-bg: rgba(255,255,255,0.9);

    --blob-1: rgba(0,113,227,0.28);
    --blob-2: rgba(41,151,255,0.22);
    --blob-3: rgba(100,210,255,0.18);
}

[data-theme="dark"] {
    --bg: #1C1C1E;
    --text-primary: #F5F5F7;
    --text-secondary: #98989D;
    --border: rgba(255,255,255,0.1);

    --accent: #0A84FF;
    --accent-hover: #2997FF;
    --income: #30D158;
    --expense: #FF453A;
    --transfer: #E5C158;

    --glass-bg: rgba(50,50,55,0.45);
    --glass-bg-strong: rgba(55,55,60,0.7);
    --glass-border: rgba(255,255,255,0.16);
    --glass-highlight: rgba(255,255,255,0.22);
    --glass-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    --row-hover: rgba(255,255,255,0.05);

    --pill-active-bg: rgba(255,255,255,0.16);

    --blob-1: rgba(10,132,255,0.35);
    --blob-2: rgba(41,151,255,0.26);
    --blob-3: rgba(100,210,255,0.2);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
    margin: 0;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    position: relative;
    transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px 0; }

/* ===== AMBIENT GLOW ===== */
body::before, body::after, .blob-3 {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}
body::before {
    top: -12%; left: -8%; width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
    background: radial-gradient(circle, var(--blob-1), transparent 70%);
}
body::after {
    top: 10%; right: -12%; width: 38vw; height: 38vw; max-width: 500px; max-height: 500px;
    background: radial-gradient(circle, var(--blob-2), transparent 70%);
}
.blob-3 {
    bottom: -15%; left: 25%; width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
    background: radial-gradient(circle, var(--blob-3), transparent 70%);
}

/* ===== SQUIRCLE — solo per elementi vicini al quadrato (icone, toggle) ===== */
/* .squircle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C14 0 0 14 0 50C0 86 14 100 50 100C86 100 100 86 100 50C100 14 86 0 50 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C14 0 0 14 0 50C0 86 14 100 50 100C86 100 100 86 100 50C100 14 86 0 50 0Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
} */

/* ===== IL VETRO ===== */
.card, .table-wrap, .card-balance, .card-list, .card-actions, .card-wide, .filters-popover {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}

.card::before, .table-wrap::before, .card-balance::before,
.card-list::before, .card-actions::before, .card-wide::before, .filters-popover::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, var(--glass-highlight), transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

.card::after, .table-wrap::after, .card-balance::after,
.card-list::after, .card-actions::after, .card-wide::after, .filters-popover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--glass-highlight), transparent 45%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.card > *, .table-wrap > *, .card-balance > *,
.card-list > *, .card-actions > *, .card-wide > *, .filters-popover > * { position: relative; }

/* ===== TOPBAR ===== */
.topbar {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 10;

    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

.topbar-logo {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-right: 24px;
    color: var(--accent);
    text-decoration: none;
}

.topbar nav {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(127,127,127,0.08);
}

.topbar a.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    transition: all 0.18s ease;
}
.topbar a.nav-link:hover { color: var(--text-primary); }
.topbar a.nav-link.active {
    color: var(--text-primary);
    background: var(--pill-active-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.topbar-logout { color: var(--text-secondary); text-decoration: none; font-size: 13px; }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--text-primary);
    cursor: pointer; font-size: 15px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { transform: scale(1.06); }
.theme-toggle:active { transform: scale(0.96); }

/* ===== MAIN — un po' più largo, come richiesto ===== */
.main { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 40px 24px; }

.card { border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }

.card-wide { border-radius: var(--radius); padding: 28px; margin-bottom: 24px; width: 100%; }
.card-wide .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.card-wide .value-xl { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; }

/* ===== Mini-card conti dentro la card patrimonio ===== */
.account-grid {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.account-mini-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(127,127,127,0.06);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.account-mini-card:hover { background: rgba(127,127,127,0.12); transform: translateY(-1px); }

.account-mini-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.account-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 15px;
}
.account-icon img { width: 18px; height: 18px; object-fit: contain; }

.account-mini-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.account-mini-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }

/* ===== REPORT WIDGETS ===== */
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.widget-header h2 { margin: 0; }

.widget-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(127,127,127,0.08); }
.widget-tab {
    border: none; background: transparent;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 500; font-family: inherit;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s ease;
}
.widget-tab:hover { color: var(--text-primary); }
.widget-tab.active {
    background: var(--pill-active-bg);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Tooltip Notion-style per Chart.js (sostituisce quello standard) */
.chart-tooltip {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 50;
    transform: translate(-50%, -125%);
}
.chart-tooltip-inner {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    font-size: 12px;
    white-space: nowrap;
}
.chart-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chart-tooltip-label { color: var(--text-secondary); }
.chart-tooltip-value { color: var(--text-primary); font-weight: 600; }

/* =====================================================
   RIEPILOGO STICKY — messo DOPO la tabella nel markup,
   con "bottom" invece di "top": resta agganciato in fondo
   allo schermo mentre scorri, e si "posa" naturalmente
   subito sotto l'ultima riga quando la tabella finisce
   (nessun JS di scroll-tracking necessario).
   ===================================================== */
#tx-summary-sentinel { height: 1px; }

.tx-summary-bar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;

    width: 70%;

    display: flex;
    justify-content: space-around;
    align-items: center;

    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--glass-shadow);

    transition: width 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                max-width 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                border-radius 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.tx-summary-bar.docked {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius);
}

.tx-summary-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tx-summary-label { text-transform: uppercase; color: var(--text-secondary); }
.tx-summary-value { font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.tx-summary-value.income { color: var(--income); }
.tx-summary-value.expense { color: var(--expense); }

/* ===== HOME GRID ===== */
.home-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.card-balance, .card-list, .card-actions { flex: 1 1 320px; min-width: 280px; border-radius: 22px; }
.card-balance { padding: 28px; }
.card-balance .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.card-balance .value { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.card-balance .row { padding: 0; border-top: 1px solid var(--border); }
.row-link {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.row-link:hover { opacity: 0.7; }

.card-balance .row .row-value.income { color: var(--income); font-weight: 600; }
.card-balance .row .row-value.expense { color: var(--expense); font-weight: 600; }

.card-list { padding: 24px; }
.card-list h3 { margin: 0 0 14px 0; font-size: 15px; font-weight: 600; }

.tx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}
.tx:hover { opacity: 0.7; }
.tx:first-of-type { border-top: none; }
.tx .tx-amount { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.tx .tx-name { display: flex; align-items: center; min-width: 0; }
.tx .tx-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.card-actions { padding: 24px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }

/* ===== SUMMARY ===== */
.summary-card { display: flex; gap: 40px; align-items: baseline; flex-wrap: wrap; }
.summary-item .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.summary-item .value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.summary-item .value.income { color: var(--income); }
.summary-item .value.expense { color: var(--expense); }

/* ===== SEARCH + FILTRI ===== */
.search-bar { position: relative; display: flex; gap: 8px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.search-bar input[type="text"] {
    flex: 1; min-width: 180px;
    border: 1px solid var(--glass-border); border-radius: 999px;
    padding: 10px 16px; font-size: 13px;
    background: var(--glass-bg-strong); color: var(--text-primary);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.filters-popover {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 100%; max-width: 420px; z-index: 20;
    display: none; flex-direction: column; gap: 12px;
    padding: 18px; border-radius: 18px;
}
.filters-popover.open { display: flex; }
.filters-popover select, .filters-popover input[type="date"] {
    border: 1px solid var(--glass-border); border-radius: 10px;
    padding: 8px 10px; font-size: 13px;
    background: var(--glass-bg-strong); color: var(--text-primary);
    font-family: inherit;
}
.filters-popover .date-row { display: flex; gap: 8px; }
.filters-popover .date-row > * { flex: 1; }

/* ===== TABLE — niente più testo a capo ===== */
.tx-scroll-wrap { display: flex; flex-direction: column; }

.table-wrap { border-radius: var(--radius); }
table { position: relative; width: 100%; border-collapse: separate; border-spacing: 0; }

thead th {
    text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: rgba(127,127,127,0.06);
    white-space: nowrap;
}

tbody td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--row-hover); }

.table-scroll {
    overflow-x: auto;
}

.row-actions { display: inline-flex; align-items: center; gap: 4px; }
.row-actions form { margin: 0; display: inline-flex; }

.amount.expense { color: var(--expense); font-weight: 600; }
.amount.income { color: var(--income); font-weight: 600; }
.amount.transfer { color: var(--transfer); font-weight: 600; }

.tx-title-link { color: var(--text-primary); text-decoration: none; }
.tx-title-link:hover { text-decoration: underline; }

.category-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; color: #1D1D1F; }

/* ===== ICON BUTTONS (qui lo squircle funziona bene, sono quadrati) ===== */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--text-secondary);
    cursor: pointer; transition: all 0.15s ease;
}
.icon-btn:hover { color: var(--text-primary); background: var(--glass-bg); transform: translateY(-1px); }
.icon-btn.danger:hover { color: var(--expense); }
.icon-btn svg { width: 15px; height: 15px; }

/* =====================================================
   BUTTONS — stessa identità del menu topbar: forma a
   pillola, superficie di vetro per i secondari, pieno
   accent per il primario. Uniformati per coerenza.
   ===================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent); color: white; border: none;
    padding: 10px 20px; border-radius: 999px;
    font-size: 14px; font-weight: 500; font-family: inherit;
    text-decoration: none; cursor: pointer; transition: all 0.15s ease;
    box-shadow: 0 4px 16px rgba(0,113,227,0.3);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-secondary {
    background: var(--glass-bg-strong); color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}
.btn-secondary:hover { background: var(--glass-bg); }

.btn-danger { background: none; color: var(--expense); padding: 6px 10px; font-size: 13px; border: 0; font-family: inherit; box-shadow: none; }
.btn-link { background: none; color: var(--accent); padding: 6px 10px; font-size: 13px; border: 0; cursor: pointer; font-family: inherit; box-shadow: none; }

.glass-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--text-primary);
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 999px;
    font-size: 14px; font-weight: 500; font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform 0.15s ease, background 0.15s ease;
}
.glass-btn:hover { background: var(--glass-bg); transform: translateY(-1px); }
.glass-btn:active { transform: translateY(0); }

.glass-btn.primary { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,113,227,0.35); }
.glass-btn.primary:hover { background: var(--accent-hover); }

/* ===== FORMS ===== */
label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; margin-top: 16px; }
input[type="text"], input[type="number"], input[type="date"],
select, textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit;
    background: var(--glass-bg-strong); color: var(--text-primary);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* =====================================================
   MODALE nuova/modifica transazione
   ===================================================== */
.tx-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.tx-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.tx-modal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;

    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--glass-shadow);
    padding: 28px;

    transform: scale(0.92) translateY(16px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
}

.tx-modal-overlay.open .tx-modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.tx-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}
.tx-modal-close:hover { color: var(--text-primary); }

/* ===== Report: righe della legenda (cliccabili come la ciambella) ===== */
.legend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-primary); text-decoration: none; border-radius: 8px; transition: background 0.15s ease; }
.legend-row.is-link { cursor: pointer; }
.legend-row.is-link:hover { background: var(--glass-bg-strong); }
.legend-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.legend-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.legend-nums { display: flex; gap: 12px; color: var(--text-secondary); flex: 0 0 auto; }
.legend-amount { color: var(--text-primary); font-weight: 500; min-width: 60px; text-align: right; }
#tx-modal-content h2 { padding-right: 40px; }          /* il titolo non finisce sotto la X */
.tx-modal-box { overscroll-behavior: contain; }       /* scorrere il modale non muove la pagina dietro */

/* =====================================================
   VIEW TRANSITIONS — animazione nativa del browser tra
   una pagina e l'altra (solo Chrome/Edge per ora; sugli
   altri browser la navigazione resta semplicemente
   istantanea come prima, nessuna rottura).
   ===================================================== */
/* @view-transition {
    navigation: auto;
} */

/* Il pulsante attivo nella topbar ha lo stesso "nome" su ogni
   pagina: il browser lo riconosce come lo stesso elemento e lo
   morpha da una posizione all'altra invece di farlo apparire
   di scatto — è l'effetto "pillola che scivola". */
.nav-pill-ghost {
    position: fixed;
    z-index: 20;
    background: var(--pill-active-bg);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    pointer-events: none;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dissolvenza del resto della pagina, leggermente più rapida
   della morph della pillola per non "distrarre" dall'effetto */
/* ::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
} */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    body { animation: none !important; }}
    @keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

html.pending-pill .topbar a.nav-link.active {
    background: transparent;
    box-shadow: none;
}


/* ===== Mappa viaggi ===== */
.map-card {
    position: relative;
    margin-bottom: 24px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.trip-map {
    height: 380px;
    width: 100%;
    z-index: 0;
}
.map-status {
    padding: 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.map-status:not(:empty) { padding: 10px 16px; }

/* Tooltip Leaflet in stile glass */
.leaflet-tooltip {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.leaflet-tooltip-top:before { border-top-color: var(--glass-border); }

/* Mappa scura in tema scuro (inverte le tile OSM, niente chiavi/costi) */
:root[data-theme="dark"] .trip-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}


/* ===== Tabella transazioni: colonne fisse, testo lungo troncato con "..." ===== */
.tx-table {
    table-layout: fixed;
    width: 100%;
    min-width: 920px;          /* sotto questa larghezza scorre in orizzontale invece di rompersi */
}
.tx-scroll-wrap .table-wrap { overflow-x: auto; }

.tx-table th, .tx-table td { white-space: nowrap; }

.tx-table .col-date    { width: 130px; }
.tx-table .col-title   { width: auto; }          /* prende lo spazio che resta */
.tx-table .col-type    { width: 130px; }
.tx-table .col-amount  { width: 120px; }
.tx-table .col-cat     { width: 140px; }
.tx-table .col-acc     { width: 110px; }
.tx-table .col-actions { width: 100px; }

/* Solo queste celle vengono troncate con "..." (la data NO) */
.tx-table td.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.tx-table td.cell-ellipsis .tx-title-link { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Azioni: allineate a sinistra come tutte le altre colonne,
   così il titolo "Azioni" sta sopra il bordo sinistro del primo tasto */
.tx-table th.col-actions,
.tx-table td:last-child { text-align: left; }
.tx-table .row-actions { justify-content: flex-start; }

/* SOSTITUISCI il blocco "HOME: tutto in una schermata" aggiunto prima
   con questo (incollalo in fondo a public/assets/css/style.css) */

/* ===== HOME: tutto in una schermata (finestra piena del browser) ===== */
.home-main {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 56px);   /* 56px = altezza topbar */
    min-height: 700px;            /* se la finestra è più bassa, la pagina scorre invece di schiacciarsi */
}

.home-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 0 0 auto;
}
.home-top > .home-card,
.home-main > .home-trip {
    width: auto;
    max-width: none;
    margin: 0;
}
.home-card { display: flex; flex-direction: column; }

/* Etichette delle schede: più grandi e in grassetto */
.home-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    opacity: 0.85;
}

/* Sinistra: conti che riempiono lo spazio rimasto, valore un po' più grande */
.home-card .account-grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
/* selettore volutamente forte: batte le regole esistenti delle mini-card */
.home-main .home-top .account-grid .account-mini-card .account-mini-value { font-size: 28px !important; }

/* Riga divisoria (stessa dei separatori tra le transazioni) */
.home-divider { height: 1px; background: var(--border); flex: none; }

/* Destra: pillole uguali a tutta larghezza */
.home-month-head { display: flex; justify-content: space-between; align-items: center; }

.month-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.month-chip {
    display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    font-size: 14px; font-weight: 600;
    color: var(--text-primary); text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.month-chip:hover { transform: translateY(-1px); background: var(--glass-bg); }
.month-chip svg { width: 16px; height: 16px; flex: none; }
.month-chip svg.income { color: var(--income); }
.month-chip svg.expense { color: var(--expense); }
.month-chip .income { color: var(--income); }
.month-chip .expense { color: var(--expense); }

.home-recent { flex: 1 1 auto; }

/* Tre bottoni uguali in fondo alla scheda */
.home-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.home-actions .glass-btn {
    width: 100%;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}

/* Sezione viaggio + mappa: occupa tutto lo spazio rimasto */
.home-main > .home-trip {
    flex: 1 1 auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}
.home-trip-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; text-decoration: none; color: inherit; margin: 8px 0 0;
}
.home-trip-title { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.home-trip-name {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
}
.trip-flag { width: 28px; height: 21px; border-radius: 4px; object-fit: cover; display: block; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

.home-trip-meta { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.trip-date {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.trip-arrow { width: 16px; height: 16px; flex: none; }
.trip-arrow-out { color: #5AC8FA; }            /* partenza: azzurrino */
.trip-arrow-in  { color: var(--expense); }     /* ritorno: rosso */
.trip-count { font-size: 15px; font-weight: 600; color: var(--text-primary); opacity: 0.8; }

.home-trip-spent { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.home-trip-spent-label { font-size: 15px; font-weight: 600; color: var(--text-primary); opacity: 0.8; }
.home-trip-net { font-size: 24px; font-weight: 800; }
.home-trip-net.expense { color: var(--expense); }

.home-trip .map-card.compact {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    min-height: 160px;
    position: relative;
}
.home-trip .map-card.compact .trip-map { flex: 1 1 auto; height: auto; min-height: 160px; }

/* Messaggi della mappa: sopra la mappa, non sotto (così non la accorciano) */
.home-trip .map-status {
    position: absolute; left: 12px; bottom: 12px; z-index: 500;
    padding: 0; max-width: calc(100% - 24px);
    border-radius: 10px; font-size: 12px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}
.home-trip .map-status:not(:empty) { padding: 6px 12px; }

/* ===== Compattazione: tutto in una schermata, mappa compresa ===== */
.home-main { gap: 14px; }
.home-top { gap: 14px; }
.home-top > .home-card,
.home-main > .home-trip { padding: 20px 24px; }

.home-card .value-xl { line-height: 1.05; margin: 2px 0 10px; }
.home-divider { margin: 10px 0 2px; }
.month-icons { margin: 10px 0 4px; }
.month-chip { padding: 8px 14px; }
.home-recent { margin-top: 4px; }
.home-recent .tx { padding-top: 7px; padding-bottom: 7px; }
.home-actions { margin-top: 12px; }
.home-actions .glass-btn { padding: 9px 8px; }

.home-trip-head { margin-top: 4px; }
.home-trip .home-divider { margin: 10px 0 12px; }


/* SOSTITUISCI il blocco "TEMA CHIARO" + "CAMBIO TEMA FLUIDO" aggiunto prima
   con questo (incollalo in fondo a public/assets/css/style.css).
   Il tema scuro NON viene toccato. */

/* ===== TEMA CHIARO: meno bianco su bianco ===== */
:root[data-theme="light"] {
    --bg: #E6E8EE;                        /* sfondo grigio-azzurro: le schede bianche ora si staccano */
    --border: rgba(0,0,0,0.12);

    --income:   #1F9D45;
    --expense:  #E5281E;
    --transfer: #A87A0A;

    --glass-bg:        rgba(255,255,255,0.58);
    --glass-bg-strong: rgba(255,255,255,0.80);
    --glass-border:    rgba(0,0,0,0.14);  /* bordi scuri sottili invece di bianco su bianco */
    --glass-shadow:
        0 8px 24px rgba(20,30,60,0.13),
        0 1px 2px rgba(20,30,60,0.10),
        inset 0 1px 0 rgba(255,255,255,0.7);
    --row-hover: rgba(0,0,0,0.05);

    --pill-active-bg: #FFFFFF;
}

/* Topbar: la "binario" della pillola più scura, così la pillola bianca risalta */
:root[data-theme="light"] .topbar { background: rgba(255,255,255,0.72); }
:root[data-theme="light"] .topbar nav { background: rgba(0,0,0,0.07); }

/* Intestazione tabella più marcata */
:root[data-theme="light"] thead th { background: rgba(0,0,0,0.05); }

/* Barra riepilogo: bianca piena, con ombra forte, ben staccata dalla tabella */
:root[data-theme="light"] .tx-summary-bar {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.16);
    box-shadow: 0 14px 36px rgba(20,30,60,0.28), 0 2px 6px rgba(20,30,60,0.12);
}
:root[data-theme="light"] .tx-summary-bar.docked {
    box-shadow: 0 -8px 24px rgba(20,30,60,0.14), 0 2px 6px rgba(20,30,60,0.10);
}

/* Modale quasi opaco in tema chiaro */
:root[data-theme="light"] .tx-modal-box { background: rgba(255,255,255,0.95); }

/* ===== CAMBIO TEMA FLUIDO ===== */
/* Durante il cambio niente transizioni a catena.
   NIENTE "animation: none" qui: toglierlo dopo faceva ripartire l'animazione
   pageFadeIn del body = il lampo a fine animazione. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
    animation-timing-function: ease;
}

html { background: var(--bg); }
body { animation: none; }


/* ===== Barra riepilogo transazioni: più larga e respirata ===== */
/* Prima 5 elementi in 520px max: i numeri si toccavano e non si leggevano */
.tx-summary-bar {
    max-width: 760px;
    padding: 14px 32px;
    gap: 24px;
}
.tx-summary-item { white-space: nowrap; }
.tx-summary-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; }
.tx-summary-value { font-size: 18px; }

/* ===== Chip "Varie": prima era bianco fisso, invisibile sulla barra bianca ===== */
.chip-varie { background: #FFFFFF; }                      /* tema scuro: bianco su scuro, ok */
:root[data-theme="light"] .chip-varie {
    background: #E5E5EA;
    border: 1px solid rgba(0,0,0,0.14);
    color: #3A3A3C;
}

/* Etichette della barra più leggibili in tema chiaro */
:root[data-theme="light"] .tx-summary-label { color: #4A4A50; }

/* SOSTITUISCI il blocco "Conto alla rovescia viaggio" che avevi incollato con questo
   (stesso punto, prima del blocco VERSIONE MOBILE) */

/* ===== Conto alla rovescia viaggio: pillola di fianco alla scritta "Prossimo viaggio" ===== */
.trip-label-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.trip-label-row .label { margin: 0; }

.trip-countdown {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 3px 12px; border-radius: 999px;
    background: rgba(10,132,255,0.14);
    border: 1px solid rgba(10,132,255,0.35);
    white-space: nowrap;
}
.trip-countdown-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.trip-countdown-value { font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Pagina Viaggi */
.next-trip-card { display: block; }
.next-trip-name {
    display: inline-flex; align-items: center; gap: 12px;
    margin: 4px 0 4px;
    font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text-primary); text-decoration: none;
}
.next-trip-name:hover { text-decoration: underline; }
.next-trip-dates { font-size: 15px; font-weight: 600; color: var(--text-secondary); }

@media (max-width: 760px) {
    .next-trip-name { font-size: 22px; }
}


/* ===== Gestione: conti e categorie, due schede affiancate ===== */
.manage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.manage-card { margin-bottom: 0; }
.manage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.manage-head h2 { margin: 0; }
.manage-count { font-size: 13px; color: var(--text-secondary); }
.manage-list { display: flex; flex-direction: column; }
.manage-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.manage-row:first-child { border-top: 0; }
.manage-row.inactive { opacity: 0.5; }
.manage-main { flex: 1; min-width: 0; }
.manage-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-sub { font-size: 12px; color: var(--text-secondary); }
.manage-amount { font-size: 14px; font-weight: 700; white-space: nowrap; }
.manage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.manage-form input[type="text"] { flex: 1 1 140px; min-width: 0; }
.manage-form select { flex: 0 1 150px; min-width: 0; }
.manage-form input[type="color"] { flex: 0 0 46px; width: 46px; height: 42px; padding: 4px; }
.manage-form .btn { flex: 0 0 auto; margin: 0; }
@media (max-width: 900px) { .manage-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ===== Viaggio: itinerario e biglietti ===== */
.extras-card { margin-top: 16px; }
.extras-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.extras-head .label { margin: 0; }
.extras-add-btn { padding: 7px 16px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.extras-empty { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.extras-msg { font-size: 13px; color: var(--text-secondary); }
#files-msg:not(:empty) { margin-bottom: 8px; }

/* form tappa */
.itin-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.itin-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.itin-form-row input[name="title"] { flex: 1 1 220px; min-width: 0; }
.itin-form input { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--text-primary); font: inherit; font-size: 14px; }
.itin-form-actions { display: flex; align-items: center; gap: 8px; }

/* giorni e tappe */
.itin-day + .itin-day { margin-top: 16px; }
.itin-day-title { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.itin-item { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.itin-day-title + .itin-item { border-top: 0; }
.itin-time { flex: 0 0 48px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); padding-top: 1px; }
.itin-main { flex: 1; min-width: 0; }
.itin-title { font-size: 15px; font-weight: 600; }
.itin-notes { font-size: 13px; color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
.itin-actions { display: flex; gap: 6px; align-items: center; }
.itin-btn { background: none; border: 0; padding: 4px 8px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.itin-btn:hover { color: var(--text-primary); background: var(--glass-bg-strong); }
.itin-btn.danger:hover { color: var(--expense); }

/* file */
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); }
.file-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); }
.file-icon { flex: 0 0 auto; min-width: 40px; text-align: center; padding: 5px 0; border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; background: rgba(10,132,255,0.16); color: var(--accent); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.file-size { flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); }

@media (max-width: 760px) {
    .itin-item { gap: 10px; }
    .itin-time { flex-basis: 42px; }
    .itin-btn { padding: 8px 10px; }
    .itin-form-row input[type="date"], .itin-form-row input[type="time"] { flex: 1 1 120px; }
}




/* ===== VERSIONE MOBILE: app-like (iPhone) ===== */

/* Barra a schede: su desktop non esiste */
.tabbar { display: none; }


/* ===== Icone in alto: tema e logout (PC e telefono) ===== */
.theme-toggle, .topbar-logout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: #fff;                         /* bianche nel tema scuro */
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .topbar-logout { color: var(--text-primary); }
.theme-toggle svg, .topbar-logout svg { width: 18px; height: 18px; display: block; }
.topbar-logout:hover { transform: scale(1.06); color: var(--expense); }
:root[data-theme="light"] .topbar-logout:hover { color: var(--expense); }

/* ===== Telefono ===== */


/* ===== Icone dei conti + freccia (Movimenti e dettaglio viaggio) ===== */
.flow { display: inline-flex; align-items: center; gap: 3px; }
.flow-slot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.flow .account-icon { width: 26px; height: 26px; }
.flow .account-icon img { width: 16px; height: 16px; }
.flow-arrow { width: 16px; height: 16px; flex: 0 0 auto; }
.flow-expense  .flow-arrow { color: var(--expense); }
.flow-income   .flow-arrow { color: var(--income); }
.flow-transfer .flow-arrow { color: var(--transfer); }

/* ===== Mai zoom col doppio tocco (la mappa e il visualizzatore file mantengono il pizzico) ===== */
html { touch-action: manipulation; }
[hidden] { display: none !important; }

/* ===== Dettaglio viaggio: movimenti ===== */
.trip-tx .tt-flow { white-space: nowrap; }
.trip-tx .tt-amount { white-space: nowrap; text-align: right; }

/* ===== File del viaggio: visualizzatore a tutto schermo ===== */
.file-dl { display: inline-flex; align-items: center; text-decoration: none; }
.file-viewer {
    position: fixed; inset: 0; z-index: 300;
    display: none; flex-direction: column;
    background: var(--bg);
}
.file-viewer.open { display: flex; }
.fv-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
}
.fv-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-btn {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--glass-border); background: var(--glass-bg-strong);
    color: var(--text-primary); text-decoration: none; cursor: pointer; padding: 0;
}
.fv-body {
    flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    touch-action: pan-x pan-y pinch-zoom;
}
.fv-body canvas, .fv-body img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.fv-msg { color: var(--text-secondary); font-size: 14px; padding: 40px 10px; text-align: center; }
body.fv-lock { overflow: hidden; }

/* PC: la cella con le icone non esiste (la tabella resta com'è) */
.tx-table td.cell-flow { display: none; }
@media (max-width: 760px){

    html { -webkit-text-size-adjust: 100%; }
    body {
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: none;
    }

    /* Niente zoom automatico di iOS quando tocchi un campo (succede sotto i 16px) */
    input[type="text"], input[type="number"], input[type="date"],
    select, textarea { font-size: 16px; }

    /* ---------- TOPBAR: solo logo, tema e logout (i link vanno nella barra in basso) ---------- */
    .topbar nav { display: none; }
    .topbar-logo { margin-right: 0; font-size: 19px; }
    .topbar-right { gap: 10px; }

    /* ---------- BARRA A SCHEDE IN BASSO ---------- */
    .tabbar {
        display: flex;
        position: fixed;
        left: 10px; right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 40;
    }
    .tabbar-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        padding: 7px 2px 6px;
        border-radius: 20px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 10px; font-weight: 600;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .tabbar-item svg { width: 22px; height: 22px; }
    .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar-item.active { background: var(--pill-active-bg); }

    /* ---------- PAGINA ---------- */
    .main { padding: 20px 14px calc(104px + env(safe-area-inset-bottom)); }
    h1 { font-size: 26px; }
    .card-wide { padding: 20px; }
    .card-wide .value-xl { font-size: 40px; }
    .card, .table-wrap, .card-wide, .card-list, .card-balance { border-radius: 20px; }

    /* ---------- HOME: una colonna, niente altezza fissa ---------- */
    .home-main { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
    .home-top { grid-template-columns: 1fr; gap: 14px; }
    .home-top > .home-card, .home-main > .home-trip { padding: 18px; }
    .home-card .value-xl { font-size: 40px; }
    .home-card .account-grid { grid-auto-rows: auto; }
    .home-main .home-top .account-grid .account-mini-card .account-mini-value { font-size: 22px !important; }
    .account-mini-card { padding: 12px; border-radius: 14px; }
    .account-mini-name { font-size: 13px; }

    .month-icons { gap: 6px; }
    .month-chip { padding: 8px 6px; font-size: 12px; gap: 4px; }
    .month-chip svg { width: 13px; height: 13px; }
    .home-actions { gap: 6px; }
    .home-actions .glass-btn { font-size: 12px; padding: 11px 4px; }

    .home-main > .home-trip { flex: none; min-height: 0; }
    .home-trip-head { flex-wrap: wrap; align-items: flex-start; }
    .home-trip-title { gap: 6px 12px; }
    .home-trip-name { font-size: 19px; }
    .trip-date, .trip-count { font-size: 13px; }
    .home-trip-meta { gap: 6px 12px; }
    .home-trip-net { font-size: 20px; }
    .home-trip .map-card.compact { flex: none; min-height: 0; }
    .home-trip .map-card.compact .trip-map { flex: none; height: 240px; min-height: 0; }

    /* ---------- MAPPE (viaggi) ---------- */
    .trip-map { height: 280px; }
    .summary-card { gap: 18px 28px; }
    .summary-item .value { font-size: 24px; }

    /* ---------- TRANSAZIONI ---------- */
    .search-bar { gap: 8px; }
    .search-bar input[type="text"] { flex: 1 1 100%; }
    .search-bar .btn { flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 13px; }
    .filters-popover { width: calc(100vw - 28px); max-width: none; }

    /* La tabella diventa un elenco di schede: titolo + importo, poi data, categoria, azioni */
    .tx-scroll-wrap .table-wrap { overflow: visible; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .tx-scroll-wrap .table-wrap::before, .tx-scroll-wrap .table-wrap::after { display: none; }
    .tx-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
    .tx-table thead { display: none; }
    .tx-table tbody { display: flex; flex-direction: column; gap: 10px; }
    .tx-table tr {
        display: grid;
        padding: 12px 14px;
        border-radius: 16px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
    }
    .tx-table tr:hover { background: var(--glass-bg); }
    .tx-table td { display: block; padding: 0; border: none; white-space: nowrap; min-width: 0; }

    .tx-table td:nth-child(2) { font-size: 15px; font-weight: 600; }
    .tx-table td:nth-child(1) { font-size: 12px; color: var(--text-secondary); }
    .tx-table td:nth-child(3),
    .tx-table td:nth-child(6),
    .tx-table td:nth-child(7) { display: none; }
    .tx-table td:last-child { text-align: right; }
    .tx-table .row-actions { justify-content: flex-end; }
    .icon-btn { width: 34px; height: 34px; }

    /* Barra riepilogo: sopra la barra a schede, a tutta larghezza, senza il chip categoria */
    .tx-summary-bar {
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: 100%; max-width: 100%;
        padding: 10px 14px; gap: 8px;
        border-radius: 18px;
    }
    .tx-summary-bar .tx-summary-item:nth-child(2) { display: none; }
    .tx-summary-value { font-size: 14px; }
    .tx-summary-label { font-size: 9px; }

    /* ---------- MODALE: foglio che sale dal basso, come iOS ---------- */
    .tx-modal-overlay { align-items: flex-end; padding: 0; }
    .tx-modal-box {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .tx-modal-overlay.open .tx-modal-box { transform: translateY(0); }
    .tx-modal-box::before {          /* maniglia in alto */
        content: ""; display: block;
        width: 40px; height: 5px; border-radius: 3px;
        background: var(--text-secondary); opacity: 0.35;
        margin: -10px auto 14px;
    }

    /* ---------- DETTAGLI ---------- */
    .glass-btn, .btn { min-height: 44px; }   /* bersagli tocco di almeno 44px */
    .chart-tooltip { max-width: 80vw; }

    .tabbar {
        padding: 5px;
        gap: 0;
        border-radius: 30px;
        touch-action: none;                 /* il dito sulla barra non fa scorrere la pagina */
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none;
        background: rgba(28,28,30,0.55);
        border: 1px solid rgba(255,255,255,0.16);
        -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.05);
        backdrop-filter: blur(20px) saturate(190%) brightness(1.05);
        box-shadow:
            0 12px 32px rgba(0,0,0,0.38),
            inset 0 1px 0 rgba(255,255,255,0.28),
            inset 0 -1px 0 rgba(255,255,255,0.06);
    }

    /* La pillola vera ora è un elemento a parte (creato da tabbar.js) */
    .tabbar-item { position: relative; z-index: 1; background: none !important; -webkit-tap-highlight-color: transparent; }
    .tabbar-item.active { color: var(--accent); }
    .tabbar-item.hover  { color: var(--accent); }
    .tabbar.dragging .tabbar-item.active:not(.hover) { color: var(--text-secondary); }
    .tabbar-item svg, .tabbar-item span { pointer-events: none; }

    .tabbar-pill {
        position: absolute; z-index: 0;
        top: 5px; left: 0;
        height: calc(100% - 10px);
        border-radius: 25px;
        pointer-events: none;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.30);
        -webkit-backdrop-filter: blur(4px) saturate(220%) brightness(1.25);
        backdrop-filter: blur(4px) saturate(220%) brightness(1.25);
        box-shadow:
            0 4px 14px rgba(0,0,0,0.25),
            inset 0 1px 1px rgba(255,255,255,0.55),
            inset 0 -1px 1px rgba(255,255,255,0.12);
        transform-origin: center;
        will-change: transform, width;
        transition:
            transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1),
            width 0.45s cubic-bezier(0.34, 1.45, 0.64, 1),
            background 0.2s ease, box-shadow 0.2s ease;
    }
    /* Mentre la tieni premuta: si ingrandisce e si accende, come su iOS */
    .tabbar.grabbed .tabbar-pill {
        background: rgba(255,255,255,0.22);
        box-shadow:
            0 8px 22px rgba(0,0,0,0.30),
            inset 0 1px 1px rgba(255,255,255,0.7),
            inset 0 -1px 1px rgba(255,255,255,0.2);
    }
    .tabbar.dragging .tabbar-pill { transition: width 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
    .tabbar.no-anim .tabbar-pill  { transition: none !important; }

    :root[data-theme="light"] .tabbar {
        background: rgba(255,255,255,0.72);
        border-color: rgba(255,255,255,0.8);
        box-shadow:
            0 10px 28px rgba(20,30,60,0.16),
            inset 0 1px 0 rgba(255,255,255,0.95),
            inset 0 -1px 0 rgba(0,0,0,0.05);
    }
    :root[data-theme="light"] .tabbar-pill {
        background: rgba(255,255,255,0.75);
        border-color: rgba(255,255,255,0.95);
        box-shadow:
            0 4px 14px rgba(20,30,60,0.16),
            inset 0 1px 1px #fff,
            inset 0 -1px 1px rgba(0,0,0,0.05);
    }
    :root[data-theme="light"] .tabbar.grabbed .tabbar-pill { background: rgba(255,255,255,0.95); }


    /* ===== Larghezza: titoli lunghi si accorciano, la pagina non si allarga ===== */
    .tx-table td:nth-child(2) { min-width: 0; overflow: hidden; }
    .tx-table td:nth-child(2) .tx-title-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html, body { max-width: 100%; }

    /* Barra in alto meno alta e con meno sfocatura */
    .topbar {
        height: calc(44px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 16px 0;
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

    /* I campi dei form non escono mai dalla scheda (iOS fa gonfiare date e ora) */
    .card-wide input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .tx-modal-box input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .card-wide select, .tx-modal-box select,
    .card-wide textarea, .tx-modal-box textarea {
        display: block;
        width: 100%; min-width: 0; max-width: 100%;
        box-sizing: border-box;
        -webkit-appearance: none; appearance: none;
    }
    .card-wide input[type="date"], .card-wide input[type="time"],
    .tx-modal-box input[type="date"], .tx-modal-box input[type="time"] { min-height: 44px; text-align: left; }

    /* Report: il grafico a ciambella al centro */
    .widget-view > div[style*="display: flex"] { justify-content: center; }
    .widget-view #expense-legend, .widget-view #income-legend { flex-basis: 100%; }

    /* ===== Dettaglio viaggio: movimenti come schede ===== */
    .table-wrap:has(table.trip-tx) {
        background: none; border: 0; box-shadow: none; padding: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
    }
    .table-wrap:has(table.trip-tx)::before, .table-wrap:has(table.trip-tx)::after { display: none; }
    .trip-tx, .trip-tx tbody { display: block; width: 100%; min-width: 0; }
    .trip-tx thead { display: none; }
    .trip-tx tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(96px, max-content);
        gap: 4px 10px; align-items: center;
        margin-bottom: 10px; padding: 12px 14px;
        border-radius: 18px;
        background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
    }
    .trip-tx tr.tt-empty { display: block; }
    .trip-tx td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal; }
    .trip-tx .tt-title  { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 15px; overflow: hidden; }
    .trip-tx .tt-title .tx-title-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .trip-tx .tt-date   { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--text-secondary); }
    .trip-tx .tt-place  { grid-column: 1; grid-row: 3; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .trip-tx .tt-place.is-empty, .trip-tx .tt-cat.is-empty { display: none; }
    .trip-tx .tt-cat    { grid-column: 1; grid-row: 4; justify-self: start; }
    .trip-tx .tt-flow   { grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: center; display: flex; }
    .trip-tx .tt-amount { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; font-size: 15px; }
    .trip-tx .tt-type   { grid-column: 3; grid-row: 2; text-align: right; font-size: 12px; color: var(--text-secondary); }

    /* Esporta CSV: solo da PC */
    #export-csv-btn, #export-csv-form { display: none !important; }

    /* ===== Tabelle -> schede (tutte tranne Movimenti) ===== */
    .table-wrap:has(table.cards-m) {
        background: none; border: 0; box-shadow: none; padding: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        overflow: visible;
    }
    .table-wrap:has(table.cards-m)::before, .table-wrap:has(table.cards-m)::after { display: none; }

    table.cards-m, table.cards-m tbody { display: block; width: 100%; }
    table.cards-m thead { display: none; }
    table.cards-m tr {
        display: block;
        margin-bottom: 10px;
        padding: 10px 14px;
        border-radius: 18px;
        background: var(--glass-bg-strong);
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
    }
    table.cards-m td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 6px 0; border: 0;
        text-align: right;
        white-space: normal; word-break: break-word;
        max-width: none; width: auto;
    }
    table.cards-m td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px; font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase; letter-spacing: 0.03em;
        text-align: left;
    }
    /* senza titolo di colonna (es. i pulsanti): nessuna etichetta, a destra */
    table.cards-m td[data-label=""]::before { display: none; }
    table.cards-m td[data-label=""] { justify-content: flex-end; }
    table.cards-m td.cell-wide { display: block; text-align: left; }
    table.cards-m td.cell-wide::before { display: none; }
    /* la prima cella (nome / data) fa da titolo della scheda */
    table.cards-m td:first-child { font-weight: 700; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
    table.cards-m td:first-child::before { display: none; }


    /* Sinistra: titolo, data, categoria | Centro: icone conti e freccia | Destra: importo e pulsanti */
    .tx-table tr {
        grid-template-columns: minmax(0, 1fr) auto minmax(104px, max-content);
        grid-template-rows: auto auto auto;
        gap: 4px 10px;
        align-items: center;
    }
    .tx-table td:nth-child(2) { grid-column: 1; grid-row: 1; }                              /* titolo (si accorcia prima delle icone) */
    .tx-table td:nth-child(1) { grid-column: 1; grid-row: 2; }                              /* data */
    .tx-table td:nth-child(5) { grid-column: 1; grid-row: 3; justify-self: start; }         /* categoria */
    .tx-table td.cell-flow    { display: flex; grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; }
    .tx-table td:nth-child(4) { grid-column: 3; grid-row: 1; }                              /* importo */
    .tx-table td:nth-child(8) { grid-column: 3; grid-row: 2 / 4; align-self: end; }         /* modifica / elimina */

    .tx-table td:nth-child(4) { text-align: right; white-space: nowrap; font-size: 14px; }
    .tx-table td:nth-child(8) { justify-self: end; }
}