/* 
   File: assets/css/mega-menu-override.css
   Complete mega menu implementation with clickable items and title support
   Load this CSS file LAST to ensure it overrides all conflicts
*/

/* ==========================================================================
                           MEGA MENU BASE STYLES
========================================================================== */

/* Reset any conflicting styles on mega menu container */
#essential-navbar .mega-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 3px 20px !important;
}

/* Mega menu toggle (the clickable link) */
#essential-navbar .mega-menu-toggle {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 4px 5px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Mega menu toggle icon */
#essential-navbar .mega-menu-toggle i {
    margin-left: 5px !important;
    /*font-size: 12px !important;*/
    transition: transform 0.3s ease !important;
}

/* Active state for mega menu toggle */
#essential-navbar .mega-menu-toggle.active {
    color: #e51937 !important;
}

#essential-navbar .mega-menu-toggle.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #e51937 !important;
}

/* Hover state for mega menu toggle */
#essential-navbar .mega-menu-toggle:hover:not(.active) {
    color: #e51937 !important;
}

#essential-navbar .mega-menu:hover .mega-menu-toggle i {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
                         MEGA MENU DROPDOWN CONTAINER
========================================================================== */

/* Main dropdown container - hidden by default */
#essential-navbar .mega-menu-dropdown {
    /* Positioning */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    
    /* Sizing - ENHANCED with max-height for scrolling */
    width: 900px !important;
    max-width: 90vw !important;
    min-height: 400px !important;
    max-height: 80vh !important; /* Add max height to enable scrolling */
    
    /* Styling */
    background: #fff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    border-top: 3px solid #e51937 !important;
    
    /* Z-index and interactions */
    z-index: 9999 !important;
    pointer-events: auto !important;
    
    /* Hidden state */
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;
    
    /* Animation */
    transition: all 0.3s ease !important;
    
    /* Enable scrolling */
    overflow: hidden !important; /* Container should not scroll, only content */
}

/* ==========================================================================
                           DESKTOP HOVER FUNCTIONALITY
========================================================================== */

/* Desktop hover effect - show mega menu */
@media (min-width: 993px) {
    #essential-navbar .mega-menu:hover .mega-menu-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Keep dropdown visible when hovering over it */
    #essential-navbar .mega-menu-dropdown:hover {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ==========================================================================
                           MEGA MENU CONTENT LAYOUT
========================================================================== */

/* Content container with flex layout */
#essential-navbar .mega-menu-content {
    display: flex !important;
    min-height: 350px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Left column - Parent headers */
#essential-navbar .mega-menu-left {
    width: 250px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-right: 1px solid #dee2e6 !important;
    padding: 20px 0 !important;
    flex-shrink: 0 !important;
}

/* Parent headers list */
#essential-navbar .parent-headers {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual parent header item */
#essential-navbar .parent-header-item {
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
}

#essential-navbar .parent-header-item:last-child {
    border-bottom: none !important;
}

/* Parent header text */
#essential-navbar .parent-header-item span {
    display: block !important;
    padding: 15px 25px !important;
    color: #495057 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Left border indicator */
#essential-navbar .parent-header-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 4px !important;
    background-color: #e51937 !important;
    transform: scaleY(0) !important;
    transition: transform 0.3s ease !important;
}

/* Hover and active states for parent headers */
#essential-navbar .parent-header-item:hover,
#essential-navbar .parent-header-item.active {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .parent-header-item:hover::before,
#essential-navbar .parent-header-item.active::before {
    transform: scaleY(1) !important;
}

#essential-navbar .parent-header-item:hover span,
#essential-navbar .parent-header-item.active span {
    color: #e51937 !important;
    padding-left: 35px !important;
}

/* ==========================================================================
                         CLICKABLE LEFT ITEMS STYLES
========================================================================== */

/* Multiedit items in left column */
#essential-navbar .multiedit-item {
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
}

#essential-navbar .multiedit-item:last-child {
    border-bottom: none !important;
}

#essential-navbar .multiedit-item span {
    display: block !important;
    padding: 15px 25px !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

#essential-navbar .multiedit-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 4px !important;
    background-color: #28a745 !important; /* Green for multiedit */
    transform: scaleY(0) !important;
    transition: transform 0.3s ease !important;
}

