/* =========================================================
   SIGAP Desa Kutuh - Theme & Framework7 Enhancements
   ========================================================= */

:root {
  --f7-theme-color: #2563eb;
  --f7-theme-color-rgb: 37, 99, 235;
  --f7-theme-color-shade: #1d4ed8;
  --f7-theme-color-tint: #3b82f6;
  --f7-statusbar-bg-color: #1d4ed8;
  --f7-bars-bg-color: #1d4ed8;
  --f7-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sigap-primary: #1e3a8a;
  --sigap-royal: #1d4ed8;
  --sigap-secondary: #0ea5e9;
  --sigap-accent: #f59e0b;
  --sigap-success: #10b981;
  --sigap-danger: #ef4444;
  --sigap-dark: #0f172a;
  --sigap-card-bg: #ffffff;
  --sigap-border: #e2e8f0;
}

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

html {
  background-color: var(--sigap-bg-page, #f8fafc) !important;
  background: var(--sigap-bg-page, #f8fafc) !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--f7-font-family);
  background-color: var(--sigap-bg-page, #f8fafc);
  color: var(--sigap-text-main, #0f172a);
  -webkit-tap-highlight-color: transparent;
}

.statusbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: env(safe-area-inset-top, 0px) !important;
  background-color: var(--sigap-navbar-bg, #ffffff) !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  z-index: 9999;
  pointer-events: none !important;
  transition: background 0.25s ease, background-color 0.25s ease;
}

.theme-dark .statusbar,
[data-theme="dark"] .statusbar {
  background-color: #0f172a !important;
  background: #0f172a !important;
}

/* =========================================================
   KHUSUS UNTUK DASHBOARD: STATUS BAR BERWARNA BIRU GRADIEN
   Persis seperti headernya (Modern Pro-GovTech Deep Obsidian / Blue)
   ========================================================= */
html.page-is-dashboard,
body.page-is-dashboard {
  background-color: #1e3a8a !important;
  color-scheme: dark !important;
}

html.page-is-dashboard .statusbar,
body.page-is-dashboard .statusbar,
#app:has(.page[data-name*="dashboard"].page-current) .statusbar,
body:has(.page[data-name*="dashboard"].page-current) .statusbar,
#app:has(.page[data-name*="dashboard"]:not(.page-previous):not(.page-next)) .statusbar,
body:has(.page[data-name*="dashboard"]:not(.page-previous):not(.page-next)) .statusbar,
.page-current[data-name*="dashboard"] ~ .statusbar,
.page[data-name*="dashboard"].page-current ~ .statusbar {
  background: #1e3a8a !important;
  background-color: #1e3a8a !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header navbar khusus admin-dashboard & kaling-dashboard agar serasi bergradien biru */
.page[data-name="admin-dashboard"] .navbar,
.page[data-name="admin-dashboard"] .navbar-bg,
.page[data-name="kaling-dashboard"] .navbar,
.page[data-name="kaling-dashboard"] .navbar-bg {
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.page[data-name="admin-dashboard"] .navbar .title,
.page[data-name="kaling-dashboard"] .navbar .title {
  color: #ffffff !important;
}

/* Tombol aksi ikon pada navbar biru (Admin & Kaling) bergaya glassmorphism transparan elegan (bukan kotak putih polos) */
.page[data-name="admin-dashboard"] .navbar .link.icon-only,
.page[data-name="admin-dashboard"] .navbar .left .link,
.page[data-name="admin-dashboard"] .navbar .right .link.icon-only,
.page[data-name="admin-dashboard"] .navbar .btn-open-profile-modal,
.page[data-name="kaling-dashboard"] .navbar .link.icon-only,
.page[data-name="kaling-dashboard"] .navbar .left .link,
.page[data-name="kaling-dashboard"] .navbar .right .link.icon-only {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.page[data-name="admin-dashboard"] .navbar .link.icon-only:hover,
.page[data-name="admin-dashboard"] .navbar .left .link:hover,
.page[data-name="admin-dashboard"] .navbar .right .link.icon-only:hover,
.page[data-name="admin-dashboard"] .navbar .btn-open-profile-modal:hover,
.page[data-name="kaling-dashboard"] .navbar .link.icon-only:hover,
.page[data-name="kaling-dashboard"] .navbar .left .link:hover,
.page[data-name="kaling-dashboard"] .navbar .right .link.icon-only:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

.page[data-name="admin-dashboard"] .navbar .link.icon-only i,
.page[data-name="admin-dashboard"] .navbar .left .link i,
.page[data-name="admin-dashboard"] .navbar .btn-open-profile-modal i,
.page[data-name="kaling-dashboard"] .navbar .link.icon-only i,
.page[data-name="kaling-dashboard"] .navbar .left .link i {
  color: #ffffff !important;
  font-size: 22px !important;
}

/* Tombol Logout pada Navbar Biru: Aksen Merah Lembut yang Tegas dan Jelas */
.page[data-name="admin-dashboard"] .navbar .right a[title="Keluar"],
.page[data-name="admin-dashboard"] .navbar .right a[onclick*="logout"],
.page[data-name="kaling-dashboard"] .navbar .right a[title="Keluar"],
.page[data-name="kaling-dashboard"] .navbar .right a[onclick*="logout"] {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1px solid rgba(239, 68, 68, 0.42) !important;
  color: #ffffff !important;
}

.page[data-name="admin-dashboard"] .navbar .right a[title="Keluar"]:hover,
.page[data-name="admin-dashboard"] .navbar .right a[onclick*="logout"]:hover,
.page[data-name="kaling-dashboard"] .navbar .right a[title="Keluar"]:hover,
.page[data-name="kaling-dashboard"] .navbar .right a[onclick*="logout"]:hover {
  background: rgba(239, 68, 68, 0.45) !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
}

.page[data-name="admin-dashboard"] .navbar .right a[title="Keluar"] i,
.page[data-name="admin-dashboard"] .navbar .right a[onclick*="logout"] i,
.page[data-name="kaling-dashboard"] .navbar .right a[title="Keluar"] i,
.page[data-name="kaling-dashboard"] .navbar .right a[onclick*="logout"] i {
  color: #fca5a5 !important;
  font-size: 22px !important;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--sigap-bg-page, #f8fafc);
}

/* ---------------------------------------------------------
   NAVBAR & HEADER STYLING (STANDARDIZED & UNIFORM ACROSS ALL DEVICES)
   Modern Clean Slate & Pro-GovTech Style
   --------------------------------------------------------- */
:root {
  --sigap-navbar-height: 56px;
}

.navbar {
  --f7-navbar-height: var(--sigap-navbar-height, 56px);
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(var(--sigap-navbar-height, 56px) + env(safe-area-inset-top, 0px)) !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sigap-navbar-border, #e2e8f0) !important;
  color: var(--sigap-navbar-text, #0f172a) !important;
  box-shadow: var(--sigap-navbar-shadow, 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)) !important;
  z-index: 500 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  z-index: 0 !important;
}

.navbar-inner {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: var(--sigap-navbar-height, 56px) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  gap: 8px !important;
}

.navbar .left,
.navbar .right {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  z-index: 20 !important;
  gap: 4px !important;
}

.navbar .title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 800 !important;
  color: var(--sigap-navbar-text, #0f172a) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  z-index: 10 !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.navbar .title span,
.navbar .title div:not(.sigap-stepper-wrap) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
}

.navbar .title i,
.navbar .title .icon {
  color: var(--sigap-primary, #2563eb) !important;
  font-size: 20px !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Universal Icon Action Buttons in Navbar (Clean Slate 36x36 Squircle on all devices) */
.navbar .link.icon-only,
.navbar .left .link.icon-only,
.navbar .right .link.icon-only,
.navbar .link.back.icon-only {
  color: var(--sigap-navbar-icon, #334155) !important;
  background: var(--sigap-navbar-btn-bg, #f8fafc) !important;
  border: 1px solid var(--sigap-navbar-btn-border, #e2e8f0) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.navbar .link.icon-only:hover,
.navbar .link.icon-only:active,
.navbar .left .link.icon-only:hover,
.navbar .right .link.icon-only:hover {
  background: var(--sigap-primary-subtle, #eff6ff) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: var(--sigap-primary, #2563eb) !important;
  transform: scale(0.96);
}

.navbar .link.icon-only i,
.navbar .link.icon-only .icon {
  color: inherit !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Navbar Buttons with Text (e.g. Tambah, Peta Penuh, Simpan) - Never Squashed to 36px */
.navbar .button,
.navbar a.button,
.navbar .button.link,
.navbar .link.button,
.navbar .right .button,
.navbar .left .button {
  background: var(--sigap-primary, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-transform: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar .button:hover,
.navbar a.button:hover,
.navbar .button.link:hover,
.navbar .link.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.navbar .right .button i,
.navbar .left .button i {
  color: #ffffff !important;
  font-size: 16px !important;
}

.navbar .right .button:hover,
.navbar .right .button:active,
.navbar .left .button:hover,
.navbar .left .button:active {
  background: var(--sigap-primary-hover, #1d4ed8) !important;
  transform: scale(0.97);
}

/* Universal Responsive Page Container */
.sigap-page-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  box-sizing: border-box;
  width: 100%;
}

/* Stepper Component for Duktang Multi-Step Forms */
.sigap-stepper-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.sigap-stepper-step {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  flex-shrink: 0;
}

.sigap-stepper-step.completed {
  background: #eff6ff !important;
  border: 1.5px solid #93c5fd !important;
  color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}

.sigap-stepper-step.completed:hover,
.sigap-stepper-step.completed:active {
  background: #dbeafe !important;
}

.sigap-stepper-step.active-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  background: #2563eb !important;
  color: #ffffff !important;
  padding: 2px 10px 2px 3px !important;
  border-radius: 20px !important;
  height: 25px !important;
  width: auto !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  flex-shrink: 0 !important;
}

.sigap-stepper-step.active-pill .step-circle {
  width: 19px;
  height: 19px;
  min-width: 19px;
  border-radius: 50%;
  background: #ffffff !important;
  color: #2563eb !important;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sigap-stepper-step.active-pill .step-label {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.sigap-stepper-step.inactive {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #94a3b8 !important;
}

.sigap-stepper-line {
  width: 8px;
  min-width: 3px;
  height: 2px;
  background: #cbd5e1;
  border-radius: 2px;
  flex-shrink: 1;
}

/* Progress Track & Fill under Navbar Header (Duktang Forms) */
.sigap-navbar-progress-track {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
  z-index: 25 !important;
}

.sigap-navbar-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #2563eb, #38bdf8) !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.4) !important;
  border-radius: 0 3px 3px 0 !important;
  transition: width 0.3s ease !important;
}

/* =========================================================
   STANDARDIZED RESPONSIVE NAVBAR & STEPPER HEADER (ALL SCREEN SIZES)
   ========================================================= */
/* Mobile Compact Screens (< 380px): Graceful fit with balanced spacing */
@media (max-width: 379.98px) {
  .navbar-inner {
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .navbar .title {
    font-size: 14px !important;
    padding: 0 2px !important;
  }
  .navbar .link.icon-only,
  .navbar .left .link,
  .navbar .right .link.icon-only {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .navbar .link i,
  .navbar .icon {
    font-size: 20px !important;
  }
  .navbar .right {
    gap: 2px !important;
  }
  .sigap-stepper-wrap {
    gap: 3px !important;
  }
  .sigap-stepper-line {
    width: 5px !important;
    min-width: 2px !important;
  }
  .sigap-stepper-step {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    font-size: 10px !important;
  }
  .sigap-stepper-step.active-pill {
    height: 23px !important;
    padding: 2px 7px 2px 2px !important;
  }
  .sigap-stepper-step.active-pill .step-circle {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    font-size: 9px !important;
  }
  .sigap-stepper-step.active-pill .step-label {
    font-size: 10px !important;
    max-width: 52px !important;
  }
}

/* Very Narrow Screens (< 340px): Prevent header overflow */
@media (max-width: 339.98px) {
  .sigap-stepper-line {
    display: none !important;
  }
  .sigap-stepper-step.active-pill .step-label {
    display: none !important;
  }
  .sigap-stepper-step.active-pill {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}

/* Tablet & Desktop Header Spacing (>= 768px) */
@media (min-width: 768px) {
  .navbar-inner {
    padding: 0 16px !important;
  }
  .navbar .title {
    font-size: 16px !important;
  }
  .sigap-stepper-wrap {
    max-width: 440px !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }
  .sigap-stepper-line {
    width: 14px !important;
  }
}

/* Responsive Collapse for Navbar Right Action Buttons on Small Screens */
@media (max-width: 479.98px) {
  .navbar .right .button.button-small span {
    display: none !important;
  }
  .navbar .right .button.button-small {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }
  .navbar .right .button.button-small i {
    margin: 0 !important;
    font-size: 18px !important;
  }
}

/* Step Sub-Header Banner (Full-Width Edge-to-Edge like Navbar Stepper) */
.sigap-step-header-banner {
  background: #ffffff;
  border-bottom: 1.5px solid #e2e8f0;
  padding: 18px 16px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Floating Action Button (FAB Extended Pill like WhatsApp / Contacts) */
.sigap-fab-wrap {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  pointer-events: auto !important;
}

.sigap-fab-btn {
  height: 48px;
  padding: 0 20px 0 14px;
  border-radius: 28px;
  border: none;
  font-size: 13.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: none;
  color: #ffffff !important;
  cursor: pointer;
  pointer-events: auto !important;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.sigap-fab-btn * {
  pointer-events: none;
}

.sigap-fab-btn.blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4), 0 2px 6px rgba(15, 23, 42, 0.15);
}

.sigap-fab-btn.purple {
  background: linear-gradient(135deg, #9333ea, #7e22ce);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.38), 0 2px 6px rgba(15, 23, 42, 0.15);
}

.sigap-fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.48), 0 4px 10px rgba(15, 23, 42, 0.2);
}

.sigap-fab-btn.purple:hover {
  box-shadow: 0 12px 28px rgba(147, 51, 234, 0.45), 0 4px 10px rgba(15, 23, 42, 0.2);
}

.sigap-fab-btn:active {
  transform: scale(0.93) translateY(1px);
}

.sigap-fab-btn .fab-icon-disc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   SIDEBAR DRAWER (Clean Slide-out Panel & High Contrast)
   --------------------------------------------------------- */
.panel-left {
  background: var(--sigap-sidebar-bg) !important;
  color: var(--sigap-sidebar-text) !important;
  width: 280px !important;
  max-width: 80vw !important;
  border-right: 1px solid var(--sigap-sidebar-border) !important;
  box-shadow: var(--sigap-sidebar-shadow) !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.panel-left .page,
.panel-left .page-content,
.panel-left .sidebar-page,
.panel-left .page.no-navbar .page-content {
  background: var(--sigap-sidebar-bg) !important;
  color: var(--sigap-sidebar-text) !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
  --f7-page-navbar-offset: 0px !important;
  --f7-page-toolbar-top-offset: 0px !important;
  --f7-page-subnavbar-offset: 0px !important;
  --f7-page-searchbar-offset: 0px !important;
  --f7-page-content-extra-padding-top: 0px !important;
  --f7-safe-area-top: 0px !important;
  --f7-statusbar-height: 0px !important;
}

.with-statusbar .panel-left,
.with-statusbar .panel-left .page,
.with-statusbar .panel-left .page-content,
.with-statusbar .panel-left .sidebar-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
}

.panel-left .list,
.panel-left .list ul {
  background: transparent !important;
  margin: 0 !important;
}

.panel-left .list ul::before,
.panel-left .list ul::after {
  display: none !important;
}

.panel-left .item-content {
  background: transparent !important;
  padding-left: 10px !important;
  min-height: 44px !important;
}

.panel-left .item-inner {
  border: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.panel-left .item-inner::after {
  display: none !important;
}

.panel-left .item-title {
  color: var(--sigap-sidebar-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  transition: color 0.15s ease;
}

.panel-left .item-link {
  color: var(--sigap-sidebar-text) !important;
  border-radius: 12px;
  margin: 4px 10px;
  padding: 6px 10px;
  min-height: 44px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-left .item-link .item-media i {
  font-size: 21px !important;
  transition: color 0.15s ease;
}

.panel-left .item-link:hover,
.panel-left .item-link:active {
  background: var(--sigap-sidebar-item-hover-bg) !important;
  transform: translateX(3px);
}

.panel-left .item-link:hover .item-title,
.panel-left .item-link:active .item-title {
  color: var(--sigap-sidebar-title) !important;
}

.panel-left .item-link.router-link-active,
.panel-left .item-link.active-state {
  background: var(--sigap-sidebar-item-active-bg) !important;
}

.panel-left .item-link.router-link-active .item-title,
.panel-left .item-link.active-state .item-title {
  color: var(--sigap-sidebar-item-active-text) !important;
  font-weight: 800 !important;
}

.panel-left .item-after .badge {
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------
   SIDEBAR TREEVIEW & COLLAPSIBLE SUBMENU (SPACIOUS & LEGA)
   --------------------------------------------------------- */
.sidebar-tree-group {
  margin: 6px 0;
  transition: all 0.2s ease;
}

.sidebar-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  min-height: 48px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-tree-header:hover {
  background: var(--sigap-sidebar-item-hover-bg);
  transform: translateX(2px);
}

.sidebar-tree-header:active {
  transform: scale(0.98);
}

.sidebar-tree-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.sidebar-tree-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-tree-icon i {
  font-size: 20px !important;
}

.sidebar-tree-info {
  min-width: 0;
  flex: 1;
}

.sidebar-tree-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--sigap-sidebar-title);
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-tree-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sidebar-tree-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--sigap-sidebar-item-hover-bg);
  color: var(--sigap-sidebar-text-muted);
  border: 1px solid var(--sigap-sidebar-border);
  line-height: 1.2;
}

.sidebar-tree-chevron {
  font-size: 20px !important;
  color: var(--sigap-sidebar-text-muted);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Open State for Tree Group */
.sidebar-tree-group.is-open .sidebar-tree-chevron {
  transform: rotate(180deg);
}

.sidebar-tree-group.is-open>.sidebar-tree-header {
  background: var(--sigap-sidebar-item-hover-bg);
}

.sidebar-tree-children {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.sidebar-tree-group.is-open .sidebar-tree-children {
  max-height: 600px;
  opacity: 1;
}

.sidebar-tree-sublist {
  list-style: none !important;
  margin: 4px 10px 8px 24px !important;
  padding: 4px 0 4px 14px !important;
  border-left: 2px solid var(--sigap-sidebar-border) !important;
  position: relative;
}

.sidebar-tree-sublist li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 10px;
  margin: 4px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sigap-sidebar-text) !important;
  text-decoration: none !important;
  min-height: 38px;
  position: relative;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-sublink-icon {
  font-size: 18px !important;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.sidebar-sublink-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

.sidebar-badge-sm {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  height: auto !important;
  line-height: 1.4 !important;
  border-radius: 4px !important;
}

.sidebar-sublink:hover {
  background: var(--sigap-sidebar-item-hover-bg) !important;
  color: var(--sigap-sidebar-title) !important;
  transform: translateX(3px);
}

.sidebar-sublink:hover .sidebar-sublink-icon {
  transform: scale(1.1);
}

.sidebar-sublink.active,
.sidebar-sublink.router-link-active {
  background: var(--sigap-sidebar-item-active-bg) !important;
  color: var(--sigap-sidebar-item-active-text) !important;
  font-weight: 700 !important;
}

.sidebar-sublink.active .sidebar-sublink-title,
.sidebar-sublink.router-link-active .sidebar-sublink-title {
  color: var(--sigap-sidebar-item-active-text) !important;
}

.brand-logo-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 16px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--sigap-sidebar-border);
  gap: 6px !important;
}

.brand-badge {
  width: 46px !important;
  height: 46px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28) !important;
  margin-bottom: 2px !important;
  flex-shrink: 0 !important;
}

.brand-badge i {
  font-size: 26px !important;
  color: #ffffff !important;
}

.brand-title {
  color: var(--sigap-sidebar-title) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.brand-sub {
  color: var(--sigap-sidebar-text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1px !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   CARDS & WIDGETS
   --------------------------------------------------------- */
.sigap-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-widget {
  padding: 18px 20px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.stat-icon.green {
  background: #ecfdf5;
  color: #10b981;
}

.stat-icon.amber {
  background: #fffbeb;
  color: #f59e0b;
}

.stat-icon.red {
  background: #fef2f2;
  color: #ef4444;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
}

/* Responsive Modern Stat Cards Grid */
.sigap-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 16px 20px;
}

@media (min-width: 768px) {
  .sigap-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.sigap-stat-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sigap-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.sigap-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
}

.sigap-stat-card.card-blue::before {
  background: #2563eb;
}

.sigap-stat-card.card-green::before {
  background: #10b981;
}

.sigap-stat-card.card-amber::before {
  background: #f59e0b;
}

.sigap-stat-card.card-red::before {
  background: #ef4444;
}

.sigap-stat-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}

.sigap-stat-icon-wrapper.blue {
  background: #eff6ff;
  color: #2563eb;
}

.sigap-stat-icon-wrapper.green {
  background: #ecfdf5;
  color: #10b981;
}

.sigap-stat-icon-wrapper.amber {
  background: #fffbeb;
  color: #f59e0b;
}

.sigap-stat-icon-wrapper.red {
  background: #fef2f2;
  color: #ef4444;
}

.sigap-stat-number {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.sigap-stat-title {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 700;
  margin-top: 2px;
}

/* ---------------------------------------------------------
   AUTH & LOGIN FORM STYLING
   --------------------------------------------------------- */
.auth-page-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 16px;
  box-sizing: border-box;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  margin: auto 0;
  box-sizing: border-box;
}

.auth-header {
  text-align: center;
  margin-bottom: 26px;
}

.auth-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 32px;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.auth-title {
  font-size: 23px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin: 0;
}

.auth-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

.auth-input-group {
  margin-bottom: 18px;
}

.auth-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 7px;
}

.auth-input-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 0 14px;
  transition: all 0.2s;
  height: 50px;
  box-sizing: border-box;
}

.auth-input-box:focus-within {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.auth-input-box input,
.auth-input-box select {
  width: 100%;
  padding: 12px 10px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  font-family: inherit;
}

.auth-input-box i {
  color: #94a3b8;
  font-size: 22px;
}

.auth-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15.5px;
  padding: 0 16px;
  border-radius: 14px;
  text-transform: none;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   STATUS BADGES
   --------------------------------------------------------- */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-status.pending {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #ffedd5;
}

.badge-status.diverifikasi {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #dcfce7;
}

.badge-status.ditolak {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fee2e2;
}

.badge-status.selesai {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* =========================================================
   ✨ NEW PREMIUM LINMAS MOBILE UI (REFERENSI GAMBAR) ✨
   ========================================================= */

/* Container wrapper - 100% full width across all screen sizes */
.linmas-page-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  position: relative;
  min-height: 100%;
  background: #f8fafc;
}

/* Modern Clean Slate & Pro-GovTech Royal Blue Hero Header (Seamless with Status Bar) */
.linmas-top-header {
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 60%, #2563eb 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 56px 18px;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  position: relative;
  box-shadow: 0 12px 30px rgba(30, 58, 138, 0.22);
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 959.98px) {
  .linmas-top-header {
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px 50px 24px !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
  }
}

/* =========================================================
   FIXED SLIM CURVED FOOTER KHUSUS DASHBOARD
   Terkunci di paling bawah layar (tidak ikut scroll), ramping & hemat ruang
   ========================================================= */
.dashboard-fixed-footer,
.dashboard-curved-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  line-height: 28px !important;
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  color: #ffffff !important;
  z-index: 400 !important;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dashboard-fixed-footer span,
.dashboard-curved-footer-simple {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Berikan padding-bottom pada page-content agar konten dashboard paling bawah tidak tertutup footer */
.page[data-name="petugas-dashboard"] > .page-content,
.page[data-name="admin-dashboard"] > .page-content,
.page[data-name="kaling-dashboard"] > .page-content {
  padding-bottom: 38px !important;
}

.linmas-user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.linmas-greeting {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.linmas-subgreeting {
  font-size: 13px;
  color: #93c5fd;
  font-weight: 500;
  margin-top: 2px;
}

.linmas-bell-btn {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.linmas-bell-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.linmas-bell-btn:active {
  transform: scale(0.92);
}

.linmas-bell-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

/* Search Bar inside Header */
.linmas-search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 11px 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.linmas-search-box i {
  color: #93c5fd;
  font-size: 20px;
  margin-right: 10px;
}

.linmas-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
}

.linmas-search-box input::placeholder {
  color: #93c5fd;
  opacity: 0.85;
}

/* Floating Total Balance / Summary Card */
.linmas-floating-card {
  background: var(--sigap-bg-card, #ffffff);
  border-radius: 24px;
  padding: 20px 22px;
  margin: -45px 16px 20px 16px;
  box-shadow: var(--sigap-card-shadow, 0 10px 30px rgba(15, 23, 42, 0.06));
  border: 1px solid var(--sigap-border, #e2e8f0);
  position: relative;
  z-index: 10;
}

.linmas-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.linmas-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.linmas-card-number {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -1px;
  margin: 6px 0 8px 0;
  line-height: 1.1;
}

.linmas-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}

/* Sparkline Wave Chart (SVG) */
.linmas-sparkline {
  margin-top: 12px;
  width: 100%;
  height: 50px;
}

/* Section Header */
.linmas-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 14px;
}

.linmas-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.linmas-pill-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* 4-Grid Soft Pastel Stats Cards */
.linmas-pastel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 18px;
  margin-bottom: 26px;
}

.pastel-card {
  border-radius: 22px;
  padding: 16px 18px;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.pastel-card:active {
  transform: scale(0.97);
}

.pastel-card.green {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
}

.pastel-card.amber {
  background: #fffbeb;
  border: 1px solid #fef3c7;
}

.pastel-card.blue {
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.pastel-card.pink {
  background: #fef2f2;
  border: 1px solid #fee2e2;
}

.pastel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.circular-progress-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  position: relative;
}

.pastel-card.green .circular-progress-pill {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.pastel-card.amber .circular-progress-pill {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.pastel-card.blue .circular-progress-pill {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.pastel-card.pink .circular-progress-pill {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.pastel-arrow-icon {
  font-size: 18px;
  font-weight: 700;
}

.pastel-card.green .pastel-arrow-icon {
  color: #059669;
}

.pastel-card.amber .pastel-arrow-icon {
  color: #d97706;
}

.pastel-card.blue .pastel-arrow-icon {
  color: #2563eb;
}

.pastel-card.pink .pastel-arrow-icon {
  color: #dc2626;
}

.pastel-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.pastel-card-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin-top: 1px;
}

.pastel-card-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 8px;
  letter-spacing: -0.3px;
}

/* Recent List Items */
.linmas-recent-container {
  padding: 0 18px 24px 18px;
}

.linmas-recent-item {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s;
}

.linmas-recent-item:active {
  transform: scale(0.98);
}

.linmas-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  margin-right: 14px;
}

.linmas-avatar.avatar-blue {
  background: #eff6ff;
  color: #2563eb;
}

.linmas-avatar.avatar-green {
  background: #ecfdf5;
  color: #10b981;
}

.linmas-avatar.avatar-amber {
  background: #fffbeb;
  color: #f59e0b;
}

.linmas-item-info {
  flex-grow: 1;
  overflow: hidden;
}

.linmas-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linmas-item-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.linmas-item-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}

.linmas-item-status {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

/* =========================================================
   DASHBOARD MUTASI SEGMENTED 3-TAB BAR (MASUK, KELUAR, PENDATAAN)
   ========================================================= */
.dashboard-mutasi-tab-bar {
  display: flex;
  background: #e2e8f0;
  padding: 4px;
  border-radius: 14px;
  gap: 4px;
}

.dashboard-tab-btn {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  cursor: pointer;
  outline: none;
}

.dashboard-tab-btn:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #0f172a !important;
}

.dashboard-tab-btn.active {
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1) !important;
}

.dashboard-tab-btn.active[data-tab-type="masuk"] {
  color: #059669 !important;
}

.dashboard-tab-btn.active[data-tab-type="keluar"] {
  color: #dc2626 !important;
}

.dashboard-tab-btn.active[data-tab-type="pendataan"] {
  color: #1d4ed8 !important;
}

/* =========================================================
   OFFLINE QUEUE & CACHE SYNC CARDS & LISTVIEW STYLES
   ========================================================= */
.offline-sync-card {
  border-radius: 18px;
  padding: 13px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.offline-sync-card:active {
  transform: scale(0.98);
}

.offline-sync-card.has-queue {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid #fdba74;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.15);
}

.offline-sync-card.is-synced {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.offline-sync-card.is-offline {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.22) !important;
  animation: offlineCardAlertPulse 2.5s infinite ease-in-out;
}

@keyframes offlineCardAlertPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4), 0 4px 14px rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
  }

  50% {
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.15), 0 4px 18px rgba(239, 68, 68, 0.25);
    border-color: #dc2626;
  }
}

.offline-pulse-icon-red {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #dc2626;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.offline-pulse-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ea580c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(234, 88, 12, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
  }
}

.offline-queue-item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.popup-offline-sync .page-content,
.popup-catat-masuk .page-content,
.popup-catat-keluar .page-content {
  padding-top: calc(var(--f7-navbar-height, 56px) + 20px) !important;
  box-sizing: border-box;
}

/* =========================================================
/* =========================================================
   UNIVERSAL POPUP & MODAL SYSTEM (ULTRA-SMOOTH, FAST, NO-SIDE-SLIDE)
   ========================================================= */
.popup-backdrop {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.45) !important;
  transition: opacity 0.18s ease !important;
  z-index: 12000 !important;
}

.popup-backdrop:not(.backdrop-in) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

.popup {
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Modal Open state */
.popup.modal-in,
.popup.popup-in {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 13000 !important;
}

/* Modal Closing state */
.popup.modal-out,
.popup.popup-out {
  display: flex !important;
  pointer-events: none !important;
  visibility: visible !important;
  z-index: 13000 !important;
}

/* Completely inactive modals only */
.popup:not(.modal-in):not(.popup-in):not(.modal-out):not(.popup-out) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* MOBILE (< 768px): Fullscreen Bottom-to-Top Sheet Modal (Slides Down on Close, NEVER to the side) */
@media (max-width: 767.98px) {
  .popup.modal-in,
  .popup.popup-in,
  .popup.modal-out,
  .popup.popup-out {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 13000 !important;
    background: #ffffff !important;
    visibility: visible !important;
  }

  /* Mobile Open: Smooth, snappy slide-up */
  .popup.modal-in,
  .popup.popup-in {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease !important;
  }

  /* Mobile Close: Fast, clean slide straight DOWN off the screen (Zero horizontal drifting) */
  .popup.modal-out,
  .popup.popup-out {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s ease !important;
  }

  .popup-camera-fullscreen.modal-in,
  .popup-camera-fullscreen.popup-in,
  .popup-camera-fullscreen.modal-out,
  .popup-camera-fullscreen.popup-out,
  #popup-camera.modal-in,
  #popup-camera.popup-in,
  #popup-camera.modal-out,
  #popup-camera.popup-out,
  #popup-camera-ktp.modal-in,
  #popup-camera-ktp.popup-in,
  #popup-camera-ktp.modal-out,
  #popup-camera-ktp.popup-out,
  #popup-camera-verif.modal-in,
  #popup-camera-verif.popup-in,
  #popup-camera-verif.modal-out,
  #popup-camera-verif.popup-out,
  #popup-camera-face-search.modal-in,
  #popup-camera-face-search.popup-in,
  #popup-camera-face-search.modal-out,
  #popup-camera-face-search.popup-out {
    background: #000000 !important;
    z-index: 13500 !important;
  }

  .popup .page,
  .popup>.page,
  .popup .view>.page {
    border-radius: 0 !important;
    height: 100% !important;
  }

  .popup .sheet-header-luxury,
  .popup .navbar,
  .popup .popup-fixed-footer {
    border-radius: 0 !important;
  }
}

/* DESKTOP & TABLET DISPLAY (>= 768px): Centered Floating Dialog in the Exact Middle (Zero Side-Drifting) */
@media (min-width: 768px) {
  .popup.modal-in,
  .popup.popup-in,
  .popup.modal-out,
  .popup.popup-out {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 92vw !important;
    max-width: 620px !important;
    height: auto !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    border-radius: 24px !important;
    margin: 0 !important;
    box-shadow: 0 25px 70px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background: #ffffff !important;
    z-index: 13000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    visibility: visible !important;
  }

  /* Desktop Open: Elegant centered pop */
  .popup.modal-in,
  .popup.popup-in {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease !important;
  }

  /* Desktop Close: Fast, centered scale-down & fade-out (Stays strictly centered, never jumps to the edge) */
  .popup.modal-out,
  .popup.popup-out {
    transform: translate(-50%, -50%) scale(0.95) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.16s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.14s ease !important;
  }

  /* Camera Modals Centered on Desktop */
  .popup-camera-fullscreen.modal-in,
  .popup-camera-fullscreen.popup-in,
  #popup-camera.modal-in,
  #popup-camera.popup-in,
  #popup-camera-ktp.modal-in,
  #popup-camera-ktp.popup-in,
  #popup-camera-verif.modal-in,
  #popup-camera-verif.popup-in,
  #popup-camera-face-search.modal-in,
  #popup-camera-face-search.popup-in,
  #popup-ai-analysis.modal-in,
  #popup-ai-analysis.popup-in {
    width: 90vw !important;
    max-width: 480px !important;
    height: 82vh !important;
    max-height: 720px !important;
    min-height: 520px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 28px !important;
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    z-index: 13500 !important;
  }

  /* Wide Modals for Tables / Permission Matrix / Maps / Edit Duktang / Report Forms */
  .popup.popup-wide.modal-in,
  .popup.popup-wide.popup-in,
  .popup.popup-tablet-fullscreen.modal-in,
  .popup.popup-tablet-fullscreen.popup-in,
  .popup.popup-edit-duktang.modal-in,
  .popup#popup-edit-duktang.modal-in,
  .popup#popup-modal-permission-matrix.modal-in,
  .popup.popup-rekapan-data.modal-in,
  .popup#popup-rekapan-data.modal-in,
  .popup.popup-subkat-map-picker.modal-in,
  .popup#popup-gps-map.modal-in,
  .popup#popup-detail-mutasi-dashboard.modal-in,
  .popup#popup-form-pendataan.modal-in,
  .popup#popup-modal-user-form.modal-in {
    max-width: 860px !important;
    width: 92vw !important;
    height: 88vh !important;
    max-height: 88vh !important;
  }

  .popup .page,
  .popup>.page,
  .popup .view>.page {
    border-radius: 24px !important;
    max-height: 88vh !important;
    height: 100% !important;
  }

  .popup .sheet-header-luxury,
  .popup .navbar {
    border-radius: 24px 24px 0 0 !important;
  }

  .popup .popup-fixed-footer {
    border-radius: 0 0 24px 24px !important;
  }
}

.popup .view {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.popup .page,
.popup>.page,
.popup .view>.page {
  border-radius: 0 !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Sheet Top Grabber / Pill Handle - Hidden completely */
.sheet-grabber-pill {
  display: none !important;
}

/* 1. Header Popup Standardized (Matches Main Page Header Clean Slate Pro-GovTech) */
.popup .navbar {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  z-index: 500 !important;
  height: calc(var(--sigap-navbar-height, 56px) + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--sigap-navbar-height, 56px) + env(safe-area-inset-top, 0px)) !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  border-bottom: 1px solid var(--sigap-navbar-border, #e2e8f0) !important;
  color: var(--sigap-navbar-text, #0f172a) !important;
  box-shadow: var(--sigap-navbar-shadow, 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)) !important;
}

.popup .navbar-bg {
  border-radius: inherit !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  height: 100% !important;
}

.popup .navbar-inner {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: var(--sigap-navbar-height, 56px) !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

.popup .navbar .title {
  color: var(--sigap-navbar-text, #0f172a) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.popup .navbar .title i,
.popup .navbar .title .icon {
  color: var(--sigap-primary, #2563eb) !important;
  font-size: 20px !important;
}

.popup .navbar .link {
  color: var(--sigap-navbar-icon, #334155) !important;
  background: var(--sigap-navbar-btn-bg, #f8fafc) !important;
  border: 1px solid var(--sigap-navbar-btn-border, #e2e8f0) !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.popup .navbar .link:hover,
.popup .navbar .link:active {
  background: var(--sigap-primary-subtle, #eff6ff) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: var(--sigap-primary, #2563eb) !important;
  transform: scale(0.96) !important;
}

.popup .navbar .link i,
.popup .navbar .link .icon {
  color: inherit !important;
  font-size: 20px !important;
}

/* Luxury Modern Sheet Header Component (Clean Slate Pro-GovTech Style) */
.sheet-header-luxury {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  background: var(--sigap-navbar-bg, #ffffff) !important;
  border-bottom: 1px solid var(--sigap-navbar-border, #e2e8f0) !important;
  box-shadow: var(--sigap-navbar-shadow, 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02)) !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  z-index: 500 !important;
  min-height: 56px !important;
}

@media (max-width: 767.98px) {
  .popup .sheet-header-luxury {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (min-width: 768px) {
  .popup .sheet-header-luxury,
  .popup .navbar {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .popup .navbar-bg {
    border-radius: 24px 24px 0 0 !important;
  }
}

[data-theme="dark"] .sheet-header-luxury,
.theme-dark .sheet-header-luxury {
  background: var(--sigap-navbar-bg, #0f172a) !important;
  border-bottom-color: var(--sigap-navbar-border, rgba(255, 255, 255, 0.08)) !important;
}

.sheet-header-icon-box {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.sheet-header-icon-box.blue {
  background: var(--sigap-primary-subtle, #eff6ff) !important;
  color: var(--sigap-primary, #2563eb) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1) !important;
}

.sheet-header-icon-box.purple {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.1) !important;
}

.sheet-header-icon-box.green,
.sheet-header-icon-box.emerald {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1) !important;
}

.sheet-header-icon-box.amber {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1) !important;
}

.sheet-header-icon-box.red {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1) !important;
}

/* ==========================================================================
   GLOBAL HIGH-VISIBILITY CLOSE / KELUAR BUTTON FOR ALL POPUPS & FORMS
   (Warna Mencolok Merah Tegas & Kontras Tinggi - Berlaku untuk Semua Form & Modal)
   ========================================================================== */
.sheet-header-close-btn,
.navbar .link.popup-close,
.navbar a.link[class*="close"],
.navbar a.popup-close,
.navbar .right .link.popup-close,
.navbar .right a.popup-close,
.navbar .left .link.popup-close,
.navbar .left a.popup-close,
.popup .navbar .link.popup-close,
.popup .navbar .right .link.popup-close,
.popup .navbar .right a.popup-close,
.popup .navbar .right a.link[class*="close"],
.popup .navbar .right a.link.icon-only,
.popup .navbar .left .link.popup-close,
.popup .navbar .left a.popup-close,
.popup .navbar .left a.link[class*="close"],
.popup .navbar .left a.link.icon-only,
.popup-close-btn,
.btn-close-popup,
a.link.popup-close.icon-only,
.popup a[id*="btn-close-popup"],
.popup button[id*="btn-close-popup"],
.popup .right a[class*="close"],
.popup .right button[class*="close"],
.popup-detail-mutasi-dashboard .right a.link,
.popup-detail-mutasi-dashboard a.popup-close,
.popup-nik-existing .navbar .right a.link,
.sheet-modal .sheet-header-close-btn,
#popup-perlu-patroli .popup-close-btn,
#popup-perlu-patroli a.popup-close,
#popup-linmas-profil .popup-close-btn,
#popup-linmas-profil a.popup-close,
#popup-linmas-profil .navbar .right a.link.popup-close,
.popup-system-notifications a.popup-close,
.popup-offline-sync a.popup-close,
#popup-sync-progress a.popup-close,
#popup-modal-permission-matrix a.popup-close,
#popup-modal-role-form a.popup-close,
#popup-manage-menu-item a.popup-close,
#popup-manage-menu-group a.popup-close,
#btn-close-popup-face-results,
a.link.popup-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1.5px solid #b91c1c !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.45) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
}

.sheet-header-close-btn i,
.sheet-header-close-btn .icon,
.navbar .link.popup-close i,
.navbar a.link[class*="close"] i,
.navbar a.popup-close i,
.navbar .right .link.popup-close i,
.navbar .right a.popup-close i,
.navbar .left .link.popup-close i,
.navbar .left a.popup-close i,
.popup .navbar .link.popup-close i,
.popup .navbar .right .link.popup-close i,
.popup .navbar .right .link.popup-close .icon,
.popup .navbar .right a.popup-close i,
.popup .navbar .right a.popup-close .icon,
.popup .navbar .right a.link[class*="close"] i,
.popup .navbar .right a.link.icon-only i,
.popup .navbar .left .link.popup-close i,
.popup .navbar .left a.popup-close i,
.popup .navbar .left a.link[class*="close"] i,
.popup .navbar .left a.link.icon-only i,
.popup-close-btn i,
.btn-close-popup i,
a.link.popup-close.icon-only i,
.popup a[id*="btn-close-popup"] i,
.popup button[id*="btn-close-popup"] i,
.popup .right a[class*="close"] i,
.popup .right button[class*="close"] i,
.popup-detail-mutasi-dashboard .right a.link i,
.popup-detail-mutasi-dashboard a.popup-close i,
.popup-nik-existing .navbar .right a.link i,
.sheet-modal .sheet-header-close-btn i,
#popup-perlu-patroli .popup-close-btn i,
#popup-perlu-patroli a.popup-close i,
#popup-linmas-profil .popup-close-btn i,
#popup-linmas-profil a.popup-close i,
#popup-linmas-profil .navbar .right a.link.popup-close i,
.popup-system-notifications a.popup-close i,
.popup-offline-sync a.popup-close i,
#popup-sync-progress a.popup-close i,
#popup-modal-permission-matrix a.popup-close i,
#popup-modal-role-form a.popup-close i,
#popup-manage-menu-item a.popup-close i,
#popup-manage-menu-group a.popup-close i,
#btn-close-popup-face-results i,
a.link.popup-close i {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: block !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.sheet-header-close-btn:hover,
.sheet-header-close-btn:active,
.navbar .link.popup-close:hover,
.navbar .link.popup-close:active,
.popup .navbar .right .link.popup-close:hover,
.popup .navbar .right .link.popup-close:active,
.popup .navbar .right a.popup-close:hover,
.popup .navbar .right a.popup-close:active,
.popup .navbar .right a.link[class*="close"]:hover,
.popup .navbar .right a.link[class*="close"]:active,
.popup .navbar .right a.link.icon-only:hover,
.popup .navbar .right a.link.icon-only:active,
.popup .navbar .left .link.popup-close:hover,
.popup .navbar .left .link.popup-close:active,
.popup .navbar .left a.popup-close:hover,
.popup .navbar .left a.popup-close:active,
.popup .navbar .left a.link[class*="close"]:hover,
.popup .navbar .left a.link[class*="close"]:active,
.popup .navbar .left a.link.icon-only:hover,
.popup .navbar .left a.link.icon-only:active,
.popup-close-btn:hover,
.popup-close-btn:active,
.btn-close-popup:hover,
.btn-close-popup:active,
a.link.popup-close.icon-only:hover,
a.link.popup-close.icon-only:active,
.popup a[id*="btn-close-popup"]:hover,
.popup a[id*="btn-close-popup"]:active,
#popup-perlu-patroli .popup-close-btn:hover,
#popup-perlu-patroli .popup-close-btn:active,
#popup-perlu-patroli a.popup-close:hover,
#popup-perlu-patroli a.popup-close:active,
#popup-linmas-profil .popup-close-btn:hover,
#popup-linmas-profil .popup-close-btn:active,
#btn-close-popup-face-results:hover,
#btn-close-popup-face-results:active,
a.link.popup-close:hover,
a.link.popup-close:active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #991b1b !important;
  color: #ffffff !important;
  transform: scale(0.92) !important;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.55) !important;
}

.sheet-header-close-btn:hover i,
.sheet-header-close-btn:active i,
.navbar .link.popup-close:hover i,
.navbar .link.popup-close:active i,
.popup .navbar .right .link.popup-close:hover i,
.popup .navbar .right .link.popup-close:active i,
.popup .navbar .right a.popup-close:hover i,
.popup .navbar .right a.popup-close:active i,
.popup .navbar .right a.link[class*="close"]:hover i,
.popup .navbar .right a.link[class*="close"]:active i,
.popup .navbar .right a.link.icon-only:hover i,
.popup .navbar .right a.link.icon-only:active i,
.popup .navbar .left .link.popup-close:hover i,
.popup .navbar .left .link.popup-close:active i,
.popup .navbar .left a.popup-close:hover i,
.popup .navbar .left a.popup-close:active i,
.popup-close-btn:hover i,
.popup-close-btn:active i,
a.link.popup-close.icon-only:hover i,
a.link.popup-close.icon-only:active i,
#popup-perlu-patroli .popup-close-btn:hover i,
#popup-perlu-patroli .popup-close-btn:active i,
#popup-linmas-profil .popup-close-btn:hover i,
#popup-linmas-profil .popup-close-btn:active i,
#btn-close-popup-face-results:hover i,
#btn-close-popup-face-results:active i,
a.link.popup-close:hover i,
a.link.popup-close:active i {
  color: #ffffff !important;
}

/* Dark Theme Support */
[data-theme="dark"] .sheet-header-close-btn,
.theme-dark .sheet-header-close-btn,
[data-theme="dark"] .navbar .link.popup-close,
.theme-dark .navbar .link.popup-close,
[data-theme="dark"] .popup .navbar .right .link.popup-close,
.theme-dark .popup .navbar .right .link.popup-close,
[data-theme="dark"] .popup .navbar .right a.popup-close,
.theme-dark .popup .navbar .right a.popup-close,
[data-theme="dark"] .popup-close-btn,
.theme-dark .popup-close-btn,
[data-theme="dark"] #popup-perlu-patroli .popup-close-btn,
.theme-dark #popup-perlu-patroli .popup-close-btn {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-color: #fb7185 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 14px rgba(244, 63, 94, 0.55) !important;
}

[data-theme="dark"] .sheet-header-close-btn i,
.theme-dark .sheet-header-close-btn i,
[data-theme="dark"] .navbar .link.popup-close i,
.theme-dark .navbar .link.popup-close i,
[data-theme="dark"] .popup .navbar .right .link.popup-close i,
.theme-dark .popup .navbar .right .link.popup-close i,
[data-theme="dark"] #popup-perlu-patroli .popup-close-btn i,
.theme-dark #popup-perlu-patroli .popup-close-btn i {
  color: #ffffff !important;
}

/* Modal Bottom Buttons Contrast Enhancement */
.popup .button.button-outline,
.sheet-modal .button.button-outline,
.button.button-outline.color-gray {
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}
.popup .button.button-outline:hover,
.popup .button.button-outline:active,
.sheet-modal .button.button-outline:hover,
.sheet-modal .button.button-outline:active,
.button.button-outline.color-gray:hover,
.button.button-outline.color-gray:active {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
[data-theme="dark"] .popup .button.button-outline,
.theme-dark .popup .button.button-outline,
[data-theme="dark"] .button.button-outline.color-gray,
.theme-dark .button.button-outline.color-gray {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

/* 2. Popup Modal Form Container */
.popup-modal-form,
.popup form.popup-modal-form,
.popup form#form-permission-matrix {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: calc(100% - 58px) !important;
  max-height: calc(100% - 58px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Luxury Input Field Styles */
.luxury-input-group {
  margin-bottom: 16px;
}

.luxury-input-label {
  font-size: 13.5px;
  font-weight: 750;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
  letter-spacing: -0.2px;
}

[data-theme="dark"] .luxury-input-label,
.theme-dark .luxury-input-label {
  color: #f1f5f9;
}

.luxury-input-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  min-height: 50px;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease;
  overflow: hidden;
}

.luxury-input-box:focus-within {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important;
}

[data-theme="dark"] .luxury-input-box,
.theme-dark .luxury-input-box {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .luxury-input-box:focus-within,
.theme-dark .luxury-input-box:focus-within {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22) !important;
}

.luxury-input-icon {
  display: none !important;
}

.luxury-input-control {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  height: 50px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: font-weight 0.12s ease, color 0.12s ease;
}

.luxury-input-control:focus {
  font-weight: 800 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  background: transparent !important;
}

[data-theme="dark"] .luxury-input-control,
.theme-dark .luxury-input-control {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .luxury-input-control:focus,
.theme-dark .luxury-input-control:focus {
  color: #ffffff !important;
}

.luxury-textarea-control {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  resize: vertical;
  min-height: 85px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: font-weight 0.12s ease, color 0.12s ease;
}

.luxury-textarea-control:focus {
  font-weight: 800 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  background: transparent !important;
}

[data-theme="dark"] .luxury-textarea-control,
.theme-dark .luxury-textarea-control {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .luxury-textarea-control:focus,
.theme-dark .luxury-textarea-control:focus {
  color: #ffffff !important;
}

/* Numeric & Code Inputs (NIK, No HP, Kode) - Clean Tabular Numbers */
.numeric-code-input,
input[type="number"],
input[type="tel"] {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.6px !important;
}

/* Luxury Submit Button */
.btn-luxury-submit {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.42);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-transform: none;
}

.btn-luxury-submit:active {
  transform: scale(0.985);
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
}

.btn-luxury-submit.purple {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.42);
}

/* 3. Scrollable Page Content inside Popup */
.popup .page-content,
.popup-modal-form .page-content {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* In popups where .page is flex and .navbar is in normal document flow, page-content must have padding-top: 0 */
.popup .page>.navbar~.page-content,
.popup-rekapan-data .page-content,
#popup-rekapan-data .page-content,
.popup-perlu-patroli .page-content,
#popup-perlu-patroli .page-content {
  padding-top: 0 !important;
}

/* Guaranteed display, header & layout styling for Perlu Patroli Modal */
#popup-perlu-patroli,
.popup-perlu-patroli {
  z-index: 15000 !important;
  background: var(--sigap-bg-page, #f8fafc) !important;
}

#popup-perlu-patroli .navbar {
  height: var(--sigap-navbar-height, 56px) !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

#popup-perlu-patroli .navbar-bg {
  background: #ffffff !important;
}

#popup-perlu-patroli .navbar-inner {
  height: var(--sigap-navbar-height, 56px) !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#popup-perlu-patroli .patroli-nav-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
  line-height: 1.25 !important;
}

#popup-perlu-patroli .patroli-nav-subtitle {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.2 !important;
}

html[data-theme="dark"] #popup-perlu-patroli .navbar,
body.theme-dark #popup-perlu-patroli .navbar,
html[data-theme="dark"] #popup-perlu-patroli .navbar-bg,
body.theme-dark #popup-perlu-patroli .navbar-bg {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

html[data-theme="dark"] #popup-perlu-patroli .patroli-nav-title,
body.theme-dark #popup-perlu-patroli .patroli-nav-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] #popup-perlu-patroli .patroli-nav-subtitle,
body.theme-dark #popup-perlu-patroli .patroli-nav-subtitle {
  color: #94a3b8 !important;
}

/* Guaranteed display, transform, and priority z-index for Rekapan & Cek Data Modal */
#popup-rekapan-data,
.popup-rekapan-data {
  z-index: 15000 !important;
  background: #f8fafc !important;
}

#popup-rekapan-data.modal-in,
#popup-rekapan-data.popup-in,
.popup-rekapan-data.modal-in,
.popup-rekapan-data.popup-in {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 15000 !important;
}

@media (min-width: 768px) {
  #popup-rekapan-data.modal-in,
  #popup-rekapan-data.popup-in,
  .popup-rekapan-data.modal-in,
  .popup-rekapan-data.popup-in {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    max-width: 680px !important;
    width: 92vw !important;
    height: 88vh !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767.98px) {
  #popup-rekapan-data.modal-in,
  #popup-rekapan-data.popup-in,
  .popup-rekapan-data.modal-in,
  .popup-rekapan-data.popup-in {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    border-radius: 0 !important;
  }
}

/* Auto Uppercase untuk Form Biodata Penduduk (Kecuali Alamat) */
#bio-nama,
#bio-tempat-lahir,
#text-tempat-lahir,
#bio-pekerjaan,
#text-pekerjaan,
#text-provinsi-asal,
#text-kabupaten-asal,
#text-kecamatan-asal,
#text-desa-asal,
#rekap-nama,
#rekap-tempat-lahir,
#rekap-agama,
#rekap-pekerjaan,
#rekap-tujuan,
#rekap-wilayah-asal,
.wilayah-picker-btn span {
  text-transform: uppercase;
}

#bio-alamat-asal,
#rekap-alamat-asal,
textarea[name="alamat_asal"],
.no-uppercase,
#popup-input-alamat-tujuan-keluar,
#popup-input-alamat-detail-baru-satu,
#popup-input-alamat-detail-baru-beda {
  text-transform: none !important;
}

/* Explicit Full-Height Scroll Engine for Popup Detail Mutasi Dashboard & Popup Form Pendataan */
.popup.popup-detail-mutasi-dashboard .view,
.popup#popup-detail-mutasi-dashboard .view,
.popup.popup-form-pendataan .view,
.popup#popup-form-pendataan .view {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

.popup.popup-detail-mutasi-dashboard .page,
.popup#popup-detail-mutasi-dashboard .page,
.popup.popup-form-pendataan .page,
.popup#popup-form-pendataan .page {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--sigap-bg-page, #f8fafc) !important;
}

.popup.popup-detail-mutasi-dashboard .navbar,
.popup#popup-detail-mutasi-dashboard .navbar,
.popup.popup-form-pendataan .navbar,
.popup#popup-form-pendataan .navbar {
  flex-shrink: 0 !important;
  height: 56px !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 500 !important;
}

.popup.popup-detail-mutasi-dashboard .page-content,
.popup#popup-detail-mutasi-dashboard .page-content,
.popup.popup-form-pendataan .page-content,
.popup#popup-form-pendataan .page-content,
#popup-detail-mutasi-dashboard-content {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  position: relative !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  box-sizing: border-box !important;
  padding: 16px 16px 95px !important;
}

/* 4. Universal Fixed Bottom Action Bar (Simpan / Batal Footer) */
.popup-fixed-footer {
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--sigap-bg-card, #ffffff) !important;
  border-top: 1px solid var(--sigap-border, #e2e8f0) !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
  z-index: 500 !important;
  position: relative !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.popup-fixed-footer button,
.popup-fixed-footer .button {
  margin: 0 !important;
}

/* Dark mode support */
[data-theme="dark"] .popup-fixed-footer,
.theme-dark .popup-fixed-footer {
  background: #1e293b !important;
  border-top-color: #334155 !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.3) !important;
}

/* Universal High-Visibility Popup Header Styling (Modern Clean Slate & Pro-GovTech) */
.popup .navbar .title,
.popup .navbar .title span,
.popup-tambah-pj .navbar .title,
.popup-tambah-subkat .navbar .title,
.popup-detail-duktang-cari .navbar .title,
.popup-form-pj .navbar .title,
.popup-form-kategori .navbar .title,
.popup-form-wilayah .navbar .title {
  color: var(--sigap-navbar-text, #0f172a) !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  text-shadow: none !important;
}

.popup .navbar .title i,
.popup .navbar .title .icon {
  color: var(--sigap-primary, #2563eb) !important;
  font-size: 20px !important;
}

.popup .navbar .link,
.popup .navbar .link i,
.popup .navbar .link .icon,
.popup-tambah-pj .navbar .link,
.popup-tambah-subkat .navbar .link,
.popup-detail-duktang-cari .navbar .link,
.popup-form-pj .navbar .link,
.popup-form-kategori .navbar .link,
.popup-form-wilayah .navbar .link {
  color: var(--sigap-navbar-icon, #334155) !important;
}

/* Dark Theme Overrides for Popup Headers */
html[data-theme="dark"] .popup .navbar .title,
html[data-theme="dark"] .popup .navbar .title span,
body.theme-dark .popup .navbar .title,
body.theme-dark .popup .navbar .title span {
  color: #ffffff !important;
}

html[data-theme="dark"] .popup .navbar .link,
html[data-theme="dark"] .popup .navbar .link i,
html[data-theme="dark"] .popup .navbar .link .icon,
body.theme-dark .popup .navbar .link,
body.theme-dark .popup .navbar .link i,
body.theme-dark .popup .navbar .link .icon {
  color: #cbd5e1 !important;
}


.mutasi-group-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin: 12px 0 8px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-hari-berjalan {
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}


/* Floating Pill Bottom Navigation (Removed - Globally Hidden) */
.linmas-pill-tabbar,
#linmas-global-tabbar {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Micro Sync Progress Track directly at Bottom of Tabbar */
.linmas-pill-tabbar .linmas-tabbar-sync-track {
  position: absolute;
  bottom: 0px;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  background: rgba(226, 232, 240, 0.4);
}

.linmas-pill-tabbar.is-syncing .linmas-tabbar-sync-track {
  opacity: 1;
}

.linmas-pill-tabbar .linmas-tabbar-sync-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #10b981);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.8);
  transition: width 0.22s ease-out;
}

/* =========================================================
   SIGAP FOOTER SYNC PROGRESS BAR (PREMIUM & ULTRA-LIGHT)
   ========================================================= */
.sigap-footer-sync-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sigap-footer-sync-container.sync-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.sigap-footer-sync-container.sync-visible {
  opacity: 1;
  transform: translateY(0);
}

.sigap-footer-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.2px;
}

html[data-theme="dark"] .sigap-footer-sync-pill,
body.theme-dark .sigap-footer-sync-pill {
  background: rgba(30, 41, 59, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.sigap-footer-sync-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  animation: sigapFooterSpin 0.9s linear infinite;
}

@keyframes sigapFooterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sigap-footer-sync-label {
  font-weight: 700;
  color: #f8fafc;
}

.sigap-footer-sync-pct {
  font-weight: 800;
  color: #38bdf8;
  font-size: 10.5px;
  min-width: 26px;
  text-align: right;
}

.sigap-footer-sync-bar-line {
  width: 100%;
  height: 3.5px;
  background: rgba(226, 232, 240, 0.5);
  overflow: hidden;
  position: relative;
}

.sigap-footer-sync-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #10b981);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  transition: width 0.25s ease-out;
  border-radius: 0 3px 3px 0;
}

.page-content.tabbar-hidden-pad {
  padding-bottom: 95px !important;
  transition: padding-bottom 0.3s ease;
}

.linmas-pill-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #64748b;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 24px;
  transition: all 0.2s ease;
}

.linmas-pill-tab i {
  font-size: 22px;
}

.linmas-pill-tab.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* =========================================================
   SLIM & COMPACT MODERN TIMELINE / STEPPER (MOBILE FIRST)
   ========================================================= */
.slim-timeline-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 14px 10px;
  margin: 10px 16px 14px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.8);
}

.slim-timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.slim-step-title {
  font-size: 11px;
  font-weight: 800;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.slim-step-title .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  display: inline-block;
  animation: slimPulse 1.8s infinite;
}

@keyframes slimPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.slim-progress-badge {
  font-size: 10px;
  font-weight: 800;
  color: #475569;
  background: #f8fafc;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.slim-timeline-track {
  position: relative;
}

.slim-track-line {
  position: absolute;
  top: 12px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.slim-track-progress {
  height: 100%;
  background: #10b981;
  transition: width 0.3s ease;
}

.slim-track-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.slim-track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  text-decoration: none;
}

.slim-step-bullet {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  color: #94a3b8;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  transition: all 0.2s ease;
}

.slim-step-bullet i {
  font-size: 14px;
}

.slim-step-text {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1;
  white-space: nowrap;
}

/* Step State: Completed */
.slim-track-step.completed .slim-step-bullet {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.slim-track-step.completed .slim-step-text {
  color: #059669;
  font-weight: 800;
}

/* Step State: Active */
.slim-track-step.active .slim-step-bullet {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  transform: scale(1.05);
}

.slim-track-step.active .slim-step-text {
  color: #1d4ed8;
  font-weight: 800;
}

/* =========================================================
   BIOMETRIC FACE CAPTURE (STANDAR e-KTP)
   ========================================================= */
.biometric-viewport-container {
  background: #090d16;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 14px;
  aspect-ratio: 3/4;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.biometric-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.biometric-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  pointer-events: none;
}

/* SVG Mask & Guideline Layer */
.biometric-svg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.ktp-oval-stroke {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ktp-oval-stroke.status-aligned {
  stroke: #10b981;
  stroke-dasharray: none;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.8));
  animation: pulse-border-green 1.5s infinite;
}

.ktp-oval-stroke.status-adjust {
  stroke: #f59e0b;
  stroke-dasharray: 4 3;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

.ktp-oval-stroke.status-none {
  stroke: rgba(239, 68, 68, 0.7);
  stroke-dasharray: 6 4;
  stroke-width: 2;
}

.ktp-guide-line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.ktp-shoulder-guide {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

/* Dynamic Instruction Pill */
.biometric-guidance-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}

.biometric-guidance-pill.guidance-success {
  background: rgba(6, 78, 59, 0.92);
  border-color: rgba(52, 211, 153, 0.4);
}

.biometric-guidance-pill.guidance-warning {
  background: rgba(120, 53, 15, 0.92);
  border-color: rgba(251, 191, 36, 0.4);
}

/* Bottom Controls */
.biometric-camera-controls {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}

.btn-biometric-shutter {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.btn-biometric-shutter:active {
  transform: scale(0.92);
}

.btn-biometric-shutter .shutter-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2563eb;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-biometric-shutter.shutter-ready {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.6);
}

.btn-biometric-shutter.shutter-ready .shutter-inner {
  background: #10b981;
  animation: pulse-shutter-green 1.4s infinite;
}

.btn-biometric-action {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-biometric-action:active {
  background: rgba(255, 255, 255, 0.3);
}

/* Animations */
@keyframes pulse-border-green {
  0% {
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.95));
  }

  100% {
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
  }
}

@keyframes pulse-shutter-green {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

/* Quick Tools Bar on Top of Camera */
.biometric-tools-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 30;
}

.biometric-tool-btn {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 6px 12px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  touch-action: manipulation;
  pointer-events: auto;
}

.biometric-tool-btn:active {
  transform: scale(0.95);
}

.biometric-tool-btn.active {
  background: #2563eb;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.biometric-tool-btn.active.flash-on {
  background: #f59e0b;
  border-color: #fcd34d;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

/* Screen Flash Light Frame */
.screen-flash-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.8), inset 0 0 20px #ffffff;
  border: 8px solid rgba(255, 255, 255, 0.85);
  display: none;
}

/* Big Countdown Overlay */
.camera-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.countdown-number {
  font-size: 76px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 30px #2563eb;
  animation: countdown-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  line-height: 1;
}

@keyframes countdown-pulse {
  0% {
    transform: scale(1.4);
    opacity: 0;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }

  80% {
    transform: scale(0.9);
    opacity: 0.9;
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

/* Responsive Camera Popup Modals (Mobile Fullscreen / Desktop Floating Centered) */
.popup-camera-fullscreen,
#popup-camera,
#popup-camera-ktp,
#popup-camera-verif,
#popup-camera-face-search,
#popup-ai-analysis {
  position: fixed !important;
  background: #000000 !important;
  z-index: 13500 !important;
  display: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

#popup-ai-analysis {
  background: #f8fafc !important;
  z-index: 12600 !important;
}

@media (max-width: 767.98px) {
  .popup-camera-fullscreen.modal-in,
  .popup-camera-fullscreen.popup-in,
  #popup-camera.modal-in,
  #popup-camera.popup-in,
  #popup-camera-ktp.modal-in,
  #popup-camera-ktp.popup-in,
  #popup-camera-verif.modal-in,
  #popup-camera-verif.popup-in,
  #popup-camera-face-search.modal-in,
  #popup-camera-face-search.popup-in,
  #popup-ai-analysis.modal-in,
  #popup-ai-analysis.popup-in {
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .popup-camera-fullscreen .page,
  #popup-camera .page,
  #popup-camera-ktp .page,
  #popup-camera-verif .page,
  #popup-camera-face-search .page,
  #popup-ai-analysis .page {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

@media (min-width: 768px) {
  .popup-camera-fullscreen.modal-in,
  .popup-camera-fullscreen.popup-in,
  #popup-camera.modal-in,
  #popup-camera.popup-in,
  #popup-camera-ktp.modal-in,
  #popup-camera-ktp.popup-in,
  #popup-camera-verif.modal-in,
  #popup-camera-verif.popup-in,
  #popup-camera-face-search.modal-in,
  #popup-camera-face-search.popup-in,
  #popup-ai-analysis.modal-in,
  #popup-ai-analysis.popup-in {
    display: flex !important;
    flex-direction: column !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 90vw !important;
    max-width: 480px !important;
    height: 82vh !important;
    max-height: 720px !important;
    min-height: 520px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    transform: translate(-50%, -50%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  .popup-camera-fullscreen.modal-out,
  .popup-camera-fullscreen.popup-out,
  #popup-camera.modal-out,
  #popup-camera.popup-out,
  #popup-camera-ktp.modal-out,
  #popup-camera-ktp.popup-out,
  #popup-camera-verif.modal-out,
  #popup-camera-verif.popup-out,
  #popup-camera-face-search.modal-out,
  #popup-camera-face-search.popup-out,
  #popup-ai-analysis.modal-out,
  #popup-ai-analysis.popup-out {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.16s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.14s ease !important;
  }

  .popup-camera-fullscreen .page,
  #popup-camera .page,
  #popup-camera-ktp .page,
  #popup-camera-verif .page,
  #popup-camera-face-search .page,
  #popup-ai-analysis .page,
  .popup-camera-fullscreen .fullscreen-camera-body,
  #popup-camera .fullscreen-camera-body,
  #popup-camera-ktp .fullscreen-camera-body,
  #popup-camera-verif .fullscreen-camera-body,
  #popup-camera-face-search .fullscreen-camera-body {
    width: 100% !important;
    height: 100% !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }
}

/* Fullscreen Wilayah / Master Data Picker Popup & NIK Existing Biodata Popup */
#popup-wilayah-picker,
.popup-wilayah-picker,
#popup-nik-existing,
.popup-nik-existing {
  position: fixed !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  z-index: 12500 !important;
  background: #f8fafc !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#popup-wilayah-picker .view,
.popup-wilayah-picker .view,
#popup-wilayah-picker .page,
.popup-wilayah-picker .page,
#popup-nik-existing .view,
.popup-nik-existing .view,
#popup-nik-existing .page,
.popup-nik-existing .page {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#popup-wilayah-picker .page-content,
.popup-wilayah-picker .page-content {
  padding: 10px 14px 40px !important;
  padding-top: 10px !important;
  --f7-page-navbar-offset: 0px !important;
  --f7-page-content-extra-padding-top: 0px !important;
  margin-top: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 767.98px) {
  #popup-wilayah-picker.modal-in,
  #popup-wilayah-picker.popup-in,
  .popup-wilayah-picker.modal-in,
  .popup-wilayah-picker.popup-in,
  #popup-nik-existing.modal-in,
  #popup-nik-existing.popup-in,
  .popup-nik-existing.modal-in,
  .popup-nik-existing.popup-in {
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 768px) {
  #popup-wilayah-picker.modal-in,
  #popup-wilayah-picker.popup-in,
  .popup-wilayah-picker.modal-in,
  .popup-wilayah-picker.popup-in,
  #popup-nik-existing.modal-in,
  #popup-nik-existing.popup-in,
  .popup-nik-existing.modal-in,
  .popup-nik-existing.popup-in {
    display: flex !important;
    flex-direction: column !important;
    width: 90vw !important;
    max-width: 580px !important;
    height: 85vh !important;
    max-height: 750px !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    transform: translate(-50%, -50%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}
  /* e-KTP Scanner Camera Cybernetic Overlay & Laser Beam Styles */
  .ktp-card-guide-box {
    position: relative;
    box-sizing: border-box;
  }

  .ktp-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: #38bdf8;
    border-style: solid;
    pointer-events: none;
  }

  .ktp-corner.top-left {
    top: 0;
    left: 0;
    border-width: 3.5px 0 0 3.5px;
    border-top-left-radius: 12px;
  }

  .ktp-corner.top-right {
    top: 0;
    right: 0;
    border-width: 3.5px 3.5px 0 0;
    border-top-right-radius: 12px;
  }

  .ktp-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-width: 0 0 3.5px 3.5px;
    border-bottom-left-radius: 12px;
  }

  .ktp-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-width: 0 3.5px 3.5px 0;
    border-bottom-right-radius: 12px;
  }

  .ktp-scanner-laser-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, transparent 100%);
    box-shadow: 0 0 12px 2px #38bdf8, 0 0 20px 4px rgba(56, 189, 248, 0.6);
    animation: ktpScanSweep 2.4s ease-in-out infinite alternate;
    pointer-events: none;
  }

  @keyframes ktpScanSweep {
    0% {
      top: 2%;
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }

    100% {
      top: 96%;
      opacity: 0.3;
    }
  }

  .nik-scan-laser-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: nikLaserSweep 1.6s ease-in-out infinite alternate;
  }

  @keyframes nikLaserSweep {
    0% {
      left: 4px;
      opacity: 0.2;
    }

    50% {
      opacity: 1;
    }

    100% {
      left: calc(100% - 6px);
      opacity: 0.2;
    }
  }

  /* =========================================================
   PROPORTIONAL BIOMETRIC FACE GUIDE (PASFOTO e-KTP)
   ========================================================= */
  .biometric-guide-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    padding-bottom: 75px;
  }

  .biometric-guide-oval {
    width: min(270px, 72vw);
    max-width: 285px;
    aspect-ratio: 3 / 3.85;
    border-radius: 48% / 46%;
    border: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58), 0 0 16px rgba(96, 165, 250, 0.35);
    position: relative;
    transition: box-shadow 0.25s ease;
    box-sizing: border-box;
  }

  .biometric-oval-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
  }

  .biometric-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(255, 255, 255, 0.85);
    border-style: solid;
    pointer-events: none;
  }

  .biometric-corner.top-left {
    top: 14%;
    left: 10%;
    border-width: 2.5px 0 0 2.5px;
    border-top-left-radius: 6px;
  }

  .biometric-corner.top-right {
    top: 14%;
    right: 10%;
    border-width: 2.5px 2.5px 0 0;
    border-top-right-radius: 6px;
  }

  .biometric-corner.bottom-left {
    bottom: 14%;
    left: 10%;
    border-width: 0 0 2.5px 2.5px;
    border-bottom-left-radius: 6px;
  }

  .biometric-corner.bottom-right {
    bottom: 14%;
    right: 10%;
    border-width: 0 2.5px 2.5px 0;
    border-bottom-right-radius: 6px;
  }

  .biometric-eye-line-guide {
    position: absolute;
    top: 35%;
    left: 10%;
    right: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.3s ease;
  }

  .biometric-eye-line-guide .eye-reticle-marker {
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #popup-face-search-results {
    max-width: 490px !important;
  }

  /* ========================================================= */
  /* BIOMETRIC FACE RECOGNITION SEARCH UI STYLES               */
  /* ========================================================= */
  .live-face-match-hud {
    pointer-events: none;
    animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #live-face-hud-card {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .live-radar-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: radarPulse 1.4s infinite;
  }

  .face-match-compare-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 18px;
    padding: 14px 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
  }

  .face-match-photo-wrap {
    position: relative;
    width: 125px;
    height: 165px;
    border-radius: 16px;
    overflow: hidden;
    border: 2.5px solid #2563eb;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
    background: #0f172a;
    flex-shrink: 0;
  }

  @media (max-width: 380px) {
    .face-match-photo-wrap {
      width: 105px;
      height: 140px;
    }
  }

  .face-match-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .face-match-photo-wrap .photo-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 4px;
    text-align: center;
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }

  /* Single Probe Card for Unmatched State */
  .face-probe-card {
    position: relative;
    width: 150px;
    height: 200px;
    margin: 0 auto 18px;
    border-radius: 20px;
    overflow: hidden;
    border: 2.5px solid #3b82f6;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22);
    background: #0f172a;
    transition: transform 0.2s ease;
  }

  .face-probe-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .face-probe-card .probe-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.88) 40%, rgba(15, 23, 42, 0.96) 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 12px 6px 6px;
    text-align: center;
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }

  .face-match-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .face-match-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.2px;
  }

  .face-match-score-badge.high {
    background: #ecfdf5;
    color: #059669;
    border: 1.5px solid #6ee7b7;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
  }

  .face-match-score-badge.medium {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #93c5fd;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
  }

  .face-match-score-badge.low {
    background: #fffbeb;
    color: #b45309;
    border: 1.5px solid #fde68a;
  }

  .face-secondary-candidate-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
  }

  .face-secondary-candidate-card:hover {
    border-color: #93c5fd;
    transform: translateY(-1px);
  }

  /* Ensure picker buttons and grid cells never expand or resize when text is long */
  .wilayah-picker-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  .wilayah-picker-btn * {
    pointer-events: none !important;
  }

  .wilayah-picker-btn span {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .wilayah-picker-btn i,
  .wilayah-picker-btn .material-icons {
    flex-shrink: 0 !important;
  }

  .popup-camera-fullscreen .page {
    background: #000000 !important;
  }

  .fullscreen-camera-body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fullscreen-camera-body video#webcam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .fullscreen-camera-body canvas#face-detection-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
  }

  .fullscreen-camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
  }

  /* Top bar navigation on camera */
  .camera-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: max(16px, env(safe-area-inset-top, 16px)) 16px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 25;
    pointer-events: auto;
  }

  .camera-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .camera-back-pill-btn {
    height: 38px;
    padding: 0 12px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    touch-action: manipulation;
  }

  .camera-back-pill-btn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.2);
  }

  .camera-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  .camera-icon-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
  }

  .camera-top-title {
    text-align: center;
  }

  .camera-top-title h3 {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  .camera-top-title p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin: 2px 0 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }

  /* Floating Status Guidance Pill */
  .face-guidance-pill {
    position: absolute;
    bottom: calc(max(20px, env(safe-area-inset-bottom, 20px)) + 86px) !important;
    left: 16px;
    right: 16px;
    z-index: 20 !important;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 30px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
    text-align: center;
  }

  .face-guidance-pill .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    transition: background-color 0.25s ease;
  }

  .face-guidance-pill.guidance-success {
    background: rgba(6, 78, 59, 0.92);
    border-color: rgba(52, 211, 153, 0.6);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
  }

  .face-guidance-pill.guidance-warning {
    background: rgba(120, 53, 15, 0.92);
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
  }

  /* Bottom Camera Shutter Dock */
  .camera-shutter-dock {
    position: absolute;
    bottom: 0 !important;
    left: 0;
    right: 0;
    padding: 12px 24px max(20px, env(safe-area-inset-bottom, 20px)) !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 25 !important;
  }

  .camera-shutter-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffffff;
    border: 5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
  }

  .camera-shutter-btn:active {
    transform: scale(0.92);
  }

  .camera-shutter-btn .shutter-inner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #2563eb;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .camera-shutter-btn.shutter-ready {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.7);
  }

  .camera-shutter-btn.shutter-ready .shutter-inner {
    background: #10b981;
    animation: pulse-shutter-green 1.4s infinite;
  }

  /* =========================================================
   TOP HEADER REFRESH PROGRESS BAR (YOUTUBE / APPLE SHIMMER)
   ========================================================= */
  .sigap-top-progressbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow: hidden;
  }

  .sigap-top-progressbar.active {
    opacity: 1;
    visibility: visible;
  }

  .sigap-progressbar-track {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.2);
  }

  .sigap-progressbar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 60%, #ffffff 100%);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px #38bdf8, 0 0 4px #ffffff;
    position: relative;
    overflow: hidden;
    will-change: width;
  }

  /* Moving shimmer light wave inside progress bar */
  .sigap-progressbar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: sigap-bar-shimmer 1.2s infinite;
  }

  @keyframes sigap-bar-shimmer {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  .sigap-progressbar-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: radial-gradient(ellipse at top, rgba(56, 189, 248, 0.45) 0%, rgba(56, 189, 248, 0) 70%);
    pointer-events: none;
  }

  /* =========================================================
   AUTHENTIC NATIVE iOS PULL-TO-REFRESH (UIRefreshControl)
   ========================================================= */
  .ptr-preloader {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 52px !important;
    margin-top: -52px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateZ(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .ptr-content.ptr-pull-down .ptr-preloader,
  .ptr-content.ptr-pull-up .ptr-preloader,
  .ptr-content.ptr-pulling .ptr-preloader,
  .ptr-content.ptr-refreshing .ptr-preloader,
  .ptr-content.ptr-closing .ptr-preloader {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hard exclusion: Never display PTR preloader or iOS spinner inside popups, dialogs, sheets, and non-PTR pages */
  .popup .ptr-preloader,
  .popup .sigap-ptr-preloader,
  .popup .ios-ptr-wrapper,
  .sheet-modal .ptr-preloader,
  .dialog .ptr-preloader,
  .popup-modal-form .ptr-preloader,
  .popup-rekapan-data .ptr-preloader,
  .popup-rekapan-data .ios-ptr-wrapper,
  .page:not(.ptr-content) .ptr-preloader,
  .page:not(.ptr-content) .ios-ptr-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* Hide default Framework7 preloader/arrow */
  .ptr-preloader>.preloader,
  .ptr-preloader>.ptr-arrow {
    display: none !important;
  }

  /* iOS Frosted Glass Spinner Bubble */
  .ios-ptr-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: scale(0.9) translateZ(0);
    transition: transform 0.2s ease-out, opacity 0.2s ease;
    will-change: transform, opacity;
  }

  /* Authentic iOS 12-Blade Activity Indicator */
  .ios-spinner {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
    transform: translateZ(0);
  }

  .ios-spinner .ios-blade {
    position: absolute;
    left: 44.5%;
    top: 37%;
    width: 11%;
    height: 26%;
    border-radius: 2px;
    background-color: #1d4ed8;
    opacity: 0.12;
    transform-origin: center -50%;
    will-change: opacity;
  }

  .ios-spinner .ios-blade:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.9167s;
  }

  .ios-spinner .ios-blade:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -0.8333s;
  }

  .ios-spinner .ios-blade:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.75s;
  }

  .ios-spinner .ios-blade:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.6667s;
  }

  .ios-spinner .ios-blade:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.5833s;
  }

  .ios-spinner .ios-blade:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.5s;
  }

  .ios-spinner .ios-blade:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.4167s;
  }

  .ios-spinner .ios-blade:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.3333s;
  }

  .ios-spinner .ios-blade:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.25s;
  }

  .ios-spinner .ios-blade:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.1667s;
  }

  .ios-spinner .ios-blade:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.0833s;
  }

  .ios-spinner .ios-blade:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }

  /* Pulling state */
  .ptr-content.ptr-pull-down .ios-ptr-wrapper,
  .ptr-content.ptr-pulling .ios-ptr-wrapper {
    transform: scale(1) translateZ(0);
  }

  .ptr-content.ptr-pull-down .ios-spinner .ios-blade,
  .ptr-content.ptr-pulling .ios-spinner .ios-blade {
    opacity: 0.25;
  }

  .ptr-content.ptr-pull-down .ios-spinner .ios-blade:nth-child(-n+6),
  .ptr-content.ptr-pulling .ios-spinner .ios-blade:nth-child(-n+6) {
    opacity: 0.6;
  }

  .ptr-content.ptr-pull-down .ios-spinner .ios-blade:nth-child(-n+3),
  .ptr-content.ptr-pulling .ios-spinner .ios-blade:nth-child(-n+3) {
    opacity: 1;
  }

  /* Pull-up (threshold reached): smooth elastic pop */
  .ptr-content.ptr-pull-up .ios-ptr-wrapper {
    transform: scale(1.1) translateZ(0);
    box-shadow: 0 6px 20px rgba(29, 78, 216, 0.3);
  }

  .ptr-content.ptr-pull-up .ios-spinner .ios-blade {
    opacity: 0.75;
  }

  .ptr-content.ptr-pull-up .ios-spinner .ios-blade:nth-child(-n+4) {
    opacity: 1;
  }

  /* Refreshing state: continuous smooth iOS blade spinning */
  .ptr-content.ptr-refreshing .ios-ptr-wrapper {
    transform: scale(1) translateZ(0);
  }

  .ptr-content.ptr-refreshing .ios-spinner .ios-blade {
    animation: ios-spinner-fade 0.85s linear infinite;
    background-color: #1d4ed8;
  }

  @keyframes ios-spinner-fade {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0.12;
    }
  }

  /* Closing state: smooth iOS scale down & fade out */
  .ptr-content.ptr-closing .ios-ptr-wrapper {
    transform: scale(0.4) translateZ(0);
    opacity: 0;
  }

  /* Frictionless hardware-accelerated PTR Content Container */
  .ptr-content {
    -webkit-overflow-scrolling: touch;
    will-change: transform;
  }

  /* =========================================================
   LAPORAN & REKAPITULASI MUTASI STYLING
   ========================================================= */
  .laporan-subnav-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .laporan-subnav-scroll::-webkit-scrollbar {
    display: none;
  }

  .laporan-subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 30px;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
  }

  .laporan-subnav-pill.active {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3);
  }

  .laporan-period-bar {
    background: #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin-bottom: 14px;
  }

  .period-type-toggle {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .period-type-btn {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
  }

  .period-type-btn.active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .period-quick-changer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .period-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .period-nav-btn:active {
    background: #e2e8f0;
    transform: scale(0.95);
  }

  .period-current-display {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .period-current-display .sub-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
  }

  /* Buku Mutasi Grid */
  .buku-mutasi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .mutasi-stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease;
  }

  .mutasi-stat-card.blue {
    border-top: 4px solid #2563eb;
  }

  .mutasi-stat-card.green {
    border-top: 4px solid #10b981;
  }

  .mutasi-stat-card.red {
    border-top: 4px solid #ef4444;
  }

  .mutasi-stat-card.royal {
    border-top: 4px solid #1e3a8a;
    background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
  }

  .mutasi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .mutasi-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .mutasi-stat-card.blue .mutasi-card-icon {
    background: #eff6ff;
    color: #2563eb;
  }

  .mutasi-stat-card.green .mutasi-card-icon {
    background: #ecfdf5;
    color: #10b981;
  }

  .mutasi-stat-card.red .mutasi-card-icon {
    background: #fef2f2;
    color: #ef4444;
  }

  .mutasi-stat-card.royal .mutasi-card-icon {
    background: #dbeafe;
    color: #1e3a8a;
  }

  .mutasi-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .mutasi-card-val {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin: 4px 0 8px;
  }

  .mutasi-card-gender-row {
    display: flex;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
  }

  .gender-pill-l {
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 7px;
    border-radius: 8px;
  }

  .gender-pill-p {
    background: #fce7f3;
    color: #be185d;
    padding: 2px 7px;
    border-radius: 8px;
  }

  /* Formula Highlight Banner */
  .mutasi-formula-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 16px;
    border: 1px dashed #cbd5e1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
  }

  .mutasi-formula-card strong {
    color: #1e3a8a;
    font-weight: 800;
  }

  /* Monthly Trend Horizontal Bar Chart */
  .trend-chart-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  }

  .trend-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .trend-chart-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .trend-bars-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 4px 6px;
    scrollbar-width: none;
  }

  .trend-bars-container::-webkit-scrollbar {
    display: none;
  }

  .trend-month-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }

  .trend-month-col:hover,
  .trend-month-col.active {
    background: #f1f5f9;
  }

  .trend-month-col.active {
    border: 1.5px solid #2563eb;
  }

  .trend-bar-stack {
    height: 90px;
    width: 24px;
    background: #f8fafc;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
  }

  .trend-bar-segment {
    width: 100%;
    transition: height 0.4s ease;
  }

  .trend-bar-segment.green {
    background: #10b981;
  }

  .trend-bar-segment.red {
    background: #ef4444;
  }

  .trend-month-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
  }

  .trend-month-col.active .trend-month-label {
    color: #2563eb;
    font-weight: 800;
  }

  /* Mutation Transaction Card Item */
  .mutasi-item-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .mutasi-item-card:active {
    transform: scale(0.99);
  }

  .mutasi-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .mutasi-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .mutasi-type-badge.masuk {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
  }

  .mutasi-type-badge.keluar {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
  }

  .mutasi-type-badge.pindah {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
  }

  .mutasi-item-date {
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
  }

  .mutasi-item-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
  }

  .mutasi-item-nik-banjar {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
  }

  .mutasi-item-footer {
    font-size: 11.5px;
    color: #64748b;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* =========================================================
     FACEBOOK-STYLE SKELETON SHIMMER SYSTEM (ANTI-BLINK LOADING)
     Teknologi shimmer wave horizontal seperti Facebook/Instagram.
     Mencegah layar berkedip (no blink/flash) dan zero layout shift (CLS).
     ========================================================= */

  @keyframes fb-shimmer-sweep {
    0% {
      background-position: -250% 0;
    }
    100% {
      background-position: 250% 0;
    }
  }

  .fb-shimmer-wave,
  .skeleton-shimmer,
  .skeleton-placeholder-card {
    background: linear-gradient(
      90deg,
      #f1f5f9 0%,
      #e2e8f0 20%,
      #cbd5e1 38%,
      #e2e8f0 55%,
      #f1f5f9 100%
    ) !important;
    background-size: 250% 100% !important;
    animation: fb-shimmer-sweep 1.5s ease-in-out infinite !important;
    color: transparent !important;
    border-color: transparent !important;
    user-select: none !important;
    pointer-events: none !important;
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    body.theme-dark .fb-shimmer-wave,
    body.theme-dark .skeleton-shimmer,
    body.theme-dark .skeleton-placeholder-card {
      background: linear-gradient(
        90deg,
        #1e293b 0%,
        #334155 20%,
        #475569 38%,
        #334155 55%,
        #1e293b 100%
      ) !important;
      background-size: 250% 100% !important;
    }
  }

  /* Basic Skeleton Atoms */
  .fb-skeleton-avatar {
    border-radius: 50% !important;
    flex-shrink: 0;
  }
  .fb-skeleton-avatar.sm { width: 32px; height: 32px; }
  .fb-skeleton-avatar.md { width: 44px; height: 44px; }
  .fb-skeleton-avatar.lg { width: 56px; height: 56px; }

  .fb-skeleton-thumb {
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  .fb-skeleton-line {
    height: 12px;
    border-radius: 6px !important;
    display: block;
  }
  .fb-skeleton-line.xs { height: 8px; border-radius: 4px !important; }
  .fb-skeleton-line.sm { height: 10px; border-radius: 5px !important; }
  .fb-skeleton-line.md { height: 14px; border-radius: 7px !important; }
  .fb-skeleton-line.lg { height: 20px; border-radius: 10px !important; }
  .fb-skeleton-line.xl { height: 28px; border-radius: 12px !important; }

  .fb-skeleton-pill {
    height: 22px;
    border-radius: 11px !important;
    display: inline-block;
  }

  /* Skeleton Composite Cards (Facebook-Style Feed Item) */
  .fb-skeleton-feed-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 12px;
    box-sizing: border-box;
    width: 100%;
  }

  .fb-skeleton-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    margin-bottom: 12px;
    box-sizing: border-box;
    width: 100%;
  }

  .fb-skeleton-stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
  }

  /* Data langsung tampil seketika tanpa jeda/kedip animasi */
  .sigap-fade-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }


  /* ============================================================ */
  /* STANDAR CETAK DOKUMEN F4 / FOLIO LANDSCAPE (330mm x 215mm)   */
  /* ============================================================ */
  @page {
    size: 330mm 215mm landscape;
    margin: 10mm 8mm 12mm 8mm;
  }

  @media print {
    body {
      background: #ffffff !important;
      color: #000000 !important;
      font-family: 'Times New Roman', Times, serif !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .navbar,
    .toolbar,
    .subnavbar,
    .period-type-toggle,
    .period-quick-changer,
    .b2-view-mode-btn,
    .list-filter-btn,
    #btn-print-b2-direct,
    #btn-print-laporan,
    .floating-button,
    .no-print {
      display: none !important;
    }

    .page-content {
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    table.b2-official-table {
      width: 100% !important;
      min-width: 100% !important;
      border-collapse: collapse !important;
      border-spacing: 0 !important;
      font-size: 9.5pt !important;
      page-break-inside: auto !important;
    }

    table.b2-official-table thead {
      display: table-header-group !important;
    }

    table.b2-official-table tfoot {
      display: table-footer-group !important;
    }

    table.b2-official-table tr {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    table.b2-official-table th,
    table.b2-official-table td {
      border: 1px solid #000000 !important;
      padding: 4px 3px !important;
      box-sizing: border-box !important;
    }

    .footer-signatures {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
  }

  /* =========================================================
   REKAPITULASI LAPORAN PENDUDUK (BULAN LALU, BULAN INI, TOTAL)
   ========================================================= */
  .rekap-penduduk-3grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  @media (max-width: 640px) {
    .rekap-penduduk-3grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  .rekap-phase-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
  }

  .rekap-phase-card.sebelumnya {
    border-top: 4px solid #3b82f6;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  }

  .rekap-phase-card.ini {
    border-top: 4px solid #10b981;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  }

  .rekap-phase-card.total {
    border-top: 4px solid #1e3a8a;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  }

  .rekap-phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .rekap-phase-title {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .rekap-phase-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .rekap-phase-val {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin: 6px 0 10px;
  }

  .rekap-gender-breakdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 700;
  }

  .rekap-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
  }

  table.rekap-penduduk-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    font-size: 11.5px;
    color: #0f172a;
    text-align: center;
  }

  table.rekap-penduduk-table th,
  table.rekap-penduduk-table td {
    border: 1px solid #cbd5e1;
    padding: 7px 6px;
    vertical-align: middle;
  }

  table.rekap-penduduk-table th {
    background: #f8fafc;
    font-weight: 800;
    font-size: 11px;
  }

  table.rekap-penduduk-table thead tr.group-head th {
    background: #f1f5f9;
    font-size: 11.5px;
  }

  table.rekap-penduduk-table tfoot tr {
    background: #eff6ff;
    font-weight: 800;
    color: #1e3a8a;
    font-size: 12px;
  }

  /* =========================================================
   GIS MAP & PETA PERSEBARAN WILAYAH STYLING
   ========================================================= */

  .peta-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
  }

  .peta-pill-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
  }

  .peta-pill-btn.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
  }

  .peta-pill-btn .pill-count-badge {
    background: rgba(0, 0, 0, 0.1);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 800;
  }

  .peta-pill-btn.active .pill-count-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  .peta-floating-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
  }

  .peta-floating-btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }

  .peta-floating-btn:active {
    transform: scale(0.95);
  }

  /* Custom Marker: Wilayah / Banjar */
  .custom-wilayah-pin {
    background: transparent !important;
    border: none !important;
  }

  .wilayah-pin-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .wilayah-pin-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #047857);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.2s ease;
    position: relative;
  }

  .wilayah-pin-icon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #047857;
  }

  .wilayah-pin-pulse {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.35);
    animation: pulse-ring 2s infinite ease-out;
    z-index: -1;
  }

  .wilayah-pin-label {
    margin-top: 4px;
    background: #064e3b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: -0.2px;
  }

  /* Custom Marker: Penduduk Duktang */
  .custom-duktang-pin {
    background: transparent !important;
    border: none !important;
  }

  .duktang-pin-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .duktang-pin-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: #2563eb;
  }

  .duktang-pin-avatar.gender-male {
    background: #2563eb;
    border-color: #ffffff;
  }

  .duktang-pin-avatar.gender-female {
    background: #ec4899;
    border-color: #ffffff;
  }

  .duktang-pin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .duktang-pin-wrapper:hover .duktang-pin-avatar {
    transform: scale(1.2) translateY(-2px);
    z-index: 100;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(0.8);
      opacity: 0.8;
    }

    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  /* Leaflet Popup Styling Override */
  .leaflet-popup-content-wrapper {
    padding: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
  }

  .leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  .leaflet-popup-tip-container {
    margin-top: -1px !important;
  }

  .peta-resident-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .peta-resident-card:hover {
    background: #f8fafc;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  }

  /* =========================================================
   DESKTOP / LARGE SCREEN PERMANENT DOCKED SIDEBAR (ALWAYS VISIBLE)
   ========================================================= */
  @media (min-width: 960px) {

    /* Permanently pin sidebar on large screens (always visible) */
    body:not(:has(.page[data-name="login"])):not(:has(.page[data-name="register"])) .panel-left {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 280px !important;
      max-width: 280px !important;
      height: 100vh !important;
      transform: translate3d(0, 0, 0) !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 600 !important;
      display: block !important;
      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
      border-right: 1px solid var(--sigap-sidebar-border) !important;
      pointer-events: auto !important;
    }

    body:not(:has(.page[data-name="login"])):not(:has(.page[data-name="register"])) #view-main,
    body:not(:has(.page[data-name="login"])):not(:has(.page[data-name="register"])) .view-main {
      margin-left: 280px !important;
      width: calc(100% - 280px) !important;
      position: relative !important;
    }

    /* Hide sidebar only when on login or register screen */
    body:has(.page[data-name="login"]) .panel-left,
    body:has(.page[data-name="register"]) .panel-left {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body:has(.page[data-name="login"]) #view-main,
    body:has(.page[data-name="register"]) #view-main {
      margin-left: 0 !important;
      width: 100% !important;
    }

    /* Hide panel backdrop on large screen so it doesn't dim or block clicks */
    .panel-backdrop {
      display: none !important;
      pointer-events: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* Hide mobile floating bottom tabbar on desktop */
    .linmas-pill-tabbar {
      display: none !important;
    }
  }

  /* =========================================================
   GLOBAL TYPOGRAPHY & HIGH CONTRAST ENHANCEMENTS
   ========================================================= */
  /* Ensure list items, cards, and titles are always crisp and readable */
  .simple-list li {
    color: #0f172a !important;
    font-weight: 600;
  }

  .media-list .item-title {
    color: #0f172a !important;
  }

  .media-list .item-subtitle {
    color: #475569 !important;
  }

  .media-list .item-text {
    color: #64748b !important;
  }

  /* =========================================================
   FORM INPUT & TEXTAREA CONTRAST, BLUE FOCUS & DYNAMIC TYPOGRAPHY
   ========================================================= */
  input[type="text"]:not([class*="linmas-search"]),
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="search"]:not([class*="linmas-search"]),
  textarea,
  select,
  .item-input-wrap input,
  .item-input-wrap select,
  .item-input-wrap textarea,
  .luxury-input-control,
  .luxury-textarea-control {
    color: #1e293b !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    /* Jelas, kontras, dan presisi saat sudah selesai / idle */
    line-height: 1.45;
    letter-spacing: -0.01em;
    background-color: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 13px;
    outline: none !important;
    box-shadow: none;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
    position: relative !important;
    z-index: 2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.2s ease,
      font-weight 0.12s ease,
      color 0.12s ease !important;
  }

  /* FOCUSED STATE: Biru Menyala saat Fokus & Font Tebal saat Diketik */
  input[type="text"]:not([class*="linmas-search"]):focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  input[type="email"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="search"]:not([class*="linmas-search"]):focus,
  textarea:focus,
  select:focus,
  .item-input-wrap input:focus,
  .item-input-wrap select:focus,
  .item-input-wrap textarea:focus,
  .luxury-input-control:focus,
  .luxury-textarea-control:focus {
    font-weight: 800 !important;
    /* Font Tebal saat sedang diketik / fokus */
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important;
    outline: none !important;
  }

  /* Validation Error Shake Animation & Red Highlight */
  .field-error-shake,
  .luxury-input-box.field-error-shake,
  .wilayah-picker-btn.field-error-shake {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22) !important;
    animation: fieldShakeAnim 0.42s ease-in-out !important;
  }

  @keyframes fieldShakeAnim {

    0%,
    100% {
      transform: translateX(0);
    }

    20%,
    60% {
      transform: translateX(-5px);
    }

    40%,
    80% {
      transform: translateX(5px);
    }
  }

  /* Input Placeholder */
  input::placeholder,
  textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 14.5px !important;
    letter-spacing: 0;
  }

  /* Reset inner items inside .luxury-input-box from duplicate outer borders */
  .luxury-input-box input,
  .luxury-input-box textarea,
  .luxury-input-box select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .luxury-input-box input:focus,
  .luxury-input-box textarea:focus,
  .luxury-input-box select:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Ensure Linmas Header Search Box keeps white contrast */
  .linmas-search-box input {
    color: #ffffff !important;
  }

  .linmas-search-box input::placeholder {
    color: #bfdbfe !important;
  }

  /* Dialog & Sheet Modal Typography Contrast & Modern Aesthetics - Perfectly Centered in Viewport */
  .dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    transform: translate3d(-50%, -50%, 0) !important;
    -webkit-transform: translate3d(-50%, -50%, 0) !important;
    width: calc(100vw - 36px) !important;
    max-width: 360px !important;
    min-width: 280px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
    border: none !important;
    box-sizing: border-box !important;
    z-index: 25000 !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .dialog.modal-in {
    opacity: 1 !important;
    display: block !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }

  .dialog.modal-out {
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) scale(0.92) !important;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.92) !important;
  }

  /* Universal Dialog Backdrop - Covers 100% of visible viewport and blurs background */
  .dialog-backdrop,
  .custom-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 24900 !important;
  }

  /* Sembunyikan aksesoris autofill bawaan browser (gambar kunci, kartu kredit, map) di semua browser */
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button,
  input::-webkit-credit-card-auto-fill-button,
  input::-webkit-caps-lock-indicator {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    position: absolute !important;
    right: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  .dialog-inner {
    padding: 22px 20px 14px 20px !important;
    background: #ffffff !important;
  }

  .dialog-title {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .dialog-text {
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
  }

  .dialog-button {
    font-weight: 700 !important;
  }

  /* Vertical Stacked Dialog Buttons (Atas-Bawah untuk Layar Mobile Kecil & Standar) */
  .dialog-buttons.dialog-buttons-vertical,
  .dialog.dialog-buttons-vertical .dialog-buttons {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 0 18px 20px 18px !important;
    gap: 10px !important;
    border-top: none !important;
    background: transparent !important;
  }

  .dialog-buttons.dialog-buttons-vertical .dialog-button,
  .dialog.dialog-buttons-vertical .dialog-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    padding: 0 16px !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-transform: none !important;
  }

  .dialog-buttons.dialog-buttons-vertical .dialog-button::after,
  .dialog.dialog-buttons-vertical .dialog-button::before {
    display: none !important;
  }

  /* Primary Button (Top button) */
  .dialog-buttons-vertical .dialog-button.dialog-btn-primary,
  .dialog-buttons-vertical .dialog-button.dialog-button-bold:first-child:not(.dialog-btn-secondary) {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  }

  .dialog-buttons-vertical .dialog-button.dialog-btn-primary:active,
  .dialog-buttons-vertical .dialog-button.dialog-button-bold:first-child:not(.dialog-btn-secondary):active {
    background: #1e40af !important;
    transform: scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  }

  /* Emerald/Success Button */
  .dialog-buttons-vertical .dialog-button.dialog-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
  }

  .dialog-buttons-vertical .dialog-button.dialog-btn-success:active {
    background: #047857 !important;
    transform: scale(0.98) !important;
  }

  /* Secondary Button (Bottom button) */
  .dialog-buttons-vertical .dialog-button.dialog-btn-secondary,
  .dialog-buttons-vertical .dialog-button:not(.dialog-btn-primary):not(.dialog-btn-success):not(:first-child) {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }

  .dialog-buttons-vertical .dialog-button.dialog-btn-secondary:active,
  .dialog-buttons-vertical .dialog-button:not(.dialog-btn-primary):not(.dialog-btn-success):not(:first-child):active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(0.98) !important;
  }

  /* Custom Success/Info Badges in Dialog Body */
  .sigap-dialog-success-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 14px auto;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.12), 0 8px 16px -4px rgba(34, 197, 94, 0.25);
  }

  .sigap-dialog-success-badge i {
    font-size: 36px !important;
    line-height: 1;
  }

  .sigap-dialog-offline-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 14px auto;
    box-shadow: 0 0 0 8px rgba(234, 88, 12, 0.12), 0 8px 16px -4px rgba(234, 88, 12, 0.25);
  }

  .sigap-dialog-offline-badge i {
    font-size: 34px !important;
    line-height: 1;
  }

  .sigap-dialog-resident-name {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 4px;
    word-break: break-word;
  }

  .sigap-dialog-resident-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.4;
    word-break: break-word;
  }

  .sigap-dialog-reg-card {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    margin-top: 6px;
  }

  .sigap-dialog-reg-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sigap-dialog-reg-val {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 800;
    color: #1d4ed8;
    letter-spacing: 0.5px;
  }

  /* Dark mode dialog support */
  [data-theme="dark"] .dialog,
  .theme-dark .dialog {
    background: #1e293b !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px #334155 !important;
  }

  [data-theme="dark"] .dialog-inner,
  .theme-dark .dialog-inner {
    background: #1e293b !important;
  }

  [data-theme="dark"] .dialog-title,
  .theme-dark .dialog-title {
    color: #f8fafc !important;
  }

  [data-theme="dark"] .sigap-dialog-resident-name,
  .theme-dark .sigap-dialog-resident-name {
    color: #f1f5f9 !important;
  }

  [data-theme="dark"] .sigap-dialog-reg-card,
  .theme-dark .sigap-dialog-reg-card {
    background: #0f172a !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] .sigap-dialog-reg-val,
  .theme-dark .sigap-dialog-reg-val {
    color: #60a5fa !important;
  }

  [data-theme="dark"] .dialog-buttons-vertical .dialog-button.dialog-btn-secondary,
  .theme-dark .dialog-buttons-vertical .dialog-button.dialog-btn-secondary {
    background: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
  }

  .sheet-modal .toolbar .left {
    color: #0f172a !important;
  }

  /* =========================================================
   STANDARDIZED NAVBAR & CONTENT SPACING (NO OVERLAP)
   ========================================================= */
  .navbar {
    --f7-navbar-height: 56px;
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    background: var(--sigap-navbar-bg, #ffffff) !important;
    color: var(--sigap-navbar-text, #0f172a) !important;
    border-bottom: 1px solid var(--sigap-navbar-border, #e2e8f0) !important;
    z-index: 500 !important;
  }

  .navbar-bg {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    background: var(--sigap-navbar-bg, #ffffff) !important;
  }

  .navbar-inner {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
  }

  /* Default page-content spacing for pages WITH navbar */
  .page:not(.no-navbar)>.page-content {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box;
  }

  .page[data-name="petugas-biodata"]>.page-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 130px !important;
  }

  /* Pages that handle custom top headers / maps */
  .page.no-navbar>.page-content,
  .page[data-name="petugas-dashboard"]>.page-content,
  .page[data-name="login"]>.page-content,
  .page[data-name="register"]>.page-content {
    padding-top: 0 !important;
  }

  .page[data-name="peta-wilayah"]>.page-content,
  .page[data-name="petugas-lokasi-peta"]>.page-content,
  .page[data-name="petugas-cari"]>.page-content {
    padding-top: calc(var(--f7-navbar-height, 56px) + var(--f7-safe-area-top, 0px)) !important;
  }

  /* =========================================================
   TOP FLOATING AUTO-DISMISS STATUS BANNER (GPS & SIGNAL)
   ========================================================= */
  .sigap-top-status-bar {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    left: 14px;
    right: 14px;
    z-index: 10500;
    transform: translateY(-140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }

  .sigap-top-status-bar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .sigap-top-status-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 20px;
    background: #1e293b;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .sigap-top-status-bar.status-offline .sigap-top-status-inner {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .sigap-top-status-bar.status-online .sigap-top-status-inner {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .sigap-top-status-bar.status-gps-off .sigap-top-status-inner {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .sigap-top-status-bar.status-gps-on .sigap-top-status-inner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .sigap-top-status-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sigap-top-status-icon i {
    font-size: 20px;
    color: #ffffff;
  }

  .sigap-top-status-text {
    flex: 1;
    min-width: 0;
  }

  .sigap-top-status-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
  }

  .sigap-top-status-desc {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sigap-top-status-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
  }

  .sigap-top-status-btn:active {
    transform: scale(0.92);
  }

  .dashboard-gps-bar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Green GPS Active State for Peta GIS Card */
  .peta-gis-icon-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
  }

  .peta-gis-icon-active i {
    color: #ffffff !important;
    animation: gpsMapPulse 2s infinite ease-in-out;
  }

  @keyframes gpsMapPulse {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }
  }

  /* Wilayah Polygon Tooltip & Layer Styling */
  .wilayah-polygon-tooltip {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 10.5px !important;
    padding: 3px 9px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  .wilayah-polygon-tooltip::before {
    display: none !important;
  }

  /* =========================================================
   SIGAP PWA HARDWARE BACK BUTTON TOAST STYLING
   ========================================================= */
  .toast.sigap-back-toast {
    border-radius: 30px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 18px !important;
    margin-bottom: max(78px, calc(72px + env(safe-area-inset-bottom, 16px))) !important;
    z-index: 99999 !important;
  }

  .toast.sigap-back-toast .toast-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
  }

  .toast.sigap-back-toast .toast-icon {
    margin-right: 8px !important;
  }

  /* Dialog Logout Required on PWA Hardware Back */
  .dialog.dialog-logout-required {
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
  }

  .dialog.dialog-logout-required .dialog-inner {
    padding: 22px 20px 16px !important;
  }

  .dialog.dialog-logout-required .dialog-button {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    height: 46px !important;
  }

  /* Disable and Hide Sidebar Drawer for Linmas on mobile/field devices (uses Floating Tabbar) */
  @media (max-width: 959px) {

    body.role-linmas:not(.role-superadmin):not(.role-admin):not(.desktop-docked-sidebar) .panel-left,
    body.role-linmas:not(.role-superadmin):not(.role-admin):not(.desktop-docked-sidebar) .panel-backdrop,
    body.role-linmas:not(.role-superadmin):not(.role-admin):not(.desktop-docked-sidebar) .panel-open {
      display: none !important;
      pointer-events: none !important;
    }
  }

  /* =========================================================
   FULL SCREEN RESPONSIVE LAYOUT (100% FULL 1 LAYAR)
   ========================================================= */
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background: #f8fafc !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #app,
  .framework7-root,
  .views,
  .view {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    background: #f8fafc !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .page {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    background: #f8fafc !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Floating Navigation Bar (Removed) */
  .linmas-pill-tabbar {
    display: none !important;
  }

  /* Top Status Banner (Centered on Large Screens) */
  .sigap-top-status-bar {
    max-width: 640px !important;
    left: 50% !important;
    transform: translate(-50%, -140%) !important;
    width: calc(100% - 24px) !important;
  }

  .sigap-top-status-bar.visible {
    transform: translate(-50%, 0) !important;
  }

  /* =========================================================
   UNIVERSAL DESKTOP & TABLET LAYOUT SYSTEM (ALL PAGES)
   ========================================================= */
  @media (min-width: 768px) {

    /* 1. All Non-Dashboard Pages Max-Width Centered Container (Consistent uniform width for all pages) */
    .page:not([data-name*="dashboard"]):not([data-name="login"]):not([data-name="register"]):not([data-name*="admin"])>.page-content>div:not(.navbar):not(.ptr-preloader):not(.statusbar):not(.navbar-bg):not(.linmas-pill-tabbar):not(.subkat-bottom-bar):not(.biodata-fixed-bottom-bar):not(.popup-fixed-footer):not(.sigap-step-header-banner),
    .page:not([data-name*="dashboard"]):not([data-name="login"]):not([data-name="register"]):not([data-name*="admin"])>.page-content>form,
    .page:not([data-name*="dashboard"]):not([data-name="login"]):not([data-name="register"]):not([data-name*="admin"])>.page-content>.sigap-page-container {
      max-width: 920px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Admin Management Pages: Full Wide Expansive View */
    .page[data-name*="admin"]>.page-content>div:not(.navbar):not(.ptr-preloader):not(.statusbar):not(.navbar-bg):not(.popup-fixed-footer),
    .page[data-name*="admin"]>.page-content {
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* 2. Universal Card & List Grid (Same 3-column auto-fill system as Pencarian Duktang) */
    #cari-duktang-results,
    #pj-list-container,
    .kategori-list-container,
    .subkategori-list-container,
    #subkat-list-container,
    .wilayah-list-container,
    #list-penanggung-jawab-container,
    #list-duktang-keluar-container,
    #mutasi-history-list,
    #wil-list-container,
    #kat-list-container,
    #kelola-polygon-list,
    .linmas-recent-container,
    .recent-mutasi-list,
    #recent-mutasi-keluar-list {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
      gap: 16px !important;
      padding: 0 16px !important;
      box-sizing: border-box !important;
    }

    /* Roles List Container: Full Width Table Container */
    #roles-list-container {
      display: block !important;
      width: 100% !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    /* When grid has a header, notice, or search title banner inside it, let it span 100% full width */
    #pj-list-container>div[style*="font-size:12px"],
    #pj-list-container>.pj-grid-header,
    #pj-list-container>div:first-child:not(.pj-card-item):not(.sigap-card):not(.sigap-master-card),
    .kategori-list-container>div:first-child:not(.kategori-card-item):not(.sigap-card):not(.sigap-master-card),
    .subkategori-list-container>div:first-child:not(.subkategori-card-item):not(.sigap-card):not(.sigap-master-card),
    #subkat-list-container>div:first-child:not(.subkat-card-item):not(.sigap-card):not(.sigap-master-card),
    #roles-list-container>div:first-child:not(.role-card-item):not(.sigap-card):not(.sigap-master-card),
    #kat-list-container>div:first-child:not(.sigap-card):not(.sigap-master-card),
    #wil-list-container>div:first-child:not(.sigap-card):not(.sigap-master-card) {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Reset redundant margins inside grid items */
    #cari-duktang-results>div,
    #pj-list-container>div,
    .kategori-list-container>div,
    .subkategori-list-container>div,
    #subkat-list-container>div,
    .wilayah-list-container>div,
    #list-penanggung-jawab-container>div,
    #list-duktang-keluar-container>div,
    #mutasi-history-list>div,
    #wil-list-container>div,
    #kat-list-container>div,
    #roles-list-container>div,
    #kelola-polygon-list>div,
    .linmas-recent-container .linmas-recent-item,
    .recent-mutasi-list .linmas-recent-item {
    }

    .kategori-card-item,
    .pj-card-item,
    .subkat-card-item {
      cursor: pointer !important;
      transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }
    .kategori-card-item:hover,
    .pj-card-item:hover,
    .subkat-card-item:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09) !important;
    }
    .kategori-card-item:active,
    .pj-card-item:active,
    .subkat-card-item:active {
      transform: translateY(0) scale(0.99) !important;
    }

    /* 3. Multi-Column & Responsive Layout for Profil Pengguna */
    #petugas-profil-container {
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
      gap: 16px !important;
      align-items: start !important;
    }

    #petugas-profil-container>div:first-child {
      grid-column: 1 / -1 !important;
    }

    /* 4. Multi-Column for Laporan & Rekapitulasi (4-col KPI Cards) */
    .buku-mutasi-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 16px !important;
    }

    /* 5. Centered Forms & Biodata Steps on Desktop */
    .page[data-name="petugas-biodata"] .page-content {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      overscroll-behavior-y: contain !important;
      padding-bottom: 130px !important;
    }

    .page[data-name="petugas-biodata"] .sigap-page-container,
    .page[data-name="petugas-biodata"] .step-container,
    .page[data-name="petugas-biodata"] #biodata-stepper-progress,
    .page[data-name="petugas-biodata"] form {
      max-width: 920px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .page[data-name="petugas-mutasi-keluar"] .page-content>div:first-child {
      max-width: 1100px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .page[data-name="peta-kelola-polygon"] .page-content>div:first-child {
      max-width: 1100px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .page[data-name="login"] .login-screen-content,
    .page[data-name="register"] .register-screen-content {
      max-width: 480px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* =========================================================
   LINMAS MULTI-COLUMN DASHBOARD LAYOUT (DESKTOP & WIDE SCREEN)
   ========================================================= */
  .linmas-dashboard-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }

  .linmas-dashboard-col-left {
    width: 100%;
    box-sizing: border-box;
  }

  .linmas-dashboard-col-right {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    margin-top: 20px;
  }

  .linmas-metric-cards-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .linmas-metric-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    border: 1px solid #f1f5f9;
    box-sizing: border-box;
  }

  .linmas-metric-masuk {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border: 1.5px solid #dcfce7;
  }

  .linmas-metric-keluar {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border: 1.5px solid #ffedd5;
  }

  .linmas-dashboard-widget-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    border: 1px solid #f1f5f9;
    box-sizing: border-box;
  }

  /* Hide right column (map & banjar widget) & extra metric cards on mobile screen */
  @media (max-width: 959px) {
    .linmas-dashboard-col-right {
      display: none !important;
    }

    .linmas-metric-cards-grid .linmas-metric-masuk,
    .linmas-metric-cards-grid .linmas-metric-keluar {
      display: none !important;
    }
  }

  /* On Desktop / Tablet / Wide Screens (>= 960px): Multi-Column Dashboard (No Overlap) */
  @media (min-width: 960px) {
    .linmas-top-header {
      padding: 22px 28px 24px 28px !important;
      border-radius: 0 0 24px 24px !important;
    }

    .linmas-dashboard-grid-container {
      display: grid !important;
      grid-template-columns: 1.18fr 0.82fr !important;
      gap: 24px !important;
      padding: 0 24px !important;
      margin-top: 22px !important;
      align-items: start !important;
    }

    .linmas-dashboard-col-left {
      padding: 0 !important;
    }

    .linmas-dashboard-col-right {
      display: block !important;
      padding: 0 !important;
      margin-top: 0 !important;
      position: sticky !important;
      top: 20px !important;
    }

    .linmas-metric-cards-grid {
      display: grid !important;
      grid-template-columns: 1.25fr 1fr 1fr !important;
      gap: 16px !important;
      margin: 0 0 22px 0 !important;
      /* Zero negative margin to prevent overlapping header */
    }

    .linmas-metric-cards-grid .linmas-stat-card-total {
      margin: 0 !important;
      height: 100% !important;
      box-sizing: border-box !important;
    }

    .linmas-metric-cards-grid .linmas-metric-masuk,
    .linmas-metric-cards-grid .linmas-metric-keluar {
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      margin: 0 !important;
      height: 100% !important;
      box-sizing: border-box !important;
    }

    .linmas-action-cards-section {
      padding: 0 !important;
      margin: 0 0 20px 0 !important;
    }
  }

  /* =========================================================
   LINMAS PROFIL FULL SCREEN MODAL & SYNC PROGRESS
   ========================================================= */
  .popup-linmas-profil {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    z-index: 10500 !important;
  }

  .popup-linmas-profil .navbar {
    background: var(--sigap-navbar-bg, #ffffff) !important;
    color: var(--sigap-navbar-text, #0f172a) !important;
    border-bottom: 1px solid var(--sigap-navbar-border, #e2e8f0) !important;
  }

  .popup-linmas-profil .navbar-bg {
    background: var(--sigap-navbar-bg, #ffffff) !important;
  }

  .popup-linmas-profil .page-content {
    padding-top: calc(var(--f7-navbar-height, 56px) + 16px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 80px !important;
    background: var(--sigap-bg-page, #f8fafc);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .popup-offline-sync-progress {
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.25) !important;
    z-index: 12500 !important;
  }

  .sync-stage-row {
    transition: background-color 0.2s ease;
  }

  .sync-stage-row:hover {
    background-color: #f8fafc;
  }

  .sync-stage-icon {
    transition: all 0.25s ease;
  }

  /* Offline Notice Chip */
  .offline-cache-banner {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 14px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
  }

  /* ==========================================================================
   ROLE PERMISSION MATRIX TABLE STYLES (STICKY HEADER & FIXED COLUMNS)
   ========================================================================== */
  .matrix-table-container {
    background: #ffffff;
    border-radius: 18px;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
  }

  .matrix-table-scroll-body {
    max-height: calc(100vh - 320px);
    min-height: 380px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }

  .sigap-matrix-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 13px;
    background: #ffffff;
    text-align: left;
  }

  .sigap-matrix-table thead th {
    position: sticky !important;
    top: 0 !important;
    background: #f8fafc !important;
    z-index: 20 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
  }

  .sigap-matrix-table thead th:first-child {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 30 !important;
    background: #f8fafc !important;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.06) !important;
  }

  .sigap-matrix-table tbody tr.matrix-module-row td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background-color: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.03);
  }

  .sigap-matrix-table tbody tr.matrix-module-row {
    transition: background-color 0.15s ease;
  }

  .sigap-matrix-table tbody tr.matrix-module-row:hover td {
    background-color: #f1f5f9 !important;
  }

  .sigap-matrix-table tbody tr.matrix-module-row:hover td:first-child {
    background-color: #f1f5f9 !important;
  }

  .sigap-matrix-table tbody tr:last-child td {
    border-bottom: none;
  }

  .sigap-matrix-table input[type="checkbox"] {
    cursor: pointer;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    transition: transform 0.12s ease;
  }

  .sigap-matrix-table input[type="checkbox"]:active {
    transform: scale(0.9);
  }

  .sigap-matrix-table .btn-row-select-all {
    transition: all 0.18s ease;
  }

  .sigap-matrix-table .btn-row-select-all:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.05);
  }

  /* ==========================================================================
   ROLE PERMISSION LIST TABLE STYLES
   ========================================================================== */
  .sigap-roles-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #ffffff;
  }

  .sigap-roles-table thead th {
    background: #f8fafc;
    border-bottom: 2px solid #cbd5e1;
    font-weight: 800;
  }

  .sigap-roles-table tbody tr.role-table-row {
    transition: background-color 0.15s ease;
  }

  .sigap-roles-table tbody tr.role-table-row:hover {
    background-color: #f8fafc !important;
  }

  .sigap-roles-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Matrix Action Tiles (Modern Card-Based RBAC) */
  .matrix-action-tile {
    cursor: pointer;
    user-select: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .matrix-action-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .matrix-action-tile:active {
    transform: scale(0.98);
  }

  /* ==========================================================================
   🌓 UNIVERSAL NATURAL THEME SYSTEM (LIGHT, DARK, AUTO SYSTEM)
   ========================================================================== */

  /* Universal CSS Variable Tokens (Default: Modern Clean Slate & Pro-GovTech) */
  :root {
    color-scheme: light dark;

    --sigap-bg-app: #f8fafc;
    --sigap-bg-page: #f8fafc;
    --sigap-bg-card: #ffffff;
    --sigap-bg-card-subtle: #f1f5f9;
    --sigap-bg-input: #ffffff;
    --sigap-border: #e2e8f0;
    --sigap-border-subtle: #f1f5f9;
    --sigap-text-main: #0f172a;
    --sigap-text-heading: #0f172a;
    --sigap-text-muted: #64748b;
    --sigap-primary: #2563eb;
    --sigap-primary-hover: #1d4ed8;
    --sigap-primary-subtle: #eff6ff;
    --sigap-primary-text: #2563eb;

    /* Natural Crisp Light Sidebar */
    --sigap-sidebar-bg: #ffffff;
    --sigap-sidebar-border: #e2e8f0;
    --sigap-sidebar-text: #334155;
    --sigap-sidebar-text-muted: #64748b;
    --sigap-sidebar-item-hover-bg: #f8fafc;
    --sigap-sidebar-item-active-bg: #eff6ff;
    --sigap-sidebar-item-active-text: #2563eb;
    --sigap-sidebar-card-bg: #f8fafc;
    --sigap-sidebar-card-border: #e2e8f0;
    --sigap-sidebar-title: #0f172a;
    --sigap-sidebar-shadow: 4px 0 24px rgba(15, 23, 42, 0.05);

    /* Modern Clean Slate Navbar (Clean Crystal White) */
    --sigap-navbar-bg: #ffffff;
    --sigap-navbar-text: #0f172a;
    --sigap-navbar-border: #e2e8f0;
    --sigap-navbar-icon: #334155;
    --sigap-navbar-icon-hover: #2563eb;
    --sigap-navbar-btn-bg: #f8fafc;
    --sigap-navbar-btn-border: #e2e8f0;
    --sigap-navbar-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);

    --sigap-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.03);
  }

  /* Forced Dark Mode or System Dark */
  html[data-theme="dark"],
  body.theme-dark,
  #app.theme-dark {
    --sigap-bg-app: #0b1120;
    --sigap-bg-page: #0b1120;
    --sigap-bg-card: #1e293b;
    --sigap-bg-card-subtle: #0f172a;
    --sigap-bg-input: #0f172a;
    --sigap-border: #334155;
    --sigap-border-subtle: #475569;
    --sigap-text-main: #f8fafc;
    --sigap-text-heading: #ffffff;
    --sigap-text-muted: #94a3b8;
    --sigap-primary: #3b82f6;
    --sigap-primary-hover: #60a5fa;
    --sigap-primary-subtle: rgba(37, 99, 235, 0.2);
    --sigap-primary-text: #60a5fa;

    /* Sleek Dark Slate Sidebar */
    --sigap-sidebar-bg: #0f172a;
    --sigap-sidebar-border: rgba(255, 255, 255, 0.08);
    --sigap-sidebar-text: #cbd5e1;
    --sigap-sidebar-text-muted: #94a3b8;
    --sigap-sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sigap-sidebar-item-active-bg: rgba(37, 99, 235, 0.25);
    --sigap-sidebar-item-active-text: #60a5fa;
    --sigap-sidebar-card-bg: rgba(255, 255, 255, 0.04);
    --sigap-sidebar-card-border: rgba(255, 255, 255, 0.08);
    --sigap-sidebar-title: #ffffff;
    --sigap-sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);

    /* Dark Navbar (Sleek Obsidian Slate Header) */
    --sigap-navbar-bg: #0f172a;
    --sigap-navbar-text: #ffffff;
    --sigap-navbar-border: rgba(255, 255, 255, 0.08);
    --sigap-navbar-icon: #cbd5e1;
    --sigap-navbar-icon-hover: #60a5fa;
    --sigap-navbar-btn-bg: rgba(255, 255, 255, 0.06);
    --sigap-navbar-btn-border: rgba(255, 255, 255, 0.1);
    --sigap-navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);

    --sigap-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  }

  /* Page & View Backgrounds */
  .page,
  .page-content {
    background-color: var(--sigap-bg-page) !important;
    color: var(--sigap-text-main) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* Card & ListView Styling */
  .sigap-card,
  .role-card-item,
  .user-card-item {
    background: var(--sigap-bg-card) !important;
    border-color: var(--sigap-border) !important;
    color: var(--sigap-text-main) !important;
    box-shadow: var(--sigap-card-shadow) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .user-listview-wrap {
    background: var(--sigap-bg-card, #ffffff) !important;
    border-radius: 16px !important;
    border: 1px solid var(--sigap-border, #e2e8f0) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .user-list-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--sigap-border, #f1f5f9) !important;
    background: var(--sigap-bg-card, #ffffff) !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
    gap: 16px !important;
  }

  .user-list-row:last-child {
    border-bottom: none !important;
  }

  .user-list-row:hover {
    background-color: var(--sigap-bg-hover, #f8fafc) !important;
  }

  .user-actions-desktop {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .user-extra-info-desktop {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 1 280px !important;
    min-width: 220px !important;
    font-size: 12px !important;
  }

  .user-action-chevron-mobile {
    display: none !important;
  }

  @media (max-width: 899px) {
    .user-list-row {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 14px !important;
      gap: 12px !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    .user-list-row:active {
      background-color: var(--sigap-bg-hover, #f1f5f9) !important;
    }

    .user-extra-info-desktop {
      display: none !important;
    }

    .user-actions-desktop {
      display: none !important;
    }

    .user-action-chevron-mobile {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }

    .user-action-chevron-mobile .btn-user-action-sheet {
      transition: transform 0.15s ease, background-color 0.15s ease !important;
    }

    .user-action-chevron-mobile .btn-user-action-sheet:active {
      transform: scale(0.92) !important;
    }

    .user-meta-desktop-only {
      display: none !important;
    }

    .user-meta-mobile-only {
      display: inline !important;
    }
  }

  @media (min-width: 900px) {
    .user-extra-info-desktop {
      display: flex !important;
    }

    .user-actions-desktop {
      display: flex !important;
    }

    .user-action-chevron-mobile {
      display: none !important;
    }

    .user-meta-desktop-only {
      display: inline !important;
    }

    .user-meta-mobile-only {
      display: none !important;
    }
  }

  /* Navbar / Header General Styling */
  .navbar {
    background: var(--sigap-navbar-bg) !important;
    color: var(--sigap-navbar-text) !important;
    border-bottom: 1px solid var(--sigap-navbar-border) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .navbar-bg {
    background: var(--sigap-navbar-bg) !important;
    transition: background-color 0.25s ease;
  }

  .navbar .title {
    color: var(--sigap-navbar-text) !important;
    font-weight: 700;
  }

  .navbar .title span {
    color: inherit !important;
  }

  /* Dark theme specific component overrides */
  html[data-theme="dark"] .navbar,
  body.theme-dark .navbar {
    background: var(--sigap-navbar-bg) !important;
    border-bottom: 1px solid var(--sigap-navbar-border) !important;
    color: #ffffff !important;
  }

  html[data-theme="dark"] .navbar-bg,
  body.theme-dark .navbar-bg {
    background: var(--sigap-navbar-bg) !important;
  }

  html[data-theme="dark"] .navbar a.link,
  body.theme-dark .navbar a.link {
    color: var(--sigap-navbar-icon, #cbd5e1) !important;
    background: var(--sigap-navbar-btn-bg, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--sigap-navbar-btn-border, rgba(255, 255, 255, 0.1)) !important;
  }
  html[data-theme="dark"] .navbar a.link:hover,
  body.theme-dark .navbar a.link:hover {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
  }

  html[data-theme="dark"] .sigap-stepper-step.completed,
  body.theme-dark .sigap-stepper-step.completed {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    color: #60a5fa !important;
  }
  html[data-theme="dark"] .sigap-stepper-step.inactive,
  body.theme-dark .sigap-stepper-step.inactive {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #64748b !important;
  }
  html[data-theme="dark"] .sigap-stepper-line,
  body.theme-dark .sigap-stepper-line {
    background: rgba(255, 255, 255, 0.15) !important;
  }
  html[data-theme="dark"] .sigap-navbar-progress-track,
  body.theme-dark .sigap-navbar-progress-track {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  html[data-theme="dark"] input[type="text"]:not([class*="linmas-search"]),
  html[data-theme="dark"] input[type="number"],
  html[data-theme="dark"] input[type="email"],
  html[data-theme="dark"] input[type="password"],
  html[data-theme="dark"] input[type="search"],
  html[data-theme="dark"] input[type="tel"],
  html[data-theme="dark"] input[type="url"],
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  body.theme-dark input[type="text"]:not([class*="linmas-search"]),
  body.theme-dark input[type="number"],
  body.theme-dark input[type="email"],
  body.theme-dark input[type="password"],
  body.theme-dark input[type="search"],
  body.theme-dark input[type="tel"],
  body.theme-dark input[type="url"],
  body.theme-dark select,
  body.theme-dark textarea {
    background: var(--sigap-bg-input) !important;
    border-color: var(--sigap-border) !important;
    color: var(--sigap-text-main) !important;
  }

  html[data-theme="dark"] .popup .page,
  body.theme-dark .popup .page {
    background: var(--sigap-bg-page) !important;
  }

  html[data-theme="dark"] .sigap-matrix-table,
  body.theme-dark .sigap-matrix-table {
    background: var(--sigap-bg-card) !important;
    color: var(--sigap-text-main) !important;
  }

  html[data-theme="dark"] .sigap-matrix-table thead th,
  body.theme-dark .sigap-matrix-table thead th,
  html[data-theme="dark"] .sigap-matrix-table thead th:first-child,
  body.theme-dark .sigap-matrix-table thead th:first-child {
    background: var(--sigap-bg-card-subtle, #1e293b) !important;
    border-bottom-color: var(--sigap-border, #334155) !important;
    color: var(--sigap-text-heading, #f8fafc) !important;
  }

  html[data-theme="dark"] .sigap-matrix-table tbody tr.matrix-module-row td:first-child,
  body.theme-dark .sigap-matrix-table tbody tr.matrix-module-row td:first-child {
    background-color: var(--sigap-bg-card, #0f172a) !important;
  }

  html[data-theme="dark"] .sigap-matrix-table tbody tr.matrix-module-row:hover td,
  body.theme-dark .sigap-matrix-table tbody tr.matrix-module-row:hover td,
  html[data-theme="dark"] .sigap-matrix-table tbody tr.matrix-module-row:hover td:first-child,
  body.theme-dark .sigap-matrix-table tbody tr.matrix-module-row:hover td:first-child {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  html[data-theme="dark"] .sigap-roles-table,
  body.theme-dark .sigap-roles-table {
    background: var(--sigap-bg-card) !important;
    color: var(--sigap-text-main) !important;
  }

  html[data-theme="dark"] .sigap-roles-table thead th,
  body.theme-dark .sigap-roles-table thead th {
    background: var(--sigap-bg-card-subtle, #1e293b) !important;
    border-bottom-color: var(--sigap-border, #334155) !important;
    color: var(--sigap-text-heading, #f8fafc) !important;
  }

  html[data-theme="dark"] .sigap-roles-table tbody tr.role-table-row:hover,
  body.theme-dark .sigap-roles-table tbody tr.role-table-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Sidebar Specific Elements */
  .sidebar-user-card {
    background: var(--sigap-sidebar-card-bg) !important;
    border: 1px solid var(--sigap-sidebar-card-border) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  .sidebar-user-name {
    color: var(--sigap-sidebar-title) !important;
  }

  .sidebar-user-role.role-super-text {
    color: #d97706 !important;
    font-weight: 800;
  }

  html[data-theme="dark"] .sidebar-user-role.role-super-text,
  body.theme-dark .sidebar-user-role.role-super-text {
    color: #f59e0b !important;
  }

  .sidebar-user-role.role-normal-text {
    color: #2563eb !important;
    font-weight: 700;
  }

  html[data-theme="dark"] .sidebar-user-role.role-normal-text,
  body.theme-dark .sidebar-user-role.role-normal-text {
    color: #93c5fd !important;
  }

  .sidebar-user-wilayah {
    color: var(--sigap-sidebar-text-muted) !important;
    border-top: 1px solid var(--sigap-sidebar-card-border) !important;
  }

  .sidebar-theme-wrapper {
    border-top: 1px solid var(--sigap-sidebar-card-border) !important;
  }

  .sidebar-theme-title {
    color: var(--sigap-sidebar-text-muted) !important;
  }

  .sigap-theme-segmented-ctrl {
    display: flex;
    background: var(--sigap-sidebar-item-hover-bg);
    border: 1px solid var(--sigap-sidebar-card-border);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  .sigap-theme-segmented-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sigap-sidebar-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .sigap-theme-segmented-btn.active {
    background: var(--sigap-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  }

  .sidebar-divider {
    color: var(--sigap-sidebar-text-muted) !important;
  }

  .sidebar-action-item {
    border-top: 1px solid var(--sigap-sidebar-card-border) !important;
  }

  .sidebar-pwa-title {
    color: var(--sigap-primary-text) !important;
  }

  .sidebar-logout-link {
    transition: background-color 0.2s ease;
  }

  .sidebar-logout-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
  }

  .sidebar-logout-title {
    color: #dc2626 !important;
    font-weight: 700;
  }

  html[data-theme="dark"] .sidebar-logout-title,
  body.theme-dark .sidebar-logout-title {
    color: #f87171 !important;
  }

  @keyframes radarPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
      box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }

  /* Custom Interactive Radius Range Slider (Min 50m) */
  .sigap-radius-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
    margin: 8px 0 4px;
  }

  .sigap-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .sigap-radius-slider::-webkit-slider-thumb:active {
    transform: scale(1.18);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.65);
  }

  .sigap-radius-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
    cursor: pointer;
  }

  /* Quick Radius Preset Chips */
  .btn-radius-chip {
    flex: 1 0 auto;
    min-width: 52px;
    height: 32px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .btn-radius-chip:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
  }

  .btn-radius-chip:active {
    transform: scale(0.95);
  }

  .btn-radius-chip.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
  }

  /* =========================================================
   DUKTANG STATUS SEGMENTED TABS & COMPACT CARDS
   ========================================================= */
  .duktang-status-tab-segment {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 12px;
    margin: 0 0 10px;
    gap: 4px;
  }

  .btn-status-didata-tab {
    flex: 1;
    border: none;
    border-radius: 9px;
    padding: 7px 4px;
    font-size: 11.5px;
    font-weight: 700;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .btn-status-didata-tab:active {
    transform: scale(0.97);
  }

  .btn-status-didata-tab.active {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }

  .tab-count-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 800;
    line-height: 1.3;
  }

  .tab-badge-all {
    background: #e2e8f0;
    color: #334155;
  }

  .tab-badge-belum {
    background: #fef3c7;
    color: #d97706;
  }

  .tab-badge-sudah {
    background: #d1fae5;
    color: #059669;
  }

  .sigap-compact-duktang-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: all 0.15s ease;
  }

  .sigap-compact-duktang-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  }

  .btn-jump-to-nearest:active {
    transform: scale(0.98);
  }

  /* =========================================================
   SIGAP SWEETALERT2 LUXURY GLASS THEME
   ========================================================= */
  .swal2-container {
    z-index: 99999 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(15, 23, 42, 0.5) !important;
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .swal2-container.swal2-center {
    align-items: center !important;
    justify-content: center !important;
  }

  .swal2-popup {
    border-radius: 28px !important;
    padding: 24px 20px 22px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    max-width: 90vw !important;
    width: 380px !important;
    margin: auto !important;
  }

  .swal2-popup-center-luxury {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 30px 70px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  }

  [data-theme="dark"] .swal2-popup,
  .theme-dark .swal2-popup {
    background: #1e293b !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(51, 65, 85, 0.8) !important;
  }

  .swal2-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 12px 0 6px !important;
    letter-spacing: -0.2px !important;
  }

  [data-theme="dark"] .swal2-title,
  .theme-dark .swal2-title {
    color: #f8fafc !important;
  }

  .swal2-html-container {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
    padding: 0 6px !important;
  }

  [data-theme="dark"] .swal2-html-container,
  .theme-dark .swal2-html-container {
    color: #94a3b8 !important;
  }

  .swal2-actions {
    margin: 12px 0 0 !important;
    gap: 10px !important;
    width: 100% !important;
    display: flex !important;
  }

  .swal2-styled {
    font-family: inherit !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    height: 48px !important;
    padding: 0 18px !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    flex: 1 !important;
  }

  .swal2-styled:active {
    transform: scale(0.97) !important;
  }

  .swal2-confirm {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
    border: none !important;
  }

  .swal2-confirm.swal2-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
  }

  .swal2-confirm.swal2-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
  }

  .swal2-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
  }

  [data-theme="dark"] .swal2-cancel,
  .theme-dark .swal2-cancel {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
  }

  .swal2-icon {
    margin: 10px auto 14px !important;
    transform: scale(1.05) !important;
  }

  .swal2-timer-progress-bar {
    background: rgba(37, 99, 235, 0.6) !important;
    height: 4px !important;
    border-radius: 99px !important;
  }

  /* =========================================================
   STEP 4: SUB KATEGORI PENDUDUK DIRECTORY & TABLE UI
   ========================================================= */
  .subkat-hero-card {
    margin: 12px 16px 14px;
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
  }

  .subkat-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  }

  .subkat-trail-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 10px;
  }

  .subkat-trail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1.2;
  }

  .subkat-trail-chip i {
    font-size: 12px;
  }

  .subkat-trail-chip.blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
  }

  .subkat-trail-chip.purple {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #f3e8ff;
  }

  .subkat-trail-chip.emerald {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #d1fae5;
  }

  .subkat-trail-sep {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
  }

  .subkat-hero-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .subkat-hero-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }

  .subkat-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  }

  .subkat-hero-meta {
    min-width: 0;
    flex: 1;
  }

  .subkat-hero-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
  }

  .subkat-hero-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .subkat-hero-sub i {
    font-size: 13px;
    color: #94a3b8;
  }

  .subkat-btn-ganti {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #2563eb;
    background: #f0f7ff;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    flex-shrink: 0;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .subkat-btn-ganti:active {
    background: #dbeafe;
    transform: scale(0.96);
  }

  /* Control Bar */
  .subkat-ctrl-bar {
    margin: 0 16px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .subkat-search-box {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 0 12px;
    height: 42px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
  }

  .subkat-search-box:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  }

  .subkat-search-box i.subkat-search-icon {
    color: #94a3b8;
    font-size: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .subkat-search-box input,
  .subkat-search-box input:focus,
  .subkat-search-box input:active,
  #subkat-duktang-search-input,
  #subkat-duktang-search-input:focus,
  #subkat-duktang-search-input:active {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    font-family: inherit !important;
  }

  .subkat-search-box input::placeholder,
  #subkat-duktang-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
  }

  .subkat-search-clear {
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
    display: none;
  }

  .subkat-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    background: #ffffff;
    color: #1e3a8a;
    border: 1.5px solid #cbd5e1;
    padding: 0 12px;
    border-radius: 12px;
    height: 42px;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  }

  /* Scope Filter (Cakupan Data) */
  .subkat-scope-filter-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .subkat-scope-filter-wrap::-webkit-scrollbar {
    display: none;
  }

  .subkat-scope-btn {
    background: #ffffff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    flex-shrink: 0;
  }

  .subkat-scope-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .subkat-scope-btn.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border: 1.5px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    font-weight: 800;
  }

  .subkat-scope-btn i {
    font-size: 15px;
    color: inherit;
  }

  /* View Mode Toggle (5 per hal vs Semua) */
  .subkat-view-mode-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
    height: 42px;
    box-sizing: border-box;
    align-items: center;
  }

  .subkat-view-mode-btn {
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 100%;
    display: inline-flex;
    align-items: center;
  }

  .subkat-view-mode-btn.active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
  }

  /* Pagination Bar & Buttons */
  .subkat-pagination-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 14px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  }

  .subkat-page-info {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
  }

  .subkat-page-nav {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .btn-subkat-page-prev,
  .btn-subkat-page-next {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .btn-subkat-page-prev:not(:disabled):hover,
  .btn-subkat-page-next:not(:disabled):hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
  }

  .btn-subkat-page-prev:disabled,
  .btn-subkat-page-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .btn-subkat-page-num {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .btn-subkat-page-num:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  .btn-subkat-page-num.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  }

  /* Dark Mode Extensions */
  [data-theme="dark"] .subkat-scope-btn,
  .theme-dark .subkat-scope-btn {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
  }

  [data-theme="dark"] .subkat-scope-btn.active,
  .theme-dark .subkat-scope-btn.active {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #3b82f6;
  }

  [data-theme="dark"] .subkat-view-mode-toggle,
  .theme-dark .subkat-view-mode-toggle {
    background: #0f172a;
    border-color: #334155;
  }

  [data-theme="dark"] .subkat-view-mode-btn.active,
  .theme-dark .subkat-view-mode-btn.active {
    background: #1e293b;
    color: #60a5fa;
  }

  [data-theme="dark"] .subkat-pagination-bar,
  .theme-dark .subkat-pagination-bar {
    background: #1e293b;
    border-color: #334155;
  }

  [data-theme="dark"] .btn-subkat-page-prev,
  [data-theme="dark"] .btn-subkat-page-next,
  [data-theme="dark"] .btn-subkat-page-num,
  .theme-dark .btn-subkat-page-prev,
  .theme-dark .btn-subkat-page-next,
  .theme-dark .btn-subkat-page-num {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
  }

  [data-theme="dark"] .btn-subkat-page-num.active,
  .theme-dark .btn-subkat-page-num.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }

  /* Resident Card & Table Styling */
  .subkat-table-wrapper {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 24px;
  }

  .subkat-res-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 12.5px;
  }

  .subkat-res-table thead tr {
    background: #f8fafc;
  }

  .subkat-res-table thead th {
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid #e2e8f0;
  }

  .subkat-res-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
  }

  .subkat-res-table tbody tr:hover {
    background: #f8fafc;
  }

  .subkat-res-table tbody tr:last-child td {
    border-bottom: none;
  }

  .subkat-res-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
  }

  /* Bottom Action Bar for Step 4 & Step 5 (Fixed Bottom System) */
  .subkat-bottom-bar,
  .biodata-fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1.5px solid #e2e8f0;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .biodata-bottom-bar-inner {
    width: 100%;
    max-width: 920px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
  }

  .btn-bottom-nav,
  .btn-subkat-biodata {
    min-height: 48px;
    height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
  }

  .btn-bottom-primary {
    flex: 2;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3) !important;
  }

  .btn-bottom-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
  }

  .btn-bottom-secondary {
    flex: 1;
    max-width: 150px;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
  }

  .btn-bottom-secondary:active {
    background: #f1f5f9 !important;
    transform: scale(0.98);
  }

  .btn-bottom-submit {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
  }

  .btn-subkat-biodata {
    width: auto !important;
    max-width: 100%;
    padding: 8px 24px !important;
  }

  @media (min-width: 960px) {

    body:not(:has(.page[data-name="login"])):not(:has(.page[data-name="register"])) .subkat-bottom-bar,
    body:not(:has(.page[data-name="login"])):not(:has(.page[data-name="register"])) .biodata-fixed-bottom-bar {
      left: 280px !important;
    }
  }

  @media (max-width: 480px) {

    .btn-bottom-nav,
    .btn-subkat-biodata {
      font-size: 12.5px !important;
      padding: 6px 10px !important;
      min-height: 44px;
      gap: 4px !important;
    }

    .btn-bottom-nav i,
    .btn-subkat-biodata i {
      font-size: 18px !important;
    }

    .btn-bottom-secondary {
      max-width: 110px;
    }
  }

  /* Universal Text & Font Wrapping for Small Screens and Long Content */
  .subkat-hero-title,
  .subkat-hero-sub,
  .subkat-trail-chips {
    flex-wrap: wrap !important;
  }

  .subkat-trail-chip,
  #bio-summary-pj,
  #bio-summary-kategori,
  #bio-summary-subkat,
  #bio-summary-wilayah,
  #bio-summary-gps {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Dark Mode support */
  [data-theme="dark"] .subkat-bottom-bar,
  [data-theme="dark"] .biodata-fixed-bottom-bar,
  .theme-dark .subkat-bottom-bar,
  .theme-dark .biodata-fixed-bottom-bar {
    background: rgba(30, 41, 59, 0.96) !important;
    border-top-color: #334155 !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4) !important;
  }

  [data-theme="dark"] .btn-bottom-secondary,
  .theme-dark .btn-bottom-secondary {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
  }

  /* Cascade Step Breadcrumb Banner inside Wilayah Picker Modal */
  #picker-cascade-stepper {
    transition: all 0.2s ease;
  }

  [data-theme="dark"] #picker-cascade-stepper,
  .theme-dark #picker-cascade-stepper {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
    color: #93c5fd !important;
  }

  /* =========================================================
   COMPACT LUXURY SELECT & DROPDOWN CONTROLS (SPACE-SAVING)
   ========================================================= */
  .luxury-select-wrapper {
    position: relative;
    width: 100%;
  }

  .luxury-select-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 38px 12px 14px;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px !important;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a !important;
    outline: none;
    background: #ffffff !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  }

  .luxury-select-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15) !important;
  }

  .luxury-select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #2563eb;
    font-size: 22px;
    transition: transform 0.2s ease;
  }

  .luxury-select-wrapper:focus-within .luxury-select-icon {
    color: #1d4ed8;
    transform: translateY(-50%) rotate(180deg);
  }

  .quick-chip-smart-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 2px 7px;
    border-radius: 6px;
  }

  /* =========================================================
   FLEXIBLE SIGAP SEARCH & INLINE AI ASSISTANT SYSTEM
   ========================================================= */
  .sigap-mode-pill-bar {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 16px;
    margin-bottom: 14px;
  }

  .btn-sigap-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-sigap-mode-tab i {
    font-size: 18px;
    transition: transform 0.2s ease;
  }

  .btn-sigap-mode-tab.active {
    background: #ffffff;
    color: #2563eb;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  .btn-sigap-mode-tab.active i {
    transform: scale(1.1);
  }

  .btn-sigap-mode-tab:hover:not(.active) {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
  }

  /* Prompt Suggestion Chips & Filter Pills */
  .sigap-prompt-chip,
  .btn-banjar-filter-chip,
  .btn-ai-suggestion-chip,
  .btn-quick-ai-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .sigap-prompt-chip {
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  }

  .sigap-prompt-chip:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.1);
  }

  .sigap-prompt-chip:active {
    transform: translateY(0);
  }

  /* Inline AI Loading Pulse */
  .sigap-ai-inline-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 12px;
  }

  @keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Radar Collapse Toggle */
  .radar-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }

  .radar-collapse-header:hover {
    opacity: 0.92;
  }

  /* Dark mode support */
  [data-theme="dark"] .luxury-select-control,
  .theme-dark .luxury-select-control {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }

  [data-theme="dark"] .luxury-select-control option,
  .theme-dark .luxury-select-control option {
    background: #1e293b;
    color: #f1f5f9;
  }

  [data-theme="dark"] .luxury-select-icon,
  .theme-dark .luxury-select-icon {
    color: #60a5fa;
  }

  [data-theme="dark"] .quick-chip-smart-badge,
  .theme-dark .quick-chip-smart-badge {
    background: #064e3b;
    border-color: #059669;
    color: #a7f3d0;
  }

  [data-theme="dark"] .sigap-mode-pill-bar,
  .theme-dark .sigap-mode-pill-bar {
    background: #1e293b;
  }

  [data-theme="dark"] .btn-sigap-mode-tab.active,
  .theme-dark .btn-sigap-mode-tab.active {
    background: #0f172a;
    color: #60a5fa;
  }

  [data-theme="dark"] .sigap-prompt-chip,
  .theme-dark .sigap-prompt-chip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
  }

  /* =========================================================
     SIGAP FLOATING TOP NOTIFICATION POPUP (POPUP ATAS) - DEPRECATED
     (Eliminated in favor of clean center modal alerts across all pages)
     ========================================================= */
  .sigap-top-popup-container,
  .sigap-top-popup-card {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .sigap-widget-hidden {
    display: none !important;
  }

  /* =========================================================
     STEP 1 (PENANGGUNG JAWAB) & STEPPER MOBILE OPTIMIZATIONS
     ========================================================= */

  /* Sembunyikan tombol dashboard duplikat pada layar kecil (panah kiri sudah kembali ke dashboard) */
  @media (max-width: 540px) {
    .nav-action-desktop-only {
      display: none !important;
    }
  }

  /* Stepper Header: Tetap 1 baris, tidak pernah wrap atau melompat baris */
  .sigap-stepper-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    width: 100%;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  .sigap-stepper-step {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .sigap-stepper-step.active-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .sigap-stepper-line {
    flex-shrink: 1 !important;
    min-width: 3px !important;
  }

  /* Banner Header Step 1 */
  .sigap-step-header-banner {
    background: #ffffff;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 13px 14px 11px !important;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .sigap-step-banner-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
  }

  .sigap-step-banner-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #faf5ff;
    color: #9333ea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sigap-step-banner-icon i {
    font-size: 14px;
  }

  .sigap-step-banner-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
  }

  .sigap-step-banner-badge {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #f3e8ff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
  }

  .sigap-step-banner-desc {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.3;
  }

  /* Page container */
  .sigap-page-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 14px 24px;
    box-sizing: border-box;
    width: 100%;
  }

  /* PJ Card Item: Modern, Ergonomis & Responsif */
  .pj-card-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
  }

  .pj-card-item:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  }

  .pj-card-item:active {
    transform: scale(0.99);
    background: #f8fafc;
  }

  .pj-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
  }

  .pj-card-avatar i {
    font-size: 22px;
  }

  .pj-card-info {
    flex: 1;
    min-width: 0;
  }

  .pj-card-name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
    margin-bottom: 2px;
  }

  .pj-meta-subkat {
    font-size: 11.5px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    word-break: break-word;
  }

  .pj-meta-subkat i {
    font-size: 13px;
    flex-shrink: 0;
  }

  .pj-meta-kost {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    word-break: break-word;
  }

  .pj-meta-kost i {
    font-size: 12px;
    flex-shrink: 0;
  }

  .pj-card-meta-line {
    font-size: 11.5px;
    color: #334155;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    line-height: 1.35;
  }

  .pj-nik-chip {
    font-family: monospace;
    font-size: 11.5px;
  }

  .pj-nik-chip strong {
    color: #0f172a;
  }

  .pj-meta-divider {
    color: #cbd5e1;
  }

  .pj-meta-hp {
    color: #059669;
    font-weight: 700;
    font-size: 11.5px;
    word-break: break-all;
  }

  .pj-meta-nohp {
    color: #94a3b8;
    font-size: 11.5px;
  }

  .pj-card-address-line {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .pj-addr-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .pj-addr-text i {
    font-size: 13px;
    color: #94a3b8;
  }

  .pj-badge-jarak {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .pj-card-btn-wrap {
    flex-shrink: 0;
  }

  .btn-select-pj {
    border-radius: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    height: 32px !important;
    padding: 0 12px !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  }

  /* Search input focus & modern look */
  #pj-search-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  }

  /* Aturan Responsif Layar Kecil (Mobile max-width 420px) */
  @media (max-width: 420px) {
    .sigap-stepper-wrap {
      gap: 3px !important;
    }
    .sigap-stepper-line {
      width: 6px !important;
      min-width: 2px !important;
    }
    .sigap-stepper-step {
      width: 20px !important;
      height: 20px !important;
      font-size: 10px !important;
    }
    .sigap-stepper-step.active-pill {
      height: 24px !important;
      padding: 2px 7px 2px 3px !important;
      gap: 3px !important;
    }
    .sigap-stepper-step.active-pill .step-circle {
      width: 17px !important;
      height: 17px !important;
      font-size: 9.5px !important;
    }
    .sigap-stepper-step.active-pill .step-label {
      font-size: 10.5px !important;
      white-space: nowrap !important;
    }
    .sigap-page-container {
      padding: 10px 10px 24px !important;
    }
    .sigap-step-header-banner {
      padding: 10px 12px 8px !important;
    }
    .sigap-step-banner-desc {
      font-size: 11px !important;
    }
    .pj-card-item {
      padding: 10px 11px !important;
      gap: 9px !important;
      border-radius: 14px !important;
    }
    .pj-card-avatar {
      width: 38px !important;
      height: 38px !important;
      border-radius: 10px !important;
    }
    .pj-card-avatar i {
      font-size: 20px !important;
    }
    .pj-card-name {
      font-size: 13.5px !important;
    }
    .pj-card-meta-line {
      font-size: 11px !important;
    }
    .btn-select-pj {
      height: 30px !important;
      padding: 0 10px !important;
      font-size: 11px !important;
    }
    .sigap-fab-btn {
      height: 44px !important;
      padding: 0 16px 0 10px !important;
      font-size: 12.5px !important;
    }
  }

  /* Aturan Layar Ekstra Kecil (Mobile max-width 360px) */
  @media (max-width: 360px) {
    .sigap-stepper-wrap {
      gap: 2px !important;
    }
    .sigap-stepper-line {
      width: 4px !important;
      min-width: 1px !important;
    }
    .sigap-stepper-step.active-pill .step-label {
      max-width: 48px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* =========================================================
     KONTROL TABBAR FLOATING LINMAS (PERMANENTLY DISABLED)
     ========================================================= */
  .page .linmas-pill-tabbar,
  #linmas-global-tabbar,
  .linmas-pill-tabbar,
  body.role-linmas #linmas-global-tabbar {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* =========================================================
     ZERO-FLICKER / ANTI-BLINK ROUTER TRANSITION ENGINE (GLOBAL)
     ========================================================= */
  html, body, #app, .views, .view, .view-main, .view-main .page, .page-content {
    background-color: #f8fafc !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* Matikan semua animasi transisi halaman (0ms) untuk menghilangkan jeda, kedipan, dan layar putih */
  .router-transition-css,
  .router-transition-f7-fade-forward,
  .router-transition-f7-fade-backward,
  .router-transition-f7-cover-forward,
  .router-transition-f7-cover-backward,
  .router-transition-f7-cover-v-forward,
  .router-transition-f7-cover-v-backward,
  .router-transition-f7-push-forward,
  .router-transition-f7-push-backward,
  .page-transitioning,
  .page-transitioning * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    animation: none !important;
  }

  .router-transition-f7-fade-forward .page-current,
  .router-transition-f7-fade-backward .page-current,
  .router-transition-f7-cover-forward .page-current,
  .router-transition-f7-cover-backward .page-current {
    opacity: 0 !important;
    display: none !important;
  }

  .router-transition-f7-fade-forward .page-next,
  .router-transition-f7-fade-backward .page-previous,
  .router-transition-f7-cover-forward .page-next,
  .router-transition-f7-cover-backward .page-previous {
    opacity: 1 !important;
    transform: none !important;
    z-index: 10 !important;
  }

/* ==========================================================================
   LINMAS PATROLI LAPANGAN STYLING & ALERT BADGES
   ========================================================================== */

.linmas-patroli-alert-badge {
  margin-top: 10px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(253, 230, 138, 0.9));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12);
  user-select: none;
  position: relative;
  z-index: 5;
}

.linmas-patroli-alert-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.linmas-patroli-alert-badge:active {
  transform: scale(0.98);
}

.linmas-patroli-alert-badge.is-safe {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(187, 247, 208, 0.9));
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.1);
}

