/* ============================================================
   platform.css — إضافات خاصة بنسخة PHP فقط
   ------------------------------------------------------------
   هذا الملف يُحمَّل فقط من includes/header.php (نسخة PHP)،
   ولا تشير إليه أي صفحة HTML أصلية — أي تعديل هنا لا يؤثر إطلاقًا
   على النسخة الأصلية القديمة أو school-portal-onepage.html.
   يُحمَّل بعد css/style.css عمدًا كي يجاوز قواعده عند الحاجة فقط،
   دون تعديل ملف style.css نفسه.

   مرحلة الهوية البصرية الكاملة — كحلي عميق + أوف وايت دافئ + بترولي
   هادئ + ذهبي مطفأ محدود. لا نُعيد تعريف متغيرات :root الأصلية
   (--navy, --blue, --gold ...) لتفادي أي أثر غير مباشر — كل توكن
   جديد هنا باسم مختلف تمامًا.
   ============================================================ */

/* -------------------- 1) Design Tokens -------------------- */
:root {
  /* الألوان المعتمدة */
  --navy-primary: #13243E;
  --navy-dark: #101F32;
  --page-bg: #F6F5F0;
  --card-bg: #FFFFFF;
  --soft-gray: #EEF0EE;
  --secondary-bg: #E6E7EB;
  --text-muted: #A2A6AE;
  --teal-accent: #4F8C89;
  --teal-soft: #E8EEEE;
  --gold-accent: #B9975B;
  --gold-soft: #F4EEE3;

  /* ألوان دلالية — تجربة مدير المدرسة فقط (KPI/رسوم/تنبيهات). لا تُستخدم
     للزينة: أخضر=تحسّن/مكتمل/إيجابي، أحمر=انخفاض/يحتاج متابعة/سلبي،
     برتقالي=تنبيه/حالة وسطية. الكحلي يبقى اللون الأساسي للهوية. */
  --success-green: #2E7D5B;
  --success-soft: #E7F2ED;
  --danger-red: #B3413B;
  --danger-soft: #F7EAE9;
  --warning-amber: #B98328;
  --warning-soft: #F6EFE1;

  /* مقياس مسافات موحّد */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Radius / Shadow / Transition موحّدة للبطاقات الجديدة */
  --radius-card: 16px;
  --radius-button: 10px;
  --shadow-card: 0 2px 8px rgba(19, 36, 62, 0.07);
  --shadow-card-hover: 0 10px 22px rgba(19, 36, 62, 0.14);
  --transition-base: 0.25s ease;
}

/* -------------------- 2) الهيدر: هوية كحلية Compact -------------------- */
/* الخلفية: كحلي عميق بفارق طفيف جدًا نحو الأغمق (لا Gradient أزرق قوي)،
   وخط ذهبي رفيع يفصل الهيدر عن المحتوى بأناقة. */
.site-header {
  background: linear-gradient(160deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  padding: 10px 0;
  border-bottom: 2px solid var(--gold-accent);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
}

.brand {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.brand-badge {
  border-color: var(--gold-accent); /* توحيد لون حدّ الشارة مع الذهبي المعتمد الجديد فقط — لا تغيير في الحجم أو الموضع */
}

.brand-text p {
  font-size: 0.76rem;
}

.header-home-link {
  position: relative;
  z-index: 1;
  padding: 7px 14px;
}

.header-home-link:hover {
  border-color: var(--gold-accent);
}

/* -------------------- زاوية الدخول/الخروج في الهيدر — عنصر ثانوي هادئ -------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* نفس الأسلوب البصري لرابط "⟵ الرئيسية" تمامًا — بلا تصميم منفصل.
   .header-logout-btn زر <button> داخل Form، يُصفَّر Style الافتراضي
   له ليتطابق بصريًا مع رابط <a> المجاور له. */
.header-auth-link {
  /* تصفير مظهر <button> الافتراضي (خروج) ليطابق <a> (لوحة التحكم)
     تمامًا في الأبعاد — appearance/box-sizing/line-height/margin هي
     الفروق المعتادة بين النوعين التي لا يكفي تطابق padding/font-size
     وحده لإزالتها. */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
  transition: all var(--transition-base);
  white-space: nowrap;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.header-auth-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--gold-accent);
}

.header-auth-link:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.header-auth {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* هوية المستخدم — اسم فعلي (ليس زرًا) + الدور تحته بخط صغير، يمينًا
   ضمن مجموعة المستخدم (اسم → لوحة التحكم → خروج، RTL). */
.header-auth-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}

.header-auth-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-auth-role {
  font-size: 0.66rem;
  color: rgba(185, 151, 91, 0.9);
  white-space: nowrap;
}

.header-logout-form {
  margin: 0;
  display: inline-flex;
}

/* جرس التواصل الداخلي — أول عنصر داخل .header-auth (المرحلة ٣)، يظهر
   لذلك مباشرة على يمين اسم المستخدم في تخطيط RTL الحالي. ذهبي
   بهوية المنصة، Badge أحمر لا يُطبَع في HTML إطلاقًا إن كان العدد
   صفرًا (شرط PHP في header.php، وليس إخفاء بصري فقط). */
.header-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--gold-accent);
  text-decoration: none;
  transition: background var(--transition-base);
  flex-shrink: 0;
}

.header-bell:hover,
.header-bell:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.header-bell:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.header-bell svg {
  width: 20px;
  height: 20px;
}

.header-bell-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger-red);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--navy-primary);
}

/* الشعار: قصّ بصري محسوب (لا تعديل على logo.png نفسه) — نفس تقنية
   المرحلة السابقة، بمقياس أكثر انضغاطًا لصالح Compact Header على TV.
   كل الأرقام أدناه ناتجة من تحجيم موحّد للنسخة المعتمدة سابقًا بحيث
   يبقى مركز الشعار الفعلي متمركزًا تمامًا أفقيًا ورأسيًا. */
.header-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 99px;
  overflow: hidden;
  pointer-events: none;
}

.header-logo img {
  position: absolute;
  top: -72px;
  left: -57px;
  width: 244px;
  height: 244px;
  max-width: none;
}

@media (max-width: 1024px) {
  .header-inner { min-height: 90px; }
  .header-logo { width: 112px; height: 85px; }
  .header-logo img { width: 211px; height: 211px; top: -62px; left: -49px; }
}

@media (max-width: 768px) {
  .header-inner { min-height: 78px; }
  .header-logo { width: 95px; height: 72px; }
  .header-logo img { width: 178px; height: 178px; top: -53px; left: -41px; }
  .brand-text h1 { font-size: 1.1rem; }
}

@media (max-width: 640px) {
  .site-header { padding: 10px 0; }
  .header-inner {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    row-gap: 8px;
    text-align: center;
  }
  .brand { order: 2; flex-direction: column; text-align: center; }
  .header-actions { order: 3; flex-wrap: wrap; justify-content: center; }
  .header-logo {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 1;
    width: 84px;
    height: 64px;
    margin: 0 auto;
  }
  .header-logo img { width: 158px; height: 158px; top: -47px; left: -37px; }
}

/* -------------------- 3) خلفية المحتوى بعد الهيدر -------------------- */
body {
  background: var(--page-bg);
}

/* -------------------- 4) أيقونات (SVG بدل Emoji) -------------------- */
.section-icon svg,
.brand-badge svg {
  width: 58%;
  height: 58%;
}

/* -------------------- 5) Hero مضغوط -------------------- */
/* الشارة العلوية (hero-eyebrow) تكرر حرفيًا العبارة الظاهرة أصلًا في
   الهيدر (getSetting('site_tagline')) — تُخفى من العرض فقط بواسطة
   CSS؛ العنصر وبياناته يبقيان في PHP/HTML كما هما دون أي حذف. */
.hero-eyebrow {
  display: none;
}

.hero {
  padding: 22px 24px 22px;
}

.hero h2 {
  margin: 0 0 10px;
  color: var(--navy-primary);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}

.hero p {
  margin: 0 auto;
  color: var(--gray-700);
  font-size: 0.95rem;
}

/* -------------------- 6) الحاوية العامة: مسافات مضغوطة -------------------- */
.page-container {
  padding: 20px 24px 32px;
}

/* الصفحة الرئيسية فقط: الفراغ بعد الهيدر توفّره Hero نفسها، فلا داعٍ
   لتكراره أعلى شبكة البطاقات. */
