/* ==========================================================
   ADMIN RESPONSIVE
   File : responsive.css
========================================================== */

/* ==========================================================
   LARGE DEVICES
========================================================== */

@media (max-width:1200px){

    .container-fluid{
        padding-inline:18px;
    }

}


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

@media (max-width:991.98px){

    /* Sidebar */

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

    #sidebar.active{
        left:0;
    }

    .page-wrapper{
        margin-left:0;
        width:100%;
    }

    body.custom-bg{
        background-attachment:scroll;
    }

    /* Header */

    .admin-header{
        padding:0 12px;
    }

    .header-left{
        flex:1;
        min-width:0;
    }

    .header-brand span{
        display:none;
    }

    .header-right{
        display:flex;
        align-items:center;
        gap:8px;
        flex-shrink:0;
    }

    .user-info{
        display:none;
    }

    .logout-form{
        flex-shrink:0;
    }

    .logout-form .btn{
        width:40px !important;
        height:40px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .logout-form .btn span{
        display:none;
    }

    /* Page */

    .page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .page-action{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .filter-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media (max-width:768px){

    .content{
        padding:18px;
    }

    .page-header{
        padding:16px;
    }

    .page-title h1,
    .page-title h2{
        font-size:22px;
    }

    .page-title p{
        font-size:13px;
    }

    .page-action{
        flex-direction:column;
        align-items:stretch;
    }

    .page-action .btn{
        width:100%;
    }

    .filter-card{
        padding:16px;
    }

    .filter-grid{
        grid-template-columns:1fr;
    }

    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

}


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

@media (max-width:576px){

    .container-fluid{
        padding-inline:12px;
    }

    .content{
        padding:15px;
    }

    .page-title h1,
    .page-title h2{
        font-size:20px;
    }

    .page-title p{
        font-size:12px;
    }

    .page-action .btn{
        width:100%;
    }

    .admin-header{
        height:56px;
        padding:0 10px;
    }

    .sidebar-toggle{
        width:36px;
        height:36px;
        font-size:18px;
    }

    .header-brand img{
        width:34px;
        height:34px;
    }

    .user-profile img{
        width:34px;
        height:34px;
    }

    .logout-form .btn{
        width:36px !important;
        height:36px;
    }

}


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

@media print{

    #sidebar,
    #overlay,
    .admin-header,
    .page-action,
    .filter-card{
        display:none !important;
    }

    .page-wrapper{
        margin:0 !important;
        width:100% !important;
    }

    .content{
        padding:0 !important;
    }

}