Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

Find out more

<iframe>Crea un frame all'interno di una pagina HTML.
<label>Mostrare un testo di etichetta per un elemento di input.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
maxImposta il valore numerico o temporale massimo per un elemento input

Users

Log in to search for users

Explore

Find inspiration

tabella

llyr

Es JS Array1

Indovina il Numero - Gioco(2)

pag. 2 progetto inf

FORM 2

5/10/24 es. 4 - Password

Prototipo di form

La Storia di Cappuccetto Rosso

primo sito

Vendi Casa ad Ardea in 90 Giorni F

SEMI al FUTURO Social Wall

HTML

CSS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generatore Fatture - Sistema Intelligente</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <!-- Toast Notification Area -->
    <div id="toast-container"></div>

    <!-- Setup Modal -->
    <div id="setupModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Configurazione Iniziale</h3>
                <div class="setup-steps">
                    <span class="step-indicator step-1 active">1</span>
                    <span class="step-indicator step-2">2</span>
                    <span class="step-indicator step-3">3</span>
                </div>
            </div>
            <div class="modal-body">
                <!-- Step 1: User Info -->
                <div id="setupStep1" class="setup-step active">
                    <h4>Informazioni Utente</h4>
                    <div class="form-group">
                        <label class="form-label" for="username">Nome Utente:</label>
                        <input type="text" id="username" class="form-control" placeholder="Inserisci il tuo nome utente" required>
                    </div>
                    <div class="form-actions">
                        <button type="button" id="nextStep1" class="btn btn--primary">Continua →</button>
                    </div>
                </div>

                <!-- Step 2: Doctor Info -->
                <div id="setupStep2" class="setup-step hidden">
                    <h4>Informazioni Medico</h4>
                    <div class="form-group">
                        <label class="form-label" for="doctorName">Nome Medico:</label>
                        <input type="text" id="doctorName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="doctorAddress">Indirizzo:</label>
                        <input type="text" id="doctorAddress" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="doctorPiva">P.IVA:</label>
                        <input type="text" id="doctorPiva" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="doctorCf">Codice Fiscale:</label>
                        <input type="text" id="doctorCf" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="doctorTitle">Titolo Professionale:</label>
                        <input type="text" id="doctorTitle" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="doctorOrder">Ordine Medici:</label>
                        <input type="text" id="doctorOrder" class="form-control" required>
                    </div>
                    <div class="form-actions">
                        <button type="button" id="prevStep2" class="btn btn--outline">← Indietro</button>
                        <button type="button" id="nextStep2" class="btn btn--primary">Continua →</button>
                    </div>
                </div>

                <!-- Step 3: Folder Selection -->
                <div id="setupStep3" class="setup-step hidden">
                    <h4>Cartella di Salvataggio</h4>
                    <div class="folder-selection-info">
                        <div class="info-icon">?</div>
                        <div class="info-content">
                            <p><strong>Importante:</strong> Seleziona una cartella dove salvare tutti i tuoi dati delle fatture.</p>
                            <p>I file verranno salvati automaticamente con timestamp e saranno accessibili solo a te.</p>
                            <p>Esempio: <code>Documenti/Fatture</code></p>
                        </div>
                    </div>
                    
                    <div class="folder-selection">
                        <div id="folderStatus" class="folder-status">
                            <span class="folder-icon">?</span>
                            <span id="folderPath" class="folder-path">Nessuna cartella selezionata</span>
                        </div>
                        
                        <button type="button" id="selectFolderBtn" class="btn btn--secondary btn--full-width">
                            ?️ Seleziona Cartella di Salvataggio
                        </button>
                        
                        <div id="folderNotSupported" class="folder-fallback hidden">
                            <p class="warning-text">⚠️ Il tuo browser non supporta la selezione diretta delle cartelle.</p>
                            <p>Utilizzeremo il sistema di download/upload tradizionale come fallback.</p>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" id="prevStep3" class="btn btn--outline">← Indietro</button>
                        <button type="button" id="completeSetup" class="btn btn--primary" disabled>Completa Configurazione</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <h1>Generatore Fatture</h1>
                <div class="header-info">
                    <span id="currentUser" class="user-badge"></span>
                    <div id="saveStatus" class="save-status">
                        <span id="saveIndicator" class="save-indicator">?</span>
                        <span id="saveText" class="save-text">Salvato</span>
                    </div>
                    <span id="versionInfo" class="version-badge"></span>
                    <button id="settingsBtn" class="btn btn--outline btn--sm">⚙️</button>
                    <button id="logoutBtn" class="btn btn--outline btn--sm">Logout</button>
                </div>
            </div>
        </div>
    </header>

    <!-- Storage Info Banner -->
    <div id="storageInfo" class="storage-info hidden">
        <div class="container">
            <div class="storage-content">
                <span class="storage-icon">?</span>
                <span id="storageText" class="storage-text"></span>
                <button id="changeFolder" class="btn btn--outline btn--sm">Cambia Cartella</button>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="nav-tabs">
        <div class="container">
            <button id="generatorTab" class="nav-tab active">Generatore</button>
            <button id="managementTab" class="nav-tab">Gestione</button>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
        <div class="container">
            <!-- Loading Screen -->
            <div id="loadingScreen" class="loading-screen hidden">
                <div class="loading-content">
                    <div class="loading-spinner"></div>
                    <h3>Caricamento dati...</h3>
                    <p id="loadingText">Scansione cartella in corso...</p>
                </div>
            </div>

            <!-- Import/Export Section -->
            <section class="import-export-section">
                <div class="card">
                    <div class="card__body">
                        <div class="import-export-controls">
                            <div class="export-section">
                                <button id="exportBtn" class="btn btn--primary">
                                    ? Esporta Copia Extra
                                </button>
                                <small class="export-info">Crea una copia aggiuntiva in Downloads</small>
                            </div>
                            
                            <div class="import-section">
                                <div id="dropZone" class="drop-zone">
                                    <div class="drop-zone-content">
                                        <span class="drop-icon">?</span>
                                        <p>Importa da file esterno</p>
                                        <button id="importBtn" class="btn btn--secondary">Seleziona File</button>
                                        <small>Solo per backup esterni</small>
                                    </div>
                                </div>
                                <input type="file" id="fileInput" accept=".json" class="hidden">
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Generator Page -->
            <div id="generatorPage" class="page-content">
                <!-- Patient Selection -->
                <section class="patient-section">
                    <div class="card">
                        <div class="card__header">
                            <h3>Selezione Paziente</h3>
                        </div>
                        <div class="card__body">
                            <div class="patient-controls">
                                <select id="patientSelect" class="form-control">
                                    <option value="">Seleziona un paziente...</option>
                                </select>
                                <button id="addPatientBtn" class="btn btn--secondary">+ Nuovo Paziente</button>
                            </div>
                            
                            <div id="selectedPatientInfo" class="patient-info hidden">
                                <h4>Informazioni Paziente:</h4>
                                <div id="patientDetails"></div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Invoice Generation -->
                <section class="invoice-section">
                    <div class="card">
                        <div class="card__header">
                            <h3>Generazione Fattura</h3>
                        </div>
                        <div class="card__body">
                            <form id="invoiceForm">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label class="form-label" for="invoiceDate">Data Fattura:</label>
                                        <input type="date" id="invoiceDate" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="invoiceNumber">Numero:</label>
                                        <input type="text" id="invoiceNumber" class="form-control" readonly>
                                    </div>
                                </div>
                                
                                <div id="servicesContainer">
                                    <div class="service-item">
                                        <div class="form-row">
                                            <div class="form-group flex-1">
                                                <label class="form-label">Descrizione:</label>
                                                <input type="text" class="form-control service-description" placeholder="Visita medica" required>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Quantità:</label>
                                                <input type="number" class="form-control service-quantity" min="1" value="1" required>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Prezzo (€):</label>
                                                <input type="number" class="form-control service-price" step="0.01" min="0" required>
                                            </div>
                                            <div class="form-group">
                                                <button type="button" class="btn btn--outline btn--sm remove-service" disabled>Rimuovi</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <button type="button" id="addServiceBtn" class="btn btn--secondary btn--sm">+ Aggiungi Servizio</button>
                                
                                <div class="invoice-total">
                                    <strong>Totale: € <span id="totalAmount">0.00</span></strong>
                                </div>
                                
                                <div class="form-actions">
                                    <button type="submit" class="btn btn--primary">Genera PDF</button>
                                    <button type="button" id="printBtn" class="btn btn--outline">Stampa</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>

            <!-- Management Page -->
            <div id="managementPage" class="page-content hidden">
                <!-- Patients Management -->
                <section class="patients-management">
                    <div class="card">
                        <div class="card__header">
                            <h3>Gestione Pazienti</h3>
                            <button id="addNewPatientBtn" class="btn btn--primary">+ Nuovo Paziente</button>
                        </div>
                        <div class="card__body">
                            <div id="patientsTable"></div>
                        </div>
                    </div>
                </section>

                <!-- Invoices Management -->
                <section class="invoices-management">
                    <div class="card">
                        <div class="card__header">
                            <h3>Gestione Fatture</h3>
                        </div>
                        <div class="card__body">
                            <div id="invoicesTable"></div>
                        </div>
                    </div>
                </section>

                <!-- Statistics -->
                <section class="statistics">
                    <div class="card">
                        <div class="card__header">
                            <h3>Statistiche</h3>
                        </div>
                        <div class="card__body">
                            <div class="stats-grid">
                                <div class="stat-item">
                                    <span class="stat-label">Totale Pazienti:</span>
                                    <span id="totalPatients" class="stat-value">0</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Totale Fatture:</span>
                                    <span id="totalInvoices" class="stat-value">0</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Fatturato Anno:</span>
                                    <span id="yearlyRevenue" class="stat-value">€ 0.00</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">File Corrente:</span>
                                    <span id="currentFileName" class="stat-value">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- Patient Modal -->
    <div id="patientModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="patientModalTitle">Nuovo Paziente</h3>
                <button id="closePatientModal" class="btn btn--outline btn--sm">✕</button>
            </div>
            <div class="modal-body">
                <form id="patientForm">
                    <div class="form-group">
                        <label class="form-label" for="patientTitle">Titolo:</label>
                        <select id="patientTitle" class="form-control" required>
                            <option value="Signore">Signore</option>
                            <option value="Signora">Signora</option>
                            <option value="Signorina">Signorina</option>
                            <option value="Dott.">Dott.</option>
                            <option value="Dott.ssa">Dott.ssa</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="patientName">Nome Completo:</label>
                        <input type="text" id="patientName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="patientAddress">Indirizzo:</label>
                        <input type="text" id="patientAddress" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="patientTaxCode">Codice Fiscale:</label>
                        <input type="text" id="patientTaxCode" class="form-control" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn--primary">Salva Paziente</button>
                        <button type="button" id="cancelPatientBtn" class="btn btn--outline">Annulla</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div id="settingsModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Impostazioni</h3>
                <button id="closeSettingsModal" class="btn btn--outline btn--sm">✕</button>
            </div>
            <div class="modal-body">
                <div class="settings-section">
                    <h4>Cartella di Salvataggio</h4>
                    <div class="current-folder">
                        <p><strong>Cartella attuale:</strong></p>
                        <div id="currentFolderPath" class="folder-display">-</div>
                    </div>
                    <button id="changeFolderBtn" class="btn btn--secondary">
                        ?️ Cambia Cartella
                    </button>
                </div>
                <div class="settings-section">
                    <h4>File di Backup</h4>
                    <p>File salvati automaticamente: <strong id="backupCount">-</strong></p>
                    <button id="cleanupOldFiles" class="btn btn--outline">
                        ?️ Pulisci File Vecchi
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div id="confirmModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="confirmTitle">Conferma</h3>
            </div>
            <div class="modal-body">
                <p id="confirmMessage"></p>
            </div>
            <div class="form-actions">
                <button id="confirmYes" class="btn btn--primary">Sì</button>
                <button id="confirmNo" class="btn btn--outline">No</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

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

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* Application Specific Styles */

