/* ============================================================
   DataVault — RESPONSIVE / TAMPILAN MOBILE
   ============================================================
   Membuat halaman desktop tampil rapi di layar kecil tanpa perlu
   halaman mobile terpisah. Dimuat PALING AKHIR (sesudah
   design-system.css & components.css) supaya bisa menimpa aturan
   bawaan. Beberapa selektor diawali `body` agar menang dari blok
   <style> milik masing-masing halaman yang letaknya di bawah <link>.
   ============================================================ */

/* Tombol hamburger hanya muncul saat sidebar berubah jadi laci (<=1024px).
   Aturan `display:flex !important` untuk layar kecil sudah ada di
   design-system.css, jadi di sini cukup menyembunyikannya secara default —
   tidak perlu lagi menulis style="display:none" di tiap halaman. */
.hamburger-btn { display: none; }

/* ------------------------------------------------------------
   TABLET & BAWAHNYA (<= 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Laci sidebar: lebih lebar sedikit & bisa di-scroll penuh */
  .sidebar {
    width: min(300px, 86vw);
    box-shadow: var(--shadow-lg);
  }
  .main-content { width: 100%; }

  /* Header tidak boleh mendorong konten keluar layar */
  .top-header { gap: var(--space-2); }
  .header-search { min-width: 0; flex: 1; }
}

/* ------------------------------------------------------------
   PONSEL (<= 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* ---- Header ---- */
  .top-header {
    height: auto;
    min-height: 58px;
    padding: var(--space-2) var(--space-3);
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
  }
  .header-search input { font-size: var(--font-size-sm); }
  .header-actions { gap: var(--space-1); flex-shrink: 0; }
  .user-info { display: none; }
  .hamburger-btn { flex-shrink: 0; }

  /* Panel notifikasi jangan keluar layar */
  .notif-panel {
    position: fixed;
    top: 62px;
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
  }
  .dropdown-menu {
    position: fixed;
    top: 62px;
    right: var(--space-3);
    left: auto;
    min-width: 200px;
  }

  /* ---- Isi halaman ---- */
  body .page-content { padding: var(--space-4) var(--space-3) var(--space-8); }
  body .page-title { font-size: var(--font-size-xl); }
  body .page-subtitle { font-size: var(--font-size-xs); }

  /* Baris judul + tombol aksi: susun ke bawah, tombol melebar */
  body .page-content > div:first-child { align-items: flex-start; }
  body .page-content .btn-pill,
  body .page-content > div > .btn-primary { width: 100%; justify-content: center; }

  /* ---- Grid berkas: 2 kolom, bukan 1 kolom raksasa ---- */
  body .doc-grid,
  body .categories-grid,
  body .grid-cards,
  body .vault-grid {
    /* minmax(0, 1fr), BUKAN 1fr: "1fr" sama dengan minmax(auto, 1fr), sehingga
       kolom ikut melebar mengikuti isi terpanjang (mis. nama berkas panjang
       tanpa spasi) dan kolom kanan terdorong keluar layar. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  body .doc-card, body .cat-card, body .fav-card, body .vault-card { min-width: 0; }
  body .doc-card { padding: var(--space-4); }
  body .doc-card .big-icon { font-size: 32px; margin-bottom: var(--space-2); }
  body .doc-card .doc-title { font-size: var(--font-size-xs); }

  /* ---- Dashboard ---- */
  body .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  body .storage-grid,
  body .bottom-grid { grid-template-columns: 1fr; }
  body .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  body .welcome-card { padding: var(--space-5) var(--space-4); }
  body .welcome-card h2 { font-size: var(--font-size-lg); }

  /* ---- Profil, Upgrade, Keamanan ---- */
  body .profile-grid,
  body .upgrade-grid { grid-template-columns: 1fr; }

  /* Kartu identitas: avatar, nama, email, dan badge disusun menumpuk
     dan benar-benar rata tengah. Sebelumnya hanya arah flex-nya yang
     diubah, sehingga badge dan tombol masih menempel ke kiri. */
  body .profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
  }
  body .profile-hero > div:not(.profile-avatar-large) { width: 100%; min-width: 0; }
  body .profile-hero .profile-avatar-large {
    margin: 0 auto;
    width: 76px; height: 76px; font-size: 26px;
    flex-shrink: 0;
  }
  /* Nama panjang tidak boleh melebar keluar kartu */
  body .profile-hero h2 {
    font-size: var(--font-size-xl);
    overflow-wrap: anywhere;
    margin-bottom: 2px;
  }
  body .profile-hero p { overflow-wrap: anywhere; }
  /* Baris badge: text-align tidak mempan pada flex, perlu justify-content */
  body .profile-hero > div:not(.profile-avatar-large) > div { justify-content: center; }
  /* Tombol "Ganti Foto" jadi lebar penuh, bukan menggantung di kiri */
  body .profile-hero > .btn { width: 100%; justify-content: center; }

  body .security-hero { flex-direction: column; text-align: center; }

  /* Label form di halaman Profil memakai .text-xs yang terlalu rapat
     ke kolom isiannya saat dibaca di layar kecil. */
  body .form-group > label {
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  /* Tombol simpan/aksi utama di dalam form: lebar penuh, mudah ditekan */
  body .form-group + .btn,
  body form > .btn[type="submit"] { width: 100%; justify-content: center; }

  /* ---- Filter & toolbar ---- */
  body .view-toggle { flex-shrink: 0; }
  body .form-select,
  body .vault-filter-bar .form-select { width: 100%; min-width: 0; }
  body .vault-filter-bar { flex-direction: column; align-items: stretch; gap: var(--space-2); }

  /* ---- Tabel: geser mendatar, jangan memecah layout ---- */
  body .table-wrapper,
  body .admin-table-card,
  body .trash-table-card { -webkit-overflow-scrolling: touch; }
  body .table th,
  body .table td,
  body .admin-table th,
  body .admin-table td,
  body .trash-table th,
  body .trash-table td {
    padding: 10px 12px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  /* Tombol aksi massal di halaman Sampah: penuh selebar layar & sejajar */
  body .trash-banner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  body .trash-actions { display: flex; gap: var(--space-2); }
  body .trash-actions .btn { flex: 1 1 0; justify-content: center; }

  /* ---- Modal jadi lembar bawah (bottom sheet) ---- */
  body .modal-overlay { align-items: flex-end; padding: 0; }
  body .modal {
    max-width: 100% !important;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
  }
  body .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body .modal-footer { flex-wrap: wrap; gap: var(--space-2); }
  body .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

  /* Dialog konfirmasi tetap melayang di tengah layar. Bentuk lembar-bawah
     cocok untuk formulir panjang, tapi untuk pertanyaan singkat "Hapus?"
     kotak di tengah lebih jelas dan tidak mudah tersentuh tak sengaja. */
  body #confirm-overlay { align-items: center; padding: var(--space-4); }
  body #confirm-overlay .modal.confirm-dialog {
    max-width: 380px !important;
    width: 100%;
    border-radius: var(--radius-lg);
    max-height: none;
  }

  /* ---- Zona unggah & progres ---- */
  /* Di ponsel tidak ada "seret & lepas", jadi zona ini diperlakukan sebagai
     tombol besar: area sentuh lega, ikon dalam lingkaran, dan umpan balik
     saat ditekan — bukan sekadar kotak putus-putus yang terlihat pasif. */
  body .page-dropzone {
    padding: var(--space-5) var(--space-4);
    border-width: 1.5px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--bg-section), var(--bg-white));
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
  }
  body .page-dropzone:active {
    transform: scale(0.99);
    border-color: var(--gold-main);
    background: var(--gold-pale);
  }
  body .page-dropzone .dz-icon {
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--gold-pale);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  body .page-dropzone .font-medium { font-size: var(--font-size-sm); line-height: 1.35; }
  body .page-dropzone .text-xs { font-size: 11px; line-height: 1.4; }

  /* Daftar berkas terpilih: baris lebih tinggi supaya tombol ✕ mudah ditekan */
  body .selected-file-list { max-height: 190px; }
  body .selected-file-row { padding: 10px 12px; }
  body .selected-file-row .sf-remove { padding: 4px 6px; font-size: 16px; }

  body .upload-progress-card { width: min(320px, 88vw); padding: var(--space-5); }

  /* ---- Kartu & tombol ---- */
  body .card-body { padding: var(--space-4); }
  body .btn { min-height: 40px; }
  body .icon-btn { width: 38px; height: 38px; }

  /* Target sentuh minimal 40px supaya tidak sulit ditekan */
  body .sidebar-nav a,
  body .nav-item { padding: 10px var(--space-5); }
}

