@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * 98-cinematic-layers.css — الطبقة السينمائية للفهارس وبطاقات الفيديو (إضافية، آخر طبقة)
 * ────────────────────────────────────────────────────────────────────────────
 * تُحمَّل في index.html بعد 97-responsive-harmony.css ⇒ تتغلّب بالترتيب على
 *   القواعد السابقة بنفس قوة المحدِّد (تكملة لتسلسل: cine-cosmos → 96 → 97 → 98).
 *
 * تكسو ثلاثة عناصر قائمة (شكلاً فقط — لا تلمس أي JS / id / handler / بنية DOM):
 *   (4) .category-header  — فهارس الفصول كشريط سينمائي (صورة كونية + وشاح RTL).
 *   (5) .course-card       — بطاقات الفيديو سينمائية لكل ثيم + حالتا «مكتمل» و«قيد التقدّم».
 *   (5-ج) #drawerList .drawer-item — لمسات لونية خفيفة متّسقة في مشغّل الفيديو.
 *
 * المبدأ: نُعرّف توكنات لونية لكل ثيم (داكن=افتراضي، وردي، فاتح) ونكتب القواعد مرّة
 *   واحدة تستهلك التوكنات ⇒ لا تكرار، والثيم يتبدّل عبر :root[data-theme="…"] القائم.
 *   الأخضر/البرتقالي للحالات «إشارة» عابرة للثيم (مكتمل=أخضر، قيد التقدّم=برتقالي) —
 *   أعمق في الداكن، أنقى/أفتح في الفاتح، سينمائي غير مزعج.
 *
 * أداء: بلا backdrop-filter على البطاقات (تتكرر كثيراً) — تدرّجات صلبة فقط.
 * وصول: prefers-reduced-motion يلغي الحركات المضافة (انظر §6)، والنص عالي التباين
 *   فوق كل خلفية في الثيمات الثلاثة (وشاح للفهارس، تدرّجات متّزنة للبطاقات).
 *
 * للإزالة: احذف سطر <link> الخاص به من index.html فقط. (لا أثر على أي ملف آخر.)
 * المسارات نسبية لمجلد هذا الملف (assets/css/) ⇒ «../cinematic/…».
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * (0) توكنات الثيمات — صورة شريط الفهرس + الوشاح + ألوان البطاقات والحالات
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── الداكن (الافتراضي) — سماوي/كحلي عميق ── */
:root {
  /* فهرس الفصل: صورة الشريط (image-set: webp ثم jpg) + وشاح RTL أعمق يميناً + حد ناعم */
  --cat-img:
    image-set(url("../cinematic/cosmos-banner.webp") type("image/webp"),
              url("../cinematic/cosmos-banner.jpg")  type("image/jpeg"));
  --cat-floor: #0c1626;
  --cat-bd:    rgba(120,170,210,0.22);
  --cat-scrim: linear-gradient(to left,
      rgba(4,9,18,0.84) 0%, rgba(4,9,18,0.60) 46%, rgba(4,9,18,0.40) 100%);

  /* بطاقة عادية — أسود سينمائي */
  --cc-bg:   linear-gradient(155deg, #0d1626 0%, #06090f 100%);
  --cc-bd:   rgba(120,170,210,0.14);
  --cc-glow: rgba(70,130,190,0.20);
  --cc-rest: none;                 /* لمعة علوية (الفاتح فقط) */

  /* حالة «مكتمل» — أخضر سينمائي عميق */
  --cc-done-bg:   linear-gradient(155deg, #103a26 0%, #0a2418 100%);
  --cc-done-bd:   rgba(52,211,153,0.34);
  --cc-done-glow: rgba(16,185,129,0.22);

  /* حالة «قيد التقدّم» — برتقالي/كهرماني سينمائي عميق */
  --cc-prog-bg:   linear-gradient(155deg, #2e1f0c 0%, #1d1308 100%);
  --cc-prog-bd:   rgba(245,158,11,0.34);
  --cc-prog-glow: rgba(245,158,11,0.22);
  --cc-prog-bar:  linear-gradient(90deg, #f59e0b 0%, #f97316 100%);

  /* الشارات */
  --cc-done-badge-bg: rgba(16,185,129,0.18);
  --cc-done-badge-fg: #6ee7b7;
  --cc-prog-badge-bg: rgba(245,158,11,0.18);
  --cc-prog-badge-fg: #fcd34d;
}

/* ── الوردي (عنابي) — نتجاوز توكنات البطاقة العادية فقط؛ الأخضر/البرتقالي يبقيان عميقين ── */
:root[data-theme="pink"] {
  --cat-img:
    image-set(url("../cinematic/cosmos-banner-pink.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-pink.jpg")  type("image/jpeg"));
  --cat-floor: #1a0b14;
  --cat-bd:    rgba(233,30,99,0.26);
  --cat-scrim: linear-gradient(to left,
      rgba(18,5,12,0.84) 0%, rgba(18,5,12,0.60) 46%, rgba(18,5,12,0.40) 100%);

  --cc-bg:   linear-gradient(155deg, #20101b 0%, #110610 100%);
  --cc-bd:   rgba(233,30,99,0.18);
  --cc-glow: rgba(233,30,99,0.18);
}

/* ── البنفسجي — نتجاوز توكنات البطاقة العادية فقط؛ الأخضر/البرتقالي يبقيان عميقين ── */
:root[data-theme="purple"] {
  --cat-img:
    image-set(url("../cinematic/cosmos-banner-purple.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-purple.jpg")  type("image/jpeg"));
  --cat-floor: #140a24;
  --cat-bd:    rgba(168,85,247,0.26);
  --cat-scrim: linear-gradient(to left,
      rgba(16,8,28,0.84) 0%, rgba(16,8,28,0.60) 46%, rgba(16,8,28,0.40) 100%);

  --cc-bg:   linear-gradient(155deg, #1e1233 0%, #0c0618 100%);
  --cc-bd:   rgba(168,85,247,0.18);
  --cc-glow: rgba(168,85,247,0.18);
}

/* ── الفاتح — ثلجي سينمائي بارد؛ النص غامق ⇒ توكنات حالات أفتح + شارات نصّها غامق ── */
:root[data-theme="light"] {
  --cat-img:
    image-set(url("../cinematic/cosmos-banner-light.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-light.jpg")  type("image/jpeg"));
  --cat-floor: #dde6f2;
  --cat-bd:    rgba(110,130,165,0.30);
  /* نص الفهرس أبيض دائماً ⇒ وشاح أعمق فوق الصورة الثلجية الساطعة ليبقى مقروءاً */
  --cat-scrim: linear-gradient(to left,
      rgba(4,9,18,0.90) 0%, rgba(4,9,18,0.70) 46%, rgba(4,9,18,0.48) 100%);

  --cc-bg:   linear-gradient(155deg, #f5f9fe 0%, #e6eef9 100%);
  --cc-bd:   rgba(120,140,170,0.30);
  --cc-glow: rgba(37,99,235,0.14);
  --cc-rest: inset 0 1px 0 rgba(255,255,255,0.75);   /* لمعة علوية ناعمة */

  --cc-done-bg:   linear-gradient(155deg, #e6f8ef 0%, #cdeedb 100%);  /* منت بارد */
  --cc-done-bd:   rgba(16,140,92,0.40);
  --cc-done-glow: rgba(16,185,129,0.18);

  --cc-prog-bg:   linear-gradient(155deg, #fdf1da 0%, #f8e2bd 100%);  /* كهرمان فاتح */
  --cc-prog-bd:   rgba(194,124,20,0.42);
  --cc-prog-glow: rgba(245,158,11,0.18);

  --cc-done-badge-bg: rgba(16,140,92,0.16);
  --cc-done-badge-fg: #0c7a4d;
  --cc-prog-badge-bg: rgba(194,124,20,0.18);
  --cc-prog-badge-fg: #9a6410;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (4) فهارس الفصول — .category-header كشريط سينمائي (صورة + وشاح RTL)
 * ────────────────────────────────────────────────────────────────────────────
 * نتجاوز «background: var(--gradient)» في main.css (نفس قوة المحدِّد 0,1,0 + تحميل
 *   لاحق). الزوايا 12px واللون #fff يبقيان من main.css. الوشاح أعمق جهة اليمين (RTL:
 *   حيث يبدأ العنوان) فيبقى عالي التباين؛ السهم (يسار) يأخذ ظلّاً نصّياً للقراءة.
 * ════════════════════════════════════════════════════════════════════════════ */
.category-header {
  background-color: var(--cat-floor);
  background-image: var(--cat-scrim), var(--cat-img);    /* الوشاح فوق الصورة */
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  border: 1px solid var(--cat-bd);
  /* حشو متجاوب: السقف = الأصل (14/16) فلا يتغيّر سطح المكتب */
  padding: clamp(11px, 3.2vw, 14px) clamp(13px, 4vw, 16px);
}
/* النص فوق الصورة — ظل خفيف يرفع التباين فوق المناطق المزدحمة */
.category-header .cat-title { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.category-header .category-chevron {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);   /* السهم يقع على الجهة الأخفّ وشاحاً */
}
/* الشارة — زجاج أبيض خفيف فوق الصورة */
.category-header .category-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
}
/* Hover — لمعة سينمائية هادئة (لا قفزات): نلغي خفوت main.css ونرفع السطوع قليلاً */
.category-header:hover {
  opacity: 1;
  filter: brightness(1.07) saturate(1.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (5) بطاقات الفيديو — .course-card سينمائية لكل ثيم + حالتان
 * ────────────────────────────────────────────────────────────────────────────
 * نتجاوز «background: var(--bg-card)» و«border» في main.css (تحميل لاحق). نُبقي
 *   onclick/transition/الثمبنيل/شريط .h-progress كما هي — كسوة شكل فقط. كل الحالات
 *   تبقى قابلة للضغط (لا pointer-events:none).
 * ════════════════════════════════════════════════════════════════════════════ */
.course-card {
  background: var(--cc-bg);
  border: 1px solid var(--cc-bd);
  box-shadow: var(--cc-rest);          /* لمعة علوية في الفاتح، لا شيء في الداكن/الوردي */
  position: relative;                  /* لتثبيت العلامة المائية (الداكن) */
}
.course-card > * { position: relative; z-index: 1; }   /* المحتوى فوق العلامة المائية */

/* علامة مائية كونية خافتة جدّاً في زاوية البطاقة العادية (الداكن فقط) */
.course-card::after {
  content: "";
  position: absolute;
  inset: auto auto -18px 8px;          /* أسفل-يسار، يقصّها overflow:hidden */
  width: clamp(64px, 20%, 104px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background:
    image-set(url("../cinematic/cosmos-motif.webp") type("image/webp"),
              url("../cinematic/cosmos-motif.png")  type("image/png"))
    left bottom / contain no-repeat;
}
/* لا علامة مائية في الوردي/الفاتح ولا على بطاقات الحالات */
:root[data-theme="pink"]   .course-card::after,
:root[data-theme="purple"] .course-card::after,
:root[data-theme="light"]  .course-card::after,
.course-card.is-completed::after,
.course-card.is-progress::after { content: none; }

/* Hover البطاقة العادية — توهج لوني هادئ (نُبقي رفعة translateY من main.css) */
.course-card:hover { box-shadow: 0 8px 24px var(--cc-glow); }

/* ── حالة «مكتمل» — البطاقة كلها خضراء سينمائية + توهج أخضر + حد أخضر (تبقى قابلة للضغط) ── */
.course-card.is-completed {
  background: var(--cc-done-bg);
  border-color: var(--cc-done-bd);
  box-shadow: 0 0 0 1px var(--cc-done-bd), 0 4px 18px var(--cc-done-glow);
}
.course-card.is-completed:hover {
  box-shadow: 0 0 0 1px var(--cc-done-bd), 0 8px 26px var(--cc-done-glow);
}

/* ── حالة «قيد التقدّم» — البطاقة كلها برتقالية سينمائية + توهج برتقالي + شريط كهرماني ── */
.course-card.is-progress {
  background: var(--cc-prog-bg);
  border-color: var(--cc-prog-bd);
  box-shadow: 0 0 0 1px var(--cc-prog-bd), 0 4px 18px var(--cc-prog-glow);
}
.course-card.is-progress:hover {
  box-shadow: 0 0 0 1px var(--cc-prog-bd), 0 8px 26px var(--cc-prog-glow);
}
/* شريط التقدّم داخل البطاقة — كهرماني متّسق بدل السماوي الافتراضي */
.course-card.is-progress .h-progress-bar { background: var(--cc-prog-bar); }

/* ── الشارات النصّية (.cc-badge) — بديل أنيق عن الإيموجي، تُنسَّق هنا ── */
.cc-badge {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.cc-badge--done {                       /* «مكتمل» — شارة خضراء + علامة صحّ (Unicode، بلا اعتماد خط) */
  background: var(--cc-done-badge-bg);
  color: var(--cc-done-badge-fg);
  border: 1px solid var(--cc-done-bd);
}
.cc-badge--done::before { content: "\2713"; margin-inline-end: 4px; font-weight: 900; }
.cc-badge--prog {                       /* «%» — شارة كهرمانية */
  background: var(--cc-prog-badge-bg);
  color: var(--cc-prog-badge-fg);
  border: 1px solid var(--cc-prog-bd);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (5-ج) مشغّل الفيديو — لمسات لونية خفيفة متّسقة على عناصر القائمة (drawer)
 * ────────────────────────────────────────────────────────────────────────────
 * سياق مركّز ⇒ إشارة لونية خفيفة فقط (لا خلفيات كاملة). الحدود الجانبية والأيقونة
 *   موجودة أصلاً في main.css؛ نضيف تلميحاً للخلفية + نوحّد الألوان مع لغة البطاقات.
 *   #drawerList (id) يرفع القوة فوق قواعد main.css الملوّنة بالثيم.
 * ════════════════════════════════════════════════════════════════════════════ */
#drawerList .drawer-item.completed   { background: rgba(16,185,129,0.07); }
#drawerList .drawer-item.completed .drawer-done-icon { color: #34d399; }
#drawerList .drawer-item.in-progress { background: rgba(245,158,11,0.07); }
#drawerList .drawer-item.in-progress .drawer-watch-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}
/* العنصر قيد التشغيل — لمسة بلون الثيم الحالي (بدل الأزرق المحذوف) */
#drawerList .drawer-item.playing { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ════════════════════════════════════════════════════════════════════════════
 * (6) التجاوب + إمكانية الوصول
 * ════════════════════════════════════════════════════════════════════════════ */

/* الجوال (≤480px): خفّف حشو الفهرس وأبرز جزءاً ألطف من صورة الشريط */
@media (max-width: 480px) {
  .category-header { padding: 10px 12px; background-position: center, center 30%; }
}

/* البانر الترحيبي: اسمح للجملة الأطول بالالتفاف بأناقة على الشاشات الضيّقة (لا قصّ) */
@media (max-width: 380px) {
  #page-dashboard > div:first-child p { line-height: 1.45; }
}

/* احترام تقليل الحركة: ألغِ الحركات المضافة (نُبقي الحالات الساكنة والتوهجات الثابتة) */
@media (prefers-reduced-motion: reduce) {
  .category-header, .course-card { transition: none; }
  .category-header:hover { filter: none; }
  .course-card:hover { transform: none; }
}