* {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 12px;
        background-color: var(--bg-color);
        color: var(--text-main);
    }

    .container {
        max-width: 100%;
        margin: 0 auto;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--card-bg);
        padding: 16px 18px;
        border-radius: 20px;
        box-shadow: var(--shadow-card);
        margin-bottom: 14px;
        border: 1px solid rgba(255, 255, 255, 0.8);
    }

    .header-left h1 {
        margin: 0 0 2px 0;
        font-size: 1.35em;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
    }

    #live-clock {
        font-size: 0.75em;
        color: var(--text-muted);
        margin: 0;
        font-weight: 500;
    }

    .menu-btn {
        background: var(--primary-gradient);
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 14px;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.95em;
        box-shadow: var(--shadow-3d);
        transition: transform 0.1s ease;
        min-height: 44px;
    }
    .menu-btn:active { transform: var(--btn-press); }

    .history-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--card-bg);
        padding: 12px 18px;
        border-radius: 16px;
        box-shadow: var(--shadow-card);
        margin-bottom: 14px;
    }

    .history-controls span {
        font-weight: 700;
        color: var(--primary);
        font-size: 1.05em;
    }

    .cal-nav-btn {
        background: #e0e7ff;
        color: var(--primary);
        border: none;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 1em;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.1s;
    }
    .cal-nav-btn:active { transform: var(--btn-press); background: #c7d2fe; }

    .summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 14px;
    }

    .summary-box {
        background: var(--card-bg);
        padding: 16px 12px;
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        text-align: center;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.8);
    }

    .summary-box::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 4px;
    }
    .summary-box:nth-child(1)::after { background: var(--success-gradient); }
    .summary-box:nth-child(2)::after { background: var(--danger-gradient); }
    .summary-box:nth-child(3)::after { background: var(--primary-gradient); }
    .summary-box:nth-child(4)::after { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }

    .summary-box h3 {
        margin: 0 0 6px 0;
        font-size: 0.75em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
    }

    .summary-box p {
        margin: 0;
        font-size: 1.15em;
        font-weight: 800;
    }

    .income { color: var(--success); }
    .expense { color: var(--danger); }

    .methods-card {
        background: var(--card-bg);
        padding: 14px 18px;
        border-radius: 18px;
        box-shadow: var(--shadow-card);
        margin-bottom: 14px;
        border: 1px solid rgba(255, 255, 255, 0.8);
    }
    .methods-card h2 {
        margin: 0 0 10px 0;
        font-size: 0.95em;
        color: var(--text-main);
        font-weight: 700;
    }
    .method-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.95em;
        font-weight: 600;
    }
    .method-row:last-child { border-bottom: none; }

    .main-card {
        background: var(--card-bg);
        padding: 18px;
        border-radius: 20px;
        box-shadow: var(--shadow-card);
        margin-bottom: 20px;
    }

    .main-card h2 {
        margin-top: 0;
        font-size: 1.05em;
        color: var(--text-main);
        margin-bottom: 14px;
        font-weight: 700;
    }

    .movement-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .movement-item:last-child { border-bottom: none; }

    .mov-info { display: flex; flex-direction: column; gap: 3px; max-width: 55%; }
    .mov-desc-wrapper { display: flex; align-items: center; gap: 6px; }
    .mov-desc { font-weight: 700; font-size: 0.95em; word-break: break-word; color: var(--text-main); }
    .routine-icon { font-size: 0.85em; }
    .mov-date { font-size: 0.75em; color: var(--text-muted); font-weight: 500; }

    .mov-right { display: flex; align-items: center; gap: 6px; }
    .mov-amount { font-weight: 800; font-size: 1em; white-space: nowrap; margin-right: 2px; }

    .delete-btn, .edit-btn, .import-single-btn {
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 0.85em;
        padding: 6px;
        min-height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        transition: transform 0.1s;
    }
    .delete-btn:active, .edit-btn:active, .import-single-btn:active { transform: var(--btn-press); }
    .delete-btn { background: #fee2e2; color: var(--danger); }
    .edit-btn { background: #fef3c7; color: #d97706; }
    .import-single-btn { background: #d1fae5; color: var(--success); }

    .drawer-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        visibility: hidden;
        opacity: 0;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }
    .drawer-overlay.open { visibility: visible; opacity: 1; }

    .drawer-panel {
        position: fixed;
        top: 0; left: -100%; width: 100%; max-width: 420px; height: 100%;
        background: var(--card-bg);
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }
    .drawer-overlay.open .drawer-panel { left: 0; }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 12px;
    }
    .close-btn { background: #f1f5f9; border: none; font-size: 1.4em; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); font-weight: bold; }

    .form-group { margin-bottom: 14px; }
    .form-group label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.85em; color: var(--text-muted); }
    
    input, select {
        width: 100%; padding: 12px 14px; border: 2px solid #e2e8f0; border-radius: 14px; box-sizing: border-box; font-size: 1em; background: #f8fafc; color: var(--text-main); font-weight: 600; outline: none; transition: border-color 0.2s;
    }
    input:focus, select:focus { border-color: var(--primary); background: #fff; }

    .action-btn {
        width: 100%; padding: 14px; background: var(--primary-gradient); color: white; border: none; border-radius: 14px; font-weight: 800; cursor: pointer; font-size: 1.05em; box-shadow: var(--shadow-3d); transition: transform 0.1s; min-height: 48px;
    }
    .action-btn:active { transform: var(--btn-press); }

    .cancel-edit-btn {
        width: 100%; padding: 12px; background: #64748b; color: white; border: none; border-radius: 14px; font-weight: 700; cursor: pointer; margin-top: 8px; display: none; min-height: 44px;
    }

    .calendar-container {
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        padding: 14px;
        border-radius: 16px;
        margin-top: 18px;
        text-align: center;
    }
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 0.9em;
        color: var(--text-main);
    }
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        font-size: 0.8em;
    }
    .calendar-day-name {
        font-weight: 700;
        color: var(--text-muted);
        padding: 4px 0;
    }
    .calendar-day {
        padding: 10px 0;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-weight: 600;
    }
    .calendar-day.today {
        background: var(--primary-gradient);
        color: white;
        font-weight: 800;
        border: none;
        box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
    }

    .fixed-section-box {
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        padding: 14px;
        border-radius: 16px;
        margin-top: 18px;
    }
    .fixed-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9em;
    }
    .fixed-item:last-child { border-bottom: none; }
    .fixed-item-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }
