/* =========================================================
   Tampilan handphone & tablet
   - <= 1024px : tablet (menu jadi laci + top bar)
   - <= 640px  : handphone (tabel jadi kartu, modal dari bawah)
   ========================================================= */

.topbar, .scrim { display: none; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.no-scroll { overflow: hidden; }

/* ---------- Tablet & handphone ---------- */
@media (max-width: 1024px) {
  .shell { display: block; }

  .topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px calc(16px + env(safe-area-inset-left, 0px));
    background: rgba(238, 248, 236, .92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-title { font: 400 21px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn {
    width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    display: grid; place-content: center; gap: 4px; cursor: pointer;
  }
  .menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .sidebar {
    position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; height: auto;
    width: min(300px, 84vw); overflow-y: auto;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 18px calc(20px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
    background: var(--bg); border-right: 1px solid var(--line);
    transform: translateX(-102%); transition: transform .25s ease; visibility: hidden;
  }
  .sidebar.open { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(22, 53, 42, .2); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(22, 53, 42, .35); }
  .scrim[hidden] { display: none; }
  nav a { padding: 12px; }

  .page { max-width: none; padding: 28px clamp(16px, 4vw, 32px) calc(60px + env(safe-area-inset-bottom, 0px)); }
  .page-head { margin-bottom: 22px; }
  .display { font-size: clamp(30px, 6vw, 44px); }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > div:nth-child(3) { border-left: 0; }
  .kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dash-grid .card:not(.span-2) { min-width: 0; }

  /* Sentuhan: area tekan minimal 44px */
  .btn { min-height: 44px; }
  .btn.small { min-height: 36px; padding: 6px 14px; }
  .pager button { min-width: 40px; height: 40px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; flex: none; }
}

/* ---------- Tablet portrait: dua kolom tetap, kartu dashboard satu kolom ---------- */
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
  .sign-grid { grid-template-columns: 1fr; }

  /* Tabel menjadi kartu */
  .page table, .page thead, .page tbody, .page tr, .page td { display: block; width: 100%; }
  .page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page tbody tr { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); }
  .page tbody tr:hover { background: var(--surface); }
  .page td { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 6px 0; border: 0; word-break: break-word; }
  .page td > .badge { justify-self: start; }
  .page td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  .page td[data-label=""] { display: block; }
  .page td[data-label=""]::before, .page td.empty::before { display: none; }
  .page td.empty { display: block; text-align: center; }
  .page td.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 12px; margin-top: 6px; border-top: 1px solid #EAF3E8; }
  .page td.actions::before { display: none; }
  .page td.actions .btn + .btn { margin-left: 0; }
  .page td.actions .btn { flex: 1 1 auto; justify-content: center; }
  .table-wrap { overflow: visible; }

  /* Tablet: kartu tersusun dua kolom */
  .page tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page tbody tr { margin-bottom: 0; }
  .page tbody tr:has(td.empty) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page tbody { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Handphone ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 16px mencegah iPhone memperbesar layar saat mengetik */
  input, select, textarea { font-size: 16px; padding: 12px; }

  .page { padding-top: 20px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .page-head > .btn, .page-head > a.btn { justify-content: center; }
  p.lead { font-size: 14px; }
  .card { padding: 18px; border-radius: 18px; }
  h2 { font-size: 21px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }

  /* Pilihan jenis form: tiga tombol sama lebar */
  .form-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 0; }
  .form-types button { font-size: 15px; padding: 10px 6px; border-radius: 12px; text-align: center; }

  .sign-panel { padding: 14px; }
  .sign-panel > .sign-tools:first-child { flex-wrap: wrap; gap: 10px; }
  .sign-area { height: 200px; }

  /* Tombol simpan menempel di bawah layar */
  .form-actions {
    position: sticky; bottom: 0; z-index: 4; margin: 0 -16px;
    padding: 18px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(238, 248, 236, 0), var(--bg) 35%);
  }
  .form-actions .btn { flex: 1; justify-content: center; padding: 10px 12px; white-space: nowrap; }

  /* Filter */
  .toolbar { gap: 10px; }
  .toolbar label, .toolbar .grow { flex: 1 1 100%; }
  .toolbar .btn { flex: 1; justify-content: center; }
  .toolbar label { min-width: 0; }
  .toolbar input, .toolbar select { min-width: 0; }
  .dash-filter label { flex: 1 1 calc(50% - 5px); }

  /* Pagination ringkas: sebelumnya, halaman aktif, berikutnya */
  .pager { flex-direction: column; align-items: stretch; text-align: center; }
  .pager .pages { justify-content: center; }
  .pager .pages button:not([aria-label]):not([aria-current]) { display: none; }

  /* Dashboard */
  .kpis > div { padding: 16px; }
  .kpis strong { font-size: 32px; margin-bottom: 4px; }
  .kpis span { font-size: 13px; }
  .kpis small { font-size: 12px; }
  .trend { min-width: 560px; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Detail & tanda tangan pada modal */
  .detail { grid-template-columns: 1fr; gap: 2px; }
  .detail dd { margin-bottom: 8px; }
  .sig-view { grid-template-columns: 1fr; }

  /* Modal muncul dari bawah layar */
  dialog, dialog.wide {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0;
    max-height: 92vh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .modal-actions .btn { flex: 1; justify-content: center; }

  /* Upload master */
  .upload-steps li { padding-left: 46px; }
  .upload-actions { width: 100%; }
  .upload-actions .btn { flex: 1; justify-content: center; }
  .stats div { min-width: calc(50% - 6px); flex: 1; }

  #toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-width: 90vw; white-space: normal; text-align: center; border-radius: 16px; }
  .login { gap: 24px; }
}

/* ---------- Layar sangat kecil (≤ 360px) ---------- */
@media (max-width: 360px) {
  .form-types button { font-size: 13px; }
  .page td { grid-template-columns: 96px 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .kpis > div { border-left: 0 !important; border-top: 1px solid var(--line); }
  .kpis > div:first-child { border-top: 0; }
}

/* Orientasi landscape di handphone: area tanda tangan lebih pendek */
@media (max-height: 500px) and (orientation: landscape) {
  .sign-area { height: 150px; }
  .sign-grid { grid-template-columns: 1fr 1fr; }
}