/* ==========================================================================
   AcademyOS — نظام واجهة المركز
   ملف واحد مشترك تقرؤه كل تخطيطات المستأجر (الإدارة، المدرّب، المتدرّب،
   الواجهة العامة، وشاشات الدخول القائمة بذاتها).

   المبادئ:
   1) العربية أصل لا انعكاس: خصائص منطقية (inline-start/end)، ارتفاع سطر أعلى،
      وتباعد حروف صفر دائماً — أي letter-spacing على نص عربي يفكّ الاتصال.
   2) لا لون ثابت: كل شيء رمز من ThemeRenderer (config/themes.php)، فيتبدّل
      الفاتح/الداكن وشخصية الثيم دون لمس أي صفحة.
   3) لا CDN: الخطوط ملفات woff2 محلّية في /fonts بترخيص OFL.
   4) الحركة تخدم الفهم: 120–280ms للتفاعلات، وكشف عند التمرير للدخول،
      وكلّها تتوقّف تماماً مع prefers-reduced-motion.
   ========================================================================== */


/* ==========================================================================
   1) الخطوط — مستضافة ذاتياً
   المجموعات الفرعية مفصولة بـunicode-range: المتصفّح لا ينزّل اللاتيني إلا
   إن ظهر محرف لاتيني فعلاً، ولا ينزّل خطوط ثيم غير مُفعّل إطلاقاً.
   ========================================================================== */

/* ---- IBM Plex Sans Arabic (OFL) — ثيم framer ---- */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/plex-arabic-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/plex-arabic-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/plex-arabic-500-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/plex-arabic-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/plex-arabic-600-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/plex-arabic-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/plex-arabic-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/plex-arabic-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Noto Sans Arabic (OFL) — ثيم minimal — ملف متغيّر يغطّي 100–900 ---- */
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/noto-arabic-var-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/noto-arabic-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tajawal (OFL) — نص ثيم elegant ---- */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/tajawal-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/tajawal-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/tajawal-500-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/tajawal-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/tajawal-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/tajawal-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Amiri (OFL) — عناوين ثيم elegant فقط ---- */
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/amiri-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/amiri-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/amiri-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/amiri-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2) رموز مشتركة لا تخصّ ثيماً بعينه
   الألوان الدلالية (نجاح/تحذير/خطر) تُبنى بمزج مع لون اللوح، فتتبع الوضع
   الفاتح والداكن تلقائياً بدل ألوان باستيل ثابتة تنفجر في الداكن.
   ========================================================================== */

:root {
    /* المقياس الطباعي — العربية تحتاج جسماً أكبر وسطراً أعلى من اللاتينية */
    --fs-xs: .75rem;      /* 12px — وسوم وحواشٍ */
    --fs-sm: .8125rem;    /* 13px — تسميات وأزرار */
    --fs-md: .875rem;     /* 14px — جداول */
    --fs-base: .9375rem;  /* 15px — نص الواجهة */
    --fs-lg: 1.0625rem;   /* 17px — عناوين ألواح */
    --fs-xl: 1.375rem;    /* 22px — عناوين أقسام */
    --fs-2xl: 1.75rem;    /* 28px */

    --lh-tight: 1.45;     /* عناوين */
    --lh-snug: 1.7;       /* أسطر قصيرة */
    --lh-body: 1.9;       /* نص متّصل بالعربية */

    /* سُلَّم التباعد — مضاعفات 4 لا أرقام متفرقة */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ألوان دلالية (الوضع الفاتح).
       غامقة عمداً: اللون نفسه يخدم النص والحدّ والخلفية الممزوجة، فلو أخذناه
       بدرجة متوسطة هبط تباين النص على خلفيته إلى ~4.2 (قِيس، لا يُقدَّر). */
    --ok: #166534;
    --warn: #92400e;
    --danger: #b91c1c;
    --info: #075985;

    /* لون العلامة حين يكون نصّاً أو حلقة تركيز فوق سطح.
       لا نستعمل --brand-primary مباشرةً للنص: مراكز كثيرة تختار لوناً غامقاً
       (بنفسجي، كحلي، عنّابي) يقرأ ممتازاً على أبيض ويسقط إلى 2:1 على سطح
       داكن. هنا يُفتَح اللون في الوضع الداكن ويبقى كما هو في الفاتح. */
    --brand-ink: var(--brand-primary);

    --ring: 2px;          /* سماكة حلقة التركيز */
}

/* الوضع الداكن المفروض من مدير المركز */
[data-mode="dark"] {
    --ok: #4ade80;
    --warn: #fbbf24;
    --danger: #fca5a5;
    --info: #7dd3fc;
    --brand-ink: color-mix(in srgb, var(--brand-primary) 42%, #ffffff);
}

/* الوضع التلقائي: يتبع تفضيل الجهاز — يطابق منطق ThemeRenderer تماماً */
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] {
        --ok: #4ade80;
        --warn: #fbbf24;
        --danger: #fca5a5;
        --info: #7dd3fc;
        --brand-ink: color-mix(in srgb, var(--brand-primary) 42%, #ffffff);
    }
}


/* ==========================================================================
   3) الأساس
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    /* صفر دائماً: أي تباعد حروف على نص عربي يفكّ اتصال الحروف بصرياً */
    letter-spacing: 0;
    background: var(--surface);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    line-height: var(--lh-tight);
    letter-spacing: 0;
    color: var(--heading);
}
/* سُلَّم صريح: بدونه يرث كل عنوان حجماً من المتصفّح يتغيّر بعمق التداخل،
   فيخرج h3 أكبر من h1 داخل <section> — وهذا بعينه الإحساس «غير المتين». */
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }
h5, h6 { font-size: var(--fs-sm); }

a { color: inherit; }

img, svg, video { max-width: 100%; height: auto; }

/* الأرقام والمعرّفات اللاتينية داخل نص عربي: عزل ثنائي الاتجاه إلزامي،
   وإلا انقلب ترتيب المقاطع (تواريخ، مبالغ، بريد، روابط، أرقام هواتف). */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}
.num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

