/* =====================================================================
   Infinity Courses — مكوّنات التصميم الأساسية
   =====================================================================

   المشكلة التي تحلّها هذه الطبقة:

   تركواز اللوغو ‎#3DA7A9‎ تباينه مع الأبيض 2.88:1، والحد المطلوب للنصوص
   4.5:1. فأزرار الموقع الحالية ‎bg-primary‎ بنص أبيض تحت حد المقروئية —
   وطلابنا يقرأون على هواتف في إضاءة متغيرة.

   الحل ليس تغيير هوية اللوغو بل الفصل بين استخدامين:
     • لون اللوغو للأسطح والأشكال الكبيرة والشعار
     • درجة أغمق مشتقة منه للنصوص والأزرار

   نسب التباين المقاسة مقابل الأبيض:
     #3DA7A9  2.88:1  ✗ غير صالح للنصوص  → أسطح فقط
     #2E8688  4.30:1  ~ للنص الكبير
     #26706F  5.79:1  ✓ أزرار ونصوص
     #1F5A5C  7.85:1  ✓ عناوين
     #C43D10  5.22:1  ✓ برتقالي للنصوص
     #A8340E  6.64:1  ✓ برتقالي للعناوين

   قاعدة البرتقالي: فعل أساسي واحد في الشاشة. الإكثار منه يجعل الواجهة
   صاخبة ويقلّل الإحساس بالاحترافية، وهو أشيع خطأ عند بناء ثيم من لوغو
   بلونين.
   ===================================================================== */

:root {
  /* تركواز */
  --ic-brand-50:  #EAF5F5;
  --ic-brand-100: #D2EBEB;
  --ic-brand-200: #9ED3D4;
  --ic-brand-500: #3DA7A9;  /* اللوغو */
  --ic-brand-600: #2E8688;
  --ic-brand-700: #26706F;  /* أزرار ونصوص */
  --ic-brand-800: #1F5A5C;  /* عناوين */

  /* برتقالي */
  --ic-flame-50:  #FDEDE7;
  --ic-flame-200: #F79779;
  --ic-flame-500: #F25524;  /* اللوغو */
  --ic-flame-700: #C43D10;  /* أزرار ونصوص */
  --ic-flame-800: #A8340E;

  /* رمادي مائل للدفء ليجاور البرتقالي بلا تنافر */
  --ic-ink-900: #111827;
  --ic-ink-700: #374151;
  --ic-ink-500: #6B7280;
  --ic-ink-300: #D1D5DB;
  --ic-ink-100: #F3F4F6;
  --ic-surface: #FFFFFF;
  --ic-page:    #F8FAFA;

  --ic-radius:    0.75rem;
  --ic-radius-lg: 1.25rem;
  --ic-radius-pill: 9999px;

  --ic-focus-ring: 0 0 0 3px rgba(61, 167, 169, 0.35);
}

/* ─── 1. الأزرار ───────────────────────────────────────────────────── */

.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--ic-radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* هدف لمس لا يقل عن 44 بكسل: معيار الأصابع على الهواتف */
  min-height: 2.75rem;
}

.ic-btn:focus-visible {
  outline: none;
  box-shadow: var(--ic-focus-ring);
}

.ic-btn:disabled,
.ic-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* الفعل الأساسي — تباين 5.79:1 */
.ic-btn-primary {
  background: var(--ic-brand-700);
  color: #fff;
}
.ic-btn-primary:hover { background: var(--ic-brand-800); }

/* الفعل الأبرز — برتقالي، واحد في الشاشة لا أكثر */
.ic-btn-accent {
  background: var(--ic-flame-700);
  color: #fff;
}
.ic-btn-accent:hover { background: var(--ic-flame-800); }

.ic-btn-ghost {
  background: transparent;
  color: var(--ic-brand-700);
  border-color: var(--ic-brand-200);
}
.ic-btn-ghost:hover { background: var(--ic-brand-50); }

.ic-btn-quiet {
  background: var(--ic-ink-100);
  color: var(--ic-ink-700);
}
.ic-btn-quiet:hover { background: var(--ic-ink-300); }

/* الحذف وما لا رجعة فيه */
.ic-btn-danger {
  background: #B91C1C;
  color: #fff;
}
.ic-btn-danger:hover { background: #991B1B; }

.ic-btn-sm { padding: .375rem 1rem; font-size: .8125rem; min-height: 2.25rem; }
.ic-btn-block { width: 100%; }

/* ─── 2. الحقول ───────────────────────────────────────────────────── */

.ic-field { display: block; margin-bottom: 1.25rem; }

.ic-label {
  display: block;
  margin-bottom: .4375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ic-ink-700);
}

.ic-label-req::after {
  content: ' *';
  color: var(--ic-flame-700);
}

.ic-input,
.ic-select,
.ic-textarea {
  width: 100%;
  padding: .6875rem 1rem;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--ic-ink-900);
  background: var(--ic-surface);
  border: 1px solid var(--ic-ink-300);
  border-radius: var(--ic-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  /* 16 بكسل على الهواتف يمنع تقريب iOS التلقائي عند التركيز */
  min-height: 2.75rem;
}

@media (max-width: 640px) {
  .ic-input, .ic-select, .ic-textarea { font-size: 1rem; }
}

.ic-input:focus,
.ic-select:focus,
.ic-textarea:focus {
  outline: none;
  border-color: var(--ic-brand-500);
  box-shadow: var(--ic-focus-ring);
}

