/* ==========================================================================
   TEMA SILIR - CUSTOM CSS & 3-LEVEL MENU SUPPORT
   Presisi, Ringan, 1 Baris Desktop, Teks Putih Terang, & Pulldown Melayang Bebas
   ========================================================================== */

/* 1. Warna Tema Silir */
[data-theme="custom"],
:root {
  --primary-color: #065f46;
  --secondary-color: #059669;
  --accent-color: #10b981;
}

.dark [data-theme="custom"] {
  --primary-color: #10b981;
  --secondary-color: #34d399;
}

/* ==========================================================================
   2. NAVBAR UTAMA: SEJAJAR DENGAN HEADER & RATA TENGAH
   ========================================================================== */

/* Navbar utama dengan z-index tinggi di atas seluruh gambar/hero */
.main-nav,
.main-nav.is-sticky {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
  background-color: var(--primary-color) !important;
  border-bottom: 3px solid var(--secondary-color) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  width: 100% !important;
}

.dark .main-nav,
.dark .main-nav.is-sticky {
  background-color: #0f172a !important;
  border-bottom-color: #059669 !important;
}

/* Wadah Navbar:
   - Sejajar dengan header (max-width: 1275px) jika lebarnya cukup.
   - Melampaui 1275px hingga 100% jika menu butuh ruang lebih agar tetap 1 baris.
   - Posisi konten selalu di RATA TENGAH. */
.main-nav-inner {
  width: 100% !important;
  max-width: 1275px; /* Sejajar dengan container header */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: center !important; /* Rata tengah */
}

