/* ============================================================
   EduCreate — Bootstrap Component Skin (طبقة تظليل المكوّنات)
   ------------------------------------------------------------
   Approach borrowed from scmt_project: instead of only remapping
   --bs-* tokens, Bootstrap's OWN component class names (.btn,
   .card, .table, .badge, .form-control, .container, .alert) are
   re-declared here so that plain Bootstrap markup renders in the
   EduCreate identity with no extra classes.

   Difference from scmt_project (deliberate):
     - scmt hardcodes hex values and duplicates its :root palette
       across two CSS files. Here every value resolves to an --ec-*
       token from colors_and_type.css — single source of truth.
     - Where Bootstrap already exposes a component-scoped variable
       (--bs-btn-*, --bs-card-*, --bs-table-*), the variable is set
       rather than the raw property, so Bootstrap's own modifiers
       (.btn-sm/.btn-lg, .table-sm, .card-* ...) keep composing.

   Values mirror the existing hand-rolled EduCreate components so a
   Bootstrap-classed element is visually indistinguishable from its
   hand-rolled twin (note: never write the two prefixes adjacent with
   a slash inside a CSS comment — that spells a comment terminator):
       .btn      ≡ .ec-btn          (admin.css)
       .card     ≡ .adm-card        (admin-components.css)
       .table    ≡ .adm-table       (admin-components.css)
       .badge    ≡ .ec-badge        (colors_and_type.css)
       .form-*   ≡ .adm-field *     (admin-views.css)
       .alert    ≡ .adm-form-alert  (admin-views.css)

   Load order (must be LAST, after bootstrap-theme-overrides.css):
     1. bootstrap.rtl.min.css
     2. site.css / admin.css  (@import colors_and_type.css)
     3. bootstrap-theme-overrides.css   (--bs-* token remap)
     4. THIS FILE                       (component class shadowing)

   The existing .ec- and .adm- classes are NOT touched or replaced —
   this layer is purely additive. AdminIcons/SiteIcons (inline SVG)
   and EduDialog/SweetAlert2 are likewise untouched.
   ============================================================ */

/* ============================================================
   §1 — Layout container
   Bootstrap's responsive .container steps (540/720/960/1140/1320)
   are replaced by the single EduCreate content width used across
   site.css (1320px), matching how .ec-* sections are laid out.
   ============================================================ */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--sp-5);          /* 24px */
}

/* Admin shell runs slightly wider — matches .adm-content */
.adm-content .container,
.container.container-admin {
  max-width: 1400px;
}

/* ============================================================
   §2 — Buttons  (≡ .ec-btn)
   Colors already come from bootstrap-theme-overrides.css §2
   (--bs-btn-bg / -color / -hover-*). Only shape + typography are
   re-skinned here so .btn-primary etc. stay WCAG-checked.
   ============================================================ */
.btn {
  --bs-btn-padding-y: 12px;
  --bs-btn-padding-x: 22px;
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: var(--fw-bold);
  --bs-btn-border-radius: var(--r-md);   /* 12px */
  --bs-btn-border-width: 0;
  --bs-btn-line-height: 1.5;

  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast),
              box-shadow var(--dur-base),
              color var(--dur-fast);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: scale(0.98); }

/* ---------- زرٌّ نصُّه اسم ملف (مشغّل الدورة) ----------
   .btn أعلاه عليها white-space: nowrap وهو الصواب لزرٍّ نصُّه كلمتان — أمّا زرٌّ نصُّه
   اسمُ ملفٍ يرفعه صاحب المنصة فطولُه غير محدود بطبيعته. وبلا هذا الاستثناء كان زرُّ
   المرفق يبلغ 587px في شاشة 375px فيصير المستند كلّه أعرض من إطار العرض: الصفحة
   تُمرَّر أفقيًّا، وفي RTL يظهر المحتوى منزاحًا بفراغ كبير على اليسار (بلاغ مستخدم جوال).

   وموضعُه هنا لا في site.css مقصود: المحدِّدان متساويا الأولوية (0,1,0)، و_Layout
   يُحمّل site.css قبل هذا الملف — فقاعدةٌ هناك يهزمها ترتيبُ المصدر ويبقى nowrap.
   (جُرِّب: صار عرض الزر 295px بينما بقي نصُّه بلا التفاف عند 556px.)

   و«anywhere» لا «break-word»: اسم الملف يخلط عربيةً بمقاطع لاتينية طويلة موصولة
   بشُرَط سفلية (All_Definitions_Shehab_Zaid.pdf) لا يجد فيها المتصفّح موضع كسرٍ طبيعيًّا.
   و min-width على الابن لأن عنصر flex لا ينكمش تحت مقاس محتواه بالافتراض. */