/* Toast Notifications */
#toast-container {
  position: fixed;
  top: var(--space-20);
  right: var(--space-20);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 400px;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-16);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.toast--success::before {
  background: var(--color-success);
}

.toast--error::before {
  background: var(--color-error);
}

.toast--warning::before {
  background: var(--color-warning);
}

.toast--info::before {
  background: var(--color-info);
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.toast-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.toast-text {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.toast-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  padding: 0;
  line-height: 1;
}

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-standard);
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20) var(--space-20) var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.modal-body {
  padding: var(--space-20);
}

/* Setup Steps */
.setup-steps {
  display: flex;
  gap: var(--space-8);
}

.step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  transition: all var(--duration-fast) var(--ease-standard);
}

.step-indicator.active {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.step-indicator.completed {
  background: var(--color-success);
  color: var(--color-btn-primary-text);
}

.setup-step {
  min-height: 400px;
}

.setup-step.hidden {
  display: none;
}

.setup-step h4 {
  margin: 0 0 var(--space-20) 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

/* Folder Selection */
.folder-selection-info {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--color-bg-1);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-24);
}

.info-icon {
  font-size: var(--font-size-4xl);
  line-height: 1;
}

.info-content p {
  margin: 0 0 var(--space-8) 0;
  font-size: var(--font-size-sm);
}

.info-content code {
  background: var(--color-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

.folder-selection {
  margin-bottom: var(--space-24);
}

.folder-status {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-16);
}

.folder-icon {
  font-size: var(--font-size-lg);
}

.folder-path {
  flex: 1;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.folder-path.selected {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.folder-fallback {
  padding: var(--space-16);
  background: var(--color-bg-4);
  border-radius: var(--radius-base);
  border: 1px solid rgba(var(--color-warning-rgb), 0.3);
  margin-top: var(--space-16);
}

.warning-text {
  color: var(--color-warning);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-8) 0;
}

/* Header */
.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.user-badge, .version-badge {
  background: var(--color-bg-1);
  color: var(--color-text);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.save-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  transition: all var(--duration-fast) var(--ease-standard);
}

.save-status.saving {
  background: var(--color-bg-2);
  color: var(--color-warning);
}

.save-status.saved {
  background: var(--color-bg-3);
  color: var(--color-success);
}

.save-status.error {
  background: var(--color-bg-4);
  color: var(--color-error);
}

.save-indicator {
  font-size: var(--font-size-base);
}

.save-text {
  font-weight: var(--font-weight-medium);
}

/* Storage Info Banner */
.storage-info {
  background: var(--color-bg-1);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0;
}

.storage-content {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--font-size-sm);
}

.storage-icon {
  font-size: var(--font-size-lg);
}

.storage-text {
  flex: 1;
  color: var(--color-text-secondary);
}

/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-background), 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-content {
  text-align: center;
  padding: var(--space-32);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-24) auto;
}

.loading-content h3 {
  margin: 0 0 var(--space-8) 0;
  color: var(--color-text);
}

.loading-content p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Navigation */
.nav-tabs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.nav-tab {
  background: none;
  border: none;
  padding: var(--space-16) var(--space-20);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-standard);
}

.nav-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-2);
}

.nav-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Main Content */
.main-content {
  padding: var(--space-24) 0;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Import/Export Section */
.import-export-section {
  margin-bottom: var(--space-24);
}

.import-export-controls {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-24);
  align-items: center;
}

.export-section {
  text-align: center;
}

.export-info {
  display: block;
  margin-top: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.import-section {
  position: relative;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-standard);
  cursor: pointer;
}

.drop-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-1);
}

.drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-bg-3);
  transform: scale(1.02);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.drop-icon {
  font-size: var(--font-size-4xl);
  opacity: 0.7;
}

.drop-zone p {
  margin: 0;
  color: var(--color-text-secondary);
}

.drop-zone small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

/* Form Rows */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: end;
}

.form-row .form-group.flex-1 {
  grid-column: span 2;
}

/* Services */
.service-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-16);
  margin-bottom: var(--space-16);
  background: var(--color-bg-1);
}

.service-item .form-row {
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: end;
}

/* Patient Info */
.patient-controls {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
}

.patient-controls select {
  flex: 1;
}

.patient-info {
  background: var(--color-bg-2);
  border-radius: var(--radius-base);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
}

.patient-info h4 {
  margin: 0 0 var(--space-12) 0;
  color: var(--color-text);
}

/* Invoice Total */
.invoice-total {
  text-align: right;
  padding: var(--space-16);
  background: var(--color-bg-3);
  border-radius: var(--radius-base);
  margin: var(--space-20) 0;
  font-size: var(--font-size-lg);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--space-12);
  justify-content: flex-end;
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border);
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-16);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  background: var(--color-bg-1);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.data-table tr:hover {
  background: var(--color-bg-2);
}

.table-actions {
  display: flex;
  gap: var(--space-8);
}

.table-actions .btn {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
}

/* Statistics */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-20);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  background: var(--color-bg-1);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  word-break: break-all;
}