/* Bila layar di bawah 1420px (menu banyak butuh ruang lebih), izinkan melampaui 1275px tapi tetap RATA TENGAH */
@media (max-width: 1420px) {
  .main-nav-inner {
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Barisan Menu: 1 Baris Penuh & Rata Tengah Simetris */
.navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* RATA TENGAH */
  flex-wrap: nowrap !important; /* Wajib 1 baris di desktop */
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important; /* Rata tengah */
  padding: 0 !important;
  list-style: none !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 99999 !important;
}

.navigation-item {
  position: relative !important;
  flex-shrink: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  transition: background-color 0.15s ease;
}

/* Link Menu Utama: Teks Putih Terang Kontras */
.navigation-link {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.81rem !important;
  padding: 0.75rem 0.48rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

@media (min-width: 1366px) {
  .navigation-link {
    font-size: 0.835rem !important;
    padding-left: 0.58rem !important;
    padding-right: 0.58rem !important;
  }
}

.navigation-link .ti,
.navigation-link .icon,
.navigation-link span,
.navigation-link i {
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
}

.navigation-icon {
  margin-left: 0.2rem !important;
  font-size: 0.7rem !important;
  opacity: 0.85;
}

/* Hover Menu Utama: Latar hijau terang & Teks Tetap Putih */
.navigation-item:hover {
  background-color: var(--secondary-color) !important;
}

.navigation-item:hover > .navigation-link,
.navigation-item:hover > .navigation-link .ti,
.navigation-item:hover > .navigation-link span,
.navigation-item:hover > .navigation-link i {
  color: #ffffff !important;
}

/* Menu Home & Menu Aktif (.is-active): Latar hijau muda & Icon/Teks Putih Terang Jelas */
.navigation-item.is-active {
  background-color: var(--secondary-color) !important;
  opacity: 1 !important;
}

.navigation-item.is-active > .navigation-link,
.navigation-item.is-active > .navigation-link .ti,
.navigation-item.is-active > .navigation-link .icon,
.navigation-item.is-active > .navigation-link span,
.navigation-item.is-active > .navigation-link i {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.navigation-item .navigation-link .ti-home {
  font-size: 1.15rem !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   3. PULLDOWN MENU LEVEL 2 & SUBTREE LEVEL 3 (MENYESUAIKAN PANJANG TEKS & TIDAK TERPOTONG)
   ========================================================================== */

/* Level 2: Pulldown Dropdown Menu */
.navigation-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: max-content !important; /* Menyesuaikan lebar secara dinamis mengikuti panjang teks */
  min-width: 240px !important;
  max-width: min(90vw, 420px) !important; /* Mencegah overflow layar jika teks terlampau panjang */
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.25), 0 0 1px 1px rgba(0, 0, 0, 0.08) !important;
  z-index: 100000 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.dark .navigation-dropdown {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Menu di ujung kanan layar: pulldown rata kanan agar melebar ke arah kiri */
.navigation-item:nth-last-child(-n+3) > .navigation-dropdown {
  left: auto !important;
  right: 0 !important;
}

/* Saat menu di-hover, pulldown langsung muncul tegas di atas gambar */
.navigation-item:hover > .navigation-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.navigation-dropdown-item {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

.navigation-dropdown-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 16px !important;
  font-size: 0.835rem !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  white-space: normal !important; /* Membungkus rapi di dalam background jika mencapai batas max-width */
  word-break: normal !important;
  gap: 1.25rem !important;
  border-bottom: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.navigation-dropdown-link span {
  flex: 1 1 auto !important;
  color: #1e293b !important;
}

.navigation-dropdown-link i {
  flex-shrink: 0 !important;
  color: #1e293b !important;
  margin-left: auto !important;
}

.dark .navigation-dropdown-link,
.dark .navigation-dropdown-link span,
.dark .navigation-dropdown-link i {
  color: #f8fafc !important;
}

.navigation-dropdown-link:hover {
  background-color: #f1f5f9 !important;
}

.navigation-dropdown-link:hover span,
.navigation-dropdown-link:hover i {
  color: var(--secondary-color) !important;
}

.dark .navigation-dropdown-link:hover {
  background-color: #334155 !important;
}

.dark .navigation-dropdown-link:hover span,
.dark .navigation-dropdown-link:hover i {
  color: #34d399 !important;
}

/* Level 3: Subtree Flyout ke Kanan */
.navigation-subtree {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  width: max-content !important; /* Menyesuaikan lebar otomatis */
  min-width: 240px !important;
  max-width: min(90vw, 420px) !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.28), 0 0 1px 1px rgba(0, 0, 0, 0.08) !important;
  z-index: 100001 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  margin-top: -6px !important;
  overflow: visible !important;
  transform: translateX(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.dark .navigation-subtree {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Untuk menu ujung kanan: subtree flyout ke arah kiri */
.navigation-item:nth-last-child(-n+3) .navigation-subtree {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 6px !important;
}

.navigation-dropdown-item:hover > .navigation-subtree {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.navigation-subtree-item {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  width: 100% !important;
}

.navigation-subtree-link {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 16px !important;
  font-size: 0.835rem !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: normal !important;
  border-bottom: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dark .navigation-subtree-link {
  color: #f8fafc !important;
}

.navigation-subtree-link:hover {
  background-color: #f1f5f9 !important;
  color: var(--secondary-color) !important;
}

.dark .navigation-subtree-link:hover {
  background-color: #334155 !important;
  color: #34d399 !important;
}

/* ==========================================================================
   4. SHORTCUT CARDS & ARTICLE HOVER (GAYA ASLI SILIR)
   ========================================================================== */
.shortcut-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shortcut-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}

.article-wrapper {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   5. LOADING SCREEN (PRELOADER) WAJIB PALING ATAS
   ========================================================================== */
.loading {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483647 !important; /* Layer tertinggi browser, mutlak di atas menu utama */
}

.loading.loading-end,
.loading-end {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   6. MODERN APBDES / APBKAL MANUAL TABLE & FULLSCREEN MODE
   ========================================================================== */

/* Banner Khusus Transparansi APBDes di Artikel */
.apbdes-banner {
  background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #047857 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.apbdes-banner:hover {
  box-shadow: 0 15px 30px -5px rgba(5, 150, 105, 0.35) !important;
}

.btn-apbdes-fs-trigger {
  background-color: #ffffff !important;
  color: #065f46 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.2s ease !important;
}

.btn-apbdes-fs-trigger:hover {
  background-color: #ecfdf5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Header Judul Laporan APBDes */
.main-content table[width="100%"]:first-of-type h4 {
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
  margin: 3px 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
}

.dark .main-content table[width="100%"]:first-of-type h4 {
  color: #f8fafc !important;
}

/* Kotak Filter Pencarian APBDes (.filter-box) */
.filter-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
}

.dark .filter-box {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
}

.filter-box .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  width: 100% !important;
}

.filter-box .col-sm-3 {
  width: 100% !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.filter-box .form-group {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.filter-box label {
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin: 0 !important;
}

.dark .filter-box label {
  color: #94a3b8 !important;
}

.filter-box select.form-control,
.filter-box input.form-control {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dark .filter-box select.form-control,
.dark .filter-box input.form-control {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.filter-box select.form-control:focus,
.filter-box input.form-control:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
}

.filter-box .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.filter-box .btn-default {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

.filter-box .btn-default:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

.dark .filter-box .btn-default {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

.dark .filter-box .btn-default:hover {
  background: #475569 !important;
}

.filter-box .btn-success {
  background: #059669 !important;
  color: #ffffff !important;
}

.filter-box .btn-success:hover {
  background: #047857 !important;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3) !important;
}

.filter-box .filter-summary {
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
  padding: 8px 14px !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 8px !important;
  color: #065f46 !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
}

.dark .filter-box .filter-summary {
  background: #064e3b !important;
  border-color: #047857 !important;
  color: #6ee7b7 !important;
}

/* Tabel APBDes Modern & Elegan */
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  border-radius: 12px !important;
  -webkit-overflow-scrolling: touch !important;
}

table.blueTable,
#tabel-rincian-manual {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  font-size: 0.835rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 20px !important;
}

.dark table.blueTable,
.dark #tabel-rincian-manual {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Header Tabel Modern */
table.blueTable thead,
#tabel-rincian-manual thead {
  background: #0f766e !important; /* Emerald-Teal Elegan */
  color: #ffffff !important;
  border: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

table.blueTable thead th,
#tabel-rincian-manual thead th {
  padding: 12px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  white-space: nowrap !important;
  text-align: center !important;
}

table.blueTable thead th:last-child,
#tabel-rincian-manual thead th:last-child {
  border-right: none !important;
}

/* Isi Sel Tabel */
table.blueTable tbody td,
#tabel-rincian-manual tbody td {
  padding: 9px 12px !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-right: 1px solid #f8fafc !important;
  color: #334155 !important;
}

.dark table.blueTable tbody td,
.dark #tabel-rincian-manual tbody td {
  border-bottom-color: #1e293b !important;
  border-right-color: #1e293b !important;
  color: #cbd5e1 !important;
}

/* Format Angka Monospace */
.num-cell {
  font-family: 'Consolas', 'SF Mono', 'Courier New', monospace !important;
  font-size: 0.85rem !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}

/* Baris Bidang: Latar Hijau Muda Berkelas */
.row-bidang {
  background: #ecfdf5 !important;
  font-weight: 700 !important;
  border-top: 2px solid #6ee7b7 !important;
  border-bottom: 2px solid #a7f3d0 !important;
}

.row-bidang td {
  color: #065f46 !important;
  font-size: 0.875rem !important;
}

.dark .row-bidang {
  background: #064e3b !important;
  border-top-color: #059669 !important;
  border-bottom-color: #047857 !important;
}

.dark .row-bidang td {
  color: #a7f3d0 !important;
}

/* Baris Kegiatan */
.row-kegiatan {
  background: #f8fafc !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.dark .row-kegiatan {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

.row-kegiatan:hover {
  background: #e2e8f0 !important;
}

.dark .row-kegiatan:hover {
  background: #334155 !important;
}

/* Baris Rincian */
.row-rincian {
  background: #ffffff !important;
}

.dark .row-rincian {
  background: #0f172a !important;
}

.row-rincian:hover {
  background: #f0fdf4 !important;
}

.dark .row-rincian:hover {
  background: #1e293b !important;
}

/* Badge Akun */
.badge.bg-purple {
  background: #7c3aed !important;
  color: #ffffff !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  margin-right: 6px !important;
}

/* Indicator Serapan 0 */
.row-zero-warning td:nth-child(4) {
  border-left: 4px solid #ef4444 !important;
}

/* ==========================================================================
   MODE FULLSCREEN KHUSUS ANALISIS APBDES
   ========================================================================== */
.apbdes-fullscreen-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483640 !important; /* Layar penuh teratas */
  background: #f8fafc !important;
  padding: 16px 24px 24px 24px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.dark .apbdes-fullscreen-active {
  background: #0f172a !important;
}

body.has-apbdes-fs {
  overflow: hidden !important;
}

/* Topbar Sticky Fullscreen Mode */
.apbdes-fs-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

.dark .apbdes-fs-topbar {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.4) !important;
}

.apbdes-fs-topbar-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.apbdes-fs-topbar-title h4 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.dark .apbdes-fs-topbar-title h4 {
  color: #f8fafc !important;
}

.apbdes-fs-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-fs-exit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.btn-fs-exit:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
}

.btn-fs-print {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

.btn-fs-print:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   7. MODAL, OVERLAY & POPUP PETA LAPAK (WAJIB DI ATAS MENU UTAMA)
   ========================================================================== */

/* Latar Belakang Gelap Modal */
.modal-backdrop,
.modal-backdrop.show {
  z-index: 1000010 !important;
}

/* Modal Utama (Lapak, Peta, Pengaduan, GIS, dsb) */
.modal,
.modal.show,
#map-modal {
  z-index: 1000020 !important;
}

.modal-dialog,
#map-modal .modal-dialog {
  z-index: 1000025 !important;
  position: relative !important;
}

.modal-content,
#map-modal .modal-content {
  z-index: 1000030 !important;
  position: relative !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  background-color: #ffffff !important;
}

.dark .modal-content,
.dark #map-modal .modal-content {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Khusus Modal Peta Lapak */
#map-modal .modal-dialog {
  max-width: 600px !important;
  margin: 2rem auto !important;
}

#map-modal .modal-header {
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 18px !important;
}

.dark #map-modal .modal-header {
  border-bottom-color: #334155 !important;
}

#map-modal .modal-title {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1e293b !important;
}

.dark #map-modal .modal-title {
  color: #f8fafc !important;
}

