/* =============================================================================
   AFLAO NEXUS ENTERPRISE UI FRAMEWORK
   FILE 2
   NAVIGATION.CSS

   PART 1
   ------------------------------------------------------------
   1. NAVBAR FOUNDATION
   2. NAVBAR LEFT
   3. BRAND
   4. BRAND LOGO
   5. BRAND INFORMATION
   ============================================================================= */


/* =============================================================================
   1. NAVBAR FOUNDATION
============================================================================= */

.navbar{

    position:fixed;

    top:0;

    left:var(--sidebar-width);

    right:0;

    height:var(--navbar-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#FFFFFF;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    padding:0 28px;

    z-index:1100;

}


/* =============================================================================
   2. NAVBAR LEFT
============================================================================= */

.navbar-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

}


/* =============================================================================
   SIDEBAR TOGGLE
============================================================================= */

.navbar-toggle{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:12px;

    background:#F8FAFC;

    color:var(--text);

    cursor:pointer;

    transition:all var(--transition);

}

.navbar-toggle:hover{

    background:var(--primary);

    color:#FFFFFF;

    transform:translateY(-2px);

}


/* =============================================================================
   3. ENTERPRISE BRAND
============================================================================= */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:14px;

    color:inherit;

    text-decoration:none;

}


/* =============================================================================
   4. BRAND LOGO
============================================================================= */

.navbar-logo{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#FFFFFF;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    flex-shrink:0;

}

.navbar-logo img{

    width:40px;

    height:40px;

    object-fit:contain;

}


/* =============================================================================
   5. BRAND INFORMATION
============================================================================= */

.navbar-brand-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.15;

}

.navbar-brand-title{

    font-size:1.10rem;

    font-weight:700;

    color:var(--primary);

    white-space:nowrap;

}

.navbar-brand-subtitle{

    font-size:.74rem;

    color:var(--text-light);

    letter-spacing:.04em;

    white-space:nowrap;

    margin-top:3px;

}


/* =============================================================================
   VERSION
============================================================================= */

.navbar-version{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.30rem .70rem;

    border-radius:999px;

    background:rgba(15,81,50,.08);

    color:var(--primary);

    font-size:.72rem;

    font-weight:700;

}


/* =============================================================================
   DIVIDER
============================================================================= */

.navbar-divider{

    width:1px;

    height:34px;

    background:var(--border);

}


/* =============================================================================
   LIVE STATUS
============================================================================= */

.navbar-live{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.82rem;

    color:var(--text-light);

    white-space:nowrap;

}

.navbar-live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:0 0 10px rgba(34,197,94,.5);

}

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 2
   ------------------------------------------------------------
   6. NAVBAR CENTER
   7. SEARCH FORM
   8. SEARCH INPUT
   9. SEARCH BUTTON
   10. SEARCH RESULTS
============================================================================= */


/* =============================================================================
   6. NAVBAR CENTER
============================================================================= */

.navbar-center{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 30px;

}


/* =============================================================================
   7. SEARCH FORM
============================================================================= */

.navbar-search{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    max-width:620px;

}


/* =============================================================================
   SEARCH INPUT
============================================================================= */

.navbar-search input{

    width:100%;

    height:48px;

    padding:0 58px 0 18px;

    border:1px solid var(--border);

    border-radius:999px;

    background:#F8FAFC;

    color:var(--text);

    font-size:.92rem;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}

.navbar-search input::placeholder{

    color:var(--text-muted);

}

.navbar-search input:hover{

    background:#FFFFFF;

}

.navbar-search input:focus{

    outline:none;

    background:#FFFFFF;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,81,50,.10);

}


/* =============================================================================
   SEARCH BUTTON
============================================================================= */

.navbar-search button{

    position:absolute;

    right:6px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#FFFFFF;

    cursor:pointer;

    transition:all var(--transition);

}

.navbar-search button:hover{

    background:var(--primary-dark);

    transform:scale(1.05);

}


/* =============================================================================
   SEARCH RESULTS PANEL
============================================================================= */

.search-results{

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    right:0;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:16px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    display:none;

    z-index:1200;

}

.search-results.show{

    display:block;

}


/* =============================================================================
   SEARCH ITEM
============================================================================= */

.search-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    cursor:pointer;

    transition:background var(--transition);

}

.search-item:hover{

    background:#F8FAFC;

}

.search-item i{

    width:18px;

    color:var(--primary);

    text-align:center;

}

