@media(max-width:1200px) {

    .cards {

        grid-template-columns: repeat(2, 1fr);

    }

    .dashboard-filter {

        grid-template-columns: repeat(2, 1fr);

    }

    .analytics-grid {

        grid-template-columns: 1fr;

    }

    .ranking {

        grid-template-columns: 1fr;

    }

}

@media(max-width:768px) {

    body {

        flex-direction: column;

    }

    /* Posisi/animasi off-canvas sidebar mobile sudah lengkap di sidebar.css
       (position:fixed + transform translateX, bukan left) — blok .sidebar/
       .sidebar.open yang dulu ada di sini dobel-atur "left" dan bentrok
       dengan transition transform milik sidebar.css (sidebar jadi nutup
       instan tanpa animasi slide-out). Dihapus, bukan diduplikasi. */

    #menu-toggle {

        display: flex;

    }

    .main {

        padding: 20px;

    }

    .navbar {

        padding: 16px 20px 30px;

        margin: 0 -20px 20px -20px;

    }

    .dashboard-filter {

        grid-template-columns: 1fr;

    }

    .cards {

        grid-template-columns: 1fr;

    }
}

@media(min-width:769px) {

    /* 2026-07-22: dihapus di desktop — sudah ada tombol ciutkan/lebarkan
       sendiri nempel di tepi sidebar (.sb-collapse-fab, includes/sidebar.php
       + assets/css/sidebar.css), jadi hamburger ini di navbar jadi dobel.
       TETAP flex di breakpoint mobile (@media max-width:768px di atas) —
       di sana .sb-collapse-fab sengaja disembunyikan (paradigma off-canvas
       beda dari rail collapse desktop), jadi hamburger ini masih satu-
       satunya cara buka/tutup sidebar di HP. */
    #menu-toggle {

        display: none;

    }

    /* Judul halaman ("Picking Session" dkk) jadi nempel banget ke tepi
       sidebar begitu #menu-toggle di atas disembunyikan (dulu lebar tombol
       + gap 20px-nya yang jadi jarak). Digeser dikit pakai margin, bukan
       nambah padding .navbar (biar navbar-right/notif dkk di kanan gak ikut
       kegeser). */
    .navbar-left > div {

        margin-left: 44px;

    }

    body.sidebar-open::before {

        display: none;

    }

}