/*-------------------------*/
/* NavMenu Custom Styles (scoped) */

/* GLOBAL FIX: Remove drawer container scrollbars completely (scoped) */
.egk-app .mud-drawer {
    overflow: hidden !important;
}

    .egk-app .mud-drawer .mud-drawer-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

.egk-app .mud-drawer-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.egk-app .mud-drawer-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Header Section */
.egk-app .nav-header-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Enhanced Search Section */
.egk-app .search-section {
    position: relative;
    padding: 0 4px;
}

.egk-app .nav-search-input {
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

    .egk-app .nav-search-input:focus-within {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: scale(1.02);
    }

    .egk-app .nav-search-input .mud-input-outlined .mud-input-outlined-border {
        border-radius: 8px !important;
    }

    .egk-app .nav-search-input .mud-input-control {
        font-size: 0.8125rem !important;
    }

/* Enhanced Search Popover */
.egk-app .nav-search-popover {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px !important;
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

    .egk-app .nav-search-popover .mud-paper,
    .egk-app .nav-search-popover .mud-popover-content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    .egk-app .nav-search-popover .mud-list {
        max-height: 400px;
        margin: 0 !important;
        padding: 4px !important;
        overflow: hidden auto !important;
        box-sizing: border-box;
    }

/* Search Item Styling */
.egk-app .menu-search-item-container {
    position: relative;
    overflow: hidden;
    margin: 2px 0 !important;
    border: 1px solid transparent;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

    .egk-app .menu-search-item-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(var(--mud-palette-primary-rgb), 0.1), transparent);
        transition: left 0.4s ease;
    }

    .egk-app .menu-search-item-container:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background-color: var(--mud-palette-action-hover) !important;
        border-color: var(--mud-palette-primary);
        transform: translateY(-1px);
    }

        .egk-app .menu-search-item-container:hover::before {
            left: 100%;
        }

    .egk-app .menu-search-item-container:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        transform: translateY(0);
    }

.egk-app .search-item-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    transition: all 0.2s ease;
}

.egk-app .menu-search-item-container:hover .search-item-icon-container {
    background: rgba(var(--mud-palette-primary-rgb), 0.2);
    transform: scale(1.1);
}

.egk-app .search-item-icon {
    transition: all 0.2s ease;
}

.egk-app .menu-search-item-container:hover .search-item-icon {
    transform: scale(1.1);
}

.egk-app .menu-search-item-text {
    flex: 1;
    min-width: 0;
}

.egk-app .menu-search-item-title {
    line-height: 1.3 !important;
    font-size: 0.875rem !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
}

.egk-app .menu-search-item-subtitle {
    line-height: 1.2 !important;
    font-size: 0.75rem !important;
    margin-bottom: 1px !important;
    opacity: 0.8;
}

.egk-app .menu-search-item-url {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(var(--mud-palette-text-secondary-rgb), 0.1);
    line-height: 1.1 !important;
    font-size: 0.6875rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', Monaco, monospace;
    opacity: 0.6;
    margin-top: 2px;
}

.egk-app .search-item-actions {
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
    opacity: 0;
}

.egk-app .menu-search-item-container:hover .search-item-actions {
    opacity: 1;
}

.egk-app .search-arrow-icon {
    transition: transform 0.2s ease;
}

.egk-app .menu-search-item-container:hover .search-arrow-icon {
    transform: translateX(2px);
}

/* Search Highlight */
.egk-app .search-highlight {
    padding: 1px 2px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.3);
    border-radius: 2px;
    background: rgba(var(--mud-palette-primary-rgb), 0.2) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

/* No Results Styling */
.egk-app .search-no-results {
    padding: 24px 16px !important;
    animation: fadeInUp 0.4s ease;
}

.egk-app .search-empty-icon {
    animation: pulse 2s ease-in-out infinite;
    opacity: 0.5;
}

/* Enhanced Scrollbar for Search Results */
.egk-app .nav-search-popover::-webkit-scrollbar {
    width: 6px;
}

.egk-app .nav-search-popover::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(var(--mud-palette-text-secondary-rgb), 0.05);
}

