/* الأنيميشنات والتخصيصات */
body {
    font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* أزرار التبديل */
.toggle-checkbox:checked {
    right: 0;
    border-color: #10b981;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #10b981;
}

.toggle-checkbox {
    right: 0;
    z-index: 1;
    border-color: #e2e8f0;
    transition: all 0.3s;
}

.toggle-label {
    width: 3rem;
    height: 1.5rem;
    background-color: #e2e8f0;
    border-radius: 9999px;
    transition: all 0.3s;
    cursor: pointer;
}

.dark .toggle-checkbox {
    border-color: #475569;
}

.dark .toggle-label {
    background-color: #475569;
}

/* ============================================
   حل جذري لمشكلة النصوص الداكنة على خلفية داكنة
   ============================================ */

/* 1. إجبار جميع النصوص الداكنة في الوضع الليلي لتصبح فاتحة */
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-black,
.dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark span, .dark div:not(.bg-*):not(.text-white) {
    color: #f1f5f9 !important;
}

/* 2. استثناء العناصر التي يجب أن تبقى فاتحة أصلاً أو لها لون خاص */
.dark .text-white,
.dark .text-amber-300,
.dark .text-emerald-400,
.dark .text-emerald-600,
.dark .text-cyan-600,
.dark .text-cyan-400,
.dark .text-purple-600,
.dark .text-purple-400,
.dark .text-indigo-600,
.dark .text-indigo-400,
.dark .text-rose-500,
.dark .text-slate-400,
.dark .text-slate-500,
.dark .text-slate-300 {
    color: inherit !important; /* يحافظ على لونها المخصص */
}

/* 3. جعل جميع الخلفيات الفاتحة في الوضع العادي تصبح داكنة في الليلي */
.dark .bg-white,
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

/* 4. تصحيح ألوان التصنيفات (الأهم) لتكون واضحة في الليلي */
.dark .bg-blue-100 {
    background-color: #1e3a8a !important;
    color: #bfdbfe !important;
    border-color: #1e40af !important;
}
.dark .bg-purple-100 {
    background-color: #4c1d95 !important;
    color: #e9d5ff !important;
    border-color: #6b21a5 !important;
}
.dark .bg-pink-100 {
    background-color: #831843 !important;
    color: #fbcfe8 !important;
    border-color: #9d174d !important;
}
.dark .bg-orange-100 {
    background-color: #7c2d12 !important;
    color: #fed7aa !important;
    border-color: #9a3412 !important;
}
.dark .bg-indigo-100 {
    background-color: #3730a3 !important;
    color: #c7d2fe !important;
    border-color: #4338ca !important;
}
.dark .bg-teal-100 {
    background-color: #134e4a !important;
    color: #ccfbf1 !important;
    border-color: #0f766e !important;
}
.dark .bg-emerald-100 {
    background-color: #065f46 !important;
    color: #a7f3d0 !important;
    border-color: #047857 !important;
}
.dark .bg-amber-100 {
    background-color: #78350f !important;
    color: #fed7aa !important;
    border-color: #b45309 !important;
}
.dark .bg-rose-100 {
    background-color: #881337 !important;
    color: #fecdd3 !important;
    border-color: #be123c !important;
}
.dark .bg-cyan-100 {
    background-color: #164e63 !important;
    color: #cffafe !important;
    border-color: #0891b2 !important;
}

/* 5. تحسين حقول الإدخال */
.dark input, .dark select, .dark textarea {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: #10b981 !important;
    outline: none;
}

/* 6. تحسين الأزرار الثانوية */
.dark .bg-slate-200, .dark .bg-gray-200 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* 7. تحسين بطاقات المهام */
.dark .task-card {
    background-color: #1e293b;
    border-color: #334155;
}

/* 8. تحسين لون النص داخل التنبيهات */
.dark .bg-amber-100,
.dark .bg-red-100,
.dark .bg-green-100 {
    color: #f1f5f9 !important;
}