/* =============================================================================
   AFLAO NEXUS ENTERPRISE UI FRAMEWORK
   FILE 3
   SIDEBAR.CSS

   PART 1
   ------------------------------------------------------------
   1. SIDEBAR FOUNDATION
   2. SIDEBAR BRAND
   3. BRAND LOGO
   4. BRAND TEXT
============================================================================= */


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

#sidebar,
.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:var(--sidebar-width);

    height:100vh;

    display:flex;

    flex-direction:column;

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

    color:#FFFFFF;

    overflow:hidden;

    z-index:1090;

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

}


/* =============================================================================
   SIDEBAR SCROLL
============================================================================= */

.sidebar{

    overflow-y:auto;

    scrollbar-width:thin;

}

.sidebar::-webkit-scrollbar{

    width:8px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.18);

    border-radius:999px;

}


/* =============================================================================
   BRAND
============================================================================= */

.sidebar-brand{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    min-height:90px;

    border-bottom:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

}

.sidebar-brand a{

    display:flex;

    align-items:center;

    gap:16px;

    width:100%;

    color:#FFFFFF;

}


/* =============================================================================
   LOGO
============================================================================= */

.sidebar-brand img{

    width:58px;

    height:58px;

    object-fit:contain;

    background:#FFFFFF;

    border-radius:14px;

    padding:8px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    flex-shrink:0;

}


/* =============================================================================
   BRAND TEXT
============================================================================= */

.sidebar-brand span{

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:.02em;

    line-height:1.2;

    color:#FFFFFF;

}


/* =============================================================================
   BRAND HOVER
============================================================================= */

.sidebar-brand a:hover img{

    transform:scale(1.05);

    transition:transform var(--transition);

}

.sidebar-brand a:hover span{

    color:#F8F9FA;

}


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

/* =============================================================================
   FILE 3
   SIDEBAR.CSS

   PART 2
   ------------------------------------------------------------
   5. SIDEBAR NAVIGATION
   6. NAVIGATION LIST
   7. NAVIGATION LINKS
   8. NAVIGATION ICONS
   9. NAVIGATION TEXT
============================================================================= */


/* =============================================================================
   SIDEBAR NAVIGATION
============================================================================= */

.sidebar-nav{

    flex:1;

    padding:20px 16px;

    overflow-y:auto;

}


/* =============================================================================
   NAVIGATION LIST
============================================================================= */

.sidebar-nav ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.sidebar-nav li{

    margin:0;

    padding:0;

}


/* =============================================================================
   NAVIGATION LINKS
============================================================================= */

.sidebar-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:52px;

    padding:0 18px;

    border-radius:14px;

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

    text-decoration:none;

    font-size:.95rem;

    font-weight:500;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);

}

.sidebar-nav a:hover{

    background:rgba(255,255,255,.10);

    color:#FFFFFF;

    transform:translateX(4px);

}


/* =============================================================================
   NAVIGATION ICONS
============================================================================= */

.sidebar-nav a i{

    width:22px;

    text-align:center;

    font-size:1rem;

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

    transition:
        color var(--transition),
        transform var(--transition);

}

.sidebar-nav a:hover i{

    color:#FFFFFF;

    transform:scale(1.10);

}


/* =============================================================================
   NAVIGATION TEXT
============================================================================= */

.sidebar-nav a span{

    flex:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/* =============================================================================
   MENU SECTIONS
============================================================================= */

.sidebar-section{

    margin-top:24px;

    margin-bottom:10px;

    padding:0 18px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

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

}


/* =============================================================================
   LINK CHEVRON
============================================================================= */

.sidebar-nav a .menu-arrow{

    margin-left:auto;

    font-size:.75rem;

    opacity:.65;

    transition:transform var(--transition);

}

.sidebar-nav a:hover .menu-arrow{

    transform:translateX(3px);

}


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

.sidebar-divider{

    height:1px;

    margin:18px 12px;

    background:rgba(255,255,255,.08);

}


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

/* =============================================================================
   FILE 3
   SIDEBAR.CSS

   PART 3
   ------------------------------------------------------------
   10. ACTIVE MENU
   11. ACTIVE INDICATOR
   12. SUBMENU
   13. SUBMENU LINKS
   14. SUBMENU ANIMATION
============================================================================= */


/* =============================================================================
   ACTIVE MENU
============================================================================= */

.sidebar-nav li.active>a,

.sidebar-nav a.active{

    background:#FFFFFF;

    color:var(--primary);

    font-weight:700;

    box-shadow:0 10px 24px rgba(0,0,0,.15);

}

.sidebar-nav li.active>a i,

.sidebar-nav a.active i{

    color:var(--primary);

}


/* =============================================================================
   ACTIVE LEFT BORDER
============================================================================= */

.sidebar-nav li.active>a{

    position:relative;

}

.sidebar-nav li.active>a::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    bottom:8px;

    width:5px;

    border-radius:0 6px 6px 0;

    background:var(--secondary);

}


