/* ================================================================
 * RESPONSIVE PHASE 7 SWEEP
 * ================================================================
 * File: assets/responsive-phase7.css
 *
 * Tweak responsive untuk halaman Phase 2-6 yang butuh adjustment
 * khusus di layar kecil. Halaman lama sudah handled oleh
 * responsive-global.css.
 * ================================================================ */

/* ===== TABEL ADMIN (kelola_masukan, log_tautan_drive, kelola_kuesioner) ===== */
/* Pastikan tabel di-wrap horizontal scroll, tidak meledak layar mobile */
@media (max-width: 768px) {
 .km-table,
 table.table {
 font-size: .78rem !important;
 }
 .km-table th,
 .km-table td,
 table.table th,
 table.table td {
 padding: 6px 8px !important;
 white-space: nowrap;
 }
 .badge-pill,
 .badge {
 font-size: .65rem !important;
 padding: 2px 6px !important;
 }
}

/* ===== STAT CARDS (km-stat-card, ksn-card) ===== */
@media (max-width: 540px) {
 .km-stat-card,
 .ksn-card,
 .testi-card-admin {
 padding: 10px !important;
 }
 .km-stat-card .val {
 font-size: 1.1rem !important;
 }
 .km-stat-card .label {
 font-size: .7rem !important;
 }
}

/* ===== FORM SUBMIT BUTTONS GROUP (kelola_masukan batch action) ===== */
@media (max-width: 540px) {
 .export-btn-grp {
 flex-direction: column;
 align-items: stretch;
 width: 100%;
 }
 .export-btn-grp a {
 text-align: center;
 font-size: .8rem !important;
 }
}

/* [v41 2026-05-13] MODAL fullscreen rule di sini DIHAPUS karena sekarang
 modal pakai pola CENTERED (di tengah layar) yang di-define di
 mobile-app-shell.css. Rule lama ini bikin konflik fullscreen. */

/* ===== KOTAK MASUKAN / CEK TIKET (full-width container di HP) ===== */
@media (max-width: 540px) {
 .km-container,
 .cbt-wrap,
 .container-cek {
 padding: 0 10px;
 }
 .km-card,
 .cek-card,
 .cbt-card {
 padding: 18px !important;
 border-radius: 12px !important;
 }
 .km-kategori-grid,
 .km-grid {
 grid-template-columns: repeat(2, 1fr) !important;
 gap: 6px;
 }
 .km-kategori-opt,
 .km-opt {
 padding: 8px 4px !important;
 }
 .opsi-tiket {
 grid-template-columns: 1fr !important;
 }
}

/* ===== AI BOX edit_kuesioner ===== */
@media (max-width: 768px) {
 .ai-box .row {
 --bs-gutter-y: .5rem;
 }
}

/* ===== CBT FORM (isi_kuesioner), rating buttons compact ===== */
@media (max-width: 380px) {
 .rating-row {
 gap: 3px;
 }
 .rating-btn {
 padding: 6px 1px !important;
 }
 .rating-num {
 font-size: 1rem !important;
 }
 .rating-lbl {
 font-size: .55rem !important;
 }
}

/* ===== TAP TARGET MINIMUM 44px (Apple HIG) ===== */
@media (max-width: 768px) {
 .btn-sm,
 button.btn-sm,
 a.btn-sm {
 min-height: 36px;
 padding: 6px 12px;
 }
}

/* ===== TIMELINE (cek_tiket, detail_masukan) ===== */
@media (max-width: 540px) {
 .timeline {
 padding-left: 14px;
 border-left-width: 2px;
 }
 .timeline-item::before {
 left: -22px;
 width: 10px;
 height: 10px;
 }
}

/* ===== CHAT ASISTEN, pastikan input row tidak meleber ===== */
@media (max-width: 480px) {
 .ca-input-row input {
 font-size: 16px !important; /* anti auto-zoom iOS */
 }
}

/* ===== LOADING OVERLAY mobile ===== */
@media (max-width: 360px) {
 .lms-toga-wrap {
 width: 90px !important;
 height: 90px !important;
 }
 .lms-loading-label {
 font-size: .85rem !important;
 }
 .lms-loading-sub {
 font-size: .72rem !important;
 }
}

/* ===== STAT CARDS PHASE 4/5 (3-column grid → 2 di HP) ===== */
@media (max-width: 540px) {
 .ksn-stat {
 flex-wrap: wrap;
 gap: 8px;
 }
 .ksn-stat-item {
 font-size: .78rem !important;
 }
}