/* =========================================================
   THEABS - RESPONSIVE
========================================================= */


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

@media (max-width:1100px){

    .dashboard-stats{

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dashboard-grid{

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(240px, 1fr);

    }


    .navbar{

        padding-left:22px;

        padding-right:22px;

    }


    .page{

        padding:22px;

    }

}


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

@media (max-width:768px){

    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar{

        position:fixed;

        top:0;

        left:0;

        bottom:0;

        width:270px;

        min-width:270px;

        height:100vh;

        z-index:1000;

        transform:
            translateX(-100%);

        transition:
            transform .25s ease;

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

    }


    /*
     * IMPORTANT:
     * Mobile must always use the full drawer.
     * Desktop collapsed state must NOT reduce it.
     */

    .sidebar.collapsed{

        width:270px;

        min-width:270px;

        transform:
            translateX(-100%);

    }


    .sidebar.open{

        transform:
            translateX(0);

    }


    .sidebar.collapsed.open{

        transform:
            translateX(0);

    }


    /* -----------------------------------------------------
       SIDEBAR CONTENT ON MOBILE
    ----------------------------------------------------- */

    .sidebar.collapsed
    .sidebar-logo{

        justify-content:flex-start;

    }


    .sidebar.collapsed
    .sidebar-logo span{

        display:inline;

    }


    .sidebar.collapsed
    .sidebar-header{

        justify-content:space-between;

        padding-left:18px;

        padding-right:18px;

    }


    .sidebar.collapsed
    .sidebar-toggle{

        display:flex;

    }


    .sidebar.collapsed
    .sidebar-nav{

        padding-left:16px;

        padding-right:16px;

    }


    .sidebar.collapsed
    .nav-link{

        justify-content:flex-start;

        gap:14px;

        padding-left:16px;

        padding-right:16px;

    }


    .sidebar.collapsed
    .nav-link span{

        display:inline;

    }


    .sidebar.collapsed
    .sidebar-footer{

        padding-left:18px;

        padding-right:18px;

    }


    .sidebar.collapsed
    .version{

        display:block;

    }


    /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */

    .content{

        width:100%;

        margin-left:0;

        min-width:0;

    }


    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar{

        height:64px;

        min-height:64px;

        padding:
            0 16px;

    }


    .navbar-left{

        min-width:0;

        gap:8px;

    }


    .navbar-title-wrapper{

        min-width:0;

        overflow:hidden;

    }


    #pageTitle{

        max-width:100%;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

        font-size:17px;

    }


    .navbar-breadcrumb{

        display:none;

    }


    .navbar-right{

        gap:8px;

    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .mobile-menu-button{

        display:inline-flex;

        flex-shrink:0;

    }


    /* -----------------------------------------------------
       PAGE
    ----------------------------------------------------- */

    .page{

        padding:18px;

    }


    /* -----------------------------------------------------
       DASHBOARD
    ----------------------------------------------------- */

    .dashboard{

        gap:18px;

    }


    .dashboard-stats{

        grid-template-columns:1fr;

        gap:12px;

    }


    .dashboard-grid{

        grid-template-columns:1fr;

        gap:16px;

    }


    /* -----------------------------------------------------
       PAGE HEADER
    ----------------------------------------------------- */

    .page-header{

        gap:14px;

    }


    .page-header-actions{

        width:100%;

    }


    .page-header-actions .btn{

        width:100%;

        justify-content:center;

    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .card-header{

        padding-left:16px;

        padding-right:16px;

    }


    .activity-list{

        padding-left:16px;

        padding-right:16px;

    }


    .activity-time{

        display:none;

    }


    /* -----------------------------------------------------
       TABLE
    ----------------------------------------------------- */

    .table-container{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

}


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

@media (max-width:480px){

    .page{

        padding:14px;

    }


    .navbar{

        padding:
            0 12px;

    }


    .navbar-right{

        gap:6px;

    }


    .avatar{

        width:38px;

        height:38px;

    }


    .icon-button{

        width:38px;

        height:38px;

    }


    .stat-card{

        padding:16px;

    }


    .stat-card-icon{

        width:44px;

        min-width:44px;

        height:44px;

    }


    .stat-card-content strong{

        font-size:21px;

    }


    .card-header{

        padding-top:16px;

    }


    .activity-item{

        gap:10px;

    }


    .activity-icon{

        width:36px;

        min-width:36px;

        height:36px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width:360px){

    .page{

        padding:12px;

    }


    .navbar{

        padding:
            0 10px;

    }


    #pageTitle{

        font-size:16px;

    }


    .sidebar{

        width:260px;

        min-width:260px;

    }


    .sidebar.collapsed{

        width:260px;

        min-width:260px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .sidebar,
    .modal-overlay,
    .modal,
    .toast,
    .dropdown-menu{

        transition:none !important;

    }

}