/* responsive.css — lapisan responsif global untuk SEMUA menu (tablet & mobile).
   Dimuat di _Layout.cshtml setelah semua CSS tema & section Styles halaman. Sengaja hanya
   menyasar pola generik (toolbar, card header, tabel, form, modal, utilitas lebar tetap) supaya
   aturan khusus per halaman (yang sudah punya @media sendiri) tetap yang menang. */

/* ── Berlaku di semua ukuran ── */
img, video, canvas, iframe { max-width: 100%; }
.form-control, .form-select, .select2-container, input, select, textarea { max-width: 100%; }
/* Isi flex/grid boleh menyusut — tanpa ini teks panjang (nama, email, alamat) mendorong layout melebar. */
.card-body, .card-header, .modal-body { min-width: 0; }
.text-break-mobile { overflow-wrap: anywhere; }
/* Wadah scroll untuk tabel biasa — dipasang otomatis oleh skrip di _Layout.cshtml. */
.table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

/* ── Tablet (≤ 991.98px) ── */
@media (max-width: 991.98px) {
  /* Toolbar halaman: judul & tombol aksi turun ke baris baru kalau tidak muat. */
  #kt_toolbar_container { flex-wrap: wrap; gap: .5rem; }
  #kt_toolbar_container > .d-flex { flex-wrap: wrap; gap: .5rem; }

  /* Header card (judul + filter/pencarian/tombol). */
  .card > .card-header { flex-wrap: wrap; gap: .75rem; height: auto; min-height: 60px; padding-top: .75rem; padding-bottom: .75rem; }
  .card > .card-header .card-title,
  .card > .card-header .card-toolbar { flex-wrap: wrap; gap: .5rem; margin: 0; }
  .card > .card-header .card-toolbar > .d-flex { flex-wrap: wrap; gap: .5rem; }

  /* Tab navigasi: geser horizontal, bukan patah berantakan. */
  .nav-tabs, .nav-line-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .nav-tabs .nav-link, .nav-line-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }

  /* Tabel: selalu bisa di-scroll horizontal di dalam wadahnya, bukan melebarkan halaman. */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Kontrol DataTables (jumlah baris, cari, info, halaman). */
  .dataTables_wrapper .row { row-gap: .5rem; }
  .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
  .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; }

  /* Peta Leaflet tidak boleh lebih tinggi dari layar. */
  .leaflet-container { max-height: 70vh; }
}

/* ── Mobile (≤ 767.98px) ── */
@media (max-width: 767.98px) {
  #kt_content_container, #kt_toolbar_container { padding-left: 12px; padding-right: 12px; }
  .content { padding-top: 15px; padding-bottom: 15px; }
  .toolbar h1 { font-size: 1.15rem !important; }

  /* Utilitas lebar tetap Metronic (mis. w-250px di kotak pencarian) — jangan lebih lebar dari layar. */
  .w-150px, .w-175px, .w-200px, .w-225px, .w-250px, .w-275px, .w-300px, .w-325px, .w-350px,
  .w-375px, .w-400px, .w-450px, .w-500px, .w-550px, .w-600px,
  .min-w-200px, .min-w-250px, .min-w-300px, .mw-650px { max-width: 100% !important; }
  .min-w-200px, .min-w-250px, .min-w-300px { min-width: 0 !important; }

  /* Kotak pencarian & dropdown filter di header card memenuhi lebar. */
  .card > .card-header .card-title,
  .card > .card-header .card-toolbar { width: 100%; }
  .card > .card-header .card-title .position-relative,
  .card > .card-header .card-title input[type="text"],
  .card > .card-header .card-toolbar input[type="text"] { width: 100% !important; }

  .card .card-body { padding: 1rem; }
  .card .card-header { padding-left: 1rem; padding-right: 1rem; }

  /* Menu dropdown Metronic (filter) tidak keluar layar. */
  .menu-sub-dropdown { max-width: calc(100vw - 24px); }

  /* Modal Bootstrap: hampir penuh layar, isi bisa di-scroll. */
  .modal-dialog { margin: .5rem; max-width: none; }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: none; }
  .modal-content { max-height: calc(100vh - 1rem); }
  .modal-body { overflow-y: auto; }
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* SweetAlert2. */
  .swal2-popup { width: calc(100vw - 24px) !important; max-width: 32em; padding: 1rem; }

  /* Tombol berdampingan di form turun ke bawah kalau tidak muat. */
  .btn-group { flex-wrap: wrap; }

  /* Footer. */
  #kt_footer .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* ── HP kecil (≤ 575.98px) ── */
@media (max-width: 575.98px) {
  .fs-2hx, .fs-3x { font-size: 1.75rem !important; }
  .fs-1 { font-size: 1.4rem !important; }
  .table > :not(caption) > * > * { padding-left: .5rem; padding-right: .5rem; }
  .table.gs-7 > :not(caption) > * > *:first-child { padding-left: .75rem; }
  .table.gs-7 > :not(caption) > * > *:last-child { padding-right: .75rem; }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info { text-align: left !important; justify-content: flex-start !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
  .dataTables_wrapper .dataTables_filter label { width: 100%; }
}