body[data-page="home"] .page-container {
  padding-top: 0;
  max-width: 1600px; /* استفادة أوسع من عرض شاشة التلفزيون — لا يؤثر على الصفحات الأخرى ولا على الهيدر */
}

body[data-page="home"] .cards-grid {
  margin-top: 0;
}

/* -------------------- 7) بطاقات الأقسام الرئيسية → Section Tiles -------------------- */
/* أيقونة + اسم القسم فقط. البطاقة كلها رابط Semantic واحد (<a>) كما
   كانت أصلًا في renderHomeCardsPhp — لا Nested Links، ولا JS. */
body[data-page="home"] .cards-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  gap: var(--space-4);
}

body[data-page="home"] .section-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  height: 144px;
  padding: 16px 14px;
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* خط ذهبي رفيع علوي يظهر فقط عند Hover — تفصيل فاخر محدود، ليس زخرفة دائمة */
body[data-page="home"] .section-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%) scaleX(0);
  width: 56%;
  height: 3px;
  background: var(--gold-accent);
  border-radius: 0 0 3px 3px;
  transition: transform var(--transition-base);
}

body[data-page="home"] .section-card:hover,
body[data-page="home"] .section-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

body[data-page="home"] .section-card:hover::before,
body[data-page="home"] .section-card:focus-visible::before {
  transform: translateX(50%) scaleX(1);
}

body[data-page="home"] .section-card:active {
  transform: translateY(-1px) scale(0.98);
}

body[data-page="home"] .section-card:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 3px;
}

body[data-page="home"] .section-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--teal-soft);
  color: var(--navy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

body[data-page="home"] .section-card:hover .section-icon {
  background: var(--gold-soft);
}

/* منطقة عنوان ثابتة الارتفاع (تكفي سطرين) — بذلك تبقى كل البطاقات
   بنفس الارتفاع تمامًا سواء كان اسم القسم قصيرًا أو طويلًا، ولا
   نلجأ إطلاقًا إلى white-space:nowrap أو تصغير خط مبالغ فيه أو Ellipsis. */
body[data-page="home"] .section-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 2.6em;
  line-height: 1.3;
  color: var(--navy-primary);
  font-weight: 700;
  font-size: 1.08rem;
}

/* لم تعد بطاقة الصفحة الرئيسية تعرض الوصف أو زر "فتح القسم" —
   العنصران محذوفان من الإخراج في renderHomeCardsPhp فقط (انظر
   التقرير)، لا من قاعدة البيانات. أي CSS قديم خاص بهما (.card-btn
   في style.css) يبقى غير مستخدم بأمان دون أي أثر مرئي. */

@media (max-width: 1100px) {
  body[data-page="home"] .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-page="home"] .section-card {
    height: 152px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-page="home"] .section-card {
    height: 148px;
  }
  body[data-page="home"] .section-card h3 {
    font-size: 0.95rem;
  }
}

@media (max-width: 400px) {
  body[data-page="home"] .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------- 8) Breadcrumb -------------------- */
.breadcrumb {
  margin: 0 0 18px;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--navy-primary);
}

.breadcrumb a:hover {
  color: var(--teal-accent);
}

.breadcrumb .current {
  color: var(--navy-primary);
}

/* -------------------- 9) بطاقات الملفات داخل صفحات الأقسام -------------------- */
/* Component مشترك على كل صفحات الأقسام (renderFileGroupsPhp +
   renderAcademicAffairsColumnsPhp في includes/render.php) — تعديل
   واحد هنا ينعكس على كل الصفحات فورًا. */
.page-intro {
  color: var(--gray-700);
}

/* إصلاح مركزي لمشكلة الفراغات: كل بطاقة تأخذ ارتفاع محتواها الطبيعي
   فقط، ولا تتمدد لتساوي أطول بطاقة في نفس صف الشبكة. */
.files-grid {
  align-items: start;
}

.file-card {
  background: var(--card-bg);
  border-color: rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.file-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* رأس البطاقة: أيقونة + عنوان في المنتصف تمامًا — نفس فلسفة بطاقات
   الصفحة الرئيسية، بدل الالتصاق بيمين البطاقة سابقًا. */
.file-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 12px;
}

.file-icon {
  background: var(--teal-soft);
  color: var(--navy-primary);
}

.file-card-header h3 {
  margin: 0;
  color: var(--navy-primary);
}

/* العناصر الفرعية: كل عنصر Tile/Button كامل قابل للنقر (أو غير
   تفاعلي إن لم يوجد رابط) بدل تصميم "اسم يمين + زر يسار" القديم.
   لا white-space:nowrap — الأصل سطر واحد طبيعيًا، وسطر ثانٍ فقط
   عند الحاجة الفعلية، بلا Ellipsis أو قص. */
.file-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: var(--soft-gray);
  color: var(--navy-primary);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
  border-radius: var(--radius-button);
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

a.file-tile:hover {
  background: var(--teal-soft);
  box-shadow: var(--shadow-card);
}

a.file-tile:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

a.file-tile:active {
  transform: scale(0.98);
}

span.file-tile {
  cursor: default;
}

.empty-note {
  background: var(--teal-soft);
  color: var(--navy-primary);
  border: 1px dashed var(--teal-accent);
}

/* -------------------- 10) الرؤية / الرسالة / الأهداف / القيم -------------------- */
/* إزالة Gradients القوية — ألوان مسطّحة من الهوية الجديدة فقط، دون أي
   تغيير في النصوص. */
.vm-vision {
  background: var(--navy-primary);
}

.vm-mission {
  background: var(--teal-accent);
}

.vm-goals, .vm-values {
  border-color: rgba(19, 36, 62, 0.06);
  box-shadow: var(--shadow-card);
}

.vm-goals li::before {
  color: var(--teal-accent);
}

.vm-values li::before {
  color: var(--gold-accent);
}

.vm-goals p, .vm-goals li, .vm-values p, .vm-values li {
  color: var(--gray-700);
}

/* -------------------- 11) الهيكل التنظيمي (بيانات وترتيب دون تغيير) -------------------- */
.orgc-card {
  background: var(--card-bg);
  border-color: rgba(19, 36, 62, 0.06);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  color: var(--navy-primary);
}

.orgc-top::after,
.orgc-branch::before {
  background: var(--navy-primary);
}

.orgc-root {
  background: var(--navy-primary);
  color: var(--white);
  border-color: var(--navy-primary);
}

.orgc-row-level1 {
  border-top-color: var(--navy-primary);
}

.orgc-l1 {
  border-top-color: var(--teal-accent);
}

.orgc-leaf {
  border-top-color: var(--gold-accent);
}

.orgc-m-card {
  background: var(--card-bg);
  border-color: rgba(19, 36, 62, 0.06);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  color: var(--navy-primary);
}

.orgc-m-root {
  background: var(--navy-primary);
  color: var(--white);
  border-color: var(--navy-primary);
}

.orgc-m-l1 {
  border-right-color: var(--teal-accent);
}

.orgc-m-leaf {
  border-right-color: var(--gold-accent);
}

.orgc-m-arrow {
  color: var(--text-muted);
}

.orgc-m-leaves {
  border-right-color: var(--secondary-bg);
}

.orgchart-container { margin-top: 8px; }

/* -------------------- نسخة سطح المكتب / التابلت: هيكل الشجرة (بلا تغيير) -------------------- */
.orgc-top {
  position: relative;
  text-align: center;
  margin: 0 auto 20px;
  max-width: 320px;
}

.orgc-top::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
}

.orgc-row-level1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  padding-top: 20px;
  border-top: 2px solid;
}

.orgc-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.orgc-branch::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
}

.orgc-l1 {
  border-top: 3px solid;
}

.orgc-leaves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.orgc-leaf {
  border-top: 3px solid;
  font-weight: 500;
  font-size: 0.78rem;
}

