/* ══════════════════════════════════════════════════════════════════════════
   MOBILE.CSS — Lapisan perbaikan mobile lintas portal
   ══════════════════════════════════════════════════════════════════════════

   PRINSIP
   -------
   File ini hanya MENAMBAH perbaikan di viewport kecil. Ia tidak menulis ulang
   admin.css / mitra.css dan tidak menyentuh 34k baris markup. Hampir seluruh
   aturan berada di dalam media query, sehingga tampilan desktop tidak berubah.

   Muat SETELAH stylesheet portal:
     <link rel="stylesheet" href="/css/tokens.css">
     <link rel="stylesheet" href="/css/admin.css">
     <link rel="stylesheet" href="/css/mobile.css">   <- terakhir

   MASALAH YANG DIPERBAIKI (temuan audit Tahap 6)
   ----------------------------------------------
   1. admin.css:52  body{height:100vh;overflow:hidden}
      100vh di browser mobile menghitung TINGGI TERMASUK URL bar. Saat URL bar
      menyusut, konten terpotong dan tidak bisa di-scroll karena overflow:hidden.
   2. admin.css:70  .mw{overflow-x:auto}
      Menyebabkan seluruh area konten bisa digeser horizontal — halaman terasa
      "goyang" padahal yang perlu digeser hanya tabelnya.
   3. Input font-size 14px memicu AUTO-ZOOM di iOS Safari saat difokus
      (iOS memperbesar bila font input < 16px). Setelah zoom, layout melar.
   4. Target sentuh di bawah 44px (rekomendasi Apple/Google): .btn-sm hanya
      ~24px tinggi, ikon aksi tabel sulit ditekan dengan jempol.
   5. Beberapa panel memakai min-width tetap (600-700px) sehingga memaksa
      scroll horizontal di layar 360-390px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. TINGGI VIEWPORT YANG AMAN
   Pakai dvh (dynamic viewport height) bila didukung: nilainya menyesuaikan
   saat URL bar muncul/hilang. Fallback ke 100vh untuk browser lama.
   ───────────────────────────────────────────────────────────────────────── */
@supports (height: 100dvh) {
  @media (max-width: 992px) {
    body   { height: 100dvh; }
    .mw    { height: 100dvh; }
    .sidebar { height: 100dvh; }
  }
}