.search-item-title{

    font-size:.90rem;

    font-weight:600;

    color:var(--text);

}

.search-item-subtitle{

    font-size:.78rem;

    color:var(--text-light);

}


/* =============================================================================
   EMPTY SEARCH
============================================================================= */

.search-empty{

    padding:24px;

    text-align:center;

    color:var(--text-light);

}

.search-empty i{

    font-size:1.8rem;

    color:var(--text-muted);

    margin-bottom:12px;

    display:block;

}


/* =============================================================================
   LOADING SEARCH
============================================================================= */

.search-loading{

    padding:18px;

    text-align:center;

    color:var(--text-light);

}


/* =============================================================================
   END OF FILE 2
   PART 2
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 3
   ------------------------------------------------------------
   11. NAVBAR RIGHT
   12. ACTION ICONS
   13. LANGUAGE SELECTOR
   14. THEME SWITCH
============================================================================= */


/* =============================================================================
   11. NAVBAR RIGHT
============================================================================= */

.navbar-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:14px;

    flex-shrink:0;

}


/* =============================================================================
   NAVBAR ACTION GROUP
============================================================================= */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}


/* =============================================================================
   NAVBAR ICON
============================================================================= */

.navbar-icon{

    position:relative;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border);

    border-radius:14px;

    background:#FFFFFF;

    color:var(--text);

    cursor:pointer;

    transition:all var(--transition);

}

.navbar-icon:hover{

    background:var(--primary);

    color:#FFFFFF;

    border-color:var(--primary);

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

.navbar-icon i{

    font-size:1rem;

}


/* =============================================================================
   NAVBAR BADGE
============================================================================= */

.navbar-badge{

    position:absolute;

    top:-5px;

    right:-5px;

    min-width:20px;

    height:20px;

    padding:0 6px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--danger);

    color:#FFFFFF;

    border-radius:999px;

    font-size:.68rem;

    font-weight:700;

    border:2px solid #FFFFFF;

}


/* =============================================================================
   NAVBAR DROPDOWN WRAPPER
============================================================================= */

.navbar-dropdown{

    position:relative;

}


/* =============================================================================
   LANGUAGE BUTTON
============================================================================= */

.language-button{

    display:flex;

    align-items:center;

    gap:8px;

    height:46px;

    padding:0 16px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#FFFFFF;

    color:var(--text);

    cursor:pointer;

    transition:all var(--transition);

}

.language-button:hover{

    border-color:var(--primary);

    color:var(--primary);

    box-shadow:var(--shadow-sm);

}

.language-button i:first-child{

    color:var(--primary);

}

.language-button span{

    font-size:.88rem;

    font-weight:600;

}


/* =============================================================================
   THEME SWITCH
============================================================================= */

.theme-switch{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border);

    border-radius:14px;

    background:#FFFFFF;

    color:var(--text);

    cursor:pointer;

    transition:all var(--transition);

}

.theme-switch:hover{

    background:var(--secondary);

    color:#FFFFFF;

    border-color:var(--secondary);

    transform:rotate(15deg);

}


/* =============================================================================
   ACTION SEPARATOR
============================================================================= */

.navbar-actions-divider{

    width:1px;

    height:32px;

    background:var(--border);

}


/* =============================================================================
   ICON ACTIVE STATE
============================================================================= */

.navbar-icon.active,

.language-button.active,

.theme-switch.active{

    background:rgba(15,81,50,.08);

    border-color:var(--primary);

    color:var(--primary);

}


/* =============================================================================
   END OF FILE 2
   PART 3
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 4
   ------------------------------------------------------------
   15. NOTIFICATION DROPDOWN
   16. DROPDOWN HEADER
   17. NOTIFICATION ITEMS
   18. MESSAGE ITEMS
   19. EMPTY STATE
   20. DROPDOWN FOOTER
============================================================================= */


/* =============================================================================
   15. DROPDOWN PANEL
============================================================================= */

.notification-dropdown,
.message-dropdown{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:380px;

    max-width:90vw;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:all var(--transition);

    z-index:1200;

}

.navbar-dropdown.active .notification-dropdown,
.navbar-dropdown.active .message-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* =============================================================================
   16. DROPDOWN HEADER
============================================================================= */

.notification-header,
.message-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-bottom:1px solid var(--border);

    background:#FAFBFC;

}

