@import "tailwindcss";
@source "../views/**/*.ejs";
@source "../client/**/*.js";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Vazirmatn", Tahoma, sans-serif;
  --color-brand-950: #101f4f;
  --color-brand-900: #1f337a;
  --color-brand-700: #315899;
  --color-brand-500: #4f98ca;
  --color-brand-300: #60b4df;
  --color-brand-100: #dff5ff;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

@layer base {
  :root { color-scheme: light; }
  :root.dark { color-scheme: dark; }
  html { direction: rtl; font-family: var(--font-sans); }
  body { @apply min-h-screen bg-slate-50 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100; }
  button, input, select, textarea, a { @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500; }
  [x-cloak] { display: none !important; }
}

@layer components {
  .panel { @apply rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900; }
  .panel-header { @apply flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4 dark:border-slate-800; }
  .btn, .btn-primary, .btn-secondary, .btn-danger { @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-bold transition disabled:cursor-not-allowed disabled:opacity-50; }
  .btn-primary { @apply bg-brand-900 text-white hover:bg-brand-950 dark:bg-brand-500 dark:text-slate-950 dark:hover:bg-brand-300; }
  .btn-secondary { @apply border border-slate-300 bg-white text-slate-800 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800; }
  .btn-danger { @apply bg-red-700 text-white hover:bg-red-800; }
  .input { @apply min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100; }
  .label { @apply mb-1.5 block text-sm font-bold text-slate-700 dark:text-slate-200; }
  .badge, .badge-pending, .badge-success, .badge-warning, .badge-danger, .badge-neutral { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold; }
  .badge-pending { @apply bg-blue-100 text-blue-900 dark:bg-blue-950 dark:text-blue-200; }
  .badge-success { @apply bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200; }
  .badge-warning { @apply bg-amber-100 text-amber-950 dark:bg-amber-950 dark:text-amber-200; }
  .badge-danger { @apply bg-red-100 text-red-900 dark:bg-red-950 dark:text-red-200; }
  .badge-neutral { @apply bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-200; }
  .table-wrap { @apply overflow-x-auto; }
  .data-table { @apply min-w-full divide-y divide-slate-200 text-right text-sm dark:divide-slate-800; }
  .data-table th { @apply whitespace-nowrap bg-slate-50 px-4 py-3 font-extrabold text-slate-600 dark:bg-slate-950 dark:text-slate-300; }
  .data-table td { @apply whitespace-nowrap px-4 py-3 align-middle; }
  .data-table tbody { @apply divide-y divide-slate-100 dark:divide-slate-800; }
  .data-table tbody tr { @apply hover:bg-brand-100/40 dark:hover:bg-brand-950/40; }
  .nav-link { @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-bold text-slate-600 transition hover:bg-brand-100 hover:text-brand-950 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white; }
  .nav-link-active { @apply bg-brand-900 text-white hover:bg-brand-950 hover:text-white dark:bg-brand-500 dark:text-slate-950; }
  .stat { @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900; }
  .stat-value { @apply mt-2 text-3xl font-black tracking-tight; }
  .help { @apply mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400; }
  .error-box { @apply rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200; }
  .success-box { @apply rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200; }
  .skeleton { @apply animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800; }
}

@media (max-width: 1100px) {
  .desktop-sidebar { width: 15rem; }
}