/* Settings */
.settings-section {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-section h4 {
  margin: 0 0 var(--space-16) 0;
  color: var(--color-text);
}

.current-folder p {
  margin: 0 0 var(--space-8) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.folder-display {
  background: var(--color-bg-1);
  padding: var(--space-12);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--space-16);
  word-break: break-all;
}

/* Responsive Design */
@media (max-width: 768px) {
  .import-export-controls {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .service-item .form-row {
    grid-template-columns: 1fr;
  }

  .patient-controls {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  .header-content {
    flex-direction: column;
    gap: var(--space-12);
    text-align: center;
  }

  .header-info {
    justify-content: center;
    flex-wrap: wrap;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  #toast-container {
    right: var(--space-8);
    left: var(--space-8);
    max-width: none;
  }

  .modal-content {
    width: 95%;
    margin: var(--space-16);
  }

  .setup-steps {
    justify-content: center;
  }

  .folder-selection-info {
    flex-direction: column;
    text-align: center;
  }

  .storage-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-8);
  }
}

/* Print Styles */
@media print {
  .header,
  .nav-tabs,
  .import-export-section,
  .form-actions,
  .btn,
  #toast-container,
  .storage-info {
    display: none !important;
  }

  .main-content {
    padding: 0;
  }

  .card {
    box-shadow: none;
    border: none;
  }

  .page-content {
    gap: var(--space-16);
  }

  body {
    background: white !important;
  }
}

/* Loading States */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-out {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge--paid {
  background: rgba(var(--color-success-rgb), 0.15);
  color: var(--color-success);
  border: 1px solid rgba(var(--color-success-rgb), 0.25);
}

.status-badge--pending {
  background: rgba(var(--color-warning-rgb), 0.15);
  color: var(--color-warning);
  border: 1px solid rgba(var(--color-warning-rgb), 0.25);
}

.status-badge--overdue {
  background: rgba(var(--color-error-rgb), 0.15);
  color: var(--color-error);
  border: 1px solid rgba(var(--color-error-rgb), 0.25);
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: var(--space-32);
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-16);
  opacity: 0.5;
}

.empty-state h3 {
  margin-bottom: var(--space-8);
  color: var(--color-text-secondary);
}

.empty-state p {
  margin-bottom: var(--space-20);
}

/* Accessibility Improvements */
.btn:focus-visible,
.form-control:focus-visible,
.nav-tab:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .drop-zone {
    border-width: 3px;
  }
  
  .card {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Folder Management System
class FolderManager {
    constructor() {
        this.folderHandle = null;
        this.isSupported = 'showDirectoryPicker' in window;
        this.saveQueue = [];
        this.isSaving = false;
    }

    async selectFolder() {
        if (!this.isSupported) {
            throw new Error('File System Access API not supported');
        }

        try {
            this.folderHandle = await window.showDirectoryPicker({
                mode: 'readwrite'
            });
            
            // Store folder handle for persistence
            await this.storeFolderHandle();
            return this.folderHandle;
        } catch (error) {
            if (error.name === 'AbortError') {
                throw new Error('Folder selection cancelled');
            }
            throw error;
        }
    }

    async storeFolderHandle() {
        if (this.folderHandle) {
            const handleData = await this.folderHandle.queryPermission({ mode: 'readwrite' });
            if (handleData === 'granted') {
                // Store in IndexedDB for persistence
                const serialized = await this.serializeFolderHandle();
                localStorage.setItem('folderHandle', serialized);
            }
        }
    }

    async serializeFolderHandle() {
        if (!this.folderHandle) return null;
        try {
            // Create a simple reference that can be stored
            return JSON.stringify({
                name: this.folderHandle.name,
                kind: this.folderHandle.kind,
                timestamp: Date.now()
            });
        } catch (error) {
            console.warn('Could not serialize folder handle:', error);
            return null;
        }
    }

    async restoreFolderHandle() {
        const stored = localStorage.getItem('folderHandle');
        if (!stored || !this.isSupported) return false;

        try {
            // For security reasons, we need to re-request the folder
            // This is a limitation of the File System Access API
            return false;
        } catch (error) {
            localStorage.removeItem('folderHandle');
            return false;
        }
    }

    generateFileName(username) {
        const now = new Date();
        const timestamp = now.toISOString()
            .replace(/[:.]/g, '-')
            .replace('T', '-')
            .slice(0, 19);
        return `Fatture_${username}_${timestamp}.json`;
    }

    async saveToFolder(userData, username) {
        if (!this.folderHandle) {
            throw new Error('No folder selected');
        }

        const fileName = this.generateFileName(username);
        const dataWithMetadata = {
            metadata: {
                filename: fileName,
                createdDate: new Date().toISOString(),
                username: username,
                appVersion: "1.0",
                dataVersion: "1.0"
            },
            userData: {
                ...userData,
                lastModified: new Date().toISOString()
            }
        };

        try {
            const fileHandle = await this.folderHandle.getFileHandle(fileName, {
                create: true
            });
            
            const writable = await fileHandle.createWritable();
            await writable.write(JSON.stringify(dataWithMetadata, null, 2));
            await writable.close();

            // Clean up old files (keep last 10)
            await this.cleanupOldFiles(username);

            return fileName;
        } catch (error) {
            if (error.name === 'NotAllowedError') {
                throw new Error('Permission denied to write to folder');
            }
            throw error;
        }
    }

    async loadLatestFromFolder(username) {
        if (!this.folderHandle) {
            return null;
        }

        try {
            const files = [];
            
            for await (const [name, handle] of this.folderHandle.entries()) {
                if (handle.kind === 'file' && 
                    name.startsWith(`Fatture_${username}_`) && 
                    name.endsWith('.json')) {
                    
                    // Extract timestamp from filename
                    const timestampMatch = name.match(/Fatture_.*_(\d{4}-\d{2}-\d{2}-\d{2}-\d{2}-\d{2})\.json$/);
                    if (timestampMatch) {
                        files.push({
                            name,
                            handle,
                            timestamp: timestampMatch[1]
                        });
                    }
                }
            }

            if (files.length === 0) {
                return null;
            }

            // Sort by timestamp (newest first)
            files.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
            
            const latestFile = files[0];
            const file = await latestFile.handle.getFile();
            const content = await file.text();
            
            const data = JSON.parse(content);
            return {
                ...data,
                loadedFrom: latestFile.name,
                loadedAt: new Date().toISOString()
            };

        } catch (error) {
            console.error('Error loading from folder:', error);
            return null;
        }
    }

    async cleanupOldFiles(username, keepCount = 10) {
        if (!this.folderHandle) return;

        try {
            const files = [];
            
            for await (const [name, handle] of this.folderHandle.entries()) {
                if (handle.kind === 'file' && 
                    name.startsWith(`Fatture_${username}_`) && 
                    name.endsWith('.json')) {
                    
                    const timestampMatch = name.match(/Fatture_.*_(\d{4}-\d{2}-\d{2}-\d{2}-\d{2}-\d{2})\.json$/);
                    if (timestampMatch) {
                        files.push({
                            name,
                            handle,
                            timestamp: timestampMatch[1]
                        });
                    }
                }
            }

            // Sort by timestamp (newest first)
            files.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
            
            // Remove old files beyond keepCount
            const filesToDelete = files.slice(keepCount);
            for (const file of filesToDelete) {
                try {
                    await this.folderHandle.removeEntry(file.name);
                } catch (error) {
                    console.warn(`Could not delete old file ${file.name}:`, error);
                }
            }

            return files.length - filesToDelete.length;
        } catch (error) {
            console.error('Error during cleanup:', error);
            return 0;
        }
    }

    async getFolderInfo() {
        if (!this.folderHandle) return null;
        
        try {
            return {
                name: this.folderHandle.name,
                path: this.folderHandle.name // Limited info available
            };
        } catch (error) {
            return null;
        }
    }

    async countBackupFiles(username) {
        if (!this.folderHandle) return 0;

        try {
            let count = 0;
            for await (const [name] of this.folderHandle.entries()) {
                if (name.startsWith(`Fatture_${username}_`) && name.endsWith('.json')) {
                    count++;
                }
            }
            return count;
        } catch (error) {
            return 0;
        }
    }
}

// Application State
let currentUser = null;
let currentUserData = {
    user: '',
    doctorData: {},
    patients: [],
    invoices: [],
    counters: { invoice: 1 },
    metadata: {
        exportDate: null,
        version: "1.0",
        lastModified: null,
        totalPatients: 0,
        totalInvoices: 0
    }
};

let folderManager = new FolderManager();
let currentFileName = null;
let saveTimeout = null;

// Default data
const defaultDoctorInfo = {
    name: "Dr. Daniele Miccichè",
    address: "Corso Umbria, 10144, Torino",
    piva: "13155780011",
    cf: "MCCDNL98E26L219W",
    professional_title: "Medico-chirurgo",
    medical_order: "O.M. Torino 27505"
};

const legalText = {
    iva_exemption: "IVA: esente ai sensi dell'art. 10 comma 18 DPR 633/1972",
    stamp_duty: "Marca da bollo € 2,00 applicata se importo > € 77,47",
    fiscal_regime: "Regime fiscale: Operazione effettuata ai sensi dell'articolo 1, commi 54-89, Legge 190/2014 (regime forfettario) - esente IVA"
};

// Application Initialization
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    setupEventListeners();
    setDefaultDate();
});

