/* =========================================================
   DESIGN TOKENS — dibaca oleh tailwind.config di tiap halaman
   via rgb(var(--x) / <alpha-value>). Ganti nilai di sini untuk
   mengubah palet warna seluruh aplikasi.
   ========================================================= */
:root {
  /* Brand Colors */
  --color-primary: 15 118 110;
  /* #0F766E */
  --color-primary-dark: 17 94 89;
  /* #115E59 */
  --color-secondary: 20 184 166;
  /* #14B8A6 */
  --color-accent: 14 165 233;
  /* #0EA5E9 */

  /* Semantic Colors */
  --color-success: 22 163 74;
  /* #16A34A */
  --color-warning: 217 119 6;
  /* #D97706 */
  --color-danger: 220 38 38;
  /* #DC2626 */
  --color-info: 2 132 199;
  /* #0284C7 */

  /* Light Theme */
  --color-surface: 248 250 252;
  /* #F8FAFC */
  --color-surface-card: 255 255 255;
  /* #FFFFFF */
  --color-surface-alt: 241 245 249;
  /* #F1F5F9 */

  --color-ink: 30 41 59;
  /* #1E293B */
  --color-ink-soft: 100 116 139;
  /* #64748B */
  --color-ink-faint: 148 163 184;
  /* #94A3B8 */

  --color-border: 203 213 225;
  /* #CBD5E1 */
}

[data-theme="dark"] {
  /* Brand Colors */
  --color-primary: 24 170 162;
  /* #2DD4BF */
  --color-primary-dark: 20 184 166;
  /* #14B8A6 */
  --color-secondary: 94 234 212;
  /* #5EEAD4 */
  --color-accent: 56 189 248;
  /* #38BDF8 */

  /* Semantic Colors */
  --color-success: 74 222 128;
  /* #4ADE80 */
  --color-warning: 251 191 36;
  /* #FBBF24 */
  --color-danger: 248 113 113;
  /* #F87171 */
  --color-info: 125 211 252;
  /* #7DD3FC */

  /* Dark Theme */
  --color-surface: 15 23 42;
  /* #0F172A */
  --color-surface-card: 30 41 59;
  /* #1E293B */
  --color-surface-alt: 51 65 85;
  /* #334155 */

  --color-ink: 241 245 249;
  /* #F1F5F9 */
  --color-ink-soft: 203 213 225;
  /* #CBD5E1 */
  --color-ink-faint: 148 163 184;
  /* #94A3B8 */

  --color-border: 71 85 105;
  /* #475569 */
}

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Fraunces', serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Scrollbar tipis */
.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-thin::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border));
  border-radius: 999px;
}

.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Signature: badge kategori bentuk tab folder ---------- */
.tab-folder {
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* ---------- Signature: lipatan pojok (dog-ear) kartu dokumen ---------- */
.doc-card {
  position: relative;
  overflow: hidden;
}

.doc-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--dogear-color, rgb(var(--color-secondary))) transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgb(0 0 0 / 0.15));
}

.doc-card[data-filetype="pdf"] {
  --dogear-color: #b23a3a;
}

.doc-card[data-filetype="doc"] {
  --dogear-color: #3a5cb2;
}

.doc-card[data-filetype="xls"] {
  --dogear-color: #3a8f4f;
}

.doc-card[data-filetype="img"] {
  --dogear-color: rgb(var(--color-secondary));
}

/* ---------- Stempel bulat ---------- */
.stamp {
  border: 2px solid rgb(var(--color-accent));
  color: rgb(var(--color-accent));
  border-radius: 9999px;
  transform: rotate(-8deg);
}

/* ---------- Sidebar accordion (submenu 3 level) ---------- */
.submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}

.nav-item.open>.submenu {
  grid-template-rows: 1fr;
}

.submenu>div {
  overflow: hidden;
}

.nav-item .chev {
  transition: transform .2s ease;
}

.nav-item.open>.nav-link .chev {
  transform: rotate(90deg);
}

/* ---------- Custom checkbox / radio (Tailwind tidak bisa full-skin native input) ---------- */
.chk,
.rdo {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-card));
  flex-shrink: 0;
  display: grid;
  place-content: center;
  margin: 0;
}

.chk {
  border-radius: 5px;
}

.rdo {
  border-radius: 9999px;
}

.chk::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgb(var(--color-primary));
  transform: scale(0);
  transition: transform .1s ease;
}

.rdo::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: rgb(var(--color-primary));
  transform: scale(0);
  transition: transform .1s ease;
}

.chk:checked,
.rdo:checked {
  border-color: rgb(var(--color-primary));
}

