/* =====================================================================
   RESPONSIVE - Tablet & Mobile
   Prinsip: sidebar jadi drawer off-canvas, dropdown aksi baris data
   otomatis jadi bottom sheet supaya nyaman disentuh jari di HP.
   ===================================================================== */

@media (max-width: 1080px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-card--hero { grid-column: span 2; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-md);
    }
    .sidebar.is-open { transform: translateX(0); }

    .app-main { margin-left: 0; }

    .navbar__hamburger { display: inline-flex; }

    body.sidebar-open .sidebar__overlay { display: block; }

    .navbar__user-info { display: none; }

    .app-content { padding: 18px 16px 50px; }
}

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr; }
    .stat-card--hero { grid-column: 1; }

    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header .btn { width: 100%; justify-content: center; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar__search { max-width: none; }

    /* Tabel jadi scroll horizontal supaya tidak memecah layout,
       tapi tetap bisa dibaca utuh (bukan dipaksa "card" yang malah
       menyembunyikan kolom penting bagi admin yang terbiasa lihat tabel). */
    .table-wrap { overflow-x: auto; }
    table.data-table { min-width: 720px; }

    .form-card, .detail-grid { padding: 18px; }

    .login-card { padding: 28px 22px; }

    /* Dropdown aksi (⋮) menjadi bottom sheet: menempel di bawah layar,
       lebih mudah disentuh jari dibanding dropdown kecil melayang. */
    .row-actions .dropdown-menu {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        border-radius: 16px 16px 0 0;
        min-width: 0;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    }

    .row-actions .dropdown-menu a { padding: 13px 14px; font-size: 15px; }

    /* Overlay gelap di belakang bottom sheet supaya jelas ini modal, bukan bagian halaman */
    .row-actions .dropdown-menu.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15,20,18,0.4);
        z-index: -1;
    }
}