#essential-navbar .multiedit-item:hover,
#essential-navbar .multiedit-item.active {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .multiedit-item:hover::before,
#essential-navbar .multiedit-item.active::before {
    transform: scaleY(1) !important;
}

#essential-navbar .multiedit-item:hover span,
#essential-navbar .multiedit-item.active span {
    color: #28a745 !important;
    padding-left: 35px !important;
    font-weight: 600 !important;
}

/* Regular menu items in left column */
#essential-navbar .regular-menu-item {
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
}

#essential-navbar .regular-menu-item:last-child {
    border-bottom: none !important;
}

#essential-navbar .regular-menu-item span {
    display: block !important;
    padding: 15px 25px !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

#essential-navbar .regular-menu-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 4px !important;
    background-color: #e51937 !important;
    transform: scaleY(0) !important;
    transition: transform 0.3s ease !important;
}

#essential-navbar .regular-menu-item:hover,
#essential-navbar .regular-menu-item.active {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#essential-navbar .regular-menu-item:hover::before,
#essential-navbar .regular-menu-item.active::before {
    transform: scaleY(1) !important;
}

#essential-navbar .regular-menu-item:hover span,
#essential-navbar .regular-menu-item.active span {
    color: #e51937 !important;
    padding-left: 35px !important;
    font-weight: 600 !important;
}

/* Clickable left item links */
#essential-navbar .left-item-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
}

#essential-navbar .left-item-link span {
    display: block !important;
    padding: 15px 25px !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Override existing span styles for clickable items */
#essential-navbar .multiedit-item .left-item-link span,
#essential-navbar .regular-menu-item .left-item-link span {
    cursor: pointer !important;
}

/* Hover effects for clickable links */
#essential-navbar .multiedit-item:hover .left-item-link span,
#essential-navbar .multiedit-item.active .left-item-link span {
    color: #28a745 !important;
    padding-left: 35px !important;
    font-weight: 600 !important;
}

#essential-navbar .regular-menu-item:hover .left-item-link span,
#essential-navbar .regular-menu-item.active .left-item-link span {
    color: #e51937 !important;
    padding-left: 35px !important;
    font-weight: 600 !important;
}

/* Visual indicator for clickable vs non-clickable items */
#essential-navbar .menu-item[data-clickable="true"] {
    position: relative !important;
}

#essential-navbar .menu-item[data-clickable="true"]::after {
    content: '→' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    color: #6c757d !important;
    font-size: 12px !important;
}

#essential-navbar .menu-item[data-clickable="true"]:hover::after {
    opacity: 1 !important;
}

/* Ensure proper styling inheritance for different item types */
#essential-navbar .multiedit-item[data-clickable="true"]:hover::after {
    color: #28a745 !important;
}

#essential-navbar .regular-menu-item[data-clickable="true"]:hover::after {
    color: #e51937 !important;
}

/* Different cursor styles for different behaviors */
#essential-navbar .parent-header-item {
    cursor: pointer !important; /* Indicates content switching */
}

#essential-navbar .menu-item[data-clickable="true"] {
    cursor: pointer !important; /* Indicates navigation */
}

#essential-navbar .menu-item[data-clickable="true"] .left-item-link {
    cursor: pointer !important;
}

/* Subtle animation for clickable items */
#essential-navbar .menu-item[data-clickable="true"]:hover {
    transform: translateX(2px) !important;
    transition: transform 0.2s ease !important;
}

#essential-navbar .parent-header-item:hover {
    /* No transform for non-clickable items */
    transform: none !important;
}

/* Right column - Children content */
#essential-navbar .mega-menu-right {
    flex: 1 !important;
    position: relative !important;
    background-color: #fff !important;
    padding: 30px !important;
    overflow-y: auto !important; /* Enable vertical scrolling */
    overflow-x: hidden !important; /* Prevent horizontal scrolling */
    max-height: calc(80vh - 60px) !important; /* Account for padding */
}

/* Custom scrollbar styling for mega menu */
#essential-navbar .mega-menu-right::-webkit-scrollbar {
    width: 8px !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px !important;
    transition: background 0.3s ease !important;
}

#essential-navbar .mega-menu-right::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Firefox scrollbar styling */
#essential-navbar .mega-menu-right {
    scrollbar-width: thin !important;
    scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* ==========================================================================
                           ENHANCED COLUMN SEPARATION