</style>
<div class="container">
    <header>
        <div class="header-left">
            <h1>Bilancio</h1>
            <p id="live-clock">Caricamento...</p>
        </div>
        <button class="menu-btn" onclick="toggleDrawer()">☰ Menu</button>
    </header>

    <div class="history-controls">
        <button class="cal-nav-btn" onclick="changeSelectedMonth(-1)">◀</button>
        <span id="current-viewed-month">Mese Anno</span>
        <button class="cal-nav-btn" onclick="changeSelectedMonth(1)">▶</button>
    </div>

    <div class="summary">
        <div class="summary-box">
            <h3>Entrate</h3>
            <p id="total-income" class="income">€ 0.00</p>
        </div>
        <div class="summary-box">
            <h3>Uscite</h3>
            <p id="total-expense" class="expense">€ 0.00</p>
        </div>
        <div class="summary-box">
            <h3>Bilancio</h3>
            <p id="total-balance">€ 0.00</p>
        </div>
        <div class="summary-box">
            <h3>Budget / gg</h3>
            <p id="daily-budget">€ 0.00</p>
        </div>
    </div>

    <div class="methods-card">
        <h2>💳 Suddivisione per Metodo</h2>
        <div class="method-row">
            <span>💵 Contanti:</span>
            <span id="cash-balance">€ 0.00</span>
        </div>
        <div class="method-row">
            <span>🏦 Conto Corrente:</span>
            <span id="account-balance">€ 0.00</span>
        </div>
    </div>

    <div class="main-card">
        <h2>Storico Movimenti</h2>
        <div id="transaction-list"></div>
    </div>
</div>

