/*
   ─────────────────────────────────────────────────────────────
   ٣ · المكوّنات
   ─────────────────────────────────────────────────────────────
   طبقة تعيد تعريف مكوّنات Bootstrap على رموزنا بدل مزاحمتها
   بأسماء موازية، ثم تضيف ما لا يوفّره الإطار.
*/

/* ══════════════════════════════════════════
   الأزرار
   ══════════════════════════════════════════
   خمسة أنواع لا أكثر، وكلها من قالب واحد:
   نفس الارتفاع ونفس نصف القطر ونفس الوزن ونفس مسافة الأيقونة.
   ما يفرّق بينها أربعة متغيّرات فقط — خلفية وحرف وحدّ وحالة تحويم —
   فلا يوجد في المنصة زرّان يبدوان من عائلتين.

   ‎btn-primary‎   الإجراء الأساسي: تعبئة باللون الأساسي. واحد لكل شاشة.
   ‎btn-secondary‎ إجراء موازٍ: سطح وحدّ.
   ‎btn-ghost‎     إجراء ثانوي: بلا حدّ ولا خلفية حتى التحويم.
   ‎btn-danger‎    فعل هادم.  ‎btn-success‎ تأكيد نهائي.

   الأنواع الدلالية تشتقّ ألوانها من سلالم الحالة نفسها، فتنقلب
   مع السمة بلا قاعدة داكنة موازية. */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-line: transparent;
    --btn-bg-hover: transparent;
    --btn-line-hover: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);

    min-height: var(--control-h);
    padding: 0 var(--s-5);

    font-family: inherit;
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;

    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-line);
    border-radius: var(--r-control);

    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-line-hover);
    color: var(--btn-fg);
    text-decoration: none;
}

/* الزر المعطّل يبهت ولا يتغيّر لونه.
   الصنف مكرّر عمدًا: Bootstrap يطلي ‎.btn-secondary:disabled‎ برماديه الخاص،
   وتكراره يرفع الأولوية بلا ‎!important‎. */
.btn.btn:disabled,
.btn.btn.disabled,
fieldset:disabled .btn.btn {
    opacity: .45;
    pointer-events: none;
    background-color: var(--btn-bg);
    border-color: var(--btn-line);
    color: var(--btn-fg);
    box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--p-500);
    outline-offset: 2px;
}

/* المقاسات */
.btn-sm { min-height: var(--control-h-sm); padding-inline: var(--s-3); font-size: var(--t-sm); }
.btn-lg { min-height: var(--control-h-lg); padding-inline: var(--s-6); font-size: var(--t-md); }
.btn-icon { padding-inline: 0; width: var(--control-h); }
.btn-icon.btn-sm { width: var(--control-h-sm); }

/* ─── التعبئة: الإجراء الأساسي ───
   الحرف على التعبئة هو ‎--n-0‎: أبيض في الفاتح، وأقتم درجة في الداكن
   حيث تصير التعبئة نفسها فاتحة. لا حاجة إلى قاعدة داكنة موازية. */

.btn-primary {
    --btn-bg: var(--p-600);
    --btn-fg: var(--n-0);
    --btn-line: var(--p-600);
    --btn-bg-hover: var(--p-700);
    --btn-line-hover: var(--p-700);
}

/* ─── السطح والحدّ: الإجراء الموازي ─── */

.btn-secondary,
.btn-outline-secondary {
    --btn-bg: var(--surface);
    --btn-fg: var(--p-700);
    --btn-line: var(--p-300);
    --btn-bg-hover: var(--p-50);
    --btn-line-hover: var(--p-400);
}

.btn-outline-primary {
    --btn-bg: var(--surface);
    --btn-fg: var(--p-700);
    --btn-line: var(--p-300);
    --btn-bg-hover: var(--p-50);
    --btn-line-hover: var(--p-400);
}

/* ─── الشفاف: الإجراء الثانوي ─── */

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--p-700);
    --btn-bg-hover: var(--p-50);
}