========================================================================== */

/* Children columns with proper vertical separators */
#essential-navbar .children-column {
    flex: 1 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 180px !important;
    position: relative !important;
}

/* Vertical separator between columns */
#essential-navbar .children-column:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: -20px !important;
    top: 0 !important;
    height: 100% !important;
    width: 1px !important;
    background: linear-gradient(to bottom, transparent 10%, #e9ecef 50%, transparent 90%) !important;
}

#essential-navbar .children-column:not(:last-child) {
    padding-right: 40px !important;
    margin-right: 0 !important;
}

/* Individual child items */
#essential-navbar .children-column li {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    height: auto !important;
    list-style: none !important;
}

/* Child links */
#essential-navbar .children-column a {
    display: block !important;
    padding: 8px 12px !important;
    color: #6c757d !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    text-transform: none !important;
}

/* Child link hover indicator */
#essential-navbar .children-column a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #e51937 !important;
    transition: width 0.3s ease !important;
}

/* Child link hover and active states */
#essential-navbar .children-column a:hover,
#essential-navbar .children-column a.active {
    background-color: #f8f9fa !important;
    color: #e51937 !important;
    padding-left: 20px !important;
    transform: translateX(5px) !important;
}

#essential-navbar .children-column a:hover::before,
#essential-navbar .children-column a.active::before {
    width: 12px !important;
}

/* No children state */
#essential-navbar .no-children {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    color: #adb5bd !important;
    font-style: italic !important;
    font-size: 16px !important;
}

/* ==========================================================================
                        TITLES SECTION (RIGHT SIDE) - FIXED DROPDOWN
========================================================================== */

/* Title items that appear inline with other children - NOW LOOK LIKE REGULAR CHILDREN */
#essential-navbar .title-item {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important; /* Ensure block display for vertical layout */
}

/* Title header - now looks like a regular child link with proper spacing */
#essential-navbar .title-item .title-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important; /* Full width */
    padding: 8px 12px !important;
    color: #6c757d !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    text-transform: none !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    user-select: none !important; /* Prevent text selection on double click */
}

/* Enhanced hover state for entire title header */
#essential-navbar .title-item .title-header:hover {
    background-color: #f8f9fa !important;
    color: #e51937 !important;
    padding-left: 20px !important;
    transform: translateX(5px) !important;
}

/* Make sure all child elements of title header are clickable */
#essential-navbar .title-item .title-header * {
    pointer-events: none !important; /* Prevent event conflicts */
    user-select: none !important;
}

/* Ensure the title header responds to clicks anywhere */
#essential-navbar .title-item .title-header:active {
    background-color: #e9ecef !important;
    transform: translateX(3px) scale(0.98) !important;
}

/* Level 2 titles (nested within level 1) */
#essential-navbar .title-item .title-children .title-item {
    margin: 0 0 8px 25px !important;
    padding-left: 15px !important; /* Additional indentation for nested level */
    border-left: 2px solid #e9ecef !important; /* Visual hierarchy indicator */
}

/* Level 3 titles (nested within level 2) */
#essential-navbar .title-item .title-children .title-item .title-children .title-item {
    margin: 0 0 6px 0 !important;
    padding-left: 20px !important; /* Even more indentation */
    border-left: 2px solid #dee2e6 !important; /* Lighter border for deeper nesting */
}

/* Nested title headers styling */
#essential-navbar .title-item .title-children .title-item .title-header {
    padding: 6px 10px !important; /* Smaller padding for nested titles */
    font-size: 13px !important; /* Slightly smaller font */
    border-radius: 4px !important; /* Smaller border radius */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-header {
    padding: 5px 8px !important; /* Even smaller for level 3 */
    font-size: 12px !important;
    opacity: 0.9 !important; /* Slightly transparent to show hierarchy */
}

/* Nested title text styling */
#essential-navbar .title-item .title-children .title-item .title-text {
    font-size: 13px !important;
    font-weight: 500 !important; /* Less bold than main titles */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-text {
    font-size: 12px !important;
    font-weight: 400 !important; /* Even less bold for level 3 */
}

