/* ==========================================================================
   Dashboard Perangkat Desa — style KHUSUS templates/page-dashboard.php.
   Dimuat TERPISAH dari assets/css/chat.css (dashboard punya "app-shell"
   sendiri: topbar+sidebar+konten, bukan tab-switching di dalam satu chat
   widget) — keduanya sama-sama memakai token desain Civic Pulse dari
   style.css (SELALU dimuat di semua halaman), jadi warnanya tetap senada
   walau berkas CSS-nya beda. Karena chat.css TIDAK ikut dimuat di halaman
   ini, semua komponen dasar (tombol, kartu, tabel, badge) didefinisikan
   ULANG di sini dgn nama class yang SAMA (bukan konflik krn tidak pernah
   dimuat bersamaan di halaman yang sama).
   ========================================================================== */

/* ---------- App shell: sembunyikan header situs WP, satu layar penuh ---------- */
body.krandegan-fullscreen-dashboard{
  height:100dvh;
  overflow:hidden;
}
body.krandegan-fullscreen-dashboard .krandegan-topbar{ display:none; }
body.krandegan-fullscreen-dashboard .krandegan-app-shell{
  height:100dvh;
  min-height:0;
}
body.krandegan-fullscreen-dashboard .krandegan-chat-page,
body.krandegan-fullscreen-dashboard .krandegan-dashboard-page{
  height:100%;
  padding:0;
}

.krandegan-dashboard-page{ display:flex; }

.krandegan-dash-shell{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--cp-background);
  color:var(--cp-on-surface);
  font-family:var(--cp-font-family);
}

/* ---------- Topbar ---------- */
.krandegan-dash-topbar{
  display:flex;
  align-items:center;
  gap:var(--cp-space-sm);
  padding:var(--cp-space-sm) var(--cp-margin-mobile);
  background:var(--cp-surface-container-lowest);
  border-bottom:1px solid var(--cp-outline-variant);
  flex-shrink:0;
}
.krandegan-dash-topbar-title{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.krandegan-dash-topbar-title h1{
  margin:0;
  font-size:var(--cp-title-md-size);
  font-weight:var(--cp-title-md-weight);
  color:var(--cp-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.krandegan-dash-topbar-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.krandegan-dash-menu-btn{ display:flex; }
@media (min-width:720px){
  .krandegan-dash-menu-btn{ display:none; }
}

/* ---------- Cari (topbar) — toggle input inline + live search GLOBAL lintas
   semua jenis konten dgn dropdown suggestion (lihat assets/js/dashboard.js:
   krandegan_dashboard_global_search di inc/dashboard.php) ---------- */
.krandegan-dash-search-wrap{ position:relative; display:flex; align-items:center; }
.krandegan-dash-topbar-search-input{
  position:absolute;
  right:44px;
  width:0;
  opacity:0;
  padding:0;
  border:none;
  border-radius:var(--cp-radius-full);
  background:var(--cp-surface-container-low);
  color:var(--cp-on-surface);
  font-size:13px;
  transition:width .18s ease, opacity .18s ease, padding .18s ease;
  pointer-events:none;
}
.krandegan-dash-topbar-search-input.is-open{
  width:220px;
  opacity:1;
  padding:8px 14px;
  pointer-events:auto;
}
.krandegan-dash-search-suggest{
  position:absolute;
  top:calc(100% + 10px);
  right:44px;
  width:320px;
  max-width:calc(100vw - 32px);
  max-height:360px;
  overflow-y:auto;
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-level2-shadow);
  padding:6px;
  z-index:45;
}
.krandegan-dash-search-empty{ margin:8px; font-size:13px; color:var(--cp-on-surface-variant); text-align:center; }
.krandegan-dash-search-item{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  padding:9px 10px;
  border-radius:var(--cp-radius);
  text-decoration:none;
  color:var(--cp-on-surface);
}
.krandegan-dash-search-item:hover{ background:var(--cp-surface-container-low); }
.krandegan-dash-search-item-type{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--cp-primary);
  background:var(--cp-secondary-container);
  padding:2px 7px;
  border-radius:var(--cp-radius-full);
  flex-shrink:0;
}
.krandegan-dash-search-item-title{ font-size:13px; font-weight:600; }
.krandegan-dash-search-item-subtitle{ font-size:12px; color:var(--cp-on-surface-variant); width:100%; }

/* ---------- Notifikasi (bell) ---------- */
.krandegan-notif-dot{
  position:absolute;
  top:8px; right:8px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--cp-error);
  border:2px solid var(--cp-surface-container-lowest);
}