.btn-link {
    --btn-bg: transparent;
    --btn-fg: var(--accent);
    min-height: auto;
    padding: 0 var(--s-1);
    font-weight: var(--fw-medium);
    border: 0;
}

.btn-link:hover { color: var(--accent-hover); text-decoration: underline; background: none; }

/* ─── الدلالات: تُستعمل حين يكون اللون معلومة لا زينة ─── */

.btn-success {
    --btn-bg: var(--ok-600);
    --btn-fg: var(--n-0);
    --btn-line: var(--ok-600);
    --btn-bg-hover: var(--ok-700);
    --btn-line-hover: var(--ok-700);
}

.btn-outline-success {
    --btn-bg: var(--surface);
    --btn-fg: var(--ok-700);
    --btn-line: var(--ok-500);
    --btn-bg-hover: var(--ok-50);
    --btn-line-hover: var(--ok-600);
}

.btn-warning {
    --btn-bg: var(--warn-600);
    --btn-fg: var(--n-0);
    --btn-line: var(--warn-600);
    --btn-bg-hover: var(--warn-700);
    --btn-line-hover: var(--warn-700);
}

.btn-outline-warning {
    --btn-bg: var(--surface);
    --btn-fg: var(--warn-700);
    --btn-line: var(--warn-500);
    --btn-bg-hover: var(--warn-50);
    --btn-line-hover: var(--warn-600);
}

.btn-danger {
    --btn-bg: var(--err-600);
    --btn-fg: var(--n-0);
    --btn-line: var(--err-600);
    --btn-bg-hover: var(--err-700);
    --btn-line-hover: var(--err-700);
}

.btn-outline-danger {
    --btn-bg: var(--surface);
    --btn-fg: var(--err-600);
    --btn-line: var(--err-100);
    --btn-bg-hover: var(--err-50);
    --btn-line-hover: var(--err-500);
}

/* زر واتساب — لون العلامة مقصود ولا يتبع اللوحة.
   الأخضر يفتح درجتين في الداكن وإلا غاص في السطح. */
.btn-whatsapp {
    --btn-bg: #1f8f56;
    --btn-fg: #fff;
    --btn-line: #1f8f56;
    --btn-bg-hover: #1a7748;
    --btn-line-hover: #1a7748;
}

[data-theme='dark'] .btn-whatsapp {
    --btn-bg: #25a55f;
    --btn-fg: #06130c;
    --btn-line: #25a55f;
    --btn-bg-hover: #2fb96d;
    --btn-line-hover: #2fb96d;
}

.btn-whatsapp .icon { fill: currentColor; stroke: none; width: 1.25em; height: 1.25em; }

/* ─── زر يوتيوب ───
   أحمر العلامة ونصّ أبيض. في الوضع الداكن يُرفع الأحمر درجة: الأحمر
   الصريح على خلفية شبه سوداء يبدو غائرًا ويصعب التقاطه بالعين. */
.btn-youtube {
    --btn-bg: #ff0000;
    --btn-fg: #fff;
    --btn-line: #ff0000;
    --btn-bg-hover: #d90000;
    --btn-line-hover: #d90000;
}

[data-theme='dark'] .btn-youtube {
    --btn-bg: #ff3b30;
    --btn-fg: #fff;
    --btn-line: #ff3b30;
    --btn-bg-hover: #e02d23;
    --btn-line-hover: #e02d23;
}

.btn-youtube .icon { fill: currentColor; stroke: none; width: 1.25em; height: 1.25em; }

/* ─── زر واتساب العائم ───
   ثابت في زاوية الشاشة على كل صفحات الموقع العام، بنفس أخضر العلامة. */
.whatsapp-float {
    position: fixed;
    inset-inline-end: var(--s-5);
    inset-block-end: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-toast);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #1f8f56;
    color: #fff;
    box-shadow: var(--sh-4);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    background: #1a7748;
    color: #fff;
    text-decoration: none;
    transform: scale(1.08);
}

