/*
 * FPRB Jambidan — tambahan gaya panel admin (di atas Bootstrap 5.3).
 * Tema gelap yang sama dengan situs publik: dasar #171717, hijau rambu menyala, tombol pil.
 */

@font-face {
    font-family: "Archivo";
    src: url("../vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../vendor/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Token yang sama dengan situs publik (fprb.css) */
    --dasar: #171717;
    --permukaan: #1e1e1e;
    --permukaan-2: #262626;
    --garis: #2f2f2f;
    --garis-kuat: #474747;
    --tinta: #f3f3f0;
    --tinta-2: #a5a5a0;
    --rambu: #35d68f;
    --rambu-tua: #8cecc0;
    --rambu-muda: #15251e;
    --di-rambu: #06140d;
    --rambu-rgb: 53, 214, 143;
    --awas: #e5173a;
    --awas-teks: #ff7385;
    --waspada: #f5b700;
    --huruf-judul: "Archivo", "Arial Narrow", Arial, sans-serif;
    --lentur: cubic-bezier(.2, .7, .2, 1);
}

/* Panel selalu gelap (data-bs-theme="dark" di layout). Halaman = --dasar,
   permukaan (sidebar, bilah atas, kartu) = --permukaan. */
:root, [data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--tinta);
    --bs-body-color-rgb: 243, 243, 240;
    --bs-body-bg: var(--permukaan);
    --bs-body-bg-rgb: 30, 30, 30;
    --bs-tertiary-bg: var(--dasar);
    --bs-tertiary-bg-rgb: 23, 23, 23;
    --bs-secondary-bg: var(--permukaan-2);
    --bs-secondary-bg-rgb: 38, 38, 38;
    --bs-secondary-color: var(--tinta-2);
    --bs-emphasis-color: #fff;
    --bs-border-color: var(--garis);
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-border-radius: 12px;
    --bs-primary: var(--rambu);
    --bs-primary-rgb: var(--rambu-rgb);
    --bs-primary-bg-subtle: var(--rambu-muda);
    --bs-primary-border-subtle: rgba(var(--rambu-rgb), .45);
    --bs-primary-text-emphasis: var(--rambu-tua);
    --bs-link-color: var(--rambu);
    --bs-link-color-rgb: var(--rambu-rgb);
    --bs-link-hover-color: var(--rambu-tua);
    --bs-link-hover-color-rgb: 140, 236, 192;
    --bs-danger-text-emphasis: var(--awas-teks);
    --bs-form-invalid-color: var(--awas-teks);
    --bs-form-invalid-border-color: var(--awas-teks);
}