@media (max-width: 992px) {
  /* Halaman admin memakai app-shell .mw sebagai satu-satunya area scroll. */
  body {
    max-width: 100%;
  }
  body:has(.mw) { overflow: hidden; }
  .mw {
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Fallback untuk browser yang belum mendukung :has(): admin.css sudah
     memberi body overflow:hidden, sedangkan halaman non-admin tidak memakai
     admin.css dan tetap mengikuti overflow default browser. */
  @supports not selector(body:has(.mw)) {
    .mw {
      width: 100%;
      margin-left: 0;
    }
  }

  html { max-width: 100%; overflow-x: hidden; }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. HANYA TABEL YANG BOLEH DIGESER HORIZONTAL
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .tbl-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  /* Bungkus tabel telanjang: beri lebar minimum agar kolom tidak gepeng,
     tetapi biarkan pembungkusnya yang menggulung bila tersedia. */
  .dtbl, .table { min-width: 560px; }

  /* PENGECUALIAN: .tbl (agent/collector) adalah tabel struk label-nilai
     2 kolom, bukan tabel data lebar. Memaksa min-width justru membuatnya
     overflow. Biarkan mengikuti lebar layar dan patahkan kata panjang. */
  .tbl { width: 100%; min-width: 0; table-layout: fixed; }
  .tbl td { overflow-wrap: anywhere; }

  /* Petunjuk halus bahwa tabel bisa digeser. */
  .tbl-wrap { scrollbar-width: thin; }
  .tbl-wrap::-webkit-scrollbar { height: 4px; }
  .tbl-wrap::-webkit-scrollbar-thumb {
    background: var(--primary);
    opacity: .4;
    border-radius: 999px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CEGAH AUTO-ZOOM iOS PADA INPUT
   iOS Safari memperbesar halaman bila font-size input < 16px. 16px adalah
   ambang pasti; hanya diterapkan di layar sentuh kecil agar desktop tetap 14px.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fc, .fs,
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  select, textarea,
  .form-control, .form-select {
    font-size: 16px;
  }

  /* .fs desktop dibatasi min-width:120px; di ponsel biarkan penuh. */
  .fs, .form-select { min-width: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. TARGET SENTUH ≥ 44px
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 11px 18px;
  }

  /* .btn-sm tetap lebih kecil secara visual, tetapi area sentuhnya cukup. */
  .btn-sm {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 13px;
  }

  /* Tombol ikon di dalam tabel: jaga rasio persegi & jarak antar tombol. */
  .dtbl .btn-sm,
  .dtbl .btn {
    min-width: 38px;
    justify-content: center;
  }
  .dtbl td .btn + .btn { margin-left: 6px; }

  /* Baris tabel lebih lega agar mudah ditekan. */
  .dtbl th, .dtbl td { padding: 12px 12px; }

  /* Item navigasi bawah & sidebar. */
  .bn-item  { min-height: 52px; }
  .sb-item  { min-height: 44px; }

  /* Checkbox/radio lebih besar. */
  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. NETRALKAN LEBAR TETAP YANG MEMAKSA OVERFLOW
   Hanya di ponsel; di desktop lebar aslinya tetap dipakai.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card, .sc, .scard, .cardx { max-width: 100%; }

  /* Panel/tab yang memakai min-width tetap (mis. radius-settings 600px,
     vpn_manager 700px) dibuat mengikuti lebar layar. */
  [style*="min-width: 600px"],
  [style*="min-width:600px"],
  [style*="min-width: 700px"],
  [style*="min-width:700px"],
  [style*="min-width: 720px"],
  [style*="min-width:720px"] {
    min-width: 0 !important;
  }

  /* Gambar & media tidak boleh melebihi kontainer. */
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* Grid tombol aksi menumpuk rapi. */
  .filter-bar, .btn-group-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-bar > * { flex: 1 1 auto; min-width: 0; }

  /* Judul panjang tidak memecah layout. */
  .tb-title, .sb-name, .card-hd h6 {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Kata sangat panjang (URL, username PPPoE, MAC) dipatahkan. */
  .dtbl td, .card-bd, .page { overflow-wrap: anywhere; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. AREA AMAN (notch / home indicator)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .mw {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  .page {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. MODAL RAMAH PONSEL
   Muncul dari bawah (sheet), tinggi dibatasi, isinya bisa digulung.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .mb, .modal-box {
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-dialog {
    margin: 8px;
    max-width: calc(100% - 16px);
  }

  /* Form tech tetap mudah dibaca tanpa membuat label dan input terlalu sempit. */
  .container > .t-card .row > [class*="col-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .tech-stats,
  .legend-grid {
    gap: 6px;
  }
  .tech-stats .tsc,
  .legend-grid .lc {
    min-width: 0;
  }
  .legend-grid .lc {
    gap: 4px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .legend-grid .lc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  #map {
    height: calc(100dvh - 235px) !important;
    min-height: 320px;
  }

  .top-nav {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .top-nav-title {
    min-width: 0;
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .t-card {
    padding: 13px;
  }

  .settings-page .page {
    padding-top: 12px;
  }
  .settings-page .card-hd {
    align-items: flex-start !important;
  }
  .settings-page .card-hd h6 {
    line-height: 1.4;
    white-space: normal;
  }
  .settings-page .form-row,
  .settings-page .form-row2,
  .settings-page .form-row3,
  .settings-page .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .settings-page .settings-span-2 {
    grid-column: span 1 !important;
  }
  .settings-page .fg > div[style*="display:flex"],
  .settings-page div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }
  .settings-page .fg > div[style*="display:flex"] > .fc,
  .settings-page .fg > div[style*="display:flex"] > input,
  .settings-page .fg > div[style*="display:flex"] > textarea {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .settings-page .fg > div[style*="display:flex"] > .btn,
  .settings-page .fg > div[style*="display:flex"] > button {
    width: 100%;
  }
  .settings-page .card-bd {
    padding: 13px;
  }
  .settings-page .card-bd [style*="min-width:260px"] {
    min-width: 0 !important;
    width: 100%;
  }
  .settings-page .card-bd [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  .settings-page .card-bd img {
    max-width: 100%;
  }

  .voucher-orders-page .tb-right {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .voucher-orders-page .tb-right .btn {
    flex: 0 0 auto;
  }
  .voucher-orders-page .filter-bar form {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap;
  }
  .voucher-orders-page .filter-bar input[type="text"] {
    flex: 1 1 100%;
    max-width: none !important;
  }
  .voucher-orders-page .filter-bar form .btn {
    flex: 1 1 calc(50% - 4px);
  }

  .packages-page .card-hd {
    align-items: stretch;
  }
  .packages-page .card-hd > div {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .packages-page .card-hd select,
  .packages-page #searchPackage {
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
  }
  .packages-page .card-hd .btn {
    grid-column: span 2;
    width: 100%;
  }
  .packages-page .mbody > div[style*="grid-template-columns: 1fr 1fr"],
  .packages-page .mbody > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .packages-page .mbody [style*="display:flex"][style*="gap:8px"] {
    flex-direction: column;
  }
  .packages-page .mbody [style*="max-width:200px"] {
    max-width: none !important;
    width: 100%;
  }
  .packages-page .mbody .mf,
  .packages-page .mf {
    flex-wrap: wrap;
  }
  .packages-page .mf .btn {
    flex: 1 1 100%;
  }

  .routers-page .mtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .routers-page .mtab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .routers-page .router-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .routers-page .rc-card {
    padding: 16px;
  }
  .routers-page .rc-header {
    gap: 10px;
  }
  .routers-page .rc-title-box {
    min-width: 0;
  }
  .routers-page .rc-name,
  .routers-page .rc-host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .routers-page .rc-status-pill {
    white-space: nowrap;
    padding: 5px 8px;
  }
  .routers-page .rc-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 42px);
    gap: 8px;
  }
  .routers-page .rc-actions form {
    display: contents !important;
  }
  .routers-page .rc-actions .btn,
  .routers-page .rc-actions .btn-detail-live {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    padding: 8px;
  }
  .routers-page .rc-actions .btn-detail-live {
    grid-column: span 2;
  }
  .routers-page .rc-actions .btn:first-of-type:not(.btn-detail-live) {
    grid-column: span 2;
  }
  .routers-page .mbody .form-row {
    grid-template-columns: 1fr;
  }
  .routers-page .mf {
    flex-wrap: wrap;
  }
  .routers-page .mf .btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 993px) {
  .settings-page .page {
    width: 100%;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 28px 36px;
  }
  .settings-page .settings-grid {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .settings-page .settings-grid > * {
    min-width: 0;
  }
  .settings-page .card-hd {
    min-height: 50px;
  }
  .settings-page .card-hd h6,
  .settings-page .settings-grid > div > h6 {
    line-height: 1.35;
  }
  .settings-page .fc,
  .settings-page .fs {
    max-width: 100%;
  }
  .settings-page .card-bd [style*="grid-template-columns: repeat(auto-fit"] {
    align-items: start;
  }
  /* v14: aturan sticky lama utk card terakhir settings DIHAPUS —
     digantikan .savebar (admin.css) yang sudah sticky sendiri. */
}

/* ─────────────────────────────────────────────────────────────────────────
   8. STRUKTUR MENU LEBIH TERBACA
   Sidebar admin punya 7 seksi (UTAMA, BILLING, KEUANGAN, LAYANAN, KASIR,
   MANAJEMEN USER, SISTEM) dalam satu daftar panjang. Di ponsel daftar ini
   harus digulung, sehingga mudah kehilangan konteks "ini seksi apa".
   Judul seksi dibuat lengket agar konteksnya selalu terlihat.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .sb-nav { scroll-padding-top: 34px; }

  .sb-section {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg2);
    /* Sedikit lebih tegas dari desktop supaya terbaca sebagai pemisah. */
    padding: 10px 16px 6px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Item aktif lebih jelas saat dilihat sekilas di layar kecil.
     (v14: gaya pill dari admin.css — border kiri lama tidak dipakai lagi.) */
  .sb-item.active {
    border-left: none;
    font-weight: 600;
  }

  /* Badge "Kunci" tidak boleh mendorong label keluar layar. */
  .sb-item .lock-badge { flex-shrink: 0; }
  .sb-item span:not(.lock-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8b. HALAMAN DENGAN LEBAR TETAP INLINE (mikrotik, customers, vouchers,
       whatsapp, mitra_customers)

   Halaman-halaman ini menulis lebar tetap sebagai inline style pada
   <div class="sinput" style="max-width:340px"> / <select style="width:160px">
   / <div style="flex:1;min-width:200px">. Inline style hanya bisa ditimpa
   dengan !important, jadi aturannya ditempatkan per-class body halaman agar
   tidak bocor ke halaman lain.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Baris filter: tumpuk penuh lebar, jangan biarkan item menyempit. */
  .mikrotik-page .srow,
  .customers-page .srow,
  .vouchers-page .srow,
  .mitra-customers-page .srow,
  .mikrotik-page .card-hd > div[style*="display:flex"],
  .customers-page .card-hd > div[style*="display:flex"] {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Kotak pencarian + select filter: isi penuh, buang lebar tetap. */
  .mikrotik-page .sinput,
  .customers-page .sinput,
  .vouchers-page .sinput,
  .mitra-customers-page .sinput {
    flex: 1 1 100%;
    max-width: none !important;
    min-width: 0;
  }

  .mikrotik-page .srow select[style],
  .customers-page .srow select[style],
  .vouchers-page .srow select[style],
  .mitra-customers-page .srow select[style] {
    flex: 1 1 calc(50% - 5px);
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }

  /* Tombol aksi di samping kotak pencarian: tetap bisa ditekan, tidak gepeng. */
  .mikrotik-page .card-hd > div[style*="display:flex"] > .btn,
  .customers-page .tb-right .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Modal: lepas batas lebar tetap agar tidak sempit di 360px. */
  .mikrotik-page .mb,
  .customers-page .mb,
  .vouchers-page .mb,
  .mitra-customers-page .mb {
    max-width: 100% !important;
    width: 100%;
  }

  /* Voucher: kolom flex dengan min-width tetap (mis. min-width:240px). */
  .vouchers-page [style*="min-width:2"][style*="flex"],
  .vouchers-page .kv .fg {
    min-width: 0 !important;
    flex: 1 1 100%;
  }
  .vouchers-page .kv {
    flex-wrap: wrap;
  }
  .vouchers-page select[style*="min-width"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }

  /* WhatsApp: panel provider & field kustom memakai min-width inline. */
  .whatsapp-page [style*="min-width:200px"],
  .whatsapp-page [style*="min-width:110px"],
  .whatsapp-page .wap-field {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .whatsapp-page .wap-provider-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Indikator lingkaran 120px: jaga agar tidak melebar di layar sempit. */
  .whatsapp-page .status-indicator {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. AKSESIBILITAS
   ───────────────────────────────────────────────────────────────────────── */
/* Hormati preferensi pengguna yang sensitif terhadap animasi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fokus keyboard tetap terlihat (penting untuk navigasi tanpa mouse). */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}