.whatsapp-float:focus-visible { outline: 2px solid #1f8f56; outline-offset: 3px; }

.whatsapp-float .icon { width: 1.9rem; height: 1.9rem; fill: currentColor; stroke: none; }

[data-theme='dark'] .whatsapp-float { background: #25a55f; color: #06130c; }
[data-theme='dark'] .whatsapp-float:hover,
[data-theme='dark'] .whatsapp-float:focus-visible { background: #2fb96d; color: #06130c; }

/* لا يبتلع شريط التثبيت السفلي عند ظهوره معًا على الموبايل */
.install-bar.is-visible ~ .whatsapp-float {
    inset-block-end: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float { transition: none; }
    .whatsapp-float:hover { transform: none; }
}

@media (max-width: 575px) {
    .whatsapp-float {
        width: 3.25rem;
        height: 3.25rem;
        inset-inline-end: var(--s-4);
        inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    }

    .whatsapp-float .icon { width: 1.7rem; height: 1.7rem; }

    .install-bar.is-visible ~ .whatsapp-float {
        inset-block-end: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* مجموعة أزرار متجاورة */
.btn-cluster { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* على سطح الحبر الداكن يصير السطح الأبيض للزر الثانوي بقعة ساطعة:
   يُستبدل بحدّ شفّاف يقرأ على الخلفية الداكنة في الوضعين.

   المُحدِّد مقصود الضيق. القاعدة العامة ‎.course-hero .btn-secondary‎
   كانت ستطال أزرار بطاقة الحجز أيضًا — وهي بطاقة فاتحة داخل ترويسة
   داكنة، فيخرج حرف فاتح على سطح فاتح. ‎.ink‎ للاشتراك الصريح.
   الواجهة الرئيسية (‎.hero‎) صارت تتبع السمة لا الحبر الثابت، فخرجت
   من هذا المحدِّد — زرّها الثانوي عادي كبقية المنصة. */
.ink .btn-secondary,
.ink .btn-outline-secondary {
    --btn-bg: transparent;
    --btn-fg: var(--n-100);
    --btn-line: var(--ink-line-2);
    --btn-bg-hover: var(--ink-fill-2);
    --btn-line-hover: var(--n-400);
}

.ink .btn-ghost {
    --btn-fg: var(--n-200);
    --btn-bg-hover: var(--ink-fill-2);
}

/* ══════════════════════════════════════════
   الحقول والنماذج
   ══════════════════════════════════════════ */

.form-label, .field__label {
    display: block;
    margin-bottom: var(--s-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-2);
    letter-spacing: .005em;
}

.field__label .req, .form-label .req { color: var(--err-500); margin-inline-start: .15em; }

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: var(--s-2) var(--s-3);

    font-family: inherit;
    font-size: var(--t-ui);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--text);

    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    box-shadow: none;

    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    appearance: none;
}

textarea.form-control { min-height: 6rem; line-height: var(--lh-body); resize: vertical; }

.form-control::placeholder { color: var(--text-faint); font-weight: var(--fw-regular); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--n-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--p-500);
    box-shadow: var(--sh-ring);
    outline: none;
    background-color: var(--surface);
    color: var(--text);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-inset);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-control-lg { min-height: var(--control-h-lg); font-size: var(--t-md); }
.form-control-sm, .form-select-sm { min-height: var(--control-h-sm); font-size: var(--t-sm); }

/* سهم القائمة المنسدلة مرسوم لا صورة، وينقلب مع الاتجاه.
   الصورة لا تقبل ‎currentColor‎، فتُعاد كتابتها بدرجة أفتح في الداكن. */
.form-select {
    padding-inline-end: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2375828f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left var(--s-3) center;
    background-size: 1rem;
}

[data-theme='dark'] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d9aa7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

html[dir='ltr'] .form-select { background-position: right var(--s-3) center; }

/* قائمة النظام المنسدلة ترسمها المنصّة لا الورقة: بلا هذين السطرين
   يظهر خيار أسود على أسود في بعض المتصفحات على ويندوز */
.form-select option { background-color: var(--surface); color: var(--text); }

/* علامة الحقل الإلزامي بجانب تسميته */
.required-mark {
    color: var(--err-500);
    margin-inline-start: .2em;
}

/* حالة الخطأ: الحد واللون والخلفية معًا — اللون وحده لا يكفي */
.form-control.is-invalid,
.form-select.is-invalid,
.input-validation-error {
    border-color: var(--err-500);
    background-color: var(--err-50);
}

.form-control.is-invalid:focus,
.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--err-100);
    border-color: var(--err-500);
}

.field-validation-error,
.invalid-feedback,
span.text-danger {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--err-600) !important;
}