.egk-app .nav-search-popover::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(var(--mud-palette-text-secondary-rgb), 0.3);
    transition: background 0.2s ease;
}

    .egk-app .nav-search-popover::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--mud-palette-text-secondary-rgb), 0.5);
    }

/* Search Loading State */
.egk-app .nav-search-input.searching {
    position: relative;
}

    .egk-app .nav-search-input.searching::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 40px;
        width: 12px;
        height: 12px;
        border: 2px solid var(--mud-palette-primary);
        border-radius: 50%;
        animation: searchSpin 1s linear infinite;
        border-top: 2px solid transparent;
    }

/* Keyboard Navigation Hints */
.egk-app .search-keyboard-hint {
    position: absolute;
    right: 12px;
    bottom: 8px;
    padding: 2px 6px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.625rem;
    opacity: 0.6;
    pointer-events: none;
}

/* Navigation Sections */
.egk-app .nav-section {
    padding: 0 2px;
    margin-bottom: 16px;
}

.egk-app .nav-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 18px 16px 6px !important;
    padding: 0 !important;
    letter-spacing: 0.7px;
    font-weight: 700 !important;
    font-size: 0.66rem !important;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.7;
}

/* Trailing hairline keeps section labels light and modern */
.egk-app .nav-section-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 2px;
    background: linear-gradient(90deg, rgba(var(--mud-palette-divider-rgb), 0.55), transparent);
}

.egk-app .nav-section-header .section-icon {
    color: var(--mud-palette-primary) !important;
    opacity: 0.85;
}

/* Navigation Groups */
.egk-app .nav-group {
    margin-bottom: 6px;
    overflow: visible !important; /* Allow wheel scroll events to propagate */
}

.egk-app .nav-subgroup {
    margin-left: 4px;
    margin-bottom: 4px;
    overflow: visible !important; /* Allow wheel scroll events to propagate */
}

.egk-app .nav-group .mud-nav-group-header {
    margin: 2px 10px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

    .egk-app .nav-group .mud-nav-group-header:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.07) !important;
        color: var(--mud-palette-primary) !important;
    }

    .egk-app .nav-group .mud-nav-group-header:hover .mud-nav-link-icon {
        color: var(--mud-palette-primary) !important;
    }

.egk-app .nav-subgroup .mud-nav-group-header {
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* Navigation Links - Different spacing for different levels */
.egk-app .nav-link-main,
.egk-app .nav-link-child {
    position: relative;
    margin: 2px 10px !important;
    border-radius: 10px !important;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.egk-app .nav-link-main {
    padding: 9px 12px !important;
    min-height: 40px !important;
    font-weight: 500 !important;
    font-size: 0.84rem !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Default icon tone — muted until hovered/active for a clean, intentional look */
.egk-app .nav-link-main .mud-nav-link-icon,
.egk-app .nav-link-child .mud-nav-link-icon {
    color: var(--mud-palette-text-secondary);
    transition: color 0.18s ease, transform 0.18s ease;
}

/* Second level child links */
.egk-app .nav-group > .mud-nav-group-content > .nav-link-child {
    padding: 6px !important;
    margin-left: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* Third level child links */
.egk-app .nav-subgroup > .mud-nav-group-content > .nav-link-child,
.egk-app .nav-subgroup .mud-nav-group-content .mud-nav-link {
    padding: 5px 4px !important;
    margin-left: 2px !important;
    font-size: 0.6875rem !important;
    font-weight: 300 !important;
    padding-left: 2px !important;
}

.egk-app .nav-link-main:hover,
.egk-app .nav-link-child:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.07) !important;
    color: var(--mud-palette-text-primary) !important;
}

.egk-app .nav-link-main:hover .mud-nav-link-icon,
.egk-app .nav-link-child:hover .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

.egk-app .nav-link-main.mud-nav-link-active,
.egk-app .nav-link-child.mud-nav-link-active {
    color: var(--mud-palette-primary) !important;
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-primary-rgb), 0.16) 0%,
        rgba(var(--mud-palette-primary-rgb), 0.07) 100%) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.egk-app .nav-link-main.mud-nav-link-active .mud-nav-link-icon,
