/* =====================================================================
   SISTARI - Admin panel
   Palet mengikuti identitas SISTARI (hijau/toska) agar admin dan portal
   publik terasa satu sistem.
   ===================================================================== */

:root {
    --hijau: #16a34a;
    --hijau-tua: #15803d;
    --hijau-gelap: #0b3b26;
    --toska: #17a2a2;
    --merah: #e11d48;
    --merah-muda: #fef2f4;
    --ungu: #7c3aed;
    --ungu-muda: #f3f0ff;
    --hijau-muda: #e8faef;
    --kuning: #d97706;

    --teks: #111827;
    --teks-lembut: #6b7280;
    --garis: #eaecef;
    --latar: #f6f8f7;
    --kartu: #ffffff;

    --sisi: 268px;
    --radius: 16px;
    --bayang:
        0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        "Poppins",
        -apple-system,
        "Segoe UI",
        sans-serif;
    background: var(--latar);
    color: var(--teks);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ================================================== HALAMAN LOGIN ==== */
.login-layar {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* Sisi kiri: panel bermerek. Bukan sekadar hiasan -- memberi tahu
   pengguna sistem apa yang sedang mereka masuki. */
.login-kiri {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    overflow: hidden;
    background: linear-gradient(150deg, #0b3b26 0%, #14603f 45%, #17a2a2 100%);
    color: #fff;
}
.login-kiri::before,
.login-kiri::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.login-kiri::before {
    width: 460px;
    height: 460px;
    top: -160px;
    right: -140px;
}
.login-kiri::after {
    width: 300px;
    height: 300px;
    bottom: -110px;
    left: -90px;
}

.login-kiri > * {
    position: relative;
    z-index: 1;
}

.login-kiri h1 {
    margin: 0 0 18px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.login-kiri p {
    margin: 0;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}
.login-poin {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
.login-poin li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}
.login-poin svg {
    flex: none;
    opacity: 0.9;
}
.login-kaki {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

/* Sisi kanan: formulir */
.login-kanan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--kartu);
}
.login-kotak {
    width: 100%;
    max-width: 400px;
}
.login-kotak h2 {
    margin: 26px 0 6px;
    font-size: 27px;
    font-weight: 700;
}
.login-kotak .sub {
    margin: 0 0 30px;
    font-size: 14.5px;
    color: var(--teks-lembut);
}

.kolom {
    margin-bottom: 18px;
}
.kolom label {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
}
.kolom input[type="email"],
.kolom input[type="password"],
.kolom input[type="text"] {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--teks);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.kolom input:focus {
    outline: 0;
    border-color: var(--hijau);
    box-shadow: 0 0 0 3.5px rgba(22, 163, 74, 0.13);
}
.kolom input.salah {
    border-color: var(--merah);
}

.kolom-sandi {
    position: relative;
}
.lihat-sandi {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--teks-lembut);
    cursor: pointer;
}
.lihat-sandi:hover {
    background: #f3f4f6;
    color: var(--teks);
}

.kolom-pesan {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--merah);
}

.baris-ingat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}
.centang {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}
.centang input {
    width: 16px;
    height: 16px;
    accent-color: var(--hijau);
    cursor: pointer;
}
.centang span {
    font-size: 13.5px;
    color: #374151;
}

.tombol-utama {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(100deg, var(--hijau-tua), var(--hijau));
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.26);
    transition:
        transform 0.14s,
        box-shadow 0.14s,
        opacity 0.14s;
}
.tombol-utama:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.32);
}
.tombol-utama:active {
    transform: none;
}
.tombol-utama:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.tautan-balik {
    display: block;
    margin-top: 26px;
    font-size: 13.5px;
    color: var(--teks-lembut);
    text-align: center;
}
.tautan-balik a {
    color: var(--hijau);
    font-weight: 600;
}

/* Kotak pesan */
.pesan {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 22px;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
}
.pesan svg {
    flex: none;
    margin-top: 1px;
}
.pesan-galat {
    background: var(--merah-muda);
    color: #9f1239;
    border: 1px solid #fbd5dd;
}
.pesan-sukses {
    background: var(--hijau-muda);
    color: #14532d;
    border: 1px solid #c6f0d6;
}

/* ==================================================== KERANGKA ADMIN = */
.admin-layar {
    display: flex;
    min-height: 100vh;
}

/* -------------------------------------------------------- Sidebar --- */
.sisi {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--sisi);
    height: 100vh;
    padding: 22px 16px;
    background: linear-gradient(180deg, #0b3b26 0%, #10402c 60%, #123f31 100%);
    color: #fff;
    transition: transform 0.25s ease;
}
.sisi-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 22px;
}
.sisi-logo svg {
    width: 30px;
    height: 30px;
    flex: none;
}
.sisi-logo span {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}
.sisi-logo small {
    display: block;
    margin-top: -3px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.45);
}

