/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  33-slideshow.css — سلايد شو الداشبورد                                 ║
   ║  إعلانات · أخبار · امتحانات جديدة · دروس جديدة                         ║
   ║                                                                          ║
   ║  §NEW — خمس إضافات جديدة (تُكمِل 29-slideshow.js):                     ║
   ║    §ACH    شريحة إنجاز: ألوان + confetti متساقطة                       ║
   ║    §IO     لا CSS — منطق IntersectionObserver في JS فقط                 ║
   ║    §COLOR  .dss-slide--custom يستهلك --dss-c/bg/bdr-custom من JS       ║
   ║    §EXPAND .dss-expand-btn + .dss--expanded (viewport 220px)            ║
   ║    §ANIM   4 حركات دخول: enter-fade/zoom/slide/shake                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ══════════════════════════════════════════════════════════════════════
   §1 — متغيرات السلايد شو المحلية
══════════════════════════════════════════════════════════════════════ */
:root {
  --dss-viewport-h: 144px;
  --dss-radius:     var(--card-radius, 14px);
  --dss-tr:         .38s cubic-bezier(.4, 0, .2, 1);
  --dss-tr-fast:    .22s cubic-bezier(.4, 0, .2, 1);

  /* ── نوع: إعلان (ذهبي) ── */
  --dss-c-accent:   #c9a84c;
  --dss-bg-accent:  rgba(201, 168, 76, .11);
  --dss-bdr-accent: rgba(201, 168, 76, .30);

  /* ── نوع: امتحان (أخضر) ── */
  --dss-c-correct:   #2ecc71;
  --dss-bg-correct:  rgba(46,  204, 113, .10);
  --dss-bdr-correct: rgba(46,  204, 113, .28);

  /* ── نوع: خبر (أزرق) ── */
  --dss-c-info:   #3498db;
  --dss-bg-info:  rgba(52,  152, 219, .10);
  --dss-bdr-info: rgba(52,  152, 219, .28);

  /* ── نوع: درس (بنفسجي) ── */
  --dss-c-lesson:   #9b59b6;
  --dss-bg-lesson:  rgba(155, 89,  182, .10);
  --dss-bdr-lesson: rgba(155, 89,  182, .28);

  /* ── نوع: تحذير (برتقالي) ── */
  --dss-c-warning:   #e67e22;
  --dss-bg-warning:  rgba(230, 126,  34, .10);
  --dss-bdr-warning: rgba(230, 126,  34, .28);

  /* ── §ACH — نوع: إنجاز (ذهبي احتفالي) ── */
  --dss-c-achievement:   #f39c12;
  --dss-bg-achievement:  rgba(243, 156,  18, .12);
  --dss-bdr-achievement: rgba(243, 156,  18, .32);

  /* ── §COLOR — لون مخصص (fallback، القيمة الفعلية تأتي من inline style) ── */
  --dss-c-custom:   #c9a84c;
  --dss-bg-custom:  rgba(201, 168,  76, .11);
  --dss-bdr-custom: rgba(201, 168,  76, .30);
}

/* ══════════════════════════════════════════════════════════════════════
   §2 — الحاوية الرئيسية
══════════════════════════════════════════════════════════════════════ */
.dash-slideshow {
  position: relative;
  border-radius: var(--dss-radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow var(--dss-tr-fast);
  animation: fadeInSection .4s ease .15s both;
}

.dash-slideshow:focus-visible {
  box-shadow: var(--focus, 0 0 0 3px rgba(201, 168, 76, .4));
}

/* حالة التحميل قبل ظهور البيانات */
.dash-slideshow:empty::before {
  content: '';
  display: block;
  height: calc(var(--dss-viewport-h) + 37px + 3px);
  background: linear-gradient(90deg,
    var(--bg-hover) 25%, var(--border) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  animation: dssShimmer 1.4s infinite;
}

@keyframes dssShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   §3 — شريط التقدم العلوي
══════════════════════════════════════════════════════════════════════ */
.dss-progress-bar {
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: rgba(255, 255, 255, .05);
  z-index: 20;
}

.dss-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--dss-c-accent);
  border-radius: 0 2px 2px 0;
  will-change: width;
}

