/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║                    THEME: NIGHT (DARK MODE)                   ║
 * ║                  ثيم الليل - الوضع الداكن                   ║
 * ╚═══════════════════════════════════════════════════════════════╝
 * 
 * Dark theme with purple accent
 * مدرسة الإرشاد - 2026
 */

body.theme-night {
  /* ═══════════════════════════════════════════════════════════
   * PRIMARY THEME COLORS
   * ═══════════════════════════════════════════════════════════ */
  
  --primary-color: #7c3aed;
  --primary-color-rgb: 124, 58, 237;
  --primary-light: #8b5cf6;
  --primary-dark: #6d28d9;
  
  --secondary-color: #c026d3;
  --secondary-color-rgb: 192, 38, 211;
  --secondary-light: #d946ef;
  --secondary-dark: #a21caf;

  /* Compatibility aliases */
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --primary-rgb: var(--primary-color-rgb);
  --secondary-rgb: var(--secondary-color-rgb);

  /* ═══════════════════════════════════════════════════════════
   * SURFACE & BACKGROUND COLORS (DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --bg-color: #1e1b4b;
  --light-bg: #1e1b4b;
  --dark-bg: #1e1b4b;
  
  --surface-0: #312e81;
  --surface-1: rgba(30, 27, 75, 0.9);
  --surface-2: rgba(30, 27, 75, 0.98);
  --surface-3: #2e2a66;
  --surface-muted: #2e2a66;
  --border-soft: rgba(226, 232, 240, 0.12);
  
  --nav-bg: rgba(30, 27, 75, 0.9);
  --sidebar-bg: rgba(30, 27, 75, 0.98);

  /* ═══════════════════════════════════════════════════════════
   * TEXT COLORS (LIGHT TEXT FOR DARK BACKGROUND)
   * ═══════════════════════════════════════════════════════════ */
  
  --text-main: #e2e8f0;
  --text-primary: #e2e8f0;
  --text-light: #94a3b8;
  --text-secondary: #94a3b8;
  --text-color: #e2e8f0;
  
  --text-0: #f1f5f9;
  --text-1: #e2e8f0;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;

  /* توافق مع tokens: نصوص قوية/ثانوية في الوضع الداكن (كانت تبقى من :root داكنة على خلفية داكنة) */
  --text-strong: var(--text-0);
  --text-muted: var(--text-3);

  /* ═══════════════════════════════════════════════════════════
   * NAVIGATION (DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --nav-text: var(--text-main);
  --nav-text-hover: var(--primary-light);
  --nav-bg-hover: rgba(var(--primary-color-rgb), 0.15);
  --nav-active-bg: rgba(var(--primary-color-rgb), 0.25);

  /* ═══════════════════════════════════════════════════════════
   * SHADOWS & ACCENTS (STRONGER FOR DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --accent-shadow: rgba(124, 58, 237, 0.4);
  --shadow: 0 4px 15px var(--accent-shadow);
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  
  /* ═══════════════════════════════════════════════════════════
   * BORDERS (LIGHTER FOR DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --border-color: rgba(226, 232, 240, 0.2);
  --border-color-light: rgba(226, 232, 240, 0.1);
  
  /* ═══════════════════════════════════════════════════════════
   * OVERLAYS (ADJUSTED FOR DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.9);
  
  /* ═══════════════════════════════════════════════════════════
   * ABOUT PAGE VARIABLES (DARK MODE)
   * ═══════════════════════════════════════════════════════════ */
  
  --about-text: var(--text-main);
  --about-text-light: var(--text-light);
  --about-bg: var(--surface-0);
  --about-section-bg: var(--surface-1);
  --about-border: rgba(124, 58, 237, 0.3);
  --about-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --about-shadow-hover: 0 20px 60px rgba(124, 58, 237, 0.4);
  
  /* ═══════════════════════════════════════════════════════════
   * RGB VALUES FOR RGBA USAGE
   * ═══════════════════════════════════════════════════════════ */
  
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;
}

/* ═══════════════════════════════════════════════════════════
 * DARK MODE SPECIFIC ADJUSTMENTS
 * ═══════════════════════════════════════════════════════════ */

/* Cards and surfaces - now use CSS variables automatically */
body.theme-night .card,
body.theme-night .surface {
  background: var(--surface-0);
  border-color: rgba(124, 58, 237, 0.2);
}

/* Disable badge sheen in dark mode (mobile + desktop) — نطاقات صريحة (تتعارض مع تحميل CSS متعدد) */
body.theme-night #top-students .badge-sheen-wrap::after,
body.theme-night #custom-student-modal .badge-sheen-wrap::after,
body.theme-night #staff-section .badge-sheen-wrap::after,
body.theme-night #custom-teacher-modal .badge-sheen-wrap::after {
  animation: none !important;
  content: none !important;
}

/* Images have slight brightness reduction for dark mode comfort */
body.theme-night img {
  opacity: 0.95;
}