.sisi-judul {
    margin: 18px 10px 8px;
    padding-top: 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.38);
    /* Garis tipis mendahului judul kelompok. Sebelumnya hanya spasi -- dan
     spasi di antara latar gelap yang seragam sulit dibaca sebagai
     "batas kelompok" oleh mata. */
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
/* Judul pertama tidak butuh pemisah karena tidak ada apa pun di atasnya. */
.sisi-menu > .sisi-judul:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sisi-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    overflow-y: auto;
}
.sisi-menu::-webkit-scrollbar {
    width: 5px;
}
.sisi-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}

.sisi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.76);
    transition:
        background 0.14s,
        color 0.14s;
}
.sisi-item svg {
    flex: none;
    opacity: 0.85;
}
.sisi-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.sisi-item.aktif {
    background: linear-gradient(100deg, var(--hijau), #1fb35c);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.32);
}
.sisi-item.aktif svg {
    opacity: 1;
}

/* Menu yang halamannya belum dibuat. Ditandai jelas, bukan dibiarkan
   sebagai tautan mati yang membingungkan. */
.sisi-item.nanti {
    opacity: 0.42;
    cursor: not-allowed;
}
.sisi-item.nanti:hover {
    background: none;
    color: rgba(255, 255, 255, 0.76);
}
.lencana-nanti {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Jumlah antrian verifikasi -- supaya admin langsung tahu ada yang
   menunggu tanpa harus membuka halamannya. */
.lencana-antrian {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 999px;
    background: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.sisi-item.aktif .lencana-antrian {
    background: rgba(255, 255, 255, 0.28);
}

.sisi-bawah {
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sisi-akun {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 8px;
}
.avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--toska), var(--hijau));
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.sisi-akun .nama {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sisi-akun .surel {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Peran ditampilkan permanen di sidebar supaya pengguna selalu sadar
   sedang bekerja dengan hak akses apa. */
.peran-tanda {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peran-admin {
    color: #5eead4;
}
.peran-operator {
    color: #fcd34d;
}
.tombol-keluar {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    margin-top: 4px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    text-align: left;
}
.tombol-keluar:hover {
    background: rgba(225, 29, 72, 0.16);
    color: #fda4af;
}

/* ---------------------------------------------------------- Konten -- */
.utama {
    flex: 1;
    min-width: 0;
    margin-left: var(--sisi);
    padding: 26px 32px 48px;
}

.atas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}
.atas h1 {
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.atas .tanggal {
    font-size: 13.5px;
    color: var(--teks-lembut);
}

.tombol-hantu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--garis);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.tombol-hantu:hover {
    border-color: #c9cdd3;
}

.buka-sisi {
    display: none;
}

/* ------------------------------------------------------ Kartu & grid */
.kartu {
    padding: 22px;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    background: var(--kartu);
    box-shadow: var(--bayang);
}
.kartu h3 {
    margin: 0 0 3px;
    font-size: 15.5px;
    font-weight: 700;
}
.kartu .ket {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--teks-lembut);
}

.grid-statistik {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.grid-utama {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.grid-bawah {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.grid-statistik > *,
.grid-utama > *,
.grid-bawah > * {
    min-width: 0;
}

/* ------------------------------------------------------- Kartu angka */
.statistik {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.statistik-ikon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
}
.statistik .angka {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
}
.statistik .label {
    font-size: 13px;
    color: var(--teks-lembut);
}
.statistik .imbuh {
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 600;
}

.ikon-hijau {
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}
.ikon-merah {
    background: var(--merah-muda);
    color: var(--merah);
}
.ikon-ungu {
    background: var(--ungu-muda);
    color: var(--ungu);
}
.ikon-toska {
    background: #e6f7f7;
    color: #0e7c7c;
}

/* ------------------------------------------------------------ Donat */
.donat-bungkus {
    display: flex;
    align-items: center;
    gap: 26px;
}
.donat {
    position: relative;
    flex: none;
}
.donat-tengah {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.donat-tengah .besar {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
}
.donat-tengah .kecil {
    font-size: 11px;
    color: var(--teks-lembut);
}

.legenda {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.legenda-baris {
    display: flex;
    align-items: center;
    gap: 10px;
}
.legenda-titik {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}
.legenda-teks {
    font-size: 13px;
    color: #374151;
}
.legenda-nilai {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
}

/* -------------------------------------------------------- Batang --- */
.batang-baris {
    margin-bottom: 15px;
}
.batang-baris:last-child {
    margin-bottom: 0;
}
.batang-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.batang-kepala .nm {
    font-size: 13px;
    font-weight: 500;
}
.batang-kepala .nl {
    font-size: 12.5px;
    color: var(--teks-lembut);
}
.batang-alur {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: #f0f2f4;
    overflow: hidden;
}
.batang-isi {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hijau-tua), #34d399);
}
/* Bagian sinkron digambar di atas total, jadi sisa batang = tidak sinkron */
.batang-sinkron {
    background: linear-gradient(90deg, var(--hijau-tua), #34d399);
}
.batang-total {
    background: #fbd5dd;
}

/* Batang bertumpuk per tingkat sinkronisasi (tinggi/sedang/rendah). */
.batang-tumpuk {
    display: flex;
    height: 9px;
    border-radius: 999px;
    background: #f0f2f4;
    overflow: hidden;
}
.batang-tumpuk span {
    display: block;
    height: 100%;
}

.legenda-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--garis);
    font-size: 11.5px;
    color: var(--teks-lembut);
}
.legenda-mini span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Lencana klasifikasi -- warna disuntik inline dari Permen Tabel V.10. */
.lencana-kelas {
    letter-spacing: 0.3px;
}

/* Kotak prioritas: hanya tampil untuk SPPR Jangka Pendek. */
.kotak-prioritas {
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
}
.kotak-prioritas .medan:last-of-type {
    margin-bottom: 8px;
}

/* --------------------------------------------------------- Kolom tahun */
.tahun-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: end;
    height: 190px;
    padding-top: 10px;
}
.tahun-kolom {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.tahun-nilai {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}
.tahun-alur {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
}
.tahun-isi {
    width: 100%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #34d399, var(--hijau-tua));
    min-height: 4px;
    transition: height 0.3s;
}
.tahun-isi.kini {
    background: linear-gradient(180deg, #5eead4, var(--toska));
}
.tahun-label {
    margin-top: 9px;
    font-size: 12px;
    color: var(--teks-lembut);
}

/* ---------------------------------------------------------- Daftar -- */
.daftar {
    display: flex;
    flex-direction: column;
}
.daftar-baris {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid #f2f4f6;
}
.daftar-baris:last-child {
    border-bottom: 0;
}
.daftar-baris:first-child {
    padding-top: 0;
}

.tanda-kode {
    padding: 4px 9px;
    flex: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.daftar-isi {
    min-width: 0;
    flex: 1;
}
.daftar-isi .jdl {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.daftar-isi .sub {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--teks-lembut);
}

.lencana {
    padding: 4px 10px;
    flex: none;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.lencana-sinkron {
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}
.lencana-tidak-sinkron {
    background: var(--merah-muda);
    color: var(--merah);
}
.lencana-tahun {
    background: #fef3c7;
    color: var(--kuning);
}
.lencana-peran-admin {
    background: #e6f7f7;
    color: #0e7c7c;
}
.lencana-peran-operator {
    background: #fef3c7;
    color: #b45309;
}

/* ------------------------------------------------------- Pengguna --- */
.avatar-kecil {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
}

/* Baris akun nonaktif diredupkan supaya langsung terbaca berbeda. */
tr.nonaktif td {
    opacity: 0.55;
}
tr.nonaktif .avatar {
    filter: grayscale(1);
}

.tanda-anda {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 5px;
    border-radius: 5px;
    background: var(--hijau-muda);
    font-size: 10px;
    font-weight: 700;
    color: var(--hijau-tua);
    vertical-align: middle;
}

/* -------------------------------------------------------- Impor ---- */
.temuan-baca {
    display: inline-block;
    padding: 1px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 11.5px;
}
.langkah {
    margin: 0;
    padding-left: 20px;
}
.langkah li {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}
.langkah li::marker {
    color: var(--hijau);
    font-weight: 700;
}

/* Baris bergalat diberi pita merah di kiri supaya langsung terlihat saat
   menggulir ratusan baris. */
tr.baris-galat td {
    background: #fffbfb;
}
tr.baris-galat td:first-child {
    box-shadow: inset 3px 0 0 var(--merah);
}

.galat-baris {
    margin: 0;
    padding-left: 16px;
}
.galat-baris li {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--merah);
    margin-bottom: 3px;
}

/* ---------------------------------------------------- Master data -- */
.contoh-warna {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.lambang-mini {
    height: 34px;
    width: auto;
    max-width: 46px;
    object-fit: contain;
}

.pilih-warna {
    display: flex;
    gap: 10px;
    align-items: center;
}
.pilih-warna input[type="color"] {
    width: 46px;
    height: 42px;
    flex: none;
    padding: 3px;
    border: 1px solid #dde1e6;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

/* Penjelasan hak akses pada formulir pengguna */
.peran-jelas {
    padding: 12px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 12px;
    line-height: 1.65;
    color: #92400e;
}
.peran-jelas.admin {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #155e75;
}

.kosong {
    padding: 26px 0;
    text-align: center;
    font-size: 13px;
    color: var(--teks-lembut);
}

/* -------------------------------------------------- Ringkasan modul - */
/* Baris kartu kecil di dashboard admin yang menautkan ke modul lain
   (berita, pengguna, RTRWP, RPJMD, KKPR) -- lebih ringkas dari
   .grid-statistik karena isinya beberapa angka sekaligus, bukan satu. */
.grid-modul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.modul-kartu {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--garis);
    border-radius: 14px;
    background: var(--kartu);
    box-shadow: var(--bayang);
    transition:
        border-color 0.12s,
        transform 0.12s;
}
a.modul-kartu:hover {
    border-color: #c9cdd3;
    transform: translateY(-1px);
}
.modul-kepala {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.modul-ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
.modul-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teks-lembut);
}
.modul-angka {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.modul-sub {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--teks-lembut);
    line-height: 1.5;
}
.modul-kosong {
    font-size: 12.5px;
    color: var(--teks-lembut);
    font-style: italic;
}

/* ---------------------------------------------------- Grafik garis -- */
.garis-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.garis-svg .garis-grid {
    stroke: var(--garis);
    stroke-width: 1;
}
.garis-svg .garis-sumbu {
    fill: var(--teks-lembut);
    font-size: 10.5px;
}
.garis-svg .garis-jalur {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.garis-svg .garis-titik {
    stroke: #fff;
    stroke-width: 1.5;
}

.garis-legenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--garis);
}
.garis-legenda-baris {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.garis-legenda-titik {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}
.garis-legenda-nama {
    flex: 1;
    min-width: 0;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.garis-legenda-nilai {
    font-weight: 700;
    color: var(--teks);
}

/* ------------------------------------------------------ Notifikasi -- */
/* Lonceng mengambang, ditempel di layout bersama (bukan tiap halaman)
   supaya konsisten tanpa harus menyentuh setiap view -- lihat komentar di
   admin/layouts/app.blade.php. */
.notif-bungkus {
    position: fixed;
    top: 20px;
    right: 32px;
    z-index: 55;
}
.notif-lonceng {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--garis);
    border-radius: 12px;
    background: var(--kartu);
    box-shadow: var(--bayang);
    color: #374151;
    cursor: pointer;
    transition:
        border-color 0.12s,
        transform 0.12s;
}
.notif-lonceng:hover {
    border-color: #c9cdd3;
    transform: translateY(-1px);
}
.notif-lonceng svg {
    width: 19px;
    height: 19px;
}
.notif-titik {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--kartu);
    background: var(--merah);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.notif-panel {
    position: absolute;
    top: 52px;
    right: 0;
    width: 380px;
    max-width: calc(100vw - 40px);
    border: 1px solid var(--garis);
    border-radius: 14px;
    background: var(--kartu);
    box-shadow: 0 10px 34px rgba(16, 24, 40, 0.16);
    overflow: hidden;
    animation: notifMasuk 0.14s ease;
}
@keyframes notifMasuk {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.notif-panel-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--garis);
}
.notif-panel-kepala span {
    font-size: 14.5px;
    font-weight: 700;
}
.notif-tandai {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--hijau-tua);
    cursor: pointer;
}
.notif-tandai:hover {
    text-decoration: underline;
}
.notif-tandai:disabled {
    opacity: 0.5;
    cursor: default;
    text-decoration: none;
}

.notif-panel-isi {
    max-height: 380px;
    overflow-y: auto;
}
.notif-item {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid #f2f4f6;
    cursor: pointer;
}
.notif-item:last-child {
    border-bottom: 0;
}
.notif-item:hover {
    background: #fafbfc;
}
.notif-item.belum-dibaca {
    background: #f5fbf8;
}
.notif-titik-jenis {
    width: 8px;
    height: 8px;
    flex: none;
    margin-top: 6px;
    border-radius: 50%;
}
.notif-item-isi {
    min-width: 0;
    flex: 1;
}
.notif-item-judul {
    font-size: 13px;
    font-weight: 600;
    color: var(--teks);
    line-height: 1.4;
}
.notif-item-pesan {
    margin-top: 2px;
    font-size: 12px;
    color: var(--teks-lembut);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item-waktu {
    margin-top: 5px;
    font-size: 11px;
    color: #9ca3af;
}

.notif-panel-kaki {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--garis);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hijau-tua);
    text-align: center;
}
.notif-panel-kaki:hover {
    background: #fafbfc;
}
.notif-kosong-panel {
    padding: 30px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--teks-lembut);
}

/* Daftar penuh /admin/notifikasi -- baris memakai .daftar-baris yang sudah
   ada, tinggal tambahan titik jenis dan penanda belum dibaca. */
.notif-baris-belum-dibaca {
    background: #f5fbf8;
    margin: 0 -22px;
    padding-left: 22px;
    padding-right: 22px;
}

@media (max-width: 900px) {
    .notif-bungkus {
        top: 16px;
        right: 16px;
    }
    .notif-panel {
        right: -8px;
        width: min(380px, calc(100vw - 24px));
    }
}

/* ------------------------------------------------------ Alur status - */
.alur-jalur {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.alur-langkah {
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
}
.alur-angka {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.alur-judul {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
}
.alur-ket {
    margin-top: 2px;
    font-size: 11px;
    color: var(--teks-lembut);
}
.alur-panah {
    align-self: center;
    flex: none;
}

@media (max-width: 760px) {
    .alur-jalur {
        flex-wrap: wrap;
    }
    .alur-langkah {
        min-width: 130px;
    }
    .alur-panah {
        display: none;
    }
}

/* ------------------------------------------------------- Pemberitahuan */
.info-contoh {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    font-size: 13px;
    line-height: 1.6;
    color: #92400e;
}
.info-contoh svg {
    flex: none;
    margin-top: 1px;
}

/* ======================================================= TABEL ====== */
.kartu-rata {
    padding: 0;
    overflow: hidden;
}

.tabel-gulung {
    overflow-x: auto;
}

table.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
table.tabel th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--garis);
    background: #fafbfc;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--teks-lembut);
    text-align: left;
    white-space: nowrap;
}
table.tabel td {
    padding: 13px 16px;
    border-bottom: 1px solid #f2f4f6;
    vertical-align: middle;
}
table.tabel tbody tr:last-child td {
    border-bottom: 0;
}
table.tabel tbody tr:hover {
    background: #fafcfb;
}

.sel-nama {
    max-width: 380px;
    font-weight: 500;
    line-height: 1.45;
}
.sel-nama small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--teks-lembut);
}
.sel-aksi {
    white-space: nowrap;
    text-align: right;
}

/* Status */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-draf {
    background: #f3f4f6;
    color: #4b5563;
}
.status-diajukan {
    background: #fef3c7;
    color: #b45309;
}
.status-disetujui {
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}
.status-ditolak {
    background: var(--merah-muda);
    color: var(--merah);
}

/* Tombol kecil */
.tombol-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--garis);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.tombol-mini:hover {
    border-color: #c9cdd3;
    background: #fafbfc;
}
.tombol-mini.hijau {
    border-color: #bbf7d0;
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}
.tombol-mini.hijau:hover {
    background: #d7f7e4;
}
.tombol-mini.merah {
    border-color: #fbd5dd;
    background: var(--merah-muda);
    color: var(--merah);
}
.tombol-mini.merah:hover {
    background: #fde7ec;
}
.tombol-mini:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tombol-isi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(100deg, var(--hijau-tua), var(--hijau));
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(22, 163, 74, 0.24);
}
.tombol-isi:hover {
    transform: translateY(-1px);
}

