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

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        direction: rtl;
    }
}

@layer components {
    .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200;
    }
    .sidebar-item-active {
        @apply bg-crm-50 text-crm-700 border-r-2 border-crm-600;
    }
    .sidebar-item-inactive {
        @apply text-slate-500 hover:bg-slate-100 hover:text-slate-700;
    }
    .stat-card {
        @apply bg-white rounded-2xl border border-slate-200 p-5 shadow-sm transition-all duration-200 hover:shadow-md;
    }
    .page-card {
        @apply bg-white rounded-2xl border border-slate-200 shadow-sm;
    }
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-crm-600 text-white rounded-xl font-medium text-sm transition-all duration-200 hover:bg-crm-700 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-crm-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-white text-slate-700 rounded-xl font-medium text-sm border border-slate-300 transition-all duration-200 hover:bg-slate-50 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 text-white rounded-xl font-medium text-sm transition-all duration-200 hover:bg-red-700 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .input-field {
        @apply block w-full rounded-xl border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 shadow-sm transition-all duration-200 focus:border-crm-500 focus:ring-2 focus:ring-crm-500/20;
    }
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .badge-success { @apply badge bg-crm-100 text-crm-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-blue-100 text-blue-700; }
    .badge-neutral { @apply badge bg-slate-100 text-slate-700; }
}