/* Custom responsive tweaks untuk bikin tampilan lebih rapih & full‑bleed */

/* Mode "tablet / mobile landscape" sampai kira‑kira laptop kecil */
@media (max-width: 1200px) {
  /* Konten utama jangan terlalu banyak ruang kosong kiri‑kanan */
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Card utama (list & form) dibuat hampir full‑width */
  .card.mx-4,
  .card.mb-4.mx-4 {
    margin-left: .75rem !important;
    margin-right: .75rem !important;
  }

  .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* HP sedang – layout lebih rapat lagi */
@media (max-width: 768px) {
  .card.mx-4,
  .card.mb-4.mx-4 {
    margin-left: .25rem !important;
    margin-right: .25rem !important;
    border-radius: .75rem;
  }

  .container-fluid,
  .container-fluid.py-4 {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}

/* HP kecil – benar‑benar full‑bleed */
@media (max-width: 575.98px) {
  .card.mx-4,
  .card.mb-4.mx-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  .container-fluid,
  .container-fluid.py-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Perkecil sedikit font tabel & form agar muat tanpa kepotong */
  table.table {
    font-size: .75rem;
  }

  .form-control,
  .input-group-text,
  .btn {
    font-size: .8rem;
  }
}