async function initializeApp() {
    showLoadingScreen('Inizializzazione applicazione...');
    
    currentUser = localStorage.getItem('currentUser');
    
    if (!currentUser) {
        hideLoadingScreen();
        showSetupModal();
    } else {
        try {
            await loadUserData();
            updateUI();
            updateNavigation('generator');
            hideSetupModal();
            hideLoadingScreen();
        } catch (error) {
            console.error('Initialization error:', error);
            hideLoadingScreen();
            showToast('❌ Errore durante il caricamento', 'error');
        }
    }
}

// Loading Screen Management
function showLoadingScreen(text = 'Caricamento...') {
    const loadingScreen = document.getElementById('loadingScreen');
    const loadingText = document.getElementById('loadingText');
    if (loadingScreen && loadingText) {
        loadingText.textContent = text;
        loadingScreen.classList.remove('hidden');
    }
}

function hideLoadingScreen() {
    const loadingScreen = document.getElementById('loadingScreen');
    if (loadingScreen) {
        loadingScreen.classList.add('hidden');
    }
}

// Setup Modal Management
function showSetupModal() {
    const modal = document.getElementById('setupModal');
    if (modal) {
        modal.classList.add('show');
        
        // Reset to step 1
        showSetupStep(1);
        
        // Fill with default data
        fillSetupForm();
        
        // Check folder support and enable completion if not supported
        if (!folderManager.isSupported) {
            const folderNotSupported = document.getElementById('folderNotSupported');
            if (folderNotSupported) {
                folderNotSupported.classList.remove('hidden');
            }
            // Enable completion button for unsupported browsers
            const completeSetup = document.getElementById('completeSetup');
            if (completeSetup) {
                completeSetup.disabled = false;
            }
        }
    }
}

function fillSetupForm() {
    const fields = [
        { id: 'doctorName', value: defaultDoctorInfo.name },
        { id: 'doctorAddress', value: defaultDoctorInfo.address },
        { id: 'doctorPiva', value: defaultDoctorInfo.piva },
        { id: 'doctorCf', value: defaultDoctorInfo.cf },
        { id: 'doctorTitle', value: defaultDoctorInfo.professional_title },
        { id: 'doctorOrder', value: defaultDoctorInfo.medical_order }
    ];
    
    fields.forEach(field => {
        const element = document.getElementById(field.id);
        if (element) {
            element.value = field.value;
        }
    });
}

function hideSetupModal() {
    const modal = document.getElementById('setupModal');
    if (modal) {
        modal.classList.remove('show');
    }
}

function showSetupStep(stepNumber) {
    // Hide all steps
    for (let i = 1; i <= 3; i++) {
        const step = document.getElementById(`setupStep${i}`);
        if (step) {
            step.classList.add('hidden');
        }
    }
    
    // Show current step
    const currentStep = document.getElementById(`setupStep${stepNumber}`);
    if (currentStep) {
        currentStep.classList.remove('hidden');
    }
    
    // Update step indicators
    for (let i = 1; i <= 3; i++) {
        const indicator = document.querySelector(`.step-${i}`);
        if (indicator) {
            indicator.classList.remove('active', 'completed');
            if (i < stepNumber) {
                indicator.classList.add('completed');
            } else if (i === stepNumber) {
                indicator.classList.add('active');
            }
        }
    }

    // Enable completion button when reaching step 3
    if (stepNumber === 3) {
        const completeSetup = document.getElementById('completeSetup');
        if (completeSetup) {
            completeSetup.disabled = false;
        }
    }
}

// User Data Management
async function loadUserData() {
    showLoadingScreen('Tentativo di caricamento dal folder...');
    
    try {
        // Try to load from folder first
        if (folderManager.folderHandle) {
            const folderData = await folderManager.loadLatestFromFolder(currentUser);
            if (folderData && folderData.userData) {
                currentUserData = folderData.userData;
                currentFileName = folderData.loadedFrom;
                
                // Ensure metadata exists
                if (!currentUserData.metadata) {
                    currentUserData.metadata = {
                        exportDate: new Date().toISOString(),
                        version: "1.0",
                        lastModified: new Date().toISOString(),
                        totalPatients: currentUserData.patients?.length || 0,
                        totalInvoices: currentUserData.invoices?.length || 0
                    };
                }
                
                updateStorageInfo();
                showToast(`✅ Dati caricati da: ${folderData.loadedFrom}`, 'success');
                return;
            }
        }
    } catch (error) {
        console.error('Error loading from folder:', error);
        showToast('⚠️ Impossibile accedere alla cartella, uso localStorage', 'warning');
    }
    
    // Fallback to localStorage
    showLoadingScreen('Caricamento da memoria locale...');
    const userData = localStorage.getItem(`userData_${currentUser}`);
    if (userData) {
        currentUserData = JSON.parse(userData);
        
        // Ensure metadata exists
        if (!currentUserData.metadata) {
            currentUserData.metadata = {
                exportDate: new Date().toISOString(),
                version: "1.0",
                lastModified: new Date().toISOString(),
                totalPatients: currentUserData.patients?.length || 0,
                totalInvoices: currentUserData.invoices?.length || 0
            };
        }
    } else {
        // Create new user data structure
        currentUserData = {
            user: currentUser,
            doctorData: {},
            patients: [],
            invoices: [],
            counters: { invoice: 1 },
            metadata: {
                exportDate: new Date().toISOString(),
                version: "1.0",
                lastModified: new Date().toISOString(),
                totalPatients: 0,
                totalInvoices: 0
            }
        };
    }
}

async function saveUserData() {
    // Update metadata
    currentUserData.metadata.lastModified = new Date().toISOString();
    currentUserData.metadata.totalPatients = currentUserData.patients.length;
    currentUserData.metadata.totalInvoices = currentUserData.invoices.length;
    
    // Show saving status
    updateSaveStatus('saving');
    
    // Debounce saves to prevent excessive file operations
    if (saveTimeout) {
        clearTimeout(saveTimeout);
    }
    
    saveTimeout = setTimeout(async () => {
        try {
            // Try to save to folder first
            if (folderManager.folderHandle) {
                const fileName = await folderManager.saveToFolder(currentUserData, currentUser);
                currentFileName = fileName;
                updateSaveStatus('saved');
                updateStorageInfo();
            } else {
                throw new Error('No folder available');
            }
        } catch (error) {
            console.error('Error saving to folder:', error);
            
            // Fallback to localStorage
            localStorage.setItem(`userData_${currentUser}`, JSON.stringify(currentUserData));
            updateSaveStatus('saved');
            
            if (error.message.includes('Permission denied') || error.message.includes('NotAllowedError')) {
                showToast('⚠️ Permesso negato per la cartella, salvato in locale', 'warning');
            }
        }
    }, 1000);
}

function updateSaveStatus(status) {
    const saveStatus = document.getElementById('saveStatus');
    const saveIndicator = document.getElementById('saveIndicator');
    const saveText = document.getElementById('saveText');
    
    if (!saveStatus || !saveIndicator || !saveText) return;
    
    saveStatus.className = `save-status ${status}`;
    
    switch (status) {
        case 'saving':
            saveIndicator.textContent = '?';
            saveText.textContent = 'Salvataggio...';
            break;
        case 'saved':
            saveIndicator.textContent = '✅';
            saveText.textContent = 'Salvato';
            break;
        case 'error':
            saveIndicator.textContent = '❌';
            saveText.textContent = 'Errore';
            break;
    }
}

function updateStorageInfo() {
    const storageInfo = document.getElementById('storageInfo');
    const storageText = document.getElementById('storageText');
    
    if (!storageInfo || !storageText) return;
    
    if (folderManager.folderHandle) {
        const folderInfo = folderManager.folderHandle.name;
        storageText.textContent = `Salvato in: ${folderInfo}`;
        storageInfo.classList.remove('hidden');
    } else {
        storageInfo.classList.add('hidden');
    }
}