.btn.ec-btn-filename,
.ec-btn.ec-btn-filename {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
  max-width: 100%;
}
.btn.ec-btn-filename > span,
.ec-btn.ec-btn-filename > span { min-width: 0; }

/* .ec-btn is declared twice in this codebase with differing metrics:
   15px / 12px 22px in site.css (public) and 14px / 11px 20px in
   admin.css (dashboard) — the M2 duplication noted in the migration
   plan. Until M2 is resolved, .btn mirrors whichever twin shares its
   context, so a Bootstrap button and an .ec-btn sitting beside it are
   pixel-identical on both sides of the app. */
.adm-shell .btn {
  --bs-btn-padding-y: 11px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 14px;
}

.btn-sm {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: 13px;
  --bs-btn-border-radius: 10px;
}
.btn-lg {
  --bs-btn-padding-y: 15px;
  --bs-btn-padding-x: 28px;
  --bs-btn-font-size: 16px;
  --bs-btn-border-radius: var(--r-lg);   /* 14px */
}

/* Outline variants need their border back */
[class*="btn-outline-"] { --bs-btn-border-width: 1.5px; }

/* Brand elevation, per identity guide (rest → hover shadow) */
.btn-primary { box-shadow: var(--shadow-brand); }
.btn-danger  { box-shadow: 0 10px 28px rgba(239, 68, 68, 0.24); }

/* ---- EduCreate-only variants Bootstrap has no equivalent for ----
   Named on the Bootstrap .btn-* pattern so markup stays uniform.
   Contrast: sky-500 and gold-500 both FAIL with white text on light
   backgrounds (2.14:1 / 1.66:1), so each pairs with dark brand ink —
   blue-900 on sky = 6.45:1, blue-600 on gold = 4.9:1. Same pairing
   already proven in .ec-btn-sky / .ec-btn-gold. */
.btn-sky {
  --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-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-sky-700);
  --bs-btn-focus-shadow-rgb: 56, 189, 248;
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.28);
}
.btn-gold {
  --bs-btn-color: var(--ec-blue-600);
  --bs-btn-bg: var(--ec-gold-500);
  --bs-btn-border-color: var(--ec-gold-500);
  --bs-btn-hover-color: var(--ec-blue-600);
  --bs-btn-hover-bg: var(--ec-gold-600);
  --bs-btn-hover-border-color: var(--ec-gold-600);
  --bs-btn-active-color: var(--ec-blue-900);
  --bs-btn-active-bg: var(--ec-gold-700);
  --bs-btn-focus-shadow-rgb: 251, 192, 45;
  box-shadow: var(--shadow-gold);
}
.btn-ghost {
  --bs-btn-color: var(--fg-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ec-blue-600);
  --bs-btn-hover-bg: var(--ec-blue-050);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ec-blue-600);
  --bs-btn-active-bg: var(--ec-blue-100);
  --bs-btn-focus-shadow-rgb: 13, 71, 161;
}

/* ============================================================
   §3 — Cards  (≡ .adm-card)
   ============================================================ */
.card {
  --bs-card-bg: var(--bg-paper);
  --bs-card-border-color: var(--border-1);
  --bs-card-border-width: 1px;
  --bs-card-border-radius: var(--r-xl);      /* 18px — per guide */
  --bs-card-inner-border-radius: var(--r-lg);
  --bs-card-spacer-y: var(--sp-5);           /* 24px */
  --bs-card-spacer-x: var(--sp-5);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 22px;
  --bs-card-cap-padding-x: var(--sp-5);
  --bs-card-title-color: var(--ec-ink-900);
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px 24px 24px; }
.card-header {
  border-bottom: 0;
  padding-bottom: 0;
}
.card-title {
  font-family: var(--font-arabic);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--ec-ink-900);
  margin-bottom: 0;
}
.card-subtitle,
.card-header .sub {
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 3px;
}

/* ============================================================
   §4 — Tables  (≡ .adm-table)
   ============================================================ */