.egk-app .nav-link-child.mud-nav-link-active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* Icon Improvements */
.egk-app .nav-link-main .mud-nav-link-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
}

.egk-app .nav-group > .mud-nav-group-content > .nav-link-child .mud-nav-link-icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px !important;
}

.egk-app .nav-subgroup .mud-nav-group-content .mud-nav-link-icon {
    width: 14px !important;
    height: 14px !important;
    margin-right: 3px !important;
}

.egk-app .nav-section-header .mud-icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.7;
}

.egk-app .nav-group .mud-nav-group-header .mud-nav-link-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
}

.egk-app .nav-subgroup .mud-nav-group-header .mud-nav-link-icon {
    width: 14px !important;
    height: 14px !important;
    margin-right: 3px !important;
}

/* Middle nav region must shrink so the Contact Us footer stays visible */
.egk-app .nav-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Desktop (persistent drawer): size the wrapper against the VIEWPORT, not the
   drawer box. The drawer sits directly below the fixed app bar, but on some
   hosts (Blazor Server keeps the app inside #app) its box can compute taller
   than the visible area, which pushes the flex-pinned Contact Us footer below
   the fold. Deriving the height from 100dvh - appbar makes the wrapper \u2014 and
   therefore the pinned footer \u2014 end exactly at the visible viewport bottom
   regardless of how the drawer box itself is sized. Capped by the inherited
   max-height:100% above so it can never overflow a correctly sized drawer. */
.egk-app .mud-drawer-persistent .nav-wrapper,
.egk-app .mud-drawer-responsive .nav-wrapper {
    height: calc(100vh - var(--mud-appbar-height, 64px)) !important;
    height: calc(100dvh - var(--mud-appbar-height, 64px)) !important;
}

.egk-app .nav-content-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.egk-app .nav-section.contact-us {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Navigation Menu Content */
.egk-app .nav-menu-content {
    /* Fill remaining space via flex only — do NOT use height:100%.
       height:100% resolves against the full drawer and pushes the pinned
       Contact Us footer below the visible bottom edge. */
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    padding: 4px 0;
    overflow: hidden !important;
    height: auto !important;
}

.egk-app .nav-scrollable-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(100, 100, 100, 0.3) transparent !important;
}

/* Ensure nested nav group content doesn't interfere with wheel scrolling */
.egk-app .nav-menu-content .mud-nav-group,
.egk-app .nav-menu-content .mud-nav-group-content,
.egk-app .nav-menu-content .mud-nav-link,
.egk-app .nav-menu-content .mud-nav-group-header {
    touch-action: pan-y;
}

/* ============================================
   FIX: Mouse wheel scrolling in nav submenus
   The issue is MudBlazor collapse components can
   block wheel events. We need to ensure:
   1. No nested element creates its own scroll context
   2. Wheel events propagate to nav-scrollable-content
   3. Collapse animation still works properly
   ============================================ */

/* Remove any scroll traps from MudNavMenu internal elements */
.egk-app .nav-scrollable-content .mud-nav-menu {
    overflow: visible !important;
}

/* Prevent nav groups from capturing scroll */
.egk-app .nav-scrollable-content .mud-nav-group {
    overflow: visible !important;
}

/* The nav-group-content should not have its own scroll */
.egk-app .nav-scrollable-content .mud-nav-group-content {
    overflow: visible !important;
}

/* Collapse container - don't set overflow that blocks wheel events */
.egk-app .nav-scrollable-content .mud-collapse-container {
    overflow: visible !important;
}

/* Collapse wrapper needs special handling:
   - When expanded (.mud-collapse-entered): overflow visible for wheel events
   - When collapsed: MudBlazor handles height:0, we keep overflow hidden */
.egk-app .nav-scrollable-content .mud-collapse-wrapper.mud-collapse-entered,
.egk-app .nav-scrollable-content .mud-collapse-wrapper.mud-collapse-entered .mud-collapse-wrapper-inner {
    overflow: visible !important;
}

/* Ensure collapsed items stay hidden */
.egk-app .nav-scrollable-content .mud-collapse-wrapper:not(.mud-collapse-entered) {
    overflow: hidden !important;
}

/* CRITICAL: Use pointer-events to allow wheel events to pass through
   while still allowing clicks on nav items */
.egk-app .nav-scrollable-content .mud-nav-group-content,
.egk-app .nav-scrollable-content .mud-collapse-container,
.egk-app .nav-scrollable-content .mud-collapse-wrapper,
.egk-app .nav-scrollable-content .mud-collapse-wrapper-inner {
    pointer-events: none;
}

/* Re-enable pointer events on actual interactive elements */
.egk-app .nav-scrollable-content .mud-nav-link,
.egk-app .nav-scrollable-content .mud-nav-group-header,
.egk-app .nav-scrollable-content .mud-navgroup-header,
.egk-app .nav-scrollable-content .nav-link-main,
.egk-app .nav-scrollable-content .nav-link-child,
.egk-app .nav-scrollable-content .mud-button,
.egk-app .nav-scrollable-content a,
.egk-app .nav-scrollable-content button {
    pointer-events: auto;
}

/* Ensure wheel events propagate - no element should trap scroll */
.egk-app .nav-scrollable-content .mud-nav-group,
.egk-app .nav-scrollable-content .mud-nav-group-content,
.egk-app .nav-scrollable-content .mud-nav-link,
.egk-app .nav-scrollable-content .mud-nav-group-header,
.egk-app .nav-scrollable-content .mud-collapse-container,
.egk-app .nav-scrollable-content .mud-collapse-wrapper,
.egk-app .nav-scrollable-content .mud-collapse-wrapper-inner {
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
}

    .egk-app .nav-scrollable-content::-webkit-scrollbar {
        width: 4px !important;
    }

    .egk-app .nav-scrollable-content::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .egk-app .nav-scrollable-content::-webkit-scrollbar-thumb {
        border-radius: 2px !important;
        background: rgba(100, 100, 100, 0.3) !important;
    }

        .egk-app .nav-scrollable-content::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 100, 100, 0.5) !important;
        }