/* Bubble angka di bell icon topbar (jumlah notifikasi belum dibaca, lihat
   krandegan_get_unread_notif_count()/polling AJAX di assets/js/dashboard.js) —
   pengganti .krandegan-notif-dot polos di atas (dipertahankan krn masih dipakai
   elemen lain), sengaja bentuk pil supaya muat angka 2+ digit ("99+"). */
.krandegan-notif-badge{
  position:absolute;
  top:2px; right:2px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-error);
  color:var(--cp-on-error, #fff);
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  border:2px solid var(--cp-surface-container-lowest);
  box-sizing:content-box;
}
.krandegan-notif-badge[hidden]{ display:none; }

/* Badge kecil di item nav sidebar "Notifikasi" — sama sumber datanya dgn bubble
   bell di atas, ditampilkan berdampingan dgn label menu. */
.krandegan-nav-badge{
  margin-left:auto;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-error);
  color:var(--cp-on-error, #fff);
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  flex-shrink:0;
}
.krandegan-nav-badge[hidden]{ display:none; }

/* ---------- Dropdown bell notifikasi (topbar) — cerminan
   .krandegan-dash-user-popover di bawah, kelas terpisah krn lebih lebar &
   py daftar isi + footer "Lihat Semua" ---------- */
.krandegan-dash-notif-menu{ position:relative; display:flex; }
.krandegan-dash-notif-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:320px;
  max-width:calc(100vw - 32px);
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-level2-shadow);
  padding:14px;
  z-index:40;
}
.krandegan-dash-notif-popover-head{ margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--cp-outline-variant); }
.krandegan-dash-notif-popover-head p{ margin:0; font-weight:700; font-size:14px; color:var(--cp-on-surface); }
.krandegan-dash-notif-popover-list{ display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.krandegan-dash-notif-empty{ margin:8px 0; font-size:13px; color:var(--cp-on-surface-variant); text-align:center; }
.krandegan-dash-notif-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
  border-radius:var(--cp-radius);
  text-decoration:none;
  color:var(--cp-on-surface);
}
.krandegan-dash-notif-item:hover{ background:var(--cp-surface-container-low); }
/* Belum dibaca (is-new): latar highlight + judul tebal + titik penanda.
   Sudah dibaca: latar polos & judul normal (bukan tebal) supaya beda warna
   terlihat jelas antara yg sudah & belum dibaca. */
.krandegan-dash-notif-item.is-new{ background:var(--cp-primary-container); }
.krandegan-dash-notif-item-title{ display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:400; color:var(--cp-on-surface-variant); }
.krandegan-dash-notif-item.is-new .krandegan-dash-notif-item-title{ font-weight:700; color:var(--cp-on-primary-container); }
.krandegan-dash-notif-item-time{ margin-left:auto; flex-shrink:0; font-size:10px; font-weight:400; color:var(--cp-on-surface-variant); }
.krandegan-dash-notif-item-msg{ font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-dash-notif-popover-footer{
  display:block;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--cp-outline-variant);
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:var(--cp-primary);
  text-decoration:none;
}

/* ---------- Tab "Notifikasi" (daftar penuh) ---------- */
.krandegan-dash-notif-list{ display:flex; flex-direction:column; gap:4px; }
.krandegan-dash-notif-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:var(--cp-radius);
  text-decoration:none;
  color:var(--cp-on-surface);
}
.krandegan-dash-notif-row:hover{ background:var(--cp-surface-container-low); }
/* Sudah dibaca (bukan is-new): latar polos, judul normal (tidak tebal) &
   sedikit diredupkan supaya beda jelas dgn yg belum dibaca (is-new: latar
   highlight + judul tebal + titik penanda merah). */
.krandegan-dash-notif-row{ opacity:.72; }
.krandegan-dash-notif-row-title{ font-size:14px; font-weight:400; }
.krandegan-dash-notif-row.is-new{ background:var(--cp-primary-container); color:var(--cp-on-primary-container); opacity:1; }
.krandegan-dash-notif-row.is-new .krandegan-dash-notif-row-title{ font-weight:700; }
.krandegan-dash-notif-row.is-new .krandegan-dash-notif-row-title::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cp-error); margin-right:6px; }
.krandegan-dash-notif-row-icon{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-surface-container-low);
  display:flex; align-items:center; justify-content:center;
}
.krandegan-dash-notif-row.is-new .krandegan-dash-notif-row-icon{ background:var(--cp-surface-container-lowest); }
.krandegan-dash-notif-row-icon .krandegan-icon{ width:16px; height:16px; }
.krandegan-dash-notif-row-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.krandegan-dash-notif-row-msg{ font-size:13px; color:var(--cp-on-surface-variant); }
.krandegan-dash-notif-row.is-new .krandegan-dash-notif-row-msg{ color:inherit; opacity:.85; }
.krandegan-dash-notif-row-time{ font-size:11px; color:var(--cp-on-surface-variant); margin-top:2px; }