// Event Listeners Setup
function setupEventListeners() {
    // Setup steps - ensure elements exist before adding listeners
    const nextStep1 = document.getElementById('nextStep1');
    const nextStep2 = document.getElementById('nextStep2');
    const prevStep2 = document.getElementById('prevStep2');
    const prevStep3 = document.getElementById('prevStep3');
    const completeSetup = document.getElementById('completeSetup');
    const selectFolderBtn = document.getElementById('selectFolderBtn');
    
    if (nextStep1) nextStep1.addEventListener('click', handleStep1Next);
    if (nextStep2) nextStep2.addEventListener('click', handleStep2Next);
    if (prevStep2) prevStep2.addEventListener('click', () => showSetupStep(1));
    if (prevStep3) prevStep3.addEventListener('click', () => showSetupStep(2));
    if (completeSetup) completeSetup.addEventListener('click', handleSetupComplete);
    if (selectFolderBtn) selectFolderBtn.addEventListener('click', handleFolderSelect);
    
    // Navigation
    const generatorTab = document.getElementById('generatorTab');
    const managementTab = document.getElementById('managementTab');
    if (generatorTab) generatorTab.addEventListener('click', () => updateNavigation('generator'));
    if (managementTab) managementTab.addEventListener('click', () => updateNavigation('management'));
    
    // Header controls
    const settingsBtn = document.getElementById('settingsBtn');
    const logoutBtn = document.getElementById('logoutBtn');
    const changeFolder = document.getElementById('changeFolder');
    if (settingsBtn) settingsBtn.addEventListener('click', showSettingsModal);
    if (logoutBtn) logoutBtn.addEventListener('click', handleLogout);
    if (changeFolder) changeFolder.addEventListener('click', handleFolderSelect);
    
    // Patient management
    const patientSelect = document.getElementById('patientSelect');
    const addPatientBtn = document.getElementById('addPatientBtn');
    const addNewPatientBtn = document.getElementById('addNewPatientBtn');
    if (patientSelect) patientSelect.addEventListener('change', handlePatientSelect);
    if (addPatientBtn) addPatientBtn.addEventListener('click', () => showPatientModal());
    if (addNewPatientBtn) addNewPatientBtn.addEventListener('click', () => showPatientModal());
    
    const patientForm = document.getElementById('patientForm');
    if (patientForm) {
        patientForm.addEventListener('submit', handlePatientSubmit);
    }
    
    const closePatientModal = document.getElementById('closePatientModal');
    const cancelPatientBtn = document.getElementById('cancelPatientBtn');
    if (closePatientModal) closePatientModal.addEventListener('click', hidePatientModal);
    if (cancelPatientBtn) cancelPatientBtn.addEventListener('click', hidePatientModal);
    
    // Invoice management
    const invoiceForm = document.getElementById('invoiceForm');
    if (invoiceForm) {
        invoiceForm.addEventListener('submit', handleInvoiceSubmit);
    }
    
    const addServiceBtn = document.getElementById('addServiceBtn');
    const printBtn = document.getElementById('printBtn');
    if (addServiceBtn) addServiceBtn.addEventListener('click', addServiceRow);
    if (printBtn) printBtn.addEventListener('click', handlePrint);
    
    // Import/Export
    const exportBtn = document.getElementById('exportBtn');
    const importBtn = document.getElementById('importBtn');
    const fileInput = document.getElementById('fileInput');
    if (exportBtn) exportBtn.addEventListener('click', handleExport);
    if (importBtn) importBtn.addEventListener('click', () => {
        if (fileInput) fileInput.click();
    });
    if (fileInput) fileInput.addEventListener('change', handleFileSelect);
    
    // Drop zone
    setupDropZone();
    
    // Service calculation
    const servicesContainer = document.getElementById('servicesContainer');
    if (servicesContainer) {
        servicesContainer.addEventListener('input', calculateTotal);
        servicesContainer.addEventListener('click', handleServiceActions);
    }
    
    // Settings modal
    const closeSettingsModal = document.getElementById('closeSettingsModal');
    const changeFolderBtn = document.getElementById('changeFolderBtn');
    const cleanupOldFiles = document.getElementById('cleanupOldFiles');
    if (closeSettingsModal) closeSettingsModal.addEventListener('click', hideSettingsModal);
    if (changeFolderBtn) changeFolderBtn.addEventListener('click', handleFolderSelect);
    if (cleanupOldFiles) cleanupOldFiles.addEventListener('click', handleCleanupFiles);
    
    // Confirmation modal
    const confirmYes = document.getElementById('confirmYes');
    const confirmNo = document.getElementById('confirmNo');
    if (confirmYes) confirmYes.addEventListener('click', handleConfirmYes);
    if (confirmNo) confirmNo.addEventListener('click', hideConfirmModal);
    
    // Modal click outside to close - only for non-setup modals
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('modal')) {
            if (e.target.id === 'patientModal') {
                hidePatientModal();
            } else if (e.target.id === 'confirmModal') {
                hideConfirmModal();
            } else if (e.target.id === 'settingsModal') {
                hideSettingsModal();
            }
            // Don't allow closing setup modal by clicking outside
        }
    });

    // Add Escape key handling for modals - but not for setup modal
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            // Close any open modal except setup
            const openModal = document.querySelector('.modal.show');
            if (openModal && openModal.id !== 'setupModal') {
                if (openModal.id === 'patientModal') {
                    hidePatientModal();
                } else if (openModal.id === 'settingsModal') {
                    hideSettingsModal();
                } else if (openModal.id === 'confirmModal') {
                    hideConfirmModal();
                }
            }
        }
    });
}

// Setup Step Handlers
function handleStep1Next(e) {
    e.preventDefault();
    const username = document.getElementById('username');
    
    if (!username || !username.value.trim()) {
        showToast('⚠️ Inserisci un nome utente', 'warning');
        return;
    }
    
    showSetupStep(2);
}

function handleStep2Next(e) {
    e.preventDefault();
    const doctorName = document.getElementById('doctorName');
    const doctorAddress = document.getElementById('doctorAddress');
    const doctorPiva = document.getElementById('doctorPiva');
    const doctorCf = document.getElementById('doctorCf');
    
    if (!doctorName || !doctorName.value.trim() ||
        !doctorAddress || !doctorAddress.value.trim() ||
        !doctorPiva || !doctorPiva.value.trim() ||
        !doctorCf || !doctorCf.value.trim()) {
        showToast('⚠️ Compila tutti i campi richiesti', 'warning');
        return;
    }
    
    showSetupStep(3);
}

async function handleFolderSelect(e) {
    e.preventDefault();
    
    if (!folderManager.isSupported) {
        showToast('⚠️ Browser non supportato, uso localStorage come storage', 'warning');
        const folderPath = document.getElementById('folderPath');
        if (folderPath) {
            folderPath.textContent = 'localStorage (fallback)';
            folderPath.classList.add('selected');
        }
        return;
    }
    
    try {
        await folderManager.selectFolder();
        const folderInfo = await folderManager.getFolderInfo();
        
        if (folderInfo) {
            const folderPath = document.getElementById('folderPath');
            if (folderPath) {
                folderPath.textContent = folderInfo.name;
                folderPath.classList.add('selected');
            }
            
            showToast('✅ Cartella selezionata con successo!', 'success');
        }
    } catch (error) {
        console.error('Folder selection error:', error);
        
        if (error.message.includes('cancelled')) {
            showToast('ℹ️ Selezione cartella annullata - usando localStorage', 'info');
        } else {
            showToast('❌ Errore nella selezione - usando localStorage come fallback', 'warning');
        }
        
        // Set fallback message and allow continuation
        const folderPath = document.getElementById('folderPath');
        if (folderPath) {
            folderPath.textContent = 'localStorage (fallback)';
            folderPath.classList.add('selected');
        }
    }
}

async function handleSetupComplete(e) {
    e.preventDefault();
    
    const usernameField = document.getElementById('username');
    if (!usernameField) return;
    
    const username = usernameField.value.trim();
    const doctorData = {
        name: document.getElementById('doctorName')?.value.trim() || '',
        address: document.getElementById('doctorAddress')?.value.trim() || '',
        piva: document.getElementById('doctorPiva')?.value.trim() || '',
        cf: document.getElementById('doctorCf')?.value.trim() || '',
        professional_title: document.getElementById('doctorTitle')?.value.trim() || '',
        medical_order: document.getElementById('doctorOrder')?.value.trim() || ''
    };
    
    if (!username) {
        showToast('⚠️ Nome utente richiesto', 'warning');
        showSetupStep(1);
        return;
    }
    
    currentUser = username;
    currentUserData.user = username;
    currentUserData.doctorData = doctorData;
    currentUserData.metadata.exportDate = new Date().toISOString();
    
    localStorage.setItem('currentUser', currentUser);
    
    try {
        await saveUserData();
        hideSetupModal();
        updateUI();
        updateNavigation('generator');
        updateStorageInfo();
        
        if (folderManager.folderHandle) {
            showToast('✅ Configurazione completata! Dati salvati nella cartella selezionata.', 'success');
        } else {
            showToast('✅ Configurazione completata! Dati salvati localmente nel browser.', 'success');
        }
    } catch (error) {
        console.error('Setup completion error:', error);
        showToast('❌ Errore durante il salvataggio iniziale', 'error');
    }
}

