/* Mobile overlay menu — extracted from layout-styles.css (Phase 5) */
/* ============================================
   MOBILE OVERLAY ARCHITECTURE (Clean Architecture)
   Independent overlay system outside navbar
   ============================================ */

/* Overlay Root Container */
#mobile-overlay-root {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobile-overlay-root:has(.mobile-overlay.open) {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

#mobile-overlay-root .mobile-overlay {
    position: fixed;
    top: var(--lc-navbar-height, 3.75rem);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex !important;
    flex-direction: column;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-overlay) !important;
}

/* CRITICAL: Ensure center-icons-section is ALWAYS visible on desktop */
@media (min-width: 576px) {
    .navbar .center-icons-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: var(--lc-z-navbar-icon, 1060) !important;
    }
    
    /* Ensure navbar-collapse is visible on desktop */
    .navbar-collapse {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* CRITICAL: Ensure center-icons-section items are fully visible on desktop */
    /* Note: left-section is hidden on desktop - see rule above */
    .center-icons-section .navbar-nav,
    .center-icons-section .nav-item,
    .center-icons-section .nav-link {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
}

/* CRITICAL RULE 1 & 2: Overlay only visible on mobile/tablet/small desktop (<= 1024px) */
@media (max-width: 1024px) {
    #mobile-overlay-root .mobile-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
}

/* CRITICAL RULE 1 & 2: Hide overlay on desktop (>= 1025px) */
@media (min-width: 1025px) {
    #mobile-overlay-root .mobile-overlay,
    #mobile-overlay-root .mobile-overlay.open {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Overlay Panel */
.mobile-overlay-panel {
    position: fixed !important;
    top: var(--lc-navbar-height, 3.75rem) !important;
    left: 0 !important;
    right: auto !important;
    width: 80% !important;
    max-width: 400px !important;
    height: calc(100% - var(--lc-navbar-height, 3.75rem)) !important;
    background: white !important;
    z-index: var(--z-overlay-panel) !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 16px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
}

.mobile-overlay-panel.open {
    transform: translateX(0) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* CRITICAL: Force panel to start from left edge - override any inline styles */
#mobile-overlay-root .mobile-overlay-panel,
#mobile-overlay-root .mobile-overlay-panel.open {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* CRITICAL: Ensure mobile-overlay-root is positioned correctly */
#mobile-overlay-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: var(--z-overlay) !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure mobile-overlay container doesn't add offset */
#mobile-overlay-root .mobile-overlay {
    position: fixed !important;
    top: var(--lc-navbar-height, 3.75rem) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Close Button */
.mobile-overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-overlay) + 2);
    color: #333;
    font-size: 1.5rem;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.mobile-overlay-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.mobile-overlay-close:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Overlay Content */
.mobile-overlay-content {
    padding: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px !important;
    height: auto !important;
    max-height: none !important;
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
}

/* Remove Bootstrap collapsing animation interference */
.mobile-overlay-content.collapsing {
    height: auto !important;
    transition: none !important;
}

/* CRITICAL: Only apply mobile overlay styles to content INSIDE the overlay */
#mobile-overlay-root /* CRITICAL: Only apply mobile overlay styles to content INSIDE the overlay */
#mobile-overlay-root .mobile-overlay-content .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
}

