/* ============================================================================
   SIPESAT NATIVE FEEL — Progressive enhancement layer
   ----------------------------------------------------------------------------
   Dimuat oleh nav_bawah.php & nav_bawah_guest.php (menjangkau seluruh halaman
   member, admin, dan guest). Murni aditif: mencabut <link> ini mengembalikan
   tampilan lama 100%. Pasangannya: assets/js/sipesat-native.js
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CROSS-DOCUMENT VIEW TRANSITIONS — hilangkan "kedip putih" antar halaman.
   Browser lama mengabaikan blok ini sepenuhnya (fallback = reload biasa).
   --------------------------------------------------------------------------- */
@view-transition {
    /* Disabled: Chromium can reject cross-document transitions while the
       destination is still rendering, leaking an AbortError to the console. */
    navigation: none;
}

@keyframes sipesat-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sipesat-page-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

::view-transition-old(root) {
    animation: sipesat-page-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: sipesat-page-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Bottom nav & dock jangan ikut melayang saat transisi — terasa "menempel"
   seperti tab bar aplikasi native. */
.bottom-nav {
    view-transition-name: sipesat-tabbar;
}
::view-transition-old(sipesat-tabbar),
::view-transition-new(sipesat-tabbar) {
    animation: none;
    mix-blend-mode: normal;
}

/* ----------------------------------------------------------------------------
   2. ANTI-FLASH BACKGROUND — html sudah berwarna benar bahkan sebelum CSS
   halaman termuat, dan mengikuti tema tersimpan (kelas di-set oleh JS segera).
   --------------------------------------------------------------------------- */
html { background-color: #F2F2F7; }
html.sipesat-dark {
    background-color: #1C1C1E;
    color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   3. TOP PROGRESS BAR — indikator navigasi tipis ala aplikasi native.
   Dikendalikan JS: tampil hanya jika navigasi > 180ms.
   --------------------------------------------------------------------------- */
#sipesat-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    width: 0%;
    background: linear-gradient(90deg, #007AFF, #5AC8FA);
    border-radius: 0 999px 999px 0;
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.55);
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s ease, opacity 0.2s ease;
}
#sipesat-progress.active { opacity: 1; }

/* ----------------------------------------------------------------------------
   4. SKELETON / SHIMMER SYSTEM — dipakai via JS helper SipesatUI.skeleton()
   maupun langsung dengan class .sk-line / .sk-circle / .sk-block
   --------------------------------------------------------------------------- */
@keyframes sipesat-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.sk-line, .sk-circle, .sk-block {
    background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 50%, #eef1f6 75%);
    background-size: 200% 100%;
    animation: sipesat-shimmer 1.4s ease-in-out infinite;
    display: block;
}
.sk-line   { height: 13px; border-radius: 7px; margin-bottom: 9px; }
.sk-line.sk-w40 { width: 40%; } .sk-line.sk-w60 { width: 60%; }
.sk-line.sk-w80 { width: 80%; } .sk-line.sk-w100 { width: 100%; }
.sk-circle { border-radius: 50%; width: 42px; height: 42px; }
.sk-block  { border-radius: 14px; height: 84px; margin-bottom: 12px; }
body.dark-mode .sk-line, body.dark-mode .sk-circle, body.dark-mode .sk-block {
    background: linear-gradient(90deg, #2C2C2E 25%, #3A3A3C 50%, #2C2C2E 75%);
    background-size: 200% 100%;
}

/* ----------------------------------------------------------------------------
   5. TOAST CAPSULE — notifikasi ringan ala iOS Dynamic-Island, dipanggil via
   SipesatUI.toast('Tersimpan ✓'). Tidak mengganggu SweetAlert yang sudah ada.
   --------------------------------------------------------------------------- */
#sipesat-toast {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -80px);
    background: rgba(18, 18, 20, 0.92);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 2147483001;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    max-width: min(86vw, 420px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sipesat-toast.show { transform: translate(-50%, 0); opacity: 1; }
#sipesat-toast.toast-error   { background: rgba(190, 32, 28, 0.94); }
#sipesat-toast.toast-success { background: rgba(20, 128, 68, 0.94); }

/* ----------------------------------------------------------------------------
   6. OPTIMISTIC STATE — elemen yang sedang "menunggu konfirmasi server"
   --------------------------------------------------------------------------- */
.sipesat-pending {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.7);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.sipesat-commit { animation: sipesat-commit-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sipesat-commit-pop {
    0% { transform: scale(0.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------------
   7. POLESAN DESKTOP (admin/staff banyak kerja di layar lebar)
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.35);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.6); }
    body.dark-mode ::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.3); }

    .table-hover tbody tr, .table tbody tr { transition: background-color 0.12s ease; }

    a, button, .btn, .nav-link, [role="button"] { outline: none; }
    a:focus-visible, button:focus-visible, .btn:focus-visible,
    .form-control:focus-visible, .form-select:focus-visible {
        outline: 2px solid rgba(0, 122, 255, 0.55) !important;
        outline-offset: 2px !important;
    }
}

::selection { background: rgba(0, 122, 255, 0.22); }

/* ----------------------------------------------------------------------------
   8. NATIVE TOUCH FEEL
   --------------------------------------------------------------------------- */
body {
    /* Jangan memutus scroll wheel saat pointer berada di card/panel. */
    overscroll-behavior-y: auto;
    -webkit-tap-highlight-color: transparent;
}

/* Riwayat memakai pull-to-refresh khusus, jadi efek bounce tetap ditahan. */
body[data-sipesat-ptr] {
    overscroll-behavior-y: none;
}
.bottom-nav, .bottom-nav * { user-select: none; -webkit-user-select: none; }

/* Kartu & tombol terasa "ditekan" seperti komponen native */
.card:active, .history-card:active, .notif-card:active,
.quick-action-card:active, .menu-item:active, .feature-card:active {
    transform: scale(0.985);
    transition: transform 0.09s ease;
}

/* ----------------------------------------------------------------------------
   10. TABEL ADMIN DESKTOP — sticky header + scroll terkurung (Fase 3)
   Header kolom tetap terlihat saat admin menggulung ratusan baris pengajuan.
   Browser tanpa :has() sekadar kehilangan fitur ini, tidak rusak.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .table-responsive:has(> #tabelPengajuan) {
        max-height: 72vh;
        overflow-y: auto !important;
        border-radius: 14px;
    }
    #tabelPengajuan thead th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #f8fafc;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.10);
    }
    body.dark-mode #tabelPengajuan thead th {
        background: #111827;
        color: #94a3b8;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10);
    }
    #tabelPengajuan tbody tr:hover td { background: rgba(0, 122, 255, 0.045); }
}

/* ----------------------------------------------------------------------------
   11. INPUT SHIMMER — field "berdenyut" saat data sedang dicari (Fase 3)
   Dipasang/dilepas oleh JS pada lookup NPM kiosk & anggota kelompok.
   --------------------------------------------------------------------------- */
.input-loading {
    background-image: linear-gradient(90deg,
        rgba(203, 213, 225, 0) 25%,
        rgba(148, 163, 184, 0.35) 50%,
        rgba(203, 213, 225, 0) 75%) !important;
    background-size: 200% 100% !important;
    animation: sipesat-shimmer 1.1s ease-in-out infinite;
    pointer-events: none;
}
body.dark-mode .input-loading {
    background-image: linear-gradient(90deg,
        rgba(58, 58, 60, 0) 25%,
        rgba(120, 120, 128, 0.4) 50%,
        rgba(58, 58, 60, 0) 75%) !important;
}

/* ----------------------------------------------------------------------------
   12. PULL-TO-REFRESH — indikator lingkaran ala app native (Fase 3)
   Aktif hanya pada halaman yang menyetel data-sipesat-ptr / window.sipesatPTR.
   --------------------------------------------------------------------------- */
#sipesat-ptr {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483001;
    opacity: 0;
    transform: translateY(-70px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
    pointer-events: none;
    color: #007AFF;
    font-size: 1.2rem;
}
#sipesat-ptr.dragging { transition: opacity 0.18s ease; }
#sipesat-ptr.armed { color: #059669; }
#sipesat-ptr.spinning i { animation: sipesat-ptr-spin 0.8s linear infinite; }
@keyframes sipesat-ptr-spin { to { transform: rotate(360deg); } }
body.dark-mode #sipesat-ptr {
    background: rgba(28, 28, 30, 0.97);
    border-color: rgba(255, 255, 255, 0.14);
    color: #0A84FF;
}

/* ----------------------------------------------------------------------------
   9. AKSESIBILITAS — matikan seluruh animasi bila user memintanya
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .sk-line, .sk-circle, .sk-block { animation: none; }
    #sipesat-toast { transition: opacity 0.2s ease; }
    .sipesat-commit { animation: none; }
    .input-loading { animation: none; }
    #sipesat-ptr.spinning i { animation: none; }
}