/* ============================================================
   RTIGA LAZULITE — Sistem Warga RT 03
   Palet: Lazulit biru tua + Krem hangat + Aksen hijau daun
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,500;1,400&display=swap');

:root {
  --lazulit:       #1a4a72;   /* biru lazulit – warna utama */
  --lazulit-mid:   #2563a8;
  --lazulit-light: #dbeafe;
  --krem:          #faf6ef;   /* krem hangat – latar */
  --krem-dark:     #f0e9dd;
  --daun:          #2d7a4f;   /* hijau daun – aksen positif */
  --daun-light:    #d1fae5;
  --kuning:        #d97706;   /* kuning – peringatan */
  --kuning-light:  #fef3c7;
  --merah:         #b91c1c;
  --merah-light:   #fee2e2;
  --abu:           #64748b;
  --abu-light:     #f1f5f9;
  --teks:          #1e293b;
  --teks-lunak:    #475569;
  --border:        #cbd5e1;
  --putih:         #ffffff;
  --sidebar-w:     260px;

  /* --- Skala radius (dulu ada 16 nilai acak 3px–30px tersebar di file ini,
     sekarang dirapikan jadi 5 tingkat + 1 alias supaya konsisten) --- */
  --radius-xs:     6px;    /* elemen sangat kecil: dot, aksen tipis */
  --radius-sm:     8px;    /* tombol, input, chip kecil */
  --radius-md:     12px;   /* kartu & kontainer standar */
  --radius-lg:     16px;   /* permukaan lebih besar: login box, popup */
  --radius-xl:     22px;   /* elemen hero/poster/besar */
  --radius-full:   999px;  /* pill/badge bulat penuh */
  --radius:        var(--radius-md); /* alias lama, tetap dipakai di banyak tempat */

  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(26,74,114,.06);
  --shadow-lg:     0 4px 24px rgba(26,74,114,.12);
  --font-ui:       'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display:  'Lora', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;
  width: 100%;
}

/* Sembunyikan scrollbar visual di seluruh halaman (tetap bisa discroll
   normal dengan jari/mouse, cuma garis scrollbar-nya yang disembunyikan) */
html {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge lama / IE */
}
html::-webkit-scrollbar {      /* Chrome, Safari, browser berbasis WebView */
  display: none;
  width: 0;
  height: 0;
}

body {
  font-family: var(--font-ui);
  background: var(--krem);
  color: var(--teks);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* ============================================================
   HALAMAN LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lazulit) 0%, #0f2f4d 100%);
  padding: 24px;
}

.login-box {
  background: var(--putih);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo .nama-situs {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--lazulit);
  font-weight: 500;
  line-height: 1.2;
}

.login-logo .sub {
  font-size: 13px;
  color: var(--abu);
  margin-top: 4px;
}

.login-logo .ikon-rt {
  width: 64px;
  height: 64px;
  background: var(--lazulit);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}

/* ============================================================
   LAYOUT UTAMA
   ============================================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
  max-width: 100vw;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1d5581 0%, var(--lazulit) 45%, #0f2f4d 100%);
  color: #c8d9ed;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .3s ease;
}

.sidebar-header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-brand-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  padding: 4px;
  overflow: hidden;
}
.sidebar-brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.sidebar-header .nama-situs {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--putih);
  font-weight: 500;
  line-height: 1.2;
}

.sidebar-header .rt-label {
  font-size: 11.5px;
  color: #93b4d4;
  margin-top: 2px;
}

.sidebar-user {
  padding: 14px 20px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-inisial {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #2d7a4f);
  color: var(--putih);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.15);
}

.sidebar-user-teks { min-width: 0; }

.sidebar-user .nama {
  font-size: 14px;
  color: var(--putih);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user .peran-badge {
  display: inline-block;
  font-size: 10.5px;
  background: rgba(96,165,250,.22);
  color: #bfe0ff;
  border: 1px solid rgba(96,165,250,.35);
  padding: 2px 9px;
  border-radius: var(--radius-xl);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: .02em;
}

.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #6a94ba;
  text-transform: uppercase;
  padding: 16px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #c3d8ef;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background .18s ease, color .18s ease, transform .15s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: var(--putih);
  transform: translateX(2px);
}

.nav-item.aktif {
  background: linear-gradient(90deg, rgba(96,165,250,.24), rgba(96,165,250,.06));
  color: var(--putih);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.25);
}

.nav-item.aktif::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: #60a5fa;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 8px rgba(96,165,250,.8);
}

.nav-item .ikon {
  font-size: 16.5px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  transition: background .18s ease;
}

.nav-item:hover .ikon { background: rgba(255,255,255,.12); }

.nav-item.aktif .ikon {
  background: rgba(96,165,250,.28);
}

.nav-item .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grup menu dengan submenu (mis. Bank Sampah utk pengurus) — dipakai baik
   di drawer mobile maupun sidebar desktop karena keduanya markup yang sama. */
.nav-group { display: flex; flex-direction: column; }

.nav-item-toggle {
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.nav-chevron {
  margin-left: auto;
  font-size: 11px;
  flex-shrink: 0;
  transition: transform .2s ease;
  color: #8fb2d6;
}

.nav-group.terbuka > .nav-item-toggle .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}

.nav-submenu-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-group.terbuka .nav-submenu { grid-template-rows: 1fr; }

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  margin-left: 18px;
  color: #a9c3e0;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border-left: 2px solid rgba(255,255,255,.08);
  transition: background .18s ease, color .18s ease;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.nav-subitem:hover { background: rgba(255,255,255,.07); color: var(--putih); }

.nav-subitem.aktif {
  background: rgba(96,165,250,.18);
  color: var(--putih);
  font-weight: 700;
  border-left-color: #60a5fa;
}

.nav-subitem .ikon {
  font-size: 16.5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-subitem .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-submenu-inner > .nav-subitem:first-child { margin-top: 4px; }
.nav-submenu-inner > .nav-subitem:last-child { margin-bottom: 2px; }

.sidebar-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #93b4d4;
  background: none;
  border: none;
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 9px 10px;
  width: 100%;
  border-radius: var(--radius-md);
  transition: color .15s, background .15s;
}

.btn-logout:hover { color: var(--putih); background: rgba(255,255,255,.06); }

/* Konten utama */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   TANPA SIDEBAR — berlaku untuk SEMUA peran (navigasi lewat menu
   app / grid ikon di halaman beranda masing-masing, bukan sidebar).
   ============================================================ */
.app-layout-tanpa-sidebar .main-content {
  margin-left: 0;
}

/* Logo + nama app di pojok kiri topbar, khusus Pengurus Bank Sampah —
   diklik untuk balik ke Menu Bank Sampah (bank-sampah/beranda.php) dari
   halaman manapun. Pola umum "klik logo = pulang". */
.topbar-brand-app {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 4px;
  border-radius: var(--radius-xl);
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.topbar-brand-app:hover { background: var(--abu-light); }
.topbar-brand-app:active .topbar-brand-app-badge { transform: scale(.92); }
.topbar-brand-app-statis:hover { background: none; }
.topbar-brand-app-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(26,74,114,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.topbar-brand-app-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.topbar-brand-app:hover .topbar-brand-app-badge {
  transform: scale(1.08);
  border-color: var(--biru, #1a4a72);
  box-shadow: 0 0 0 4px rgba(26,74,114,.14), 0 3px 10px rgba(26,74,114,.22);
}
.topbar-brand-app-statis .topbar-brand-app-badge,
.topbar-brand-app-statis:hover .topbar-brand-app-badge {
  transform: none;
  border-color: var(--border);
  box-shadow: 0 2px 6px rgba(26,74,114,.12);
}

/* Bottom-nav (menu bawah ala app, dirender oleh includes/layout_end.php)
   disembunyikan total khusus Pengurus Bank Sampah -- navigasi mereka sudah
   cukup lewat menu app (grid ikon) di bank-sampah/beranda.php + tombol
   "Kembali" di topbar, jadi bottom-nav jadi berlebihan. */
body.tanpa-sidebar .bottom-nav {
  display: none !important;
}
@media (max-width: 768px) {
  /* .page-area normalnya dikasih padding-bottom 84px supaya konten tidak
     ketutup bottom-nav (lihat aturan .page-area di bagian "TAMPILAN MOBILE
     ALA APLIKASI ANDROID" di bawah). Karena bottom-nav-nya disembunyikan
     untuk semua peran sekarang, padding itu dikembalikan ke normal supaya
     tidak ada ruang kosong menganggur di bawah halaman. */
  body.tanpa-sidebar .page-area {
    padding-bottom: 28px;
  }
}

/* ============================================================
   MENU APP — grid ikon ala home screen HP, khusus halaman
   bank-sampah/beranda.php (landing Pengurus Bank Sampah).
   ============================================================ */
.app-menu-sapaan {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.app-menu-sapaan-avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lazulit-mid) 0%, var(--lazulit) 60%, #0f2f4d 100%);
  color: var(--putih);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(26,74,114,.28), 0 1px 3px rgba(0,0,0,.08);
}
.app-menu-sapaan-text { min-width: 0; }
.app-menu-sapaan .app-menu-halo {
  font-size: 13px;
  color: var(--abu);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.app-menu-sapaan .app-menu-nama {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--lazulit);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-menu-sapaan .app-menu-role {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--lazulit-mid);
  background: var(--lazulit-light);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
@media (min-width: 560px) {
  .app-menu-sapaan-avatar { width: 60px; height: 60px; font-size: 21px; }
  .app-menu-sapaan .app-menu-nama { font-size: 25px; }
}

.app-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 12px;
  overflow: visible;
}
@media (min-width: 560px) {
  .app-menu-grid { grid-template-columns: repeat(4, 1fr); gap: 26px 16px; }
}
@media (min-width: 860px) {
  .app-menu-grid { grid-template-columns: repeat(5, 1fr); gap: 30px 18px; }
}

.app-menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 8px;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.app-menu-ikon {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 74px;
  height: 74px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--putih);
  box-shadow: 0 3px 10px rgba(26,74,114,.18), 0 1px 3px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Badge angka merah di pojok ikon menu App (Beranda) -- "menunggu
   ditindak"/belum lunas/belum selesai, sama gayanya dengan .tab-badge
   yang sudah dipakai di tab Iuran RT (pages/kas-rt.php). z-index &
   isolation di .app-menu-ikon (di atas) sengaja dipasang supaya badge
   ini SELALU digambar di lapisan paling atas ikon -- sebelumnya di
   sebagian browser/skala layar badge ini bisa kelihatan seperti
   "kepotong" (cuma nongol sedikit di pojok, seolah ketiban ikon)
   karena urutan lapisan gambarnya tidak dipaksa eksplisit. */
.app-menu-badge {
  position: absolute;
  z-index: 5;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  border-radius: var(--radius-full);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--putih);
}
@media (min-width: 560px) {
  .app-menu-badge { min-width: 24px; height: 24px; font-size: 12.5px; line-height: 24px; top: -7px; right: -7px; }
}
@media (min-width: 560px) {
  .app-menu-ikon { width: 86px; height: 86px; border-radius: var(--radius-xl); font-size: 38px; }
}
@media (min-width: 860px) {
  .app-menu-ikon { width: 94px; height: 94px; border-radius: var(--radius-xl); font-size: 42px; }
}

.app-menu-tile:active .app-menu-ikon { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .app-menu-tile:hover .app-menu-ikon {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(26,74,114,.24), 0 2px 5px rgba(0,0,0,.1);
  }
}

.app-menu-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--teks);
  line-height: 1.25;
}
@media (min-width: 560px) {
  .app-menu-label { font-size: 14px; }
}