/*
 * معرض مودال النشاط (دسكتوب): يعتمد على opacity لإخفاء الشرائح غير النشطة.
 * القاعدة العامة أعلاه بنفس الخصوصية تقريباً فقد تُلغى opacity:0 → كل الصور تتراكم.
 */
body.theme-night .desktop-modal-gallery img {
  opacity: 0;
}

body.theme-night .desktop-modal-gallery img.active {
  opacity: 1;
}

/* معرض المودال على الموبايل: شرائح translateX — opacity كاملة حتى لا يختلط مع الشرائح المجاورة */
body.theme-night .mobile-modal-gallery > img {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
 * ACTIVITIES — كبسولات البطاقة (ليلي)
 * نفس تلوين المودال: كل كبسولة بلون مميز
 * ═══════════════════════════════════════════════════════════ */

/* تلوين الكبسولات في الثيم الليلي — specificity أعلى من الافتراضي */
body.theme-night :is(#activities, #home-activities-grid) .activity-date {
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(233, 30, 99, 0.25);
}
body.theme-night :is(#activities, #home-activities-grid) .activity-date i {
  color: #fff;
}

body.theme-night :is(#activities, #home-activities-grid) .activity-time {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
body.theme-night :is(#activities, #home-activities-grid) .activity-time i {
  color: #fff;
}

body.theme-night :is(#activities, #home-activities-grid) .activity-views:not(.activity-badge) {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
body.theme-night :is(#activities, #home-activities-grid) .activity-views:not(.activity-badge) i {
  color: #fff;
}

/* تحسين ظل الموقع الديناميكي */
body.theme-night :is(#activities, #home-activities-grid) .activity-location {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* كبسولات الهيرو — نفس المعاملة الملونة */
body.theme-night #activities .capsule {
  background: var(--capsule-accent, var(--primary-color));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(var(--black-rgb), 0.2);
}
body.theme-night #activities .capsule i,
body.theme-night #activities .capsule small {
  color: #fff;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════
 * STAFF/STUDENTS MODAL — أسطح داخلية + حدود
 * ═══════════════════════════════════════════════════════════ */
body.theme-night .profile-details {
  background: var(--surface-3);
  border-color: var(--border-color);
}
body.theme-night .profile-footer {
  border-top-color: var(--border-color);
}

/* ═══════════════════════════════════════════════════════════
 * STAFF MODAL — عناوين الأقسام + نصوص + حدود
 * ═══════════════════════════════════════════════════════════ */
body.theme-night .modal-staff-qualifications h3,
body.theme-night .modal-staff-contact h3 {
  color: var(--text-1);
}
body.theme-night .contact-item span {
  color: var(--text-2);
}
body.theme-night .modal-staff-qualifications,
body.theme-night .modal-staff-contact {
  border-bottom-color: var(--border-color);
}

/* ═══════════════════════════════════════════════════════════
 * NO-RESULTS PANELS — خلفية بيضاء → داكنة
 * ═══════════════════════════════════════════════════════════ */
body.theme-night .no-staff-results,
body.theme-night .no-students-results {
  background: var(--surface-0);
}
body.theme-night .no-staff-results h3,
body.theme-night .no-students-results h3 {
  color: var(--text-0);
}
body.theme-night .no-staff-results p,
body.theme-night .no-students-results p {
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════
 * ABOUT PAGE — Dark Mode Overrides
 * المشكلة: البطاقات لها نفس لون خلفية القسم → لا عمق مرئي
 * الحل: رفع طفيف عبر rgba(255,255,255,0.05) + حدود مرئية
 * ═══════════════════════════════════════════════════════════ */

/* ─── Bento Grid (Quick Info) ─────────────────────────────── */
body.theme-night .bento-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
body.theme-night .bento-item:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  border-color: rgba(var(--primary-color-rgb), 0.45);
}

/* ─── Timeline (History) ──────────────────────────────────── */
body.theme-night .timeline-content {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.theme-night .timeline-content:hover {
  box-shadow: 0 8px 32px rgba(var(--primary-color-rgb), 0.25);
  border-color: rgba(var(--primary-color-rgb), 0.4);
}
/* content-inner رفيق الـ timeline-content → شفاف حتى يتوارث الخلفية */
body.theme-night .timeline-content-inner {
  background: transparent;
}
/* sidebar يأخذ ظلاً داكناً طفيفاً للتمييز عن منطقة النص */
body.theme-night .timeline-sidebar {
  background: rgba(0, 0, 0, 0.18);
  border-left-color: var(--border-color);
}
/* الرقم الكبير — الـ neutrals الرمادية غير مرئية على خلفية أرجوانية داكنة */
body.theme-night .timeline-number {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.35));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-night .timeline-content:hover .timeline-number {
  background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* تاريخ الحدث عند hover */
body.theme-night .timeline-content:hover .timeline-sidebar .timeline-date {
  background: rgba(var(--primary-color-rgb), 0.2);
}

/* ─── Vision / Mission (Yin-Yang) ─────────────────────────── */
/* البطاقة الفاتحة تصبح شبه شفافة في الوضع الداكن */
body.theme-night .yinyang-light {
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid var(--border-color);
}
body.theme-night .yinyang-grid {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
/* عنوان ونص البطاقة الفاتحة */
body.theme-night .yinyang-light .yinyang-title {
  color: var(--text-primary);
}
body.theme-night .yinyang-light .yinyang-desc {
  color: var(--text-secondary);
}

/* ─── Values (Hexagons) ───────────────────────────────────── */
body.theme-night .hex-shape {
  background: rgba(255, 255, 255, 0.05);
}
/* الطبقة الداخلية (::after) تخلق تأثير الحافة — تطابق bg القسم */
body.theme-night .hex-shape::after {
  background: var(--surface-1);
}
body.theme-night .hex-shape::before {
  opacity: 0.18;
}
body.theme-night .hex-cell:hover .hex-shape::before {
  opacity: 0.3;
}

/* ─── Achievements (Orbit Cards) ──────────────────────────── */
body.theme-night .orbit-card-inner {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
body.theme-night .orbit-card:hover .orbit-card-inner {
  border-color: rgba(var(--primary-color-rgb), 0.5);
  box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.3);
}
/* حلقات المدار */
body.theme-night .orbit-ring {
  opacity: 0.2;
}

/* ─── Hashtags ────────────────────────────────────────────── */
body.theme-night .hashtag {
  background: rgba(var(--primary-color-rgb), 0.2);
  border: 1px solid rgba(var(--primary-color-rgb), 0.4);
  color: var(--primary-light);
}
body.theme-night .hashtag:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* ─── Contact / Social Hub ───────────────────────────────── */
body.theme-night .hub-social-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.35);
}
body.theme-night .hub-social-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  border-color: rgba(var(--primary-color-rgb), 0.4);
}
body.theme-night .hub-social-info h4 {
  color: var(--text-primary);
}
body.theme-night .hub-social-info p {
  color: var(--text-secondary);
}

/* ─── Back to Home Button ────────────────────────────────── */
body.theme-night .back-to-home {
  background: linear-gradient(to bottom, var(--surface-0) 0%, var(--surface-1) 100%);
}

/* ═══════════════════════════════════════════════════════════
 * HOME PAGE — Dark Mode Overrides
 * المشكلة: القيم الـ hardcoded مثل rgba(white,0.8) و rgba(black,0.05)
 * تكسر الثيم الداكن. النمط: rgba(255,255,255,0.06) للبطاقات،
 * rgba(255,255,255,0.12) للحدود — نفس نهج About page
 * ═══════════════════════════════════════════════════════════ */

/* ─── Hero / Main Section ─────────────────────────────────── */
body.theme-night .main-section {
  background: #1e1b4b;
}

/* info-card في الهيرو (بطاقة إحصائيات اليمين) */
body.theme-night .info-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

/* stat-item داخل الهيرو */
body.theme-night .stat-item {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
}
body.theme-night .stat-item:hover {
  background: #7c3aed;
  color: #fff;
}

/* abt-col — الأعمدة الثلاثة أسفل الهيرو (كانت rgba(white,0.8) = شبه أبيض) */
body.theme-night .abt-col {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.theme-night .abt-col:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
}

/* ─── Features Section ────────────────────────────────────── */
body.theme-night .features {
  background: #1e1b4b;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}

/* feature-card (كانت border: rgba(black,0.05) = غير مرئية) */
body.theme-night .feature-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
body.theme-night .feature-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
}
body.theme-night .feature-card h3 {
  color: #e2e8f0;
}
body.theme-night .feature-card p {
  color: #94a3b8;
}

/* ─── CTA Section ─────────────────────────────────────────── */
body.theme-night .cta-section {
  background: #312e81;
}

/* cta-card (كانت border: rgba(black,0.05) = غير مرئية) */
body.theme-night .cta-card {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
body.theme-night .cta-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
body.theme-night .cta-content h3 {
  color: #e2e8f0;
}
body.theme-night .cta-card:hover .cta-content h3 {
  color: #c4b5fd;
}
body.theme-night .cta-content p {
  color: #94a3b8;
}
body.theme-night .cta-card:hover .cta-content p {
  color: #e2e8f0;
}
body.theme-night .cta-stats .stat-number {
  color: #c4b5fd;
}
body.theme-night .cta-card:hover .cta-stats .stat-number {
  color: #e879f9;
}
body.theme-night .cta-stats .stat-label {
  color: #94a3b8;
}
body.theme-night .cta-card:hover .cta-stats .stat-label {
  color: #e2e8f0;
}

/* ─── Library Showcase ────────────────────────────────────── */
body.theme-night .library-showcase {
  background: #1e1b4b;
}

/* نمط الخلفية النقطي: كان أزرقاً فاتحاً على داكن — أخف وأقل صخباً */
body.theme-night .library-showcase::before {
  opacity: 0.22;
  filter: brightness(0.55) saturate(0.7);
}

body.theme-night .library-showcase .library-image {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

body.theme-night .library-showcase .library-badge {
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.theme-night .library-showcase .library-info h3 {
  text-shadow: none;
}

/* فاصل قسم المحتوى المميز */
body.theme-night .library-showcase .featured-content-section {
  border-top-color: rgba(255, 255, 255, 0.16);
}

body.theme-night .library-showcase .featured-section-title {
  color: var(--text-main);
}

/* featured-card — نفس منطق شرائط المكتبة (ذهبي مسطح + زجاج) */
body.theme-night .library-showcase .featured-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #fbbf24;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.38);
}

body.theme-night .library-showcase .featured-card::before {
  background: #fbbf24;
}

body.theme-night .library-showcase .featured-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fcd34d;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

body.theme-night .library-showcase .featured-badge {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(167, 139, 250, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

body.theme-night .library-showcase .template-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--primary-light) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.theme-night .library-showcase .featured-title {
  color: var(--text-main);
}

body.theme-night .library-showcase .featured-description {
  color: var(--text-secondary);
}

/* ميتا بطاقة المحتوى المميز (الهيكل القديم): نفس كبسولات شريط المكتبة */
body.theme-night .library-showcase .featured-card .meta-item {
  color: var(--text-secondary);
}

body.theme-night .library-showcase .featured-card .meta-item i {
  color: rgba(125, 211, 252, 0.82);
}

body.theme-night .library-showcase .featured-card .featured-meta .meta-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: none;
}

body.theme-night .featured-card-footer {
  border-top-color: rgba(255, 255, 255, 0.14);
}

body.theme-night .downloads-count {
  color: #94a3b8;
}

body.theme-night .library-showcase .downloads-count i {
  color: var(--primary-light);
}

body.theme-night .library-showcase .featured-btn {
  background: #fbbf24;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

body.theme-night .library-showcase .featured-btn:hover {
  background: #f59e0b;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

/* شرائط بطاقات المكتبة: إطار ذهبي مسطح = لون النجمة (#fbbf24) — بلا تدرجات */
body.theme-night :is(.library-showcase, #library) .material-strip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #fbbf24;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.38);
}

body.theme-night :is(.library-showcase, #library) .material-strip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fcd34d;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* الشريط الجانبي/العلوي (::before) — نفس الذهبي المسطح */
body.theme-night :is(.library-showcase, #library) .material-strip::before {
  background: #fbbf24;
  opacity: 1;
  filter: none;
}

body.theme-night :is(.library-showcase, #library) .material-strip:hover::before {
  background: #fcd34d;
}

body.theme-night :is(.library-showcase, #library) .material-strip.is-featured {
  border-color: #fbbf24;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.38);
}

body.theme-night :is(.library-showcase, #library) .material-strip.is-featured::before {
  background: #fbbf24;
}

body.theme-night :is(.library-showcase, #library) .material-strip.is-featured:hover {
  border-color: #fcd34d;
}

/* أيقونة القالب (دسكتوب): الخلفية من inline/النظام — لا نُلغيها؛ إطار ليلي + ظل مزدوج لأي لون */
body.theme-night :is(.library-showcase, #library) .material-strip .strip-icon {
  border: 1px solid rgba(248, 250, 252, 0.24);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.32);
  color: var(--text-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.theme-night :is(.library-showcase, #library) .material-strip .strip-title {
  color: var(--text-main);
}

body.theme-night :is(.library-showcase, #library) .material-strip .strip-description {
  color: var(--text-secondary);
}

/* كبسولة نوع القالب — وضوح معتدل يتماشى مع زجاج البطاقة (بدون وهج ذهبي قوي) */
body.theme-night :is(.library-showcase, #library) .strip-type-capsule {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  font-weight: 600;
}

/* شارة القالب (موبايل) — نفس درجة البطاقة */
body.theme-night :is(.library-showcase, #library) .strip-corner--dual-anchor.strip-corner--template {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* كبسولات الميتا — قريبة من سطح البطاقة، أيقونات مُخفّضة لا تطغى على العنوان */
body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--text-secondary);
  font-weight: 500;
  box-shadow: none;
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(124, 58, 237, 0.28);
  color: var(--text-main);
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:nth-child(1) i {
  color: rgba(125, 211, 252, 0.82);
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:nth-child(2) i {
  color: rgba(253, 224, 71, 0.75);
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:nth-child(3) i {
  color: rgba(196, 181, 253, 0.82);
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:nth-child(4) i {
  color: rgba(110, 231, 183, 0.78);
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item .downloads-count {
  color: var(--text-main);
  font-weight: 600;
}

body.theme-night :is(.library-showcase, #library) .strip-meta .meta-item:hover i {
  filter: none;
}

body.theme-night :is(.library-showcase, #library) .material-strip .download-link {
  background: #fbbf24;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

body.theme-night :is(.library-showcase, #library) .material-strip .download-link i,
body.theme-night :is(.library-showcase, #library) .material-strip .download-link span {
  color: #ffffff;
}

body.theme-night :is(.library-showcase, #library) .material-strip .download-link:hover {
  background: #f59e0b;
  color: #ffffff;
  border: none;
  filter: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

/* نجمة المحتوى المميز — ذهبية (هوم + صفحة المكتبة) */
body.theme-night :is(.library-showcase, #library) .featured-star {
  color: #fbbf24;
  animation: none;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-weight: 600;
  box-shadow: none;
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill--downloads {
  color: var(--text-main);
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill--with-icon > i {
  color: rgba(253, 224, 71, 0.72);
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-file-pills .file-pill:nth-child(2) > i {
  color: rgba(196, 181, 253, 0.8);
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill--downloads > i {
  color: rgba(110, 231, 183, 0.75);
}

body.theme-night :is(.library-showcase, #library) .strip-corner-count-num {
  color: var(--text-main);
  font-weight: 600;
}

/* كبسولة الناشر (موبايل مدمج): نفس منطق file-pill — ثانوية بصرياً حتى لا تطغى على العنوان */
body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-meta--compact-single .meta-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--text-secondary);
  font-weight: 600;
  box-shadow: none;
}

body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-meta--compact-single .meta-item i {
  color: rgba(125, 211, 252, 0.78);
}

/* أيقونة القالب (مضغوط): نفس المنطق — لون الخلفية ديناميكي من النظام */
body.theme-night :is(.library-showcase, #library) .strip-icon--compact {
  border: 1px solid rgba(248, 250, 252, 0.24);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.4),
    0 3px 12px rgba(0, 0, 0, 0.3);
  color: var(--text-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ≤768px — تخطيط الشريط المدمج: شريط علوي أنعم، نصوص وحبوب متناسقة مع البطاقة (هوم + صفحة المكتبة) */
@media (max-width: 768px) {
  body.theme-night :is(.library-showcase, #library) .material-strip.material-strip--dual-layout::before {
    background: #fbbf24;
    opacity: 1;
    filter: none;
  }

  body.theme-night :is(.library-showcase, #library) .material-strip.material-strip--dual-layout:hover::before {
    background: #fcd34d;
    filter: none;
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .library-card-mobile .strip-title {
    color: var(--text-main);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-description.strip-description--compact {
    color: var(--text-secondary);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-corner--dual-anchor.strip-corner--template {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill {
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.11);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .file-pill--downloads {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .library-card-mobile .strip-actions .download-link {
    background: #fbbf24;
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.26);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .library-card-mobile .strip-actions .download-link i,
  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .library-card-mobile .strip-actions .download-link span {
    color: #ffffff;
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .library-card-mobile .strip-actions .download-link:hover {
    background: #f59e0b;
    color: #ffffff;
    border: none;
    filter: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-icon--compact {
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.4),
      0 2px 10px rgba(0, 0, 0, 0.26);
  }
}

@media (max-width: 480px) {
  body.theme-night :is(.library-showcase, #library) .material-strip--dual-layout .strip-meta--compact-single .meta-item {
    font-size: 0.78rem;
  }
}

/* feature-item داخل library-showcase — حدود ثلاثية فقط حتى لا يُلغى لون الشريط من nth-child */
body.theme-night .library-showcase .feature-item {
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body.theme-night .library-showcase .feature-item:hover {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

body.theme-night .library-showcase .feature-item span {
  color: #e2e8f0;
}

/* stat-item داخل library-stats (كانت border: rgba(black,0.05) = غير مرئية) */
body.theme-night .library-stats .stat-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
body.theme-night .library-stats .stat-item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
body.theme-night .library-stats .stat-number {
  color: #c4b5fd;
}
body.theme-night .library-stats .stat-label {
  color: #94a3b8;
}

/* library-info نصوص */
body.theme-night .library-info h3 {
  color: #e2e8f0;
}
body.theme-night .library-info p {
  color: #94a3b8;
}

/* meta-item — كان #64748b يختفي على الخلفيات الداكنة (المكتبة + غيرها) */
body.theme-night .meta-item {
  color: var(--text-secondary);
}

/* ─── Student Care ────────────────────────────────────────── */
body.theme-night .student-care {
  background: #312e81;
}

/* policy-item (كانت border-left فقط، bg = var(--surface-0) = مقبول لكن border جانبية قد تختفي) */
body.theme-night .policy-item {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.theme-night .policy-item:hover {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
body.theme-night .policy-content h4 {
  color: #e2e8f0;
}
body.theme-night .policy-content p {
  color: #94a3b8;
}
body.theme-night .care-info h3 {
  color: #e2e8f0;
}
body.theme-night .care-info > p {
  color: #94a3b8;
}

/* ─── Testimonials ────────────────────────────────────────── */
body.theme-night .testimonials {
  background: #1e1b4b;
}

/* main-rating (بطاقة التقييم الكبيرة) */
body.theme-night .main-rating {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}
body.theme-night .rating-score {
  color: #c4b5fd;
}
body.theme-night .rating-text {
  color: #94a3b8;
}
body.theme-night .rating-info h3 {
  color: #e2e8f0;
}
body.theme-night .rating-info p {
  color: #94a3b8;
}

/* highlight-item */
body.theme-night .highlight-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
body.theme-night .highlight-item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.4);
}
body.theme-night .highlight-content h4 {
  color: #e2e8f0;
}
body.theme-night .rating-value {
  color: #c4b5fd;
}

/* rating-bar خلفية الشريط */
body.theme-night .rating-bar {
  background: rgba(255, 255, 255, 0.12);
}

/* testimonial-card (كانت border: rgba(black,0.05) = غير مرئية) */
body.theme-night .testimonial-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}
body.theme-night .testimonial-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
}
body.theme-night .testimonial-card::before {
  color: #7c3aed;
}
body.theme-night .testimonial-content p {
  color: #94a3b8;
}
body.theme-night .testimonial-author {
  border-top-color: rgba(124, 58, 237, 0.2);
}
body.theme-night .author-info h4 {
  color: #e2e8f0;
}
body.theme-night .author-info span {
  color: #94a3b8;
}

/* ─── Section Titles ──────────────────────────────────────── */
body.theme-night .section-title {
  color: #e2e8f0;
}
body.theme-night .section-subtitle {
  color: #94a3b8;
}
body.theme-night .cta-title {
  color: #e2e8f0;
}
body.theme-night .cta-subtitle {
  color: #94a3b8;
}
body.theme-night .featured-section-title {
  color: #e2e8f0;
}

body.theme-night .featured-section-title i {
  color: #fbbf24;
  animation: none;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}

/* ─── Gallery (الصفحة الرئيسية — شبكة الصور) ────────────────
   لا نستخدم surface-0 هنا: يظهر كصندوق أزرق فاتح يختلف عن خلفية القسم */
body.theme-night .gallery-section,
body.theme-night .gallery {
  background: transparent;
}

body.theme-night .gallery-grid {
  background: transparent;
}

body.theme-night .gallery-item {
  background: transparent;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}

body.theme-night .gallery-item:hover {
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62);
}

/* ─── الصفحة الرئيسية — صناديق معلومات المدرسة (فوق المعرض) ─
   في الليل كانت البطاقات = surface-0 والكبسولات = شفافية منخفضة على نفس السطح
   فيختفي التباين؛ نقرّب المظهر لبطاقات الأنشطة مع حدود وكبسولات أوضح */
body.theme-night #home #about-us-section .primary-info-card,
body.theme-night #home #about-us-section .secondary-info-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.38);
}

body.theme-night #home #about-us-section .primary-info-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--secondary-light));
}

body.theme-night #home #about-us-section .secondary-info-card h4 {
  color: var(--text-main);
}

body.theme-night #home #about-us-section .card-subtitle {
  color: var(--primary-light);
}

body.theme-night #home #about-us-section .detail-item {
  background: color-mix(in srgb, var(--primary-color) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 52%, transparent);
  color: var(--text-0);
}

body.theme-night #home #about-us-section .detail-item i {
  color: var(--primary-light);
}

body.theme-night #home #about-us-section .stat-box {
  background: color-mix(in srgb, var(--primary-color) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 48%, transparent);
}

body.theme-night #home #about-us-section .stat-number {
  color: #c4b5fd;
}

body.theme-night #home #about-us-section .establishment-year {
  background: color-mix(in srgb, var(--subject-english-1) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--subject-english-1) 48%, transparent);
}

body.theme-night #home #about-us-section .establishment-year .year {
  color: var(--subject-english-1);
}

body.theme-night #home #about-us-section .staff-count {
  background: color-mix(in srgb, var(--subject-science-1) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--subject-science-1) 50%, transparent);
}

body.theme-night #home #about-us-section .staff-count .count {
  color: #d8b4fe;
}

body.theme-night #home #about-us-section .metric {
  background: color-mix(in srgb, var(--subject-digital-1) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--subject-digital-1) 48%, transparent);
  color: #5eead4;
}

body.theme-night #home #about-us-section .metric i {
  color: var(--subject-digital-1);
}

body.theme-night #home #about-us-section .info-badge {
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* ─── Activities showcase على الهوم ─────────────────────── */
body.theme-night .activities-showcase {
  background: #312e81;
}
body.theme-night .activities-showcase .section-title {
  color: #e2e8f0;
}

/* ─── بطاقات الأنشطة على الهوم ───────────────────────────── */
body.theme-night .activity-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
body.theme-night .activity-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}
body.theme-night .activity-card .activity-title {
  color: #e2e8f0;
}
body.theme-night .activity-card .activity-description {
  color: #94a3b8;
}

/* ─── home activities showcase component ─────────────────── */
body.theme-night .home-activities-showcase {
  background: #1e1b4b;
}

/* ─── home library showcase component ────────────────────── */
body.theme-night .home-library-showcase {
  background: #312e81;
}

/* ═══════════════════════════════════════════════════════════
 * TOP STUDENTS PAGE — Dark Mode Overrides
 * صفحة المتفوقين: كل البطاقات والمودال والفلاتر
 * ═══════════════════════════════════════════════════════════ */

/* ─── خلفية الصفحة ─────────────────────────────────────── */
body.theme-night #top-students {
  background: #1e1b4b;
}

/* ─── بطاقة الطالب ─────────────────────────────────────── */
body.theme-night .student-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
body.theme-night #top-students .student-card:hover,
body.theme-night #staff-section .student-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
}

/* حدود أفاتار الطالب في البطاقة (كانت var(--surface-0) = أبيض) */
body.theme-night .profile-avatar {
  border-color: rgba(255, 255, 255, 0.15);
}

/* اسم الطالب */
body.theme-night .profile-name {
  color: #e2e8f0;
}
body.theme-night .student-card:hover .profile-name {
  color: #c4b5fd;
}

/* الصف والشعبة في البطاقة */
body.theme-night .profile-position {
  color: #e2e8f0;
}
body.theme-night .profile-department {
  color: #94a3b8;
}

/* ─── شريط البحث ─────────────────────────────────────── */
body.theme-night .search-box-oval,
body.theme-night #top-students .search-box-oval {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.theme-night .search-box-oval:hover,
body.theme-night #top-students .search-box-oval:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(124, 58, 237, 0.5);
}
body.theme-night .search-input-oval,
body.theme-night #top-students .search-input-oval {
  color: #e2e8f0;
}
body.theme-night .search-input-oval::placeholder,
body.theme-night #top-students .search-input-oval::placeholder {
  color: #64748b;
}

