/* =========================================================================
   PPLH — lapisan tema di atas Bulma.
   Bahasa visual mengikuti referensi ide-lh.com: latar blob gradasi, navbar
   kaca, kartu radius besar, dan sakelar tema pill. Mode gelap memakai
   atribut data-theme bawaan Bulma 1.x.
   ========================================================================= */

:root {
    /* --- Merek: palet dasar diambil dari logo Kementerian Lingkungan Hidup
       (hijau tua daun, biru gelombang, oranye mahkota). --- */
    --klh-green-deep: #00463A;
    --klh-green: #00584A;
    --klh-green-mid: #00745F;
    --klh-green-soft: #0E9E80;
    --klh-blue: #1e88f5;
    --klh-blue-deep: #0b62c4;
    --klh-orange: #f58220;

    --pplh-primary: #00715c;
    --pplh-blue: #1e88f5;
    --pplh-cyan: #1e88f5;
    --pplh-green: #00715c;
    --pplh-orange: #f58220;
    --pplh-gradient: linear-gradient(135deg, #00745f 0%, #00463a 100%);
    --pplh-gradient-cta: linear-gradient(120deg, #0e9e80 0%, #1e88f5 100%);
    /* Varian hijau penuh dari tombol utama: dipakai tombol yang duduk di
       halaman pencarian, tempat aksen biru terbaca sebagai warna kedua
       yang tidak ada padanannya di sekelilingnya. */
    --pplh-gradient-cta-hijau: linear-gradient(120deg, #0e9e80 0%, #00584a 100%);
    /* Penanda "sedang dilihat" pada pil kelompok data dan tab halaman detail:
       hijau penuh bergradasi seperti tombol utama, supaya bagian yang aktif
       langsung terbaca di antara pil lain yang masih polos. */
    --pplh-gradient-aktif: linear-gradient(135deg, #00584a 0%, #12a184 100%);
    --pplh-aktif-teks: #ffffff;
    --pplh-aktif-bayang: 0 6px 16px rgba(0, 88, 74, .28);

    /* --- Permukaan (mode terang) --- */
    --pplh-bg: #f2f6f4;
    --pplh-surface: #ffffff;
    --pplh-surface-2: #f5f8f7;
    --pplh-border: #e3ebe8;
    /* Garis kisi tabel: cukup pekat untuk memisahkan sel, masih di bawah
       warna teks supaya tidak jadi jaring yang menutupi isinya. */
    --pplh-border-strong: #cbdbd4;
    --pplh-text: #33453f;
    --pplh-text-strong: #0b2a24;
    --pplh-muted: #647d75;
    --pplh-shadow: 0 10px 30px rgba(0, 70, 58, .06);
    --pplh-shadow-lg: 0 8px 32px rgba(0, 70, 58, .12);

    /* Nada sel kisi pelaporan: hijau tipis untuk periode yang sudah dilapor,
       abu netral untuk yang belum. Sengaja jauh dari warna penuh supaya
       tabelnya tetap terbaca sebagai satu bidang, bukan papan lampu. */
    --pplh-lapor-bg: rgba(0, 113, 92, .06);
    --pplh-lapor-bg-hover: rgba(0, 113, 92, .11);
    --pplh-lapor-garis: rgba(0, 113, 92, .28);
    --pplh-lapor-teks: #0b6b58;
    --pplh-lapor-ikon-bg: #0e9e80;
    --pplh-lapor-ikon-teks: #ffffff;
    --pplh-telat-teks: #a85a10;
    --pplh-telat-ikon-bg: #f58220;
    --pplh-telat-ikon-teks: #ffffff;
    --pplh-belum-bg: rgba(100, 125, 117, .045);
    --pplh-belum-bg-hover: rgba(100, 125, 117, .08);

    /* Lima nada kotak kalender aktivitas, dari hari tanpa catatan sampai hari
       terpadat. Loncatannya sengaja lebar supaya bedanya masih terbaca pada
       kotak selebar 12px. */
    --pplh-kalender-0: #e6edea;
    --pplh-kalender-1: #b3ddcf;
    --pplh-kalender-2: #63c3a7;
    --pplh-kalender-3: #1a9c7f;
    --pplh-kalender-4: #00584a;

    /* Bar langkah progres tahun. Berbeda dengan nada sel di atas, ruasnya
       kecil dan berdiri sendiri, jadi warnanya justru dibuat penuh supaya
       masih terbaca pada tinggi 6px. */
    --pplh-progres-sudah: #0e9e80;
    --pplh-progres-belum: #e5484d;
    --pplh-hapus-teks: #e5484d;
    --pplh-hapus-bg: rgba(229, 72, 77, .12);

    --pplh-navbar-bg: rgba(255, 255, 255, .68);
    --pplh-glass-bg: rgba(255, 255, 255, .55);
    --pplh-glass-border: rgba(255, 255, 255, .6);

    /* Jarak tepi yang dipakai bareng navbar, konten, dan footer. */
    --pplh-gutter: 1.5rem;

    --pplh-radius-lg: 24px;
    --pplh-radius: 16px;
    --pplh-radius-sm: 12px;

    /* --- Selaraskan token Bulma dengan palet di atas --- */
    --bulma-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bulma-primary-h: 172deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 22%;
    --bulma-link-h: 172deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 22%;

    --bulma-scheme-main: var(--pplh-surface);
    --bulma-scheme-main-bis: var(--pplh-surface-2);
    --bulma-scheme-main-ter: #eef3f1;
    --bulma-background: var(--pplh-bg);
    --bulma-border: var(--pplh-border);
    --bulma-border-weak: var(--pplh-border);
    --bulma-text: var(--pplh-text);
    --bulma-text-strong: var(--pplh-text-strong);
    --bulma-text-weak: var(--pplh-muted);

    /* Dibaca peramban untuk mewarnai panel bawaannya sendiri — panel kalender
       <input type="date">, scrollbar, dan sejenisnya. */
    color-scheme: light;
}

html[data-theme='dark'] {
    --pplh-bg: #0a1614;
    --pplh-surface: #12241f;
    --pplh-surface-2: #1a3029;
    --pplh-border: #24413a;
    --pplh-border-strong: #365b51;
    --pplh-text: #dfeae6;
    --pplh-text-strong: #ffffff;
    --pplh-muted: #90a8a1;
    --pplh-primary: #2ec4a6;
    --pplh-green: #2ec4a6;
    --pplh-blue: #57a8f7;
    --pplh-cyan: #57a8f7;
    --pplh-orange: #f9a03f;
    --pplh-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --pplh-shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
    /* Hijau mode gelap jauh lebih terang, jadi pil aktifnya dibalik: gradasi
       tetap hijau penuh, tapi tulisannya yang dibuat gelap supaya terbaca. */
    --pplh-gradient-aktif: linear-gradient(135deg, #17987e 0%, #4fd8bb 100%);
    /* Di latar gelap gradasi hijau tua nyaris hilang, jadi kedua ujungnya
       dinaikkan — tulisannya tetap putih. */
    --pplh-gradient-cta-hijau: linear-gradient(120deg, #12a184 0%, #0a6d59 100%);
    --pplh-aktif-teks: #06231d;
    --pplh-aktif-bayang: 0 6px 16px rgba(0, 0, 0, .38);

    /* Latar gelap membuat warna terlihat lebih pekat, jadi kadar hijaunya
       diturunkan dan teksnya justru dinaikkan supaya kontrasnya cukup. */
    --pplh-lapor-bg: rgba(46, 196, 166, .08);
    --pplh-lapor-bg-hover: rgba(46, 196, 166, .14);
    --pplh-lapor-garis: rgba(46, 196, 166, .36);
    --pplh-lapor-teks: #6fdcc4;
    /* Lingkaran centang tetap padat di mode gelap, tapi warnanya diturunkan
       dan isinya jadi gelap supaya tidak menyilaukan. */
    --pplh-lapor-ikon-bg: #2ec4a6;
    --pplh-lapor-ikon-teks: #08211c;
    --pplh-telat-teks: #f9be7c;
    --pplh-telat-ikon-bg: #f9a03f;
    --pplh-telat-ikon-teks: #2a1704;
    --pplh-belum-bg: rgba(255, 255, 255, .02);
    --pplh-belum-bg-hover: rgba(255, 255, 255, .045);
    --pplh-kalender-0: rgba(255, 255, 255, .06);
    --pplh-kalender-1: #10473d;
    --pplh-kalender-2: #197762;
    --pplh-kalender-3: #26ab8c;
    --pplh-kalender-4: #57e0be;
    --pplh-progres-sudah: #2ec4a6;
    --pplh-progres-belum: #ff6369;
    --pplh-hapus-teks: #ff6369;
    --pplh-hapus-bg: rgba(255, 99, 105, .16);

    --pplh-navbar-bg: rgba(10, 22, 20, .62);
    --pplh-glass-bg: rgba(18, 36, 31, .55);
    --pplh-glass-border: rgba(255, 255, 255, .08);

    --bulma-scheme-main: var(--pplh-surface);
    --bulma-scheme-main-bis: var(--pplh-surface-2);
    --bulma-scheme-main-ter: var(--pplh-surface-2);
    --bulma-background: var(--pplh-bg);
    --bulma-border: var(--pplh-border);
    --bulma-border-weak: var(--pplh-border);
    --bulma-text: var(--pplh-text);
    --bulma-text-strong: var(--pplh-text-strong);
    --bulma-text-weak: var(--pplh-muted);
    --bulma-primary-l: 45%;
    --bulma-link-l: 55%;

    color-scheme: dark;
}

/* =========================================================================
   Kerangka halaman
   ========================================================================= */

html {
    background-color: var(--pplh-bg);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: transparent;
    color: var(--pplh-text);
    font-family: var(--bulma-family-primary);
    -webkit-font-smoothing: antialiased;
}

/* Blob gradasi sebagai latar tetap — ciri khas tampilan referensi. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(650px circle at 10% 12%, rgba(0, 88, 74, .16), transparent 42%),
        radial-gradient(700px circle at 90% 8%, rgba(30, 136, 245, .16), transparent 42%),
        radial-gradient(600px circle at 82% 88%, rgba(245, 130, 32, .12), transparent 42%);
}

html[data-theme='dark'] body::before {
    background:
        radial-gradient(650px circle at 10% 12%, rgba(0, 116, 95, .34), transparent 42%),
        radial-gradient(700px circle at 90% 8%, rgba(30, 136, 245, .20), transparent 42%),
        radial-gradient(600px circle at 82% 88%, rgba(245, 130, 32, .14), transparent 42%);
}

.page-main {
    flex: 1 0 auto;
}

.section-tight {
    padding: 2.5rem 0 3.5rem;
}

/* =========================================================================
   Merek
   ========================================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    line-height: 1;
}

.brand__name {
    font-family: 'Poppins', var(--bulma-family-primary);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #00584a, #1e88f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand__name-accent {
    -webkit-text-fill-color: var(--pplh-orange);
    color: var(--pplh-orange);
}

html[data-theme='dark'] .brand__name {
    background: linear-gradient(90deg, #2ec4a6, #57a8f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme='dark'] .brand__name-accent {
    -webkit-text-fill-color: var(--pplh-orange);
    color: var(--pplh-orange);
}

/* =========================================================================
   Navbar mengambang (floating) dengan efek kaca
   ========================================================================= */

/* <nav> hanya jadi rel sticky; batang kaca sesungguhnya adalah .container di
   dalamnya, supaya lebar navbar tetap sama dengan konten halaman. */
.navbar.is-app {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: .7rem 0 .35rem;
    min-height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.navbar.is-app > .container {
    min-height: 2.9rem;
    padding: 0 1.85rem;
    border-radius: 999px;
    background: var(--pplh-navbar-bg);
    border: 1px solid var(--pplh-glass-border);
    box-shadow: 0 10px 30px rgba(0, 70, 58, .10);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    transition: box-shadow .3s ease, background .3s ease;
}

html[data-theme='dark'] .navbar.is-app > .container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.navbar.is-app .navbar-brand,
.navbar.is-app .navbar-menu,
.navbar.is-app .navbar-end {
    min-height: 2.9rem;
}

/* Di dalam .container, Bulma menarik keluar brand dan menu masing-masing
   .75rem. Keduanya dinolkan supaya jarak wordmark ke tepi kiri sama persis
   dengan jarak item terakhir ke tepi kanan. */
.navbar.is-app > .container .navbar-brand {
    margin-inline-start: 0;
}

.navbar.is-app > .container .navbar-menu {
    margin-inline-end: 0;
}

.navbar.is-app .navbar-end > .navbar-item:last-child {
    padding-left: 0;
    padding-right: 0;
}

.navbar.is-app .navbar-menu {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* Wordmark bersifat statis: seluruh efek hover/fokus bawaan Bulma dimatikan.
   Bulma 1.x menghitung latar a.navbar-item lewat custom property yang di-set
   ulang saat :hover/:focus, jadi variabelnya ikut dinolkan — menimpa
   background-color saja tidak cukup. */
.navbar.is-app .navbar-brand a.navbar-item,
.navbar.is-app .navbar-brand a.navbar-item:hover,
.navbar.is-app .navbar-brand a.navbar-item:focus,
.navbar.is-app .navbar-brand a.navbar-item:focus-within,
.navbar.is-app .navbar-brand a.navbar-item:active {
    --bulma-navbar-item-background-a: 0;
    --bulma-navbar-item-background-l-delta: 0;
    --bulma-navbar-item-hover-background-l-delta: 0;
    --bulma-navbar-item-active-background-l-delta: 0;
    padding: .25rem 0;
    background: none !important;
    background-color: transparent !important;
    color: inherit;
    border-radius: 0;
    box-shadow: none !important;
    text-decoration: none;
    transform: none;
    filter: none;
    opacity: 1;
}

.navbar.is-app .navbar-item,
.navbar.is-app .navbar-link {
    background-color: transparent;
    color: var(--pplh-muted);
}

.navbar.is-app .navbar-burger {
    height: 2.9rem;
    width: 2.9rem;
    color: var(--pplh-text);
}

.nav-link-item {
    padding: .4rem .9rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pplh-muted);
    transition: color .3s ease;
}

.navbar.is-app .nav-link-item:hover,
.navbar.is-app .nav-link-item.is-current {
    color: var(--pplh-primary);
    background-color: transparent;
}

.navbar-sep {
    display: inline-block;
    width: 1px;
    height: 1.25rem;
    margin: 0 .5rem;
    background-color: currentColor;
    color: var(--pplh-muted);
    opacity: .3;
}

/* ---- Menu bercabang (mis. Data > Statistik/Ekspor/Impor) ---------------
   Dibuka lewat klik memakai handler .js-dropdown yang sama dengan menu
   pengguna, jadi yang perlu diatur di sini hanya tampilannya. */
.navbar.is-app .nav-dropdown {
    padding: 0;
}

.navbar.is-app .nav-dropdown .navbar-link {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    background-color: transparent;
    cursor: pointer;
}

.nav-dropdown__panah {
    font-size: 1.1rem;
    transition: transform .25s ease;
}

.navbar.is-app .nav-dropdown.is-active .nav-dropdown__panah {
    transform: rotate(180deg);
}

.navbar.is-app .nav-dropdown.is-active > .navbar-link {
    color: var(--pplh-primary);
}

.navbar.is-app .nav-dropdown .navbar-dropdown {
    min-width: 12.5rem;
    padding: .4rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius);
    background-color: var(--pplh-surface);
    box-shadow: var(--pplh-shadow);
}

.navbar.is-app .nav-dropdown .navbar-dropdown .navbar-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pplh-text) !important;
}

.navbar.is-app .nav-dropdown .navbar-dropdown .navbar-item:hover {
    background-color: var(--pplh-surface-2) !important;
}

/* Halaman yang sedang dibuka ditandai dengan latar tipis, bukan hanya warna
   teks: di dalam panel yang sudah berlatar sendiri, warna saja terlalu samar. */
.navbar.is-app .nav-dropdown .navbar-dropdown .navbar-item.is-current {
    background-color: var(--pplh-lapor-bg) !important;
    color: var(--pplh-primary) !important;
}

.navbar.is-app .nav-dropdown .navbar-dropdown .navbar-item i {
    font-size: 1.15rem;
    color: var(--pplh-primary);
}

.navbar.is-app .btn-brand.is-small {
    padding: 6px 18px;
    height: auto;
}

@media screen and (max-width: 1023px) {
    .navbar-sep {
        display: none;
    }

    /* Default tertutup; dibuka lewat klik seperti versi desktop. */
    .navbar.is-app .user-menu .navbar-dropdown,
    .navbar.is-app .nav-dropdown .navbar-dropdown {
        display: none;
        margin-top: .35rem;
    }

    .navbar.is-app .user-menu.is-active .navbar-dropdown,
    .navbar.is-app .nav-dropdown.is-active .navbar-dropdown {
        display: block;
    }

    /* Di menu burger tiap item menempati satu baris penuh, jadi pemicunya
       ikut melebar dan panahnya didorong ke tepi kanan. */
    .navbar.is-app .nav-dropdown {
        display: block;
        width: 100%;
    }

    .navbar.is-app .nav-dropdown .navbar-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }


    /* Menu burger dibuka ke bawah brand, tetap di dalam batang kaca. */
    .navbar.is-app > .container {
        flex-wrap: wrap;
        border-radius: var(--pplh-radius-lg);
        padding: 0 1.15rem;
    }

    /* Ikon burger 1rem berada di tengah kotak 2.9rem, jadi kotaknya digeser
       keluar sebesar sisa ruang itu supaya jarak optis ikon ke tepi kanan
       sama dengan jarak wordmark ke tepi kiri. */
    .navbar.is-app .navbar-burger {
        margin-right: -.95rem;
    }

    /* Karena kotaknya sengaja digeser keluar, latar hover/aktif bawaan Bulma
       akan berhenti hanya .2rem dari tepi dan menabrak sudut membulat batang
       kaca. Yang boleh terlihat cuma ikonnya — posisinya sudah presisi. */
    .navbar.is-app .navbar-burger,
    .navbar.is-app .navbar-burger:hover,
    .navbar.is-app .navbar-burger:focus,
    .navbar.is-app .navbar-burger.is-active {
        background-color: transparent;
        --bulma-navbar-item-background-l-delta: 0;
        --bulma-navbar-item-hover-background-l-delta: 0;
        --bulma-navbar-item-active-background-l-delta: 0;
    }

    .navbar.is-app .navbar-menu {
        width: 100%;
        padding: .35rem 0 .6rem;
    }

    /* Isi menu ikut rata dengan wordmark di atasnya. */
    .navbar.is-app .navbar-menu > .navbar-end > .navbar-item {
        padding-left: 0;
        padding-right: 0;
    }

    .navbar.is-app .navbar-menu.is-active {
        border-top: 1px solid var(--pplh-border);
    }

    .navbar.is-app .navbar-end {
        min-height: auto;
    }
}

/* Tombol utama bergaya referensi: gradasi + pill. */
.btn-brand {
    padding: 10px 24px;
    border: none;
    border-radius: 999px;
    background: var(--pplh-gradient);
    color: #fff;
    font-weight: 600;
    transition: box-shadow .3s ease, filter .3s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 88, 74, .3);
}

.btn-cta {
    background: var(--pplh-gradient-cta);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    transition: filter .3s ease, box-shadow .3s ease;
}

.btn-cta:hover,
.btn-cta:focus {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(0, 88, 74, .35);
}

.btn-soft {
    border-radius: 999px;
    border: 1px solid var(--pplh-border);
    background-color: var(--pplh-surface);
    color: var(--pplh-text);
    font-weight: 600;
    padding: 10px 24px;
}

.btn-soft:hover {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
}

/* Tombol sekunder bergaris untuk aksi di dalam kartu (mis. "Edit Data"). */
.btn-outline {
    border-radius: 999px;
    border: 1px solid var(--pplh-primary);
    background-color: transparent;
    color: var(--pplh-primary);
    font-weight: 600;
    padding: 6px 16px;
}

.btn-outline:hover,
.btn-outline:focus {
    border-color: var(--pplh-primary);
    background-color: rgba(0, 113, 92, .08);
    color: var(--pplh-primary);
}

html[data-theme='dark'] .btn-outline {
    border-color: #2ec4a6;
    color: #2ec4a6;
}

html[data-theme='dark'] .btn-outline:hover,
html[data-theme='dark'] .btn-outline:focus {
    background-color: rgba(46, 196, 166, .12);
    color: #2ec4a6;
}

/* Kembaran .btn-outline untuk aksi merusak (mis. hapus kegiatan). */
.btn-outline-danger {
    border-radius: 999px;
    border: 1px solid #e5484d;
    background-color: transparent;
    color: #e5484d;
    font-weight: 600;
    padding: 6px 16px;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    border-color: #e5484d;
    background-color: rgba(229, 72, 77, .1);
    color: #e5484d;
}

html[data-theme='dark'] .btn-outline-danger {
    border-color: #ff6369;
    color: #ff6369;
}

html[data-theme='dark'] .btn-outline-danger:hover,
html[data-theme='dark'] .btn-outline-danger:focus {
    background-color: rgba(255, 99, 105, .14);
    color: #ff6369;
}

/* Tombol hapus baris pada daftar yang bisa ditambah-kurang. */
.btn-hapus {
    border-radius: var(--pplh-radius-sm);
    border: 1px solid var(--pplh-border);
    background-color: var(--pplh-surface);
    color: #e5484d;
}

.btn-hapus:hover,
.btn-hapus:focus {
    border-color: #e5484d;
    background-color: rgba(229, 72, 77, .08);
    color: #e5484d;
}

/* =========================================================================
   Sakelar tema (50x24, thumb berisi ikon)
   ========================================================================= */

.theme-switch {
    position: relative;
    width: 50px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: #cbd5e1;
    transition: background .35s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-switch:hover {
    filter: brightness(.97);
}

.theme-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 88, 74, .3);
}

.theme-switch__track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    pointer-events: none;
}