.chk:checked::before,
.rdo:checked::before {
  transform: scale(1);
}

/* ---------- Switch / toggle ---------- */
.switch-input {
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 9999px;
  background: rgb(var(--color-border));
  position: relative;
  margin: 0;
  transition: background .15s ease;
  flex-shrink: 0;
}

.switch-input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: rgb(var(--color-surface-card));
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  transition: transform .18s ease;
}

.switch-input:checked {
  background: rgb(var(--color-primary));
}

.switch-input:checked::before {
  transform: translateX(18px);
}

/* ---------- Range slider ---------- */
input[type="range"] {
  accent-color: rgb(var(--color-primary));
}

/* ---------- Action dropdown menu (tabel) ---------- */
.action-menu {
  display: none;
}

.action-menu.open {
  display: block;
}

/* ---------- Simple CSS bar chart fill ---------- */
.bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 6px 6px 0 0;
  background: rgb(var(--color-primary));
}

/* ---------- Toggle icon matahari/bulan otomatis ikut tema ---------- */
[data-theme-toggle] .icon-moon {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-sun {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-moon {
  display: block;
}

/* ---------- Validasi form demo (app.js menambah class invalid/valid ke .field) ---------- */
.field .error-text {
  display: none;
}

.field.invalid .error-text {
  display: block;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: rgb(var(--color-danger)) !important;
}

.field.valid input {
  border-color: rgb(var(--color-success)) !important;
}

/* ---------- Base Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Button Sizes ---------- */
.btn-xs {
  padding: 0.125rem 0.5rem;
  font-size: 0.65rem;
  border-radius: 0.375rem;
  min-height: 1.5rem;
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  min-height: 1.75rem;
}

.btn-md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  min-height: 2.25rem;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  min-height: 2.75rem;
}

.btn-xl {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  border-radius: 0.625rem;
  min-height: 3.25rem;
}

/* ---------- Button Variants ---------- */

/* Primary */
.btn-primary {
  background: rgb(var(--color-primary));
  color: #fff;
  border-color: rgb(var(--color-primary));
}

.btn-primary:hover {
  background: rgb(var(--color-primary-dark));
  border-color: rgb(var(--color-primary-dark));
}

.btn-primary-outline {
  background: transparent;
  color: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
}

.btn-primary-outline:hover {
  background: rgb(var(--color-primary));
  color: #fff;
}

.btn-primary-soft {
  background: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
  border-color: transparent;
}

.btn-primary-soft:hover {
  background: rgb(var(--color-primary) / 0.2);
}

/* Secondary */
.btn-secondary {
  background: rgb(var(--color-secondary));
  color: #fff;
  border-color: rgb(var(--color-secondary));
}

.btn-secondary:hover {
  background: rgb(var(--color-primary-dark));
  border-color: rgb(var(--color-primary-dark));
}

.btn-secondary-outline {
  background: transparent;
  color: rgb(var(--color-secondary));
  border-color: rgb(var(--color-secondary));
}

.btn-secondary-outline:hover {
  background: rgb(var(--color-secondary));
  color: #fff;
}

.btn-secondary-soft {
  background: rgb(var(--color-secondary) / 0.1);
  color: rgb(var(--color-secondary));
  border-color: transparent;
}

.btn-secondary-soft:hover {
  background: rgb(var(--color-secondary) / 0.2);
}

/* Success */
.btn-success {
  background: rgb(var(--color-success));
  color: #fff;
  border-color: rgb(var(--color-success));
}

.btn-success:hover {
  background: rgb(var(--color-success) / 0.85);
  border-color: rgb(var(--color-success) / 0.85);
}

.btn-success-outline {
  background: transparent;
  color: rgb(var(--color-success));
  border-color: rgb(var(--color-success));
}

.btn-success-outline:hover {
  background: rgb(var(--color-success));
  color: #fff;
}

.btn-success-soft {
  background: rgb(var(--color-success) / 0.1);
  color: rgb(var(--color-success));
  border-color: transparent;
}

.btn-success-soft:hover {
  background: rgb(var(--color-success) / 0.2);
}

/* Warning */
.btn-warning {
  background: rgb(var(--color-warning));
  color: #fff;
  border-color: rgb(var(--color-warning));
}

.btn-warning:hover {
  background: rgb(var(--color-warning) / 0.85);
  border-color: rgb(var(--color-warning) / 0.85);
}

.btn-warning-outline {
  background: transparent;
  color: rgb(var(--color-warning));
  border-color: rgb(var(--color-warning));
}

.btn-warning-outline:hover {
  background: rgb(var(--color-warning));
  color: #fff;
}

.btn-warning-soft {
  background: rgb(var(--color-warning) / 0.1);
  color: rgb(var(--color-warning));
  border-color: transparent;
}

.btn-warning-soft:hover {
  background: rgb(var(--color-warning) / 0.2);
}

/* Danger */
.btn-danger {
  background: rgb(var(--color-danger));
  color: #fff;
  border-color: rgb(var(--color-danger));
}

.btn-danger:hover {
  background: rgb(var(--color-danger) / 0.85);
  border-color: rgb(var(--color-danger) / 0.85);
}

.btn-danger-outline {
  background: transparent;
  color: rgb(var(--color-danger));
  border-color: rgb(var(--color-danger));
}

.btn-danger-outline:hover {
  background: rgb(var(--color-danger));
  color: #fff;
}

.btn-danger-soft {
  background: rgb(var(--color-danger) / 0.1);
  color: rgb(var(--color-danger));
  border-color: transparent;
}

.btn-danger-soft:hover {
  background: rgb(var(--color-danger) / 0.2);
}

/* Info */
.btn-info {
  background: rgb(var(--color-info));
  color: #fff;
  border-color: rgb(var(--color-info));
}

.btn-info:hover {
  background: rgb(var(--color-info) / 0.85);
  border-color: rgb(var(--color-info) / 0.85);
}

.btn-info-outline {
  background: transparent;
  color: rgb(var(--color-info));
  border-color: rgb(var(--color-info));
}

.btn-info-outline:hover {
  background: rgb(var(--color-info));
  color: #fff;
}

.btn-info-soft {
  background: rgb(var(--color-info) / 0.1);
  color: rgb(var(--color-info));
  border-color: transparent;
}

.btn-info-soft:hover {
  background: rgb(var(--color-info) / 0.2);
}

/* Ghost / Neutral */
.btn-ghost {
  background: transparent;
  color: rgb(var(--color-ink));
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgb(var(--color-surface-alt));
}

.btn-ghost-soft {
  background: rgb(var(--color-surface-alt));
  color: rgb(var(--color-ink));
  border-color: transparent;
}

.btn-ghost-soft:hover {
  background: rgb(var(--color-border) / 0.5);
}

/* Light */
.btn-light {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-ink));
  border-color: rgb(var(--color-border));
}