/* ─── شريط الفلاتر الموحد ─────────────────────────────── */
body.theme-night .unified-filters-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* أزرار الفلاتر غير النشطة */
body.theme-night .unified-filter-btn:not(.active),
body.theme-night [data-grade]:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}
body.theme-night .unified-filter-btn:not(.active):hover,
body.theme-night [data-grade]:not(.active):hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.5);
  color: #e2e8f0;
}

/* القائمة المنسدلة */
body.theme-night .oval-select-wrapper {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
body.theme-night .oval-select-wrapper:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.5);
}
body.theme-night .oval-select {
  color: #94a3b8;
  background: transparent;
}
body.theme-night .oval-select option {
  background: #312e81;
  color: #e2e8f0;
}

/* الخيار المحدّد/المرور: يتجاوز أنماط staff-modern (نص أبيض على تدرج قد لا يُطبَّق في القائمة الأصلية) */
body.theme-night .oval-select option:checked,
body.theme-night .oval-select option:hover {
  background: rgba(124, 58, 237, 0.42);
  color: #f8fafc;
}

/* عداد النتائج */
body.theme-night .unified-results-count {
  color: #64748b;
}

/* ─── عنوان قسم البحث ─────────────────────────────────── */
body.theme-night #top-students .section-header .section-title {
  color: #e2e8f0;
}
body.theme-night #top-students .section-header .section-subtitle {
  color: #94a3b8;
}