.notification-title,
.message-title{

    font-size:1rem;

    font-weight:700;

    color:var(--text);

}

.notification-count,
.message-count{

    min-width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:var(--primary);

    color:#FFFFFF;

    font-size:.75rem;

    font-weight:700;

}


/* =============================================================================
   17. DROPDOWN BODY
============================================================================= */

.notification-body,
.message-body{

    max-height:420px;

    overflow-y:auto;

}


/* =============================================================================
   NOTIFICATION ITEM
============================================================================= */

.notification-item,
.message-item{

    display:flex;

    gap:14px;

    padding:16px 20px;

    border-bottom:1px solid var(--border-light);

    cursor:pointer;

    transition:background var(--transition);

}

.notification-item:hover,
.message-item:hover{

    background:#F8FAFC;

}

.notification-item:last-child,
.message-item:last-child{

    border-bottom:none;

}

.notification-item.unread{

    background:rgba(15,81,50,.04);

}


/* =============================================================================
   ICON
============================================================================= */

.notification-icon,
.message-avatar{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(15,81,50,.10);

    color:var(--primary);

    overflow:hidden;

}

.message-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* =============================================================================
   CONTENT
============================================================================= */

.notification-content,
.message-content{

    flex:1;

    min-width:0;

}

.notification-text,
.message-text{

    font-size:.90rem;

    font-weight:600;

    color:var(--text);

    margin-bottom:4px;

    line-height:1.4;

}

.notification-time,
.message-time{

    font-size:.76rem;

    color:var(--text-muted);

}


/* =============================================================================
   EMPTY STATE
============================================================================= */

.dropdown-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:40px 24px;

    text-align:center;

    color:var(--text-light);

}

.dropdown-empty i{

    font-size:2rem;

    margin-bottom:14px;

    color:var(--text-muted);

}

.dropdown-empty p{

    margin:0;

}


/* =============================================================================
   DROPDOWN FOOTER
============================================================================= */

.notification-footer,
.message-footer{

    padding:14px;

    border-top:1px solid var(--border);

    background:#FAFBFC;

}

.notification-footer a,
.message-footer a{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px;

    border-radius:12px;

    background:var(--primary);

    color:#FFFFFF;

    font-size:.90rem;

    font-weight:600;

    transition:all var(--transition);

}

.notification-footer a:hover,
.message-footer a:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


/* =============================================================================
   END OF FILE 2
   PART 4
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 5
   ------------------------------------------------------------
   21. USER PROFILE
   22. USER AVATAR
   23. USER INFO
   24. USER DROPDOWN
   25. DROPDOWN ITEMS
   26. LOGOUT
============================================================================= */


/* =============================================================================
   USER PROFILE
============================================================================= */

.navbar-user{

    display:flex;

    align-items:center;

    gap:12px;

    padding:6px 8px;

    border:1px solid var(--border);

    border-radius:16px;

    background:#FFFFFF;

    cursor:pointer;

    transition:all var(--transition);

}

.navbar-user:hover{

    border-color:var(--primary);

    box-shadow:var(--shadow-sm);

}


/* =============================================================================
   USER AVATAR
============================================================================= */

.navbar-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid rgba(15,81,50,.15);

    flex-shrink:0;

}

.navbar-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* =============================================================================
   USER INFORMATION
============================================================================= */

.navbar-user-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

}

.navbar-user-name{

    font-size:.92rem;

    font-weight:700;

    color:var(--text);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:170px;

}

.navbar-user-role{

    font-size:.76rem;

    color:var(--text-light);

    margin-top:2px;

}


/* =============================================================================
   USER DROPDOWN PANEL
============================================================================= */

.navbar-user .navbar-dropdown-menu{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:320px;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:all var(--transition);

    z-index:1200;

}

.navbar-user.active .navbar-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* =============================================================================
   USER HEADER
============================================================================= */

.dropdown-header{

    padding:22px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#FFFFFF;

}

.dropdown-header h4{

    margin:0;

    color:#FFFFFF;

    font-size:1rem;

    font-weight:700;

}

.dropdown-header small{

    display:block;

    margin-top:6px;

    color:rgba(255,255,255,.80);

    font-size:.80rem;

}


/* =============================================================================
   DROPDOWN ITEMS
============================================================================= */

.dropdown-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 20px;

    color:var(--text);

    transition:all var(--transition);

}

.dropdown-item i{

    width:20px;

    text-align:center;

    color:var(--primary);

}

