/* =============================================
   TOKEN WARNA & TIPOGRAFI (Papan Warga)
   ============================================= */
:root {
  --pw-ground: #F4F6F2;
  --pw-surface: #FFFFFF;
  --pw-surface-2: #F4F6F2;
  --pw-border: #E3E8E2;
  --pw-text: #16241D;
  --pw-muted: #55635C;
  --pw-primary: #047857;
  --pw-primary-hover: #065F46;
  --pw-primary-soft: #E3F3EC;
  --pw-on-primary: #FFFFFF;
  --pw-accent: #F6C445;
  --pw-on-accent: #2E2300;
  --pw-accent-soft: #FDF3D6;
  --pw-accent-border: #EDD27F;
  --pw-line: #BFD3C7;
  /* Warna grafik (lolos validasi buta warna & kontras) */
  --pw-chart-in: #0E9F6E;
  --pw-chart-out: #E5603A;
  --pw-chart-line: #2A78D6;
  --pw-chart-in2: #7C3AED;      /* pemasukan lain (donatur) di grafik iuran */
  --pw-in: #065F46;
  --pw-in-soft: #E3F3EC;
  --pw-out: #912018;
  --pw-out-soft: #FDECEA;
  --pw-warn: #9A4A00;
  --pw-radius: 20px;
  --pw-font: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =============================================
   STYLE GLOBAL
   ============================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--pw-font);
  background: var(--pw-ground);
  color: var(--pw-text);
  font-size: 16px;
  line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; }

/* --- Navigasi --- */
.navbar {
  background: var(--pw-surface);
  padding: 10px 24px;
  border-bottom: 1px solid var(--pw-border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.navbar .brand {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pw-text);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;   /* "RW 01 Guyub" tetap satu baris walau logo tampil */
}
/* HP sempit: rapatkan header supaya nama, tombol akun & mode gelap muat satu baris */
@media (max-width: 400px) {
  .navbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .navbar .brand { font-size: 1rem; gap: 8px; }
  .navbar .brand img { height: 34px; }
  .navbar .nav-akun { margin-left: auto; }
  .nav-akun-btn { padding: 0 12px; }
  #darkModeToggleContainer { margin-left: 0; }
  #darkModeToggleContainer .switch { font-size: 14px; }
}
@media (max-width: 359px) {
  .nav-akun-btn.masuk span { display: none; }   /* tinggal ikon; nama tombol tetap dari aria-label */
}
.navbar .brand img {
  height: 40px;
  width: auto;
  border-radius: 10px;
  display: block;
}
.nav-menu { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; margin-left: auto; }

/* Lebar menengah (tablet, "situs desktop" di HP): menu tidak muat satu baris.
   Nama RW + tombol akun + mode gelap tetap di baris atas (akun di kanan, dropdown tidak terpotong),
   menu pindah ke baris kedua. */
@media (min-width: 769px) and (max-width: 1365px) {
  .navbar .nav-akun { order: 1; margin-left: auto; }
  .navbar #darkModeToggleContainer { order: 2; }
  .navbar .nav-menu { order: 3; flex-basis: 100%; margin-left: 0; }
}
.nav-menu a {
  text-decoration: none;
  color: var(--pw-muted);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-menu a:hover { background: var(--pw-primary-soft); color: var(--pw-primary); }
.nav-menu a.active { background: var(--pw-primary); color: var(--pw-on-primary); }

/* --- Sapaan (hanya di Beranda) --- */
.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 8px;
}
.hero p { font-size: 1rem; color: var(--pw-muted); margin-bottom: 4px; }
.hero h1 { font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
body:not([data-page="dashboard"]) .hero { display: none; }

/* --- Container & Card --- */
.container { max-width: 1120px; margin: 16px auto 40px; padding: 0 20px; }
.card {
  background: var(--pw-surface);
  color: var(--pw-text);
  padding: 20px;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  margin-bottom: 16px;
}
.card h2 { color: var(--pw-text); margin-bottom: 12px; font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.card h2 > i { color: var(--pw-primary); }

/* --- Page/Tab --- */
.page { display: none; }
.page.active { display: block; }

/* --- Tabel Keuangan --- */
.tabel-keuangan { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabel-keuangan th { background: var(--pw-surface-2); padding: 10px 12px; text-align: left; font-weight: 700; color: var(--pw-text); border-bottom: 2px solid var(--pw-border); white-space: nowrap; }
.tabel-keuangan td { padding: 10px 12px; border-bottom: 1px solid var(--pw-border); }
.tabel-keuangan tr:hover td { background: var(--pw-surface-2); }
.badge-masuk, .badge-keluar { padding: 2px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.badge-masuk { background: var(--pw-in-soft); color: var(--pw-in); }
.badge-keluar { background: var(--pw-out-soft); color: var(--pw-out); }
.text-masuk { color: var(--pw-in); font-weight: 700; }
.text-keluar { color: var(--pw-out); font-weight: 700; }

/* --- Footer --- */
footer { text-align: center; padding: 20px; font-size: 0.85rem; color: var(--pw-muted); }

/* --- Tombol Masuk / akun di header --- */
.nav-akun { position: relative; margin-left: 8px; }
.nav-akun-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--pw-primary);
  background: transparent;
  color: var(--pw-primary);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}
.nav-akun-btn:hover { background: var(--pw-primary-soft); }
.nav-akun-btn.masuk { background: var(--pw-primary); color: var(--pw-on-primary); }
.nav-akun-btn.masuk:hover { background: var(--pw-primary-hover); }
.nav-akun-inisial {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pw-primary);
  color: var(--pw-on-primary);
  font-size: 0.75rem;
  font-weight: 800;
}
.nav-akun-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 300;
  min-width: 230px;
  max-width: calc(100vw - 32px);   /* tidak pernah lebih lebar dari layar */
  padding: 8px;
  list-style: none;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.nav-akun-menu[hidden] { display: none; }
.nav-akun-kepala { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--pw-border); }
.nav-akun-kepala strong { display: block; }
.nav-akun-kepala span { color: var(--pw-muted); font-size: 0.85rem; }
.nav-akun-menu a, .nav-akun-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pw-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.nav-akun-menu a:hover, .nav-akun-menu button:hover { background: var(--pw-primary-soft); }
.nav-akun-menu i { width: 18px; color: var(--pw-primary); }
.nav-akun-menu .nav-akun-keluar, .nav-akun-menu .nav-akun-keluar i { color: var(--pw-out); }

/* --- Banner mode admin --- */
.admin-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--pw-accent);
  color: var(--pw-on-accent);
  font-size: 0.9rem;
  font-weight: 700;
}
.admin-banner[hidden] { display: none; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 640px) {
  .tabel-keuangan { font-size: 0.8rem; }
  .tabel-keuangan th, .tabel-keuangan td { padding: 8px 6px; }
  .hero h1 { font-size: 1.6rem; }
}

/* =============================================
   DARK MODE
   ============================================= */
body.dark-mode {
  --pw-ground: #0F172A;
  --pw-surface: #1E293B;
  --pw-surface-2: #273449;
  --pw-border: #334155;
  --pw-text: #E2E8F0;
  --pw-muted: #A3B1C2;
  --pw-primary: #34D399;
  --pw-primary-hover: #6EE7B7;
  --pw-primary-soft: #133B32;
  --pw-on-primary: #052E22;
  --pw-accent: #E8B93A;
  --pw-on-accent: #241B00;
  --pw-accent-soft: #352D14;
  --pw-accent-border: #6B5A22;
  --pw-line: #46625A;
  --pw-chart-in: #1FA774;
  --pw-chart-out: #E2683D;
  --pw-chart-line: #3987E5;
  --pw-chart-in2: #8B5CF6;
  --pw-in: #6EE7B7;
  --pw-in-soft: #133B32;
  --pw-out: #FCA5A5;
  --pw-out-soft: #3B1D22;
  --pw-warn: #F5B97A;
  color: var(--pw-text);
}

/* =============================================
   DARK MODE TOGGLE SWITCH
   (From Uiverse.io by JustCode14)
   ============================================= */

.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 20px;
  left: 0.5em;
  bottom: 0.5em;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}

.switch input:checked + .slider {
  background-color: #00a6ff;
}

.switch input:checked + .slider:before {
  transform: translateX(1.8em);
  box-shadow: inset 15px -4px 0px 15px #ffcf48;
}

.star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 5px;
  transition: all 0.4s;
  height: 5px;
}

.star_1 { left: 2.5em; top: 0.5em; }
.star_2 { left: 2.2em; top: 1.2em; }
.star_3 { left: 3em; top: 0.9em; }

.switch input:checked ~ .slider .star {
  opacity: 0;
}

.cloud {
  width: 3.5em;
  position: absolute;
  bottom: -1.4em;
  left: -1.1em;
  opacity: 0;
  transition: all 0.4s;
}

.switch input:checked ~ .slider .cloud {
  opacity: 1;
}

/* Container di navbar */
#darkModeToggleContainer {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