.table {
  --bs-table-color: var(--fg-1);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ec-ink-100);
  --bs-table-hover-bg: var(--ec-blue-050);
  --bs-table-hover-color: var(--fg-1);
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 0;
}
.table > thead > tr > th {
  text-align: right;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--border-1);
  white-space: nowrap;
  background: transparent;
}
/* Cell padding must be set as a real declaration, NOT via a
   --bs-table-cell-padding-* variable: Bootstrap 5.3 compiles the
   table cell padding from Sass into a literal `padding: .5rem .5rem`
   on `.table > :not(caption) > * > *`, and exposes no custom property
   for it — unlike the btn, card and badge variables used above, which
   are real. Same class of finding as the batch-2 note in the plan. */
.table > tbody > tr > td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--ec-ink-100);
  vertical-align: middle;
}
.table > tbody > tr { transition: background var(--dur-fast); }
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* ============================================================
   §5 — Badges  (≡ .ec-badge)
   Bootstrap's default .badge is a 6px-radius rectangle; the guide
   specifies 30px pills. Text colors for the sky/gold/warning cases
   are already forced dark in bootstrap-theme-overrides.css §2.
   ============================================================ */
.badge {
  --bs-badge-padding-y: 6px;
  --bs-badge-padding-x: 16px;
  --bs-badge-font-size: 13px;
  --bs-badge-font-weight: var(--fw-bold);
  --bs-badge-border-radius: 30px;          /* per guide */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: 1.5;
}

/* ============================================================
   §6 — Form controls  (≡ .adm-field input / label / .err)
   ============================================================ */
.form-label {
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--ec-ink-900);
  margin-bottom: 7px;
}
.form-control,
.form-select {
  font: inherit;
  font-size: 14px;
  color: var(--fg-1);
  border: 1.5px solid var(--border-1);
  border-radius: var(--r-md);              /* 12px */
  padding: 12px 15px;
  background-color: var(--ec-white);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* Focus ring matches .adm-field:focus exactly (sky border + soft sky glow),
   overriding the blue ring set in bootstrap-theme-overrides.css §2 for the
   un-skinned case. */
.form-control:focus,
.form-select:focus {
  border-color: var(--ec-sky-500);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.16);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--ec-ink-050);
  color: var(--fg-3);
}
textarea.form-control { resize: vertical; min-height: 90px; }

/* ‏16px تحت 992px ليست خيارًا جماليًّا: iOS Safari يُكبِّر الصفحة تلقائيًّا عند
   التركيز على أي حقل خطّه أصغر من 16px، فيقفز العرض ويضطرّ المشتري إلى تصغيره
   يدويًّا بين كل حقلين — وهو ما كان يجعل إدخال بيانات الدفع على الجوال متعبًا.
   الحجم على الحاسوب يبقى 14px كما صُمِّم. */
@media (max-width: 991.98px) {
  .form-control,
  .form-select,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select {
    font-size: 16px;
  }
}

/* Native select arrow — same inline SVG token as .adm-field select */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px 16px;
  padding-inline-end: 40px;
}

.form-text { font-size: 12px; color: var(--fg-3); }
.invalid-feedback {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--ec-danger-text);
}

/* ============================================================
   §7 — Alerts  (≡ .adm-form-alert)
   ============================================================ */
.alert {
  --bs-alert-border-radius: var(--r-md);
  --bs-alert-padding-y: 12px;
  --bs-alert-padding-x: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
}
.alert:empty { display: none; }
.alert-danger {
  --bs-alert-color: var(--ec-danger-text);
  --bs-alert-bg: #fdecec;
  --bs-alert-border-color: #f6c4c4;
}
.alert-success {
  --bs-alert-color: var(--ec-success-text);
  --bs-alert-bg: #e7f7f0;
  --bs-alert-border-color: #a8e6cc;
}
.alert-warning {
  --bs-alert-color: var(--ec-gold-900);
  --bs-alert-bg: var(--ec-gold-050);
  --bs-alert-border-color: var(--ec-gold-200);
}
.alert-info,
.alert-primary {
  --bs-alert-color: var(--ec-blue-800);
  --bs-alert-bg: var(--ec-blue-050);
  --bs-alert-border-color: var(--ec-blue-200);
}

/* ---------- Breadcrumb ---------- */
/* The RTL build already flips the divider (float and padding), so only the
   glyph and the colours need setting. U+2039 points leftward, i.e. along the
   direction an RTL trail actually reads. */