/* Group Expansion Indicator */
.egk-app .nav-group .mud-expand-panel-icon,
.egk-app .nav-subgroup .mud-expand-panel-icon {
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.2s ease !important;
}

/* Compact spacing for better fit */
.egk-app .nav-group .mud-nav-group {
    margin-bottom: 2px !important;
}

.egk-app .nav-group .mud-nav-group-content {
    padding-top: 2px !important;
    padding-left: 0 !important;
}

.egk-app .nav-subgroup .mud-nav-group-content {
    padding-left: 0 !important;
    padding-top: 1px !important;
}

/* Specific overrides for MudBlazor's nested structure */
.egk-app .mud-nav-group .mud-nav-group-content .mud-nav-link {
    padding-left: 2px !important;
    margin-left: 0 !important;
}

.egk-app .mud-nav-group .mud-nav-group-content .mud-nav-group .mud-nav-group-content .mud-nav-link {
    padding-left: 2px !important;
    margin-left: 0 !important;
}

/* Responsive Design */
@media (width <= 600px) {
    .egk-app .nav-section {
        padding: 0 2px;
    }

    .egk-app .nav-section-header {
        margin: 8px 4px 6px !important;
        font-size: 0.6875rem !important;
    }

    .egk-app .nav-link-main {
        padding: 6px !important;
        font-size: 0.75rem !important;
    }

    .egk-app .nav-group > .mud-nav-group-content > .nav-link-child {
        padding: 4px !important;
        margin-left: 2px !important;
        font-size: 0.6875rem !important;
    }

    .egk-app .nav-subgroup .mud-nav-group-content .mud-nav-link {
        padding: 3px 2px !important;
        margin-left: 1px !important;
        font-size: 0.625rem !important;
        padding-left: 1px !important;
    }

    .egk-app .nav-link-main .mud-nav-link-icon,
    .egk-app .nav-link-child .mud-nav-link-icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 3px !important;
    }

    .egk-app .nav-subgroup .mud-nav-group-content .mud-nav-link-icon {
        width: 12px !important;
        height: 12px !important;
        margin-right: 2px !important;
    }

    .egk-app .nav-subgroup {
        margin-left: 2px;
    }
}

