/* =========================
   MOBILE (<= 576px)
========================= */
@media (max-width: 576px) {
    .app-navbar{
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .app-logo{
        height: 100px;
        width: auto;
    }

    .app-title{
        display: none;
    }

    .user-name{
        font-size: 0.85rem;
        padding: 0.2rem 0.45rem;
    }

    .app-container{
        padding: 0.75rem !important;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row.justify-content-center > [class*="col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card .card-body{
        padding: 14px !important;
    }
    .card .card-header{
        padding: 12px 14px !important;
    }

    .form-control, .form-select{
        font-size: 16px !important;
    }

    .btn, button{
        padding: 0.55rem 0.85rem;
    }

    .btn-group, .ul-actions, .er-actions{
        flex-wrap: wrap;
    }
}

/* =========================
   TABLETS (577px - 991px)
========================= */
@media (min-width: 577px) and (max-width: 991px) {

    .app-container{
        padding: 1rem 1.25rem;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
        padding-left: 16px;
        padding-right: 16px;
    }

    .app-logo{
        height: 38px;
    }

    .app-title{
        font-size: 1.05rem;
    }
}

/* =========================
   TABLES (global)
========================= */
.table-responsive{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px){
    table th, table td{
        white-space: nowrap;
    }
}