.btn-light:hover {
  background: rgb(var(--color-surface-alt));
}

/* Dark */
.btn-dark {
  background: rgb(var(--color-ink));
  color: #fff;
  border-color: rgb(var(--color-ink));
}

.btn-dark:hover {
  background: rgb(var(--color-ink) / 0.85);
}

/* ---------- Button with Icons ---------- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  aspect-ratio: 1;
}

.btn-icon-only.btn-xs {
  width: 1.5rem;
  font-size: 0.65rem;
}

.btn-icon-only.btn-sm {
  width: 1.75rem;
  font-size: 0.75rem;
}

.btn-icon-only.btn-md {
  width: 2.25rem;
  font-size: 0.875rem;
}

.btn-icon-only.btn-lg {
  width: 2.75rem;
  font-size: 1rem;
}

.btn-icon-only.btn-xl {
  width: 3.25rem;
  font-size: 1.125rem;
}

/* ---------- Button States ---------- */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  color: inherit;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-loading.btn-primary::after,
.btn-loading.btn-secondary::after,
.btn-loading.btn-success::after,
.btn-loading.btn-danger::after,
.btn-loading.btn-dark::after {
  color: #fff;
}

.btn-loading.btn-light::after,
.btn-loading.btn-ghost::after {
  color: rgb(var(--color-ink));
}