/* FIXED: Nested title toggle icons - proper initial state and rotation */
#essential-navbar .title-item .title-children .title-item .title-toggle {
    font-size: 8px !important; /* Smaller arrow for nested titles */
    width: 16px !important;
    color: #e51937 !important; /* Different color to distinguish from main titles */
    transform: rotate(0deg) !important; /* FIXED: Start with down arrow for level 2 */
    transition: transform 0.3s ease !important;
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-toggle {
    font-size: 7px !important;
    width: 14px !important;
    color: #6f42c1 !important; /* Different color for level 3 */
    transform: rotate(0deg) !important; /* FIXED: Start with down arrow for level 3 */
    transition: transform 0.3s ease !important;
}

/* FIXED: Rotate nested title toggles when expanded */
#essential-navbar .title-item .title-children .title-item.expanded .title-toggle {
    transform: rotate(180deg) !important; /* Rotate when level 2 title is expanded */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item.expanded .title-toggle {
    transform: rotate(180deg) !important; /* Rotate when level 3 title is expanded */
}

/* Nested title hover states */
#essential-navbar .title-item .title-children .title-item .title-header:hover,
#essential-navbar .title-item .title-children .title-item .title-header.active {
    background-color: #f8f9fa !important;
    color: #e51937 !important; /* Blue instead of red for nested */
    padding-left: 18px !important;
    transform: translateX(3px) !important; /* Smaller transform for nested */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-header:hover,
#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-header.active {
    color: #6f42c1 !important; /* Purple for level 3 */
    padding-left: 16px !important;
    transform: translateX(2px) !important;
}

/* Nested title hover indicators */
#essential-navbar .title-item .title-children .title-item .title-header::before {
    background-color: #e51937 !important; /* Blue for level 2 */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-header::before {
    background-color: #6f42c1 !important; /* Purple for level 3 */
}

/* Nested title children lists */
#essential-navbar .title-item .title-children .title-item .title-children-list {
    padding-left: 25px !important; /* More indentation for nested children */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-children-list {
    padding-left: 30px !important; /* Even more for level 3 */
}

/* Nested title children links */
#essential-navbar .title-item .title-children .title-item .title-children-list a {
    font-size: 12px !important; /* Smaller font for nested children */
    padding: 4px 8px !important; /* Smaller padding */
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-children-list a {
    font-size: 11px !important;
    padding: 3px 6px !important;
    opacity: 0.9 !important;
}

/* Nested title children hover states */
#essential-navbar .title-item .title-children .title-item .title-children-list a:hover,
#essential-navbar .title-item .title-children .title-item .title-children-list a.active {
    color: #e51937 !important; /* Blue for level 2 children */
    padding-left: 16px !important;
}

#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-children-list a:hover,
#essential-navbar .title-item .title-children .title-item .title-children .title-item .title-children-list a.active {
    color: #6f42c1 !important; /* Purple for level 3 children */
    padding-left: 14px !important;
}

/* ==========================================================================
                        MOBILE NESTED TITLES SUPPORT - FIXED ARROWS
========================================================================== */

/* Mobile nested title containers */
#essential-navbar .title-mobile-children .title-mobile-container {
    margin: 5px 0 !important;
    padding-left: 15px !important; /* Indentation for nested mobile titles */
    border-left: 2px solid #e9ecef !important;
}

/* Level 3 mobile nested titles */
#essential-navbar .title-mobile-children .title-mobile-container .title-mobile-children .title-mobile-container {
    padding-left: 25px !important;
    border-left: 2px solid #dee2e6 !important;
}

/* Mobile nested title text */
#essential-navbar .title-mobile-children .title-mobile-container .title-mobile-text {
    font-size: 14px !important; /* Slightly smaller for nested */
    font-weight: 500 !important; /* Less bold */
    color: #e51937 !important; /* Blue for nested mobile titles */
}

#essential-navbar .title-mobile-children .title-mobile-container .title-mobile-children .title-mobile-container .title-mobile-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6f42c1 !important; /* Purple for level 3 mobile */
}

/* FIXED: Mobile nested title toggle buttons - proper initial state */
#essential-navbar .title-mobile-children .title-mobile-container .mobile-title-toggle {
    color: #e51937 !important; /* Blue for nested */
    font-size: 16px !important; /* Smaller */
    content: '+' !important; /* FIXED: Start with + (collapsed state) */
}

