@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --nav-bg: #185619;
    --white: #f2f2f2;
    --black: #000;
    --background: #FBFDFB;
    --shadow: 4px 4px 1px 0px #000;
    --shadow-mobile: 2px 2px 1px 0px #00000042;
    --reverse-shadow: -4px -4px 1px 0px #00000061;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: "Inter", sans-serif;
    transition: all .3s ease-in-out;
}

.dashboard-navbar {
background: #185619;
padding: 16px 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
width: 100%;
}

.navbar-container {
display: flex;
padding: 0px 64px;
justify-content: space-between;
align-items: center;
width: 100%;
}

.navbar-right {
display: flex;
align-items: center;
gap: 32px;
flex-shrink: 0;
margin-left: auto;
}

.lang-selector {
display: flex;
align-items: center;
gap: 4px;
color: #f2f2f2; /* Same white color as original */
text-decoration: none;
font-weight: 500;
font-size: 15px;
}

.notification-bell {
position: relative;
background: none;
border: none;
color: var(--black);
background: var(--background);
box-shadow: var(--shadow);
cursor: pointer;
padding: 6px;
border-radius: 4px;
}

.notification-bell:hover {
opacity: 0.8;
box-shadow: var(--reverse-shadow);
}

.notification-badge {
position: absolute;
top: 2px;
right: 2px;
background: #ef4444;
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 50%;
min-width: 16px;
text-align: center;
line-height: 1.2;
}

.user-dropdown {
position: relative;
}

.user-button {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: 1px solid var(--black);
color: var(--black);
background-color: var(--background);
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
transition: all .3s ease-in-out;
font-weight: 500;
font-size: 15px;
box-shadow: var(--shadow);
}

.user-button:hover {
opacity: 0.8;
box-shadow: var(--reverse-shadow);
}

.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #10b981;
}

.navbar-avatar-container {
position: relative;
display: inline-block;
}

.verification-badge-navbar {
position: absolute;
bottom: -2px;
right: -2px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.verification-badge-navbar.verified-normal {
background: #10b981;
color: white;
}

.verification-badge-navbar.verified-premium {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: white;
}

.verification-badge-navbar svg {
width: 8px;
height: 8px;
}

.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease-in-out;
z-index: 1001;
margin-top: 8px;
}

.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.dropdown-menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #374151;
text-decoration: none;
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.2s;
font-size: 14px;
font-weight: 500;
}

.dropdown-menu a:hover {
background: #f9fafb;
color: #10b981;
}

.dropdown-menu a:last-child {
border-bottom: none;
border-radius: 0 0 8px 8px;
}

.dropdown-menu a:first-child {
border-radius: 8px 8px 0 0;
}

/* Content area styles for authenticated users */
.authenticated-content {
min-height: 100vh;
background: #f8fafc;
padding:1rem 1rem 2rem 1rem;
margin: 0 auto;
}

/* Home page styles for unauthenticated users */
.base-main-content {
margin-top: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
.navbar-container {
    padding: 0px 32px;
}
}

@media (max-width: 768px) {
    .navbar-container {
        padding: 0px 16px;
        gap: 16px;
    }

    .navbar-right {
        gap: 16px;
    }

    .authenticated-content {
        padding: 0;
    }
    .username-tohide{
        display: none;
    }
}



/* Print Styles */
@media print {
.dashboard-navbar,
.nav-container-wrap {
    display: none !important;
}

.authenticated-content,
.base-main-content {
    padding: 0;
    margin: 0;
}
}