/* Mobile-First Smart Navigation Styles */
/* Refactored to use CSS variables for better maintainability */
/* Using high specificity selectors to override Tailwind without !important */

    /* Base Navigation Container */
    .mobile-nav-container {
        position: relative;
        z-index: var(--z-dropdown);
    }
    
    /* CRITICAL: Prevent duplicate top bars below 768px globally */
    @media (max-width: 767px) {
        /* Hide mobile navigation when discover-top-bar is present */
        body.discover-page nav[class*="navigation"],
        body.discover-page nav.bg-white,
        body.discover-page nav.bg-gray-800 {
            display: none !important;
        }
        
        /* CRITICAL: Hide mobile navigation top bar (logo + actions) on chat pages */
        body:has(.chat-container) nav.bg-white > div.md\:hidden,
        body:has(.chat-container) nav.bg-gray-800 > div.md\:hidden,
        body:has(.chat-container) nav[class*="navigation"] > div.md\:hidden {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Direct targeting of mobile top bar content on chat pages */
        body:has(.chat-container) nav > div.md\:hidden > div.flex.justify-between.items-center.h-14 {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        
        /* Ensure desktop navigation section is hidden on mobile - multiple selector approaches */
        nav > div.hidden[class*="md:block"],
        nav > div[class*="hidden"][class*="md:block"],
        nav div.hidden.md\:block,
        nav .hidden.md\:block {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        
        /* Also hide any direct child divs that might contain desktop navigation */
        nav.bg-white > div.hidden,
        nav.bg-gray-800 > div.hidden,
        nav[class*="navigation"] > div.hidden {
            display: none !important;
        }
    }

    /* Navigation Bar Base Styles */
    nav[class*="navigation"],
    nav.bg-white,
    nav.bg-gray-800 {
        background-color: var(--nav-bg-light);
        border-bottom: 1px solid var(--nav-border-light);
        box-shadow: var(--nav-shadow);
    }
    
    /* CRITICAL: Ensure consistent navigation container spacing across all pages */
    nav > div.hidden.md\:block > div.max-w-6xl {
        padding-left: 1rem !important; /* px-4 = 1rem */
        padding-right: 1rem !important;
    }
    
    @media (min-width: 1024px) {
        nav > div.hidden.md\:block > div.max-w-6xl {
            padding-left: 1.5rem !important; /* lg:px-6 = 1.5rem */
            padding-right: 1.5rem !important;
        }
    }
    
    /* Ensure navigation inner container has consistent height */
    nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center {
        height: 4rem !important; /* h-16 = 4rem */
        min-height: 4rem !important;
        align-items: center !important;
    }
    
    /* CRITICAL: Prevent logo from shifting */
    nav a[href="/discover"] img,
    nav a[href*="discover"] img {
        display: block !important;
        width: auto !important;
        height: 2rem !important; /* h-8 = 2rem */
        transform: translateZ(0) !important; /* Force GPU layer */
        will-change: transform !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CRITICAL: Prevent logo hover effects from causing layout shifts */
    nav a[href="/discover"]:hover img,
    nav a[href*="discover"]:hover img {
        transform: translateZ(0) scale(1.05) !important; /* Keep translateZ(0) to maintain GPU layer */
    }
    
    /* CRITICAL: Prevent avatar/profile button from shifting */
    nav .dropdown-container .dropdown-trigger img,
    nav .profile-menu-trigger img,
    nav button[aria-controls="profile-dropdown-menu"] img {
        display: block !important;
        width: 2rem !important; /* h-8 w-8 = 2rem */
        height: 2rem !important;
        border-radius: 9999px !important; /* rounded-full */
        object-fit: cover !important;
        transform: translateZ(0) !important; /* Force GPU layer */
        will-change: transform !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* CRITICAL: Prevent dropdown button container from shifting */
    nav .dropdown-container,
    nav .dropdown-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translateZ(0) !important; /* Force GPU layer */
        flex-shrink: 0 !important;
    }

    .dark nav[class*="navigation"],
    .dark nav.bg-white,
    .dark nav.bg-gray-800 {
        background-color: var(--nav-bg-dark);
        border-bottom-color: var(--nav-border-dark);
    }

    /* My Listings Link - All Screen Sizes */
    /* Using high specificity to override Tailwind without !important */
    nav a.host-portal-link,
    a.host-portal-link {
        display: inline-flex;
        align-items: center;
        padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight);
        color: var(--nav-host-text-light);
        transition: var(--nav-transition);
        border-radius: var(--nav-border-radius);
        text-decoration: none;
        background-color: transparent;
        border: 1px solid transparent !important; /* Reserve space for border to prevent shifts */
        margin: 0 !important; /* Remove any margins that could cause shifting */
        flex-shrink: 0 !important; /* Prevent button from shrinking */
        /* CRITICAL: Prevent layout shifts from transforms */
        will-change: transform;
        transform: translateZ(0); /* Force GPU acceleration and prevent layout shifts */
    }
    
    /* Ensure profile dropdown container doesn't cause shifting */
    nav .dropdown-container {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .dark nav a.host-portal-link,
    .dark a.host-portal-link {
        color: var(--nav-host-text-dark);
    }

    nav a.host-portal-link:hover,
    a.host-portal-link:hover {
        color: var(--nav-host-text-hover-light);
        background-color: var(--nav-host-bg-hover-light);
        text-decoration: none;
        /* CRITICAL: Prevent layout shifts - use transform that doesn't affect layout flow */
        transform: translateZ(0) translateY(-1px); /* Keep translateZ(0) to maintain GPU layer */
    }

    .dark nav a.host-portal-link:hover,
    .dark a.host-portal-link:hover {
        color: var(--nav-host-text-hover-dark);
        background-color: var(--nav-host-bg-hover-dark);
    }

    nav a.host-portal-link.active,
    a.host-portal-link.active {
        color: var(--nav-host-text-hover-light);
        background-color: var(--nav-host-active-bg-light);
        font-weight: var(--nav-font-weight-active);
        box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2), 0 0 12px rgba(22, 163, 74, 0.3);
        border: 1px solid rgba(22, 163, 74, 0.3) !important; /* Use same border width as default */
        /* CRITICAL: Prevent layout shifts - maintain same dimensions */
        transform: translateZ(0); /* Keep GPU layer, no translateY on active state */
        margin: 0 !important; /* Ensure no margin changes */
    }

    .dark nav a.host-portal-link.active,
    .dark a.host-portal-link.active {
        color: var(--nav-host-text-hover-dark);
        background-color: var(--nav-host-active-bg-dark);
        font-weight: var(--nav-font-weight-active);
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3), 0 0 12px rgba(74, 222, 128, 0.4);
        border: 1px solid rgba(74, 222, 128, 0.4);
    }

    /* CRITICAL: Force hide desktop navigation on mobile - placed here for specificity */
    @media (max-width: 767px) {
        /* Hide the desktop navigation section (first div child of nav) */
        nav.bg-white > div:first-child,
        nav.bg-gray-800 > div:first-child,
        nav[class*="navigation"] > div:first-child {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* CRITICAL: Hide desktop navigation on host pages (dashboard and all host pages) */
        /* Target the desktop navigation div with hidden md:block class */
        body.user-is-host nav.bg-white > div.hidden.md\:block,
        body.user-is-host nav.bg-gray-800 > div.hidden.md\:block,
        body.user-is-host nav > div.hidden[class*="md:block"],
        body.user-is-host nav > div[class*="hidden"][class*="md:block"],
        body.user-is-host nav > div:first-child.hidden.md\:block,
        /* Also target by first-child selector for host pages */
        body.user-is-host nav.bg-white > div:first-child,
        body.user-is-host nav.bg-gray-800 > div:first-child {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Alternative: Target by URL path for host pages (if user-is-host class not present) */
        body:has([href*="/host/dashboard"]) nav > div.hidden.md\:block,
        body:has([href*="/host/listings"]) nav > div.hidden.md\:block,
        body:has([href*="/host/orders"]) nav > div.hidden.md\:block,
        body:has([href*="/host/edit"]) nav > div.hidden.md\:block,
        body:has([href*="/host/dashboard"]) nav > div:first-child,
        body:has([href*="/host/listings"]) nav > div:first-child,
        body:has([href*="/host/orders"]) nav > div:first-child,
        body:has([href*="/host/edit"]) nav > div:first-child {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }

    /* Desktop Navigation Links */
    @media (min-width: 768px) {
        /* CRITICAL: Ensure consistent spacing between navigation items - match dashboard */
        /* Target the right-side navigation container */
        nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div.flex.items-center:last-child,
        nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div:last-child.flex.items-center {
            gap: 1.5rem !important; /* Consistent 1.5rem (24px) spacing between buttons - matches dashboard */
            display: flex !important;
            align-items: center !important;
        }
        
        /* Ensure logo section spacing is consistent */
        nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div.flex-shrink-0.flex.items-center:first-child {
            gap: 1.5rem !important; /* Consistent spacing between logo and discover button */
        }
        
        /* Remove space-x-6 class spacing and use gap instead for consistency */
        nav > div.hidden.md\:block > div.max-w-6xl > div.flex.justify-between.items-center > div[class*="space-x-6"] {
            gap: 1.5rem !important;
        }
        
        nav a.nav-link,
        a.nav-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
            font-size: var(--nav-font-size);
            font-weight: var(--nav-font-weight);
            color: var(--nav-text-light);
            transition: var(--nav-transition);
            border-radius: var(--nav-border-radius);
            text-decoration: none;
            background-color: transparent;
            border: none;
            margin: 0 !important; /* Remove any margins that could cause shifting */
            /* CRITICAL: Prevent layout shifts from transforms */
            will-change: transform;
            transform: translateZ(0); /* Force GPU acceleration and prevent layout shifts */
        }

        .dark nav a.nav-link,
        .dark a.nav-link {
            color: var(--nav-text-dark);
        }

        nav a.nav-link:hover,
        a.nav-link:hover {
            color: var(--nav-text-hover-light);
            background-color: var(--nav-bg-hover-light);
            text-decoration: none;
            /* CRITICAL: Prevent layout shifts - use transform that doesn't affect layout flow */
            transform: translateZ(0) translateY(-1px); /* Keep translateZ(0) to maintain GPU layer */
        }

        .dark nav a.nav-link:hover,
        .dark a.nav-link:hover {
            color: var(--nav-text-hover-dark);
            background-color: var(--nav-bg-hover-dark);
        }

        nav a.nav-link.active,
        a.nav-link.active {
            color: var(--nav-active-text-light);
            background-color: var(--nav-active-bg-light);
            /* CRITICAL: Prevent layout shifts - maintain same dimensions */
            transform: translateZ(0); /* Keep GPU layer, no translateY on active state */
            margin: 0 !important; /* Ensure no margin changes */
        }

        .dark nav a.nav-link.active,
        .dark a.nav-link.active {
            color: var(--nav-active-text-dark);
            background-color: var(--nav-active-bg-dark);
        }
    }

    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--nav-bg-light);
        border-top: 1px solid var(--nav-border-light);
        z-index: 40;
        padding: var(--spacing-sm) 0;
        box-shadow: var(--shadow-medium);
    }

    .dark .mobile-bottom-nav {
        background-color: var(--nav-bg-dark);
        border-top-color: var(--nav-border-dark);
    }

    .mobile-nav-items {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
    
    /* Ensure mobile bottom nav container centers items */
    #mobile-bottom-nav > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        color: var(--color-gray-500);
        transition: var(--nav-transition);
        text-decoration: none;
        min-width: 60px;
        position: relative;
    }

    .dark .mobile-nav-item {
        color: var(--color-gray-400);
    }

    .mobile-nav-item:hover {
        color: var(--color-gray-700);
        transform: translateY(-1px);
    }

    .dark .mobile-nav-item:hover {
        color: var(--color-gray-300);
    }

    .mobile-nav-item.active {
        color: var(--nav-active-text-light);
    }

    .dark .mobile-nav-item.active {
        color: var(--nav-active-text-dark);
    }

    .mobile-nav-item.host-portal-item {
        color: var(--nav-host-text-light);
    }

    .dark .mobile-nav-item.host-portal-item {
        color: var(--nav-host-text-dark);
    }

    .mobile-nav-item.host-portal-item.active {
        color: var(--nav-host-text-hover-light);
    }

    .dark .mobile-nav-item.host-portal-item.active {
        color: var(--nav-host-text-hover-dark);
    }

    .mobile-nav-item svg {
        width: var(--icon-lg);
        height: var(--icon-lg);
        margin-bottom: var(--spacing-xs);
    }

    .mobile-nav-item span {
        font-size: var(--font-size-xs);
        line-height: 1rem;
        font-weight: var(--nav-font-weight);
    }

    /* Mobile Profile Modal */
    #mobile-profile-modal,
    .mobile-profile-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50;
    }

    #mobile-profile-modal.hidden,
    .mobile-profile-modal:not(.active) {
        display: none;
    }

    #mobile-profile-modal:not(.hidden),
    .mobile-profile-modal.active {
        display: block;
    }

    #mobile-profile-modal > div,
    .mobile-profile-content {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        border-radius: 1rem 1rem 0 0;
        max-height: 80vh;
        overflow-y: auto;
        animation: slideUp 0.3s ease-out;
    }

    .dark #mobile-profile-modal > div,
    .dark .mobile-profile-content {
        background-color: rgb(31, 41, 55);
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .mobile-profile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-base);
        border-bottom: 1px solid var(--nav-border-light);
    }

    .dark .mobile-profile-header {
        border-bottom-color: var(--nav-border-dark);
    }

    .mobile-profile-body {
        padding: var(--spacing-base);
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: rgb(55, 65, 81);
        text-decoration: none;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        margin-bottom: 0.5rem;
        width: 100%;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 0.875rem;
    }

    .dark .mobile-menu-item {
        color: rgb(209, 213, 219);
    }

    .mobile-menu-item:hover {
        background-color: rgb(243, 244, 246);
        color: rgb(17, 24, 39);
    }

    .dark .mobile-menu-item:hover {
        background-color: rgb(55, 65, 81);
        color: rgb(243, 244, 246);
    }

    .mobile-menu-item:active {
        background-color: rgb(229, 231, 235);
    }

    .dark .mobile-menu-item:active {
        background-color: rgb(75, 85, 99);
    }

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

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

    .mobile-menu-item.admin-menu-item {
        color: rgb(126, 34, 206);
        background-color: rgb(250, 245, 255);
    }

    .dark .mobile-menu-item.admin-menu-item {
        color: rgb(196, 181, 253);
        background-color: rgb(88, 28, 135);
    }

    .mobile-menu-item svg {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    /* Mobile Profile Modal Header */
    #mobile-profile-modal > div > div:first-child,
    #mobile-profile-modal .flex.justify-between.items-center.p-4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid rgb(229, 231, 235);
    }

    .dark #mobile-profile-modal > div > div:first-child,
    .dark #mobile-profile-modal .flex.justify-between.items-center.p-4 {
        border-bottom-color: rgb(55, 65, 81);
    }

    /* Mobile Profile Modal Content */
    #mobile-profile-modal > div > div:last-child,
    #mobile-profile-modal .p-4:not(:first-child) {
        padding: 1rem;
    }

    /* Close button styling */
    #close-profile-modal {
        padding: 0.25rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    #close-profile-modal:hover {
        background-color: rgb(243, 244, 246);
    }

    .dark #close-profile-modal:hover {
        background-color: rgb(55, 65, 81);
    }

    /* Host CTA Card */
    .host-cta-card {
        background: linear-gradient(135deg, var(--nav-host-bg-hover-light) 0%, rgb(239, 246, 255) 100%);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-base);
        margin: var(--spacing-base) 0;
        border: 1px solid rgb(187, 247, 208);
    }

    .dark .host-cta-card {
        background: linear-gradient(135deg, var(--nav-host-bg-hover-dark) 0%, rgb(30, 58, 138) 100%);
        border-color: rgb(22, 101, 52);
    }

    .host-cta-content {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .host-cta-icon {
        flex-shrink: 0;
    }

    .host-cta-icon svg {
        width: var(--icon-xl);
        height: var(--icon-xl);
        color: var(--nav-host-text-light);
    }

    .dark .host-cta-icon svg {
        color: var(--nav-host-text-dark);
    }

    .host-cta-text h4 {
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight-active);
        color: var(--color-gray-900);
        margin-bottom: var(--spacing-xs);
    }

    .dark .host-cta-text h4 {
        color: var(--color-gray-100);
    }

    .host-cta-text p {
        font-size: var(--font-size-xs);
        color: var(--color-gray-500);
    }

    .dark .host-cta-text p {
        color: var(--color-gray-400);
    }

    .host-cta-button {
        display: block;
        width: 100%;
        text-align: center;
        background-color: var(--nav-host-text-light);
        color: var(--color-gray-100);
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight);
        padding: var(--spacing-sm) var(--spacing-base);
        border-radius: var(--border-radius-base);
        margin-top: var(--spacing-lg);
        transition: var(--nav-transition);
        text-decoration: none;
    }

    .host-cta-button:hover {
        background-color: var(--nav-host-text-hover-light);
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

    /* Section Dividers */
    .menu-section-divider {
        border-top: 1px solid var(--nav-border-light);
        padding-top: var(--spacing-base);
        margin-top: var(--spacing-base);
    }

    .dark .menu-section-divider {
        border-top-color: var(--nav-border-dark);
    }

    .menu-section-title {
        font-size: var(--font-size-xs);
        font-weight: var(--nav-font-weight-active);
        color: var(--color-gray-500);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wide);
        margin-bottom: var(--spacing-sm);
    }

    .dark .menu-section-title {
        color: var(--color-gray-400);
    }

    .menu-section-title.host-section {
        color: var(--nav-host-text-light);
    }

    .dark .menu-section-title.host-section {
        color: var(--nav-host-text-dark);
    }

    .menu-section-title.admin-section {
        color: rgb(126, 34, 206);
    }

    .dark .menu-section-title.admin-section {
        color: rgb(196, 181, 253);
    }

    /* Badge Styles */
    .unread-badge {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        background-color: var(--color-error-red);
        color: var(--color-gray-100);
        font-size: var(--font-size-xs);
        font-weight: var(--nav-font-weight);
        padding: var(--spacing-xs) 0.375rem;
        border-radius: var(--border-radius-full);
        min-width: 1.25rem;
        text-align: center;
        line-height: 1;
    }

    .unread-badge.hidden {
        display: none;
    }

    /* Mobile Icon Buttons */
    .mobile-icon-btn {
        padding: var(--spacing-sm);
        color: var(--color-gray-500);
        border-radius: var(--nav-border-radius);
        transition: var(--nav-transition);
        position: relative;
    }

    .dark .mobile-icon-btn {
        color: var(--color-gray-400);
    }

    .mobile-icon-btn:hover {
        color: var(--color-gray-900);
        background-color: var(--nav-bg-hover-light);
    }

    .dark .mobile-icon-btn:hover {
        color: var(--color-gray-100);
        background-color: var(--nav-bg-hover-dark);
    }

    .mobile-icon-btn svg {
        width: var(--icon-base);
        height: var(--icon-base);
    }

    /* Profile Triggers */
    .profile-menu-trigger,
    .mobile-profile-trigger {
        padding: var(--spacing-xs);
        border-radius: var(--border-radius-full);
        transition: var(--nav-transition);
    }

    .profile-menu-trigger:hover,
    .mobile-profile-trigger:hover {
        background-color: var(--nav-bg-hover-light);
    }

    .dark .profile-menu-trigger:hover,
    .dark .mobile-profile-trigger:hover {
        background-color: var(--nav-bg-hover-dark);
    }

    /* Button Styles */
    .btn-primary {
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-base);
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight);
        color: var(--color-gray-100);
        background-color: var(--color-primary-blue);
        border-radius: var(--border-radius-base);
        transition: var(--nav-transition);
        text-decoration: none;
    }

    .btn-primary:hover {
        background-color: var(--color-primary-blue-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

    .btn-primary-sm {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem var(--spacing-lg);
        font-size: var(--font-size-xs);
        font-weight: var(--nav-font-weight);
        color: var(--color-gray-100);
        background-color: var(--color-primary-blue);
        border-radius: var(--nav-border-radius);
        transition: var(--nav-transition);
        text-decoration: none;
    }

    .btn-primary-sm:hover {
        background-color: var(--color-primary-blue-hover);
    }

    /* Responsive Adjustments */
    @media (max-width: 767px) {
        body {
            padding-bottom: 4rem;
        }
        
        .mobile-nav-item {
            min-width: 50px;
        }
        
        .mobile-nav-item span {
            font-size: 0.6875rem;
        }
        
        .mobile-nav-item svg {
            width: var(--icon-base);
            height: var(--icon-base);
        }
    }

    /* Animation for smooth transitions */
    .mobile-nav-item,
    .mobile-menu-item,
    .nav-link,
    .host-portal-link {
        transition: var(--nav-transition);
    }

    /* Focus states for accessibility */
    .mobile-nav-item:focus,
    .mobile-menu-item:focus,
    .nav-link:focus,
    .host-portal-link:focus {
        outline: 2px solid var(--color-primary-blue);
        outline-offset: 2px;
    }

    /* Loading states */
    .nav-loading {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Hide elements by default that should only show for hosts */
    .host-only {
        display: none;
    }

    .user-is-host .host-only {
        display: block;
    }

    .user-is-host .mobile-nav-item.host-only {
        display: flex;
    }

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb;
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb;
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb;
}

/* ULTRA-AGGRESSIVE CONTRAST FIX - Override any remaining gray-800 text in dark mode */
html.dark *[style*="color: rgb(31, 41, 55)"],
body.dark *[style*="color: rgb(31, 41, 55)"],
.dark *[style*="color: rgb(31, 41, 55)"],
html.dark *[style*="color:rgb(31, 41, 55)"],
body.dark *[style*="color:rgb(31, 41, 55)"],
.dark *[style*="color:rgb(31, 41, 55)"],
html.dark *[style*="color: rgb(31,41,55)"],
body.dark *[style*="color: rgb(31,41,55)"],
.dark *[style*="color: rgb(31,41,55)"],
html.dark *[style*="color:rgb(31,41,55)"],
body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff;
}