#essential-navbar .title-mobile-children .title-mobile-container .title-mobile-children .title-mobile-container .mobile-title-toggle {
    color: #6f42c1 !important; /* Purple for level 3 */
    font-size: 14px !important;
    content: '+' !important; /* FIXED: Start with + (collapsed state) */
}

/* FIXED: Mobile nested title toggle active state */
#essential-navbar .title-mobile-children .title-mobile-container .mobile-title-toggle.active {
    transform: rotate(45deg) !important; /* Rotate to X when expanded */
}

#essential-navbar .title-mobile-children .title-mobile-container .title-mobile-children .title-mobile-container .mobile-title-toggle.active {
    transform: rotate(45deg) !important; /* Rotate to X when expanded */
}

/* ==========================================================================
                              JAVASCRIPT HELPERS
========================================================================== */

/* Classes for JavaScript interaction */
.mega-menu-parent-active {
    background-color: #fff !important;
    color: #e51937 !important;
}

.mega-menu-parent-active::before {
    transform: scaleY(1) !important;
}

.mega-menu-children-active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Right side clickable items */
#essential-navbar .right-side-clickable-item {
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%) !important;
    border: 1px solid #28a745 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1) !important;
}

#essential-navbar .right-clickable-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #e51937 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

#essential-navbar .right-clickable-link:hover {
    color: #1e7e34 !important;
    transform: translateX(3px) !important;
}

#essential-navbar .right-clickable-link i {
    font-size: 12px !important;
    opacity: 0.8 !important;
}

#essential-navbar .right-side-separator {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #28a745, transparent) !important;
    margin: 0 0 20px 0 !important;
}

/* ==========================================================================
                    REGULAR CHILDREN SECTION (WITH MULTIEDIT)
========================================================================== */

/* Container for regular children (including multiedit items) */
#essential-navbar .regular-children-section {
    width: 100% !important;
    background-color: #fff !important;
    padding: 15px 0 !important;
}

/* Children separator between titles and regular children */
#essential-navbar .children-separator {
    margin: 20px 0 !important;
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #dee2e6, transparent) !important;
}

/* Multiedit child items styling */
#essential-navbar .multiedit-child-item {
    position: relative !important;
}

#essential-navbar .multiedit-child-item a {
    background: linear-gradient(135deg, #f0fff0 0%, #e8f5e8 100%) !important;
    border: 1px solid #28a745 !important;
    border-radius: 4px !important;
    color: #28a745 !important;
    font-weight: 600 !important;
    position: relative !important;
    padding-left: 35px !important;
}

#essential-navbar .multiedit-child-item a:hover {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%) !important;
    color: #1e7e34 !important;
    transform: translateX(8px) !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2) !important;
}

#essential-navbar .multiedit-child-item a::before {
    background-color: #28a745 !important;
    width: 15px !important;
}

/* Multiedit icon styling */
#essential-navbar .multiedit-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: #28a745 !important;
}

/* Enhanced styling for mixed content containers */
#essential-navbar .children-container:has(.titles-section):has(.regular-children-section) {
    padding: 25px !important;
}

/* Responsive adjustments for mixed content */
@media (max-width: 1200px) {
    #essential-navbar .regular-children-section {
        padding: 10px 0 !important;
    }
    
    #essential-navbar .children-separator {
        margin: 15px 0 !important;
    }
}

@media (max-width: 992px) {
    #essential-navbar .children-separator {
        margin: 10px 0 !important;
    }
}

/* ==========================================================================
                           MOBILE MEGA MENU STYLES
========================================================================== */

