body {
  background: #f6f8fc;
  color: #172033;
  min-height: 100vh;
}

.admin-glass {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}

.admin-card {
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
  transition: transform .25s ease, border-color .25s ease;
}

.admin-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 140, 255, .48);
}

.admin-link {
  color: rgba(237, 245, 255, .68);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.admin-link:hover,
.admin-link.active {
  background: rgba(29, 140, 255, .16);
  color: #fff;
  transform: translateX(3px);
}

.admin-link.active {
  box-shadow: inset 3px 0 0 #1d8cff;
}

.admin-section {
  display: none;
}

.admin-section.active {
  display: block;
}

#adminShell,
#adminSidebar,
.admin-brand-text,
.admin-link-label,
.admin-group-label {
  transition: width .25s ease, max-width .25s ease, grid-template-columns .25s ease, opacity .18s ease, transform .25s ease;
}

.admin-field {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .32);
  background: #fff;
  color: #0f172a;
  outline: none;
  padding: .9rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.admin-field::placeholder {
  color: rgba(71, 85, 105, .48);
}

.admin-field:focus {
  background: #fff;
  border-color: rgba(29, 140, 255, .65);
  box-shadow: 0 0 0 4px rgba(29, 140, 255, .14);
}

.admin-login-card {
  background: rgba(255, 255, 255, .96);
}

.admin-login-card .admin-field,
.admin-login-card input:-webkit-autofill,
.admin-login-card input:-webkit-autofill:hover,
.admin-login-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
  color: #0f172a !important;
}

.admin-login-card .admin-field::placeholder {
  color: #64748b;
  opacity: 1;
}

.admin-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: .74rem;
  font-weight: 800;
  padding: .35rem .72rem;
}

.badge-pending,
.badge-baru,
.badge-menunggu_verifikasi,
.badge-belum_bayar,
.badge-menunggu,
.badge-menunggu_approval,
.badge-draft,
.badge-expired {
  background: rgba(250, 204, 21, .14);
  color: #fde68a;
}

.badge-diproses,
.badge-proses,
.badge-verifikasi {
  background: rgba(29, 140, 255, .16);
  color: #93c5fd;
}

.badge-selesai,
.badge-lunas,
.badge-disetujui,
.badge-aktif {
  background: rgba(16, 185, 129, .16);
  color: #86efac;
}

.badge-ditolak,
.badge-dibatalkan,
.badge-arsip,
.badge-nonaktif {
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
}

.admin-content {
  background:
    radial-gradient(circle at 10% 0%, rgba(29, 140, 255, .10), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
  min-height: 100vh;
}

.admin-main .text-white,
.admin-main h1,
.admin-main h2,
.admin-main h3,
.admin-main .font-extrabold {
  color: #0f172a !important;
}

.admin-main .text-white\/35,
.admin-main .text-white\/45,
.admin-main .text-white\/50,
.admin-main .text-white\/55,
.admin-main .text-white\/60,
.admin-main .text-white\/70,
.admin-main .text-white\/75,
.admin-main .text-white\/78 {
  color: #64748b !important;
}

.admin-main .bg-white\/5,
.admin-main .bg-white\/7,
.admin-main .bg-white\/8,
.admin-main .bg-white\/10 {
  background: #f8fafc !important;
}

.admin-main .border-white\/10 {
  border-color: rgba(148, 163, 184, .22) !important;
}

.admin-main button.bg-blue-600,
.admin-main a.bg-blue-600,
.admin-main .bg-blue-600,
.admin-main .bg-emerald-500,
.admin-main .bg-emerald-600,
.admin-main .bg-red-500\/20,
.admin-main button.bg-red-500\/20,
.admin-main a.bg-red-500\/20 {
  color: #fff !important;
}

.admin-main button.bg-white\/10,
.admin-main a.bg-white\/10 {
  background: #eef4ff !important;
  color: #1e40af !important;
}

.admin-main table thead {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.admin-main table tbody tr {
  color: #334155 !important;
}

.admin-main [data-archive-preview-modal],
.admin-main [data-archive-preview-modal] h3,
.admin-main [data-archive-preview-modal] .text-white {
  color: #fff !important;
}

.admin-main [data-archive-preview-modal] .text-white\/45 {
  color: rgba(255, 255, 255, .55) !important;
}

.admin-main select,
.admin-main input,
.admin-main textarea {
  color: #0f172a;
}

.admin-topbar .bg-white\/10 {
  background: #eef4ff !important;
}

.admin-topbar .text-white {
  color: #0f172a !important;
}

.admin-topbar .text-white\/35,
.admin-topbar .text-white\/45 {
  color: #64748b !important;
}

.admin-topbar .hover\:bg-blue-600:hover {
  background: #2563eb !important;
  color: #fff !important;
}

.admin-topbar #notificationDropdown,
.admin-topbar #notificationDropdown .text-white,
.admin-topbar #notificationDropdown h3 {
  color: #fff !important;
}

.admin-topbar #notificationDropdown .text-white\/45,
.admin-topbar #notificationDropdown .text-white\/50,
.admin-topbar #notificationDropdown .text-white\/60 {
  color: rgba(255, 255, 255, .58) !important;
}

