@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

/* Class-based dark mode for Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50:  #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --color-primary-800: #5b21b6;
  --color-primary-900: #4c1d95;

  --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after {
  font-family: var(--font-sans);
}

html {
  scroll-behavior: smooth;
}

body {
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Animations ─────────────────────────────── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-scale-in { animation: scale-in  200ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
.animate-slide-up  { animation: slide-up  200ms ease both; }
.animate-fade-in   { animation: fade-in   150ms ease both; }

/* ── Skeleton shimmer ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ── Utility classes ────────────────────────── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ── Admin component tokens ─────────────────── */
@layer components {
  /* Card / panel */
  .cp-card {
    @apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm;
  }

  /* Form inputs */
  .cp-input {
    @apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
           rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
           placeholder-slate-400 dark:placeholder-slate-500
           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
           transition-colors;
  }
  .cp-textarea {
    @apply bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
           rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-slate-100
           placeholder-slate-400 dark:placeholder-slate-500
           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
           transition-colors w-full;
  }
  .cp-select {
    @apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
           rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
           transition-colors;
  }
  .cp-label {
    @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
  }

  /* Buttons — base styles inlined to avoid @apply on component classes */
  .cp-btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm;
  }
  .cp-btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-slate-100 dark:bg-gray-700 hover:bg-slate-200 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200;
  }
  .cp-btn-danger {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm;
  }
  .cp-btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-300;
  }

  /* Table action buttons */
  .cp-action-view   { @apply p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 dark:hover:text-blue-400 transition-colors; }
  .cp-action-edit   { @apply p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10 dark:hover:text-primary-400 transition-colors; }
  .cp-action-delete { @apply p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors; }

  /* Stat card — cp-card inlined to avoid @apply on component class */
  .cp-stat {
    @apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm p-5 flex items-start gap-4;
  }
  .cp-stat-icon {
    @apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
  }

  /* Section heading inside a card */
  .cp-section-title {
    @apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
  }

  /* Info rows (label + value pairs) */
  .cp-info-row {
    @apply flex items-center justify-between py-2.5 border-b border-slate-100 dark:border-gray-700/50 last:border-0;
  }
  .cp-info-label { @apply text-xs text-slate-500 dark:text-slate-400; }
  .cp-info-value { @apply text-sm font-medium text-slate-800 dark:text-slate-200; }
}