/* ─── لا توجد نتائج ──────────────────────────────────── */
body.theme-night .no-students-results {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
}

/* ─── STUDENT MODAL — Dark Mode ──────────────────────── */
/* البطاقة الداخلية (كانت background: white) */
body.theme-night .student-modal-card {
  background: #1e1b4b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* حدود الأفاتار في المودال */
body.theme-night .student-modal-avatar {
  border-color: #312e81;
  background: #2e2a66;
}

/* اسم الطالب في المودال */
body.theme-night .student-modal-name {
  color: #e2e8f0;
}

/* النصوص داخل المودال */
body.theme-night .student-modal-position {
  color: #e2e8f0;
}
body.theme-night .student-modal-department {
  color: #94a3b8;
}

/* خلفية منطقة التفاصيل (كانت #f8f9fa = رمادي فاتح) */
body.theme-night .student-modal-details,
body.theme-night .profile-details {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

/* عناصر التفاصيل الفردية (كانت background: white) */
body.theme-night .student-modal-detail-item,
body.theme-night .detail-item {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-night .student-modal-detail-item:hover,
body.theme-night .detail-item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.3);
}

/* النصوص داخل عناصر التفاصيل */
body.theme-night .student-modal-detail-item strong,
body.theme-night .detail-item strong {
  color: #e2e8f0;
}
body.theme-night .student-modal-detail-item span,
body.theme-night .student-modal-bio-text {
  color: #94a3b8;
}

/* أيقونة التفاصيل */
body.theme-night .detail-icon {
  color: #8b5cf6;
}
body.theme-night .student-modal-star-icon {
  color: #fbbf24;
}
body.theme-night .student-modal-medal-icon {
  color: #f59e0b;
}

/* فوتر المودال */
body.theme-night .student-modal-footer,
body.theme-night .profile-footer {
  background: #7c3aed;
}

/* ─── profile-details في البطاقات العامة ─────────────── */
body.theme-night .profile-details {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
body.theme-night .profile-footer {
  border-top-color: rgba(255, 255, 255, 0.10);
}

/* ═══════════════════════════════════════════════════════════
 * STAFF PAGE — Dark Mode Overrides
 * صفحة الكادر المتميز: البطاقات والمودال والفلاتر
 * ═══════════════════════════════════════════════════════════ */

/* ─── خلفية الصفحة ─────────────────────────────────────── */
body.theme-night #staff-section {
  background: #1e1b4b;
}

/* ─── hero section ──────────────────────────────────────── */
body.theme-night #staff-section .page-hero {
  background: #312e81;
}
body.theme-night #staff-section .hero-title {
  color: #e2e8f0;
}
body.theme-night #staff-section .hero-subtitle {
  color: #94a3b8;
}