.orgc-card {
  display: block;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.orgc-root {
  font-size: 0.95rem;
  padding: 12px 20px;
}

@media (max-width: 1024px) {
  .orgc-leaves { grid-template-columns: minmax(0, 1fr); }
  .orgc-row-level1 { gap: 14px; }
  .orgc-card { font-size: 0.78rem; padding: 8px 10px; }
  .orgc-root { font-size: 0.88rem; }
}

@media (max-width: 768px) {
  .orgc-row-level1 { gap: 8px; }
  .orgc-card { font-size: 0.7rem; padding: 6px 8px; }
  .orgc-root { font-size: 0.82rem; }
}

/* -------------------- نسخة الجوال (تخطيط رأسي كامل، بلا تغيير هيكلي) -------------------- */
.orgchart-mobile { display: none; }

@media (max-width: 640px) {
  .orgchart-desktop { display: none; }

  .orgchart-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .orgc-m-card {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .orgc-m-l1 {
    border-right: 4px solid;
  }

  .orgc-m-leaf {
    border-right: 4px solid;
    font-weight: 500;
    font-size: 0.82rem;
  }

  .orgc-m-arrow {
    text-align: center;
    font-size: 1rem;
    margin: 4px 0;
  }

  .orgc-m-branch {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .orgc-m-leaves {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-inline-start: 14px;
    border-right: 2px dashed;
  }
}

/* -------------------- 12) زر العودة للرئيسية -------------------- */
.back-home-wrap {
  margin-top: 28px;
  padding-top: 18px;
  border-top-color: var(--secondary-bg);
}

.back-home-btn {
  background: var(--navy-primary);
  border-radius: 999px;
}

.back-home-btn:hover {
  background: var(--navy-dark);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* -------------------- 13) الفوتر: امتداد طبيعي للهيدر -------------------- */
.site-footer {
  background: var(--navy-primary);
  border-top: 2px solid var(--gold-accent);
}

/* -------------------- 15) رسالة المحتوى المقيَّد داخل File Card -------------------- */
/* تحل محل Tiles كاملة عندما تكون كل الملفات الفعلية في المجموعة غير
   مرئية للزائر/المستخدم الحالي — بلا كشف للعدد أو أي Metadata. */
.file-restricted-note {
  margin: 0;
  padding: 10px 14px;
  background: var(--soft-gray);
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  border-radius: var(--radius-button);
}

/* -------------------- 16) صفحة تسجيل الدخول — بنفس Design Tokens الحالية -------------------- */
.auth-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-error {
  margin: 0;
  padding: 10px 14px;
  background: var(--gold-soft);
  color: var(--navy-primary);
  font-size: 0.85rem;
  text-align: center;
  border-radius: var(--radius-button);
}

/* رسالة نجاح عامة داخل بطاقات auth-card (نسيت كلمة المرور، إعادة
   التعيين) — نفس هيكل auth-error بلون مختلف (teal-soft، متسق مع
   admin-flash القائم) لتمييز بصري بسيط بين نجاح وخطأ. */
.auth-success {
  margin: 0;
  padding: 10px 14px;
  background: var(--teal-soft);
  color: var(--navy-primary);
  font-size: 0.85rem;
  text-align: center;
  border-radius: var(--radius-button);
}

.auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: -6px;
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--secondary-bg);
  border-radius: var(--radius-button);
  background: var(--page-bg);
  color: var(--navy-primary);
  font-family: "Tajawal", Arial, sans-serif;
  font-size: 0.92rem;
  transition: border-color var(--transition-base);
}

.auth-input:focus-visible {
  outline: none;
  border-color: var(--teal-accent);
}

.auth-submit {
  margin-top: var(--space-2);
  width: 100%;
  padding: 11px 14px;
  background: var(--navy-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-button);
  font-family: "Tajawal", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition-base);
}

.auth-submit:hover {
  background: var(--navy-dark);
}

.auth-submit:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

/* -------------------- 17) لوحة الإدارة — تنقل ثابت + جداول عرض -------------------- */
.admin-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.admin-nav-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.admin-nav-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.admin-nav-tile:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.admin-nav-tile-title {
  color: var(--navy-primary);
  font-weight: 700;
  font-size: 1.02rem;
}

.admin-nav-tile-desc {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  font-size: 0.85rem;
  white-space: nowrap;
}

.admin-table th {
  background: var(--navy-primary);
  color: var(--white);
  text-align: right;
  padding: 10px 14px;
  font-weight: 600;
}

.admin-table td {
  padding: 9px 14px;
  border-top: 1px solid var(--soft-gray);
  color: var(--navy-primary);
}

.admin-table tbody tr:nth-child(even) {
  background: var(--page-bg);
}

/* -------------------- 14) توزيع "الشؤون التعليمية" — 3 أعمدة مستقلة -------------------- */
/* Flex بدل Grid عمدًا: كل عمود Stack مستقل تمامًا، لا صفوف مشتركة
   تجعل ارتفاع بطاقة في عمود يؤثر على عمود آخر. flex-wrap طبيعي
   (بلا breakpoints يدوية هشة) يعيد توزيع الأعمدة تلقائيًا وبأمان
   على Tablet/Mobile دون Horizontal Overflow. ترتيب DOM (يمين، وسط،
   يسار) يطابق بصريًا اتجاه RTL الافتراضي دون الحاجة لـ order. */
.academic-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.academic-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1 1 300px;
  min-width: 0;
}

/* منطقة العناصر غير المصنَّفة مستقبلًا — نفس شبكة .files-grid
   القياسية (auto-fill + align-items:start)، بمسافة فوقها فقط. */
.academic-extra {
  margin-top: var(--space-5);
}

/* -------------------- 18) ربط الملفات الفعلية: صف Tile + زر تحميل مستقل -------------------- */
/* .file-tile-row تحيط بكل Tile (حتى بلا زر تحميل) لضمان صفر فرق بصري
   عن الشكل القديم عند عدم وجود تحميل — عرضها 100% مطابق تمامًا لعرض
   .file-tile السابق مباشرة بلا أي غلاف. الزر الصغير ⬇ يظهر فقط حين
   يملك المستخدم الحالي canDownloadFile() لهذا الملف تحديدًا (مستقل
   عن canViewFile) — تمييز View/Download الذي طلبه الأستاذ راشد دون
   إعادة تصميم الـ Tile نفسه. */
.file-tile-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.file-tile-row .file-tile {
  flex: 1 1 auto;
  width: auto;
}

.file-tile-download {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  background: var(--gold-soft);
  color: var(--navy-primary);
  font-size: 1.05rem;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
}

.file-tile-download:hover {
  background: var(--gold-accent);
  color: var(--white);
}

.file-tile-download:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.file-tile-download:active {
  transform: scale(0.94);
}

/* زر "إرسال ملاحظة" (المرحلة ٥ من نظام التواصل الداخلي) — نفس قياس
   وأسلوب .file-tile-download تمامًا، بلون Teal للتمييز البصري عن زر
   التحميل الذهبي. */
.file-tile-note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  background: var(--teal-soft);
  color: var(--teal-accent);
  border-radius: var(--radius-button);
}

.file-tile-note svg {
  width: 18px;
  height: 18px;
}

.file-tile-note:hover,
.file-tile-note:focus-visible {
  background: var(--teal-accent);
  color: var(--white);
  outline: none;
}

.file-tile-note:active {
  transform: scale(0.94);
}

/* -------------------- 19) نماذج لوحة الإدارة (إنشاء/تعديل مستخدم، رفع/صلاحيات ملف) -------------------- */
/* توسعة على .auth-card نفسها (بلا لغة تصميم جديدة) لاستيعاب حقول
   أكثر ومجموعات Checkboxes. */
.admin-form-card {
  max-width: 620px;
  text-align: right;
}

.admin-form-hint {
  margin: -4px 0 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.admin-flash {
  background: var(--teal-soft);
  color: var(--navy-primary);
}

.admin-toolbar {
  margin: var(--space-4) 0;
}

.admin-toolbar-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 10px 22px;
  background: var(--navy-primary);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.admin-toolbar-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.admin-toolbar-btn:hover {
  background: var(--navy-dark);
}

.admin-checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--navy-primary);
  cursor: pointer;
}

.admin-grant-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--page-bg);
  border-radius: var(--radius-button);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  margin-bottom: var(--space-2);
}

.admin-table-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.admin-inline-form {
  display: inline;
  margin: 0;
}

.admin-inline-link {
  color: var(--teal-accent);
  font-weight: 600;
  font-size: 0.82rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Tajawal", Arial, sans-serif;
  text-decoration: none;
}

.admin-inline-link:hover {
  text-decoration: underline;
}

.admin-inline-danger {
  color: #b3413a;
}