// Settings Modal
function showSettingsModal() {
    const modal = document.getElementById('settingsModal');
    if (!modal) return;
    
    // Update current folder info
    const currentFolderPath = document.getElementById('currentFolderPath');
    if (currentFolderPath) {
        if (folderManager.folderHandle) {
            currentFolderPath.textContent = folderManager.folderHandle.name;
        } else {
            currentFolderPath.textContent = 'localStorage (memoria del browser)';
        }
    }
    
    // Update backup count
    updateBackupCount();
    
    modal.classList.add('show');
}

function hideSettingsModal() {
    const modal = document.getElementById('settingsModal');
    if (modal) {
        modal.classList.remove('show');
    }
}

async function updateBackupCount() {
    const backupCount = document.getElementById('backupCount');
    if (!backupCount) return;
    
    if (folderManager.folderHandle && currentUser) {
        const count = await folderManager.countBackupFiles(currentUser);
        backupCount.textContent = count;
    } else {
        backupCount.textContent = '1 (localStorage)';
    }
}

async function handleCleanupFiles() {
    if (!folderManager.folderHandle) {
        showToast('⚠️ Nessuna cartella configurata - usando localStorage', 'warning');
        return;
    }
    
    showConfirmModal(
        'Conferma Pulizia',
        'Eliminare i file di backup più vecchi? Verranno mantenuti gli ultimi 10 file.',
        async () => {
            try {
                const remainingCount = await folderManager.cleanupOldFiles(currentUser);
                showToast(`✅ Pulizia completata. File rimanenti: ${remainingCount}`, 'success');
                updateBackupCount();
            } catch (error) {
                console.error('Cleanup error:', error);
                showToast('❌ Errore durante la pulizia', 'error');
            }
        }
    );
}