/* =============================================
   GRAFIK KAS
   ============================================= */
#grafikGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 12px 0 16px;
}
/* min-width: 0 supaya grafik bisa ikut menyempit saat layar diperkecil */
#grafikGrid > .card { margin: 0; min-width: 0; }

/* Desktop: 2 grafik berdampingan */
@media (min-width: 1024px) {
  #grafikGrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.pw-chart-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 2px; }
.pw-chart-card > .pw-muted { margin-bottom: 12px; }
.pw-chart-box { position: relative; height: 260px; min-width: 0; }

/* Legenda: teks memakai warna teks, warna seri hanya di penanda */
.pw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--pw-text); margin-bottom: 8px; }
.pw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pw-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pw-key-in { background: var(--pw-chart-in); }
.pw-key-out { background: var(--pw-chart-out); }
.pw-key-in2 { background: var(--pw-chart-in2); }
.pw-key-line { width: 16px; height: 2px; border-radius: 1px; background: var(--pw-chart-line); position: relative; }
.pw-key-line::after {
  content: '';
  position: absolute;
  left: 4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pw-chart-line);
}

/* Batang horizontal pengeluaran per kategori */
.pw-hbar-list { display: flex; flex-direction: column; gap: 4px; }
.pw-hbar {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 10px;
}
.pw-hbar:hover { background: var(--pw-surface-2); }
.pw-hbar-label { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.pw-hbar-track { display: block; height: 14px; }
.pw-hbar-fill { display: block; height: 100%; background: var(--pw-chart-out); border-radius: 0 4px 4px 0; }
.pw-hbar-value { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

@media (max-width: 480px) {
  .pw-hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pw-hbar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* =============================================
   STRUKTUR RW - BAGAN ORGANISASI
   Desktop: pohon horizontal | HP: pohon vertikal
   ============================================= */
.org-card { overflow-x: auto; padding: 32px 16px; }
.org-tree { display: flex; flex-direction: column; align-items: center; min-width: max-content; margin: 0 auto; }
.org-top { display: flex; gap: 16px; justify-content: center; }

.org-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 230px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  color: var(--pw-text);
}
.org-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: var(--pw-primary-soft);
  color: var(--pw-in);
}
.org-info { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.org-nama { font-weight: 800; line-height: 1.3; }
.org-jabatan { font-size: 0.85rem; color: var(--pw-muted); }

/* Tingkat 1: Ketua RW */
.org-lvl-1 { background: var(--pw-primary); border-color: var(--pw-primary); color: var(--pw-on-primary); }
.org-lvl-1 .org-jabatan { color: var(--pw-on-primary); opacity: 0.85; }
.org-lvl-1 .org-avatar { background: rgba(255, 255, 255, 0.2); color: var(--pw-on-primary); }

/* Tingkat 3: Ketua RT */
.org-lvl-3 { background: var(--pw-accent-soft); border-color: var(--pw-accent-border); }
.org-lvl-3 .org-avatar { background: var(--pw-accent); color: var(--pw-on-accent); }

/* Jabatan belum terisi */
.org-node.org-kosong { background: var(--pw-surface); border: 2px dashed var(--pw-border); }
.org-kosong .org-avatar { background: var(--pw-surface-2); color: var(--pw-muted); }
.org-kosong .org-nama { color: var(--pw-muted); font-weight: 600; font-style: italic; }

/* Tingkat 5-6: Seksi RW & Koordinator */
.org-lvl-6 { background: var(--pw-primary-soft); border-color: var(--pw-primary-soft); }

/* Kotak gabungan: judul + daftar anggota ("Sekretaris 1: Ilman Arif") */
.org-node.org-grup { flex-direction: column; align-items: stretch; gap: 8px; width: 260px; flex-wrap: nowrap; }
.org-grup-judul { font-weight: 800; text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--pw-border); }
.org-lvl-3 .org-grup-judul { border-bottom-color: var(--pw-accent-border); }
.org-grup-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.org-grup-list li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.org-grup-nama { flex: 1; min-width: 0; font-weight: 700; line-height: 1.35; }
.org-grup-label { color: var(--pw-muted); font-weight: 600; }
.org-grup-label::after { content: ': '; }
.org-grup-kosong { color: var(--pw-muted); font-weight: 600; }
.org-grup-list .org-aksi { flex-basis: auto; margin-left: auto; }
.org-grup-list .org-aksi button { width: 30px; height: 30px; border-radius: 8px; font-size: 0.8rem; }

/* Kolom RT: kotak Ketua RT + seksi RT di bawahnya */
.org-kolom { display: flex; flex-direction: column; align-items: center; }
.org-sub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; }
.org-sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 18px;
  border-left: 2px solid var(--pw-line);
}

/* Tombol edit/hapus di kartu (mode admin): di desktop berada di baris bawah kartu
   supaya lebar kartu tidak bertambah; di HP di samping (lihat media query HP) */
.org-node { flex-wrap: wrap; }
.org-aksi { display: flex; gap: 4px; flex-basis: 100%; justify-content: flex-end; }
.org-aksi button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  cursor: pointer;
}
.org-aksi button:hover { background: rgba(0, 0, 0, 0.14); }
.org-lvl-1 .org-aksi button { background: rgba(255, 255, 255, 0.18); }
.org-lvl-1 .org-aksi button:hover { background: rgba(255, 255, 255, 0.3); }

.org-row { list-style: none; position: relative; margin: 0; }
.org-row > li { position: relative; }

/* --- Garis penghubung: desktop --- */
@media (min-width: 769px) {
  .org-row { display: flex; justify-content: center; padding-top: 28px; }

  /* Batang vertikal dari tingkat di atasnya */
  .org-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 28px;
    border-left: 2px solid var(--pw-line);
  }
  /* Batang tetap lanjut ke baris berikutnya */
  .org-row:not(.org-row-last)::after {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 50%;
    border-left: 2px solid var(--pw-line);
  }

  .org-row > li { padding: 28px 10px 0; }
  .org-row > li::before,
  .org-row > li::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 28px;
    border-top: 2px solid var(--pw-line);
  }
  .org-row > li::before { right: 50%; }
  .org-row > li::after { left: 50%; border-left: 2px solid var(--pw-line); }
  .org-row > li:first-child::before { border-top: 0; }
  .org-row > li:first-child::after { border-top-left-radius: 12px; }
  .org-row > li:last-child::after { display: none; }
  .org-row > li:last-child::before { border-top-right-radius: 12px; border-right: 2px solid var(--pw-line); right: calc(50% - 2px); }
  .org-row > li:only-child::before { display: none; }
  .org-row > li:only-child::after { border-radius: 0; }
}

/* --- Garis penghubung: HP --- */
@media (max-width: 768px) {
  .org-card { padding: 20px 16px; }
  .org-tree { align-items: stretch; min-width: 0; }
  .org-top { flex-direction: column; }
  .org-node { width: auto; flex-wrap: nowrap; }
  .org-node.org-grup { width: auto; }
  .org-aksi { flex-basis: auto; margin-left: auto; flex-shrink: 0; }
  /* Seksi RT menjorok di bawah Ketua RT-nya */
  .org-kolom { align-items: stretch; }
  .org-sub { align-items: stretch; margin-left: 22px; padding: 10px 0 0 14px; border-left: 2px solid var(--pw-line); }
  .org-sub::before { display: none; }

  /* Batang vertikal sejajar avatar Ketua RW */
  .org-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 0 26px;
    margin-left: 37px;
    border-left: 2px solid var(--pw-line);
  }
  .org-row > li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -28px;
    width: 26px;
    border-top: 2px solid var(--pw-line);
  }
  /* Batang berhenti di kartu terakhir */
  .org-row-last > li:last-child::after {
    content: '';
    position: absolute;
    top: calc(50% + 2px);
    bottom: -2px;
    left: -30px;
    width: 6px;
    background: var(--pw-surface);
  }
}

/* =============================================
   LOADING: kerangka konten (skeleton), cincin hijau, label "Memperbarui…"
   ============================================= */
.sk {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--pw-surface-2) 0%, var(--pw-border) 50%, var(--pw-surface-2) 100%);
  background-size: 200% 100%;
  animation: sk-kilau 1.4s ease-in-out infinite;
}
@keyframes sk-kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-baris { height: 14px; margin: 8px 0; }
.sk-judul { height: 22px; width: 70%; margin: 6px 0 10px; }
.sk-kecil { height: 12px; width: 35%; margin-bottom: 6px; }
.sk-angka { height: 40px; width: 60%; margin: 6px 0 14px; }
.sk-tombol { height: 46px; border-radius: 14px; margin-top: 12px; }
.sk-foto { height: 170px; border-radius: 0; }
.sk-sampul { height: 260px; border-radius: var(--pw-radius); margin-bottom: 16px; }
.sk-persegi { aspect-ratio: 1; border-radius: 12px; }
.sk-kotak { height: 64px; width: 180px; max-width: 100%; border-radius: 14px; margin: 0 auto; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.sk-chip { width: 92px; height: 40px; border-radius: 999px; }
.sk-kartu { pointer-events: none; }
.sk-isi { padding: 14px 16px 16px; }
.sk-tabel-baris { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--pw-border); }
.sk-bagan { display: flex; flex-direction: column; gap: 20px; padding: 28px 16px; }
.sk-bagan-baris { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sk-bagan-baris .sk-kotak { margin: 0; width: 140px; }
/* Di kartu agenda (kuning) kerangkanya dibuat transparan putih */
.pw-agenda .sk { background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.35) 100%); background-size: 200% 100%; }