.admin-inline-self {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* -------------------- 20) زر "لوحة التحكم" في الهيدر -------------------- */
/* .header-dashboard-btn بلا أي تمييز افتراضي — زر عادي بنفس شكل بقية
   .header-auth-link (يشمل Hover العام الموروث منها). التمييز الذهبي
   المصمت (Active) يظهر فقط عندما تكون الصفحة الحالية dashboard.php أو
   ما يعادلها فعليًا (bodyDataPage === 'dashboard') — لا يوحي بوجود
   المستخدم في لوحة التحكم وهو في index.php أو Workspace أو غيرها. */
.header-dashboard-btn.is-active {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  color: var(--navy-primary);
  font-weight: 700;
}

.header-dashboard-btn.is-active:hover {
  background: var(--gold-accent);
  color: var(--navy-primary);
}

/* -------------------- 21) لوحة التحكم (dashboard.php) — أقسام مشتركة -------------------- */
.dash-section {
  margin-top: var(--space-6);
}

.dash-section-title {
  color: var(--navy-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.dash-resp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-resp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--soft-gray);
  color: var(--navy-primary);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: background var(--transition-base);
}

a.dash-resp-item:hover {
  background: var(--teal-soft);
}

.dash-resp-row {
  cursor: default;
}

.dash-resp-scope {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal-accent);
  background: var(--teal-soft);
  padding: 2px 10px;
  border-radius: 999px;
  margin-inline-start: 8px;
}

/* بطاقات "توزيع الملفات حسب الأقسام الرئيسية" (manager-files.php،
   الأقسام/الأقسام الفرعية/العناصر — نفس القائمة تُستخدَم لثلاثة مستويات
   Drill-down). نطاق ضيق عبر manager-files-drill-grid فقط، بنفس مبدأ
   .wp-semester-section أعلاه — بلا أي أثر على استخدامات dash-resp-list/
   dash-resp-item الأخرى في المنصة (مسؤولياتي، مساحتي الشخصية، مجلدات
   Workspace...). يحوّل القائمة الرأسية أحادية العمود إلى شبكة بطاقات
   تستفيد من العرض الأفقي بدل شريط عريض فيه اسم صغير وفراغ كبير والعدد
   في الطرف الآخر؛ اسم القسم يكبر ويُسمَح له بالالتفاف لسطرين فأكثر
   للأسماء الطويلة بدل تصغير الخط. لا تغيير على حساب عدد الملفات ولا
   Drill-down ولا الاستعلامات — تصميم بصري فقط. */
.manager-files-drill-grid.dash-resp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.manager-files-drill-grid .dash-resp-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-4);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.manager-files-drill-grid .dash-resp-scope {
  margin-inline-start: 0;
}

/* -------------------- 22) متصفح مجلدات Workspace -------------------- */
.ws-folder-link {
  color: var(--navy-primary);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.ws-folder-link:hover {
  text-decoration: underline;
}

/* -------------------- 23) تجربة مدير المدرسة — الأشرطة الثلاثة -------------------- */
/* أفقية أنيقة أقل ارتفاعًا بكثير من بطاقات الأقسام العشرة (144px) —
   أيقونة يمين + عنوان + وصف + أرقام حيّة، بطاقة كاملة رابط واحد،
   بنفس عائلة .section-card بصريًا (بطاقة بيضاء بظل وحدود خفيفة). */
.manager-strip-section {
  margin-top: var(--space-6);
}

.manager-strip-grid {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.manager-strip-card {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.manager-strip-card:hover,
.manager-strip-card:focus-visible {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.manager-strip-card:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.manager-strip-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--teal-accent);
}

.manager-strip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.manager-strip-title {
  color: var(--navy-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.manager-strip-desc {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.manager-strip-stats {
  color: var(--navy-primary);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .manager-strip-grid {
    flex-direction: column;
  }
}

/* -------------------- 24) تجربة مدير المدرسة — الصفحات الثلاث -------------------- */
/* عرض كامل مستفاد من الشاشة (لا Card صغيرة في المنتصف)، نفس آلية
   توسيع الصفحة الرئيسية بالضبط. */
body[data-page="manager"] .page-container {
  max-width: 1600px;
}

/* KPI Cards — رقم كبير + تسمية، رابط كامل قابل للنقر (Drill-down عبر GET) */
.manager-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.manager-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

a.manager-kpi-card:hover,
a.manager-kpi-card:focus-visible {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

a.manager-kpi-card.is-active {
  border-color: var(--gold-accent);
  box-shadow: 0 0 0 2px var(--gold-accent) inset;
}

.manager-kpi-card.manager-kpi-static {
  cursor: default;
}

.manager-kpi-card.manager-kpi-warning .manager-kpi-value {
  color: var(--warning-amber);
}

/* -------------------- 24) متابعة الخطط الأسبوعية (manager-weekly-plans.php) -------------------- */
.wp-semester-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}

.wp-semester-tab {
  padding: 8px 20px;
  border-radius: var(--radius-button);
  background: var(--soft-gray);
  color: var(--navy-primary);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.wp-semester-tab.is-active {
  background: var(--navy-primary);
  color: var(--white);
}

.wp-semester-tab.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wp-week-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-4);
}

.wp-week-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-button);
  background: var(--soft-gray);
  color: var(--navy-primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.wp-week-btn:hover {
  background: var(--teal-soft);
}

.wp-week-btn.is-active {
  background: var(--teal-accent);
  color: var(--white);
}

.wp-status-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
}

.wp-status-done { background: var(--teal-soft); color: var(--teal-accent); }
.wp-status-missing { background: var(--danger-soft); color: var(--danger-red); }

/* -------------------- 25) عنوان تنظيمي غير قابل للنقر لفصل دراسي (workspace-item.php) -------------------- */
.wp-semester-section {
  margin-top: var(--space-5);
}

.wp-semester-heading {
  margin: 0 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--secondary-bg);
  color: var(--navy-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

/* أيقونات SVG داخل روابط توزيع المنهج/الخطة الأسبوعية (dash-resp-item) —
   تخص فقط العناصر التي تحتوي فعليًا svg، أي هذه الروابط الجديدة تحديدًا. */
.dash-resp-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -3px;
}

/* .dash-resp-item الأساسية (سطر ~1191) تستخدم justify-content: space-between
   لتوزيع رابط المجلد عن أزرار الإدارة في dash-resp-row — سلوك مطلوب هناك.
   لكن تحت عنوان الفصل الدراسي (.wp-semester-section) الرابط نفسه يحوي
   عنصرين مباشرين فقط (svg + نص)، فيدفعهما space-between لطرفين متباعدين.
   نطاق ضيق هنا فقط لإبقاء الأيقونة والنص مجموعة متجاورة، بلا أي أثر على
   بقية استخدامات dash-resp-item في المنصة أو على بطاقات الأسابيع. */
.wp-semester-section .dash-resp-item {
  justify-content: flex-start;
  gap: 8px;
}

/* -------------------- 26) شبكة بطاقات الأسابيع (weekly_plan_root فقط) -------------------- */
.ws-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-3);
}

.ws-week-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ws-week-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.ws-week-card:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.ws-week-card-icon {
  color: var(--teal-accent);
}

.ws-week-card-icon svg {
  width: 22px;
  height: 22px;
}

.ws-week-card-number {
  color: var(--gold-accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.ws-week-card-label {
  color: var(--navy-primary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

/* -------------------- 27) صندوق رفع خطة الأسبوع (week_NN فقط) -------------------- */
.ws-week-upload-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.ws-week-upload-label svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal-accent);
}

.manager-kpi-value {
  color: var(--navy-primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.manager-kpi-label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* شريط بحث/فلترة GET بسيط */
.manager-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.manager-filter-bar .auth-input {
  width: auto;
  min-width: 160px;
}

/* حقل "من تاريخ"/"إلى تاريخ" (manager-files.php) — الجولة النهائية:
   الحقل الأصلي input[type=date] يبقى فعليًا وقابلاً للتركيز/الإرسال
   (name/value بصيغة ISO كما هي — لا تغيير خلفي إطلاقًا)، لكنه مُخفى
   بصريًا (opacity:0) ومُمدَّد فوق صندوق عرض مخصص بالكامل (.cc-date-display)
   بحيث يستقبل كل نقرة ولوحة مفاتيح. القيمة المعروضة للمستخدم "D / M / Y"
   بأرقام غربية عبر JS بسيط (تقسيم نص ISO مباشرة، بلا Intl وبلا مكتبات
   خارجية) — يستبدل نهائيًا محاولتَي القرص السابقتين (CSS direction:ltr
   ثم تسمية عربية مجاورة)، فهما لم تُصلحا العرض الداخلي المشوَّه لحقل
   التاريخ الأصلي نفسه. */
.cc-date-field {
  position: relative;
  display: inline-flex;
}

.cc-date-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.cc-date-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 9px 14px;
  border: 1px solid rgba(19, 36, 62, 0.14);
  border-radius: var(--radius-button);
  background: #FFFFFF; /* حرفيًا لا var(--white) — غير معرَّف في :root، انظر ملاحظة القسم 32 */
  color: var(--navy-primary);
  pointer-events: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cc-date-field:hover .cc-date-display {
  border-color: var(--teal-accent);
}

.cc-date-field:focus-within .cc-date-display {
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 2px rgba(79, 140, 137, 0.25);
}

.cc-date-text {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.cc-date-text.is-placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.cc-date-icon {
  display: inline-flex;
  color: var(--teal-accent);
  flex-shrink: 0;
}

.cc-date-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* شارات حالة دلالية */
.manager-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.manager-badge-success { color: var(--success-green); background: var(--success-soft); }
.manager-badge-warning { color: var(--warning-amber); background: var(--warning-soft); }
.manager-badge-danger  { color: var(--danger-red); background: var(--danger-soft); }

/* قائمة "آخر المستجدات" بصياغة بشرية */
.manager-feed-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manager-feed-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 12px;
  border-radius: var(--radius-button);
}

.manager-feed-list li:nth-child(odd) {
  background: var(--page-bg);
}

.manager-feed-text {
  color: var(--navy-primary);
  font-size: 0.85rem;
}

.manager-feed-time {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* -------------------- 29) التواصل الداخلي (messages.php) — المرحلة ٢ -------------------- */
textarea.auth-input {
  min-height: 130px;
  resize: vertical;
}

.msg-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
}

.msg-badge-read    { background: var(--teal-soft); color: var(--teal-accent); }
.msg-badge-unread  { background: var(--warning-soft); color: var(--warning-amber); }

.msg-recipient-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.msg-detail-card {
  background: var(--card-bg);
  border: 1px solid rgba(19, 36, 62, 0.06);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-top: var(--space-3);
}

.msg-detail-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.msg-detail-from strong {
  color: var(--navy-primary);
}

.msg-detail-subject {
  margin: 0 0 var(--space-3);
  color: var(--navy-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

.msg-detail-body {
  background: var(--page-bg);
  border-radius: var(--radius-button);
  padding: var(--space-4);
  color: var(--navy-primary);
  font-size: 0.92rem;
  line-height: 1.8;
  white-space: pre-line;
}

.msg-detail-recipients {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--secondary-bg);
}

.msg-detail-recipients-summary {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--navy-primary);
  font-size: 0.88rem;
}

.msg-recipient-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-recipient-status-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--soft-gray);
  border-radius: var(--radius-button);
  font-size: 0.84rem;
  color: var(--navy-primary);
}

/* -------------------- 30) مرفقات الرسائل (المرحلة ٤) -------------------- */
.msg-attachment-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--page-bg);
  border: 1px dashed rgba(19, 36, 62, 0.18);
  border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-3);
}