::selection { background: var(--brand-primary); color: #fff; }

/* تركيز مرئي موحّد لكل ما يُركَّز عليه بلوحة المفاتيح */
:focus-visible {
    outline: var(--ring) solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}


/* ==========================================================================
   4) الهيكل: الشريط العلوي والغلاف والتذييل
   ========================================================================== */

.wrap {
    max-width: 1040px;
    margin: var(--sp-5) auto;
    padding: 0 var(--sp-4) var(--sp-7);
    width: 100%;
}
.wrap.narrow { max-width: 760px; }

/* الشريط العلوي — صفّ واحد (المدرّب/المتدرّب) */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    padding: var(--sp-3) var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: inherit;
    line-height: var(--lh-snug);
}
.topbar h1 .sep { opacity: .5; margin: 0 6px; }
.topbar h1 .page { font-weight: 400; opacity: .9; }

.topbar .nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* أزرار الشريط: نفس شكل الأزرار العادية لكن على خلفية ملوّنة */
.topbar .nav a,
.topbar .nav button,
.topbar .helplink,
.topbar .logout {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .14);
    color: var(--topbar-text);
    border: var(--border-w) solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.topbar .nav a:hover,
.topbar .nav button:hover,
.topbar .helplink:hover,
.topbar .logout:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .22); }
.topbar .nav a.active,
.topbar .helplink.active { background: rgba(255, 255, 255, .3); font-weight: 600; }
.topbar .logout { background: rgba(0, 0, 0, .18); }
.topbar .logout:hover { background: rgba(0, 0, 0, .3); }

/* أيقونات الشريط: مرافقة للنصّ لا بديلة عنه — كل زرّ يبقى معنوناً بلفظه. */
.topbar .nav a,
.topbar .nav button,
.topbar .helplink,
.topbar .logout { gap: 7px; }
.topbar .nav svg,
.topbar .helplink svg { width: 16px; height: 16px; flex: none; }
/* الاتجاهية وحدها تنعكس: سهم الخروج نعم، البيت والكتاب لا. */
[dir="rtl"] .topbar .nav .icon-dir { transform: scaleX(-1); }

/* حالة «امتحان جارٍ»: تحلّ محلّ وجهتي التنقّل في شاشة المحاولة، فتقول
   للمتدرّب لماذا اختفتا بدل أن يظنّ الشريط معطوباً. */
.topbar .nav .pill.live-exam {
    gap: 6px;
    min-height: 38px;
    color: var(--topbar-text);
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .18);
    font-size: var(--fs-sm);
}

/* [م1-ب] حُذفت هنا قواعد `.topbar.stacked` و`.navrail`: سكّة تبويبات
   لوحة الإدارة حلّت محلّها القشرة الجانبية (القسم 13)، ولم يبقَ قالب
   واحد يستعمل أصنافها — وقاعدة CSS بلا مُصيَّر يستعملها أصلٌ ميّت.
   وتخطيطا المدرّب والمتدرّب على `.topbar` غير المكدَّس فلم يُمسّا. */

@media (pointer: coarse) {
    /* أزرار لوحتَي المدرّب والمتدرّب كانت 38px على اللمس — ومنها «تسجيل
       الخروج». هي القاعدة نفسها المعمول بها في ترويسة الواجهة العامة.
       (وقشرة الإدارة تفرض 44px في قواعدها هي، القسم 13.) */
    .topbar .nav a,
    .topbar .nav button,
    .topbar .helplink,
    .topbar .logout { min-height: 44px; }
}



/* ==========================================================================
   5) الألواح والبطاقات
   ========================================================================== */

.panel {
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}
.panel h2 {
    font-size: var(--fs-lg);
    color: var(--brand-ink);
    margin-bottom: var(--sp-1);
}
.panel .hint {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}
.panel .empty,
.empty {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: var(--sp-3) 0;
}


/* ==========================================================================
   6) الأزرار — لغة شكلية واحدة، وحالات حقيقية لا مجرّد تبدّل ظل
   ========================================================================== */

.btn {
    --btn-bg: var(--brand-primary);
    --btn-fg: #ffffff;
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;              /* هدف لمس مريح */
    padding: 0 20px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: var(--border-w) solid var(--btn-bd);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-shadow, none);
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}
.btn:hover {
    background: var(--btn-bg);                                /* احتياط لمتصفّح بلا color-mix */
    background: color-mix(in srgb, var(--btn-bg) 86%, #000);
    transform: translateY(var(--lift));
    box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
}
.btn:active { transform: translateY(0); box-shadow: var(--btn-shadow, none); }
.btn:focus-visible { outline: var(--ring) solid var(--brand-ink); outline-offset: 3px; }

.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--panel-border);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.small {
    min-height: 36px;
    padding: 0 14px;
    font-size: var(--fs-xs);
    border-radius: var(--radius-xs);
}
/* على شاشة لمس يعود الهدف إلى 44px — القياس لا الحدس */
@media (pointer: coarse) {
    .btn.small { min-height: 44px; padding: 0 16px; }
}

.btn.block { width: 100%; }

/* ثانوي: يحمل حدّاً حقيقياً بدل أن يكون مساحة رمادية بلا تعريف */
.btn.ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--input-border);
}
.btn.ghost:hover {
    background: var(--surface-2);
    border-color: var(--brand-ink);
    color: var(--brand-ink);
}

.btn.danger {
    --btn-bg: transparent;
    --btn-fg: var(--danger);
    --btn-bd: color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn.danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    border-color: var(--danger);
    color: var(--danger);
}

.row-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }


/* ==========================================================================
   7) الحقول
   ========================================================================== */

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin: var(--sp-3) 0 6px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=tel], input[type=search], input[type=date],
input[type=datetime-local], input[type=time], input[type=file],
select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--input-bg);
    color: var(--text);
    border: var(--border-w) solid var(--input-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    /* 16px تماماً: أي أقل يُفعّل تكبير iOS التلقائي عند التركيز */
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { min-height: 120px; line-height: var(--lh-body); resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand-ink) 45%, var(--input-border));
}
input:focus, select:focus, textarea:focus {
    outline: var(--ring) solid var(--brand-ink);
    outline-offset: 1px;
    border-color: var(--brand-ink);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}
::placeholder { color: var(--text-muted); opacity: .75; }