/* ---------- Menu akun (bubble popover) — versi topbar dashboard, cerminan
   .krandegan-user-menu/.krandegan-user-popover di chat.css (tidak dimuat di
   sini, jadi disalin ulang dgn kelas krandegan-dash-* biar tidak bentrok) ---------- */
.krandegan-dash-user-menu{ position:relative; display:flex; }
.krandegan-dash-user-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:230px;
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-level2-shadow);
  padding:14px;
  z-index:40;
}
.krandegan-dash-user-popover-head{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--cp-outline-variant); }
.krandegan-dash-user-popover-name{ margin:0; font-weight:700; font-size:14px; color:var(--cp-on-surface); }
.krandegan-dash-user-popover-role{ margin:2px 0 0; font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-dash-user-popover-menu{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.krandegan-dash-user-popover-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:var(--cp-radius);
  background:transparent;
  border:none;
  color:var(--cp-on-surface);
  font-size:13px;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
.krandegan-dash-user-popover-item:hover{ background:var(--cp-surface-container-low); }
.krandegan-dash-user-popover-item .krandegan-icon{ width:18px; height:18px; flex-shrink:0; }
.krandegan-dash-user-popover-logout{ width:100%; }

/* ---------- Avatar bot (logo di samping judul topbar) — disalin dari
   chat.css (tidak dimuat di halaman dashboard ini) supaya krandegan_bot_avatar()
   yg dipanggil di template-parts/dashboard.php tetap tampil dgn gaya yg sama
   (gradasi ungu-biru) spt di halaman chat warga ---------- */
.krandegan-bot-avatar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--cp-radius-full);
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:#fff;
}
.krandegan-bot-avatar .krandegan-icon{ width:60%; height:60%; }
.krandegan-bot-avatar-sm{ width:32px; height:32px; }

/* ---------- Icon button & bot-icon reuse (chat.css tidak dimuat di sini) ---------- */
.krandegan-icon{ width:20px; height:20px; display:block; }
.krandegan-icon-flip{ transform:rotate(180deg); }
.krandegan-icon-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:var(--cp-radius-full);
  border:none;
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:var(--cp-level1-shadow);
  flex-shrink:0;
}

/* ---------- Toggle mode gelap/terang — visual sama dgn chat.css ---------- */
.krandegan-theme-icon-moon{ display:none; }
.krandegan-dash-shell[data-theme="dark"] .krandegan-theme-icon-sun{ display:none; }
.krandegan-dash-shell[data-theme="dark"] .krandegan-theme-icon-moon{ display:block; }

/* ---------- Body: sidebar + konten ---------- */
.krandegan-dash-body{
  flex:1;
  display:flex;
  min-height:0;
  position:relative;
}

.krandegan-dash-sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(17,17,26,0.45);
  z-index:29;
}
.krandegan-dash-sidebar-backdrop.is-open{ display:block; }

.krandegan-dash-sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--cp-surface-container-lowest);
  border-right:1px solid var(--cp-outline-variant);
  padding:var(--cp-space-md) var(--cp-space-sm);
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:30;
  transform:translateX(-100%);
  transition:transform .2s ease;
}
.krandegan-dash-sidebar.is-open{ transform:translateX(0); }
@media (min-width:720px){
  .krandegan-dash-sidebar{
    position:static;
    transform:none;
    transition:none;
  }
  .krandegan-dash-sidebar-backdrop{ display:none !important; }
}