// Navigation Management
function updateNavigation(page) {
    // Update tabs
    document.querySelectorAll('.nav-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    const activeTab = document.getElementById(`${page}Tab`);
    if (activeTab) {
        activeTab.classList.add('active');
    }
    
    // Update pages
    document.querySelectorAll('.page-content').forEach(pageEl => {
        pageEl.classList.add('hidden');
    });
    const activePage = document.getElementById(`${page}Page`);
    if (activePage) {
        activePage.classList.remove('hidden');
    }
    
    if (page === 'management') {
        updateManagementPage();
    } else if (page === 'generator') {
        updatePatientSelect();
        updateInvoiceNumber();
    }
}

// UI Updates
function updateUI() {
    if (!currentUser) return;
    
    const currentUserElement = document.getElementById('currentUser');
    const versionInfoElement = document.getElementById('versionInfo');
    
    if (currentUserElement) {
        currentUserElement.textContent = `? ${currentUser}`;
    }
    if (versionInfoElement) {
        versionInfoElement.textContent = `v${currentUserData.metadata.version}`;
    }
    
    updatePatientSelect();
    updateInvoiceNumber();
    updateStorageInfo();
}

// Patient Management
function updatePatientSelect() {
    const select = document.getElementById('patientSelect');
    if (!select) return;
    
    select.innerHTML = '<option value="">Seleziona un paziente...</option>';
    
    currentUserData.patients.forEach(patient => {
        const option = document.createElement('option');
        option.value = patient.id;
        option.textContent = `${patient.title} ${patient.name}`;
        select.appendChild(option);
    });
}

function handlePatientSelect(e) {
    const patientId = parseInt(e.target.value);
    const patientInfo = document.getElementById('selectedPatientInfo');
    const patientDetails = document.getElementById('patientDetails');
    
    if (!patientInfo || !patientDetails) return;
    
    if (patientId) {
        const patient = currentUserData.patients.find(p => p.id === patientId);
        if (patient) {
            patientDetails.innerHTML = `
                <p><strong>Nome:</strong> ${patient.title} ${patient.name}</p>
                <p><strong>Indirizzo:</strong> ${patient.address}</p>
                <p><strong>Codice Fiscale:</strong> ${patient.tax_code}</p>
            `;
            patientInfo.classList.remove('hidden');
        }
    } else {
        patientInfo.classList.add('hidden');
    }
}

function showPatientModal(patient = null) {
    const modal = document.getElementById('patientModal');
    const title = document.getElementById('patientModalTitle');
    const form = document.getElementById('patientForm');
    
    if (!modal || !title || !form) return;
    
    if (patient) {
        title.textContent = 'Modifica Paziente';
        const fields = [
            { id: 'patientTitle', value: patient.title },
            { id: 'patientName', value: patient.name },
            { id: 'patientAddress', value: patient.address },
            { id: 'patientTaxCode', value: patient.tax_code }
        ];
        
        fields.forEach(field => {
            const element = document.getElementById(field.id);
            if (element) {
                element.value = field.value;
            }
        });
        
        form.dataset.patientId = patient.id;
    } else {
        title.textContent = 'Nuovo Paziente';
        form.reset();
        delete form.dataset.patientId;
    }
    
    modal.classList.add('show');
}

function hidePatientModal() {
    const modal = document.getElementById('patientModal');
    if (modal) {
        modal.classList.remove('show');
    }
}

async function handlePatientSubmit(e) {
    e.preventDefault();
    
    const patientData = {
        title: document.getElementById('patientTitle')?.value || '',
        name: document.getElementById('patientName')?.value.trim() || '',
        address: document.getElementById('patientAddress')?.value.trim() || '',
        tax_code: document.getElementById('patientTaxCode')?.value.trim().toUpperCase() || ''
    };
    
    // Validation
    if (!patientData.name || !patientData.address || !patientData.tax_code) {
        showToast('⚠️ Compila tutti i campi', 'warning');
        return;
    }
    
    const patientId = e.target.dataset.patientId;
    
    if (patientId) {
        // Update existing patient
        const patientIndex = currentUserData.patients.findIndex(p => p.id === parseInt(patientId));
        if (patientIndex !== -1) {
            currentUserData.patients[patientIndex] = { ...patientData, id: parseInt(patientId) };
            showToast('✅ Paziente aggiornato con successo!', 'success');
        }
    } else {
        // Add new patient
        const newId = Math.max(0, ...currentUserData.patients.map(p => p.id)) + 1;
        currentUserData.patients.push({ ...patientData, id: newId });
        showToast('✅ Paziente aggiunto con successo!', 'success');
    }
    
    await saveUserData();
    updatePatientSelect();
    hidePatientModal();
    updateManagementPage();
}

// Invoice Management
function updateInvoiceNumber() {
    const currentYear = new Date().getFullYear();
    const invoiceNumber = `${currentUserData.counters.invoice}/${currentYear}`;
    const invoiceNumberField = document.getElementById('invoiceNumber');
    if (invoiceNumberField) {
        invoiceNumberField.value = invoiceNumber;
    }
}

function setDefaultDate() {
    const today = new Date().toISOString().split('T')[0];
    const dateField = document.getElementById('invoiceDate');
    if (dateField) {
        dateField.value = today;
    }
}

function addServiceRow() {
    const container = document.getElementById('servicesContainer');
    if (!container) return;
    
    const serviceItem = document.createElement('div');
    serviceItem.className = 'service-item';
    serviceItem.innerHTML = `
        <div class="form-row">
            <div class="form-group flex-1">
                <label class="form-label">Descrizione:</label>
                <input type="text" class="form-control service-description" placeholder="Visita medica" required>
            </div>
            <div class="form-group">
                <label class="form-label">Quantità:</label>
                <input type="number" class="form-control service-quantity" min="1" value="1" required>
            </div>
            <div class="form-group">
                <label class="form-label">Prezzo (€):</label>
                <input type="number" class="form-control service-price" step="0.01" min="0" required>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn--outline btn--sm remove-service">Rimuovi</button>
            </div>
        </div>
    `;
    
    container.appendChild(serviceItem);
    updateRemoveButtons();
    calculateTotal();
}

function handleServiceActions(e) {
    if (e.target.classList.contains('remove-service')) {
        e.target.closest('.service-item').remove();
        updateRemoveButtons();
        calculateTotal();
    }
}

function updateRemoveButtons() {
    const removeButtons = document.querySelectorAll('.remove-service');
    removeButtons.forEach((btn, index) => {
        btn.disabled = removeButtons.length === 1;
    });
}

function calculateTotal() {
    let total = 0;
    const serviceItems = document.querySelectorAll('.service-item');
    
    serviceItems.forEach(item => {
        const quantity = parseFloat(item.querySelector('.service-quantity')?.value) || 0;
        const price = parseFloat(item.querySelector('.service-price')?.value) || 0;
        total += quantity * price;
    });
    
    const totalElement = document.getElementById('totalAmount');
    if (totalElement) {
        totalElement.textContent = total.toFixed(2);
    }
}

async function handleInvoiceSubmit(e) {
    e.preventDefault();
    
    const patientSelect = document.getElementById('patientSelect');
    if (!patientSelect) return;
    
    const patientId = parseInt(patientSelect.value);
    if (!patientId) {
        showToast('⚠️ Seleziona un paziente', 'warning');
        return;
    }
    
    const patient = currentUserData.patients.find(p => p.id === patientId);
    const invoiceData = collectInvoiceData(patient);
    
    if (!invoiceData || invoiceData.services.length === 0) {
        showToast('⚠️ Aggiungi almeno un servizio', 'warning');
        return;
    }
    
    // Save invoice
    const invoiceId = Math.max(0, ...currentUserData.invoices.map(i => i.id)) + 1;
    currentUserData.invoices.push({
        id: invoiceId,
        ...invoiceData,
        createdAt: new Date().toISOString()
    });
    
    currentUserData.counters.invoice++;
    await saveUserData();
    
    // Generate PDF
    generatePDF(invoiceData);
    
    showToast('✅ Fattura generata con successo!', 'success');
    
    // Reset form
    resetInvoiceForm();
}

function resetInvoiceForm() {
    const form = document.getElementById('invoiceForm');
    if (form) {
        form.reset();
    }
    
    const patientSelect = document.getElementById('patientSelect');
    if (patientSelect) {
        patientSelect.value = '';
    }
    
    const selectedPatientInfo = document.getElementById('selectedPatientInfo');
    if (selectedPatientInfo) {
        selectedPatientInfo.classList.add('hidden');
    }
    
    updateInvoiceNumber();
    setDefaultDate();
    
    // Reset services to single row
    const container = document.getElementById('servicesContainer');
    if (container) {
        container.innerHTML = `
            <div class="service-item">
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label class="form-label">Descrizione:</label>
                        <input type="text" class="form-control service-description" placeholder="Visita medica" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Quantità:</label>
                        <input type="number" class="form-control service-quantity" min="1" value="1" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Prezzo (€):</label>
                        <input type="number" class="form-control service-price" step="0.01" min="0" required>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn--outline btn--sm remove-service" disabled>Rimuovi</button>
                    </div>
                </div>
            </div>
        `;
    }
    calculateTotal();
}

function collectInvoiceData(patient) {
    const services = [];
    const serviceItems = document.querySelectorAll('.service-item');
    
    serviceItems.forEach(item => {
        const description = item.querySelector('.service-description')?.value.trim() || '';
        const quantity = parseInt(item.querySelector('.service-quantity')?.value) || 0;
        const price = parseFloat(item.querySelector('.service-price')?.value) || 0;
        
        if (description && quantity && price) {
            services.push({ description, quantity, price });
        }
    });
    
    if (services.length === 0) {
        return null;
    }
    
    const total = services.reduce((sum, service) => sum + (service.quantity * service.price), 0);
    
    const invoiceNumber = document.getElementById('invoiceNumber')?.value || '';
    const invoiceDate = document.getElementById('invoiceDate')?.value || '';
    
    return {
        number: invoiceNumber,
        date: invoiceDate,
        patient: patient,
        doctor: currentUserData.doctorData,
        services: services,
        total: total
    };
}

// PDF Generation
function generatePDF(invoiceData) {
    if (typeof window.jspdf === 'undefined') {
        showToast('❌ Libreria PDF non caricata', 'error');
        return;
    }
    
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    
    // Header
    doc.setFontSize(20);
    doc.text('FATTURA', 105, 30, { align: 'center' });
    
    // Invoice info
    doc.setFontSize(12);
    doc.text(`Numero: ${invoiceData.number}`, 20, 50);
    doc.text(`Data: ${new Date(invoiceData.date).toLocaleDateString('it-IT')}`, 20, 60);
    
    // Doctor info
    doc.text('PRESTATORE:', 20, 80);
    doc.setFontSize(10);
    doc.text(`${invoiceData.doctor.name}`, 20, 90);
    doc.text(`${invoiceData.doctor.professional_title}`, 20, 100);
    doc.text(`${invoiceData.doctor.address}`, 20, 110);
    doc.text(`P.IVA: ${invoiceData.doctor.piva}`, 20, 120);
    doc.text(`C.F: ${invoiceData.doctor.cf}`, 20, 130);
    doc.text(`${invoiceData.doctor.medical_order}`, 20, 140);
    
    // Patient info
    doc.setFontSize(12);
    doc.text('COMMITTENTE:', 120, 80);
    doc.setFontSize(10);
    doc.text(`${invoiceData.patient.title} ${invoiceData.patient.name}`, 120, 90);
    doc.text(`${invoiceData.patient.address}`, 120, 100);
    doc.text(`C.F: ${invoiceData.patient.tax_code}`, 120, 110);
    
    // Services table
    let yPos = 170;
    doc.setFontSize(12);
    doc.text('PRESTAZIONI:', 20, yPos);
    
    yPos += 10;
    doc.setFontSize(10);
    doc.text('Descrizione', 20, yPos);
    doc.text('Qnt', 120, yPos);
    doc.text('Prezzo', 140, yPos);
    doc.text('Totale', 170, yPos);
    doc.line(20, yPos + 2, 190, yPos + 2);
    
    yPos += 10;
    invoiceData.services.forEach(service => {
        const serviceTotal = service.quantity * service.price;
        doc.text(service.description, 20, yPos);
        doc.text(service.quantity.toString(), 120, yPos);
        doc.text(`€ ${service.price.toFixed(2)}`, 140, yPos);
        doc.text(`€ ${serviceTotal.toFixed(2)}`, 170, yPos);
        yPos += 10;
    });
    
    // Total
    doc.line(20, yPos, 190, yPos);
    yPos += 10;
    doc.setFontSize(12);
    doc.text(`TOTALE: € ${invoiceData.total.toFixed(2)}`, 170, yPos, { align: 'right' });
    
    // Legal text
    yPos += 20;
    doc.setFontSize(8);
    doc.text(legalText.iva_exemption, 20, yPos);
    yPos += 10;
    doc.text(legalText.stamp_duty, 20, yPos);
    yPos += 10;
    doc.text(legalText.fiscal_regime, 20, yPos, { maxWidth: 170 });
    
    // Download
    const filename = `Fattura_${invoiceData.number.replace('/', '_')}_${invoiceData.patient.name.replace(/\s+/g, '_')}.pdf`;
    doc.save(filename);
}

// Print Function
function handlePrint() {
    const patientSelect = document.getElementById('patientSelect');
    if (!patientSelect) return;
    
    const patientId = parseInt(patientSelect.value);
    if (!patientId) {
        showToast('⚠️ Seleziona un paziente per stampare', 'warning');
        return;
    }
    
    window.print();
}

// Export/Import System
function handleExport() {
    const timestamp = new Date().toISOString();
    const exportData = {
        ...currentUserData,
        metadata: {
            ...currentUserData.metadata,
            exportDate: timestamp
        }
    };
    
    const dateStr = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
    const filename = `Fatture_${currentUser}_${dateStr}.json`;
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showToast(`✅ Copia extra esportata: ${filename}`, 'success');
}

function setupDropZone() {
    const dropZone = document.getElementById('dropZone');
    
    if (!dropZone) return;
    
    dropZone.addEventListener('click', () => {
        const fileInput = document.getElementById('fileInput');
        if (fileInput) {
            fileInput.click();
        }
    });
    
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });
    
    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });
    
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFileImport(files[0]);
        }
    });
}

function handleFileSelect(e) {
    const file = e.target.files[0];
    if (file) {
        handleFileImport(file);
    }
}

function handleFileImport(file) {
    if (!file.name.endsWith('.json')) {
        showToast('⚠️ Seleziona un file JSON valido', 'warning');
        return;
    }
    
    const reader = new FileReader();
    reader.onload = (e) => {
        try {
            const importData = JSON.parse(e.target.result);
            smartImport(importData);
        } catch (error) {
            showToast('❌ File JSON non valido', 'error');
            console.error('Import error:', error);
        }
    };
    reader.readAsText(file);
}