/* ------------------------------------------------------------
   PONSEL KECIL (<= 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  body .doc-grid,
  body .categories-grid,
  body .grid-cards,
  body .vault-grid { grid-template-columns: 1fr; }

  body .stats-grid,
  body .quick-actions-grid { grid-template-columns: 1fr; }

  body .page-title { font-size: var(--font-size-lg); }
  body .header-search { display: none; }  /* ruang terlalu sempit; pencarian tetap ada di dalam halaman */

  body .modal-header { padding: var(--space-4); }
  body .modal-body   { padding: var(--space-4); }
  body .modal-footer { padding: var(--space-4); }
  body .modal-footer .btn { width: 100%; flex: 1 1 100%; }

  /* Kecuali dialog konfirmasi: Batal & Konfirmasi tetap bersebelahan */
  body #confirm-overlay .modal-footer .btn { width: auto; flex: 1 1 0; }
}

/* ------------------------------------------------------------
   AREA AMAN iOS (notch / home indicator)
   ------------------------------------------------------------ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body .page-content { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
    body .modal { padding-bottom: env(safe-area-inset-bottom); }
    .sidebar-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  }
}

/* ------------------------------------------------------------
   PERBAIKAN UMUM LINTAS UKURAN
   ------------------------------------------------------------ */
/* Cegah iOS memperbesar layar otomatis saat input difokuskan */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }

  /* Tidak boleh ada geseran mendatar di level halaman —
     tabel tetap boleh digeser di dalam .table-wrapper miliknya sendiri. */
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* Jangan biarkan teks panjang merusak lebar layout */
.doc-title, .card-title, .page-title, .sf-name { overflow-wrap: anywhere; }