/* ─── بطاقة المعلم (student-card class تُستخدم للمعلمين أيضاً) ─ */
body.theme-night #staff-section .student-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* ─── profile-card في شبكة الكادر ──────────────────────── */
body.theme-night #staffGrid .profile-card,
body.theme-night #staff-section .profile-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
body.theme-night #staffGrid .profile-card:hover,
body.theme-night #staff-section .profile-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.5);
}

/* أسماء في البطاقات */
body.theme-night #staff-section .profile-name {
  color: #e2e8f0;
}
body.theme-night #staff-section .profile-position {
  color: #e2e8f0;
}
body.theme-night #staff-section .profile-department {
  color: #94a3b8;
}
body.theme-night #staff-section .profile-desc {
  color: #94a3b8;
}

/* أفاتار الحدود */
body.theme-night #staff-section .profile-avatar {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ─── نجوم البطاقة ───────────────────────────────────────── */
body.theme-night #staff-section .star.filled,
body.theme-night #staff-section .star.half {
  color: #fbbf24;
}
body.theme-night #staff-section .star.empty {
  color: rgba(255, 255, 255, 0.25);
}

/* ─── زر التفاصيل في البطاقة ──────────────────────────── */
body.theme-night #staff-section .card-footer-btn {
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: #c4b5fd;
}
body.theme-night #staff-section .card-footer-btn:hover {
  background: rgba(124, 58, 237, 0.25);
  color: #e2e8f0;
}

