@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * 105-theme-alula.css — ثيم «العلا» الصحراوي السينمائي (إضافي · آخر طبقة · قابل للحذف)
 * ────────────────────────────────────────────────────────────────────────────
 * 🏜️ [إضافة الطلاب + العلا 2026-07-01]
 * ثيم رابع data-theme="alula" = الافتراضي الجديد لكل زائر. إضاءة ذهبية/عنبرية
 * دافئة على حجر العلا الرملي الليلي (مكافئ كمبوزيشن البنفسجي: صحراء + درب التبانة
 * + تكوينات صخرية مُضاءة + نخيل ظلّي).
 *
 * يُحمَّل بعد 104 (آخر طبقة) ⇒ يتغلّب على الباقي بنفس قوة المحدِّد + الترتيب.
 * CSS تراكمي: لا نلمس main.css ولا 96/98 ولا h-upgrade — نُعرّف هنا فقط توكنات
 * «العلا» (فيستهلكها كود تلك الملفات تلقائياً عبر المتغيّرات) + نُعيد تلوين القواعد
 * المكتوبة بألوان صريحة (rgba بنفسجية/بنفسجية فاتحة) التي لا تمرّ عبر متغيّر.
 *
 * المبدأ: كل ما يستهلك متغيّراً (primary وgradient وglow وتوكنات ck وcat وcc
 * وhu-halo) يتلوّن تلقائياً من الكتل أدناه؛ والقواعد ذات اللون الصريح (الموروثة من
 * الأساس بنفسجياً) نتجاوزها بمحدّد :root[data-theme="alula"] (أقوى + لاحق).
 * الكروت/الشرائط/المودالات يغطّيها 96 (الزجاج الكوني) بمتغيّرات العلا ⇒ لا نكرّرها.
 *
 * للإزالة: احذف <link> هذا + رجوع نقطتي السلوك (IIFE في index.html + theme.js)
 * ⇒ يعود البنفسجي افتراضياً بلا أثر.
 * المسارات نسبية لمجلد هذا الملف (assets/css/) ⇒ «../cinematic/…».
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * (1) متغيّرات الثيم الأساسية — مكافئة كتلة main.css (قيم العلا الصحراوية)
 * ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="alula"] {
  --primary:        #e0a85b;   /* ذهب/عنبر العلا */
  --primary-hover:  #c8893b;
  --primary-light:  #f0c07e;
  --accent:         #e0a85b;
  --bg-page:        #120d08;    /* بني داكن دافئ جداً (سماء/أرض ليلية) */
  --bg-card:        #1d150d;
  --bg-input:       #241a10;
  --bg-input-focus: #2e2114;
  --text-primary:   #f4ecdd;    /* رملي فاتح — تباين عالٍ على الداكن */
  --text-secondary: #cbb89a;
  --text-muted:     #8c7a62;
  --border-color:   #2e2114;
  --shadow:         0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.55);
  --danger:         #ff6b6b;
  --success:        #51cf66;
  --warning:        #f0a83c;
  --gradient:       linear-gradient(135deg, #6e3d1a 0%, #e0a85b 100%);
  --gradient-dark:  linear-gradient(135deg, #0e0a05 0%, #1d150d 100%);
  --glow:           0 0 24px rgba(224,168,91,0.18);
  --logo-color:     #ffffff;    /* خلفية داكنة ⇒ شعار أبيض */
}

/* ════════════════════════════════════════════════════════════════════════════
 * (2) توكنات الجلد الكوني — مكافئة 96-cosmic-skin.css (صورة العلا + زجاج عنبري)
 * ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="alula"] {
  --ck-cosmos-img:
    image-set(url("../cinematic/cosmos-ambient-wide-alula.webp") type("image/webp"),
              url("../cinematic/cosmos-ambient-wide-alula.jpg")  type("image/jpeg"));
  --ck-banner-img:
    image-set(url("../cinematic/cosmos-banner-alula.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-alula.jpg")  type("image/jpeg"));
  --ck-floor: #0e0a05;
  /* وشاح قراءة دافئ (أسود مائل للبنّي) يحفظ مزاج العلا الذهبي */
  --ck-scrim: linear-gradient(180deg,
      rgba(10,6,2,0.55) 0%,
      rgba(10,6,2,0.12) 24%,
      rgba(10,6,2,0.22) 64%,
      rgba(10,6,2,0.56) 100%);
  --ck-glass:        rgba(29,21,13,0.62);
  --ck-glass-strong: rgba(29,21,13,0.82);
  --ck-glass-bd:     rgba(224,168,91,0.20);
}
/* التوجّه الطولي / الشاشات الضيّقة ⇒ صورة العلا الطولية */
@media (orientation: portrait), (max-width: 820px) {
  :root[data-theme="alula"] {
    --ck-cosmos-img:
      image-set(url("../cinematic/cosmos-ambient-tall-alula.webp") type("image/webp"),
                url("../cinematic/cosmos-ambient-tall-alula.jpg")  type("image/jpeg"));
  }
}
/* بانر ترحيب الداشبورد — وشاح RTL دافئ فوق صورة العلا (الصورة من --ck-banner-img) */
:root[data-theme="alula"] #page-dashboard > div:first-child::after {
  background: linear-gradient(to left,
    rgba(10,6,2,0.60) 0%,
    rgba(10,6,2,0.34) 46%,
    rgba(10,6,2,0.14) 100%);
}
/* الموتيف الكوني للحالات الفارغة — صخرة العلا (بلا hue-rotate؛ الصورة عنبرية أصلاً) */
:root[data-theme="alula"] .empty-state::before {
  background-image:
    image-set(url("../cinematic/cosmos-motif-alula.webp") type("image/webp"),
              url("../cinematic/cosmos-motif-alula.png")  type("image/png"));
  filter: none;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (3) توكنات الطبقة السينمائية — مكافئة 98-cinematic-layers.css (فهارس + بطاقات)
 *     الأخضر «مكتمل» والبرتقالي «قيد التقدّم» يرثان الأساس (إشارات عابرة للثيم).
 * ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="alula"] {
  --cat-img:
    image-set(url("../cinematic/cosmos-banner-alula.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-alula.jpg")  type("image/jpeg"));
  --cat-floor: #150d05;
  --cat-bd:    rgba(224,168,91,0.26);
  --cat-scrim: linear-gradient(to left,
      rgba(14,9,3,0.84) 0%, rgba(14,9,3,0.60) 46%, rgba(14,9,3,0.40) 100%);

  --cc-bg:   linear-gradient(155deg, #1d150d 0%, #0e0a05 100%);
  --cc-bd:   rgba(224,168,91,0.18);
  --cc-glow: rgba(224,168,91,0.18);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (4) تجاوزات h-upgrade.css — الهالة + بقعة الأمبيانت + توهّج شعار النافبار
 *     (الأساس بنفسجي صريح ⇒ يجب تجاوزه للعلا لئلا يتسرّب البنفسجي)
 * ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="alula"] { --hu-halo: rgba(224,168,91,0.20); }
:root[data-theme="alula"] body::before {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(224,168,91,0.10), transparent 70%),
    radial-gradient(40% 40% at 85% 12%, rgba(200,137,59,0.07), transparent 75%);
}
:root[data-theme="alula"] .top-nav .nav-title img {
  box-shadow: 0 4px 14px rgba(224,168,91,0.30), 0 0 0 1px var(--hu-hairline);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (5) تجاوزات main.css — القواعد المكتوبة بـ rgba بنفسجية صريحة (الموروثة بنفسجياً)
 *     الكروت/الشرائط/المودالات يغطّيها 96 بزجاج العلا ⇒ غير مكرّرة هنا.
 * ════════════════════════════════════════════════════════════════════════════ */

/* خلفية الجسم — توهّج عنبري خافت (مكافئ radial البنفسجي) */
:root[data-theme="alula"] body {
  background-image:
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(224,168,91,0.07), transparent 65%),
    radial-gradient(ellipse 700px 500px at 15% 100%, rgba(200,137,59,0.05), transparent 65%);
  background-attachment: fixed;
}