#map-modal #map {
  height: 400px !important;
  width: 100% !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* Leaflet Map Panes & Popups di dalam Modal */
#map .leaflet-pane,
#map-modal .leaflet-pane {
  z-index: 400 !important;
}

#map .leaflet-top,
#map .leaflet-bottom,
#map-modal .leaflet-top,
#map-modal .leaflet-bottom {
  z-index: 500 !important;
}

#map .leaflet-popup-pane,
#map-modal .leaflet-popup-pane {
  z-index: 700 !important;
}

#map .leaflet-popup-content-wrapper,
#map-modal .leaflet-popup-content-wrapper {
  z-index: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
}

/* Modal Lainnya di OpenSID */
.gis-modal,
#modalBox,
#modalKecil,
#modalSedang,
#modalBesar,
#notif-modal,
#newpengaduan,
.fancybox-container {
  z-index: 1000050 !important;
}

/* ==========================================================================
   8. SLIDER PAMONG & APARATUR DESA (DESAIN HARMONIS & SEIMBANG)
   ========================================================================== */

.product-item.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.product-item.card.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   9. MODUL PRODUK HUKUM / PERATURAN DESA (DESAIN MODERN & FULLSCREEN)
   ========================================================================== */

/* Fullscreen Mode Container */
.peraturan-fullscreen-active,
.info-publik-fullscreen-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483640 !important;
  background: #f8fafc !important;
  padding: 16px 24px 24px 24px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.dark .peraturan-fullscreen-active,
