/* =========================================================
MOBILE SIDEBAR FIX - ANDROID / MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .sidebar-area {
        /* Ukuran sidebar mengikuti layar */
        width: min(320px, 100vw);
        max-width: 100vw;

        /* Gunakan dynamic viewport height */
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;

        /* Jangan center karena menu bisa lebih tinggi dari layar */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        /* Scroll vertikal */
        overflow-y: auto;
        overflow-x: hidden;

        /* Padding aman untuk Android */
        padding: 40px 30px 60px 30px;

        /* Pastikan box tidak keluar layar */
        box-sizing: border-box;

        /* Android / Chrome scrolling */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;

        /* Hindari masalah transform */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Logo */
    .side-menu-logo {
        width: 100%;
        max-width: 150px;
        margin-bottom: 40px;
        flex-shrink: 0;
    }

    .side-menu-logo img {
        max-width: 100%;
        height: auto;
    }

    /* Menu wrapper */
    .side-menu-wrap {
        width: 100%;
        margin-bottom: 40px;
        flex-shrink: 0;
    }

    /* Header menu */
    .side-menu-header {
        width: 100%;
    }

    /* List menu */
    .side-menu-list {
        width: 100%;
        margin: 20px 0 30px 0;
    }

    .side-menu-list li {
        width: 100%;
    }

    .side-menu-list li a {
        display: block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    /* Menu dengan submenu */
    .side-menu-list li ul {
        max-width: 100%;
    }

    /* Tombol close */
    .sidebar-trigger.close {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;

        width: 40px;
        height: 40px;

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


/* =========================================================
ANDROID SMALL SCREEN
========================================================= */

@media only screen and (max-width: 480px) {

    .sidebar-area {
        width: 100vw;
        max-width: 100vw;

        height: 100dvh;
        max-height: 100dvh;

        padding: 30px 25px 50px 25px;

        overflow-y: auto;
        overflow-x: hidden;

        justify-content: flex-start;
        align-items: flex-start;
    }

    .side-menu-logo {
        max-width: 140px;
        margin-bottom: 35px;
    }

    .side-menu-wrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .side-menu-list {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .side-menu-list li:not(:last-of-type) {
        margin-bottom: 15px;
    }
}


/* =========================================================
VERY SMALL ANDROID DEVICES
========================================================= */

@media only screen and (max-width: 360px) {

    .sidebar-area {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    .side-menu-logo {
        max-width: 125px;
    }

    .side-menu-list li a {
        font-size: 14px;
    }
}