.checkline {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
    font-size: var(--fs-base);
    color: var(--text);
}
.checkline input { width: auto; min-height: 0; }
.checkline label { margin: 0; font-weight: 400; }

input[type=checkbox], input[type=radio] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}


/* ==========================================================================
   8) الجداول — دائماً داخل حاوية أفقية قابلة للتمرير
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--sp-2) * -1);
    padding-inline: var(--sp-2);
}

/* شبكة أمان: أي لوح يحوي جدولاً يصبح حاوية تمرير أفقي من نفسه، حتى الشاشات
   التي لا نملكها ولم تُلفّ جداولها يدوياً. التجاوز الأفقي أكثر أعطال الجوال. */
.panel:has(table) { overflow-x: auto; }

/* على الجوال: أرضية عرض للجدول ليتمرّر أفقياً بدل أن تُسحق أعمدته فيلتفّ كل
   اسم على ثلاثة أسطر. التمرير مقروء، والانسحاق ليس كذلك. */
@media (max-width: 640px) {
    .panel:has(table) table,
    .table-scroll table { min-width: 560px; }
}

table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td {
    text-align: start;
    padding: 12px 10px;
    border-bottom: var(--border-w) solid var(--panel-border);
    vertical-align: middle;
}
th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    white-space: nowrap;
}
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td .ltr { display: inline-block; }


/* ==========================================================================
   9) الحالات: وسوم، تنبيهات، ملاحظات
   ========================================================================== */

/* .badge اسم بديل لـ.pill: شاشات الفوترة تستعمله ولم يكن معرَّفاً في منطقة
   المركز إطلاقاً، فكانت حالة الفاتورة تظهر نصّاً عارياً بلا وسم. */
.pill, .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    border: var(--border-w) solid transparent;
}
.pill.ok, .badge.ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
/* wait = بانتظار إجراء (فاتورة غير مدفوعة) — نفس لغة التحذير */
.pill.warn, .badge.warn,
.pill.wait, .badge.wait, .badge.pending {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.pill.expired, .badge.expired,
.pill.danger, .badge.danger, .badge.fail {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.pill.off, .badge.off {
    color: var(--text-muted);
    background: var(--surface-2);
    border-color: var(--panel-border);
}

/* لافتة استئناف: حالة قائمة تنتظر المستخدم (محاولة امتحان مفتوحة ووقتها
   يُعدّ). لغة التحذير لا الخطأ: شيءٌ يفوته إن تجاهله، لا شيءٌ أخطأ فيه. */
.resume-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background: color-mix(in srgb, var(--warn) 12%, var(--panel));
    border: var(--border-w) solid color-mix(in srgb, var(--warn) 34%, transparent);
    border-inline-start-width: 3px;
    border-radius: var(--radius);
}
.resume-banner > svg { width: 22px; height: 22px; flex: none; color: var(--warn); margin-top: 1px; }
.resume-banner strong { display: block; font-size: var(--fs-base); color: var(--text); }
/* نصّ اللافتة بلون النصّ الأساسي لا الثانوي: على الخلفية الممزوجة بالتحذير
   قاس الثانويُّ 4.48:1 على ثيم minimal الفاتح — تحت العتبة بقليل، وهو بالضبط
   الصنف الذي يمرّ بلا قياس. الأساسيّ يقيس 8.59:1 على الخلفية نفسها. */
.resume-banner p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug); }
.resume-banner__clock strong { display: inline; color: var(--warn); font-weight: 700; }

/* التنبيهات: حدّ جانبي يحمل المعنى + خلفية ممزوجة تتبع الوضع */
.flash-ok, .flash-err, .note, .err {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: var(--border-w) solid transparent;
    border-inline-start-width: 3px;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}
.flash-ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--ok) 28%, transparent);
    border-inline-start-color: var(--ok);
}
.flash-err, .err {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    border-inline-start-color: var(--danger);
}
.note {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--warn) 28%, transparent);
    border-inline-start-color: var(--warn);
}
.flash-err div, .err div { margin-bottom: 2px; }

.progress-track {
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    height: 9px;
    overflow: hidden;
}
.progress-fill {
    background: var(--brand-primary);
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--dur) var(--ease);
}


/* ==========================================================================
   10) شخصية كل ثيم — الفرق يجب أن يُقرأ فوراً
   ========================================================================== */

/* framer: ارتفاع محسوس وظلّ يتبع الحركة */
[data-theme="framer"] .panel { box-shadow: var(--shadow); }
[data-theme="framer"] .btn {
    --btn-shadow: 0 1px 2px rgba(2, 6, 23, .12);
    --btn-shadow-hover: 0 6px 18px color-mix(in srgb, var(--brand-primary) 38%, transparent);
}
[data-theme="framer"] .topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-sm); }

/* minimal: بلا ارتفاع ولا ظلّ — الحدود وحدها تفصل، والتفاعل تغيّر لون فقط */
[data-theme="minimal"] .panel { box-shadow: none; }
[data-theme="minimal"] .btn { --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="minimal"] .btn:hover { transform: none; }
[data-theme="minimal"] .topbar { box-shadow: none; border-bottom: var(--border-w) solid rgba(0, 0, 0, .12); }

/* elegant: ظلّ دافئ خفيف وعناوين نسخية */
[data-theme="elegant"] .panel { box-shadow: var(--shadow-sm); }
[data-theme="elegant"] .btn {
    --btn-shadow: none;
    --btn-shadow-hover: 0 4px 14px color-mix(in srgb, var(--brand-secondary) 30%, transparent);
}
/* Amiri أقصر جسماً من Tajawal. القياس مضبوط في الخط نفسه (size-adjust في
   @font-face) لا بتكبير كل عنوان — وإلا انهار سُلَّم الأحجام. يبقى هنا سطر
   أوسع فقط، لأن النسخ يمتدّ فوق خط الأساس وتحته أكثر من خط هندسي. */
[data-theme="elegant"] h1,
[data-theme="elegant"] h2,
[data-theme="elegant"] h3 { line-height: 1.6; }


/* ==========================================================================
   11) الحركة — كشف عند التمرير، ودخول أوّلي
   الإخفاء مشروط بصنف .js-reveal يضيفه السكربت: لو تعطّل الجافاسكربت يبقى
   المحتوى ظاهراً بدل أن يختفي إلى الأبد. والمساحة محجوزة دائماً (لا CLS):
   نحرّك opacity وtransform فقط، ولا نغيّر أي بُعد تخطيطي.
   ========================================================================== */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

