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

.container{

    width:100%;

    max-width:1400px;

    margin:auto;
}



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

@media(max-width:992px){

    .dashboard-cards{

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



    .chart-grid{

        grid-template-columns:1fr;
    }



    .table-responsive{

        overflow-x:auto;
    }



    .sidebar{

        width:80px;
    }



    .sidebar .menu-text{

        display:none;
    }
}





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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.45);

    z-index:998;

    opacity:0;

    visibility:hidden;

    transition:0.3s;
}



.mobile-overlay.active{

    opacity:1;

    visibility:visible;
}





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

@media(max-width:768px){



/* =========================
BODY
========================= */

    body{

        overflow-x:hidden;
    }



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

    .dashboard-wrapper{

        display:block !important;
    }



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

    .sidebar{

        position:fixed !important;

        top:0;

        left:-260px;

        width:250px !important;

        height:100vh !important;

        z-index:1000;

        transition:0.3s ease;

        overflow-y:auto;
    }



    .sidebar.active{

        left:0;
    }



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

    .main-content{

        width:100% !important;

        margin-left:0 !important;

        padding:75px 14px 20px !important;

        overflow-x:hidden;
    }



/* =========================
TOPBAR
========================= */

    .topbar{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:10px;

        margin-top:0 !important;

        flex-wrap:wrap;
    }



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

    .mobile-toggle{

        display:flex !important;

        align-items:center;

        justify-content:center;

        position:fixed;

        top:14px;

        left:14px;

        z-index:1001;

        width:44px;

        height:44px;

        border:none;

        border-radius:12px;

        background:#2563eb;

        color:white;

        font-size:18px;

        box-shadow:
        0 4px 10px rgba(0,0,0,0.2);
    }



/* =========================
CARDS
========================= */

    .dashboard-cards,

    .chart-grid,

    .table-grid,

    .quick-grid{

        grid-template-columns:1fr !important;

        gap:14px;
    }



    .card{

        width:100%;

        min-width:0;

        padding:18px;
    }



/* =========================
TABLES
========================= */

    .table-box,

    .table-responsive{

        overflow-x:auto;

        width:100%;
    }



    table{

        min-width:650px;
    }



/* =========================
FORMS
========================= */

    .register-box,
    .login-box,
    .dashboard-grid,
    .form-grid{

        grid-template-columns:1fr !important;
    }



    .left-side{

        display:none;
    }



    .right-side{

        padding:24px;
    }



/* =========================
PROFILE
========================= */

    .profile-box{

        width:100%;
    }



/* =========================
SEARCH
========================= */

    .search-box{

        width:100%;
    }



/* =========================
BUTTONS
========================= */

    .btn{

        width:100%;
    }



/* =========================
CHARTS
========================= */

    .chart-card canvas{

        height:300px !important;
    }



/* =========================
SECTION TITLES
========================= */

    .section-title{

        font-size:28px !important;
    }



/* =========================
TOPBAR USER
========================= */

    .topbar-user{

        width:100%;

        justify-content:flex-end;
    }



/* =========================
SIDEBAR MENU TEXT
========================= */

    .sidebar .menu-text{

        display:inline-block;
    }



/* =========================
HIDE OVERFLOW
========================= */

    .main-content *{

        max-width:100%;
    }

}





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

@media(max-width:480px){



/* =========================
CARDS
========================= */

    .card{

        padding:16px;
    }



/* =========================
HEADINGS
========================= */

    .card h1{

        font-size:24px;
    }



    .section-title{

        font-size:24px !important;
    }



/* =========================
BUTTONS
========================= */

    .btn{

        font-size:15px;

        padding:14px;
    }



/* =========================
LOGO
========================= */

    .logo{

        font-size:28px;
    }



/* =========================
SPECIAL TEXT
========================= */

    .gold-price{

        font-size:30px;
    }



/* =========================
TABLES
========================= */

    table{

        min-width:600px;
    }



/* =========================
CHARTS
========================= */

    .chart-card canvas{

        height:260px !important;
    }

}