.breadcrumb {
  --bs-breadcrumb-divider: "\2039";
  /* fg-3 (ink-600, 4.75:1) rather than a fainter grey — batch 1 demoted
     ink-500 for failing contrast, and a divider that reads is worth more
     than one that recedes. */
  --bs-breadcrumb-divider-color: var(--fg-3);
  --bs-breadcrumb-item-active-color: var(--fg-2);
  --bs-breadcrumb-item-padding-x: 10px;
  --bs-breadcrumb-font-size: 13px;
  --bs-breadcrumb-margin-bottom: 0;
  align-items: center;
  font-weight: var(--fw-semibold);
}
.breadcrumb-item a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.breadcrumb-item a:hover { color: var(--ec-blue-600); }
.breadcrumb-item.active { font-weight: var(--fw-bold); }

/* ---------- Offcanvas backdrop ---------- */
/* Reproduces the brand scrim the hand-rolled drawer used: blue-900 at 40%
   with a light blur, in place of Bootstrap's flat black at 50%. */
.offcanvas-backdrop {
  background-color: var(--ec-blue-900);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.offcanvas-backdrop.show { opacity: 0.4; }

/* ---------- Tooltip ---------- */
/* White on blue-900 measures 13.8:1, comfortably AAA. Opacity is forced to 1
   so that ratio is what actually renders. */
.tooltip {
  --bs-tooltip-bg: var(--ec-blue-900);
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-font-size: 12.5px;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  font-weight: var(--fw-semibold);
}

/* ---------- Pagination ---------- */
/* Active colours already come from bootstrap-theme-overrides.css; only shape,
   spacing and the resting/disabled greys are set here. Resting text is fg-2
   and disabled is fg-3 (ink-600, 4.75:1) — the faint ink-500 that batch 1
   demoted is deliberately not used, disabled or not. */
.pagination {
  --bs-pagination-color: var(--fg-2);
  --bs-pagination-bg: var(--bg-paper);
  --bs-pagination-border-color: var(--border-1);
  --bs-pagination-border-radius: 10px;
  --bs-pagination-font-size: 13.5px;
  --bs-pagination-padding-x: 13px;
  --bs-pagination-padding-y: 8px;
  --bs-pagination-hover-color: var(--ec-blue-600);
  --bs-pagination-hover-bg: var(--ec-blue-050);
  --bs-pagination-hover-border-color: var(--ec-blue-200);
  --bs-pagination-focus-color: var(--ec-blue-600);
  --bs-pagination-focus-bg: var(--ec-blue-050);
  --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-color: var(--fg-3);
  --bs-pagination-disabled-bg: var(--bg-1);
  --bs-pagination-disabled-border-color: var(--border-1);

  gap: 6px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
/* Bootstrap rounds only the first and last item and pulls the rest together
   with a negative margin to collapse shared borders. This design separates the
   items instead, so every one is rounded and the pull is undone.
   Note: no latin font here — the prev/next links are Arabic words. */
.page-link {
  border-radius: var(--bs-pagination-border-radius);
  margin-right: 0;
  margin-left: 0;
  font-weight: var(--fw-semibold);
  transition: all var(--dur-fast);
}
.page-item.active .page-link { box-shadow: 0 4px 12px rgba(13, 71, 161, 0.25); }

/* ---------- Commerce panels (السلة، مراجعة الطلب، تأكيد الطلب) ---------- */

/* ‎.ec-sec-title‎ مصمَّم كسطر تمهيدي فوق ‎h2‎ كبير، ويتقلّص إلى 12px تحت 960px —
   وهو مقاس لا يصلح لعنوان لوح قائم بذاته مثل «ملخّص الطلب». داخل بطاقة نعيده إلى
   مقاس عنوان حقيقي مع إبقاء شخصيته (الأزرق والشريط الذهبي). */
.card .ec-sec-title { font-size: var(--fs-h6); }
.card .ec-sec-title::before { height: 20px; }

/* ‎.text-secondary‎ يُستعمل هنا كنصّ تسمية خافت، لكنّ Bootstrap تربطه بـ
   ‎--bs-secondary-rgb‎ وهو لون العلامة الثانوي (sky-500): نحو 1.9:1 على الأبيض.
   نُبقي ‎--bs-secondary‎ كما هو للأزرار والخلفيات — حيث السماوي مقصود — ونعيد
   النصّ وحده إلى ‎--fg-3‎ المدقَّق (‎#64748b‎، ‎4.76:1‎ على الأبيض). */
.text-secondary { color: var(--fg-3) !important; }