.enter {
    opacity: 0;
    transform: translateY(14px);
    animation: enterIn var(--dur-slow) var(--ease) forwards;
}
.enter.d1 { animation-delay: 70ms; }
.enter.d2 { animation-delay: 150ms; }
.enter.d3 { animation-delay: 240ms; }

@keyframes enterIn { to { opacity: 1; transform: none; } }


/* ==========================================================================
   12) احترام تقليل الحركة — تعطيل كامل لا إبطاء
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .enter { opacity: 1 !important; transform: none !important; }
    .btn:hover, .btn:active { transform: none !important; }
}


/* ==========================================================================
   13) القياسات الصغيرة — 320 / 375
   ========================================================================== */

@media (max-width: 480px) {
    :root { --fs-2xl: 1.5rem; --fs-xl: 1.2rem; }
    .wrap { margin-top: var(--sp-3); padding: 0 var(--sp-3) var(--sp-6); }
    .topbar { padding: var(--sp-3); }
    .panel { padding: var(--sp-4); border-radius: var(--radius); }
    /* لا نفرض عرضاً كاملاً على كل زر — شاشات لا نملكها (الامتحانات) تعتمد
       أزراراً متجاورة. من يريد زراً ممتدّاً يطلبه صراحةً بـ.btn.block. */
}


/* ==========================================================================
   14) محتوى الدرس المنسّق (نص غنيّ يُحرِّره المدرّب)
   ========================================================================== */

.lesson-content { color: var(--text); line-height: var(--lh-body); }
.lesson-content h2 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-2); }
.lesson-content h3 { font-size: var(--fs-lg); margin: var(--sp-3) 0 var(--sp-2); }
.lesson-content h4 { font-size: var(--fs-base); margin: var(--sp-3) 0 6px; }
.lesson-content p { margin: 0 0 var(--sp-3); }
.lesson-content ul, .lesson-content ol { margin: 0 24px var(--sp-3); }
.lesson-content li { margin-bottom: var(--sp-1); }
.lesson-content blockquote {
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-4);
    border-inline-start: 3px solid var(--brand-ink);
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: var(--radius-xs);
}
.lesson-content img { border-radius: var(--radius-sm); margin: var(--sp-2) 0; }
.lesson-content a { color: var(--brand-ink); }
.lesson-content pre {
    background: var(--surface-2);
    color: var(--text);
    border: var(--border-w) solid var(--panel-border);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.lesson-content table { margin: var(--sp-2) 0; }
.lesson-content th, .lesson-content td {
    border: var(--border-w) solid var(--panel-border);
    padding: 6px 10px;
}


/* ==========================================================================
   15) الشاشات القائمة بذاتها
   الدخول، التسجيل، استعادة كلمة المرور، قبول الدعوة، ورسائل الإيقاف والتجميد
   وترقية الباقة. لا ترث تخطيطاً — بعضها يصله المدير والمدرّب معاً — فكانت كل
   واحدة تبني ألوانها وخطّها بيدها بقيم فاتحة ثابتة، فتبقى بيضاء ناصعة ولو
   اختار المركز الوضع الداكن، وبخط لا يطابق بقيّة المنصّة. الهيكل هنا مرّة
   واحدة، والصفحة لا تحمل إلا محتواها.
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    position: relative;
    overflow-x: hidden;
}
/* توهّجان من لون المركز خلف سطح الثيم: حضور بلا صورة تُحمَّل ولا تكلفة رسم.
   في الفاتح نستعمل اللون الأساسي وحده وبكثافة أقل — اللون الثانوي عند أغلب
   المراكز كحليّ غامق، ومزجه في الشفاف فوق سطح فاتح يعطي ضبابة رمادية تبدو
   وسخاً لا تصميماً (رُصدت بالعين على شاشة الترقية في الوضع الفاتح). */
.auth-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 70%),
        radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 70%);
}
/* في الداكن يتحمّل السطح كثافة أعلى، ويضيف اللون الثانوي عمقاً */
[data-mode="dark"] .auth-shell::before {
    background:
        radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 70%),
        radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-secondary) 22%, transparent), transparent 70%);
}
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] .auth-shell::before {
        background:
            radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 70%),
            radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-secondary) 22%, transparent), transparent 70%);
    }
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.auth-card.wide { max-width: 460px; }

.auth-card .top {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}
.auth-card .top h1 { font-size: var(--fs-xl); color: inherit; margin-bottom: var(--sp-1); }
.auth-card .top p,
.auth-card .top span {
    display: block;
    opacity: .88;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.auth-card form { padding: var(--sp-5); }
.auth-card form > .btn { width: 100%; margin-top: var(--sp-4); }
.auth-card .lead {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-2);
}
/* سطر تعريفي خارج النموذج (شاشة الدخول): يحتاج حشوه الأفقي بنفسه. */
.auth-card > .lead { padding: var(--sp-4) var(--sp-5) 0; margin-bottom: 0; }

.auth-card .foot,
.auth-card .links {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 0 var(--sp-5) var(--sp-5);
}
/* مدخلان تحت النموذج (نسيت كلمتي · فتح حساب) — سطران لا سطر مزدحم:
   «ليس لديّ حساب — فتح حساب جديد» وحدها تكسر السطر على عرض 320px. */
.auth-card .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* فتح الحساب دعوةٌ لا حاشية: إطارٌ يميّزها عن رابط «نسيت كلمة المرور؟». */
.auth-card .links .signup {
    margin-top: var(--sp-2);
    padding: 0 var(--sp-4);
    min-height: 44px;
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
}
.auth-card .links .signup:hover {
    text-decoration: none;
    background: var(--surface-2);
    border-color: var(--brand-ink);
}
.auth-card form + .links { padding-top: 0; }
.auth-card .foot a,
.auth-card .links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-2);
    color: var(--brand-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-xs);
}
.auth-card .foot a:hover,
.auth-card .links a:hover { text-decoration: underline; }
.auth-card .dev-hint {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding: 0 var(--sp-5) var(--sp-5);
    line-height: var(--lh-snug);
}

