/* Global Body Flex Reset for Sticky Footer */
html, body { margin: 0; padding: 0; min-height: 100vh; display: flex !important; flex-direction: column !important; padding-top: 0px; overflow-x: hidden; }
body.mobile-scroll-lock { overflow: hidden !important; }
#global-footer { margin-top: auto !important; width: 100%; flex-shrink: 0; }

:root { --header-bg: rgba(255, 255, 255, 0.95); --text-main: #333; --menu-glow: rgba(241, 245, 249, 1); --menu-text: #334155; }
body.dark-theme { --header-bg: rgba(15, 15, 26, 0.95); --text-main: #ffffff; --menu-glow: rgba(255, 255, 255, 0.08); --menu-text: #e2e8f0; }

/* --- SLEEK HEADER --- */
.top-nav { position: fixed; top: 0; left: 0; width: 100%; background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; z-index: 1000; box-sizing: border-box; transition: background 0.3s ease; border-bottom: 1px solid rgba(0,0,0,0.06); }
body.dark-theme .top-nav { border-bottom: none !important; }
body.dark-theme .top-nav::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #ffeb3b, #00e5ff, transparent); box-shadow: 0 0 10px rgba(0, 229, 255, 0.5); z-index: 10; }

.top-left-controls { display: flex; align-items: center; z-index: 1005; }
.logo-link { text-decoration: none; display: flex; align-items: center; margin-right: 20px; z-index: 1005; flex-shrink: 0;}
.nav-logo-img { height: 32px; width: auto; margin-right: 8px; border-radius: 6px; object-fit: contain; transition: all 0.3s ease; }
.logo-text { font-weight: 900; color: #1a73e8; font-size: 1.35rem; letter-spacing: 0.5px; margin: 0; transition: 0.3s;}

@keyframes radiantYellowGlow { 0% { box-shadow: 0 0 5px rgba(255, 235, 59, 0.3); } 50% { box-shadow: 0 0 15px rgba(255, 235, 59, 0.7), 0 0 25px rgba(255, 152, 0, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 235, 59, 0.3); } }
body.dark-theme .nav-logo-img { background-color: #0f172a !important; border-radius: 50% !important; padding: 2px !important; border: 1px solid rgba(255, 235, 59, 0.7) !important; animation: radiantYellowGlow 2.5s infinite alternate ease-in-out !important; }
body.dark-theme .logo-text { color: #ffeb3b !important; text-shadow: 0 0 8px rgba(255, 235, 59, 0.4); }

/* --- DESKTOP NAV MENUS --- */
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-start;}
.nav-item { position: relative; display: inline-block; }
.dropbtn { color: var(--menu-text); text-decoration: none; padding: 8px 12px; border-radius: 10px; background: transparent; font-size: 0.85rem; font-weight: 800; transition: all 0.2s ease; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.dropbtn:hover { background: var(--menu-glow); color: #1a73e8; }
body.dark-theme .dropbtn:hover { color: #ffeb3b; text-shadow: 0 0 8px rgba(255, 235, 59, 0.5); }

.dropdown-content { display: none; position: absolute; background: var(--header-bg); min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 10px; top: 100%; margin-top: 10px; left: 0; z-index: 1001; padding: 8px 0; border: 1px solid rgba(0,0,0,0.08); flex-direction: column; }
.dropdown-content::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: transparent; }
.nav-item:hover .dropdown-content { display: flex; animation: slideDown 0.2s ease; }
.dropdown-content a { color: var(--menu-text); padding: 10px 18px; text-decoration: none; font-size: 0.85rem; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,0.04); transition: all 0.2s ease; }
body.dark-theme .dropdown-content a { border-bottom: 1px solid rgba(255,255,255,0.05); }
.dropdown-content a:hover { background: var(--menu-glow); color: #1a73e8; padding-left: 23px; }
body.dark-theme .dropdown-content a:hover { color: #ffeb3b; border-left: 2px solid #ffeb3b; }
.dropdown-content a:last-child { border-bottom: none; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- RIGHT CONTROLS & PROFILE --- */
.top-right-controls { margin-left: auto; display: flex; align-items: center; gap: 12px; z-index: 1005; }
.theme-toggle-btn { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.05); font-size: 1.1rem; cursor: pointer; padding: 6px 12px; border-radius: 20px; transition: all 0.2s; color: var(--text-main); display: flex; align-items: center; justify-content: center;}
.theme-toggle-btn:hover { background: rgba(0,0,0,0.08); transform: translateY(-1px);}
body.dark-theme .theme-toggle-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
body.dark-theme .theme-toggle-btn:hover { background: rgba(255,255,255,0.2); }

.desktop-only-auth { display: flex; align-items: center; position: relative; }
.mobile-only-auth { display: none; }
.auth-nav-btn { background: linear-gradient(135deg, #1a73e8 0%, #2563eb 100%); color: white; border: none; padding: 8px 18px; border-radius: 50px; font-weight: 800; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(26,115,232,0.3); white-space: nowrap; }
.auth-nav-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(26,115,232,0.4); }

.user-profile-nav { display: none; align-items: center; gap: 8px; background: rgba(0,0,0,0.04); padding: 4px 12px 4px 4px; border-radius: 50px; border: 1px solid rgba(0,0,0,0.05); cursor: pointer; position: relative; }
body.dark-theme .user-profile-nav { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }
.user-avatar { background: #1a73e8; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 900; font-size: 0.85rem; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user-name { font-weight: 800; color: var(--text-main); font-size: 0.85rem; letter-spacing: 0.5px;}

/* --- PROFILE DROPDOWN MENU --- */
.profile-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--header-bg); min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 12px; padding: 6px 0; border: 1px solid rgba(0,0,0,0.08); flex-direction: column; z-index: 1010; }
.profile-dropdown-menu.active { display: flex; animation: slideDown 0.2s ease; }
.profile-dropdown-menu button, .profile-dropdown-menu a { background: transparent; border: none; text-align: left; padding: 10px 16px; font-size: 0.85rem; font-weight: 700; color: var(--menu-text); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; }
.profile-dropdown-menu button:hover, .profile-dropdown-menu a:hover { background: var(--menu-glow); color: #1a73e8; }
body.dark-theme .profile-dropdown-menu button:hover, body.dark-theme .profile-dropdown-menu a:hover { color: #ffeb3b; }
.profile-dropdown-menu .drop-logout { color: #ef4444 !important; border-top: 1px solid rgba(0,0,0,0.05); }
body.dark-theme .profile-dropdown-menu .drop-logout { border-top-color: rgba(255,255,255,0.08); }

/* --- UNIFIED ORANGE CLOSE BUTTONS --- */
.close-drawer-btn, .close-modal { background: #ff9800; border: none; color: white; border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3); position: absolute; padding: 0; transition: all 0.2s ease; z-index: 10005; }
.close-drawer-btn { display: none; top: 15px; right: 15px; } 
.close-modal { top: 15px; right: 15px; }
.close-drawer-btn:hover, .close-modal:hover { background: #e65100; transform: scale(0.95); }

/* --- MOBILE DRAWER & LAYOUT FIXES --- */
.mobile-menu-btn { display: none; background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-main); padding: 0; margin-right: 18px; line-height: 1; }
.drawer-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6) !important; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; }
.drawer-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; } 

@media (max-width: 1050px) {
    .top-nav { padding: 8px 15px; } 
    .mobile-menu-btn { display: block; z-index: 1005; position: relative; margin-left: 0; }
    .desktop-only-auth { display: none !important; }
    
    .nav-links { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 290px !important; max-width: 85vw !important; height: 100dvh !important; background: #ffffff !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding: 25px 20px 30px 20px !important; border-radius: 0 24px 24px 0 !important; transform: translateX(-100%) !important; will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: auto !important; z-index: 10001 !important; display: flex !important; box-shadow: none !important; }
    .nav-links.drawer-open, .nav-links.show { transform: translateX(0) !important; box-shadow: 15px 0 40px rgba(0,0,0,0.15) !important; }
    body.dark-theme .nav-links { background: #0f172a !important; }
    body.dark-theme .nav-links.drawer-open { box-shadow: 15px 0 50px rgba(0,0,0,0.9), 3px 3px 20px rgba(0, 229, 255, 0.35) !important; border-right: 2px solid #00e5ff !important; border-bottom: 2px solid #00e5ff !important; }
    
    .close-drawer-btn { display: flex !important; right: 15px !important; left: auto !important;}
    .drawer-header-brand { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.06); width: calc(100% - 40px); margin-left: 0; }
    body.dark-theme .drawer-header-brand { border-bottom-color: rgba(255,255,255,0.08); }
    .drawer-brand-img { height: 38px; border-radius: 8px; margin-right: 12px; }
    .drawer-brand-text { font-size: 1.25rem; font-weight: 900; color: #1a73e8; margin: 0; letter-spacing: 0.5px;}
    body.dark-theme .drawer-brand-text { color: #ffeb3b; text-shadow: 0 0 8px rgba(255, 235, 59, 0.4); }

    .nav-item { width: 100%; border: none; margin-bottom: 6px; }
    .dropbtn { width: 100%; text-align: left; padding: 12px 16px; font-size: 0.88rem; border-radius: 12px; background: rgba(0,0,0,0.03); border: 1px solid transparent; }
    body.dark-theme .dropbtn { background: rgba(255,255,255,0.03); color: #e2e8f0; }
    .nav-item.mobile-expand .dropbtn { background: #f0f7ff; color: #1a73e8; border-color: rgba(26,115,232,0.2); }
    body.dark-theme .nav-item.mobile-expand .dropbtn { background: rgba(255,235,59,0.1); color: #ffeb3b; border-color: rgba(255,235,59,0.2); }
    
    .dropdown-content { position: static !important; box-shadow: none !important; border: none !important; border-radius: 12px !important; background: transparent !important; border-left: 2px solid #cbd5e1 !important; margin-left: 10px !important; padding: 5px 0 !important; width: calc(100% - 10px) !important; display: none; }
    body.dark-theme .dropdown-content { border-left: 2px solid #334155 !important;}
    .dropdown-content::before { display: none !important; }
    .nav-item.mobile-expand .dropdown-content { display: flex !important; }
    .dropdown-content a { padding: 10px 15px; font-size: 0.82rem; border-bottom: none; border-radius: 8px; margin-bottom: 2px; }
    .dropdown-content a:hover { background: rgba(0,0,0,0.04); }
    body.dark-theme .dropdown-content a:hover { background: rgba(255,255,255,0.05); }

    .mobile-only-auth { display: flex; width: 100%; margin-top: 25px; flex-direction: column; gap: 10px;}
    .auth-nav-btn { width: 100%; text-align: center; padding: 14px; font-size: 0.95rem; font-weight: 900; border-radius: 14px; background: linear-gradient(135deg, #1a73e8 0%, #1e40af 100%); box-shadow: 0 6px 15px rgba(26,115,232,0.3); }
    body.dark-theme .auth-nav-btn { background: linear-gradient(135deg, #facc15 0%, #eab308 100%); color: #0f172a; box-shadow: 0 6px 15px rgba(250,204,21,0.2); }
    .user-profile-nav { width: 100%; justify-content: flex-start; padding: 10px; border-radius: 14px; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); position: relative;}
    .profile-dropdown-menu { left: 0 !important; right: auto !important; width: 100% !important; }
}

/* ========================================== */
/* SLEEK FOOTER (With Content-Visibility Optimizations) */
/* ========================================== */
.final-footer { position: relative; background: #1c182b; text-align: center; padding: 15px 20px; width: 100%; z-index: 2; box-sizing: border-box; border-top: 1px solid rgba(0,0,0,0.1); content-visibility: auto; contain-intrinsic-size: auto 100px; }
body.dark-theme .final-footer { background: #0f0f1a !important; border-top: none !important;}
body.dark-theme .final-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #00e5ff, #ffeb3b, transparent); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); z-index: 10; }
.footer-links { margin-bottom: 8px; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.footer-links a { color: #90caf9; text-decoration: none; font-size: 0.85rem; font-weight: 700; transition: color 0.2s; }
.footer-links a:hover { color: #ffffff; text-decoration: underline; }
.copyright-text { font-size: 0.75rem; font-weight: 500; color: #94a3b8; letter-spacing: 0.3px; line-height: 1.2; margin: 0; }
@media (max-width: 600px) { .final-footer { padding: 12px 10px; } .footer-links { gap: 10px; margin-bottom: 5px; } .footer-links a { font-size: 0.8rem; } .copyright-text { font-size: 0.7rem; } }

/* Premium Modal Core Layout Boundaries */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); z-index: 100005; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.auth-modal { background: #ffffff; color: #333; width: 95%; max-width: 440px; border-radius: 20px; position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes modalPop { 0% { transform: scale(0.95) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.auth-modal-scrollable-inner { max-height: 85vh; overflow-y: auto; overflow-x: hidden; padding: 30px; box-sizing: border-box; }
.auth-modal-scrollable-inner::-webkit-scrollbar { width: 6px; }
.auth-modal-scrollable-inner::-webkit-scrollbar-track { background: transparent; margin: 10px; }
.auth-modal-scrollable-inner::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 10px; }
.auth-modal-scrollable-inner::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); }
body.dark-theme .auth-modal-scrollable-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
body.dark-theme .auth-modal-scrollable-inner::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
.modal-logo-img { height: 40px; width: auto; margin: 0 auto 10px auto; display: block; object-fit: contain;}
.modal-title { text-align: center; color: #0f172a; font-weight: 900; font-size: 1.3rem; margin: 0 0 6px 0;}
.modal-subtitle { text-align: center; color: #64748b; font-size: 0.85rem; margin: 0 0 15px 0; font-weight: 600;}
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.input-group { position: relative; width: 100%; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; z-index: 2; }
.auth-input { width: 100%; padding: 12px 44px 12px 40px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; color: #1e293b; outline: none; transition: 0.2s; background: #f8fafc; box-sizing: border-box; font-weight: 600;}
.auth-input:focus { border-color: #1a73e8; background: #ffffff; box-shadow: 0 0 0 4px rgba(26,115,232,0.1); }
.password-toggle-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; cursor: pointer; user-select: none; z-index: 10; color: #94a3b8; transition: color 0.2s; }
.password-toggle-eye:hover { color: #1a73e8; }
.submit-btn { background: #1a73e8; color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 900; font-size: 1rem; cursor: pointer; transition: 0.2s; width: 100%; box-shadow: 0 4px 12px rgba(26,115,232,0.25); }
.submit-btn:hover { background: #1565c0; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(26,115,232,0.35); }
.divider { display: flex; align-items: center; text-align: center; color: #94a3b8; font-size: 0.8rem; font-weight: 700; margin: 8px 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e8f0; }
.google-btn { background: #ffffff; color: #333; border: 1.5px solid #e2e8f0; padding: 10px; border-radius: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.95rem; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); width: 100%; box-sizing: border-box;}
.google-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.switch-mode { text-align: center; font-size: 0.85rem; color: #64748b; font-weight: 600; margin-top: 4px; }
.switch-mode span { color: #1a73e8; font-weight: 900; cursor: pointer; transition: 0.2s;}
.switch-mode span:hover { text-decoration: underline; color: #1565c0; }
#auth-error-msg { color: #ef4444; font-size: 0.85rem; text-align: center; font-weight: 800; background: #fef2f2; border-radius: 8px; padding: 8px; display: none; margin-bottom: 10px; }
.mandatory-form-note { background: #fffbeb; border: 1px dashed #f59e0b; color: #b45309; padding: 10px; border-radius: 8px; font-size: 0.8rem; text-align: center; font-weight: 800; margin-bottom: 15px; }
body.dark-theme .mandatory-form-note { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.3); color: #fef08a; }
.avatar-upload-wrapper { position: relative; width: 80px; height: 80px; margin: 0 auto 15px auto; cursor: pointer; }
.avatar-preview-circle { width: 100%; height: 100%; border-radius: 50%; border: 2px dashed #cbd5e1; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; overflow: hidden; position: relative; }
body.dark-theme .avatar-preview-circle { border-color: #475569; background: #1e293b; }
.avatar-preview-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-badge { position: absolute; bottom: 0; right: 0; background: #1a73e8; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

@media (max-width: 600px) {
    #authModalOverlay { padding: 0 !important; align-items: flex-end !important; }
    .auth-modal { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; border-radius: 28px 28px 0 0 !important; border: none !important; transform: translateY(100%); animation: slideUpModal 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
    @keyframes slideUpModal { to { transform: translateY(0); } }
    .auth-modal-scrollable-inner { padding: 35px 25px 40px 25px !important; }
    .auth-input { padding: 16px 44px 16px 40px !important; border-radius: 12px !important; font-size: 1.05rem !important; }
    .submit-btn, .google-btn { padding: 16px !important; border-radius: 12px !important; font-size: 1.1rem !important; }
}