.dark .info-publik-fullscreen-active {
  background: #0f172a !important;
}

body.has-peraturan-fs,
body.has-info-publik-fs {
  overflow: hidden !important;
}

/* Topbar Sticky Fullscreen Mode */
.peraturan-fs-topbar,
.info-publik-fs-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.dark .peraturan-fs-topbar,
.dark .info-publik-fs-topbar {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.4) !important;
}

.peraturan-fs-topbar-title,
.info-publik-fs-topbar-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.peraturan-fs-topbar-title h4,
.info-publik-fs-topbar-title h4 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.dark .peraturan-fs-topbar-title h4,
.dark .info-publik-fs-topbar-title h4 {
  color: #f8fafc !important;
}

.peraturan-fs-topbar-actions,
.info-publik-fs-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Filter Card & Controls */
.peraturan-filter-card {
  transition: all 0.2s ease !important;
}

.peraturan-filter-card:hover {
  border-color: #cbd5e1 !important;
}

.dark .peraturan-filter-card:hover {
  border-color: #475569 !important;
}

/* Category Badges */
.badge-perdes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  white-space: nowrap !important;
}

.dark .badge-perdes {
  background-color: rgba(6, 95, 70, 0.3) !important;
  color: #6ee7b7 !important;
  border-color: #047857 !important;
}

