/*
|--------------------------------------------------------------------------
| LARGE DEVICES
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .profile-info{
        display:none;
    }

    .topbar-search{
        max-width:360px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET + MOBILE DRAWER
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    .app-main{
        width:100% !important;
        margin-left:0 !important;
    }

    body.sidebar-collapsed .app-main{
        margin-left:0 !important;
    }

    .crm-sidebar{
        position:fixed;
        top:0;
        left:0;
        width:85%;
        max-width:320px;
        height:100vh;
        z-index:2000;

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

    .crm-sidebar.mobile-open{
        transform:translateX(0);
    }

    .sidebar-overlay{
        z-index:1900;
        background:rgba(2,6,23,.20);
        backdrop-filter:blur(2px);
    }

    .quick-create-btn{
        display:none;
    }

    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .create-btn span,
    body.sidebar-collapsed .sidebar-menu span{
        display:block;
    }

    body.sidebar-collapsed .sidebar-menu a{
        justify-content:flex-start;
        padding:14px 16px;
    }

    body.sidebar-collapsed .brand-wrap{
        justify-content:flex-start;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .topbar{
        height:72px;
        padding:12px;
        gap:10px;
    }

    .topbar-left{
        gap:10px;
    }

    .topbar-search{
        display:flex;
        height:44px;
        max-width:none;
        flex:1;
        border-radius:14px;
        padding:0 12px;
    }

    .topbar-search input{
        font-size:13px;
    }

    .topbar-right{
        gap:6px;
    }

    .icon-btn{
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .profile-btn{
        padding:4px 6px;
        gap:6px;
    }

    .profile-info{
        display:none;
    }

    .avatar-circle{
        width:34px;
        height:34px;
        font-size:12px;
    }

.page-content{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    padding:14px !important;
    overflow-x:hidden;
    box-sizing:border-box;
}

.page-container{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

    .container,
    .container-fluid{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .row{
        --bs-gutter-x:14px;
        --bs-gutter-y:14px;
            width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
    }
    [class*="col-"]{
    width:100%;
    padding-left:0;
    padding-right:0;
}

    .card,
    .dashboard-card,
    .glass-card{
        width:100%;
        border-radius:18px;
    }

    .dashboard-card{
        padding:16px !important;
    }

    .card-title{
        font-size:13px !important;
    }

    .card-value{
        font-size:28px !important;
    }

    h3{
        font-size:24px !important;
        line-height:1.25;
    }

    .btn{
        min-height:44px;
        font-size:14px;
    }

    .crm-footer{
        padding:14px 0 0 !important;
    }

    .footer-inner{
        width:100%;
        padding:14px;
        border-radius:18px;
        font-size:12px;
        flex-direction:column;
        gap:8px;
        text-align:center;
    }
}

/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:480px){

    .topbar-search input::placeholder{
        font-size:12px;
    }

    h3{
        font-size:21px !important;
    }

    .card-value{
        font-size:24px !important;
    }
}