<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/favicon/favicon-32.png" sizes="32x32">
  <link rel="shortcut icon" href="/favicon/favicon-96x96.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#ffffff">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="description"
        content="Area Clienti Optlyx — accedi al portale per gestire documenti, fatture e comunicazioni con il tuo studio professionale.">
    <meta name="robots" content="noindex, nofollow">
    <title>Area Clienti | Optlyx Prisma</title>
    <link rel="canonical" href="https://prisma-optlyx.web.app/client/">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Area Clienti | Optlyx">
    <meta property="og:description"
        content="Portale clienti Optlyx — gestisci documenti e comunicazioni con il tuo studio.">
    <meta property="og:url" content="https://prisma-optlyx.web.app/client/">
    <meta property="og:image"
        content="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20grad.png?alt=media&token=151c2e9c-8e41-4829-864d-8163239180bd">
    <meta property="og:site_name" content="Optlyx Prisma">
    <meta property="og:locale" content="it_IT">
      <link rel="shortcut icon" href="/favicon/favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script defer src="/js/line-icons.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <link rel="stylesheet" href="css/client-main.css">
    <link rel="stylesheet" href="css/archive-view.css">
    <link rel="stylesheet" href="css/f24-view.css">
    <link rel="stylesheet" href="css/calendar-view.css">
    <link rel="stylesheet" href="css/impersonation-banner.css">

    <!-- Impersonation bootstrap MUST run BEFORE firebase-init: legge ?_imp=
         dalla URL e popola sessionStorage prima che la auth Firebase si attivi.
         NB: NON usa `defer` apposta — deve eseguire sincrono. -->
    <script src="js/impersonation-bootstrap.js"></script>

    <!-- Firebase -->
    <script defer src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/10.7.1/firebase-storage-compat.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/10.7.1/firebase-functions-compat.js"></script>
    <!-- escapeHtml defined inline in clientApp.js -->
    <script defer src="firebase-init.js"></script>
    <script defer src="js/system-monitor.js"></script>
</head>

