.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.timeline-line {
    position: absolute;
    left: 15px;
    top: 10px;
    bottom: -20px;
    width: 2px;
    background-color: #e2e8f0;
}
.history-item:last-child .timeline-line { display: none; }

.wave-container {
    position: relative;
    background: #f39200;
    overflow: hidden;
}
.wave-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.wave-shape svg {
    position: relative;
    display: block;
    width: calc(151% + 1.3px);
    height: 80px;
}
.wave-shape .shape-fill {
    fill: #FFFFFF;
}

.nav-link {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.nav-link:hover {
    color: #f39200;
}

.bg-stripes {
    background-image: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 10px, #fef2f2 10px, #fef2f2 20px);
}

/* Admin — mobile */
.admin-nav-btn {
    min-height: 2.75rem;
}

/* ===================================================================
   MODAL FORM RESI — Pattern: overlay sebagai scroll container
   - Desktop (>= 640px): panel di tengah, area dalam scroll, max 95dvh
   - Mobile (< 640px): overlay scroll natif, panel block, header/footer sticky
   =================================================================== */

/* Default state untuk modal — apply ke semua viewport */
#resi-modal {
    -webkit-overflow-scrolling: touch;
}

/* Body lock — HANYA overflow hidden, JANGAN pakai touch-action: none
   (touch-action: none di body memblokir scroll di dalam modal pada Chrome Android) */
body.modal-open {
    overflow: hidden;
}

/* ===== Modal generik (password, delete) =====
   PENTING: pakai :not(.hidden) supaya selektor ini hanya match ketika modal benar-benar
   terbuka. Tanpa ini, kombinasi class Tailwind "hidden ... flex" akan bug karena
   responsive variant flex di-emit setelah .hidden → modal selalu tampil otomatis. */
.generic-modal:not(.hidden) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
@media (min-width: 640px) {
    .generic-modal:not(.hidden) {
        align-items: center;
        padding: 1rem;
    }
}

/* Loading state pada halaman pencarian resi */
#loading-state:not(.hidden) {
    display: flex;
}

/* View admin (login & dashboard) di index.php — hanya tampil ketika tidak hidden */
#admin-login-view:not(.hidden) {
    display: flex;
}
#admin-dashboard-view:not(.hidden) {
    display: flex;
}

/* ===== DESKTOP (>= 640px / Tailwind sm) ===== */
@media (min-width: 640px) {
    /* Resi modal — centering di tengah viewport */
    #resi-modal:not(.hidden) {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .admin-modal-shell {
        display: flex;
        flex-direction: column;
        max-height: 95dvh;
        min-height: 0;
        width: 100%;
        max-width: 56rem;
    }
    .resi-modal-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-height: 0;
        overflow: hidden;
    }
    .admin-modal-scroll {
        flex: 1 1 0%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ===== MOBILE (< 640px) ===== */
@media (max-width: 639px) {
    #toast {
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        max-width: none;
    }

    /* Overlay = scroll container natif. Semua nested flex DIMATIKAN.
       PENTING: pakai :not(.hidden) supaya layout HANYA aktif saat modal terbuka.
       Tanpa ini, ID selector akan mengalahkan .hidden Tailwind → modal muncul sendiri. */
    #resi-modal:not(.hidden) {
        position: fixed;
        inset: 0;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 0;
        -webkit-overflow-scrolling: touch;
    }

    .admin-modal-shell {
        display: block;
        border-radius: 0;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    .resi-modal-form {
        display: block;
        overflow: visible;
        min-height: auto;
    }

    .admin-modal-scroll {
        display: block;
        overflow: visible;
        min-height: auto;
        padding: 1rem;
    }

    /* Header tetap menempel di atas saat scroll */
    .resi-modal-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
    }

    /* Footer tombol tetap menempel di bawah saat scroll */
    .resi-modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 20;
    }
}