/* =========================================================
   SIMDA — RESPONSIVE LAYOUT
   Desktop: sidebar tetap terlihat (perilaku lama, tidak berubah)
   Tablet/HP (<= 880px): sidebar jadi drawer (laci) yang muncul
   lewat tombol hamburger, konten menyesuaikan lebar layar
   ========================================================= */

/* ── Hamburger: sembunyikan di desktop, tampil di mobile ── */
#hamburger-btn { display: none; }

/* ── Overlay gelap di belakang drawer sidebar (mobile) ── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199; /* di bawah sidebar (200), di atas konten */
}
#sidebar-overlay.show { display: block; animation: fadein .15s ease; }

/* =========================================================
   BREAKPOINT 1 — Tablet & HP (≤ 880px): sidebar jadi drawer
   ========================================================= */
@media (max-width: 880px) {

  #hamburger-btn { display: flex; }

  #sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  #sidebar.mobile-open { transform: translateX(0); }

  /* Konten utama full-width, tidak lagi digeser oleh sidebar */
  #main { margin-left: 0; }

  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-title { font-size: 13px; }
  .topbar-bread { display: none; } /* hemat ruang di layar sempit */
  .topbar-sep   { display: none; }
  .topbar-clock { display: none; } /* info sekunder, sembunyikan di HP */
  .topbar-right { gap: 6px; }

  .page { padding: 14px 14px 24px; }
  .pg-header { flex-wrap: wrap; gap: 10px; }
  .pg-title { font-size: 18px; }
  .pg-actions { width: 100%; }
  .pg-actions .btn { flex: 1; justify-content: center; }

  .section-hdr { flex-wrap: wrap; gap: 8px; }

  /* Form 2 kolom → 1 kolom agar mudah diisi lewat HP */
  .form-grid-2 { grid-template-columns: 1fr; }

  /* Filter bar: input jadi full width bertumpuk rapi */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-input,
  .filter-bar .search-inp { width: 100%; max-width: none; }

  /* Kartu statistik dashboard: minimal 2 kolom di HP */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-val  { font-size: 22px; }

  /* Modal: mepet ke tepi layar dengan padding aman, tetap scrollable */
  .modal-overlay { padding: 12px; align-items: flex-start; }
  .modal-box { padding: 18px; max-width: 100%; margin-top: 30px; }
  .modal-box.modal-lg { max-width: 100%; }

  /* Tombol aksi modal full width, mudah ditekan jari */
  .btn-row { flex-wrap: wrap; }
  .btn-row .btn { flex: 1; min-width: 100px; justify-content: center; }

  /* Tabel: font lebih kecil, tetap scroll horizontal (sudah dibungkus overflow-x:auto) */
  .tbl { font-size: 11.5px; }
  .tbl th, .tbl td { padding: 7px 8px; }
}

/* =========================================================
   BREAKPOINT 2 — HP kecil (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {
  #sidebar { width: 82vw; max-width: 300px; }

  .login-box { width: 100%; padding: 28px 22px; }
  #login-wrap { padding: 16px; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-title  { font-size: 16px; }

  /* Kartu ringkasan/metric turun jadi 1 kolom bila terlalu sempit */
  .form-row label.form-label { font-size: 10px; }
}

/* =========================================================
   Tablet lanskap besar / laptop kecil (881px–1100px):
   sidebar tetap terlihat tapi sedikit lebih ramping
   ========================================================= */
@media (min-width: 881px) and (max-width: 1100px) {
  :root { --sw: 210px; }
  .page { padding: 16px 18px; }
}