/* Warna tiap ikon dibuat berbeda-beda (gradasi), meniru warna ikon
   app di home screen HP supaya gampang dikenali sekilas. */
.app-menu-ikon-1 { background: linear-gradient(135deg, #60a5fa, #2563a8); }
.app-menu-ikon-2 { background: linear-gradient(135deg, #34d399, #0d9488); }
.app-menu-ikon-3 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.app-menu-ikon-4 { background: linear-gradient(135deg, #f87171, #b91c1c); }
.app-menu-ikon-5 { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.app-menu-ikon-6 { background: linear-gradient(135deg, #f472b6, #be185d); }
.app-menu-ikon-7 { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.app-menu-ikon-8 { background: linear-gradient(135deg, #a3e635, #4d7c0f); }
.app-menu-ikon-9 { background: linear-gradient(135deg, #fb923c, #c2410c); }
.app-menu-ikon-10 { background: linear-gradient(135deg, #818cf8, #4338ca); }

.app-menu-saldo-card {
  background: linear-gradient(135deg, var(--lazulit) 0%, #0f2f4d 100%);
  color: var(--putih);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-lg);
}
.app-menu-saldo-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #bfdcfb;
  text-transform: uppercase;
}
.app-menu-saldo-nilai {
  font-family: var(--font-display);
  font-size: 28px;
  margin-top: 4px;
}
.app-menu-saldo-sub {
  font-size: 12px;
  color: #93b4d4;
  margin-top: 4px;
}

/* Link nama di dalam tabel (mis. "Saldo per Warga") -- dibuat lebih
   menonjol daripada teks biasa supaya jelas kelihatan bisa diklik:
   warna biru lebih terang + underline putus-putus yang jadi solid &
   panah kecil muncul saat hover. */
.link-nama-tabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(37,99,168,.45);
  text-underline-offset: 3px;
  color: var(--lazulit-mid);
  font-weight: 700;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.link-nama-tabel::after {
  content: '→';
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease;
  font-weight: 700;
}
.link-nama-tabel:hover,
.link-nama-tabel:focus-visible {
  color: var(--lazulit);
  text-decoration-style: solid;
  text-decoration-color: var(--lazulit);
}
.link-nama-tabel:hover::after,
.link-nama-tabel:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Topbar */
.topbar {
  background: var(--putih);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-judul {
  font-size: 18px;
  font-weight: 700;
  color: var(--lazulit);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--abu);
}

/* Area halaman */
.page-area {
  padding: 28px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.page-header {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--krem-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.page-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  font-size: 21px;
  line-height: 1;
  background: linear-gradient(135deg, var(--lazulit) 0%, var(--lazulit-mid) 100%);
  box-shadow: 0 4px 14px rgba(26,74,114,.22);
}

.page-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .1px;
  background: linear-gradient(90deg, var(--lazulit) 0%, var(--lazulit-mid) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--lazulit); /* fallback jika background-clip tidak didukung */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page-title { color: transparent; }
}

.page-sub {
  font-size: 14px;
  color: var(--teks-lunak);
  margin-top: 5px;
  max-width: 640px;
}

.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   KOMPONEN KARTU STATISTIK (BERANDA)
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--putih);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--lazulit);
}

.stat-card.hijau   { border-left-color: var(--daun); }
.stat-card.kuning  { border-left-color: var(--kuning); }
.stat-card.merah   { border-left-color: var(--merah); }

.stat-label {
  font-size: 12px;
  color: var(--abu);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat-nilai {
  font-size: 28px;
  font-weight: 700;
  color: var(--teks);
  margin-top: 6px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stat-sub {
  font-size: 12px;
  color: var(--teks-lunak);
  margin-top: 4px;
}

/* ============================================================
   KARTU KONTEN
   ============================================================ */
.card {
  background: var(--putih);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 100%;
  min-width: 0; /* penting: biar .card bisa menyusut di dalam flex/grid (mis. grid Kehadiran
                   Rapat & Kerja Bakti), supaya overflow-x:auto pada .table-wrap di
                   dalamnya benar-benar aktif alih-alih tabel terpotong overflow-x:hidden
                   di html/body */
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--krem-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--teks);
  min-width: 0;
  overflow-wrap: break-word;
}

.card-body { padding: 20px; min-width: 0; max-width: 100%; }

/* ============================================================
   AKSI BAR — kotak pembungkus tombol aksi (mis. di atas tabel
   Buku Kas / Iuran RT). Lebar mengikuti jumlah/lebar tombol di
   dalamnya (fit-content), bukan langsung melebar penuh 1 baris
   walau isinya cuma 1 tombol. Tetap wrap ke baris berikutnya di
   layar sempit lewat flex-wrap + max-width:100%. Dipakai global
   lewat class "aksi-bar", tidak perlu inline style lagi per halaman.
   ============================================================ */
.aksi-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 20px;
  padding: 12px 14px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(26,74,114,.18);
  width: fit-content;
  max-width: 100%;
}
/* Fallback kalau browser tidak dukung backdrop-filter: pakai putih semi
   transparan biasa tanpa blur, supaya kontras tetap terjaga. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aksi-bar { background: rgba(255,255,255,.85); }
}


/* ============================================================
   TABEL
   ============================================================ */
.table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  /* Paksa browser membuat compositing layer sendiri utk area scroll ini,
     supaya scroll horizontal digambar oleh GPU (bukan di-repaint tiap
     frame lewat main thread) -- ini biasanya penyebab utama scroll tabel
     terasa berat/lag, terutama di HP & tabel dengan banyak baris/kolom. */
  transform: translateZ(0);
  will-change: transform;
  /* Isolasi layout & paint area tabel dari sisa halaman, supaya browser
     tidak perlu menghitung ulang elemen di luar .table-wrap tiap kali
     discroll. */
  contain: layout paint;
}

table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: 14px;
}

thead tr {
  background: var(--abu-light);
}

thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--abu);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--krem-dark);
}

tbody tr:last-child { border-bottom: none; }

/* Efek hover + transisinya cuma dipasang utk perangkat dgn mouse
   (pointer:fine). Di HP/tablet, event hover bisa ikut ter-trigger saat
   jari menyentuh/menggeser tabel, sehingga tiap baris minta repaint
   ekstra saat scroll -- ini salah satu penyebab scroll terasa lag. */
@media (hover: hover) and (pointer: fine) {
  tbody tr {
    transition: background .1s;
  }
  tbody tr:hover { background: var(--krem); }
}

tbody td {
  padding: 11px 14px;
  color: var(--teks);
  font-weight: 600;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* ============================================================
   TABEL RESPONSIF DI HP — MODE KARTU
   ============================================================
   Di layar <=768px, tabel tidak lagi discroll ke samping. Tiap baris
   <tr> dirender sebagai "kartu" tersendiri (block), dan tiap sel <td>
   jadi baris label:nilai (label diambil dari teks <th> lewat atribut
   data-label yang diisi otomatis oleh assets/js/app.js — lihat fungsi
   siapkanTabelResponsif()). Jadi TIDAK PERLU ubah HTML di tiap file
   halaman satu-satu, semua tabel yang sudah ada langsung ikut mode ini.

   Tabel yang tetap ingin scroll horizontal biasa di HP (misal karena
   memang harus dibandingkan berjajar) bisa dikecualikan dengan
   menambah class "table-tetap-scroll" pada elemen .table-wrap. */
@media screen and (max-width: 768px) {
  /* .card induk masih pakai "overflow:hidden" (buat rapikan sudut
     membulat di desktop). Di mode kartu, badge nomor urut (::before,
     nongol di pojok kiri-atas tiap kartu) dan badge centang aktif
     (::after, pojok kanan-atas) sengaja digambar sedikit "keluar" dari
     kartunya (posisi negatif). Kalau .card tetap overflow:hidden, sudut
     membulat .card (border-radius) ikut motong sebagian badge & garis
     aksen kiri tabel paling atas/bawah/samping — makanya kelihatan
     "kepotong". Di lebar layar mode-kartu ini, matikan pemotongannya
     supaya badge & garis tabel tidak terpotong. */
  .card:has(.table-wrap:not(.table-tetap-scroll)) {
    overflow: visible;
  }

  .table-wrap:not(.table-tetap-scroll) {
    overflow-x: visible;
    overflow-y: visible;
    /* Kasih sedikit jarak ekstra di atas & kiri supaya badge nomor
       (pojok kiri-atas tiap kartu) & badge centang (pojok kanan-atas
       kartu aktif) yang posisinya sengaja "nongol keluar" (top/left
       negatif) tidak mepet ke sudut membulat .card induk dan jadi
       kelihatan terpotong. */
    /* Badge nomor ada di pojok kiri-atas (butuh ruang atas & kiri).
       Kanan & bawah juga dikasih jarak supaya kartu (termasuk garis
       tepi/aksen warna di dalamnya) tidak nempel mentok ke tepi layar. */
    padding: 16px 14px 10px 14px;
  }

  /* Fallback kalau browser/WebView TIDAK mendukung :has() (dipakai di
     bawah utk melepas overflow:hidden dari .card). Tanpa fallback ini,
     di browser lama .card tetap overflow:hidden dan badge baris pertama
     PASTI kepotong walau padding di atas sudah ditambah. */
  @supports not selector(:has(a)) {
    .card { overflow: visible; }
  }

  .table-wrap:not(.table-tetap-scroll)::after {
    display: none;
  }

  .table-wrap:not(.table-tetap-scroll) table {
    min-width: 0;
    width: 100%;
  }

  /* Header tabel disembunyikan secara visual saja (bukan display:none)
     supaya screen reader masih bisa membacanya kalau perlu. */
  .table-wrap:not(.table-tetap-scroll) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }

  .table-wrap:not(.table-tetap-scroll) tbody,
  .table-wrap:not(.table-tetap-scroll) tbody tr,
  .table-wrap:not(.table-tetap-scroll) tbody td {
    display: block;
    width: 100%;
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr {
    position: relative;
    margin-bottom: 10px;
    padding: 6px 18px;
    background: var(--putih);
    border: 1px solid var(--krem-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    transition: border-color .15s ease, background .15s ease;
  }

  /* Selang-seling warna latar tipis biar tiap kartu kebaca sebagai
     baris terpisah, mirip garis zebra di tabel biasa. */
  .table-wrap:not(.table-tetap-scroll) tbody tr:nth-child(even) {
    background: var(--krem);
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr:last-child {
    margin-bottom: 0;
  }

  /* ------------------------------------------------------------
     NOMOR URUT OTOMATIS DI TIAP KARTU
     ------------------------------------------------------------
     Supaya tetap kelihatan "kartu ke berapa" walau tabel aslinya
     tidak punya kolom No, tiap baris dikasih badge bulat kecil di
     pojok kiri atas — dihitung otomatis pakai CSS counter, tidak
     bergantung data apa pun. Baris pesan kosong (mis. "Belum ada
     data", pakai <td colspan>) dilewati, tidak ikut dihitung/diberi
     badge. */
  .table-wrap:not(.table-tetap-scroll) tbody {
    counter-reset: baris-kartu;
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr:not(:has(> td[colspan])) {
    counter-increment: baris-kartu;
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr:not(:has(> td[colspan])):not([data-grup-label])::before {
    content: counter(baris-kartu);
    position: absolute;
    top: -11px;
    left: -11px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lazulit);
    color: var(--putih);
    font-size: 13px;
    font-weight: 800;
    border: 2px solid var(--putih);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(26,74,114,.35);
  }

  /* Sentuhan/klik cuma diberi tanda sederhana lewat warna, tanpa
     animasi melompat/membesar supaya terasa tenang & tidak "berisik"
     saat scroll di banyak kartu. */
  .table-wrap:not(.table-tetap-scroll) tbody tr.kartu-aktif {
    background: var(--lazulit-light);
    border-color: var(--lazulit-mid);
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr.kartu-aktif:not([data-grup-label])::before {
    background: var(--daun);
    color: var(--putih);
    border-color: var(--putih);
    box-shadow: 0 2px 6px rgba(45,122,79,.4);
  }

  .table-wrap:not(.table-tetap-scroll) tbody tr.kartu-aktif td:first-child::before,
  .table-wrap:not(.table-tetap-scroll) tbody tr.kartu-aktif td:first-child {
    color: var(--teks);
    font-weight: 700;
  }

  /* Baris "grup" hasil rowspan (mis. kolom Bulan di tabel Status Iuran)
     ditampilkan sebagai pil kecil di atas kartu, ditulis oleh
     app.js lewat atribut data-grup-label / data-grup-nilai. */
  .table-wrap:not(.table-tetap-scroll) tbody tr[data-grup-label]::before {
    content: attr(data-grup-label) ": " attr(data-grup-nilai);
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--abu);
    background: var(--abu-light);
    border-radius: var(--radius-xl);
  }

  .table-wrap:not(.table-tetap-scroll) tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--krem-dark);
  }

  .table-wrap:not(.table-tetap-scroll) tbody td:last-child {
    border-bottom: none;
  }

  /* Label kolom (mis. "NO. HP", "STATUS") ditulis via ::before dari
     atribut data-label. Kalau data-label kosong/tidak ada (mis. baris
     "Belum ada data" yang pakai colspan), label tidak ditampilkan. */
  .table-wrap:not(.table-tetap-scroll) tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 44%;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--abu);
    text-align: left;
  }

  .table-wrap:not(.table-tetap-scroll) tbody td:not([data-label])::before,
  .table-wrap:not(.table-tetap-scroll) tbody td[data-label=""]::before {
    content: none;
  }

  /* Nilai kolom "Nama" (mis. tabel presensi kehadiran) dibuat lebih
     besar & tebal dibanding sel lain, supaya nama warga langsung
     kebaca jelas di tampilan kartu HP. */
  .table-wrap:not(.table-tetap-scroll) tbody td[data-label="Nama"] {
    font-size: 17px;
    font-weight: 800;
    color: var(--teks);
  }

  /* Sel tanpa label (khususnya kolom aksi berisi tombol Edit/Hapus) tidak
     punya ::before yang jadi "pasangan" buat justify-content:space-between
     di aturan umum td di atas. Kalau dibiarkan, tombol-tombolnya malah
     didorong ke dua ujung terjauh sel (satu mepet kiri, satu mepet kanan)
     sehingga kelihatan melebar mengikuti lebar kartu. Di sini tombolnya
     dikumpulkan rapat ke kanan saja, seperti tata letak tombol aksi biasa. */
  .table-wrap:not(.table-tetap-scroll) tbody td:not([data-label]),
  .table-wrap:not(.table-tetap-scroll) tbody td[data-label=""] {
    justify-content: flex-end;
    gap: 6px;
  }

  /* Sel berisi 1 tombol aksi atau lebih (mis. kolom "Aksi" cuma berisi
     ↩️ Aktifkan, atau berisi Edit + Hapus) -- walau selnya PUNYA label
     ("Aksi"), justify-content:space-between dari aturan umum td di atas
     tetap mendorong label ke kiri mentok dan tombol ke kanan mentok,
     jadi kelihatan renggang/melebar mengikuti lebar kartu -- persis
     walau cuma ada SATU tombol. Di sini labelnya dipaksa jadi satu baris
     penuh sendiri (flex-basis 100%), lalu tombolnya dikumpulkan rapat
     jadi satu baris di bawahnya, rata kanan (bukan lagi terpisah jauh
     dari labelnya). */
  .table-wrap:not(.table-tetap-scroll) tbody td:has(.btn) {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }

  .table-wrap:not(.table-tetap-scroll) tbody td:has(.btn)::before {
    flex: 1 1 100%;
  }

  /* Sel berisi teks panjang (mis. kolom Keterangan/Catatan/Alasan) —
     ditandai class "td-teks-panjang" oleh app.js. Label ditaruh di atas,
     isinya di bawah selebar kartu, bukan dipepetkan ke kanan sampai
     sempit. */
  .table-wrap:not(.table-tetap-scroll) tbody td.td-teks-panjang {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    text-align: left;
  }

  .table-wrap:not(.table-tetap-scroll) tbody td.td-teks-panjang::before {
    max-width: 100%;
  }

  .table-wrap:not(.table-tetap-scroll) tbody td[colspan] {
    display: block;
    text-align: center;
    padding: 20px 0;
  }

  .table-wrap:not(.table-tetap-scroll) tbody td[colspan]::before {
    content: none;
  }

  /* Kalau ada tfoot (mis. baris "Total") biarkan tetap terlihat jelas
     sebagai kartu ringkasan terpisah, bukan ikut jadi baris label:nilai. */
  .table-wrap:not(.table-tetap-scroll) tfoot tr {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--krem);
    border-radius: var(--radius);
  }
  .table-wrap:not(.table-tetap-scroll) tfoot td {
    display: block;
    text-align: left;
    padding: 2px 0;
  }
  .table-wrap:not(.table-tetap-scroll) tfoot td::before {
    content: none;
  }
}

/* ============================================================
   BUKU KAS -- RINGKAS DI MODE MOBILE (kartu)
   ============================================================
   Khusus tabel Buku Kas (class="tabel-buku-kas" -- Kas RT, dan kas
   modul lain yang pakai style.css ini). Kolom
   Kategori sudah dihapus langsung dari markup (bukan cuma disembunyikan
   di CSS), jadi bagian ini sekarang cuma urus 2 hal lain supaya di HP
   tidak terlalu banyak baris info per transaksi:
   1) Kolom Pemasukan/Pengeluaran yang isinya "-" (kosong, tidak
      relevan buat baris itu) disembunyikan -- baris pengeluaran cuma
      tampilkan kolom Pengeluaran, baris pemasukan/topup/campuran cuma
      tampilkan kolom Pemasukan.
   2) Padding tiap baris kartu dirapatkan sedikit.
   Di layar desktop/tablet (>768px) semua kolom tetap tampil normal
   seperti tabel biasa -- ini HANYA berlaku di mode kartu mobile. */
@media screen and (max-width: 768px) {
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody tr.baris-pengeluaran td.kolom-pemasukan,
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody tr.baris-pemasukan td.kolom-pengeluaran,
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody tr.baris-topup td.kolom-pengeluaran,
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody tr.baris-campuran td.kolom-pengeluaran {
    display: none;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody td {
    padding: 3px 0;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-buku-kas tbody tr {
    padding: 2px 10px;
    margin-bottom: 6px;
  }
}

/* ============================================================
   MODE "RIWAYAT" DI HP -- kartu ala daftar Aktivitas mobile banking
   ============================================================
   Dipakai di Buku Kas RT, Iuran RT, Kas Bank Sampah, dan Kas
   Operasional (tabel di HALAMAN,
   BUKAN tabel di dalam modal -- tabel modal sengaja tidak disentuh).
   Struktur per baris: kolom tanggal (angka tanggal besar + bulan
   singkat/tahun kecil di bawahnya) di kiri, lalu judul + nominal/info
   tambahan bertumpuk di kanannya. Baris "Berhasil" sengaja TIDAK
   ditampilkan di mode ini (lihat .pil-berhasil di bawah).

   Cara pakai: tambahkan class "tabel-riwayat" di <table>, lalu di tiap
   <td> beri class kolom-tanggal (isi <span class="tgl-hari"> +
   <span class="tgl-bulantahun">), kolom-judul (judul/nama, tebal),
   kolom-nominal (opsional, angka pemasukan/pengeluaran -- boleh pakai
   kolom-pemasukan/kolom-pengeluaran yang sudah ada di Buku Kas),
   kolom-sub (opsional, info tambahan lebih kecil/abu-abu, boleh lebih
   dari satu <td>), dan kolom-aksi (tombol edit/hapus/cetak, disusun
   rapat di kanan-bawah kartu). Baris yang bisa diklik untuk buka
   detail (mis. baris transaksi) tambahkan juga class "baris-bisa-klik"
   di <tr> supaya muncul tanda panah ">" di kanan kartu. */
@media screen and (max-width: 768px) {
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 12px;
    padding: 12px 14px;
  }

  /* Matikan nomor urut bulat generik & label otomatis (data-label) --
     mode ini pakai tanggal sebagai penanda kartu, bukan nomor urut. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody tr::before {
    content: none;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td {
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
    border-bottom: none;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td::before {
    content: none;
  }

  /* Kolom tanggal: angka besar + bulan/tahun kecil di bawahnya,
     rata tengah, lebar tetap supaya semua kartu sejajar. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-tanggal {
    flex: 0 0 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1px;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-tanggal .tgl-hari {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--teks);
    line-height: 1.05;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-tanggal .tgl-bulantahun {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--abu);
    line-height: 1.2;
    white-space: normal;
    margin-top: 1px;
  }

  /* Judul (nama warga / keterangan transaksi, dst) --
     baris pertama di sisi kanan tanggal, tebal & agak besar. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-judul {
    flex: 1 1 calc(100% - 58px);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--teks);
    order: 1;
  }

  /* Nominal (pemasukan/pengeluaran/nominal iuran) -- baris kedua, sejajar
     di bawah judul (diberi indent selebar kolom tanggal). */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-nominal,
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-pemasukan,
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-pengeluaran {
    flex: 1 1 calc(100% - 58px);
    margin-left: 58px;
    font-size: 15px;
    font-weight: 800;
    order: 2;
  }

  /* Info tambahan (saldo, status, tanggal bayar, dsb) -- lebih kecil &
     abu-abu, boleh lebih dari satu baris, urut setelah nominal. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-sub,
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-saldo {
    flex: 1 1 calc(100% - 58px);
    margin-left: 58px;
    font-size: 11.5px;
    color: var(--abu);
    order: 3;
    margin-top: 2px;
  }

  /* Tombol aksi (edit/hapus/cetak) dikumpulkan rapi di kanan-bawah kartu. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.kolom-aksi,
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td.no-print {
    flex: 1 1 calc(100% - 58px);
    margin-left: 58px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    order: 4;
    margin-top: 4px;
  }

  /* Tulisan "Berhasil" sengaja tidak dimunculkan di mode kartu riwayat HP. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody td .pil-berhasil {
    display: none;
  }

  /* Tanda panah ">" untuk baris yang bisa diklik (buka detail). */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody tr.baris-bisa-klik {
    position: relative;
    padding-right: 30px;
  }
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody tr.baris-bisa-klik::after {
    content: "\203A";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--abu);
  }

  /* Baris pesan kosong ("Belum ada data") & baris ringkasan (Saldo Awal,
     colspan) tetap tampil rapi, tidak ikut aturan flex di atas. */
  .table-wrap:not(.table-tetap-scroll) .tabel-riwayat tbody tr:has(td[colspan]) {
    display: block;
  }
}

/* ============================================================
   BARIS PENGELUARAN vs PEMASUKAN DI BUKU KAS (GLOBAL)
   ============================================================
   Dipakai di SEMUA Buku Kas (Kas RT, Kas Bank Sampah,
   Dana Operasional Bank Sampah): baris transaksi berjenis "pengeluaran"
   diberi garis merah di kiri + latar merah muda pudar, supaya sekilas
   langsung kelihatan beda dari "pemasukan" tanpa perlu baca kolom
   nominalnya satu-satu.

   Sengaja ditaruh di sini (global, satu tempat) -- bukan diulang-ulang
   tiap halaman -- supaya kalau nanti mau ganti warna/gaya, cukup edit
   di sini saja dan otomatis konsisten di semua Buku Kas.

   Dipaksa !important karena harus menang lawan dua aturan lain yang
   selector-nya lebih spesifik: warna zebra selang-seling
   (tbody tr:nth-child(even)) di tabel desktop, dan latar putih polos
   mode kartu di layar <=768px (lihat blok mode kartu mobile di atas).
   Tanpa !important, warna merahnya akan "hilang" begitu masuk mode
   kartu mobile -- makanya tampilannya jadi beda antara desktop & HP.

   Cara pakai: tinggal tambahkan class="baris-pengeluaran" di <tr>
   baris yang jenisnya pengeluaran (lihat contoh di kas-rt.php,
   dana-operasional.php, kas-bank-sampah.php). Untuk
   versi tabel CETAK, gunakan class="baris-pengeluaran-cetak" -- itu
   diatur terpisah di masing-masing halaman karena tiap laporan cetak
   punya container/ID sendiri. */
tr.baris-pengeluaran,
tr.baris-pengeluaran td {
  background: #fef2f2 !important;
}
tr.baris-pengeluaran:hover,
tr.baris-pengeluaran:hover td {
  background: #fee2e2 !important;
}
tr.baris-pengeluaran td:first-child {
  border-left: 3px solid var(--merah) !important;
}
/* Teks baris pengeluaran dipertegas (merah tebal) supaya sekilas jelas
   beda dari pemasukan tanpa perlu baca kolom nominal satu-satu. Badge
   Kategori dikecualikan lewat :not(:has(.badge)) supaya warna badge-nya
   sendiri (biru/cyan/kuning) tidak ketiban warna merah baris. */
tr.baris-pengeluaran td:not(:has(.badge)) {
  color: #b91c1c;
  font-weight: 700;
}

/* Baris PEMASUKAN (bukan Setoran Saldo / Campuran, yang sudah punya
   warna sendiri) -- pasangan dari baris-pengeluaran di atas: latar
   hijau pudar + garis kiri hijau + teks tegas hijau tua, supaya jelas
   dan konsisten dgn tema. Sama seperti baris-pengeluaran, ini dipakai
   global di semua Buku Kas (Kas RT, Bank Sampah, Dana
   Operasional) -- cukup tambahkan class="baris-pemasukan" di <tr>. */
tr.baris-pemasukan,
tr.baris-pemasukan td {
  background: #ecfdf5 !important;
}
tr.baris-pemasukan:hover,
tr.baris-pemasukan:hover td {
  background: #d1fae5 !important;
}
tr.baris-pemasukan td:first-child {
  border-left: 3px solid var(--daun) !important;
}
tr.baris-pemasukan td:not(:has(.badge)) {
  color: #15803d;
  font-weight: 700;
}

/* Spasi kecil antara angka tanggal (.tgl-hari) & bulan-singkat/tahun
   (.tgl-bulantahun) supaya di layar DESKTOP tetap terbaca "14 Agu 2026"
   (bukan "14Agu 2026") -- di mode kartu HP (.tabel-riwayat) kedua span
   ini sudah ditumpuk vertikal lewat display:block, jadi margin ini
   otomatis tidak berpengaruh di sana. */
.tgl-hari {
  margin-right: 4px;
}

/* ============================================================
   WIDGET RINGKASAN SALDO BUKU KAS ("kas-ring")
   ============================================================
   Dipakai di SEMUA Buku Kas (Kas RT, dan modul kas lain
   yang pakai style.css ini): kartu ringkasan di atas tabel transaksi
   berisi Saldo Akhir (header gelap), grid 3 kolom (Saldo Awal Bulan /
   Pemasukan Bulan Ini / Pengeluaran Bulan Ini), dan baris rumus
   penjumlahan di bawahnya. Cara pakai: lihat markup card.kas-ring di
   Buku Kas Kas RT sebagai contoh strukturnya. */
.kas-ring{margin-bottom:16px;overflow:hidden;}
.kas-ring-head{background:linear-gradient(135deg,var(--biru,#1e3a5f) 0%,#16213e 100%);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.kas-ring-label{font-size:11px;opacity:.8;letter-spacing:.3px;}
.kas-ring-saldo{font-size:21px;font-weight:700;margin-top:2px;line-height:1.1;}
.kas-ring-sub{font-size:11px;opacity:.75;white-space:nowrap;}
.kas-ring-grid{display:grid;gap:1px;background:#e5e7eb;}
.kas-ring-item{background:#fff;padding:8px 6px;text-align:center;}
.kas-ring-item-label{font-size:10.5px;color:var(--abu);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kas-ring-item-value{font-size:15px;font-weight:700;margin-top:2px;line-height:1.1;}
.kas-ring-item-desc{font-size:9.5px;color:var(--abu);margin-top:1px;line-height:1.2;}
.kas-ring-grid-3{grid-template-columns:repeat(3,1fr);}
.kas-ring-formula{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:8px 10px;font-size:12px;color:#111827;background:#f9fafb;
  border-top:1px solid #e5e7eb;font-weight:600;
}
.kas-ring-formula strong{color:var(--biru,#1e3a5f);font-size:13.5px;}
.kas-ring-formula-op{color:var(--abu);font-weight:700;}
@media (max-width:480px){
  .kas-ring-grid{grid-template-columns:repeat(2,1fr)!important;}
  .kas-ring-grid-3{grid-template-columns:repeat(3,1fr)!important;}
  .kas-ring-grid-3 .kas-ring-item-label{font-size:9px;}
  .kas-ring-grid-3 .kas-ring-item-value{font-size:12px;}
  .kas-ring-item-desc{display:none;}
  .kas-ring-formula{font-size:10.5px;gap:4px;padding:7px 6px;}
  .kas-ring-formula strong{font-size:11.5px;}
}

/* ============================================================
   FORM
   ============================================================ */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--teks);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--teks);
  background: var(--putih);
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
  outline: none;
  border-color: var(--lazulit-mid);
  box-shadow: 0 0 0 3px rgba(37,99,168,.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ============================================================
   FILTER PERIODE (Bulan/Tahun + tombol Tampilkan) -- versi ringkas
   ============================================================
   Dipakai di SEMUA Buku Kas & Iuran (Kas RT, dst). Baris
   filter (dropdown Bulan, input Tahun, tombol Tampilkan) dibiarkan
   flex-wrap normal seperti asalnya -- TIDAK dipaksa jadi grid/2-baris.
   Cuma di layar HP sempit (<=480px), ukurannya diperkecil (padding &
   font lebih kecil, input Tahun lebih sempit) supaya ketiganya lebih
   gampang muat sejajar 1 baris tanpa perlu wrap sama sekali. Kalau
   memang benar-benar nggak muat (layar sangat sempit), tetap wrap
   apa adanya seperti sebelumnya -- bukan dipaksa selebar penuh. */
@media (max-width: 480px) {
  .filter-periode select.form-control,
  .filter-periode input.form-control,
  .filter-periode > button.btn {
    padding: 7px 9px;
    font-size: 12.5px;
  }
  .filter-periode input[type="number"].form-control {
    width: 64px !important;
  }
}

/* ============================================================
   TOMBOL
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}

.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }

.btn-primer   { background: var(--lazulit);     color: var(--putih); }
.btn-hijau    { background: var(--daun);         color: var(--putih); }
.btn-merah    { background: var(--merah);        color: var(--putih); }
.btn-abu      { background: var(--abu-light);    color: var(--teks);  border: 1px solid var(--border); }
.btn-kuning   { background: var(--kuning);       color: var(--putih); }

/* ===== Toggle Jenis Transaksi (Pemasukan / Pengeluaran) — dipakai di semua form catat/edit kas manual ===== */
.jenis-toggle { display:flex; gap:10px; }
.jenis-opt {
  flex:1; display:flex; align-items:center; gap:10px;
  border:2px solid var(--border); border-radius:var(--radius); padding:10px 12px;
  cursor:pointer; transition:.15s ease; background:var(--putih);
}
.jenis-opt input { position:absolute; opacity:0; width:0; height:0; }
.jenis-opt .jenis-icon {
  font-size:20px; font-weight:900; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--putih); flex-shrink:0;
  background:#9ca3af;
}
.jenis-opt .jenis-text { font-weight:700; font-size:13px; line-height:1.3; color:var(--teks); letter-spacing:.3px; }
.jenis-opt .jenis-text small { display:block; font-weight:400; font-size:11px; color:var(--teks-lunak); letter-spacing:0; margin-top:1px; }
.jenis-opt.jenis-masuk:has(input:checked) { border-color: var(--daun); background: var(--daun-light); box-shadow: inset 0 0 0 1px var(--daun); }
.jenis-opt.jenis-masuk:has(input:checked) .jenis-icon { background: var(--daun); }
.jenis-opt.jenis-masuk:has(input:checked) .jenis-text { color: var(--daun); }
.jenis-opt.jenis-keluar:has(input:checked) { border-color: var(--merah); background: var(--merah-light); box-shadow: inset 0 0 0 1px var(--merah); }
.jenis-opt.jenis-keluar:has(input:checked) .jenis-icon { background: var(--merah); }
.jenis-opt.jenis-keluar:has(input:checked) .jenis-text { color: var(--merah); }
.jenis-opt:hover { border-color:#9ca3af; }
.btn-outline  { background: transparent;         color: var(--lazulit); border: 1.5px solid var(--lazulit); }
.btn-sm       { padding: 5px 12px; font-size: 12px; }

/* ============================================================
   TOMBOL AKSI TABEL (Edit & Hapus) — versi outline tipis
   ------------------------------------------------------------
   Dipakai otomatis di semua tombol kecil ✏️/🗑️ di seluruh
   tabel aplikasi (class btn-abu/btn-merah + btn-sm), tanpa
   perlu ubah HTML di tiap file.
   ============================================================ */
.btn-sm.btn-abu,
.btn-sm.btn-merah {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  background: transparent;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn-sm.btn-abu svg,
.btn-sm.btn-merah svg {
  stroke-width: 2.4;
}

.btn-sm.btn-abu {
  border: 1.5px solid var(--lazulit-mid);
  color: var(--lazulit);
  background: var(--lazulit-light);
}
.btn-sm.btn-abu:hover {
  border-color: var(--lazulit);
  color: var(--putih);
  background: var(--lazulit-mid);
  opacity: 1;
}

.btn-sm.btn-merah {
  border: 1.5px solid var(--merah);
  color: var(--merah);
  background: var(--merah-light);
}
.btn-sm.btn-merah:hover {
  border-color: var(--merah);
  color: var(--putih);
  background: var(--merah);
  opacity: 1;
}

.btn-sm.btn-abu:active,
.btn-sm.btn-merah:active { transform: scale(.94); }

/* ============================================================
   NOTIFIKASI (lonceng topbar & lonceng halaman Akun Saya)
   ============================================================ */
.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-bell {
  position: relative;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.notif-bell:hover { background: var(--abu-light); }

.btn-reload-halaman,
.btn-back-halaman {
  background: none;
  border: none;
  color: var(--abu);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}

.btn-reload-halaman:hover,
.btn-back-halaman:hover { background: var(--abu-light); color: var(--lazulit); }

.btn-reload-halaman svg { transition: transform .4s ease; }
.btn-reload-halaman:hover svg { transform: rotate(180deg); }

.btn-back-halaman svg { transition: transform .2s ease; }
.btn-back-halaman:hover svg { transform: translateX(-2px); }

/* Tombol logout ikon di topbar, posisi di samping lonceng notifikasi */
.btn-logout-topbar {
  position: relative;
  border: none;
  background: #ef4444;
  color: var(--putih);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(239,68,68,.35);
}
.btn-logout-topbar svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.btn-logout-topbar:hover {
  background: #dc2626;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(220,38,38,.45);
}
.btn-logout-topbar:active { transform: scale(.92); }

/* Tombol shortcut Log Aktivitas di topbar, khusus peran Ketua RT */
.btn-logaktivitas-topbar {
  position: relative;
  border: none;
  background: transparent;
  color: var(--abu);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.btn-logaktivitas-topbar:hover { background: var(--abu-light); color: var(--lazulit); }

/* Warna lonceng: kuning = aman/tidak ada tunggakan, merah = ada yang belum bayar */
.notif-bell-kuning { color: var(--kuning); }
.notif-bell-merah  { color: var(--merah); }
.notif-bell-log    { color: var(--teks-lunak); background: var(--abu-light); border-radius: 50%; }
.notif-bell-log:hover { color: var(--lazulit); background: var(--lazulit-light); }
.notif-bell-hijau  { color: #16a34a; }
.notif-bell-hijau .notif-badge { background: #16a34a; }

/* Lonceng "Transaksi Kas Terbaru" -- disamakan gayanya dengan lonceng
   notifikasi lain (polos, tanpa lingkaran/gradasi solid), cuma warnanya
   dibuat lebih terang/tegas (emas) supaya tetap kelihatan beda maksudnya
   "duit/kas" sekilas pandang dibanding ikon lain, tanpa jadi terlihat
   asing/tidak seragam dengan lonceng-lonceng di sebelahnya. */
.notif-bell-uang { color: #d97706; }
.notif-bell-uang:hover { color: #b45309; background: var(--abu-light); }
.notif-bell-uang:active { transform: scale(.94); }

/* Paksa ukuran ikon di dalam lonceng ini secara eksplisit. Tanpa ini,
   aturan global "svg { height: auto }" di atas bisa membuat tinggi ikon
   terhitung 0 di beberapa browser/WebView (mis. WebView Android yang
   dipakai buka web app dari WhatsApp), sehingga ikonnya jadi tidak
   kelihatan. Pola yang sama sudah dipakai di .btn-logout-topbar svg. */
.notif-bell-uang svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

/* Garis-garis teks di badan ikon nota/struk -- warnanya dibuat kontras
   dengan badan ikon (yang solid warna emas/currentColor), supaya bentuk
   notanya kelihatan jelas (bukan cuma siluet polos). Putih di desktop
   (badan emas gelap #d97706), biru gelap di mobile (badan emas terang
   #ffcf6b) supaya kontrasnya tetap bagus di kedua tema. */
.notif-bell-uang .ikon-kas-garis { fill: #fff; }

.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--merah);
  color: var(--putih);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--putih);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 88vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--putih);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.notif-wrap.notif-buka .notif-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notif-dropdown-title {
  padding: 14px 16px 8px;
  font-weight: 700;
  color: var(--lazulit);
  font-size: 15px;
}

.notif-section { padding: 4px 16px 10px; }
.notif-section + .notif-section { border-top: 1px solid var(--krem-dark); padding-top: 10px; }

.notif-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teks-lunak);
  margin-bottom: 6px;
}

.notif-count {
  background: var(--kuning-light);
  color: var(--kuning);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-list-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.notif-item {
  display: block;
  background: var(--krem);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color .12s ease;
}
.notif-item:hover { background: var(--krem-dark); }
.notif-item-judul { font-size: 14px; font-weight: 700; color: var(--teks); }
.notif-item-sub   { font-size: 12.5px; font-weight: 500; color: var(--abu); margin-top: 3px; }

.notif-kosong {
  font-size: 12.5px;
  color: var(--abu);
  padding: 6px 2px;
}

.notif-lainnya {
  font-size: 11.5px;
  color: var(--abu);
  text-align: center;
  padding-top: 2px;
}

.notif-footer-link {
  display: block;
  text-align: center;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lazulit);
  border-top: 1px solid var(--krem-dark);
  text-decoration: none;
}
.notif-footer-link:hover { background: var(--krem); }

@media (max-width: 640px) {
  .notif-dropdown {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 90px);
  }
}

/* ============================================================
   BADGE STATUS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-biru    { background: var(--lazulit-light); color: var(--lazulit); }
.badge-hijau   { background: var(--daun-light);    color: var(--daun); }
.badge-kuning  { background: var(--kuning-light);  color: var(--kuning); }
.badge-merah   { background: var(--merah-light);   color: var(--merah); }
.badge-abu     { background: var(--abu-light);     color: var(--abu); }

/* Badge KATEGORI di kolom tabel Buku Kas (Kas RT, dan semua modul kas
   lain yang memakai style.css ini secara global). Sengaja dipisah dari
   .badge-abu generik (abu pudar) yang bikin kolom Kategori kelihatan
   "lepas"/tidak menyatu dari warna kolom lain (Pemasukan hijau,
   Pengeluaran merah, dst). Ini jadi warna DEFAULT kategori transaksi
   normal, senada dengan warna utama (lazulit biru) situs. Baris
   khusus (Setoran Saldo / Campuran) tetap pakai badge-topup /
   badge-campuran seperti sebelumnya -- tidak diubah. */
.badge-kategori {
  background: var(--lazulit-light);
  color: var(--lazulit);
  border: 1px solid rgba(26,74,114,.12);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,30,50,.45);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.modal-overlay.buka {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--putih);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-12px);
  transition: transform .2s;
}

.modal-overlay.buka .modal { transform: translateY(0); }

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--krem-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lazulit);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--abu);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.modal-body  { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--krem-dark);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   PENGUMUMAN BANNER
   ============================================================ */
.pengumuman-banner {
  padding: 14px 18px;
  border-radius: var(--radius);
  border-left: 5px solid;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pengumuman-banner.biasa    { background: var(--lazulit-light); border-color: var(--lazulit-mid); }
.pengumuman-banner.penting  { background: var(--kuning-light);  border-color: var(--kuning); }
.pengumuman-banner.mendesak { background: var(--merah-light);   border-color: var(--merah); }

/* ============================================================
   POP UP KONFIRMASI CUSTOM (pengganti confirm() bawaan browser)
   ============================================================ */
.konfirmasi-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,30,50,.55);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}

.konfirmasi-overlay.buka { opacity: 1; pointer-events: all; }

.konfirmasi-box {
  background: var(--putih);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  padding: 30px 26px 24px;
  text-align: center;
  transform: scale(.9) translateY(10px);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}

.konfirmasi-overlay.buka .konfirmasi-box { transform: scale(1) translateY(0); }

.konfirmasi-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 16px;
}
.konfirmasi-icon.tipe-hapus  { background: var(--merah-light); }
.konfirmasi-icon.tipe-simpan { background: var(--lazulit-light); }
.konfirmasi-icon.tipe-aksi   { background: #fef3c7; }

.konfirmasi-judul {
  font-size: 17px;
  font-weight: 700;
  color: var(--teks);
  margin-bottom: 8px;
}

.konfirmasi-pesan {
  font-size: 13.5px;
  color: var(--teks-lunak);
  line-height: 1.55;
  margin-bottom: 24px;
}

.konfirmasi-actions {
  display: flex;
  gap: 10px;
}
.konfirmasi-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 480px) {
  .konfirmasi-box { padding: 26px 20px 20px; max-width: 100%; }
}

/* ============================================================
   TOAST NOTIFIKASI
   ============================================================ */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--teks);
  color: var(--putih);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  animation: slideIn .25s ease;
}

.toast.toast-keluar {
  animation: slideOut .25s ease forwards;
}

.toast .toast-ikon {
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}

.toast.sukses  { background: var(--daun); }
.toast.galat,
.toast.gagal   { background: var(--merah); }
.toast.warning { background: #d97706; }
.toast.info    { background: var(--lazulit); }

@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(30px); opacity: 0; }
}

/* Di layar mobile, bottom-nav (menu bawah ala app) menutupi pojok kanan-bawah,
   jadi toast digeser ke atas supaya tidak tertutup/tertimpa menu tersebut. */
@media (max-width: 768px) {
  #toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0));
    max-width: none;
  }
  .toast {
    max-width: none;
    width: 100%;
  }
}

/* ============================================================
   TOMBOL KEMBALI KE ATAS
   ============================================================
   Muncul (fade+geser naik) begitu halaman discroll melewati ambang
   tertentu -- dipantau & ditoggle oleh app.js. Diposisikan pojok
   kanan-bawah; di HP digeser ke atas sedikit supaya tidak numpuk
   dengan bottom-nav ala app (sama seperti pola #toast-container). */
.btn-ke-atas {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 80;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lazulit);
  color: var(--putih);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1),
              visibility .25s, background .2s ease;
}

.btn-ke-atas.tampil {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-ke-atas:hover { background: var(--lazulit-mid); }
.btn-ke-atas:active { transform: scale(.92); }

@media (max-width: 768px) {
  .btn-ke-atas {
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0));
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--teks-lunak);
}

.empty-state .ikon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }

/* ============================================================
   HAMBURGUER MOBILE
   ============================================================ */
.btn-menu {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--lazulit);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: min(260px, 82vw);
  }

  .sidebar.terbuka {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  .btn-menu { display: block; }

  .form-row { grid-template-columns: 1fr; }

  .page-area { padding: 16px; }

  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Banyak halaman memakai grid/flex inline (style="...") untuk kartu
     statistik & baris form. Aturan di bawah "menimpa" inline style
     tersebut khusus di layar sempit, tanpa perlu mengubah file PHP-nya. */
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .topbar { padding: 0 16px; }

  .topbar-judul {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52vw;
    display: inline-block;
  }

  .topbar-right { font-size: 12px; }

  .page-title { font-size: 21px; }
  .page-icon { width: 38px; height: 38px; border-radius: var(--radius-md); font-size: 18px; }

  .page-header { align-items: flex-start; }

  .card-header { flex-wrap: wrap; row-gap: 8px; }

  .modal-overlay { padding: 24px 12px; }
  .modal-body, .modal-header, .modal-footer { padding-left: 16px; padding-right: 16px; }

  /* Footer modal dgn 2-3 tombol (mis. "Tutup" + "Cetak" +
     "Simpan") gampang tumpah horizontal di layar sempit.
     Di layar sempit, susun tombol jadi satu kolom penuh lebar & tombol
     "Tutup"/"Batal" ditaruh PALING BAWAH supaya aksi utama lebih mudah
     dijangkau di atas. */
  .modal-footer {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-footer .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .login-box { padding: 32px 22px; }

  /* Untuk tabel yang dikecualikan dari mode kartu (class
     "table-tetap-scroll"), tetap sediakan gaya scroll+bayangan lama. */
  .table-wrap.table-tetap-scroll table { font-size: 13px; }
  .table-wrap.table-tetap-scroll thead th,
  .table-wrap.table-tetap-scroll tbody td { padding: 8px 10px; }

  /* Isyarat visual di layar sempit: bayangan tipis di tepi kanan wadah
     tabel menandakan masih ada kolom yang bisa digeser ke kanan.
     Murni dekoratif — tidak mengubah perilaku scroll itu sendiri. */
  .table-wrap.table-tetap-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(30,41,59,.12));
  }

  /* Bungkus (wrap) elemen flex inline juga mulai dari tablet/HP besar,
     bukan hanya <=480px, supaya baris tombol/form filter tidak meluber
     di layar 481–768px. */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr !important; }

  .stat-nilai { font-size: 23px; }
  .stat-card { padding: 16px; }

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Bungkus (wrap) elemen flex inline (tombol aksi, form filter, baris
     kontak, dsb.) agar tidak meluber di layar HP kecil. flex-wrap hanya
     aktif jika kontennya memang tidak muat, jadi tata letak yang sudah
     pas di desktop tidak berubah. */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  .btn { padding: 7px 12px; font-size: 12.5px; gap: 5px; }

  .card-body { padding: 16px; }
  .page-area { padding: 12px; }

  /* Tombol-tombol aksi di header halaman (mis. "+ Tambah", "Cetak", dst.)
     dulu dipaksa flex:1 (melebar penuh & menumpuk ke bawah, jadi kelihatan
     raksasa dan makan seluruh layar). Sekarang dibiarkan seukuran isinya
     saja dan disusun rapi berjajar dari kiri, boleh pindah baris kalau
     memang tidak muat — jauh lebih ringkas & khas tampilan aplikasi mobile. */
  .page-header .btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 12.5px;
  }
  .page-header > div:last-child:has(.btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  /* Kata-kata tambahan/penjelas di dalam label tombol (dibungkus
     <span class="btn-ekstra">) disembunyikan di layar HP supaya tombol
     tetap ringkas — cukup kata inti + ikon. Teks lengkapnya tetap tampil
     di tablet/desktop yang ruangnya lebih lega. */
  .btn-ekstra { display: none; }

  /* Cegah zoom otomatis Safari/iOS saat fokus ke input/select */
  .form-control, select.form-control, input.form-control { font-size: 16px; }

  .login-wrap { padding: 16px; }
  .login-box { padding: 26px 18px; }
}