.linmas-patroli-alert-badge.is-safe .patroli-icon,
.linmas-patroli-alert-badge.is-safe .patroli-label,
.linmas-patroli-alert-badge.is-safe .patroli-count-wrap strong,
.linmas-patroli-alert-badge.is-safe .patroli-action-hint,
.linmas-patroli-alert-badge.is-safe .patroli-arrow {
  color: #15803d !important;
}

.linmas-patroli-alert-badge.is-safe .badge-pulse-dot {
  background: #22c55e !important;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.4);
}

.linmas-patroli-alert-badge .patroli-alert-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.linmas-patroli-alert-badge .patroli-icon {
  font-size: 18px;
  color: #d97706;
}

.linmas-patroli-alert-badge .patroli-info-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.linmas-patroli-alert-badge .patroli-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #92400e;
}

.linmas-patroli-alert-badge .patroli-count-wrap {
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
}

.linmas-patroli-alert-badge .patroli-count-wrap strong {
  color: #b45309;
  font-size: 13px;
}

.linmas-patroli-alert-badge .patroli-alert-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.linmas-patroli-alert-badge .patroli-action-hint {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
}

.linmas-patroli-alert-badge .patroli-arrow {
  font-size: 16px;
  color: #b45309;
}

/* Pulsing Indicator Dot */
.badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  display: inline-block;
  animation: pulsePatroliGlow 1.8s infinite ease-in-out;
}

