/* Custom animations and overrides not easily done with Tailwind utilities */

/* ===== TEMA RAMP — Sistem Khairat As-Solihin =====
   Gaya: meja kewangan editorial (Ramp, styles.refero.design).
   Kanvas Bone #f4f2f0, kad Paper #ffffff, teks Ink #0c0a08,
   aksen Highlighter #e4f222 HANYA utk tindakan duit.
   Kad guna sempadan hairline, BUKAN bayang (ikut panduan Ramp). */

:root {
  --ramp-bone: #f4f2f0;
  --ramp-paper: #ffffff;
  --ramp-ink: #0c0a08;
  --ramp-obsidian: #1a1919;
  --ramp-ash: #6d6c6b;
  --ramp-smoke: #d3d3d3;
  --ramp-hairline: #e5e7eb;
  --ramp-hi: #e4f222;
  --ramp-hi-dark: #c9d91c;
}

body {
  background: var(--ramp-bone) !important;
  color: var(--ramp-ink);
  letter-spacing: 0;
}

/* Ramp mengatasi Tailwind CDN: semua kanvas slate/neutral jadi Bone,
   supaya krim #f4f2f0 kekal walaupun kelas lama masih ada. */
.bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-neutral-100,
.bg-gray-50, .bg-gray-100 {
  background-color: var(--ramp-bone) !important;
}
/* Kad putih kekal putih, tapi sempadan ikut hairline Ramp */
.bg-white {
  border-color: var(--ramp-hairline);
}
/* Teks slate gelap jadi Ink Ramp */
.text-slate-800, .text-slate-900, .text-neutral-900 {
  color: var(--ramp-ink) !important;
}
.text-slate-500, .text-slate-600, .text-neutral-500 {
  color: var(--ramp-ash) !important;
}

/* Label mikro huruf besar — ikut Ramp: tracking positif */
.micro-label {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ramp-ash);
}

/* Kad Ramp: sempadan hairline, tanpa bayang, radius 16px */
.ramp-card {
  background: var(--ramp-paper);
  border: 1px solid var(--ramp-hairline);
  border-radius: 16px;
  box-shadow: none;
}

/* Butang duit utama: kuning highlighter + teks hitam */
.btn-ramp {
  background: var(--ramp-hi);
  color: var(--ramp-ink);
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid var(--ramp-ink);
}
.btn-ramp:hover { background: var(--ramp-hi-dark); }

/* Butang gelap sekunder (panel songsang Ramp) */
.btn-ramp-dark {
  background: var(--ramp-obsidian);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
}
.btn-ramp-dark:hover { background: var(--ramp-ink); }

/* Input Ramp: radius 10px, fokus garis highlighter */
input[type="text"]:not(.no-ramp),
input[type="password"]:not(.no-ramp),
input[type="number"]:not(.no-ramp),
input[type="date"]:not(.no-ramp),
select:not(.no-ramp),
textarea:not(.no-ramp) {
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ramp-hi-dark) !important;
}

/* Nombor duit hidup — sorot highlighter */
.money-live {
  background: var(--ramp-hi);
  color: var(--ramp-ink);
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 700;
}

/* Baris jadual: hover warna Bone */
table tbody tr:hover { background: #faf8f6; }

/* Kepala panel gelap gaya Ramp (panel songsang) */
.ramp-invert {
  background: var(--ramp-obsidian);
  color: #fff;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast {
  background-color: white;
  border-radius: 12px;
  border: 1px solid var(--ramp-hairline);
  box-shadow: none;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: slideIn 0.3s forwards;
  min-width: 300px;
  border-left: 4px solid #cbd5e1;
}

.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
.toast.info { border-left-color: #3b82f6; }
.toast.warning { border-left-color: #f59e0b; }

.delete-progress-indeterminate {
  position: relative;
  overflow: hidden;
  width: 35% !important;
  animation: deleteProgressSlide 1.2s ease-in-out infinite alternate;
}

@keyframes deleteProgressSlide {
  from { transform: translateX(-20%); opacity: 0.7; }
  to { transform: translateX(185%); opacity: 1; }
}