@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-bg text-ink antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent/90 transition-colors disabled:opacity-50 disabled:pointer-events-none;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-md border border-line bg-white px-4 py-2 text-sm font-medium text-muted hover:text-ink hover:bg-bg transition-colors disabled:opacity-50 disabled:pointer-events-none;
  }
  .btn-danger {
    @apply inline-flex items-center justify-center rounded-md bg-keluar px-4 py-2 text-sm font-medium text-white hover:bg-keluar/90 transition-colors disabled:opacity-50 disabled:pointer-events-none;
  }
  .input-field {
    @apply w-full rounded-md border border-line bg-white px-3 py-2 text-sm text-ink placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent;
  }

  /* Tab Pemasukan/Pengeluaran di view-ledger (lihat #entry-tabs di
     index.html & renderEntries/applyLedgerFieldMode di app.js). */
  .entry-tab-btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-1.5 text-sm font-medium text-muted transition-colors hover:text-ink;
  }
  .entry-tab-btn.is-active {
    @apply bg-panel text-ink shadow-sm;
  }

  /* ── MODAL ── */
  .modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm p-5;
  }
  .modal-box {
    @apply flex w-full max-w-md flex-col rounded-lg border border-line bg-panel shadow-xl max-h-[90vh] overflow-y-auto;
  }
  .modal-header {
    @apply flex items-start justify-between gap-3 border-b border-line px-6 py-4;
  }
  .modal-title {
    @apply text-base font-semibold text-ink;
  }
  .modal-close {
    @apply px-0.5 text-xl leading-none text-muted transition-colors hover:text-ink;
  }
  .modal-body {
    @apply flex flex-col gap-3 px-6 py-5;
  }
  .modal-footer {
    @apply flex justify-end gap-2 border-t border-line px-6 py-4;
  }
}

/* ── Sidebar jadi drawer overlay di layar mobile (< 768px) ──
   Di desktop (md ke atas) #sidebar tetep kayak semula: statis, lebar
   ditoggle w-56/w-16 lewat JS (applySidebarCollapsed). Di mobile, class
   .sidebar-panel di bawah ini nge-override jadi panel melayang yang
   default-nya ngumpet di luar layar (translateX -100%), baru muncul
   pas dikasih class "is-open" (ditoggle app.js pas tombol hamburger
   diklik). Overlay gelap (.sidebar-backdrop) nutup sisa layar biar
   jelas mana yang aktif & bisa diklik buat nutup lagi. */
@media (max-width: 767px) {
  .sidebar-panel {
    position: fixed;
    top: 3.5rem; /* tinggi header (h-14) */
    bottom: 0;
    left: 0;
    width: 16rem;
    max-width: 82vw;
    z-index: 40;
    transform: translateX(-100%);
    box-shadow: 0 12px 30px rgba(15, 23, 20, 0.18);
  }
  .sidebar-panel.is-open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 3.5rem 0 0 0;
    background: rgba(15, 23, 20, 0.4);
    z-index: 35;
  }
  .sidebar-backdrop.is-open {
    display: block;
  }
}