.krandegan-dash-sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  margin-bottom:var(--cp-space-sm);
  border-bottom:1px solid var(--cp-outline-variant);
  padding-bottom:var(--cp-space-sm);
}
.krandegan-dash-sidebar-user .krandegan-profile-avatar{
  width:40px;
  height:40px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-primary);
  color:var(--cp-on-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.krandegan-dash-sidebar-user .krandegan-profile-avatar .krandegan-icon{ width:20px; height:20px; }
.krandegan-dash-sidebar-user-name{ margin:0; font-size:13px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-dash-sidebar-user-role{ margin:0; font-size:11px; color:var(--cp-on-surface-variant); }

.krandegan-dash-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:var(--cp-radius-md, 10px);
  color:var(--cp-on-surface-variant);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.krandegan-dash-nav-item .krandegan-icon{ width:20px; height:20px; flex-shrink:0; }
.krandegan-dash-nav-item:hover{ background:var(--cp-surface-container-low); color:var(--cp-on-surface); }
.krandegan-dash-nav-item.is-active{
  background:var(--cp-primary-container);
  color:var(--cp-on-primary-container);
  font-weight:700;
}

.krandegan-dash-content{
  flex:1;
  min-width:0;
  overflow-y:auto;
  padding:var(--cp-space-md) var(--cp-margin-mobile) var(--cp-space-xl);
}
@media (min-width:720px){
  .krandegan-dash-content{ padding:var(--cp-space-lg); }
}

.krandegan-dash-content-title{ margin:0 0 4px; font-size:22px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-dash-content-subtitle{ margin:0 0 var(--cp-space-md); font-size:14px; color:var(--cp-on-surface-variant); max-width:640px; }

/* ---------- Notifikasi hasil aksi (simpan pengaturan, dst) ----------
   Auto-hilang sendiri stlh beberapa detik (lihat autoDismissDashNotices() di
   assets/js/dashboard.js) — SEBELUMNYA menumpuk & tetap tampil sampai halaman
   di-refresh manual, mengganggu krn tabel Permohonan Layanan sering diubah
   berkali-kali berturut-turut. Transisi opacity+height di sini yg dipakai JS
   utk fade-out halus sebelum elemennya benar2 dihapus dari DOM. */
.krandegan-dash-notice{
  padding:10px 14px;
  border-radius:var(--cp-radius);
  font-size:13px;
  margin-bottom:var(--cp-space-md);
  opacity:1;
  max-height:60px;
  overflow:hidden;
  transition:opacity .35s ease, max-height .35s ease .1s, margin-bottom .35s ease .1s, padding .35s ease .1s;
}
.krandegan-dash-notice.is-success{ background:var(--cp-secondary-container); color:var(--cp-on-secondary-container); }
.krandegan-dash-notice.is-error{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
.krandegan-dash-notice.is-dismissing{
  opacity:0;
  max-height:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}

/* ---------- Kartu ---------- */
.krandegan-card{
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  padding:var(--cp-space-md);
  margin-bottom:var(--cp-space-md);
}
.krandegan-card-title{ margin:0 0 var(--cp-space-sm); font-size:16px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-dash-denied-card{ max-width:420px; margin:64px auto; text-align:center; }
.krandegan-dash-denied-card .krandegan-btn{ margin-top:var(--cp-space-sm); }

.krandegan-dash-columns{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cp-space-md);
}
@media (min-width:960px){
  .krandegan-dash-columns{ grid-template-columns:1fr 1fr; }
}
.krandegan-dash-total-line{ margin:0 0 var(--cp-space-sm); font-size:13px; color:var(--cp-on-surface-variant); }
.krandegan-dash-card-link{ display:inline-flex; margin-top:var(--cp-space-sm); }
.krandegan-dash-muted{ font-size:12px; color:var(--cp-on-surface-variant); }

/* ---------- Ringkasan notifikasi (banner + badge di atas grid statistik,
   tab "Dashboard") — lihat template-parts/dashboard-tabs/dashboard-stats.php.
   Cuma tampil kalau ada yang belum dibaca; klik langsung ke tab "Notifikasi". ---------- */
.krandegan-dash-notif-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin-bottom:var(--cp-space-md);
  background:var(--cp-primary-container);
  color:var(--cp-on-primary-container);
  border-radius:var(--cp-radius);
  text-decoration:none;
}
/* PENTING: elemen ini sekarang SELALU ada di DOM (server merender dgn
   atribut `hidden` bila tidak ada yg belum dibaca, JS men-toggle-nya tiap
   poll — lihat updateNotifSummary() di dashboard.js) supaya banner ini ikut
   ter-update REAL-TIME persis spt badge lonceng topbar, bukan cuma sekali
   saat halaman dimuat. TANPA baris ini, atribut [hidden] KALAH krn urutan
   deklarasi (aturan class ".krandegan-dash-notif-summary{ display:flex }"
   di atas datang SETELAH default browser utk [hidden] dgn specificity yg
   sama) — banner akan TETAP TAMPIL walau atribut hidden-nya sudah diset.
   Pola yg sama persis sudah dipakai utk kasus serupa di chat.css (lihat
   komentar di .krandegan-auth-field[hidden] & .krandegan-modal-backdrop[hidden]). */
.krandegan-dash-notif-summary[hidden]{ display:none; }
.krandegan-dash-notif-summary:hover{ filter:brightness(0.97); }
.krandegan-dash-notif-summary-badge{
  flex-shrink:0;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-error);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:28px;
  text-align:center;
}
.krandegan-dash-notif-summary-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.krandegan-dash-notif-summary-text strong{ font-size:14px; }
.krandegan-dash-notif-summary-preview{
  font-size:12px;
  opacity:.85;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.krandegan-dash-notif-summary-link{
  flex-shrink:0;
  font-size:13px;
  font-weight:700;
}

/* ---------- Statistik ---------- */
.krandegan-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:var(--cp-space-sm);
  margin-bottom:var(--cp-space-md);
}
.krandegan-stat-card{
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  padding:var(--cp-space-sm) var(--cp-space-md);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.krandegan-stat-card-accent{ border-color:var(--cp-primary); background:var(--cp-primary-container); }
.krandegan-stat-card-accent .krandegan-stat-label,
.krandegan-stat-card-accent .krandegan-stat-value{ color:var(--cp-on-primary-container); }
.krandegan-stat-label{ font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-stat-value{ font-size:26px; font-weight:700; color:var(--cp-on-surface); }

/* ---------- Bar list (tren & distribusi) ---------- */
.krandegan-bar-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.krandegan-bar-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--cp-on-surface-variant); margin-bottom:3px; }
.krandegan-bar-track{ height:8px; border-radius:var(--cp-radius-full); background:var(--cp-surface-container-low); overflow:hidden; }
.krandegan-bar-fill{ height:100%; border-radius:var(--cp-radius-full); background:var(--cp-primary); }
.krandegan-bar-fill-baru{ background:var(--cp-primary); }
.krandegan-bar-fill-diproses{ background:#e6a700; }
.krandegan-bar-fill-selesai{ background:var(--cp-secondary); }
.krandegan-bar-fill-warga-pending{ background:#e6a700; }
.krandegan-bar-fill-warga-active{ background:var(--cp-secondary); }
.krandegan-bar-fill-warga-rejected{ background:var(--cp-error); }

/* ---------- Pie/donut chart status Permohonan Layanan (tab Dashboard) —
   murni CSS conic-gradient(), TANPA library chart/canvas/SVG eksternal;
   gradiennya sendiri dihitung & disuntik lewat inline style di PHP (lihat
   template-parts/dashboard-tabs/dashboard-stats.php) ---------- */
.krandegan-dash-pie-row{ display:flex; align-items:center; gap:var(--cp-space-lg); flex-wrap:wrap; }
.krandegan-dash-pie-chart{
  position:relative;
  width:140px; height:140px;
  border-radius:50%;
  flex-shrink:0;
}
.krandegan-dash-pie-hole{
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:var(--cp-surface-container-lowest);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.krandegan-dash-pie-hole-value{ font-size:22px; font-weight:700; color:var(--cp-on-surface); line-height:1.1; }
.krandegan-dash-pie-hole-label{ font-size:11px; color:var(--cp-on-surface-variant); }
.krandegan-dash-pie-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; min-width:140px; }
.krandegan-dash-pie-legend li{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cp-on-surface); }
.krandegan-dash-pie-swatch{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.krandegan-dash-pie-legend-label{ flex:1; }
.krandegan-dash-pie-legend-count{ font-weight:700; }

/* ---------- Wordcloud topik pertanyaan (tab Dashboard) — daftar flex-wrap
   sederhana, ukuran font tiap kata dihitung proporsional thd frekuensinya
   lewat inline style di PHP, TANPA library wordcloud eksternal ---------- */
.krandegan-dash-wordcloud{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  padding:var(--cp-space-sm) 0;
}
.krandegan-dash-wordcloud-item{ font-weight:700; line-height:1.2; white-space:nowrap; cursor:default; }

/* ---------- Filter tabs (Permohonan/Manajemen User) ---------- */
.krandegan-dash-filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--cp-space-md);
}
.krandegan-dash-filter-tab{
  padding:7px 14px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-surface-container-low);
  color:var(--cp-on-surface-variant);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
.krandegan-dash-filter-tab.is-active{ background:var(--cp-primary); color:var(--cp-on-primary); }

/* ---------- Tabel ---------- */
.krandegan-dash-table-wrap{ overflow-x:auto; }
.krandegan-table{ width:100%; border-collapse:collapse; font-size:13px; }
.krandegan-table th,
.krandegan-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--cp-outline-variant);
  vertical-align:top;
}
.krandegan-table th{ color:var(--cp-on-surface-variant); font-weight:600; font-size:12px; white-space:nowrap; }
.krandegan-empty{ color:var(--cp-on-surface-variant); font-size:13px; }
.krandegan-dash-ticket{ font-weight:700; white-space:nowrap; }
.krandegan-dash-actions-cell{ display:flex; gap:6px; flex-wrap:wrap; }

