Itinerario

{role !== 'student' && }

{role !== 'student' && showForm && (

setEvForm({...evForm, time:e.target.value})} className="p-3 rounded-xl border md:col-span-1 outline-none focus:border-blue-400" required /> setEvForm({...evForm, title:e.target.value})} className="p-3 rounded-xl border md:col-span-3 outline-none focus:border-blue-400 font-bold" required />

setEvForm({...evForm, location:e.target.value})} className="flex-1 p-3 rounded-xl border text-sm outline-none focus:border-blue-400" />

setEvForm({...evForm, description:e.target.value})} className="p-3 rounded-xl border w-full text-sm mb-4 h-24 resize-none outline-none focus:border-blue-400" />
                    <div className="flex justify-end gap-2">
                         <button type="button" onClick={() => setShowForm(false)} className="px-5 py-2.5 text-gray-600 font-bold hover:bg-gray-200 rounded-xl transition">Annulla</button>
                         <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-md transition">{editingId ? 'Aggiorna Tappa' : 'Salva Tappa'}</button>
                    </div>
                </form>
            )}

<div className="relative border-l-2 border-blue-200 ml-4 space-y-8 md:ml-6 mt-4">
                {sorted.length === 0 ? <p className="text-gray-500 pl-6 italic bg-gray-50 p-4 rounded-xl ml-2">Il programma è ancora vuoto.</p> : 
                 sorted.map(ev => (
                    <div key={ev.id} className="relative pl-6 md:pl-8">
                        <div className="absolute w-5 h-5 bg-blue-500 rounded-full -left-[11px] top-1.5 border-4 border-gray-100 shadow-sm"></div>
                        <div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 relative group hover:shadow-md transition">
                            {role !== 'student' && (
                                <div className="absolute top-4 right-4 flex gap-2">
                                    <button onClick={() => {setEvForm({ time: ev.time, title: ev.title, location: ev.location || '', description: ev.description || '', lat: ev.lat || '', lng: ev.lng || '' }); setEditingId(ev.id); setShowForm(true);}} className="text-gray-300 hover:text-blue-500 transition bg-gray-50 p-1.5 rounded-lg"><IconEdit /></button>
                                    <button onClick={() => onDeleteEvent(ev.id)} className="text-gray-300 hover:text-red-500 transition bg-gray-50 p-1.5 rounded-lg"><IconTrash /></button>
                                </div>
                            )}
                            <span className="text-blue-700 font-black text-sm bg-blue-50 px-3 py-1.5 rounded-lg inline-block mb-2 shadow-sm">{ev.time}</span>
                            <h3 className="font-bold text-gray-900 mt-1 text-xl pr-16">{ev.title}</h3>
                            {ev.location && <p className="text-gray-600 text-sm mt-2 flex items-start gap-1">📍 <span>{ev.location}</span></p>}
                            {ev.description && <p className="text-gray-600 text-sm mt-3 bg-gray-50 p-3 rounded-xl border border-gray-100">{ev.description}</p>}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

const Chat = ({ messages, role, currentProfile, isExpired, onSendMessage }) => {
    const [chatInput, setChatInput] = useState('');
    const chatBottomRef = useRef(null);
    
    useEffect(() => { if(chatBottomRef.current) chatBottomRef.current.scrollIntoView(); }, [messages]);
    const sorted = [...messages].sort((a,b)=>(a.timestamp||0)-(b.timestamp||0));

return (
        <div className="flex flex-col h-[calc(100vh-180px)] md:h-full pb-20 md:pb-6 p-4 md:p-6 animate-fade-in relative max-w-4xl mx-auto w-full">
            <div className="flex justify-between items-center mb-4 border-b pb-2">
                <h2 className="text-2xl md:text-3xl font-black text-gray-800">Chat di Gruppo</h2>
            </div>
            
            {isExpired && <div className="bg-red-50 text-red-800 p-3 rounded-xl mb-4 text-xs font-bold text-center border border-red-200 shadow-sm">Viaggio terminato. La chat è in sola lettura.</div>}
            
            <div className="flex-1 bg-white border border-gray-200 rounded-2xl shadow-inner overflow-y-auto p-4 md:p-6 mb-4 space-y-4 flex flex-col">
                {sorted.length === 0 ? <p className="text-center text-gray-400 italic text-sm mt-auto mb-auto">Nessun messaggio. Inizia la conversazione!</p> : 
                 sorted.map(msg => {
                     const isMine = role !== 'student' ? msg.role !== 'student' : (msg.senderCode === currentProfile?.code);
                     const isStaff = msg.role !== 'student';
                     return (
                         <div key={msg.id} className={`flex flex-col max-w-[85%] md:max-w-[70%] ${isMine ? 'self-end items-end' : 'self-start items-start'}`}>
                             <span className="text-[10px] text-gray-400 font-bold mb-1 px-1 uppercase tracking-wider">{msg.senderName}</span>
                             <div className={`p-3.5 rounded-2xl text-sm shadow-sm ${isMine ? 'bg-indigo-600 text-white rounded-tr-sm' : isStaff ? 'bg-purple-100 text-purple-900 border border-purple-200 rounded-tl-sm font-medium' : 'bg-gray-100 text-gray-800 border border-gray-200 rounded-tl-sm'}`}>
                                 {msg.text}
                             </div>
                         </div>
                     );
                 })
                }
                <div ref={chatBottomRef} />
            </div>
            
            {!isExpired && (
                <form onSubmit={(e)=>{e.preventDefault(); if(chatInput.trim()) { onSendMessage(chatInput); setChatInput(''); }}} className="flex gap-2 sticky bottom-0 bg-gray-50 md:bg-transparent pt-2 md:pt-0">
                    {currentProfile?.blocked ? <div className="w-full text-center text-xs text-red-600 bg-red-100 p-4 rounded-xl font-bold border border-red-200">Account limitato dai moderatori per violazione policy.</div> : (
                        <>
                            <input type="text" value={chatInput} onChange={e=>setChatInput(e.target.value)} placeholder="Scrivi un messaggio..." className="flex-1 p-4 rounded-xl border border-gray-300 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100 shadow-sm transition" />
                            <button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 rounded-xl shadow-md transition transform hover:-translate-y-0.5"><IconChat/></button>
                        </>
                    )}
                </form>
            )}
        </div>
    );
};

return (
        <div className="space-y-4 pb-24 p-5 animate-fade-in max-w-4xl mx-auto">
            <div className="flex justify-between items-center mb-6 py-2 border-b">
                <h2 className="text-3xl font-black text-gray-800">Bacheca Avvisi</h2>
                {role !== 'student' && <button onClick={()=>setShowForm(!showForm)} className="bg-purple-600 hover:bg-purple-700 transition text-white p-3 md:px-5 md:py-2.5 rounded-full md:rounded-xl shadow-md font-bold flex items-center gap-2"><IconPlus/> <span className="hidden md:inline">Nuovo Avviso</span></button>}
            </div>
            
            {role !== 'student' && showForm && (
                <form onSubmit={handleSubmit} className="bg-purple-50 p-5 rounded-2xl border border-purple-200 mb-8 shadow-sm">
                    <textarea placeholder="Testo dell'avviso..." value={annForm.text} onChange={e=>setAnnForm({...annForm, text:e.target.value})} className="p-3 rounded-xl border w-full text-sm mb-4 h-24 outline-none focus:border-purple-400" required/>
                    <div className="flex flex-col md:flex-row gap-4 mb-4">
                        <select value={annForm.target} onChange={e=>setAnnForm({...annForm, target:e.target.value})} className="flex-1 p-3 border rounded-xl outline-none text-sm focus:border-purple-400">
                            <option value="all">Visibile a Tutti i Partecipanti</option>
                            <optgroup label="Singoli Studenti">
                                {students.map(s=><option key={s.id} value={s.code}>{s.name}</option>)}
                            </optgroup>
                        </select>
                        <div className="flex gap-4 items-center bg-white px-4 py-2 rounded-xl border">
                            <label className="flex items-center gap-2 cursor-pointer text-sm font-medium"><input type="radio" name="p" value="normal" checked={annForm.priority==='normal'} onChange={()=>setAnnForm({...annForm,priority:'normal'})} className="text-purple-600 focus:ring-purple-500"/> Info</label>
                            <label className="flex items-center gap-2 cursor-pointer text-sm font-bold text-red-600"><input type="radio" name="p" value="high" checked={annForm.priority==='high'} onChange={()=>setAnnForm({...annForm,priority:'high'})} className="text-red-600 focus:ring-red-500"/> Urgente</label>
                        </div>
                    </div>
                    <div className="flex justify-end gap-2">
                        <button type="button" onClick={() => setShowForm(false)} className="px-5 py-2 text-gray-600 font-bold hover:bg-gray-200 rounded-xl transition">Annulla</button>
                        <button type="submit" className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-md transition">Pubblica Avviso</button>
                    </div>
                </form>
            )}
            
            <div className="space-y-4">
                {visible.length === 0 ? <p className="text-gray-500 italic text-center py-8 bg-gray-50 rounded-2xl">Nessun avviso presente in bacheca.</p> : 
                 visible.map(ann => (
                     <div key={ann.id} className={`p-5 rounded-2xl shadow-sm border-l-4 relative hover:shadow-md transition ${ann.priority==='high'?'bg-red-50 border-red-500':'bg-white border-purple-400'}`}>
                         {role !== 'student' && <button onClick={()=>onDeleteAnnouncement(ann.id)} className="absolute top-4 right-4 text-gray-300 hover:text-red-500 bg-white/50 p-1 rounded-lg transition"><IconTrash/></button>}
                         <div className="flex items-center gap-3 mb-3">
                             <span className={`text-[10px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider ${ann.priority==='high'?'bg-red-100 text-red-800':'bg-purple-100 text-purple-800'}`}>{ann.priority}</span>
                             <span className="text-xs font-medium text-gray-500">{ann.date}</span>
                         </div>
                         {ann.target !== 'all' && role !== 'student' && <p className="text-xs bg-yellow-100 text-yellow-800 font-bold px-2 py-1 rounded inline-block mb-2">Destinatario Privato: {students.find(s=>s.code===ann.target)?.name || ann.target}</p>}
                         <p className="text-gray-800 whitespace-pre-wrap leading-relaxed">{ann.text}</p>
                     </div>
                 ))
                }
            </div>
        </div>
    );
};

// Componente helper per la navigazione (supporta Layout Mobile e Layout Desktop)
const NavItem = ({ icon, label, id, active, set, color, isDesktop }) => {
    const isActive = active === id;
    const colorClasses = { blue: 'text-blue-600 bg-blue-50', green: 'text-green-600 bg-green-50', indigo: 'text-indigo-600 bg-indigo-50', purple: 'text-purple-600 bg-purple-50', orange: 'text-orange-600 bg-orange-50' };
    
    // Versione Desktop Sidebar
    if (isDesktop) {
        return (
            <button onClick={() => set(id)} className={`flex items-center gap-4 p-3.5 rounded-xl transition-all duration-200 w-full text-left ${isActive ? colorClasses[color] + ' shadow-sm font-bold' : 'text-gray-600 hover:bg-gray-100 font-medium'}`}>
                <div className={`${isActive ? 'scale-110' : ''} transition-transform`}>{icon}</div>
                <span className="text-sm">{label}</span>
            </button>
        );
    }
    
    // Versione Mobile Bottom-bar
    return (
        <button onClick={() => set(id)} className={`flex flex-col items-center p-2.5 rounded-2xl min-w-[70px] flex-1 transition-all duration-200 ${isActive ? colorClasses[color] + ' scale-105 shadow-sm' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-50'}`}>
            <div className={`${isActive ? 'scale-110' : ''} transition-transform`}>{icon}</div>
            <span className={`text-[9px] font-extrabold mt-1 uppercase tracking-wide ${isActive ? 'opacity-100' : 'opacity-70'}`}>{label}</span>
        </button>
    );
};

// === 5. COMPONENTE PRINCIPALE APP ===
export default function App() {
    const [authReady, setAuthReady] = useState(false);
    const [user, setUser] = useState(null);
    const [role, setRole] = useState(null);
    const [currentProfile, setCurrentProfile] = useState(null);
    const [activeGroupId, setActiveGroupId] = useState(null);
    const [activeTab, setActiveTab] = useState('itinerary');
    const [isMapFullscreen, setIsMapFullscreen] = useState(false); // STATO PER GESTIONE MAPPA FULLSCREEN
    
    const [msg, setMsg] = useState('');
    const [isOnline, setIsOnline] = useState(navigator.onLine);
    const [authError, setAuthError] = useState('');

const [admins, setAdmins] = useState([]);
    const [managers, setManagers] = useState([]);
    const [groups, setGroups] = useState([]);
    const [students, setStudents] = useState([]);
    const [events, setEvents] = useState([]);
    const [messages, setMessages] = useState([]);
    const [announcements, setAnnouncements] = useState([]);
    const [expenses, setExpenses] = useState([]);
    const [securityAlerts, setSecurityAlerts] = useState([]);

const showMsg = (testo) => { setMsg(testo); setTimeout(()=>setMsg(''), 3000); };

useEffect(() => {
        window.addEventListener('online', ()=>setIsOnline(true));
        window.addEventListener('offline', ()=>setIsOnline(false));
        const unsub = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
            setAuthReady(true);
        });
        return () => unsub();
    }, []);

const handleLogout = () => { signOut(auth); setRole(null); setCurrentProfile(null); setActiveGroupId(null); };

useEffect(() => {
        if(!user) return;
        if(['master', 'admin', 'manager'].includes(role)) {
            const unsubA = onSnapshot(collection(db, `${DB_BASE_PATH}/admins`), snap => setAdmins(snap.docs.map(d=>({id:d.id, ...d.data()}))));
            const unsubM = onSnapshot(collection(db, `${DB_BASE_PATH}/managers`), snap => setManagers(snap.docs.map(d=>({id:d.id, ...d.data()}))));
            const unsubG = onSnapshot(collection(db, `${DB_BASE_PATH}/groups`), snap => setGroups(snap.docs.map(d=>({id:d.id, ...d.data()}))));
            return () => { unsubA(); unsubM(); unsubG(); };
        }
    }, [user, role]);

useEffect(() => {
        if(!user || !activeGroupId) return;
        const groupPath = `${DB_BASE_PATH}/groups/${activeGroupId}`;
        const unsub = [
            onSnapshot(collection(db, `${groupPath}/students`), snap => setStudents(snap.docs.map(d=>({id:d.id, ...d.data()})))),
            onSnapshot(collection(db, `${groupPath}/events`), snap => setEvents(snap.docs.map(d=>({id:d.id, ...d.data()})))),
            onSnapshot(collection(db, `${groupPath}/messages`), snap => setMessages(snap.docs.map(d=>({id:d.id, ...d.data()})))),
            onSnapshot(collection(db, `${groupPath}/announcements`), snap => setAnnouncements(snap.docs.map(d=>({id:d.id, ...d.data()})))),
            onSnapshot(collection(db, `${groupPath}/expenses`), snap => setExpenses(snap.docs.map(d=>({id:d.id, ...d.data()})))),
            onSnapshot(collection(db, `${groupPath}/security_alerts`), snap => setSecurityAlerts(snap.docs.map(d=>({id:d.id, ...d.data()}))))
        ];
        return () => unsub.forEach(fn => fn());
    }, [user, activeGroupId]);

const isGroupExpired = () => { const g = groups.find(x => x.id === activeGroupId); return g?.endDate ? g.endDate < new Date().toISOString().split('T')[0] : false; };

// --- RENDER ---
    if (!authReady) return <div className="min-h-screen flex items-center justify-center bg-gray-50"><p className="text-gray-400 font-bold animate-pulse">Caricamento in corso...</p></div>;
    if (!role) return <LoginScreen onStudentLogin={onStudentLogin} onStaffLogin={onStaffLogin} authError={authError} isOnline={isOnline} />;
    
    const activeGroupData = groups.find(g => g.id === activeGroupId);

return (
        <div className="min-h-screen bg-gray-100 font-sans md:p-6 lg:p-10 flex justify-center text-gray-900">
            {msg && <div className="fixed top-5 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-6 py-3 rounded-full shadow-2xl z-50 animate-fade-in text-sm font-medium">{msg}</div>}
            
            {/* Main Container */}
            <div className="w-full md:max-w-6xl lg:max-w-7xl bg-gray-50 md:rounded-[2rem] md:shadow-2xl md:overflow-hidden relative flex flex-col md:flex-row min-h-screen md:min-h-[85vh] md:max-h-[900px] border border-gray-200/50">
                
                {/* 1. SIDEBAR NAV: Visibile SOLO su Desktop, NASCOSTA se mappa in Fullscreen */}
                {activeGroupId && !isMapFullscreen && (
                    <aside className="hidden md:flex flex-col w-64 lg:w-72 bg-white border-r border-gray-200 p-6 z-20 shrink-0">
                        <div className="mb-8">
                            <h1 className="text-3xl font-black text-blue-900 tracking-tight">EduTravel</h1>
                            <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mt-1">{role === 'student' ? currentProfile?.name : `Staff: ${role}`}</p>
                        </div>
                        <nav className="flex flex-col gap-2 flex-1">
                            <NavItem icon={<IconList />} label="Plan" id="itinerary" active={activeTab} set={setActiveTab} color="blue" isDesktop />
                            <NavItem icon={<IconMap />} label="Mappa" id="map" active={activeTab} set={setActiveTab} color="blue" isDesktop />
                            <NavItem icon={<IconBell />} label="Avvisi" id="announcements" active={activeTab} set={setActiveTab} color="purple" isDesktop />
                            <NavItem icon={<IconChat />} label="Chat" id="chat" active={activeTab} set={setActiveTab} color="indigo" isDesktop />
                            <NavItem icon={<IconWallet />} label="Cassa" id="expenses" active={activeTab} set={setActiveTab} color="green" isDesktop />
                            <NavItem icon={role === 'student' ? <IconUser/> : <IconSettings/>} label={role==='student'?'Profilo':'Gestione'} id="profile" active={activeTab} set={setActiveTab} color="orange" isDesktop />
                        </nav>
                        <div className="mt-auto pt-6 border-t border-gray-100">
                            {activeGroupData && <div className="bg-indigo-50 text-indigo-900 px-4 py-3 rounded-xl text-sm font-black mb-4 text-center break-words shadow-inner border border-indigo-100">{activeGroupData.name}</div>}
                            <button onClick={handleLogout} className="w-full bg-white border border-gray-200 hover:bg-red-50 text-gray-600 hover:text-red-600 hover:border-red-200 px-4 py-3 rounded-xl text-sm font-bold transition shadow-sm">Esci dall'App</button>
                        </div>
                    </aside>
                )}

{/* 2. AREA CONTENUTI PRINCIPALE */}
                <div className="flex-1 flex flex-col relative w-full h-full overflow-hidden">
                    
                    {/* Header Top - NASCOSTO se mappa in Fullscreen */}
                    {!isMapFullscreen && (
                        <header className="bg-white px-6 pt-10 pb-4 md:pt-6 md:pb-5 border-b border-gray-200 shadow-sm z-20 sticky top-0 rounded-b-3xl md:rounded-none flex justify-between items-center shrink-0">
                            <div className={`md:hidden ${!activeGroupId ? 'md:block' : ''}`}>
                                <h1 className="text-2xl font-black text-blue-900 tracking-tight">✈️ EduTravel</h1>
                                <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mt-1">{role === 'student' ? currentProfile?.name : `Staff: ${role}`}</p>
                                {activeGroupData && <p className="text-sm font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded inline-block mt-1 md:hidden">{activeGroupData.name}</p>}
                            </div>
                            
                            <div className="hidden md:block">
                                {!activeGroupId ? (
                                    <div>
                                        <h1 className="text-3xl font-black text-blue-900 tracking-tight">EduTravel Dashboard</h1>
                                        <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mt-1">Pannello Operativo {role}</p>
                                    </div>
                                ) : (
                                    <h2 className="text-xl font-black text-gray-800 uppercase tracking-wide">
                                        {activeTab === 'itinerary' && 'Pianificazione Itinerario'}
                                        {activeTab === 'map' && 'Mappa Geografica'}
                                        {activeTab === 'chat' && 'Chat di Gruppo'}
                                        {activeTab === 'announcements' && 'Bacheca Avvisi'}
                                        {activeTab === 'expenses' && 'Gestione Cassa Comune'}
                                        {activeTab === 'profile' && 'Gestione e Profilo'}
                                    </h2>
                                )}
                            </div>

<div className="flex gap-2 items-center">
                                {!activeGroupId && <button onClick={handleLogout} className="bg-gray-100 hover:bg-red-50 text-gray-500 hover:text-red-500 px-4 py-2 rounded-lg text-sm font-bold transition">Esci</button>}
                                {activeGroupId && <button onClick={handleLogout} className="md:hidden bg-gray-100 hover:bg-red-50 text-gray-500 hover:text-red-500 px-3 py-2 rounded-lg text-xs font-bold transition">Esci</button>}
                                {activeGroupId && role !== 'student' && <button onClick={() => {setActiveGroupId(null); setActiveTab('profile');}} className="bg-indigo-100 text-indigo-700 hover:bg-indigo-200 px-4 py-2 rounded-lg text-sm font-bold shadow-sm whitespace-nowrap transition">← Torna ai Viaggi</button>}
                            </div>
                        </header>
                    )}
                    
                    {!isOnline && !isMapFullscreen && <div className="text-[10px] md:text-xs font-bold bg-yellow-100 text-yellow-800 py-1.5 px-4 text-center sticky top-[72px] md:top-[77px] z-10 shadow-sm flex items-center justify-center gap-2"><IconWifiOff/> Modalità Offline Cache Attiva</div>}

{/* Viste Principali: Rimosso "z-0" durante la mappa Fullscreen per non intrappolarla nel livello inferiore */}
                    <main className={`flex-1 flex flex-col bg-gray-50/50 hide-scrollbar relative ${isMapFullscreen ? 'overflow-hidden z-50' : 'overflow-y-auto'}`}>
                        {!activeGroupId && role !== 'student' ? (
                            <StaffDashboard role={role} userEmail={user?.email} admins={admins} managers={managers} groups={groups} onAddAdmin={onAddAdmin} onRemoveAdmin={onRemoveAdmin} onAddManager={onAddManager} onRemoveManager={onRemoveManager} onAddGroup={onAddGroup} onUpdateGroup={onUpdateGroup} onDeleteGroup={onDeleteGroup} onChangePassword={onChangePassword} setActiveGroupId={setActiveGroupId} setActiveTab={setActiveTab} />
                        ) : activeGroupId ? (
                            <>
                                {activeTab === 'itinerary' && <Itinerary events={events} role={role} onAddEvent={onAddEvent} onUpdateEvent={onUpdateEvent} onDeleteEvent={onDeleteEvent} showMsg={showMsg} />}
                                {activeTab === 'map' && <MapComponent isFullscreen={isMapFullscreen} setIsFullscreen={setIsMapFullscreen} />}
                                {activeTab === 'chat' && <Chat messages={messages} role={role} currentProfile={currentProfile} isExpired={isGroupExpired()} onSendMessage={onSendMessage} />}
                                {activeTab === 'announcements' && <Announcements announcements={announcements} role={role} currentProfile={currentProfile} students={students} onAddAnnouncement={onAddAnnouncement} onDeleteAnnouncement={onDeleteAnnouncement} />}
                                {activeTab === 'expenses' && <Expenses expenses={expenses} students={students} onAddExpense={onAddExpense} role={role} currentProfile={currentProfile} />}
                                {activeTab === 'profile' && role !== 'student' && <Management group={activeGroupData} students={students} alerts={securityAlerts} onAddStudent={onAddStudent} onDeleteStudent={onDeleteStudent} onUnlockUser={onUnlockUser} showMsg={showMsg} />}
                                
                                {activeTab === 'profile' && role === 'student' && (
                                    <div className="p-5 animate-fade-in text-center flex flex-col items-center justify-center h-full">
                                        <div className="bg-white p-8 md:p-12 rounded-3xl border border-gray-200 shadow-sm w-full max-w-sm mb-4">
                                            <div className="w-24 h-24 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 text-4xl font-black shadow-inner">{currentProfile.name.charAt(0)}</div>
                                            <h3 className="font-black text-gray-900 text-2xl mb-2">{currentProfile.name}</h3>
                                            <p className="text-sm text-orange-800 font-mono bg-orange-50 inline-block px-4 py-1.5 rounded-lg border border-orange-100 shadow-sm">Codice Viaggio: {currentProfile.code}</p>
                                        </div>
                                        {activeGroupData?.managerInfo && (
                                            <div className="bg-blue-50 p-6 rounded-2xl border border-blue-200 text-left w-full max-w-sm">
                                                <p className="text-xs font-black text-blue-800 uppercase mb-2 tracking-widest flex items-center gap-2"><IconUser/> Referenti del viaggio</p>
                                                <p className="text-sm text-blue-900 font-medium leading-relaxed">{activeGroupData.managerInfo}</p>
                                            </div>
                                        )}
                                    </div>
                                )}
                            </>
                        ) : null}
                    </main>

{/* 3. BOTTOM NAV: Visibile SOLO su Mobile, NASCOSTA se mappa in Fullscreen */}
                    {activeGroupId && !isMapFullscreen && (
                        <nav className="md:hidden bg-white border-t border-gray-200 flex overflow-x-auto p-2 pb-6 sticky bottom-0 z-20 shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.1)] gap-1 hide-scrollbar shrink-0">
                            <NavItem icon={<IconList />} label="Plan" id="itinerary" active={activeTab} set={setActiveTab} color="blue" />
                            <NavItem icon={<IconMap />} label="Mappa" id="map" active={activeTab} set={setActiveTab} color="blue" />
                            <NavItem icon={<IconBell />} label="Avvisi" id="announcements" active={activeTab} set={setActiveTab} color="purple" />
                            <NavItem icon={<IconChat />} label="Chat" id="chat" active={activeTab} set={setActiveTab} color="indigo" />
                            <NavItem icon={<IconWallet />} label="Cassa" id="expenses" active={activeTab} set={setActiveTab} color="green" />
                            <NavItem icon={role === 'student' ? <IconUser/> : <IconSettings/>} label={role==='student'?'Me':'Gestione'} id="profile" active={activeTab} set={setActiveTab} color="orange" />
                        </nav>
                    )}
                </div>
            </div>
        </div>
    );
}

// === 6. AVVIO DI REACT ===
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(<App />);

EduTravel

Account ({userEmail})

Gestione Globale Admin

Rubrica Responsabili

I Miei Viaggi

{g.name}

Utenti Viaggio

Sicurezza: Utenti Bloccati

Aggiungi Singolo

Caricamento Massivo

Lista Partecipanti ({students.length})

Itinerario