async function smartImport(importData) {
    // Validate import data structure
    if (!importData.user && !importData.userData) {
        showToast('❌ Struttura file non valida', 'error');
        return;
    }
    
    // Handle different data formats
    let dataToImport;
    if (importData.userData) {
        // New format with metadata wrapper
        dataToImport = importData.userData;
    } else {
        // Old format direct data
        dataToImport = importData;
    }
    
    // Get local data
    const localMetadata = currentUserData.metadata || {};
    const importMetadata = dataToImport.metadata || {};
    
    const localDate = new Date(localMetadata.exportDate || 0);
    const importDate = new Date(importMetadata.exportDate || 0);
    
    if (importDate > localDate) {
        // Auto import - newer data
        await performImport(dataToImport);
        showToast('✅ Import automatico: dati più recenti importati', 'success');
    } else if (importDate < localDate) {
        // Skip - older data
        showToast('ℹ️ Import saltato: dati locali più recenti', 'info');
    } else {
        // Same date - ask user
        showConfirmModal(
            'Conferma Import',
            'Stessa data rilevata. Importare comunque i dati?',
            async () => {
                await performImport(dataToImport);
                showToast('✅ Dati importati manualmente', 'success');
            }
        );
    }
}

async function performImport(importData) {
    currentUserData = {
        ...importData,
        metadata: {
            ...importData.metadata,
            lastModified: new Date().toISOString()
        }
    };
    
    await saveUserData();
    updateUI();
    updateManagementPage();
    
    const summary = `Pazienti: ${importData.patients?.length || 0}, Fatture: ${importData.invoices?.length || 0}`;
    showToast(`Import completato! ${summary}`, 'success');
}

// Management Page
function updateManagementPage() {
    updatePatientsTable();
    updateInvoicesTable();
    updateStatistics();
}

function updatePatientsTable() {
    const container = document.getElementById('patientsTable');
    if (!container) return;
    
    if (currentUserData.patients.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">?</div>
                <h3>Nessun paziente</h3>
                <p>Aggiungi il tuo primo paziente per iniziare</p>
                <button class="btn btn--primary" onclick="showPatientModal()">+ Aggiungi Paziente</button>
            </div>
        `;
        return;
    }
    
    const table = document.createElement('table');
    table.className = 'data-table';
    table.innerHTML = `
        <thead>
            <tr>
                <th>Nome</th>
                <th>Indirizzo</th>
                <th>Codice Fiscale</th>
                <th>Azioni</th>
            </tr>
        </thead>
        <tbody>
            ${currentUserData.patients.map(patient => `
                <tr>
                    <td>${patient.title} ${patient.name}</td>
                    <td>${patient.address}</td>
                    <td>${patient.tax_code}</td>
                    <td class="table-actions">
                        <button class="btn btn--outline btn--sm" onclick="editPatient(${patient.id})">Modifica</button>
                        <button class="btn btn--outline btn--sm" onclick="deletePatient(${patient.id})">Elimina</button>
                    </td>
                </tr>
            `).join('')}
        </tbody>
    `;
    
    container.innerHTML = '';
    container.appendChild(table);
}

function updateInvoicesTable() {
    const container = document.getElementById('invoicesTable');
    if (!container) return;
    
    if (currentUserData.invoices.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">?</div>
                <h3>Nessuna fattura</h3>
                <p>Le tue fatture appariranno qui</p>
            </div>
        `;
        return;
    }
    
    const table = document.createElement('table');
    table.className = 'data-table';
    table.innerHTML = `
        <thead>
            <tr>
                <th>Numero</th>
                <th>Data</th>
                <th>Paziente</th>
                <th>Totale</th>
                <th>Azioni</th>
            </tr>
        </thead>
        <tbody>
            ${currentUserData.invoices.map(invoice => `
                <tr>
                    <td>${invoice.number}</td>
                    <td>${new Date(invoice.date).toLocaleDateString('it-IT')}</td>
                    <td>${invoice.patient.title} ${invoice.patient.name}</td>
                    <td>€ ${invoice.total.toFixed(2)}</td>
                    <td class="table-actions">
                        <button class="btn btn--outline btn--sm" onclick="regeneratePDF(${invoice.id})">PDF</button>
                        <button class="btn btn--outline btn--sm" onclick="deleteInvoice(${invoice.id})">Elimina</button>
                    </td>
                </tr>
            `).join('')}
        </tbody>
    `;
    
    container.innerHTML = '';
    container.appendChild(table);
}

function updateStatistics() {
    const currentYear = new Date().getFullYear();
    const yearlyInvoices = currentUserData.invoices.filter(inv => 
        new Date(inv.date).getFullYear() === currentYear
    );
    const yearlyRevenue = yearlyInvoices.reduce((sum, inv) => sum + inv.total, 0);
    
    const totalPatients = document.getElementById('totalPatients');
    const totalInvoices = document.getElementById('totalInvoices');
    const yearlyRevenueElement = document.getElementById('yearlyRevenue');
    
    if (totalPatients) totalPatients.textContent = currentUserData.patients.length;
    if (totalInvoices) totalInvoices.textContent = currentUserData.invoices.length;
    if (yearlyRevenueElement) yearlyRevenueElement.textContent = `€ ${yearlyRevenue.toFixed(2)}`;
    
    // Update current file name
    const currentFileElement = document.getElementById('currentFileName');
    if (currentFileElement) {
        if (currentFileName) {
            currentFileElement.textContent = currentFileName.substring(0, 20) + '...';
            currentFileElement.title = currentFileName;
        } else {
            currentFileElement.textContent = 'localStorage';
        }
    }
}

// Management Actions
function editPatient(patientId) {
    const patient = currentUserData.patients.find(p => p.id === patientId);
    if (patient) {
        showPatientModal(patient);
    }
}

async function deletePatient(patientId) {
    showConfirmModal(
        'Conferma Eliminazione',
        'Sei sicuro di voler eliminare questo paziente? Le fatture associate rimarranno invariate.',
        async () => {
            currentUserData.patients = currentUserData.patients.filter(p => p.id !== patientId);
            await saveUserData();
            updateManagementPage();
            updatePatientSelect();
            showToast('✅ Paziente eliminato', 'success');
        }
    );
}

async function deleteInvoice(invoiceId) {
    showConfirmModal(
        'Conferma Eliminazione',
        'Sei sicuro di voler eliminare questa fattura?',
        async () => {
            currentUserData.invoices = currentUserData.invoices.filter(i => i.id !== invoiceId);
            await saveUserData();
            updateManagementPage();
            showToast('✅ Fattura eliminata', 'success');
        }
    );
}

function regeneratePDF(invoiceId) {
    const invoice = currentUserData.invoices.find(i => i.id === invoiceId);
    if (invoice) {
        generatePDF(invoice);
        showToast('✅ PDF rigenerato', 'success');
    }
}

// Modal Management
function showConfirmModal(title, message, onConfirm) {
    const confirmTitle = document.getElementById('confirmTitle');
    const confirmMessage = document.getElementById('confirmMessage');
    const confirmModal = document.getElementById('confirmModal');
    
    if (confirmTitle) confirmTitle.textContent = title;
    if (confirmMessage) confirmMessage.textContent = message;
    if (confirmModal) confirmModal.classList.add('show');
    
    // Store callback
    window.pendingConfirmAction = onConfirm;
}

function hideConfirmModal() {
    const confirmModal = document.getElementById('confirmModal');
    if (confirmModal) {
        confirmModal.classList.remove('show');
    }
    delete window.pendingConfirmAction;
}

function handleConfirmYes() {
    if (window.pendingConfirmAction) {
        window.pendingConfirmAction();
    }
    hideConfirmModal();
}

// Toast Notifications
function showToast(message, type = 'info') {
    const container = document.getElementById('toast-container');
    if (!container) return;
    
    const toast = document.createElement('div');
    toast.className = `toast toast--${type}`;
    
    const icons = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
    };
    
    toast.innerHTML = `
        <div class="toast-content">
            <span class="toast-icon">${icons[type]}</span>
            <span class="toast-text">${message}</span>
            <button class="toast-close">×</button>
        </div>
    `;
    
    // Close button
    toast.querySelector('.toast-close').addEventListener('click', () => {
        removeToast(toast);
    });
    
    container.appendChild(toast);
    
    // Show toast
    setTimeout(() => toast.classList.add('show'), 100);
    
    // Auto hide
    setTimeout(() => removeToast(toast), 5000);
}

function removeToast(toast) {
    toast.classList.remove('show');
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 300);
}

// Logout
function handleLogout() {
    showConfirmModal(
        'Conferma Logout',
        'Sei sicuro di voler uscire? Tutti i dati sono salvati automaticamente.',
        () => {
            localStorage.removeItem('currentUser');
            localStorage.removeItem('folderHandle');
            location.reload();
        }
    );
}

// Global functions for onclick handlers
window.editPatient = editPatient;
window.deletePatient = deletePatient;
window.deleteInvoice = deleteInvoice;
window.regeneratePDF = regeneratePDF;
window.showPatientModal = showPatientModal;

References

Users

Explore

share Share

Codewith.it

cookie Policy

collections Upload images

Converted images

save Save File

auto_awesome Codebot AI

sticky_note_2 Notes

keyboard Command list

account_circle Log in to Codewith.it

code Resources