:root { 
            --app-bg: #080808; 
            --bg-main: #1e1e1e; 
            --bg-card: #2a2a29; 
            --bg-input: #333333;
            --bg-nav: rgba(21, 21, 21, 0.95);
            --accent-orange: #e0701b; 
            --accent-dark: #c05d12;
            --text-main: #ecf0f1; 
            --text-muted: #aaaaaa;
            --border-main: #3a3a3a; 
            --success-color: #27ae60; 
            --danger-color: #e74c3c; 
            --disabled-grey: #555555; 
            --shadow-sm: rgba(0,0,0,0.3);
            --shadow-md: rgba(0,0,0,0.5);
            --shadow-lg: rgba(0,0,0,0.9);
            --overlay-bg: rgba(0,0,0,0.85);
            --pattern-color: rgba(255, 255, 255, 0.012);
        }

        [data-theme="purple"] {
            --app-bg: #0f0714; 
            --bg-main: #1a0f24; 
            --bg-card: #261635; 
            --bg-input: #321d46;
            --bg-nav: rgba(26, 15, 36, 0.95);
            --accent-orange: #b862f8; 
            --accent-dark: #8a3bd4;
            --text-main: #f5ebfa; 
            --text-muted: #b89ac9;
            --border-main: #4b2e63; 
            --pattern-color: rgba(255, 255, 255, 0.015);
        }

        [data-theme="light"] {
            --app-bg: #e9ecef; 
            --bg-main: #f4f7f6; 
            --bg-card: #ffffff; 
            --bg-input: #ffffff;
            --bg-nav: rgba(255, 255, 255, 0.95);
            --accent-orange: #e0701b; 
            --accent-dark: #c05d12;
            --text-main: #2c3e50; 
            --text-muted: #7f8c8d;
            --border-main: #dcdde1; 
            --disabled-grey: #bdc3c7;
            --shadow-sm: rgba(0,0,0,0.08);
            --shadow-md: rgba(0,0,0,0.12);
            --shadow-lg: rgba(0,0,0,0.15);
            --overlay-bg: rgba(0,0,0,0.5);
            --pattern-color: rgba(0, 0, 0, 0.015);
        }

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

        html, body { 
            margin: 0; padding: 0; width: 100%;
            font-family: 'Poppins', sans-serif; 
            background-color: #080808;
            color: var(--text-main); 
            height: 100vh; height: 100dvh; 
            overflow: hidden; 
            overscroll-behavior-y: none;
            -webkit-text-size-adjust: 100%;
            word-wrap: break-word; 
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container { 
            width: 100%; max-width: 600px; margin: 0 auto; height: 100%; 
            display: flex; flex-direction: column; position: relative; 
            background-color: var(--bg-main); 

            /* TEXTURE SPUGNA BUGNATA A ROMBI */
            background-image: 
                linear-gradient(135deg, var(--pattern-color) 25%, transparent 25%),
                linear-gradient(225deg, var(--pattern-color) 25%, transparent 25%),
                linear-gradient(315deg, var(--pattern-color) 25%, transparent 25%),
                linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%);
            background-size: 16px 16px;
            background-position: -8px 0, -8px 0, 0 0, 0 0;
            
            box-shadow: 0 0 30px var(--shadow-lg); 
            overflow: hidden;
            transition: background-color 0.3s ease, max-width 0.3s ease;
        }

        /* --- LAYOUT DESKTOP ADMIN & CLIENT --- */
        @media (min-width: 992px) {
            .container {
                max-width: 800px !important;
                border-radius: 16px;
                margin: 20px auto;
                height: calc(100vh - 40px);
            }
            
            body.admin-mode .container {
                max-width: 96vw !important;
                width: 1500px !important;
            }

            #main-admin-app {
                flex-direction: row !important;
                width: 100%;
            }

            body.admin-mode .admin-bottom-nav {
                position: static !important;
                width: 120px !important;
                height: 100%;
                flex-direction: column !important;
                justify-content: flex-start !important;
                padding-top: 30px !important;
                border-top: none !important;
                border-right: 1px solid var(--border-main);
                box-shadow: 4px 0 15px var(--shadow-sm);
                order: -1 !important; 
                z-index: 10;
            }

            body.admin-mode .admin-nav-item {
                flex: none !important;
                padding: 15px 5px !important;
                margin-bottom: 15px !important;
                font-size: 0.85rem !important;
            }

            body.admin-mode .admin-nav-item i {
                font-size: 1.5rem !important;
                margin-bottom: 8px !important;
            }

            body.admin-mode .content-area {
                padding-bottom: 20px !important;
                padding-left: 40px !important;
                padding-right: 40px !important;
                flex: 1 !important; 
                width: calc(100% - 120px) !important;
            }
        }

        @media (max-width: 991px) {
            .timeline-toggle-wrapper { display: none !important; }
        }

        /* --- STILI TIMELINE VISIVA ADMIN --- */
        .timeline-table-container { overflow-x: auto; width: 100%; border-radius: 12px; border: 1px solid var(--border-main); background: var(--bg-card); margin-bottom: 30px; }
        .timeline-table { width: 100%; border-collapse: collapse; min-width: 900px; text-align: center; font-size: 0.95rem; }
        .timeline-table th, .timeline-table td { border: 1px solid var(--border-main); padding: 0; }
        .timeline-table th { background: var(--bg-input); padding: 15px 5px; position: sticky; top: 0; z-index: 10; font-size: 1.05rem; }
        .timeline-cell-time { width: 80px; font-weight: bold; background: var(--bg-input); color: var(--text-main); font-size: 1rem; }
        .timeline-cell-free { background-color: var(--bg-card); cursor: pointer; transition: 0.2s; height: 45px; }
        .timeline-cell-free:hover { background-color: rgba(224, 112, 27, 0.1); }
        .timeline-cell-booked { padding: 5px; vertical-align: top; }
        .timeline-bubble { background: linear-gradient(135deg, var(--accent-orange), var(--accent-dark)); color: white; cursor: pointer; border-radius: 8px; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); height: 100%; display: flex; flex-direction: column; justify-content: center; transition: transform 0.2s; }
        .timeline-bubble:active { transform: scale(0.97); }
        .timeline-bubble .band-name { font-weight: bold; font-size: 1.1rem; line-height: 1.2; margin-bottom: 5px; }
        .timeline-bubble .band-meta { font-size: 0.85rem; opacity: 0.9; }

        .content-area { 
            flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; 
            padding: 20px; 
            padding-top: calc(20px + env(safe-area-inset-top));
            padding-bottom: calc(120px + env(safe-area-inset-bottom)); 
            width: 100%; 
        }
        
        .hp-hidden { display: none !important; position: absolute; left: -9999px; }

        #auth-view { 
            display: block; 
            padding: 20px; 
            padding-top: calc(20px + env(safe-area-inset-top));
            overflow-y: auto; 
            height: 100%; 
            -webkit-overflow-scrolling: touch; 
            padding-bottom: 60px; 
        }
        .login-box { background: var(--bg-card); padding: 25px; border-radius: 16px; margin-top: 30px; box-shadow: 0 10px 25px var(--shadow-md); transition: background-color 0.3s ease;}
        .login-input { width: 100%; padding: 14px; margin: 8px 0; border-radius: 10px; border: 1px solid var(--border-main); background: var(--bg-input); color: var(--text-main); font-family: 'Poppins', sans-serif; transition: 0.3s ease;}
        textarea.login-input { min-height: 100px; resize: vertical; }

        .pwd-wrapper { position: relative; width: 100%; margin: 8px 0; }
        .pwd-wrapper .login-input { margin: 0; padding-right: 40px; }
        .pwd-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }

        .btn-main { width: 100%; padding: 14px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; margin-top: 10px; font-size: 1rem; transition: transform 0.2s, background 0.2s; }
        .btn-main:active { transform: scale(0.98); }
        .btn-orange { background: var(--accent-orange); color: white; }
        .btn-green { background: var(--success-color); color: white; }
        .auth-toggle { text-align: center; margin-top: 20px; font-size: 0.9rem; cursor: pointer; color: var(--accent-orange); text-decoration: underline; }
        
        .bottom-nav, .admin-bottom-nav { 
            position: absolute; bottom: 0; left: 0; width: 100%; 
            background: var(--bg-nav);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            display: flex; justify-content: space-around; padding: 12px 0; 
            box-shadow: 0 -4px 20px var(--shadow-md); z-index: 100; 
            padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-main); 
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .nav-item, .admin-nav-item { background: none; border: none; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; font-size: 0.70rem; font-family: 'Poppins', sans-serif; cursor: pointer; flex: 1; transition: 0.3s; padding: 5px; }
        .nav-item i, .admin-nav-item i { font-size: 1.3rem; margin-bottom: 4px; }
        .nav-item.active, .admin-nav-item.active { color: var(--accent-orange); transform: translateY(-3px); font-weight:bold; }
        
        .form-group { margin-bottom: 20px; position: relative; width: 100%; }
        label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
        select, input[type="date"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="time"] { width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--border-main); background: var(--bg-input); color: var(--text-main); font-family: 'Poppins', sans-serif; font-size: 1rem; transition: 0.3s ease;}
        
        #app-view { display: none; height: 100%; flex-direction: column; }
        .tab-content { display: none; width: 100%; }
        .tab-content.active { display: block; }
        
        #prenota-button { width: 100%; padding: 15px; background: var(--success-color); color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: bold; margin-top: 20px; cursor: pointer; margin-bottom: 20px; transition: 0.3s;}
        #prenota-button:disabled { background: var(--disabled-grey); cursor: not-allowed;}
        
        /* STILI WIZARD CLIENTE */
        .wizard-steps-indicator { display: flex; justify-content: space-between; margin-bottom: 20px; position: relative; }
        .wizard-steps-indicator::before { content: ''; position: absolute; top: 18px; left: 15%; right: 15%; height: 3px; background: var(--border-main); z-index: 1; }
        .wizard-step-node { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border-main); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.85rem; transition: 0.3s; }
        .wizard-step-node.active { border-color: var(--accent-orange); background: var(--accent-orange); color: white; }
        .wizard-step-node.completed { border-color: var(--success-color); background: var(--success-color); color: white; }

        /* MATRICE GRIGLIA SALE CLIENTE */
        .matrix-table-container { overflow-x: auto; width: 100%; margin-top: 15px; border-radius: 12px; border: 1px solid var(--border-main); background: var(--bg-card); }
        .matrix-table { width: 100%; border-collapse: collapse; min-width: 480px; text-align: center; font-size: 0.85rem; }
        .matrix-table th, .matrix-table td { padding: 10px 6px; border: 1px solid var(--border-main); }
        .matrix-table th { background: var(--bg-input); color: var(--text-main); font-weight: bold; position: sticky; top: 0; }
        .matrix-cell-free { background-color: rgba(39, 174, 96, 0.2); color: #2ecc71; cursor: pointer; font-weight: bold; border-radius: 6px; transition: 0.2s; }
        .matrix-cell-free.selected { background-color: var(--accent-orange) !important; color: white !important; transform: scale(0.95); border-radius: 8px;}
        @media (hover: hover) { .matrix-cell-free:hover { background-color: rgba(224, 112, 27, 0.5); color: white; } }
        .matrix-cell-busy { background-color: rgba(231, 76, 60, 0.15); color: var(--disabled-grey); cursor: not-allowed; }

        .skeleton-slot {
            height: 48px;
            background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-input) 50%, var(--bg-card) 75%);
            background-size: 200% 100%;
            animation: loadingSkeleton 1.5s infinite;
            border-radius: 10px;
        }
        @keyframes loadingSkeleton {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .list-item, .band-card { background: var(--bg-card); padding: 20px; border-radius: 16px; margin-bottom: 15px; box-shadow: 0 6px 15px var(--shadow-sm); width: 100%; transition: background-color 0.3s ease; }
        .list-item h4, .band-card h4 { margin: 0 0 10px 0; color: var(--accent-orange); font-size: 1.2rem;}
        .list-item p, .band-card p { margin: 5px 0; font-size: 0.9rem; color: var(--text-muted); }
        .btn-danger { background: var(--danger-color); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top:15px; width:100%; }
        
        .band-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
        .btn-icon { background: var(--bg-input); border: 1px solid var(--border-main); color: var(--text-main); border-radius: 12px; min-width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; }
        
        #main-admin-app { display: none; height: 100%; flex-direction: column; }
        .admin-section { display: none !important; animation: fadeIn 0.4s ease; width: 100%; }
        .admin-section.active { display: block !important; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        
        .admin-card { background: var(--bg-card); border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 8px 25px var(--shadow-sm); width: 100%; transition: background-color 0.3s ease;}
        .admin-card h3 { color: var(--text-main); margin-top: 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-main); padding-bottom: 12px; margin-bottom: 18px; display: flex; align-items: center; }
        .admin-card h3 i { color: var(--accent-orange); margin-right: 10px; font-size: 1.3rem; }
        
        .form-row { display: flex; gap: 15px; width: 100%; }
        .form-row > div { flex: 1; min-width: 0; }
        
        .switch-container { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; width: 100%; }
        .toggle-switch { position: relative; width: 54px; height: 28px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--disabled-grey); transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--success-color); }
        input:checked + .slider:before { transform: translateX(26px); }

        .extra-menu-btn { width: 100%; background: var(--bg-card); border: none; padding: 20px; border-radius: 16px; margin-bottom: 15px; color: var(--text-main); font-size: 1.05rem; text-align: left; display: flex; align-items: center; box-shadow: 0 4px 15px var(--shadow-sm); cursor: pointer; font-family: 'Poppins', sans-serif; transition: transform 0.2s, background-color 0.3s ease; }
        .extra-menu-btn i { font-size: 1.5rem; color: var(--accent-orange); width: 45px; flex-shrink: 0;}
        .extra-menu-btn:active { transform: scale(0.97); }
        
        .back-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; margin-bottom: 20px; display: flex; align-items: center; font-family: 'Poppins', sans-serif; padding: 0; }
        .back-btn i { margin-right: 10px; font-size:1.2rem;}

        .suggerimenti-box { display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: var(--bg-input); border: 1px solid var(--border-main); border-radius: 10px; max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 10px 20px var(--shadow-md); }
        .suggerimento-item { padding: 15px; border-bottom: 1px solid var(--border-main); cursor: pointer; color: var(--text-main); font-size: 0.95rem; }
        
        .prenotazione-item { background-color: var(--bg-card); border-radius: 12px; padding: 18px; margin-bottom: 15px; border-left: 5px solid var(--accent-orange); box-shadow: 0 5px 15px var(--shadow-sm); width: 100%; }
        .prenotazione-item .button-group { display: flex; gap: 10px; margin-top: 15px; width: 100%; flex-wrap:wrap;}
        .prenotazione-item .button-group button, .prenotazione-item .button-group select { flex: 1; min-width: 0; padding: 10px; font-size: 0.85rem; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; color: white; background:var(--bg-input); border:1px solid var(--border-main); color:var(--text-main); font-family: 'Poppins', sans-serif;}
        
        .custom-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); z-index: 1000; justify-content: center; align-items: center; padding: 15px; backdrop-filter: blur(5px); }
        .custom-modal-content { background: var(--bg-card); color: var(--text-main); width: 100%; max-width: 400px; padding: 25px; border-radius: 16px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px var(--shadow-lg); position: relative; }
        .custom-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; width: 100%; }
        .custom-modal-footer button { flex:1; min-width: 0; padding:12px; border-radius:10px; font-family:'Poppins', sans-serif; cursor:pointer;}
        
        .whatsapp-float { position: absolute; bottom: calc(85px + env(safe-area-inset-bottom)); right: 20px; background-color: #25d366; color: white; border-radius: 50px; text-align: center; font-size: 28px; width: 55px; height: 55px; box-shadow: 2px 2px 10px rgba(0,0,0,0.4); z-index: 99; display: flex; align-items: center; justify-content: center; text-decoration: none; }
        
        .theme-btn { padding: 10px; border-radius: 8px; border: 2px solid transparent; font-weight: bold; cursor: pointer; transition: 0.2s; flex: 1; }
        .theme-btn:active { transform: scale(0.95); }

        .badge-payment { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
        .badge-saldare { background: rgba(255,255,255,0.1); color: var(--text-muted); border: 1px solid var(--border-main); }
        .badge-tessera { background: linear-gradient(45deg, #d4af37, #f3e5ab); color: #333; }
        .badge-sumup { background: rgba(39, 174, 96, 0.2); color: #27ae60; border: 1px solid #27ae60; }
        
        .bacheca-card { background: var(--bg-card); padding: 18px; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 4px 12px var(--shadow-sm); border-left: 5px solid var(--border-main); }
        .bacheca-card.band-cerca { border-left-color: var(--accent-orange); }
        .bacheca-card.musico-cerca { border-left-color: #3498db; }
        .badge-bacheca { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: bold; margin-bottom: 8px; color: white;}
        .badge-bacheca.band-cerca { background: var(--accent-orange); }
        .badge-bacheca.musico-cerca { background: #3498db; }
        
        /* --- STILI BOX METODI DI PAGAMENTO (COLOR CODING) --- */
        .payment-options { display: flex; flex-direction: column; gap: 14px; }
        
        .pay-box { 
            border: 2px solid var(--border-main); 
            background: var(--bg-input); 
            border-radius: 14px; 
            padding: 16px 18px; 
            display: flex; 
            align-items: center; 
            gap: 18px; 
            cursor: pointer; 
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 10px var(--shadow-sm);
        }

        .pay-box:hover { transform: translateY(-2px); }
        .pay-box .pay-text { flex: 1; text-align: left; }
        .pay-box .pay-title { font-weight: bold; font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px; transition: color 0.2s; }
        .pay-box .pay-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.3; }

        /* --- COLORI IDENTIFICATIVI PER OGNI BOX --- */

        /* 1. PAGAMENTO IN SEDE (Verde Cassa) */
        #pay-box-sede i { color: #27ae60; }
        #pay-box-sede { border-color: rgba(39, 174, 96, 0.4); }
        #pay-box-sede.active { 
            border-color: #27ae60; 
            background: linear-gradient(135deg, var(--bg-input) 30%, rgba(39, 174, 96, 0.2) 100%);
            box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
            transform: translateY(-3px);
        }
        #pay-box-sede.active .pay-title { color: #2ecc71; }

        /* 2. PAGA ORA ONLINE (Azzurro Digitale / Carta) */
        #pay-box-online i { color: #3498db; }
        #pay-box-online { border-color: rgba(52, 152, 219, 0.4); }
        #pay-box-online.active { 
            border-color: #3498db; 
            background: linear-gradient(135deg, var(--bg-input) 30%, rgba(52, 152, 219, 0.2) 100%);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
            transform: translateY(-3px);
        }
        #pay-box-online.active .pay-title { color: #5dade2; }

        /* 3. TESSERA PROVE (Oro / Abbonamento) */
        #pay-box-tessera i { color: #f1c40f; }
        #pay-box-tessera { border-color: rgba(241, 196, 15, 0.4); }
        #pay-box-tessera.active { 
            border-color: #f1c40f; 
            background: linear-gradient(135deg, var(--bg-input) 30%, rgba(241, 196, 15, 0.2) 100%);
            box-shadow: 0 8px 20px rgba(241, 196, 15, 0.3);
            transform: translateY(-3px);
        }
        #pay-box-tessera.active .pay-title { color: #f4d03f; }

        /* 4. SALDO PORTAFOGLIO (Viola / Credito) */
        #pay-box-credito i { color: #9b59b6; }
        #pay-box-credito { border-color: rgba(155, 89, 182, 0.4); }
        #pay-box-credito.active { 
            border-color: #9b59b6; 
            background: linear-gradient(135deg, var(--bg-input) 30%, rgba(155, 89, 182, 0.2) 100%);
            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3);
            transform: translateY(-3px);
        }
        #pay-box-credito.active .pay-title { color: #af7ac5; }