@keyframes pulsePatroliGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transform: scale(0.95);
  }
}

/* Chips Filter */
.chip-filter {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.chip-filter:hover {
  background: #e2e8f0;
}

.chip-filter.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

/* Patroli Resident Card */
.patroli-resident-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  position: relative;
}

.patroli-resident-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.patroli-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.patroli-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}

.patroli-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patroli-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
}

.patroli-resident-main {
  flex: 1;
  min-width: 0;
}

.patroli-resident-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.patroli-resident-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patroli-badge-bengong {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.patroli-resident-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
}

.patroli-resident-meta .meta-nik {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}

.patroli-resident-meta .meta-nik i {
  font-size: 13px;
}

.patroli-status-banner {
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.patroli-details-grid {
  margin-top: 12px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.patroli-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.patroli-detail-item.full-width {
  grid-column: span 2;
}

.patroli-detail-item .detail-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.patroli-detail-item .detail-label i {
  font-size: 13px;
}

.patroli-detail-item .detail-value {
  font-size: 12px;
  color: #1e293b;
  font-weight: 700;
  line-height: 1.3;
}

.patroli-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.btn-patroli-action {
  height: 38px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-patroli-verif {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-patroli-verif:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

.btn-patroli-map {
  width: 38px;
  background: #f1f5f9;
  color: #0284c7;
  border: 1px solid #cbd5e1;
}

.btn-patroli-map:hover {
  background: #e0f2fe;
}

.btn-patroli-tel {
  width: 38px;
  background: #f1f5f9;
  color: #16a34a;
  border: 1px solid #cbd5e1;
}

.btn-patroli-tel:hover {
  background: #dcfce7;
}

/* ==========================================================================
   LINMAS QUICK ACTION CARDS GRID & RESPONSIVE DASHBOARD
   ========================================================================== */

.linmas-action-cards-section {
  padding: 0 16px;
  margin: 0 0 16px;
  box-sizing: border-box;
}

.linmas-action-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 0;
}

.action-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #f1f5f9;
  padding: 15px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 98px;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
  border-color: #e2e8f0;
}

.action-card:active {
  transform: scale(0.97);
}

.action-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.action-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
  line-height: 1.2;
  margin-bottom: 2px;
  text-align: left;
}

.action-subtitle {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 8px;
  text-align: left;
}

.action-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.action-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  align-self: flex-start;
}