.msg-attachment-field-icon {
  display: flex;
  color: var(--gold-accent);
  flex-shrink: 0;
}

.msg-attachment-field-icon svg {
  width: 20px;
  height: 20px;
}

.msg-attachment-field input[type="file"] {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--navy-primary);
}

.msg-attachment-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--page-bg);
  border: 1px solid rgba(19, 36, 62, 0.08);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.msg-attachment-icon {
  display: flex;
  color: var(--teal-accent);
  flex-shrink: 0;
}

.msg-attachment-icon svg {
  width: 26px;
  height: 26px;
}

.msg-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.msg-attachment-name {
  font-weight: 700;
  color: var(--navy-primary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.msg-attachment-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.msg-attachment-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.msg-attachment-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-accent);
  text-decoration: none;
  white-space: nowrap;
}

/* زر «رد» في عرض الرسالة — نفس هيكل back-home-btn (Pill) الملاصق له
   في نفس back-home-wrap، بلون teal مميّز فقط للتفريق البصري عن زر
   العودة الملاحي (navy). margin-inline-end يفصله عن زر العودة. */
.msg-reply-btn {
  background: var(--teal-accent);
  margin-inline-end: var(--space-2);
}

.msg-reply-btn:hover {
  background: var(--teal-accent);
  filter: brightness(0.9);
}

/* تنقل الصفحات (Pagination) — الوارد/الصادر فقط. أزرار السابق/التالي
   تعيد استخدام back-home-btn (Pill navy) نفسه، وتتحول لـ span معطّل
   شكليًا عند الطرفين الأولى/الأخيرة بدل الاختفاء الكامل، حفاظًا على
   ثبات تخطيط الصف. */
