/* ============================================================
   PEKABUA - UI Theme Overrides (loaded LAST on every page)
   Menyeragamkan: font, tombol, popup detail, dan tabel.
   ============================================================ */

/* ---------- 1. Font Poppins (diload via @import, hanya sekali) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --ui-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Token tombol seragam */
    --ui-btn-pad-y: 0.4rem;
    --ui-btn-pad-x: 0.8rem;
    --ui-btn-font: 0.8rem;
    --ui-btn-radius: 8px;
    --ui-btn-gap: 0.35rem;

    /* Token tabel seragam */
    --ui-table-radius: 10px;
    --ui-table-head-y: 0.7rem;
    --ui-table-head-x: 0.75rem;
    --ui-table-cell-y: 0.6rem;
    --ui-table-cell-x: 0.75rem;
    --ui-table-font: 0.82rem;

    /* Token popup detail seragam */
    --ui-modal-radius: 12px;
    --ui-modal-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

/* ---------- 2. Font Poppins di seluruh aplikasi ---------- */
html,
body,
body *:not(i):not([class*="fa-"]) {
    font-family: var(--ui-font) !important;
}

/* Elemen yang biasanya tidak mewarisi font */
button,
input,
select,
textarea,
label,
th,
td,
h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.form-group label {
    font-family: var(--ui-font) !important;
}

/* ============================================================
   3. TOMBOL — satu ukuran & bentuk seragam di semua halaman
   ============================================================ */
:is(
    button:not(.icon-btn):not(.fab-button):not(.close-btn):not(.modal-close),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.btn,
    .btn,
    .add-btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-edit,
    .btn-delete,
    .btn-view,
    .btn-login,
    .btn-maps,
    .btn-text,
    .btn-link,
    .header-login-btn,
    .header-logout-btn,
    .close-btn,
    .action-btn,
    .export-btn,
    .simple-add,
    .desktop-download-btn,
    .mobile-download-btn,
    .btn-bantuan,
    .btn-delete-selected,
    .back-link,
    .date-filter-btn,
    .date-filter-reset-btn,
    .filter-btn,
    .filter-reset-btn,
    .guide-entry-action-btn,
    .install-btn,
    .primary-btn,
    .refresh-btn,
    .filter-actions button,
    .pagination button,
    .peka-pagination button
    ) {
    font-family: var(--ui-font) !important;
    font-size: var(--ui-btn-font) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    padding: var(--ui-btn-pad-y) var(--ui-btn-pad-x) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    gap: var(--ui-btn-gap) !important;
    border-radius: var(--ui-btn-radius) !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Bust-hover agar style inline per halaman tidak menimpa */
:is(
    button:not(.icon-btn):not(.fab-button):not(.close-btn):not(.modal-close),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.btn,
    .btn,
    .add-btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-edit,
    .btn-delete,
    .btn-view,
    .btn-login,
    .btn-maps,
    .btn-text,
    .btn-link,
    .close-btn,
    .action-btn,
    .export-btn,
    .simple-add,
    .desktop-download-btn,
    .mobile-download-btn,
    .btn-bantuan,
    .btn-delete-selected,
    .back-link,
    .date-filter-btn,
    .date-filter-reset-btn,
    .filter-btn,
    .filter-reset-btn,
    .guide-entry-action-btn,
    .install-btn,
    .primary-btn,
    .refresh-btn,
    .filter-actions button,
    .pagination button,
    .peka-pagination button
    ):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16) !important;
    filter: brightness(1.05) !important;
}

:is(
    button:not(.icon-btn):not(.fab-button):not(.close-btn):not(.modal-close),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.btn,
    .btn,
    .add-btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-edit,
    .btn-delete,
    .btn-view,
    .btn-login,
    .btn-maps,
    .btn-text,
    .btn-link,
    .close-btn,
    .action-btn,
    .export-btn,
    .simple-add,
    .desktop-download-btn,
    .mobile-download-btn,
    .btn-bantuan,
    .btn-delete-selected,
    .back-link,
    .date-filter-btn,
    .date-filter-reset-btn,
    .filter-btn,
    .filter-reset-btn,
    .guide-entry-action-btn,
    .install-btn,
    .primary-btn,
    .refresh-btn,
    .filter-actions button,
    .pagination button,
    .peka-pagination button
    ):active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}