/* ─── شريط البحث ─────────────────────────────────────── */
body.theme-night #staff-section .search-box-oval,
body.theme-night #staff-section .advanced-filters .search-box-oval {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.theme-night #staff-section .search-box-oval:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(124, 58, 237, 0.5);
}
body.theme-night #staff-section .search-input-oval {
  color: #e2e8f0;
}
body.theme-night #staff-section .search-input-oval::placeholder {
  color: #64748b;
}

/* ─── شريط الفلاتر ─────────────────────────────────────── */
body.theme-night #staff-section .unified-filters-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body.theme-night #staff-section .unified-filter-btn:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}
body.theme-night #staff-section .unified-filter-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.5);
  color: #e2e8f0;
}

/* القائمة المنسدلة */
body.theme-night #staff-section .oval-select-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.theme-night #staff-section .oval-select {
  color: #94a3b8 !important;
  background: transparent !important;
}
body.theme-night #staff-section .oval-select option {
  background: #312e81;
  color: #e2e8f0;
}

/* ─── section header ───────────────────────────────────── */
body.theme-night #staff-section .section-title {
  color: #e2e8f0;
}
body.theme-night #staff-section .section-subtitle {
  color: #94a3b8;
}

/* ─── TEACHER MODAL — Dark Mode ──────────────────────── */
/* البطاقة الداخلية (كانت background: white) */
body.theme-night .teacher-modal-card {
  background: #1e1b4b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* أفاتار المودال */
body.theme-night .teacher-modal-avatar {
  border-color: #312e81;
  background: #2e2a66;
}

/* اسم المعلم */
body.theme-night .teacher-modal-name {
  color: #e2e8f0;
}

/* التخصص */
body.theme-night .teacher-modal-position {
  color: #e2e8f0;
}

/* النجوم في المودال */
body.theme-night .teacher-modal-stars .star.filled,
body.theme-night .teacher-modal-stars .star.half {
  color: #fbbf24;
}
body.theme-night .teacher-modal-stars .star.empty {
  color: rgba(255, 255, 255, 0.20);
}

/* placeholder الأفاتار في المودال */
body.theme-night .modal-teacher-avatar-placeholder {
  background: #2e2a66;
  color: rgba(255, 255, 255, 0.30);
}

/* منطقة التفاصيل (كانت #f8f9fa) */
body.theme-night .teacher-modal-details {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

/* عناصر التفاصيل (كانت background: white) */
body.theme-night .teacher-modal-detail-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}
body.theme-night .teacher-modal-detail-item:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(124, 58, 237, 0.3);
}
body.theme-night .teacher-modal-detail-item strong {
  color: #e2e8f0;
}
body.theme-night .teacher-modal-detail-item span {
  color: #94a3b8;
}
body.theme-night .teacher-modal-bio-text {
  color: #94a3b8;
}

/* أيقونة التفاصيل */
body.theme-night .teacher-modal-detail-item .detail-icon {
  color: #8b5cf6;
}
body.theme-night .teacher-modal-star-icon {
  color: #fbbf24;
}
body.theme-night .teacher-modal-medal-icon {
  color: #f59e0b;
}

/* فوتر المودال */
body.theme-night .teacher-modal-footer {
  background: #7c3aed;
}

/* ─── بطاقة الصيانة في الكادر ──────────────────────────── */
body.theme-night .maintenance-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}