/* الكروت — حدّ المرور (الخلفية الزجاجية من 96) */
:root[data-theme="alula"] .h-card:hover {
  border-color: rgba(224,168,91,0.32);
  box-shadow: 0 4px 22px rgba(224,168,91,0.10);
}

/* بطاقات الخدمات */
:root[data-theme="alula"] .svc-card:hover {
  border-color: rgba(224,168,91,0.42);
  box-shadow: 0 6px 22px rgba(224,168,91,0.14);
}
:root[data-theme="alula"] .svc-icon {
  background: linear-gradient(135deg, rgba(110,61,26,0.6), rgba(224,168,91,0.22));
  border-color: rgba(224,168,91,0.22);
}
:root[data-theme="alula"] .svc-card:hover .svc-icon {
  background: linear-gradient(135deg, rgba(110,61,26,0.85), rgba(224,168,91,0.42));
  box-shadow: 0 4px 18px rgba(224,168,91,0.22);
}
:root[data-theme="alula"] .svc-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(224,168,91,0.28);
}

/* أزرار h-btn — توهّج عنبري (يتجاوز البنفسجي الصريح في الأساس) */
:root[data-theme="alula"] .h-btn { box-shadow: 0 4px 18px rgba(224,168,91,0.22); }
:root[data-theme="alula"] .h-btn:hover { box-shadow: 0 6px 26px rgba(224,168,91,0.34); }
:root[data-theme="alula"] .h-btn.outline:hover { background: rgba(224,168,91,0.10); }

