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

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-cairo), system-ui, -apple-system, sans-serif;
}

html[dir="rtl"] { direction: rtl; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all
           focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary { @apply btn bg-brand-600 text-white hover:bg-brand-700 focus:ring-brand-500; }
  .btn-secondary { @apply btn bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-400; }
  .btn-danger { @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; }
  .btn-success { @apply btn bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500; }
  .btn-ghost { @apply btn text-slate-600 hover:bg-slate-100; }

  .input {
    @apply w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-sm
           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
           placeholder:text-slate-400 transition;
  }
  .label { @apply block text-sm font-medium text-slate-700 mb-1.5; }

  .card {
    @apply bg-white rounded-xl border border-slate-200 shadow-soft;
  }
  .card-header { @apply px-5 py-4 border-b border-slate-200 flex items-center justify-between; }
  .card-body { @apply p-5; }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
  }
  .badge-success { @apply badge bg-emerald-100 text-emerald-700; }
  .badge-warning { @apply badge bg-amber-100 text-amber-700; }
  .badge-danger  { @apply badge bg-red-100 text-red-700; }
  .badge-info    { @apply badge bg-sky-100 text-sky-700; }
  .badge-neutral { @apply badge bg-slate-100 text-slate-700; }

  .table-wrap { @apply overflow-x-auto; }
  .table { @apply w-full text-sm text-right; }
  .table th { @apply px-4 py-3 bg-slate-50 font-semibold text-slate-600 text-xs uppercase tracking-wider border-b border-slate-200; }
  .table td { @apply px-4 py-3 border-b border-slate-100; }
  .table tr:hover td { @apply bg-slate-50; }
}

@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .print-area { padding: 0; }
}