/* ============================================================
   EduCreate — Bootstrap 5.3 RTL Theme Overrides
   Rebrands Bootstrap's default theme (blue #0d6efd, system font)
   to the EduCreate identity, using --bs-* custom properties only.
   No Sass, no build step — plain CSS re-declarations.

   Load order (see .claude/plans/bootstrap-migration-plan.md §3-ب):
     1. bootstrap.rtl.min.css     (Bootstrap defaults)
     2. educreate/site.css or admin.css (which @import colors_and_type.css,
                                          the --ec-* brand token source of truth)
     3. THIS FILE                 (remaps --bs-* to --ec-* tokens)

   Bootstrap 5.3.3 does not derive every component color purely from
   root --bs-* variables — several components (solid/outline buttons,
   checked form-check inputs, form-control/form-select focus rings,
   dropdown/nav-pills/pagination/list-group "active" states) hardcode
   literal hex values inside their own component-scoped custom
   properties instead of referencing --bs-primary etc. Those are
   re-declared explicitly in §2 below so no Bootstrap-default blue
   survives once a component is actually used in later batches.
   Any component not covered here should be checked/patched the
   first time a batch actually introduces it (plan §3-ج / M3 note).
   ============================================================ */

/* ============================================================
   §1 — Root --bs-* variable remap
   ============================================================ */
:root {
  /* ---------- Primary = Academic Blue (--ec-blue-600) ---------- */
  --bs-primary: var(--ec-blue-600);
  --bs-primary-rgb: 13, 71, 161;
  --bs-primary-text-emphasis: var(--ec-blue-900);
  --bs-primary-bg-subtle: var(--ec-blue-050);
  --bs-primary-border-subtle: var(--ec-blue-200);

  /* ---------- Secondary = Creative Sky (--ec-sky-500) ----------
     C1: sky-500 fails contrast as white-on-sky; text-emphasis and
     any component text color must stay dark (sky-900 / blue-900),
     never the Bootstrap-default white --bs-btn-color. See §2. */
  --bs-secondary: var(--ec-sky-500);
  --bs-secondary-rgb: 56, 189, 248;
  --bs-secondary-text-emphasis: var(--ec-sky-900);
  --bs-secondary-bg-subtle: var(--ec-sky-050);
  --bs-secondary-border-subtle: var(--ec-sky-200);

  /* ---------- Info — brand has no distinct "info" hue; reuse Sky
     so no off-brand Bootstrap cyan (#0dcaf0) survives ---------- */
  --bs-info: var(--ec-sky-500);
  --bs-info-rgb: 56, 189, 248;
  --bs-info-text-emphasis: var(--ec-sky-900);
  --bs-info-bg-subtle: var(--ec-sky-050);
  --bs-info-border-subtle: var(--ec-sky-200);

  /* ---------- Warning = Gold Accent (--ec-gold-500) ----------
     C2: gold-500 fails contrast as text/with white; always pair
     with dark text (gold-900). Bootstrap's own --bs-btn-color for
     .btn-warning already defaults to #000, which is safe. ---------- */
  --bs-warning: var(--ec-gold-500);
  --bs-warning-rgb: 251, 192, 45;
  --bs-warning-text-emphasis: var(--ec-gold-900);
  --bs-warning-bg-subtle: var(--ec-gold-050);
  --bs-warning-border-subtle: var(--ec-gold-200);

  /* ---------- Success — background uses --ec-success, text uses
     the WCAG-safe --ec-success-text (added in Batch 1) ---------- */
  --bs-success: var(--ec-success);
  --bs-success-rgb: 16, 185, 129;
  --bs-success-text-emphasis: var(--ec-success-text);
  --bs-success-bg-subtle: #e3f8ef;
  --bs-success-border-subtle: #a8e6cc;

  /* ---------- Danger — button/solid backgrounds use the WCAG-safe
     --ec-danger-strong, text uses --ec-danger-text (Batch 1) ---------- */
  --bs-danger: var(--ec-danger-strong);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: var(--ec-danger-text);
  --bs-danger-bg-subtle: #fbe9e9;
  --bs-danger-border-subtle: #f3b4b4;

  /* ---------- Body / typography ---------- */
  --bs-body-font-family: var(--font-arabic);
  --bs-font-sans-serif: var(--font-arabic);
  --bs-font-monospace: var(--font-mono);
  --bs-body-color: var(--ec-ink-800);
  --bs-body-bg: var(--ec-white);
  /* ‎.text-secondary‎ (وهو نصّ التسميات في السلة والمراجعة والتأكيد) كان يقرأ من قيمة
     Bootstrap الافتراضية غير المدقَّقة. الرمز ‎--fg-3‎ نُقل عمدًا إلى ink-600 ليتجاوز
     4.5:1 — انظر التعليق في colors_and_type.css — فنربط النصّ الثانوي به. */
  --bs-secondary-color: var(--fg-3);
  --bs-tertiary-color: var(--fg-3);

  /* ---------- Borders ---------- */
  --bs-border-color: var(--ec-ink-200);

  /* ---------- Radii (per identity guide) ---------- */
  --bs-border-radius-sm: var(--r-sm);     /* 8px */
  --bs-border-radius: var(--r-md);        /* 12px */
  --bs-border-radius-lg: var(--r-lg);     /* 14px */
  --bs-border-radius-xl: var(--r-xl);     /* 18px */
  --bs-border-radius-xxl: var(--r-2xl);   /* 24px */
  --bs-border-radius-pill: 30px;          /* per guide — matches .ec-badge */

  /* ---------- Shadows (per identity guide) ---------- */
  --bs-box-shadow-sm: var(--shadow-xs);
  --bs-box-shadow: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-md);

  /* ---------- Links ---------- */
  --bs-link-color: var(--ec-blue-600);
  --bs-link-color-rgb: 13, 71, 161;
  --bs-link-hover-color: var(--ec-blue-700);
  --bs-link-hover-color-rgb: 11, 63, 140;

  /* ---------- Focus ring ---------- */
  --bs-focus-ring-color: rgba(13, 71, 161, 0.25);

  /* ---------- Form validation feedback ---------- */
  --bs-form-valid-color: var(--ec-success-text);
  --bs-form-valid-border-color: var(--ec-success);
  --bs-form-invalid-color: var(--ec-danger-text);
  --bs-form-invalid-border-color: var(--ec-danger-strong);
}

