/* =========================================
   G.B.M. - STILE GLOBALE UNIFICATO
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primary: #1e3a8a;
    --primary-light: #3b82f6;
    --accent: #3b82f6;
    --accent-alt: #0ea5e9;
    --bg-main: #f1f5f9;
    --bg-alt: #f8fafc;
    --white: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
}

/* --- STILI BASE GENERALI --- */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* =========================================
   COMPONENTE: NAVBAR GLOBALE
   ========================================= */
.main-nav { 
    background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 100%);
    padding: 0 20px; 
    color: white; 
    display: flex; 
    align-items: center; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    height: 50px;
}
.nav-logo { 
    text-decoration: none; font-weight: 800; margin-right: 30px; font-size: 1.4rem; color: white; display: flex; align-items: center; gap: 10px;
}
.nav-dropdown { position: relative; display: inline-block; height: 100%; }
.nav-item { 
    text-decoration: none; color: rgba(255,255,255,0.85); padding: 0 15px; height: 50px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; transition: 0.2s; cursor: pointer;
}
.nav-item:hover, .nav-dropdown:hover > .nav-item { background: rgba(255,255,255,0.1); color: white; }
.dropdown-content { display: none; position: absolute; background-color: white; min-width: 220px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); z-index: 1000; border-radius: 0 0 8px 8px; overflow: hidden; }
.nav-dropdown:hover .dropdown-content { display: block; }
.dropdown-content a { color: var(--text-main); padding: 12px 20px; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 500; transition: 0.2s; border-bottom: 1px solid var(--bg-main); }
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background-color: var(--bg-alt); color: #1d4ed8; padding-left: 25px; }
.active-page { background: rgba(255,255,255,0.2) !important; color: white !important; }
.nav-spacer { flex: 1; }
.user-badge { background: rgba(0,0,0,0.2); padding: 8px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.btn-logout { color: #fca5a5; text-decoration: none; font-weight: 800; margin-left: 15px; font-size: 0.85rem; transition: 0.2s; }
.btn-logout:hover { color: #fee2e2; transform: scale(1.05); }
.has-arrow::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.7rem; margin-left: 5px; opacity: 0.7; }

/* =========================================
   PAGINA: WELCOME (welcome.php)
   ========================================= */
.page-welcome { background: var(--bg-alt); display: flex; flex-direction: column; min-height: 100vh; color: #0f172a; }
.page-welcome .hero { background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%); color: white; padding: 100px 20px; text-align: center; clip-path: ellipse(150% 100% at 50% 0%); }
.page-welcome .brand { font-size: 4.5rem; font-weight: 900; letter-spacing: -2px; margin-bottom: 10px; text-shadow: 2px 4px 10px rgba(0,0,0,0.2); }
.page-welcome .brand span { color: #60a5fa; margin-left: 15px; } 
.page-welcome .brand span:first-child { margin-left: 0; }
.page-welcome .sub-brand { font-size: 1.5rem; font-weight: 300; text-transform: uppercase; letter-spacing: 4px; opacity: 0.9; margin-bottom: 40px; }
.page-welcome .btn-login { display: inline-flex; align-items: center; gap: 12px; background: white; color: var(--primary); padding: 18px 45px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.2rem; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.page-welcome .btn-login:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.25); background: var(--bg-main); }
.page-welcome .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; padding: 80px 10%; background: white; }
.page-welcome .feat-card { text-align: center; padding: 30px; border-radius: 20px; transition: 0.3s; border: 1px solid var(--bg-main); }
.page-welcome .feat-card:hover { border-color: var(--accent); background: var(--bg-alt); }
.page-welcome .feat-card i { font-size: 3rem; color: var(--accent); margin-bottom: 20px; }
.page-welcome .feat-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--primary); }
.page-welcome footer { margin-top: auto; padding: 30px; text-align: center; font-size: 0.9rem; color: var(--text-muted); }

/* =========================================
   PAGINA: LOGIN (index.php)
   ========================================= */