/* ══════════════════════════════════════════════════════════════════════
   §4 — الفيوبورت — منطقة الشرائح
══════════════════════════════════════════════════════════════════════ */
.dss-viewport {
  position: relative;
  height: var(--dss-viewport-h);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   §5 — الشريحة الأساسية
══════════════════════════════════════════════════════════════════════ */
.dss-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 16px 20px 14px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  border-top: 2.5px solid transparent;
}

.dss-slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ── خلفية الشريحة الزخرفية ── */
.dss-slide-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* نقش نقطي هندسي خفيف */
.dss-slide-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ══════════════════════════════════════════════════════════════════════
   §6 — ألوان الأنواع (خلفية + حدود + شارة + CTA)
══════════════════════════════════════════════════════════════════════ */

/* إعلان — ذهبي */
.dss-slide--accent { border-top-color: var(--dss-c-accent); }
.dss-slide--accent .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-accent) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(201,168,76,.08) 0%, transparent 65%);
}

/* امتحان — أخضر */
.dss-slide--correct { border-top-color: var(--dss-c-correct); }
.dss-slide--correct .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-correct) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(46,204,113,.06) 0%, transparent 65%);
}

/* خبر — أزرق */
.dss-slide--info { border-top-color: var(--dss-c-info); }
.dss-slide--info .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-info) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(52,152,219,.06) 0%, transparent 65%);
}

/* درس — بنفسجي */
.dss-slide--lesson { border-top-color: var(--dss-c-lesson); }
.dss-slide--lesson .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-lesson) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(155,89,182,.06) 0%, transparent 65%);
}

/* تحذير — برتقالي */
.dss-slide--warning { border-top-color: var(--dss-c-warning); }
.dss-slide--warning .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-warning) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(230,126,34,.06) 0%, transparent 65%);
}

/* §ACH — إنجاز — ذهبي احتفالي */
.dss-slide--achievement { border-top-color: var(--dss-c-achievement); }
.dss-slide--achievement .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-achievement) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(243,156,18,.09) 0%, transparent 65%);
}

/* §COLOR — لون مخصص (HEX من الشيت، القيم تأتي كـ CSS vars من inline style) */
.dss-slide--custom { border-top-color: var(--dss-c-custom); }
.dss-slide--custom .dss-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--dss-bg-custom) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, var(--dss-bg-custom) 0%, transparent 65%);
}

/* ══════════════════════════════════════════════════════════════════════
   §7 — محتوى الشريحة الداخلي
══════════════════════════════════════════════════════════════════════ */
.dss-slide-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* ── الأيقونة الكبيرة ── */
.dss-slide-icon {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  animation: dssIconPulse 3s ease-in-out infinite;
}

@keyframes dssIconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* ── نص الشريحة ── */
.dss-slide-body {
  flex: 1;
  min-width: 0;
}

/* شارة النوع */
.dss-badge {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.dss-badge--accent  { background: var(--dss-bg-accent);  color: var(--dss-c-accent);  border: 1px solid var(--dss-bdr-accent); }
.dss-badge--correct { background: var(--dss-bg-correct); color: var(--dss-c-correct); border: 1px solid var(--dss-bdr-correct); }
.dss-badge--info    { background: var(--dss-bg-info);    color: var(--dss-c-info);    border: 1px solid var(--dss-bdr-info); }
.dss-badge--lesson  { background: var(--dss-bg-lesson);  color: var(--dss-c-lesson);  border: 1px solid var(--dss-bdr-lesson); }
.dss-badge--warning { background: var(--dss-bg-warning); color: var(--dss-c-warning); border: 1px solid var(--dss-bdr-warning); }
/* §ACH + §COLOR */
.dss-badge--achievement { background: var(--dss-bg-achievement); color: var(--dss-c-achievement); border: 1px solid var(--dss-bdr-achievement); }
.dss-badge--custom      { background: var(--dss-bg-custom);      color: var(--dss-c-custom);      border: 1px solid var(--dss-bdr-custom); }

/* عنوان الشريحة */
.dss-title {
  margin: 0 0 4px;
  font-size: .93rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* وصف الشريحة */
.dss-desc {
  margin: 0 0 10px;
  font-size: .76rem;
  color: var(--text-second);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── زر CTA ── */
.dss-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .71rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  transition: filter var(--dss-tr-fast), transform var(--dss-tr-fast);
  font-family: inherit;
  white-space: nowrap;
}

.dss-cta-btn--accent  { background: var(--dss-bg-accent);  color: var(--dss-c-accent);  border-color: var(--dss-bdr-accent); }
.dss-cta-btn--correct { background: var(--dss-bg-correct); color: var(--dss-c-correct); border-color: var(--dss-bdr-correct); }
.dss-cta-btn--info    { background: var(--dss-bg-info);    color: var(--dss-c-info);    border-color: var(--dss-bdr-info); }
.dss-cta-btn--lesson  { background: var(--dss-bg-lesson);  color: var(--dss-c-lesson);  border-color: var(--dss-bdr-lesson); }
.dss-cta-btn--warning { background: var(--dss-bg-warning); color: var(--dss-c-warning); border-color: var(--dss-bdr-warning); }
/* §ACH + §COLOR */
.dss-cta-btn--achievement { background: var(--dss-bg-achievement); color: var(--dss-c-achievement); border-color: var(--dss-bdr-achievement); }
.dss-cta-btn--custom      { background: var(--dss-bg-custom);      color: var(--dss-c-custom);      border-color: var(--dss-bdr-custom); }

.dss-cta-btn:hover  { filter: brightness(1.25); transform: translateY(-1px); }
.dss-cta-btn:active { filter: brightness(1);    transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════
   §8 — الفوتر: نقاط التنقل + أزرار الأسهم
══════════════════════════════════════════════════════════════════════ */
.dss-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--border);
}

/* أزرار السهم */
.dss-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 4px 7px;
  border-radius: 6px;
  transition: color var(--dss-tr-fast), background var(--dss-tr-fast);
  font-family: inherit;
}
.dss-nav-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .07);
}
.dss-nav-btn:active {
  background: rgba(255, 255, 255, .12);
}