.ic-input::placeholder { color: var(--ic-ink-500); }

.ic-input-error { border-color: #B91C1C; }

.ic-hint  { margin-top: .375rem; font-size: .75rem; color: var(--ic-ink-500); }
.ic-error { margin-top: .375rem; font-size: .75rem; color: #B91C1C; font-weight: 500; }

/* ─── 3. البطاقات ─────────────────────────────────────────────────── */

.ic-card {
  background: var(--ic-surface);
  border: 1px solid var(--ic-ink-100);
  border-radius: var(--ic-radius-lg);
  padding: 1.5rem;
}

.ic-card-head { margin-bottom: 1.25rem; }
.ic-card-title { font-size: 1.125rem; font-weight: 700; color: var(--ic-ink-900); margin: 0; }
.ic-card-sub { margin-top: .3125rem; font-size: .8125rem; color: var(--ic-ink-500); }

/* بطاقة قابلة للنقر: الإطار يتلوّن لا الظل، فالظل يقفز بصريًا */
.ic-card-link {
  display: block;
  transition: border-color .15s ease;
}
.ic-card-link:hover { border-color: var(--ic-brand-200); }

/* ─── 4. الجداول ──────────────────────────────────────────────────── */

.ic-table-wrap {
  overflow-x: auto;
  border-radius: var(--ic-radius-lg);
  border: 1px solid var(--ic-ink-100);
  background: var(--ic-surface);
}

.ic-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

.ic-table th {
  padding: .875rem 1rem;
  text-align: right;
  font-weight: 600;
  font-size: .8125rem;
  color: var(--ic-ink-700);
  background: var(--ic-page);
  border-bottom: 1px solid var(--ic-ink-100);
  white-space: nowrap;
}

.ic-table td {
  padding: .875rem 1rem;
  color: var(--ic-ink-700);
  border-bottom: 1px solid var(--ic-ink-100);
}

.ic-table tbody tr:last-child td { border-bottom: none; }
.ic-table tbody tr:hover { background: var(--ic-page); }

/* الأرقام والمبالغ والمراجع تبقى LTR داخل واجهة عربية (BR-GEN-002) */
.ic-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ─── 5. أشرطة التنبيه ────────────────────────────────────────────── */

.ic-alert {
  display: flex;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-radius: var(--ic-radius);
  font-size: .875rem;
  line-height: 1.6;
  /* الإطار الجانبي لا يحمل زوايا مستديرة: الاستدارة مع إطار جانبي فقط
     تُنتج شكلًا مشوَّهًا */
  border-inline-start: 3px solid transparent;
}

.ic-alert-ok   { background: #ECFDF5; color: #065F46; border-inline-start-color: #059669; }
.ic-alert-info { background: var(--ic-brand-50); color: var(--ic-brand-800); border-inline-start-color: var(--ic-brand-500); }
.ic-alert-warn { background: #FFFBEB; color: #92400E; border-inline-start-color: #D97706; }
.ic-alert-err  { background: #FEF2F2; color: #991B1B; border-inline-start-color: #DC2626; }

.ic-alert-title { font-weight: 700; }

/* ─── 6. شرائح الحالة ─────────────────────────────────────────────── */

.ic-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .25rem .75rem;
  border-radius: var(--ic-radius-pill);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.ic-badge-ok      { background: #ECFDF5; color: #065F46; }
.ic-badge-brand   { background: var(--ic-brand-50); color: var(--ic-brand-800); }
.ic-badge-warn    { background: #FFFBEB; color: #92400E; }
.ic-badge-err     { background: #FEF2F2; color: #991B1B; }
.ic-badge-quiet   { background: var(--ic-ink-100); color: var(--ic-ink-700); }
.ic-badge-soon    { background: var(--ic-ink-100); color: var(--ic-ink-500); font-weight: 500; }

/* ─── 7. الحالة الفارغة ───────────────────────────────────────────── */

.ic-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.ic-empty-icon { font-size: 2rem; color: var(--ic-ink-300); margin-bottom: .75rem; }
.ic-empty-title { font-size: 1rem; font-weight: 600; color: var(--ic-ink-700); }
/* الحالة الفارغة دعوة لا اعتذار: تسمّي المساحة وتقترح الخطوة التالية */
.ic-empty-text { margin-top: .375rem; font-size: .875rem; color: var(--ic-ink-500); }
.ic-empty-action { margin-top: 1.25rem; }

/* ─── 8. حالة التحميل ─────────────────────────────────────────────── */

.ic-skeleton {
  background: var(--ic-ink-100);
  border-radius: var(--ic-radius);
  animation: ic-pulse 1.5s ease-in-out infinite;
}

.ic-skeleton-line { height: .875rem; margin-bottom: .625rem; }
.ic-skeleton-line:last-child { width: 60%; margin-bottom: 0; }

@keyframes ic-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* احترام تفضيل تقليل الحركة: بعض الطلاب يتأذّون من الحركة المستمرة */
@media (prefers-reduced-motion: reduce) {
  .ic-skeleton { animation: none; }
  .ic-btn, .ic-input, .ic-card-link { transition: none; }
}

/* ─── مساعدات ─────────────────────────────────────────────────────── */

/* يُخفي بصريًا ويُبقي للقارئ الصوتي */
.ic-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* شعار اللوغو يستخدم اللون الأصلي: شكل كبير لا نص */
.ic-logo-teal  { color: var(--ic-brand-500); }
.ic-logo-flame { color: var(--ic-flame-500); }