.page-login { background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }
.page-login .login-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); width: 90%; max-width: 400px; text-align: center; }
.page-login .brand-title { font-size: 2rem; font-weight: 900; color: var(--primary); margin-bottom: 30px; letter-spacing: -1px; }
.page-login .brand-title span { color: var(--accent); }
.page-login .form-group { text-align: left; margin-bottom: 20px; }
.page-login label { display: block; margin-bottom: 8px; font-weight: 600; color: #475569; font-size: 0.9rem; }
.page-login input { width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #e2e8f0; box-sizing: border-box; font-size: 1rem; transition: 0.3s; }
.page-login input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.page-login button { width: 100%; padding: 14px; background: var(--primary); color: white; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; transition: 0.3s; margin-top: 10px; }
.page-login button:hover { background: #1d4ed8; transform: translateY(-2px); }
.page-login .error-box { color: #e11d48; background: #fff1f2; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-size: 0.9rem; border: 1px solid #ffe4e6; }
.page-login .back-link { margin-top: 25px; display: block; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.page-login .back-link:hover { color: var(--primary); }

/* =========================================
   PAGINA: DASHBOARD (dashboard.php)
   ========================================= */
.page-dashboard .top-bar { background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%); color: white; padding: 40px 20px; text-align: center; clip-path: ellipse(150% 100% at 50% 0%); margin-bottom: 30px; }
.page-dashboard .brand-logo { font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; letter-spacing: -1px; }
.page-dashboard .brand-logo span { color: var(--accent); }
.page-dashboard .welcome-msg h1 { margin: 10px 0 0; font-size: 1.8rem; font-weight: 700; }
.page-dashboard .user-status { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.page-dashboard .badge { background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; backdrop-filter: blur(5px); }
.page-dashboard .container { max-width: 1500px; margin: 0 auto; padding: 0 20px 40px; }
.page-dashboard .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 20px; }
.page-dashboard .menu-card { background: var(--white); padding: 30px; border-radius: 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.3s ease; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.page-dashboard .menu-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-color: var(--accent); }
.page-dashboard .menu-card i { font-size: 3rem; color: var(--accent); margin-bottom: 20px; }
.page-dashboard .menu-card h3 { margin: 0 0 10px; color: var(--primary); font-size: 1.3rem; }
.page-dashboard .menu-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.4; }
.page-dashboard .logout-btn { display: inline-block; margin-top: 20px; color: var(--danger); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }

/* =========================================
   PAGINA: CAMBIA PASSWORD (cambia_password.php)
   ========================================= */
.page-cambia-pwd { display: flex; flex-direction: column; min-height: 100vh; }
.page-cambia-pwd .main-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.page-cambia-pwd .card { background: var(--white); max-width: 450px; width: 100%; padding: 40px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.page-cambia-pwd .card-header { text-align: center; margin-bottom: 30px; }
.page-cambia-pwd .card-header i { font-size: 3rem; color: var(--primary); margin-bottom: 15px; }
.page-cambia-pwd .card-header h2 { margin: 0; font-weight: 800; color: var(--primary); font-size: 1.5rem; }
.page-cambia-pwd .f-group { margin-bottom: 20px; }
.page-cambia-pwd .f-group label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.page-cambia-pwd .f-group input { width: 100%; padding: 12px 15px; border: 2px solid var(--bg-main); border-radius: 10px; font-size: 1rem; box-sizing: border-box; transition: all 0.2s; }
.page-cambia-pwd .f-group input:focus { outline: none; border-color: var(--accent); background: #fff; }
.page-cambia-pwd .alert { padding: 15px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; margin-bottom: 25px; text-align: center; }
.page-cambia-pwd .alert-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.page-cambia-pwd .alert-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.page-cambia-pwd .btn-save { width: 100%; background: var(--primary); color: white; border: none; padding: 15px; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s; text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; }
.page-cambia-pwd .btn-save:hover { background: #1e40af; }
.page-cambia-pwd .back-link { display: block; text-align: center; margin-top: 25px; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.2s; }
.page-cambia-pwd .back-link:hover { color: var(--primary); }

/* =========================================
   PAGINA: PROFILO (profilo.php)
   ========================================= */
.page-profilo { font-family: 'Segoe UI', 'Inter', sans-serif; background: #f4f7f6; }
.page-profilo .container { padding: 40px; max-width: 500px; margin: auto; }
.page-profilo .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.page-profilo .form-group { margin-bottom: 20px; }
.page-profilo label { display: block; margin-bottom: 8px; font-weight: bold; color: #2c3e50; }
.page-profilo input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ddd; box-sizing: border-box; }
.page-profilo button { background: #3498db; color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; width: 100%; font-weight: bold; }
.page-profilo .msg { padding: 10px; border-radius: 6px; margin-bottom: 20px; text-align: center; }
.page-profilo .success { background: #d4edda; color: #155724; }
.page-profilo .error { background: #f8d7da; color: #721c24; }

/* =========================================
   PAGINA: MODIFICHE (modifiche.php)
   ========================================= */
.page-modifiche { scroll-behavior: smooth; padding-bottom: 80px; }
.page-modifiche .hero { background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%); color: white; padding: 80px 20px 100px; text-align: center; clip-path: ellipse(160% 100% at 50% 0%); margin-bottom: -40px; }
.page-modifiche .hero h1 { font-weight: 800; font-size: 2.8rem; letter-spacing: -1px; }
.page-modifiche .email-link { background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.3); transition: all 0.3s; }
.page-modifiche .email-link:hover { background: #fbbf24; color: var(--primary); border-color: #fbbf24; }
.page-modifiche .container-custom { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; position: relative; z-index: 10; }
.page-modifiche .sidebar-nav { background: white; border-radius: 24px; padding: 25px 15px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); height: fit-content; position: sticky; top: 40px; border: 1px solid rgba(0,0,0,0.03); }
.page-modifiche .sidebar-title { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin: 15px 0 15px 15px; }
.page-modifiche .nav-link-custom { display: flex; align-items: center; gap: 12px; padding: 10px 15px; color: var(--text-main); text-decoration: none; font-size: 0.9rem; font-weight: 500; border-radius: 12px; transition: all 0.2s; margin-bottom: 2px; }
.page-modifiche .nav-link-custom i { width: 18px; text-align: center; color: var(--text-muted); }
.page-modifiche .nav-link-custom:hover { background: #eff6ff; color: var(--primary-light); transform: translateX(5px); }
.page-modifiche .card { border: none; border-radius: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 10px 15px -3px rgba(0,0,0,0.03); margin-bottom: 25px; border-left: 5px solid var(--primary-light); background: #fff; }
.page-modifiche .card-header { background: white !important; color: var(--primary) !important; font-weight: 700; padding: 20px 25px; border-bottom: 1px solid #f1f5f9 !important; display: flex; align-items: center; gap: 12px; border-radius: 20px 20px 0 0; }
.page-modifiche .card-body { padding: 25px 30px; }
.page-modifiche .card-body li { margin-bottom: 12px; list-style: none; position: relative; padding-left: 25px; }
.page-modifiche .card-body li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: #cbd5e1; }
.page-modifiche .border-orange { border-left-color: #f59e0b; }
.page-modifiche .border-green { border-left-color: #10b981; }
.page-modifiche .border-indigo { border-left-color: #6366f1; }

@media (max-width: 992px) {
    .page-modifiche .container-custom { grid-template-columns: 1fr; }
    .page-modifiche .sidebar-nav { position: relative; top: 0; }
}