.theme-switch__bg-icon {
    font-size: .8rem;
    line-height: 1;
    transition: opacity .35s ease;
}

.theme-switch__bg-icon--sun { color: #fff3cd; opacity: 1; }
.theme-switch__bg-icon--moon { color: #e2e8f0; opacity: .55; }

.theme-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    color: #f59e0b;
    font-size: .7rem;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .35s ease, color .35s ease;
}

/* State gelap dibaca dari atribut html, jadi posisi knob benar sejak render. */
html[data-theme='dark'] .theme-switch { background: #334155; }

html[data-theme='dark'] .theme-switch__thumb {
    transform: translateX(26px);
    background: #1e293b;
    color: #cbd5e1;
}

html[data-theme='dark'] .theme-switch__bg-icon--sun { opacity: .45; }
html[data-theme='dark'] .theme-switch__bg-icon--moon { opacity: 1; }

/* Ikon di dalam knob: matahari saat terang, bulan saat gelap. Ditumpuk dan
   ditukar lewat CSS supaya tidak perlu menunggu JS. */
.theme-switch__thumb-icon {
    position: absolute;
    line-height: 1;
}

.theme-switch__thumb-icon--moon { display: none; }

html[data-theme='dark'] .theme-switch__thumb-icon--sun { display: none; }
html[data-theme='dark'] .theme-switch__thumb-icon--moon { display: block; }

/* =========================================================================
   Menu pengguna
   ========================================================================= */

/* Tanpa padding: avatar-lah yang jadi tepi pemicu, jadi sisi kanannya rata
   persis dengan jarak wordmark ke tepi kiri batang navigasi (dan rata dengan
   daftar menu saat burger terbuka). */
.user-menu .navbar-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 999px;
    color: var(--pplh-text) !important;
}

.user-menu .navbar-link:hover {
    background-color: transparent !important;
}

/* Avatar inisial: satu-satunya isi pemicu, jadi ukurannya dikunci supaya
   lebar menu tidak lagi mengikuti panjang nama pengguna. */
.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--pplh-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    transition: filter .25s ease;
}

/* Penanda hover cukup dari kecerahan; ring di luar lingkaran akan melewati
   batas tepi navbar dan merusak kerataannya. */
.user-menu .navbar-link:hover .user-menu__avatar,
.user-menu.is-active .user-menu__avatar {
    filter: brightness(1.15);
}

.user-menu .navbar-dropdown {
    min-width: 15rem;
    padding: .4rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius);
    background-color: var(--pplh-surface);
    box-shadow: var(--pplh-shadow);
}

.user-menu .navbar-dropdown .navbar-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-weight: 500;
    color: var(--pplh-text) !important;
}

.user-menu .navbar-dropdown .navbar-item:hover {
    background-color: var(--pplh-surface-2) !important;
}

.user-menu .navbar-dropdown .navbar-item i {
    font-size: 1.15rem;
    color: var(--pplh-primary);
}

.user-menu__meta {
    padding: .55rem .75rem .7rem;
    border-bottom: 1px solid var(--pplh-border);
    margin-bottom: .4rem;
}

.user-menu__meta strong {
    display: block;
    font-size: .9rem;
    color: var(--pplh-text-strong);
}

.user-menu__meta span {
    font-size: .75rem;
    color: var(--pplh-muted);
}

.user-menu__logout {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    color: #e5484d !important;
}

.user-menu__logout i {
    color: #e5484d !important;
}

html[data-theme='dark'] .user-menu__logout,
html[data-theme='dark'] .user-menu__logout i {
    color: #ff6b6b !important;
}

/* =========================================================================
   Tipografi halaman
   ========================================================================= */

.page-greeting {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pplh-text-strong);
}

.page-lead {
    margin-top: .5rem;
    font-size: 1rem;
    color: var(--pplh-muted);
}

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pplh-text-strong);
}

/* =========================================================================
   Kartu
   ========================================================================= */

