/* ==========================================================
   ADMIN SIDEBAR MENU
   File : assets/css/admin/menu.css
   Bootstrap 5 Compatible
========================================================== */


/* ==========================================================
   MENU TITLE
========================================================== */

.menu-title{

    display:flex;

    align-items:center;

    min-height:44px;

    padding:14px 18px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#94a3b8;

    background:#222d32;

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

}


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

.menu{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin:0;

    padding:12px;

    list-style:none;

    background:#222d32;

}


/* ==========================================================
   MENU ITEM
========================================================== */

.menu-item{

    position:relative;

}


/* ==========================================================
   MENU LINK
========================================================== */

.menu-item>.link{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:44px;

    padding:10px 14px;

    border-radius:10px;

    color:#afc7d1;

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    transition:
        background-color .25s ease,
        color .25s ease,
        padding-left .25s ease;

}


.menu-item>.link:hover{

    background:#1e293b;

    color:#ffffff;

    padding-left:18px;

}


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

.menu-item>.link i{

    width:20px;

    text-align:center;

    font-size:16px;

    flex-shrink:0;

}


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

.menu-item>.link span{

    flex:1;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


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

.menu-item.active>.link,
.menu-item.active-parent>.link{

    background:#748a93;

    color:#eff5f7;

    font-weight:600;

    box-shadow:0 4px 12px rgba(37,99,235,.25);

}


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

.arrow{

    margin-left:auto;

    font-size:11px;

    transition:transform .25s ease;

}


.menu-item.open>.link>.arrow{

    transform:rotate(90deg);

}


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

.menu-badge{

    margin-left:auto;

    padding:2px 8px;

    border-radius:20px;

    background:#ef4444;

    color:#fff;

    font-size:11px;

    font-weight:600;

}


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

.submenu{

    display:none;

    margin-top:6px;

    margin-left:18px;

    padding-left:12px;

    border-left:2px solid rgba(255,255,255,.08);

    list-style:none;

}


.menu-item.open>.submenu{

    display:block;

}


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

.submenu .menu-item>.link{

    min-height:38px;

    padding:8px 12px;

    font-size:13px;

    border-radius:8px;

}


.submenu .menu-item>.link:hover{

    background:#1f2937;

}


.submenu .menu-item.active>.link{

    background:#1d4ed8;

    color:#ffffff;

}


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

.menu-divider{

    height:1px;

    margin:8px 0;

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

}


/* ==========================================================
   FOCUS
========================================================== */

.menu-item>.link:focus-visible{

    outline:2px solid #60a5fa;

    outline-offset:2px;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.menu::-webkit-scrollbar{

    width:3px;

}


.menu::-webkit-scrollbar-thumb{

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

    border-radius:20px;

}