/* Base mobile menu styling */
@media (max-width: 992px) {
    
    /* Mobile navigation container - RESTORE FULL HEIGHT */
    #essential-navbar #mobile-nav {
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
        max-height: 100vh !important; /* RESTORED: Full screen height */
        overflow-y: auto !important;
    }
    
    /* Simplified scrollbar for mobile menu */
    #essential-navbar #mobile-nav::-webkit-scrollbar {
        width: 4px !important;
    }
    
    #essential-navbar #mobile-nav::-webkit-scrollbar-track {
        background: #f5f5f5 !important;
    }
    
    #essential-navbar #mobile-nav::-webkit-scrollbar-thumb {
        background: #ddd !important;
        border-radius: 2px !important;
    }
    
    /* Simplified mobile search container */
    #essential-navbar .mobile-search-container {
        padding: 15px 20px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    #essential-navbar .mobile-search-input {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        background: #fff !important;
        transition: border-color 0.3s ease !important;
    }
    
    #essential-navbar .mobile-search-input:focus {
        outline: none !important;
        border-color: #e51937 !important;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
    }
    
    /* Simplified mobile search results */
    #essential-navbar .mobile-search-results {
        margin-top: 8px !important;
        background: #fff !important;
        border-radius: 4px !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        border: 1px solid #e9ecef !important;
    }
    
    #essential-navbar .mobile-search-result {
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f1f1 !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-search-result:hover {
        background-color: #f8f9fa !important;
    }
    
    #essential-navbar .mobile-search-result:last-child {
        border-bottom: none !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE DROPDOWN CONTAINERS
    ========================================================================== */
    
    /* Mobile dropdown base styles */
    #essential-navbar .mobile-dropdown {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #essential-navbar .mobile-dropdown:last-child {
        border-bottom: none !important;
    }
    
    /* Simplified mobile dropdown header */
    #essential-navbar .mobile-dropdown > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: background-color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-dropdown > div:hover {
        background: #f8f9fa !important;
    }
    
    /* Simplified mobile dropdown links */
    #essential-navbar .mobile-dropdown > div > a {
        color: #333 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        flex: 1 !important;
        transition: color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-dropdown > div > a:hover {
        color: #e51937 !important;
    }
    
    /* Simplified mobile dropdown toggle buttons */
    #essential-navbar .mobile-dropdown-toggle {
        background: none !important;
        border: none !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 4px 6px !important;
        border-radius: 3px !important;
        transition: all 0.2s ease !important;
        min-width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #essential-navbar .mobile-dropdown-toggle:hover {
        background-color: #f0f0f0 !important;
        color: #e51937 !important;
    }
    
    #essential-navbar .mobile-dropdown-toggle.active {
        color: #e51937 !important;
        background-color: #ffffff !important;
    }
    
    /* Simplified mobile submenu */
    #essential-navbar .mobile-submenu {
        background: #f8f9fa !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE PARENT HEADERS
    ========================================================================== */
    
    /* Mobile parent header container */
    #essential-navbar .mobile-parent-header-container {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    /* Simplified mobile parent header */
    #essential-navbar .mobile-parent-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        background: #fff !important;
        transition: background-color 0.2s ease !important;
        position: relative !important;
    }
    
    /* Simplified parent header types */
    #essential-navbar .mobile-parent-header.parent-header-type {
        background: #f8f9fa !important;
        border-left: 3px solid #e51937 !important;
    }
    
    #essential-navbar .mobile-parent-header.parent-header-type:hover {
        background: #e9ecef !important;
    }
    
    #essential-navbar .mobile-parent-header.parent-header-type .mobile-parent-text {
        color: #e51937 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE MULTIEDIT
    ========================================================================== */
    
    #essential-navbar .mobile-multiedit-container {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #essential-navbar .mobile-parent-header.multiedit-type {
        background: #f0f8ff !important;
        border-left: 3px solid #28a745 !important;
    }
    
    #essential-navbar .mobile-parent-header.multiedit-type:hover {
        background: #e6f3ff !important;
    }
    
    #essential-navbar .mobile-parent-link {
        color: #28a745 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        flex: 1 !important;
        transition: color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #essential-navbar .mobile-parent_link:hover {
        color: #218838 !important;
    }
    
    #essential-navbar .mobile-parent-link .mobile-parent-text {
        color: inherit !important;
        font-weight: inherit !important;
        font-size: inherit !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE REGULAR ITEMS
    ========================================================================== */
    
    #essential-navbar .mobile-regular-container {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    #essential-navbar .mobile-parent-header.regular-type {
        background: #fff !important;
        border-left: 3px solid #f5f5f5 !important;
    }
    
    #essential-navbar .mobile-parent-header.regular-type:hover {
        background: #f8f9fa !important;
    }
    
    #essential-navbar .mobile-parent-header.regular-type .mobile-parent-text {
        color: #495057 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED DIRECT LINKS
    ========================================================================== */
    
    #essential-navbar .mobile-direct-link-container {
        padding: 10px 20px !important;
        background: #e8f5e8 !important;
        border: 1px solid #d4edda !important;
        border-radius: 4px !important;
        margin: 8px 15px !important;
    }
    
    #essential-navbar .mobile-direct-link {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #28a745 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        transition: color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-direct-link:hover {
        color: #218838 !important;
    }
    
    #essential-navbar .mobile-direct-link i {
        font-size: 11px !important;
    }
    
    #essential-navbar .mobile-separator {
        margin: 10px 15px !important;
        height: 1px !important;
        background: #e9ecef !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE CHILD ITEMS
    ========================================================================== */
    
    #essential-navbar .mobile-child-item-container {
        padding: 8px 25px !important;
        background: #fff !important;
        border-bottom: 1px solid #f5f5f5 !important;
        transition: background-color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-child-item-container:hover {
        background: #f8f9fa !important;
    }
    
    #essential-navbar .mobile-child-item-container:last-child {
        border-bottom: none !important;
    }
    
    #essential-navbar .mobile-child-link {
        color: #101010 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        transition: color 0.2s ease !important;
        display: block !important;
        position: relative !important;
        padding-left: 12px !important;
    }
    
    #essential-navbar .mobile-child-link::before {
        content: '•' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #e51937 !important;
        font-size: 14px !important;
        opacity: 0.7 !important;
    }
    
    #essential-navbar .mobile-child-link:hover {
        color: #e51937 !important;
    }
    
    #essential-navbar .mobile-child-link:hover::before {
        opacity: 1 !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE TITLE CONTAINERS
    ========================================================================== */
    
    #essential-navbar .mobile-title-container {
        margin: 6px 12px !important;
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        transition: box-shadow 0.2s ease !important;
    }
    
    #essential-navbar .mobile-title-container:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    #essential-navbar .mobile-title-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        background: #f8f9fa !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        position: relative !important;
        user-select: none !important; /* Prevent text selection */
        min-height: 44px !important; /* Ensure good touch target size */
    }
    
    /* Enhanced mobile title header hover/active states */
    #essential-navbar .mobile-title-header:hover {
        background: #e9ecef !important;
    }

    #essential-navbar .mobile-title-header:active {
        background: #dee2e6 !important;
        transform: scale(0.98) !important;
    }

    /* Make all mobile title header children non-interactive */
    #essential-navbar .mobile-title-header * {
        pointer-events: none !important;
        user-select: none !important;
    }

    /* Ensure mobile title text doesn't interfere with clicks */
    #essential-navbar .mobile-title-text {
        pointer-events: none !important;
        user-select: none !important;
        color: #495057 !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        flex: 1 !important;
        transition: color 0.2s ease !important;
    }

    /* Mobile title toggle should be part of the header but not interfere */
    #essential-navbar .mobile-title-toggle {
        pointer-events: none !important; /* Let parent handle all clicks */
        background: none !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: bold !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 2px 4px !important;
        border-radius: 2px !important;
        transition: all 0.2s ease !important;
        min-width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        user-select: none !important;
    }

    /* ==========================================================================
                        SIMPLIFIED NESTED MOBILE TITLES
    ========================================================================== */
    
    /* Level 2 nested titles - subtle differences */
    #essential-navbar .mobile-title-children .mobile-title-container {
        margin: 4px 8px !important;
        border-left: 2px solid #e51937 !important;
        background: #f9f9f9 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-header {
        background: #f4f4f4 !important;
        padding: 8px 10px !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-text {
        font-size: 12px !important;
        color: #e51937 !important;
        font-weight: 500 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-toggle {
        color: #e51937 !important;
        font-size: 12px !important;
    }
    
    /* Level 3 nested titles - even more subtle */
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container {
        margin: 3px 6px !important;
        border-left: 2px solid #6c757d !important;
        background: #f5f5f5 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-header {
        background: #f0f0f0 !important;
        padding: 6px 8px !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-text {
        font-size: 11px !important;
        color: #6c757d !important;
        font-weight: 400 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-toggle {
        color: #6c757d !important;
        font-size: 10px !important;
    }
    
    /* Simplified nested children containers */
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children {
        background: #ffffff !important;
        padding: 4px 0 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-children {
        background: #f0f0f0 !important;
        padding: 2px 0 !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-child-container {
        margin: 1px 6px !important;
        padding: 4px 10px !important;
        /* background: rgba(0, 123, 255, 0.05) !important; */
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-child-container {
        margin: 1px 4px !important;
        padding: 3px 8px !important;
        background: rgba(108, 117, 125, 0.05) !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-child-link {
        font-size: 11px !important;
        color: #1c1c1c !important;
    }
    
    #essential-navbar .mobile-title-children .mobile-title-container .mobile-title-children .mobile-title-container .mobile-title-child-link {
        font-size: 10px !important;
        color: #6c757d !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED MOBILE REGION SELECTOR
    ========================================================================== */
    
    #essential-navbar .mobile-region-selector {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e9ecef !important;
        background: #f8f9fa !important;
    }
    
    #essential-navbar .mobile-region-selector > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 20px !important;
        background: #f0f0f0 !important;
        transition: background-color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-region-selector > div:hover {
        background: #e9ecef !important;
    }
    
    #essential-navbar .mobile-region-selector > div > span {
        color: #495057 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    #essential-navbar .mobile-region-selector > div > span i {
        color: #6c757d !important;
        font-size: 14px !important;
    }
    
    #essential-navbar .mobile-region-selector .mobile-dropdown-toggle {
        color: #6c757d !important;
    }
    
    #essential-navbar .mobile-region-selector .mobile-dropdown-toggle:hover {
        background-color: #dee2e6 !important;
        color: #495057 !important;
    }
    
    #essential-navbar .mobile-region-selector .mobile-submenu {
        background: #f5f5f5 !important;
    }
    
    #essential-navbar .mobile-region-selector .mobile-submenu li a {
        color: #495057 !important;
        padding: 10px 20px !important;
        font-weight: 400 !important;
        border-bottom: 1px solid #e9ecef !important;
        transition: background-color 0.2s ease !important;
    }
    
    #essential-navbar .mobile-region-selector .mobile-submenu li a:hover {
        background: #e9ecef !important;
        color: #343a40 !important;
    }
    
    /* ==========================================================================
                        SIMPLIFIED RESPONSIVE BREAKPOINTS
    ========================================================================== */
    
    @media (max-width: 576px) {
        #essential-navbar .mobile-parent-header {
            padding: 10px 15px !important;
        }
        
        #essential-navbar .mobile-parent-text,
        #essential-navbar .mobile-parent-link {
            font-size: 13px !important;
        }
        
        #essential-navbar .mobile-child-item-container {
            padding: 6px 20px !important;
        }
        
        #essential-navbar .mobile-title-container {
            margin: 4px 8px !important;
        }
        
        #essential-navbar .mobile-title-header {
            padding: 8px 10px !important;
        }
        
        #essential-navbar .mobile-direct-link_container {
            margin: 6px 10px !important;
            padding: 8px 12px !important;
        }
    }
    
    @media (max-width: 768px) {
        #essential-navbar #mobile-nav {
            max-height: 100vh !important; /* Keep full height on smaller screens too */
        }
        
        #essential-navbar .mobile-search-container {
            padding: 10px 15px !important;
        }
        
        #essential-navbar .mobile-search_input {
            padding: 8px 10px !important;
            font-size: 13px !important;
        }
    }
}

/* ==========================================================================
                        SIMPLIFIED MOBILE ANIMATIONS
========================================================================== */

@media (max-width: 992px) {
    /* Subtle animations */
    #essential-navbar .mobile-dropdown,
    #essential-navbar .mobile-parent-header_container,
    #essential-navbar .mobile-multiedit-container,
    #essential-navbar .mobile-regular-container,
    #essential-navbar .mobile-title-container {
        animation: fadeIn 0.2s ease-out !important;
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0 !important;
        }
        100% {
            opacity: 1 !important;
        }
    }
    
    /* Simplified submenu animation */
    #essential-navbar .mobile-submenu {
        animation: slideDown 0.2s ease-out !important;
    }
    
    @keyframes slideDown {
        0% {
            max-height: 0 !important;
            opacity: 0 !important;
        }
        100% {
            max-height: 500px !important;
            opacity: 1 !important;
        }
    }
    
    /* Simple title children animation */
    #essential-navbar .mobile-title-children {
        animation: expandVertical 0.2s ease-out !important;
    }
    
    @keyframes expandVertical {
        0% {
            opacity: 0 !important;
            max-height: 0 !important;
        }
        100% {
            opacity: 1 !important;
            max-height: 300px !important;
        }
    }
}