/* Saring */
.saring {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.saring input[type="search"],
.saring select {
    padding: 10px 13px;
    border: 1px solid var(--garis);
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--teks);
}
.saring input[type="search"] {
    min-width: 240px;
    flex: 1;
}
.saring input:focus,
.saring select:focus {
    outline: 0;
    border-color: var(--hijau);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

/* Tab status */
.tab-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.tab-status a {
    padding: 8px 15px;
    border: 1px solid var(--garis);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
}
.tab-status a:hover {
    border-color: #c9cdd3;
}
.tab-status a.aktif {
    border-color: var(--hijau);
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}
.tab-status a .n {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
}

/* Halaman (pagination) */
.halaman {
    padding: 14px 16px;
    border-top: 1px solid var(--garis);
}
.halaman nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.halaman svg {
    width: 15px;
    height: 15px;
}
.halaman a,
.halaman span[aria-current],
.halaman span[aria-disabled] {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--garis);
    border-radius: 8px;
    font-size: 12.5px;
}
.halaman a:hover {
    border-color: var(--hijau);
    color: var(--hijau);
}
.halaman span[aria-current] {
    background: var(--hijau);
    border-color: var(--hijau);
    color: #fff;
    font-weight: 600;
}
.halaman span[aria-disabled] {
    opacity: 0.4;
}
.halaman p {
    font-size: 12.5px;
    color: var(--teks-lembut);
}