.krandegan-dash-detail{ margin-top:6px; font-size:12px; }
.krandegan-dash-detail summary{ cursor:pointer; color:var(--cp-primary); font-weight:600; }
.krandegan-dash-detail-list{ margin:8px 0 0; }
.krandegan-dash-detail-list dt{ color:var(--cp-on-surface-variant); margin-top:6px; }
.krandegan-dash-detail-list dd{ margin:2px 0 0; color:var(--cp-on-surface); word-break:break-word; }
.krandegan-dash-error-text{ margin:4px 0 0; font-size:11px; color:var(--cp-error); max-width:260px; }

/* ---------- Badge status ---------- */
.krandegan-badge{
  display:inline-flex;
  padding:3px 10px;
  border-radius:var(--cp-radius-full);
  font-size:11px;
  font-weight:700;
  background:var(--cp-surface-container-low);
  color:var(--cp-on-surface-variant);
  white-space:nowrap;
}
.krandegan-badge-permohonan-baru,
.krandegan-badge-pending{ background:#fff3cd; color:#7a5b00; }
.krandegan-badge-permohonan-diproses{ background:#cfe3ff; color:#0d3d80; }
.krandegan-badge-permohonan-selesai,
.krandegan-badge-synced,
.krandegan-badge-warga-active{ background:var(--cp-secondary-container); color:var(--cp-on-secondary-container); }
.krandegan-badge-warga-pending{ background:#fff3cd; color:#7a5b00; }
.krandegan-badge-warga-rejected,
.krandegan-badge-failed{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
/* Skill Bot: badge jenis link (Layanan/URL) — lihat template-parts/dashboard-tabs/dashboard-skill-bot.php */
.krandegan-badge-source-file{ background:var(--cp-surface-container-low); color:var(--cp-on-surface-variant); }
.krandegan-badge-source-url{ background:var(--cp-surface-container-lowest); color:var(--cp-primary); }

/* ---------- Form ---------- */
.krandegan-dash-form{ display:flex; flex-direction:column; gap:var(--cp-space-md); max-width:560px; }
.krandegan-dash-form-row{ display:flex; flex-direction:column; gap:6px; }
.krandegan-dash-form-row label{ font-size:13px; font-weight:600; color:var(--cp-on-surface); }
.krandegan-input{
  font-family:var(--cp-font-family);
  font-size:14px;
  padding:10px 12px;
  border-radius:var(--cp-radius);
  border:1px solid var(--cp-outline-variant);
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface);
}
.krandegan-input:focus{ outline:2px solid var(--cp-primary); outline-offset:1px; }
.krandegan-input-sm{ padding:6px 8px; font-size:12px; }
textarea.krandegan-input{ resize:vertical; min-height:80px; font-family:var(--cp-font-family); }
.krandegan-help-text{ margin:2px 0 0; font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-dash-inline-form{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Skill Bot: pilihan jenis link (radio) — lihat template-parts/dashboard-tabs/dashboard-skill-bot.php */
.krandegan-radio-group{ display:flex; flex-direction:column; gap:8px; }
.krandegan-radio-group label{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400; color:var(--cp-on-surface); }

/* ---------- Tombol ---------- */
.krandegan-btn{
  font-family:var(--cp-font-family);
  font-size:var(--cp-label-md-size);
  font-weight:600;
  border:none;
  border-radius:var(--cp-radius);
  padding:10px 18px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
}
.krandegan-btn-primary{ background:var(--cp-primary); color:var(--cp-on-primary); }
.krandegan-btn-primary:hover{ filter:brightness(0.95); }
.krandegan-btn-outline{ background:transparent; border:1px solid var(--cp-outline-variant); color:var(--cp-on-surface); }
.krandegan-btn-outline:hover{ background:var(--cp-surface-container-low); }
.krandegan-btn-danger{ background:var(--cp-error); color:var(--cp-on-error); font-weight:700; }
.krandegan-btn-danger:hover{ opacity:.9; }
.krandegan-btn-danger-sm{ background:transparent; border:1px solid var(--cp-error); color:var(--cp-error); }
.krandegan-btn-danger-sm:hover{ background:var(--cp-error-container); }
.krandegan-btn-sm{ padding:6px 12px; font-size:12px; }

/* ==========================================================================
   Modal konfirmasi custom (dipakai tombol "Keluar" di bubble popover akun
   topbar, lihat #krandegan-dash-confirm-modal-backdrop di
   template-parts/dashboard.php & wiring-nya di assets/js/dashboard.js) —
   pengganti window.confirm() bawaan browser supaya gayanya konsisten dgn
   tampilan dashboard. Salinan gaya yang SAMA PERSIS dgn ".krandegan-modal-*"
   milik widget chat (assets/css/chat.css) — dibikin di sini krn dashboard.css
   file terpisah, tidak memuat chat.css.
   ========================================================================== */
.krandegan-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--cp-space-md);
  background:rgba(17,17,26,0);
  transition:background .15s ease;
}
/* PENTING: [hidden] harus menang atas ".krandegan-modal-backdrop{ display:flex }"
   di atas (spesifisitas setara, urutan CSS yang menentukan) — tanpa ini,
   overlay fixed inset:0 tetap "ada" (walau transparan) saat disembunyikan &
   memblokir semua klik di dashboard, terasa freeze. */
.krandegan-modal-backdrop[hidden]{ display:none; }
.krandegan-modal-backdrop.is-open{ background:rgba(17,17,26,0.45); }
.krandegan-modal{
  width:100%;
  max-width:360px;
  background:var(--cp-surface-container-lowest);
  border-radius:var(--cp-radius-lg);
  padding:var(--cp-space-md);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  transform:translateY(8px) scale(.97);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.krandegan-modal-backdrop.is-open .krandegan-modal{ transform:translateY(0) scale(1); opacity:1; }
.krandegan-modal-title{
  font-size:17px;
  font-weight:700;
  color:var(--cp-on-surface);
  margin:0 0 8px;
}
.krandegan-modal-desc{
  font-size:14px;
  line-height:1.5;
  color:var(--cp-on-surface-variant);
  margin:0 0 var(--cp-space-md);
}
.krandegan-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
.krandegan-modal-actions .krandegan-btn{ flex:1; text-align:center; }

/* ---------- Tab Permohonan Layanan: fitur lengkap (search, filter Layanan,
   banner polling, catatan/bukti, hapus) — cerminan gaya admin.css tapi
   dgn token/kelas Civic Pulse milik dashboard ini ---------- */
.krandegan-dash-poll-banner{
  display:none;
  align-items:center;
  gap:10px;
  margin-bottom:var(--cp-space-md);
  padding:10px 14px;
  border-radius:var(--cp-radius);
  background:var(--cp-secondary-container);
  color:var(--cp-on-secondary-container);
  font-size:13px;
}
.krandegan-dash-poll-banner.is-visible{ display:flex; }
.krandegan-dash-poll-banner button{ font-size:12px; padding:4px 12px; }

.krandegan-dash-inline-filter-form{ margin-bottom:var(--cp-space-md); }

.krandegan-dash-search-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:var(--cp-space-md);
  padding:8px 12px;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  max-width:480px;
  background:var(--cp-surface-container-lowest);
}
.krandegan-dash-search-row svg{ width:16px; height:16px; flex-shrink:0; opacity:.6; }
.krandegan-dash-search-input{
  border:none;
  outline:none;
  flex:1;
  font-size:13px;
  background:transparent;
  color:var(--cp-on-surface);
}
.krandegan-dash-search-count{ font-size:12px; color:var(--cp-on-surface-variant); white-space:nowrap; }

.krandegan-dash-hidden-form{ display:inline; } /* elemen kosong, cuma pembungkus hidden field/nonce (lihat atribut form="") */
.krandegan-dash-col-catatan{ min-width:220px; }
.krandegan-dash-col-aksi{ white-space:nowrap; }
.krandegan-dash-more summary{ cursor:pointer; font-size:11px; color:var(--cp-primary); list-style:none; white-space:nowrap; font-weight:600; }
.krandegan-dash-more summary::-webkit-details-marker{ display:none; }
.krandegan-dash-more[open] summary{ margin-bottom:6px; }
.krandegan-dash-catatan-input{ display:block; width:100%; max-width:240px; min-height:56px; font-size:12px; resize:vertical; margin-bottom:8px; padding:6px 8px; }
.krandegan-dash-checkbox-label{ display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--cp-on-surface-variant); margin-bottom:8px; line-height:1.4; cursor:pointer; }
.krandegan-dash-checkbox-label input{ margin-top:2px; }
.krandegan-dash-bukti-label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--cp-on-surface-variant); margin-bottom:4px; }
.krandegan-dash-bukti-input{ font-size:11px; max-width:180px; }
.krandegan-dash-bukti-preview{ display:block; margin-top:4px; }
.krandegan-dash-bukti-preview img{ width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--cp-outline-variant); }
.krandegan-dash-tambahan-label{ font-weight:600; font-size:12px; margin:12px 0 4px; }
.krandegan-dash-tambahan-list{ margin:0; padding-left:18px; font-size:12px; }
.krandegan-dash-tambahan-list li{ margin-bottom:4px; }
.krandegan-dash-tambahan-time{ font-weight:600; color:var(--cp-on-surface-variant); }