.field-validation-error:empty,
span.text-danger:empty { display: none; margin: 0; }

.form-text, .field__hint {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

/* الحقل: وحدة التكوين الأساسية في كل نماذج النظام */
.field { margin-bottom: var(--s-5); }
.field:last-child { margin-bottom: 0; }

/* شبكة الحقول.
   المسافة من gap الشبكة لا من هوامش الحقول، وإلا انعدمت المسافة الرأسية
   عند آخر حقل في الصف. والمُعدِّلات مؤهَّلة بالشبكة لتفوق قاعدة العرض الكامل. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-5);
}

.field-grid:last-child { margin-bottom: 0; }
.field-grid > .field { grid-column: span 12; margin-bottom: 0; }

.field-grid > .field--half { grid-column: span 6; }
.field-grid > .field--third { grid-column: span 4; }
.field-grid > .field--two-thirds { grid-column: span 8; }
.field-grid > .field--quarter { grid-column: span 3; }

.field--narrow { max-width: 16rem; }

/* شبكة خانات اختيار متعددة — فئات الكورس مثلًا */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--s-2) var(--s-4);
}

@media (max-width: 767px) {
    .field-grid > .field,
    .field-grid > .field--half,
    .field-grid > .field--third,
    .field-grid > .field--two-thirds,
    .field-grid > .field--quarter { grid-column: span 12; }
}

/* مجموعة إدخال ملتصقة بزر أو لصيقة نصية */
.input-group { display: flex; align-items: stretch; width: 100%; }

.input-group > .form-control,
.input-group > .form-select { flex: 1 1 auto; width: 1%; }

.input-group > :not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: -1px;
}

.input-group > :not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-group > .form-control:focus,
.input-group > .btn:focus-visible { z-index: 2; position: relative; }

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 var(--s-3);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    background: var(--surface-inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

/* حقل كلمة المرور: زر إظهار/إخفاء داخل الحقل نفسه */
.password-field { position: relative; }

.password-field > .form-control { padding-inline-end: 2.5rem; }

.password-field__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}

.password-field__toggle:hover { color: var(--text); }

.password-field__toggle:focus-visible {
    outline: 2px solid var(--p-500);
    outline-offset: -2px;
    border-radius: var(--r-xs);
}

/* خانات الاختيار والاختيار الواحد */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: 0;
    margin-bottom: var(--s-3);
    min-height: auto;
}

.form-check-input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: .3rem 0 0;
    background-color: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-xs);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    float: none;
}

.form-check-input[type='radio'] { border-radius: 50%; }

.form-check-input:hover { border-color: var(--p-400); }

.form-check-input:checked {
    background-color: var(--p-600);
    border-color: var(--p-600);
    background-repeat: no-repeat;
    background-position: center;
    background-size: .75rem;
}

.form-check-input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
}

.form-check-input[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='white'/%3E%3C/svg%3E");
    background-size: 1rem;
}

/* في الداكن تصير التعبئة فاتحة، فتختفي العلامة البيضاء فوقها.
   العلامة تُقلب إلى أقتم درجة — نفس منطق حرف الزر الأساسي. */
[data-theme='dark'] .form-check-input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f141a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
}

[data-theme='dark'] .form-check-input[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%230f141a'/%3E%3C/svg%3E");
}

.form-check-input:focus-visible { outline: 2px solid var(--p-500); outline-offset: 2px; }

.form-check-label {
    font-size: var(--t-ui);
    font-weight: var(--fw-regular);
    color: var(--text-2);
    line-height: var(--lh-snug);
    cursor: pointer;
    margin: 0;
}