.msg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.msg-pagination-btn-disabled {
  background: var(--gray-soft, #d9dde3);
  color: var(--gray-mid, #8a8f98);
  cursor: default;
  pointer-events: none;
}

.msg-pagination-info {
  font-weight: 600;
  white-space: nowrap;
}

/* مربع بحث الوارد/الصادر — نموذج GET بسيط أعلى الجدول مباشرة، بلا
   بطاقة خاصة به. msg-search-btn/msg-search-clear يعيدان استخدام
   back-home-btn (Pill navy) نفسه؛ msg-search-clear بلون رمادي محايد
   للتفريق البصري عن زر «بحث» الأساسي. */
.msg-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.msg-search-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--gray-soft, #d9dde3);
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 0.95rem;
}

.msg-search-clear {
  background: var(--gray-mid, #8a8f98);
}

.msg-search-clear:hover {
  filter: brightness(0.92);
}

/* أرشفة الرسائل (Migration 019) — نموذج POST مصغّر (CSRF + إجراء واحد
   فقط) داخل خلية الجدول أو back-home-wrap، بلا أي تخطيط إضافي — display:
   inline-block يجعله لا يكسر صف الجدول أو صف الأزرار المجاورة له. */
.msg-inline-action-form {
  display: inline-block;
  margin: 0;
}

/* msg-archive-btn/msg-unarchive-btn — أزرار مستقلة صغيرة (لا تعتمد على
   back-home-btn) بنفس حجم/شكل msg-attachment-btn (واضحة دون مبالغة في
   الحجم)، بلوني gold/teal الحاليين للتفريق بين "أرشفة" (محايد) و"إلغاء
   الأرشفة" (استعادة، نفس لون زر «رد»). */
.msg-archive-btn,
.msg-unarchive-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.msg-archive-btn {
  background: var(--gold-soft);
  color: var(--gold-accent);
}

.msg-archive-btn:hover {
  background: var(--gold-accent);
  color: var(--white);
}

.msg-unarchive-btn {
  background: var(--teal-soft);
  color: var(--teal-accent);
}

.msg-unarchive-btn:hover {
  background: var(--teal-accent);
  color: var(--white);
}

/* اختيار وارد/صادر مؤرشف داخل تبويب «المؤرشف» — نفس شكل wp-semester-tabs
   القائم، بمسافة أقل قبل مربع البحث. */
.msg-archive-subnav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.msg-attachment-btn:hover,
.msg-attachment-btn:focus-visible {
  background: var(--teal-accent);
  color: var(--white);
}

@media (max-width: 560px) {
  .msg-attachment-card {
    flex-wrap: wrap;
  }
  .msg-attachment-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* -------------------- 31) ملاحظة إدارية مرتبطة بملف (المرحلة ٥) -------------------- */
.msg-linked-file-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  background: var(--gold-soft);
  border: 1px solid rgba(185, 151, 91, 0.35);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

.msg-linked-file-title {
  font-weight: 700;
  color: var(--navy-primary);
  font-size: 0.82rem;
  flex-basis: 100%;
}

.msg-linked-file-name {
  font-weight: 700;
  color: var(--navy-primary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.msg-linked-file-owner {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.msg-linked-file-unavailable {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* -------------------- 32) "البيانات الأساسية" أفقية (manager-teacher-profile.php) -------------------- */
/* بديل عن admin-table العمودي لهذا القسم تحديدًا فقط: كل حقل Chip
   مستقل (تسمية كحلية + قيمة)، بترتيب flex-wrap طبيعي — يملأ الصف
   أفقيًا على الشاشات الواسعة، ويلتف تلقائيًا لعدة صفوف على الجوال بلا
   أي media query يدوي هش. لا علاقة له بـ.admin-table ولا بأي جدول آخر
   في المشروع — تصميم مستقل لهذا القسم وحده. */
.profile-basic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

.profile-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-field-label {
  display: inline-block;
  background: var(--navy-primary);
  color: #FFFFFF; /* حرفيًا لا var(--white) — هذا المتغير غير معرَّف في :root حاليًا (انظر ملاحظة منفصلة) */
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.profile-field-value {
  color: var(--navy-primary);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

/* شاشات ضيقة جدًا: كل حقل يملأ عرض السطر لسهولة القراءة بدل ازدحام
   عدة حقول قصيرة جنبًا إلى جنب بلا فائدة بصرية حقيقية على هذا العرض */
@media (max-width: 480px) {
  .profile-field {
    flex-basis: 100%;
  }
}


/* ============================================================
   القسم 33) مركز القيادة البصري — الهيكل العام (Command Center Shell)
   ------------------------------------------------------------
   هذا القسم فصاعدًا يُعيد بناء manager-performance.php وmanager-files.php
   بالكامل كواجهتي "مركز قيادة" بارتفاع الشاشة (بدل Dashboard تقليدي
   بتمرير رأسي). كل الأصناف هنا (بادئة cc-) حصرية لهاتين الصفحتين
   (تحقّق: لا استخدام لها في أي ملف آخر في المشروع) — تعديل حر وكامل
   بلا أثر جانبي على بقية المنصة.

   body.cc-command-mode: صنف اختياري جديد على <body> (عبر $bodyExtraClass
   في header.php) — لا يُفعَّل إلا في هاتين الصفحتين تحديدًا، فلا يتأثر
   أي body[data-page="manager"] آخر (manager-teachers.php وغيرها تبقى
   صفحات توثيق عادية بتمرير طبيعي). القفل على ارتفاع الشاشة (100dvh +
   overflow:hidden) يُفعَّل فقط من min-width:1280px فصاعدًا (Desktop/
   Laptop) — أسفل ذلك (Tablet/Mobile) تبقى الصفحة بتمرير المستند
   الطبيعي بلا أي قيد، تمامًا كما طُلب صراحة (Responsive Mode). */
@media (min-width: 1280px) {
  body.cc-command-mode {
    height: 100dvh;
    overflow: hidden;
  }

  body.cc-command-mode .page-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 14px 22px 14px;
  }

  body.cc-command-mode .cc-shell {
    flex: 1 1 auto;
    min-height: 0;
  }

  body.cc-command-mode .back-home-wrap {
    display: none;
  }
}

/* الهيكل نفسه — عمود واحد رأسي: Strip (ثابت) ثم صفوف شبكة بارتفاع
   متغيّر. على الشاشات الأصغر من 1280px هذا مجرد Flow عادي بـ gap. */
.cc-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1280px) {
  .cc-shell {
    display: grid;
    /* صف واحد فقط auto (Strip) ثم صفّا محتوى محدودا الارتفاع (fr) —
       بعد جولة التبسيط النهائية (حذف مشهد النشاط/يحتاج انتباهك/آخر
       المستجدات) لم يعد للصفحة سوى صفّين: متابعة المعلمين/خريطة العمل/
       حالة الأقسام (أثقل محتوًى، 1.6fr) ثم نبض الأسبوع بعرض كامل
       (1fr). كل الألواح داخلها تفيض داخليًا (.cc-panel-body{overflow-y:
       auto}) بدل أن يكبر الصف نفسه بلا حدود (شرط القفل على الشاشة
       الكاملة، القسم P). */
    grid-template-rows: auto minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 10px;
    height: 100%;
    min-height: 0;
  }
  /* صفحة الملفات فيها صف Toolbar إضافي (فترة زمنية) قبل صفوف المحتوى —
     صفّان auto (Strip + Toolbar) ثم صفّا محتوى بعد جولة التبسيط
     النهائية (حذف خريطة النشاط/آخر الملفات/يحتاج تنظيمك): توزيع
     المحتوى حسب القسم بعرض كامل (1.1fr) ثم مشهد الملفات + المساهمات
     (1fr) — نفس منطق الإصلاح المطبَّق على .cc-shell الأساسي أعلاه. */
  .cc-shell.cc-shell-files {
    grid-template-rows: auto auto minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* أي صف شبكة داخلي (Row) يحمل عدة ألواح جنبًا إلى جنب على Desktop،
   ويتكدّس عمودًا واحدًا تلقائيًا على ما دون 1280px. */
.cc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
}

@media (min-width: 1280px) {
  .cc-row-3 {
    grid-template-columns: 1.05fr 1.6fr 0.85fr;
  }
  .cc-row-60-40 {
    grid-template-columns: 1.5fr 1fr;
  }
  .cc-row-45-55 {
    grid-template-columns: 1fr 1.15fr;
  }
  .cc-row-50-50 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   القسم 34) شريط القيادة (Command Strip) — كحلي مضغوط، يضم داخله:
   سطر تنقّل رفيع (Breadcrumb + بحث سريع + طباعة) ثم صف العنوان
   والمؤشرات — كل ذلك في كتلة واحدة بارتفاع محدود (لا Hero طويل).
   ============================================================ */
.cc-strip {
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-card);
  padding: 10px 20px 14px;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.cc-strip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-strip-crumb {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.cc-strip-crumb a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.cc-strip-crumb a:hover,
.cc-strip-crumb a:focus-visible {
  text-decoration: underline;
}

.cc-strip-crumb .sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.4);
}

.cc-strip-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-strip-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.cc-strip-title-block {
  flex: 0 1 auto;
  min-width: 190px;
}

.cc-strip-title {
  margin: 0 0 3px;
  color: #FFFFFF; /* حرفيًا لا var(--white) — غير معرَّف في :root، انظر ملاحظة القسم 32 */
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.cc-strip-context {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  white-space: nowrap;
}

.cc-strip-context .sep {
  margin: 0 6px;
  color: var(--gold-accent);
}

.cc-strip-kpis {
  display: flex;
  flex: 1 1 480px;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
}

/* -------------------- لغة KPI البصرية (A2/B1) -------------------- */
.cc-kpi {
  position: relative;
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: background var(--transition-base);
}

a.cc-kpi:hover,
a.cc-kpi:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.cc-kpi:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.cc-kpi-viz {
  flex-shrink: 0;
  color: var(--teal-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-kpi-viz .cc-radial-track { stroke: rgba(255, 255, 255, 0.14); }
.cc-kpi-viz .cc-radial-fill { stroke: var(--teal-accent); }
.cc-kpi-viz .cc-radial-text { fill: #FFFFFF; font-weight: 700; }

.cc-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cc-kpi-value {
  color: #FFFFFF; /* حرفيًا لا var(--white) */
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.cc-kpi-value-of {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.cc-kpi-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  white-space: nowrap;
}

.cc-kpi-delta {
  display: inline-block;
  margin-inline-start: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.cc-kpi-delta.is-up { color: #7FD8B8; }
.cc-kpi-delta.is-down { color: var(--gold-accent); }
.cc-kpi-delta.is-flat { color: rgba(255, 255, 255, 0.5); }

.cc-kpi.is-warning .cc-kpi-value { color: var(--gold-accent); }
.cc-kpi.is-warning .cc-kpi-viz { color: var(--gold-accent); }

/* شريط مجزّأ (Segmented) مصغّر — نسيج بصري بلا عناصر DOM لكل شريحة،
   يبقى صحيحًا مهما كان عدد المعلمين/الأقسام */
.cc-mini-bar {
  width: 54px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  background-image: repeating-linear-gradient(90deg, rgba(19, 36, 62, 0.35) 0 1.5px, transparent 1.5px 9px);
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}

.cc-mini-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  border-radius: 999px;
  background: var(--teal-accent);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1.5px, transparent 1.5px 9px);
}

/* شريط ثلاثي الشرائح (نشط/يحتاج متابعة/متأخر) — معاينة مصغّرة لتوزيع Donut */
.cc-mini-stack {
  display: flex;
  width: 54px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.cc-mini-stack span {
  height: 100%;
  display: block;
}

.cc-mini-stack .seg-active { background: var(--teal-accent); }
.cc-mini-stack .seg-follow { background: var(--warning-amber); }
.cc-mini-stack .seg-late { background: var(--danger-red); }

@media (max-width: 900px) {
  .cc-strip-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .cc-kpi {
    flex-basis: 100%;
  }
}

/* ============================================================
   القسم 35) Toolbar مضغوط — بحث سريع + رقاقات الفترة (ملفات فقط) +
   زر الطباعة، سطر واحد رفيع أسفل الـ Strip مباشرة (لا Row كامل للبحث
   وحده كما كان سابقًا، ولا Row كامل لزر الطباعة).
   ============================================================ */
.cc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.cc-toolbar-filters {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

/* -------------------- بحث سريع (Quick Navigation) — مضغوط -------------------- */
.cc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-search {
  position: relative;
  width: 100%;
  max-width: 230px;
}

.cc-search-input {
  width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF; /* حرفيًا لا var(--white) */
  font-family: inherit;
  font-size: 0.78rem;
}

.cc-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.cc-search-input:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.14);
}

/* بحث الملفات يقع خارج الـ Strip (Toolbar أبيض) — نسخة فاتحة من نفس الصنف */
.cc-toolbar .cc-search-input {
  border: 1px solid var(--soft-gray);
  background: var(--card-bg);
  color: var(--navy-primary);
  box-shadow: var(--shadow-card);
}

.cc-toolbar .cc-search-input::placeholder {
  color: var(--text-muted);
}

.cc-toolbar .cc-search-input:focus-visible {
  outline: 2px solid var(--teal-accent);
  background: var(--card-bg);
}

.cc-search-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: max(100%, 260px);
  background: var(--card-bg);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card-hover);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.cc-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--navy-primary);
  font-size: 0.82rem;
  text-decoration: none;
}

.cc-search-item:hover,
.cc-search-item:focus-visible {
  background: var(--page-bg);
}

.cc-search-item:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: -2px;
}

.cc-search-item-type {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* -------------------- زر الطباعة المضغوط -------------------- */
.cc-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.cc-print-btn svg {
  width: 14px;
  height: 14px;
}

/* نسخة على خلفية كحلية (داخل الـ Strip) */
.cc-strip .cc-print-btn {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF; /* حرفيًا لا var(--white) */
  background: rgba(255, 255, 255, 0.06);
}

.cc-strip .cc-print-btn:hover,
.cc-strip .cc-print-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.cc-strip .cc-print-btn:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

/* نسخة فاتحة (داخل Toolbar الملفات الأبيض) */
.cc-toolbar .cc-print-btn {
  border: 1px solid var(--soft-gray);
  color: var(--navy-primary);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.cc-toolbar .cc-print-btn:hover,
.cc-toolbar .cc-print-btn:focus-visible {
  background: var(--soft-gray);
  border-color: var(--teal-accent);
}

.cc-toolbar .cc-print-btn:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 2px;
}

/* -------------------- رقاقات فترة الملفات + فترة مخصصة قابلة للطي -------------------- */
.cc-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--navy-primary);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  list-style: none;
  transition: background var(--transition-base), color var(--transition-base);
}

.cc-filter-chip::-webkit-details-marker {
  display: none;
}

.cc-filter-chip:hover,
.cc-filter-chip:focus-visible {
  background: var(--soft-gray);
}

.cc-filter-chip:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 2px;
}

.cc-filter-chip.is-active {
  background: var(--teal-accent);
  color: #FFFFFF; /* حرفيًا لا var(--white) */
}

.cc-filter-custom {
  position: relative;
}

.cc-filter-custom-form {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--space-3);
  background: var(--card-bg);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card-hover);
  width: max-content;
}

.cc-filter-custom-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.cc-filter-custom-label input {
  border: 1px solid var(--soft-gray);
  border-radius: 8px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--navy-primary);
}

.cc-filter-custom-apply {
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-button);
  background: var(--navy-primary);
  color: #FFFFFF; /* حرفيًا لا var(--white) */
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.cc-filter-custom-apply:hover,
.cc-filter-custom-apply:focus-visible {
  background: var(--navy-dark);
}

/* ============================================================
   القسم 36) بطاقة/لوح عام (Panel) — أساس كل الألواح داخل الشبكة،
   بارتفاع يملأ خليّته ومحتوى داخلي قابل للتمرير عند الحاجة فقط
   (لا الصفحة كلها).
   ============================================================ */
.cc-panel {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  margin-bottom: 6px;
}

.cc-panel-title {
  margin: 0;
  color: var(--navy-primary);
  font-size: 0.86rem;
  font-weight: 700;
}

.cc-panel-link {
  color: var(--teal-accent);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.cc-panel-link:hover,
.cc-panel-link:focus-visible {
  text-decoration: underline;
}

.cc-panel-note {
  color: var(--text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.cc-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Scrollbar رفيع وهادئ لكل لوح داخلي (لا تظهر الصفحة كلها Scroll، فقط
   اللوح الذي يفيض محتواه) */
.cc-panel-body::-webkit-scrollbar,
.cc-search-results::-webkit-scrollbar {
  width: 6px;
}

.cc-panel-body::-webkit-scrollbar-thumb,
.cc-search-results::-webkit-scrollbar-thumb {
  background: var(--soft-gray);
  border-radius: 999px;
}

.cc-panel-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 10px 0;
}

/* ============================================================
   القسم 37) لوحة متابعة المعلمين (Teacher Performance Visual) —
   أشرطة أفقية مرئية (لا رقم فقط) + قائمة يحتاجون متابعة (A3)
   ============================================================ */
.cc-tbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cc-tbar-label {
  flex: 0 0 92px;
  font-size: 0.74rem;
  color: var(--navy-primary);
  font-weight: 600;
}

.cc-tbar-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: var(--soft-gray);
  overflow: hidden;
}

.cc-tbar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal-accent);
}