.dropdown-item:hover{

    background:#F8FAFC;

    color:var(--primary);

    padding-left:26px;

}

.dropdown-divider{

    height:1px;

    background:var(--border);

}


/* =============================================================================
   LOGOUT
============================================================================= */

.dropdown-item.logout{

    width:100%;

    border:none;

    background:none;

    cursor:pointer;

    color:var(--danger);

    justify-content:flex-start;

}

.dropdown-item.logout i{

    color:var(--danger);

}

.dropdown-item.logout:hover{

    background:#FEF2F2;

    color:var(--danger);

}


/* =============================================================================
   USER STATUS
============================================================================= */

.user-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:8px;

    font-size:.75rem;

    color:rgba(255,255,255,.85);

}

.user-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

}


/* =============================================================================
   END OF FILE 2
   PART 5
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 6
   ------------------------------------------------------------
   27. GENERIC DROPDOWNS
   28. DROPDOWN ANIMATIONS
   29. ICON ANIMATIONS
   30. BADGE ANIMATIONS
   31. LIVE STATUS
   32. TOOLTIPS
============================================================================= */


/* =============================================================================
   GENERIC DROPDOWN
============================================================================= */

.navbar-dropdown{

    position:relative;

}

.navbar-dropdown-menu{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    min-width:240px;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:16px;

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);

    overflow:hidden;

    z-index:1300;

}

.navbar-dropdown.active>.navbar-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* =============================================================================
   DROPDOWN ARROW
============================================================================= */

.navbar-dropdown-menu::before{

    content:"";

    position:absolute;

    top:-8px;

    right:22px;

    width:14px;

    height:14px;

    background:#FFFFFF;

    border-left:1px solid var(--border);

    border-top:1px solid var(--border);

    transform:rotate(45deg);

}


/* =============================================================================
   DROPDOWN SCROLL
============================================================================= */

.navbar-dropdown-menu{

    max-height:520px;

    overflow-y:auto;

}

.navbar-dropdown-menu::-webkit-scrollbar{

    width:8px;

}

.navbar-dropdown-menu::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:999px;

}


/* =============================================================================
   DROPDOWN ANIMATION
============================================================================= */

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(12px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.navbar-dropdown.active>.navbar-dropdown-menu{

    animation:dropdownFade .22s ease;

}


/* =============================================================================
   ICON HOVER
============================================================================= */

.navbar-icon i{

    transition:
        transform .25s ease,
        color .25s ease;

}

.navbar-icon:hover i{

    transform:scale(1.15);

}


/* =============================================================================
   THEME BUTTON
============================================================================= */

.theme-switch i{

    transition:transform .35s ease;

}

.theme-switch:hover i{

    transform:rotate(180deg);

}


/* =============================================================================
   LANGUAGE BUTTON
============================================================================= */

.language-button .fa-chevron-down{

    transition:transform .25s ease;

}

.navbar-dropdown.active .language-button .fa-chevron-down{

    transform:rotate(180deg);

}


/* =============================================================================
   USER MENU CHEVRON
============================================================================= */

.navbar-user>.fa-chevron-down{

    transition:transform .25s ease;

}

.navbar-user.active>.fa-chevron-down{

    transform:rotate(180deg);

}


/* =============================================================================
   BADGE PULSE
============================================================================= */

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.18);

    }

    100%{

        transform:scale(1);

    }

}

.navbar-badge{

    animation:badgePulse 2.4s infinite;

}


/* =============================================================================
   LIVE INDICATOR
============================================================================= */

@keyframes livePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.25);

        opacity:.75;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.navbar-live-dot{

    animation:livePulse 2s infinite;

}


/* =============================================================================
   TOOLTIP
============================================================================= */

[data-tooltip]{

    position:relative;

}

[data-tooltip]::after{

    content:attr(data-tooltip);

    position:absolute;

    bottom:-42px;

    left:50%;

    transform:translateX(-50%);

    background:#111827;

    color:#FFFFFF;

    padding:6px 10px;

    border-radius:8px;

    font-size:.72rem;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:all .20s ease;

    pointer-events:none;

}

[data-tooltip]:hover::after{

    opacity:1;

    visibility:visible;

}


/* =============================================================================
   ACCESSIBILITY
============================================================================= */

.navbar button:focus-visible,

