/* === ANIMASI KUCING NYATA === */
@keyframes kitty-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
.animate-kitty-breathe {
  animation: kitty-breathe 3s ease-in-out infinite;
}

@keyframes ear-move {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}
.animate-ear-move {
  animation: ear-move 4s ease-in-out infinite;
}

@keyframes eye-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
.animate-eye-blink {
  animation: eye-blink 4s ease-in-out infinite;
}

@keyframes blush {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}
.animate-blush {
  animation: blush 3s ease-in-out infinite;
}

@keyframes mouth {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3, 0.8); }
}
.animate-mouth {
  animation: mouth 2.5s ease-in-out infinite;
}

@keyframes tail {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
}
.animate-tail {
  animation: tail 2.8s ease-in-out infinite;
}


::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #ffe4e6;
}
::-webkit-scrollbar-thumb {
  background: #fda4af;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fb7185;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #fda4af #ffe4e6;
}

/* Hover halus untuk baris tabel */
#transactions-table tbody tr {
  transition: background-color 0.2s ease;
}
#transactions-table tbody tr:hover {
  background-color: #fff1f2;
}

/* Efek tombol */
button {
  transition: transform 0.2s ease, background-color 0.2s ease;
}
button:hover {
  transform: scale(1.05);
}

/* Efek kartu */
.rounded-lg {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rounded-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.1);
}

/* === MODE GELAP === */
body.dark {
  background-color: #1f1f1f;
  color: #f9fafb;
}

body.dark .bg-white {
  background-color: #2a2a2a !important;
}

body.dark .text-pink-pastel-700 {
  color: #f9a8d4 !important;
}

body.dark input,
body.dark select {
  background-color: #333;
  color: #fff;
  border-color: #555;
}