/* أزرار الشريط العلوي */
:root[data-theme="alula"] .top-nav .nav-btn { background: rgba(224,168,91,0.10); }
:root[data-theme="alula"] .top-nav .nav-btn:hover { background: rgba(224,168,91,0.20); }

/* الزر المركزي السفلي (طلب) — الخلفية var(--gradient) عنبرية تلقائياً، نعالج التوهّج */
:root[data-theme="alula"] .nav-icon-request { box-shadow: 0 4px 18px rgba(224,168,91,0.40); }
:root[data-theme="alula"] .nav-icon-request::before { background: rgba(224,168,91,0.15); }
:root[data-theme="alula"] .nav-item-request:hover .nav-icon-request { box-shadow: 0 6px 24px rgba(224,168,91,0.50); }
:root[data-theme="alula"] .nav-item-request.active .nav-icon-request { box-shadow: 0 4px 22px rgba(224,168,91,0.60); }

/* زر الدعم + بانر الدعم (تجاوز inline cyan/بنفسجي) */
:root[data-theme="alula"] .nav-actions a[target="_blank"] {
  background: rgba(224,168,91,0.10) !important;
  border-color: rgba(224,168,91,0.22) !important;
}
:root[data-theme="alula"] #supportBanner {
  background: rgba(224,168,91,0.08) !important;
  border-bottom-color: rgba(224,168,91,0.22) !important;
}

/* عناصر playlist drawer + رسائل التحفيز */
:root[data-theme="alula"] .playlist-drawer .drawer-item:hover,
:root[data-theme="alula"] .playlist-drawer .drawer-item.playing { background: rgba(224,168,91,0.08); }
:root[data-theme="alula"] .peer-motivate { background: rgba(224,168,91,0.08); }

/* لمسات الفحص النهائي (مقابلات قواعد البنفسجي) */
:root[data-theme="alula"] .theme-toggle-btn.is-changing { box-shadow: 0 0 0 4px rgba(224,168,91,0.32); }
:root[data-theme="alula"] .h-notif-banner {
  background: linear-gradient(135deg, rgba(224,168,91,0.10), rgba(224,168,91,0.03));
  border: 1px solid rgba(224,168,91,0.22);
}
:root[data-theme="alula"] .poster-card:hover {
  border-color: rgba(224,168,91,0.40);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(224,168,91,0.25);
}
:root[data-theme="alula"] .vid-bookmark-item:hover { border-color: var(--primary); background: rgba(224,168,91,0.06); }
:root[data-theme="alula"] .poster-action-btn.request {
  background: linear-gradient(135deg, #6e3d1a 0%, #e0a85b 100%);
  box-shadow: 0 4px 16px rgba(224,168,91,0.30);
}

/* أيقونة الحساب (lavender في الأساس) ⇒ عنبري */
:root[data-theme="alula"] .nav-item.active .nav-icon-profile {
  background: rgba(224,168,91,0.10);
  box-shadow: 0 2px 12px rgba(224,168,91,0.15);
}
:root[data-theme="alula"] .nav-item.active .nav-icon-profile + span { color: #f0c07e; }
:root[data-theme="alula"] .nav-item:hover .nav-icon-profile { background: rgba(224,168,91,0.06); }