.stat-card {
    padding: 1.75rem;
    border: none;
    border-radius: var(--pplh-radius-lg);
    background: var(--pplh-surface);
    box-shadow: var(--pplh-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Samakan tinggi hanya untuk kartu yang berdiri sendiri di satu kolom. */
.column > .stat-card:only-child,
.column > .glass-card:only-child {
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
}

html[data-theme='dark'] .stat-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

.glass-card {
    background: var(--pplh-glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--pplh-glass-border);
    box-shadow: var(--pplh-shadow-lg);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border-radius: var(--pplh-radius);
    font-size: 26px;
}

/* Tiga aksen sesuai logo: hijau, biru, oranye. */
.icon-box.is-green { background: rgba(0, 113, 92, .12); color: #00715c; }
.icon-box.is-blue { background: rgba(30, 136, 245, .12); color: #0b62c4; }
.icon-box.is-cyan { background: rgba(30, 136, 245, .12); color: #0b62c4; }
.icon-box.is-orange { background: rgba(245, 130, 32, .14); color: #d96c0c; }

html[data-theme='dark'] .icon-box.is-green { background: rgba(46, 196, 166, .14); color: #2ec4a6; }
html[data-theme='dark'] .icon-box.is-blue,
html[data-theme='dark'] .icon-box.is-cyan { background: rgba(87, 168, 247, .14); color: #57a8f7; }
html[data-theme='dark'] .icon-box.is-orange { background: rgba(249, 160, 63, .14); color: #f9a03f; }

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pplh-text-strong);
}

.card-text {
    margin-top: .5rem;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--pplh-muted);
}

.stat-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--pplh-text-strong);
}

.stat-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pplh-muted);
}

/* Chip kecil untuk label sekunder. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Modifier ditulis BEM, bukan .is-mini, supaya chip netral di bawah tetap
   dikenali oleh :not([class*='is-']). */
.chip--mini {
    padding: .1rem .45rem;
    font-size: .7rem;
}

.chip:not([class*='is-']) {
    background-color: var(--pplh-surface-2);
    border-color: var(--pplh-border);
    color: var(--pplh-text-strong);
}

.chip.is-green { background-color: #e4f2ee; color: #00715c; border-color: #c9e5dd; }
.chip.is-blue { background-color: #e6f1fe; color: #0b62c4; border-color: #cbe2fb; }
.chip.is-orange { background-color: #fdf0e2; color: #b8580a; border-color: #f8ddbe; }
.chip.is-red { background-color: #fdeaea; color: #c0292e; border-color: #f7cccd; }

html[data-theme='dark'] .chip.is-green { background-color: rgba(46, 196, 166, .14); color: #2ec4a6; border-color: rgba(46, 196, 166, .3); }
html[data-theme='dark'] .chip.is-blue { background-color: rgba(87, 168, 247, .14); color: #57a8f7; border-color: rgba(87, 168, 247, .3); }
html[data-theme='dark'] .chip.is-orange { background-color: rgba(249, 160, 63, .14); color: #f9a03f; border-color: rgba(249, 160, 63, .3); }
html[data-theme='dark'] .chip.is-red { background-color: rgba(255, 99, 105, .16); color: #ff6369; border-color: rgba(255, 99, 105, .32); }

/* =========================================================================
   Dashboard — kartu angka & kartu rekap
   ========================================================================= */

/* Empat kartu angka teratas hanyalah pembuka sebelum rekap di bawahnya, jadi
   ikonnya pindah ke samping teks seperti kartu angka di halaman detail
   (.ringkasan-kegiatan): kartunya jadi pendek, dan rekap yang justru dibaca
   tidak terdorong ke bawah lipatan layar. */
.dashboard-angka .stat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .85rem;
    padding: 1rem 1.15rem;
}

.dashboard-angka .icon-box {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    margin-bottom: 0;
    font-size: 21px;
}

.dashboard-angka .stat-label {
    font-size: .72rem;
    letter-spacing: .05em;
}

.dashboard-angka .stat-value {
    margin-top: .1rem;
    font-size: 1.6rem;
}

/* ---- Kartu rekap -------------------------------------------------------
   Tiga kartu dengan isi berbeda jenis (sebaran status, sebaran dokumen,
   hitungan catatan) memakai satu kerangka: kepala berikon + angka total,
   lalu daftar barisnya. Warna aksennya diambil per kartu lewat --rekap-nada
   supaya bar dan ikonnya sewarna tanpa menulis ulang tiap aturan. */
.rekap-card {
    --rekap-nada: var(--pplh-primary);

    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1.15rem;
}

.rekap-card.is-green { --rekap-nada: var(--pplh-green); }
.rekap-card.is-blue { --rekap-nada: var(--klh-blue-deep); }
.rekap-card.is-orange { --rekap-nada: #d96c0c; }

html[data-theme='dark'] .rekap-card.is-green { --rekap-nada: #2ec4a6; }
html[data-theme='dark'] .rekap-card.is-blue { --rekap-nada: #57a8f7; }
html[data-theme='dark'] .rekap-card.is-orange { --rekap-nada: #f9a03f; }

/* Judulnya bisa dua baris ("Kegiatan per Dokumen LH" di kolom sempit),
   jadi ikon dan angka total diratakan ke baris pertama, bukan ke tengah. */
.rekap-card__kepala {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .1rem;
    padding-bottom: .85rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--pplh-border);
}

.rekap-card__kepala .icon-box.is-kecil {
    grid-row: 1 / span 2;
    vertical-align: baseline;
    margin-right: .65rem;
}

.rekap-card__kepala .section-title {
    font-size: .98rem;
    line-height: 1.35;
}

/* Angka total duduk di bawah judul sebagai keterangan, bukan di ujung kanan:
   di kolom selebar sepertiga layar, judul panjang dan angka di kanan saling
   berdesakan begitu jendelanya menyempit. */
.rekap-card__total {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pplh-muted);
    font-variant-numeric: tabular-nums;
}

.rekap-daftar {
    display: flex;
    flex-direction: column;
}

/* Baris sebaran: label dan angka sebaris, bar proporsi di bawahnya menempati
   lebar penuh baris. Tidak ada garis pemisah maupun latar belang — barnya
   sendiri sudah cukup memisahkan satu baris dari yang lain. */
.rekap-baris {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .35rem .75rem;
    padding: .55rem 0;
}

.rekap-baris + .rekap-baris {
    border-top: 1px solid var(--pplh-border);
}

.rekap-baris__label {
    color: var(--pplh-text);
    font-size: .88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Angka disamakan lebar digitnya supaya deretnya lurus dari baris ke baris. */
.rekap-baris__nilai {
    color: var(--pplh-text-strong);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rekap-baris__persen {
    margin-left: .45rem;
    color: var(--pplh-muted);
    font-size: .75rem;
    font-weight: 600;
}

.rekap-bar {
    grid-column: 1 / -1;
    align-self: center;
    height: 5px;
    border-radius: 999px;
    background: var(--pplh-surface-2);
    box-shadow: inset 0 0 0 1px var(--pplh-border);
    overflow: hidden;
}

/* Nilai nol tetap menyisakan sepotong bar agar barisnya tidak terlihat
   seperti bar yang gagal dirender. */
.rekap-bar__isi {
    display: block;
    min-width: 3px;
    height: 100%;
    border-radius: 999px;
    background: var(--rekap-nada);
    opacity: .85;
}

/* Baris berikon: dipakai kartu yang angkanya berdiri sendiri, bukan bagian
   dari satu keseluruhan, jadi tidak ada bar proporsinya. */
.rekap-baris.is-ikon {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: .7rem 0;
}

.rekap-baris__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 17px;
}

.rekap-baris__ikon.is-green { background: rgba(0, 113, 92, .12); color: #00715c; }
.rekap-baris__ikon.is-blue { background: rgba(30, 136, 245, .12); color: #0b62c4; }
.rekap-baris__ikon.is-orange { background: rgba(245, 130, 32, .14); color: #d96c0c; }

html[data-theme='dark'] .rekap-baris__ikon.is-green { background: rgba(46, 196, 166, .14); color: #2ec4a6; }
html[data-theme='dark'] .rekap-baris__ikon.is-blue { background: rgba(87, 168, 247, .14); color: #57a8f7; }
html[data-theme='dark'] .rekap-baris__ikon.is-orange { background: rgba(249, 160, 63, .14); color: #f9a03f; }

.rekap-kosong {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .9rem 0;
    color: var(--pplh-muted);
    font-size: .88rem;
}

@media screen and (max-width: 768px) {
    .dashboard-angka .stat-value {
        font-size: 1.45rem;
    }
}

/* =========================================================================
   Form & halaman autentikasi
   ========================================================================= */

.field-pill .input {
    height: 3rem;
    border-radius: 999px;
    border: 1px solid var(--pplh-border);
    background-color: var(--pplh-surface);
    color: var(--pplh-text);
    box-shadow: none;
    padding-left: 3rem;
}

.field-pill .input:focus {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 92, .14);
}

.field-pill .icon {
    color: #94a3b8 !important;
    height: 3rem !important;
    width: 3rem !important;
    font-size: 1.2rem;
}

.auth-card {
    padding: 2.5rem;
    border-radius: var(--pplh-radius-lg);
    background: var(--pplh-surface);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .1);
    border: 1px solid var(--pplh-border);
}

html[data-theme='dark'] .auth-card {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.auth-shell {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 9rem);
}

.auth-card .field:not(:last-child) {
    margin-bottom: 1.15rem;
}

.auth-card .input {
    height: 2.85rem;
    border-radius: var(--pplh-radius-sm);
}

.auth-card .input:focus {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 92, .14);
}

.auth-card .control.has-icons-left .icon {
    height: 2.85rem;
    color: #94a3b8;
}

.auth-card .button {
    border-radius: var(--pplh-radius-sm);
}

/* Tombol lihat kata sandi menumpang slot ikon kanan Bulma, yang bawaannya
   menolak klik (pointer-events: none) karena diniatkan sebagai hiasan. */
.control.has-icons-right .btn-lihat-sandi {
    pointer-events: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pplh-muted);
    cursor: pointer;
    transition: color .2s ease;
}

.control.has-icons-right .btn-lihat-sandi:hover,
.control.has-icons-right .btn-lihat-sandi[aria-pressed='true'] {
    color: var(--pplh-primary);
}

.control.has-icons-right .btn-lihat-sandi:focus-visible {
    outline: 2px solid var(--pplh-primary);
    outline-offset: -2px;
    border-radius: 6px;
}

/* Tombol addon (lihat password) disamakan tingginya dengan input. */
.auth-card .field.has-addons .button {
    height: 2.85rem;
}

/* Sewarna tombol lacak di beranda: dua-duanya tombol tunggal yang berdiri
   sendiri di tengah kartu, jadi gradasinya hijau penuh tanpa ujung biru. */
.auth-card .btn-cta {
    border-radius: 999px;
    height: 3rem;
    background: var(--pplh-gradient-cta-hijau);
}

.auth-card .btn-cta:hover,
.auth-card .btn-cta:focus {
    box-shadow: 0 6px 18px rgba(0, 88, 74, .32);
}

.auth-card .label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pplh-muted);
}

/* Kepala kartu login: sakelar tema di kanan atas, logo di tengah. */
.auth-toolbar {
    display: flex;
    justify-content: flex-end;
}

.auth-head {
    display: flex;
    justify-content: center;
    padding-bottom: 1.35rem;
    margin-top: .25rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--pplh-border);
}

.auth-head .brand__name {
    font-size: 1.5rem;
}

.auth-intro {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--pplh-muted);
    font-size: .93rem;
}

/* Captcha dibuat ringkas dan terpusat; gambar tetap dirender 160x46 lalu
   ditampilkan 38px agar mengecil tanpa kehilangan ketajaman. */
.captcha-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.captcha-row img {
    display: block;
    height: 38px;
    width: auto;
    border: 1px solid var(--pplh-border);
    border-radius: 8px;
}

.captcha-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--pplh-border);
    border-radius: 8px;
    background-color: var(--pplh-surface);
    color: var(--pplh-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.captcha-reload:hover {
    color: var(--pplh-primary);
    border-color: var(--pplh-primary);
}

.captcha-timer {
    margin: .4rem 0 .6rem;
    text-align: center;
    font-size: .78rem;
    color: var(--pplh-muted);
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    color: var(--pplh-muted);
}

.auth-link:hover {
    color: var(--pplh-primary);
}

/* Bulma memakai warna sendiri untuk input/tabel; samakan dengan palet PPLH. */
.input,
.textarea,
.select select {
    background-color: var(--pplh-surface);
    border-color: var(--pplh-border);
    color: var(--pplh-text);
}

.input::placeholder {
    color: #94a3b8;
}

.table {
    background-color: transparent;
    color: var(--pplh-text);
}

.table th {
    color: var(--pplh-text-strong);
}

.table td,
.table th {
    border-bottom-color: var(--pplh-border);
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer.is-app {
    margin-top: auto;
    padding: 1rem 0 1.5rem;
    background-color: transparent;
}

.footer.is-app hr {
    background-color: var(--pplh-border);
    margin-bottom: 1rem;
}

.footer__note {
    font-size: 9pt;
    color: var(--pplh-muted);
}

.footer__note a {
    color: var(--pplh-muted);
    text-decoration: none;
}

.footer__note a:hover {
    color: var(--pplh-primary);
}

/* =========================================================================
   SweetAlert2 — ikut sakelar tema aplikasi, bukan tema OS
   ========================================================================= */

.swal2-popup {
    border-radius: var(--pplh-radius-lg);
    font-family: var(--bulma-family-primary);
    background-color: var(--pplh-surface);
    color: var(--pplh-text);
}

.swal2-title,
.swal2-html-container {
    color: var(--pplh-text-strong);
}

.swal2-styled.swal2-confirm {
    border-radius: 999px;
    padding: 10px 24px;
    background: var(--pplh-gradient) !important;
    font-weight: 600;
}

/* =========================================================================
   Pelacakan perusahaan (halaman pencarian)
   ========================================================================= */

.track-shell {
    width: 100%;
}

.track-hero {
    text-align: center;
    margin-bottom: 2rem;
}

/* Varian beranda: rata kiri, tanpa kartu pembungkus. */
.track-hero.is-left {
    text-align: left;
    margin-bottom: 1.75rem;
}

.track-hero.is-left .page-lead {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.track-hero .page-greeting {
    font-size: 2.15rem;
}

/* Hero rata kiri (dashboard & beranda tamu) dipakai sebagai sapaan pembuka,
   bukan judul utama halaman: ukurannya diturunkan supaya tidak menyaingi
   kartu statistik dan field pencarian yang justru jadi tujuan orang datang. */
.track-hero.is-left .page-greeting {
    font-size: 1.55rem;
}

.track-hero.is-left .page-lead {
    font-size: .95rem;
}

.track-hero .page-lead {
    max-width: 34rem;
    margin: .75rem auto 0;
}

/* Input + tombol menyatu jadi satu pill besar. */
.track-form {
    display: flex;
    gap: .6rem;
    align-items: stretch;
}

.track-form .control {
    flex: 1 1 auto;
}

.track-form .input {
    height: 3.1rem;
    border-radius: 999px;
    padding-left: 3rem;
    background-color: var(--pplh-surface);
    box-shadow: none;
}

.track-form .input:focus {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 92, .14);
}

.track-form .icon {
    height: 3.1rem !important;
    width: 3rem !important;
    font-size: 1.2rem;
    color: var(--pplh-muted) !important;
}

.track-form .button {
    height: 3.1rem;
    padding-inline: 1.75rem;
    white-space: nowrap;
}

.track-hint {
    margin-top: .75rem;
    font-size: .82rem;
    color: var(--pplh-muted);
}

@media screen and (max-width: 640px) {
    /* Tombol jadi bulat berisi ikon saja; labelnya disembunyikan. */
    .track-form .button {
        width: 3.1rem;
        flex-shrink: 0;
        padding-inline: 0;
        border-radius: 999px;
    }

    .track-form__label {
        display: none;
    }

    .track-form .button i {
        margin-right: 0 !important;
    }

    .track-hero .page-greeting {
        font-size: 1.6rem;
    }

    .track-hero.is-left .page-greeting {
        font-size: 1.3rem;
    }
}

/* Hasil pencarian */
.track-result {
    margin-top: 1.5rem;
}

.track-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.track-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius);
    background-color: var(--pplh-surface);
}

.track-item + .track-item {
    margin-top: .6rem;
}

.track-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.track-item__link {
    color: inherit;
}

.track-item__link:hover,
.track-item__link:focus {
    color: var(--pplh-primary);
    text-decoration: underline;
}

/* Chip status pada baris hasil menempel rapat ke teksnya. */
.track-item .chip-row {
    margin-top: .55rem;
}

/* Angka pembanding pada kartu statistik (mis. 12/30). */
.stat-value__sisa {
    font-size: .62em;
    font-weight: 600;
    color: var(--pplh-muted);
}

.track-empty {
    padding: 2.5rem 1.5rem;
    border-radius: var(--pplh-radius-lg);
    text-align: center;
}

/* Lencana ikon kecil di tiap baris hasil. */
.track-item__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    background: rgba(0, 113, 92, .12);
    color: var(--pplh-primary);
}

html[data-theme='dark'] .track-item__ico {
    background: rgba(46, 196, 166, .14);
    color: #2ec4a6;
}

.track-empty i {
    font-size: 2.6rem;
    color: var(--pplh-muted);
    opacity: .65;
}

.track-empty .card-title {
    margin-top: .6rem;
}

.track-empty .card-text {
    max-width: 28rem;
    margin-inline: auto;
}

/* Tombol lacak memakai gradasi hijau penuh, bukan hijau-ke-biru seperti
   tombol utama lain: di halaman ini ia berdiri sendiri di tengah bidang
   putih, dan ujung birunya jadi satu-satunya warna yang tak punya padanan
   di sekelilingnya. */
.track-form .btn-cta {
    background: var(--pplh-gradient-cta-hijau);
}

.track-form .btn-cta:hover,
.track-form .btn-cta:focus {
    box-shadow: 0 6px 18px rgba(0, 88, 74, .32);
}

/* ---- Navigasi halaman hasil -------------------------------------------- */

.paginasi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pplh-border);
}

.paginasi__info {
    font-size: .84rem;
    color: var(--pplh-muted);
    font-variant-numeric: tabular-nums;
}

.paginasi__daftar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

/* Nomor dan tombol berbagi bentuk yang sama supaya deretnya rata; yang
   membedakan hanya lebarnya, karena tombol membawa teks arah. */
.paginasi__nomor,
.paginasi__tombol {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 .7rem;
    border: 1px solid var(--pplh-border);
    border-radius: 999px;
    background: var(--pplh-surface);
    color: var(--pplh-text);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.paginasi__nomor:hover,
.paginasi__tombol:hover {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
}

/* Halaman yang sedang dibuka memakai gradasi hijau yang sama dengan pil
   aktif di halaman detail, jadi "sedang di sini" selalu satu bahasa. */
.paginasi__nomor.is-aktif {
    border-color: transparent;
    background: var(--pplh-gradient-aktif);
    color: var(--pplh-aktif-teks);
    box-shadow: var(--pplh-aktif-bayang);
}

/* Ujung deret tetap ditampilkan supaya lebar navigasinya tidak berubah
   tiap pindah halaman, tapi jelas tidak bisa ditekan. */
.paginasi__tombol.is-nonaktif {
    color: var(--pplh-muted);
    opacity: .55;
    cursor: not-allowed;
}

.paginasi__tombol.is-nonaktif:hover {
    border-color: var(--pplh-border);
    color: var(--pplh-muted);
}

.paginasi__jeda {
    display: inline-flex;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--pplh-muted);
}

@media screen and (max-width: 640px) {
    /* Di layar sempit teks arahnya dibuang; ikon panahnya sudah cukup, dan
       deret nomor jadi tidak terdorong turun. */
    .paginasi__tombol-teks {
        display: none;
    }

    .paginasi__tombol {
        padding: 0;
    }

    .paginasi__daftar {
        margin-left: 0;
    }
}

/* =========================================================================
   FAQ (akordeon) & blok kontak
   ========================================================================= */

/* Seluruh pertanyaan berada dalam satu kartu; tiap baris hanya dipisah garis,
   bukan kartu sendiri-sendiri, supaya daftarnya terbaca sebagai satu kesatuan. */
.faq-list {
    border-radius: var(--pplh-radius);
    overflow: hidden;
    background: var(--pplh-glass-bg);
    border: 1px solid var(--pplh-glass-border);
    box-shadow: var(--pplh-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}

.faq-item + .faq-item {
    border-top: 1px solid var(--pplh-glass-border);
}

.faq-item {
    background: transparent;
    transition: background .25s ease;
}

.faq-item.is-open {
    background: rgba(255, 255, 255, .35);
}

html[data-theme='dark'] .faq-item.is-open {
    background: rgba(255, 255, 255, .04);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.05rem 1.25rem;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 600;
    text-align: left;
    color: var(--pplh-text-strong);
    cursor: pointer;
    transition: color .25s ease;
}

.faq-question:hover {
    color: var(--pplh-primary);
}

.faq-question i {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: var(--pplh-primary);
    transition: transform .3s ease;
}

.faq-item.is-open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 1.25rem 1.15rem;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--pplh-muted);
}

.faq-item.is-open .faq-answer {
    display: block;
}

.faq-answer ul,
.faq-answer ol {
    margin: .5rem 0 0 1.1rem;
}

.faq-answer li + li {
    margin-top: .3rem;
}

.contact-list {
    list-style: none;
    margin: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.contact-list li + li {
    margin-top: 1.1rem;
}

.contact-list .contact-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.2rem;
    background: rgba(0, 113, 92, .12);
    color: var(--pplh-primary);
}

.contact-list .contact-ico.is-blue { background: rgba(30, 136, 245, .12); color: #0b62c4; }
.contact-list .contact-ico.is-orange { background: rgba(245, 130, 32, .14); color: #d96c0c; }

html[data-theme='dark'] .contact-list .contact-ico { background: rgba(46, 196, 166, .14); color: #2ec4a6; }
html[data-theme='dark'] .contact-list .contact-ico.is-blue { background: rgba(87, 168, 247, .14); color: #57a8f7; }
html[data-theme='dark'] .contact-list .contact-ico.is-orange { background: rgba(249, 160, 63, .14); color: #f9a03f; }

.contact-list .contact-dt {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pplh-muted);
}

.contact-list .contact-dd {
    margin-top: .15rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--pplh-text);
}

.contact-list .contact-dd a {
    color: var(--pplh-text);
}

.contact-list .contact-dd a:hover {
    color: var(--pplh-primary);
}

.social-links {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--pplh-border);
    font-size: 1.2rem;
    color: var(--pplh-muted);
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.social-links a:hover {
    color: var(--pplh-primary);
    border-color: var(--pplh-primary);
    transform: translateY(-2px);
}

/* Merek & item di dalam batang kaca dibuat lebih ringkas mengikuti tinggi navbar. */
.navbar.is-app .brand__name {
    font-size: 1.4rem;
}

.navbar.is-app .navbar-item {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Di bawah 1024px .container masih selebar layar, jadi jarak tepinya
   dipasang manual — nilai sama untuk navbar, konten, dan footer. */
@media screen and (max-width: 1023px) {
    .section-tight,
    .navbar.is-app,
    .footer.is-app {
        padding-left: var(--pplh-gutter);
        padding-right: var(--pplh-gutter);
    }
}

/* =========================================================================
   Modul Kegiatan — toolbar tabel, form, halaman detail,
   serta penyelarasan tampilan DataTables & Select2 dengan tema aplikasi.
   ========================================================================= */

.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.25rem 1rem;
    border: 1px dashed var(--pplh-border);
    border-radius: var(--pplh-radius);
    background: var(--pplh-surface-2);
    color: var(--pplh-muted);
    text-align: center;
}

.empty-state i {
    font-size: 1.9rem;
    opacity: .7;
}

/* ---- Halaman detail ---------------------------------------------------- */

/* Warna bawaan Bulma untuk breadcrumb terlalu terang di atas latar terang,
   jadi tautannya diikat ke token teks aplikasi. */
.breadcrumb a {
    color: var(--pplh-muted);
    font-weight: 600;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--pplh-primary);
}

.breadcrumb li.is-active a {
    color: var(--pplh-text-strong);
    cursor: default;
}

.breadcrumb li + li::before {
    color: var(--pplh-border);
}

html[data-theme='dark'] .breadcrumb li + li::before {
    color: var(--pplh-muted);
    opacity: .55;
}


/* Satu kartu berisi judul kegiatan dan seluruh kelompok datanya. */
.detail-kartu {
    display: flex;
    flex-direction: column;
}

/* Judul sengaja tidak jauh lebih besar dari isi kartu di bawahnya: bobot
   tebal dan warna teks utama sudah cukup membuatnya terbaca lebih dulu,
   tanpa jomplang dengan chip kode dan baris meta di sekelilingnya. */
.detail-kartu__title,
.detail-hero__title {
    margin: .5rem 0 .4rem;
    color: var(--pplh-text-strong);
    font-family: 'Poppins', var(--bulma-family-primary);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

/* Kepala halaman detail: identitas di kiri, aksi kegiatan di kanan. */
.detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.detail-hero__utama {
    min-width: 0;
}

.detail-hero__aksi {
    flex-shrink: 0;
    padding-top: .2rem;
}

/* Baris meta: pemrakarsa · jenis dokumen · pencatat. */
.detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .55rem;
    margin-bottom: 1rem;
    color: var(--pplh-muted);
    font-size: .84rem;
    font-weight: 500;
}

.detail-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Pemrakarsa dipertegas: warnanya naik ke warna teks utama dan diberi latar
   tipis, jadi terbaca lebih dulu daripada keterangan meta di sebelahnya —
   tanpa jadi lencana berwarna yang menyaingi judul kegiatan di atasnya. */
.detail-hero__meta-item.is-utama {
    border: 1px solid var(--pplh-border);
    border-radius: 999px;
    background: var(--pplh-surface-2);
    padding: .15rem .6rem;
    color: var(--pplh-text-strong);
    font-weight: 600;
}

.detail-hero__meta-item.is-utama i {
    color: var(--pplh-primary);
}

.detail-hero__meta-sep {
    color: var(--pplh-border);
}

/* Chip kode kegiatan sekaligus pemicu jejak pencatatan. Pembungkusnya jadi
   jangkar posisi panelnya, jadi panel tetap menempel walau chip bergeser
   saat lebar layar berubah. */
.detail-kode {
    position: relative;
    display: inline-block;
}

.detail-kode__pemicu {
    cursor: pointer;
    font-family: inherit;
    transition: filter .2s ease, box-shadow .2s ease;
}

.detail-kode__pemicu:hover,
.detail-kode__pemicu[aria-expanded='true'] {
    filter: brightness(.97);
    box-shadow: 0 0 0 3px rgba(30, 136, 245, .14);
}

.detail-kode__pemicu:focus-visible {
    outline: 2px solid var(--pplh-blue);
    outline-offset: 2px;
}

/* Panel jejak pencatatan: sengaja tidak meniru tooltip hitam bawaan peramban
   — ia kartu kecil bertumpuk di atas kartu kepala. Letaknya di sebelah
   kanan chip, bukan di bawahnya: di bawah ia menutupi judul kegiatan yang
   justru sedang dibaca. */
.jejak-pop {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: calc(100% + .6rem);
    width: max-content;
    max-width: calc(100vw - 2rem - var(--jejak-kiri, 12rem));
    padding: .6rem .8rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius);
    background: var(--pplh-surface);
    box-shadow: var(--pplh-shadow-lg);
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    visibility: hidden;
}

.jejak-pop.is-tampil {
    opacity: 1;
    transform: translateY(-50%);
    visibility: visible;
}

/* Segitiga penunjuk dirakit dari kotak yang diputar, supaya garis tepi
   panelnya ikut tersambung — bukan segitiga border yang menggantung. */
.jejak-pop::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -.3rem;
    width: .6rem;
    height: .6rem;
    margin-top: -.3rem;
    border-bottom: 1px solid var(--pplh-border);
    border-left: 1px solid var(--pplh-border);
    background: var(--pplh-surface);
    transform: rotate(45deg);
}

/* Satu baris penuh selama masih muat: 'width: max-content' pada panelnya
   yang menjaga itu, bukan 'white-space: nowrap' — nowrap membuat kalimat
   meluber keluar kotak begitu max-width menjepit lebarnya. */
.jejak-pop__kalimat {
    margin: 0;
    color: var(--pplh-muted);
    font-size: .82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Ikon dibiarkan mengalir sebagai bagian kalimat (bukan flex item) supaya
   jarak antarkatanya tetap jarak spasi biasa. */
.jejak-pop__ikon {
    position: relative;
    top: .1rem;
    margin-right: .2rem;
    color: var(--pplh-primary);
    font-size: .95rem;
}

.jejak-pop__nilai {
    color: var(--pplh-text-strong);
    font-weight: 600;
}

/* Layar sedang: kalimatnya sudah pasti membungkus jadi beberapa baris,
   jadi panelnya diberi lebar minimal supaya tidak menyusut jadi kolom
   selebar dua kata. */
@media screen and (max-width: 1023px) {
    .jejak-pop {
        min-width: 12rem;
    }
}

/* Layar sempit: di samping chip sudah tidak tersisa ruang yang layak, jadi
   panelnya turun ke bawah chip dan direntangkan selebar kartu. Judul memang
   ikut tertutup di sini, tapi itu masih lebih baik daripada panel selebar
   dua kata yang terpotong tepi layar. */
@media screen and (max-width: 599px) {
    .jejak-pop {
        top: calc(100% + .55rem);
        left: 0;
        width: max-content;
        max-width: calc(100vw - 4rem);
        min-width: 0;
        transform: translateY(-4px);
    }

    .jejak-pop.is-tampil {
        transform: none;
    }

    .jejak-pop::before {
        top: -.3rem;
        left: 1.1rem;
        margin-top: 0;
        border-top: 1px solid var(--pplh-border);
        border-bottom: 0;
    }
}

/* Papan status ringkas. */
.detail-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
}

.detail-status__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    min-width: 0;
}

.detail-status__label {
    color: var(--pplh-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.detail-status__value {
    color: var(--pplh-text-strong);
    font-size: .9rem;
    font-weight: 600;
}

/* ---- Akordeon kelompok data -------------------------------------------
   Kelompoknya berjajar mendatar seperti deretan pil: kepala tiap kelompok
   (order 1) mengisi baris atas dan boleh membungkus, sedangkan isinya
   (order 2) memakai satu baris penuh di bawahnya. Karena hanya satu kelompok
   yang terbuka, isi kelompok lain tinggi 0 dan tidak memakan tempat.
   Kelompok baru cukup ditambahkan sebagai <section class="akordeon">. */

.akordeon-bar {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: 0;
    margin-top: .35rem;
    padding-top: .9rem;
    border-top: 1px solid var(--pplh-border);
}

.akordeon {
    display: contents;
}

.akordeon__head {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    gap: .5rem;
    align-items: center;
    max-width: 100%;
    margin-bottom: .5rem;
    padding: .35rem .75rem;
    border: 1px solid var(--pplh-border);
    border-radius: 999px;
    background: var(--pplh-surface-2);
    transition: border-color .2s ease, background .2s ease;
}

.akordeon__head:hover {
    border-color: var(--pplh-primary);
}

/* Kelompok yang sedang dibuka diberi warna penuh, bukan sekadar berganti
   garis: dengan enam pil berjajar, beda garis tipis saja terlalu mudah
   terlewat. Seluruh isi pil (kait, ikon, judul, tombol edit) ikut dibalik
   warnanya karena latarnya sudah pekat. */
.akordeon.is-open .akordeon__head {
    border-color: transparent;
    background: var(--pplh-gradient-aktif);
    box-shadow: var(--pplh-aktif-bayang);
}

.akordeon.is-open .akordeon__toggle,
.akordeon.is-open .akordeon__toggle:hover,
.akordeon.is-open .akordeon__kait,
.akordeon.is-open .akordeon__ikon,
html[data-theme='dark'] .akordeon.is-open .akordeon__toggle,
html[data-theme='dark'] .akordeon.is-open .akordeon__toggle:hover,
html[data-theme='dark'] .akordeon.is-open .akordeon__ikon {
    color: var(--pplh-aktif-teks);
}

.akordeon.is-open .akordeon__toggle:focus-visible {
    outline-color: var(--pplh-aktif-teks);
}

.akordeon.is-open .akordeon__edit,
html[data-theme='dark'] .akordeon.is-open .akordeon__edit {
    border-color: rgba(255, 255, 255, .55);
    color: var(--pplh-aktif-teks);
}

.akordeon.is-open .akordeon__edit:hover,
.akordeon.is-open .akordeon__edit:focus,
html[data-theme='dark'] .akordeon.is-open .akordeon__edit:hover,
html[data-theme='dark'] .akordeon.is-open .akordeon__edit:focus {
    border-color: var(--pplh-aktif-teks);
    background-color: rgba(255, 255, 255, .18);
    color: var(--pplh-aktif-teks);
}

html[data-theme='dark'] .akordeon__head:hover {
    border-color: #2ec4a6;
}

/* Garis pil aktif di mode gelap dibuat senada dengan tulisannya yang gelap. */
html[data-theme='dark'] .akordeon.is-open .akordeon__edit {
    border-color: rgba(6, 35, 29, .45);
}

html[data-theme='dark'] .akordeon.is-open .akordeon__edit:hover,
html[data-theme='dark'] .akordeon.is-open .akordeon__edit:focus {
    background-color: rgba(6, 35, 29, .14);
}

.akordeon__toggle {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .15rem 0;
    border: 0;
    border-radius: var(--pplh-radius-sm);
    background: transparent;
    color: var(--pplh-text-strong);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.akordeon__toggle:hover {
    color: var(--pplh-primary);
}

html[data-theme='dark'] .akordeon__toggle:hover {
    color: #2ec4a6;
}

.akordeon__toggle:focus-visible {
    outline: 2px solid var(--pplh-primary);
    outline-offset: 3px;
}

.akordeon__kait {
    flex-shrink: 0;
    color: var(--pplh-muted);
    font-size: 1.15rem;
    transform: rotate(-90deg);
    transition: transform .25s ease;
}

.akordeon.is-open .akordeon__kait {
    transform: none;
}

.akordeon__ikon {
    flex-shrink: 0;
    color: var(--pplh-primary);
    font-size: 1.05rem;
}

html[data-theme='dark'] .akordeon__ikon {
    color: #2ec4a6;
}

.akordeon__judul {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tombol edit menempel pada kelompok yang sedang dibuka saja, supaya baris
   kepala kelompok yang tertutup tetap bersih. */
.akordeon__aksi {
    display: none;
    flex-shrink: 0;
}

.akordeon.is-open .akordeon__aksi {
    display: block;
    animation: akordeonAksiMasuk .22s ease-out;
}

/* Tombol edit di pil kelompok: ikon saja, teksnya jadi tooltip. */
.akordeon__edit {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border-radius: 999px;
    font-size: .95rem;
}

@keyframes akordeonAksiMasuk {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: none; }
}

/* 0fr -> 1fr membuat tinggi otomatis tetap bisa dianimasikan. */
.akordeon__isi {
    display: grid;
    order: 2;
    flex: 0 0 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.akordeon.is-open .akordeon__isi {
    grid-template-rows: 1fr;
}

/* Jarak bawah dititipkan ke ::after, bukan padding elemen ini: overflow
   memotong di tepi padding, jadi padding sendiri malah menyisakan celah
   tempat baris pertama data ikut terlihat saat akordeon tertutup. */
.akordeon__dalam {
    min-height: 0;
    overflow: hidden;
}

/* Jarak atas juga lewat ::before, bukan padding: isinya ikut terpotong
   overflow saat kelompok tertutup, jadi tidak menyisakan celah kosong. */
.akordeon__dalam::before {
    content: '';
    display: block;
    height: .65rem;
}

.akordeon__dalam::after {
    content: '';
    display: block;
    height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .akordeon__isi,
    .akordeon__kait {
        transition: none;
    }

    .akordeon.is-open .akordeon__aksi {
        animation: none;
    }
}

/* Daftar "label : nilai" bergaya berkas resmi. */
.data-list {
    display: grid;
    gap: .1rem;
}

/* Lebar kolom labelnya dibatasi terhadap lebar barisnya, bukan hanya dalam
   rem: kartu ini duduk di kolom kiri yang menyempit lebih dulu daripada
   layarnya, dan patokan rem saja membuat kolom nilai tersisa satu huruf. */
.data-list__row {
    display: grid;
    grid-template-columns: min(13rem, 42%) 1fr;
    gap: .1rem .75rem;
    padding: .4rem .65rem;
    border-radius: var(--pplh-radius-sm);
    font-size: .9rem;
    line-height: 1.5;
}

.data-list__row:nth-child(odd) {
    background: var(--pplh-surface-2);
}

.data-list__row dt {
    color: var(--pplh-text-strong);
    font-weight: 600;
}

.data-list__row dd {
    color: var(--pplh-text);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* pre-line di atas menjaga teks panjang tetap berbaris seperti aslinya, tapi
   membuat nilai berbentuk chip terdorong ke bawah titik duanya karena jeda
   baris pada markup ikut terbaca. Nilai seperti itu dikembalikan ke normal. */
.data-list__row dd:has(> .chip) {
    white-space: normal;
}

/* Titik dua sejajar seperti pada berkas cetak. */
.data-list__row dd::before {
    content: ': ';
    color: var(--pplh-muted);
}

@media screen and (max-width: 640px) {
    .data-list__row {
        grid-template-columns: 1fr;
    }

    .data-list__row dd::before {
        content: '';
    }
}

.detail-note {
    margin-top: .8rem;
    padding: .65rem .9rem;
    font-size: .9rem;
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .9rem;
}

.stat-value.is-compact {
    font-size: 1.45rem;
    line-height: 1.3;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .85rem 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem .9rem;
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
}

.detail-item.is-wide {
    grid-column: 1 / -1;
}

.detail-item__label {
    color: var(--pplh-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-item__value {
    color: var(--pplh-text-strong);
    font-weight: 500;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* ---- Batang konteks lengket -------------------------------------------
   Pengganti kartu kepala saat ia sudah tergulir keluar layar: kode,
   nama kegiatan, dan pemrakarsanya tetap terbaca sampai dasar halaman.
   Pembungkusnya setinggi 0 supaya tidak menyisakan celah di aliran halaman,
   batangnya mengambang di atas konten dengan bahan kaca seperti navbar. */

.konteks-lengket {
    position: sticky;
    top: 4.15rem; /* tinggi navbar mengambang + jaraknya */
    z-index: 25;
    height: 0;
}

.konteks-lengket__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid var(--pplh-glass-border);
    border-radius: 999px;
    background: var(--pplh-navbar-bg);
    box-shadow: 0 10px 30px rgba(0, 70, 58, .10);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    opacity: 0;
    transform: translateY(-.6rem);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.konteks-lengket.is-tampil .konteks-lengket__bar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

html[data-theme='dark'] .konteks-lengket__bar {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
    .konteks-lengket__bar {
        transition: opacity .22s ease;
        transform: none;
    }
}

/* Pemrakarsa dan nama kegiatan berdampingan dengan gaya yang sama supaya
   terbaca satu napas; keduanya dipotong elipsis agar batangnya tetap satu
   baris berapa pun panjang namanya. */
.konteks-lengket__teks {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.konteks-lengket__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    overflow: hidden;
    color: var(--pplh-text-strong);
    font-family: 'Poppins', var(--bulma-family-primary);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
}

.konteks-lengket__item + .konteks-lengket__item::before {
    content: '';
    flex-shrink: 0;
    width: 1px;
    height: .9rem;
    margin-right: .15rem;
    background: var(--pplh-border);
}

.konteks-lengket__item i {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--pplh-muted);
}

.konteks-lengket__item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.konteks-lengket__naik {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--pplh-border);
    border-radius: 50%;
    background: var(--pplh-surface);
    color: var(--pplh-muted);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.konteks-lengket__naik:hover {
    border-color: var(--pplh-primary);
    background: var(--pplh-surface-2);
    color: var(--pplh-primary);
}

.konteks-lengket__naik i {
    font-size: 1.15rem;
}

/* Di layar sempit pemrakarsa turun ke baris kedua, bukan dipotong habis. */
@media screen and (max-width: 768px) {
    .konteks-lengket {
        top: 3.9rem;
    }

    .konteks-lengket__teks {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .konteks-lengket__item {
        max-width: 100%;
        font-size: .8rem;
    }

    .konteks-lengket__item + .konteks-lengket__item::before {
        display: none;
    }
}

/* ---- Tab detail -------------------------------------------------------- */

.detail-tabs {
    margin-bottom: 1.25rem;
}

.detail-tabs ul {
    border-bottom-color: var(--pplh-border);
}

.detail-tabs li a {
    border-radius: var(--pplh-radius-sm) var(--pplh-radius-sm) 0 0;
    border-color: transparent;
    color: var(--pplh-muted);
    font-weight: 600;
    transition: background .25s ease, color .25s ease;
}

.detail-tabs li a:hover {
    color: var(--pplh-primary);
}

html[data-theme='dark'] .detail-tabs li a:hover {
    color: #2ec4a6;
}

/* Tab yang sedang dibuka diberi warna penuh, bukan sekadar berganti warna
   tulisan: dengan enam tab berjajar, beda tipis saja terlalu mudah terlewat.
   Warnanya sama dengan pil kelompok data di kartu kepala. */
.detail-tabs li.is-active a,
.detail-tabs li.is-active a:hover,
html[data-theme='dark'] .detail-tabs li.is-active a,
html[data-theme='dark'] .detail-tabs li.is-active a:hover {
    background: var(--pplh-gradient-aktif);
    border-color: transparent;
    color: var(--pplh-aktif-teks);
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

/* ---- DataTables -------------------------------------------------------- */

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    height: 2.4rem;
    padding: 0 .75rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
    color: var(--pplh-text);
}

/* Bulma menggambar panah pilihan lewat .select::after di sudut kanan; padding
   seragam di atas menutup ruangnya sehingga panah menimpa angka. Kembalikan
   ruang kanan khusus untuk pilihan jumlah baris. */
div.dt-container .dt-length .select select,
div.dt-container .dt-length select {
    padding-right: 2.4rem;
    min-width: 4.75rem;
}

div.dt-container .dt-length .select:not(.is-multiple):not(.is-loading)::after {
    border-color: var(--pplh-primary);
    right: 1rem;
}

div.dt-container .dt-search label,
div.dt-container .dt-length label,
div.dt-container .dt-info {
    color: var(--pplh-muted);
}

div.dt-container .pagination .pagination-link.is-current {
    background: var(--pplh-primary);
    border-color: var(--pplh-primary);
    color: #fff;
}

table.dataTable thead th {
    color: var(--pplh-text-strong);
}

/* ---- Select2 ----------------------------------------------------------- */

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 2.5rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: .75rem;
    color: var(--pplh-text);
    line-height: 2.4rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pplh-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.4rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 .125em rgba(0, 113, 92, .18);
}

.select2-dropdown {
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
    box-shadow: var(--pplh-shadow-lg);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
    color: var(--pplh-text);
}

.select2-container--default .select2-results__option {
    color: var(--pplh-text);
}

.select2-results__option .select2-results__option--selectable {
    color: inherit;
}

/* Panah, area gulir, dan pesan status ikut token tema — bawaan select2
   memakai warna terang tetap yang tak terbaca di mode gelap. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--pplh-muted);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--pplh-muted);
    border-top-color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--pplh-muted);
}

.select2-results__options {
    background: var(--pplh-surface);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 .125em rgba(46, 196, 166, .18);
    outline: none;
}

/* Baris yang sudah jadi nilai isian. */
.select2-container--default .select2-results__option--selected {
    background: var(--pplh-surface-2);
    color: var(--pplh-text);
}

/* Baris yang sedang disorot kursor/panah keyboard. select2 4.1 ikut memberi
   baris ini aria-selected="true", jadi aturannya ditulis paling akhir dan
   dengan penunjuk ganda supaya tidak kalah oleh aturan "terpilih" di atas
   maupun oleh warna biru bawaan select2 — dulu latarnya kalah dan yang
   tersisa hanya teks putih, tak terbaca di mode terang. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background: var(--pplh-primary);
    color: #fff;
}

.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__message {
    color: var(--pplh-muted);
}

.select2-container--default .select2-selection--single .select2-selection__rendered[aria-disabled='true'],
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--pplh-surface-2);
    color: var(--pplh-muted);
}

/* Kartu isi/tabel: diam saat disentuh kursor, supaya isian tabel tidak ikut bergeser. */
/* Kartu angka pada detail kegiatan dibuat ringkas: ikonnya pindah ke samping
   teks supaya kartunya pendek dan tab di bawahnya tidak terdorong jauh. */
.ringkasan-kegiatan .stat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .85rem;
    padding: .95rem 1.1rem;
}

.ringkasan-kegiatan .icon-box {
    grid-row: 1 / span 3;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    font-size: 20px;
}

.ringkasan-kegiatan .stat-label {
    font-size: .72rem;
}

.ringkasan-kegiatan .stat-value {
    font-size: 1.5rem;
}

.ringkasan-kegiatan .stat-value.is-compact {
    font-size: 1.15rem;
}

.ringkasan-kegiatan .card-text {
    margin-top: .1rem;
    font-size: .78rem;
    line-height: 1.4;
}

.stat-card.is-static,
.stat-card.is-static:hover {
    transform: none;
    box-shadow: var(--pplh-shadow);
}

.panel-rule {
    height: 1px;
    margin: .9rem 0 1.25rem;
    background: var(--pplh-border);
}

/* ---- Tabel bergaris (mengikuti tampilan daftar dokumen IDE-LH) --------- */

/* Pembungkus tabel: hanya menggulir mendatar saat tabel memang lebih lebar
   dari kartu (pola .table-responsive Bootstrap). */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
    height: .5rem;
}

.table-responsive::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--pplh-border);
}

.table-grid {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--pplh-border);
    border-collapse: collapse;
    background: var(--pplh-surface);
}

.table-grid th,
.table-grid td {
    border: 1px solid var(--pplh-border);
    padding: .85rem 1rem;
    font-size: .875rem;
    vertical-align: middle;
}

/* Layar lebar: lebar kolom dikunci supaya tabel pas dengan lebar kartu,
   tidak melebar mengikuti isi lalu memunculkan gulir mendatar. */
@media screen and (min-width: 769px) {
    .table-grid {
        table-layout: fixed;
    }

    .table-grid th,
    .table-grid td {
        /* Teks panjang dipatahkan, bukan mendorong lebar kolom. */
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Kecuali judul sependek "No" dan "Aksi": dipatah per huruf justru jadi
       menara satu huruf, bukan kolom yang lebih rapat. */
    .table-grid thead tr:first-child th {
        word-break: normal;
        overflow-wrap: normal;
    }

    /* Bagi lebar kolom tabel kegiatan: No, Pemrakarsa, Kegiatan, Sektor,
       Status Pelaporan, Aksi. Jumlahnya harus tepat 100%: table-layout fixed
       tidak menyisakan apa pun untuk kolom yang tidak kebagian, dan kolom
       terakhir yang menanggung akibatnya. */
    #tabelKegiatan thead tr:first-child th:nth-child(1) { width: 6%; }
    #tabelKegiatan thead tr:first-child th:nth-child(2) { width: 22%; }
    #tabelKegiatan thead tr:first-child th:nth-child(3) { width: 31%; }
    #tabelKegiatan thead tr:first-child th:nth-child(4) { width: 18%; }
    #tabelKegiatan thead tr:first-child th:nth-child(5) { width: 15%; }
    #tabelKegiatan thead tr:first-child th:nth-child(6) { width: 8%; }

    /* Bagi lebar kolom tabel pengguna: No, Nama/NIP, Jabatan, Level, Aksi.
       Kolom No dan Aksi hanya selebar isinya (nomor urut dan satu tombol),
       sisanya diberikan ke tiga kolom teks. */
    #tabelPengguna thead tr:first-child th:nth-child(1) { width: 5%; }
    #tabelPengguna thead tr:first-child th:nth-child(2) { width: 30%; }
    #tabelPengguna thead tr:first-child th:nth-child(3) { width: 34%; }
    #tabelPengguna thead tr:first-child th:nth-child(4) { width: 23%; }
    #tabelPengguna thead tr:first-child th:nth-child(5) { width: 8%; }
}

/* Layar sempit: kolom dibiarkan selebar isinya lalu tabel digulir mendatar
   di dalam .table-responsive (mengikuti pola table-responsive Bootstrap),
   supaya teks tidak terpotong satu huruf per baris. */
@media screen and (max-width: 768px) {
    .table-grid {
        table-layout: auto;
        min-width: 46rem;
    }

    /* Kolom "Status Pelaporan" menambah satu blok lagi, jadi ambang gulir
       tabel kegiatan lebih lebar daripada tabel lain. */
    #tabelKegiatan {
        min-width: 58rem;
    }

    /* Di sini tabelnya memang digulir mendatar, jadi kolom status boleh
       meminta lebar yang cukup untuk barnya — tidak ada kolom sebelah yang
       terdesak olehnya. */
    #tabelKegiatan .status-lapor {
        min-width: 8rem;
    }

    .table-grid th,
    .table-grid td {
        white-space: nowrap;
    }

    .table-grid thead .filter-row th {
        white-space: normal;
    }
}

.table-grid thead th {
    background: var(--pplh-surface-2);
    color: var(--pplh-text-strong);
    font-weight: 700;
}

.table-grid tbody tr:hover {
    background: var(--pplh-surface-2);
}

/* Baris kedua header berisi kolom pencarian. */
.table-grid thead .filter-row th {
    padding: .5rem .6rem;
    background: var(--pplh-surface);
}

.table-grid thead .filter-row .input,
.table-grid thead .filter-row .select select {
    width: 100%;
    border-radius: var(--pplh-radius-sm);
}

/* Tombol aksi bulat pada kolom terakhir. */
.btn-aksi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--pplh-primary);
    color: #fff;
    font-size: 1.25rem;
    transition: background-color .2s ease, color .2s ease;
}

.btn-aksi:hover,
.btn-aksi:focus {
    background: var(--klh-green-mid);
    color: #fff;
}

html[data-theme='dark'] .btn-aksi:hover,
html[data-theme='dark'] .btn-aksi:focus {
    background: var(--klh-green-soft);
}

/* ---- Susunan kontrol DataTables --------------------------------------- */

div.dt-container .dt-layout-row {
    align-items: center;
    margin-bottom: .75rem;
    /* .dt-layout-row memakai .columns Bulma yang bermargin negatif; kalau
       dibiarkan, barisnya melebihi lebar kartu dan memunculkan gulir mendatar. */
    margin-left: 0;
    margin-right: 0;
}

div.dt-container .dt-layout-cell {
    padding-left: 0;
    padding-right: 0;
}

div.dt-container .dt-layout-row:last-child {
    margin-top: .75rem;
    margin-bottom: 0;
}

/* Bulma membungkus pilihan panjang dengan .select, jadi jaraknya dipasang di
   pembungkus supaya tidak berlipat dengan margin select di dalamnya. */
div.dt-container .dt-length .select {
    margin-left: .4rem;
}

div.dt-container .dt-length .select select {
    margin-left: 0;
}

/* Tombol paginasi kini berisi ikon; samakan ukurannya supaya sebaris rapi. */
div.dt-container .pagination .pagination-link {
    min-width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--pplh-radius-sm);
}

div.dt-container .pagination .pagination-link .bx {
    font-size: 1.15rem;
    line-height: 1;
}

/* Varian tombol bulat untuk membersihkan filter tabel. */
button.btn-aksi {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-aksi.is-reset {
    background: var(--pplh-surface-2);
    border: 1px solid var(--pplh-border);
    color: var(--pplh-muted);
    font-size: 1.1rem;
}

.btn-aksi.is-reset:hover,
.btn-aksi.is-reset:focus {
    background: var(--pplh-orange);
    border-color: var(--pplh-orange);
    color: #fff;
}

/* =========================================================================
   Modal (dipakai form sunting cepat di halaman detail)
   ========================================================================= */

.app-modal .modal-card {
    position: relative;
    width: min(56rem, calc(100vw - 2.5rem));
    max-height: calc(100vh - 3rem);
    border-radius: var(--pplh-radius-lg);
    overflow: hidden;
    box-shadow: var(--pplh-shadow-lg);
}

/* Form jadi anak flex .modal-card, jadi ia yang harus meneruskan batas
   tinggi ke bawah supaya bagian isian yang panjang bisa digulir. */
.app-modal .modal-card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.app-modal .modal-background {
    background-color: rgba(11, 42, 36, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.app-modal .modal-card-head,
.app-modal .modal-card-foot {
    border-color: var(--pplh-border);
    background: var(--pplh-surface-2);
}

.app-modal .modal-card-head {
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
}

/* Judul modal dibungkus <div> bersama sub-judulnya, jadi pembungkus itu yang
   diberi ruang tumbuh supaya tombol tutup terdorong ke pojok kanan atas
   seperti tombol tutup jendela pada umumnya, bukan menempel ke judul. */
.app-modal .modal-card-head > :first-child {
    flex-grow: 1;
    min-width: 0;
}

.app-modal .modal-card-head > .delete {
    margin-left: 1rem;
}

.app-modal .modal-card-title {
    flex-grow: 0;
    color: var(--pplh-text-strong);
    font-family: 'Poppins', var(--bulma-family-primary);
    font-size: 1.15rem;
    font-weight: 800;
}

/* Baris konteks di bawah judul modal: kode, pemrakarsa, dan nama kegiatan.
   Boleh melipat — nama kegiatan bisa panjang dan lebih baik terbaca penuh
   daripada dipotong elipsis. */
.app-modal__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .5rem;
    margin-top: .3rem;
    color: var(--pplh-muted);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

/* Kode kegiatan tetap dibedakan: huruf mesin ketik supaya tidak tertukar
   dengan teks biasa di sebelahnya. */
.app-modal__kode {
    border-radius: 6px;
    background: var(--pplh-surface-2);
    padding: .1rem .4rem;
    color: var(--pplh-text-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.app-modal__sub-item {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.app-modal__sub-item i {
    font-size: .95rem;
    opacity: .8;
}

.app-modal__sub-sep {
    color: var(--pplh-border);
}

html[data-theme='dark'] .app-modal__sub-sep {
    opacity: .5;
}

.app-modal .modal-card-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--pplh-surface);
}

.app-modal .modal-card-head,
.app-modal .modal-card-foot {
    flex-shrink: 0;
}

/* ---- Animasi buka/tutup ala modal Bootstrap ---------------------------- */

.app-modal.is-active .modal-background {
    animation: appModalFade .18s ease-out;
}

.app-modal.is-active .modal-card {
    animation: appModalMasuk .28s cubic-bezier(.16, 1, .3, 1);
}

/* Kelas sementara yang dipasang skrip sebelum modal benar-benar ditutup. */
.app-modal.is-closing .modal-background {
    animation: appModalFade .16s ease-in reverse;
}

.app-modal.is-closing .modal-card {
    animation: appModalKeluar .16s ease-in forwards;
}

@keyframes appModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes appModalMasuk {
    from { opacity: 0; transform: translateY(-30px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes appModalKeluar {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-16px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal.is-active .modal-background,
    .app-modal.is-active .modal-card,
    .app-modal.is-closing .modal-background,
    .app-modal.is-closing .modal-card {
        animation: none;
    }
}

.app-modal .modal-card-foot {
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
}

/* ---- Tirai "sedang menyimpan" ------------------------------------------ */

.app-modal__sibuk {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.5rem;
    background: var(--pplh-surface); /* cadangan untuk peramban tanpa color-mix */
    background: color-mix(in srgb, var(--pplh-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-align: center;
}

.app-modal.is-saving .app-modal__sibuk,
.app-modal.is-memuat .app-modal__sibuk {
    display: flex;
    animation: appModalFade .15s ease-out;
}

.app-modal__spinner {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: .5rem;
    border: 3px solid var(--pplh-border);
    border-top-color: var(--pplh-primary);
    border-radius: 50%;
    animation: appModalPutar .7s linear infinite;
}

html[data-theme='dark'] .app-modal__spinner {
    border-top-color: #2ec4a6;
}

.app-modal__sibuk-teks {
    color: var(--pplh-text-strong);
    font-size: 1rem;
    font-weight: 700;
}

.app-modal__sibuk-catatan {
    color: var(--pplh-muted);
    font-size: .85rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .app-modal__spinner {
        animation-duration: 2s;
    }
}

/* ---- Mode lihat pada modal baris data ---------------------------------
   Rincian dibaca lebih dulu, berkasnya langsung dipratinjau di tempat, dan
   form suntingnya baru menggantikan bagian ini saat tombol Edit ditekan. */

.modal-lihat__daftar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.25rem;
}

/* Isian yang teksnya bisa panjang (tautan, catatan) memakai lebar penuh. */
.modal-lihat__item.is-lebar {
    grid-column: 1 / -1;
}

.modal-lihat__label {
    display: block;
    margin-bottom: .15rem;
    color: var(--pplh-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.modal-lihat__nilai {
    display: block;
    color: var(--pplh-text-strong);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    /* Tautan drive kerap panjang tanpa spasi, jadi dipatahkan di mana saja
       supaya tidak melebarkan modalnya. */
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.modal-lihat__nilai.is-kosong {
    color: var(--pplh-muted);
    font-weight: 500;
}

.modal-lihat__nilai a {
    color: var(--pplh-primary);
    text-decoration: underline;
}

html[data-theme='dark'] .modal-lihat__nilai a {
    color: #2ec4a6;
}

.modal-lihat__berkas {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pplh-border);
}

.modal-lihat__berkas-judul {
    margin-bottom: .5rem;
    color: var(--pplh-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.modal-lihat__pdf {
    display: block;
    width: 100%;
    height: 26rem;
    max-height: 55vh;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
}

.modal-lihat__kosong {
    padding: 1rem;
    border: 1px dashed var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
    color: var(--pplh-muted);
    font-size: .9rem;
}

@media screen and (max-width: 768px) {
    .modal-lihat__daftar {
        grid-template-columns: minmax(0, 1fr);
    }

    .modal-lihat__pdf {
        height: 18rem;
    }
}

/* Select2 di dalam modal mengikuti tinggi & warna input Bulma. */
.app-modal .select2-container--default .select2-selection--single {
    height: 2.5em;
    border-color: var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background-color: var(--pplh-surface);
}

.app-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.5em;
    color: var(--pplh-text);
}

.app-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5em;
}

/* Daftar baris yang bisa ditambah/dikurangi di dalam modal. */
.repeater__row {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr auto;
    gap: .75rem;
    align-items: end;
    padding: .75rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface-2);
}

.repeater__row + .repeater__row {
    margin-top: .6rem;
}

.repeater__row .field {
    margin-bottom: 0;
}

.repeater__kosong {
    padding: 1.25rem 1rem;
    border: 1px dashed var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    color: var(--pplh-muted);
    text-align: center;
}

@media screen and (max-width: 640px) {
    .repeater__row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* ---- Tabel pada tab halaman detail -------------------------------------- */

/* Bingkai mengikat kepala dan isi tabel jadi satu blok, supaya nilainya tidak
   terbaca melayang lepas dari judul kolomnya. */
.tabel-bingkai {
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
}

.tabel-data {
    margin-bottom: 0;
    /* separate + spacing 0: garis tetap tunggal, tapi sudut masih bisa dibulatkan. */
    border-collapse: separate;
    border-spacing: 0;
    /* Di layar sempit tabel digulir mendatar, bukan diperas sampai tak terbaca. */
    min-width: 40rem;
}

.tabel-data th,
.tabel-data td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--pplh-border);
    vertical-align: middle;
}

/* Garis antar kolom menjaga tiap nilai tetap sebaris dengan judulnya. */
.tabel-data th:not(:last-child),
.tabel-data td:not(:last-child) {
    border-right: 1px solid var(--pplh-border);
}

.tabel-data thead th {
    background: var(--pplh-surface-2);
    color: var(--pplh-text-strong);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabel-data thead th:first-child {
    border-top-left-radius: calc(var(--pplh-radius-sm) - 1px);
}

.tabel-data thead th:last-child {
    border-top-right-radius: calc(var(--pplh-radius-sm) - 1px);
}

/* Baris terakhir tidak perlu garis; bingkainya sudah menutup. */
.tabel-data tbody tr:last-child > th,
.tabel-data tbody tr:last-child > td {
    border-bottom-width: 0;
}

.tabel-data tbody tr:hover > td {
    background: var(--pplh-surface-2);
}

/* Kolom uraian bisa panjang; biarkan melipat, jangan melebarkan tabel. */
.tabel-data tbody td {
    overflow-wrap: break-word;
}

/* Kolom aksi cukup selebar tombolnya. */
.tabel-data tbody td:last-child .dropdown {
    vertical-align: middle;
}

/* ---- Kisi periode pelaporan (tab Pelaporan & Ketaatan) ------------------ */

/* Selektor menyertakan :not([align]) supaya menang atas aturan bawaan Bulma. */
.tabel-periode th:not([align]),
.tabel-periode td:not([align]) {
    text-align: center;
}

.tabel-periode th:first-child:not([align]),
.tabel-periode td:first-child:not([align]) {
    text-align: left;
}

/* Sel periode memuat status, metode, dan tanggal, jadi diberi lebar minimum
   supaya isinya tidak terpotong jadi satu kata per baris. Tabelnya sendiri
   sudah bisa digulir mendatar lewat .table-container. */
.tabel-periode td:not(:first-child) {
    min-width: 12rem;
    padding: .3rem;
    vertical-align: middle;
}

/* Kolom tahun jadi kepala barisnya: selebar isi dan diberi latar sendiri. */
.tabel-periode__tahun {
    width: 1%;
    background: var(--pplh-surface-2);
    color: var(--pplh-text-strong);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Kolom "Status Pelaporan" pada daftar kegiatan --------------------- */

/* Merangkum jenis laporan, tahun terbarunya, dan bar progresnya dalam satu
   sel. Lebar minimumnya dijaga supaya barnya tidak menyusut jadi seiris
   garis di layar sempit; tabelnya sendiri sudah bisa digulir mendatar. */
/* Tanpa lebar minimum sama sekali: kolomnya sudah dapat jatah persen sendiri,
   dan lantai lebar apa pun di sini justru membuat isinya meluber ke kolom
   sebelah begitu jendelanya menyempit. Isi kolom yang menyesuaikan sel,
   bukan sebaliknya. */
.status-lapor {
    display: flex;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}

/* max-width menahan baris ini pada lebar sel — tanpanya ia selebar isinya
   (akibat align-items: flex-start di atas) dan flex-wrap tidak pernah kena.
   Dengan batas itu, chip dan tahun berjajar selama muat lalu menumpuk jadi
   daftar sendirinya saat kolomnya menyempit. */
.status-lapor__kepala {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .4rem;
}

/* Chip jenis laporan dikecilkan sedikit: di dalam sel tabel ia label
   sekunder, bukan judul. */
.status-lapor__jenis.chip {
    padding: .12rem .5rem;
    font-size: .72rem;
}

.status-lapor__tahun {
    color: var(--pplh-text-strong);
    font-size: .8rem;
    font-weight: 700;
}

/* Kegiatan yang memang tidak punya kewajiban berkala — atau yang jenis
   dokumennya belum dipilih — bukan "belum lapor", jadi tidak diberi bar
   merah melainkan keterangan redup. */
.status-lapor__kosong {
    color: var(--pplh-muted);
    font-size: .76rem;
    font-style: italic;
}

/* Bar progres mengisi lebar sel, berapa pun jatahnya. */
.status-lapor .tahun-progres {
    width: 100%;
    min-width: 0;
}

/* Di dalam sel tabel ruasnya ikut menyusut bersama kolomnya; lantai 6px
   hanya berlaku di kisi periode halaman detail yang ruangnya lega. */
.status-lapor .tahun-progres__step {
    min-width: 3px;
}

/* Kolom tahun memuat angka tahun, tombol hapusnya, dan bar langkah progres,
   jadi isinya ditumpuk tegak dan diberi lebar minimum supaya barnya masih
   terbaca meski angka tahunnya pendek. */
.tahun-sel {
    display: flex;
    min-width: 7rem;
    flex-direction: column;
    gap: .35rem;
    padding: .15rem 0;
}

.tahun-sel__kepala {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.tahun-sel__angka {
    line-height: 1.1;
}

/* Tombol hapus tahun sengaja redup dan baru menguat saat barisnya disentuh:
   ia hanya muncul pada tahun yang memang kosong, jadi tidak perlu bersaing
   dengan angka tahunnya. */
.tahun-sel__hapus {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    color: var(--pplh-muted);
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    opacity: .35;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.tabel-periode tbody tr:hover .tahun-sel__hapus {
    opacity: .8;
}

.tahun-sel__hapus:hover,
.tahun-sel__hapus:focus-visible {
    background: var(--pplh-hapus-bg);
    color: var(--pplh-hapus-teks);
    opacity: 1;
    outline: none;
}

/* Bar langkah progres pelaporan satu tahun; dipakai kisi periode di halaman
   detail dan kolom "Status Pelaporan" di daftar kegiatan. Satu ruas per
   periode: hijau berarti sudah dilaporkan, merah belum. Warnanya bukan
   satu-satunya penanda — lihat kegiatan/partials/bar-progres.blade.php. */
.tahun-progres {
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.tahun-progres__bar {
    display: flex;
    width: 100%;
    height: 6px;
    gap: 2px;
}

.tahun-progres__step {
    min-width: 6px;
    flex: 1 1 0;
    border-radius: 999px;
    background: var(--pplh-progres-belum);
}

.tahun-progres__step.is-sudah {
    background: var(--pplh-progres-sudah);
}

.tahun-progres__label {
    color: var(--pplh-muted);
    font-size: .68rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Kisi pelaporan dibaca menyilang (tahun x periode), jadi garisnya dibuat
   lebih tegas daripada tabel biasa supaya batas tiap sel jelas terlihat. */
.tabel-bingkai.is-tegas {
    border-color: var(--pplh-border-strong);
}

.tabel-periode th,
.tabel-periode td {
    border-bottom-color: var(--pplh-border-strong);
}

.tabel-periode th:not(:last-child),
.tabel-periode td:not(:last-child) {
    border-right-color: var(--pplh-border-strong);
}

/* Kepala tabel jadi batas atas kisi, jadi garis bawahnya dipertebal. */
.tabel-periode thead th {
    border-bottom-width: 2px;
}

/* Kolom tahun memisahkan label baris dari kisinya. */
.tabel-periode tbody .tabel-periode__tahun {
    border-right-width: 2px;
}

/* Sel periode: seluruh isinya satu tombol selebar sel, jadi yang diklik
   bukan tombol kecil di tengah melainkan kotaknya sendiri.

   Beda "sudah" dan "belum" sengaja dibuat asimetris, bukan sekadar beda
   warna: sel yang sudah dilapor berisi lingkaran centang + status + rincian,
   sel yang belum nyaris kosong dan hanya menyisakan tanda tambah yang redup.
   Kepadatan isi inilah yang terbaca lebih dulu saat mata memindai kisi.
   Selektornya menyertakan tr supaya menang atas latar :hover .tabel-data. */
.tabel-periode tbody tr > td.sel-lapor {
    background: var(--pplh-lapor-bg);
}

.tabel-periode tbody tr:hover > td.sel-lapor {
    background: var(--pplh-lapor-bg-hover);
}

.tabel-periode tbody tr > td.sel-belum {
    background: var(--pplh-belum-bg);
}

.tabel-periode tbody tr:hover > td.sel-belum {
    background: var(--pplh-belum-bg-hover);
}

/* ---- Sel yang sudah dilapor ---- */

.sel-lapor__isi {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    border-radius: var(--pplh-radius-sm);
    background: transparent;
    padding: .45rem .55rem;
    color: inherit;
    font-family: inherit;
    text-align: left;
    transition: background-color .15s ease;
}

button.sel-lapor__isi {
    cursor: pointer;
}

button.sel-lapor__isi:hover,
button.sel-lapor__isi:focus-visible {
    background: var(--pplh-lapor-bg-hover);
}

button.sel-lapor__isi:focus-visible {
    outline: 2px solid var(--pplh-lapor-garis);
    outline-offset: -2px;
}

/* Lingkaran centang: penanda paling cepat terbaca dalam satu kisi penuh. */
.sel-lapor__ikon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--pplh-lapor-ikon-bg);
    color: var(--pplh-lapor-ikon-teks);
    font-size: 1rem;
}

.sel-lapor__isi.is-telat .sel-lapor__ikon {
    background: var(--pplh-telat-ikon-bg);
    color: var(--pplh-telat-ikon-teks);
}

.sel-lapor__teks {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .05rem;
}

.sel-lapor__status {
    color: var(--pplh-text-strong);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
}

.sel-lapor__isi.is-telat .sel-lapor__status {
    color: var(--pplh-telat-teks);
}

/* Metode dan tanggal jadi satu baris keterangan; kalau selnya sempit
   barisnya boleh melipat, bukan memaksa tabel jadi lebih lebar. */
.sel-lapor__meta {
    color: var(--pplh-muted);
    font-size: .72rem;
    line-height: 1.35;
}

/* Panah menandai bahwa selnya bisa dibuka, tanpa menambah tombol sendiri. */
.sel-lapor__panah {
    flex: none;
    margin-left: auto;
    color: var(--pplh-muted);
    font-size: 1.1rem;
    opacity: .45;
}

button.sel-lapor__isi:hover .sel-lapor__panah {
    opacity: .9;
}

/* ---- Sel yang belum dilapor ---- */

/* Sengaja hampir kosong: ruang lompong ini yang membedakannya dari sel
   terisi. Tanda tambahnya baru menguat saat disentuh kursor. */
.sel-belum__isi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.9rem;
    border: 1px dashed transparent;
    border-radius: var(--pplh-radius-sm);
    background: transparent;
    padding: .35rem;
    color: var(--pplh-muted);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    opacity: .35;
    transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}

.sel-belum__isi:hover,
.sel-belum__isi:focus-visible {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
    opacity: 1;
    outline: none;
}

/* ---- Isian tanggal ------------------------------------------------------ */

/* Tombol kalender bawaan peramban kecil, terpaku di ujung kanan, dan
   warnanya tidak bisa diatur — di mode gelap ia nyaris tak terlihat sehingga
   user menerka-nerka di mana harus menekan. Tombol itu disembunyikan dan
   diganti tombol sendiri yang memanggil showPicker(); bagian tanggal/bulan/
   tahun tetap bisa diklik dan diketik manual seperti biasa. */
.tanggal-isian {
    position: relative;
}

.tanggal-isian__input.input {
    -webkit-appearance: none;
    appearance: none;
    /* Sisakan ruang untuk tombol kalender di dalam kotaknya. */
    padding-right: 2.75rem;
    min-height: 2.5em;
    font-family: inherit;
}

.tanggal-isian__input::-webkit-datetime-edit {
    padding: 0;
    color: var(--pplh-text);
}

.tanggal-isian__input::-webkit-calendar-picker-indicator,
.tanggal-isian__input::-webkit-inner-spin-button,
.tanggal-isian__input::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.tanggal-isian__tombol {
    position: absolute;
    top: 50%;
    right: .3rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pplh-muted);
    cursor: pointer;
    font-size: 1.15rem;
    transform: translateY(-50%);
    transition: background-color .15s ease, color .15s ease;
}

.tanggal-isian__tombol:hover {
    background: var(--pplh-surface-2);
    color: var(--pplh-primary);
}

/* Saat isiannya sedang aktif, tombolnya ikut menyala supaya terbaca sebagai
   satu kesatuan dengan kotak yang sedang difokus. */
.tanggal-isian__input:focus ~ .tanggal-isian__tombol {
    color: var(--pplh-primary);
}

/* ---- Isian unggah berkas ------------------------------------------------ */

/* Tampilan bawaan <input type="file"> berbeda-beda tiap peramban dan tidak
   bisa diwarnai, jadi input aslinya disembunyikan (bukan display:none, supaya
   tetap bisa difokuskan papan ketik) dan digantikan tombol + nama berkas. */
.berkas-isian {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
    padding: .4rem .5rem;
}

.berkas-isian__asli {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.berkas-isian__tombol {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--pplh-border);
    border-radius: 999px;
    background: var(--pplh-surface-2);
    padding: .3rem .8rem;
    color: var(--pplh-text-strong);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}

.berkas-isian__tombol:hover {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
}

/* Fokus papan ketik jatuh pada input tersembunyi, jadi cincin fokusnya
   dipinjamkan ke tombol penggantinya. */
.berkas-isian__asli:focus-visible + .berkas-isian__tombol {
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 .125em rgba(0, 113, 92, .2);
    color: var(--pplh-primary);
}

/* Nama berkas bisa panjang; dipotong dengan elipsis, jangan melebarkan modal. */
.berkas-isian__nama {
    overflow: hidden;
    min-width: 0;
    flex: 1;
    color: var(--pplh-muted);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.berkas-isian.is-terisi .berkas-isian__nama {
    color: var(--pplh-text-strong);
    font-weight: 600;
}

.berkas-isian__batal {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pplh-muted);
    cursor: pointer;
    font-size: 1.1rem;
}

.berkas-isian__batal:hover {
    background: var(--pplh-surface-2);
    color: var(--bulma-danger, #e5484d);
}

/* ---- Penanda galat validasi per field ----------------------------------- */

/* Pesan galat ditempelkan di bawah fieldnya (bukan sebagai daftar di atas
   form), jadi kotak isiannya ikut ditandai. Bulma sudah mengurus .input dan
   .textarea lewat .is-danger; select2 memakai elemennya sendiri, jadi
   diwarnai dari sini lewat penanda .has-galat pada .field. */
.field.has-galat .select2-container--default .select2-selection--single {
    border-color: var(--bulma-danger, #e5484d);
}

.field.has-galat .select2-container--default.select2-container--focus .select2-selection--single,
.field.has-galat .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bulma-danger, #e5484d);
    box-shadow: 0 0 0 .125em rgba(229, 72, 77, .18);
}

/* Isian unggah berkas juga punya kotak sendiri, bukan .input bawaan Bulma. */
.field.has-galat .berkas-isian {
    border-color: var(--bulma-danger, #e5484d);
}

/* Keterangan bawaan field diredupkan supaya pesan galat yang menonjol. */
.field.has-galat .help:not(.is-danger) {
    opacity: .6;
}

/* ---- Dropdown aksi pada baris tabel ------------------------------------ */

/* Kolomnya cuma memuat satu tombol, jadi selebar isinya saja dan ditaruh di
   tengah — judul kolom ikut rata tengah supaya sejajar dengan tombolnya. */
.tabel-data th.kolom-aksi,
.tabel-data td.kolom-aksi {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

/* Tombol pembuka menu aksi.

   Sebelumnya berupa pil kecil berisi titik tiga mendatar yang mudah terbaca
   sebagai hiasan. Sekarang bujur sangkar bergaris tegas dengan titik tiga
   tegak — bentuk baku "aksi baris" — dan status terbukanya ikut ditandai
   supaya jelas baris mana yang sedang dibuka menunya. */
.btn-aksi-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--pplh-border);
    border-radius: 8px;
    background: var(--pplh-surface);
    color: var(--pplh-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.btn-aksi-menu:hover {
    border-color: var(--pplh-primary);
    background: var(--pplh-surface-2);
    color: var(--pplh-primary);
}

.btn-aksi-menu:focus-visible {
    outline: none;
    border-color: var(--pplh-primary);
    box-shadow: 0 0 0 .125em rgba(0, 113, 92, .2);
    color: var(--pplh-primary);
}

/* Menu sedang terbuka: tombolnya tetap menyala sebagai jangkar menunya. */
.dropdown.is-active > .dropdown-trigger > .btn-aksi-menu {
    border-color: var(--pplh-primary);
    background: var(--pplh-surface-2);
    color: var(--pplh-primary);
}

/* Varian bergaris hijau: dipakai di tabel pengguna dan tabel riwayat detail
   kegiatan supaya tombol aksinya terbaca sebagai tombol, bukan ikon abu-abu
   yang mudah terlewat. */
.btn-aksi-menu.is-hijau {
    border-color: var(--pplh-primary);
    background: transparent;
    color: var(--pplh-primary);
}

.btn-aksi-menu.is-hijau:hover,
.dropdown.is-active > .dropdown-trigger > .btn-aksi-menu.is-hijau {
    background: var(--pplh-primary);
    color: #fff;
}


/* Pembungkusnya memotong apa pun yang keluar dari kotaknya — tabel riwayat
   bisa digulir mendatar, isi akordeon disembunyikan saat menutup — jadi saat
   dibuka menu ini dipinjamkan ke <body> oleh skrip lalu dipaku ke layar. */
.aksi-menu {
    position: fixed;
    left: auto;
    min-width: 10rem;
    padding-top: 0;
    z-index: 45;
}

/* Sedang dipinjam ke <body>: tidak lagi kena aturan .dropdown.is-active. */
.aksi-menu.is-lepas {
    display: block;
}

.aksi-menu .dropdown-content {
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-surface);
    box-shadow: var(--pplh-shadow, 0 10px 30px rgba(0, 0, 0, .18));
}

/* Item menu berupa <button> supaya bisa dipakai untuk aksi, bukan tautan.
   Ikonnya dibuat selebar tetap supaya label tiap baris tetap sejajar. */
.aksi-menu .dropdown-content {
    padding: .3rem;
}

a.dropdown-item,
button.dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: .5rem .65rem;
    color: var(--pplh-text);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    text-align: left;
}

a.dropdown-item > i,
button.dropdown-item > i {
    flex: none;
    width: 1.1rem;
    color: var(--pplh-muted);
    font-size: 1.1rem;
    text-align: center;
}

a.dropdown-item:hover,
button.dropdown-item:hover {
    background: var(--pplh-surface-2);
    color: var(--pplh-text-strong);
}

a.dropdown-item:hover > i,
button.dropdown-item:hover > i {
    color: var(--pplh-primary);
}

/* Aksi merusak dipisahkan warnanya, dan latarnya ikut memerah saat disentuh
   supaya tidak tertekan begitu saja saat mengincar "Edit" di atasnya. */
.dropdown-item.is-bahaya,
.dropdown-item.is-bahaya > i {
    color: var(--bulma-danger, #e5484d);
}

.dropdown-item.is-bahaya:hover,
.dropdown-item.is-bahaya:hover > i {
    background: rgba(229, 72, 77, .1);
    color: var(--bulma-danger, #e5484d);
}

.aksi-menu .dropdown-divider {
    margin: .3rem .2rem;
    background: var(--pplh-border);
}

/* =========================================================================
   Master Data
   ========================================================================= */

/* Kartu pada halaman indeks master data. Seluruh kartu adalah tautan, jadi
   sasaran kliknya sama besar dengan kotaknya — bukan hanya judulnya. */
.master-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.master-card:hover,
.master-card:focus-visible {
    color: inherit;
}

.master-card:focus-visible {
    outline: 2px solid var(--pplh-primary);
    outline-offset: 3px;
}

.master-card__judul {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pplh-text-strong);
}

.master-card__deskripsi {
    margin-top: .45rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--pplh-muted);
}

/* Didorong ke dasar kartu supaya sejajar antar kartu meski deskripsinya
   berbeda panjang. */
.master-card__tautan {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--pplh-primary);
    font-size: .85rem;
    font-weight: 600;
}

html[data-theme='dark'] .master-card__tautan {
    color: var(--klh-green-soft);
}

.master-card__tautan i {
    transition: transform .2s ease;
}

.master-card:hover .master-card__tautan i {
    transform: translateX(3px);
}

/* Ikon di judul halaman kelola: sekadar penanda, bukan kotak besar seperti
   pada kartu, jadi ukurannya diturunkan dan disejajarkan dengan teks. */
.icon-box.is-kecil {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    margin-right: .5rem;
    border-radius: 8px;
    font-size: 17px;
    vertical-align: -.5rem;
}

/* Keterangan pengganti tombol ubah/hapus pada baris yang sudah dipakai data
   lain. Bukan tombol, jadi tampilannya sengaja dibuat pasif. */
.master-aksi__catatan {
    display: flex;
    gap: .55rem;
    max-width: 15rem;
    padding: .5rem .65rem;
    color: var(--pplh-muted);
    font-size: .78rem;
    line-height: 1.5;
    white-space: normal;
    cursor: default;
}

.master-aksi__catatan > i {
    flex: none;
    font-size: 1rem;
}

/* Kotak pencarian kartu master data. Dibatasi lebarnya supaya tidak
   memanjang selebar halaman dan tetap terbaca sebagai satu isian. */
.master-cari {
    max-width: 26rem;
}

/* =========================================================================
   Menu Data — statistik, ekspor, impor
   ========================================================================= */

/* ---- Baris penyaring statistik ----------------------------------------
   Seluruh grafik membaca periode yang sama, jadi penyaringnya berdiri
   sendiri di atas dan tidak diulang per kartu. */
.viz-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.15rem 1.5rem;
}

.viz-filter__isian {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.viz-filter__isian .label.is-small {
    margin-bottom: .3rem;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pplh-muted);
}

.viz-filter__catatan {
    flex: 1 1 22rem;
    max-width: 34rem;
    font-size: .85rem;
    color: var(--pplh-text);
}

.viz-filter__catatan .help {
    margin-top: .3rem;
    line-height: 1.55;
}

/* Penanda muat menempel di ujung kalimat periode, bukan menimpa grafik:
   angka lama tetap terbaca sampai yang baru datang. */
.viz-sibuk {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    color: var(--pplh-muted);
    font-size: .8rem;
}

/* ---- Kartu angka ------------------------------------------------------- */

/* Baris kecil di bawah angka utama: konteks pembanding, bukan angka kedua,
   jadi ukurannya sengaja jauh di bawah .stat-value. */
.stat-catatan {
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--pplh-muted);
}

/* ---- Kartu grafik ------------------------------------------------------ */

.viz-kartu {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem 1.5rem 1.15rem;
}

.viz-kartu__kepala {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.viz-kartu__sub {
    margin-top: .3rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--pplh-muted);
}

/* Tinggi dikunci supaya kartu-kartu dalam satu baris sejajar; kanvas
   Chart.js sendiri mengisi pembungkusnya (maintainAspectRatio: false). */
.viz-kotak {
    position: relative;
    flex: 1 0 auto;
    min-height: 300px;
    height: 300px;
}

.viz-kotak > canvas {
    max-width: 100%;
}

.viz-kosong {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--pplh-muted);
    font-size: .88rem;
    text-align: center;
}

.viz-kosong > i {
    font-size: 1.75rem;
    opacity: .55;
}

/* Tabel angka di balik grafik. Ditumpuk di tempat yang sama, jadi tinggi
   kartu tidak melompat saat sakelarnya ditekan. */
.viz-tabel {
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.viz-kartu.is-tabel .viz-kotak {
    display: none;
}

.viz-kartu.is-tabel .viz-tabel {
    display: block;
}

.viz-tabel .table-grid th[scope='row'] {
    font-weight: 500;
    white-space: normal;
}

.viz-tabel .table-grid td {
    text-align: right;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    /* Di layar sempit kartunya menumpuk satu kolom, jadi grafiknya boleh
       lebih pendek tanpa membuat sumbunya berdesakan. */
    .viz-kotak {
        min-height: 260px;
        height: 260px;
    }

    .viz-tabel {
        max-height: 260px;
    }
}

/* ---- Halaman ekspor & impor -------------------------------------------- */

/* Daftar poin penjelas di dalam kartu. Penandanya dibuat sendiri supaya
   sebaris dengan teks yang membungkus, tidak menggantung seperti bawaan. */
.daftar-poin {
    margin-top: .35rem;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--pplh-muted);
}

.daftar-poin > li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .55rem;
}

.daftar-poin > li::before {
    content: '';
    position: absolute;
    top: .6rem;
    left: .3rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--pplh-primary);
}

.daftar-poin > li:last-child {
    margin-bottom: 0;
}

/* Kotak centang yang isian dan labelnya sebaris rapi; bawaan Bulma
   meratakan keduanya ke garis dasar sehingga kotaknya terlihat melorot. */
.app-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--pplh-text);
}

.app-checkbox input[type='checkbox'] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--pplh-primary);
}

/* Galat impor bisa berjumlah puluhan baris; daftarnya digulir sendiri
   supaya form unggahnya tidak terdorong keluar layar. */
.impor-galat {
    max-height: 16rem;
    margin-top: .65rem;
    padding-left: 1.25rem;
    overflow-y: auto;
    font-size: .87rem;
    line-height: 1.6;
    list-style: disc;
}

.impor-galat > li {
    margin-bottom: .3rem;
}

/* ---- Panel progres impor -----------------------------------------------
   Dua fase dengan tampilan yang sengaja berbeda: unggahan memakai bar
   terisi berikut persentasenya (byte terkirim memang terukur), sedangkan
   pemrosesan di server memakai ruas berjalan tanpa angka — servernya tidak
   memulangkan kabar apa pun sampai selesai, jadi angka berapa pun di fase
   itu cuma karangan. */
.impor-progres {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--pplh-border);
    border-radius: var(--pplh-radius);
    background-color: var(--pplh-surface-2);
}

.impor-progres__kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}

.impor-progres__tahap {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--pplh-text-strong);
}

