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

.navbar-vertical{
    padding-top: 20px;
    width:270px;

    position:fixed;
    z-index:1;

    top:16px;
    left:16px;
    bottom:16px;

    height:auto;

    border:none;

    border-radius:0px 10px 10px 0px;

    background:#ffffff;

    overflow-y:auto;

    overflow-x:hidden;

    scrollbar-width:none;

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);

    transition:.35s ease;

}

/* ===========================
   GRADIENT BACKGROUND
=========================== */

.navbar-vertical::after{

    content:"";

    position:absolute;

    inset:auto -70px -140px -70px;

    height:320px;

    border-radius:50%;

    /* background:radial-gradient(

        circle,

        rgba(76,201,240,.18),

        rgba(123,97,255,.20),

        transparent 72%

    ); */

    pointer-events:none;

    z-index:0;

}

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

.brand-box{

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:24px 20px;

    gap:10px;

}

.brand-logo{

    width:100px;

    height:60px;

    object-fit:contain;

    transition:.3s;

}

.brand-logo:hover{

     transform:scale(1.04);

    filter:drop-shadow(
        0 10px 20px
        rgba(123,97,255,.25)
    );

}

.brand-title{

    font-size:1.45rem;

    font-weight:800;

    color:#2563eb;

    line-height:1;

}

.brand-subtitle{

    margin-top:4px;

    font-size:.76rem;

    color:#64748b;

}

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

.navbar-nav{

    margin-top:20px;

}

.nav-item{

    margin-bottom:6px;

}

.nav-link{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    border-radius:16px;

    font-weight:600;

    color:#475569 !important;

    transition:all .25s ease;

}

/* ICON */

.nav-link i{

    font-size:21px;

    transition:.25s;

}

/* HOVER */

.nav-link:hover{

    background:#EEF2FF;

    color:#6D5DF6 !important;

    transform:
        translateX(6px);

}

.nav-link:hover i{

    color:#6D5DF6;

}

/* ACTIVE */

.nav-link.active{

    background:

    linear-gradient(

        135deg,

        #4CC9F0,

        #7B61FF

    );

    color:#fff !important;

    box-shadow:

        0 12px 28px rgba(123,97,255,.28);

}

.nav-link.active i{

    color:#fff;

}

/* ACTIVE INDICATOR */

.nav-link.active::before{

    content:"";

    position:absolute;

    left:-16px;

    top:9px;

    bottom:9px;

    width:5px;

    border-radius:50px;

    background:

    linear-gradient(

        #4CC9F0,

        #7B61FF

    );

}

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

.sidebar-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:

        26px
        0
        14px;

    color:#94A3B8;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.sidebar-title::before,

.sidebar-title::after{

    content:"";

    flex:1;

    height:1px;

    background:#E2E8F0;

}

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

.logout-link{

    color:#64748B !important;

}

.logout-link:hover{

    background:#FEE2E2;

    color:#DC2626 !important;

}

.logout-link:hover i{

    color:#DC2626;

}

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

.sidebar-version{

    margin-top:18px;

    text-align:center;

    color:#94A3B8;

    font-size:.72rem;

}

.navbar-collapse{

    overflow:visible;

}

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

/* Overlay */

.sidebar-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .25s,
        visibility .25s;

    z-index:1048;

}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}

/* Hamburger */

.sidebar-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

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

    backdrop-filter:blur(10px);

    cursor:pointer;

    color:#334155;

    box-shadow:

        0 10px 25px rgba(15,23,42,.08);

    transition:.25s;

}

.sidebar-toggle:hover{

    background:#EEF2FF;

    transform:translateY(-2px);

}

.sidebar-toggle i{

    font-size:24px;

}


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

@media (max-width:991px){

    .sidebar-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .navbar-vertical{

        left:0;

        top:0;

        bottom:0;

        width:280px;

        border-radius:0 24px 24px 0;

        transform:translateX(-100%);

        will-change:transform;

        transition:.35s ease;

        z-index:1049;

        overflow-y:auto;

        overflow-x:hidden;

        scrollbar-width:none;

    }

    .navbar-vertical::-webkit-scrollbar{

    display:none;

}

    .navbar-vertical.show{

        transform:translateX(0);

    }

    .page-wrapper{

        margin-left:0 !important;

        padding:12px !important;

    }

}

/* =========================
   MOBILE
========================= */
@media (max-width: 991px){

    /* Sidebar */
    .navbar-vertical{

        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: 260px;
        height: 100dvh;

        margin: 0;
        padding: 20px 16px;

        border-radius: 0 24px 24px 0;

        background: #fff;

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateX(-100%);
        transition: transform .35s ease;

        z-index: 1049;
    }

    .navbar-vertical.show{

        transform: translateX(0);

    }

    /* Brand */

    .navbar-brand{

        width: 100%;
        padding: 0 !important;
        margin: 0 0 24px 0;

    }

    .brand-box{

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 8px;

        padding: 0;
        margin: 0;

    }

    .brand-logo{

        width: 95px;
        height: auto;

    }

    .brand-subtitle{

        font-size: .72rem;
        text-align: center;
        color: #64748b;

    }

    /* Menu */

    .navbar-collapse{

        display: block !important;
        flex: 1;

        overflow-y: auto;
        overflow-x: hidden;

    }

    .navbar-nav{

        margin-top: 0;
        padding: 0;

    }

    .nav-item{

        margin-bottom: 6px;

    }

    .nav-link{

        display: flex;
        align-items: center;

        gap: 14px;

        padding: 12px 16px;

        border-radius: 14px;

        font-size: .92rem;

        transform: none !important;

    }

    .nav-link i{

        width: 22px;
        min-width: 22px;

        font-size: 20px;
        text-align: center;

        margin: 0 !important;

    }

    .nav-link:hover{

        transform: none;

    }

    .sidebar-title{

        margin: 22px 0 12px;
        padding: 0;

    }

    .sidebar-version{

        margin-top: 24px;
        padding-bottom: 10px;

    }

}