/* PAMDES ENTERPRISE - TAHAP A SIDEBAR RESPONSIVE v4
   Berdasarkan navbar.php aktif:
   #sidebarToggle.sidebar-toggle
   #appSidebar.sidebar
   #sidebarClose
   #sidebarOverlay
   JS membuka sidebar dengan .mobile-open
   JS menambahkan body class .sidebar-open

   Desktop TIDAK mengubah layout Bootstrap col-md-2.
*/

/* DESKTOP DEFAULT */
.sidebar-toggle {
    display: none !important;
}

#appSidebar .sidebar-close {
    display: none;
}

#sidebarOverlay {
    display: none;
}

/* MOBILE / TABLET */
@media (max-width: 767.98px) {

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

    /* Hamburger hanya mobile */
    .sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 38px;
        padding: 0;
        flex: 0 0 auto;

        border: 1px solid rgba(0,0,0,.25);
        border-radius: 6px;

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

        cursor: pointer;
    }

    .sidebar-toggle i {
        font-size: 20px;
        line-height: 1;
    }

    /* Sidebar drawer */
    #appSidebar.sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;

        width: 280px !important;
        max-width: 280px !important;
        min-width: 280px !important;

        height: 100vh;
        height: 100dvh;

        margin: 0 !important;
        padding: 14px 14px 24px !important;

        background: #fff;
        border-right: 1px solid #e5e7eb !important;

        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        z-index: 1200;
        box-sizing: border-box;

        transform: translateX(-105%);
        visibility: hidden;

        transition:
            transform .25s ease,
            visibility .25s ease;

        box-shadow: 8px 0 24px rgba(0,0,0,.16);
    }

    /* Sesuai JavaScript navbar.php */
    #appSidebar.sidebar.mobile-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* Tombol close */
    #appSidebar .sidebar-close {
        display: flex;

        position: sticky;
        top: 0;

        margin-left: auto;
        margin-bottom: 8px;

        width: 38px;
        height: 38px;

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

        border: 1px solid #d1d5db;
        border-radius: 8px;

        background: #fff;
        color: #111827;

        font-size: 18px;
        cursor: pointer;
        z-index: 10;
    }

    #appSidebar .sidebar-close:hover,
    #appSidebar .sidebar-close:focus {
        background: #f1f5f9;
        color: #111827;
    }

    /* Menu sidebar */
    #appSidebar .sidebar-title {
        line-height: 1.3;
    }

    #appSidebar .nav,
    #appSidebar .nav-item {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #appSidebar .nav-link {
        width: 100%;
        min-height: 42px;

        display: flex;
        align-items: center;

        padding: 9px 10px;

        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    #appSidebar .nav-link i {
        flex: 0 0 22px;
        width: 22px;
        margin-right: 7px;
        text-align: center;
    }

    /* Overlay */
    #sidebarOverlay {
        display: block;

        position: fixed;
        inset: 0;

        width: 100vw;
        height: 100vh;
        height: 100dvh;

        background: rgba(15,23,42,.48);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        z-index: 1190;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    body.sidebar-open #sidebarOverlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* Content mobile */
    main,
    .main-content,
    .content,
    .content-wrapper,
    .app-content {
        min-width: 0;
        max-width: 100%;
    }
}

/* HP <= 420px */
@media (max-width: 420px) {

    #appSidebar.sidebar {
        width: 82vw !important;
        max-width: 280px !important;
        min-width: 0 !important;
    }

    .sidebar-toggle {
        width: 42px;
        height: 38px;
    }

    #appSidebar .sidebar-close {
        width: 36px;
        height: 36px;
    }

    #appSidebar .nav-link {
        min-height: 40px;
        padding: 8px 10px;
        font-size: .95rem;
    }
}

/* HP <= 340px */
@media (max-width: 340px) {

    #appSidebar.sidebar {
        width: 260px !important;
        max-width: 260px !important;
    }
}
/* ======================================================
   NAMA APLIKASI DI NAVBAR - MOBILE
   ====================================================== */

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 14px !important;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 210px;
    }
}

/* HP kecil */
@media (max-width: 420px) {
    .navbar-brand {
        font-size: 13px !important;
        max-width: 190px;
    }
}

/* HP sangat kecil */
@media (max-width: 340px) {
    .navbar-brand {
        font-size: 12px !important;
        max-width: 165px;
    }
}