/* حاوية النقاط */
.dss-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* نقطة واحدة */
.dss-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  /* §DOTS-COLOR — كل نقطة تحمل لون شريحتها (يُضبط من JS كـ inline style) */
  background: var(--dss-dot-c, var(--border-light, #3a4a6b));
  opacity: 0.32;
  cursor: pointer;
  padding: 0;
  transition: width var(--dss-tr-fast), background var(--dss-tr-fast),
              border-radius var(--dss-tr-fast), opacity var(--dss-tr-fast);
}

.dss-dot--active {
  width: 18px;
  border-radius: 3px;
  background: var(--dss-dot-c, var(--accent));
  opacity: 1;
}

/* §DOTS-COLOR — ألوان النقاط تأتي الآن من --dss-dot-c المضبوطة من JS مباشرة.
   القواعد التالية احتياطية للمتصفحات التي لا تدعم CSS variables: */
.dash-slideshow[data-active-type="correct"]     .dss-dot--active  { background: var(--dss-c-correct); }
.dash-slideshow[data-active-type="info"]        .dss-dot--active  { background: var(--dss-c-info); }
.dash-slideshow[data-active-type="lesson"]      .dss-dot--active  { background: var(--dss-c-lesson); }
.dash-slideshow[data-active-type="warning"]     .dss-dot--active  { background: var(--dss-c-warning); }
/* §ACH + §COLOR */
.dash-slideshow[data-active-type="achievement"] .dss-dot--active  { background: var(--dss-c-achievement); }
.dash-slideshow[data-active-type="custom"]      .dss-dot--active  { background: var(--dss-c-custom); }

/* ══════════════════════════════════════════════════════════════════════
   §9 — §ANIM حركات الدخول والخروج
   — 4 حركات دخول مخصصة حسب النوع (JS يضيفها بـ ENTER_CLASS_MAP)
   — حركة خروج واحدة مشتركة
══════════════════════════════════════════════════════════════════════ */

/* ── fade ↑ — إعلان · درس · مخصص ── */
@keyframes dssEnterFade {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── zoom — امتحان · إنجاز ── */
@keyframes dssEnterZoom {
  from {
    opacity: 0;
    transform: scale(.88);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ── slide ← — خبر (يدخل من اليمين في RTL) ── */
@keyframes dssEnterSlide {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── shake (خفيف) — تحذير ── */
@keyframes dssEnterShake {
  0%   { opacity: 0; transform: translateX(0); }
  18%  { opacity: 1; transform: translateX(-6px); }
  36%  { transform: translateX(5px); }
  54%  { transform: translateX(-3px); }
  72%  { transform: translateX(2px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* ── حركة الخروج (مشتركة) ── */
@keyframes dssExit {
  from { opacity: 1; transform: translateY(0)  scale(1); }
  to   { opacity: 0; transform: translateY(-5px) scale(.99); }
}

/* ── classes تُضاف من JS لحظة التبديل ── */
.dss-slide--enter-fade {
  animation: dssEnterFade var(--dss-tr) forwards;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

.dss-slide--enter-zoom {
  animation: dssEnterZoom var(--dss-tr) forwards;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

.dss-slide--enter-slide {
  animation: dssEnterSlide var(--dss-tr) forwards;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

.dss-slide--enter-shake {
  animation: dssEnterShake var(--dss-tr) forwards;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

/* class الخروج (قديم — احتياطي) */
.dss-slide--exit {
  animation: dssExit calc(var(--dss-tr) * .6) forwards;
  pointer-events: none;
  z-index: 1;
}

/* تقليل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
  .dss-slide--enter-fade,
  .dss-slide--enter-zoom,
  .dss-slide--enter-slide,
  .dss-slide--enter-shake { animation: none; opacity: 1; }
  .dss-slide--exit        { animation: none; opacity: 0; }
  .dss-slide-icon         { animation: none; }
  .dss-media              { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   §10 — الوضع الفاتح (Light Mode)
══════════════════════════════════════════════════════════════════════ */
body.light-mode .dash-slideshow {
  background: #ffffff;
  border-color: #dde3ee;
}

body.light-mode .dss-progress-bar {
  background: rgba(0, 0, 0, .06);
}

body.light-mode .dss-slide-bg::before {
  background-image: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px);
}

body.light-mode .dss-title {
  color: #1a1f2e;
}

body.light-mode .dss-desc {
  color: #4e5a78;
}

body.light-mode .dss-footer {
  border-top-color: #dde3ee;
}

body.light-mode .dss-nav-btn {
  color: #8090b0;
}

body.light-mode .dss-nav-btn:hover {
  color: #1a1f2e;
  background: rgba(0, 0, 0, .05);
}

body.light-mode .dss-dot {
  background: #c0cce0;
}

/* ══════════════════════════════════════════════════════════════════════
   §11 — الشاشات الصغيرة (موبايل)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  :root {
    --dss-viewport-h: 152px; /* شرائح بأيقونة فقط */
  }

  /* §F1 — ارتفاع أعلى إذا كان في الصفحة شرائح بوسائط */
  .dash-slideshow.dss--has-media {
    --dss-viewport-h: 218px;
  }

  .dss-slide {
    padding: 14px 14px 12px;
  }

  /* §F1 — تخطيط عمودي للشرائح التي تحتوي وسيطاً */
  .dss-slide--has-media {
    padding: 0;
    align-items: stretch;
  }

  .dss-slide--has-media .dss-slide-inner {
    flex-direction: column;
    gap: 0;
    flex: 1;
    height: 100%;
  }

  /* الوسيط: يمتد على عرض كامل في الأعلى */
  .dss-slide--has-media .dss-media {
    width: 100%;
    height: 112px;
    border-radius: 0;
    flex-shrink: 0;
  }

  /* النص: تحت الوسيط مباشرة */
  .dss-slide--has-media .dss-slide-body {
    padding: 8px 14px 10px;
    flex: 1;
    overflow: hidden;
  }

  .dss-slide-icon {
    font-size: 2rem;
  }

  .dss-title {
    font-size: .86rem;
  }

  .dss-desc {
    font-size: .73rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-bottom: 7px;
  }

  /* §F1 — شرائح الوسائط: وصف أطول لأن المساحة أفضل */
  .dss-slide--has-media .dss-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .dss-cta-btn {
    font-size: .68rem;
    padding: 4px 10px;
  }

  .dss-footer {
    padding: 5px 10px 7px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §12 — وسائط الشرائح  (صورة · يوتيوب · PDF)
   تحلّ محلّ الأيقونة الإيموجي عندما يحتوي السجل على media_url
══════════════════════════════════════════════════════════════════════ */

/* ── الحاوية الأم ── */
.dss-media {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  transition:
    transform  var(--dss-tr-fast),
    box-shadow var(--dss-tr-fast),
    border-color var(--dss-tr-fast);
}

.dss-media:hover,
.dss-media:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .24);
  outline: none;
}

.dss-media:active {
  transform: scale(.97);
}

/* صورة الغلاف (يوتيوب / صورة) */
.dss-media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* حوّل الصور الرمادية للوضع الفاتح */
  background: rgba(0, 0, 0, .08);
}

/* placeholder إذا تعذّر تحميل thumbnail يوتيوب */
.dss-media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* ── يوتيوب: غشاء متدرّج + زر تشغيل ── */
.dss-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, .52) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: background var(--dss-tr-fast);
}

.dss-media:hover .dss-media-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 100%);
}

/* زر التشغيل الدائري */
.dss-media-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(220, 30, 30, .88);
  color: #fff;
  font-size: .7rem;
  padding-inline-start: 2px; /* تعويض بصري لمثلث التشغيل */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: transform var(--dss-tr-fast), background var(--dss-tr-fast);
}

.dss-media:hover .dss-media-play {
  background: rgba(220, 30, 30, 1);
  transform: scale(1.12);
}

/* ── PDF ── */
.dss-media--pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(231, 76, 60, .10);
  border-color: rgba(231, 76, 60, .25);
}

.dss-media--pdf:hover,
.dss-media--pdf:focus-visible {
  background: rgba(231, 76, 60, .17);
  border-color: rgba(231, 76, 60, .42);
}

.dss-media-pdf-icon {
  font-size: 1.85rem;
  line-height: 1;
  pointer-events: none;
}

.dss-media-pdf-tag {
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(231, 76, 60, .95);
  background: rgba(231, 76, 60, .14);
  border: 1px solid rgba(231, 76, 60, .28);
  border-radius: 3px;
  padding: 1px 6px;
  pointer-events: none;
}

/* ── الوضع الفاتح ── */
body.light-mode .dss-media {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .12);
}

body.light-mode .dss-media:hover,
body.light-mode .dss-media:focus-visible {
  border-color: rgba(0, 0, 0, .22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

body.light-mode .dss-media-placeholder {
  background: linear-gradient(135deg, #e8ecf4 0%, #d0d8ea 100%);
}

/* ── موبايل: الوسيط المربع (للشرائح بدون صورة غلاف) ── */
@media (max-width: 520px) {
  .dss-media:not(.dss-slide--has-media .dss-media) {
    width: 66px;
    height: 66px;
    border-radius: 8px;
  }

  .dss-media-play {
    width: 22px;
    height: 22px;
    font-size: .6rem;
  }

  .dss-media-pdf-icon {
    font-size: 1.5rem;
  }

  .dss-media-pdf-tag {
    font-size: .5rem;
    padding: 1px 4px;
  }
}
/* ══════════════════════════════════════════════════════════════════════
   §13 — §F5 عداد تنازلي (countdown)
══════════════════════════════════════════════════════════════════════ */
.dss-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: var(--dss-bg-accent);
  border: 1.5px solid var(--dss-bdr-accent);
  overflow: hidden;          /* §OVERFLOW — يمنع تدفق النص خارج الصندوق */
}

.dss-countdown--correct { background: var(--dss-bg-correct); border-color: var(--dss-bdr-correct); }
.dss-countdown--info    { background: var(--dss-bg-info);    border-color: var(--dss-bdr-info); }
.dss-countdown--lesson  { background: var(--dss-bg-lesson);  border-color: var(--dss-bdr-lesson); }
.dss-countdown--warning { background: var(--dss-bg-warning); border-color: var(--dss-bdr-warning); }
/* §ACH + §COLOR */
.dss-countdown--achievement { background: var(--dss-bg-achievement); border-color: var(--dss-bdr-achievement); }
.dss-countdown--custom      { background: var(--dss-bg-custom);      border-color: var(--dss-bdr-custom); }

.dss-countdown-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--dss-c-accent);
  font-variant-numeric: tabular-nums;
}
.dss-countdown--correct .dss-countdown-num { color: var(--dss-c-correct); }
.dss-countdown--info    .dss-countdown-num { color: var(--dss-c-info); }
.dss-countdown--lesson  .dss-countdown-num { color: var(--dss-c-lesson); }
.dss-countdown--warning .dss-countdown-num { color: var(--dss-c-warning); }
.dss-countdown--achievement .dss-countdown-num { color: var(--dss-c-achievement); }
.dss-countdown--custom      .dss-countdown-num { color: var(--dss-c-custom); }

.dss-countdown-lbl {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--dss-c-accent);
  opacity: .7;
  margin-top: 3px;
}
.dss-countdown--correct .dss-countdown-lbl { color: var(--dss-c-correct); }
.dss-countdown--info    .dss-countdown-lbl { color: var(--dss-c-info); }
.dss-countdown--lesson  .dss-countdown-lbl { color: var(--dss-c-lesson); }
.dss-countdown--warning .dss-countdown-lbl { color: var(--dss-c-warning); }
.dss-countdown--achievement .dss-countdown-lbl { color: var(--dss-c-achievement); }
.dss-countdown--custom      .dss-countdown-lbl { color: var(--dss-c-custom); }