.krandegan-dash-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:var(--cp-space-md);
  padding-top:var(--cp-space-md);
  border-top:1px solid var(--cp-outline-variant);
  flex-wrap:wrap;
}
.krandegan-dash-pagination-info{ font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-dash-pagination .is-disabled{ opacity:.4; pointer-events:none; }

/* ---------- Picker ikon Quick Action (tab Pengaturan Layanan) — versi
   dashboard dari picker yg sama di meta box wp-admin (inline <style> di
   krandegan_layanan_render_meta_box(), inc/cpt-layanan.php), warna &
   token disesuaikan Civic Pulse ---------- */
.krandegan-icon-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.krandegan-icon-picker-option{
  width:42px; height:42px;
  border-radius:var(--cp-radius);
  border:1.5px solid var(--cp-outline-variant);
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface-variant);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.krandegan-icon-picker-option svg{ width:20px; height:20px; }
.krandegan-icon-picker-option:hover{ border-color:var(--cp-primary); }
.krandegan-icon-picker-option.is-selected{ border-color:var(--cp-primary); background:var(--cp-primary-container); color:var(--cp-on-primary-container); }

/* ---------- Tab Pengaturan Layanan: daftar drag-n-drop ---------- */
.krandegan-dash-layanan-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:var(--cp-space-md);
}
.krandegan-dash-layanan-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  background:var(--cp-surface-container-lowest);
  cursor:grab;
}
.krandegan-dash-layanan-row.is-dragging{ opacity:.4; }
.krandegan-dash-layanan-row.is-dragover{ border-color:var(--cp-primary); border-style:dashed; }
.krandegan-dash-layanan-grip{ color:var(--cp-on-surface-variant); flex-shrink:0; }
.krandegan-dash-layanan-grip svg{ width:18px; height:18px; }
.krandegan-dash-layanan-info{ flex:1; min-width:0; }
.krandegan-dash-layanan-title{ font-weight:600; font-size:14px; margin:0 0 2px; color:var(--cp-on-surface); }
.krandegan-dash-layanan-meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.krandegan-dash-layanan-actions{ display:flex; gap:6px; flex-shrink:0; }
.krandegan-dash-layanan-empty-hint{ font-size:12px; color:var(--cp-on-surface-variant); margin:6px 0 0; }

