/* ==========================================================================
   app-custom.css — INTEGRITY RECEIPT (Sneat, tema hijau #056e4f)
   Mengikuti DESIGN SYSTEM Sneat §11.
   Muat SETELAH core.css dan demo.css agar override-nya menang.
   ========================================================================== */

:root {
    --app-primary: #056e4f;
    --app-primary-rgb: 5, 110, 79;
}

/* ---- Loading overlay global (§11) -------------------------------------- */

#app-loading {
    /* Hindari `inset`: tidak didukung Safari/iOS lama sehingga overlay
       tidak pernah terlihat di sana. */
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#app-loading.show { display: flex; }

.app-loading-box { text-align: center; }

.app-spinner {
    width: 52px; height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid rgba(5, 110, 79, .18);
    border-top-color: var(--app-primary);
    animation: appspin .8s linear infinite;
}

.app-loading-text {
    margin-top: 14px;
    font-weight: 500;
    color: var(--app-primary);
}

@keyframes appspin { to { transform: rotate(360deg); } }

/* ---- Badge lonceng notifikasi + denyut (§11, dipakai di halaman admin) -- */

.badge-notify {
    position: absolute;
    top: 2px; right: 2px;
    font-size: .65rem;
    padding: .2em .45em;
}

.badge-notify::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 62, 29, .6);
    animation: apppulse 1.6s infinite;
}

@keyframes apppulse {
    70%  { box-shadow: 0 0 0 8px rgba(255, 62, 29, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 62, 29, 0); }
}

/* ---- Indikator geser pada tabel di layar kecil (§11) -------------------- */

@media (max-width: 991.98px) {
    .table-responsive { position: relative; }
    .table-responsive::-webkit-scrollbar { height: 6px; }
    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(5, 110, 79, .4);
        border-radius: 3px;
    }
}

/* ==========================================================================
   Khusus halaman publik
   ========================================================================== */

/* Kepala bermerek di atas kartu. Halaman publik tidak memakai sidebar
   maupun navbar Sneat -- pengunjung tidak punya menu apa pun -- jadi
   identitas aplikasi dibawa oleh potongan ini. */
.app-kepala {
    background: linear-gradient(135deg, #056e4f, #0a8c65);
    border-bottom: 3px solid #c9a227;
    color: #fff;
}

/* Lencana logo.
   Latarnya putih pekat, bukan putih tembus: logo IR aslinya berupa JPG
   berlatar putih, jadi sisa halo kompresi di sekeliling garisnya akan
   terlihat bila ditempel langsung di atas gradien hijau. Di atas lencana
   putih, halo itu menyatu dengan latar dan tidak kelihatan. */
.app-kepala .app-lambang {
    width: 46px; height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    padding: 5px;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.app-kepala .app-lambang img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.app-kepala .app-judul {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.25;
    margin: 0;
}

.app-kepala .app-moto {
    font-size: .8125rem;
    opacity: .9;
}

/* Pertanyaan pilihan-ganda: seluruh kotak bisa diketuk, bukan cuma
   lingkaran radionya. Penting karena sebagian besar pengisi memakai
   ponsel sambil berdiri di ruang PTSP. */
.pilihan-kartu {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0 0 .5rem;
    padding: .6875rem .8125rem;
    border: 1px solid #d9dee3;
    border-radius: .375rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pilihan-kartu:last-child { margin-bottom: 0; }
.pilihan-kartu:hover { border-color: var(--app-primary); }

.pilihan-kartu .form-check-input {
    width: 1.2em; height: 1.2em;
    margin: 0;
    flex: 0 0 auto;
    float: none;
}

.pilihan-kartu:has(.form-check-input:checked) {
    border-color: var(--app-primary);
    background-color: rgba(5, 110, 79, .06);
}

.pilihan-kartu:has(.form-check-input:checked) .pilihan-teks { font-weight: 600; }

.pilihan-kartu:has(.form-check-input:focus-visible) {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .pilihan-berdua { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .pilihan-berdua .pilihan-kartu { margin-bottom: 0; }
}

/* Perangkap pengirim otomatis: tak terlihat manusia, tetap terbaca robot */
.jebakan {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Kode sertifikat / laporan yang ditonjolkan */
.kode-terbit {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: .375rem;
    font-family: Consolas, "SF Mono", ui-monospace, monospace;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.panji-bersih {
    background: linear-gradient(135deg, #056e4f, #0a8c65);
    border: 2px solid #c9a227;
    color: #fff;
}

.panji-bersih .kode-terbit {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
}

.panji-lapor {
    border: 2px dashed var(--app-primary);
}

.panji-lapor .kode-terbit {
    background: rgba(5, 110, 79, .08);
    color: var(--app-primary);
}