/* ======================================================= FORM ======= */
/*
   minmax(0, ...) bukan sekadar 1fr: "1fr" sebenarnya minmax(auto, 1fr),
   dan kolomnya menolak menyusut di bawah lebar min-content isinya --
   membuat seluruh halaman melebar dan memunculkan scrollbar horizontal.
   Aturan yang sama berlaku untuk semua grid di berkas ini.
*/
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.form-baris {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.form-baris-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.form-grid > *,
.form-baris > *,
.form-baris-3 > * {
    min-width: 0;
}

.medan {
    margin-bottom: 16px;
}
.medan label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.medan label .wajib {
    color: var(--merah);
}
.medan label .opsional {
    color: var(--teks-lembut);
    font-weight: 400;
    font-size: 11.5px;
}
/* Jangan disingkat jadi `.medan input`: itu ikut mengenai checkbox dan
   membuatnya melebar sepenuh baris. */
.medan input[type="text"],
.medan input[type="password"],
.medan input[type="email"],
.medan input[type="number"],
.medan select,
.medan textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #dde1e6;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--teks);
}
.medan textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.6;
}
.medan textarea.mono {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12.5px;
}
.medan input:not([type="checkbox"]):focus,
.medan select:focus,
.medan textarea:focus {
    outline: 0;
    border-color: var(--hijau);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.medan .bantuan {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--teks-lembut);
    line-height: 1.55;
}

