/* =========================
   RESET
========================= */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(145,70,255,.15), transparent 35%),
        #0e0e10;

    color: #e5e7eb;
}



/* =========================
   LAYOUT
========================= */

.flex.min-h-screen {
    min-height:100vh;
}



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

.sidebar {

    width:230px;

    background:#151518;

    border-right:1px solid #2b2b31;

    display:flex;

    flex-direction:column;

    flex-shrink:0;

}



.sidebar-header {

    padding:22px;

    border-bottom:1px solid #2b2b31;

}



.sidebar-title {

    font-size:20px;

    font-weight:800;

    color:white;

}



.sidebar-sub {

    margin-top:5px;

    color:#a855f7;

    font-size:12px;

}



.sidebar-nav {

    padding:16px;

    display:flex;

    flex-direction:column;

    gap:8px;

    flex:1;

}



.nav-btn {

    padding:12px 15px;

    border-radius:12px;

    color:#a1a1aa;

    font-weight:600;

    transition:.2s;

}



.nav-btn:hover {

    background:#242429;

    color:white;

}



.nav-btn.active {

    background:

    linear-gradient(
        90deg,
        rgba(168,85,247,.35),
        rgba(168,85,247,.12)
    );

    color:white;

}



.sidebar-footer {

    padding:15px;

    border-top:1px solid #2b2b31;

    color:#71717a;

    text-align:center;

    font-size:12px;

}





/* =========================
   MAIN
========================= */

.main {

    flex:1;

    padding:35px;

}



.main-header {

    margin-bottom:30px;

}



.main-title {

    font-size:32px;

    font-weight:800;

}



.main-sub {

    color:#a1a1aa;

    margin-top:6px;

}





/* =========================
   PANELS
========================= */

.panel-card {


    background:

    linear-gradient(
        145deg,
        #1b1b20,
        #141416
    );


    border:

    1px solid #303038;


    border-radius:20px;


    padding:22px;


    box-shadow:

    0 20px 40px rgba(0,0,0,.35);


}



.panel-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.panel-title {

    font-size:20px;

    font-weight:700;

}



.panel-meta {

    color:#c084fc;

    font-size:13px;

}



/* =========================
   USERS LIST
========================= */

#users li {


    background:#202024 !important;


    border-color:#34343c !important;


    padding:14px 16px !important;


    transition:.2s;


}



#users li:hover {


    border-color:#a855f7 !important;


    transform:translateX(3px);


}



#users span {


    font-weight:600;


}



/* =========================
   SO BUTTON
========================= */


.btn-so {


    background:

    linear-gradient(
        135deg,
        #a855f7,
        #7c3aed
    );


    border:none;


    padding:9px 20px;


    font-weight:700;


    color:white;


}



.btn-so:hover {


    filter:brightness(1.15);


}





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

.scroll-panel {


    max-height:600px;

    overflow-y:auto;


}



.scroll-panel::-webkit-scrollbar {

    width:7px;

}



.scroll-panel::-webkit-scrollbar-thumb {


    background:#7c3aed;

    border-radius:20px;

}





/* =========================
   TOAST
========================= */


.toast {

    background:#18181b;

    border:1px solid #a855f7;

}





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


@media(max-width:800px){



.flex.min-h-screen {


    flex-direction:column;


}



/* sidebar devient header */

.sidebar {


    width:100%;


    height:auto;


}



.sidebar-header {


    padding:15px 18px;


}



.sidebar-title {


    font-size:18px;


}



.sidebar-nav {


    flex-direction:row;


    padding:10px;


    gap:8px;


}



.nav-btn {


    flex:1;


    text-align:center;


    padding:10px 5px;


    font-size:13px;


}



.sidebar-footer {


    display:none;


}





.main {


    padding:15px;


}





.main-title {


    font-size:26px;


}



.main-header {


    margin-bottom:20px;


}





.panel-card {


    padding:15px;


    border-radius:16px;


}





.panel-header {


    flex-direction:column;


    align-items:flex-start;


    gap:8px;


}





#users li {


    padding:12px !important;


}





.btn-so {


    padding:10px 16px;


    min-width:70px;


}




}



/* petit mobile */

@media(max-width:420px){


.nav-btn {


    font-size:11px;


}


.main-title {


    font-size:23px;


}



#users li {


    gap:10px;


}



}