/* Medium screens adjustment */
@media (width <= 960px) and (width >= 601px) {
    .egk-app .nav-section-header {
        margin: 10px 4px 6px !important;
        font-size: 0.6875rem !important;
    }

    .egk-app .nav-link-main {
        padding: 7px 8px !important;
        font-size: 0.75rem !important;
    }

    .egk-app .nav-group > .mud-nav-group-content > .nav-link-child {
        padding: 5px 4px !important;
        font-size: 0.6875rem !important;
        margin-left: 3px !important;
    }

    .egk-app .nav-subgroup .mud-nav-group-content .mud-nav-link {
        padding: 4px 3px !important;
        font-size: 0.625rem !important;
        margin-left: 2px !important;
        padding-left: 2px !important;
    }

    .egk-app .nav-subgroup {
        margin-left: 3px;
    }
}

/* Dark Theme Adjustments */
.mud-theme-dark .egk-app .nav-section-header {
    color: var(--mud-palette-primary-lighten) !important;
}

.mud-theme-dark .egk-app .nav-header-section {
    border-bottom-color: var(--mud-palette-divider-dark);
}

.mud-theme-dark .egk-app .nav-link-main.mud-nav-link-active,
.mud-theme-dark .egk-app .nav-link-child.mud-nav-link-active {
    color: var(--mud-palette-primary-lighten) !important;
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-primary-rgb), 0.28) 0%,
        rgba(var(--mud-palette-primary-rgb), 0.12) 100%) !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary-lighten);
}

.mud-theme-dark .egk-app .nav-link-main.mud-nav-link-active .mud-nav-link-icon,
.mud-theme-dark .egk-app .nav-link-child.mud-nav-link-active .mud-nav-link-icon {
    color: var(--mud-palette-primary-lighten) !important;
}