/* Chip saran indikasi di dropdown Dasar Indikasi RTRW. Sengaja ringan
   supaya tidak menyaingi <select>-nya sendiri; klik chip mengisi dropdown. */
.chip-saran {
    display: inline-block;
    margin: 3px 4px 0 0;
    padding: 3px 9px;
    font-size: 11.5px;
    font-family: inherit;
    color: #0c4a6e;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 0.12s,
        transform 0.08s;
}
.chip-saran:hover {
    background: #bae6fd;
}
.chip-saran:active {
    transform: translateY(1px);
}
.medan .galat {
    margin-top: 6px;
    font-size: 12px;
    color: var(--merah);
}
.medan input.salah,
.medan select.salah,
.medan textarea.salah {
    border-color: var(--merah);
}

/* Pilihan tahun */
.pilih-tahun {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pilih-tahun label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    margin: 0;
    border: 1px solid var(--garis);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.pilih-tahun label:has(input:checked) {
    border-color: var(--hijau);
    background: var(--hijau-muda);
    color: var(--hijau-tua);
    font-weight: 600;
}
.pilih-tahun input {
    accent-color: var(--hijau);
}

/* Unggah gambar */
.unggah {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.unggah-pratinjau {
    display: grid;
    place-items: center;
    width: 108px;
    height: 76px;
    flex: none;
    padding: 6px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background:
        linear-gradient(
                45deg,
                #f3f4f6 25%,
                transparent 25%,
                transparent 75%,
                #f3f4f6 75%
            )
            0 0 / 14px 14px,
        linear-gradient(45deg, #f3f4f6 25%, #fff 25%, #fff 75%, #f3f4f6 75%) 7px
            7px / 14px 14px;
    overflow: hidden;
}
.unggah-pratinjau img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.unggah-pratinjau span {
    font-size: 10.5px;
    color: var(--teks-lembut);
    text-align: center;
}
.unggah input[type="file"] {
    font-size: 12.5px;
    color: var(--teks-lembut);
    max-width: 100%;
}
.unggah input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 13px;
    border: 1px solid var(--garis);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.unggah input[type="file"]::file-selector-button:hover {
    border-color: var(--hijau);
    color: var(--hijau);
}

/* Daftar prasarana dinamis */
.prasarana-baris {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.prasarana-baris input {
    flex: 1;
}
.buang-baris {
    display: grid;
    place-items: center;
    width: 40px;
    flex: none;
    border: 1px solid var(--garis);
    border-radius: 9px;
    background: #fff;
    color: var(--teks-lembut);
    cursor: pointer;
}
.buang-baris:hover {
    border-color: #fbd5dd;
    background: var(--merah-muda);
    color: var(--merah);
}

/* Peta penyusun geometri */
#petaForm {
    height: 320px;
    border: 1px solid var(--garis);
    border-radius: 0 0 10px 10px;
    border-top: 0;
    background: #eef2f1;
    cursor: crosshair;
}
.peta-bantuan {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f0f9ff;
    font-size: 11.5px;
    line-height: 1.6;
    color: #075985;
}
.peta-bantuan svg {
    flex: none;
    margin-top: 1px;
}

/* Pemilih bentuk objek */
.pilih-bentuk {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.pilih-bentuk button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--garis);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.14s,
        background 0.14s;
}
.pilih-bentuk button:hover {
    border-color: #9ca3af;
}
.pilih-bentuk button svg {
    color: var(--teks-lembut);
}
.pilih-bentuk button span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teks);
}
.pilih-bentuk button small {
    font-size: 10.5px;
    color: var(--teks-lembut);
    line-height: 1.4;
}
.pilih-bentuk button.aktif {
    border-color: var(--hijau);
    background: var(--hijau-muda);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.14);
}
.pilih-bentuk button.aktif svg,
.pilih-bentuk button.aktif span {
    color: var(--hijau-tua);
}