/* Hide Profile Actions in navbar on mobile/tablet — overlay menu only (clone source stays in DOM) */
@media (max-width: 1024px) {
    .navbar .left-section .dropdown:not(#mobile-overlay-root .dropdown),
    .navbar #profileActionsDropdown:not(#mobile-overlay-root #profileActionsDropdown),
    .navbar .dropdown:has(#profileActionsDropdown):not(#mobile-overlay-root .dropdown),
    .navbar .left-section:has(#profileActionsDropdown):not(#mobile-overlay-root .left-section),
    .navbar .lc-navbar__profile-actions:not(#mobile-overlay-root .lc-navbar__profile-actions) {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .navbar-nav.left-section,
    .navbar-collapse .left-section > ul.navbar-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* CRITICAL: Hide left-section on desktop - it should only appear in mobile overlay */
/* Desktop (1025px and above) - Show Profile Actions in navbar */
@media (min-width: 1025px) {
    /* Hide left-section navigation items on desktop (ul.navbar-nav) */
    .navbar-nav.left-section,
    .navbar-collapse .left-section > ul.navbar-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* CRITICAL: Exception - Show Profile Actions dropdown on desktop */
    /* Profile Actions button should be visible on desktop (on profile pages) */
    /* Direct targeting of profileActionsDropdown and its parents */
    #profileActionsDropdown {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show parent containers of profileActionsDropdown */
    #profileActionsDropdown,
    .dropdown:has(#profileActionsDropdown),
    .left-section:has(#profileActionsDropdown) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .lc-navbar__leading .lc-navbar__profile-actions {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: var(--lc-touch-target-min) !important;
        height: var(--lc-touch-target-min) !important;
        overflow: visible !important;
    }
    
    .dropdown:has(#profileActionsDropdown) {
        display: block !important;
    }
    
    .left-section:has(#profileActionsDropdown):not(.lc-navbar__profile-actions) {
        display: block !important;
    }
    
    /* Hide left-section containers that only contain navbar-nav (not profile actions) */
    /* Use :not(:has()) to hide left-sections without profileActionsDropdown */
    .left-section:not(:has(#profileActionsDropdown)) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Ensure center-icons-section is visible on desktop */
    .center-icons-section {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* CRITICAL: Only apply to content INSIDE the overlay */
#mobile-overlay-root .mobile-overlay-content .navbar-nav .nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

#mobile-overlay-root .mobile-overlay-content .navbar-nav .nav-item .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* CRITICAL: Only apply to content INSIDE the overlay */
#mobile-overlay-root .mobile-overlay-content {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    overflow: visible !important;
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
}

#mobile-overlay-root .mobile-overlay-content .left-section,
#mobile-overlay-root .mobile-overlay-content ul.left-section,
#mobile-overlay-root .mobile-overlay-content ul.navbar-nav.left-section,
#mobile-overlay-root .mobile-overlay-content .mobile-menu-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    list-style: none !important;
    align-items: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
}

/* CRITICAL: Ensure left-section is always visible */
#mobile-overlay-root .mobile-overlay-content > .left-section,
#mobile-overlay-root .mobile-overlay-content > ul.left-section {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

/* CRITICAL: All mobile-overlay-content rules must be scoped to #mobile-overlay-root */
#mobile-overlay-root .mobile-overlay-content .left-section .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Ensure all nav-items are visible */
#mobile-overlay-root .mobile-overlay-content .left-section .navbar-nav .nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

/* Ensure all nav-links are visible and properly styled */
#mobile-overlay-root .mobile-overlay-content .left-section .navbar-nav .nav-item .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

#mobile-overlay-root .mobile-overlay-content .mobile-menu-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Override centering classes in mobile overlay */
#mobile-overlay-root .mobile-overlay-content .center-icon-section,
#mobile-overlay-root .mobile-overlay-content .d-flex.justify-content-center,
#mobile-overlay-root .mobile-overlay-content .d-flex.align-items-center.justify-content-center,
#mobile-overlay-root .mobile-overlay-content [class*="justify-content-center"],
#mobile-overlay-root .mobile-overlay-content [class*="align-items-center"] {
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Ensure all direct children of overlay content are full width */
#mobile-overlay-root .mobile-overlay-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#mobile-overlay-root .mobile-overlay-content .left-section .dropdown {
    width: 100% !important;
    margin-bottom: 8px !important;
}

#mobile-overlay-root .mobile-overlay-content button,
#mobile-overlay-root .mobile-overlay-content .btn,
#mobile-overlay-root .mobile-overlay-content a.nav-link,
#mobile-overlay-content a.btn {
    width: 100% !important;
    max-width: 100% !important;
    color: #212529 !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 16px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 8px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 1 !important;
    gap: 8px !important;
}

/* Mobile notification bell in overlay: ensure tap works (touch-action removes 300ms delay) */
#mobile-overlay-root .mobile-overlay-content #notificationBellMobile,
#mobile-overlay-root .mobile-overlay-content .notification-bell-mobile-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
}

/* Allow text to wrap for dropdown items */
#mobile-overlay-root .mobile-overlay-content .dropdown-item {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* CRITICAL: All mobile-overlay-content rules must be scoped to #mobile-overlay-root */
/* Fix images and icons inside buttons */
#mobile-overlay-root .mobile-overlay-content button img,
#mobile-overlay-root .mobile-overlay-content .btn img,
#mobile-overlay-root .mobile-overlay-content a.nav-link img,
#mobile-overlay-root .mobile-overlay-content a.btn img,
#mobile-overlay-root .mobile-overlay-content button i,
#mobile-overlay-root .mobile-overlay-content .btn i,
#mobile-overlay-root .mobile-overlay-content a.nav-link i,
#mobile-overlay-root .mobile-overlay-content a.btn i {
    width: 1.2rem !important;
    height: 1.2rem !important;
    max-width: 1.2rem !important;
    max-height: 1.2rem !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Fix text inside buttons */
#mobile-overlay-root .mobile-overlay-content button span,
#mobile-overlay-root .mobile-overlay-content .btn span,
#mobile-overlay-root .mobile-overlay-content a.nav-link span,
#mobile-overlay-root .mobile-overlay-content a.btn span {
    font-size: 16px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-left: 8px !important;
}

/* Override any me-3, ms-3, mx-auto, etc. that might center items */
#mobile-overlay-root .mobile-overlay-content .me-3,
#mobile-overlay-root .mobile-overlay-content .ms-3,
#mobile-overlay-root .mobile-overlay-content .mx-auto,
#mobile-overlay-root .mobile-overlay-content [class*="me-"],
#mobile-overlay-root .mobile-overlay-content [class*="ms-"],
#mobile-overlay-root .mobile-overlay-content [class*="mx-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure search icon button and other icon buttons are full width */
#mobile-overlay-root .mobile-overlay-content .search-icon-btn,
#mobile-overlay-root .mobile-overlay-content [class*="icon-btn"],
#mobile-overlay-root .mobile-overlay-content a.btn {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#mobile-overlay-root .mobile-overlay-content button:hover,
#mobile-overlay-root .mobile-overlay-content .btn:hover,
#mobile-overlay-root .mobile-overlay-content a.nav-link:hover {
    background: #f8f9fa !important;
}

#mobile-overlay-root .mobile-overlay-content .left-section .dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

#mobile-overlay-root .mobile-overlay-content .left-section .dropdown-menu.show {
    display: block !important;
}

#mobile-overlay-root .mobile-overlay-content .dropdown-item {
    color: #212529 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

/* Reduce spacing between dropdown items - target li elements */
#mobile-overlay-root .mobile-overlay-content .dropdown-menu li {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Ensure icons inside dropdown items are properly aligned */
#mobile-overlay-root .mobile-overlay-content .dropdown-item i,
#mobile-overlay-root .mobile-overlay-content .dropdown-item .fas,
#mobile-overlay-root .mobile-overlay-content .dropdown-item .fa {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Override Bootstrap margin utilities (me-2, etc.) inside dropdown items */
#mobile-overlay-root .mobile-overlay-content .dropdown-item .me-2,
#mobile-overlay-root .mobile-overlay-content .dropdown-item [class*="me-"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Ensure text in dropdown items doesn't break unnecessarily */
#mobile-overlay-root .mobile-overlay-content .dropdown-item {
    line-height: 1.5 !important;
    text-align: left !important;
}

/* Ensure all dropdown menus in mobile overlay are left-aligned */
#mobile-overlay-root .mobile-overlay-content .dropdown-menu {
    text-align: left !important;
}