/* =============================================================================
   ACTIVE HOVER
============================================================================= */

.sidebar-nav li.active>a:hover{

    transform:none;

}


/* =============================================================================
   SUBMENU
============================================================================= */

.sidebar-submenu{

    display:none;

    margin:8px 0 10px 24px;

    padding-left:18px;

    border-left:1px solid rgba(255,255,255,.18);

}

.sidebar-submenu.show{

    display:block;

    animation:submenuFade .25s ease;

}


/* =============================================================================
   SUBMENU LINKS
============================================================================= */

.sidebar-submenu a{

    min-height:42px;

    padding:0 16px;

    border-radius:10px;

    font-size:.88rem;

    font-weight:500;

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

    background:transparent;

}

.sidebar-submenu a:hover{

    background:rgba(255,255,255,.08);

    color:#FFFFFF;

    transform:translateX(3px);

}


/* =============================================================================
   ACTIVE SUBMENU
============================================================================= */

.sidebar-submenu a.active{

    background:rgba(255,255,255,.16);

    color:#FFFFFF;

    font-weight:700;

}


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

.sidebar-submenu a i{

    width:18px;

    font-size:.82rem;

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

}

.sidebar-submenu a.active i{

    color:#FFFFFF;

}


/* =============================================================================
   MENU ARROW
============================================================================= */

.sidebar-nav li.has-submenu>.menu-toggle{

    position:relative;

}

.sidebar-nav li.has-submenu>.menu-toggle .menu-arrow{

    margin-left:auto;

    transition:transform .25s ease;

}

.sidebar-nav li.has-submenu.open>.menu-toggle .menu-arrow{

    transform:rotate(90deg);

}


/* =============================================================================
   SUBMENU ANIMATION
============================================================================= */

@keyframes submenuFade{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =============================================================================
   CURRENT PAGE DOT
============================================================================= */

.sidebar-submenu a.active::after{

    content:"";

    margin-left:auto;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--secondary);

}


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

/* =============================================================================
   FILE 3
   SIDEBAR.CSS

   PART 4
   ------------------------------------------------------------
   15. SIDEBAR FOOTER
   16. SIDEBAR USER
   17. COLLAPSED SIDEBAR
   18. COLLAPSE ANIMATIONS
============================================================================= */


/* =============================================================================
   SIDEBAR FOOTER
============================================================================= */

.sidebar-footer{

    margin-top:auto;

    padding:18px;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(0,0,0,.10);

}


/* =============================================================================
   SIDEBAR USER
============================================================================= */

.sidebar-user{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:14px;

    background:rgba(255,255,255,.06);

    transition:all var(--transition);

}

.sidebar-user:hover{

    background:rgba(255,255,255,.12);

}

.sidebar-user-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:2px solid rgba(255,255,255,.18);

}

.sidebar-user-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.sidebar-user-info{

    flex:1;

    min-width:0;

}

.sidebar-user-name{

    font-size:.90rem;

    font-weight:700;

    color:#FFFFFF;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.sidebar-user-role{

    margin-top:4px;

    font-size:.75rem;

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

}


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

.sidebar-version{

    margin-top:16px;

    text-align:center;

    font-size:.74rem;

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

}


/* =============================================================================
   COLLAPSIBLE SIDEBAR
============================================================================= */

.sidebar.collapsed{

    width:88px;

}

.sidebar.collapsed .sidebar-brand{

    justify-content:center;

}

.sidebar.collapsed .sidebar-brand span{

    display:none;

}

.sidebar.collapsed .sidebar-nav a{

    justify-content:center;

    padding:0;

}

.sidebar.collapsed .sidebar-nav a span{

    display:none;

}

.sidebar.collapsed .sidebar-nav a i{

    margin:0;

    width:auto;

    font-size:1.15rem;

}

.sidebar.collapsed .menu-arrow{

    display:none;

}

.sidebar.collapsed .sidebar-section{

    display:none;

}

.sidebar.collapsed .sidebar-divider{

    margin:16px auto;

    width:60%;

}

.sidebar.collapsed .sidebar-footer{

    padding:12px;

}

.sidebar.collapsed .sidebar-user{

    justify-content:center;

    padding:8px;

}

.sidebar.collapsed .sidebar-user-info{

    display:none;

}

.sidebar.collapsed .sidebar-version{

    display:none;

}


/* =============================================================================
   DASHBOARD WHEN COLLAPSED
============================================================================= */

.sidebar.collapsed ~ .dashboard-wrapper{

    margin-left:88px;

}

.sidebar.collapsed ~ .navbar{

    left:88px;

}


/* =============================================================================
   TRANSITIONS
============================================================================= */

.sidebar,

.dashboard-wrapper,

.navbar{

    transition:

        width var(--transition),

        left var(--transition),

        margin-left var(--transition);

}


/* =============================================================================
   TOOLTIP FOR COLLAPSED MODE
============================================================================= */

.sidebar.collapsed .sidebar-nav li{

    position:relative;

}

