/* =====================================================
   🔠 تحسينات القراءة — للبروجكتر وكبار السن
   =====================================================
   ملف منفصل يُحمّل بعد Tailwind لضمان الأولوية
   ===================================================== */

/* —— 1. حجم الخط الأساسي أكبر —— */
html {
  font-size: 17px !important;
}

body {
  line-height: 1.75 !important;
}

/* —— 2. كل النصوص الباهتة تصبح أوضح —— */
[class*="text-slate-400"] { color: #c8ccd0 !important; }
[class*="text-slate-500"] { color: #b0b5bb !important; }
[class*="text-slate-600"] { color: #9ca3af !important; }
[class*="text-slate-300"] { color: #e2e8f0 !important; }

/* —— 3. نصوص صغيرة جداً تكبر —— */
[class*="text-\[10px\]"],
[class*="text-\[11px\]"] {
  font-size: 13px !important;
}

[class*="text-xs"] {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

[class*="text-sm"] {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

/* —— 4. عناوين أكبر —— */
[class*="text-xl"] { font-size: 22px !important; }
[class*="text-2xl"] { font-size: 27px !important; }
[class*="text-3xl"] { font-size: 33px !important; }
[class*="text-4xl"] { font-size: 40px !important; font-weight: 900 !important; }

/* —— 5. تعزيز الشفافيات المنخفضة —— */
[class*="opacity-50"] { opacity: 0.78 !important; }
[class*="opacity-60"] { opacity: 0.85 !important; }
[class*="opacity-70"] { opacity: 0.92 !important; }

/* —— 6. ألوان أكسنت أسطع —— */
[class*="text-cyan-400"] { color: #67e8f9 !important; }
[class*="text-emerald-400"] { color: #6ee7b7 !important; }
[class*="text-violet-400"] { color: #c4b5fd !important; }
[class*="text-orange-400"] { color: #fb923c !important; }
[class*="text-blue-400"] { color: #60a5fa !important; }
[class*="text-emerald-300"] { color: #86efac !important; }
[class*="text-cyan-300"] { color: #67e8f9 !important; }

/* —— 7. أزرار أكبر —— */
button, [role="button"], a[class*="btn"] {
  font-size: 15px !important;
  min-height: 44px;
}

/* —— 8. حقول الإدخال أكبر —— */
input, select, textarea {
  font-size: 16px !important;
  min-height: 48px;
}

input::placeholder {
  color: #6b7280 !important;
  opacity: 0.85 !important;
  font-size: 15px !important;
}

/* —— 9. حدود أوضح —— */
[class*="border-slate-700"] { border-color: rgba(100, 116, 139, 0.45) !important; }
[class*="border-slate-800"] { border-color: rgba(100, 116, 139, 0.35) !important; }

/* —— 10. خلفيات البطاقات أوضح —— */
[class*="bg-slate-900\\/"] { background-color: rgba(30, 41, 59, 0.75) !important; }
[class*="bg-slate-800\\/"] { background-color: rgba(30, 41, 59, 0.65) !important; }

/* —— 11. Labels و Headings —— */
label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

h1, h2, h3, h4 {
  letter-spacing: 0.01em !important;
  font-weight: 800 !important;
}

/* —— 12. جداول واضحة —— */
th {
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

td {
  font-size: 14px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* —— 13. رسائل خطأ واضحة —— */
[class*="text-danger"] {
  color: #fca5a5 !important;
  font-weight: 700 !important;
}

/* —— 14. تحسين Line Height عام —— */
p, span, li {
  line-height: 1.75;
}

/* —— 15. تحسين شريط التنقل —— */
nav [class*="text-\[10px\]"],
nav [class*="text-xs"] {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* —— 16. تعزيز النص الأبيض —— */
[class*="text-white"] {
  color: #ffffff !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.1);
}

/* —— 17. الوضع الفاتح — إصلاح شامل —— */

/* --- النصوص: كل الدرجات تصبح داكنة --- */
.light [class*="text-slate-100"] { color: #0f172a !important; }
.light [class*="text-slate-200"] { color: #1e293b !important; }
.light [class*="text-slate-300"] { color: #1e293b !important; }
.light [class*="text-slate-400"],
.light [class*="text-slate-500"] { color: #334155 !important; }
.light [class*="text-slate-600"] { color: #475569 !important; }
.light [class*="text-white"] { color: #0f172a !important; text-shadow: none; }
.light label { color: #0f172a !important; font-weight: 700 !important; }

/* --- placeholder واضح --- */
.light input::placeholder,
.light textarea::placeholder,
.light select { color: #94a3b8 !important; }

/* --- خلفيات المربعات والبطاقات --- */
.light [class*="bg-slate-950\\/80"],
.light [class*="bg-slate-950\\/50"] {
  background-color: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
}

.light [class*="bg-slate-900\\/80"],
.light [class*="bg-slate-900\\/50"],
.light [class*="bg-slate-900\\/60"] {
  background-color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* --- حقول الإدخال: خلفية كريمية + حدود واضحة --- */
.light input[type="text"],
.light input[type="email"],
.light input[type="tel"],
.light input[type="password"],
.light input[type="url"],
.light input[type="number"],
.light textarea,
.light select {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.light input:focus,
.light textarea:focus,
.light select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}

/* --- ظلال البطاقات --- */
.light [class*="rounded-xl"][class*="border"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* --- الهيدر: ظل خفيف --- */
.light header {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* --- بطاقات المراجعة (قبل الإرسال): أزرق سماوي --- */
.light [class*="bg-slate-900\\/40"],
.light [class*="bg-slate-800"] {
  background-color: #eff6ff !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* —— 18. بطاقات الإرشادات الزمردية في الوضع الفاتح —— */
.light [class*="bg-emerald-900"] {
  background-color: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08) !important;
}
.light [class*="bg-emerald-900"] [class*="text-white"],
.light [class*="bg-emerald-900"] p {
  color: #064e3b !important;
}

/* —— 19. بطاقات التوعية الرقمية — نصوص واضحة —— */
.light [class*="bg-amber-50"],
.light [class*="bg-blue-50"],
.light [class*="bg-cyan-50"],
.light [class*="bg-purple-50"],
.light [class*="bg-pink-50"],
.light [class*="bg-green-50"],
.light [class*="bg-yellow-50"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.light [class*="bg-amber-50"] p,
.light [class*="bg-blue-50"] p,
.light [class*="bg-cyan-50"] p,
.light [class*="bg-purple-50"] p,
.light [class*="bg-pink-50"] p,
.light [class*="bg-green-50"] p,
.light [class*="bg-yellow-50"] p {
  color: #1e293b !important;
}