/* ═══════════════════════════════════════════════════════════════
   IQ Fatma — الثيم الداكن (Dark Theme)
   يُحمَّل بعد كل الأنماط الأخرى ليعيد تلوين الموقع بالكامل:
   خلفيات كحلية غامقة + كتابة فاتحة + الحفاظ على هوية التركواز.
   كل الأنماط مقصورة على الشاشة (@media screen) حتى يبقى الطباعة فاتح.
   ═══════════════════════════════════════════════════════════════ */
@media screen {
  :root { color-scheme: dark; }

  /* ── الأساس ── */
  html, body { background-color: #071528 !important; color: #dae6f2 !important; }

  /* ── الأسطح الفاتحة (Tailwind) → غامق ── */
  .bg-white, .bg-card, .bg-background,
  .bg-navy-50, .bg-navy-50\/50,
  .bg-slate-50, .bg-gray-50, .bg-gray-100, .bg-slate-100 {
    background-color: #0e2340 !important;
  }
  /* الهيدر الزجاجي */
  .bg-white\/70 { background-color: rgba(7, 21, 40, .82) !important; }

  /* ── النصوص الداكنة → فاتحة ── */
  .text-navy-800, .text-navy-700, .text-navy-600, .text-navy-500, .text-navy-400 {
    color: #dae6f2 !important;
  }
  .text-muted-foreground { color: #a9bfd8 !important; }
  /* عناوين الأقسام في صفحات الموقع (Tailwind) كانت كحلي غامق = مخفية على الخلفية الغامقة */
  .section-title, .section-title * { color: #eef4fb !important; }

  /* ── الحدود ── */
  .border-navy-100, .border-navy-200, .border-slate-200, .border-gray-200, .border-gray-300 {
    border-color: rgba(255, 255, 255, .12) !important;
  }

  /* ── مكوّنات IQ ── */
  .iq-card { background: #0e2340 !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }
  .iq-main { background: #071528 !important; }
  .iq-modal { background: #0e2340 !important; }
  .iq-card-title, .iq-page-title, .iq-section-title, .iq-stat-num { color: #eef4fb !important; }
  .iq-stat-label, .iq-muted { color: #93a9c4 !important; }

  .iq-input, .iq-select, .iq-textarea { background: #0b1e38 !important; color: #dae6f2 !important; border-color: rgba(255,255,255,.14) !important; }
  .iq-input::placeholder, .iq-textarea::placeholder { color: #6f87a3 !important; }
  .iq-input:focus, .iq-select:focus, .iq-textarea:focus { border-color: #2fd4c4 !important; }
  .iq-label { color: #b9cbe0 !important; }

  .iq-table-wrap { border-color: rgba(255,255,255,.10) !important; }
  .iq-table th { background: #0b1e38 !important; color: #b9cbe0 !important; border-color: rgba(255,255,255,.10) !important; }
  .iq-table td { color: #dae6f2 !important; border-color: rgba(255,255,255,.08) !important; }
  .iq-table tr:hover td { background: rgba(255,255,255,.03) !important; }

  .iq-badge { background: rgba(47,212,196,.15) !important; color: #5eead4 !important; }
  .iq-badge-navy { background: rgba(255,255,255,.08) !important; color: #b9cbe0 !important; }
  .iq-badge-amber { background: rgba(251,191,36,.16) !important; color: #fcd34d !important; }
  .iq-badge-red { background: rgba(225,29,72,.18) !important; color: #fda4af !important; }
  .iq-badge-green { background: rgba(30,184,90,.18) !important; color: #86efac !important; }

  .iq-stat-icon { background: rgba(47,212,196,.14) !important; }
  .iq-stat-icon.navy { background: rgba(255,255,255,.08) !important; color: #cfe0f0 !important; }
  .iq-stat-icon.amber { background: rgba(251,191,36,.16) !important; color: #fcd34d !important; }
  .iq-stat-icon.green { background: rgba(30,184,90,.18) !important; color: #86efac !important; }

  .iq-qtext { color: #eef4fb !important; }
  .iq-qmedia img { border-color: rgba(255,255,255,.14) !important; }
  .iq-timer { background: rgba(255,255,255,.08) !important; color: #cfe0f0 !important; }
  .iq-timer.low { background: rgba(225,29,72,.2) !important; color: #ffb4c0 !important; }
  .iq-exam-foot .iq-muted { color: #93a9c4 !important; }
  .iq-option { background: #0e2340 !important; color: #dae6f2 !important; border-color: rgba(255,255,255,.12) !important; }
  .iq-option:hover { background: #10284a !important; }
  .iq-option.selected { background: rgba(47,212,196,.14) !important; }
  .iq-option.correct { background: rgba(30,184,90,.18) !important; }
  .iq-option.wrong { background: rgba(225,29,72,.18) !important; }
  .iq-option-key { background: rgba(255,255,255,.08) !important; color: #cfe0f0 !important; }

  .iq-qdot { background: #0b1e38 !important; color: #b9cbe0 !important; border-color: rgba(255,255,255,.12) !important; }
  .iq-qdot.answered { background: rgba(47,212,196,.18) !important; }
  .iq-qdot.current { background: #2fd4c4 !important; color: #06222b !important; }

  .iq-timer { background: #0b1e38 !important; color: #dae6f2 !important; }
  .iq-timer.low { background: rgba(225,29,72,.18) !important; color: #fda4af !important; }

  .iq-icon-btn { background: #0b1e38 !important; color: #9fb6d0 !important; border-color: rgba(255,255,255,.14) !important; }
  .iq-icon-btn:hover { color: #2fd4c4 !important; border-color: #2fd4c4 !important; }
  .iq-icon-btn.danger:hover { background: rgba(225,29,72,.16) !important; color: #fda4af !important; }

  .iq-empty { background: #0b1e38 !important; border-color: rgba(255,255,255,.14) !important; color: #7f97b3 !important; }
  .iq-progress { background: rgba(255,255,255,.12) !important; }
  .iq-divider { background: rgba(255,255,255,.10) !important; }
  .iq-side-overlay { background: rgba(3, 10, 20, .6) !important; }

  .iq-vid-row:hover { background: rgba(255,255,255,.05) !important; }
  .iq-vid-row.active { background: rgba(47,212,196,.14) !important; }
  .iq-vid-num { background: #0b1e38 !important; color: #b9cbe0 !important; border-color: rgba(255,255,255,.14) !important; }

  .iq-btn-outline { background: #0b1e38 !important; color: #cfe0f0 !important; border-color: rgba(255,255,255,.18) !important; }
  .iq-btn-outline:hover { background: #10284a !important; border-color: #2fd4c4 !important; }
  .iq-btn-ghost { color: #9fb6d0 !important; }
  .iq-btn-ghost:hover { background: rgba(255,255,255,.06) !important; }

  .iq-tabs { border-color: rgba(255,255,255,.10) !important; }
  .iq-tab { color: #9fb6d0 !important; }
  .iq-tab:hover { color: #dae6f2 !important; }

  .iq-cert { background: #0e2340 !important; border-color: rgba(255,255,255,.10) !important; }
  .iq-cert-qr { background: #fff !important; } /* رمز QR لازم يبقى أبيض للمسح */

  .iq-review, .iq-card-pad { color: #dae6f2; }

  /* ── React pages: عناصر زجاجية وحدود ── */
  .glass { border-color: rgba(255,255,255,.14) !important; }

  /* ── الفوتر (hero-gradient) يبقى غامق كما هو ── */
  .hero-gradient { background-color: #061424 !important; }

  /* ── تحديد النص ── */
  ::selection { background: rgba(47,212,196,.35); color: #fff; }

  /* ── النوع الثاني: ألوان الإجابة + مؤقّت الامتحان ── */
  .iq-option.p1 { background: rgba(34,197,94,.20) !important; border-color: #22c55e !important; }
  .iq-option.p2 { background: rgba(139,92,246,.22) !important; border-color: #8b5cf6 !important; }
  .iq-donut .d-bg { stroke: rgba(255,255,255,.16); }
  .iq-donut .d-fg { stroke: #2fd4c4; }
  .iq-donut .d-t { color: #dae6f2 !important; }
  .iq-donut.low .d-fg { stroke: #e11d48; }
  .iq-donut.low .d-t { color: #fda4af !important; }
  .iq-expired { background: rgba(225,29,72,.18) !important; color: #fda4af !important; border-color: rgba(225,29,72,.5) !important; }
  .iq-markbtn.on { background: rgba(245,158,11,.20) !important; color: #fbbf24 !important; border-color: #f59e0b !important; }
}

/* الطباعة تبقى فاتحة دائمًا */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
}