/* ============================================================
   §2 — Component-level overrides
   (Bootstrap components whose colors are hardcoded per-instance
   in the compiled CSS rather than derived from the §1 root vars)
   ============================================================ */

/* ---------- Solid buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--ec-blue-600);
  --bs-btn-border-color: var(--ec-blue-600);
  --bs-btn-hover-bg: var(--ec-blue-700);
  --bs-btn-hover-border-color: var(--ec-blue-700);
  --bs-btn-focus-shadow-rgb: 13, 71, 161;
  --bs-btn-active-bg: var(--ec-blue-800);
  --bs-btn-active-border-color: var(--ec-blue-800);
  --bs-btn-disabled-bg: var(--ec-blue-600);
  --bs-btn-disabled-border-color: var(--ec-blue-600);
}
.btn-secondary {
  /* C1 — dark text on Sky, never Bootstrap's default white */
  --bs-btn-color: var(--ec-blue-900);
  --bs-btn-bg: var(--ec-sky-500);
  --bs-btn-border-color: var(--ec-sky-500);
  --bs-btn-hover-color: var(--ec-blue-900);
  --bs-btn-hover-bg: var(--ec-sky-600);
  --bs-btn-hover-border-color: var(--ec-sky-600);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  --bs-btn-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-sky-700);
  --bs-btn-active-border-color: var(--ec-sky-700);
  --bs-btn-disabled-color: var(--ec-blue-900);
  --bs-btn-disabled-bg: var(--ec-sky-500);
  --bs-btn-disabled-border-color: var(--ec-sky-500);
}
.btn-success {
  --bs-btn-bg: var(--ec-success);
  --bs-btn-border-color: var(--ec-success);
  --bs-btn-hover-bg: var(--ec-success-text);
  --bs-btn-hover-border-color: var(--ec-success-text);
  --bs-btn-focus-shadow-rgb: 16, 185, 129;
  --bs-btn-active-bg: var(--ec-success-text);
  --bs-btn-active-border-color: var(--ec-success-text);
  --bs-btn-disabled-bg: var(--ec-success);
  --bs-btn-disabled-border-color: var(--ec-success);
}
.btn-danger {
  --bs-btn-bg: var(--ec-danger-strong);
  --bs-btn-border-color: var(--ec-danger-strong);
  --bs-btn-hover-bg: var(--ec-danger-text);
  --bs-btn-hover-border-color: var(--ec-danger-text);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-bg: var(--ec-danger-text);
  --bs-btn-active-border-color: var(--ec-danger-text);
  --bs-btn-disabled-bg: var(--ec-danger-strong);
  --bs-btn-disabled-border-color: var(--ec-danger-strong);
}
.btn-warning {
  /* text already #000 by default in Bootstrap — safe on Gold, kept as-is */
  --bs-btn-bg: var(--ec-gold-500);
  --bs-btn-border-color: var(--ec-gold-500);
  --bs-btn-hover-bg: var(--ec-gold-600);
  --bs-btn-hover-border-color: var(--ec-gold-600);
  --bs-btn-focus-shadow-rgb: 251, 192, 45;
  --bs-btn-active-bg: var(--ec-gold-700);
  --bs-btn-active-border-color: var(--ec-gold-700);
  --bs-btn-disabled-bg: var(--ec-gold-500);
  --bs-btn-disabled-border-color: var(--ec-gold-500);
}
.btn-info {
  --bs-btn-color: var(--ec-blue-900);
  --bs-btn-bg: var(--ec-sky-500);
  --bs-btn-border-color: var(--ec-sky-500);
  --bs-btn-hover-color: var(--ec-blue-900);
  --bs-btn-hover-bg: var(--ec-sky-600);
  --bs-btn-hover-border-color: var(--ec-sky-600);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  --bs-btn-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-sky-700);
  --bs-btn-active-border-color: var(--ec-sky-700);
  --bs-btn-disabled-color: var(--ec-blue-900);
  --bs-btn-disabled-bg: var(--ec-sky-500);
  --bs-btn-disabled-border-color: var(--ec-sky-500);
}