@media (max-width: 520px) {
  .dss-countdown { width: 60px; height: 60px; border-radius: 10px; }
  .dss-countdown-num { font-size: 1.45rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   §14 — §F4 نقطة "جديد / غير مقروء" على الـ dots
══════════════════════════════════════════════════════════════════════ */
.dss-dot--unread {
  position: relative;
}

.dss-dot--unread::after {
  content: '';
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e74c3c;
  border: 1.5px solid var(--bg-card, #1a1f30);
  animation: dssUnreadPulse 1.8s ease-in-out infinite;
}

@keyframes dssUnreadPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.35); opacity: .75; }
}

body.light-mode .dss-dot--unread::after {
  border-color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════
   §15 — §F6 تلميح السحب
══════════════════════════════════════════════════════════════════════ */
.dss-swipe-hint {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 20, 35, .82);
  color: rgba(255, 255, 255, .92);
  font-size: .72rem;
  font-weight: 500;
  padding: 5px 16px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .35s ease;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .10);
}

.dss-swipe-hint--visible {
  opacity: 1;
}

body.light-mode .dss-swipe-hint {
  background: rgba(30, 40, 65, .88);
}

@media (prefers-reduced-motion: reduce) {
  .dss-dot--unread::after { animation: none; }
  .dss-swipe-hint { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   §16 — §EXPAND زر التوسيع + وضع العرض الموسع
══════════════════════════════════════════════════════════════════════ */

/* ── زر ⛶ في الزاوية العلوية ── */
.dss-expand-btn {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 7px;
  color: var(--text-muted, #8090b0);
  font-size: .78rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  z-index: 30;
  font-family: inherit;
  opacity: 0;
  transition:
    background  var(--dss-tr-fast),
    color       var(--dss-tr-fast),
    opacity     var(--dss-tr-fast),
    transform   var(--dss-tr-fast);
}

/* يظهر عند تحويم الحاوية أو التركيز داخلها */
.dash-slideshow:hover  .dss-expand-btn,
.dash-slideshow:focus-within .dss-expand-btn {
  opacity: 1;
}

/* دائماً مرئي في الوضع الموسع */
.dss--expanded .dss-expand-btn {
  opacity: 1;
  color: var(--text-primary);
  background: rgba(255, 255, 255, .10);
}

.dss-expand-btn:hover {
  background: rgba(255, 255, 255, .13);
  color: var(--text-primary);
  transform: scale(1.1);
}

.dss-expand-btn:active {
  transform: scale(.95);
}

/* ── الوضع الموسع: ارتفاع أكبر ── */
.dss--expanded .dss-viewport {
  height: 220px;
}

.dss--expanded .dss-slide-icon {
  font-size: 3rem;
}

.dss--expanded .dss-title {
  font-size: 1.02rem;
  white-space: normal;
}

.dss--expanded .dss-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: .8rem;
}

.dss--expanded .dss-media {
  width: 105px;
  height: 105px;
}

.dss--expanded .dss-countdown {
  width: 90px;
  height: 90px;
}

.dss--expanded .dss-countdown-num {
  font-size: 2.2rem;
}

/* ── الوضع الفاتح ── */
body.light-mode .dss-expand-btn {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .10);
}

body.light-mode .dss-expand-btn:hover {
  background: rgba(0, 0, 0, .08);
  color: #1a1f2e;
}

body.light-mode .dss--expanded .dss-expand-btn {
  background: rgba(0, 0, 0, .06);
  color: #1a1f2e;
}

/* ── موبايل: الوضع الموسع ── */
@media (max-width: 520px) {
  .dss--expanded .dss-viewport {
    height: 260px; /* أوسع على الموبايل */
  }

  .dss--expanded .dss-slide--has-media .dss-media {
    height: 150px; /* صورة أطول في الوضع الموسع */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §DRAG — سحب الماوس: cursor + ارتداد بصري خفيف
══════════════════════════════════════════════════════════════════════ */
.dash-slideshow:not(.dss--dragging) {
  cursor: default;
}

.dash-slideshow.dss--dragging {
  cursor: grabbing !important;
  user-select: none;
}

/* الارتداد البصري: إزاحة خفيفة للـ viewport أثناء السحب */
.dss--dragging .dss-viewport {
  transform: translateX(var(--dss-drag-x, 0));
  transition: none;
}

/* ══════════════════════════════════════════════════════════════════════
   §SPACE — مؤشر الإيقاف المؤقت
══════════════════════════════════════════════════════════════════════ */
.dash-slideshow::after {
  content: '⏸';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity .25s, transform .25s;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.dash-slideshow.dss--paused::after {
  opacity: .75;
  transform: translate(-50%, -50%) scale(1);
}

/* ══════════════════════════════════════════════════════════════════════
   §HOURS — عداد الساعات: نص أصغر + لون خطر
══════════════════════════════════════════════════════════════════════ */
.dss-countdown--urgent {
  width: 80px;            /* §URGENT-W — أوسع لاستيعاب تنسيق HH:MM */
  animation: dssUrgentPulse 1.4s ease-in-out infinite;
}

.dss-countdown--urgent .dss-countdown-num {
  font-size: 1.35rem;
  letter-spacing: -.02em;
}

.dss-countdown--urgent .dss-countdown-lbl {
  font-size: .52rem;
  white-space: nowrap;    /* §URGENT-LBL — يمنع التفاف النص في 80px */
}

.dss-countdown-colon {
  opacity: .6;
  animation: dssColonBlink .9s step-start infinite;
}

@keyframes dssColonBlink {
  0%, 100% { opacity: .6; }
  50%       { opacity: 0; }
}

@keyframes dssUrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76,  60, .0); }
  50%       { box-shadow: 0 0 0 5px rgba(231, 76,  60, .25); }
}

@media (prefers-reduced-motion: reduce) {
  .dss-countdown--urgent       { animation: none; }
  .dss-countdown-colon         { animation: none; opacity: .6; }
}

   تُولَد من JS داخل .dss-slide-bg لشرائح isAchievement
══════════════════════════════════════════════════════════════════════ */
.dss-confetti-particle {
  position: absolute;
  top: -10px;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: dssConfettiFall var(--dur, 2.2s) ease-in var(--del, 0s) infinite;
  border-radius: 2px;
}

@keyframes dssConfettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: .92;
  }
  80% {
    opacity: .65;
  }
  100% {
    transform:
      translateY(190px)
      rotate(calc(var(--dss-conf-rot, 1) * 520deg));
    opacity: 0;
  }
}