.cc-tbar-fill.is-warning { background: var(--warning-amber); }
.cc-tbar-fill.is-empty { background: var(--text-muted); opacity: 0.35; }

.cc-tbar-pct {
  flex: 0 0 38px;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--navy-primary);
}

.cc-tbar-note {
  color: var(--text-muted);
  font-size: 0.66rem;
  margin: 2px 0 10px 100px;
}

.cc-teacher-follow-list {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--soft-gray);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cc-teacher-follow-head {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 2px;
}

.cc-teacher-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}

.cc-teacher-row a {
  color: var(--navy-primary);
  font-weight: 700;
  text-decoration: none;
}

.cc-teacher-row a:hover,
.cc-teacher-row a:focus-visible {
  color: var(--teal-accent);
  text-decoration: underline;
}

.cc-teacher-row-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ============================================================
   القسم 38) مصفوفة الحالة (Heatmap Tiles) — مشتركة بين خريطة العمل
   المدرسي (الأداء) وخريطة المحتوى المدرسي (الملفات). كل Tile كثيفة:
   حالة/عنوان/أرقام/Sparkline، بحد أدنى من الارتفاع.
   ============================================================ */
.cc-heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  align-content: start;
}

.cc-heat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px 10px;
  border-top: 3px solid var(--text-muted);
  background: var(--page-bg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

.cc-heat-tile:hover,
.cc-heat-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.cc-heat-tile:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 2px;
}

.cc-heat-tile.state-active { border-top-color: var(--teal-accent); background: var(--teal-soft); }
.cc-heat-tile.state-follow { border-top-color: var(--warning-amber); background: var(--warning-soft); }
.cc-heat-tile.state-late   { border-top-color: var(--danger-red); background: var(--danger-soft); }

/* تمييز/تعتيم تفاعلي عند النقر على Donut أو Hover على KPI مرتبط
   (JS يضيف/يزيل .is-dim على غير المطابق فقط) */
.cc-heat-grid.has-focus .cc-heat-tile {
  opacity: 0.32;
  transform: none;
  box-shadow: none;
}

.cc-heat-grid.has-focus .cc-heat-tile.is-matched {
  opacity: 1;
  box-shadow: var(--shadow-card-hover);
}

.cc-heat-top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cc-heat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.state-active .cc-heat-dot { background: var(--teal-accent); }
.state-follow .cc-heat-dot { background: var(--warning-amber); }
.state-late .cc-heat-dot { background: var(--danger-red); }

.cc-heat-status {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 700;
}

.cc-heat-spark {
  margin-inline-start: auto;
  color: var(--teal-accent);
  opacity: 0.85;
}