:is(
    button:not(.icon-btn):not(.fab-button):not(.close-btn):not(.modal-close),
    input[type="submit"],
    input[type="button"],
    a.btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .btn-edit,
    .btn-delete,
    .btn-view,
    .export-btn,
    .simple-add,
    .desktop-download-btn,
    .mobile-download-btn,
    .back-link,
    .install-btn,
    .primary-btn
    ):focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 1px !important;
}

/* Tombol di dalam .action-bar (baris alat: PDF + Tambah) harus selebar
   isinya, sama seperti tombol lain. Beberapa CSS per halaman menyetelnya
   jadi width:100% pada media query HP, sehingga terlihat tidak seragam. */
.action-bar :is(
    .add-btn,
    .export-btn,
    .simple-add,
    .desktop-download-btn,
    .mobile-download-btn
    ) {
    width: auto !important;
    max-width: 100% !important;
}

/* Varian warna: tetap seragam bentuk, hanya warna berbeda.
   CATATAN SPESIFISITAS: style.css punya aturan "semua tombol jadi biru"
   (`:is(button:not(.icon-btn), .btn, .add-btn, ...)`) dengan !important dan
   spesifisitas (0,1,1). Karena itu semua aturan warna di bawah memakai
   `body :is(...)` + `:not(.icon-btn)` agar spesifitasnya (0,2,1) dan benar-benar
   menang. Tanpa ini tombol Hapus/Edit/Jihat semuanya tampil biru. */
body :is(.btn-primary, .btn-login, .add-btn):not(.icon-btn) {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
}

body :is(.btn-secondary):not(.icon-btn) {
    background: #64748b !important;
    color: #ffffff !important;
}

body :is(.btn-success, .btn-maps):not(.icon-btn) {
    background: linear-gradient(135deg, #047857, #059669) !important;
    color: #ffffff !important;
}

body :is(.btn-edit):not(.icon-btn) {
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    color: #ffffff !important;
}

body :is(.btn-view):not(.icon-btn) {
    background: linear-gradient(135deg, #0369a1, #0284c7) !important;
    color: #ffffff !important;
}

body :is(.btn-delete, .btn-danger):not(.icon-btn) {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    color: #ffffff !important;
}

/* Tombol unduh PDF selalu merah, sama di semua halaman.
   Beberapa halaman memberi class .add-btn pada tombol ini, sehingga tanpa
   aturan ini tombol PDF ikut jadi biru seperti tombol "Tambah Data". */
body :is(.export-btn, .desktop-download-btn, .mobile-download-btn):not(.icon-btn) {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    color: #ffffff !important;
}

body :is(.btn-outline):not(.icon-btn) {
    background: transparent !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}

body :is(.btn-text, .btn-link):not(.icon-btn) {
    background: transparent !important;
    color: #2563eb !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

/* Ikon di dalam tombol ikut ukuran kompak */
:is(.btn, .add-btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-edit, .btn-delete, .btn-view, .export-btn, .simple-add, .primary-btn, .install-btn, .refresh-btn) i,
:is(button, input[type="submit"], input[type="button"]) i {
    font-size: 0.8em !important;
    line-height: 1 !important;
}

/* Tombol close bulat kecil.
   Specificity harus MENINGGI dari blok tombol utama (0,4,1), maka memakai
   rantai :not() yang panjang. Rantai ini juga memastikan hanya tombol close
   yang match - bukan .btn / .btn-primary / tombol pagination. */
:is(.close-btn, .modal-close):not(.fab-button):not(.icon-btn):not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-edit):not(.btn-delete):not(.btn-view):not(.btn-outline):not(.btn-text):not(.btn-link):not(.btn-login):not(.btn-maps):not(.action-btn) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.8rem !important;
    background: #e2e8f0 !important;
    color: #334155 !important;
    flex: 0 0 auto !important;
}

:is(.close-btn, .modal-close):not(.fab-button):not(.icon-btn):not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-edit):not(.btn-delete):not(.btn-view):not(.btn-outline):not(.btn-text):not(.btn-link):not(.btn-login):not(.btn-maps):not(.action-btn):hover {
    background: #cbd5e1 !important;
    color: #0f172a !important;
}

