/* ==========================================================
   JOEL MARKET SIDEBAR
   Bootstrap 5
========================================================== */

:root{

    --sidebar-width:260px;
    --sidebar-collapse:72px;

    --sidebar-bg:#0f172a;
    --sidebar-hover:#1e293b;
    --sidebar-active:#2563eb;

    --sidebar-text:#f8fafc;
    --sidebar-muted:#94a3b8;

    --sidebar-border:rgba(255,255,255,.08);

    --transition:.3s ease;

}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:var(--sidebar-width);

    height:100vh;

    background:var(--sidebar-bg);

    color:var(--sidebar-text);

    overflow-y:auto;

    overflow-x:hidden;

    transition:var(--transition);

    z-index:1040;

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

}

/* Scroll */

.sidebar::-webkit-scrollbar{

    width:5px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:20px;

}

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

.sidebar-header{

    padding:15px;

    text-align:center;

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

}

.logo{

    width:36px;

    height:36px;

    object-fit:contain;

}

.logo-text{

    margin-top:8px;

    font-size:15px;

    font-weight:600;

    color:#fff;

}

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

.sidebar-user{

    padding:16px 10px;

    text-align:center;

}

.sidebar-user img{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #3b82f6;

}

.user-info h6{

    margin-top:8px;

    margin-bottom:2px;

    font-size:14px;

    color:#fff;

}

.user-info small{

    color:var(--sidebar-muted);

    font-size:12px;

}

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

.sidebar .nav{

    padding:10px;

}

.sidebar .nav-link{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--sidebar-text);

    padding:11px 14px;

    margin-bottom:4px;

    border-radius:12px;

    transition:.25s;

    text-decoration:none;

}

.sidebar .nav-link:hover{

    background:var(--sidebar-hover);

    color:#fff;

    transform:translateX(4px);

}

.sidebar .nav-link.active{

    background:var(--sidebar-active);

    color:#fff;

    font-weight:600;

}

.sidebar .nav-link i:first-child{

    width:20px;

    text-align:center;

    font-size:17px;

}

.menu-text{

    flex:1;

}

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

.sidebar .badge{

    min-width:20px;

    height:20px;

    font-size:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:30px;

}

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

.submenu{

    margin-left:14px;

    padding-left:12px;

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

}

.submenu .nav-link{

    padding:9px 14px;

    font-size:13px;

    color:var(--sidebar-muted);

}

.submenu .nav-link:hover{

    color:#fff;

    padding-left:20px;

}

.submenu-arrow{

    transition:.3s;

}

.submenu-toggle:not(.collapsed) .submenu-arrow{

    transform:rotate(90deg);

}

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

.sidebar hr{

    border-color:var(--sidebar-border);

}

/* ==========================================================
   COLLAPSE
========================================================== */

.sidebar.collapsed{

    width:var(--sidebar-collapse);

}

.sidebar.collapsed .logo-text,

.sidebar.collapsed .menu-text,

.sidebar.collapsed .user-info,

.sidebar.collapsed .submenu,

.sidebar.collapsed .submenu-arrow{

    display:none;

}

.sidebar.collapsed .nav-link{

    justify-content:center;

}

.sidebar.collapsed .badge{

    position:absolute;

    right:6px;

    top:6px;

}

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

.content-wrapper{

    margin-left:var(--sidebar-width);

    transition:var(--transition);

    min-height:100vh;

}

.content-wrapper.expanded{

    margin-left:var(--sidebar-collapse);

}

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

.sidebar-footer{

    padding:12px;

    text-align:center;

    font-size:11px;

    color:var(--sidebar-muted);

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

}

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

.sidebar-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1039;

}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px){

    .sidebar{

        width:250px;

        transform:translateX(-100%);

    }

    .sidebar.show{

        transform:translateX(0);

    }

    .content-wrapper{

        margin-left:0;

    }

    .logo{

        width:32px;

        height:32px;

    }

    .logo-text{

        font-size:14px;

    }

    .sidebar-user img{

        width:46px;

        height:46px;

    }

    .sidebar .nav-link{

        padding:10px 12px;

        font-size:14px;

    }

}

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

@media (max-width:576px){

    .sidebar{

        width:230px;

    }

    .sidebar-header{

        padding:12px;

    }

    .logo{

        width:28px;

        height:28px;

    }

    .logo-text{

        font-size:13px;

    }

    .sidebar-user{

        padding:12px;

    }

    .sidebar-user img{

        width:42px;

        height:42px;

    }

    .user-info h6{

        font-size:13px;

    }

    .user-info small{

        font-size:11px;

    }

    .sidebar .nav-link{

        padding:9px 10px;

        gap:10px;

        font-size:13px;

    }

    .sidebar .nav-link i:first-child{

        font-size:15px;

        width:18px;

    }

    .submenu .nav-link{

        padding:8px 10px 8px 35px;

        font-size:12px;

    }

}