.impor-progres__tahap > i {
    color: var(--pplh-primary);
    font-size: 1.05rem;
}

/* Angka disamakan lebarnya supaya barnya tidak bergeser tiap ganti digit. */
.impor-progres__persen {
    min-width: 3.25rem;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--pplh-primary);
}

.impor-progres__rel {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background-color: var(--pplh-belum-bg);
    box-shadow: inset 0 0 0 1px var(--pplh-border);
    overflow: hidden;
}

.impor-progres__isi {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--pplh-gradient-cta);
    transition: width .25s ease;
}

/* Fase pemrosesan: ruas pendek yang berjalan, tanpa persentase. */
.impor-progres__rel.is-tak-tentu .impor-progres__isi {
    width: 35%;
    transition: none;
    animation: impor-berjalan 1.15s ease-in-out infinite;
}

@keyframes impor-berjalan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

.impor-progres__catatan {
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--pplh-muted);
}

/* Tombol tautan tidak punya atribut disabled; selama impor berjalan
   tampilan dan klik-nya dimatikan lewat kelas. */
.is-disabled {
    pointer-events: none;
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .impor-progres__isi {
        transition: none;
    }

    /* Tanpa gerak, ruas berjalan diganti bar penuh yang diredupkan —
       tetap terbaca sebagai "sedang berlangsung". */
    .impor-progres__rel.is-tak-tentu .impor-progres__isi {
        width: 100%;
        opacity: .6;
        animation: none;
    }
}