/* بطاقة رسالة: حالة توقُّف أو منع، بلا نموذج — نصّ ودعوة واحدة */
.notice-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}
.notice-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.notice-card p { color: var(--text-muted); line-height: var(--lh-body); margin: var(--sp-2) 0; }
.notice-card .mark {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
}
.notice-card .meta {
    margin-top: var(--sp-4);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-snug);
}
.notice-card .actions {
    margin-top: var(--sp-5);
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    flex-wrap: wrap;
}
.notice-card.danger h1 { color: var(--danger); }


/* ==========================================================================
   13) قشرة لوحة إدارة المركز (م1-ب · تعديل النطاق رقم 5)

   لماذا شريط جانبي: السكّة الأفقية كانت تفيض 256px حتى على 1280px بخمسة عشر
   تبويباً — فآخرها مخفيّ افتراضاً مهما اتّسعت الشاشة. والعمق الرأسيّ يتّسع
   لعشرات الوجهات بلا تمرير أفقيّ ولا إخفاء.

   وحدها هذه القشرة تخصّ لوحة الإدارة؛ تخطيطا المدرّب والمتدرّب يبقيان على
   `.topbar` أعلاه بلا تغيير.
   ========================================================================== */

.shell {
    --shell-w: 264px;
    --shell-w-min: 72px;

    display: grid;
    grid-template-columns: var(--shell-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* الطيّ يُكتب على <html> قبل أول رسم (سكربت مضمّن في الرأس) فلا يومض الشريط. */
.is-shell-collapsed .shell { --shell-w: var(--shell-w-min); }

/* تخطّي التنقّل: لا يُرى حتى يُركَّز عليه — وشريطٌ بعشرين رابطاً بدونه يعني
   عشرين ضغطة Tab قبل بلوغ المحتوى. */
.shell__skip {
    /* ⭐ لا يُخفى بإزاحة بعيدة (`inset-inline-start: -9999px`): في RTL تصير
       الإزاحة يميناً فيمتدّ المستند 11145px ويظهر تمرير أفقيّ في كل شاشة —
       مقيس على الإنتاج المحلي لا مُفترض. الإخفاء بالانكماش إلى نقطة لا يحرّك
       شيئاً، ويبقى العنصر مركَّزاً عليه بلوحة المفاتيح. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    inset-inline-start: var(--sp-4);
    top: var(--sp-2);
    z-index: 60;
    background: var(--panel);
    color: var(--brand-ink);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.shell__skip:focus {
    width: auto;
    height: auto;
    padding: var(--sp-2) var(--sp-4);
    overflow: visible;
    clip-path: none;
}

/* ---- الشريط الجانبي ---- */

.shell__side {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--topbar-bg);
    color: var(--topbar-text);
    overflow: hidden auto;
    overscroll-behavior: contain;
    z-index: 40;
}

.shell__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3);
    min-height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.shell__brandname {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: var(--lh-tight);

    /* اسم المركز سطر واحد يُقصّ: أسماء المراكز تطول («المعهد العالي لتقنية
       المعلومات») فتدفع الشريط إلى ثلاثة أسطر وتزيح كل وجهة تحتها. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell__collapse {
    /* 40px لا 32: الأصغر منها في هذه اللوحة نفسها كان بنداً في مراجعة الجوال
       السابقة (30×30 و38px رُفعت إلى 44). وشاشات اللمس الكبيرة تصل هذا الزرّ. */
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .14);
    color: inherit;
    border: 0;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.shell__collapse:hover { background: rgba(255, 255, 255, .26); }
.shell__collapse .nav-icon { transition: transform var(--dur-fast) var(--ease); }

/* السهم يشير إلى الجهة التي سيتحرّك إليها الشريط. في RTL هو مقلوب أصلاً. */
.is-shell-collapsed .shell__collapse .nav-icon { transform: scaleX(-1); }

.shell__nav {
    flex: 1;
    padding: var(--sp-3) var(--sp-2) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.shell__group {
    /* الفواصل ضيّقة عمداً: سبع مجموعات × 8px زائدة = 56px، وهي وحدها الفرق
       بين شريط يتّسع على شاشة 720 وشريط يفيض عنها. */
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shell__grouptitle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    min-height: 36px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .78;
    cursor: pointer;
    border-radius: var(--radius-xs);
    list-style: none;                 /* المثلث الافتراضي — فَيَرفُكس */
    transition: background var(--dur-fast) var(--ease);
}
.shell__grouptitle::-webkit-details-marker { display: none; }
.shell__grouptitle:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.shell__grouptitle .nav-icon { width: 16px; height: 16px; flex: none; }

/* السهم يشير للأسفل حين تكون المجموعة مفتوحة. وهو الدليل الوحيد على أن هنا
   شيئاً يُفتح — بدونه يبدو العنوان نصّاً جامداً. */
.shell__caret { margin-inline-start: auto; display: inline-flex; opacity: .8; }
.shell__caret .nav-icon { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform var(--dur-fast) var(--ease); }
.shell__group[open] > .shell__grouptitle .shell__caret .nav-icon { transform: rotate(-180deg); }

.shell__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);

    /* 38px على الفأرة و44px على اللمس (القاعدة أسفل هذا القسم).
       التمييز مقصود: 44px لكل وجهة يعني شريطاً 1313px على شاشة 720 — والوجهة
       التي تحتاج تمريراً للوصول إليها مخفيّةٌ عملياً، وهو العيب الذي هربنا
       منه أفقياً فلا نعيده رأسياً. */
    min-height: 38px;
    padding: var(--sp-2) var(--sp-2);
    border: 0;
    width: 100%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-sm);
    text-align: start;
    text-decoration: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.shell__link:hover { background: rgba(255, 255, 255, .16); }

.shell__link.is-active {
    background: rgba(255, 255, 255, .28);
    font-weight: 700;

    /* شريط الحافة يُقرأ في الوضع المطويّ أيضاً حيث لا نصّ يحمل الوزن. */
    box-shadow: inset 3px 0 0 0 currentColor;
}
[dir="rtl"] .shell__link.is-active { box-shadow: inset -3px 0 0 0 currentColor; }

