/* @author Ertha Dwi Setiyawan */
/* Aturan global tabel: judul kolom rata tengah, isi baris rata atas. */
/* !important dipakai agar tidak kalah oleh kelas utilitas Tailwind pada sel (text-left, text-right). */
table thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

table tbody td {
  vertical-align: top !important;
}

/* Modal dialog: muncul dan menutup dengan transisi fade serta geser halus. */
dialog.modal {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 200ms ease, transform 200ms ease;
}

dialog.modal.is-open {
  opacity: 1;
  transform: none;
}

dialog.modal::backdrop {
  background-color: rgb(15 23 42 / 0);
  transition: background-color 200ms ease;
}

dialog.modal.is-open::backdrop {
  background-color: rgb(15 23 42 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  dialog.modal,
  dialog.modal::backdrop {
    transition: none;
  }
}

/* Halaman di belakang modal tidak ikut bergulir. */
html:has(dialog.modal[open]) {
  overflow: hidden;
}

/* Sidebar mini (layar lebar): hanya ikon; label disembunyikan, lebar menyusut. */
#sidebar { transition: transform 200ms ease, width 200ms ease; }
#content { transition: padding-left 200ms ease; }

@media (min-width: 1024px) {
  html[data-sidebar="mini"] #sidebar { width: 4.5rem; }
  html[data-sidebar="mini"] #content { padding-left: 4.5rem; }
  html[data-sidebar="mini"] #sidebar [data-label] { display: none; }
  html[data-sidebar="mini"] #sidebar nav button,
  html[data-sidebar="mini"] #sidebar [data-logout] { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-sidebar="mini"] #sidebar > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-sidebar="mini"] [data-mini-icon] { transform: rotate(180deg); }
}

/* Tata letak menu horizontal (layar lebar): sidebar disembunyikan, menu aplikasi pindah ke bar di bawah header,
   logo dan nama aplikasi pindah ke header.
   Di layar sempit menu tetap berupa drawer dari kiri. Aturan ini sengaja diletakkan setelah aturan sidebar mini. */
[data-layout-icon="vertical"] { display: none; }

@media (min-width: 1024px) {
  html[data-layout="horizontal"] #sidebar,
  html[data-layout="horizontal"] #mini-btn { display: none; }
  html[data-layout="horizontal"] #content { padding-left: 0; }
  html[data-layout="horizontal"] #topnav,
  html[data-layout="horizontal"] [data-header-brand] { display: flex; }
  html[data-layout="horizontal"] [data-layout-icon="horizontal"] { display: none; }
  html[data-layout="horizontal"] [data-layout-icon="vertical"] { display: flex; }
}

/* Item bar menu atas: aktif bergaris emas di tepi bawah, sepadan dengan garis kiri pada sidebar. */
.topnav-item { position: relative; transition: background-color 150ms ease, color 150ms ease; }
.topnav-item svg { color: #8aa9dc; transition: color 150ms ease; }
.topnav-item:hover svg { color: #ffffff; }
.topnav-item[aria-current="page"] svg { color: #f5c400; }
.topnav-item::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: #f5c400;
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.topnav-item[aria-current="page"]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  #sidebar, #content { transition: none; }
  .topnav-item, .topnav-item svg, .topnav-item::after { transition: none; }
}

/* Animasi saat gulir: kartu dan bagian halaman muncul bertahap ketika masuk layar. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Header menebal bayangannya setelah halaman digulir. */
header.sticky { transition: box-shadow 200ms ease; }

/* Tombol kembali ke atas. */
#to-top {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

#to-top.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Menu sidebar navy: item aktif bergaris emas (warna logo) di tepi kiri dan berikon emas. */
.nav-item { position: relative; transition: background-color 150ms ease, color 150ms ease; }
.nav-item svg { color: #8aa9dc; transition: color 150ms ease; }
.nav-item:hover svg { color: #ffffff; }
.nav-item[aria-current="page"] svg { color: #f5c400; }
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: #f5c400;
  transform: scaleY(0);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-item[aria-current="page"]::before { transform: scaleY(1); }

/* Panel aplikasi yang baru dipilih masuk dengan pudar dan naik sedikit. */
@keyframes pane-in {
  from { opacity: 0; transform: translateY(8px); }
}
.pane-enter { animation: pane-in 260ms cubic-bezier(0.2, 0, 0, 1) backwards; }

/* Menu pengguna di header muncul dengan pudar dan geser kecil. */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.menu-pop:not([hidden]) { animation: pop-in 160ms cubic-bezier(0.2, 0, 0, 1); transform-origin: top right; }

@media (prefers-reduced-motion: reduce) {
  .reveal, #to-top, header.sticky, .nav-item, .nav-item svg, .nav-item::before { transition: none; }
  .reveal { transform: none; }
  .pane-enter { animation: none; }
  .menu-pop:not([hidden]) { animation: none; }
}

/* Latar halaman masuk: ikon keuangan melayang di area atas, batang grafik naik turun, garis kurva tergambar ulang, dan titik emas logo melayang. */
/* Semua gerakan memakai transform, opacity, atau stroke-dashoffset agar ringan; mati bila pengguna meminta gerak dikurangi. */
.login-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.login-icons span {
  position: absolute;
  color: rgb(138 169 220 / 0.28);
  animation: login-float var(--t) ease-in-out var(--d) infinite alternate backwards;
}
.login-icons span:nth-child(3n) { color: rgb(245 196 0 / 0.3); }
@keyframes login-float {
  from { transform: translateY(0) rotate(-6deg); opacity: 0.55; }
  to { transform: translateY(-18px) rotate(6deg); opacity: 1; }
}

.login-bars {
  position: absolute;
  inset: auto 0 0 0;
  height: 45vh;
  display: flex;
  align-items: flex-end;
  gap: 1.2%;
  padding: 0 2%;
}
.login-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background-color: rgb(138 169 220 / 0.09);
  transform-origin: bottom;
  animation: login-bar var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes login-bar { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }

.login-curves { position: absolute; inset: auto 0 0 0; width: 100%; height: 55vh; }
.login-curves .curve {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: login-draw 9s ease-in-out infinite;
}
.login-curves .curve-gold { stroke: rgb(245 196 0 / 0.55); }
.login-curves .curve-blue { stroke: rgb(138 169 220 / 0.4); animation-delay: 1.5s; }
@keyframes login-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  10% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.login-dots span {
  position: absolute;
  bottom: -12px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #f5c400;
  opacity: 0;
  animation: login-dot var(--t) linear var(--d) infinite;
}
@keyframes login-dot {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.5; }
  80% { opacity: 0.25; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .login-icons span, .login-bars span, .login-dots span { animation: none; }
  .login-curves .curve { animation: none; stroke-dashoffset: 0; }
}