/* =========================================================================
   Halaman profil pengguna
   ========================================================================= */

/* Kartu kepala: avatar, identitas, lalu dua angka ringkas di kanan. Pada
   layar sempit ketiganya menumpuk, jadi baris angka pindah ke bawah. */
.profil-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: .35rem;
}

.profil-hero__avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--pplh-gradient);
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.profil-hero__utama {
    flex: 1 1 auto;
    min-width: 0;
}

.profil-hero__nama {
    margin-bottom: .5rem;
    color: var(--pplh-text-strong);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
}

.profil-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    margin-top: .7rem;
    color: var(--pplh-muted);
    font-size: .85rem;
}

.profil-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.profil-hero__meta-item > i {
    font-size: 1rem;
}

.profil-hero__meta-sep {
    opacity: .5;
}

.profil-hero__angka {
    flex: none;
    display: flex;
    gap: 2rem;
    padding-left: 2rem;
    border-left: 1px solid var(--pplh-border);
}

.profil-hero__angka-item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: right;
}

.profil-hero__angka-item .stat-label {
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .profil-hero {
        flex-wrap: wrap;
    }

    /* Garis pemisah vertikal tidak lagi memisahkan apa pun setelah
       angkanya turun ke baris sendiri. */
    .profil-hero__angka {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        padding-top: 1rem;
        border-left: none;
        border-top: 1px solid var(--pplh-border);
    }

    .profil-hero__angka-item,
    .profil-hero__angka-item .stat-label {
        text-align: left;
        justify-content: flex-start;
    }
}