/* ============================================================
   4. POPUP DETAIL / MODAL — tampilan profesional & seragam
   ============================================================ */
:is(.modal, .modal-overlay, .modal-backdrop) {
    font-family: var(--ui-font) !important;
}

:is(.modal-content, .modal, .view-modal-content, .detail-modal-content) {
    border-radius: var(--ui-modal-radius) !important;
    box-shadow: var(--ui-modal-shadow) !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    max-height: 90vh !important;
}

.modal-header,
.view-modal-header,
.detail-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.85rem 1.1rem !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

.modal-header h2,
.modal-header h3,
.modal-title,
.view-modal-header h2,
.view-modal-header h3,
.detail-modal-header h2,
.detail-modal-header h3 {
    font-family: var(--ui-font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.modal-header .close-btn,
.modal-header .modal-close,
.view-modal-header .close-btn,
.detail-modal-header .close-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: none !important;
}

.modal-header .close-btn:hover,
.modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.modal-body,
.view-modal-body,
.detail-modal-body,
.modal-content > form {
    padding: 1.1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

.modal-footer,
.view-modal-footer,
.detail-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.1rem !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Baris detail di dalam popup: label + nilai rata, mudah dibaca */
:is(.view-detail, .detail-list, .modal-body .detail-row) {
    font-family: var(--ui-font) !important;
    font-size: 0.85rem !important;
}

:is(.view-detail) .row,
:is(.detail-row) {
    display: grid !important;
    grid-template-columns: minmax(120px, 34%) 1fr !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    align-items: start !important;
}

:is(.view-detail) label,
:is(.detail-row) .label,
:is(.view-detail) .detail-label {
    font-weight: 500 !important;
    color: #64748b !important;
    font-size: 0.8rem !important;
}

:is(.view-detail) .value,
:is(.detail-row) .value,
:is(.view-detail) .detail-value {
    color: #0f172a !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    word-break: break-word !important;
}

/* ============================================================
   5. TABEL — seragam & profesional di semua halaman
   ============================================================ */
:is(table.data-table, table.activity-table, table) {
    font-family: var(--ui-font) !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--ui-table-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    font-size: var(--ui-table-font) !important;
    background: #ffffff !important;
}

:is(table.data-table, table.activity-table, table) thead,
:is(table.data-table, table.activity-table, table) thead tr {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
}

:is(table.data-table, table.activity-table, table) thead th,
:is(table.data-table, table.activity-table, table) th {
    font-family: var(--ui-font) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    background-image: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    text-align: left !important;
    padding: var(--ui-table-head-y) var(--ui-table-head-x) !important;
    border: none !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
}

:is(table.data-table, table.activity-table, table) tbody td,
:is(table.data-table, table.activity-table, table) td {
    font-family: var(--ui-font) !important;
    font-size: var(--ui-table-font) !important;
    color: #1f2937 !important;
    padding: var(--ui-table-cell-y) var(--ui-table-cell-x) !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

:is(table.data-table, table.activity-table, table) tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

:is(table.data-table, table.activity-table, table) tbody tr:hover {
    background: #eff6ff !important;
}

:is(table.data-table, table.activity-table, table) tbody tr:last-child td {
    border-bottom: none !important;
}

/* Tombol aksi di dalam sel tabel tetap kompak */
:is(table) td .btn,
:is(table) td .btn-view,
:is(table) td .btn-edit,
:is(table) td .btn-delete,
:is(table) td button {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
}

/* Link nav pagination & tombol export tetap seragam */
:is(.peka-pagination) button,
:is(.pagination) button {
    font-family: var(--ui-font) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--ui-btn-radius) !important;
}

/* ============================================================
   6. DARK MODE — selaras dengan tema terang
   ============================================================ */
body.dark-mode :is(table.data-table, table.activity-table, table) {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode :is(table) thead th {
    background: linear-gradient(135deg, #1e3a8a, #312e81) !important;
    color: #ffffff !important;
}

body.dark-mode :is(table) tbody td {
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode :is(table) tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode :is(table) tbody tr:hover {
    background: rgba(37, 99, 235, 0.12) !important;
}

body.dark-mode :is(.modal-content, .view-modal-content) {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode :is(.modal-footer, .view-modal-footer) {
    background: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

body.dark-mode :is(.view-detail) .value,
body.dark-mode :is(.detail-row) .value {
    color: var(--dark-text-primary) !important;
}

body.dark-mode :is(.close-btn, .modal-close) {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode :is(.btn-outline) {
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

body.dark-mode :is(.btn-text, .btn-link) {
    color: #93c5fd !important;
}

/* ============================================================
   7. FORM — seragam agar tombol & input terlihat satu system
   ============================================================ */
:is(.form-group) label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-bottom: 0.3rem !important;
}

:is(.form-group) input,
:is(.form-group) select,
:is(.form-group) textarea,
:is(input[type="text"]),
:is(input[type="email"]),
:is(input[type="password"]),
:is(input[type="number"]),
:is(input[type="date"]),
:is(input[type="search"]),
:is(input[type="tel"]),
:is(select),
:is(textarea) {
    font-family: var(--ui-font) !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.7rem !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}

:is(input, select, textarea):focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

body.dark-mode :is(.form-group) label {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], select, textarea) {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* ============================================================
   8.mobile — rapatkan lagi agar tetap kecil
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --ui-btn-pad-y: 0.35rem;
        --ui-btn-pad-x: 0.65rem;
        --ui-btn-font: 0.75rem;
    }

    :is(.modal-body, .view-modal-body) {
        padding: 0.9rem !important;
    }
}

/* ============================================================
   9. INPUT BERSAMA IKON
   ------------------------------------------------------------
   Bagian "7. FORM" di atas memasang `padding: 0.5rem 0.7rem
   !important` pada setiap input. Padding khusus halaman
   (mis. padding-left: 2.5rem untuk kolom pencarian) ikut
   tertimpa, sehingga ikon di dalam kolom menutupi teks.
   Aturan di bawah memakai selektor lebih spesifik dan ditulis
   setelahnya, jadi tetap menang.
   ============================================================ */

/* Kolom pencarian / input ber-ikon: sisakan ruang untuk ikon */
:is(.search-box, .map-search-box, .input-icon) input {
    padding-left: 2.6rem !important;
}

/* Pencarian peta punya tombol di sisi kanan */
.map-search-box input {
    padding-right: 2.9rem !important;
}

/* Kolom tanggal berikon kalender (harga-pasar.php).
   Sisakan ruang kiri untuk ikon dan kanan untuk tombol kalender
   bawaan browser, supaya tanggal tidak tertutup ikon. */
.date-filter-box input {
    padding-left: 2.6rem !important;
    padding-right: 2.2rem !important;
}

/* Kolom password: tombol mata tidak menutupi teks */
.password-toggle input {
    padding-right: 3.4rem !important;
}

/* Ikon dekoratif tidak boleh mengganggu klik / pilih teks */
:is(.search-box, .map-search-box, .input-icon, .date-filter-box) > i:first-child {
    pointer-events: none;
}

/* Placeholder dibuat lebih redup agar tidak berebut dengan ikon */
:is(.search-box, .map-search-box, .input-icon, .date-filter-box) input::placeholder {
    color: #94a3b8;
}

/* Fokus: bingkai biru mengikuti kotak kolom, bukan teks saja */
:is(.map-search-box, .date-filter-box):focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

body.dark-mode :is(.search-box, .map-search-box, .input-icon, .date-filter-box) input::placeholder {
    color: #64748b;
}

/* ============================================================
   10. POPUP (MODAL) — satu system, rapi, dan bisa digulir
   ------------------------------------------------------------
   Halaman membuka / menutup modal dengan dua cara:
     1) el.style.display = 'block' | 'flex'   (inline style)
     2) el.classList.add('active')            (galeri, bantuan)
   Karena itu `display` SENGAJA TIDAK dikunci di sini.
   Kalau dikunci, modal tidak akan pernah bisa ditutup.

   Yang menggulir hanya satu lapis: layer di belakang kartu.
   Judul dan baris tombolnya lengket (sticky) di atas/bawah
   kartu, jadi tetap terlihat saat form di gulir.

   Warna judul popup tetap memakai header biru seperti bagian 4.
   ============================================================ */
:root {
    --ui-modal-gap: clamp(1rem, 3vh, 2.25rem);
    --ui-modal-pad: 1.5rem;
    --ui-modal-scrim: rgba(15, 23, 42, 0.6);
    --ui-modal-bg: #ffffff;
    --ui-modal-fg: #1f2937;
    --ui-modal-title: #0f172a;
    --ui-modal-muted: #64748b;
    --ui-modal-soft: #f8fafc;
    --ui-modal-soft-line: #eef2f7;
    --ui-modal-line: #e2e8f0;
    --ui-modal-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.40), 0 8px 20px -8px rgba(15, 23, 42, 0.25);
}

body.dark-mode {
    --ui-modal-scrim: rgba(2, 6, 23, 0.72);
    --ui-modal-bg: #2d2d2d;
    --ui-modal-fg: #e5e7eb;
    --ui-modal-title: #ffffff;
    --ui-modal-muted: #9ca3af;
    --ui-modal-soft: #1f1f1f;
    --ui-modal-soft-line: #3a3a3a;
    --ui-modal-line: #404040;
    --ui-modal-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.75), 0 8px 20px -8px rgba(0, 0, 0, 0.60);
}

/* ---------- 10a. Lapisan gelap di belakang ---------- */
/* max-height / border / border-radius di bawah membatalkan aturan
   lama di bagian 4 yang ikut menyasar elemen .modal itu sendiri. */
:is(.modal, .form-modal, .modal-backdrop) {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    background: var(--ui-modal-scrim) !important;
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    backdrop-filter: blur(5px) saturate(120%);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: clamp(0.75rem, 3vw, 1.5rem) !important;
    padding-left: clamp(0.75rem, 3vw, 1.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    align-items: flex-start !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

.modal-backdrop,
.form-modal {
    z-index: 10000 !important;
}

/* ---------- 10b. Kartu ---------- */
:is(.modal-content, .form-modal-content) {
    display: block !important;
    flex-direction: row !important;
    position: relative !important;
    margin: var(--ui-modal-gap) auto !important;
    padding: var(--ui-modal-pad) !important;
    width: 100% !important;
    max-width: 720px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    background: var(--ui-modal-bg) !important;
    color: var(--ui-modal-fg) !important;
    border: 1px solid var(--ui-modal-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-modal-shadow) !important;
}

/* Dialog kecil (filter tanggal) tetap ramping */
#filterDateModal .modal-content,
#dateFilterModal .modal-content {
    max-width: 520px !important;
}

/* Padding kartu sudah cukup, jadi form di dalamnya tidak perlu
   padding tambahan dari bagian 4 (1.1rem). */
:is(.modal-content, .form-modal-content) > form {
    padding: 0 !important;
}

/* ---------- 10c. Judul (lengket di atas) ---------- */
:is(.modal-content, .form-modal-content) > .modal-header {
    position: sticky !important;
    top: var(--ui-modal-gap) !important;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: calc(-1 * var(--ui-modal-pad)) calc(-1 * var(--ui-modal-pad)) 1.25rem !important;
    padding: 1rem var(--ui-modal-pad) !important;
    border-radius: 15px 15px 0 0 !important;
    box-shadow: 0 10px 14px -12px rgba(15, 23, 42, 0.55);
}

:is(.modal-content, .form-modal-content) > .modal-header :is(h2, h3, h4, .modal-title) {
    margin: 0 !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    line-height: 1.35;
}

/* Judul yang tidak dibungkus .modal-header (hanya galeri.php) */
:is(.modal-content, .form-modal-content) > :is(h2, h3):not(.modal-header) {
    position: sticky;
    top: var(--ui-modal-gap);
    z-index: 6;
    margin: calc(-1 * var(--ui-modal-pad)) calc(-1 * var(--ui-modal-pad)) 1.15rem !important;
    padding: 1rem 3.4rem 1rem var(--ui-modal-pad) !important;
    background: var(--ui-modal-bg) !important;
    border-bottom: 1px solid var(--ui-modal-line) !important;
    border-radius: 15px 15px 0 0 !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    color: var(--ui-modal-title) !important;
}

/* ---------- 10d. Tombol tutup ---------- */
/* Bentuk tombolnya (lingkaran 28px) sudah dibuat oleh blok tombol
   di bagian 3 dan aturan itu spesifisitasnya sangat tinggi, jadi
   tidak ditimpa di sini. Yang dinormalkan hanya posisinya: beberapa
   halaman lama menaruh tombol tutup di dalam .modal-header dengan
   position:absolute, sehingga tombolnya ikut ter-scroll keluar
   begitu formnya digulir dan popup jadi tidak bisa ditutup. */
:is(.modal-content, .form-modal-content) > .modal-header > :is(.close-btn, .modal-close) {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

/* ---------- 10e. Baris tombol (lengket di bawah) ---------- */
/* Catatan: di sebagian halaman baris ini ada di dalam <form>,
   jadi selektornya sengaja turunan, bukan anak langsung. */
:is(.modal, .form-modal, .modal-backdrop) :is(.modal-actions, .form-actions, .modal-footer) {
    position: sticky !important;
    bottom: var(--ui-modal-gap) !important;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem calc(-1 * var(--ui-modal-pad)) calc(-1 * var(--ui-modal-pad)) !important;
    padding: 0.85rem var(--ui-modal-pad) !important;
    background: var(--ui-modal-bg) !important;
    border-top: 1px solid var(--ui-modal-line) !important;
    border-radius: 0 0 15px 15px !important;
    box-shadow: 0 -10px 14px -12px rgba(15, 23, 42, 0.55);
}

body.dark-mode :is(.modal, .form-modal, .modal-backdrop) :is(.modal-actions, .form-actions, .modal-footer) {
    background: var(--ui-modal-bg) !important;
    border-top-color: var(--ui-modal-line) !important;
}

/* ---------- 10f. Satu lapis gulir saja ---------- */
/* Area gulir di dalam kartu dimatikan supaya tidak ada dua
   scrollbar bertumpuk dan judul / baris tombol tetap lengket.
   Penulis pakai [id="..."] (bukan #id) supaya spesifisitasnya
   tetap rendah dan tidak mengalahkan aturan 10e. */
:is(.modal, .form-modal, .modal-backdrop) :is([id="viewContent"], .form-grid, .modal-body, .view-modal-body) {
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- 10g. Isi form ---------- */
:is(.modal-content, .form-modal-content) :is(.form-group, .form-row) {
    margin-bottom: 1rem !important;
}

:is(.modal-content, .form-modal-content) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    width: 100%;
}

:is(.modal-content, .form-modal-content) :is(img, .image-preview img) {
    max-width: 100%;
    height: auto;
}

/* ---------- 10h. Isi popup detail ---------- */
:is(.modal-content, .form-modal-content) :is(.view-detail, .view-detail-item) {
    margin-bottom: 0 !important;
    padding: 0.8rem 0.95rem !important;
    background: var(--ui-modal-soft) !important;
    border: 1px solid var(--ui-modal-soft-line) !important;
    border-radius: 10px !important;
}

:is(.modal-content, .form-modal-content) :is(.view-detail, .view-detail-item) + :is(.view-detail, .view-detail-item) {
    margin-top: 0.55rem !important;
}

:is(.modal-content, .form-modal-content) :is(.view-detail, .view-detail-item) :is(label, .view-detail-label) {
    display: block;
    margin-bottom: 0.2rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-modal-muted) !important;
}

:is(.modal-content, .form-modal-content) :is(.view-detail, .view-detail-item) :is(.value, .view-detail-value) {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.55;
    color: var(--ui-modal-title) !important;
    overflow-wrap: anywhere;
}

:is(.modal-content, .form-modal-content) .view-section {
    margin-bottom: 1.25rem !important;
}

@media (max-width: 640px) {
    :root {
        --ui-modal-pad: 1.15rem;
    }

    :is(.modal-content, .form-modal-content) > .modal-header :is(h2, h3, h4, .modal-title),
    :is(.modal-content, .form-modal-content) > :is(h2, h3):not(.modal-header) {
        font-size: 1rem !important;
    }
}