/* Bilah alat di atas peta */
.peta-alat {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px solid var(--garis);
    border-radius: 10px 10px 0 0;
    background: #fafbfc;
}
.peta-arahan {
    font-size: 12px;
    color: var(--teks-lembut);
}

/* Bulatan bernomor pada tiap titik */
.titik-geom {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--hijau);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.peringatan-koordinat {
    display: none;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
}
.peringatan-koordinat.tampil {
    display: block;
}
.peringatan-koordinat.kurang {
    color: var(--kuning);
}
.peringatan-koordinat.tukar {
    padding: 9px 11px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Kotak lipat untuk GeoJSON -- disembunyikan karena hanya dipakai
   segelintir pengguna yang punya berkas dari QGIS. */
.lipat-lanjutan {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--garis);
    border-radius: 10px;
    background: #fafbfc;
}
.lipat-lanjutan summary {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teks-lembut);
    cursor: pointer;
    list-style: none;
}
.lipat-lanjutan summary::-webkit-details-marker {
    display: none;
}
.lipat-lanjutan summary::before {
    content: "▸ ";
}
.lipat-lanjutan[open] summary::before {
    content: "▾ ";
}
.lipat-lanjutan summary:hover {
    color: var(--teks);
}

.form-kaki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--garis);
}
.form-kaki .kanan {
    display: flex;
    gap: 10px;
}