/* خيار قابل للنقر بكامل مساحته */
.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin-bottom: var(--s-2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.choice:hover { border-color: var(--p-300); background: var(--p-50); }
.choice:has(.form-check-input:checked) { border-color: var(--p-500); background: var(--p-50); }
.choice .form-check-label { flex: 1; }

/* مفتاح تبديل: لخيار يغيّر سلوك النظام */
.switch-field {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin-bottom: var(--s-3);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.switch-field:hover { border-color: var(--line-strong); }
.switch-field:has(.form-check-input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

.switch-field__body { flex: 1; min-width: 0; }

.switch-field__title {
    display: block;
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 var(--s-1);
    cursor: pointer;
}

.switch-field__hint {
    display: block;
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin: 0;
}

.switch-field .form-check-input {
    order: 2;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: var(--r-pill);
    margin-top: .1rem;
    background-color: var(--n-200);
    border-color: var(--n-300);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='white'/%3E%3C/svg%3E");
    background-position: right .15rem center;
    background-size: 1.1rem;
    background-repeat: no-repeat;
    transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
}

html[dir='rtl'] .switch-field .form-check-input { background-position: left .15rem center; }

/* المقبض يبقى دائرة عند التفعيل: بلا إعادة تعيين الصورة هنا
   تسرّب علامة الصح من قاعدة خانة الاختيار العامة إلى المفتاح. */
.switch-field .form-check-input:checked {
    background-color: var(--p-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='white'/%3E%3C/svg%3E");
    background-position: left .15rem center;
    background-size: 1.1rem;
}

html[dir='rtl'] .switch-field .form-check-input:checked { background-position: right .15rem center; }

/* المقبض في الداكن: أبيض على مسار رمادي، وأقتم درجة على مسار مفعَّل فاتح */
[data-theme='dark'] .switch-field .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230f141a'/%3E%3C/svg%3E");
}

/* قسم داخل نموذج طويل */
.form-section { margin-bottom: var(--s-7); }
.form-section:last-child { margin-bottom: 0; }

.form-section__head {
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.form-section__title {
    font-size: var(--t-lg);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-1);
    color: var(--text);
}

.form-section__hint { font-size: var(--t-sm); color: var(--text-muted); margin: 0; line-height: var(--lh-snug); }

/* شريط إجراءات النموذج */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-top: var(--s-5);
    margin-top: var(--s-6);
    border-top: 1px solid var(--line);
}

.form-actions__note {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin-inline-start: auto;
}

/* ══════════════════════════════════════════
   البطاقات واللوحات
   ══════════════════════════════════════════ */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
}

.panel--flush { padding: 0; overflow: hidden; }
.panel--raised { box-shadow: var(--sh-2); }
.panel--quiet { box-shadow: none; background: var(--surface-sunken); }

.panel__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}

.panel__title {
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    margin: 0;
    color: var(--text);
}

.panel__hint { font-size: var(--t-sm); color: var(--text-muted); margin: var(--s-1) 0 0; }
.panel__actions { margin-inline-start: auto; display: flex; gap: var(--s-2); align-items: center; }
.panel__body { padding: var(--s-5); }
.panel__body--tight { padding: var(--s-4); }

.panel__foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--line);
    background: var(--surface-sunken);
    border-radius: 0 0 var(--r) var(--r);
}

.panel--danger { border-color: var(--err-100); }
.panel--danger .panel__title { color: var(--err-600); }

/* ══════════════════════════════════════════
   الشارات والوسوم
   ══════════════════════════════════════════ */

.badge, .pill {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25em .7em;
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--text-2);
    border: 1px solid transparent;
    white-space: nowrap;
}

.pill--ok     { background: var(--ok-50);   color: var(--ok-700);   border-color: var(--ok-100); }
.pill--warn   { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-100); }
.pill--err    { background: var(--err-50);  color: var(--err-600);  border-color: var(--err-100); }
.pill--info   { background: var(--info-50); color: var(--info-700); border-color: var(--info-100); }
.pill--accent { background: var(--p-50);    color: var(--p-700);    border-color: var(--p-200); }
.pill--muted  { background: var(--n-100);   color: var(--n-600);    border-color: var(--n-200); }
.pill--brass  { background: var(--a-50);    color: var(--a-700);    border-color: var(--a-100); }