/* Navigation Menu Search Enhancements */
.egk-app .nav-search-input {
    border: 1px solid var(--mud-palette-divider) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Improved Focus States */
.egk-app .nav-link-main:focus,
.egk-app .nav-link-child:focus,
.egk-app .nav-group .mud-nav-group-header:focus {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 1px !important;
}

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

    .egk-app .nav-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid var(--mud-palette-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        border-top: 2px solid transparent;
    }

/* NavStatsCard Styles */
.egk-app .nav-stats-container {
    margin-bottom: 12px;
}

.egk-app .nav-stats-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
    transition: all 0.3s ease;
}

    .egk-app .nav-stats-card:hover {
        box-shadow: var(--mud-elevation-2) !important;
        transform: translateY(-1px);
    }

    .egk-app .nav-stats-card .mud-card-content {
        padding: 8px !important;
        background: transparent !important;
    }

    .egk-app .nav-stats-card .text-center {
        flex: 1;
    }

        .egk-app .nav-stats-card .text-center:not(:last-child) {
            border-right: 1px solid var(--mud-palette-divider);
            padding-right: 6px;
            margin-right: 6px;
        }

    .egk-app .nav-stats-card .mud-typography-h6 {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    .egk-app .nav-stats-card .mud-typography-caption {
        font-size: 0.625rem !important;
    }

.mud-theme-dark .egk-app .nav-stats-card {
    background: linear-gradient(135deg, var(--mud-palette-surface-variant) 0%, var(--mud-palette-surface) 100%);
    border-color: var(--mud-palette-divider-dark);
}

/* Compact text rendering */
.egk-app .nav-link-main .mud-nav-link-text,
.egk-app .nav-link-child .mud-nav-link-text {
    line-height: 1.2 !important;
}

.egk-app .nav-group .mud-nav-group-header .mud-nav-group-text {
    line-height: 1.3 !important;
}

/* Fix for nested nav groups to reduce excessive spacing */
.egk-app .mud-nav-group .mud-nav-group-content .mud-nav-group {
    margin-left: 0 !important;
}

.egk-app .mud-nav-group .mud-nav-group-content .mud-nav-link {
    margin-left: 0 !important;
}

/* Override MudBlazor default spacing for tighter layout */
.egk-app .mud-nav-group-header {
    min-height: 32px !important;
}

.egk-app .mud-nav-link {
    min-height: 26px !important;
}

/* Additional overrides for extremely tight spacing */
.egk-app .nav-menu-content .mud-nav-group .mud-nav-group-content {
    padding-left: 0 !important;
}

    .egk-app .nav-menu-content .mud-nav-group .mud-nav-group-content .mud-nav-link {
        padding-left: 2px !important;
        margin-left: 0 !important;
    }

    .egk-app .nav-menu-content .mud-nav-group .mud-nav-group-content .mud-nav-group .mud-nav-group-content .mud-nav-link {
        padding-left: 2px !important;
        margin-left: 0 !important;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.egk-app .menu-search-item-container {
    animation: fadeInUp 0.2s ease;
    animation-fill-mode: both;
}

    .egk-app .menu-search-item-container:nth-child(1) {
        animation-delay: 0ms;
    }

    .egk-app .menu-search-item-container:nth-child(2) {
        animation-delay: 30ms;
    }

    .egk-app .menu-search-item-container:nth-child(3) {
        animation-delay: 60ms;
    }

    .egk-app .menu-search-item-container:nth-child(4) {
        animation-delay: 90ms;
    }

    .egk-app .menu-search-item-container:nth-child(5) {
        animation-delay: 120ms;
    }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .egk-app .menu-search-item-container,
    .egk-app .search-item-icon-container,
    .egk-app .search-item-icon,
    .egk-app .search-arrow-icon {
        transition: none !important;
        animation: none !important;
    }

        .egk-app .menu-search-item-container:hover {
            transform: none !important;
        }
}

/* ============================================
   GLOBAL NAV SEARCH POPOVER WIDTH FIX
   MudBlazor renders the popover as a portal
   outside .nav-wrapper, so we need global rules
   ============================================ */

/* Force the nav search popover to be wider */
.nav-search-popover {
    width: max-content !important;
    min-width: 280px !important;
    max-width: calc(100vw - 32px) !important;
}

.nav-search-popover.mud-popover,
.nav-search-popover .mud-popover,
.nav-search-popover .mud-popover-cascading-value {
    width: max-content !important;
    min-width: 280px !important;
    max-width: calc(100vw - 32px) !important;
}

/* Target the inner list/paper inside the popover */
.nav-search-popover .mud-paper,
.nav-search-popover .mud-list,
.nav-search-popover .mud-list-item,
.nav-search-popover .mud-autocomplete-list {
    width: 100% !important;
    max-width: none !important;
}

/* Make search item containers fill the available width */
.nav-search-popover .menu-search-item-container {
    width: 100% !important;
    min-width: 260px !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Ensure text doesn't get truncated */
.nav-search-popover .menu-search-item-title,
.nav-search-popover .menu-search-item-subtitle {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Ensure the flex container stretches */
.nav-search-popover .menu-search-item-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* ============================================
   FIX: Ensure nav header and search always visible
   The search section was disappearing when certain 
   components (like Chat dock) were rendered
   ============================================ */

/* Ensure the nav header section is always visible */
.egk-app .nav-header-section,
.egk-app .nav-header-section.compact-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
}

/* Ensure search-actions-row uses flex properly */
.egk-app .search-actions-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ensure search section is always visible and takes proper space */
.egk-app .search-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
    width: auto !important;
}

/* Ensure nav-actions doesn't push search out */
.egk-app .nav-actions {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Ensure the nav-search-input is visible */
.egk-app .nav-search-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

.egk-app .nav-search-input .mud-input-control,
.egk-app .nav-search-input .mud-input-root {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent any z-index issues with chat dock overlay */
.egk-app .mud-drawer,
.egk-app .mud-drawer-content {
    z-index: 1300 !important; /* Higher than chat dock overlay */
}