/* ========================================
   theme.css - آپدیت نهایی برای رفع همه مشکلات
   ======================================== */

/* ۱. رنگ‌های سفارشی Primary (آبی) */
.text-primary-400 { color: #60a5fa; }
.text-primary-500 { color: #3b82f6; }
.text-primary-600 { color: #2563eb; }
.text-primary-700 { color: #1d4ed8; }
.text-primary-800 { color: #1e40af; }

.bg-primary-50 { background-color: #eff6ff; }
.bg-primary-100 { background-color: #dbeafe; }
.bg-primary-500 { background-color: #3b82f6; }
.bg-primary-600 { background-color: #2563eb; }

.from-primary-100 { --tw-gradient-from: #dbeafe; }
.from-primary-200 { --tw-gradient-from: #bfdbfe; }
.from-primary-500 { --tw-gradient-from: #3b82f6; }
.from-primary-600 { --tw-gradient-from: #2563eb; }

.to-primary-200 { --tw-gradient-to: #bfdbfe; }
.to-primary-600 { --tw-gradient-to: #2563eb; }
.to-primary-700 { --tw-gradient-to: #1d4ed8; }

.border-primary-500 { border-color: #3b82f6; }

/* ۲. رنگ‌های سفارشی Secondary (طوسی) */
.text-secondary-600 { color: #475569; }
.text-secondary-700 { color: #334155; }
.text-secondary-800 { color: #1e293b; }

.bg-secondary-800 { background-color: #1e293b; }

/* ۳. رنگ‌های تکمیلی برای پروژه‌ها (Pink, Orange, Purple, Teal...) */
.bg-teal-100 { background-color: #ccfbf1; }
.text-teal-600 { color: #0d9488; }
.bg-teal-50 { background-color: #f0fdfa; }

.text-pink-500 { color: #ec4899; }
.hover\:border-pink-200:hover { border-color: #fbcfe8; }

.bg-orange-50 { background-color: #fff7ed; }
.text-orange-600 { color: #ea580c; }

.bg-purple-50 { background-color: #faf5ff; }
.text-purple-600 { color: #9333ea; }

/* ۴. تعریف کلاس‌های گرادیان (Gradient) */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

/* ۵. رفع مشکل تب‌های پنل ادمین (admin-tab) */
/* معادل دستی کلاس‌های @apply که توی کد قبلی نوشته بودی */
.admin-tab {
    padding-left: 1.5rem;  /* px-6 */
    padding-right: 1.5rem;
    padding-top: 0.75rem;  /* py-3 */
    padding-bottom: 0.75rem;
    font-weight: 600;      /* font-semibold */
    font-size: 1.125rem;   /* text-lg */
    position: relative;
}

/* معادل text-primary-700 برای تب فعال */
.admin-tab.active {
    color: #1d4ed8;
}

/* ۶. فواصل RTL (راست‌چین) */
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

/* ۷. انیمیشن‌های سفارشی که توی @layer بودن */
.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-page-transition {
    animation: fade-in 0.4s ease-out;
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ۸. رفع یک سری جزئیات دیگه */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}