/* =============================================================================
   responsive.css
   -----------------------------------------------------------------------------
   Basis desain adalah HP 360–430px (ada di style.css). Berkas ini hanya
   berisi penyesuaian komponen isi halaman untuk layar yang lebih besar.

   Kerangka (sidebar, topbar, tabbar, lebar konten) diatur shell.css, bukan
   di sini — supaya titik pindah antar model navigasi hanya ada di satu tempat.
   ========================================================================== */

/* -------------------- HP kecil (≤ 360px) -------------------------------- */

@media (max-width: 360px) {
  :root { --pad: 13px; --gap: 11px; }

  .hero__hi { font-size: 20px; }
  .quick-grid { gap: 8px; }
  .quick { min-height: 78px; font-size: 11.5px; }
  .score-btn { min-height: 52px; font-size: 18px; }
  .key { min-height: 52px; font-size: 21px; }
  .stat strong { font-size: 19px; }
}

/* --------- iOS: cegah zoom otomatis saat fokus ke input ----------------- */

@supports (-webkit-touch-callout: none) {
  .field input,
  .field select,
  .field textarea,
  .search-inline input { font-size: 16px; }
}

/* ------------------------- Tablet (≥ 600px) ----------------------------- */

@media (min-width: 600px) {
  /* .view dan tipografi dasar diatur shell.css + tokens.css */
  .quick-grid { grid-template-columns: repeat(6, 1fr); }
  .quick { min-height: 92px; }

  .class-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .menu-grid--list { grid-template-columns: repeat(2, 1fr); }

  .score-row { gap: 10px; }
  .keypad { max-width: 340px; gap: 10px; }

  .modal-backdrop { align-items: center; padding: 24px; }
  .modal { border-radius: var(--radius-lg); max-height: 86vh; }
  .modal__foot { padding-bottom: 14px; }

  .sheet-backdrop { padding-top: 48px; }
  .search-panel { border-radius: var(--radius-lg); }

  .fab { right: 26px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 22px); }
}

/* ------------------- Laptop & desktop (≥ 900px) ------------------------- */

@media (min-width: 900px) {
  .class-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-grid { grid-template-columns: repeat(6, 1fr); }

  .toast-wrap { bottom: 24px; }

  .fab { bottom: 30px; right: 30px; }

  /* Layar lebar: keypad dan tombol skor tidak perlu melebar penuh */
  .score-pad, .quick-input { max-width: 560px; }

  .chart-box { height: 300px; }
}

/* -------------------------- Layar sangat lebar -------------------------- */

@media (min-width: 1280px) {
  .class-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------- cetak ---------------------------------- */

@media print {
  .fab, .toolbar, .form-actions { display: none !important; }
  .card, .list-item, .stat { box-shadow: none; border-color: #999; }
}

/* ---- Tambahan responsif untuk komponen baru ---- */

@media (max-width: 360px) {
  .kode-input { height: 64px; font-size: 28px; }
  .kode-besar { font-size: 34px; }
  .check-chip { min-height: 38px; font-size: 12.5px; }
}

@media (min-width: 600px) {
  .quick-preview { min-height: 40px; }
  .check-grid { gap: 10px; }
  .pekan-preview { max-width: 520px; }
}

@media (min-width: 900px) {
  .submit-card__main { padding: 16px; }
  .qcard { max-width: 640px; }
  .kode-input-wrap { max-width: 380px; margin: 6px auto; }
}

/* ---- Jadwal ---- */

@media (max-width: 360px) {
  .sched-item { gap: 10px; padding-left: 12px; }
  .sched-item__time { min-width: 46px; padding-right: 10px; }
  .sched-item__time strong { font-size: 15px; }
  .sched-item__nama { font-size: 14.5px; }
  .day-chips { gap: 4px; }
  .day-chip { padding: 6px 2px; }
  .day-chip__label { font-size: 12px; }
  .day-chip[data-hari="semua"] .day-chip__label { font-size: 9.5px; }
}

@media (min-width: 600px) {
  .day-chips { gap: 8px; }
  .day-chip { padding: 8px 6px; }
  .day-chip__label { font-size: 14px; }
  .day-chip[data-hari="semua"] .day-chip__label { font-size: 12.5px; }
  .sched-item { padding: 14px 6px 14px 16px; }
  .sched-item__time { min-width: 60px; }
  .sched-item__time strong { font-size: 17px; }
}

@media (min-width: 900px) {
  /* FAB tidak lagi menutupi konten pada layar lebar */
  .sched-day:last-child { margin-bottom: 24px; }

  /* Sepekan penuh dibaca berdampingan, bukan satu kolom panjang */
  .sched-week-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-items: start;
  }
  .sched-pekan { max-width: 520px; }
}