.navbar a:focus-visible{

    outline:3px solid rgba(13,110,253,.35);

    outline-offset:2px;

}


/* =============================================================================
   END OF FILE 2
   PART 6
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 7
   ------------------------------------------------------------
   33. MOBILE MENU
   34. MOBILE OVERLAY
   35. TABLET
   36. MOBILE
   37. SMALL MOBILE
============================================================================= */


/* =============================================================================
   MOBILE MENU BUTTON
============================================================================= */

.mobile-menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

    background:#F8FAFC;

    color:var(--text);

    cursor:pointer;

    transition:all var(--transition);

}

.mobile-menu-toggle:hover{

    background:var(--primary);

    color:#FFFFFF;

}


/* =============================================================================
   MOBILE OVERLAY
============================================================================= */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:all var(--transition);

    z-index:1095;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

}


/* =============================================================================
   LARGE TABLETS
============================================================================= */

@media (max-width:1200px){

    .navbar{

        padding:0 20px;

    }

    .navbar-center{

        padding:0 18px;

    }

    .navbar-search{

        max-width:460px;

    }

    .navbar-brand-subtitle{

        display:none;

    }

}


/* =============================================================================
   TABLETS
============================================================================= */

@media (max-width:992px){

    .navbar{

        left:0;

        padding:0 18px;

    }

    .mobile-menu-toggle{

        display:flex;

    }

    .navbar-toggle{

        display:none;

    }

    .navbar-center{

        flex:1;

        padding:0 16px;

    }

    .navbar-search{

        max-width:360px;

    }

    .navbar-version,

    .navbar-divider,

    .navbar-live{

        display:none;

    }

}


/* =============================================================================
   MOBILE
============================================================================= */

@media (max-width:768px){

    .navbar{

        padding:0 14px;

    }

    .navbar-brand-info{

        display:none;

    }

    .navbar-center{

        display:none;

    }

    .navbar-right{

        gap:8px;

    }

    .navbar-icon,

    .theme-switch{

        width:42px;

        height:42px;

    }

    .language-button{

        padding:0 12px;

    }

    .language-button span{

        display:none;

    }

    .navbar-user{

        padding:4px;

    }

    .navbar-user-info{

        display:none;

    }

}


/* =============================================================================
   SMALL MOBILE
============================================================================= */

@media (max-width:576px){

    .navbar{

        height:70px;

        padding:0 10px;

    }

    .navbar-logo{

        width:46px;

        height:46px;

    }

    .navbar-logo img{

        width:32px;

        height:32px;

    }

    .navbar-right{

        gap:6px;

    }

    .navbar-icon,

    .theme-switch,

    .mobile-menu-toggle{

        width:38px;

        height:38px;

        border-radius:10px;

    }

    .language-button{

        width:38px;

        padding:0;

        justify-content:center;

    }

    .language-button i:last-child{

        display:none;

    }

}


/* =============================================================================
   TOUCH DEVICES
============================================================================= */

@media (pointer:coarse){

    .navbar-icon,

    .theme-switch,

    .language-button,

    .mobile-menu-toggle{

        min-width:44px;

        min-height:44px;

    }

}


/* =============================================================================
   MOBILE DROPDOWNS
============================================================================= */

@media (max-width:768px){

    .notification-dropdown,

    .message-dropdown,

    .navbar-dropdown-menu{

        width:calc(100vw - 24px);

        max-width:420px;

        right:-10px;

    }

}


/* =============================================================================
   END OF FILE 2
   PART 7
============================================================================= */

/* =============================================================================
   FILE 2
   NAVIGATION.CSS

   PART 8
   ------------------------------------------------------------
   38. NAVBAR PERFORMANCE
   39. DASHBOARD COMPATIBILITY
   40. SIDEBAR COMPATIBILITY
   41. DROPDOWN Z-INDEX
   42. PRINT
   43. REDUCED MOTION
   44. FINAL OVERRIDES
============================================================================= */


/* =============================================================================
   NAVBAR PERFORMANCE
============================================================================= */

.navbar{

    will-change:transform;

    contain:layout style;

}


/* =============================================================================
   PREVENT IMAGE DISTORTION
============================================================================= */

.navbar img{

    display:block;

    max-width:100%;

    height:auto;

}


/* =============================================================================
   FIX BUTTONS
============================================================================= */

.navbar button{

    font:inherit;

}

.navbar a{

    text-decoration:none;

}


