/* Payment Gateway page-only styles. KASA tokens from kasa-overrides.css; dark theme inherited. */
/* pg-note tetap */ #app-root .pg-note { color: var(--kasa-ink-dim); }
#app-root .pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
#app-root .card { margin-bottom: 1rem; min-width: 0; overflow-wrap: anywhere; }
#app-root .btn, #app-root .form-control, #app-root .form-select { min-height: 44px; }
#app-root .pg-fields > * { min-width: 0; }
#app-root .pg-item-head { flex-wrap: wrap; }
#app-root .pg-status { color: var(--kasa-ink); background: var(--kasa-accent-soft); border-radius: var(--kasa-radius-input); padding: .25rem .5rem; }
#app-root .pg-item { border: 1px solid var(--kasa-line); border-radius: var(--kasa-radius-card); box-shadow: var(--kasa-shadow); background: var(--kasa-panel-solid); }
#app-root .pg-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
#app-root .pg-item h3 { font-family: var(--kasa-font-display); font-size: 1rem; margin-bottom: 0.15rem; }
#app-root .pg-status { flex-shrink: 0; }
#app-root .pg-status .alert { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0; }
#app-root .pg-number { font-family: var(--kasa-font-mono); }
#app-root .pg-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
#app-root .pg-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
#app-root .pg-check input { width: 1.25rem; height: 1.25rem; margin-top: 0; }
#app-root .pg-advanced { margin: 1rem 0; border: 1px dashed var(--kasa-line); border-radius: var(--kasa-radius-input); padding: 0.75rem; }
#app-root .pg-advanced summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--kasa-accent-strong); }
#app-root .pg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
#app-root .pg-actions .btn, #app-root form .btn { min-height: 44px; }
#app-root h2 { font-family: var(--kasa-font-display); font-size: 1.15rem; }
#app-root form .form-label { margin-bottom: 0.25rem; }
#app-root .alert { border-radius: var(--kasa-radius-input); }
/* #148 round-2: filter bar tabel metode — kompak, sejajar tombol Tambah/Muat ulang.
   Semua kontrol toolbar dipatok 36px & satu baris supaya tombol, search, dan select
   duduk pada garis yang sama (grup kanan dulu membungkus → tinggi 62px → tombol
   terlihat 13px lebih rendah dari input). */
#app-root .card-header { align-items: center; }
#app-root .card-header > .btn, #app-root .card-header .btn { min-height: 36px; height: 36px; display: inline-flex; align-items: center; }
#app-root .pg-methods-count { line-height: 36px; flex: 0 0 auto; }
#app-root .pg-methods-toolbar { flex-wrap: nowrap; }
#app-root .pg-methods-search { min-height: 36px; height: 36px; flex: 0 1 260px; min-width: 130px; max-width: 260px; }
#app-root .pg-methods-status { min-height: 36px; height: 36px; flex: 0 0 auto; width: auto; max-width: 180px; }
#app-root #pg-methods-count { font-variant-numeric: tabular-nums; }
/* #148 r5: modal Tambah metode SELF-CONTAINED — tidak bergantung bootstrap
   JS/CSS global (dulu "bootstrap is not defined" → modal tak muncul/rusak).
   Kasa tokens; cocok light & dark theme via var(). */
.pg-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pg-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 27, 45, 0.55); backdrop-filter: blur(2px); }
#app-root ~ .pg-modal .pg-modal-dialog, body > .pg-modal .pg-modal-dialog { position: relative; z-index: 1; }
.pg-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 480px; background: var(--kasa-panel-solid, #fff); border: 1px solid var(--kasa-line, #dbe5ef); border-radius: 16px; box-shadow: var(--kasa-shadow, 0 1rem 2rem rgba(29, 45, 64, .18)); color: var(--kasa-ink, #1d2d40); }
.pg-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kasa-line, #dbe5ef); }
.pg-modal-header .modal-title { font-family: var(--kasa-font-display, inherit); font-size: 1rem; margin: 0; }
.pg-modal-body { padding: 1.25rem; }
.pg-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--kasa-line, #dbe5ef); }
.pg-modal-footer .btn { min-height: 40px; }

/* #148 r6: aksi form selalu SATU BARIS — wrap membuat Hapus turun di bawah
   Simpan/Batal (keluhan owner). Space disediakan lewat flex & ukuran btn. */
#app-root .pg-actions, #app-root .pg-actions-main { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
#app-root .pg-actions-main .btn { white-space: nowrap; }
/* r6: baris Nama tampilan & checkbox Aktif SEJAJAR vertikal — checkbox
   diberi tinggi sama dengan input (44px) dan align center. */
#app-root .pg-fields { align-items: stretch; }
#app-root .pg-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; height: 44px; margin-top: 0; align-self: end; padding: 0 0.25rem; }
/* r6: konfigurasi key-value — ganti editor JSON. */
#app-root .pg-config { border: 1px dashed var(--kasa-line); border-radius: var(--kasa-radius-input); padding: 0.875rem; }
#app-root .pg-kv-row { display: grid; grid-template-columns: minmax(140px, 5fr) minmax(160px, 7fr) auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
#app-root .pg-kv-row .form-control { min-height: 40px; height: 40px; }
#app-root .pg-kv-row .pg-kv-del { min-height: 40px; height: 40px; width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#app-root .pg-config-add-row { margin-bottom: 0; }
/* #142: ringkasan hasil diagnostik transaksi (status provider / reconcile). */
#app-root .pg-tx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem 1.25rem; }
#app-root .pg-tx-facts dt { font-size: 0.8125rem; font-weight: 400; color: var(--kasa-muted, #6b7280); margin-bottom: 0.125rem; }
#app-root .pg-tx-facts dd { margin-bottom: 0; font-weight: 600; word-break: break-word; }

/* ---------- Layar sempit (<= 767.98px) ----------
   Blok ini HARUS di akhir berkas: semua aturan yang ditimpa di atas punya
   spesifisitas sama, jadi urutan sumber yang menentukan siapa menang. */
@media (max-width: 767.98px) {
  #app-root .pg-methods-toolbar { flex-wrap: wrap; width: 100%; }
  #app-root .pg-methods-search { flex: 1 1 100%; max-width: none; }
  #app-root .pg-methods-status { flex: 1 1 auto; }
  #app-root .pg-methods-count { line-height: 1.4; }
  /* r7: aturan nowrap r6 hanya masuk akal di desktop. Di layar sempit tiga
     tombol aksi tak muat sebaris, jadi Hapus (label panjang) melebar keluar
     kartu dan menyeret lebar dokumen. Boleh wrap; label juga boleh wrap —
     kalau tetap nowrap, teks "Save changes" terpotong di tepi tombol. */
  #app-root .pg-actions-main { flex-wrap: wrap; }
  #app-root .pg-actions-main .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
  /* r7: baris key-value butuh min 140+160+40 px + gap — lebih lebar dari kartu
     di layar sempit, sehingga kolom nilai terjepit dan tombol hapus tiap baris
     melewati tepi kanan. Tumpuk dua baris: nama kunci penuh, lalu nilai+tombol. */
  #app-root .pg-kv-row { grid-template-columns: minmax(0, 1fr) auto; }
  #app-root .pg-kv-row .pg-kv-key { grid-column: 1 / -1; }
}