.sidebar.collapsed .sidebar-nav li:hover::after{

    content:attr(data-title);

    position:absolute;

    left:100%;

    top:50%;

    transform:translateY(-50%);

    margin-left:12px;

    padding:8px 12px;

    border-radius:10px;

    background:#111827;

    color:#FFFFFF;

    white-space:nowrap;

    font-size:.80rem;

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

    z-index:2000;

}


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

/* =============================================================================
   FILE 3
   SIDEBAR.CSS

   PART 5
   ------------------------------------------------------------
   19. MOBILE SIDEBAR
   20. MOBILE ANIMATION
   21. RESPONSIVE
   22. ACCESSIBILITY
   23. FINAL OVERRIDES
============================================================================= */


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

@media (max-width:992px){

    .sidebar{

        transform:translateX(-100%);

        transition:
            transform var(--transition),
            width var(--transition);

        z-index:1200;

    }

    .sidebar.show{

        transform:translateX(0);

    }

}


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

.sidebar-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:1195;

}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}


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

@media (max-width:992px){

    .sidebar-brand{

        padding:20px;

    }

    .sidebar-nav{

        padding:18px 14px;

    }

    .sidebar-footer{

        padding:16px;

    }

}


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

@media (max-width:768px){

    .sidebar{

        width:280px;

    }

    .sidebar-brand img{

        width:50px;

        height:50px;

    }

    .sidebar-brand span{

        font-size:1.30rem;

    }

    .sidebar-nav a{

        min-height:48px;

        font-size:.90rem;

    }

}


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

@media (max-width:576px){

    .sidebar{

        width:260px;

    }

    .sidebar-brand{

        min-height:80px;

        padding:18px;

    }

    .sidebar-brand img{

        width:46px;

        height:46px;

    }

    .sidebar-user{

        padding:10px;

    }

    .sidebar-user-avatar{

        width:42px;

        height:42px;

    }

}


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

.sidebar a:focus-visible,

.sidebar button:focus-visible{

    outline:3px solid rgba(255,255,255,.45);

    outline-offset:2px;

}


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

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

    .sidebar,

    .sidebar *{

        animation:none !important;

        transition:none !important;

    }

}


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

@media print{

    .sidebar{

        display:none !important;

    }

}


/* =============================================================================
   FINAL COMPATIBILITY
============================================================================= */

.sidebar{

    contain:layout style;

}

.sidebar-nav{

    flex:1;

}

.sidebar-nav ul{

    width:100%;

}

.sidebar-nav li{

    width:100%;

}

.sidebar-nav a{

    width:100%;

}

.sidebar-brand a{

    text-decoration:none;

}

.sidebar img{

    display:block;

    max-width:100%;

}


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

.sidebar *{

    box-sizing:border-box;

}

.sidebar a{

    text-decoration:none;

}

.sidebar button{

    font:inherit;

}

.sidebar ul{

    list-style:none;

}

.sidebar li{

    margin:0;

    padding:0;

}


/* =============================================================================
   END OF FILE 3
   SIDEBAR.CSS

   RESPONSIBILITIES

   ✓ Sidebar
   ✓ Sidebar Brand
   ✓ Sidebar Navigation
   ✓ Active Menu
   ✓ Submenus
   ✓ Collapse
   ✓ Mobile Sidebar
   ✓ Sidebar Footer
   ✓ Responsive Sidebar

   DOES NOT STYLE

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

============================================================================= */
/* Mobile navigation compatibility */
@media (max-width:992px){

    .sidebar.mobile-open{

        transform:translateX(0);

    }

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

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

        width:280px !important;
        transform:translateX(0) !important;
        opacity:1 !important;
        visibility:visible !important;
        display:flex !important;
        overflow-y:auto !important;

    }

    #sidebar.sidebar.mobile-open.collapsed .sidebar-brand span,
    #sidebar.sidebar.show.collapsed .sidebar-brand span,
    #sidebar.sidebar.mobile-open.collapsed .sidebar-nav a span,
    #sidebar.sidebar.show.collapsed .sidebar-nav a span{

        display:block !important;

    }

    #sidebar.sidebar.mobile-open.collapsed .sidebar-nav a,
    #sidebar.sidebar.show.collapsed .sidebar-nav a{

        justify-content:flex-start !important;
        padding:12px 14px !important;

    }

    #sidebar.sidebar.mobile-open.collapsed .sidebar-nav a i,
    #sidebar.sidebar.show.collapsed .sidebar-nav a i{

        width:22px !important;
        margin-right:12px !important;

    }

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

        display:block !important;

    }

    #sidebar.sidebar.mobile-open.collapsed .menu-arrow,
    #sidebar.sidebar.show.collapsed .menu-arrow{

        display:inline-block !important;

    }

}

@media (max-width:576px){

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

        width:260px !important;

    }

}
/* AFLAO MOBILE SIDEBAR TOP OFFSET */
@media (max-width:992px){

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

        top:72px !important;
        bottom:0 !important;
        height:auto !important;
        max-height:none !important;

    }

}