.admin-sidebar {
  color: #edf5ff;
}

.admin-sidebar-backdrop {
  display: none;
}

.admin-menu-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .38) transparent;
}

.admin-menu-group summary::-webkit-details-marker {
  display: none;
}

.admin-menu-group summary svg {
  transition: transform .2s ease;
}

.admin-menu-group[open] summary svg {
  transform: rotate(180deg);
}

.admin-menu-group + .admin-menu-group {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: .55rem;
}

@media (min-width: 1024px) {
  body.admin-sidebar-collapsed #adminShell {
    grid-template-columns: 5.5rem 1fr;
  }

  body.admin-sidebar-collapsed #adminSidebar {
    width: 5.5rem !important;
    max-width: 5.5rem !important;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  body.admin-sidebar-collapsed .admin-brand-text,
  body.admin-sidebar-collapsed .admin-link-label,
  body.admin-sidebar-collapsed .admin-group-label {
    opacity: 0;
    width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  body.admin-sidebar-collapsed .admin-menu-group summary {
    justify-content: center;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  body.admin-sidebar-collapsed .admin-menu-group summary svg {
    display: none;
  }

  body.admin-sidebar-collapsed .admin-link {
    justify-content: center;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  body.admin-sidebar-collapsed .admin-link:hover,
  body.admin-sidebar-collapsed .admin-link.active {
    transform: none;
  }
}

.admin-drop {
  border: 1.5px dashed rgba(59, 130, 246, .38);
  background: #f8fafc;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.admin-drop.dragover {
  background: rgba(29, 140, 255, .12);
  border-color: #1d8cff;
  transform: scale(.995);
}

.marquee-preview {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-preview span {
  display: inline-block;
  padding-left: 100%;
  animation: adminMarquee var(--speed, 18s) linear infinite;
}

@keyframes adminMarquee {
  to { transform: translateX(-100%); }
}

@media (max-width: 1023px) {
  body.admin-mobile-sidebar-open {
    overflow: hidden;
  }

  .admin-sidebar {
    transform: translateX(-110%);
    transition: transform .3s ease;
    overflow-y: auto;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: block;
    pointer-events: none;
    background: rgba(2, 6, 23, .44);
    opacity: 0;
    transition: opacity .25s ease;
  }

  body.admin-mobile-sidebar-open .admin-sidebar-backdrop {
    pointer-events: auto;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 14px;
  }

  .admin-content main {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    padding-top: 1rem !important;
  }

  .admin-topbar {
    padding: .75rem .85rem !important;
  }

  .admin-sidebar {
    width: min(17rem, 84vw) !important;
    max-width: min(17rem, 84vw) !important;
    padding: .85rem !important;
  }

  .admin-sidebar .admin-link {
    border-radius: .9rem !important;
    font-size: .82rem !important;
    padding: .72rem .9rem !important;
  }

  .admin-menu-group summary {
    font-size: .66rem !important;
    padding: .55rem .7rem !important;
  }

  .admin-glass,
  .admin-card {
    border-radius: 1rem !important;
    padding: 1rem !important;
  }

  .admin-section h1,
  .admin-section .text-3xl,
  .admin-section .text-4xl {
    font-size: 1.35rem !important;
    line-height: 1.28 !important;
  }

  .admin-section .text-2xl {
    font-size: 1.12rem !important;
  }

  .admin-section .text-xl {
    font-size: 1rem !important;
  }

  .admin-section p,
  .admin-section td,
  .admin-section th,
  .admin-section label,
  .admin-section input,
  .admin-section select,
  .admin-section textarea {
    font-size: .84rem !important;
  }

  .admin-field {
    border-radius: .85rem;
    padding: .78rem .9rem;
  }

  .admin-badge {
    font-size: .68rem;
    padding: .3rem .55rem;
  }

  .admin-drop {
    border-radius: 1rem !important;
    padding: 1rem !important;
  }

  .admin-topbar #notificationDropdown {
    left: 0;
    right: auto;
    width: min(20rem, calc(100vw - 1.5rem)) !important;
  }
}