/* =======================================
   GLOBAL DESKTOP STYLE
=======================================*/
body {
    background: #f5f6f8;
}

/* Navbar → Konten */
.main-content {
    padding-top: 60px !important;
    padding-left: 260px !important;   /* sidebar normal */
    padding-right: 10px !important;
}

/* Sidebar collapse */
body.sidebar-mini .main-content,
body.sidebar-gone .main-content {
    padding-left: 75px !important;
}

/* Section base */
.section {
    padding: 10px 15px !important;
}

.section-body {
    margin-top: 0 !important;
    padding-right: 5px !important;
}

/* Card desktop */
.card {
    padding: 5px !important;
    margin: 5px 0 !important;
}

.card-header,
.card-body,
.card-footer {
    padding: 5px 10px !important;
}

/* =======================================
   LOGO + NAVBAR FIX
=======================================*/
.mobile-logo-wrapper,
.mobile-logo-wrapper img {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar .d-block.d-sm-none {
    margin: 0 !important;
    padding: 4px 10px !important;
}

/* Navbar background */
.navbar-bg {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =======================================
    MOBILE FIX (≤ 900px)
=======================================*/
@media (max-width: 900px) {

    /* Hilangkan logo sidebar */
    .sidebar-brand,
    .sidebar-brand-sm {
        display: none !important;
    }

    /* Konten menjadi full width */
    .main-content {
        padding: 0 !important;
        margin: 0 !important;

        margin-top: 70px !important; /* offset navbar */
        min-height: auto !important;
        transform: none !important;
    }

    .section,
    .section-body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Card edge-to-edge */
    .card {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Sembunyikan sidebar (jangan display:none) */
    .main-sidebar {
        transform: translateX(-260px) !important;
    }

    html,
    body {
        overflow-x: hidden !important;
    }
}

/* === FIX UTAMA MOBILE MODE === */
@media (max-width: 576px) {

    /* Hapus margin/padding default dari kolom pembungkus utama */
    .content-wrapper-col {
        padding-left: 5px !important;
        padding-right: 5px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Jarak aman dari navbar */
    .main-content {
        padding-top: 75px !important;
        margin-top: 0 !important;
    }

    /* Pastikan section tidak memberikan margin tambahan */
    .section,
    .section-body {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ================================================
   FINAL MOBILE FIX — MARGIN TOP & LEFT
   ================================================ */
@media (max-width: 575px) {

    /* Fix margin-top konten agar tidak tertutup navbar */
    .main-content {
        padding-top: 40px !important; /* aman dari navbar */
    }

    /* Fix margin-left agar FULL SCREEN */
    body.sidebar-gone .main-content,
    body.sidebar-show .main-content,
    body .main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Pastikan section juga full width */
    .section,
    .section-body {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* === FIX SIDEBAR MOBILE AGAR BISA MUNCUL === */
@media (max-width: 575px) {

    /* Sidebar default: tersembunyi tapi tetap block */
    .main-sidebar {
        display: block !important;   /* wajib untuk bisa muncul */
        transform: translateX(-260px) !important;
    }

    /* Saat tombol hamburger ditekan → Otika menambah class */
    body.sidebar-show .main-sidebar,
    body.sidebar-gone .main-sidebar {
        transform: translateX(0) !important; /* sidebar muncul */
    }
}