/* ============================================================
   BOTTOM NAVIGATION — tersembunyi di desktop, tampil di mobile
   (dirender oleh includes/layout_end.php)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0));
  pointer-events: none;
}

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(15,30,50,.20), 0 2px 8px rgba(15,30,50,.10);
  padding: 6px 6px;
  pointer-events: all;
}

.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--abu);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-ui);
  background: none;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}

.bottom-nav-item .ikon {
  font-size: 18px;
  line-height: 1;
  width: 40px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  transition: background .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

.bottom-nav-item .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  transition: font-weight .15s ease;
}

.bottom-nav-item:active .ikon { transform: scale(.88); }

.bottom-nav-item.aktif {
  color: var(--lazulit);
}

.bottom-nav-item.aktif .ikon {
  background: linear-gradient(135deg, var(--lazulit-light), #cfe4fb);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 4px 10px rgba(26,74,114,.18);
}

.bottom-nav-item.aktif .label { font-weight: 700; }

/* ============================================================
   TAB BAR ala ikon aplikasi Android (app icon tiles)
   Dipakai untuk sub-navigasi di dalam halaman, mis. Iuran/Kas/Denda.
   Tiap tab tampil sebagai kotak ikon "squircle" warna-warni dengan
   label di bawahnya -- persis seperti ikon app di homescreen HP,
   bukan tombol pil biasa.
   ============================================================ */