.cc-heat-title {
  color: var(--navy-primary);
  font-weight: 700;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-heat-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--navy-primary);
  font-size: 0.74rem;
  font-weight: 600;
}

.cc-heat-delta {
  color: var(--success-green);
  font-size: 0.64rem;
  font-weight: 700;
  background: var(--success-soft);
  border-radius: 999px;
  padding: 0 6px;
}

.cc-heat-meta {
  color: var(--text-muted);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   القسم 39) Donut حالة الأقسام (A5) — شريحة واحدة قابلة للنقر لتمييز
   الأقسام المطابقة في المصفوفة، بلا Drawer.
   ============================================================ */
.cc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cc-donut .cc-donut-seg {
  cursor: pointer;
  transition: opacity var(--transition-base);
}

/* مؤشر تركيز واضح للوحة المفاتيح (Section J) — عناصر SVG قابلة
   للتركيز عبر tabindex، بلا outline افتراضي في أغلب المتصفحات. */
.cc-donut-seg:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

.cc-donut.has-focus .cc-donut-seg {
  opacity: 0.35;
}

.cc-donut.has-focus .cc-donut-seg.is-active-seg {
  opacity: 1;
}

.cc-donut-total {
  fill: var(--navy-primary);
  font-weight: 700;
}

.cc-donut-total-label {
  fill: var(--text-muted);
}

.cc-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 110px;
}

.cc-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: right;
  color: var(--navy-primary);
  font-size: 0.76rem;
  transition: background var(--transition-base);
}

.cc-donut-legend-item:hover,
.cc-donut-legend-item:focus-visible {
  background: var(--page-bg);
}

.cc-donut-legend-item:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 1px;
}

.cc-donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cc-donut-legend-count {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--navy-primary);
}

/* ============================================================
   القسم 40) مشهد الملفات (Segmented Composition Bar) — بديل "اتجاه
   رفع الملفات" الزمني المحذوف (B5). شريط أفقي مجزّأ (لا دائرة — هوية
   بصرية مستقلة عن Donut حالة الأقسام في صفحة الأداء) + أسطورة تفصيلية
   بنقطة/تسمية/عدد/نسبة لكل فئة حداثة (اليوم/باقي الأسبوع/أقدم).
   ============================================================ */
.cc-recency-bar {
  display: flex;
  height: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft-gray);
}

.cc-recency-seg {
  display: block;
  height: 100%;
}

.cc-recency-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.cc-recency-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--navy-primary);
}

.cc-recency-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cc-recency-legend-label {
  font-weight: 600;
}

.cc-recency-count {
  margin-inline-start: auto;
  font-weight: 700;
}

.cc-recency-pct {
  color: var(--text-muted);
  font-size: 0.7rem;
  min-width: 34px;
  text-align: left;
}

/* ============================================================
   القسم 41) نبض الأسبوع (Sparkline Pulse Panel) — A7/امتداد للملفات
   ============================================================ */
.cc-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  /* height + align-content: بعد انتقال اللوحة إلى مساحة بعرض كامل
     (جولة التبسيط النهائية)، هذا يمنع تكدّس العناصر أعلى اللوح مع
     فراغ كبير أسفلها؛ لا تغيير في البيانات نفسها، عرض فقط. */
  height: 100%;
  align-content: center;
}

.cc-pulse-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-pulse-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.cc-pulse-spark {
  color: var(--teal-accent);
}

.cc-pulse-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-primary);
}

/* ============================================================
   القسم 42) حالة "لا توجد عناصر" مشتركة (Empty State) — تبقى مستخدمة
   في لوحة "متابعة المعلمين"؛ بقية أصناف مصفوفة الانتباه/الخط الزمني
   حُذفت مع حذف لوحتَي "يحتاج انتباهك"/"آخر المستجدات" (جولة التبسيط
   النهائية) بعد التأكد أنها غير مستخدمة في أي مكان آخر بالمشروع.
   ============================================================ */
.cc-attn-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--success-soft);
  color: var(--navy-primary);
  font-size: 0.8rem;
}

.cc-attn-empty-icon {
  color: var(--success-green);
  font-weight: 700;
}

/* ============================================================
   القسم 44) الملفات — الكتل النسبية (Proportional Content Blocks،
   بديل Treemap بلا مكتبة جديدة) — B3: حجم الكتلة ∝ عدد الملفات، عبر
   flex-grow نسبي (تدفّق كتل متناسبة بدل Treemap ثنائي الأبعاد حقيقي).
   ============================================================ */
.cc-blockmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}

.cc-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 92px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--teal-soft);
  color: var(--navy-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cc-block:hover,
.cc-block:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.cc-block:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 2px;
}

.cc-block-title {
  font-weight: 700;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-block-count {
  font-size: 0.9rem;
  font-weight: 700;
}

.cc-block-pct {
  font-size: 0.66rem;
  color: var(--text-muted);
}

/* درجات كثافة تركوازية بديلة عن Rainbow عشوائي — 5 مستويات حسب حصة
   القسم من إجمالي الملفات */
.cc-block.d1 { background: #EAF2F1; }
.cc-block.d2 { background: #D7E7E5; }
.cc-block.d3 { background: #B9D6D3; }
.cc-block.d4 { background: #93BFBB; }
.cc-block.d5 { background: #6EA9A4; color: #FFFFFF; }
.cc-block.d5 .cc-block-pct { color: rgba(255, 255, 255, 0.75); }

/* ============================================================
   القسم 46) الملفات — ترتيب المساهمين (Contributors Ranking) — B6
   يعيد استخدام renderSvgBarChart() نفسه (SVG جاهز) — تنسيق العنوان
   فقط هنا؛ ممنوع تسميتها "الأفضل/الأعلى أداءً" في أي مكان بالصفحة.
   ============================================================ */
.cc-rank-wrap svg text {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ============================================================
   القسم 48) Micro-animation قصيرة (E) + احترام تفضيل تقليل الحركة —
   بلا Loop/Blinking/Pulsing مستمر؛ فقط انتقالات حالة قصيرة (150–300ms)
   موجودة أصلًا عبر var(--transition-base) في كل صنف أعلاه.
   ============================================================ */
.cc-bar-grow {
  animation: cc-grow-in 0.35s ease forwards;
  transform-origin: right center;
}

@keyframes cc-grow-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-bar-grow {
    animation: none;
  }
  .cc-heat-tile,
  .cc-block,
  .cc-kpi,
  .cc-panel-link,
  .cc-print-btn,
  .cc-filter-chip,
  .cc-donut-seg,
  .cc-search-item,
  .cc-donut-legend-item,
  a.manager-progress-row {
    transition: none !important;
  }
}

/* ============================================================
   القسم 49) Responsive أساسي — أقل من 1280px: تكديس عمود واحد (يحدث
   تلقائيًا عبر .cc-row {grid-template-columns:1fr} الافتراضية بلا حاجة
   Media Query هنا)، مع تحسينات دقيقة إضافية للشبكات الداخلية الكثيفة.
   تفصيل Tablet/Laptop/Mobile الكامل يُستكمل في جولة الصقل النهائية.
   ============================================================ */
@media (max-width: 1279px) {
  .cc-heat-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }
}

/* Tablet (768-1279px): إعادة توزيع شبكي بعمودين بدل التكديس الكامل
   بعمود واحد (المطلوب صراحةً: "Tablet = grid reordering allowed") —
   لا قفل ارتفاع شاشة هنا (ذلك حصرًا من 1280px فصاعدًا)، فقط استغلال
   أفضل للعرض المتاح؛ اللوح الثالث في cc-row-3 ينتقل لصف كامل تلقائيًا
   عبر التفاف الشبكة (Grid wrap) بلا Media Query إضافي لكل حالة. */
@media (min-width: 768px) and (max-width: 1279px) {
  .cc-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-row-3 > :last-child {
    grid-column: 1 / -1;
  }
  .cc-row-60-40,
  .cc-row-45-55,
  .cc-row-50-50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc-strip-kpis {
    flex-wrap: wrap;
  }
  .cc-kpi {
    flex-basis: calc(50% - 4px);
  }
}

@media (max-width: 640px) {
  .cc-strip-kpis {
    flex-direction: column;
    align-items: stretch;
  }
  .cc-kpi {
    flex-basis: auto;
  }
  .cc-heat-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .cc-donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}