.shell__link .nav-icon { flex: none; width: 20px; height: 20px; opacity: .92; }
.shell__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* اللمس يستعيد 44px: الإصبع لا يصيب 38px بثقة، والتمرير الرأسيّ على الجوال
   طبيعيّ أصلاً (الدرج يملأ الشاشة). */
@media (pointer: coarse) {
    .shell__link { min-height: 44px; }
    .shell__grouptitle { min-height: 44px; }
}

/* ---- الوضع المطويّ ---- */

.is-shell-collapsed .shell__caret { display: none; }

.is-shell-collapsed .shell__label,
.is-shell-collapsed .shell__brandname { display: none; }

.is-shell-collapsed .shell__brand,
.is-shell-collapsed .shell__link,
.is-shell-collapsed .shell__grouptitle { justify-content: center; }

.is-shell-collapsed .shell__grouptitle { opacity: .5; }
.is-shell-collapsed .shell__link { padding-inline: 0; }

/* ---- المتن ---- */

.shell__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shell__top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 60px;
    padding: var(--sp-2) var(--sp-4);
    background: var(--panel);
    border-bottom: var(--border-w) solid var(--panel-border);
}

.shell__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell__burger {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    flex: none;
    background: transparent;
    color: var(--text);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.shell__topactions { display: flex; align-items: center; gap: var(--sp-2); }

.shell__topbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-3);
    background: transparent;
    color: var(--text-muted);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-xs);
    font: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.shell__topbtn:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
.shell__topbtn .nav-icon { width: 18px; height: 18px; }

.shell__scrim { display: none; }

/* ---- الانتقال بين الشاشات: القشرة تثبت والمتن وحده يتبدّل ----

   الطلب كان «كأنها انتقال سريع في نفس الصفحة». وتحقيقه بجافاسكربت (اعتراض
   الروابط وجلب الصفحة واستبدال المتن) يشتري السلاسة بثمن باهظ: سكربتات كل
   شاشة لا تُنفَّذ بعد الاستبدال، فتبدو الصفحة محمّلة وهي معطّلة — وهو أسوأ
   أصناف الأعطال الصامتة.

   `@view-transition` يعطي الأثر نفسه بلا سطر جافاسكربت واحد: المتصفّح يبقي
   على العنصر ذي `view-transition-name` نفسه بين الصفحتين — فالشريط الجانبي
   والترويسة **لا يُعاد رسمهما**، والمتن وحده يتلاشى. والتنقّل يبقى تنقّلاً
   حقيقياً: كل سكربت وكل نمط يُحمَّل كما يُحمَّل اليوم.

   ومن لا يدعمه (فَيَرفُكس وسفاري الأقدم) يرى السلوك الحالي بلا كسر — تحسينٌ
   تدريجيّ لا اعتماد. */
@view-transition { navigation: auto; }

.shell__side { view-transition-name: shell-side; }
.shell__top { view-transition-name: shell-top; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ---- الجوال: الشريط يصير درجاً ---- */

@media (max-width: 899px) {
    .shell { grid-template-columns: minmax(0, 1fr); }

    .shell__side {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(84vw, 300px);

        /* مخفيّ خارج الحافة اليمنى (اللوحة RTL دائماً). والانتقال يُلغى لمن
           طلب تقليل الحركة عبر القاعدة العامة في القسم 1. */
        transform: translateX(100%);
        transition: transform var(--dur-fast) var(--ease);
        box-shadow: none;
    }
    .is-shell-open .shell__side {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(2, 6, 23, .45);
    }

    /* الطيّ حالة سطح مكتب: على الجوال الدرج مفتوح كاملاً أو مغلق. */
    .is-shell-collapsed .shell__label,
    .is-shell-collapsed .shell__brandname { display: block; }
    .is-shell-collapsed .shell__link,
    .is-shell-collapsed .shell__grouptitle,
    .is-shell-collapsed .shell__brand { justify-content: flex-start; }
    .is-shell-collapsed .shell__link { padding-inline: var(--sp-2); }
    .shell__collapse { display: none; }

    .shell__burger { display: grid; }

    .shell__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        border: 0;
        padding: 0;
        background: rgba(2, 6, 23, .55);
        cursor: pointer;
    }
    .shell__scrim[hidden] { display: none; }

    /* نصّ الزرّ يختفي وتبقى أيقونته: صفّ الترويسة على 375px لا يتّسع لعنوان
       الصفحة وزرَّين بنصَّيهما — وهذا ما جعل الترويسة القديمة صفّين و113px. */
    .shell__topbtnlabel { display: none; }
    .shell__topbtn { padding: 0 var(--sp-2); min-width: 44px; justify-content: center; }
}


/* ==========================================================================
   16) «ما ينتظرك» — أعلى لوحة المركز (م1-ج)

   عرضٌ يقود إلى فعل: كل صفّ رابطٌ كامل لا نصّ بجواره زرّ، فمساحة النقر هي
   البند كلّه — والعدد يُقرأ أولاً لأنه ما يقرّر الأولوية.
   ========================================================================== */

.today {
    margin-bottom: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius);
}
.today__head h2 { margin: 0 0 2px; font-size: var(--fs-lg); }
.today__head .hint { margin: 0; }

.today__empty {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ok);
}