<body>

    <!-- LOADING SCREEN - Premium Version -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-logo-container">
                <img src="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20text%20gradient.png?alt=media&token=702630a6-83df-4768-b377-73b10be5e212"
                    alt="Optlyx" class="loading-logo">
                <div class="loading-glow"></div>
            </div>
            <!-- Shimmer status indicator (ChatGPT-style) -->
            <div class="loading-shimmer-status" aria-live="polite">
                <div class="loading-shimmer-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="16 34" class="shimmer-spinner"/>
                    </svg>
                </div>
                <p class="loading-shimmer-text" id="loading-shimmer-text">Inizializzazione area clienti</p>
            </div>
        </div>
        <div class="loading-gradient-bg"></div>
    </div>
    <script>
        (function () {
            const textEl = document.getElementById('loading-shimmer-text');
            if (!textEl) return;

            const idleMessages = [
                'Connessione ai servizi Optlyx',
                'Preparazione sessione sicura',
                'Verifica credenziali in corso',
                'Ricerca profilo cliente',
                'Sincronizzazione documenti',
                'Composizione dashboard'
            ];

            let idleIndex = 0;
            let idleTimer = null;
            let transitioning = false;

            function showMessage(message) {
                if (!message || transitioning) return;
                transitioning = true;
                textEl.classList.add('fade-out');
                setTimeout(() => {
                    textEl.textContent = message;
                    textEl.classList.remove('fade-out');
                    textEl.classList.add('fade-in');
                    setTimeout(() => {
                        textEl.classList.remove('fade-in');
                        transitioning = false;
                    }, 400);
                }, 300);
            }

            idleTimer = setInterval(() => {
                showMessage(idleMessages[idleIndex % idleMessages.length]);
                idleIndex += 1;
            }, 2800);

            window.clientBoot = {
                push(message) {
                    if (!message) return;
                    /* Strip terminal-style prefixes like [boot], [auth], etc. */
                    const clean = message.replace(/^\[[\w ]{2,6}\]\s*/, '');
                    showMessage(clean);
                },
                complete(message) {
                    if (idleTimer) { clearInterval(idleTimer); idleTimer = null; }
                    if (message) this.push(message);
                },
                fail(message) {
                    if (idleTimer) { clearInterval(idleTimer); idleTimer = null; }
                    if (message) this.push(message);
                }
            };
        })();
    </script>

    <!-- TAB TRANSITION LOADER — Optlyx style -->
    <div id="neo-tab-loader" class="neo-tab-loader">
        <div class="neo-tab-loader-ring"></div>
        <img src="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20grad.png?alt=media&token=151c2e9c-8e41-4829-864d-8163239180bd"
            alt="" class="neo-tab-loader-logo">
    </div>

    <!-- APP CONTAINER -->
    <div id="app" class="app-container">

        <!-- HEADER / SIDEBAR -->
        <header class="app-header">
            <div class="header-brand">
                <img src="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20grad.png?alt=media&token=151c2e9c-8e41-4829-864d-8163239180bd"
                    alt="Optlyx" class="brand-icon">
                <span class="brand-label">Area Clienti</span>
            </div>

            <!-- Desktop Navigation -->
            <nav class="desktop-nav">
                <button onclick="switchTab('panoramica')" id="desktop-nav-panoramica" class="desktop-nav-btn active">
                    <i data-line-icon="layout-grid"></i>
                    <span>Panoramica</span>
                </button>
                <button onclick="switchTab('checklist')" id="desktop-nav-checklist" class="desktop-nav-btn">
                    <i data-line-icon="clipboard-check"></i>
                    <span>Checklist</span>
                    <span id="desktop-checklist-badge" class="nav-badge hidden">0</span>
                </button>
                <button onclick="switchTab('documenti-archivio')" id="desktop-nav-documenti-archivio"
                    class="desktop-nav-btn">
                    <i data-line-icon="folder-archive"></i>
                    <span>Documenti</span>
                </button>
                <button onclick="switchTab('spese')" id="desktop-nav-spese" class="desktop-nav-btn">
                    <i data-line-icon="receipt"></i>
                    <span>Spese</span>
                </button>
                <button onclick="switchTab('chat')" id="desktop-nav-chat" class="desktop-nav-btn">
                    <i data-line-icon="message-circle"></i>
                    <span>Chat</span>
                    <span id="desktop-chat-badge" class="nav-badge hidden">0</span>
                </button>
                <button onclick="switchTab('tesoreria')" id="desktop-nav-tesoreria" class="desktop-nav-btn" hidden>
                    <i data-line-icon="wallet"></i>
                    <span>Tesoreria</span>
                </button>
                <button onclick="switchTab('appuntamenti')" id="desktop-nav-appuntamenti" class="desktop-nav-btn">
                    <i data-line-icon="calendar-clock"></i>
                    <span>Appuntamenti</span>
                </button>
                <button onclick="switchTab('profilo')" id="desktop-nav-profilo" class="desktop-nav-btn">
                    <i data-line-icon="user-round"></i>
                    <span>Profilo</span>
                    <span id="desktop-profilo-badge" class="nav-badge hidden">!</span>
                </button>
                <button onclick="switchTab('privacy')" id="desktop-nav-privacy" class="desktop-nav-btn">
                    <i data-line-icon="shield"></i>
                    <span>Privacy</span>
                </button>
                <button onclick="switchTab('f24')" id="desktop-nav-f24" class="desktop-nav-btn">
                    <i data-line-icon="file-text"></i>
                    <span>F24</span>
                    <span id="desktop-f24-badge" class="nav-badge hidden">0</span>
                </button>
                <button onclick="switchTab('pagamenti')" id="desktop-nav-pagamenti" class="desktop-nav-btn">
                    <i data-line-icon="credit-card"></i>
                    <span>Pagamenti</span>
                </button>
            </nav>

            <div class="header-actions">
                <div id="company-switcher-wrap" class="hidden" style="position:relative;">
                    <button id="company-switcher-btn" type="button" class="user-pill" style="cursor:pointer;border:1px dashed #cbd5e1;" title="Cambia azienda">
                        <span id="company-switcher-current" style="font-weight:600;font-size:13px;">Azienda</span>
                        <i data-line-icon="chevrons-up-down" style="width:14px;height:14px;opacity:.5;"></i>
                    </button>
                    <div id="company-switcher-menu" class="hidden" style="position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(15,23,42,.12);z-index:100;"></div>
                </div>
                <div class="user-pill">
                    <div class="user-avatar" id="header-avatar">CL</div>
                    <span id="header-user-name">Cliente</span>
                </div>
                <button onclick="openSettingsModal()" class="btn-icon-soft" title="Impostazioni">
                    <i data-line-icon="settings"></i>
                </button>
            </div>
        </header>

        <!-- MAIN CONTENT -->
        <main class="app-main">

            <!-- TAB: PANORAMICA -->
            <section id="view-panoramica" class="view active">

                <!-- Greeting -->
                <div class="neo-dash-header">
                    <div>
                        <span class="neo-dash-greeting" id="hero-user-name">Buongiorno</span>
                        <span class="neo-dash-date" id="current-date">--</span>
                    </div>
                    <div class="neo-dash-actions">
                        <button type="button" class="neo-dash-action" data-chat-upload onclick="openScanner()"><i data-line-icon="scan"></i> <span class="dash-action-label">Scansiona</span></button>
                        <button type="button" class="neo-dash-action neo-dash-action-ghost" data-chat-upload onclick="document.getElementById('file-upload-dash').click()"><i data-line-icon="upload"></i> <span class="dash-action-label">Carica</span></button>
                        <input type="file" id="file-upload-dash" class="hidden" data-chat-upload multiple accept="image/*,.pdf" title="Carica file" onchange="handleFileUpload(this)">
                    </div>
                </div>

                <!-- KPI cards -->
                <div class="neo-kpi-strip">
                    <div class="neo-kpi-hero" onclick="switchTab('checklist')">
                        <div class="neo-kpi-hero-icon"><i data-line-icon="clipboard-list"></i></div>
                        <div class="neo-kpi-hero-num" id="kpi-tasks">0</div>
                        <div class="neo-kpi-hero-text">
                            <strong>Da fare</strong>
                            <span>documenti da caricare</span>
                        </div>
                        <div class="neo-kpi-hero-arrow"><i data-line-icon="chevron-right"></i></div>
                    </div>
                    <div class="neo-kpi-stat" onclick="switchTab('documenti-archivio')">
                        <i data-line-icon="folder" class="neo-kpi-stat-icon"></i>
                        <div class="neo-kpi-stat-num" id="kpi-docs">0</div>
                        <div class="neo-kpi-stat-lbl">Documenti</div>
                    </div>
                    <div class="neo-kpi-stat">
                        <i data-line-icon="bell" class="neo-kpi-stat-icon"></i>
                        <div class="neo-kpi-stat-num" id="kpi-comms">0</div>
                        <div class="neo-kpi-stat-lbl">Comunicazioni</div>
                    </div>
                    <div class="neo-kpi-stat" onclick="switchTab('chat')">
                        <i data-line-icon="message-circle" class="neo-kpi-stat-icon"></i>
                        <div class="neo-kpi-stat-num" id="kpi-chat">0</div>
                        <div class="neo-kpi-stat-lbl">Chat</div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="quick-actions-strip">
                    <button type="button" class="quick-action-btn" onclick="switchTab('chat')">
                        <div class="quick-action-icon qa-chat"><i data-line-icon="message-circle"></i></div>
                        <span>Chat</span>
                    </button>
                    <button type="button" class="quick-action-btn" data-chat-upload onclick="openScanner()">
                        <div class="quick-action-icon qa-scan"><i data-line-icon="scan"></i></div>
                        <span>Scansiona</span>
                    </button>
                    <button type="button" class="quick-action-btn" onclick="switchTab('spese')">
                        <div class="quick-action-icon qa-docs"><i data-line-icon="receipt"></i></div>
                        <span>Spese</span>
                    </button>
                    <button type="button" class="quick-action-btn" onclick="switchTab('checklist')">
                        <div class="quick-action-icon qa-upload"><i data-line-icon="upload"></i></div>
                        <span>Carica</span>
                    </button>
                    <button type="button" class="quick-action-btn" onclick="switchTab('appuntamenti')">
                        <div class="quick-action-icon qa-cal"><i data-line-icon="calendar-plus"></i></div>
                        <span>Prenota</span>
                    </button>
                </div>

                <div class="neo-panels-row">
                    <div class="section-panel expenses-home-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">Questo mese</div>
                                <span class="panel-title neo-panel-title">Spese</span>
                            </div>
                            <button type="button" class="panel-link-btn" onclick="switchTab('spese')">Apri</button>
                        </div>
                        <div class="expenses-home-summary">
                            <div class="expense-stat">
                                <span class="expense-stat-label">Totale</span>
                                <strong id="expenses-home-total">€0</strong>
                            </div>
                            <div class="expense-stat">
                                <span class="expense-stat-label">Ricevute</span>
                                <strong id="expenses-home-count">0</strong>
                            </div>
                            <button type="button" class="expense-action-btn" onclick="switchTab('spese')">
                                <i data-line-icon="receipt"></i>
                                <span>Gestisci</span>
                            </button>
                        </div>
                        <div id="expenses-home-list" class="panel-content neo-panel-scroll">
                            <div class="empty-state">
                                <span>Nessuna spesa caricata</span>
                                <small class="empty-state-hint">Scatta o carica una ricevuta per iniziare</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tips / Guide -->
                <div class="tips-section" id="tips-section">
                    <div class="tips-header">
                        <span class="tips-title"><i data-line-icon="lightbulb"></i> Suggerimenti</span>
                        <button type="button" class="tips-dismiss" onclick="dismissTips()" title="Nascondi suggerimenti"><i data-line-icon="x"></i></button>
                    </div>
                    <div class="tips-scroll">
                        <div class="tip-card tip-welcome">
                            <div class="tip-emoji">👋</div>
                            <div class="tip-body">
                                <strong>Benvenuto nel portale</strong>
                                <p>Qui puoi gestire tutto il rapporto con il tuo studio: documenti, scadenze, comunicazioni e approvazioni. Tutto in un unico posto.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-upload">
                            <div class="tip-emoji">📄</div>
                            <div class="tip-body">
                                <strong>Carica i documenti richiesti</strong>
                                <p>Quando lo studio ti chiede un documento, lo trovi nella sezione "Checklist". Puoi scattare una foto o caricare un PDF direttamente dal telefono.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-chat">
                            <div class="tip-emoji">💬</div>
                            <div class="tip-body">
                                <strong>Chatta con lo studio</strong>
                                <p>Hai una domanda? Usa la chat per scrivere direttamente allo studio. Niente più email perse o telefonate a vuoto.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-deadlines">
                            <div class="tip-emoji">📅</div>
                            <div class="tip-body">
                                <strong>Scadenze sotto controllo</strong>
                                <p>Le scadenze fiscali appaiono automaticamente nella tua dashboard. Ricevi anche un promemoria quando si avvicinano.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-scan">
                            <div class="tip-emoji">📸</div>
                            <div class="tip-body">
                                <strong>Scansiona con la fotocamera</strong>
                                <p>Premi "Scansiona" per fotografare fatture, ricevute o documenti. Il sistema li ottimizza e li invia allo studio automaticamente.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-archive">
                            <div class="tip-emoji">🗂️</div>
                            <div class="tip-body">
                                <strong>Archivio sempre accessibile</strong>
                                <p>Tutti i documenti che scambi con lo studio restano nell'archivio. Puoi ritrovarli in qualsiasi momento dalla sezione "Docs".</p>
                            </div>
                        </div>
                        <div class="tip-card tip-approval">
                            <div class="tip-emoji">✅</div>
                            <div class="tip-body">
                                <strong>Approva con un tocco</strong>
                                <p>Quando lo studio ha bisogno della tua autorizzazione per un'operazione, ricevi una richiesta di approvazione che puoi accettare o rifiutare in un attimo.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-firma">
                            <div class="tip-emoji">✍️</div>
                            <div class="tip-body">
                                <strong>Firma digitale integrata</strong>
                                <p>Mandati, contratti e documenti da firmare arrivano direttamente qui. Firmi dal telefono senza stampare nulla.</p>
                            </div>
                        </div>
                        <div class="tip-card tip-cta">
                            <div class="tip-emoji">🚀</div>
                            <div class="tip-body">
                                <strong>Il tuo studio usa Optlyx Prisma</strong>
                                <p>Grazie a Prisma il tuo studio ti offre un servizio digitale completo: meno carta, meno attese, più trasparenza. Tutto gratis per te.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PIPELINE STATUS (if active) -->
                <div id="pipeline-status-widget" class="section-panel pipeline-panel" style="display:none;">
                    <div class="panel-header">
                        <div class="panel-icon" style="background: #6366f1;">
                            <i data-line-icon="git-branch" style="color: white;"></i>
                        </div>
                        <span class="panel-title">Stato Pratica</span>
                        <span id="pipeline-stage-label" class="badge-count"
                            style="background: #6366f1; color: white;">—</span>
                    </div>
                    <div class="panel-content" style="padding: 16px;">
                        <div id="pipeline-steps" class="pipeline-tracker"></div>
                        <p id="pipeline-description" class="pipeline-desc"
                            style="margin-top: 12px; font-size: 13px; color: #64748b; line-height: 1.5;"></p>
                        <p id="pipeline-updated" class="pipeline-updated"
                            style="margin-top: 8px; font-size: 11px; color: #94a3b8;"></p>
                    </div>
                </div>

                <!-- Urgent: Scadenze + Documenti Richiesti -->
                <div class="neo-panels-row">
                    <div class="section-panel scadenze-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">Urgente</div>
                                <span class="panel-title neo-panel-title">Scadenze</span>
                            </div>
                            <span id="tasks-count" class="badge-count warning">0</span>
                        </div>
                        <div id="tasks-list" class="panel-content scadenze-content neo-panel-scroll">
                            <div class="empty-state"><span>Nessuna scadenza in arrivo</span><small class="empty-state-hint">Quando lo studio inserisce scadenze, appariranno qui</small></div>
                        </div>
                    </div>
                    <div class="section-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">Da caricare</div>
                                <span class="panel-title neo-panel-title">Documenti Richiesti</span>
                            </div>
                            <span id="docs-count" class="badge-count danger">0</span>
                        </div>
                        <div id="docs-list" class="panel-content neo-panel-scroll">
                            <div class="empty-state"><span>Tutto in ordine!</span><small class="empty-state-hint">Nessun documento richiesto al momento</small></div>
                        </div>
                    </div>
                </div>

                <!-- Approvazioni -->
                <div class="neo-panels-row">
                    <div class="section-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">In attesa</div>
                                <span class="panel-title neo-panel-title">Approvazioni</span>
                            </div>
                            <span id="approvals-count" class="badge-count danger">0</span>
                        </div>
                        <div id="approvals-list" class="panel-content neo-panel-scroll">
                            <div class="empty-state"><span>Nessuna approvazione da dare</span><small class="empty-state-hint">Le richieste di approvazione dallo studio appariranno qui</small></div>
                        </div>
                    </div>
                </div>

                <!-- Comunicazioni + Documenti dallo Studio -->
                <div class="neo-panels-row">
                    <div class="section-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">Messaggi</div>
                                <span class="panel-title neo-panel-title">Comunicazioni</span>
                            </div>
                            <span id="comunicazioni-count" class="badge-count">0</span>
                        </div>
                        <div id="comunicazioni-list" class="panel-content neo-panel-scroll">
                            <div class="empty-state"><span>Nessuna comunicazione</span><small class="empty-state-hint">Le email e i messaggi dallo studio appariranno qui</small></div>
                        </div>
                    </div>
                    <div class="section-panel shared-docs-panel">
                        <div class="panel-header">
                            <div class="panel-header-content">
                                <div class="panel-tagline">Archivio</div>
                                <span class="panel-title neo-panel-title">Documenti dallo Studio</span>
                            </div>
                            <span id="shared-docs-count" class="badge-count">0</span>
                        </div>
                        <div id="shared-docs-list" class="panel-content neo-panel-scroll">
                            <div class="loading-spinner"><i data-line-icon="loader-2" class="spin"></i></div>
                        </div>
                    </div>
                </div>

                <!-- Chart — in fondo, meno prioritario -->
                <div class="charts-row">
                    <div class="cashflow-card">
                        <div class="cashflow-card-header">
                            <div class="cashflow-card-titles">
                                <span class="cashflow-card-title">Documenti</span>
                                <span class="cashflow-card-subtitle">Ultimi 6 mesi</span>
                            </div>
                            <div class="cashflow-legend">
                                <span class="cashflow-legend-item">
                                    <span class="cashflow-legend-dot docs-studio"></span>Studio
                                </span>
                                <span class="cashflow-legend-item">
                                    <span class="cashflow-legend-dot docs-client"></span>Tu
                                </span>
                            </div>
                        </div>
                        <div class="cashflow-chart-wrap">
                            <canvas id="docs-chart"></canvas>
                        </div>
                        <div class="cashflow-totals">
                            <div class="cashflow-total-item">
                                <span class="cashflow-total-arrow docs-studio">↓</span>
                                <div>
                                    <div class="cashflow-total-label">Dallo Studio</div>
                                    <div class="cashflow-total-value docs-studio" id="docs-total-studio">—</div>
                                </div>
                            </div>
                            <div class="cashflow-total-divider"></div>
                            <div class="cashflow-total-item">
                                <span class="cashflow-total-arrow docs-client">↑</span>
                                <div>
                                    <div class="cashflow-total-label">Caricati da Te</div>
                                    <div class="cashflow-total-value docs-client" id="docs-total-client">—</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>

            <!-- TAB: CHECKLIST -->
            <section id="view-checklist" class="view checklist-view">

                <!-- Header -->
                <div class="checklist-header">
                    <div class="checklist-header-top">
                        <h2><i data-line-icon="clipboard-check"></i> Documenti Richiesti</h2>
                        <span id="checklist-global-count" class="badge-count">0</span>
                    </div>
                    <p class="checklist-subtitle">Carica i documenti richiesti dal tuo Studio per ogni pratica</p>
                </div>

                <!-- Global Progress -->
                <div class="checklist-progress-card">
                    <div class="progress-stats">
                        <span id="checklist-progress-text">0 di 0 completati</span>
                        <span id="checklist-progress-pct" class="progress-pct">0%</span>
                    </div>
                    <div class="progress-bar-track">
                        <div id="checklist-progress-fill" class="progress-bar-fill" style="width: 0%;"></div>
                    </div>
                </div>

                <!-- Checklists Container -->
                <div id="checklists-container" class="checklists-container">
                    <div class="loading-spinner">
                        <i data-line-icon="loader-2" class="spin"></i>
                        <span>Caricamento checklist...</span>
                    </div>
                </div>

                <!-- Empty State -->
                <div id="checklist-empty" class="empty-state checklist-empty hidden">
                    <i data-line-icon="clipboard-check"></i>
                    <h3>Tutto in ordine!</h3>
                    <p>Non ci sono documenti richiesti al momento</p>
                </div>

            </section>

            <!-- TAB: CHAT -->
            <section id="view-chat" class="view chat-view">

                <!-- Premium Chat Header -->
                <div class="chat-header-bar">
                    <div class="chat-header-main">
                        <div class="chat-recipient">
                            <div class="recipient-avatar">
                                <span>S</span>
                                <div class="avatar-badge"></div>
                            </div>
                            <div class="recipient-info">
                                <h3 id="chat-studio-name">Il Tuo Studio</h3>
                                <span class="status-online"><span class="dot"></span>Disponibile</span>
                            </div>
                        </div>
                        <div class="chat-header-actions">
                            <button class="header-action-btn" title="Cerca">
                                <i data-line-icon="search"></i>
                            </button>
                            <button class="header-action-btn" title="Info">
                                <i data-line-icon="info"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Quick Services -->
                    <div class="neo-chat-services">
                        <button type="button" class="neo-chat-chip" data-chat-upload onclick="openScanner()"><i data-line-icon="scan"></i> Scansiona</button>
                        <button type="button" class="neo-chat-chip" onclick="openScadenzeModal()"><i data-line-icon="calendar"></i> Scadenze</button>
                        <button type="button" class="neo-chat-chip" onclick="openDocumentiModal()"><i data-line-icon="folder-open"></i> Documenti</button>
                    </div>
                </div>

                <!-- Chat Messages Stream -->
                <div id="chat-stream" class="chat-stream">
                    <div class="neo-chat-welcome">
                        <div class="neo-chat-welcome-logo">
                            <img src="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20grad.png?alt=media&token=151c2e9c-8e41-4829-864d-8163239180bd" alt="">
                        </div>
                        <h3>Il tuo studio e qui</h3>
                        <p>Scrivi un messaggio, allega un documento o scansiona direttamente.</p>
                        <div class="neo-chat-quick">
                            <button type="button" data-chat-upload onclick="openScanner()"><i data-line-icon="scan"></i><span>Scansiona</span></button>
                            <button type="button" data-chat-upload onclick="document.getElementById('file-upload').click()"><i data-line-icon="upload"></i><span>Carica file</span></button>
                            <button type="button" onclick="document.getElementById('chat-input').focus()"><i data-line-icon="pencil"></i><span>Scrivi</span></button>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Composer — form for mobile keyboard support -->
                <form class="chat-composer" id="chat-form" action="javascript:void(0)" onsubmit="sendClientMessage(); return false;" autocomplete="off">
                    <button type="button" data-chat-upload onclick="document.getElementById('file-upload').click()" class="btn-attach"
                        title="Allega file">
                        <i data-line-icon="paperclip"></i>
                    </button>
                    <input type="file" id="file-upload" class="hidden" data-chat-upload onchange="handleFileUpload(this)" multiple
                        accept="image/*,.pdf">

                    <div class="input-field">
                        <input type="text" id="chat-input" placeholder="Scrivi un messaggio..." enterkeyhint="send" autocomplete="off" autocorrect="on" autocapitalize="sentences">
                    </div>

                    <button type="submit" class="btn-send" id="btn-send">
                        <i data-line-icon="send"></i>
                    </button>
                </form>

            </section>

            <!-- TAB: DOCUMENTI ARCHIVIO -->
            <section id="view-documenti-archivio" class="view docs-archive-view">

                <!-- Header -->
                <div class="archive-header">
                    <div class="archive-tagline">Documenti</div>
                    <h2>Archivio</h2>
                    <p class="archive-subtitle">Tutti i tuoi documenti in un unico posto</p>
                </div>

                <!-- Filters -->
                <div class="archive-filters">
                    <button class="filter-chip active" data-filter="all" onclick="filterArchive('all')">Tutti</button>
                    <button class="filter-chip" data-filter="pending" onclick="filterArchive('pending')">Da Caricare</button>
                    <button class="filter-chip" data-filter="studio" onclick="filterArchive('studio')">Dallo Studio</button>
                    <button class="filter-chip" data-filter="client" onclick="filterArchive('client')">I Miei</button>
                </div>

                <!-- Hidden container for upload-links data (loaded by JS, merged into timeline) -->
                <div id="pending-upload-links-section" style="display:none;">
                    <div id="pending-upload-links-list"></div>
                </div>

                <!-- Unified Timeline -->
                <div id="docs-archive-timeline" class="archive-timeline">
                    <div class="archive-skeleton">
                        <div class="skel-period"></div>
                        <div class="skel-card"><div class="skel-line skel-w60"></div><div class="skel-line skel-w40"></div></div>
                        <div class="skel-card"><div class="skel-line skel-w80"></div><div class="skel-line skel-w30"></div></div>
                        <div class="skel-card"><div class="skel-line skel-w50"></div><div class="skel-line skel-w60"></div></div>
                        <div class="skel-card"><div class="skel-line skel-w70"></div><div class="skel-line skel-w40"></div></div>
                    </div>
                </div>

            </section>

            <!-- TAB: SPESE -->
            <section id="view-spese" class="view expenses-view">
                <div class="archive-header expense-view-header">
                    <div class="archive-tagline">Operatività</div>
                    <h2>Spese</h2>
                    <p class="archive-subtitle">Carica ricevute, correggi i dati e verifica in un attimo se una spesa è deducibile.</p>
                </div>

                <div class="expense-focus-card">
                    <div class="expense-focus-copy">
                        <span class="expense-focus-eyebrow">Workflow rapido</span>
                        <h3>Scatta, correggi e invia tutto da qui</h3>
                        <p>Le ricevute caricate in questa vista finiscono direttamente nel dossier condiviso con il tuo studio.</p>
                    </div>
                    <div class="expense-focus-status">
                        <span id="expenses-sync-pill" class="expense-sync-pill muted">Pronto al primo upload</span>
                        <small id="expenses-sync-note">Scatta una ricevuta o inserisci una spesa manualmente per iniziare.</small>
                    </div>
                </div>

                <div class="expenses-toolbar">
                    <button type="button" class="expense-toolbar-btn" onclick="triggerExpenseUpload('camera')">
                        <i data-line-icon="camera"></i>
                        <span>Scatta</span>
                    </button>
                    <button type="button" class="expense-toolbar-btn" onclick="triggerExpenseUpload('file')">
                        <i data-line-icon="upload"></i>
                        <span>Carica</span>
                    </button>
                    <button type="button" class="expense-toolbar-btn expense-toolbar-btn-secondary" onclick="openManualExpenseModal()">
                        <i data-line-icon="pencil-line"></i>
                        <span>Manuale</span>
                    </button>
                    <input type="file" id="expense-camera-input" class="hidden" accept="image/*" capture="environment" onchange="handleExpenseFileInput(this, 'camera')">
                    <input type="file" id="expense-file-input" class="hidden" accept="image/*,.pdf,application/pdf" onchange="handleExpenseFileInput(this, 'file')">
                </div>

                <div id="expense-upload-console" class="expense-upload-console hidden" aria-live="polite" aria-atomic="true"></div>

                <div class="expense-summary-grid">
                    <div class="expense-summary-card">
                        <span class="expense-summary-label">Totale mese</span>
                        <strong id="expenses-total-month">€0</strong>
                    </div>
                    <div class="expense-summary-card">
                        <span class="expense-summary-label">Ricevute mese</span>
                        <strong id="expenses-count-month">0</strong>
                    </div>
                    <div class="expense-summary-card">
                        <span class="expense-summary-label">Da controllare</span>
                        <strong id="expenses-pending-count">0</strong>
                    </div>
                </div>

                <div class="expense-list-head">
                    <div class="expense-filter-group" role="tablist" aria-label="Filtri elenco spese">
                        <button type="button" class="expense-filter-chip active" data-filter="all" data-label="Tutte" onclick="setExpenseFilter('all')">Tutte 0</button>
                        <button type="button" class="expense-filter-chip" data-filter="pending" data-label="Da controllare" onclick="setExpenseFilter('pending')">Da controllare 0</button>
                        <button type="button" class="expense-filter-chip" data-filter="validated" data-label="Verificate" onclick="setExpenseFilter('validated')">Verificate 0</button>
                    </div>
                    <span id="expenses-list-caption" class="expense-list-caption">Qui vedrai tutte le ricevute man mano che arrivano</span>
                </div>

                <div class="section-panel expense-list-panel">
                    <div class="panel-header">
                        <div class="panel-header-content">
                            <div class="panel-tagline">Elenco</div>
                            <span class="panel-title neo-panel-title">Le tue spese</span>
                        </div>
                    </div>
                    <div id="expenses-list" class="panel-content neo-panel-scroll">
                        <div class="empty-state">
                            <span>Nessuna spesa disponibile</span>
                            <small class="empty-state-hint">Scatta una ricevuta o inserisci una spesa manualmente</small>
                        </div>
                    </div>
                </div>
            </section>

            <!-- TAB: PRIVACY & GDPR -->
            <section id="view-profilo" class="view">

                <!-- Hero -->
                <div class="pv-hero-banner">
                    <div class="pv-hero-banner-bg"></div>
                    <div class="pv-hero-banner-content">
                        <div class="pv-hero-shield"><i data-line-icon="user-round"></i></div>
                        <h2 class="pv-hero-title">Profilo</h2>
                        <p class="pv-hero-sub">Completa i tuoi dati per firmare documenti digitalmente. Il numero di cellulare è necessario per la Firma Elettronica Avanzata.</p>
                    </div>
                </div>

                <!-- FEA phone card -->
                <div class="pv-card" id="profilo-fea-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-blue"><i data-line-icon="smartphone"></i></div>
                        <div>
                            <h3 class="pv-card-title">Numero per Firma Elettronica</h3>
                            <span class="pv-card-sub" id="profilo-fea-status-sub">Non ancora configurato</span>
                        </div>
                        <span id="profilo-fea-status-badge" class="pv-trust-badge" style="margin-left:auto;display:none;"></span>
                    </div>
                    <div class="pv-card-body">
                        <div id="profilo-fea-state-verified" style="display:none;">
                            <div class="pv-info-box" style="background:#ecfdf5;border-color:#a7f3d0;color:#065f46;">
                                <strong><i data-line-icon="check-circle" style="width:16px;height:16px;vertical-align:-3px;"></i> Numero verificato</strong>
                                <div style="margin-top:6px;">Numero associato: <strong id="profilo-fea-verified-phone">—</strong></div>
                                <div style="font-size:13px;color:#047857;margin-top:4px;" id="profilo-fea-verified-when"></div>
                            </div>
                            <button type="button" id="profilo-fea-change-btn" class="pv-action-btn" style="margin-top:12px;">
                                <i data-line-icon="pencil"></i> Aggiorna il numero
                            </button>
                        </div>

                        <div id="profilo-fea-state-pending" style="display:none;">
                            <div class="pv-info-box" style="background:#fffbeb;border-color:#fde68a;color:#92400e;">
                                <strong><i data-line-icon="clock" style="width:16px;height:16px;vertical-align:-3px;"></i> In attesa di approvazione</strong>
                                <div style="margin-top:6px;">Numero dichiarato: <strong id="profilo-fea-pending-phone">—</strong></div>
                                <div style="font-size:13px;color:#78350f;margin-top:4px;">Il tuo studio sta verificando il numero. Riceverai un'email quando sarà approvato.</div>
                            </div>
                            <button type="button" id="profilo-fea-cancel-pending-btn" class="pv-action-btn-muted" style="margin-top:12px;">
                                <i data-line-icon="x"></i> Modifica il numero
                            </button>
                        </div>

                        <form id="profilo-fea-form" style="display:none;">
                            <div style="margin-bottom:14px;">
                                <label for="profilo-fea-phone-input" style="display:block;font-weight:600;margin-bottom:6px;color:#18181b;">Numero di cellulare</label>
                                <input type="tel" id="profilo-fea-phone-input" class="pv-input"
                                    placeholder="+39 333 1234567" autocomplete="tel" required
                                    pattern="^\+[1-9]\d{7,14}$" inputmode="tel"
                                    style="width:100%;padding:12px 14px;border:1px solid #d4d4d8;border-radius:8px;font-size:15px;">
                                <div style="font-size:12px;color:#71717a;margin-top:6px;">Formato internazionale obbligatorio (esempio: +39 seguito dal numero senza spazi)</div>
                            </div>

                            <div class="pv-info-box" style="background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6;margin-bottom:14px;">
                                <strong>Dichiarazione di titolarità</strong>
                                <p id="profilo-fea-declaration-text" style="margin-top:8px;font-size:14px;line-height:1.6;color:#3f3f46;">
                                    Dichiaro sotto la mia esclusiva responsabilità di essere l'unico titolare e utilizzatore del numero di cellulare indicato, e acconsento al suo utilizzo quale strumento di identificazione per l'apposizione della Firma Elettronica Avanzata ai documenti trasmessi dal mio studio professionale, ai sensi del Reg. UE 910/2014 (eIDAS) Art. 26 e del DPCM 22/02/2013.
                                </p>
                            </div>

                            <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px;">
                                <input type="checkbox" id="profilo-fea-declaration-check" required style="margin-top:3px;width:18px;height:18px;flex-shrink:0;">
                                <span style="font-size:14px;color:#27272a;">Accetto la dichiarazione di titolarità sopra riportata e confermo l'autenticità del numero inserito.</span>
                            </label>

                            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                                <button type="submit" id="profilo-fea-submit-btn" class="pv-action-btn">
                                    <i data-line-icon="send"></i> Invia allo studio per approvazione
                                </button>
                                <button type="button" id="profilo-fea-abort-btn" class="pv-action-btn-muted" style="display:none;">Annulla</button>
                            </div>

                            <div id="profilo-fea-form-error" class="pv-form-error" style="display:none;margin-top:12px;padding:10px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#991b1b;font-size:14px;"></div>
                        </form>
                    </div>
                </div>

                <!-- Anagrafica read-only card -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-green"><i data-line-icon="id-card"></i></div>
                        <div>
                            <h3 class="pv-card-title">Anagrafica</h3>
                            <span class="pv-card-sub">Dati conservati dallo studio. Per modifiche, contatta il tuo referente.</span>
                        </div>
                    </div>
                    <div id="profilo-anagrafica-body" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>
            </section>

            <section id="view-privacy" class="view">

                <!-- Hero -->
                <div class="pv-hero-banner">
                    <div class="pv-hero-banner-bg"></div>
                    <div class="pv-hero-banner-content">
                        <div class="pv-hero-shield"><i data-line-icon="shield-check"></i></div>
                        <h2 class="pv-hero-title">Privacy & Dati</h2>
                        <p class="pv-hero-sub">I tuoi dati sono protetti. Qui puoi vedere cosa conserviamo, gestire le preferenze e esercitare i tuoi diritti.</p>
                        <div class="pv-trust-badges">
                            <span class="pv-trust-badge"><i data-line-icon="lock"></i> GDPR</span>
                            <span class="pv-trust-badge"><i data-line-icon="server"></i> Server UE</span>
                            <span class="pv-trust-badge"><i data-line-icon="eye-off"></i> No terzi</span>
                        </div>
                    </div>
                </div>

                <!-- GDPR Roles -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-purple"><i data-line-icon="shield-check"></i></div>
                        <h3 class="pv-card-title">Ruoli e Responsabilita</h3>
                    </div>
                    <div id="privacy-gdpr-roles" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Informativa GDPR -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-blue"><i data-line-icon="info"></i></div>
                        <div>
                            <h3 class="pv-card-title">Informativa sul Trattamento</h3>
                            <span class="pv-card-sub">Art. 13 GDPR — Reg. UE 2016/679</span>
                        </div>
                    </div>
                    <div class="pv-card-body pv-info-grid">
                        <div class="pv-info-box">
                            <strong>Titolare del Trattamento</strong>
                            Lo studio professionale che gestisce il tuo profilo. I dati di contatto sono nel tuo contratto di incarico.
                        </div>
                        <div class="pv-info-box">
                            <strong>Finalita e Base Giuridica</strong>
                            Esecuzione del contratto (Art. 6.1.b), obbligo legale per conservazione 10 anni (Art. 6.1.c), consenso per comunicazioni marketing (Art. 6.1.a).
                        </div>
                        <div class="pv-info-box">
                            <strong>Dati Trattati</strong>
                            Dati anagrafici, fiscali (P.IVA, CF, ATECO), di contatto, documenti contabili e comunicazioni con lo studio.
                        </div>
                        <div class="pv-info-box">
                            <strong>Conservazione</strong>
                            Dati contabili e fiscali: <strong>10 anni</strong> (Art. 2220 CC). Dati di contatto: fino a cessazione del rapporto.
                        </div>
                        <div class="pv-info-box">
                            <strong>Destinatari</strong>
                            Solo professionisti dello studio. Enti obbligatori: Agenzia Entrate, INPS/INAIL, banche. Nessuna cessione a terzi per fini commerciali.
                        </div>
                        <div class="pv-info-box">
                            <strong>Trasferimento Extra-UE</strong>
                            Google Cloud (Firebase) in data center UE (europe-west1). Google agisce come responsabile ex Art. 28 GDPR.
                        </div>
                    </div>
                </div>

                <!-- Preferenze Comunicazione -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-amber"><i data-line-icon="bell"></i></div>
                        <h3 class="pv-card-title">Preferenze Comunicazione</h3>
                    </div>
                    <div id="privacy-consent-toggles" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- I Tuoi Dati -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-green"><i data-line-icon="database"></i></div>
                        <div>
                            <h3 class="pv-card-title">I Tuoi Dati</h3>
                            <span class="pv-card-sub">Lo studio conserva i seguenti dati su di te</span>
                        </div>
                    </div>
                    <div id="privacy-data-summary" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Diritti GDPR -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-purple"><i data-line-icon="scale"></i></div>
                        <div>
                            <h3 class="pv-card-title">I Tuoi Diritti</h3>
                            <span class="pv-card-sub">GDPR Art. 15-22 — Lo studio ha 30 giorni per rispondere</span>
                        </div>
                    </div>
                    <div class="pv-card-body pv-rights-grid">
                        <button onclick="clientRequestDSR('access')" class="pv-right-btn">
                            <span class="pv-right-emoji">📥</span>
                            <div><strong>Scarica i miei dati</strong><small>Art. 15 — Diritto di accesso</small></div>
                        </button>
                        <button onclick="clientRequestDSR('rectification')" class="pv-right-btn">
                            <span class="pv-right-emoji">✏️</span>
                            <div><strong>Correggi i miei dati</strong><small>Art. 16 — Diritto di rettifica</small></div>
                        </button>
                        <button onclick="clientRequestDSR('restriction')" class="pv-right-btn">
                            <span class="pv-right-emoji">⏸️</span>
                            <div><strong>Limita il trattamento</strong><small>Art. 18 — Diritto di limitazione</small></div>
                        </button>
                        <button onclick="clientRequestDSR('portability')" class="pv-right-btn">
                            <span class="pv-right-emoji">📤</span>
                            <div><strong>Esporta dati</strong><small>Art. 20 — Diritto alla portabilita</small></div>
                        </button>
                        <button onclick="clientRequestDSR('objection')" class="pv-right-btn">
                            <span class="pv-right-emoji">🚫</span>
                            <div><strong>Opposizione al trattamento</strong><small>Art. 21 — Diritto di opposizione</small></div>
                        </button>
                        <button onclick="clientRequestDSR('erasure')" class="pv-right-btn pv-right-danger">
                            <span class="pv-right-emoji">🗑️</span>
                            <div><strong>Richiedi cancellazione</strong><small>Art. 17 — Diritto all'oblio</small></div>
                        </button>
                        <div class="pv-info-note">
                            <strong>Nota (Art. 2220 CC):</strong> I dati fiscali vengono conservati 10 anni come previsto dalla legge. I dati personali verranno anonimizzati.
                        </div>
                    </div>
                </div>

                <!-- Le Mie Richieste GDPR -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-amber"><i data-line-icon="clock"></i></div>
                        <h3 class="pv-card-title">Le Mie Richieste GDPR</h3>
                    </div>
                    <div id="privacy-dsr-status" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Storico Consensi -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-blue"><i data-line-icon="history"></i></div>
                        <h3 class="pv-card-title">Storico Consensi</h3>
                    </div>
                    <div id="privacy-consent-history" class="pv-card-body pv-scroll-200">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Le Mie Attivita -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-green"><i data-line-icon="activity"></i></div>
                        <h3 class="pv-card-title" style="flex:1;">Le Mie Attivita</h3>
                        <button type="button" onclick="exportActivityLogCSV()" class="pv-export-btn">Scarica CSV</button>
                    </div>
                    <div id="privacy-activity-log" class="pv-card-body pv-scroll-250">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Deleghe -->
                <div class="pv-card">
                    <div class="pv-card-header">
                        <div class="pv-card-icon pv-icon-purple"><i data-line-icon="users"></i></div>
                        <div>
                            <h3 class="pv-card-title">Deleghe</h3>
                            <span class="pv-card-sub">Chi hai autorizzato ad operare per tuo conto</span>
                        </div>
                    </div>
                    <div id="privacy-deleghe-section" class="pv-card-body">
                        <div class="pv-loading">Caricamento...</div>
                    </div>
                </div>

                <!-- Footer Links -->
                <div class="pv-footer">
                    <a href="https://prisma.optlyx.com/legal#privacy" target="_blank" rel="noopener">Leggi la Privacy Policy completa</a>
                    <a href="https://www.garanteprivacy.it/" target="_blank" rel="noopener" class="pv-footer-garante">Garante Privacy — www.garanteprivacy.it</a>
                    <p>Hai il diritto di proporre reclamo al Garante per la Protezione dei Dati Personali (Art. 77 GDPR)</p>
                </div>

            </section>

            <!-- TAB: TESORERIA -->
            <section id="view-tesoreria" class="view">

                <div class="welcome-card" style="margin-bottom: 20px;">
                    <div class="welcome-text">
                        <p class="welcome-greeting" style="display:flex; align-items:center; gap:8px;">
                            <i data-line-icon="wallet" style="width:20px; height:20px;"></i>
                            Tesoreria
                        </p>
                        <p style="font-size:13px; color:#64748b; margin-top:4px;">Panoramica finanziaria: fatturato,
                            costi, crediti e debiti</p>
                    </div>
                </div>

                <!-- KPI Cards Row -->
                <div id="treasury-kpi-row" class="treasury-kpi-row">
                    <div class="treasury-kpi-card">
                        <span class="treasury-kpi-label">Fatturato</span>
                        <span class="treasury-kpi-value" id="kpi-fatturato">--</span>
                        <span class="treasury-kpi-sub" id="kpi-fatturato-sub"></span>
                    </div>
                    <div class="treasury-kpi-card">
                        <span class="treasury-kpi-label">Costi</span>
                        <span class="treasury-kpi-value" id="kpi-costi">--</span>
                        <span class="treasury-kpi-sub" id="kpi-costi-sub"></span>
                    </div>
                    <div class="treasury-kpi-card kpi-accent">
                        <span class="treasury-kpi-label">Saldo Netto</span>
                        <span class="treasury-kpi-value" id="kpi-saldo">--</span>
                        <span class="treasury-kpi-sub" id="kpi-saldo-sub"></span>
                    </div>
                </div>

                <!-- Crediti / Debiti Cards -->
                <div class="treasury-duo-row">
                    <div class="content-card" style="flex:1; min-width:0;">
                        <h3 class="treasury-section-title">
                            <i data-line-icon="trending-up" style="width:16px; height:16px; color:#22c55e;"></i>
                            Crediti Aperti
                        </h3>
                        <div class="treasury-amount" id="crediti-total">--</div>
                        <div id="crediti-aging" class="treasury-aging-bars"></div>
                    </div>
                    <div class="content-card" style="flex:1; min-width:0;">
                        <h3 class="treasury-section-title">
                            <i data-line-icon="trending-down" style="width:16px; height:16px; color:#ef4444;"></i>
                            Debiti Aperti
                        </h3>
                        <div class="treasury-amount" id="debiti-total">--</div>
                        <div id="debiti-aging" class="treasury-aging-bars"></div>
                    </div>
                </div>

                <!-- Monthly Chart -->
                <div class="content-card" style="margin-bottom:16px;">
                    <h3 class="treasury-section-title">
                        <i data-line-icon="bar-chart-3" style="width:16px; height:16px; color:#6366f1;"></i>
                        Andamento Mensile
                    </h3>
                    <div id="treasury-chart" class="treasury-chart"></div>
                </div>

                <!-- Recent Invoices -->
                <div class="content-card" style="margin-bottom:16px;">
                    <h3 class="treasury-section-title">
                        <i data-line-icon="file-text" style="width:16px; height:16px; color:#6366f1;"></i>
                        Ultime Fatture
                    </h3>
                    <div id="treasury-invoices-list" class="treasury-list">
                        <div style="text-align:center; padding:16px; color:#94a3b8; font-size:13px;">Caricamento...
                        </div>
                    </div>
                </div>

                <!-- Open Items -->
                <div class="content-card" style="margin-bottom:80px;">
                    <h3 class="treasury-section-title">
                        <i data-line-icon="clock" style="width:16px; height:16px; color:#f59e0b;"></i>
                        Partite Aperte
                    </h3>
                    <div id="treasury-open-items" class="treasury-list">
                        <div style="text-align:center; padding:16px; color:#94a3b8; font-size:13px;">Caricamento...
                        </div>
                    </div>
                </div>

            </section>

            <!-- TAB: APPUNTAMENTI -->
            <section id="view-appuntamenti" class="view">

                <div class="cl-appt-header">
                    <div class="cl-appt-header-text">
                        <h2 class="cl-appt-title">Appuntamenti</h2>
                        <p class="cl-appt-sub">Prenota una consulenza con il tuo studio</p>
                    </div>
                    <div class="cl-appt-nav">
                        <button type="button" class="cl-appt-nav-btn" id="appt-cal-prev" onclick="clientCalPrev()">
                            <i data-line-icon="chevron-left"></i>
                        </button>
                        <span class="cl-appt-month-label" id="cl-appt-month-label"></span>
                        <button type="button" class="cl-appt-nav-btn" id="appt-cal-next" onclick="clientCalNext()">
                            <i data-line-icon="chevron-right"></i>
                        </button>
                    </div>
                </div>

                <!-- Mini month calendar -->
                <div id="cl-appt-cal-wrap" class="cl-appt-cal-wrap"></div>

                <!-- Loading -->
                <div id="appt-client-loading" class="appt-client-state">
                    <div class="client-spinner"></div>
                    <span style="font-family:'Plus Jakarta Sans',sans-serif;">Caricamento...</span>
                </div>

                <!-- Empty: no links configured by studio -->
                <div id="appt-client-empty" class="appt-client-state" hidden>
                    <div class="cl-appt-empty-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M8 2v4" /><path d="M16 2v4" />
                            <rect width="18" height="18" x="3" y="4" rx="2" />
                            <path d="M3 10h18" />
                        </svg>
                    </div>
                    <p>Nessun link di prenotazione disponibile.<br>Contatta il tuo studio per informazioni.</p>
                </div>

                <!-- Booking link cards -->
                <div id="appt-client-cards" hidden></div>

            </section>

            <!-- F24 PAYMENTS VIEW -->
            <section id="view-f24" class="view f24-view">
                <div class="f24-header">
                    <div class="f24-tagline">Fiscale</div>
                    <h2>Pagamenti F24</h2>
                    <p class="f24-subtitle">Controlla i dettagli e scegli come procedere: approva, non approva o indica un'alternativa.</p>
                </div>
                <div id="f24-list"></div>
            </section>

            <!-- TAB: PAGAMENTI (Stripe payment_requests) -->
            <section id="view-pagamenti" class="view">
                <div class="archive-header">
                    <div class="archive-tagline">Fatturazione</div>
                    <h2>Pagamenti</h2>
                    <p class="archive-subtitle">Le richieste di pagamento del tuo studio. Usa il link ricevuto via email per procedere al pagamento con carta.</p>
                </div>
                <div id="client-pay-list"></div>
            </section>

            <!-- BOOKING EMBED MODAL -->
            <div id="booking-embed-modal" class="modal-overlay hidden">
                <div class="booking-embed-content">
                    <div class="booking-embed-header">
                        <span id="booking-embed-title" class="booking-embed-title">Prenota appuntamento</span>
                        <div class="booking-embed-actions">
                            <a id="booking-embed-ext" href="#" target="_blank" rel="noopener" class="btn-icon-soft"
                                title="Apri in nuova scheda">
                                <i data-line-icon="external-link"></i>
                            </a>
                            <button type="button" onclick="closeBookingEmbed()" class="btn-icon-soft">
                                <i data-line-icon="x"></i>
                            </button>
                        </div>
                    </div>
                    <div class="booking-embed-body">
                        <iframe id="booking-iframe" src="" allow="camera; microphone; autoplay; clipboard-write"
                            style="width:100%;height:100%;border:none;display:block;"></iframe>
                        <div id="booking-iframe-fallback" class="booking-embed-fallback" style="display:none;">
                            <div class="cl-appt-empty-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                    <polyline points="15 3 21 3 21 9"/>
                                    <line x1="10" y1="14" x2="21" y2="3"/>
                                </svg>
                            </div>
                            <p>Il calendario non può essere caricato qui.<br>Aprilo in una nuova scheda per procedere.</p>
                            <a id="booking-fallback-link" href="#" target="_blank" rel="noopener"
                                class="appt-book-btn appt-book-btn-primary">
                                <i data-line-icon="external-link"></i> Apri pagina di prenotazione
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SLOT PICKER MODAL (native availability calendars) -->
            <div id="slot-picker-modal" class="modal-overlay hidden" onclick="if(event.target===this)closeSlotPicker()">
                <div class="slot-picker-panel">
                    <div class="slot-picker-header">
                        <div>
                            <h3 id="slot-picker-title">Prenota appuntamento</h3>
                            <p id="slot-picker-subtitle">Seleziona data e orario</p>
                        </div>
                        <button onclick="closeSlotPicker()" class="slot-picker-close">&times;</button>
                    </div>
                    <div class="slot-picker-body">
                        <div id="slot-picker-date" style="margin-bottom:20px;">
                            <label class="slot-picker-label">Data</label>
                            <input type="date" id="slot-date-input" onchange="onSlotDateChange()"
                                class="slot-picker-date-input" />
                        </div>
                        <div id="slot-picker-slots" style="display:none;">
                            <label class="slot-picker-label">Orari disponibili</label>
                            <div id="slot-list" class="slot-picker-grid"></div>
                        </div>
                        <div id="slot-picker-empty" class="slot-picker-empty" style="display:none;">
                            Nessun orario disponibile per questa data
                        </div>
                        <div id="slot-picker-loading" class="slot-picker-loading" style="display:none;">
                            <div class="client-spinner" style="margin:0 auto 8px;"></div>
                            Caricamento...
                        </div>
                    </div>
                </div>
            </div>


        </main>

        <!-- BOTTOM NAV -->
        <nav class="bottom-nav">
            <div class="nav-slider" id="nav-slider"></div>
            <button onclick="switchTab('panoramica')" id="nav-panoramica" class="nav-item active">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
                    <path
                        d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                </svg>
                <span>Home</span>
            </button>
            <button onclick="switchTab('checklist')" id="nav-checklist" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M11 18H3" />
                    <path d="M11 12H3" />
                    <path d="M11 6H3" />
                    <path d="m15 18 2 2 4-4" />
                    <path d="m15 12 2 2 4-4" />
                    <path d="m15 6 2 2 4-4" />
                </svg>
                <span>Checklist</span>
                <span id="checklist-badge" class="nav-badge hidden">0</span>
            </button>
            <button onclick="switchTab('documenti-archivio')" id="nav-documenti-archivio" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z" />
                </svg>
                <span>Docs</span>
            </button>
            <button onclick="switchTab('tesoreria')" id="nav-tesoreria" class="nav-item" hidden>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="6" width="20" height="12" rx="2" />
                    <path d="M22 10H2" />
                    <path d="M6 14h2" />
                    <path d="M12 14h4" />
                </svg>
                <span>Tesoreria</span>
            </button>
            <button onclick="switchTab('appuntamenti')" id="nav-appuntamenti" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M8 2v4" />
                    <path d="M16 2v4" />
                    <rect width="18" height="18" x="3" y="4" rx="2" />
                    <path d="M3 10h18" />
                    <path d="M8 14h.01" />
                    <path d="M12 14h.01" />
                    <path d="M16 14h.01" />
                    <path d="M8 18h.01" />
                    <path d="M12 18h.01" />
                    <path d="M16 18h.01" />
                </svg>
                <span>Prenota</span>
            </button>
            <button onclick="switchTab('chat')" id="nav-chat" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z" />
                </svg>
                <span>Chat</span>
                <span id="chat-badge" class="nav-badge hidden">0</span>
            </button>
            <button onclick="switchTab('f24')" id="nav-f24" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
                    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
                    <path d="M10 9H8" />
                    <path d="M16 13H8" />
                    <path d="M16 17H8" />
                </svg>
                <span>F24</span>
                <span id="f24-badge" class="nav-badge hidden">0</span>
            </button>
            <button onclick="switchTab('spese')" id="nav-spese" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5V9H4z" />
                    <path d="M4 9h16v7.5A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5z" />
                    <path d="M8 13h8" />
                    <path d="M8 16h5" />
                </svg>
                <span>Spese</span>
            </button>
            <button onclick="switchTab('pagamenti')" id="nav-pagamenti" class="nav-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <rect width="20" height="14" x="2" y="5" rx="2" />
                    <line x1="2" x2="22" y1="10" y2="10" />
                </svg>
                <span>Pagamenti</span>
            </button>
        </nav>

    </div>

    <!-- SCANNER MODAL -->
    <div id="scanner-modal" class="modal-overlay hidden">
        <div class="modal-panel scanner-panel">
            <div class="modal-header">
                <h2><i data-line-icon="scan"></i> Scansiona Documento</h2>
                <button onclick="closeScanner()" class="btn-icon-soft">
                    <i data-line-icon="x"></i>
                </button>
            </div>

            <!-- Capture State -->
            <div id="scanner-capture" class="scanner-state active">
                <div class="camera-box">
                    <video id="camera-preview" autoplay playsinline></video>
                    <canvas id="camera-canvas" class="hidden"></canvas>
                    <div class="camera-frame">
                        <div class="corner tl"></div>
                        <div class="corner tr"></div>
                        <div class="corner bl"></div>
                        <div class="corner br"></div>
                    </div>
                    <div id="camera-placeholder" class="camera-placeholder">
                        <i data-line-icon="camera"></i>
                        <p>Premi il pulsante per scattare</p>
                    </div>
                </div>
                <button onclick="capturePhoto()" class="capture-btn" id="capture-btn">
                    <div class="capture-ring"></div>
                </button>
                <p class="scanner-hint">Inquadra il documento e scatta</p>
            </div>

            <!-- Analyzing State -->
            <div id="scanner-analyzing" class="scanner-state">
                <div class="analyzing-anim">
                    <div class="anim-circle">
                        <i data-line-icon="brain"></i>
                    </div>
                </div>
                <h3>Analisi AI...</h3>
                <p>Verifica qualità immagine</p>
            </div>

            <!-- Result State -->
            <div id="scanner-result" class="scanner-state">
                <div class="preview-box">
                    <img id="captured-image" src="" alt="Anteprima">
                </div>
                <div id="quality-feedback" class="quality-box"></div>
                <div class="action-row">
                    <button onclick="retakePhoto()" class="btn-secondary">
                        <i data-line-icon="refresh-cw"></i> Riprova
                    </button>
                    <button onclick="sendScannedDocument()" class="btn-primary" id="send-doc-btn">
                        <i data-line-icon="send"></i> Invia
                    </button>
                </div>
            </div>

            <!-- Error State -->
            <div id="scanner-error" class="scanner-state">
                <div class="error-icon">
                    <i data-line-icon="alert-triangle"></i>
                </div>
                <h3 id="error-title">Immagine sfocata</h3>
                <p id="error-message">Tieni fermo il telefono e riprova.</p>
                <button onclick="retakePhoto()" class="btn-primary full">
                    <i data-line-icon="camera"></i> Riprova
                </button>
            </div>
        </div>
    </div>

    <!-- SETTINGS MODAL -->
    <div id="settings-modal" class="modal-overlay hidden">
        <div class="modal-panel settings-panel">
            <div class="modal-header about-modal-header">
                <div class="modal-title-group">
                    <i data-line-icon="settings"></i>
                    <h2>Impostazioni</h2>
                </div>
                <button onclick="closeSettingsModal()" class="btn-close-pill">
                    <i data-line-icon="x"></i>
                </button>
            </div>

            <div class="settings-content">
                <!-- Profile Photo + Name -->
                <div class="settings-section">
                    <div class="profile-photo-section">
                        <div class="profile-photo-wrapper" onclick="document.getElementById('profile-photo-input').click()">
                            <div class="profile-photo-preview" id="profile-photo-preview">
                                <span id="profile-photo-initials">CL</span>
                            </div>
                            <div class="profile-photo-overlay">
                                <i data-line-icon="camera"></i>
                            </div>
                        </div>
                        <input type="file" id="profile-photo-input" class="hidden" accept="image/*" title="Carica foto profilo" onchange="handleProfilePhotoUpload(this)">
                        <div class="profile-photo-info">
                            <span class="profile-photo-hint">Tocca per cambiare foto</span>
                            <button type="button" id="profile-photo-remove" class="profile-photo-remove-btn" style="display:none" onclick="removeProfilePhoto()">Rimuovi foto</button>
                        </div>
                    </div>
                    <div class="settings-form-group" style="margin-top:16px;">
                        <label class="settings-label">Nome visualizzato</label>
                        <input type="text" id="settings-display-name" class="settings-input" placeholder="Il tuo nome">
                    </div>
                </div>

                <!-- Email Section -->
                <div class="settings-section">
                    <h3 class="settings-section-title">Email</h3>
                    <div class="settings-form-group">
                        <label class="settings-label">Indirizzo email</label>
                        <input type="email" id="settings-email" class="settings-input" placeholder="tua@email.com">
                        <button onclick="updateEmail()" class="btn-primary">Aggiorna Email</button>
                    </div>
                </div>

                <!-- Profilo Fiscale Section -->
                <div class="settings-section">
                    <h3 class="settings-section-title" style="display:flex;align-items:center;gap:6px;">
                        <i data-line-icon="sparkles" style="width:13px;height:13px;color:#7c3aed;"></i>
                        Profilo Fiscale AI
                    </h3>
                    <p style="font-size:11px;color:#a8a29e;margin:0 0 10px 0;">Usato dal consulente AI per rispondere
                        correttamente alla tua situazione.</p>
                    <div class="settings-form-group">
                        <label class="settings-label">Regime Fiscale</label>
                        <select id="settings-regime" class="settings-input">
                            <option value="">Non specificato</option>
                            <option value="RF01">RF01 — Ordinario</option>
                            <option value="RF02">RF02 — Contribuenti minimi</option>
                            <option value="RF04">RF04 — Agricoltura e attività connesse</option>
                            <option value="RF10">RF10 — Imprese minori (ex minimi)</option>
                            <option value="RF17">RF17 — Regime del vantaggio</option>
                            <option value="RF19">RF19 — Forfettario (L. 190/2014)</option>
                        </select>
                    </div>
                    <div class="settings-form-group">
                        <label class="settings-label">Codice ATECO</label>
                        <input type="text" id="settings-ateco" class="settings-input" placeholder="es. 69.20.1"
                            maxlength="20" style="font-family:monospace;letter-spacing:.02em;">
                    </div>
                    <div class="settings-form-group">
                        <label class="settings-label">Partita IVA</label>
                        <input type="text" id="settings-piva" class="settings-input" placeholder="12345678901"
                            maxlength="16" style="font-family:monospace;letter-spacing:.02em;">
                    </div>
                    <div class="settings-form-group">
                        <label class="settings-label">Codice Fiscale</label>
                        <input type="text" id="settings-cf" class="settings-input" placeholder="RSSMRA80A01H501U"
                            maxlength="16" style="font-family:monospace;letter-spacing:.02em;"
                            oninput="this.value=this.value.toUpperCase()">
                    </div>
                </div>

                <!-- Notifications Section -->
                <div class="settings-section">
                    <h3 class="settings-section-title">Notifiche</h3>
                    <div class="settings-toggle">
                        <label class="settings-label">Notifiche via email</label>
                        <input type="checkbox" id="settings-email-notifications" checked>
                    </div>
                </div>

                <!-- Aspetto / Personalizzazione -->
                <div class="settings-section">
                    <h3 class="settings-section-title">Aspetto</h3>

                    <!-- Logo aziendale -->
                    <div class="settings-form-group">
                        <label class="settings-label">Logo della tua azienda</label>
                        <div class="logo-upload-row">
                            <div class="logo-upload-preview" id="logo-upload-preview" onclick="document.getElementById('logo-upload-input').click()">
                                <img id="logo-preview-img" src="" alt="" style="display:none;">
                                <div id="logo-preview-placeholder" class="logo-preview-placeholder">
                                    <i data-line-icon="image-plus"></i>
                                    <span>Carica logo</span>
                                </div>
                            </div>
                            <input type="file" id="logo-upload-input" class="hidden" accept="image/*" title="Carica logo aziendale" onchange="handleLogoUpload(this)">
                            <div class="logo-upload-info">
                                <p>Apparira nell'header al posto del logo Optlyx</p>
                                <button type="button" id="logo-remove-btn" class="profile-photo-remove-btn" style="display:none" onclick="removeLogo()">Rimuovi logo</button>
                            </div>
                        </div>
                    </div>

                    <!-- Tema -->
                    <div class="settings-form-group">
                        <label class="settings-label">Tema</label>
                        <div class="theme-picker" id="theme-picker">
                            <button type="button" class="theme-option active" data-theme="light" onclick="setTheme('light')">
                                <i data-line-icon="sun"></i> Chiaro
                            </button>
                            <button type="button" class="theme-option" data-theme="dark" onclick="setTheme('dark')">
                                <i data-line-icon="moon"></i> Scuro
                            </button>
                            <button type="button" class="theme-option" data-theme="auto" onclick="setTheme('auto')">
                                <i data-line-icon="monitor"></i> Auto
                            </button>
                        </div>
                    </div>

                    <!-- Colore accent -->
                    <div class="settings-form-group">
                        <label class="settings-label">Colore accento</label>
                        <div class="accent-picker" id="accent-picker">
                            <button type="button" class="accent-dot active" data-accent="default" onclick="setAccent('default')" title="Predefinito"><span style="background:#1a1a1a"></span></button>
                            <button type="button" class="accent-dot" data-accent="blue" onclick="setAccent('blue')" title="Blu"><span style="background:#2563eb"></span></button>
                            <button type="button" class="accent-dot" data-accent="purple" onclick="setAccent('purple')" title="Viola"><span style="background:#7c3aed"></span></button>
                            <button type="button" class="accent-dot" data-accent="green" onclick="setAccent('green')" title="Verde"><span style="background:#059669"></span></button>
                            <button type="button" class="accent-dot" data-accent="orange" onclick="setAccent('orange')" title="Arancione"><span style="background:#ea580c"></span></button>
                            <button type="button" class="accent-dot" data-accent="rose" onclick="setAccent('rose')" title="Rosa"><span style="background:#e11d48"></span></button>
                        </div>
                    </div>

                    <!-- Dimensione testo -->
                    <div class="settings-form-group">
                        <label class="settings-label">Dimensione testo</label>
                        <div class="fontsize-picker" id="fontsize-picker">
                            <button type="button" class="fontsize-option" data-size="small" onclick="setFontSize('small')">A</button>
                            <button type="button" class="fontsize-option active" data-size="medium" onclick="setFontSize('medium')">A</button>
                            <button type="button" class="fontsize-option" data-size="large" onclick="setFontSize('large')">A</button>
                        </div>
                    </div>
                </div>

                <!-- Save Button -->
                <button type="button" onclick="saveSettings()" class="btn-primary full">
                    <i data-line-icon="save"></i> Salva Modifiche
                </button>

                <!-- Divider -->
                <div class="settings-divider"></div>

                <button onclick="closeSettingsModal(); switchTab('privacy')" class="settings-link-btn">
                    <i data-line-icon="shield"></i>
                    <span>Privacy & Dati</span>
                    <i data-line-icon="chevron-right" class="chevron"></i>
                </button>

                <!-- Privacy & Info -->
                <button onclick="closeSettingsModal(); openAboutModal();" class="settings-link-btn">
                    <i data-line-icon="info"></i>
                    <span>Chi è Optlyx</span>
                    <i data-line-icon="chevron-right" class="chevron"></i>
                </button>

                <!-- Logout -->
                <button onclick="auth.signOut()" class="settings-link-btn logout-btn">
                    <i data-line-icon="log-out"></i>
                    <span>Esci</span>
                </button>
            </div>

        </div>
    </div>

    <!-- ABOUT MODAL -->
    <div id="about-modal" class="modal-overlay hidden">
        <div class="modal-panel about-panel">
            <div class="modal-header about-modal-header">
                <div class="modal-title-group">
                    <i data-line-icon="info"></i>
                    <h2>Chi è Optlyx</h2>
                </div>
                <button onclick="closeAboutModal()" class="btn-close-pill">
                    <i data-line-icon="x"></i>
                </button>
            </div>

            <div class="about-content">
                <!-- Hero Section -->
                <div class="about-hero">
                    <img src="https://firebasestorage.googleapis.com/v0/b/playground-optlyx.firebasestorage.app/o/optlyxAssets%2Flogo%20text%20gradient.png?alt=media&token=702630a6-83df-4768-b377-73b10be5e212"
                        alt="Optlyx" class="about-logo">
                    <p class="about-tagline">La piattaforma che connette te al tuo Studio con semplicità e sicurezza.
                    </p>
                </div>

                <!-- Trust Badges -->
                <div class="trust-badges">
                    <div class="trust-badge">
                        <i data-line-icon="shield-check"></i>
                        <span>GDPR Compliant</span>
                    </div>
                    <div class="trust-badge">
                        <i data-line-icon="lock"></i>
                        <span>Crittografia End-to-End</span>
                    </div>
                    <div class="trust-badge">
                        <i data-line-icon="server"></i>
                        <span>Server EU</span>
                    </div>
                </div>

                <!-- Info Sections -->
                <div class="about-section">
                    <div class="about-section-icon">
                        <i data-line-icon="database"></i>
                    </div>
                    <div class="about-section-content">
                        <h3>Dove sono i tuoi dati?</h3>
                        <p>I tuoi dati sono conservati su server sicuri <strong>Google Cloud</strong> situati
                            nell'Unione Europea (Belgio e Paesi Bassi). Sono protetti con crittografia AES-256 e
                            accessibili solo a te e al tuo Studio.</p>
                    </div>
                </div>

                <div class="about-section">
                    <div class="about-section-icon">
                        <i data-line-icon="eye-off"></i>
                    </div>
                    <div class="about-section-content">
                        <h3>Chi può vedere i miei dati?</h3>
                        <p>Solo tu e il tuo Studio commercialista. Optlyx non ha accesso ai contenuti dei tuoi documenti
                            o messaggi. Siamo un ponte sicuro, non un intermediario.</p>
                    </div>
                </div>

                <div class="about-section">
                    <div class="about-section-icon">
                        <i data-line-icon="trash-2"></i>
                    </div>
                    <div class="about-section-content">
                        <h3>Posso cancellare i miei dati?</h3>
                        <p>Sì, in qualsiasi momento. Contatta il tuo Studio e richiedi la cancellazione completa. Entro
                            30 giorni tutti i tuoi dati saranno rimossi definitivamente.</p>
                    </div>
                </div>

                <!-- Contact -->
                <div class="about-footer">
                    <p>Hai domande? Contatta il supporto a <a href="mailto:support@optlyx.com">support@optlyx.com</a>
                    </p>
                    <p class="about-version">Optlyx Client Portal v2.0</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Scadenze Modal -->
    <div id="scadenze-modal" class="modal-overlay hidden">
        <div class="modal scadenze-modal">
            <div class="modal-header">
                <div class="modal-title-group">
                    <i data-line-icon="calendar"></i>
                    <h2>Le Tue Scadenze</h2>
                </div>
                <button class="modal-close" onclick="closeScadenzeModal()">
                    <i data-line-icon="x"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="scadenze-list" class="scadenze-list">
                    <div class="loading-spinner">
                        <i data-line-icon="loader-2" class="spin"></i>
                        <p>Caricamento scadenze...</p>
                    </div>
                </div>
                <div id="scadenze-empty" class="empty-state hidden">
                    <i data-line-icon="calendar-check"></i>
                    <h3>Nessuna scadenza</h3>
                    <p>Non hai scadenze assegnate al momento</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Documenti Modal -->
    <div id="documenti-modal" class="modal-overlay hidden">
        <div class="modal documenti-modal">
            <div class="modal-header">
                <div class="modal-title-group">
                    <i data-line-icon="folder-open"></i>
                    <h2>I Tuoi Documenti</h2>
                </div>
                <button class="modal-close" onclick="closeDocumentiModal()">
                    <i data-line-icon="x"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="documenti-list" class="documenti-list">
                    <div class="loading-spinner">
                        <i data-line-icon="loader-2" class="spin"></i>
                        <p>Caricamento documenti...</p>
                    </div>
                </div>
                <div id="documenti-empty" class="empty-state hidden">
                    <i data-line-icon="file-x"></i>
                    <h3>Nessun documento</h3>
                    <p>Non hai ancora documenti condivisi con lo studio</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Document Preview Modal -->
    <div id="doc-preview-modal" class="modal-overlay hidden">
        <div class="doc-preview-modal">
            <div class="doc-preview-header">
                <div class="doc-preview-title">
                    <i data-line-icon="file-text"></i>
                    <span id="doc-preview-name">Documento</span>
                </div>
                <div class="doc-preview-actions">
                    <a id="doc-preview-download" href="#" target="_blank" class="btn-preview-download">
                        <i data-line-icon="download"></i>
                        Scarica
                    </a>
                    <button onclick="closeDocPreview()" class="btn-preview-close">
                        <i data-line-icon="x"></i>
                    </button>
                </div>
            </div>
            <div class="doc-preview-content">
                <div id="doc-preview-loader" class="preview-loader">
                    <i data-line-icon="loader-2" class="spin"></i>
                    <span>Caricamento anteprima...</span>
                </div>
                <iframe id="doc-preview-iframe" class="doc-preview-iframe hidden" frameborder="0"></iframe>
                <img id="doc-preview-image" class="doc-preview-image hidden" alt="Anteprima documento">
                <div id="doc-preview-unsupported" class="preview-unsupported hidden">
                    <i data-line-icon="file-question"></i>
                    <p>Anteprima non disponibile per questo tipo di file</p>
                    <a id="doc-preview-fallback-download" href="#" target="_blank" class="btn-primary">
                        <i data-line-icon="download"></i> Scarica per visualizzare
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Expense Edit Modal -->
    <div id="expense-edit-modal" class="modal-overlay hidden">
        <div class="modal documenti-modal expense-edit-modal">
            <div class="modal-header">
                <div class="modal-title-group">
                    <i data-line-icon="receipt"></i>
                    <h2 id="expense-modal-title">Modifica spesa</h2>
                </div>
                <button class="modal-close" onclick="closeExpenseModal()">
                    <i data-line-icon="x"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="expense-form" class="expense-form" action="javascript:void(0)" onsubmit="saveExpenseForm(); return false;">
                    <input type="hidden" id="expense-form-id">
                    <div class="expense-form-grid">
                        <label class="expense-field">
                            <span>Importo</span>
                            <input type="number" id="expense-form-amount" inputmode="decimal" min="0" step="0.01" placeholder="0,00" required>
                        </label>
                        <label class="expense-field">
                            <span>Data</span>
                            <input type="date" id="expense-form-date" required>
                        </label>
                    </div>
                    <label class="expense-field">
                        <span>Fornitore</span>
                        <input type="text" id="expense-form-vendor" placeholder="Es. Enel, Bar Centrale">
                    </label>
                    <label class="expense-field">
                        <span>Categoria</span>
                        <select id="expense-form-category">
                            <option value="ristorazione">Ristorazione</option>
                            <option value="carburante">Carburante</option>
                            <option value="materiali">Materiali</option>
                            <option value="servizi">Servizi</option>
                            <option value="trasporti">Trasporti</option>
                            <option value="utenze">Utenze</option>
                            <option value="altro">Altro</option>
                        </select>
                    </label>
                    <div class="expense-form-actions">
                        <button type="button" class="expense-toolbar-btn expense-toolbar-btn-secondary" onclick="closeExpenseModal()">Annulla</button>
                        <button type="submit" id="expense-form-submit" class="expense-toolbar-btn">
                            <i data-line-icon="save"></i>
                            <span>Salva</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script defer src="js/clientApp.js"></script>
    <script defer src="js/cookie-consent.js"></script>
</body>

</html>