/* Keterangan bahwa data kepegawaian disunting di tempat lain. Bukan
   peringatan, jadi tampilannya dibuat setenang teks bantuan biasa. */
.profil-catatan {
    display: flex;
    gap: .55rem;
    color: var(--pplh-muted);
    font-size: .82rem;
    line-height: 1.6;
}

.profil-catatan > i {
    flex: none;
    font-size: 1rem;
}

/* Seluruh profil kini satu kartu; bagian-bagiannya hanya dipisah .panel-rule,
   jadi jarak antar bagian diatur di sini, bukan oleh jarak antar kartu. */
.profil-kartu {
    margin-bottom: 1.5rem;
}

.profil-bagian > .section-title {
    margin-bottom: .85rem;
}

/* Keterangan mengalir di kiri, tombol ganti sandi merapat ke kanan; pada
   layar sempit tombolnya turun ke baris sendiri. */
.profil-bagian__kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    margin-top: 1.25rem;
}

.profil-bagian__kaki .profil-catatan {
    flex: 1 1 20rem;
    margin: 0;
}

/* Data kepegawaian sekarang selebar kartu. Dua lajur baru dipakai sejak
   desktop — di bawah itu kolom nilainya tinggal sepotong. */
@media screen and (min-width: 1024px) {
    .data-list.is-dua-lajur {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
    }

    .data-list.is-dua-lajur .data-list__row {
        grid-template-columns: min(11rem, 40%) 1fr;
    }

    /* Loreng ganjil-genap milik satu lajur akan tampak berpetak begitu
       barisnya berpasangan, jadi lorengnya dihitung per baris tampilan
       (dua sel sekaligus). */
    .data-list.is-dua-lajur .data-list__row:nth-child(odd) {
        background: none;
    }

    .data-list.is-dua-lajur .data-list__row:nth-child(4n + 1),
    .data-list.is-dua-lajur .data-list__row:nth-child(4n + 2) {
        background: var(--pplh-surface-2);
    }
}

