/*
 * ================================================================
 *  MOBILE RESPONSIVE — Halaman Pelamar & Publik
 *  Berlaku untuk: welcome, login, register, pelamar/*, pengumuman, tata-tertib
 * ================================================================
 */

/* ── 1. Base: pastikan tidak ada overflow horizontal ─────────── */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ── 2. Gambar selalu responsif ──────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* ── 3. Tabel: scroll horizontal jika terlalu lebar ─────────── */
table {
    max-width: 100%;
}

/* ── 4. Input & button: ukuran sentuh minimal 44px ──────────── */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important; /* Mencegah zoom otomatis di iOS */
        min-height: 44px;
    }

    button,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── 5. Pelamar Dashboard — kartu identitas ──────────────────── */
@media (max-width: 600px) {
    /* Kartu identitas peserta */
    .pelamar-identity-card {
        padding: 16px !important;
    }
    .pelamar-identity-card h2 {
        font-size: 18px !important;
    }

    /* Stat berkas: 2 kolom di HP */
    .berkas-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Info ujian: 1 kolom di HP */
    .info-ujian-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 400px) {
    /* Stat berkas: 2 kolom tetap */
    .berkas-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 6. Berkas upload — area drag & drop ─────────────────────── */
@media (max-width: 600px) {
    .upload-area {
        padding: 14px 12px !important;
    }
    .berkas-header {
        padding: 12px 14px !important;
    }
    .berkas-body {
        padding: 0 14px 14px !important;
    }
    .berkas-nomor {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    .berkas-nama {
        font-size: 13px !important;
    }
    .berkas-ket {
        font-size: 11px !important;
    }
}

/* ── 7. Tombol aksi berkas — stack di HP ─────────────────────── */
@media (max-width: 480px) {
    .berkas-body .d-flex[style*="gap:8px"] {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .berkas-body .d-flex[style*="gap:8px"] button,
    .berkas-body .d-flex[style*="gap:8px"] a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ── 8. Jadwal ujian — info tanggal/jam ──────────────────────── */
@media (max-width: 480px) {
    /* Divider vertikal antara tanggal & jam: sembunyikan */
    .jadwal-divider {
        display: none !important;
    }
    /* Stack tanggal & jam */
    .jadwal-info-wrap {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }
}

/* ── 9. Tombol mulai ujian — full width di HP ────────────────── */
@media (max-width: 480px) {
    a[href*="ujian"][style*="padding:15px 48px"],
    a[href*="ujian"].btn-mulai-ujian {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
}

/* ── 10. Skor hasil ujian — layout responsive ────────────────── */
@media (max-width: 480px) {
    /* Kartu skor: stack vertikal */
    .skor-wrap {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .skor-divider {
        display: none !important;
    }
    .skor-total {
        font-size: 28px !important;
    }
}

/* ── 11. Form pendaftaran (create.blade.php) ─────────────────── */
@media (max-width: 600px) {
    .form-card-body {
        padding: 16px !important;
    }
    .form-header-card {
        padding: 14px 16px !important;
    }
}

/* ── 12. Topbar pelamar — nama user truncate ─────────────────── */
@media (max-width: 480px) {
    .topbar-user {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── 13. Progress bar berkas — header ────────────────────────── */
@media (max-width: 480px) {
    .berkas-progress-wrap {
        width: 80px !important;
    }
    .berkas-progress-number {
        font-size: 18px !important;
    }
}

/* ── 14. Alert/banner status berkas ─────────────────────────── */
@media (max-width: 480px) {
    .status-banner {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .status-banner a {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── 15. Ujian — soal content ────────────────────────────────── */
@media (max-width: 480px) {
    .question-content table {
        font-size: 12px !important;
    }
    .question-content td,
    .question-content th {
        padding: 4px 6px !important;
    }
    .option-content table {
        font-size: 12px !important;
    }
}

/* ── 16. Ujian — nav soal scrollable ────────────────────────── */
@media (max-width: 480px) {
    .nav-numbers {
        gap: 4px !important;
    }
    .btn-nav-num {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}

/* ── 17. Welcome page — hero section ────────────────────────── */
@media (max-width: 480px) {
    .hero-judul {
        font-size: clamp(26px, 8vw, 36px) !important;
    }
    .hero-sub {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    .btn-cta {
        width: 100% !important;
        text-align: center !important;
    }
    .cta-group {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 16px !important;
    }
}

/* ── 18. Login/Register — panel kanan ───────────────────────── */
@media (max-width: 480px) {
    .panel-kanan {
        padding: 24px 16px !important;
    }
    .form-header-judul {
        font-size: 26px !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── 19. Pengumuman/Tata Tertib — grid ───────────────────────── */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .page-header {
        padding: 24px 14px 20px !important;
    }
    .main {
        padding: 16px 12px 32px !important;
    }
}

/* ── 20. Lightbox — navigasi di HP ──────────────────────────── */
@media (max-width: 480px) {
    .lightbox-prev { left: 4px !important; }
    .lightbox-next { right: 4px !important; }
    .lightbox-close { top: 8px !important; right: 10px !important; font-size: 26px !important; }
    #lightbox-img { max-width: 96vw !important; }
}

/* ── 21. Topbar publik — navigasi ────────────────────────────── */
@media (max-width: 480px) {
    .topbar {
        padding: 8px 10px !important;
    }
    .topbar-nama {
        display: none !important;
    }
    .btn-nav {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ── 22. Sticky topbar — tidak overlap konten ───────────────── */
@media (max-width: 767px) {
    body {
        scroll-padding-top: 70px;
    }
}

/* ── 23. Berkas card — badge status di HP ────────────────────── */
@media (max-width: 480px) {
    .berkas-status {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }
    .badge-pending,
    .badge-ok,
    .badge-rejected,
    .badge-empty {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
}

/* ── 24. Kembali ke dashboard — tombol ───────────────────────── */
@media (max-width: 480px) {
    a[href*="dashboard"].btn-kembali,
    .btn-kembali-dashboard {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 25. Safe area untuk notch/home indicator (iOS) ─────────── */
@supports (padding: max(0px)) {
    .topbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── 26. Ujian — header fixed di mobile ─────────────────────── */
@media (max-width: 480px) {
    #cat-header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    /* Nav bar ujian: sticky */
    #nav-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
    }
}

/* ── 27. Pelamar dashboard — info cards grid ─────────────────── */
@media (max-width: 360px) {
    /* Info ujian: 1 kolom di HP sangat kecil */
    .anim-3 > div {
        padding: 14px 12px !important;
    }
}

/* ── 28. Form create pelamar — select dropdown ───────────────── */
@media (max-width: 480px) {
    select.form-input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 36px !important;
    }
}

/* ── 29. Berkas index — template download button ─────────────── */
@media (max-width: 480px) {
    div[style*="background:#eff6ff"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    div[style*="background:#eff6ff"] a[style*="background:#2563eb"] {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── 30. Ujian — overlay warning di HP ──────────────────────── */
@media (max-width: 480px) {
    #overlay-warning .warn-box {
        padding: 24px 16px !important;
        margin: 12px !important;
        border-radius: 12px !important;
    }
    #overlay-warning .warn-icon {
        font-size: 40px !important;
        margin-bottom: 12px !important;
    }
    #overlay-warning h4 {
        font-size: 17px !important;
    }
    #overlay-warning p {
        font-size: 13px !important;
    }
    #overlay-warning .btn-kembali {
        width: 100% !important;
        padding: 12px !important;
    }
}