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


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

body.custom-bg{

    background:
        linear-gradient(
            rgba(255,255,255,.72),
            rgba(255,255,255,.72)
        ),
        url("../images/bg.png")
        center center / cover
        no-repeat
        fixed;

}


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

#sidebar{

    position:fixed;

    top:var(--header-height);

    left:0;

    width:var(--sidebar-width);

    height:calc(100vh - var(--header-height));

    display:flex;

    flex-direction:column;

    background:var(--white);

    border-right:1px solid var(--border);

    overflow-x:hidden;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:#cbd5e1 transparent;

    transition:left .30s ease;

    z-index:1030;

}

#sidebar::-webkit-scrollbar{

    width:6px;

}

#sidebar::-webkit-scrollbar-track{

    background:transparent;

}

#sidebar::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

#sidebar::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


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

#overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(2px);

    -webkit-backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .30s ease,
        visibility .30s ease;

    z-index:1025;

}

#overlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* ================= PAGE WRAPPER ================= */

.page-wrapper{

    display:flex;

    flex-direction:column;

    min-height:calc(100vh - var(--header-height));

    margin-top:var(--header-height);

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

    transition:margin-left .30s ease;

}


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

.content{

    flex:1;

    width:100%;

    padding:24px;

}


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

.content-container{

    width:100%;

    max-width:1600px;

    margin:0 auto;

}


/* ================= DESKTOP ================= */

@media (min-width:992px){

    #overlay{

        display:none !important;

    }

}


/* ================= TABLET & MOBILE ================= */

@media (max-width:991.98px){

    #sidebar{

        left:calc(-1 * var(--sidebar-width));

    }

    #sidebar.active{

        left:0;

    }

    .page-wrapper{

        margin-left:0;

    }

    body.custom-bg{

        background-attachment:scroll;

    }

}


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

@media (max-width:768px){

    .content{

        padding:18px;

    }

}


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

@media (max-width:576px){

    .content{

        padding:15px;

    }

}


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

@media print{

    body{

        background:#fff !important;

    }

    #sidebar,
    #overlay{

        display:none !important;

    }

    .page-wrapper{

        margin:0 !important;

        min-height:auto;

    }

    .content{

        padding:0 !important;

    }

}