/* =============================================================================
   DASHBOARD COMPATIBILITY
============================================================================= */

.dashboard-wrapper{

    margin-top:var(--navbar-height);

}

.dashboard-content{

    min-height:calc(100vh - var(--navbar-height));

}


/* =============================================================================
   SIDEBAR COMPATIBILITY
============================================================================= */

@media(min-width:993px){

    .navbar{

        left:var(--sidebar-width);

    }

}

@media(max-width:992px){

    .navbar{

        left:0;

    }

}


/* =============================================================================
   DROPDOWN PRIORITY
============================================================================= */

.notification-dropdown,

.message-dropdown,

.navbar-dropdown-menu{

    z-index:9999;

}


/* =============================================================================
   SEARCH PRIORITY
============================================================================= */

.search-results{

    z-index:9998;

}


/* =============================================================================
   REMOVE LIST STYLES
============================================================================= */

.notification-dropdown ul,

.message-dropdown ul,

.navbar-dropdown-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}


/* =============================================================================
   SMOOTH SCROLL
============================================================================= */

.notification-body,

.message-body,

.navbar-dropdown-menu{

    scroll-behavior:smooth;

}


/* =============================================================================
   PRINT
============================================================================= */

@media print{

    .navbar{

        display:none !important;

    }

}


/* =============================================================================
   REDUCED MOTION
============================================================================= */

@media(prefers-reduced-motion:reduce){

    .navbar *{

        animation:none !important;

        transition:none !important;

    }

}


/* =============================================================================
   FINAL SAFETY OVERRIDES
============================================================================= */

.navbar-left,

.navbar-center,

.navbar-right{

    display:flex;

    align-items:center;

}

.navbar-brand{

    display:flex;

    align-items:center;

}

.navbar-brand-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.navbar-user{

    display:flex;

    align-items:center;

}

.navbar-actions{

    display:flex;

    align-items:center;

}

.navbar-search{

    display:flex;

}

.navbar-search input{

    flex:1;

}

.navbar-icon{

    flex-shrink:0;

}

.language-button{

    flex-shrink:0;

}

.theme-switch{

    flex-shrink:0;

}


/* =============================================================================
   END OF FILE 2
   NAVIGATION.CSS

   RESPONSIBILITIES

   ✓ Enterprise Navbar
   ✓ Brand
   ✓ Search
   ✓ Notifications
   ✓ Messages
   ✓ User Menu
   ✓ Language Selector
   ✓ Theme Switch
   ✓ Mobile Navigation
   ✓ Dropdowns
   ✓ Responsive Navigation

   DOES NOT STYLE

   ✗ Sidebar
   ✗ Dashboard
   ✗ Cards
   ✗ Statistics
   ✗ Executive Header
   ✗ Tables
   ✗ Charts
   ✗ Widgets

============================================================================= */
/* AFLAO MOBILE DROPDOWN VIEWPORT */
@media (max-width:768px){

    .navbar .navbar-dropdown-menu,
    .navbar .notification-dropdown,
    .navbar .message-dropdown{

        position:fixed !important;
        top:72px !important;
        right:8px !important;
        left:auto !important;
        bottom:auto !important;
        width:min(300px, calc(100vw - 16px)) !important;
        max-width:calc(100vw - 16px) !important;
        max-height:calc(100vh - 88px) !important;
        margin:0 !important;
        box-sizing:border-box !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        transform:translateY(-8px) !important;
        z-index:5000 !important;

    }

    .navbar .navbar-dropdown.active > .navbar-dropdown-menu,
    .navbar .navbar-dropdown.active > .notification-dropdown,
    .navbar .navbar-dropdown.active > .message-dropdown{

        transform:translateY(0) !important;

    }

    .navbar .language-button ~ .navbar-dropdown-menu{

        width:min(230px, calc(100vw - 16px)) !important;

    }

    .navbar .navbar-dropdown-menu::before,
    .navbar .notification-dropdown::before,
    .navbar .message-dropdown::before{

        left:auto !important;
        right:20px !important;

    }

}
/* AFLAO MOBILE LAYERING FIX */
@media (max-width:992px){

    #sidebar.sidebar.mobile-open,
    #sidebar.sidebar.show{

        z-index:1301 !important;
        pointer-events:auto !important;

    }

    #mobile-overlay.mobile-overlay{

        z-index:1290 !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

    }

    .navbar{

        z-index:1302 !important;

    }

}