/* ---------- Outline buttons ---------- */
.btn-outline-primary {
  --bs-btn-color: var(--ec-blue-600);
  --bs-btn-border-color: var(--ec-blue-600);
  --bs-btn-hover-bg: var(--ec-blue-600);
  --bs-btn-hover-border-color: var(--ec-blue-600);
  --bs-btn-focus-shadow-rgb: 13, 71, 161;
  --bs-btn-active-bg: var(--ec-blue-600);
  --bs-btn-active-border-color: var(--ec-blue-600);
  --bs-btn-disabled-color: var(--ec-blue-600);
  --bs-btn-disabled-border-color: var(--ec-blue-600);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ec-sky-700);
  --bs-btn-border-color: var(--ec-sky-500);
  --bs-btn-hover-color: var(--ec-blue-900);
  --bs-btn-hover-bg: var(--ec-sky-500);
  --bs-btn-hover-border-color: var(--ec-sky-500);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  --bs-btn-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-sky-500);
  --bs-btn-active-border-color: var(--ec-sky-500);
  --bs-btn-disabled-color: var(--ec-sky-700);
  --bs-btn-disabled-border-color: var(--ec-sky-500);
}
.btn-outline-success {
  --bs-btn-color: var(--ec-success-text);
  --bs-btn-border-color: var(--ec-success);
  --bs-btn-hover-bg: var(--ec-success);
  --bs-btn-hover-border-color: var(--ec-success);
  --bs-btn-focus-shadow-rgb: 16, 185, 129;
  --bs-btn-active-bg: var(--ec-success);
  --bs-btn-active-border-color: var(--ec-success);
  --bs-btn-disabled-color: var(--ec-success-text);
  --bs-btn-disabled-border-color: var(--ec-success);
}
.btn-outline-danger {
  --bs-btn-color: var(--ec-danger-text);
  --bs-btn-border-color: var(--ec-danger-strong);
  --bs-btn-hover-bg: var(--ec-danger-strong);
  --bs-btn-hover-border-color: var(--ec-danger-strong);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-bg: var(--ec-danger-strong);
  --bs-btn-active-border-color: var(--ec-danger-strong);
  --bs-btn-disabled-color: var(--ec-danger-text);
  --bs-btn-disabled-border-color: var(--ec-danger-strong);
}
.btn-outline-warning {
  --bs-btn-color: var(--ec-gold-900);
  --bs-btn-border-color: var(--ec-gold-500);
  --bs-btn-hover-bg: var(--ec-gold-500);
  --bs-btn-hover-border-color: var(--ec-gold-500);
  --bs-btn-focus-shadow-rgb: 251, 192, 45;
  --bs-btn-active-bg: var(--ec-gold-500);
  --bs-btn-active-border-color: var(--ec-gold-500);
  --bs-btn-disabled-color: var(--ec-gold-900);
  --bs-btn-disabled-border-color: var(--ec-gold-500);
}
.btn-outline-info {
  --bs-btn-color: var(--ec-sky-700);
  --bs-btn-border-color: var(--ec-sky-500);
  --bs-btn-hover-color: var(--ec-blue-900);
  --bs-btn-hover-bg: var(--ec-sky-500);
  --bs-btn-hover-border-color: var(--ec-sky-500);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  --bs-btn-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-sky-500);
  --bs-btn-active-border-color: var(--ec-sky-500);
  --bs-btn-disabled-color: var(--ec-sky-700);
  --bs-btn-disabled-border-color: var(--ec-sky-500);
}