/* ---- Kalender aktivitas ------------------------------------------------- */

/* Papan kontribusi: kolom = pekan, baris = hari. Ukuran kotak dipegang satu
   variabel supaya baris nama bulan (grid tersendiri) selalu selebar kolom
   kotaknya. */
.kalender {
    --kalender-kotak: 12px;
    --kalender-sela: 3px;
    margin-bottom: 1.25rem;
}

/* 53 kolom tidak selalu muat; yang digulir hanya papannya, bukan kartunya. */
.kalender__gulir {
    overflow-x: auto;
    padding-bottom: .35rem;
    scrollbar-width: thin;
}

.kalender__papan {
    display: grid;
    grid-template-columns: auto max-content;
    gap: .3rem .45rem;
    width: max-content;
}

.kalender__bulan {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(53, var(--kalender-kotak));
    gap: var(--kalender-sela);
    color: var(--pplh-muted);
    font-size: .68rem;
    line-height: 1;
}

.kalender__hari {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(7, var(--kalender-kotak));
    gap: var(--kalender-sela);
    color: var(--pplh-muted);
    font-size: .68rem;
    line-height: var(--kalender-kotak);
    text-align: right;
}

.kalender__kotak {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--kalender-kotak));
    grid-auto-columns: var(--kalender-kotak);
    gap: var(--kalender-sela);
}

