/*
==========================================================
RESPONSIVE STYLES
File: assets/css/responsive.css
==========================================================
*/

/* ======================================================
   LARGE DEVICES (≤1200px)
====================================================== */

@media (max-width:1200px){

    .container,
    .container-fluid{
        padding-left:20px;
        padding-right:20px;
    }

    .page-title{
        font-size:1.75rem;
    }

}

/* ======================================================
   TABLETS (≤992px)
====================================================== */

@media (max-width:992px){

    .main-content{
        padding:15px;
    }

    .card{
        margin-bottom:20px;
    }

    .stat-card,
    .stats-card{
        margin-bottom:20px;
    }

    .table-responsive{
        overflow-x:auto;
    }

    .navbar-brand{
        font-size:1.1rem;
    }

}

/* ======================================================
   MOBILE DEVICES (≤768px)
====================================================== */

@media (max-width:768px){

    body{
        font-size:14px;
    }

    .main-content{
        padding:10px;
    }

    .container,
    .container-fluid{
        padding-left:10px;
        padding-right:10px;
    }

    .page-title{
        font-size:1.35rem;
    }

    h1{
        font-size:1.75rem;
    }

    h2{
        font-size:1.5rem;
    }

    h3{
        font-size:1.3rem;
    }

    h4{
        font-size:1.15rem;
    }

    .card{
        border-radius:10px;
    }

    .card-header,
    .card-body,
    .card-footer{
        padding:15px;
    }

    .btn{
        width:100%;
        margin-bottom:10px;
    }

    .btn-group .btn{
        width:auto;
        margin-bottom:0;
    }

    .table th,
    .table td{
        white-space:nowrap;
        font-size:13px;
    }

    .form-control,
    .form-select{
        min-height:44px;
    }

    .breadcrumb{
        font-size:13px;
    }

    footer{
        text-align:center;
    }

}

/* ======================================================
   SMALL MOBILE (≤576px)
====================================================== */

@media (max-width:576px){

    .page-title{
        font-size:1.2rem;
    }

    .card-header{
        font-size:15px;
    }

    .table{
        font-size:12px;
    }

    .navbar-brand{
        font-size:1rem;
    }

    .modal-dialog{
        margin:10px;
    }

    .login-card{
        margin:15px;
        padding:20px;
    }

    .profile-card img{
        width:80px;
        height:80px;
    }

}

/* ======================================================
   EXTRA SMALL DEVICES (≤400px)
====================================================== */

@media (max-width:400px){

    body{
        font-size:13px;
    }

    .page-title{
        font-size:1.1rem;
    }

    .btn{
        font-size:14px;
    }

    .form-control,
    .form-select{
        font-size:14px;
    }

    .table th,
    .table td{
        padding:8px;
    }

}

/* ======================================================
   LANDSCAPE PHONES
====================================================== */

@media (max-height:500px) and (orientation:landscape){

    .main-content{
        padding:10px;
    }

    .navbar{
        min-height:55px;
    }

}

/* ======================================================
   UTILITIES
====================================================== */

.hide-mobile{
    display:block;
}

.show-mobile{
    display:none;
}

@media (max-width:768px){

    .hide-mobile{
        display:none !important;
    }

    .show-mobile{
        display:block !important;
    }

}