.action-icon-box i {
  font-size: 21px;
}

.action-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
}

/* Card-specific Theme Colors */
.card-catat .action-icon-box.icon-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}
.action-badge.badge-emerald {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.card-kontrol .action-icon-box.icon-amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
}
.action-badge.badge-amber {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.card-pindai .action-icon-box.icon-blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}
.action-badge.badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.card-keluar .action-icon-box.icon-rose {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  color: #ffffff;
}
.action-badge.badge-rose {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

/* Mini Horizontal Report Row */
.linmas-mini-report-row {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.linmas-mini-report-row:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.report-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report-icon-circle i {
  font-size: 18px;
}

.report-row-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1px;
}

.report-row-desc {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-arrow {
  color: #94a3b8;
  font-size: 18px;
}

.desktop-only-recent-duktang {
  padding: 0 16px;
  box-sizing: border-box;
}

/* ==========================================================================
   MOBILE FIRST OPTIMIZATION: HIDE FLOATING TABBAR & LONG RECENT MUTASI
   ========================================================================== */

@media (max-width: 767px) {
  /* Hilangkan floating pill bottom navigation di dashboard petugas layar kecil */
  .page[data-name="petugas-dashboard"] .linmas-pill-tabbar,
  #linmas-global-tabbar {
    display: none !important;
  }

  /* Padding bawah disederhanakan karena tidak ada tabbar melayang */
  .page[data-name="petugas-dashboard"] .page-content {
    padding-bottom: 24px !important;
  }

  /* Hilangkan daftar panjang catatan mutasi di HP dan ganti fokus ke Action Cards */
  .desktop-only-recent-duktang {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .desktop-only-recent-duktang {
    display: block;
  }
}

/* ==========================================================================
/* ==========================================================================
   SIGAP PWA AUTO-UPDATE NOTIFICATION BANNER (SLEEK COMPACT FLOATING BAR)
   ========================================================================== */
.sigap-update-banner-luxury {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 400px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(37, 99, 235, 0.08) !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
  animation: sigapSlideDownBanner 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.sigap-update-banner-luxury.closing {
  animation: sigapSlideUpBanner 0.25s ease forwards !important;
}

.sigap-update-pill-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sigap-update-icon-box {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
.sigap-update-icon-box i {
  font-size: 18px !important;
  animation: sigapSpinIcon 3s linear infinite;
}

@keyframes sigapSpinIcon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sigap-update-text-box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.sigap-update-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sigap-update-desc {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sigap-update-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.sigap-update-btn-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.15s ease !important;
  height: 30px !important;
  line-height: 1 !important;
  width: auto !important;
  flex-shrink: 0 !important;
}
.sigap-update-btn-refresh:active {
  transform: scale(0.96) !important;
  background: #1d4ed8 !important;
}
.sigap-update-btn-refresh i {
  font-size: 15px !important;
}

.sigap-update-btn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.sigap-update-btn-close:active {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(0.9) !important;
}
.sigap-update-btn-close i {
  font-size: 16px !important;
}

[data-theme="dark"] .sigap-update-banner-luxury {
  background: #1e293b !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .sigap-update-title {
  color: #f8fafc !important;
}
[data-theme="dark"] .sigap-update-desc {
  color: #94a3b8 !important;
}
[data-theme="dark"] .sigap-update-btn-close {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

@keyframes sigapSlideDownBanner {
  from {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes sigapSlideUpBanner {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.96);
  }
}