/* إيقاف confetti عند تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .dss-confetti-particle { animation: none; opacity: 0; }
  .dss-expand-btn        { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   §18 — §SKELETON بطاقات تحميل (skeleton cards) للمصادر
   تُظهَر فوراً عند تحميل الصفحة وتُستبدل بالبيانات الحقيقية
══════════════════════════════════════════════════════════════════════ */

/* الأنيميشن مشترك مع shimmer الـ slideshow */
@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.resource-card--skeleton {
  pointer-events: none;
  overflow: hidden;
}

.card-image-wrap--skeleton {
  height: 180px;
  background:
    linear-gradient(90deg,
      var(--bg-hover, #1e2540) 25%,
      var(--border, #2a3556)   50%,
      var(--bg-hover, #1e2540) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--card-radius, 10px) var(--card-radius, 10px) 0 0;
}

.skeleton-line {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  background:
    linear-gradient(90deg,
      var(--bg-hover, #1e2540) 25%,
      var(--border, #2a3556)   50%,
      var(--bg-hover, #1e2540) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line--short  { width: 38%; animation-delay: .1s; }
.skeleton-line--full   { width: 92%; animation-delay: .15s; }
.skeleton-line--medium { width: 68%; animation-delay: .2s; }
.skeleton-line--thin   { width: 50%; height: 8px; animation-delay: .25s; }

/* الوضع الفاتح */
body.light-mode .card-image-wrap--skeleton,
body.light-mode .skeleton-line {
  background:
    linear-gradient(90deg, #e8ecf4 25%, #d0d8ea 50%, #e8ecf4 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .card-image-wrap--skeleton,
  .skeleton-line { animation: none; }
}