/* ================================================== VERIFIKASI ====== */
.verif-kartu {
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--garis);
    border-left: 4px solid #d97706;
    border-radius: 12px;
    background: #fff;
}
.verif-kepala {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.verif-judul {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}
.verif-meta {
    margin-top: 5px;
    font-size: 12px;
    color: var(--teks-lembut);
}
.verif-rinci {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 13px 0;
    margin-bottom: 14px;
    border-top: 1px solid #f2f4f6;
    border-bottom: 1px solid #f2f4f6;
}
.verif-rinci .k {
    font-size: 11px;
    color: var(--teks-lembut);
}
.verif-rinci .v {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
}
.verif-aksi {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ------------------------------------------- Daftar periksa verifikasi */
.periksa {
    margin: 14px 0;
    border: 1px solid var(--garis);
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
}
.periksa-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-bottom: 1px solid var(--garis);
    background: #f3f4f6;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #4b5563;
}
.periksa-ringkas {
    display: flex;
    gap: 8px;
    font-weight: 600;
}
.periksa-ringkas span {
    padding: 2px 8px;
    border-radius: 5px;
}
.ringkas-gagal {
    background: var(--merah-muda);
    color: var(--merah);
}
.ringkas-ingat {
    background: #fef3c7;
    color: var(--kuning);
}
.ringkas-lulus {
    background: var(--hijau-muda);
    color: var(--hijau-tua);
}

.periksa-judul {
    padding: 9px 14px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--teks-lembut);
}
.periksa-baris {
    display: grid;
    grid-template-columns: 16px 150px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.5;
}
.periksa-tanda {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.periksa-judul-baris {
    font-weight: 600;
    color: #374151;
}
.periksa-pesan {
    color: var(--teks-lembut);
}

.periksa-lulus .periksa-tanda {
    color: var(--hijau);
}
.periksa-gagal .periksa-tanda {
    color: var(--merah);
}
.periksa-gagal .periksa-pesan {
    color: #9f1239;
}
.periksa-ingat .periksa-tanda {
    color: var(--kuning);
}
.periksa-ingat .periksa-pesan {
    color: #92400e;
}

@media (max-width: 760px) {
    .periksa-baris {
        grid-template-columns: 16px minmax(0, 1fr);
    }
    .periksa-judul-baris {
        grid-column: 2;
    }
    .periksa-pesan {
        grid-column: 2;
    }
}

.kotak-tolak {
    display: none;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #fbd5dd;
    border-radius: 10px;
    background: var(--merah-muda);
}
.kotak-tolak.tampil {
    display: block;
}
.kotak-tolak textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #fbd5dd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 70px;
}

