/* ============================================================
   LENTERA Mobile Responsive — shared/mobile.css
   Scope: layout adaptations untuk semua halaman LENTERA
   agar berfungsi baik di perangkat mobile/tablet.

   TIDAK mengubah logika fungsi existing.
   Hanya menambah overrides via media query.
   ============================================================ */

/* ── Safe area global (notch / dynamic island / home bar) ── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ════════════════════════════════════════════════════════════
   INDEX.HTML — Halaman Portal Utama
   ════════════════════════════════════════════════════════════ */

/* Footer aman dari home bar di iPhone */
@media (max-width: 640px) {
  footer {
    padding-bottom: calc(1.5rem + var(--safe-bottom));
    padding-left:  calc(1.5rem + var(--safe-left));
    padding-right: calc(1.5rem + var(--safe-right));
  }
}

/* ════════════════════════════════════════════════════════════
   PEMOHON.HTML — Portal Layanan Publik
   ════════════════════════════════════════════════════════════ */

/* Topbar: lebih rapat di layar kecil */
@media (max-width: 640px) {
  .topbar {
    padding: 0 10px;
    gap: 8px;
  }

  /* Sembunyikan subtitle agar logo + nama tetap terlihat */
  .topbar-sub {
    display: none;
  }

  .topbar-name {
    font-size: 14px;
  }

  /* Nav: scroll horizontal agar semua tab terjangkau */
  .topbar-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Batasi lebar agar tidak dorong logo keluar */
    max-width: calc(100vw - 140px);
    flex-shrink: 1;
  }

  .topbar-nav::-webkit-scrollbar {
    display: none;
  }

  /* Tab item: tidak boleh mengerut, mudah disentuh */
  .tnav {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 12px;
    min-height: 44px; /* Touch-friendly minimum */
  }
}

/* Padding halaman agar konten tidak tertutup topbar di safe area */
@media (max-width: 640px) {
  .pt {
    padding-top: calc(64px + var(--safe-top));
  }

  /* Hero: kurangi ketinggian minimum di mobile */
  .hero {
    min-height: auto;
    padding-bottom: 80px;
  }

  /* Hero inner: cukup padding horizontal */
  .hero-inner {
    padding: 40px 16px 80px;
  }

  /* Wrap konten utama: padding horizontal lebih aman */
  .wrap,
  .wrap-sm {
    padding-left:  max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
}

/* ════════════════════════════════════════════════════════════
   PETUGAS.HTML — Aplikasi Petugas (Sidebar Layout)
   ════════════════════════════════════════════════════════════ */

/* ── Hamburger toggle button ──
   Hanya tampil di mobile (<= 860px) */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--gray-1, #F1F5F9);
  color: var(--text-main, #1A1A2E);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-toggle:hover {
  background: var(--gray-2, #E2E8F0);
  border-color: var(--gray-3, #BDBDBD);
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent, #C8922A);
  outline-offset: 2px;
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* ── Overlay backdrop ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Mobile sidebar drawer ── */
@media (max-width: 860px) {
  /* Tampilkan hamburger */
  .sidebar-toggle {
    display: flex;
  }

  /* Sidebar jadi drawer, override display:none dari petugas.css */
  .sidebar {
    display: flex !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 300;
    /* Batasi lebar drawer agar tidak tutup semua layar */
    max-width: 280px;
    /* Safe area kiri (notch landscape) */
    padding-left: var(--safe-left);
  }

  /* State: sidebar terbuka */
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  /* Overlay aktif saat sidebar terbuka */
  .sidebar-overlay.is-open {
    display: block;
  }

  /* Top utility: padding horizontal lebih rapat */
  .top-utility,
  .top-nav,
  .content {
    padding-left:  max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  /* Nama aplikasi di utility bar: singkat di mobile */
  .top-utility-brand span {
    display: none; /* sembunyikan subtitle panjang */
  }

  /* Nav item: minimum touch target */
  .nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Sidebar footer: safe area bawah */
  .sidebar-foot {
    padding-bottom: calc(12px + var(--safe-bottom));
  }

  /* Content: safe area bawah */
  .content {
    padding-bottom: calc(24px + var(--safe-bottom));
  }

  /* Top-utility: tambahkan safe area atas jika ada notch.
     Hanya padding — biarkan height auto-expand, jangan override fixed height. */
  .top-utility {
    padding-top: var(--safe-top);
    min-height: calc(var(--topbar-utility, 52px) + var(--safe-top));
  }
}

/* Desktop: sembunyikan elemen mobile-only */
@media (min-width: 861px) {
  .sidebar-toggle {
    display: none !important;
  }

  .sidebar-overlay {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PEMOHON.HTML — Bottom Navigation Enhancements
   ════════════════════════════════════════════════════════════ */

/* Safe area inset untuk home bar iPhone (bnav sudah ada di pemohon.css,
   ini hanya menambahkan safe-area yang belum ada di sana) */
@media (max-width: 640px) {
  .bnav {
    padding-bottom: var(--safe-bottom);
  }

  /* Kompensasi padding body agar konten tidak tertutup bnav + home bar */
  body:has(.bnav) {
    padding-bottom: calc(64px + var(--safe-bottom));
  }

  /* Active indicator: garis emas tipis di atas tab aktif (referensi SERASI) */
  .bn-item {
    position: relative;
    min-height: 56px; /* touch-friendly */
  }

  .bn-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold, #C8922A), transparent);
    border-radius: 0 0 2px 2px;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .bn-item.active::before {
    opacity: 1;
  }

  /* Icon SVG di bn-ico: sesuaikan ukuran agar pas (icons.js menghasilkan .lntr-icon) */
  .bn-ico {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bn-ico .lntr-icon {
    width: 22px;
    height: 22px;
  }

  .bn-ico .lntr-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ── Tombol utama (.btn) di mobile: pastikan touch target minimum 44px.
   .btn-sm, .btn-xs, .btn-lg TIDAK diubah karena ukurannya by-design. ── */
@media (max-width: 640px) {
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg) {
    min-height: 44px;
  }
}