<div class="drawer-overlay" id="drawerOverlay" onclick="toggleDrawer()">
    <div class="drawer-panel" onclick="event.stopPropagation()">
        <div class="drawer-header">
            <h3 id="drawer-title" style="margin:0; font-size: 1.15em; font-weight: 800; color: var(--primary);">Gestione e Pianificazione</h3>
            <button class="close-btn" onclick="toggleDrawer()">&times;</button>
        </div>

        <div style="margin-bottom: 15px;">
            <h4 id="form-title" style="margin: 0 0 10px 0; color: var(--text-main); font-size: 1em; font-weight: 700;">Nuovo Movimento / Routine</h4>
            <form id="transaction-form">
                <input type="hidden" id="edit-id" value="">
                <input type="hidden" id="original-timestamp" value="">

                <div class="form-group">
                    <label>Descrizione</label>
                    <input type="text" id="description" placeholder="Es. Spesa, Affitto" required>
                </div>
                <div class="form-group">
                    <label>Importo (€)</label>
                    <input type="number" id="amount" placeholder="0.00" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>Tipo</label>
                    <select id="type">
                        <option value="expense">Spesa</option>
                        <option value="income">Entrata</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Metodo / Conto</label>
                    <select id="account-type">
                        <option value="contanti">Contanti 💵</option>
                        <option value="conto">Conto Corrente 🏦</option>
                    </select>
                </div>
                <div class="form-group" id="mode-group">
                    <label>Destinazione / Modalità</label>
                    <select id="category-mode" onchange="toggleModeInputs()">
                        <option value="normal">Movimento Singolo (Immediato)</option>
                        <option value="fixed">Spesa Fissa / Routine Mensile</option>
                        <option value="scheduled">Spesa Programmata (Data specifica)</option>
                    </select>
                </div>

                <div class="form-group" id="fixed-day-group" style="display: none;">
                    <label>Giorno di Addebito nel Mese</label>
                    <select id="fixed-day"></select>
                </div>

                <div class="form-group" id="date-group" style="display: none;">
                    <label>Data di Scadenza / Esecuzione</label>
                    <input type="date" id="scheduled-date">
                </div>

                <button type="submit" id="submit-btn" class="action-btn">Registra / Salva</button>
                <button type="button" id="cancel-edit-btn" class="cancel-edit-btn" onclick="resetFormToCreate()">Annulla Modifica</button>
            </form>
        </div>

        <hr style="border:0; border-top:2px solid #f1f5f9; margin: 16px 0;">

        <div class="calendar-container">
            <div class="calendar-header">
                <button class="cal-nav-btn" onclick="changeCalendarMonth(-1)">&#10094;</button>
                <span id="calendar-month-year">Mese Anno</span>
                <button class="cal-nav-btn" onclick="changeCalendarMonth(1)">&#10095;</button>
            </div>
            <div class="calendar-grid" id="calendar-days"></div>
        </div>

        <div class="fixed-section-box">
            <div style="font-weight: 700; font-size: 0.9em; margin-bottom: 8px; color: var(--text-main);">🔄 Routine & Spese Fisse:</div>
            <div id="fixed-list"></div>
            <button class="action-btn" style="background: var(--success-gradient); margin-top: 10px; font-size: 0.95em; padding: 12px;" onclick="applyFixedToCurrentMonth()">📥 Importa Tutte in Blocco</button>
        </div>
    </div>