html { scrollbar-color: #3a3a3a var(--dasar); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--rambu); color: var(--di-rambu); }

h1, h2, .judul-angka { font-family: var(--huruf-judul); font-stretch: 92%; font-weight: 700; letter-spacing: -.03em; }
.teks-muda { color: var(--tinta-2); }
.text-danger { color: var(--awas-teks) !important; }

/* ---------- Kerangka: sidebar & bilah atas ---------- */
.app-topbar { background-color: rgba(30, 30, 30, .82) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.app-sidebar .sidebar-nav .nav-link { border-radius: 999px; padding-inline: .9rem; color: var(--tinta-2); font-weight: 700; transition: background-color .18s, color .18s; }
.app-sidebar .sidebar-nav .nav-link:hover { background-color: rgba(255, 255, 255, .07); color: var(--tinta); }
.app-sidebar .sidebar-nav .nav-link.active { background-color: var(--rambu); color: var(--di-rambu); }
.app-sidebar .sidebar-nav .nav-link.active .bi { color: inherit; }
.app-sidebar .sidebar-header { letter-spacing: 0; text-transform: none; font-size: .8125rem; font-weight: 700; }
.dropdown-menu { --bs-dropdown-bg: var(--permukaan-2); --bs-dropdown-border-color: var(--garis-kuat); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .07); --bs-dropdown-border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important; }

/* ---------- Komponen Bootstrap ---------- */
.card { --bs-card-bg: var(--permukaan); --bs-card-border-color: var(--garis); --bs-card-cap-bg: transparent; --bs-card-border-radius: 18px; --bs-card-inner-border-radius: 17px; }
.shadow-sm { box-shadow: none !important; }
.btn { font-weight: 700; border-radius: 999px; }
.btn-primary {
    --bs-btn-color: var(--di-rambu); --bs-btn-bg: var(--rambu); --bs-btn-border-color: var(--rambu);
    --bs-btn-hover-color: var(--di-rambu); --bs-btn-hover-bg: var(--rambu-tua); --bs-btn-hover-border-color: var(--rambu-tua);
    --bs-btn-active-color: var(--di-rambu); --bs-btn-active-bg: var(--rambu-tua); --bs-btn-active-border-color: var(--rambu-tua);
    --bs-btn-disabled-color: var(--di-rambu); --bs-btn-disabled-bg: var(--rambu); --bs-btn-disabled-border-color: var(--rambu);
}
.btn-outline-primary {
    --bs-btn-color: var(--rambu); --bs-btn-border-color: rgba(var(--rambu-rgb), .6);
    --bs-btn-hover-color: var(--di-rambu); --bs-btn-hover-bg: var(--rambu); --bs-btn-hover-border-color: var(--rambu);
    --bs-btn-active-color: var(--di-rambu); --bs-btn-active-bg: var(--rambu-tua); --bs-btn-active-border-color: var(--rambu-tua);
}
.btn-outline-secondary { --bs-btn-color: var(--tinta); --bs-btn-border-color: var(--garis-kuat); --bs-btn-hover-bg: var(--permukaan-2); --bs-btn-hover-border-color: var(--tinta-2); --bs-btn-hover-color: var(--tinta); }
.btn-outline-danger { --bs-btn-color: var(--awas-teks); --bs-btn-border-color: rgba(255, 115, 133, .55); --bs-btn-hover-bg: var(--awas); --bs-btn-hover-border-color: var(--awas); --bs-btn-active-bg: var(--awas); --bs-btn-active-border-color: var(--awas); }
.btn-check:checked + .btn-outline-danger { background-color: var(--awas); border-color: var(--awas); color: #fff; }
.text-bg-primary { background-color: var(--rambu) !important; color: var(--di-rambu) !important; }
.text-bg-light { background-color: var(--permukaan-2) !important; color: var(--tinta) !important; box-shadow: inset 0 0 0 1px var(--garis-kuat); }
.badge { border-radius: 999px; font-weight: 700; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--tinta); --bs-table-border-color: var(--garis); --bs-table-hover-bg: rgba(255, 255, 255, .04); --bs-table-hover-color: var(--tinta); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-striped-color: var(--tinta); }
.table-light { --bs-table-bg: var(--permukaan-2); --bs-table-color: var(--tinta-2); --bs-table-border-color: var(--garis); }
.form-control, .form-select { background-color: #141414; border-color: var(--garis-kuat); color: var(--tinta); }
.form-control::placeholder { color: #7d7d78; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--permukaan-2); color: var(--tinta-2); }
.form-control:focus, .form-select:focus, .form-check-input:focus { background-color: #141414; color: var(--tinta); border-color: var(--rambu); box-shadow: 0 0 0 .2rem rgba(var(--rambu-rgb), .25); }
.form-check-input { background-color: #141414; border-color: var(--garis-kuat); }
.form-check-input:checked { background-color: var(--rambu); border-color: var(--rambu); }
.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306140d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2306140d'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2306140d'/%3e%3c/svg%3e"); }
.input-group-text { background-color: var(--permukaan-2); border-color: var(--garis-kuat); color: var(--tinta-2); }
.pagination { --bs-pagination-bg: var(--permukaan); --bs-pagination-border-color: var(--garis); --bs-pagination-color: var(--tinta); --bs-pagination-hover-color: var(--rambu-tua); --bs-pagination-hover-bg: var(--permukaan-2); --bs-pagination-hover-border-color: var(--garis-kuat); --bs-pagination-active-color: var(--di-rambu); --bs-pagination-active-bg: var(--rambu); --bs-pagination-active-border-color: var(--rambu); --bs-pagination-disabled-bg: var(--permukaan); --bs-pagination-disabled-color: #6b6b66; --bs-pagination-disabled-border-color: var(--garis); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--tinta-2); --bs-breadcrumb-item-active-color: var(--tinta-2); }
.modal-content { --bs-modal-bg: var(--permukaan); --bs-modal-border-color: var(--garis-kuat); }
:focus-visible { outline: 3px solid var(--rambu); outline-offset: 2px; }

/* Halaman masuk: pendar hijau diam di belakang kartu */
.auth-wrapper { background: radial-gradient(60% 50% at 50% 30%, rgba(var(--rambu-rgb), .13), transparent 70%); }
.auth-brand { border-radius: 50% !important; }

/* ---------- Tombol darurat ---------- */
.btn-darurat {
    background: var(--awas); border: 0; color: #fff; font-family: var(--huruf-judul); font-stretch: 86%; font-weight: 800;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.1; border-radius: 14px;
    padding: 1.25rem 1.5rem; width: 100%; min-height: 96px;
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    box-shadow: 0 6px 0 #7a0c1f; transition: translate .08s, box-shadow .08s, background .15s;
}
.btn-darurat:hover, .btn-darurat:focus-visible { background: #f02a4b; color: #fff; }
.btn-darurat:active { translate: 0 4px; box-shadow: 0 2px 0 #7a0c1f; }
.btn-darurat i { font-size: 1.3em; }
.btn-darurat:disabled { opacity: .7; }
.pita-bahaya { height: 10px; background: repeating-linear-gradient(-45deg, var(--waspada) 0 14px, #0d0d0d 14px 28px); }
.nav-link .bi-megaphone-fill { color: var(--awas-teks); }

dialog.dialog-darurat { border: 1px solid var(--garis-kuat); border-radius: 20px; padding: 0; width: min(100% - 2rem, 520px); background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
dialog.dialog-darurat::backdrop { background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pesan-pratinjau { white-space: pre-wrap; background: #e7f6dc; color: #14201b; border-radius: 8px 8px 8px 0; padding: .75rem .9rem; font-size: .9375rem; line-height: 1.45; max-height: 40vh; overflow-y: auto; }

/* ---------- Angka ringkas ---------- */
.kpi-admin .judul-angka { font-size: 2.25rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi-admin .kpi-tanda { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.25rem; flex: none; }

/* ---------- Grafik ---------- */
.grafik { min-height: 240px; }
.grafik-data { margin-top: .5rem; font-size: .875rem; }
.grafik-data summary { cursor: pointer; color: var(--bs-secondary-color); width: fit-content; }
.grafik-data table { margin-top: .5rem; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grafik-data th, .grafik-data td { padding: .3rem .5rem; border-bottom: 1px solid var(--bs-border-color); text-align: left; }
.grafik-data td:last-child, .grafik-data th:last-child { text-align: right; }
.grafik-kosong { display: grid; place-items: center; min-height: 160px; color: var(--bs-secondary-color); text-align: center; padding: 1rem; }

/* ---------- Status laporan ---------- */
.status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .875rem; white-space: nowrap; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-2); }
.status--baru::before { background: var(--waspada); }
.status--terverifikasi::before { background: #5b9cf0; }
.status--ditangani::before { background: #f08a3c; }
.status--selesai::before { background: var(--rambu); }

/* ---------- Peta di admin ---------- */
.peta { width: 100%; height: 340px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: #202020; z-index: 0; }
.leaflet-container { font-family: inherit; background: #202020; }
.leaflet-container a { color: var(--rambu); }
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background: var(--permukaan); color: var(--tinta); box-shadow: 0 12px 34px rgba(0, 0, 0, .6); }
.leaflet-container .leaflet-popup-content-wrapper { border-radius: 16px; border: 1px solid var(--garis-kuat); }
.leaflet-container a.leaflet-popup-close-button { color: var(--tinta-2); }
.leaflet-container .leaflet-bar { border: 1px solid var(--garis-kuat) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-container .leaflet-bar a, .leaflet-container .leaflet-bar a:hover { width: 36px !important; height: 36px !important; line-height: 36px !important; background-color: var(--permukaan); color: var(--tinta); border-bottom-color: var(--garis); }
.leaflet-container .leaflet-bar a:hover { background-color: var(--permukaan-2); }
.leaflet-container .leaflet-bar a.leaflet-disabled { background-color: var(--permukaan); color: #5c5c58; }
.leaflet-container .leaflet-control-layers { background: var(--permukaan); color: var(--tinta); border: 1px solid var(--garis-kuat) !important; border-radius: 12px !important; }
.leaflet-container .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); }
.leaflet-container .leaflet-control-attribution { background: rgba(23, 23, 23, .78) !important; color: var(--tinta-2); }
.leaflet-container .leaflet-control-scale-line { background: rgba(23, 23, 23, .78); color: var(--tinta); border-color: var(--tinta-2); text-shadow: none; }
.penanda { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); color: #fff; }
.penanda > i { rotate: 45deg; font-size: .85rem; line-height: 1; }
.penanda--bulat { border-radius: 50%; rotate: none; }
.penanda--bulat > i { rotate: none; }
.penanda--kotak { border-radius: 7px; rotate: none; background: #0b7a4b; }
.penanda--kotak > i { rotate: none; }
.plat { display: inline-flex; align-items: center; background: var(--permukaan-2); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--garis-kuat); border-radius: 999px; padding: .15rem .45rem; font-size: .75rem; font-weight: 700; }

.jatuhkan { border: 2px dashed var(--garis-kuat); border-radius: 16px; padding: 1.25rem 1rem; text-align: center; background: #141414; }
.jatuhkan.aktif { border-color: var(--rambu); background: var(--bs-primary-bg-subtle); }
.warna-contoh { width: 1.1rem; height: 1.1rem; border-radius: 4px; display: inline-block; vertical-align: -.2rem; border: 1px solid rgba(255, 255, 255, .35); }
.foto-laporan { width: 100%; max-height: 420px; object-fit: contain; background: #141414; border-radius: 14px; }

/* Atribut hidden harus menang atas utilitas display (.d-flex dsb.) */
[hidden] { display: none !important; }

/* ---------- Animasi panel (mati bila pengguna meminta gerak dikurangi) ---------- */
.btn-darurat { position: relative; isolation: isolate; }
.btn-darurat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; }
.penanda { position: relative; }
.penanda--denyut::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--w, currentColor); pointer-events: none; opacity: 0; }
.kpi-admin .card, .card { transition: translate .25s var(--lentur), box-shadow .3s, border-color .25s; }
.btn { transition: translate .18s, scale .18s, box-shadow .25s, background-color .15s, border-color .15s, color .15s; }
/* Sorotan kursor di kartu (posisi diisi fprb-animasi.js) */
.card { background-image: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--rambu-rgb), .09), transparent 65%); background-repeat: no-repeat; }

@media (prefers-reduced-motion: no-preference) {
    /* Tombol darurat: cincin merah melebar pelan untuk menarik mata, tanpa berkedip */
    .btn-darurat::before { animation: darurat-denyut 2.4s ease-out infinite; }
    @keyframes darurat-denyut {
        from { box-shadow: 0 0 0 0 rgba(229, 23, 58, .6); }
        70%, to { box-shadow: 0 0 0 18px rgba(229, 23, 58, 0); }
    }
    .btn-darurat i { animation: toa-goyang 2.4s ease-in-out infinite; transform-origin: 30% 60%; }
    @keyframes toa-goyang { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -12deg; } 80% { rotate: 8deg; } 90% { rotate: -5deg; } }
    .pita-bahaya { background-size: 39.6px 100%; animation: pita-jalan 1.6s linear infinite; }
    @keyframes pita-jalan { to { background-position: 39.6px 0; } }

    /* Isi halaman muncul berurutan saat dimuat */
    main > .row > *, main > .card, main > form > .row > * { animation: naik-masuk .5s cubic-bezier(.2, .7, .2, 1) backwards; }
    main > .row > :nth-child(2), main > form > .row > :nth-child(2) { animation-delay: .07s; }
    main > .row > :nth-child(3) { animation-delay: .14s; }
    main > .row > :nth-child(4) { animation-delay: .21s; }
    main > .row > :nth-child(5) { animation-delay: .28s; }
    main > .row > :nth-child(n + 6) { animation-delay: .35s; }
    @keyframes naik-masuk { from { opacity: 0; translate: 0 16px; } }

    .kpi-admin .card:hover { translate: 0 -4px; border-color: rgba(var(--rambu-rgb), .55); box-shadow: 0 24px 50px -22px #000 !important; }
    .btn:hover { translate: 0 -1px; }
    .btn-primary:hover { box-shadow: 0 8px 26px rgba(var(--rambu-rgb), .35); }
    .btn:active { translate: 0 0; scale: .97; box-shadow: none; }
    .penanda { animation: penanda-jatuh .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    @keyframes penanda-jatuh { from { opacity: 0; translate: 0 -22px; scale: .35; } }
    dialog.dialog-darurat[open] { animation: dialog-masuk .28s cubic-bezier(.3, 1.4, .5, 1); }
    dialog.dialog-darurat[open]::backdrop { animation: latar-masuk .25s ease-out; }
    @keyframes dialog-masuk { from { opacity: 0; scale: .92; } }
    @keyframes latar-masuk { from { opacity: 0; } }
    .status--baru::before { animation: status-denyut 2s ease-in-out infinite; }
    @keyframes status-denyut { 50% { scale: 1.5; opacity: .55; } }
}

/* ---------- Penyesuaian layar HP ---------- */
@media (max-width: 767.98px) {
    /* Sasaran sentuh minimal 40 px untuk tombol kecil (aksi baris tabel, filter, tombol halaman) */
    .btn-sm { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
    .form-control, .form-select { min-height: 44px; font-size: 1rem; }   /* 16 px: iPhone tidak memperbesar halaman saat isian disentuh */
    .btn-darurat { min-height: 84px; padding: 1rem; }
    .kpi-admin .judul-angka { font-size: 1.9rem; }
    .peta { height: 300px; }
}