.badge-sk {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
  white-space: nowrap !important;
}

.dark .badge-sk {
  background-color: rgba(30, 64, 175, 0.3) !important;
  color: #93c5fd !important;
  border-color: #1d4ed8 !important;
}

.badge-berkala {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
  white-space: nowrap !important;
}

.dark .badge-berkala {
  background-color: rgba(3, 105, 161, 0.3) !important;
  color: #7dd3fc !important;
  border-color: #0284c7 !important;
}

.badge-serta-merta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  white-space: nowrap !important;
}

.dark .badge-serta-merta {
  background-color: rgba(180, 83, 9, 0.3) !important;
  color: #fcd34d !important;
  border-color: #d97706 !important;
}

.badge-setiap-saat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  white-space: nowrap !important;
}

.dark .badge-setiap-saat {
  background-color: rgba(6, 95, 70, 0.3) !important;
  color: #6ee7b7 !important;
  border-color: #047857 !important;
}

.badge-dikecualikan {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #fdf2f8 !important;
  color: #9d174d !important;
  border: 1px solid #fbcfe8 !important;
  white-space: nowrap !important;
}

.dark .badge-dikecualikan {
  background-color: rgba(157, 23, 77, 0.3) !important;
  color: #f472b6 !important;
  border-color: #db2777 !important;
}

.badge-lainnya {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
}

.dark .badge-lainnya {
  background-color: rgba(71, 85, 105, 0.3) !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

.badge-tahun {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

.dark .badge-tahun {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

/* Tombol Unduh Dokumen */
.btn-unduh-dokumen {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.btn-unduh-dokumen:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3) !important;
}

.btn-unduh-disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 0.725rem !important;
  font-weight: 600 !important;
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  cursor: not-allowed !important;
  white-space: nowrap !important;
}

.dark .btn-unduh-disabled {
  background-color: #1e293b !important;
  color: #64748b !important;
  border-color: #334155 !important;
}

/* Tabel Peraturan & Informasi Publik Custom DataTables Styling */
#jdih-table_wrapper,
#info_publik_wrapper,
#info_publik-table_wrapper {
  padding: 12px 16px !important;
  font-family: inherit !important;
}

#jdih-table_wrapper .dataTables_length,
#info_publik_wrapper .dataTables_length,
#info_publik-table_wrapper .dataTables_length {
  margin-bottom: 12px !important;
  font-size: 0.8rem !important;
  color: #475569 !important;
}