/* مساعدات Bootstrap اللونية مُعلَّمة important، فتُقابَل بالمثل
   حتى لا تعود ألوانه الصارخة من خلف اللوحة الهادئة */
.badge.bg-success   { background-color: var(--ok-50) !important;   color: var(--ok-700) !important;   border-color: var(--ok-100); }
.badge.bg-warning   { background-color: var(--warn-50) !important; color: var(--warn-700) !important; border-color: var(--warn-100); }
.badge.bg-danger    { background-color: var(--err-50) !important;  color: var(--err-600) !important;  border-color: var(--err-100); }
.badge.bg-info      { background-color: var(--info-50) !important; color: var(--info-700) !important; border-color: var(--info-100); }
.badge.bg-primary   { background-color: var(--p-50) !important;    color: var(--p-700) !important;    border-color: var(--p-200); }
.badge.bg-secondary { background-color: var(--n-100) !important;   color: var(--n-600) !important;    border-color: var(--n-200); }
.badge.text-dark    { color: var(--warn-700) !important; }

.pill--dot::before {
    content: '';
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: .3em .75em;
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--text-2);
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ══════════════════════════════════════════
   التنبيهات
   ══════════════════════════════════════════ */

.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--n-400);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--t-ui);
    line-height: var(--lh-snug);
}

.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert__body { flex: 1; min-width: 0; }
.alert .icon { margin-top: .15em; flex: none; }

.alert-success { background: var(--ok-50);   border-color: var(--ok-100);   border-inline-start-color: var(--ok-500);   color: var(--ok-700); }
.alert-warning { background: var(--warn-50); border-color: var(--warn-100); border-inline-start-color: var(--warn-500); color: var(--warn-700); }
.alert-danger  { background: var(--err-50);  border-color: var(--err-100);  border-inline-start-color: var(--err-500);  color: var(--err-700); }
.alert-info    { background: var(--info-50); border-color: var(--info-100); border-inline-start-color: var(--info-500); color: var(--info-700); }
.alert-secondary { background: var(--surface-inset); border-inline-start-color: var(--n-400); }

.alert-link { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }

.alert-dismissible { padding-inline-end: var(--s-8); }

.btn-close {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / .8rem no-repeat;
    opacity: .5;
    cursor: pointer;
    color: inherit;
}

.btn-close:hover { opacity: 1; background-color: var(--overlay-soft); }

/* ملخّص التحقق: قائمة أخطاء النموذج */
.validation-summary-errors ul { margin: 0; padding-inline-start: 1.15rem; }
.validation-summary-errors li { margin-bottom: var(--s-1); }
.validation-summary-valid { display: none; }

/* ══════════════════════════════════════════
   الجداول
   ══════════════════════════════════════════ */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-2);
    font-size: var(--t-ui);
    vertical-align: middle;
}

.table > thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    color: var(--text-muted);
    text-align: start;
    text-transform: uppercase;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table > tbody td {
    padding: var(--s-4);
    /* Bootstrap يطلي كل خلية بلون خاص بها، فيلزم تفريغه ليظهر لون الصف */
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.table > tbody tr:last-child td { border-bottom: 0; }

.table > tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table > tbody tr:hover > td { background-color: var(--surface-sunken); }

.table__primary {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.table__secondary {
    display: block;
    font-size: var(--t-sm);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    margin-top: .1rem;
}

.table__actions { text-align: end; white-space: nowrap; }
.table__num { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════
   فتات الطريق والتنقّل بين الصفحات
   ══════════════════════════════════════════ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--text-muted);
    background: none;
}

.breadcrumb-item { display: flex; align-items: center; margin: 0; }
.breadcrumb-item a { color: var(--text-muted); font-weight: var(--fw-medium); }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active { color: var(--text-2); font-weight: var(--fw-medium); }

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--text-faint);
    padding-inline: var(--s-2);
}

