/* =========================================================
   LEARNOM PREMIUM NAVIGATION REDESIGN
   Targeting: Navbar & Side Menu
   ========================================================= */

:root {
    --nav-height: 58px; /* Tighter for premium feel */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(30, 30, 45, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* 1. Fixed Navbar Glassmorphism */
.layout-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    z-index: 1200 !important;
    transition: all 0.3s ease;
    height: var(--nav-height);
    display: flex;
    align-items: center;
}

/* 2. Global Icon Uniformity System (Apple-like) */
.navbar-action-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Strictly target top-level action items only */
.navbar-action-group > .nav-item > .nav-link,
.navbar-action-group > .nav-item > .btn-icon,
.navbar-action-group .navbar-search-wrapper #autocomplete,
.menu-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important; /* Uniform Squircle Shape */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--bs-heading-color) !important;
}

/* Precise targeting for TOP LEVEL icons only - avoids leaking into dropdowns */
.navbar-action-group > .nav-item > .nav-link .icon-base,
.navbar-action-group > .nav-item > .btn-icon .icon-base,
.menu-toggle-btn .icon-base {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
}

/* Unified Hover Micro-animation */
.navbar-action-group > .nav-item:hover > .nav-link,
.navbar-action-group .btn-icon:hover,
.menu-toggle-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    transform: translateY(-1px) scale(1.08); /* Sophisticated pop */
    border-radius: 12px !important;
}

/* 3. Dropdown Menu Layout Restoration (Icon + Text in Row) */
.navbar-action-group .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important; /* Standard spacing between icon and text */
}


/* 3. Global Icon-Only Search Force-Fix */
.navbar-search-wrapper #autocomplete {
    width: 40px !important;
    height: 40px !important;
    border: none !important; /* Kills the default .btn border */
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-search-wrapper .aa-DetachedSearchButton {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-search-wrapper .aa-Autocomplete,
.navbar-search-wrapper .aa-Form,
.navbar-search-wrapper .aa-SubmitButton,
.navbar-search-wrapper .aa-SearchButton {
    border: none !important;
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

.navbar-search-wrapper .aa-SearchButtonPlaceholder,
.navbar-search-wrapper .aa-InputWrapper,
.navbar-search-wrapper .aa-ClearButton {
    display: none !important;
}

.navbar-search-wrapper .aa-SubmitIcon,
.navbar-search-wrapper .aa-SearchButtonIcon,
.navbar-search-wrapper .aa-SearchButtonIcon svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--bs-heading-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Avatar & Layout Fixes (The Big Push) */
#navbar-left-group {
    flex: 1 1 auto !important;
}

#navbar-right-group {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    z-index: 5; /* Ensure icons stay on top during overlap */
}

.navbar-action-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-action-group .nav-item {
    flex-shrink: 0 !important; /* Prevents button collapse */
}

.navbar-action-group .avatar {
    width: 36px !important;
    height: 36px !important;
}

.navbar-action-group .avatar img {
    border: 1px solid var(--glass-border);
}

.learnom-nav-logo-icon svg {
    color: var(--bs-primary);
    transition: all 0.3s ease;
}

.learnom-nav-logo-text svg {
    color: var(--bs-heading-color); /* Automatically flips for dark/light mode */
    transition: all 0.3s ease;
}

.layout-page, 
.layout-menu {
    padding-top: var(--nav-height) !important;
}

/* 5. Tiered Responsive Hiding (Sacrifice Order) */

@media (max-width: 500px) {
    /* Sacrifice 1: Search Icon (Hides first at 500px to reclaim immediate space) */
    .navbar-search-wrapper {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Sacrifice 2: Brand Text (Hides second at 480px, keeping icon symbol) */
    .learnom-nav-logo-text {
        display: none !important;
    }
}

@media (max-width: 380px) {
    /* Sacrifice 3: Brand Icon (Final sacrifice for extremely narrow screens like iPhone SE) */
    .navbar-brand {
        display: none !important;
    }
}


/* 4. Menu Toggle & Lock Status */
.menu-toggle-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.menu-toggle-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* Lock Status Visual Indicators */
/* When menu is pinned (desktop) */
html:not(.layout-menu-collapsed) .menu-toggle-btn i {
    color: var(--bs-primary) !important;
    transform: rotate(0deg);
}

/* When menu is collapsed/compact */
html.layout-menu-collapsed .menu-toggle-btn i {
    color: var(--bs-secondary-color) !important;
    transform: rotate(-180deg);
}

/* 5. Sidebar Menu Premium Styling */
.layout-menu {
    z-index: 1100 !important;
    padding-top: 1rem;
}

.menu-vertical .menu-item .menu-link {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.menu-vertical .menu-item.active > .menu-link {
    background: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-primary-rgb), 0.8) 100%) !important;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3);
}

.menu-vertical .menu-item:not(.active) > .menu-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
    color: var(--bs-primary) !important;
    padding-left: 1.5rem;
}

/* 7. Tooltip & Global Overlay Fixes */
.tooltip {
    z-index: 9999 !important;
    transition: opacity 0.2s ease-in-out;
}

/* 8. Mobile Side Menu Optimizations */
@media (max-width: 767.98px) {
    /* Menu specific adjustments now handled by global logic */
}