/* Ensure language switcher dropdown items are left-aligned */
#mobile-overlay-root .mobile-overlay-content .mobile-menu-actions .dropdown-item,
#mobile-overlay-root .mobile-overlay-content .language-switcher .dropdown-item {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Ensure return-to-profile-link is left-aligned */
#mobile-overlay-root .mobile-overlay-content #return-to-profile-link,
#mobile-overlay-root .mobile-overlay-content a#return-to-profile-link {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Ensure all links and buttons in mobile overlay are left-aligned */
#mobile-overlay-root .mobile-overlay-content a,
#mobile-overlay-root .mobile-overlay-content button,
#mobile-overlay-root .mobile-overlay-content .btn {
    text-align: left !important;
}

/* CRITICAL: Force left-to-right direction for entire mobile overlay */
#mobile-overlay-root,
#mobile-overlay-root .mobile-overlay,
#mobile-overlay-root .mobile-overlay-panel,
#mobile-overlay-root .mobile-overlay-content {
    direction: ltr !important;
    text-align: left !important;
}

/* Ensure all text elements in mobile overlay are left-aligned */
#mobile-overlay-root .mobile-overlay-content p,
#mobile-overlay-root .mobile-overlay-content span,
#mobile-overlay-root .mobile-overlay-content div,
#mobile-overlay-root .mobile-overlay-content li,
#mobile-overlay-root .mobile-overlay-content ul,
#mobile-overlay-root .mobile-overlay-content form {
    text-align: left !important;
    direction: ltr !important;
}

/* Ensure dropdown menu has minimal padding */
#mobile-overlay-root .mobile-overlay-content .dropdown-menu {
    padding: 4px 0 !important;
}

/* Reduce spacing around dropdown divider */
#mobile-overlay-root .mobile-overlay-content .dropdown-divider {
    margin: 4px 0 !important;
}

#mobile-overlay-root .mobile-overlay-content .dropdown-item:hover {
    background: #f8f9fa !important;
    color: #212529 !important;
}

#mobile-overlay-root .mobile-overlay-content #profileActionsDropdown {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    color: #212529 !important;
    background: #ffffff !important;
}

#mobile-overlay-root .mobile-overlay-content #profileActionsDropdown .profile-actions-label {
    flex: 1 1 auto !important;
    text-align: left !important;
    margin-left: 8px !important;
}