</div>

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js').catch(() => {});
        });
    }

    let viewedDate = new Date(); 
    let calendarDate = new Date(); 

    const monthNames = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

    function initDaySelects() {
        const fixedDayEl = document.getElementById('fixed-day');
        fixedDayEl.innerHTML = '';
        for (let i = 1; i <= 31; i++) {
            const opt = document.createElement('option');
            opt.value = i;
            opt.innerText = `Giorno ${i}`;
            fixedDayEl.appendChild(opt);
        }
    }
    initDaySelects();

    function updateClock() {
        const now = new Date();
        const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
        document.getElementById('live-clock').innerText = now.toLocaleDateString('it-IT', options);
    }
    setInterval(updateClock, 1000);
    updateClock();

    function changeSelectedMonth(direction) {
        viewedDate.setMonth(viewedDate.getMonth() + direction);
        render();
    }

    function changeCalendarMonth(direction) {
        calendarDate.setMonth(calendarDate.getMonth() + direction);
        renderCalendar();
    }

    function renderCalendar() {
        const year = calendarDate.getFullYear();
        const month = calendarDate.getMonth();
        document.getElementById('calendar-month-year').innerText = `${monthNames[month]} ${year}`;

        const firstDayIndex = new Date(year, month, 1).getDay();
        const startingSpace = (firstDayIndex === 0) ? 6 : firstDayIndex - 1;
        const totalDays = new Date(year, month + 1, 0).getDate();

        const grid = document.getElementById('calendar-days');
        grid.innerHTML = '';

        ['L', 'M', 'M', 'G', 'V', 'S', 'D'].forEach(d => {
            const nameEl = document.createElement('div');
            nameEl.className = 'calendar-day-name';
            nameEl.innerText = d;
            grid.appendChild(nameEl);
        });

        for (let i = 0; i < startingSpace; i++) {
            grid.appendChild(document.createElement('div'));
        }

        const today = new Date();
        for (let d = 1; d <= totalDays; d++) {
            const dayEl = document.createElement('div');
            dayEl.className = 'calendar-day';
            if (d === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
                dayEl.classList.add('today');
            }
            dayEl.innerText = d;
            grid.appendChild(dayEl);
        }
    }
    renderCalendar();

    function toggleModeInputs() {
        const mode = document.getElementById('category-mode').value;
        document.getElementById('date-group').style.display = (mode === 'scheduled') ? 'block' : 'none';
        document.getElementById('fixed-day-group').style.display = (mode === 'fixed') ? 'block' : 'none';
    }

    const drawerOverlay = document.getElementById('drawerOverlay');
    function toggleDrawer() {
        drawerOverlay.classList.toggle('open');
    }

    const form = document.getElementById('transaction-form');
    const descriptionInput = document.getElementById('description');
    const amountInput = document.getElementById('amount');
    const typeInput = document.getElementById('type');
    const accountTypeInput = document.getElementById('account-type');
    const categoryModeInput = document.getElementById('category-mode');
    const scheduledDateInput = document.getElementById('scheduled-date');
    const fixedDayInput = document.getElementById('fixed-day');
    const editIdInput = document.getElementById('edit-id');
    const originalTimestampInput = document.getElementById('original-timestamp');
    const formTitle = document.getElementById('form-title');
    const submitBtn = document.getElementById('submit-btn');
    const cancelEditBtn = document.getElementById('cancel-edit-btn');
    const modeGroup = document.getElementById('mode-group');
    
    const transactionList = document.getElementById('transaction-list');
    const fixedList = document.getElementById('fixed-list');

    let allTransactions = [];
    
    let allFixed = [
        { id: "fx-1", description: "Casa - Affitto", amount: 471.20, type: "expense", account: "conto", day: 10 },
        { id: "fx-2", description: "Condominio - Abitazione", amount: 35.20, type: "expense", account: "conto", day: 10 },
        { id: "fx-3", description: "Unicredit - Prestiti, interessi", amount: 172.48, type: "expense", account: "conto", day: 10 },
        { id: "fx-4", description: "Compass - Prestiti, interessi", amount: 24.71, type: "expense", account: "conto", day: 10 },
        { id: "fx-5", description: "Campagna - Prestiti, interessi", amount: 124.00, type: "expense", account: "conto", day: 10 },
        { id: "fx-6", description: "Nissan - Prestiti, interessi", amount: 271.50, type: "expense", account: "conto", day: 10 },
        { id: "fx-7", description: "Fastweb - Internet", amount: 43.85, type: "expense", account: "conto", day: 10 },
        { id: "fx-8", description: "Spotify - Hobby", amount: 16.99, type: "expense", account: "conto", day: 10 },
        { id: "fx-9", description: "Sim simone - Telefono, cellulare", amount: 9.99, type: "expense", account: "conto", day: 10 },
        { id: "fx-10", description: "Assegno unico - Assegni, coupon", amount: 477.40, type: "income", account: "conto", day: 10 },
        { id: "fx-11", description: "Computer - Comunicazione, PC", amount: 40.00, type: "expense", account: "conto", day: 10 }
    ];

    async function fetchData() {
        try {
            const resTx = await fetch('/api/transactions');
            allTransactions = await resTx.json();
            
            try {
                const resFixed = await fetch('/api/fixed');
                const serverFixed = await resFixed.json();
                if (serverFixed && serverFixed.length > 0) {
                    allFixed = serverFixed;
                }
            } catch (err) {
                console.log("Uso le spese fisse integrate.");
            }

            render();
        } catch (error) {
            transactionList.innerHTML = '<p style="color: var(--danger); text-align: center; padding: 20px;">Impossibile connettersi al server API.</p>';
        }
    }

    async function handleFormSubmit(e) {
        e.preventDefault();
        const editId = editIdInput.value;
        const desc = descriptionInput.value;
        const amt = parseFloat(amountInput.value);
        const typ = typeInput.value;
        const acc = accountTypeInput.value;

        try {
            if (editId) {
                let dateTag = originalTimestampInput.value || new Date().toISOString();
                const response = await fetch(`/api/transactions/${editId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ 
                        id: editId,
                        description: desc, 
                        amount: amt, 
                        type: typ, 
                        account: acc, 
                        timestamp: dateTag 
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`Errore del server durante la modifica: ${response.statusText}`);
                }
                resetFormToCreate();
            } else {
                const mode = categoryModeInput.value;
                const now = new Date();
                if (mode === 'fixed') {
                    await fetch('/api/fixed', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ 
                            description: desc, 
                            amount: amt, 
                            type: typ, 
                            account: acc, 
                            day: parseInt(fixedDayInput.value, 10) 
                        })
                    });
                } else {
                    let dateTag = now.toISOString();
                    let isRoutineFlag = false;
                    if (mode === 'scheduled' && scheduledDateInput.value) {
                        dateTag = new Date(scheduledDateInput.value).toISOString();
                        isRoutineFlag = true;
                    }
                    await fetch('/api/transactions', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ 
                            description: desc, 
                            amount: amt, 
                            type: typ, 
                            account: acc, 
                            isRoutine: isRoutineFlag, 
                            timestamp: dateTag 
                        })
                    });
                }
            }
            descriptionInput.value = '';
            amountInput.value = '';
            scheduledDateInput.value = '';
            drawerOverlay.classList.remove('open');
            fetchData();
        } catch (error) {
            console.error("Errore nel salvataggio:", error);
            alert("Impossibile completare l'operazione di salvataggio.");
        }
    }

    function prepareEditTransaction(id) {
        const t = allTransactions.find(item => item.id == id);
        if (!t) return;

        editIdInput.value = t.id;
        originalTimestampInput.value = t.timestamp || new Date().toISOString();
        descriptionInput.value = t.description;
        amountInput.value = t.amount;
        typeInput.value = t.type;
        accountTypeInput.value = t.account || 'contanti';
        
        modeGroup.style.display = 'none';
        document.getElementById('fixed-day-group').style.display = 'none';
        document.getElementById('date-group').style.display = 'none';
        
        formTitle.innerText = "Modifica Movimento";
        submitBtn.innerText = "Salva Modifiche";
        cancelEditBtn.style.display = 'block';
        
        drawerOverlay.classList.add('open');
    }

    function resetFormToCreate() {
        editIdInput.value = '';
        originalTimestampInput.value = '';
        descriptionInput.value = '';
        amountInput.value = '';
        accountTypeInput.value = 'contanti';
        scheduledDateInput.value = '';
        categoryModeInput.value = 'normal';
        modeGroup.style.display = 'block';
        cancelEditBtn.style.display = 'none';
        formTitle.innerText = "Nuovo Movimento / Routine";
        submitBtn.innerText = "Registra / Salva";
        toggleModeInputs();
    }

    async function deleteTransaction(id) {
        await fetch(`/api/transactions/${id}`, { method: 'DELETE' });
        fetchData();
    }

    async function deleteFixed(id) {
        await fetch(`/api/fixed/${id}`, { method: 'DELETE' });
        fetchData();
    }

    async function importSingleFixed(fx) {
        const now = new Date();
        const safeDay = Math.min(parseInt(fx.day || 1, 10), new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate());
        await fetch('/api/transactions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ description: fx.description, amount: fx.amount, type: fx.type, account: fx.account || 'contanti', isRoutine: true, timestamp: new Date(now.getFullYear(), now.getMonth(), safeDay, 9, 0, 0).toISOString() })
        });
        fetchData();
    }

    async function applyFixedToCurrentMonth() {
        if (allFixed.length === 0) { alert("Nessuna routine impostata!"); return; }
        for (const fx of allFixed) { await importSingleFixed(fx); }
        drawerOverlay.classList.remove('open');
        fetchData();
    }

    function render() {
        const vYear = viewedDate.getFullYear();
        const vMonth = viewedDate.getMonth();
        document.getElementById('current-viewed-month').innerText = `${monthNames[vMonth]} ${vYear}`;

        transactionList.innerHTML = '';
        let income = 0, expense = 0;
        let cashIncome = 0, cashExpense = 0;
        let accountIncome = 0, accountExpense = 0;

        const filtered = allTransactions.filter(t => {
            if (!t.timestamp) return false;
            const d = new Date(t.timestamp);
            return d.getFullYear() === vYear && d.getMonth() === vMonth;
        });

        if (filtered.length === 0) {
            transactionList.innerHTML = '<p style="color: var(--text-muted); text-align: center; padding: 15px; font-size: 0.9em;">Nessun movimento registrato.</p>';
        }

        filtered.forEach(t => {
            const amt = parseFloat(t.amount) || 0;
            const isConto = t.account === 'conto';

            if (t.type === 'income') {
                income += amt;
                if (isConto) accountIncome += amt; else cashIncome += amt;
            } else {
                expense += amt;
                if (isConto) accountExpense += amt; else cashExpense += amt;
            }

            let dateStr = '';
            if (t.timestamp) {
                const d = new Date(t.timestamp);
                if (!isNaN(d.getTime())) dateStr = d.toLocaleString('it-IT', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
            }

            const accountIcon = isConto ? '🏦' : '💵';

            const item = document.createElement('div');
            item.className = 'movement-item';
            item.innerHTML = `
                <div class="mov-info">
                    <div class="mov-desc-wrapper">
                        <span>${accountIcon}</span>
                        ${t.isRoutine ? '<span class="routine-icon">🔁</span>' : ''}
                        <span class="mov-desc">${t.description}</span>
                    </div>
                    <span class="mov-date">${dateStr}</span>
                </div>
                <div class="mov-right">
                    <span class="mov-amount ${t.type === 'income' ? 'income' : 'expense'}">${t.type === 'income' ? '+' : '-'}€ ${amt.toFixed(2)}</span>
                    <button class="edit-btn" onclick="prepareEditTransaction('${t.id}')">✏️</button>
                    <button class="delete-btn" onclick="deleteTransaction('${t.id}')">🗑️</button>
                </div>
            `;
            transactionList.appendChild(item);
        });

        fixedList.innerHTML = '';
        if (allFixed.length === 0) fixedList.innerHTML = '<p style="color: var(--text-muted); font-size: 0.85em;">Nessuna routine salvata.</p>';
        
        allFixed.forEach(f => {
            const accountIcon = f.account === 'conto' ? '🏦' : '💵';
            const item = document.createElement('div');
            item.className = 'fixed-item';
            item.innerHTML = `
                <div>
                    <span style="font-weight: 700; font-size: 0.95em;">${accountIcon} ${f.description}</span> <span style="font-size: 0.75em; background: #e2e8f0; padding: 2px 6px; border-radius: 6px; font-weight: 600;">Giorno ${f.day || 1}</span><br>
                    <span class="${f.type === 'income' ? 'income' : 'expense'}" style="font-size: 0.85em; font-weight: 700;">${f.type === 'income' ? '+' : '-'}€ ${parseFloat(f.amount).toFixed(2)}</span>
                </div>
                <div class="fixed-item-actions">
                    <button class="import-single-btn" onclick='importSingleFixed(${JSON.stringify(f)})'>📥</button>
                    <button class="delete-btn" onclick="deleteFixed('${f.id}')">❌</button>
                </div>
            `;
            fixedList.appendChild(item);
        });

        const balance = income - expense;
        const cashBalance = cashIncome - cashExpense;
        const accountBalance = accountIncome - accountExpense;

        const now = new Date();
        const totalDays = new Date(vYear, vMonth + 1, 0).getDate();
        const remaining = (vYear === now.getFullYear() && vMonth === now.getMonth()) ? Math.max(1, totalDays - now.getDate() + 1) : totalDays;

        document.getElementById('total-income').innerText = `€ ${income.toFixed(2)}`;
        document.getElementById('total-expense').innerText = `€ ${expense.toFixed(2)}`;
        
        const balElem = document.getElementById('total-balance');
        balElem.innerText = `€ ${balance.toFixed(2)}`;
        balElem.className = balance >= 0 ? 'income' : 'expense';
        
        document.getElementById('daily-budget').innerText = `€ ${(balance > 0 ? balance / remaining : 0).toFixed(2)}`;

        const cashElem = document.getElementById('cash-balance');
        cashElem.innerText = `€ ${cashBalance.toFixed(2)}`;
        cashElem.className = cashBalance >= 0 ? 'income' : 'expense';

        const accElem = document.getElementById('account-balance');
        accElem.innerText = `€ ${accountBalance.toFixed(2)}`;
        accElem.className = accountBalance >= 0 ? 'income' : 'expense';
    }

    form.addEventListener('submit', handleFormSubmit);
    fetchData();
</script>