/* Notifikasi melayang */
.notif {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 11px;
    font-size: 13.5px;
    line-height: 1.55;
}
.notif svg {
    flex: none;
    margin-top: 1px;
}
.notif-sukses {
    background: var(--hijau-muda);
    color: #14532d;
    border: 1px solid #c6f0d6;
}
.notif-galat {
    background: var(--merah-muda);
    color: #9f1239;
    border: 1px solid #fbd5dd;
}

/* ------------------------------------ Legenda Kategori Peruntukan (RTRWP) */
.legenda-kategori-baris {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--garis);
}
.legenda-kategori-baris:last-child {
    border-bottom: 0;
}
.legenda-kategori-info {
    flex: 1;
    min-width: 0;
}
.legenda-kategori-nama {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teks);
}
.legenda-kategori-meta {
    font-size: 11.5px;
    color: var(--teks-lembut);
}
.legenda-kategori-kontrol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.legenda-kategori-kontrol input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid var(--garis);
}
.legenda-kategori-kontrol input[type="range"] {
    width: 90px;
}
.legenda-kategori-persen {
    font-size: 11.5px;
    color: var(--teks-lembut);
    min-width: 30px;
    text-align: right;
}
.legenda-kategori-simpan {
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    opacity: 0;
    transition: opacity 0.25s;
}
.legenda-kategori-simpan.tampil {
    opacity: 1;
}
.legenda-kategori-kosong {
    font-size: 13px;
    color: var(--teks-lembut);
    padding: 6px 4px;
}

/* Swatch yang menampilkan warna DENGAN opasitasnya (bukan warna solid) --
   backdrop kotak-kotak supaya transparansi kelihatan jelas, bukan cuma
   warna pudar di atas putih. */
.swatch-opasitas {
    position: relative;
    flex: none;
    width: 30px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 8px 8px;
    background-position:
        0 0,
        0 4px,
        4px -4px,
        -4px 0;
}
.swatch-opasitas-isi {
    position: absolute;
    inset: 0;
}

/* ----------------------------------------------------------- Responsif */
.tirai-sisi {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    background: rgba(17, 24, 39, 0.5);
}
.tirai-sisi.tampil {
    display: block;
}

@media (max-width: 1100px) {
    .grid-statistik {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-utama,
    .grid-bawah {
        grid-template-columns: minmax(0, 1fr);
    }
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .verif-rinci {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .form-baris,
    .form-baris-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .verif-kepala {
        flex-direction: column;
    }
    .form-kaki {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .form-kaki .kanan {
        flex-direction: column-reverse;
    }
}

@media (max-width: 900px) {
    .login-layar {
        grid-template-columns: 1fr;
    }
    .login-kiri {
        display: none;
    }

    .sisi {
        transform: translateX(-100%);
    }
    .sisi.tampil {
        transform: none;
    }
    .utama {
        margin-left: 0;
        padding: 18px 16px 40px;
    }
    .buka-sisi {
        display: inline-flex;
    }
    .atas {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .grid-statistik {
        grid-template-columns: minmax(0, 1fr);
    }
    .donat-bungkus {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

/* ------------------------------------------- Dashboard SPPR Modul & Alur */
.alur-langkah-draf {
    background: #f3f4f6;
}
.alur-langkah-draf .alur-angka,
.alur-langkah-draf .alur-judul {
    color: #6b7280;
}
.alur-langkah-diajukan {
    background: #fef3c7;
}
.alur-langkah-diajukan .alur-angka,
.alur-langkah-diajukan .alur-judul {
    color: #d97706;
}
.alur-langkah-disetujui {
    background: #e8faef;
}
.alur-langkah-disetujui .alur-angka,
.alur-langkah-disetujui .alur-judul {
    color: #15803d;
}
.alur-langkah-ditolak {
    background: #fef2f4;
}
.alur-langkah-ditolak .alur-angka,
.alur-langkah-ditolak .alur-judul {
    color: #e11d48;
}

.statistik-ikon-tinggi {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
}
.statistik-ikon-sedang {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}
.statistik-ikon-rendah {
    background: rgba(21, 128, 61, 0.1);
    color: #15803d;
}
.imbuh-tinggi {
    color: #e11d48;
}
.imbuh-sedang {
    color: #d97706;
}
.imbuh-rendah {
    color: #15803d;
}

.batang-ruas-tinggi {
    background: #e11d48;
}
.batang-ruas-sedang {
    background: #d97706;
}
.batang-ruas-rendah {
    background: #15803d;
}
.legenda-tinggi {
    background: #e11d48;
}
.legenda-sedang {
    background: #d97706;
}
.legenda-rendah {
    background: #15803d;
}