#mobile-overlay-root .mobile-overlay-content #profileActionsDropdown .fa-chevron-down {
    margin-left: auto !important;
    font-size: 1.2rem !important;
    color: #0d6efd !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex-shrink: 0 !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {

    .mobile-overlay-panel {

        background: #1e293b !important;

        color: #f1f5f9 !important;

    }

}

@media (prefers-color-scheme: dark) {


    .mobile-overlay-close {


        color: #f1f5f9 !important;


        background-color: transparent !important;


    }


}

@media (prefers-color-scheme: dark) {


    .mobile-overlay-close:hover {


        background-color: rgba(255, 255, 255, 0.1) !important;


    }


}

/* CRITICAL: All mobile-overlay-content rules must be scoped to #mobile-overlay-root */
@media (prefers-color-scheme: dark) {

    #mobile-overlay-root .mobile-overlay-content {

        background: transparent !important;

        color: #f1f5f9 !important;

    }

}

@media (prefers-color-scheme: dark) {
    #mobile-overlay-root .mobile-overlay-content button,
    #mobile-overlay-root .mobile-overlay-content .btn,
    #mobile-overlay-root .mobile-overlay-content a.nav-link {
        color: #f1f5f9 !important;
        background: #334155 !important;
        border-color: #475569 !important;
    }

    #mobile-overlay-root .mobile-overlay-content button:hover,
    #mobile-overlay-root .mobile-overlay-content .btn:hover,
    #mobile-overlay-root .mobile-overlay-content a.nav-link:hover {
        background: #475569 !important;
        color: #f1f5f9 !important;
    }

    /* Return to Profile Link */
    #mobile-overlay-root .mobile-overlay-content #return-to-profile-link,
    #mobile-overlay-root .mobile-overlay-content a#return-to-profile-link {
        color: #f1f5f9 !important;
        background-color: #334155 !important;
    }

    #mobile-overlay-root .mobile-overlay-content #return-to-profile-link:hover,
    #mobile-overlay-root .mobile-overlay-content a#return-to-profile-link:hover {
        background-color: #475569 !important;
        color: #f1f5f9 !important;
    }

    /* Icons in return-to-profile-link */
    #mobile-overlay-root .mobile-overlay-content #return-to-profile-link i,
    #mobile-overlay-root .mobile-overlay-content #return-to-profile-link .fas,
    #mobile-overlay-root .mobile-overlay-content #return-to-profile-link .fa {
        color: #60a5fa !important;
    }

    /* Text-dark class in mobile overlay */
    #mobile-overlay-root .mobile-overlay-content .text-dark {
        color: #f1f5f9 !important;
    }

    #mobile-overlay-root .mobile-overlay-content a.text-dark {
        color: #f1f5f9 !important;
    }

    #mobile-overlay-root .mobile-overlay-content a.text-dark:hover {
        color: #e2e8f0 !important;
    }
}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-item {


        color: #f1f5f9 !important;


        background: transparent !important;


        padding: 8px 16px !important;


        margin-bottom: 0 !important;


        margin-top: 0 !important;


        display: flex !important;


        flex-direction: row !important;


        align-items: center !important;


        justify-content: flex-start !important;


        text-align: left !important;


        gap: 8px !important;


        white-space: nowrap !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-item i,
    #mobile-overlay-root .mobile-overlay-content .dropdown-item .fas,
    #mobile-overlay-root .mobile-overlay-content .dropdown-item .fa {


        flex-shrink: 0 !important;


        width: 1rem !important;


        height: 1rem !important;


        display: inline-flex !important;


        align-items: center !important;


        justify-content: center !important;


        margin-right: 0 !important;


        margin-left: 0 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-item .me-2,
    #mobile-overlay-root .mobile-overlay-content .dropdown-item [class*="me-"] {


        margin-right: 0 !important;


        margin-left: 0 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-menu li {


        margin-bottom: 0 !important;


        margin-top: 0 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-menu {


        padding: 4px 0 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-item:hover {


        background: #475569 !important;


        color: #f1f5f9 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content #profileActionsDropdown {


        color: #f1f5f9 !important;


        background: #334155 !important;


        border-color: #475569 !important;


    }


}

@media (prefers-color-scheme: dark) {


    #mobile-overlay-root .mobile-overlay-content .dropdown-menu {


        background: #1e293b !important;


        border-color: #334155 !important;


    }


}

/* RTL Support */
[dir="rtl"] .mobile-overlay-panel {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

[dir="rtl"] .mobile-overlay-panel.open {
    transform: translateX(0);
}

[dir="rtl"] .mobile-overlay-close {
    right: auto;
    left: 1rem;
}