/* ==========================================================================
   AdminJS — Tampilan Responsif (HP, Tablet, Desktop)
   Didaftarkan via options.assets.styles pada admin.js
   Tujuan: konten tabel / daftar data SELALU terlihat di semua perangkat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) SEMUA KOLOM SELALU TERLIHAT
   Bawaan AdminJS menyembunyikan kolom selain kolom judul di layar < 769px,
   sehingga di HP/tablet hanya terlihat tombol aksi "titik-titik" (...).
   Override ini memaksa setiap sel tabel untuk selalu tampil.
   -------------------------------------------------------------------------- */
.adminjs_TableCell {
  display: table-cell !important;
}

/* --------------------------------------------------------------------------
   2) TABEL MENGISI PENUH LEBAR KONTAINER
   Tabel tetap berperilaku seperti tabel normal (display: table) sehingga
   sel membentang mengisi seluruh lebar layar, apapun ukuran device.
   -------------------------------------------------------------------------- */
.adminjs_Table {
  width: 100%;
  table-layout: auto;
}

/* biarkan teks panjang membungkus agar selalu terlihat penuh */
.adminjs_Table .adminjs_TableCell {
  border-bottom: 1px solid #f6f7fb;
  word-break: break-word;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   3) PADA LAYAR SEMPIT: tabel menjadi blok yang bisa di-scroll horizontal
   agar banyak kolom tetap bisa dijangkau tanpa menggulir seluruh halaman.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .adminjs_Table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate;
    border-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   4) MENYISIPKAN SELALU KONTEN DI DALAM LAYAR (tanpa scroll halaman ke samping)
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   5) PENYEMPURNAAN TAMPILAN DI LAYAR KECIL
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* perkecil padding & font sel agar lebih banyak data terlihat */
  .adminjs_TableCell {
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* header tabel */
  .adminjs_TableHead .adminjs_TableCell {
    padding: 8px 8px !important;
  }

  /* menu dropdown "titik-titik" tetap di dalam layar */
  .adminjs_DropDownMenu {
    right: 0 !important;
    left: auto !important;
    max-width: 90vw;
    overflow-x: auto;
  }
}

@media (max-width: 577px) {
  /* drawer filter tampil penuh di layar HP */
  .adminjs_Drawer.adminjs_Drawer_Filter {
    width: 100vw !important;
  }

  /* judul aksi tidak terlalu besar */
  .adminjs_ActionHeader h1,
  .adminjs_ActionHeader h2 {
    font-size: 22px !important;
  }
}

/* --------------------------------------------------------------------------
   6) TOMBOL AKSI (CREATE / FILTER) TIDAK MELUAP DI LAYAR KECIL
   -------------------------------------------------------------------------- */
.adminjs_ActionHeader .adminjs_Box {
  flex-wrap: wrap;
}