/* ---------- Button Groups ---------- */
.btn-group {
  display: inline-flex;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.btn-group .btn:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.btn-group .btn:not(:first-child) {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
}

.btn-group-vertical .btn {
  border-radius: 0;
}

.btn-group-vertical .btn:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.btn-group-vertical .btn:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.btn-group-vertical .btn:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* ---------- Pill / Rounded Buttons ---------- */
.btn-pill {
  border-radius: 9999px;
}

/* ---------- Block / Full Width ---------- */
.btn-block {
  display: flex;
  width: 100%;
}

/* ---------- Link Button ---------- */
.btn-link {
  background: transparent;
  color: rgb(var(--color-primary));
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover {
  color: rgb(var(--color-primary-dark));
  text-decoration: none;
}

.btn-link-danger {
  background: transparent;
  color: rgb(var(--color-danger));
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link-danger:hover {
  color: rgb(var(--color-danger) / 0.85);
  text-decoration: none;
}

/* ---------- Floating Action Button ---------- */
.btn-fab {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-fab.btn-fab-sm {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.875rem;
}

.btn-fab.btn-fab-lg {
  width: 4.25rem;
  height: 4.25rem;
  font-size: 1.25rem;
}

/* ---------- Toast / Notification Button ---------- */
.btn-toast {
  background: rgb(var(--color-surface-card));
  color: rgb(var(--color-ink));
  border: 1px solid rgb(var(--color-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-toast:hover {
  background: rgb(var(--color-surface-alt));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Dark Mode Adjustments ---------- */
[data-theme="dark"] .btn-light {
  background: rgb(var(--color-surface-alt));
  color: rgb(var(--color-ink));
  border-color: rgb(var(--color-border));
}

[data-theme="dark"] .btn-light:hover {
  background: rgb(var(--color-surface));
}

[data-theme="dark"] .btn-ghost:hover {
  background: rgb(var(--color-surface-alt));
}

[data-theme="dark"] .btn-toast {
  background: rgb(var(--color-surface-card));
  border-color: rgb(var(--color-border));
}

/* ---------- Utility Classes for Buttons ---------- */
.btn-gap-xs {
  gap: 0.25rem;
}

.btn-gap-sm {
  gap: 0.375rem;
}

.btn-gap-md {
  gap: 0.5rem;
}

.btn-gap-lg {
  gap: 0.75rem;
}

.btn-shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-shadow-lg {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-text-left {
  justify-content: flex-start;
}

.btn-text-center {
  justify-content: center;
}

.btn-text-right {
  justify-content: flex-end;
}

/* Restyle elemen dataTables.bootstrap5 (info & paginate) supaya konsisten Tailwind */
#hakaksesTable_wrapper .dataTables_info {
  font-size: .75rem;
  color: rgb(var(--color-ink-soft));
  padding: 1rem 1.25rem;
}

#hakaksesTable_wrapper .dataTables_paginate .pagination {
  display: flex;
  gap: .25rem;
  margin: 0;
}

#hakaksesTable_wrapper .dataTables_paginate .page-item .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 .5rem;
  border-radius: 8px !important;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-card));
  color: rgb(var(--color-ink-soft));
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

#hakaksesTable_wrapper .dataTables_paginate .page-item.active .page-link {
  background: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
  color: #fff;
}

#hakaksesTable_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: .4;
  cursor: not-allowed;
}

#hakaksesTable_wrapper .dataTables_processing {
  color: rgb(var(--color-ink-soft));
  font-size: .8rem;
  padding: 1rem;
}

#hakaksesTable_wrapper .row:last-child {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 1rem;
}

details.perm-group>summary::-webkit-details-marker {
  display: none;
}

details.perm-group>summary {
  list-style: none;
  cursor: pointer;
}

details.perm-group[open]>summary .chev {
  transform: rotate(90deg);
}

details.perm-group summary .chev {
  transition: transform .15s ease;
}

/* =========================================================
   MODAL COMPONENT — lepas total dari utility Tailwind
   (z-index, ukuran, animasi semua di sini)
   ========================================================= */
.modal-backdrop-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal-backdrop-layer.show {
  display: block;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
}

.modal-backdrop-layer.show .modal-overlay {
  opacity: 1;
}

.modal-center {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-surface-card));
  border: 1px solid rgb(var(--color-border));
  border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: scale(.95) translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.modal-backdrop-layer.show .modal-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-panel-lg {
  max-width: 48rem;
  max-height: 85vh;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgb(var(--color-primary));
  border-radius: .75rem .75rem 0 0;
  flex-shrink: 0;
}

.modal-header h3 {
  color: #fff;
  margin: 0;
}

.modal-header p {
  color: rgba(255, 255, 255, .7);
  margin: .15rem 0 0;
}

.modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .25rem;
}

.modal-close:hover {
  color: #fff;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgb(var(--color-border));
  flex-shrink: 0;
}

.modal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .6rem 1.25rem;
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
  font-size: .75rem;
  color: rgb(var(--color-ink-soft));
  flex-shrink: 0;
}

.modal-legend span {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.modal-toolbar {
  display: flex;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgb(var(--color-border));
  flex-shrink: 0;
}

/* SweetAlert2 harus selalu di atas modal custom (z-index 9999) */
:root {
  --swal2-container-z-index: 10000;
  /* CSS var resmi SweetAlert2 v11, prioritas paling tinggi */
}

body .swal2-container {
  z-index: 10000 !important;
}
#desaTable_wrapper .dataTables_info {
  font-size: .75rem;
  color: rgb(var(--color-ink-soft));
  padding: 1rem 1.25rem;
}

