/*
==========================================================
PAMDES ENTERPRISE
TAHAP A - MOBILE LAYOUT REVISION v5
==========================================================

Tujuan:
- Memperbaiki tampilan HP/Android.
- TIDAK mengubah tampilan desktop.
- Navbar mobile tidak bertabrakan.
- Tombol hamburger berada di kanan.
- Nama user tidak menabrak content.
- Header Dashboard tersusun vertikal.
- Tanggal Dashboard tidak masuk ke teks deskripsi.
- Card statistik memenuhi lebar layar secara rapi.
- Tabel tetap dapat discroll horizontal.

Breakpoint:
<= 767.98px = mobile/tablet kecil.

Desktop >= 768px tidak diberi aturan layout baru.
==========================================================
*/


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

@media (max-width: 767.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

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

    nav.navbar {
        width: 100%;
        min-height: 58px;
        padding: 8px 10px !important;
    }

    nav.navbar > .container-fluid {
        width: 100%;
        min-width: 0;
        padding-left: 4px !important;
        padding-right: 4px !important;

        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Logo kiri */
    nav.navbar .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 105px);

        margin-right: 0 !important;

        display: flex;
        align-items: center;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        font-size: 1rem;
        line-height: 1.2;
    }

    nav.navbar .navbar-brand i {
        flex: 0 0 auto;
        margin-right: 7px !important;
    }

    /* Area kanan */
    nav.navbar .navbar-mobile-actions {
        margin-left: auto !important;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 3px;

        min-width: 0;
        flex: 0 0 auto;
    }

    /* Hamburger */
    nav.navbar .sidebar-toggle {
        display: inline-flex !important;

        width: 40px;
        height: 38px;

        padding: 0;
        margin: 0;

        align-items: center;
        justify-content: center;

        flex: 0 0 40px;

        border: 1px solid rgba(255,255,255,.45);
        border-radius: 7px;

        background: rgba(255,255,255,.12);
        color: #fff;

        box-shadow: none;
    }

    nav.navbar .sidebar-toggle i {
        font-size: 21px;
        line-height: 1;
    }

    /* User dropdown */
    nav.navbar .navbar-mobile-actions > .dropdown {
        min-width: 0;
        flex: 0 0 auto;
    }

    nav.navbar #navbarDropdown {
        min-width: 38px;
        height: 38px;

        padding: 0 7px !important;
        margin: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        white-space: nowrap;
        color: #fff !important;
    }

    /* Di HP cukup icon user, teks nama disembunyikan */
    nav.navbar .navbar-user-label {
        display: none;
    }

    nav.navbar #navbarDropdown .bi-person-circle {
        margin-right: 0 !important;
        font-size: 19px;
    }

    /* Hilangkan panah dropdown yang terlalu mengambil tempat */
    nav.navbar #navbarDropdown::after {
        margin-left: 3px;
    }

    /* Dropdown tetap berada di kanan */
    nav.navbar .dropdown-menu {
        max-width: calc(100vw - 20px);
    }


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

    .container-fluid.py-3 {
        width: 100%;
        max-width: 100%;

        padding: 18px 14px 30px !important;

        box-sizing: border-box;
    }


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

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 7px;

        width: 100%;

        margin-bottom: 20px !important;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 h3 {
        margin-bottom: 4px !important;

        font-size: 1.55rem;
        line-height: 1.25;

        white-space: normal;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 h3 i {
        margin-right: 7px !important;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 p {
        width: 100%;

        margin: 0 !important;

        font-size: .95rem;
        line-height: 1.45;

        white-space: normal;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 > div:last-child {
        width: 100%;

        display: flex;
        align-items: center;

        font-size: .88rem;

        white-space: nowrap;
    }


    /* ----------------------------------------------------
       STATISTIK UTAMA
       ---------------------------------------------------- */

    .container-fluid.py-3 > .row.g-3 {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container-fluid.py-3 > .row.g-3 > [class*="col-"] {
        width: 100%;
        max-width: 100%;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin-bottom: 0;
    }

    .container-fluid.py-3 .card {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        overflow: hidden;
    }

    /* Card statistik */
    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body {
        padding: 16px !important;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body > .d-flex {
        align-items: center;
        min-width: 0;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body > .d-flex > div:first-child {
        min-width: 0;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body .text-muted.small {
        font-size: .88rem;
        line-height: 1.3;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body h3 {
        font-size: 1.65rem;
        line-height: 1.2;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body .fs-1 {
        font-size: 2.25rem !important;
        flex: 0 0 auto;
        margin-left: 10px;
    }

    /* Keterangan Lunas / Belum */
    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body .mt-2.small {
        line-height: 1.5;
        white-space: normal;
    }


    /* ----------------------------------------------------
       KAS MASUK / KAS KELUAR / ARUS KAS
       ---------------------------------------------------- */

    .container-fluid.py-3 > .row.g-3.mb-4:nth-of-type(2) > [class*="col-"],
    .container-fluid.py-3 > .row.g-3.mb-4:nth-of-type(3) > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }


    /* ----------------------------------------------------
       STATUS TAGIHAN
       ---------------------------------------------------- */

    .container-fluid.py-3 .progress {
        width: 100%;
        overflow: hidden;
    }

    .container-fluid.py-3 .progress-bar {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }


    /* ----------------------------------------------------
       TRANSAKSI TERBARU
       ---------------------------------------------------- */

    .container-fluid.py-3 .table-responsive {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container-fluid.py-3 table {
        min-width: 760px;
    }


    /* ----------------------------------------------------
       BUTTON
       ---------------------------------------------------- */

    .container-fluid.py-3 .btn {
        max-width: 100%;
    }


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

    #appSidebar.sidebar {
        max-width: 280px !important;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}


/* ========================================================
   HP SANGAT KECIL
   ======================================================== */

@media (max-width: 420px) {

    nav.navbar {
        min-height: 56px;
    }

    nav.navbar .navbar-brand {
        max-width: calc(100% - 92px);
        font-size: .94rem;
    }

    nav.navbar .sidebar-toggle {
        width: 38px;
        height: 36px;
        flex-basis: 38px;
    }

    nav.navbar #navbarDropdown {
        min-width: 34px;
        height: 36px;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    nav.navbar #navbarDropdown::after {
        display: none;
    }

    .container-fluid.py-3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 h3 {
        font-size: 1.42rem;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 p {
        font-size: .9rem;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body {
        padding: 15px !important;
    }
}


/* ========================================================
   320px / HP KECIL
   ======================================================== */

@media (max-width: 340px) {

    nav.navbar .navbar-brand {
        max-width: calc(100% - 84px);
    }

    .container-fluid.py-3 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 {
        gap: 5px;
    }

    .container-fluid.py-3 > .d-flex.justify-content-between.align-items-center.mb-4 h3 {
        font-size: 1.32rem;
    }

    .container-fluid.py-3 > .row.g-3.mb-4:first-of-type .card-body h3 {
        font-size: 1.55rem;
    }
}