/* Cincin hijau berputar (dipakai di label "Memperbarui…") */
.ld-cincin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pw-primary-soft);
  border-top-color: var(--pw-primary);
  animation: ld-putar 0.8s linear infinite;
}
@keyframes ld-putar { to { transform: rotate(360deg); } }

/* Data lama sudah tampil, data baru sedang diambil */
.ld-perbarui {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  color: var(--pw-muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.ld-perbarui[hidden] { display: none; }

/* Loader SweetAlert (saat menyimpan) ikut warna hijau tema */
.swal2-loader { border-color: #047857 transparent #047857 transparent; }

/* Hormati pengaturan "kurangi animasi" di HP/komputer */
@media (prefers-reduced-motion: reduce) {
  .sk, .ld-cincin { animation: none; }
}

/* =============================================
   TABEL, FILTER, GALERI, TENTANG
   ============================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pw-nowrap { white-space: nowrap; }
.pw-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Judul kartu + kontrol di kanan */
.pw-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pw-card-head h2 { margin: 0; }
.pw-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-select {
  min-height: 44px;
  padding: 0 36px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--pw-border);
  background: var(--pw-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355635C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--pw-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
}
.pw-btn-kecil {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--pw-border);
  background: var(--pw-surface-2);
  color: var(--pw-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pw-btn-kecil:hover { background: var(--pw-primary-soft); }
.pw-btn-kecil-utama { background: var(--pw-primary); border-color: var(--pw-primary); color: var(--pw-on-primary); }
.pw-btn-kecil-utama:hover { background: var(--pw-primary-hover); }

/* Form di dalam popup SweetAlert (popup selalu berlatar putih) */
.pw-swal-form { display: flex; flex-direction: column; gap: 6px; text-align: left; font-family: var(--pw-font); }
.pw-swal-form label { font-size: 0.9rem; font-weight: 700; color: #16241D; margin-top: 8px; }
.pw-swal-form input[type="text"],
.pw-swal-form input[type="search"],
.pw-swal-form input[type="date"],
.pw-swal-form input[type="number"],
.pw-swal-form select,
.pw-swal-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #CBD5CF;
  border-radius: 12px;
  background: #FFFFFF;
  color: #16241D;
  font-family: inherit;
  font-size: 1rem;
}
.pw-swal-form textarea { padding: 10px 14px; resize: vertical; line-height: 1.5; }
.pw-swal-form input:focus, .pw-swal-form select:focus, .pw-swal-form textarea:focus { outline: 3px solid #F6C445; outline-offset: 1px; }
.pw-swal-form input[hidden] { display: none; }
/* Pembungkus field tanpa class (mis. #pgRTWadah); komponen ber-class punya tata letak sendiri */
.pw-swal-form > div:not([class]):not([hidden]) { display: flex; flex-direction: column; gap: 6px; }
.pw-segmen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-segmen label { margin: 0; cursor: pointer; }
.pw-segmen input { position: absolute; opacity: 0; pointer-events: none; }
.pw-segmen span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 2px solid #CBD5CF;
  border-radius: 12px;
  color: #55635C;
  font-weight: 700;
}
.pw-segmen input:checked + span { border-color: #047857; background: #E3F3EC; color: #065F46; }
.pw-segmen input[value="Pengeluaran"]:checked + span { border-color: #B42318; background: #FDECEA; color: #912018; }
.pw-segmen input:focus-visible + span { outline: 3px solid #F6C445; outline-offset: 2px; }
.pw-swal-saldo { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #F4F6F2; color: #16241D; font-size: 0.95rem; }
.pw-swal-peringatan { color: #912018; font-weight: 700; }

/* Popup login (popup selalu berlatar putih) */
.pw-login-popup {
  width: min(400px, calc(100vw - 32px));
  padding: 28px 24px 22px;
  border-radius: 24px;
  font-family: var(--pw-font);
}
.pw-login-popup .swal2-html-container { margin: 0; padding: 0; overflow: visible; }
.pw-login-popup .swal2-close { top: 6px; right: 6px; color: #55635C; font-size: 1.8rem; }
.pw-login-popup .swal2-close:focus { box-shadow: none; outline: 3px solid #F6C445; }
.pw-login { text-align: left; color: #16241D; }
.pw-login-kepala { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; text-align: center; }
.pw-login-logo {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E3F3EC;
  color: #047857;
  font-size: 1.6rem;
}
.pw-login-kepala h2 { margin: 6px 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.2px; }
.pw-login-kepala p { margin: 0; color: #55635C; font-size: 0.92rem; }
.pw-login label { display: block; margin: 12px 0 6px; font-size: 0.88rem; font-weight: 700; }
.pw-login-isian { position: relative; display: flex; align-items: center; }
.pw-login-isian > i { position: absolute; left: 14px; width: 16px; text-align: center; color: #55635C; pointer-events: none; }
.pw-login-isian input {
  width: 100%;
  min-height: 50px;
  padding: 0 48px 0 42px;
  border: 1.5px solid #D5DDD6;
  border-radius: 14px;
  background: #F4F6F2;
  color: #16241D;
  font: inherit;
  font-size: 1rem;
}
.pw-login-isian input:focus { outline: none; border-color: #047857; background: #FFFFFF; box-shadow: 0 0 0 4px #E3F3EC; }
.pw-login-isian.salah input { border-color: #B42318; background: #FFF6F5; }
.pw-login-mata {
  position: absolute;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #55635C;
  cursor: pointer;
}
.pw-login-mata:focus-visible { outline: 3px solid #F6C445; }
.pw-login-pesan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FDECEA;
  color: #912018;
  font-size: 0.9rem;
  font-weight: 600;
}
.pw-login-pesan[hidden] { display: none; }
.pw-login-catatan { margin: 12px 0 0; text-align: center; color: #55635C; font-size: 0.8rem; }
.pw-login-aksi { flex-direction: column; width: 100%; gap: 4px; margin: 20px 0 0; }
.pw-login-aksi .pw-btn { width: 100%; min-height: 50px; margin: 0; font-size: 1rem; }
.pw-login-aksi .pw-btn i { margin-right: 8px; }
.pw-login-batal {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #55635C;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pw-login-batal:hover { background: #F4F6F2; }
/* Popup keluar: aksen merah */
.pw-login-logo-keluar { background: #FDECEA; color: #B42318; }
.pw-login-kepala strong { color: #16241D; }
.pw-btn-bahaya { background: #B42318; color: #FFFFFF; }
.pw-btn-bahaya:hover { background: #912018; color: #FFFFFF; }

.pw-table-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--pw-border); border-radius: 14px; }
.pw-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.pw-table-info { text-align: right; margin-top: 10px; }

/* --- Galeri: album (subfolder Drive per acara) --- */
.pw-foto-grid.pw-galeri-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gl-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gl-album {
  display: block;
  overflow: hidden;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
  color: var(--pw-text);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gl-album:hover { color: var(--pw-text); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(4, 120, 87, 0.12); }
/* minmax(0, …) + overflow: hidden → foto tegak tidak memanjangkan sampul & menutupi judul */
.gl-sampul {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  height: 170px;
  overflow: hidden;
  background: var(--pw-surface-2);
}
.gl-sampul.satu { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.gl-sampul img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.gl-sampul img:first-child { grid-row: 1 / 3; }
.gl-sampul.satu img:first-child { grid-row: auto; }
.gl-jumlah {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
}
.gl-album-isi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.gl-album-isi h3 { font-size: 1rem; font-weight: 800; line-height: 1.3; margin: 2px 0; }
.gl-album-isi small { color: var(--pw-muted); }

/* Satu album */
.gl-kepala { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.gl-kepala h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: 2px 0; }
.gl-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gl-foto-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--pw-surface-2); cursor: zoom-in; }
.gl-foto-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.gl-foto-grid button:hover img { transform: scale(1.04); }
.kg-foto img, .pw-cover { cursor: zoom-in; }

/* Popup foto layar penuh (bisa digeser) */
body.gl-terkunci { overflow: hidden; }
.gl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 20, 0.96);
  color: #FFFFFF;
  touch-action: pan-y;
}
.gl-lb-atas { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.gl-lb-atas strong { display: block; font-size: 0.95rem; }
.gl-lb-atas small { opacity: 0.75; }
.gl-lb-tutup, .gl-lb-nav { flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; cursor: pointer; }
.gl-lb-tutup { width: 44px; height: 44px; font-size: 1.2rem; }
.gl-lb-nav { width: 48px; height: 48px; font-size: 1.1rem; }
.gl-lb-nav:disabled { opacity: 0.3; cursor: default; }
.gl-lb-tutup:focus-visible, .gl-lb-nav:focus-visible { outline: 3px solid #F6C445; }
.gl-lb-foto { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.gl-lb-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.gl-lb-bawah { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 14px; }
.gl-lb-hitung { min-width: 64px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.gl-lb-tautan { padding-bottom: 18px; text-align: center; }
.gl-lb-link { color: #9FE3C4; font-weight: 700; text-decoration: none; }

@media (max-width: 768px) {
  .gl-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gl-sampul { height: 120px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .gl-sampul img:not(:first-child) { display: none; }
  .gl-sampul img:first-child { grid-row: auto; }
  .gl-foto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .gl-foto-grid button { border-radius: 6px; }
}

/* Halaman kosong / tidak ditemukan */
.pw-kosong-icon { font-size: 3rem; color: var(--pw-muted); display: block; margin-bottom: 12px; }
.pw-kosong-judul { justify-content: center; }

/* Tentang */
.pw-layanan { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pw-layanan li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--pw-surface-2);
}
.pw-layanan li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pw-layanan-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--pw-primary-soft);
  color: var(--pw-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.pw-instagram { display: flex; flex-direction: column; gap: 12px; }
.pw-instagram h2 { margin: 0; }
.pw-instagram .pw-btn { max-width: 320px; }

/* =============================================
   PAPAN WARGA - KOMPONEN
   ============================================= */
a { color: var(--pw-primary); }
a:hover { color: var(--pw-primary-hover); }
:focus-visible { outline: 3px solid var(--pw-accent); outline-offset: 2px; }

.pw-muted { color: var(--pw-muted); font-size: 0.9rem; }
.pw-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }

/* --- Judul halaman --- */
.pw-page-head { padding: 12px 0 8px; }
.pw-page-head h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.pw-page-head p { color: var(--pw-muted); margin-top: 4px; }
.pw-page-head-aksi { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }

/* --- Tombol --- */
.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, opacity 0.2s;
}
.pw-btn-primary { background: var(--pw-primary); color: var(--pw-on-primary); }
.pw-btn-primary:hover { background: var(--pw-primary-hover); color: var(--pw-on-primary); }
.pw-btn-dark { background: var(--pw-on-accent); color: #FFFFFF; }
.pw-btn-dark:hover { opacity: 0.9; color: #FFFFFF; }
.pw-btn-outline { background: transparent; color: var(--pw-primary); border: 1px solid var(--pw-border); }
.pw-btn-outline:hover { background: var(--pw-primary-soft); }

/* --- Chip / filter --- */
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.pw-chip {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--pw-border);
  background: var(--pw-surface);
  color: var(--pw-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.pw-chip.active { background: var(--pw-primary); border-color: var(--pw-primary); color: var(--pw-on-primary); font-weight: 700; }
.pw-chip-static { min-height: 0; padding: 6px 12px; background: var(--pw-surface-2); border: none; cursor: default; font-size: 0.85rem; }

.pw-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pw-primary-soft);
  color: var(--pw-in);
  font-size: 0.75rem;
  font-weight: 700;
}
.pw-badge-soon { background: var(--pw-accent); color: var(--pw-on-accent); }

/* --- Kartu metrik ringkas di Beranda --- */
.pw-metrik-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.pw-metrik {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 104px;
  padding: 14px 16px;
  border: 1px solid var(--pw-border);
  border-radius: 16px;
  background: var(--pw-surface);
  box-shadow: 0 2px 10px rgba(16, 40, 30, 0.06);
}
.pw-metrik-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pw-metrik-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.pw-metrik-ikon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--pw-primary-soft);
  color: var(--pw-primary);
  font-size: 1rem;
}
.pw-metrik-nilai {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.pw-metrik-sub { margin: 0; font-size: 0.8rem; color: var(--pw-muted); }

@media (min-width: 900px) {
  .pw-metrik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Aktivitas terbaru di Beranda (khusus pengurus iuran) --- */
.pw-feed { display: flex; flex-direction: column; }
.pw-feed-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--pw-border); }
.pw-feed-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.pw-feed-ikon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--pw-primary-soft);
  color: var(--pw-primary);
  font-size: 0.88rem;
}
.pw-feed-ikon.keluar { background: var(--pw-out-soft); color: var(--pw-out); }
.pw-feed-ikon.info { background: var(--pw-accent-soft); color: var(--pw-warn); }
.pw-feed-isi { flex: 1; min-width: 0; }
.pw-feed-teks { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.pw-feed-waktu { margin: 2px 0 0; font-size: 0.76rem; color: var(--pw-muted); }
.pw-feed-nominal { font-weight: 800; font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-feed-nominal.masuk { color: var(--pw-in); }
.pw-feed-nominal.keluar { color: var(--pw-out); }
.pw-feed-kosong { margin: 0; font-size: 0.88rem; color: var(--pw-muted); }

/* --- Grid 2 kolom di Beranda --- */
.pw-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.pw-grid-2 > .card { margin: 0; }

/* --- Agenda (kartu kuning) --- */
.pw-agenda {
  background: var(--pw-accent);
  color: var(--pw-on-accent);
  border-radius: var(--pw-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pw-agenda-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.pw-agenda-isi { display: flex; align-items: center; gap: 14px; }
.pw-agenda-judul { font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.pw-tanggal {
  width: 64px;
  flex-shrink: 0;
  background: #FFFFFF;
  color: #16241D;
  border-radius: 14px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pw-tanggal span { font-size: 0.75rem; font-weight: 800; color: #B42318; text-transform: uppercase; }
.pw-tanggal strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pw-agenda .pw-btn { margin-top: auto; }

/* --- Kas --- */
.pw-kas #ringkasan-keuangan { display: flex; flex-direction: column; gap: 14px; }
.pw-kas-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.pw-kas-title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.pw-kas-title i { color: var(--pw-primary); }
.pw-kas-saldo { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pw-kas-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pw-kas-in, .pw-kas-out { border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.pw-kas-in { background: var(--pw-in-soft); color: var(--pw-in); }
.pw-kas-out { background: var(--pw-out-soft); color: var(--pw-out); }
.pw-kas-in span, .pw-kas-out span { font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pw-kas-in strong, .pw-kas-out strong { font-size: 1.05rem; font-weight: 800; }
/* Kas disembunyikan dari warga → kartu agenda selebar penuh */
.pw-grid-2.pw-grid-tunggal { grid-template-columns: minmax(0, 1fr); }
/* Status tampil/sembunyi kas (hanya Master) */
.pw-kas-akses {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--pw-surface-2); color: var(--pw-muted); font-size: 0.85rem; font-weight: 600;
}
.pw-kas-akses.publik { background: var(--pw-in-soft); color: var(--pw-in); }
.pw-kas-akses span { display: flex; align-items: center; gap: 6px; }

/* --- Bagian dengan judul + tautan --- */
.pw-section { margin-bottom: 16px; }
.pw-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pw-section-head h2 { font-size: 1.2rem; font-weight: 800; }
.pw-section-head a { font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* --- Pengurus --- */
.pw-orang { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pw-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pw-primary-soft);
  color: var(--pw-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

/* --- Kartu kegiatan --- */
.pw-grup-judul { font-size: 0.85rem; font-weight: 800; color: var(--pw-muted); letter-spacing: 0.6px; text-transform: uppercase; margin: 20px 0 10px; }
.pw-kegiatan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pw-kegiatan-card {
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--pw-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pw-kegiatan-card:hover { color: var(--pw-text); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(4, 120, 87, 0.12); }
.pw-kegiatan-cover { position: relative; }
.pw-kegiatan-cover .pw-badge { position: absolute; top: 12px; left: 12px; background: var(--pw-surface); }
.pw-kegiatan-cover .pw-badge-soon { background: var(--pw-accent); }
.pw-kegiatan-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.pw-kegiatan-noimg { display: flex; align-items: center; justify-content: center; background: var(--pw-primary-soft); color: var(--pw-primary); font-size: 2.4rem; }
.pw-kegiatan-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.pw-kegiatan-body h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.pw-meta { display: flex; align-items: center; gap: 8px; color: var(--pw-muted); font-size: 0.9rem; }
.pw-meta i { color: var(--pw-primary); width: 16px; text-align: center; }
.pw-kegiatan-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--pw-border);
  font-size: 0.85rem;
  color: var(--pw-muted);
  font-variant-numeric: tabular-nums;
}
.pw-kegiatan-foot strong { color: var(--pw-text); font-size: 0.95rem; }

.pw-kosong { text-align: center; padding: 40px 20px; color: var(--pw-muted); }
.pw-error { color: var(--pw-out); }

/* --- Detail kegiatan --- */
.pw-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; margin-bottom: 8px; }
.pw-detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.pw-detail-side { display: flex; flex-direction: column; gap: 16px; }
.pw-detail-side .card { margin: 0; }
.pw-cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--pw-radius); display: block; margin-bottom: 16px; cursor: zoom-in; }
.pw-detail-head { display: flex; flex-direction: column; gap: 6px; }
.pw-detail-head .pw-badge { align-self: flex-start; }
.pw-detail-head h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; margin-bottom: 4px; }
.pw-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pw-foto-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; display: block; }
.pw-foto-grid-kecil { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

/* --- Kuitansi --- */
.pw-kuitansi { display: flex; flex-direction: column; gap: 8px; }
.pw-kuitansi-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--pw-muted); margin-top: 10px; }
.pw-kuitansi-label.masuk { color: var(--pw-in); }
.pw-kuitansi-label.keluar { color: var(--pw-out); }
.pw-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.pw-row > span:last-child { text-align: right; }
.pw-total { font-weight: 800; border-top: 1px dashed var(--pw-border); padding-top: 8px; }
.pw-total.masuk { color: var(--pw-in); }
.pw-highlight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pw-accent);
  color: var(--pw-on-accent);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pw-highlight strong { font-size: 1.2rem; font-weight: 800; }
.pw-total.keluar { color: var(--pw-out); }

/* --- Kegiatan: jenis, info keamanan, alat Master --- */
.kg-jenis { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--pw-primary); }
.pw-badge-info { background: var(--pw-out-soft); color: var(--pw-out); display: inline-flex; align-items: center; gap: 6px; }
.pw-kegiatan-cover .pw-badge-info { background: var(--pw-out-soft); }
.pw-kegiatan-noimg.info { background: var(--pw-out-soft); color: var(--pw-out); }
.kg-head-info { border-left: 6px solid var(--pw-out); }
.kg-cerita { margin-top: 8px; line-height: 1.6; }
.kg-alat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kg-nilai { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kg-nilai .iu-aksi button { min-width: 32px; min-height: 32px; }
.kg-catatan { font-size: 0.88rem; margin: 0; }
.pw-kuitansi-label.kg-label-luar { color: var(--pw-text); }
.kg-dana-luar { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pw-text); }
.kg-tambah {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px dashed var(--pw-primary);
  border-radius: 10px;
  background: transparent;
  color: var(--pw-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.kg-tambah:hover { background: var(--pw-primary-soft); }
.kg-foto { position: relative; display: block; }
.kg-foto-hapus {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #FFFFFF;
  cursor: pointer;
}
.kg-foto-pratinjau { max-width: 100%; max-height: 220px; border-radius: 12px; }

/* Peringatan keamanan di Beranda */
.kg-peringatan-wadah:empty { display: none; }
.kg-peringatan-wadah { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kg-peringatan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--pw-out-soft);
  color: var(--pw-out);
  border: 1px solid currentColor;
  text-decoration: none;
  font-weight: 700;
}
.kg-peringatan > i:first-child { font-size: 1.3rem; }
.kg-peringatan span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kg-peringatan small { font-weight: 500; opacity: 0.85; }

/* --- Navigasi bawah & menu "Lainnya" (HP) --- */
.bottom-nav { display: none; }
.more-sheet[hidden] { display: none; }

@media (min-width: 769px) {
  .pw-grid-2 { grid-template-columns: 1.1fr 1fr; }
  .pw-detail-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .pw-detail-side { position: sticky; top: 84px; }
}

@media (max-width: 768px) {
  body { padding-bottom: 84px; }
  .navbar { padding: 10px 16px; flex-wrap: nowrap; }
  .nav-menu { display: none; }
  .container { padding: 0 16px; }
  .hero { padding: 20px 16px 4px; }

  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--pw-surface);
    border-top: 1px solid var(--pw-border);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    background: none;
    border: none;
    color: var(--pw-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .bottom-nav i {
    font-size: 1.15rem;
    width: 56px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
  }
  .bottom-nav .active { color: var(--pw-primary); font-weight: 800; }
  .bottom-nav .active i { background: var(--pw-primary-soft); }

  .more-sheet {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
  }
  .more-sheet-panel {
    width: 100%;
    background: var(--pw-surface);
    border-radius: 24px 24px 0 0;
    padding: 20px 16px 100px;
  }
  .more-sheet-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
  #moreMenu { list-style: none; display: flex; flex-direction: column; gap: 4px; }
  #moreMenu a, #moreMenu button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 12px;
    border: none;
    border-radius: 14px;
    background: none;
    color: var(--pw-text);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  #moreMenu a i, #moreMenu button i { color: var(--pw-primary); width: 22px; text-align: center; }
  #moreMenu a.active { background: var(--pw-primary-soft); }
  /* Header HP: tombol akun menempel ke kanan, nama disingkat ke inisial */
  .navbar .nav-akun { margin-left: auto; }
  .nav-akun-btn { padding: 0 14px; }
  .nav-akun-nama { display: none; }
  .nav-akun-inisial { margin-left: -6px; }

  .pw-kas-saldo { font-size: 1.9rem; }
  .pw-kegiatan-grid { grid-template-columns: 1fr; }
}

/* =============================================
   MENU IURAN WARGA & KELOLA PENGGUNA
   ============================================= */
.admin-banner { flex-wrap: wrap; text-align: center; }

.iu-tabs { margin-bottom: 12px; }
.iu-tabs .pw-chip { display: inline-flex; align-items: center; gap: 6px; }
.iu-kontrol { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.iu-kontrol .pw-chips { margin: 0; }
.iu-cari {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pw-border);
  border-radius: 12px;
  background: var(--pw-surface);
  color: var(--pw-text);
  font-size: 1rem;
}
.iu-catatan { font-size: 0.85rem; margin-top: 8px; }

/* Warna status (selalu disertai ikon + teks) */
.iu-st-lunas { --iu-warna: var(--pw-in); }
.iu-st-kurang { --iu-warna: var(--pw-warn); }
.iu-st-belum { --iu-warna: var(--pw-muted); }

.iu-ringkas-rt { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.iu-ringkas-rt > div:first-child { display: flex; flex-direction: column; }
.iu-ringkas-rt strong { font-size: 1.4rem; font-weight: 800; }
.iu-hitung { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; font-weight: 700; }
.iu-hitung span { color: var(--iu-warna); display: inline-flex; align-items: center; gap: 6px; }

/* ===== DATA KTP: daftar per KK + form anggota ===== */
.kt-ringkas { margin: 4px 2px 10px; display: flex; align-items: center; gap: 6px; }
.kt-kk { padding: 0; overflow: hidden; }
.kt-kk-kepala { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; border-left: 4px solid var(--pw-in); background: var(--pw-primary-soft); }
.kt-kk-buka { flex: 1; min-width: 200px; display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; color: var(--pw-text); font: inherit; text-align: left; cursor: pointer; }
.kt-kk-buka i { margin-top: 4px; color: var(--pw-in); transition: transform 0.2s; }
.kt-kk.tertutup .kt-kk-buka i { transform: rotate(-90deg); }
.kt-kk-buka span { display: flex; flex-direction: column; min-width: 0; }
.kt-kk-buka strong { font-size: 1.02rem; }
.kt-kk-buka small { color: var(--pw-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.kt-jumlah { padding: 3px 12px; border-radius: 999px; background: var(--pw-surface); color: var(--pw-in); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.kt-aksi-kk { display: flex; gap: 6px; }
.kt-aksi-kk .pw-btn-kecil { min-height: 36px; padding: 0 12px; font-size: 0.85rem; }
.kt-btn-hapus { color: var(--pw-out); }
.kt-btn-hapus:hover { background: var(--pw-out-soft); }
.kt-kk.tertutup .kt-isi { display: none; }
.kt-isi { margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--pw-border); max-height: none; overflow: visible; }
@media (min-width: 641px) {
  /* Lebar kolom sama di semua KK supaya lurus antar-kartu */
  .kt-tabel { table-layout: fixed; width: 100%; }
  .kt-tabel th:nth-child(1) { width: 48px; }
  .kt-tabel th:nth-child(2) { width: 26%; }
  .kt-tabel th:nth-child(3) { width: 72px; }
  .kt-tabel th:nth-child(4) { width: 118px; }
  .kt-tabel th:nth-child(5) { width: 136px; }
  .kt-tabel th:nth-child(7) { width: 148px; }
  .kt-tabel td { overflow-wrap: anywhere; }
}
.kt-tabel td small { display: block; color: var(--pw-muted); font-size: 0.78rem; }
.kt-baris-kepala { background: var(--pw-surface-2); }
.kt-lencana { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--pw-in); color: var(--pw-surface); font-size: 0.7rem; font-weight: 700; }
.kt-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.kt-status.sudah { background: var(--pw-in-soft); color: var(--pw-in); }
.kt-status.belum { background: var(--pw-accent-soft); color: var(--pw-warn); }
.kt-alamat { font-size: 0.88rem; }
.kt-aksi button { min-width: 36px; min-height: 36px; border: 1px solid var(--pw-border); border-radius: 10px; background: var(--pw-surface); color: var(--pw-text); cursor: pointer; }
.kt-aksi button:hover:not(:disabled) { background: var(--pw-primary-soft); }
.kt-aksi button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 640px) {
  .kt-tabel thead { display: none; }
  .kt-tabel tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--pw-line); }
  .kt-tabel td { display: block; padding: 0; border: 0; }
  .kt-tabel td[data-label="No"], .kt-tabel td[data-label="RT"] { display: none; }
  .kt-tabel td[data-label="Nama"] { grid-column: 1; }
  .kt-tabel td[data-label="Status KTP"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .kt-tabel td[data-label="Jenis kelamin"], .kt-tabel td[data-label="Alamat"] { grid-column: 1 / -1; color: var(--pw-muted); font-size: 0.85rem; }
  .kt-tabel td.kt-aksi { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
}
.kt-tinggal { display: inline-flex; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--pw-chart-in2-soft, #EDE9FE); color: #5B21B6; font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
.kt-peringatan-kecil { color: var(--pw-warn) !important; font-weight: 700; }
.kt-riwayat .iu-rw-teks small { overflow-wrap: anywhere; }
.kt-mutasi { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.kt-mutasi.pindah { background: #E0E7FF; color: #3730A3; }
.kt-mutasi.meninggal { background: var(--pw-surface-2); color: var(--pw-muted); }
.kt-riwayat .kt-aksi { display: flex; gap: 4px; }
@media (max-width: 640px) { .kt-riwayat { flex-wrap: wrap; } .kt-riwayat .kt-mutasi { margin-left: 46px; } .kt-riwayat .kt-aksi { margin-left: auto; } }
.kt-rekap-kotak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kt-rekap-kotak div { background: var(--pw-surface-2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.kt-rekap-kotak span { display: block; font-size: 0.75rem; color: var(--pw-muted); }
.kt-rekap-kotak strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .kt-rekap-kotak { grid-template-columns: repeat(2, 1fr); } }
.kt-rekap-2 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .kt-rekap-2 { grid-template-columns: repeat(2, 1fr); } }
.kt-subjudul { font-size: 0.95rem; margin: 16px 0 6px; }
.kt-rekap-tabel { table-layout: fixed; width: 100%; }
.kt-rekap-tabel td, .kt-rekap-tabel th { padding: 8px 6px; text-align: center !important; font-variant-numeric: tabular-nums; }
.kt-rekap-tabel td:first-child, .kt-rekap-tabel th:first-child { text-align: left !important; width: 28%; }
.kt-unduh { display: flex; flex-direction: column; gap: 10px; }
.kt-unduh .pw-btn-kecil { justify-content: flex-start; flex-wrap: wrap; }
.kt-unduh small { font-weight: 500; opacity: 0.8; }
/* Menu ⋯ per KK & pilihan status (di popup putih) */
.kt-menu { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.kt-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #CBD5CF; border-radius: 12px; background: #fff; color: #16241D; font: inherit; text-align: left; cursor: pointer; }
.kt-menu button:hover:not(:disabled) { background: #E3F3EC; border-color: #047857; }
.kt-menu button:disabled { opacity: 0.5; cursor: not-allowed; }
.kt-menu button > i { width: 22px; color: #047857; font-size: 1.1rem; }
.kt-menu span { display: flex; flex-direction: column; }
.kt-menu small { color: #55635C; font-size: 0.8rem; }
.kt-menu .kt-menu-bahaya { border-color: #F3B4AE; }
.kt-menu .kt-menu-bahaya > i, .kt-menu .kt-menu-bahaya strong { color: #912018; }
.kt-pilih-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.kt-pilih-status label { margin: 0; cursor: pointer; }
.kt-pilih-status input { position: absolute; opacity: 0; pointer-events: none; }
.kt-pilih-status span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1.5px solid #CBD5CF; border-radius: 12px; font-weight: 700; }
.kt-pilih-status input:checked + span { border-color: #047857; background: #E3F3EC; color: #065F46; }
.kt-pilih-status input:focus-visible + span { outline: 3px solid #F6C445; }
/* Form anggota di popup (popup selalu berlatar putih) */
.kt-peringatan { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: #FDF3D6; color: #7A3B00; font-size: 0.85rem; line-height: 1.5; text-align: left; }
.kt-tambahan { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #CBD5CF; }
.kt-tambahan summary { cursor: pointer; font-weight: 700; color: #065F46; font-size: 0.92rem; padding: 4px 0; }
.kt-tambahan summary small { font-weight: 500; color: #55635C; }
.kt-alamatKTP-wadah { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kt-alamatKTP-wadah[hidden] { display: none; }
.kt-form { gap: 12px; }
.kt-anggota { margin: 0; padding: 10px 14px 14px; border: 1px solid #CBD5CF; border-radius: 14px; min-width: 0; }
.kt-anggota legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 800; color: #065F46; }
.kt-hapus-anggota { padding: 2px 10px; border: 1px solid #F3B4AE; border-radius: 8px; background: #FDECEA; color: #912018; font: inherit; font-size: 0.78rem; cursor: pointer; }
.kt-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 600px) { .kt-grid { grid-template-columns: 1fr 1fr; } .kt-lebar { grid-column: 1 / -1; } }
.kt-isian label { display: flex; flex-direction: column; gap: 4px; }
.kt-isian input[readonly] { background: #F1F5F3; color: #55635C; }
.kt-sama { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.85rem; color: #374151; }
.kt-rtrw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kt-info-kk { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FDF3D6; color: #16241D; font-size: 0.9rem; line-height: 1.6; }
.kt-form > .pw-btn-kecil { align-self: flex-start; }

/* Tab Penagihan: tabel warga × 12 bulan periode (Okt–Sep) */
.iu-matriks-kartu { padding: 16px 12px; }
.iu-matriks-kartu h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 4px 10px; }
.iu-periode { width: auto; margin: 0 4px 10px; }
.iu-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 4px 8px; font-size: 0.82rem; color: var(--pw-muted); }
.iu-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.iu-petunjuk-geser { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--pw-accent-soft); color: var(--pw-text); font-size: 0.82rem; font-weight: 600; }
.iu-petunjuk-geser i { color: var(--pw-warn); }

/* Pembungkus luar tabel: tempat bayangan tepi yang tidak ikut tergulir */
.iu-matriks-bingkai { position: relative; }
.iu-matriks-bingkai::before, .iu-matriks-bingkai::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 16px; pointer-events: none; z-index: 6; opacity: 0; transition: opacity 0.15s ease; }
.iu-matriks-bingkai::before { left: 1px; border-radius: 12px 0 0 12px; background: linear-gradient(to right, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0)); }
.iu-matriks-bingkai::after { right: 1px; border-radius: 0 12px 12px 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)); }
.iu-matriks-bingkai.iu-bisa-kiri::before { opacity: 1; }
.iu-matriks-bingkai.iu-bisa-kanan::after { opacity: 1; }

/* Kotak geser dua arah; tinggi dibatasi supaya header bisa menempel */
.iu-matriks-geser { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-height: 62vh; border: 1px solid var(--pw-border); border-radius: 12px; scrollbar-width: thin; }
.iu-matriks { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.iu-matriks th, .iu-matriks td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--pw-line); white-space: nowrap; }
.iu-matriks thead th { position: sticky; top: 0; z-index: 3; font-size: 0.72rem; font-weight: 800; color: var(--pw-muted); text-transform: uppercase; letter-spacing: 0.3px; background: var(--pw-surface); }
.iu-matriks .iu-baris-tahun th { height: 24px; border-bottom: 0; padding-bottom: 0; text-transform: none; }
/* Baris bulan menempel tepat di bawah baris tahun */
.iu-matriks thead tr:not(.iu-baris-tahun) > th { top: 24px; }
.iu-matriks .iu-baris-tahun th[colspan] { border-bottom: 2px solid var(--pw-line); }
.iu-matriks .iu-kol-no, .iu-matriks .iu-kol-nama { position: sticky; z-index: 2; background: var(--pw-surface); }
/* Pojok kiri-atas harus di atas header dan di atas kolom kiri */
.iu-matriks thead .iu-kol-no, .iu-matriks thead .iu-kol-nama { z-index: 4; }
.iu-matriks .iu-kol-no { left: 0; min-width: 28px; max-width: 28px; color: var(--pw-muted); font-size: 0.78rem; }
.iu-matriks .iu-kol-nama { left: 28px; min-width: 124px; max-width: 124px; text-align: left; box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.25); }
.iu-matriks th.iu-kol-nama { overflow: hidden; text-overflow: ellipsis; }
.iu-kol-nama button { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--pw-in); font: inherit; font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.iu-kol-nama button:hover { text-decoration-style: solid; }
.iu-petunjuk-klik i { margin-right: 6px; }
.iu-petunjuk-klik { margin: 0 4px 8px; padding: 8px 12px; border-radius: 10px; background: var(--pw-primary-soft); color: var(--pw-in); font-size: 0.85rem; }

/* Popup "Catat bayar": cari nama warga */
.iu-pilih-daftar { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.iu-pilih-info { color: var(--pw-muted); font-size: 0.9rem; padding: 8px 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.iu-pilih-warga { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--pw-border); border-radius: 12px; background: var(--pw-surface); color: var(--pw-text); font: inherit; text-align: left; cursor: pointer; }
.iu-pilih-warga:hover { background: var(--pw-primary-soft); border-color: var(--pw-in); }
.iu-pilih-warga > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.iu-pilih-warga small { color: var(--pw-muted); font-size: 0.8rem; }
.iu-pilih-st { color: var(--iu-warna); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.iu-matriks .iu-kol-ini { background: var(--pw-primary-soft); }
.iu-grup-rt th { position: sticky; left: 0; z-index: 1; text-align: left; font-size: 0.82rem; font-weight: 800; color: var(--pw-text); background: var(--pw-surface-2); padding: 8px 6px; }
.iu-grup-rt td { background: var(--pw-surface-2); }
.iu-matriks tfoot th, .iu-matriks tfoot td { border-bottom: 0; padding-top: 10px; font-size: 0.78rem; font-weight: 700; color: var(--pw-muted); }
.iu-sel { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 4px; border: 0; border-radius: 8px; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.iu-sel-rp { display: none; }
.iu-sel-lunas { background: var(--pw-in); color: var(--pw-surface); }
.iu-sel-kurang { background: var(--pw-accent-soft); color: var(--pw-warn); box-shadow: inset 0 0 0 1.5px var(--pw-warn); }
.iu-sel-belum { background: var(--pw-out-soft); color: var(--pw-out); }
.iu-sel-nanti { background: transparent; color: var(--pw-muted); box-shadow: inset 0 0 0 1px var(--pw-line); }
.iu-sel-nanti i { font-size: 0.6rem; opacity: 0.7; }
.iu-sel:hover { outline: 2px solid var(--pw-in); outline-offset: 1px; }
.iu-legenda .iu-sel { min-width: 22px; height: 20px; cursor: default; }
.iu-legenda .iu-sel:hover { outline: 0; }
/* HP & tablet: area sentuh tombol status minimal 40x40 px */
@media (max-width: 899px) {
  .iu-matriks td { padding: 4px; }
  .iu-matriks .iu-sel { min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; }
  .iu-matriks .iu-kol-nama button { min-height: 40px; padding: 10px 4px; }
}

/* Layar lebar: semua bulan muat, kotak berisi nominal (10rb) */
@media (min-width: 900px) {
  .iu-petunjuk-geser { display: none; }
  .iu-matriks { width: 100%; }
  .iu-matriks .iu-kol-nama { min-width: 180px; max-width: 220px; }
  .iu-sel { min-width: 46px; }
  .iu-sel-ada i { display: none; }
  .iu-sel-ada .iu-sel-rp { display: inline; }
}

/* Daftar warga di tab Warga */
.iu-daftar { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.iu-nama { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.iu-nama small { color: var(--pw-muted); font-weight: 600; margin-left: 4px; }
.iu-baris-warga {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 12px;
  border: 1px solid var(--pw-border);
  border-radius: 14px;
  background: var(--pw-surface);
}

/* Tombol edit/hapus kecil di tabel & daftar */
.iu-aksi { display: inline-flex; gap: 4px; margin-left: auto; }
.iu-aksi button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--pw-surface-2);
  color: var(--pw-text);
  cursor: pointer;
}
.iu-aksi button:hover { background: var(--pw-primary-soft); }
.iu-total td { font-weight: 800; border-top: 2px solid var(--pw-border); }

.iu-jenis { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pw-surface-2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.iu-jenis-konsumsi { background: var(--pw-accent-soft); color: var(--pw-text); }
.iu-jenis-honor { background: var(--pw-primary-soft); color: var(--pw-in); }
.iu-honor .pw-btn-kecil { margin-top: 12px; }
.iu-honor .pw-btn-kecil:disabled { opacity: 0.7; cursor: not-allowed; }
.iu-honor-pengingat { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--pw-accent-soft); color: var(--pw-text); font-size: 0.85rem; }
.iu-honor-pengingat i { color: var(--pw-warn); margin-right: 6px; }
.iu-honor-status { font-size: 1rem !important; }
.iu-honor-status.belum { color: var(--pw-warn); }
.iu-honor-status.sudah { color: var(--pw-in); }
.iu-jenis i { margin-right: 4px; }

/* Lencana kategori pengeluaran "untuk warga" */
.iu-kat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--pw-primary-soft); color: var(--pw-primary); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.iu-dari-kegiatan { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.78rem; color: var(--pw-muted); }

/* Form pengeluaran: "untuk apa" (kartu berpenjelasan) & kategori (popup selalu putih) */
.iu-wajib { color: #B42318; }
.iu-tujuan, .iu-kategori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.iu-kategori { gap: 8px; }
.iu-tujuan label, .iu-kategori label { margin: 0; cursor: pointer; font-weight: 600; }
.iu-tujuan input, .iu-kategori input { position: absolute; opacity: 0; pointer-events: none; }
.iu-tujuan-kartu { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; border: 1.5px solid #D5DDD6; border-radius: 14px; background: #F4F6F2; color: #16241D; }
.iu-tujuan-kartu strong { display: flex; align-items: flex-start; gap: 8px; font-size: 0.95rem; line-height: 1.3; }
.iu-tujuan-kartu strong i { flex: none; width: 18px; margin-top: 2px; text-align: center; color: #047857; }
.iu-tujuan-kartu small { color: #55635C; font-size: 0.82rem; font-weight: 500; line-height: 1.4; }
.iu-tujuan-kartu em { font-style: normal; font-weight: 700; color: #9A4A00; }
.iu-tujuan input:checked + .iu-tujuan-kartu { border-color: #047857; background: #E3F3EC; box-shadow: 0 0 0 3px #E3F3EC; }
.iu-tujuan.salah .iu-tujuan-kartu { border-color: #B42318; background: #FFF6F5; }
.iu-kategori span { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px; border: 1.5px solid #D5DDD6; border-radius: 12px; background: #F4F6F2; color: #16241D; font-size: 0.9rem; line-height: 1.25; }
.iu-kategori span i { flex: none; width: 18px; text-align: center; color: #047857; }
.iu-kategori input:checked + span { border-color: #047857; background: #E3F3EC; color: #065F46; box-shadow: 0 0 0 3px #E3F3EC; }
.iu-tujuan input:focus-visible + .iu-tujuan-kartu, .iu-kategori input:focus-visible + span { outline: 3px solid #F6C445; outline-offset: 1px; }

/* Pemasukan lain (donatur, sisa kegiatan, bantuan) */
.iu-btn-masuk { border-color: var(--pw-in); color: var(--pw-in); }
.iu-btn-masuk:hover { background: var(--pw-in-soft); }
.iu-ikon-masuk { color: var(--pw-in); }
.iu-sumber { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--pw-in-soft); color: var(--pw-in); font-size: 0.76rem; font-weight: 700; }
.iu-alur .iu-alur-masuk strong { color: var(--pw-in); }
.iu-rw-baris .iu-aksi { flex: none; }

/* Riwayat kas iuran untuk warga */
.iu-rw-catatan { margin: 0 0 12px; }
.iu-rw-bulan + .iu-rw-bulan { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pw-border); }
.iu-rw-kepala { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.iu-rw-kepala h3 { font-size: 1rem; font-weight: 800; }
.iu-rw-kepala span { color: var(--pw-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.iu-rw-daftar { list-style: none; display: flex; flex-direction: column; }
.iu-rw-baris { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.iu-rw-baris + .iu-rw-baris { border-top: 1px dashed var(--pw-border); }
.iu-rw-ikon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.iu-rw-baris.masuk .iu-rw-ikon { background: var(--pw-in-soft); color: var(--pw-in); }
.iu-rw-baris.keluar .iu-rw-ikon { background: var(--pw-out-soft); color: var(--pw-out); }
.iu-rw-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iu-rw-teks strong { font-weight: 700; overflow-wrap: anywhere; }
.iu-rw-teks small { color: var(--pw-muted); font-size: 0.82rem; }
.iu-rw-jumlah { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iu-rw-baris.masuk .iu-rw-jumlah { color: var(--pw-in); }
.iu-rw-baris.keluar .iu-rw-jumlah { color: var(--pw-out); }

/* Grafik iuran */
.iu-grafik-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.iu-grafik-grid > .card, .iu-grafik > .card { margin: 0; min-width: 0; }
.iu-hbar-ikon { margin-right: 6px; color: var(--pw-primary); }
@media (min-width: 900px) {
  .iu-grafik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iu-grafik-grid > .card:only-child { grid-column: 1 / -1; }
}

/* Tabel pengeluaran → kartu di HP */
@media (max-width: 768px) {
  .iu-tabel-kartu { max-height: none; border: 0; }
  .iu-tabel-kartu thead { display: none; }
  .iu-tabel-kartu table, .iu-tabel-kartu tbody { display: block; }
  .iu-tabel-kartu tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--pw-border); }
  .iu-tabel-kartu td { display: block; padding: 0; border: 0; text-align: left; }
  .iu-tabel-kartu td[data-label="Tanggal"] { grid-column: 1; color: var(--pw-muted); font-size: 0.85rem; }
  .iu-tabel-kartu td[data-label="Nominal"] { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 800; text-align: right; }
  .iu-tabel-kartu td[data-label="Jenis"], .iu-tabel-kartu td[data-label="Keterangan"], .iu-tabel-kartu td[data-label="Petugas"] { grid-column: 1; }
  .iu-tabel-kartu td[data-label="Petugas"] { font-size: 0.8rem; }
  .iu-tabel-kartu .iu-sel-aksi { grid-column: 2; text-align: right; }
  .iu-tabel-kartu tr.iu-total { grid-template-columns: 1fr auto; border-bottom: 0; }
  .iu-tabel-kartu tr.iu-total td:empty { display: none; }
}

/* Kartu jatah konsumsi & alur buku iuran */
.iu-angka-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.iu-angka-grid > div, .iu-alur > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pw-surface-2);
}
.iu-angka-grid span, .iu-alur span { font-size: 0.85rem; color: var(--pw-muted); }
.iu-angka-grid strong, .iu-alur strong { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.iu-jatah-lebih { border-color: var(--pw-out); }
.iu-jatah-lebih .iu-angka-grid > div:last-child strong { color: var(--pw-out); }
.iu-alur { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.iu-alur > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
.iu-alur > div strong { white-space: nowrap; }
.iu-alur .iu-alur-sub { background: var(--pw-primary-soft); }
.iu-alur .iu-alur-sub span { color: var(--pw-text); font-weight: 700; }
.pw-highlight strong { white-space: nowrap; }

/* Pilihan bulan di form bayar (popup putih) */
.iu-bulan-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.iu-bulan-pilih label { margin: 0; cursor: pointer; }
.iu-bulan-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.iu-bulan-pilih span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border: 2px solid #CBD5CF;
  border-radius: 12px;
  color: #16241D;
  font-weight: 700;
  font-size: 0.9rem;
}
.iu-bulan-pilih small { font-size: 0.7rem; font-weight: 600; color: #55635C; }
.iu-bulan-pilih .iu-st-lunas small { color: #065F46; }
.iu-bulan-pilih .iu-st-kurang small { color: #9A4A00; }
.iu-bulan-pilih input:checked + span { border-color: #047857; background: #E3F3EC; }
.iu-bulan-pilih input:focus-visible + span { outline: 3px solid #F6C445; outline-offset: 2px; }
.iu-ok { color: #065F46; font-weight: 700; }

@media (max-width: 640px) {
  .iu-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .iu-tabs .pw-chip { flex-shrink: 0; }
}

/* --- Kartu iuran (Beranda & halaman Iuran publik) --- */
.iu-kartu { display: flex; flex-direction: column; gap: 14px; }

/* Pengumuman selama uang iuran belum dibuka ke warga */
.iu-info-tertutup {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pw-accent-soft);
  color: var(--pw-text);
  border: 1px solid var(--pw-accent);
}
.iu-info-tertutup > i { flex: none; margin-top: 3px; color: var(--pw-warn); font-size: 1.1rem; }
.iu-info-tertutup strong { display: block; margin-bottom: 2px; }
.iu-info-tertutup p { margin: 0; color: var(--pw-muted); font-size: 0.92rem; line-height: 1.5; }
.iu-info-tertutup p + p { margin-top: 6px; color: var(--pw-text); font-weight: 600; }
article.iu-info-tertutup { padding: 18px 20px; }
.iu-kartu .pw-kas-head .pw-link { min-height: 32px; font-size: 0.9rem; }
.iu-kartu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.iu-kartu .iu-alur { margin-bottom: 0; }
.iu-kartu-kanan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.iu-progres { display: flex; flex-direction: column; gap: 8px; }
.iu-progres-teks { font-size: 0.95rem; }
.iu-progres-bar { height: 12px; border-radius: 999px; background: var(--pw-surface-2); overflow: hidden; }
.iu-progres-bar span { display: block; height: 100%; border-radius: 999px; background: var(--pw-chart-in); }
.iu-progres .pw-chips { margin: 0; }
.iu-dipakai { display: flex; flex-direction: column; gap: 6px; }
.iu-dipakai .pw-kuitansi-label { margin-top: 0; }
.iu-dipakai .pw-row small { margin-left: 4px; }

@media (min-width: 769px) {
  .iu-kartu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Uang iuran disembunyikan dari warga → hanya progres, selebar penuh */
  .iu-kartu-grid.iu-kartu-tunggal { grid-template-columns: minmax(0, 1fr); }
}

/* Tombol "Cek status iuran Anda" di kartu Beranda */
.iu-cek-tombol { align-self: flex-start; width: auto; padding: 0 22px; margin-top: 4px; gap: 8px; }

/* Kartu "Petugas iuran? Masuk" di halaman Iuran Warga (tampilan warga) */
.iu-petugas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  border: 1px dashed var(--pw-border);
  background: var(--pw-surface-2);
}
.iu-petugas-ikon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pw-primary-soft);
  color: var(--pw-primary);
  font-size: 1.2rem;
}
.iu-petugas-teks { flex: 1 1 200px; }
.iu-petugas-teks strong { display: block; }
.iu-petugas-teks span { color: var(--pw-muted); font-size: 0.92rem; }

@media (max-width: 768px) {
  .iu-cek-tombol, .iu-petugas .pw-btn { width: 100%; }
}

/* --- Cek status iuran (warga) --- */
.iu-cek-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
.iu-cek-form label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; }
.iu-cek-form .pw-select { width: 100%; }
.iu-cek-form .pw-btn { width: 100%; }
@media (min-width: 769px) {
  .iu-cek-form { grid-template-columns: 160px minmax(0, 1fr) auto; }
}
#iuCekHasil:not(:empty) { margin-top: 16px; }
.iu-cek-kosong { padding: 12px; border-radius: 12px; background: var(--pw-surface-2); }
.iu-cek-hasil { display: flex; flex-direction: column; gap: 10px; }
.iu-cek-hasil + .iu-cek-hasil { margin-top: 16px; }
.iu-cek-kepala { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.iu-cek-kepala .pw-chips { margin: 0; }
.iu-cek-sampai { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--pw-in-soft); color: var(--pw-in); font-weight: 600; }
.iu-bulan-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.iu-bulan-status span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--pw-surface-2);
  font-weight: 700;
}
.iu-bulan-status span i { color: var(--iu-warna); }
.iu-bulan-status small { color: var(--iu-warna); font-size: 0.8rem; font-weight: 700; }

/* ===== CUSTOM DROPDOWN (Peran) ===== */
.pw-cd { position: relative; width: 100%; }
.pw-cd-btn {
  width: 100%; min-height: 46px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #CBD5CF; border-radius: 12px;
  background: #FFFFFF; color: #16241D;
  font-family: inherit; font-size: 1rem; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pw-cd-btn:hover { border-color: #047857; }
.pw-cd-btn:focus { outline: 3px solid #F6C445; outline-offset: 1px; }
.pw-cd-btn:disabled { opacity: .6; cursor: not-allowed; }
.pw-cd-chev { width: 16px; height: 16px; color: #64748b; transition: transform .2s; flex-shrink: 0; }
.pw-cd.open .pw-cd-chev { transform: rotate(180deg); }
.pw-cd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #FFFFFF; border: 1px solid #CBD5CF; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 6px; z-index: 10001;
  max-height: 240px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.pw-cd.open .pw-cd-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pw-cd-opt {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .95rem; color: #16241D;
  outline: none;
}
.pw-cd-opt:hover, .pw-cd-opt:focus { background: #E6F4EF; }
.pw-cd-opt.selected { background: #E6F4EF; color: #047857; font-weight: 700; }
.pw-cd-check { color: #047857; font-size: .9rem; }

/* Panel dropdown di atas tombol Simpan/Batal (tanpa geser layout) */
.swal2-popup { overflow: visible !important; }
.swal2-html-container { overflow: visible !important; }
.pw-cd-panel { z-index: 99999 !important; }

/* Panel dropdown di atas tombol Simpan/Batal (z-index & stacking) */
.swal2-popup { overflow: visible !important; }
.swal2-html-container { overflow: visible !important; position: relative; z-index: 5; }
.swal2-actions { position: relative; z-index: 1; }
.pw-cd { position: relative; z-index: 10; }
.pw-cd-panel { z-index: 99999 !important; }

/* Pastikan dropdown yang terbuka berada di atas dropdown lain */
.pw-cd { z-index: 1; }
.pw-cd.open { z-index: 10; }

/* Chevron tombol akun berputar saat menu terbuka */
#btnAkun i.fa-chevron-down { transition: transform .2s; }
#btnAkun[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }