/* ==============================================
   MASTER HEADER CSS (GeneratorFree)
   ============================================== */
body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

/* Main Header */
.pro-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; background: #ffffff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 9000; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }

.header-left-zone { display: flex; align-items: center; gap: 40px; }

/* 🌟 BRANDING: Fully Responsive Logo & Domain */
.brand-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #0f172a; white-space: nowrap; }
.brand-logo i { color: #10b981; font-size: 26px; flex-shrink: 0; }
.brand-text { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; transition: 0.3s; }
.brand-text span { color: #10b981; }

/* Desktop Menu */
.desktop-menu { display: flex; gap: 25px; align-items: center; }
.desktop-menu a { text-decoration: none; color: #475569; font-weight: 600; font-size: 15px; transition: color 0.3s ease; display: flex; align-items: center; gap: 8px; }
.desktop-menu a:hover { color: #10b981; }

/* Right Side: Auth Buttons */
.header-right-zone { display: flex; align-items: center; gap: 15px; }
.btn-auth-login { color: #475569; font-weight: 600; text-decoration: none; padding: 8px 15px; transition: 0.3s; border-radius: 6px; }
.btn-auth-login:hover { background: #f1f5f9; color: #0f172a; }
.btn-auth-signup { background: #10b981; color: #fff; padding: 10px 24px; border-radius: 8px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); transition: 0.3s; }
.btn-auth-signup:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); }

.btn-create-inv { background: #0f172a; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.btn-create-inv:hover { background: #1e293b; color: #fff; }
.user-dash-btn { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #334155; font-weight: 600; background: #f8fafc; padding: 6px 15px; border-radius: 50px; border: 1px solid #e2e8f0; transition: 0.3s; }
.user-dash-btn:hover { border-color: #cbd5e1; background: #f1f5f9; }
.avatar-mini { width: 28px; height: 28px; background: #10b981; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 13px; font-weight: 700; }
.btn-logout-icon { color: #ef4444; font-size: 18px; padding: 10px; border-radius: 50%; transition: 0.3s; }
.btn-logout-icon:hover { background: #fef2f2; }

.mobile-menu-btn { display: none; font-size: 24px; color: #0f172a; cursor: pointer; border: none; background: transparent; padding: 5px; }

/* ==============================================
   🌟 MOBILE SIDEBAR (Coming from LEFT Side)
   ============================================== */
.mobile-sidebar { 
    position: fixed; 
    top: 0; 
    left: -320px; /* Hide on left */
    width: 300px; 
    max-width: 85vw; /* Safe zone for tiny screens */
    height: 100vh; 
    background: #fff; 
    box-shadow: 5px 0 25px rgba(0,0,0,0.1); /* Shadow to the right */
    z-index: 10000; 
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; 
    flex-direction: column; 
}
.mobile-sidebar.open { left: 0; /* Slide in from left */ }

.ms-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 20px; border-bottom: 1px solid #e2e8f0; }
.ms-header h3 { margin: 0; font-size: 20px; font-weight: 800; color: #0f172a; }
.ms-close { background: none; border: none; font-size: 26px; color: #64748b; cursor: pointer; }

/* Scrollable Area */
.ms-scroll-area { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 120px; }

.ms-user-info { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px dashed #cbd5e1; margin-bottom: 20px; }
.ms-avatar { width: 45px; height: 45px; background: #10b981; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.ms-user-text h4 { margin: 0 0 4px; color: #0f172a; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ms-user-text span { font-size: 13px; color: #10b981; font-weight: 600; }

.ms-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #475569; font-size: 16px; font-weight: 600; padding: 12px 0; transition: 0.3s; }
.ms-link i { width: 24px; text-align: center; color: #94a3b8; font-size: 18px; }
.ms-link:hover { color: #10b981; padding-left: 5px; }
.ms-link:hover i { color: #10b981; }

.ms-divider { height: 1px; background: #e2e8f0; margin: 15px 0; border: none; }

.ms-btn-outline { justify-content: center; border: 2px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; color: #0f172a; }
.ms-btn-solid { justify-content: center; background: #10b981; color: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(16,185,129,0.2); }
.ms-btn-solid:hover { color: #fff; padding-left: 0; background: #059669; }
.ms-btn-solid i { color: #fff !important; }

/* Overlay Background */
.ms-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.6); z-index: 9999; backdrop-filter: blur(4px); display: none; opacity: 0; transition: opacity 0.4s; }
.ms-overlay.show { display: block; opacity: 1; }

/* ==============================================
   📱 MOBILE RESPONSIVE FIXES
   ============================================== */
@media (max-width: 950px) {
    .desktop-menu, .header-right-zone { display: none; }
    .mobile-menu-btn { display: block; }
    .pro-header { padding: 15px 20px; }
}

/* 🌟 DYNAMIC LOGO SCALING FOR SMALL PHONES */
@media (max-width: 450px) {
    .header-left-zone { gap: 10px; }
    .brand-logo i { font-size: 20px; }
    
    /* Shrink the text so it doesn't touch the menu icon */
    .brand-text { font-size: 17px; } 
}

@media (max-width: 360px) {
    /* Very small phones */
    .brand-text { font-size: 15px; }
    .brand-logo i { font-size: 18px; }
}