.kalender__sel {
    width: var(--kalender-kotak);
    height: var(--kalender-kotak);
    padding: 0;
    border: 1px solid rgba(0, 70, 58, .06);
    border-radius: 3px;
    background: var(--pplh-kalender-0);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

html[data-theme='dark'] .kalender__sel {
    border-color: rgba(255, 255, 255, .05);
}

/* Hari yang belum datang hanya penahan tempat: tanpa warna dan tanpa kursor. */
.kalender__sel.is-depan {
    border-color: transparent;
    background: none;
    cursor: default;
}

.kalender__sel.is-tingkat-1 { background: var(--pplh-kalender-1); }
.kalender__sel.is-tingkat-2 { background: var(--pplh-kalender-2); }
.kalender__sel.is-tingkat-3 { background: var(--pplh-kalender-3); }
.kalender__sel.is-tingkat-4 { background: var(--pplh-kalender-4); }

button.kalender__sel:hover {
    transform: scale(1.35);
    box-shadow: 0 2px 6px rgba(0, 70, 58, .25);
}

button.kalender__sel:focus-visible {
    outline: 2px solid var(--pplh-primary);
    outline-offset: 1px;
}

/* Kotak yang sedang menyaring daftar di bawahnya. Cincinnya di luar kotak
   supaya warnanya sendiri tidak tertutup penanda. */
button.kalender__sel.is-terpilih {
    border-color: var(--pplh-text-strong);
    box-shadow: 0 0 0 2px var(--pplh-surface), 0 0 0 3px var(--pplh-primary);
}

.kalender__kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .55rem;
}

.kalender__ket {
    color: var(--pplh-muted);
    font-size: .8rem;
}

.kalender__rentang {
    opacity: .8;
}

.kalender__legenda {
    display: flex;
    align-items: center;
    gap: var(--kalender-sela);
    color: var(--pplh-muted);
    font-size: .72rem;
}

.kalender__legenda > span:first-child {
    margin-right: .2rem;
}

.kalender__legenda > span:last-child {
    margin-left: .2rem;
}

/* ---- Penanda saringan tanggal ------------------------------------------ */

.log-saring {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-bottom: .9rem;
    padding: .5rem .75rem;
    border: 1px solid var(--pplh-lapor-garis);
    border-radius: var(--pplh-radius-sm);
    background: var(--pplh-lapor-bg);
}

.log-saring__teks {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--pplh-text);
    font-size: .85rem;
}

.log-saring__teks > i {
    color: var(--pplh-lapor-teks);
    font-size: 1.05rem;
}

.log-saring__jumlah {
    color: var(--pplh-muted);
    font-size: .78rem;
}

/* ---- Log aktivitas ------------------------------------------------------ */

/* Penyaring domain berbentuk pil. Domainnya bisa banyak dan namanya panjang,
   jadi barisannya membungkus ke baris berikutnya — bukan digulir mendatar,
   yang menyembunyikan sebagian pilihan di luar layar. */
.log-tabs {
    margin-bottom: 1.25rem;
}

.log-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pil menyesuaikan lebar isinya; yang tidak muat turun utuh ke baris
   berikutnya alih-alih ikut mengempis dan memotong labelnya. */
.log-tabs li {
    flex: none;
    max-width: 100%;
}

.log-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border: 1px solid var(--pplh-border);
    border-radius: 999px;
    background: var(--pplh-surface);
    color: var(--pplh-muted);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.45;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.log-tabs li a:hover {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
}

.log-tabs li.is-active a {
    border-color: var(--pplh-primary);
    background: var(--pplh-primary);
    color: #fff;
}

.log-tabs__jumlah {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--pplh-surface-2);
    color: var(--pplh-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

/* Di atas pil aktif yang sudah berwarna penuh, angkanya cukup dibuat
   sedikit lebih gelap dari latarnya sendiri. */
.log-tabs li.is-active a .log-tabs__jumlah {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Hijau mode gelap jauh lebih terang, jadi teks putih di atasnya tidak
   terbaca. Pil aktifnya dibuat bernada saja, bukan berwarna penuh. */
html[data-theme='dark'] .log-tabs li.is-active a {
    background: rgba(46, 196, 166, .16);
    color: #2ec4a6;
}

html[data-theme='dark'] .log-tabs li.is-active a .log-tabs__jumlah {
    background: rgba(46, 196, 166, .22);
    color: #2ec4a6;
}

/* Gulir dan tirai sengaja dipisah ke dua elemen: tirai harus menutup
   seluruh daftar di mana pun daftarnya sedang tergulir, sedangkan elemen
   yang menggulir tidak bisa jadi acuan position: absolute yang diam. */
.log-wadah {
    position: relative;
    margin-bottom: 1rem;
}

.log-gulir {
    max-height: 34rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.log-sibuk {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--pplh-surface); /* cadangan untuk peramban tanpa color-mix */
    background: color-mix(in srgb, var(--pplh-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-align: center;
}

.log-wadah.is-memuat .log-sibuk {
    display: flex;
}

.log-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.log-item {
    display: flex;
    gap: .85rem;
    padding: .9rem .25rem;
}

.log-item + .log-item {
    border-top: 1px solid var(--pplh-border);
}

.log-item__ikon {
    flex: none;
    margin-right: 0;
    vertical-align: baseline;
}

.log-item__isi {
    flex: 1 1 auto;
    min-width: 0;
}

.log-item__kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
}

.log-item__domain {
    color: var(--pplh-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.log-item__judul {
    color: var(--pplh-text-strong);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

.log-item__judul a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.log-item__judul a:hover,
.log-item__judul a:focus {
    color: var(--pplh-primary);
    border-bottom-color: currentColor;
}

html[data-theme='dark'] .log-item__judul a:hover,
html[data-theme='dark'] .log-item__judul a:focus {
    color: #2ec4a6;
}

/* Keterangan kerap berisi nama kegiatan yang panjang; dipotong dua baris
   supaya tiap catatan tetap sepadan tingginya. */
.log-item__ket {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .2rem;
    color: var(--pplh-muted);
    font-size: .85rem;
    line-height: 1.55;
}

.log-item__waktu {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    color: var(--pplh-muted);
    font-size: .78rem;
}

.log-kosong {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.75rem 1rem;
    color: var(--pplh-muted);
    text-align: center;
}

.log-kosong > i {
    font-size: 2rem;
    opacity: .6;
}

.log-kosong .card-text {
    max-width: 24rem;
}

/* Navigasi halaman log. Tombolnya <button> supaya atribut disabled benar-
   benar mematikan kliknya, jadi warnanya disamakan dengan .pagination-link
   Bulma yang menganggap elemennya <a>. */
.log-paginasi {
    margin-top: .25rem;
}

.log-paginasi .pagination-previous,
.log-paginasi .pagination-next,
.log-paginasi .pagination-link {
    border-color: var(--pplh-border);
    background: var(--pplh-surface);
    color: var(--pplh-text);
}

.log-paginasi .pagination-previous:hover:not([disabled]),
.log-paginasi .pagination-next:hover:not([disabled]),
.log-paginasi .pagination-link:hover:not(.is-current) {
    border-color: var(--pplh-primary);
    color: var(--pplh-primary);
}

.log-paginasi .pagination-link.is-current {
    border-color: var(--pplh-primary);
    background: var(--pplh-primary);
    color: #fff;
}

.log-paginasi .pagination-previous[disabled],
.log-paginasi .pagination-next[disabled] {
    background: var(--pplh-surface-2);
    color: var(--pplh-muted);
    opacity: .55;
    cursor: not-allowed;
}

.log-paginasi .pagination-ellipsis {
    color: var(--pplh-muted);
}

/* Rentang baris yang sedang tampil; keterangan pendukung, bukan navigasi. */
.log-paginasi__info {
    margin-top: .5rem;
    color: var(--pplh-muted);
    font-size: .78rem;
    text-align: center;
}

@media screen and (max-width: 768px) {
    /* Di layar sentuh, daftar bergulir di dalam halaman yang juga bergulir
       membuat gulirannya rebutan. Halamannya saja yang bergulir — jumlah
       barisnya sudah dibatasi paginasi. */
    .log-gulir {
        max-height: none;
        overflow-y: visible;
    }
}

/* =========================================================================
   Halaman bantuan (tamu)
   ========================================================================= */

/* Peta sematan. Tingginya dikunci lewat rasio supaya tidak melar di layar
   lebar dan tetap terbaca di ponsel. */
.peta-kotak {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--pplh-radius);
    border: 1px solid var(--pplh-border);
    background: var(--pplh-surface-2);
}

.peta-kotak iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Peta Google datang dengan latar terangnya sendiri. Diredupkan sedikit di
   mode gelap supaya tidak menyilaukan di tengah halaman yang gelap; dipulihkan
   penuh saat disentuh, ketika pengguna memang sedang membacanya. */
html[data-theme='dark'] .peta-kotak iframe {
    filter: brightness(.82) saturate(.9);
    transition: filter .25s ease;
}

html[data-theme='dark'] .peta-kotak:hover iframe,
html[data-theme='dark'] .peta-kotak:focus-within iframe {
    filter: none;
}

.peta-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme='dark'] .peta-kotak iframe {
        transition: none;
    }
}

/* =========================================================================
   Halaman galat (404 dan sejenisnya)
   ========================================================================= */

/* Ditaruh di tengah sisa tinggi layar seperti kartu login, supaya halaman
   tidak terbaca sebagai konten kosong yang nyangkut di atas. */
.galat-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 16rem);
    text-align: center;
}

/* Angka kodenya sengaja besar tapi tipis dan bergradasi seperti wordmark:
   jadi latar visual, bukan judul yang menyaingi kalimat penjelasnya. */
.galat-kode {
    font-family: 'Poppins', var(--bulma-family-primary);
    font-weight: 900;
    font-size: clamp(5.5rem, 18vw, 9rem);
    line-height: .9;
    letter-spacing: -.04em;
    background: var(--pplh-gradient-cta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .22;
    user-select: none;
}

html[data-theme='dark'] .galat-kode {
    opacity: .3;
}

/* Ikon menumpang naik ke atas angka supaya keduanya terbaca sebagai satu
   lambang, bukan dua elemen yang kebetulan bertumpuk. */
.galat-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-top: -2.75rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--pplh-border);
    background: var(--pplh-surface);
    box-shadow: var(--pplh-shadow);
    color: var(--pplh-primary);
    font-size: 1.9rem;
}

html[data-theme='dark'] .galat-ikon {
    color: var(--pplh-lapor-ikon-bg);
}

.galat-shell .page-lead {
    max-width: 30rem;
}

.galat-aksi {
    margin-top: 2rem;
}

@media screen and (max-width: 640px) {
    .galat-shell {
        min-height: calc(100vh - 13rem);
    }

    .galat-ikon {
        width: 3.5rem;
        height: 3.5rem;
        margin-top: -2.25rem;
        font-size: 1.6rem;
    }
}