.tab-bar {
  display: flex;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 4px 2px 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-bar-item {
  flex: 1 1 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 2px 0;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab-bar-item .tab-ico {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  line-height: 1;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #cbd5e1, #94a3b8);
  box-shadow: 0 2px 5px rgba(15,30,50,.14), inset 0 1px 0 rgba(255,255,255,.35);
  opacity: .8;
  filter: saturate(.7);
  transform: scale(.94);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s ease, filter .2s ease;
}

/* Tiap tab dikasih warna khas sendiri (siklus 6 warna) supaya benar-benar
   terasa seperti kumpulan ikon aplikasi yang berbeda-beda, bukan satu
   tombol yang diulang-ulang. */
.tab-bar-item:nth-child(6n+1) .tab-ico { background: linear-gradient(145deg, var(--lazulit-mid), var(--lazulit)); }
.tab-bar-item:nth-child(6n+2) .tab-ico { background: linear-gradient(145deg, #34d399, #059669); }
.tab-bar-item:nth-child(6n+3) .tab-ico { background: linear-gradient(145deg, #fbbf24, #d97706); }
.tab-bar-item:nth-child(6n+4) .tab-ico { background: linear-gradient(145deg, #a78bfa, #7c3aed); }
.tab-bar-item:nth-child(6n+5) .tab-ico { background: linear-gradient(145deg, #f87171, #dc2626); }
.tab-bar-item:nth-child(6n+0) .tab-ico { background: linear-gradient(145deg, #22d3ee, #0891b2); }

.tab-bar-item .tab-txt {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--abu);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 128px;
  transition: color .2s ease, font-weight .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tab-bar-item:not(.aktif):hover .tab-ico { opacity: 1; filter: saturate(.9); transform: translateY(-2px) scale(.97); }
  .tab-bar-item:not(.aktif):hover .tab-txt { color: var(--teks); }
}

.tab-bar-item:active .tab-ico { transform: scale(.88); }

.tab-bar-item.aktif .tab-ico {
  opacity: 1;
  filter: none;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 22px rgba(15,30,50,.34), inset 0 1px 0 rgba(255,255,255,.45);
}

.tab-bar-item.aktif .tab-txt {
  color: var(--teks);
  font-weight: 800;
}

.tab-bar-item .tab-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  border-radius: var(--radius-full);
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--putih);
}

@media (max-width: 480px) {
  .tab-bar-item { min-width: 84px; }
  .tab-bar-item .tab-ico { width: 72px; height: 72px; font-size: 34px; border-radius: var(--radius-xl); }
  .tab-bar-item .tab-txt { font-size: 12px; font-weight: 700; max-width: 92px; }
}

/* Tombol tutup pada header drawer (navigation drawer ala Android) */
.btn-drawer-tutup {
  display: none;
  position: absolute;
  top: 18px;
  right: 14px;
  background: rgba(255,255,255,.1);
  border: none;
  color: var(--putih);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   TAMPILAN MOBILE ALA APLIKASI ANDROID
   (app bar berwarna, navigation drawer, bottom nav, kartu Material)
   ============================================================ */
@media (max-width: 768px) {
  body { font-family: 'Roboto', var(--font-ui); }

  /* Beri ruang di bawah supaya konten tidak tertutup bottom nav,
     dan ruang di atas supaya konten tidak tertutup topbar (topbar sekarang fixed) */
  .page-area { padding-bottom: 84px; padding-top: calc(28px + 56px); }
  .login-wrap { padding-bottom: 24px; }

  .bottom-nav { display: block; }

  /* App bar atas bergaya Android: solid warna utama, melayang di atas konten.
     Dibuat fixed (bukan sticky) supaya perilakunya sama persis dengan bottom-nav:
     selalu diam di tempat walau halaman di-scroll. */
  .topbar {
    background: var(--lazulit);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(15,30,50,.18);
    height: 56px;
    padding: 0 8px 0 4px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
  }

  .topbar-judul { color: var(--putih); font-size: 16px; }

  .topbar .btn-menu,
  .topbar .btn-menu.js-buka-drawer { display: none; }

  .topbar-brand-app:hover { background: rgba(255,255,255,.14); }
  .topbar-brand-app-statis:hover { background: none; }
  .topbar-brand-app-badge { box-shadow: none; }
  .topbar-brand-app:hover .topbar-brand-app-badge,
  .topbar-brand-app:active .topbar-brand-app-badge {
    box-shadow: 0 0 0 4px rgba(255,255,255,.22);
    border-color: #fff;
  }
  .topbar-brand-app-statis .topbar-brand-app-badge,
  .topbar-brand-app-statis:hover .topbar-brand-app-badge,
  .topbar-brand-app-statis:active .topbar-brand-app-badge {
    box-shadow: none;
    border-color: var(--border);
    transform: none;
  }
  .topbar-brand-app-label { color: var(--putih); }

  .notif-bell,
  .btn-logaktivitas-topbar,
  .btn-reload-halaman,
  .btn-back-halaman {
    background: rgba(255,255,255,.16);
    color: var(--putih);
  }
  .btn-reload-halaman:hover,
  .btn-back-halaman:hover { background: rgba(255,255,255,.28); color: var(--putih); }
  .btn-logout-topbar {
    background: #ef4444;
    color: var(--putih);
  }
  .notif-bell:hover,
  .btn-logaktivitas-topbar:hover {
    background: rgba(255,255,255,.28);
    color: var(--putih);
  }
  .btn-logout-topbar:hover {
    background: #dc2626;
  }
  .notif-bell-kuning { color: #ffd97a; }
  .notif-bell-merah  { color: #ffb4b4; }
  /* Icon "Log Aktivitas" (khusus Ketua RT) — dikasih badge putih solid +
     warna icon biru lazulit, biar kontrasnya pasti jelas di atas app bar
     biru, tanpa bergantung pada warna transparan/currentColor lapisan lain */
  .notif-bell-log {
    background: var(--putih) !important;
    color: var(--lazulit) !important;
    border-radius: 50%;
  }
  .notif-bell-log:hover {
    background: var(--putih) !important;
    color: var(--lazulit-mid) !important;
  }
  .notif-badge { border-color: var(--lazulit); }

  /* Perbaikan KHUSUS MOBILE: aturan ".notif-bell" tepat di atas menimpa
     "color" jadi putih untuk semua lonceng (termasuk lonceng ini, karena
     tombolnya punya DUA class sekaligus: "notif-bell notif-bell-uang").
     Supaya lonceng "Transaksi Kas Terbaru" ini tetap kelihatan beda warna
     (emas) dan tetap kontras di atas app bar biru tua, warnanya dikuatkan
     lagi di sini jadi emas terang (bukan putih polos seperti lonceng lain). */
  .notif-bell-uang { color: #ffcf6b !important; }
  .notif-bell-uang:hover { color: #ffdf94 !important; background: rgba(255,255,255,.16) !important; }
  .notif-bell-uang .ikon-kas-garis { fill: var(--lazulit); }

  /* Navigation drawer: lebih lebar, sudut membulat khas Android, elevasi kuat */
  .sidebar {
    width: min(300px, 86vw);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  .sidebar-header { position: relative; padding: 26px 44px 20px 20px; }

  .btn-drawer-tutup { display: flex; }

  .sidebar-nav { padding: 14px 10px; gap: 4px; }

  .nav-item {
    padding: 12px 12px;
    font-size: 14.5px;
  }

  .nav-item .ikon { width: 34px; height: 34px; font-size: 18px; border-radius: var(--radius-md); }

  /* Kartu & elemen bergaya Material: sudut lebih membulat + elevasi lembut,
     dengan sedikit efek "tertekan" saat disentuh (menyerupai ripple). */
  .card, .stat-card, .modal, .pengumuman-banner {
    border-radius: var(--radius-lg);
  }

  .card:active { transform: scale(.996); }

  .btn {
    border-radius: var(--radius-xl);
    padding: 10px 20px;
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active { transform: scale(.95); opacity: .9; }

  .btn-sm { border-radius: var(--radius-lg); }

  .form-control { border-radius: var(--radius-md); }

  .modal-overlay {
    align-items: flex-start;
    padding: 14px 10px;
  }

  .modal {
    border-radius: var(--radius-lg);
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    transform: translateY(-10px);
  }
  .modal-overlay.buka .modal { transform: translateY(0); }

  .modal-header { padding: 16px 18px; position: sticky; top: 0; background: var(--putih); z-index: 2; }
  .modal-footer { padding: 12px 18px; position: sticky; bottom: 0; background: var(--putih); z-index: 2; }
}

/* ============================================================
   GALERI & UNGGAH FOTO MULTI-MODUL
   (Rapat, Kerja Bakti, Inventaris, Pengumuman, Lapor Masalah, Kegiatan)
   ============================================================ */
.galeri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.galeri-grid-kecil { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

.galeri-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--abu-light);
}

.galeri-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  transition: transform .15s;
}

.galeri-item img:hover { transform: scale(1.06); }

.galeri-hapus {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(185,28,28,.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  font-weight: 700;
}

.galeri-hapus:hover { background: var(--merah); }

/* ============================================================
   DAFTAR DOKUMEN PDF MULTI-MODUL (modal "N Dokumen" di tabel &
   daftar "Dokumen Tersimpan" di form edit)
   ============================================================ */
.dokumen-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.dokumen-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--abu-light);
  transition: background .15s;
}

.dokumen-item:hover { background: var(--lazulit-light); }

.dokumen-ikon { font-size: 18px; flex-shrink: 0; }

.dokumen-nama {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--teks);
  text-decoration: none;
  font-weight: 500;
}

.dokumen-nama:hover { color: var(--lazulit); text-decoration: underline; }

.dokumen-buka {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--lazulit-mid);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--putih);
  border: 1px solid var(--border);
}

.dokumen-buka:hover { background: var(--lazulit-light); }

.dokumen-hapus {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(185,28,28,.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  font-weight: 700;
}

.dokumen-hapus:hover { background: var(--merah); }

/* Tombol ringkas "📄 N Dokumen" di kolom tabel -- sama gayanya dengan tombol galeri foto */
.btn-dokumen-tabel { display: inline-flex; align-items: center; gap: 5px; }

.foto-pratinjau {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.foto-pratinjau-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

/* Lightbox tampilan penuh */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.92);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.lightbox-overlay.buka { opacity: 1; pointer-events: all; }

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  background: rgba(0,0,0,.4);
  padding: 4px 12px;
  border-radius: var(--radius-xl);
}

@media (max-width: 640px) {
  .galeri-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .lightbox-nav { width: 38px; height: 38px; font-size: 18px; }
}

/* ============================================================
   VISUAL REFRESH — sentuhan lebih modern (kaca/glow, sudut lebih
   bulat, shadow lebih hidup, hover lift). Ini murni tambahan CSS
   di atas komponen yang sudah ada di file ini — tidak ada class,
   markup, atau logika JS/PHP yang diubah/dihapus. Semua efek hover
   dibungkus (hover: hover) and (pointer: fine) supaya tidak
   "nyangkut" di HP/tablet (sentuhan tidak memicu hover permanen),
   dan breakpoint mobile yang sudah ada di file ini tetap berlaku
   apa adanya (tidak disentuh) karena aturan di bawah tidak
   menimpa properti layout/ukuran, hanya properti visual.
   ============================================================ */
:root {
  --radius: 14px; /* dulu 10px — sudut kartu/tombol/tag jadi lebih bulat & modern di semua halaman */
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(26,74,114,.08);
  --shadow-lg: 0 12px 34px rgba(26,74,114,.16);
}

/* --- Halaman login: kartu kaca + cahaya lembut ala malam di kompleks --- */
.login-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(217,119,6,.18), transparent 42%),
    radial-gradient(circle at 86% 14%, rgba(96,165,250,.20), transparent 40%),
    radial-gradient(circle at 80% 84%, rgba(217,119,6,.12), transparent 45%),
    linear-gradient(150deg, #0b1f33 0%, var(--lazulit) 55%, #0f2f4d 100%);
}
.login-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, rgba(0,0,0,.9), transparent 72%);
  mask-image: radial-gradient(circle at 50% 38%, rgba(0,0,0,.9), transparent 72%);
  pointer-events: none;
}
.login-box {
  position: relative;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px -12px rgba(6,20,45,.5), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px; height: 4px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: linear-gradient(90deg, var(--kuning), var(--lazulit-mid));
}
.login-logo .ikon-rt {
  box-shadow: 0 8px 22px rgba(26,74,114,.28), 0 0 0 5px var(--lazulit-light);
}

/* --- Kartu & statistik: shadow lebih hidup, naik tipis saat hover (mouse saja) --- */
.card, .stat-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

/* --- Tombol: naik tipis saat hover + shadow lembut sesuai warna aksinya --- */
.btn { transition: opacity .15s, transform .12s, box-shadow .15s; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn-primer { box-shadow: 0 6px 16px rgba(26,74,114,.28); }
.btn-hijau  { box-shadow: 0 6px 16px rgba(45,122,79,.28); }
.btn-merah  { box-shadow: 0 6px 16px rgba(185,28,28,.24); }
.btn-kuning { box-shadow: 0 6px 16px rgba(217,119,6,.24); }

/* --- Input: sudut lebih bulat + focus ring lebih jelas --- */
.form-control { border-radius: var(--radius-md); }
.form-control:focus { box-shadow: 0 0 0 4px rgba(37,99,168,.14); }

/* --- Topbar: tetap solid supaya icon tetap tajam & kontras,
   sentuhan modern cukup lewat shadow tipis saat sticky (bukan blur berat) --- */
.topbar {
  background: var(--putih);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(26,74,114,.06);
}

/* --- Icon topbar yang pucat (kembali, reload, log aktivitas): dikasih
   warna lebih gelap + chip latar tetap supaya kontras jelas dari awal,
   bukan cuma muncul pas hover --- */
.btn-reload-halaman,
.btn-back-halaman,
.btn-logaktivitas-topbar {
  color: var(--teks-lunak);
  background: var(--abu-light);
}
.btn-reload-halaman svg,
.btn-back-halaman svg,
.btn-logaktivitas-topbar svg {
  stroke-width: 2.2;
}
.btn-reload-halaman:hover,
.btn-back-halaman:hover,
.btn-logaktivitas-topbar:hover {
  background: var(--lazulit-light);
  color: var(--lazulit);
}
@media (prefers-reduced-motion: reduce) {
  .card, .stat-card, .btn { transition: none !important; }
  .table-wrap tbody tr,
  .table-wrap tbody tr::before,
  .table-wrap tbody tr.kartu-aktif {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   POSTER CETAK PARKIR — disembunyikan di layar biasa, hanya
   ditampilkan (lihat @media print di bawah) saat tombol "Cetak"
   di halaman Parkir Lapangan ditekan. Didesain khusus untuk
   ditempel fisik di lapangan: ada bingkai poster, header berwarna
   brand, QR dengan bingkai sudut "viewfinder" (biar kelihatan
   jelas ini yang harus di-scan), kartu langkah masuk/keluar
   berwarna beda supaya gampang dipindai mata, dan chip info
   supaya rapi & tidak terlihat "form biasa" saat sudah di-print.
   ============================================================ */
.poster-cetak-parkir { display: none; }

/* Ukuran kertas & margin dipangkas supaya seluruh poster (header + QR +
   kartu langkah + chip + footer) muat pas di 1 halaman tanpa kepotong
   ke halaman ke-2 -- sebelumnya margin default browser (~1in tiap sisi)
   ditambah ukuran QR 320px terlalu tinggi jadi selalu meluber. */
@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {
  .poster-cetak-parkir {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  .poster-frame {
    width: 100%;
    max-width: 520px;
    border: 3px solid var(--lazulit);
    border-radius: var(--radius-xl);
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    /* Cegah browser memotong poster jadi 2 halaman kalau memang muat */
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* --- Header berwarna, isinya logo + nama RT + judul besar --- */
  .poster-header {
    width: 100%;
    background: var(--lazulit);
    color: #fff;
    padding: 16px 22px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
  }
  .poster-logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.65);
    background: #fff;
    object-fit: cover;
  }
  .poster-rt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }
  .poster-judul {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 2px;
  }

  .poster-ajakan {
    font-size: 15px;
    font-weight: 700;
    color: var(--lazulit);
    text-align: center;
  }

  /* --- QR dengan bingkai sudut ala "viewfinder" kamera --- */
  .poster-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .poster-qr-frame {
    position: relative;
    padding: 14px;
    background: #fff;
  }
  .poster-qr-frame .sudut {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 4px solid var(--daun);
  }
  .sudut-kiri-atas   { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: var(--radius-md); }
  .sudut-kanan-atas  { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: var(--radius-md); }
  .sudut-kiri-bawah  { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: var(--radius-md); }
  .sudut-kanan-bawah { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: var(--radius-md); }

  .poster-qr-caption { font-size: 12px; font-weight: 700; color: var(--daun); }
  .poster-qr-url { font-size: 9px; color: #9ca3af; word-break: break-all; max-width: 320px; text-align: center; }

  /* --- Kartu langkah pemakaian: Masuk (hijau) & Keluar (biru) --- */
  .poster-langkah { width: 100%; padding: 0 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
  .poster-langkah-kartu {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: var(--radius-md);
    padding: 9px 14px;
    font-size: 12.5px;
    color: #1f2937;
    text-align: left;
  }
  .poster-langkah-masuk  { background: var(--daun-light); }
  .poster-langkah-keluar { background: var(--lazulit-light); }
  .poster-langkah-ikon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
  .poster-langkah-judul { font-weight: 800; font-size: 11.5px; letter-spacing: .4px; margin-bottom: 2px; }
  .poster-langkah-masuk .poster-langkah-judul  { color: var(--daun); }
  .poster-langkah-keluar .poster-langkah-judul { color: var(--lazulit); }

  /* --- Chip info singkat (batas hari, kapasitas, gratis) --- */
  .poster-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 16px; }
  .poster-chip {
    font-size: 11px;
    font-weight: 700;
    color: #92650a;
    background: #fef3c7;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }
  .poster-chip-hijau { color: var(--daun); background: var(--daun-light); }

  .poster-footer { font-size: 9.5px; color: #9ca3af; text-align: center; padding: 0 20px; }
}

/* ============================================================
   MODE CETAK — pastikan latar putih bersih saat di-print
   ============================================================ */
@media print {
  html, body {
    background: #ffffff !important;
  }

  /* Elemen navigasi & UI yang tidak perlu ikut tercetak */
  .sidebar,
  .topbar,
  .btn-menu,
  #sidebar-overlay,
  .btn-logout,
  .toast,
  .modal-overlay,
  .bottom-nav,
  .konten-non-cetak {
    display: none !important;
  }

  .app-layout,
  .main-content,
  .page-area {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  * {
    box-shadow: none !important;
  }
}
/* ============================================================
   EFEK KLIK MENU — riak (ripple) ala tombol app di HP + sedikit
   "pantulan" (bounce), otomatis aktif di SEMUA menu/tombol
   navigasi lewat script global di layout.php (delegasi event,
   jadi otomatis kepasang di menu app grid, ikon topbar, item
   notifikasi, dst -- tidak perlu ubah HTML di tiap halaman).
   ============================================================ */
.efek-riak-wadah { position: relative; overflow: hidden; }

.efek-riak {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  z-index: 4;
  background: rgba(15, 47, 77, .16);
  animation: efekRiakMuncul .55s cubic-bezier(.25, .46, .45, .94) forwards;
}
/* Dipakai khusus di atas latar gelap/gradasi warna (ikon menu app)
   supaya riaknya tetap kelihatan kontras, bukan malah tenggelam. */
.efek-riak-terang { background: rgba(255, 255, 255, .55); }

@keyframes efekRiakMuncul {
  to { transform: scale(2.6); opacity: 0; }
}

/* "Pantulan" singkat saat elemen menu ditekan, supaya klik terasa
   lebih hidup & responsif (dipasang lewat class sesaat oleh JS). */
.efek-pantul {
  animation: efekPantulMenu .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes efekPantulMenu {
  0%   { transform: scale(1); }
  40%  { transform: scale(.90); }
  100% { transform: scale(1); }
}

/* Sedikit percepat transisi background pada tombol topbar supaya
   riak & warna hover-nya terasa menyatu, bukan patah-patah. */
.notif-bell, .btn-reload-halaman, .btn-back-halaman,
.btn-logout-topbar, .btn-logaktivitas-topbar, .topbar-brand-app {
  will-change: transform;
}