.today__list {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.today__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    border-inline-start: 3px solid var(--text-muted);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.today__link:hover { background: var(--panel); border-color: var(--brand-ink); }

/* النبرة تُلوّن الحافّة وحدها: البند فعلٌ لا إنذار، ولوحةٌ كلّها ألوان صارخة
   تُفقد الألوانَ معناها. */
.today__item--act .today__link { border-inline-start-color: var(--brand-primary); }
.today__item--warn .today__link { border-inline-start-color: var(--warn); }
.today__item--info .today__link { border-inline-start-color: var(--info); }

.today__count {
    flex: none;
    min-inline-size: 2.5rem;
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;

    /* ⭐ `--brand-ink` كان هنا فقِيس تباينه **2.41 في الوضع الفاتح** — دون عتبة
       النصّ الصغير (4.5) بل ودون عتبة النصّ الكبير (3). فرمز العلامة سماويّ
       فاتح، وهو يقرأ ممتازاً على سطح داكن (11.23) وينهار على سطح فاتح. وهو
       الدرس نفسه المدفوع ثمنه في 1.7.0 معكوساً.

       العدّاد يبرز **بالحجم والوزن** لا باللون، واللون يحمله شريط الحافّة —
       فيبقى التمييز قائماً ولا يعتمد المعنى على لون وحده. */
    color: var(--text);
}

.today__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today__text strong { font-size: var(--fs-base); font-weight: 700; }
.today__text small { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }

.today__go {
    flex: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    /* نصّ صغير ⇒ عتبته 4.5 بلا تهاون. `--text-muted` يقيس 5.11 فاتحاً و7.74 داكناً. */
    color: var(--text-muted);
}
.today__link:hover .today__go { color: var(--text); }

@media (max-width: 620px) {
    .today { padding: var(--sp-3); }
    /* النصّ المساعد يسقط على الشاشة الضيّقة: العدد والعنوان يكفيان للقرار،
       والتلميح يُقرأ على الشاشة الأوسع. */
    .today__text small { display: none; }
    .today__go { display: none; }
}


/* ==========================================================================
   15) شاشة الإعدادات

   نُقلت من مكدّس Tailwind ثانٍ (م1-هـ). الحقول نفسها بلا أصناف — ينسّقها النظام
   بالعنصر — ولا يبقى هنا إلا تخطيط الصفّ وحالاته.
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.set-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.set-tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-4);
    background: var(--panel);
    color: var(--text-muted);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.set-tab:hover { color: var(--brand-ink); border-color: var(--brand-ink); }
.set-tab.is-active {
    background: var(--brand-primary);
    border-color: transparent;
    color: var(--panel);
    font-weight: 700;
}

.set-panel + .set-panel { margin-top: var(--sp-5); }

.set-fields { margin-top: var(--sp-4); }

.set-row {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
    border-bottom: var(--border-w) solid var(--panel-border);
}
.set-row:last-child { border-bottom: 0; }

@media (min-width: 820px) {
    .set-row { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
}

.set-labelcol label { margin: 0; }
.set-help {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}
.set-inputcol { min-width: 0; }
.set-error {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--danger);
}

.set-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}
.set-clear { color: var(--danger); font-size: var(--fs-xs); }

.set-color { display: flex; align-items: center; gap: var(--sp-3); }
.set-color input[type=color] {
    inline-size: 56px;
    block-size: 44px;
    padding: 2px;
    cursor: pointer;
    border: var(--border-w) solid var(--input-border);
    border-radius: var(--radius-xs);
    background: var(--input-bg);
}
.set-color input[type=text] { max-inline-size: 160px; text-align: left; }

.set-image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.set-image img {
    block-size: 56px;
    max-inline-size: 160px;
    object-fit: contain;
    padding: var(--sp-1);
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-xs);
}

.set-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: var(--border-w) solid var(--panel-border);
}

.set-testmail { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-3); }
.set-testmail > div { flex: 1 1 240px; min-width: 0; }
.set-testmail input { text-align: left; }

.set-dialog {
    max-inline-size: min(92vw, 520px);
    padding: var(--sp-5);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
}
.set-dialog::backdrop { background: rgba(2, 6, 23, .55); }
.set-dialog h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.set-dialog p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.set-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.set-preview__body {
    max-block-size: 50vh;
    overflow: auto;
    padding: var(--sp-4);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    white-space: pre-wrap;
}


/* ==========================================================================
   14) التأليف: مواد الدرس والمحرّر الغنيّ

   نُقلت من `<style>` سطريّ في `trainer-layout` عند توحيد التخطيطين على
   القشرة (م1-هـ). وهي أنماط مكوّنات لا أنماط صفحة، فموضعها هنا: ورقة
   واحدة تقرؤها كل التخطيطات — وهو المبدأ المعلن في رأس هذا الملف،
   وكان مخروقاً بمكدّس سطريّ ثانٍ.
   ========================================================================== */

/* ---- مواد الدرس المتعددة ---- */
.materials { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.material-row {
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
}
.material-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.material-order { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.material-remove {
    background: transparent; border: 0; color: var(--danger); font-size: var(--fs-xs);
    cursor: pointer; font-family: inherit; padding: 6px 8px; border-radius: var(--radius-xs);
    min-height: 36px;
}
.material-remove:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3); }
@media (max-width: 620px) { .material-grid { grid-template-columns: 1fr; } }
.lesson-material { margin-bottom: var(--sp-5); }

/* ---- محرّر النص الغنيّ ---- */
.rich-editor {
    border: var(--border-w) solid var(--input-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--input-bg);
}
.rich-editor:focus-within { outline: var(--ring) solid var(--brand-ink); outline-offset: 1px; border-color: var(--brand-ink); }
.rich-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 6px 8px; background: var(--surface-2);
    border-bottom: var(--border-w) solid var(--panel-border);
}
.rt-btn {
    min-width: 34px; height: 34px; padding: 0 8px;
    background: var(--panel); color: var(--text);
    border: var(--border-w) solid var(--panel-border); border-radius: var(--radius-xs);
    font-size: var(--fs-sm); line-height: 1; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rt-btn:hover { background: var(--brand-primary); color: #fff; border-color: transparent; }
.rt-btn.rt-image { width: auto; font-size: var(--fs-xs); font-weight: 600; gap: 4px; }
.rt-sep { width: 1px; height: 20px; background: var(--panel-border); margin: 0 var(--sp-1); }
.rich-area {
    min-height: 180px; max-height: 460px; overflow-y: auto;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base); line-height: 2; color: var(--text);
}
.rich-area:focus { outline: none; }
.rich-area:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.rich-area h2 { font-size: var(--fs-xl); margin: var(--sp-3) 0 6px; }
.rich-area h3 { font-size: var(--fs-lg); margin: var(--sp-2) 0 6px; }
.rich-area p { margin: 0 0 var(--sp-2); }
.rich-area ul, .rich-area ol { margin: 0 22px var(--sp-2); padding: 0; }
.rich-area blockquote {
    margin: var(--sp-2) 0; padding: 6px var(--sp-3);
    border-inline-start: 3px solid var(--brand-ink);
    background: var(--surface-2); color: var(--text-muted);
}
.rich-area img { max-width: 100%; height: auto; border-radius: var(--radius-xs); margin: 6px 0; }
.rich-area a { color: var(--brand-ink); }


/* ==========================================================================
   17) البحث الشامل (م1-د)

   حقلٌ واحد في ترويسة القشرة يعيد نتائج من ثلاثة سجلّات. والقيود التي شكّلته:

   - **375px بلا فيض أفقي.** صفّ الترويسة لا يتّسع لعنوان الصفحة وحقلٍ وزرَّين،
     فالحقل يسقط على الجوال ويبقى زرّ 44px يفتح صفحة البحث. (وهذا بالضبط ما
     جعل الترويسة القديمة صفّين و113px.)
   - **لا لون علامة لنصّ صغير.** `--brand-ink` رمزٌ سماويّ في بعض الثيمات، وقِيس
     تباينه **2.41** على السطح الفاتح — دون عتبة النصّ الصغير (4.5) بل ودون
     عتبة النصّ الكبير (3). فكل نصّ هنا `--text` أو `--text-muted`
     (5.11 فاتحاً · 7.74 داكناً)، واللون لا يحمل معنىً وحده.
   - **الحقل 16px** كبقيّة حقول النظام: أي أقلّ يُفعّل تكبير iOS عند التركيز.
   ========================================================================== */

.srch {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
    display: flex;
    align-items: center;
}

/* الأيقونة داخل الحقل: زخرفة لا زرّ — فلا تلتقط نقرة ولا تنقص من مساحة
   التركيز على الحقل نفسه. */
.srch__icon {
    position: absolute;
    inset-inline-start: 10px;
    display: grid;
    place-items: center;
    pointer-events: none;
    color: var(--text-muted);
}
.srch__icon .nav-icon { width: 18px; height: 18px; }

.srch input[type=search] {
    /* الحشو الجانبي يفسح للأيقونة؛ وباقي الشكل (44px · 16px · الحدود · حلقة
       التركيز) من نظام الحقول في القسم 7 بلا تكرار. */
    padding-inline-start: 36px;
}

/* زرّ البحث على الجوال — يرث `.shell__topbtn` ويظهر مكان الحقل. */
.srch__mobilebtn { display: none; }

/* ---- القائمة المنسدلة ---- */

.srch__panel {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline: 0;
    z-index: 50;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-2);
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(2, 6, 23, .22);
}
.srch__panel[hidden] { display: none; }