/* ---------- Form builder Alur Tanya-Jawab (tab Pengaturan Layanan) — versi
   dashboard dari #krandegan-form-builder di meta box wp-admin
   (inc/cpt-layanan.php), memakai kelas krandegan-input/krandegan-btn ---------- */
.krandegan-dash-fb{ max-width:100%; }
.krandegan-dash-fb-header{ display:flex; gap:8px; font-size:11px; font-weight:600; color:var(--cp-on-surface-variant); padding:0 30px 4px 0; }
.krandegan-dash-fb-header span:nth-child(1){ flex:2; }
.krandegan-dash-fb-header span:nth-child(2){ flex:1; }
.krandegan-dash-fb-header span:nth-child(3){ flex:1.4; }
.krandegan-dash-fb-header span:nth-child(4){ width:50px; text-align:center; }
.krandegan-dash-fb-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.krandegan-dash-fb-row .krandegan-input{ padding:6px 8px; font-size:12px; }
.krandegan-dash-fb-row .krandegan-fb-label{ flex:2; }
.krandegan-dash-fb-row .krandegan-fb-type{ flex:1; }
.krandegan-dash-fb-row .krandegan-fb-options{ flex:1.4; }
.krandegan-dash-fb-row .krandegan-fb-options:disabled{ background:var(--cp-surface-container-low); color:var(--cp-outline); }
.krandegan-dash-fb-row .krandegan-fb-required-wrap{ width:50px; text-align:center; }
.krandegan-dash-fb-row .krandegan-fb-remove{ color:var(--cp-error); text-decoration:none; width:24px; text-align:center; font-size:18px; line-height:1; cursor:pointer; }

/* ==========================================================================
   Dark mode — token --cp-* di style.css sudah didefinisikan ulang lewat
   [data-theme="dark"]/prefers-color-scheme di elemen BERATRIBUT data-theme
   itu sendiri; .krandegan-dash-shell diberi atribut data-theme yang sama
   persis pola-nya dgn #krandegan-chat-app di chat.js (lihat assets/js/dashboard.js).
   ========================================================================== */
.krandegan-dash-shell[data-theme="dark"]{
  color-scheme:dark;
}