.dark #jdih-table_wrapper .dataTables_length,
.dark #info_publik_wrapper .dataTables_length,
.dark #info_publik-table_wrapper .dataTables_length {
  color: #94a3b8 !important;
}

#jdih-table_wrapper .dataTables_length select,
#info_publik_wrapper .dataTables_length select,
#info_publik-table_wrapper .dataTables_length select {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-size: 0.8rem !important;
  margin: 0 4px !important;
  outline: none !important;
}

.dark #jdih-table_wrapper .dataTables_length select,
.dark #info_publik_wrapper .dataTables_length select,
.dark #info_publik-table_wrapper .dataTables_length select {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

#jdih-table,
#info_publik,
#info_publik-table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 8px 0 !important;
  border: none !important;
}

#jdih-table thead th,
#info_publik thead th,
#info_publik-table thead th {
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 14px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
}

.dark #jdih-table thead th,
.dark #info_publik thead th,
.dark #info_publik-table thead th {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
  border-bottom-color: #334155 !important;
}

#jdih-table tbody tr,
#info_publik tbody tr,
#info_publik-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.15s ease !important;
}

.dark #jdih-table tbody tr,
.dark #info_publik tbody tr,
.dark #info_publik-table tbody tr {
  border-bottom-color: #1e293b !important;
}

#jdih-table tbody tr:hover,
#info_publik tbody tr:hover,
#info_publik-table tbody tr:hover {
  background-color: #f0fdf4 !important;
}

.dark #jdih-table tbody tr:hover,
.dark #info_publik tbody tr:hover,
.dark #info_publik-table tbody tr:hover {
  background-color: rgba(6, 78, 59, 0.25) !important;
}

#jdih-table tbody td,
#info_publik tbody td,
#info_publik-table tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #1e293b !important;
  border-top: none !important;
}

.dark #jdih-table tbody td,
.dark #info_publik tbody td,
.dark #info_publik-table tbody td {
  color: #e2e8f0 !important;
}

/* Pagination & Info */
#jdih-table_wrapper .dataTables_info,
#info_publik_wrapper .dataTables_info,
#info_publik-table_wrapper .dataTables_info {
  font-size: 0.8rem !important;
  color: #64748b !important;
  padding-top: 14px !important;
}

.dark #jdih-table_wrapper .dataTables_info,
.dark #info_publik_wrapper .dataTables_info,
.dark #info_publik-table_wrapper .dataTables_info {
  color: #94a3b8 !important;
}

#jdih-table_wrapper .dataTables_paginate,
#info_publik_wrapper .dataTables_paginate,
#info_publik-table_wrapper .dataTables_paginate {
  padding-top: 10px !important;
}

#jdih-table_wrapper .dataTables_paginate .paginate_button,
#info_publik_wrapper .dataTables_paginate .paginate_button,
#info_publik-table_wrapper .dataTables_paginate .paginate_button {
  display: inline-block !important;
  min-width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  text-align: center !important;
  padding: 0 10px !important;
  margin: 0 2px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dark #jdih-table_wrapper .dataTables_paginate .paginate_button,
.dark #info_publik_wrapper .dataTables_paginate .paginate_button,
.dark #info_publik-table_wrapper .dataTables_paginate .paginate_button {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

#jdih-table_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
#info_publik_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
#info_publik-table_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

.dark #jdih-table_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dark #info_publik_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dark #info_publik-table_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #064e3b !important;
  color: #a7f3d0 !important;
  border-color: #047857 !important;
}

#jdih-table_wrapper .dataTables_paginate .paginate_button.current,
#info_publik_wrapper .dataTables_paginate .paginate_button.current,
#info_publik-table_wrapper .dataTables_paginate .paginate_button.current {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3) !important;
}

#jdih-table_wrapper .dataTables_paginate .paginate_button.disabled,
#info_publik_wrapper .dataTables_paginate .paginate_button.disabled,
#info_publik-table_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}