/* ---- النتائج: نفس الشكل في المنسدلة وفي الصفحة، لأن المُصيِّر واحد ---- */

.srch__group + .srch__group { margin-top: var(--sp-3); }

.srch__grouphead {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-muted);
}
.srch__grouphead .nav-icon { width: 16px; height: 16px; flex: none; }
.srch__grouphead h3 {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-muted);
}

.srch__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.srch__hit {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* 44px: هدف لمسٍ كامل — والقائمة كلّها تُستعمل بالإبهام على الهاتف. */
    min-height: 44px;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}
.srch__hit:hover,
.srch__hit:focus-visible { background: var(--surface-2); }

.srch__htext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* ⭐ القصّ على السطر: اسم متدرّب أو عنوان دورة يطول، وبلا هذا يمتدّ اللوح
   فيظهر تمرير أفقيّ في الصفحة كلّها على 375px. */
.srch__htext strong,
.srch__htext small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srch__htext strong { font-size: var(--fs-base); font-weight: 600; }
.srch__htext small {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    /* البريد وأرقام الفواتير لاتينية داخل واجهة RTL: بلا هذا يهاجر الرمز
       الأخير إلى أوّل السطر. */
    direction: ltr;
    text-align: start;
    unicode-bidi: isolate;
}

.srch__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.srch__all:hover,
.srch__all:focus-visible { color: var(--text); }

.srch__note {
    margin: 0;
    padding: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}
.srch__note--empty { font-weight: 700; color: var(--text); }

/* ---- صفحة النتائج الكاملة ---- */

.srchpage__form {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.srchpage__form input[type=search] { flex: 1; min-width: 0; }
.srchpage__form .btn { flex: none; }
.srchpage__count { margin-bottom: 0; }

/* اللوح على الصفحة أوسع من المنسدلة: النتيجة الواحدة تحتمل سطرين هنا. */
.srchpage .srch__htext strong,
.srchpage .srch__htext small { white-space: normal; }

/* ---- الجوال: الحقل يصير زرّاً ---- */

@media (max-width: 899px) {
    /* ⭐ الحقل **لا يُصغَّر** بل يُزال من الصفّ: تصغيره إلى ما يسع 375px يجعله
       أضيق من كلمتين، وحقلٌ لا يُقرأ فيه ما يُكتب ليس حقلاً. والزرّ يفتح
       الصفحة التي فيها الحقل كامل العرض. */
    .srch { display: none; }
    .srch__mobilebtn { display: inline-flex; }

    /* ⭐ قِيس على 375px: أزرار الشريط العلوي 40px ارتفاعاً — دون هدف اللمس
       (44px) الذي يفرضه هذا المشروع على نفسه. ورفعها لا يزيد الترويسة:
       44 + 8 + 8 = 60px، والترويسة 61px بحدّها الأدنى أصلاً. */
    .shell__topbtn { min-height: 44px; }
}

/* ==========================================================================
   م3-أ — المواقع والقاعات
   ========================================================================== */

/* بطاقات لا جدول (planning/15 §4.4): أعمدة القاعة الأربعة — اسم وسعة
   وتجهيزات وحالة — تفيض أفقياً على 375px، والحلّ المعتمد في هذا المشروع
   بطاقةٌ تتراصّ، لا تمريرٌ أفقيّ ولا خطٌّ أصغر. والشبكة نفسها تخدم الشاشات
   العريضة فلا نسختا ترميز تفترقان. */
.onsite-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
}
.onsite-card {
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    background: var(--surface, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}
.onsite-card h3 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.onsite-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--muted);
}
.onsite-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: auto;
}
/* الشارة: مؤرشَف / غير نشط. نصٌّ ولون، بلا إيموجي. */
.onsite-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: var(--border-w) solid var(--line);
    font-size: var(--fs-xs, .78rem);
    line-height: 1.8;
}