/* ---------- text-bg-* utility (color/bg forced together with !important) ----------
   C1: .text-bg-secondary hardcodes white text — override to dark */
.text-bg-secondary {
  color: var(--ec-blue-900) !important;
}
.text-bg-info {
  color: var(--ec-blue-900) !important;
}

/* ---------- badge (default --bs-badge-color is white; unsafe on Sky/Gold) ---------- */
.badge.bg-secondary,
.badge.bg-warning,
.badge.bg-info {
  --bs-badge-color: var(--ec-blue-900);
}

/* ---------- Form controls — focus ring ---------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--ec-sky-500);
  box-shadow: 0 0 0 0.25rem rgba(13, 71, 161, 0.25);
}

/* ---------- Form checks (checkbox / radio / switch) ---------- */
.form-check-input:focus {
  border-color: var(--ec-sky-500);
  box-shadow: 0 0 0 0.25rem rgba(13, 71, 161, 0.25);
}
.form-check-input:checked {
  background-color: var(--ec-blue-600);
  border-color: var(--ec-blue-600);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--ec-blue-600);
  border-color: var(--ec-blue-600);
}

/* ---------- Dropdown / nav-pills / pagination / list-group "active" state ----------
   These hardcode their own --bs-*-active-bg instead of reading --bs-primary */
.dropdown-menu {
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--ec-blue-600);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ec-blue-600);
}
.pagination {
  --bs-pagination-active-bg: var(--ec-blue-600);
  --bs-pagination-active-border-color: var(--ec-blue-600);
}
.list-group {
  --bs-list-group-active-bg: var(--ec-blue-600);
  --bs-list-group-active-border-color: var(--ec-blue-600);
}