/* Unified Navbar CSS - Mobile-First Responsive Design */
 /* This file consolidates all navbar styles for consistent implementation across all pages */

 :root {
     /* General Colors */
     --primary-color: #1877f2;
     --blue-primary: #1aadf1;
     --blue-light: #E1F5FE;
     --blue-dark: #0288D1;
     --bg-color: #f0f2f5;
     --card-bg: #ffffff;
     --text-color: #050505;
     --secondary-text-color: #65676b;
     --border-color: #dddfe2;
     --hover-color: #E4E6E9;
     --navbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 }

 /* Dark Mode Variables */
 body.dark-mode {
     --bg-color: #18191A;
     --card-bg: #242526;
     --text-color: #E4E6EB;
     --secondary-text-color: #B0B3B8;
     --border-color: #3A3B3C;
     --hover-color: #3A3B3C;
 }

 /* Base Reset */
 * {
     box-sizing: border-box;
 }

 /* Main Navbar Container */
 .main-navbar {
     background-color: #ffffff !important;
     border-bottom: 1px solid var(--border-color) !important;
     padding: 0 30px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     opacity: 1;
     z-index: 10001;
     box-shadow: var(--navbar-shadow);
     transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 /* Header Section Z-Index Management */
 header,
 .header,
 .page-header,
 .main-header,
 .content-header {
     z-index: 10001;
     position: relative;
     background: var(--card-bg);
 }

 /* Additional header selectors for common patterns  
 .page-container>header,
 .content-wrapper>header,
 .main-content>header,
 [class*="header"] {
     z-index: 1002;
     position: relative;
 }
*/
 /* Ensure header content is above navbar */
 .header-content,
 .header-wrapper,
 .page-title,
 .content-title {
     z-index: 1003;
     position: relative;
 }

 /* Utility class for manual header control */
 .bring-forward {
     z-index: 1002 !important;
     position: relative !important;
 }

 .bring-forward-high {
     z-index: 1003 !important;
     position: relative !important;
 }

 body.dark-mode .main-navbar {
     background-color: rgba(36, 37, 38, 0.95) !important;
     border-bottom-color: var(--border-color) !important;
 }

 /* Auth Navbar Styling */
 .main-navbar.auth-navbar .auth-navbar-links {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .main-navbar.auth-navbar .auth-navbar-links a {
     color: var(--text-color);
     text-decoration: none;
     padding: 8px 12px;
     border-radius: 6px;
     transition: background-color 0.3s ease;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .main-navbar.auth-navbar .auth-navbar-links a:hover {
     background-color: var(--hover-color);
 }

 /* Navbar Left Section */
 .navbar-left {
     display: flex;
     align-items: center;
     gap: 15px;
     flex: 1;
     min-width: 0;
 }

 .navbar-logo img {
    height: 24px;
    transition: transform 0.2s ease;
}

 .navbar-logo:hover img {
     transform: scale(1.05);
 }

 /* Search Section - Removed */

 /* Navbar Right Section */
 .navbar-right {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Nav Action Buttons */
 .nav-action-btn {
     background-color: transparent;
     color: var(--secondary-text-color);
     border: none;
     border-radius: 50%;
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;
     cursor: pointer;
     pointer-events: auto;
 }

 .nav-action-btn:hover {
     background-color: var(--hover-color);
     color: var(--text-color);
 }

 .nav-action-btn.active {
     color: var(--blue-primary);
 }

 .nav-action-btn.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 4px;
     right: 4px;
     height: 3px;
     background-color: var(--blue-primary);
     border-radius: 2px;
 }

 /* User Menu */
 .user-menu-container {
     position: relative;
 }

 .user-menu-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     background: transparent;
     border: 2px solid transparent;
     border-radius: 24px;
     padding: 2px;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
 }

 .user-menu-btn:hover {
     background-color: var(--hover-color);
     border-color: var(--border-color);
 }

 .user-menu-btn.active {
     background-color: var(--hover-color);
     border-color: var(--primary-color);
 }

 .user-menu-btn img {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid transparent;
     transition: border-color 0.2s ease;
 }

 .user-menu-btn:hover img {
     border-color: var(--primary-color);
 }

 .user-menu-btn .dropdown-arrow {
     font-size: 0.7rem;
     color: var(--secondary-text-color);
     transition: transform 0.2s ease, color 0.2s ease;
     margin-right: 4px;
 }

 .user-menu-btn.active .dropdown-arrow {
     transform: rotate(180deg);
     color: var(--primary-color);
 }

 .user-menu-btn .admin-badge {
     position: absolute;
     top: -2px;
     right: 20px;
     background: linear-gradient(135deg, #ffd700, #ffed4e);
     color: #8b6914;
     border-radius: 50%;
     width: 18px;
     height: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.65rem;
     border: 2px solid var(--card-bg);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .user-dropdown-menu {
     display: none;
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     width: 280px;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.2s ease, transform 0.2s ease;
     z-index: 10002 !important;
     overflow: hidden;
 }

 .user-dropdown-menu.show {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }

 .user-dropdown-header {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
     background: linear-gradient(135deg, var(--blue-light), var(--card-bg));
     border-bottom: 1px solid var(--border-color);
 }

 .user-dropdown-header img {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--primary-color);
 }

 .user-dropdown-info {
     flex: 1;
     min-width: 0;
 }

 .user-dropdown-name {
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-color);
     margin-bottom: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .user-dropdown-role {
     font-size: 0.8rem;
     color: var(--secondary-text-color);
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .user-dropdown-role i {
     color: #ffd700;
 }

 .user-dropdown-divider {
     height: 1px;
     background-color: var(--border-color);
     margin: 4px 0;
 }

 .user-dropdown-menu .dropdown-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     color: var(--text-color);
     text-decoration: none;
     transition: background-color 0.15s ease;
     cursor: pointer;
 }

 .user-dropdown-menu .dropdown-item:hover {
     background-color: var(--hover-color);
 }

 .user-dropdown-menu .dropdown-item i {
     width: 20px;
     text-align: center;
     font-size: 1rem;
     color: var(--secondary-text-color);
     transition: color 0.15s ease;
 }

 .user-dropdown-menu .dropdown-item:hover i {
     color: var(--primary-color);
 }

 .user-dropdown-menu .dropdown-item span {
     flex: 1;
     font-size: 0.9rem;
 }

 .user-dropdown-menu .dropdown-item.admin-item {
     background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
 }

 .user-dropdown-menu .dropdown-item.admin-item i {
     color: #ffd700;
 }

 .user-dropdown-menu .dropdown-item.logout-item {
     color: #e74c3c;
 }

 .user-dropdown-menu .dropdown-item.logout-item:hover {
     background-color: rgba(231, 76, 60, 0.1);
 }

 .user-dropdown-menu .dropdown-item.logout-item i {
     color: #e74c3c;
 }

 /* Mobile menu toggle hamburger */
 .mobile-menu-toggle {
     display: none;
     background-color: transparent;
     color: var(--secondary-text-color);
     border: none;
     border-radius: 50%;
     width: 44px;
     height: 44px;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     pointer-events: auto;
     z-index: 10002;
 }

 .mobile-menu-toggle:hover {
     background-color: var(--hover-color);
     color: var(--text-color);
 }

 .mobile-menu-toggle.active {
     color: var(--blue-primary);
     background-color: var(--hover-color);
 }

 /* Mobile Profile Button - Removed */

/* Desktop Only Elements */
 .desktop-only {
     display: block;
 }

 /* Responsive Design */
 @media (max-width: 768px) {

     /* Show mobile-specific elements */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Hide desktop-only elements */
     .desktop-only {
         display: none !important;
     }

     /* Hide auth buttons on mobile */
     .auth-buttons {
         display: none;
     }

     /* Ensure mobile buttons are properly spaced */
     .navbar-right {
         gap: 4px;
     }

     /* Adjust navbar padding for mobile */
     .main-navbar {
         padding: 0 12px;
     }

     /* Make all nav buttons touch-friendly and clickable */
    .nav-action-btn,
    .mobile-menu-toggle {
        min-width: 40px;
         min-height: 40px;
         width: 40px;
         height: 40px;
         font-size: 1rem;
         z-index: 10002;
         pointer-events: auto;
         cursor: pointer;
     }

     /* Adjust user menu for mobile (if shown) */
     .user-menu-btn {
         padding: 0;
         background: transparent;
         border: none;
         display: flex;
         align-items: center;
         gap: 8px;
         border-radius: 20px;
         padding: 4px;
         transition: background-color 0.2s ease;
     }

     .user-menu-btn:hover {
         background-color: var(--hover-color);
     }

     .user-menu-btn img {
         width: 36px;
         height: 36px;
     }

     .user-menu-btn .username {
         font-size: 0.9rem;
         font-weight: 500;
     }
 }

 /* Desktop screens - ensure mobile elements are completely hidden */
 @media (min-width: 768px) {
     .mobile-menu {
         display: none !important;
         visibility: hidden !important;
         opacity: 1 !important;
         z-index: 10001 !important;
     }


 }

 /* Mobile Menu */
 .mobile-menu {
     display: none !important;
     position: fixed;
     top: 60px;
     left: 0;
     width: 100%;
     height: calc(100vh - 60px);
     background-color: var(--card-bg);
     opacity: 1 !important;
     z-index: 10001 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: 100px; /* Extra padding for mobile bottom bars */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

 .mobile-menu.active {
     display: block !important;
     background-color: var(--card-bg) !important;
     opacity: 1 !important;
     z-index: 10001 !important;
 }

 .mobile-menu .nav-action-btn {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px 10px;
     border-bottom: 1px solid var(--border-color);
     color: var(--text-color);
     text-decoration: none;
     border-radius: 8px;
     margin-bottom: 5px;
     transition: background-color 0.2s ease;
 }

 .mobile-menu .nav-action-btn:hover {
     background-color: var(--hover-color);
 }

 .mobile-menu .nav-action-btn span {
     font-size: 1rem;
     font-weight: 500;
 }

 .mobile-menu .mobile-nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px 10px;
     border-bottom: 1px solid var(--border-color);
     color: var(--text-color);
     text-decoration: none;
     border-radius: 8px;
     margin-bottom: 5px;
     transition: background-color 0.2s ease;
     cursor: pointer;
     pointer-events: auto;
     position: relative;
 }

 .mobile-menu .mobile-nav-item:hover {
     background-color: var(--hover-color);
 }

 .mobile-menu .mobile-nav-item span {
     font-size: 1rem;
     font-weight: 500;
 }

 .mobile-menu .btn-block {
     width: 100%;
     margin-top: 15px;
     padding: 12px;
     text-align: center;
     border-radius: 8px;
     font-weight: 500;
 }

 .mobile-menu .btn-block.primary {
     background-color: var(--blue-primary);
     color: white;
     border: none;
 }

 .mobile-menu .btn-block.primary:hover {
     background-color: var(--blue-dark);
 }

 .mobile-menu .btn-block.secondary {
     background-color: var(--hover-color);
     color: var(--text-color);
     border: 1px solid var(--border-color);
 }

 .mobile-menu .btn-block.secondary:hover {
     background-color: var(--hover-color);
 }

 .mobile-menu .mobile-user-section {
     margin-top: 20px;
     padding-top: 15px;
     border-top: 1px solid var(--border-color);
 }

 .mobile-menu .mobile-user-section .user-info {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 15px;
 }

 .mobile-menu .mobile-user-section .user-info img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
 }

 .mobile-menu .mobile-user-section .user-info .username {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--text-color);
 }

 .mobile-menu .mobile-user-section .user-info .user-email {
     font-size: 0.9rem;
     color: var(--secondary-text-color);
 }

 .mobile-menu .mobile-user-section .logout-btn {
     display: block;
     width: 100%;
     padding: 10px;
     text-align: center;
     border-radius: 8px;
     background-color: var(--hover-color);
     color: var(--text-color);
     border: none;
     font-weight: 500;
     transition: background-color 0.2s ease;
 }

 .mobile-menu .mobile-user-section .logout-btn:hover {
     background-color: var(--border-color);
 }

 /* Adjustments for dark mode */
 body.dark-mode .mobile-menu {
     background-color: var(--card-bg) !important;
 }

 body.dark-mode .mobile-menu .nav-action-btn,
 body.dark-mode .mobile-menu .mobile-nav-item {
     color: var(--text-color);
 }

 body.dark-mode .mobile-menu .nav-action-btn:hover,
 body.dark-mode .mobile-menu .mobile-nav-item:hover {
     background-color: var(--hover-color);
 }

 body.dark-mode .mobile-menu .btn-block.secondary {
     background-color: var(--border-color);
     color: var(--text-color);
     border: 1px solid var(--border-color);
 }

 body.dark-mode .mobile-menu .btn-block.secondary:hover {
     background-color: var(--hover-color);
 }

 body.dark-mode .mobile-menu .mobile-user-section .user-info .username {
     color: var(--text-color);
 }

 body.dark-mode .mobile-menu .mobile-user-section .user-info .user-email {
     color: var(--secondary-text-color);
 }

 body.dark-mode .mobile-menu .mobile-user-section .logout-btn {
     background-color: var(--hover-color);
     color: var(--text-color);
 }

 body.dark-mode .mobile-menu .mobile-user-section .logout-btn:hover {
     background-color: var(--border-color);
 }

 /* Notification Container */
 .notification-container {
     position: relative;
 }

 /* Notification Badge (inside the nav-action-btn) */
 .notification-badge {
     position: absolute;
     top: 4px;
     right: 4px;
     background-color: #ff4444;
     color: white;
     border-radius: 50%;
     padding: 1px 4px;
     font-size: 10px;
     font-weight: bold;
     min-width: 18px;
     height: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--card-bg);
     box-sizing: border-box;
     pointer-events: none;
     /* Allow clicks to pass through to parent link */
     z-index: 1;
 }

 /* Notification Dropdown */
 .notification-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
     width: 380px;
     max-height: 480px;
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     z-index: 10002;
     overflow: hidden;
     flex-direction: column;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.2s ease, transform 0.2s ease;
 }

 .notification-dropdown.show {
     display: flex;
     opacity: 1;
     transform: translateY(0);
 }

 .nav-action-btn.active {
     color: var(--blue-primary);
     background-color: var(--hover-color);
 }

 .notification-dropdown-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px;
     border-bottom: 1px solid var(--border-color);
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--blue-light), var(--card-bg));
 }

 .notification-dropdown-header h4 {
     margin: 0;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--text-color);
 }

 .notification-dropdown-header .see-all-link {
     font-size: 0.85rem;
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
     padding: 4px 8px;
     border-radius: 4px;
     transition: background-color 0.15s ease;
 }

 .notification-dropdown-header .see-all-link:hover {
     background-color: var(--hover-color);
     text-decoration: none;
 }

 .notification-dropdown-body {
     overflow-y: auto;
     flex-grow: 1;
 }

 .notification-dropdown-item {
     display: flex;
     padding: 12px 16px;
     border-bottom: 1px solid var(--border-color);
     cursor: pointer;
     transition: all 0.15s ease;
     gap: 12px;
     align-items: flex-start;
     position: relative;
 }

 .notification-dropdown-item:last-child {
     border-bottom: none;
 }

 .notification-dropdown-item:hover {
     background-color: var(--hover-color);
 }

 .notification-dropdown-item.unread {
     background-color: rgba(26, 173, 241, 0.08);
     border-left: 3px solid var(--blue-primary);
     padding-left: 13px;
 }

 .notification-dropdown-item.unread .notification-avatar::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 12px;
     height: 12px;
     background-color: var(--blue-primary);
     border: 2px solid var(--card-bg);
     border-radius: 50%;
 }

 .notification-dropdown-item .notification-avatar {
     position: relative;
     flex-shrink: 0;
 }

 .notification-dropdown-item .notification-avatar img {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     object-fit: cover;
 }

 .notification-dropdown-content {
     font-size: 0.9rem;
     flex-grow: 1;
 }

 .notification-message {
     margin-bottom: 4px;
     color: var(--text-color);
     line-height: 1.4;
 }

 .notification-time {
     font-size: 0.8rem;
     color: var(--secondary-text-color);
     font-weight: 500;
 }

 .notif-loading,
 .empty-notifications,
 .notif-error {
     text-align: center;
     padding: 40px 20px;
     color: var(--secondary-text-color);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 12px;
 }

 .notif-loading i {
     font-size: 24px;
     color: var(--primary-color);
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .empty-notifications i,
 .notif-error i {
     font-size: 32px;
     display: block;
     opacity: 0.5;
 }

 .empty-notifications p,
 .notif-error p {
     margin: 0;
     font-size: 0.9rem;
 }

 .notif-error {
     color: #e74c3c;
 }

 .notif-error i {
     color: #e74c3c;
     opacity: 0.7;
 }

 /* Ensure proper badge positioning on mobile */
 @media (max-width: 768px) {
     .notification-badge {
         top: 2px;
         right: 2px;
         font-size: 9px;
         min-width: 16px;
         height: 16px;
         padding: 0 3px;
     }
 }

 /* Very small screens adjustment */
 @media (max-width: 480px) {
     .navbar-right {
         gap: 5px !important;
     }

     .navbar-right .nav-action-btn {
         width: 44px;
         height: 44px;
         min-width: 44px;
         min-height: 44px;
     }

     .notification-badge {
        top: 1px;
        right: 1px;
        font-size: 8px;
        min-width: 14px;
        height: 14px;
    }

    /* Fix for notification dropdown hidden on left side */
    .notification-dropdown {
        position: fixed;
        top: 60px;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 70px);
        border-radius: 12px;
    }
}

 /* Mobile Top Icons Bar - Removed */

 /* Show only on mobile */
 @media (max-width: 768px) {

     /* Consistent icon sizes for mobile */
     .navbar-right .nav-action-btn,
     .mobile-menu-toggle {
         width: 44px;
         height: 44px;
         min-width: 44px;
         min-height: 44px;
     }

     .user-menu-btn img {
         width: 36px;
         height: 36px;
     }
 }

 /* Mobile Bottom Navigation - REMOVED */
 /* All navigation is now in the top navbar for mobile */
 /* Mobile Menu Overlay */
 .mobile-menu-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10000;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .mobile-menu-overlay.active {
     display: block;
     opacity: 1;
 }