html[dir='rtl'] .breadcrumb-item + .breadcrumb-item::before { content: '\\'; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-1);
    list-style: none;
    padding: 0;
    margin: var(--s-7) 0 0;
}

.page-item { margin: 0; }

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding-inline: var(--s-3);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: all var(--dur) var(--ease);
}

.page-link:hover { border-color: var(--p-300); color: var(--accent); background: var(--p-50); text-decoration: none; }

.page-item.active .page-link {
    background: var(--p-600);
    border-color: var(--p-600);
    color: var(--n-0);
}

.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* ══════════════════════════════════════════
   شريط التقدّم
   ══════════════════════════════════════════ */

.progress {
    height: .4rem;
    background: var(--n-100);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--p-500);
    border-radius: var(--r-pill);
    transition: width var(--dur-slow) var(--ease);
}

.progress--lg { height: .6rem; }
.progress--complete .progress-bar { background: var(--ok-500); }

.meter {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.meter .progress { flex: 1; }
.meter__value { font-weight: var(--fw-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════
   بديل صورة الغلاف (_CoverImage)
   ══════════════════════════════════════════
   صورة مش موجودة أو مكسورة = الاسم نفسه على اللون الأساسي. نفس لوني زر
   btn-primary فيتبع الوضع الداكن من غير قاعدة موازية. حجم الخط بيتظبط
   على عرض الكارت نفسه (container query): كارت كورس عريض وصف درس ضيق
   ياخدوا نفس المكوّن من غير مقاسات يدوية لكل واحد. */

.cover-fallback {
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--s-4) var(--s-5);
    background: var(--p-600);
    color: var(--n-0);
    text-align: center;
}

.cover-fallback[hidden] { display: none; }

.cover-fallback__title {
    font-size: var(--t-lg);
    font-size: clamp(var(--t-sm), 7.5cqi, var(--t-2xl));
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════
   الحالة الفارغة
   ══════════════════════════════════════════ */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-9) var(--s-5);
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
}

.empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--s-4);
    border-radius: 50%;
    background: var(--surface-inset);
    color: var(--text-faint);
}

.empty__title {
    font-size: var(--t-lg);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 var(--s-2);
}

.empty__text { color: var(--text-muted); max-width: 46ch; margin: 0 0 var(--s-5); }
.empty__text:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════
   الصورة الرمزية والوسوم الصغيرة
   ══════════════════════════════════════════ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--p-100);
    color: var(--p-700);
    font-weight: var(--fw-semibold);
    font-size: var(--t-sm);
    flex: none;
    overflow: hidden;
}

.avatar--lg { width: 3rem; height: 3rem; font-size: var(--t-md); }
.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--t-xs); }

/* ══════════════════════════════════════════
   الأكورديون
   ══════════════════════════════════════════ */

.accordion { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.accordion-item { border: 0; border-bottom: 1px solid var(--line); background: none; }
.accordion-item:last-child { border-bottom: 0; }
.accordion-header { margin: 0; }

.accordion-button {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-4) var(--s-5);
    font-family: inherit;
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    color: var(--text);
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

.accordion-button:hover { background: var(--surface-sunken); }
.accordion-button:not(.collapsed) { background: var(--surface-sunken); color: var(--text); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border: 0; }
.accordion-button:focus-visible { outline: 2px solid var(--p-500); outline-offset: -2px; }

.accordion-button::after {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-inline-start: var(--s-3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2375828f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-size: 1rem;
    transition: transform var(--dur) var(--ease);
}

.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion-body { padding: 0; }

/* ══════════════════════════════════════════
   إشعار عائم
   ══════════════════════════════════════════ */

.toast-stack {
    position: fixed;
    inset-block-end: var(--s-5);
    inset-inline-end: var(--s-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: min(24rem, calc(100vw - var(--s-8)));
}

/* ══════════════════════════════════════════
   كتلة كود
   ══════════════════════════════════════════ */

.code-block {
    background: var(--d-950);
    color: var(--d-text);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    line-height: 1.7;
}

.code-block code { background: none; border: 0; padding: 0; color: inherit; }