/* ══════════════════════════════════════════════════════════════════════════
   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;
  }
  .settings-page form > .card:last-child .card-bd:last-child {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg2) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .12);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   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. */
  .sb-item.active {
    border-left-width: 4px;
    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;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   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;
}