/* =====================================================================
   enhance.css — Penyempurnaan responsif (HP), animasi ringan, & loader
   Ditambahkan tanpa mengubah build Tailwind (file CSS terpisah).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Guard responsif — cegah konten "kepotong" / scroll horizontal di HP
   --------------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

/* Media tidak boleh melebihi lebar kontainernya */
img, svg, video, canvas {
    max-width: 100%;
}

/* Scroll tabel lebih halus di layar sentuh */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Beri sedikit ruang ekstra di ponsel kecil (≤480px) */
@media (max-width: 480px) {
    .p-container-margin { padding: 16px; }
    .px-container-margin { padding-left: 16px; padding-right: 16px; }

    /* Heading dashboard sedikit lebih ringkas */
    h2.font-headline-lg { line-height: 1.2; }
}

/* ---------------------------------------------------------------------
   2. Animasi ringan saat halaman tampil (entrance)
   Berlaku di SEMUA halaman: setiap anak langsung <main> memudar naik,
   dengan jeda bertahap (stagger). Aman: bila CSS gagal dimuat, konten
   tetap terlihat normal.
   --------------------------------------------------------------------- */
@keyframes enhFadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes enhFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    main > * {
        animation: enhFadeInUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    main > *:nth-child(1) { animation-delay: 0.03s; }
    main > *:nth-child(2) { animation-delay: 0.09s; }
    main > *:nth-child(3) { animation-delay: 0.15s; }
    main > *:nth-child(4) { animation-delay: 0.21s; }
    main > *:nth-child(5) { animation-delay: 0.27s; }
    main > *:nth-child(6) { animation-delay: 0.33s; }
    main > *:nth-child(7) { animation-delay: 0.39s; }
    main > *:nth-child(n+8) { animation-delay: 0.45s; }

    /* Header/topbar memudar lembut */
    body > header { animation: enhFadeIn 0.6s ease both; }

    /* Drawer mobile geser-masuk sudah ditangani Tailwind (transition-transform) */
}

/* Micro-interaction: tautan & tombol terasa "hidup" */
@media (prefers-reduced-motion: no-preference) {
    .btn-primary { transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease; }
    .btn-primary:hover { transform: translateY(-1px); }
    .btn-primary:active { transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   3. Loader navigasi — progress bar atas + spinner halus
   Ditampilkan saat berpindah halaman (lihat enhance.js).
   --------------------------------------------------------------------- */
.enh-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
}
.enh-progress__inner {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #00855d, #cba72f);
    box-shadow: 0 0 10px rgba(0, 133, 93, 0.7), 0 0 4px rgba(203, 167, 47, 0.5);
    border-radius: 0 2px 2px 0;
}
.enh-progress.is-active {
    opacity: 1;
}
.enh-progress.is-active .enh-progress__inner {
    width: 92%;
    /* Merayap perlahan ke 92% selama menunggu respons server */
    transition: width 9s cubic-bezier(0.1, 0.5, 0.2, 1);
}
.enh-progress.is-done {
    opacity: 0;
    transition: opacity 0.35s ease 0.1s;
}
.enh-progress.is-done .enh-progress__inner {
    width: 100%;
    transition: width 0.2s ease;
}

.enh-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 252, 240, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.enh-overlay.is-show {
    opacity: 1;
    visibility: visible;
}
.enh-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(0, 105, 72, 0.18);
    border-top-color: #006948;
    animation: enhSpin 0.7s linear infinite;
}
@keyframes enhSpin {
    to { transform: rotate(360deg); }
}

/* Hormati preferensi pengguna yang meminimalkan gerakan */
@media (prefers-reduced-motion: reduce) {
    .enh-spinner { animation-duration: 1.2s; }
    .enh-progress.is-active .enh-progress__inner { transition: none; width: 92%; }
}

/* ---------------------------------------------------------------------
   4. Perbaikan state "terpilih" pada radio/checkbox kustom
   Utility Tailwind "peer-checked:*" TIDAK ikut terkompilasi di app.css,
   sehingga kartu pilihan (Perasaan, Alasan udzur, Jenis kelamin) tidak
   tampak berubah saat dipilih. Aturan di bawah memulihkan tampilannya.
   Pola markup: <input class="peer sr-only"> langsung diikuti <div>.
   --------------------------------------------------------------------- */
input.peer:checked + div {
    border-color: rgb(0 105 72);              /* setara peer-checked:border-primary */
    background-color: rgb(0 133 93 / 0.1);    /* setara peer-checked:bg-primary-container/10 */
}

/* Penanda terpilih lebih jelas + sedikit "hidup" */
@media (prefers-reduced-motion: no-preference) {
    input.peer:checked + div {
        box-shadow: inset 0 0 0 1px rgb(0 105 72 / 0.45);
        transform: translateY(-1px);
        transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }
}

/* Fokus keyboard terlihat (input asli disembunyikan via sr-only) */
input.peer:focus-visible + div {
    outline: 2px solid rgb(0 105 72 / 0.55);
    outline-offset: 2px;
}