#desaTable_wrapper .dataTables_paginate .pagination {
  display: flex;
  gap: .25rem;
  margin: 0;
}

#desaTable_wrapper .dataTables_paginate .page-item .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 .5rem;
  border-radius: 8px !important;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface-card));
  color: rgb(var(--color-ink-soft));
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

#desaTable_wrapper .dataTables_paginate .page-item.active .page-link {
  background: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
  color: #fff;
}

#desaTable_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: .4;
  cursor: not-allowed;
}

#desaTable_wrapper .dataTables_processing {
  color: rgb(var(--color-ink-soft));
  font-size: .8rem;
  padding: 1rem;
}

#desaTable_wrapper .row:last-child {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 1rem;
}

/* Di app.css tambahkan */

/* Parent menu aktif */
#mainSidebar .nav-item.has-submenu.active-parent>.submenu-toggle {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
}

/* Nav-item aktif */
#mainSidebar .nav-item.active>a:not(.submenu-toggle) {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
}

/* Submenu toggle aktif */
#mainSidebar .submenu-toggle.active {
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
}

/* Dark mode */
[data-theme="dark"] #mainSidebar .nav-item.has-submenu.active-parent>.submenu-toggle {
  background-color: rgb(var(--color-primary) / 0.2);
}

[data-theme="dark"] #mainSidebar .nav-item.active>a:not(.submenu-toggle) {
  background-color: rgb(var(--color-primary) / 0.2);
}

[data-theme="dark"] #mainSidebar .submenu-toggle.active {
  background-color: rgb(var(--color-primary) / 0.2);
}

#loading-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;

  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 1;
  visibility: visible;

  transition: opacity .2s ease, visibility .2s ease;
}


#loading-overlay.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  padding: 24px 32px;

  border-radius: 16px;

  background: rgb(var(--color-surface-card));

  border: 1px solid rgba(var(--color-border), .5);

  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}


/* Spinner */
.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  animation: spin .8s linear infinite;

  border: 4px solid transparent;
  border-top: 4px solid rgb(var(--color-primary));
  border-right: 4px solid rgb(var(--color-primary-dark));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


.loading-content p {
  margin: 0;

  font-size: 14px;
  font-weight: 500;

  color: rgb(var(--color-ink));
}



/* Dark mode */
[data-theme="dark"] #loading-overlay {
  background: rgba(255, 255, 255, .15);
}


[data-theme="dark"] .spinner {
  border-color: rgba(255, 255, 255, .25);
  border-top-color: rgb(var(--color-primary));
  border-right-color: rgb(var(--color-secondary));
}

#table-loader {
  position: absolute;
  inset: 0;

  display: none;

  justify-content: center;
  align-items: center;

  background: rgba(var(--color-surface), .55);

  backdrop-filter: blur(2px);

  z-index: 20;
}


.table-loading-content {
  display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  
    padding: 24px 32px;
  
    border-radius: 16px;
  
    background: rgb(var(--color-surface-card));
  
    border: 1px solid rgba(var(--color-border), .5);
  
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.table-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  animation: spin .8s linear infinite;

  border: 2px solid transparent;
  border-top: 4px solid rgb(var(--color-primary));
  border-right: 4px solid rgb(var(--color-primary-dark));
}


@keyframes spin {

  to {
    transform: rotate(360deg);
  }

}


/* Field readonly */
input[readonly],
textarea[readonly],
select:disabled,
input:disabled {
  background-color: #c3cbd4 !important;
  color: #64748b !important;
  cursor: not-allowed;
  border-color: #cbd5e1;
}

/* Tambahkan icon/efek */
input[readonly]:focus,
select:disabled:focus {
  box-shadow: none;
  outline: none;
}

/* Logo box - ukuran diatur pakai CSS variable, mudah disesuaikan */
.logo-box {
  --logo-box-size: 56px;
  --logo-img-size: 44px;

  width: var(--logo-box-size);
  height: var(--logo-box-size);
  border-radius: 0.75rem;
  /* setara rounded-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--color-secondary), 0.1);
  border: 1px solid rgba(var(--color-primary), 0.2);
}

.logo-box img {
  width: var(--logo-img-size);
  height: var(--logo-img-size);
  object-fit: contain;
}

/* Ukuran alternatif, tinggal tambah class ini kalau mau beda ukuran */
.logo-box--sm {
  --logo-box-size: 40px;
  --logo-img-size: 30px;
}

.logo-box--lg {
  --logo-box-size: 72px;
  --logo-img-size: 56px;
}

.text-sm{
  
  font-size: 1rem;
}