/* ============================================================
   نظام إدارة شؤون الطلاب — نظام التصميم
   الثيم النهاري (الفاتح) هو الافتراضي، والداكن طبقة اختيارية فوقه.
   نفس الهوية في الوضعين: ذات الألوان المميّزة، وخط Tajawal،
   وذات الأنصاف والانحناءات (--radius / --radius-sm / --radius-lg).
   ============================================================ */

.modal.noor-import-modal { width: min(1180px, 100%); max-width: 100%; min-width: 0; }
.noor-intro { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.noor-intro > i { font-size: 35.2px; color: var(--accent); }
.noor-intro strong { font-size: 19.8px; }
.noor-intro p, .noor-upload p { margin: 6px 0; line-height: 1.8; }
.noor-upload { padding: 18px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.noor-upload label { display: block; margin-bottom: 12px; font-weight: 600; }
.noor-upload label span { display: inline-block; margin-inline-start: 8px; font-size: 13.2px; }
.noor-upload input { max-width: 100%; margin-bottom: 6px; }
.noor-upload button { margin-top: 10px; }

/* حقل الملف العصري (fileDrop في core.js): الحقل الأصلي شفّاف فوق المنطقة كلها */
.file-drop { position: relative; display: flex; margin-bottom: 8px; border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius); background: var(--surface-1); transition: border-color .2s, background .2s, box-shadow .2s; }
.file-drop > input[type=file].file-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1; font-size: 0; }
.file-drop-view { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.file-drop-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  font-size: 21px; color: var(--accent); background: var(--accent-soft); transition: transform .2s; }
.file-drop-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.file-drop-text b { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.6; }
.file-drop.has-file .file-drop-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop-text u { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.file-drop-text small { font-size: 12.7px; color: var(--text-muted); }
.file-drop:hover, .file-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.file-drop:hover .file-drop-icon, .file-drop.is-over .file-drop-icon { transform: translateY(-2px); }
.file-drop.is-over { border-style: solid; box-shadow: 0 0 0 4px var(--accent-soft); }
.file-drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* بعد الاختيار: بطاقة الملف بإطار متصل، ولون أيقونتها من نوعه */
.file-drop.has-file { border-style: solid; border-color: var(--accent); }
.file-drop.has-file .file-drop-text small { color: #1f9d55; }
.file-drop-icon.is-pdf { color: #e5484d; background: rgba(229,72,77,.12); }
.file-drop-icon.is-xlsx, .file-drop-icon.is-xls, .file-drop-icon.is-csv { color: #1f9d55; background: rgba(31,157,85,.12); }
.file-drop-icon.is-json { color: #d97706; background: rgba(217,119,6,.12); }
.file-drop > .file-drop-clear { display: none; position: relative; z-index: 2; align-self: center; flex: none; width: 34px; height: 34px;
  margin: 0 0 0 12px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text-secondary); cursor: pointer; }
.file-drop.has-file .file-drop-clear { display: grid; place-items: center; }
.file-drop-clear:hover { background: rgba(229,72,77,.14); color: #e5484d; }
.file-drop:has(input:disabled) { opacity: .6; pointer-events: none; }
.file-drop:has(input:disabled) .file-drop-clear { display: none; }
/* الجوال واللمس: لا سحب فيهما، فتكفي «اختره من جهازك» */
@media (hover: none) { .file-drop-mouse { display: none; } }
@media (max-width: 520px) { .file-drop-view { padding: 14px; gap: 12px; } .file-drop-icon { width: 42px; height: 42px; font-size: 18px; } }
.noor-source { display: grid; gap: 6px; margin: 16px 0; }
.noor-source span { color: var(--text-secondary); font-size: 14.3px; }
.noor-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.noor-check { display: flex; align-items: flex-start; gap: 8px; line-height: 1.8; cursor: pointer; }
.noor-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 5px; accent-color: var(--accent); }
.noor-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0; }
.noor-summary > div { display: grid; gap: 5px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.noor-summary b { font-size: 28.6px; color: var(--accent); }
.noor-summary span { font-size: 13.2px; }
/* الرقم الذي يمنع الاستيراد أحمرُ صريح، والذي ينقص المحفوظ دون منعه كهرماني */
.noor-summary > div.noor-tile-stop { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent); }
.noor-summary > div.noor-tile-stop b { color: var(--critical); }
.noor-summary > div.noor-tile-warn { border-color: #d9a520; background: color-mix(in srgb, #d9a520 9%, transparent); }
.noor-summary > div.noor-tile-warn b { color: #b8860b; }
.noor-message { padding: 12px 15px; margin: 12px 0; line-height: 1.9; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.noor-error { border-color: #d65b53; }
.noor-warn { border-color: #d9a520; background: color-mix(in srgb, #d9a520 7%, var(--surface-2)); }
.noor-warn ul, .noor-issue ul { margin: 6px 0; padding-inline-start: 22px; }
.noor-warn .row { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.noor-why { color: var(--critical); }
.noor-message summary { cursor: pointer; }
.noor-table-tools { display: flex; gap: 12px; margin: 16px 0; }
.noor-table-tools .grow { flex: 1; min-width: 0; }
.noor-table { max-height: 400px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.noor-table table { min-width: 850px; }
.noor-table thead { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.noor-ack { margin-top: 18px; }
.noor-footer { width: 100%; display: grid; gap: 8px; }
.noor-footer p { margin: 0; }
.noor-footer .row { justify-content: flex-end; }
/* سبب تعذّر الاستيراد: يُقرأ من نظرة واحدة — العلّة وعددها ثم الحل */
.noor-save-hint { display: grid; gap: 6px; }
.noor-save-hint.noor-stop {
  padding: 11px 14px; border: 1px solid var(--critical); border-radius: 10px;
  background: color-mix(in srgb, var(--critical) 9%, transparent);
  color: var(--critical); font-size: 14.3px; line-height: 1.85;
}
.noor-save-hint.noor-stop b { color: var(--critical); }
.noor-save-hint.noor-stop .noor-stop-fix { color: var(--text-primary); }
.noor-save-hint.noor-stop .noor-stop-line i { margin-inline-end: 6px; }
/* اكتملت الشروط: الزر أخضر يدعو للضغط */
.btn.noor-go, .btn.noor-go:hover { background: #009e8f; border-color: #009e8f; color: #fff; box-shadow: 0 8px 20px -10px rgba(0,158,143,.9); }
.btn.noor-go:hover { filter: brightness(1.07); }
.noor-report-modal { width: min(820px, 100%); }
.noor-issue { padding: 12px 15px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.noor-issue h4 { margin: 0 0 6px; line-height: 1.8; font-size: 16px; }
.noor-issue h4 .badge { margin-inline-end: 6px; }
.noor-issue-fix { margin: 0 0 8px; line-height: 1.9; }
.noor-issue ul { max-height: 260px; overflow: auto; }
#noorProgress { line-height: 1.9; margin: 14px 0; }
@media (max-width: 600px) {
  .noor-options { grid-template-columns: 1fr; }
  .noor-summary { grid-template-columns: repeat(2, 1fr); }
  .noor-summary > div:first-child { grid-column: 1 / -1; }
  .noor-table-tools { flex-direction: column; }
}

:root {
  color-scheme: light;
  /* ألوان الموقع تبقى كما صُمّمت: فايرفوكس بخيار «تجاوز ألوان الصفحة» (وأوضاع
     التباين العالي) يطمس الخلفيات بالأسود ويُخفي الأزرار والشعار فتبدو الصفحة منهارة.
     والمظهر الليلي متاحٌ من زرّ الموقع نفسه (data-theme) */
  forced-color-adjust: none;

  /* الأسطح */
  --bg:            #eef2f8;
  --surface-1:     #ffffff;
  --surface-2:     #f5f8fc;   /* سطح الرسوم البيانية */
  --surface-3:     #eaf0f8;
  --surface-4:     #dde6f2;
  --surface-glass: rgba(255,255,255,.80);
  --border:        rgba(38,56,84,.15);
  --border-strong: rgba(38,56,84,.27);
  --hairline:      rgba(38,56,84,.085);

  /* أسطح مركّبة (نُبقيها متغيّرات كي ينقلب الثيم كاملاً) */
  --sidebar-grad-end: #f2f6fc;
  --topbar-bg:        rgba(255,255,255,.86);
  --topbar-solid:     #ffffff;
  --scroll-thumb-hover: #aebdce;
  --veil:             rgba(23,32,51,.42);

  /* النصوص */
  --text-primary:   #16203a;
  --text-secondary: #4d5b76;
  --text-muted:     #75839c;

  /* اللون المميز — ثابت في الوضعين */
  --accent:   #3987e5;
  --accent-2: #06b6d4;
  --accent-soft: rgba(57,135,229,.12);
  --accent-ink:  #1b5aa8;   /* نص باللون المميز فوق سطح فاتح */
  --mark-bg:     rgba(57,135,229,.22);
  --mark-fg:     #0f4a92;
  --swatch-ring: rgba(23,32,51,.20);

  /* السلاسل التصنيفية — اجتازت فحوص CVD والتباين في الوضعين */
  --series-1: #3987e5;  /* أزرق   */
  --series-2: #d95926;  /* برتقالي */
  --series-3: #199e70;  /* مائي   */
  --series-4: #c98500;  /* أصفر   */
  --series-5: #d55181;  /* أرجواني */
  --series-6: #008300;  /* أخضر   */
  --series-7: #9085e9;  /* بنفسجي */
  --series-8: #e66767;  /* أحمر   */

  /* ألوان الدرجات النظامية — ترافقها دائماً تسمية نصية */
  --deg-6: #4c5568;  /* أسود   — الدرجة السادسة */
  --deg-5: #e66767;  /* أحمر   — الخامسة */
  --deg-4: #e8823f;  /* برتقالي — الرابعة */
  --deg-3: #d9a520;  /* أصفر   — الثالثة */
  --deg-2: #22b07d;  /* أخضر   — الثانية */
  --deg-1: #b7c2d4;  /* أبيض   — الأولى */

  /* مستويات الإجراءات والتعهدات */
  --lvl-red:        #e66767;
  --lvl-orange:     #e8823f;
  --lvl-yellow:     #d9a520;
  --lvl-lightgreen: #5ec98f;
  --lvl-darkgreen:  #12855c;

  /* الحالة */
  --critical: #e66767;
  --high:     #e8823f;
  --medium:   #d9a520;
  --low:      #22b07d;

  /* نصوص الشارات — تُقرأ فوق خلفياتها الشفافة في كل ثيم */
  --fg-critical: #b23433;
  --fg-high:     #a75a17;
  --fg-medium:   #8a6708;
  --fg-low:      #0f7350;
  --fg-info:     #1b5aa8;
  --fg-neutral:  #4b5468;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --shadow:    0 20px 45px -24px rgba(23,32,51,.30);
  --shadow-sm: 0 6px 18px -10px rgba(23,32,51,.22);
  --shadow-pop:   0 24px 60px -22px rgba(23,32,51,.35);
  --shadow-menu:  0 14px 32px rgba(23,32,51,.16);
  --shadow-modal: 0 40px 90px -34px rgba(23,32,51,.45);
  --sidebar-w: 300px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #080c16;
  --surface-1:     #0f1626;
  --surface-2:     #131a2b;   /* سطح الرسوم البيانية */
  --surface-3:     #1a2337;
  --surface-4:     #212c44;
  --surface-glass: rgba(19, 26, 43, .72);
  --border:        rgba(148, 163, 184, .16);
  --border-strong: rgba(148, 163, 184, .30);
  --hairline:      rgba(148, 163, 184, .10);

  --sidebar-grad-end: #0b1120;
  --topbar-bg:        rgba(8,12,22,.82);
  --topbar-solid:     #080c16;
  --scroll-thumb-hover: #2f3d5c;
  --veil:             rgba(4,7,14,.78);

  --text-primary:   #eef2f8;
  --text-secondary: #a9b6cc;
  --text-muted:     #6b7a94;

  --accent-soft: rgba(57,135,229,.14);
  --accent-ink:  #8ec2ff;
  --mark-bg:     rgba(57,135,229,.28);
  --mark-fg:     #bcd9ff;
  --swatch-ring: rgba(255,255,255,.25);

  --deg-6: #8b8fa3;
  --deg-1: #d8dbe6;

  --fg-critical: #ffa3a3;
  --fg-high:     #ffbe8e;
  --fg-medium:   #f0cf74;
  --fg-low:      #7ee0b6;
  --fg-info:     #96c5ff;
  --fg-neutral:  #c3c8d6;

  --shadow:    0 20px 45px -20px rgba(0,0,0,.8);
  --shadow-sm: 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-pop:   0 24px 60px -18px rgba(0,0,0,.9);
  --shadow-menu:  0 14px 32px rgba(0,0,0,.32);
  --shadow-modal: 0 40px 90px -30px rgba(0,0,0,.9);
}

* { margin:0; padding:0; box-sizing:border-box }

body {
  font-family:'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  font-size:15.4px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar { width:9px; height:9px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--surface-4); border-radius:99px }
::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover) }

a { color:inherit; text-decoration:none }
button, input, select, textarea { font-family:inherit }

/* ---------- التخطيط ---------- */
.layout { display:flex; min-height:100vh }

/**
 * منطقة شريط الحالة في الآيفون (viewport-fit=cover في app.html): الصفحة تمتدّ
 * تحت الساعة والبطارية، فنرسم فوقها شريطاً بلون الترويسة، ويبدأ المحتوى وكل
 * ملتصقٍ أعلى الشاشة تحته. كان سفاري يرسم هذه المنطقة بنفسه، فيركب شريطُه رأسَ
 * الترويسة عند النزول ويبترها. وخارج الآيفون قيمُ env() صفرٌ فلا يتغيّر شيء.
 */
.layout::before {
  content:""; position:fixed; inset:0 0 auto; z-index:62; height:env(safe-area-inset-top, 0px);
  background:var(--topbar-bg); backdrop-filter:blur(18px);
}

.sidebar {
  width:var(--sidebar-w); flex-shrink:0; position:fixed; inset-inline-start:0; top:env(safe-area-inset-top, 0px); bottom:0;
  padding-right:env(safe-area-inset-right, 0px);
  background:linear-gradient(180deg, var(--surface-1), var(--sidebar-grad-end));
  border-inline-end:1px solid var(--border);
  display:flex; flex-direction:column; z-index:60; transition:transform .28s ease;
}
.sidebar-head { padding:22px 20px 18px; border-bottom:1px solid var(--border) }
.sidebar-head .logo { display:flex; align-items:center; gap:12px }
.sidebar-head .mark {
  width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:transparent; overflow:hidden;
}
.sidebar-head .mark img {
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 6px 14px rgba(15,35,70,.28));
}
/* اسم المدرسة يأتي من القاعدة وقد يطول، فيُقصّ في سطرين بلا أن يزيح الشعار */
.sidebar-head .logo-text { min-width:0; flex:1 }
.sidebar-head h2 {
  font-size:16px; font-weight:800; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sidebar-head span {
  font-size:12.7px; color:var(--text-muted); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* دور صاحب الجلسة بجوار المدينة والعام: لونٌ مميّز يفصله عن بيانات المدرسة —
   هذا «من أنا هنا» لا «أين أنا» */
.sidebar-head .role-tag { color:var(--accent-ink); font-weight:700 }
.sidebar-head .role-tag::before {
  content:'•'; color:var(--text-muted); font-weight:400; margin:0 5px;
}

/* مراحل المدرسة تحت اسمها: شارة لكل مرحلة بخلفية فاتحة من لونها —
   الابتدائية زرقاء، والمتوسطة خضراء، والثانوية حمراء */
.sidebar-head .stage-chips { display:flex; flex-wrap:wrap; gap:5px; margin:3px 0 4px }
.sidebar-head .stage-chip {
  display:inline-flex; align-items:center; padding:1.5px 9px; border-radius:6px;
  font-size:11.6px; font-weight:700; line-height:1.6; white-space:nowrap;
  background:var(--surface-3); color:var(--text-secondary); border:1px solid var(--border);
}
.sidebar-head .stage-chip.is-primary      { background:rgba(57,135,229,.13); color:#2563c9; border-color:rgba(57,135,229,.32) }
.sidebar-head .stage-chip.is-intermediate { background:rgba(25,158,112,.13); color:#12805a; border-color:rgba(25,158,112,.32) }
.sidebar-head .stage-chip.is-secondary    { background:rgba(230,103,103,.14); color:#c43f3f; border-color:rgba(230,103,103,.34) }
.sidebar-head .stage-chip.is-kindergarten { background:rgba(217,165,32,.15); color:#9a7209; border-color:rgba(217,165,32,.36) }
:root[data-theme="dark"] .sidebar-head .stage-chip.is-primary      { color:#7fb2f2 }
:root[data-theme="dark"] .sidebar-head .stage-chip.is-intermediate { color:#5fd0a5 }
:root[data-theme="dark"] .sidebar-head .stage-chip.is-secondary    { color:#f29a9a }
:root[data-theme="dark"] .sidebar-head .stage-chip.is-kindergarten { color:#e8c25a }

/* باقة المشترك تحت اسم المدرسة: يراها في كل شاشة، فلا يكتشف حدّ باقته عند المنع.
   وكل شارة تُنقر إلى الدرجة التي تليها — الأساسية إلى الاحترافية والاحترافية إلى
   رويال — ورويال شارةٌ لا رابط لها، فلا شيء يُشترى بعدها */
.sidebar-head .plan-chip {
  display:inline-flex; align-items:center; gap:6px; margin-top:7px; max-width:100%;
  padding:2.5px 9px; border-radius:999px; font-size:11.9px; font-weight:700;
  background:var(--surface-3); color:var(--text-secondary); border:1px solid var(--border);
  text-decoration:none; transition:border-color .16s, color .16s;
}
.sidebar-head .plan-chip > b {
  font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-head .plan-chip > i { font-size:11px; flex-shrink:0 }
.sidebar-head .plan-chip.is-pro {
  background:rgba(217,165,32,.14); color:var(--fg-medium); border-color:rgba(217,165,32,.34);
}
.sidebar-head .plan-chip.is-royal {
  background:rgba(139,92,246,.14); color:#7c5cdb; border-color:rgba(139,92,246,.38);
}
.sidebar-head .plan-chip .nav-emoji { font-size:12.1px; flex-shrink:0 }
.sidebar-head a.plan-chip[href] { cursor:pointer }
.sidebar-head a.plan-chip[href]:hover { color:var(--fg-info); border-color:rgba(57,135,229,.45) }
.sidebar-head .plan-chip .up {
  font-size:11px; font-weight:600; color:var(--text-muted); flex-shrink:0;
  padding-inline-start:6px; border-inline-start:1px solid var(--border);
}
.sidebar-head a.plan-chip[href]:hover .up { color:var(--fg-info) }

/* وحين تنزلق القائمة عن أولها — في الجوال والحاسب — يبقى الاسم وحده في سطر،
   وتعود التفاصيل عند الرجوع إلى أولها — bindCompactSidebarHead() */
.sidebar.head-compact .sidebar-head { padding:8px 16px }
.sidebar.head-compact .sidebar-head .logo { align-items:center; gap:9px }
.sidebar.head-compact .sidebar-head .mark { width:28px; height:28px; margin-top:0 }
.sidebar.head-compact .sidebar-head h2 {
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px;
}
.sidebar.head-compact .sidebar-head #schoolMeta,
.sidebar.head-compact .sidebar-head .stage-chips,
.sidebar.head-compact .sidebar-head .plan-chip { display:none }

.nav { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 12px 20px }
.nav-group { margin-bottom:6px }
.nav-group > h6 {
  font-size:11.6px; font-weight:700; color:var(--text-muted); letter-spacing:.6px;
  padding:14px 12px 7px; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:6px;
  color:var(--text-secondary); cursor:pointer; font-size:15.4px; font-weight:500;
  transition:background .16s, color .16s; position:relative; margin-bottom:2px; border:none;
  background:none; width:100%; text-align:start;
}
.nav-item i {
  width:19px; text-align:center; font-size:16px; flex-shrink:0;
  color:var(--nav-ico, inherit); transition:color .16s;
}
.nav-item:hover { background:var(--surface-3); color:var(--text-primary) }
.nav-item.active { background:var(--accent-soft); color:var(--accent-ink); font-weight:700 }
.nav-item.active::before {
  content:''; position:absolute; inset-inline-start:0; top:22%; bottom:22%; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.nav-item .badge-count {
  margin-inline-start:auto; background:var(--critical); color:#fff; font-size:11.6px; font-weight:700;
  padding:1px 7px; border-radius:99px; min-width:20px; text-align:center; flex-shrink:0;
}
/* اسم القسم سطرٌ واحد لا يلتف: إن ضاق عنه السطر (صورة «جديد» مع عدّاد) قُصَّ
   بنقاط، ولا يُضغط ما بعده. الاسم وحده span بلا صنف؛ الأيقونة والشارات لها أصنافها. */
.nav-item > span:not([class]) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.nav-item .nav-pro, .nav-item .nav-ext { flex-shrink:0 }

/* أيقونات القائمة الجانبية: لون دلالي لكل شاشة يُسرّع التقاطها بالبصر.
   قيم متوسطة النصوع تتجاوز 3:1 على سطح الوضعين معاً، فلا تحتاج نسخة داكنة.
   الألوان تتبع أسر المجموعات: المتابعة باردة، والسلوك دافئة على سلّم الخطورة،
   والمدرسة خضراء، والإدارة محايدة. */
.nav-item[data-view="dashboard"]  { --nav-ico:#3987e5 }  /* أزرق  — لوحة القيادة */
.nav-item[data-view="students"]   { --nav-ico:#199e70 }  /* زمردي — الطلاب */
.nav-item[data-view="attendance"] { --nav-ico:#c98500 }  /* كهرماني — الغياب والتأخر */

.nav-item[data-view="behavior"]   { --nav-ico:#dd7a33 }  /* برتقالي — الحالات السلوكية */
.nav-item[data-view="phenomena"]  { --nav-ico:#d55181 }  /* وردي   — الظواهر والعلاج */
.nav-item[data-view="actions"]    { --nav-ico:#8b7ff0 }  /* بنفسجي — الإجراءات والتعهدات */
.nav-item[data-view="alerts"]     { --nav-ico:#e05252 }  /* أحمر   — الإنذار المبكر */

.nav-item[data-view="classes"]    { --nav-ico:#0e9bb4 }  /* مائي   — الفصول */
.nav-item[data-view="schedule"]   { --nav-ico:#5b6cc4 }  /* نيلي   — الجدول المدرسي */
.nav-item[data-view="teachers"]   { --nav-ico:#58962b }  /* زيتوني — المعلمون */

.nav-item[data-view="reports"]    { --nav-ico:#b0682c }  /* برونزي — التقارير */
.nav-item[data-view="whatsnew"]   { --nav-ico:#e0457b }  /* قرمزي — الجديد في المنصة */

.nav-item[data-view="partners"]  { --nav-ico:#16a34a }  /* أخضر   — شركاء المنصة */
.nav-item[data-view="admin"]      { --nav-ico:#64748b }  /* رمادي أزرق — لوحة التحكم */
.nav-item[data-view="platform"]   { --nav-ico:#7c4dcf }  /* أرجواني — إدارة المنصة */

/* شرح النظام: رابط خارجي لا شاشة، فيُعلَن ذلك بسهمٍ باهت في آخر السطر
   كي لا يُفاجأ المستخدم بتبويبٍ جديد يُفتح له. */
a.nav-item { text-decoration:none; --nav-ico:#8b5cf6 }
.nav-item .nav-ext {
  margin-inline-start:auto; font-size:11.6px; opacity:.5; width:auto; color:var(--text-muted);
}
.nav-item:hover .nav-ext { opacity:.8 }

.sidebar-foot { padding:14px; border-top:1px solid var(--border) }
.user-chip {
  display:flex; align-items:center; gap:11px; padding:10px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--border);
}
.user-chip .av {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  font-weight:800; font-size:15.4px; color:#fff;
}
.user-chip .meta { min-width:0; flex:1 }
.user-chip .meta b { display:block; font-size:14.3px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.user-chip .meta span { font-size:12.1px; color:var(--text-muted) }
.user-chip .meta .app-version { display:block; font-size:11px; color:var(--text-muted); direction:rtl;
  font-variant-numeric:tabular-nums; line-height:1.2 }
.icon-btn {
  background:none; border:1px solid transparent; color:var(--text-muted); cursor:pointer;
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; transition:.16s;
}
.icon-btn:hover { background:var(--surface-4); color:var(--text-primary) }

.main {
  flex:1; margin-inline-start:var(--sidebar-w); min-width:0; display:flex; flex-direction:column;
  /* حافّة الشاشة في الآيفون: شريط الحالة أعلاها، والنتوء جانبها حين يُدار أفقياً */
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

/**
 * الترويسة تلتصق أعلى الشاشة — وتحتها الشريطُ الأحمر حين يكون معروضاً، فتنزل
 * بمقدار ارتفاعه (‎--mode-banner-h‎ تضبطها الواجهة بقياسه) ولا يركب أحدهما الآخر.
 * وكلاهما تحت شريط الحالة في الآيفون (‎.layout::before‎).
 */
.topbar {
  position:sticky; top:calc(var(--mode-banner-h, 0px) + env(safe-area-inset-top, 0px)); z-index:40; display:flex; align-items:center; gap:16px;
  padding:14px 26px; background:var(--topbar-bg); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.topbar h1 { font-size:20.9px; font-weight:800; letter-spacing:-.2px }
.topbar .sub { font-size:13.2px; color:var(--text-muted); font-weight:400 }
.topbar-actions { margin-inline-start:auto; display:flex; align-items:center; gap:10px }
/* درع أخضر بجوار العنوان يطمئن أن النسخة آمنة */
.secure-badge {
  width:40px; height:40px; flex-shrink:0; object-fit:contain;
}
/* أزرار أيقونية في الشريط العلوي — بنفس انحناءات الأزرار الصغيرة */
.topbar-actions .icon-btn {
  width:34px; height:34px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary);
}
.topbar-actions .icon-btn:hover {
  background:var(--surface-3); border-color:var(--border-strong); color:var(--text-primary);
}

/* دورا مدير النظام: قائمة منسدلة بهيئة شارة الحصة بجوارها */
.workspace-switch {
  display:flex; align-items:center; gap:8px; padding:4px 6px 4px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--accent);
}
.workspace-switch select {
  width:auto; max-width:280px; min-width:0; padding:4px 4px 4px 28px; border:0; background-color:transparent;
  background-position:left 8px center; font-size:13.8px; font-weight:700; color:var(--text-primary);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.workspace-switch select:disabled { opacity:.6; cursor:progress }
/* الجوال: سطرٌ كامل فوق الحصة والأزرار، فيُقرأ الدور كاملاً ولا يزاحمها */
@media (max-width:600px) {
  .topbar-actions { flex-wrap:wrap; min-width:0; max-width:100% }
  .workspace-switch { order:-1; flex:1 1 100%; min-width:0; max-width:100% }
  .workspace-switch select { flex:1; width:100%; max-width:none }
}

.period-pill {
  display:flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); font-size:13.8px;
}
.period-pill .dot {
  width:7px; height:7px; border-radius:50%; background:var(--low);
  box-shadow:0 0 0 3px rgba(34,176,125,.2); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
/* الساعة بجوار الحصة — أرقام ثابتة العرض فلا يهتز الشريط كل دقيقة */
.period-pill .period-clock {
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.4px;
  padding-inline-start:9px; border-inline-start:1px solid var(--border);
}
/* ساعة بطاقة «الحصة الحالية» في صفحة الجدول */
.now-clock {
  font-size:20.9px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums;
}

/* بطاقتا اختيار وضع البيانات */
.mode-opt {
  display:block; width:100%; text-align:start; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:16px; transition:border-color .18s, background .18s;
}
.mode-opt:hover { border-color:var(--border-strong) }
.mode-opt.on { border-color:var(--accent); background:var(--accent-soft) }
.mode-opt .head { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.mode-opt .head i { color:var(--accent-ink); font-size:16.5px; width:20px; text-align:center }
.mode-opt .head b { font-size:15.4px; color:var(--text-primary) }
.mode-opt p { font-size:13.8px; color:var(--text-secondary); line-height:1.85; margin:0 }
.mode-opt[disabled] { opacity:.6; cursor:not-allowed }

.content { padding:26px; flex:1 }
.view { display:none; animation:fadeUp .32s ease }
.view.active { display:block }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ---------- البطاقات ---------- */
.card {
  min-width:0;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-head {
  display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border);
}
.card-head h3 { font-size:16.5px; font-weight:700; display:flex; align-items:center; gap:9px }
.card-head h3 i { color:var(--accent-ink); font-size:15.4px }
.card-head .head-actions { margin-inline-start:auto; display:flex; align-items:center; gap:8px }
.card-body { padding:20px }
.card-note { font-size:13.2px; color:var(--text-muted); padding:0 20px 16px; line-height:1.7 }

.grid { display:grid; gap:16px }
.g-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.g-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.g-4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
.g-5 { grid-template-columns:repeat(5,minmax(0,1fr)) }
.span-2 { grid-column:span 2 }
@media (max-width:1250px){ .g-5,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr} .span-2{grid-column:auto} }

/* ---------- بطاقات المؤشرات ---------- */
.stat {
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; position:relative; overflow:hidden; transition:border-color .18s, transform .18s;
}
.stat:hover { border-color:var(--border-strong); transform:translateY(-2px) }
.stat::after {
  content:''; position:absolute; inset-inline-end:-30px; top:-30px; width:110px; height:110px;
  border-radius:50%; background:var(--_c,var(--accent)); opacity:.09; filter:blur(6px);
}
.stat .ic {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:17.6px;
  background:color-mix(in srgb, var(--_c,var(--accent)) 16%, transparent); color:var(--_c,var(--accent));
  margin-bottom:13px;
}
.stat .val { font-size:34px; font-weight:800; line-height:1.15; letter-spacing:-.7px; font-variant-numeric:tabular-nums }
.stat .lbl { font-size:13.8px; color:var(--text-secondary); margin-top:3px }
.stat .delta { font-size:12.7px; color:var(--text-muted); margin-top:9px; display:flex; align-items:center; gap:5px }

/* عدّاد مصغّر داخل النوافذ (تفاصيل المدرسة في لوحة المنصة) */
.mini-stat {
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:14px; text-align:center;
}
.mini-stat b { display:block; font-size:23.1px; font-weight:800; font-variant-numeric:tabular-nums }
.mini-stat span { font-size:12.7px; color:var(--text-muted) }

/* ---------- الجداول ---------- */
.table-wrap { min-width:0; max-width:100%; overflow-x:auto }
.table-transfer-bar {
  display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:max-content;
  padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface-1);
}
.table-transfer-label { margin-inline-end:auto; color:var(--text-muted); font-size:12.7px }
.table-transfer-label i { color:var(--accent-ink); margin-inline-end:5px }
.transfer-formats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.transfer-format {
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-primary); border-radius:13px;
  padding:15px; display:grid; grid-template-columns:34px 1fr; column-gap:10px; text-align:start; cursor:pointer;
  transition:border-color .18s,transform .18s,background .18s;
}
.transfer-format:hover { border-color:var(--accent); background:var(--surface-3); transform:translateY(-1px) }
.transfer-format:disabled { opacity:.55; cursor:wait; transform:none }
.transfer-format > i { grid-row:span 2; align-self:center; font-size:27.5px; color:var(--accent-ink) }
.transfer-format b { font-size:15.4px }.transfer-format span { color:var(--text-muted); font-size:12.7px; margin-top:3px }
/* نوع التصدير في التقارير: البيانات فقط، أو الصفحة كاملة برسومها */
.transfer-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.transfer-mode {
  border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary); border-radius:13px;
  padding:12px 14px; display:grid; grid-template-columns:28px 1fr; column-gap:10px; text-align:start; cursor:pointer;
  transition:border-color .18s,background .18s;
}
.transfer-mode > i { grid-row:span 2; align-self:center; font-size:22px; color:var(--text-muted) }
.transfer-mode b { font-size:14.9px }.transfer-mode span { color:var(--text-muted); font-size:12.4px; margin-top:3px; line-height:1.6 }
.transfer-mode:hover { border-color:var(--accent) }
.transfer-mode.active { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent) }
.transfer-mode.active > i { color:var(--accent-ink) }
.transfer-format.unavailable:disabled { opacity:.45; cursor:not-allowed }
@media (max-width:600px) { .transfer-modes { grid-template-columns:1fr } }
/* صيغ التصدير في بطاقة باقة المدرسة: المتاح والمقفل في صفٍّ واحد */
.plan-formats { display:flex; flex-wrap:wrap; gap:8px }
.plan-format {
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  font-size:13.5px; font-weight:600; border:1px solid var(--border); background:var(--surface-2);
}
.plan-format.on { color:var(--low,#22b07d); border-color:color-mix(in srgb,var(--low,#22b07d) 40%,transparent) }
.plan-format.off { color:var(--text-muted); border-style:dashed }
/* صيغ الباقة الاحترافية: تُعرض ولا تُخفى — يراها صاحب الأساسية مقفلة فيعرف ما ينقصه */
.transfer-format.locked { border-style:dashed; background:var(--surface-1) }
.transfer-format.locked > i,.transfer-format.locked b { color:var(--text-muted) }
.transfer-format.locked:hover { border-color:var(--warn,#d9a520); background:var(--surface-2) }
.pro-chip {
  display:inline-flex; align-items:center; gap:4px; margin-inline-start:7px; padding:1px 7px;
  border-radius:999px; font-size:11px; font-weight:700; color:#5a4400;
  background:linear-gradient(135deg,#f5d06a,#e8a92f);
}
.pro-chip i { font-size:9.4px }
.transfer-plan-note {
  display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; padding:11px 13px; font-size:13.5px;
  border:1px solid var(--border); border-inline-start:3px solid #e8a92f; border-radius:11px;
  background:var(--surface-2); color:var(--text-secondary); line-height:1.85;
}
.transfer-plan-note > i { color:#e8a92f; margin-top:2px }
.transfer-plan-note a { color:var(--accent-ink); font-weight:700 }
.pro-upsell-head { display:flex; gap:13px; align-items:flex-start; margin-bottom:14px }
.pro-upsell-head > i { font-size:28.6px; color:#e8a92f }
.pro-upsell-head b { font-size:16px }
.pro-upsell-head p { margin:5px 0 0; color:var(--text-muted); font-size:13.8px; line-height:1.8 }
.pro-upsell-list { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.pro-upsell-list li {
  display:flex; gap:10px; align-items:center; padding:10px 12px; font-size:13.8px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text-secondary);
}
.pro-upsell-list li > i { color:var(--accent-ink); font-size:16.5px; width:18px; text-align:center }
.pro-upsell-note { margin:14px 0 0; font-size:13.4px; color:var(--text-muted); line-height:1.9 }
.transfer-summary,.import-status { margin-top:14px; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text-secondary); font-size:13.8px }
.import-callout { display:flex; gap:13px; padding:14px; margin-bottom:16px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2) }
.import-callout > i { color:var(--accent-ink); font-size:27.5px }.import-callout p { margin:5px 0 0; color:var(--text-muted); line-height:1.7; font-size:13.8px }
.import-preview-table { margin-top:12px; max-height:390px; border:1px solid var(--border); border-radius:11px }
.import-add { color:var(--low) }.import-update { color:var(--info) }.import-error { color:var(--critical) }
.print-frame { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; border:0 }

/* ---------- المعاينة قبل الطباعة (print-preview.js) ---------- */
.pv-backdrop {
  position:fixed; inset:0; z-index:240; display:flex; padding:18px;
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  background:var(--veil); backdrop-filter:blur(6px);
}
.pv-shell {
  margin:auto; width:min(1180px,100%); height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal); animation:pop .24s ease;
}
.pv-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px;
  border-bottom:1px solid var(--border); background:var(--surface-2) }
.pv-name { display:flex; align-items:center; gap:10px; flex:1; min-width:170px }
.pv-name > i { color:var(--accent); font-size:17.6px }
.pv-name b { display:block; font-size:16px; font-weight:800 }
.pv-name span { display:block; max-width:44ch; font-size:13.2px; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pv-zoom, .pv-acts { display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.pv-zoom > b { min-width:52px; text-align:center; font-size:13.8px; color:var(--text-secondary) }
/* الورقة تُعرض بمقاسها الحقيقي وتُصغَّر بالتحويل، فلا يتغيّر تنضيدها بتغيّر التكبير */
.pv-stage { position:relative; flex:1; overflow:auto; padding:20px 0; background:var(--surface-3); direction:ltr }
.pv-fit { position:relative; margin:0 auto }
.pv-paper {
  position:absolute; top:0; left:0; box-sizing:border-box; transform-origin:top left;
  background:#fff; box-shadow:0 18px 50px -22px rgba(15,30,40,.45);
}
.pv-paper > iframe { display:block; width:100%; border:0; background:#fff }
.pv-breaks { position:absolute; inset:0; pointer-events:none }
.pv-break { position:absolute; left:0; right:0; border-top:1px dashed #b3c2cc }
.pv-break > span { position:absolute; inset-inline-end:8px; top:5px; direction:rtl; padding:2px 7px;
  border-radius:7px; background:#fff; color:#8ea0ab; font-size:10.5px; font-weight:700 }
.pv-wait { position:absolute; inset:0; display:grid; place-content:center; gap:10px; justify-items:center;
  background:var(--surface-3); color:var(--text-secondary); font-size:14.3px; direction:rtl }
.pv-foot { display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--border);
  background:var(--surface-2); color:var(--text-secondary); font-size:13.2px }
.pv-foot > i { color:var(--accent-ink) }
@media print { .pv-backdrop { display:none !important } }
@media (max-width:760px) {
  .pv-backdrop { padding:env(safe-area-inset-top, 0px) 0 0 }
  .pv-shell { border-radius:0; border:0 }
  .pv-head { gap:8px; padding:10px 12px }
  .pv-name span, .pv-zoom > .btn { display:none }
}

/* العلامة المائية للمنصة أسفل كل صفحة مطبوعة (التقارير وسائر الشاشات) */
.print-watermark { display:none }
@media print {
  .print-watermark {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:99; padding:1.5mm 0 1mm;
    text-align:center; font-size:8.5px; color:#9aa3ad; unicode-bidi:plaintext; background:#fff;
  }
  body { padding-bottom:8mm }
}
@media (max-width:600px) { .transfer-formats{grid-template-columns:1fr}.table-transfer-label{display:none} }
.table-page-hidden { display:none !important }
.table-pagination {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; padding:14px; border-top:1px solid var(--border); font-size:13.8px;
  color:var(--text-secondary);
}
.table-pagination[hidden] { display:none }
.table-page-size, .table-page-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.table-page-size select { width:auto; min-width:72px; padding:6px 10px }
.table-page-number { font-variant-numeric:tabular-nums; white-space:nowrap }
@media (max-width:600px) {
  .table-pagination { justify-content:center; padding:12px 8px }
  .table-page-nav { justify-content:center; width:100%; gap:5px }
  .table-page-nav .btn { padding:6px 8px }
}
@media print {
  .table-transfer-bar { display:none !important }
  .table-pagination { display:none !important }
  .table-page-hidden { display:table-row !important }
}
table { width:100%; border-collapse:collapse; font-size:15.4px }
th, td { white-space:nowrap }
thead th {
  text-align:start; padding:11px 14px; font-size:12.7px; font-weight:700; color:var(--text-muted);
  letter-spacing:.3px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2);
  position:sticky; top:0; z-index:1;
}
tbody td { padding:12px 14px; border-bottom:1px solid var(--hairline); vertical-align:middle }
tbody tr { transition:background .14s }
tbody tr:hover { background:var(--surface-2) }
tbody tr:last-child td { border-bottom:none }
/* صف المجاميع في التذييل: خارج الترقيم والفرز، بخط أثقل وفاصل أعلاه */
tfoot td { padding:12px 14px; border-top:1px solid var(--border); font-weight:700; background:var(--surface-2); vertical-align:middle }
td.num, th.num { font-variant-numeric:tabular-nums }
/* الأرقام في كل خلية: خاناتٌ متساوية العرض، فعمودُ المبالغ يُقرأ بالعين لا
   بالعدّ، ولا يتراقص الرقم كلما تغيّر عدده. والمقاس على ‎table‎ نفسه لا على
   الخلايا، فجداولُ المقاس الضيّق تبقى على ما ضُبطت له. */
th, td { font-variant-numeric:tabular-nums }

/* ---------- الجداول في الجوال (table-mobile.js) ----------
   الجدول الأعرض من الشاشة يصير بطاقات: كل صف بطاقة، وعنوان العمود بجوار قيمته.
   وزر ‎.tm-switch‎ يعيده جدولاً يُمرَّر أفقياً. الطباعة خارج هذا كله (screen). */
.tm-switch { display:none }
@media screen and (max-width:760px) {
  .table-wrap.tm-wide > .tm-switch {
    display:flex; justify-content:flex-end; padding:8px 10px 2px;
    position:sticky; inset-inline-start:0;
  }
  .tm-switch .btn { font-size:12.7px; padding:5px 10px }
  .table-wrap.tm-cards { overflow-x:visible }
  .tm-cards > table, .tm-cards > table > tbody, .tm-cards > table > tfoot { display:block; width:100% }
  .tm-cards > table { padding:8px 10px 12px; font-size:14.3px }
  .tm-cards > table > thead { display:none }
  .tm-cards > table > tbody > tr, .tm-cards > table > tfoot > tr {
    display:block; margin-bottom:10px; padding:4px 12px; border:1px solid var(--border);
    border-radius:12px; background:var(--surface-1); box-shadow:0 1px 2px rgba(15,35,70,.05);
  }
  .tm-cards > table > tbody > tr:hover { background:var(--surface-1) }
  .tm-cards > table > tbody > tr.table-page-hidden { display:none !important }
  .tm-cards > table > * > tr > td {
    display:block; position:relative; box-sizing:border-box;
    width:auto !important; min-width:0 !important; max-width:none !important;
    padding:8px 0 8px; padding-inline-start:40%; text-align:start !important;
    white-space:normal; overflow-wrap:anywhere; background:none;
    border:0; border-bottom:1px dashed var(--hairline);
  }
  .tm-cards > table > * > tr > td:last-child { border-bottom:0 }
  .tm-cards > table > * > tr > td::before {
    content:attr(data-label); position:absolute; inset-inline-start:0; top:8px; width:37%;
    color:var(--text-muted); font-size:12.7px; font-weight:700; line-height:1.5;
  }
  /* خانة بلا عنوان (أزرار الإجراءات غالباً) تأخذ عرض البطاقة كاملاً */
  .tm-cards > table > * > tr > td[data-label=""] { padding-inline-start:0 }
  .tm-cards > table > * > tr > td[data-label=""]::before { content:none }
  .tm-cards > table > * > tr > td[data-label=""] .row-actions { justify-content:flex-end; flex-wrap:wrap }
  /* رقم التسلسل: شارة صغيرة أعلى البطاقة */
  .tm-cards > table > * > tr > td.table-row-order {
    padding:8px 0 2px; border-bottom:0; font-size:12.1px; color:var(--text-muted);
  }
  .tm-cards > table > * > tr > td.table-row-order::before { content:'#'; position:static; width:auto; margin-inline-end:1px }
  /* صف الرسالة الوحيد («لا توجد نتائج») أو فاصل المجموعة: نصٌّ بعرض البطاقة */
  .tm-cards > table > tbody > tr.tm-note { border-style:dashed; background:none; box-shadow:none }
  .tm-cards > table > tbody > tr.tm-note > td { padding-inline-start:0; text-align:center !important }
  .tm-cards > table > tbody > tr.tm-note > td::before { content:none }
}

.table-row-order {
  box-sizing:border-box; width:1%; min-width:48px; text-align:center; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
tbody .table-row-order { font-weight:700; background:color-mix(in srgb,var(--surface-2) 58%,transparent) }
.t-name { font-weight:600 }
/* جداول إدارة الاشتراكات: تبقى كل الأعمدة داخل عرض الصفحة وتلتف النصوص الطويلة. */
.subscription-fit-wrap { overflow-x:hidden }
table.subscription-fit-table { table-layout:fixed; width:100%; font-size:13.8px }
.subscription-fit-table th,
.subscription-fit-table td,
.subscription-fit-table .nowrap {
  box-sizing:border-box; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:normal;
}
.subscription-fit-table th { padding:9px 7px; line-height:1.55 }
.subscription-fit-table td { padding:10px 7px; line-height:1.65 }
.subscription-fit-table code,
.subscription-fit-table bdi { white-space:normal; overflow-wrap:anywhere; unicode-bidi:plaintext }
.subscription-fit-table .row-actions,
.subscription-fit-table .contact-actions { justify-content:center; flex-wrap:wrap; gap:4px }
.subscription-fit-table .link-btn { max-width:100%; line-height:1.65; overflow-wrap:anywhere }
.subscription-fit-table th:last-child { width:74px !important }
.subscription-fit-table td:last-child { text-align:center }

/* زرّ «تفعيله»: التفعيل اليدوي للمشترك ومدرسته — أخضر صريح يُرى من بعيد. */
.btn.btn-activate {
  background:linear-gradient(135deg,#1f9d6c,#22b07d); border-color:transparent; color:#fff; font-weight:700;
  box-shadow:0 6px 16px -9px rgba(34,176,125,.9); white-space:nowrap;
}
.btn.btn-activate:hover { filter:brightness(1.08); background:linear-gradient(135deg,#1f9d6c,#22b07d) }
.btn.btn-activate i { color:#fff }

/* بالون التلميح: يُرسم في <body> بموضعٍ ثابت (installBalloons في platform.js). */
.has-balloon { cursor:help; border-bottom:1px dotted color-mix(in srgb,var(--text-muted) 60%,transparent); outline-offset:3px }
.has-balloon.balloon-block { display:block; border-bottom:0 }
.has-balloon.balloon-plain { border-bottom:0 }
.balloon-pop {
  position:fixed; z-index:10000; max-width:320px; text-align:start; padding:7px 11px; border-radius:9px;
  background:#1f2a3a; color:#fff; font-size:12.7px; font-weight:600; line-height:1.7;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55); pointer-events:none; white-space:pre; unicode-bidi:plaintext;
}
.balloon-pop::after {
  content:''; position:absolute; top:100%; left:50%; margin-left:-6px;
  border:6px solid transparent; border-top-color:#1f2a3a;
}
.balloon-pop.below::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#1f2a3a }

/* بطاقة المشترك: مدة الاشتراك كلها ظاهرة معاً. */
.subscriber-card {
  padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
}
.sub-timeline-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.sub-timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px }
.sub-time {
  display:flex; flex-direction:column; gap:2px; padding:9px 10px; border-radius:10px;
  background:var(--surface-1); border:1px solid var(--border);
}
.sub-time i { color:var(--accent); font-size:13px }
.sub-time span { font-size:12.1px; color:var(--text-muted) }
.sub-time b { font-size:14.3px; font-variant-numeric:tabular-nums }
.sub-time.is-warn b, .sub-time.is-warn i { color:var(--fg-critical) }
.sub-time.is-empty b { color:var(--text-muted) }
.sub-timeline-bar { margin-top:10px }
.subscriber-pay-details > summary { cursor:pointer; font-weight:700; font-size:14px; margin-bottom:8px }

/* إجراءات المدارس في سطر واحد مضغوط بدلاً من عمود أيقونات طويل. */
.subscription-fit-table.schools-table th:last-child { width:134px !important }
.school-row-actions {
  display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:2px;
  width:max-content; margin-inline:auto;
}
.school-row-actions .icon-btn { width:28px; height:28px; flex:0 0 28px }

/* مفتاح الصفوف/البطاقات: مدمج في شريط الأدوات لتوفير المساحة. */
.subscription-view-switch {
  display:inline-flex; flex:none; align-items:center; gap:5px;
  padding:0 6px; margin:0 1px; border-inline:1px solid var(--border);
}
.subscription-view-switch .icon-btn {
  width:34px; height:32px; border:1px solid var(--border); border-radius:9px; background:var(--surface-1);
}
.subscription-view-switch .icon-btn:hover { border-color:var(--accent); color:var(--accent-ink) }
.subscription-view-switch .icon-btn.active {
  color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);
}

/* وضع الصفوف: لا التفاف، والعرض الكامل محفوظ بالتمرير الأفقي. */
.subscription-fit-wrap.subscription-rows-view { overflow-x:auto }
.subscription-rows-view > table.subscription-fit-table {
  table-layout:auto; width:max-content; min-width:100%; font-size:14.3px;
}
.subscription-rows-view > .subscription-fit-table th,
.subscription-rows-view > .subscription-fit-table td,
.subscription-rows-view > .subscription-fit-table .nowrap,
.subscription-rows-view > .subscription-fit-table code,
.subscription-rows-view > .subscription-fit-table bdi {
  white-space:nowrap; overflow-wrap:normal; word-break:normal;
}
.subscription-rows-view > .subscription-fit-table th { padding:11px 14px }
.subscription-rows-view > .subscription-fit-table td { padding:12px 14px }
.subscription-rows-view > .subscription-fit-table th:last-child { width:auto !important }
.subscription-rows-view > .subscription-fit-table .row-actions,
.subscription-rows-view > .subscription-fit-table .contact-actions { flex-wrap:nowrap }

/* وضع البطاقات: كل صف بطاقة مكتملة، والقيم الطويلة تلتف داخلها. */
.subscription-fit-wrap.subscription-cards-view { overflow:visible; padding:12px; background:var(--surface-2) }
.subscription-cards-view > table.subscription-fit-table,
.subscription-cards-view > table.subscription-fit-table > tbody { display:block; width:100% }
.subscription-cards-view > table.subscription-fit-table { table-layout:auto; font-size:14.3px }
.subscription-cards-view > table.subscription-fit-table > thead { display:none }
.subscription-cards-view > table.subscription-fit-table > tbody {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr)); gap:12px;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start;
  margin:0; padding:8px 13px; border:1px solid var(--border); border-radius:14px;
  background:var(--surface-1); box-shadow:var(--shadow-sm); overflow:hidden;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr:hover { background:var(--surface-1) }
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td {
  display:block; box-sizing:border-box; width:auto !important; min-width:0 !important; max-width:none !important;
  padding:9px 8px; text-align:start; white-space:normal; overflow-wrap:anywhere;
  border:0; border-bottom:1px dashed var(--hairline); background:none;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td::before {
  content:attr(data-label); display:block; margin-bottom:4px;
  color:var(--text-muted); font-size:11.6px; font-weight:700; line-height:1.5;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td[data-label=""],
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td:last-child {
  grid-column:1 / -1; border-bottom:0; text-align:start;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td[data-label=""]::before { content:none }
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td:last-child .row-actions,
.subscription-cards-view > table.subscription-fit-table > tbody > tr > td:last-child .contact-actions {
  justify-content:flex-end;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr.subscription-card-note {
  display:block; grid-column:1 / -1; padding:0; border-style:dashed; background:transparent; box-shadow:none;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr.subscription-card-note > td {
  padding:18px; text-align:center; border:0;
}
.subscription-cards-view > table.subscription-fit-table > tbody > tr.subscription-card-note > td::before { content:none }
@media (max-width:900px) {
  table.subscription-fit-table { font-size:12.7px }
  .subscription-fit-table th { padding:7px 4px; font-size:11.6px }
  .subscription-fit-table td { padding:8px 4px }
  .subscription-fit-table .btn-sm { padding:5px 7px; font-size:12.1px }
}
@media (max-width:600px) {
  .subscription-cards-view > table.subscription-fit-table > tbody { grid-template-columns:1fr }
  .subscription-cards-view > table.subscription-fit-table > tbody > tr { grid-template-columns:1fr }
  .subscription-cards-view > table.subscription-fit-table > tbody > tr > td { grid-column:1 / -1 }
  .subscription-view-switch { padding:0 4px }
}
/* مصادر الزيارات: يبقى عمود المصدر مقروءاً مهما طال الرابط، والتفاصيل الكاملة في نافذة مستقلة */
.visit-sources-table { --visit-source-width:clamp(210px,28vw,360px) }
.visit-sources-table .visit-source-cell {
  box-sizing:border-box; width:var(--visit-source-width); min-width:var(--visit-source-width);
  max-width:var(--visit-source-width);
}
.visit-source-heading {
  display:flex; align-items:center; gap:7px; width:var(--visit-source-width); max-width:100%; min-width:0;
}
.visit-source-heading > .legend-item { flex:none }
.visit-source-ellipsis,
.visit-source-raw {
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visit-source-ellipsis { flex:1; unicode-bidi:plaintext }
.visit-source-raw {
  width:var(--visit-source-width); max-width:100%; margin-top:3px; direction:ltr; unicode-bidi:plaintext;
}
.visit-source-raw code { font-size:inherit }
.visit-source-details {
  flex:none; display:inline-grid; place-items:center; width:26px; height:26px; padding:0;
  border:0; border-radius:8px; background:transparent; color:var(--accent-ink); cursor:pointer;
  transition:background .15s,color .15s;
}
.visit-source-details:hover,
.visit-source-details:focus-visible { background:var(--accent-soft); outline:none }
/* خلية القناة في جدول المصادر: شارةٌ تُنقر فتفتح تحديد القناة */
.visit-channel-btn {
  display:inline-flex; align-items:center; background:none; border:0; padding:0;
  color:inherit; font:inherit; cursor:pointer; border-radius:6px;
}
.visit-channel-btn:hover .ad-source { text-decoration:underline }
.visit-channel-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.visit-channel-auto { margin-top:2px }
.visit-count-edit {
  min-width:38px; min-height:28px; justify-content:center; font-family:inherit; cursor:text;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.visit-count-edit:hover,
.visit-count-edit:focus-visible {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.visit-count-input {
  width:64px !important; height:32px; padding:5px 7px !important; border-radius:8px !important;
  text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
}
.modal.visit-source-modal {
  width:min(1180px,calc(100vw - 24px)); max-height:calc(100vh - 24px);
}
.visit-source-modal .modal-body { padding:26px 30px }
.visit-source-detail { display:grid; gap:20px }
.visit-source-detail-field > span { display:block; margin-bottom:7px; color:var(--text-muted); font-size:13.8px }
.visit-source-full {
  display:flex; align-items:flex-start; width:100%; min-height:96px; padding:16px 18px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
  color:var(--text-primary); font-size:17.1px; font-weight:600; user-select:text;
  white-space:pre-wrap; overflow:visible; overflow-wrap:anywhere; word-break:break-word; line-height:2;
}
.visit-source-full[dir=ltr] { text-align:left }
.visit-source-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.visit-source-value {
  min-height:48px; padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface-1); overflow-wrap:anywhere; word-break:break-word; line-height:1.8;
}
.visit-source-detail-section {
  padding:17px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2);
}
.visit-source-detail-section h4 { margin:0 0 13px; font-size:15.4px }
.visit-source-detail-section h4 i { margin-inline-end:7px; color:var(--accent-ink) }
.visit-source-stats { gap:10px }
.visit-source-stats .mini-stat { background:var(--surface-1) }
.visit-source-stats .mini-stat b .badge { font-size:13.8px }
.visit-source-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.visit-source-dates > div {
  padding:12px 14px; border-radius:10px; background:var(--surface-1); overflow-wrap:anywhere;
}
.visit-source-dates span { display:block; margin-bottom:5px; color:var(--text-muted); font-size:13.2px }
.visit-source-dates b { font-size:15.4px }
.visit-source-daily-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.visit-source-daily-grid > div {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px;
  border:1px solid var(--hairline); border-radius:8px; background:var(--surface-1);
  font-size:13.2px; font-variant-numeric:tabular-nums;
}
.visit-source-daily-grid time { color:var(--text-muted) }
@media (max-width:600px) {
  .visit-sources-table { --visit-source-width:220px }
  .visit-source-stats { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .visit-source-modal .modal-body { padding:18px 14px }
  .visit-source-fields,.visit-source-dates { grid-template-columns:1fr }
  .visit-source-daily-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .visit-source-full { min-height:120px; padding:14px; font-size:15.4px }
}
/* خانة توثيق الحالة داخل الجداول */
.ok-check {
  width:17px; height:17px; accent-color:var(--low); cursor:pointer; vertical-align:middle;
}
.ok-check:disabled { cursor:not-allowed; opacity:.45 }
label.check.fs-xs { gap:5px }
.t-sub { font-size:12.7px; color:var(--text-muted) }

/* ---------- الشارات ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:3.5px 10px; border-radius:8px;
  font-size:12.7px; font-weight:700; white-space:nowrap; border:1px solid transparent;
}
.badge .swatch { width:9px; height:9px; border-radius:3px; flex-shrink:0; border:1px solid var(--swatch-ring) }
.badge-soft { background:var(--surface-3); color:var(--text-secondary); border-color:var(--border) }

.b-critical { background:rgba(230,103,103,.14); color:var(--fg-critical); border-color:rgba(230,103,103,.34) }
.b-high     { background:rgba(232,130,63,.14);  color:var(--fg-high); border-color:rgba(232,130,63,.34) }
.b-medium   { background:rgba(217,165,32,.14);  color:var(--fg-medium); border-color:rgba(217,165,32,.34) }
.b-low      { background:rgba(34,176,125,.14);  color:var(--fg-low); border-color:rgba(34,176,125,.34) }
.b-info     { background:rgba(57,135,229,.14);  color:var(--fg-info); border-color:rgba(57,135,229,.34) }
.b-neutral  { background:rgba(139,143,163,.14); color:var(--fg-neutral); border-color:rgba(139,143,163,.34) }

/* ---------- الأزرار ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:11px; border:1px solid var(--border); cursor:pointer;
  background:var(--surface-3); color:var(--text-primary); font-size:14.9px; font-weight:600;
  transition:background .16s, border-color .16s, transform .12s; white-space:nowrap;
}
.btn:hover { background:var(--surface-4); border-color:var(--border-strong) }
.btn:active { transform:scale(.98) }
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff;
  box-shadow:0 8px 20px -10px rgba(57,135,229,.8);
}
.btn-primary:hover { filter:brightness(1.08); background:linear-gradient(135deg,var(--accent),var(--accent-2)) }
.btn-noor { background:rgba(34,176,125,.16); border-color:rgba(34,176,125,.42); color:var(--fg-low) }
.btn-noor:hover { background:rgba(34,176,125,.25); border-color:rgba(34,176,125,.58) }
.btn-danger { background:rgba(230,103,103,.15); border-color:rgba(230,103,103,.4); color:var(--fg-critical) }
.btn-danger:hover { background:rgba(230,103,103,.24) }
.btn-sm { padding:6px 11px; font-size:13.8px; border-radius:9px }
.btn-ghost { background:transparent }
.btn:disabled { opacity:.5; cursor:not-allowed }

/* ---------- النماذج ---------- */
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.form-grid .full { grid-column:1/-1 }
@media (max-width:700px){ .form-grid{grid-template-columns:1fr} }
.form-field label {
  display:block; font-size:13.8px; font-weight:600; color:var(--text-secondary); margin-bottom:7px;
}
.form-field label .req { color:var(--fg-critical) }
/* صف مربعات اختيار (مراحل المدرسة ونحوها) */
.chk-row { display:flex; flex-wrap:wrap; gap:10px }
.chk {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  padding:8px 13px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--border); font-size:14.3px; transition:.18s;
}
.chk:hover { border-color:var(--border-strong) }
.chk input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; margin:0 }
.chk:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)) }
.chk:has(input:disabled) { opacity:.6; cursor:default }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=tel], input[type=email], input[type=search], select, textarea {
  width:100%; padding:10px 13px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-primary); font-size:14.9px; transition:.18s;
}
select { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a94' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 13px center; padding-left:34px }
textarea { resize:vertical; min-height:88px; line-height:1.75 }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(57,135,229,.15);
}
input::placeholder, textarea::placeholder { color:var(--text-muted) }
.color-select { position:relative; width:100% }
.color-select-native {
  position:absolute !important; width:1px !important; height:1px !important;
  opacity:0; pointer-events:none; padding:0 !important; border:0 !important;
}
.color-select-trigger {
  width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 13px 10px 14px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-primary); font-family:inherit; font-size:14.9px;
  cursor:pointer; text-align:right; transition:.18s;
}
.color-select.open .color-select-trigger,
.color-select-trigger:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(57,135,229,.15) }
.color-select-value, .color-select-option { display:flex; align-items:center; gap:9px }
.color-option-dot {
  width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:var(--option-color);
  border:1px solid var(--swatch-ring); box-shadow:0 0 0 2px color-mix(in srgb, var(--option-color) 20%, transparent);
}
.color-select-arrow {
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--text-muted); transition:transform .18s;
}
.color-select.open .color-select-arrow { transform:rotate(180deg) }
.color-select-menu {
  display:none; position:absolute; z-index:1200; top:calc(100% + 5px); right:0; left:0;
  padding:5px; max-height:260px; overflow:auto; border:1px solid var(--border);
  border-radius:11px; background:var(--surface-2); box-shadow:var(--shadow-menu);
}
.color-select.open .color-select-menu { display:block }
.color-select-option {
  width:100%; padding:9px 10px; border:0; border-radius:8px; background:transparent;
  color:var(--text-primary); font-family:inherit; font-size:14.9px; cursor:pointer; text-align:right;
}
.color-select-option:hover, .color-select-option.selected { background:var(--surface-4) }
.color-select-option.selected { color:var(--accent-ink); font-weight:600 }
.check { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:14.9px; user-select:none }
.check input[type=checkbox] { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; flex-shrink:0 }

/* ---------- حقل البحث والاختيار (Autocomplete) ---------- */
.ac { position:relative }
.ac-box {
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border); transition:.18s; cursor:text;
}
.ac-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(57,135,229,.15) }
.ac-box.picked { border-color:rgba(34,176,125,.5); background:rgba(34,176,125,.06) }
.ac-box > i.ac-ico { color:var(--text-muted); font-size:14.3px; flex-shrink:0 }
.ac-box.picked > i.ac-ico { color:var(--fg-low) }
.ac-search {
  flex:1; min-width:0; background:none !important; border:none !important; padding:0 !important;
  color:var(--text-primary); font-size:14.9px; box-shadow:none !important;
}
.ac-search:focus { outline:none }
.ac-clear {
  background:none; border:none; color:var(--text-muted); cursor:pointer; padding:3px 6px;
  border-radius:7px; font-size:13.2px; transition:.16s; flex-shrink:0;
}
.ac-clear:hover { background:var(--surface-4); color:var(--text-primary) }

.ac-menu {
  position:fixed; z-index:400; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:13px; overflow:hidden;
  box-shadow:var(--shadow-pop); animation:acIn .16s ease;
}
@keyframes acIn { from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }

.ac-tools {
  display:flex; align-items:center; gap:6px; padding:9px 12px; flex-wrap:wrap;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.ac-tools > span { font-size:12.1px; color:var(--text-muted); margin-inline-end:2px }
.ac-tools button {
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-secondary);
  font-family:inherit; font-size:12.7px; padding:3.5px 10px; border-radius:8px; cursor:pointer;
  transition:.16s;
}
.ac-tools button:hover { color:var(--text-primary); border-color:var(--border-strong) }
.ac-tools button.active { background:var(--accent-soft); color:var(--accent-ink); border-color:rgba(57,135,229,.45); font-weight:700 }
.ac-tools .ac-count { margin-inline-start:auto; font-size:12.1px; color:var(--text-muted) }

.ac-list { max-height:290px; overflow-y:auto; padding:5px }
.ac-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  cursor:pointer; transition:background .12s;
}
.ac-item:hover, .ac-item.active { background:var(--surface-3) }
.ac-item.active { box-shadow:inset 0 0 0 1px var(--accent) }
.ac-item .ac-av {
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:12.1px; font-weight:700; color:#fff; flex-shrink:0;
}
.ac-item .ac-meta { flex:1; min-width:0 }
.ac-item .ac-nm {
  font-size:14.3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ac-item .ac-nm mark { background:var(--mark-bg); color:var(--mark-fg); border-radius:3px; padding:0 1px }
.ac-item .ac-sub { font-size:12.1px; color:var(--text-muted) }
.ac-item .ac-tail { flex-shrink:0 }
.ac-group {
  padding:7px 11px 4px; font-size:11.6px; font-weight:700; color:var(--text-muted);
  letter-spacing:.4px;
}
.ac-empty { padding:24px 16px; text-align:center; color:var(--text-muted); font-size:13.8px }
.ac-empty i { display:block; font-size:24.2px; opacity:.3; margin-bottom:8px }

/* ---------- ترويسات قابلة للترتيب ---------- */
th.sortable { cursor:pointer; user-select:none; transition:color .15s }
th.sortable:hover { color:var(--text-secondary) }
th.sortable::after {
  content:'\f0dc'; font-family:'Font Awesome 6 Free'; font-weight:900;
  font-size:9.9px; opacity:.3; margin-inline-start:6px;
}
th.sortable.asc::after  { content:'\f0de'; opacity:.95; color:var(--accent-ink) }
th.sortable.desc::after { content:'\f0dd'; opacity:.95; color:var(--accent-ink) }

/* ---------- شريط المرشحات ---------- */
.filters {
  display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.filters .form-field { min-width:150px; flex:0 1 auto }
.filters .grow { flex:1 1 240px }

/* ---------- الرسوم البيانية ---------- */
.chart-box { position:relative; height:300px; padding:4px }
.chart-box.tall { height:360px }
.chart-box.short { height:230px }
.legend { display:flex; flex-wrap:wrap; gap:8px 18px; padding:2px 20px 16px }
.legend-item { display:flex; align-items:center; gap:7px; font-size:13.2px; color:var(--text-secondary) }
.legend-item .k { width:11px; height:11px; border-radius:3.5px; flex-shrink:0 }
.legend-item .k.line { height:3px; border-radius:2px; width:16px }

/* ---------- شريط التقدم ---------- */
.progress { height:7px; background:var(--surface-3); border-radius:99px; overflow:hidden }
.progress > i { display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .5s }

/* ---------- إدارة الاشتراكات السنوية ---------- */
.subscription-overview { padding:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--surface-1)),var(--surface-1)); border-bottom:1px solid var(--border) }
.subscription-title { gap:14px; margin-bottom:16px }
.subscription-title h3,.subscription-table-head h3 { display:flex; align-items:center; gap:9px; font-size:17.6px }
.subscription-title h3 i,.subscription-table-head h3 i { color:var(--accent-ink) }
.subscription-title p { margin-top:5px; color:var(--text-muted); font-size:13.8px }
.subscription-plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:13px }
.subscription-plan { display:flex; flex-direction:column; min-height:215px; padding:17px; border:1px solid var(--border); border-radius:15px; background:var(--surface-1); box-shadow:var(--shadow-sm) }
.subscription-plan.is-muted { opacity:.72 }
.subscription-plan-head,.subscription-plan-foot { display:flex; align-items:center; justify-content:space-between; gap:12px }
.subscription-plan h4 { margin-top:3px; font-size:17.6px }
.subscription-price { margin:15px 0 6px; color:var(--accent-ink) }
.subscription-price b { font-size:27.5px; font-variant-numeric:tabular-nums }
.subscription-price span,.subscription-plan > p,.subscription-plan-foot { font-size:13.2px; color:var(--text-muted) }
.subscription-plan > p { line-height:1.7; min-height:20px }
.subscription-plan ul { display:grid; gap:5px; margin:10px 0; list-style:none; font-size:12.7px; color:var(--text-secondary) }
.subscription-plan li { display:flex; align-items:center; gap:7px }
.subscription-plan li i { color:var(--low); font-size:11px }
.subscription-plan-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--border) }
.subscription-summary { padding:18px 20px; border-bottom:1px solid var(--border) }
/* إحصاءُ الجدول يأتي أسفله في «إدارة الاشتراكات»، فالحدّ يعلوه لا يتبعه */
.subscription-summary.under { border-bottom:0; border-top:1px solid var(--border) }
.subscription-table-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 4px }
.subscription-table-head p { margin-top:5px }
.subscription-filters { padding-top:12px }
.subscription-progress { width:88px; margin-top:7px }
.subscription-warning { color:var(--critical) }
.subscriber-school-summary { display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:16px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2) }
.subscriber-school-summary > i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent-ink) }
.subscriber-school-summary span { display:block; color:var(--text-muted); font-size:12.7px; margin-top:3px }
/* عمود الدخول في جدول المشتركين: التلميح يحمل تاريخ آخر دخول، فالمؤشّر يدلّ عليه */
.subscriber-logins { cursor:help; font-variant-numeric:tabular-nums }
.subscriber-note { padding:13px 0 0 }
.subscriber-note i { color:var(--accent-ink); margin-inline-end:5px }
@media (max-width:720px) { .subscription-plans-grid{grid-template-columns:1fr}.subscription-summary{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- المعلنون والأرباح ---------- */
.row-muted > td { opacity:.5 }
.row-muted > td:first-child { opacity:1 }
/* اختيار المعلن في «ميزانية المعلنين» — تظهر ميزانيته تحته */
.adv-budget-pick { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2) }
.adv-budget-pick label { font-weight:800; white-space:nowrap }
.adv-budget-pick label i { color:var(--accent); margin-inline-end:6px }
.adv-budget-pick select { min-width:min(420px, 100%); flex:0 1 420px }
.ad-source { display:inline-flex; align-items:center; gap:6px; font-size:13.8px }
/* أيقونة القناة أمام الاسم — في جدولي المعلنين والأرباح وصفوف المشتركين */
.ad-source-icon { margin-inline-end:6px }
/* رمز الإحالة ومعه زرّا نسخ رابطيه: ?ref= و ?r= — وسمٌ واحد باسمين */
.ref-code { display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.ref-code + .ref-code { margin-top:5px }
.ref-copy {
  width:auto; height:26px; padding:0 7px; gap:4px; grid-auto-flow:column;
  font-size:12.7px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; direction:ltr;
}

/* ---------- المتواجدون حالياً ---------- */
/* نقطة الحالة: خضراء نابضة لمن هو على الشاشة، ورمادية ساكنة لمن انصرف —
   والحركة هي ما يميّزها، فاللون وحده يلتبس على من لا يميّز الألوان */
.pres-dot {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--text-muted); opacity:.5; flex:none;
}
.pres-dot.on { background:#22b07d; opacity:1; animation:presPulse 2s ease-in-out infinite }
@keyframes presPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(34,176,125,.55) }
  70%     { box-shadow:0 0 0 6px rgba(34,176,125,0) }
}
@media (prefers-reduced-motion:reduce) { .pres-dot.on { animation:none } }
.pres-where { display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
.pres-where i { color:var(--accent-ink); font-size:12.1px }
.pres-since { font-weight:700 }
.pres-stamp { display:block; direction:ltr; unicode-bidi:plaintext }

/* ---------- أثر المشتركين ---------- */
/* أيقونة نوع الحركة في الشريط: لونها يقول نوعها قبل أن تُقرأ الجملة */
.trail-ic {
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:9px;
  background:color-mix(in srgb, var(--_k) 16%, transparent); color:var(--_k); font-size:13.2px;
}
/* صفٌّ وصل توّاً من التدفّق: يومض مرّةً ثم يسكن — فيُعرف الجديد بلا بحث */
@keyframes trailFresh {
  from { background:color-mix(in srgb, var(--accent) 16%, transparent) }
  to   { background:transparent }
}
.trail-fresh > td { animation:trailFresh 2.4s ease-out }
@media (prefers-reduced-motion:reduce) { .trail-fresh > td { animation:none } }

/* اسم المنتسب في الأثر: زرٌّ يفتح إعادة تمثيل مساره */
.trail-who {
  background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--text-primary);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-align:start;
}
.trail-who > i { color:var(--accent); font-size:13px; opacity:.55; transition:opacity .15s }
.trail-who:hover { color:var(--accent-ink) }
.trail-who:hover > i, .trail-who:focus-visible > i { opacity:1 }

/* ---------- إعادة تمثيل المسار (platform-tracking.js) ---------- */
.rp-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.rp-tools { display:flex; gap:8px; flex-wrap:wrap }
.rp-tools select, .rp-controls select { width:auto; padding:6px 30px 6px 12px; font-size:12.5px }
.rp-sum { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--text-secondary); margin-bottom:12px }
.rp-sum i { color:var(--text-muted); margin-inline-end:4px }

/* المسرح: إطارٌ يشبه شاشة النظام — مسار القسم فوق، والموضع وسطه، والأعمال تحته */
.rp-stage {
  min-height:230px; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--surface-2);
}
.rp-slide { animation:rpIn .45s ease both; border-top:4px solid var(--_k) }
@keyframes rpIn { from { opacity:0; transform:translateX(-18px) } to { opacity:1; transform:none } }
.rp-crumbs {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 16px;
  font-size:12.5px; color:var(--text-muted); background:var(--surface-1); border-bottom:1px solid var(--border);
}
.rp-crumbs i { font-size:9px; opacity:.6 }
.rp-crumbs .on { color:var(--text-primary); font-weight:700 }
.rp-main { display:flex; align-items:center; gap:16px; padding:22px 18px 12px }
.rp-icon {
  flex:none; width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:24px;
  background:color-mix(in srgb, var(--_k) 16%, transparent); color:var(--_k);
}
.rp-title { font-size:19px; font-weight:800; line-height:1.5 }
.rp-meta { font-size:12.5px; color:var(--text-muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:2px }
.rp-stay {
  padding:2px 9px; border-radius:999px; font-weight:700; color:var(--_k);
  background:color-mix(in srgb, var(--_k) 12%, transparent);
}
.rp-acts { display:flex; flex-direction:column; gap:6px; padding:4px 18px 18px }
.rp-act {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; padding:7px 12px; border-radius:10px;
  background:color-mix(in srgb, #8f6bd8 10%, transparent); border:1px solid color-mix(in srgb, #8f6bd8 28%, transparent);
  animation:rpAct .4s ease both;
}
.rp-act > i { color:#8f6bd8 }
@keyframes rpAct { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:none } }
.rp-none { padding:4px 18px 18px }

/* تقدّم الشريحة الحاضرة وعدُّها التنازلي — في «الوقت الحقيقي» قد تطول الشريحة
   دقائق، فيُرى أن العرض ينتظر لا أنه توقّف */
.rp-progress { display:flex; align-items:center; gap:10px; margin-top:8px }
.rp-progress-bar { flex:1; height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden }
.rp-progress-bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .5s linear }
.rp-progress #rpLeft { min-width:120px; text-align:end; font-variant-numeric:tabular-nums }
/* الإيقاف المؤقت يُجمّد الأعمال التي لم يحن ظهورها، فتظهر في لحظتها بعد الاستئناف */
.rp-stage.paused .rp-act { animation-play-state:paused }

/* شريط الزمن: قطعةٌ لكل شريحة، عرضُها بجذر مدتها — فلا تبتلع شريحةٌ طويلة الشريطَ كله */
.rp-track { display:flex; gap:3px; margin:12px 0 10px; height:12px }
.rp-seg {
  min-width:6px; border:0; padding:0; border-radius:4px; cursor:pointer; flex-basis:0;
  background:color-mix(in srgb, var(--_k) 28%, transparent); transition:background .2s, transform .2s;
}
.rp-seg.done { background:color-mix(in srgb, var(--_k) 60%, transparent) }
.rp-seg.on { background:var(--_k); transform:scaleY(1.45) }
.rp-seg:hover { background:color-mix(in srgb, var(--_k) 80%, transparent) }
.rp-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.rp-controls #rpCount { font-variant-numeric:tabular-nums; margin-inline-start:auto }

.rp-lower { margin-top:18px; gap:18px }
.rp-h { font-size:13.5px; font-weight:800; margin:0 0 10px }
.rp-h i { color:var(--text-muted); margin-inline-end:6px }
.rp-bar { margin-bottom:9px }
.rp-bar-row { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:4px }
.rp-bar-track { height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden }
.rp-bar-track > i { display:block; height:100%; border-radius:inherit; background:var(--accent) }
.rp-list { max-height:280px; overflow:auto }
.rp-list tr[data-i] { cursor:pointer }
.rp-list tr.on > td { background:color-mix(in srgb, var(--accent) 12%, transparent) }
@media (prefers-reduced-motion:reduce) { .rp-slide, .rp-act { animation:none } }

/* شريط المرشِّحات فوق الجدول */
.trail-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 20px; border-block:1px solid var(--border);
}
.trail-chips { display:flex; gap:6px }
.trail-switch {
  display:inline-flex; align-items:center; gap:6px; font-size:13.8px;
  color:var(--text-muted); cursor:pointer; user-select:none;
}
.trail-switch input { width:auto; margin:0; cursor:pointer }

/* البالون: يرتفع من الزاوية عند كل حركة، وحافّتُه بلون نوعها */
.trail-toast {
  align-items:flex-start; border-inline-start:3px solid var(--_k);
  transition:opacity .9s ease, transform .9s ease;
}
.trail-toast { cursor:pointer; -webkit-tap-highlight-color:transparent }
.trail-toast.fading { opacity:0; transform:translateX(-24px) }
.trail-toast.dismissed { transition-duration:.25s; pointer-events:none }
.trail-toast-ic {
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px; flex:none;
  background:color-mix(in srgb, var(--_k) 16%, transparent); color:var(--_k); font-size:14.3px;
}
.trail-toast-act { line-height:1.75 }

/* بطاقات الحصيلة: المرور عليها يُظهر أسماء ما وراء الرقم (platform-tracking.js) */
.trail-stat { cursor:help }
.trail-stat:focus-visible { outline:2px solid var(--_c); outline-offset:2px }
.trail-pop {
  position:fixed; z-index:1200; max-height:min(360px, 60vh); overflow:auto;
  background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-menu); font-size:13.8px;
}
.trail-pop[hidden] { display:none }
.trail-pop-head {
  position:sticky; top:0; padding:10px 14px; font-weight:700;
  background:var(--surface-1); border-bottom:1px solid var(--border);
}
.trail-pop ul { list-style:none; margin:0; padding:4px 0 }
.trail-pop li { padding:7px 14px; line-height:1.6 }
.trail-pop li + li { border-top:1px solid var(--border) }
.trail-pop-row { display:flex; justify-content:space-between; gap:10px }
.trail-pop-n { flex:none; font-size:12.1px; color:var(--text-secondary); font-variant-numeric:tabular-nums }
.trail-pop-empty { padding:14px }

/* ---------- المُحيلون: أكثر المواقع، وأحدث الزيارات ---------- */
.ref-block { margin-top:18px }
.ref-site { display:flex; align-items:center; gap:8px; font-size:13.8px }
.ref-site > i { width:16px; text-align:center; flex:none }
.ref-host { display:block; direction:ltr; unicode-bidi:plaintext }
.ref-pages { margin-top:5px; font-size:12.7px }
.ref-pages > summary {
  cursor:pointer; color:var(--accent-ink); width:fit-content;
  list-style:none; padding-inline-start:2px;
}
.ref-pages > summary::marker, .ref-pages > summary::-webkit-details-marker { display:none; content:'' }
.ref-pages > summary::before { content:'▸ '; font-size:11px }
.ref-pages[open] > summary::before { content:'▾ ' }
.ref-page {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:3px 7px; margin-top:3px; border-radius:7px; background:var(--surface-3);
}
.ref-scope { display:flex; gap:6px; flex:none }

/* ---------- خريطة الموقع وملف الزواحف ---------- */
/* بطاقتا الملفين الدائمين: عنوانٌ ثابت وحالةٌ وتاريخُ توليد ونصُّ الملف */
.sm-files { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px }
.sm-file {
  display:grid; gap:9px; padding:15px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
}
.sm-file-head { display:flex; align-items:center; gap:10px }
.sm-file-head > i { font-size:20.9px; color:var(--accent-ink); flex:none }
.sm-file-head .grow { flex:1; min-width:0; display:grid; gap:2px }
/* العنوان الكامل بالنطاق: يُقرأ يساراً كما يُكتب، ويُنسخ كما هو إلى Search Console */
.sm-url {
  direction:ltr; unicode-bidi:plaintext; text-align:start; word-break:break-all;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:13.2px;
  padding:7px 9px; border-radius:9px; background:var(--surface-3); color:var(--accent-ink);
}
.sm-file-meta { display:flex; flex-wrap:wrap; gap:4px 14px }
.sm-file-meta i { margin-inline-end:4px }
.sm-code-box > summary { cursor:pointer; font-size:13.2px; color:var(--accent-ink); width:fit-content }
.sm-code {
  max-height:260px; overflow:auto; margin:8px 0 0; padding:11px;
  direction:ltr; text-align:start; white-space:pre; font-size:12.7px; line-height:1.7;
  background:var(--surface-3); border:1px solid var(--border); border-radius:9px;
}
.sm-steps { margin:0; padding-inline-start:20px; line-height:2.1; font-size:14.3px }
.sm-inline-copy { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap }
.sm-inline-copy code { direction:ltr; unicode-bidi:plaintext }
.sm-warn { color:#d65b53 }

/* الرسم الكروكي: شجرةٌ بالإزاحة لا بالتفريع الأفقي — تُقرأ سطراً سطراً وتصلح
   على الجوال بلا تمرير جانبي. والوصلات حدودٌ على عناصر القائمة لا صورٌ. */
.sitemap-tree { overflow-x:auto }
.sitemap-tree ul { list-style:none; margin:0; padding-inline-start:26px }
.sitemap-tree > .sm-tree-root { padding-inline-start:0 }
.sitemap-tree li { position:relative; padding:4px 0 }
.sitemap-tree ul ul > li::before {
  content:''; position:absolute; inset-inline-start:-14px; top:0; bottom:0;
  border-inline-start:1px solid var(--border-strong);
}
.sitemap-tree ul ul > li:last-child::before { bottom:auto; height:20px }
.sitemap-tree ul ul > li::after {
  content:''; position:absolute; inset-inline-start:-14px; top:20px; width:14px;
  border-top:1px solid var(--border-strong);
}
.sm-node {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 11px; font-size:13.8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
}
.sm-node > i { color:var(--accent-ink); font-size:13.2px; flex:none }
.sm-node-label { font-weight:700 }
.sm-node-meta { font-size:12.7px; color:var(--text-muted) }
.sm-loc, .sm-loc-cell { direction:ltr; unicode-bidi:plaintext }
/* الجذر هو النطاق نفسه: يُميَّز باللون فيُعرف أين يبدأ الموقع */
.sm-site { background:var(--accent-soft); border-color:var(--accent); font-size:14.9px }
.sm-branch { background:transparent; border-style:dashed }
/* المحجوب عن الزحف يبقى معروضاً باهتاً: الخريطة تُراجَع لتُعرف مساحةُ المنع أيضاً */
.sm-blocked { opacity:.6 }
.sm-blocked > i { color:var(--text-muted) }
@media (max-width:600px) {
  .sitemap-tree ul { padding-inline-start:18px }
  .sm-node { font-size:13.2px }
}

.earn-fee { display:flex; align-items:center; gap:6px }
.earn-fee input { width:78px }
.earn-fee select { width:auto; min-width:96px }
.earnings-table td { vertical-align:middle }
.earnings-table input[type=number], .earnings-table select { padding:6px 9px; font-size:13.8px; border-radius:9px }
.earnings-table select { padding-left:28px; background-position:left 9px center }
.earnings-table .earn-ad select { min-width:170px }
.earn-pct { display:flex; align-items:center; gap:4px }
.earnings-table .earn-amount { width:92px }
.earn-pct input { width:66px }
.earn-pct input:disabled { opacity:.45 }
.earn-platform { color:var(--fg-low) }
.earn-defaults .earn-fee input { width:90px }
.earn-defaults .earn-fee .btn { white-space:nowrap }

/* حصر الربحية: الرسوم الزمنية وجدولها المقروء تحتها */
#earnCharts .card { margin-inline:20px }
#earnCharts .grid.g-2 { padding-inline:20px }
#earnCharts .grid.g-2 .card { margin-inline:0 }
.earn-chart-table { margin:0 20px 18px; border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--surface-1) }
.earn-chart-table > summary { cursor:pointer; padding:11px 14px; font-size:14.3px; font-weight:700;
  color:var(--text-secondary); display:flex; align-items:center; gap:8px }
.earn-chart-table > summary:hover { color:var(--text-primary) }
.earn-chart-table[open] > summary { border-bottom:1px solid var(--hairline) }

/* الميزانية: سطر المطابقة بين ما استُحقّ من المبيعات وما وصل الحساب فعلاً */
.budget-reconcile { padding:0 20px 4px }
.budget-reconcile-box { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface-1);
  padding:11px 14px; font-size:14.9px; line-height:1.9 }
.budget-reconcile-box > i { color:var(--accent) }

/* تبقى القيم المحاسبية الأهم أوضح من بقية بيانات الصف، فيما تتبع بقية
   الميزانية — ومنها بطاقات الإحصاءات وأسماء المشتركين والمعلنين — المقاس العام. */
/* عمود المعلن نفسه: محدد مباشر لا يعتمد على class مولّد من JavaScript، حتى
   يبقى صغيراً وطبيعياً أيضاً عند بقاء نسخة قديمة من السكربت في المتصفح. */
.budget-advertiser,
#budgetSalesBody > tr > td:nth-child(7) {
  font-size:12.7px !important; font-weight:400 !important; line-height:1.55;
}
#budgetSalesBody td:nth-child(8),
#budgetSalesBody td:nth-child(9) {
  font-size:18.2px; font-weight:750; font-variant-numeric:tabular-nums;
}
#budgetSalesBody > tr > td.budget-platform-net {
  font-size:18.2px !important; font-weight:750 !important;
  font-variant-numeric:tabular-nums;
}

/* الميزانية: تحرير بنود القائمة المنسدلة — قائمتان متجاورتان، صفٌّ لكل بند */
.budget-cat-group h4 { margin:0 0 8px }
.budget-cat-list { display:flex; flex-direction:column; gap:7px; margin-bottom:10px }
.budget-cat-row { display:flex; align-items:center; gap:7px }
.budget-cat-row .cat-label { flex:1; min-width:0 }
.budget-cat-row .icon-btn[disabled] { opacity:.35; cursor:not-allowed }

.meter { display:flex; align-items:center; gap:10px }
.meter .bar { flex:1; height:7px; background:var(--surface-3); border-radius:99px; overflow:hidden; min-width:60px }
.meter .bar > i { display:block; height:100%; border-radius:99px }
.meter .v { font-size:13.2px; font-variant-numeric:tabular-nums; color:var(--text-secondary); min-width:34px; text-align:end }

/* ---------- النوافذ المنبثقة ---------- */
.modal-backdrop {
  position:fixed; inset:0; background:var(--veil); backdrop-filter:blur(6px);
  z-index:200; display:none; place-items:center; padding:24px; overflow-y:auto;
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
}
.modal-backdrop.open { display:grid }
.modal {
  background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  width:min(760px,100%); box-shadow:var(--shadow-modal); animation:pop .24s ease;
  max-height:calc(100vh - 48px - env(safe-area-inset-top, 0px)); display:flex; flex-direction:column;
}
.modal.wide { width:min(1080px,100%) }
.modal.narrow { width:min(520px,100%) }
@keyframes pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
.modal-head { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border) }
.modal-head h3 { font-size:18.2px; font-weight:800; flex:1 }
.modal-body { padding:22px; overflow-y:auto; flex:1 }
.modal-foot {
  display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--border);
}

/* ---------- التنبيهات المنبثقة: أسفل اليسار، وفوق زر الدردشة كي لا يحجبها ---------- */
.toasts { position:fixed; bottom:92px; left:22px; right:auto; z-index:300; display:flex;
  flex-direction:column; gap:10px }
.toast {
  display:flex; align-items:center; gap:11px; padding:13px 17px; border-radius:13px;
  background:var(--surface-3); border:1px solid var(--border-strong); box-shadow:var(--shadow);
  font-size:14.9px; animation:slideIn .26s ease; max-width:400px;
}
@keyframes slideIn { from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none} }
.toast.ok i   { color:var(--fg-low) }
.toast.err i  { color:var(--fg-critical) }
.toast.info i { color:var(--accent-ink) }
.salla-hint { align-items:flex-start; transition:opacity 1.5s ease, transform 1.5s ease }
.salla-hint.fading { opacity:0; transform:translateX(-24px) }
.salla-hint-body { display:flex; flex-direction:column; gap:3px; line-height:1.6; flex:1; min-width:0 }
.salla-hint-body strong { font-weight:800; margin-bottom:2px }
.salla-hint-k { color:var(--text-muted) }
.salla-hint-x { background:none; border:0; color:var(--text-muted); cursor:pointer; padding:2px; font-size:15.4px }
.salla-hint-x:hover { color:var(--text-primary) }

/* ---------- حالات فارغة / تحميل ---------- */
.empty { text-align:center; padding:52px 20px; color:var(--text-muted) }
.empty i { font-size:41.8px; opacity:.28; margin-bottom:14px; display:block }
.empty p { font-size:14.9px; line-height:1.8 }
.skeleton {
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.spinner { display:inline-block; animation:spin 1s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

/* ---------- الخط الزمني ---------- */
.timeline { position:relative; padding-inline-start:26px }
.timeline::before {
  content:''; position:absolute; inset-inline-start:7px; top:6px; bottom:6px; width:2px;
  background:var(--border);
}
.tl-item { position:relative; padding-bottom:20px }
.tl-item:last-child { padding-bottom:0 }
.tl-item::before {
  content:''; position:absolute; inset-inline-start:-24px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--_c,var(--accent)); border:2.5px solid var(--surface-1);
  box-shadow:0 0 0 2px var(--_c,var(--accent));
}
.tl-item .tl-date { font-size:12.7px; color:var(--text-muted); margin-bottom:3px }
.tl-item .tl-title { font-weight:700; font-size:14.9px; margin-bottom:3px }
.tl-item .tl-body { font-size:13.8px; color:var(--text-secondary); line-height:1.75 }

/* ---------- التبويبات ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); padding:0 20px; overflow-x:auto }
.tab {
  padding:12px 15px; cursor:pointer; font-size:14.9px; font-weight:600; color:var(--text-muted);
  border:none; background:none; border-bottom:2.5px solid transparent; transition:.16s; white-space:nowrap;
}
.tab:hover { color:var(--text-primary) }
.tab.active { color:var(--accent-ink); border-bottom-color:var(--accent) }
/* شارة العدد على رأس التبويب: دائرة حمراء فوق طرف الأيقونة، لا تزيح عنوانه */
.tab { position:relative }
.tab .badge-count {
  position:absolute; top:3px; inset-inline-start:4px;
  min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--critical); color:#fff; font-size:11.6px; font-weight:700; line-height:1;
  box-shadow:0 0 0 2px var(--surface-1);
}
.tab-panel { display:none } .tab-panel.active { display:block }

/* ---------- قائمة أدوات الصفّ ---------- */
/* تبقى في أول الخلية حيث كانت الأيقونات قبل الدمج */
.row-actions { display:flex; align-items:center; gap:2px; flex-wrap:nowrap }
.act-menu { position:relative; display:inline-flex }
.act-menu-btn[aria-expanded="true"] { background:var(--surface-4); color:var(--text-primary) }
.act-menu-pop {
  position:fixed; z-index:120; min-width:250px; max-width:320px; padding:6px;
  background:var(--surface-1); border:1px solid var(--border-strong); border-radius:14px;
  box-shadow:var(--shadow-menu); max-height:min(430px,72vh); overflow-y:auto; overscroll-behavior:contain;
  animation:actMenuIn .14s ease-out;
}
.act-menu-pop[hidden] { display:none }
@keyframes actMenuIn { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
.act-menu-sep {
  padding:9px 11px 5px; font-size:11.6px; font-weight:800; letter-spacing:.3px;
  color:var(--text-muted); text-transform:none;
}
.act-menu-pop > .act-menu-sep:first-child { padding-top:5px }
.act-menu-item {
  width:100%; display:grid; grid-template-columns:20px 1fr; align-items:center; gap:10px;
  padding:9px 11px; border:0; border-radius:10px; background:none; cursor:pointer;
  font-family:inherit; font-size:13.8px; font-weight:600; color:var(--text-primary);
  text-align:start; transition:.14s;
}
.act-menu-item > i { font-size:13.8px; color:var(--text-muted); justify-self:center; transition:.14s }
.act-menu-item > em {
  grid-column:2; font-style:normal; font-size:12.1px; font-weight:400;
  color:var(--text-muted); line-height:1.65; margin-top:2px;
}
.act-menu-item:hover:not(:disabled),
.act-menu-item:focus-visible:not(:disabled) { background:var(--surface-3); outline:none }
.act-menu-item:hover:not(:disabled) > i { color:var(--accent-ink) }
.act-menu-item.is-danger { color:var(--fg-critical) }
.act-menu-item.is-danger > i,
.act-menu-item.is-danger:hover > i { color:var(--fg-critical) }
.act-menu-item.is-danger:hover:not(:disabled) { background:color-mix(in srgb,var(--critical) 13%,transparent) }
.act-menu-item:disabled { opacity:.45; cursor:not-allowed }

/* ---------- التنقّل بين أقسام «المشتركون والحسابات» ---------- */
.seg-nav {
  display:flex; gap:7px; flex-wrap:wrap; padding:14px 20px;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.seg-nav .seg {
  position:relative; display:flex; align-items:center; gap:9px; padding:10px 15px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-1);
  color:var(--text-secondary); font-family:inherit; font-size:14.3px; font-weight:700;
  cursor:pointer; transition:.16s; white-space:nowrap;
}
.seg-nav .seg:hover { border-color:var(--border-strong); color:var(--text-primary) }
.seg-nav .seg i { font-size:14.3px; color:var(--text-muted); transition:.16s }
.seg-nav .seg small { display:block; font-size:11.6px; font-weight:500; color:var(--text-muted) }
.seg-nav .seg.active {
  border-color:var(--accent); color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-1));
}
.seg-nav .seg.active i { color:var(--accent-ink) }
.seg-nav .seg .badge-count {
  min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--critical); color:#fff; font-size:11.6px; font-weight:700; line-height:1;
}
.seg-nav .seg .badge-count.hide { display:none }

/* بطاقاتُ عدٍّ تُنقر فتُصفّي القائمة تحتها */
.stat.is-filter { cursor:pointer }
.stat.is-filter.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset }

/* لوحةٌ تُطوى: توزيع الكادر لا يُحتاج إليه في كل زيارة */
.fold { margin:14px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface-1); overflow:hidden }
.fold > summary {
  display:flex; align-items:center; gap:10px; padding:13px 17px; cursor:pointer;
  font-size:14.9px; font-weight:700; list-style:none; user-select:none;
}
.fold > summary::-webkit-details-marker { display:none }
.fold > summary::after {
  content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px;
  color:var(--text-muted); margin-inline-start:auto; transition:transform .18s;
}
.fold[open] > summary::after { transform:rotate(180deg) }
.fold > summary i { color:var(--accent-ink) }
.fold > summary .muted { font-weight:400; font-size:12.7px }

/* ---------- متفرقات ---------- */
.avatar {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-weight:700; font-size:13.8px; color:#fff; flex-shrink:0;
}
.row { display:flex; align-items:center; gap:10px }
.row.between { justify-content:space-between }
.wrap { flex-wrap:wrap }
.mt { margin-top:16px } .mt-sm { margin-top:9px } .mb { margin-bottom:16px }
.muted { color:var(--text-muted) } .sec { color:var(--text-secondary) }
.fs-sm { font-size:13.8px } .fs-xs { font-size:12.7px }
.fw-b { font-weight:700 } .ta-c { text-align:center } .ta-e { text-align:end }
.hide { display:none !important }
.nowrap { white-space:nowrap }
.divider { height:1px; background:var(--border); margin:18px 0 }

/* ---------- تمييز الحصة الحالية في الجدول ---------- */
.schedule-subject { padding:7px 9px; border-radius:9px }
.schedule-today > td:first-child { color:var(--accent-ink) }
.schedule-today-label {
  display:inline-block; margin-inline-start:7px; padding:2px 7px; border-radius:999px;
  background:rgba(57,135,229,.14); color:var(--accent-ink); font-size:11px; font-weight:700;
}
.schedule-current-head { color:var(--accent-ink) !important; background:rgba(57,135,229,.08) }
.schedule-current-cell {
  position:relative; background:rgba(57,135,229,.10) !important;
  box-shadow:inset 0 0 0 2px var(--accent);
}
.schedule-current-cell .schedule-subject { margin-top:19px }
.schedule-current-label {
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:2px 8px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; box-shadow:0 3px 9px rgba(57,135,229,.28);
}
.schedule-current-label i { font-size:9.9px }

/* ---------- الخلايا القابلة للتحرير ---------- */
.schedule-cell-edit { cursor:pointer; transition:background .15s }
.schedule-cell-edit:hover { background:rgba(57,135,229,.07) }
.schedule-cell-edit:hover .schedule-subject { filter:brightness(1.06) }
.schedule-add {
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  border:1px dashed var(--border); color:var(--text-muted); font-size:11px; opacity:.55;
}
.schedule-cell-edit:hover .schedule-add { opacity:1; color:var(--accent); border-color:var(--accent) }
.schedule-mobile-hint { display:none }

/* جدول الحصص مصفوفة زمنية؛ تحويل صفوفه إلى بطاقات في الجوال يكرر عناوين
   الحصص ويجعل الصفحة شديدة الطول. يبقى جدولاً قابلاً للسحب مع تثبيت اليوم. */
@media screen and (max-width:760px) {
  #view-schedule .card-head { align-items:flex-start; flex-wrap:wrap; padding:14px }
  #view-schedule .card-head .head-actions {
    width:100%; margin-inline-start:0; flex-wrap:wrap;
  }
  #view-schedule #schClass { flex:1 1 170px; min-width:0 }
  #view-schedule #schEditTools { flex:1 1 100%; flex-wrap:wrap }
  #view-schedule .schedule-mobile-hint {
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:8px 12px; border-bottom:1px solid var(--border);
    background:var(--surface-2); color:var(--text-muted); font-size:12.7px;
  }
  #view-schedule .schedule-mobile-hint i { color:var(--accent-ink) }

  #scheduleTable {
    position:relative; overflow-x:auto; overscroll-behavior-inline:contain;
    scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;
  }
  #scheduleTable > table { width:960px; min-width:960px; table-layout:fixed }
  #scheduleTable th,
  #scheduleTable td { box-sizing:border-box }
  #scheduleTable th:first-child,
  #scheduleTable td:first-child {
    position:sticky; inset-inline-start:0; width:88px; min-width:88px; z-index:2;
    background:var(--surface-1); box-shadow:-1px 0 0 var(--border);
  }
  #scheduleTable thead th:first-child { z-index:3; background:var(--surface-2) }
  #scheduleTable th:not(:first-child),
  #scheduleTable td:not(:first-child) { width:124px; min-width:124px }
  #scheduleTable tbody td { padding:10px 9px }
  #scheduleTable .schedule-subject { white-space:normal; line-height:1.55 }
  #scheduleTable .schedule-today > td:first-child {
    background:color-mix(in srgb,var(--accent) 9%,var(--surface-1));
  }
  #scheduleTable .schedule-today-label {
    display:block; width:max-content; margin:4px 0 0; padding:1px 6px;
  }
}

.info-list { display:grid; gap:1px; background:var(--border); border-radius:12px; overflow:hidden }
.info-list > div { display:flex; gap:12px; padding:11px 14px; background:var(--surface-1); font-size:14.3px }
.info-list > div > span:first-child { color:var(--text-muted); min-width:118px }
.info-list > div > span:last-child { font-weight:600 }


/* ---------- قسم التقارير الاحترافية ---------- */
.report-tabs-card .tabs { border-bottom:0 }
.report-settings-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; padding:18px 20px 22px;
}
.report-signatory-option {
  display:flex; align-items:center; gap:12px; min-width:0; padding:14px 15px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);
  cursor:pointer; transition:border-color .16s,background .16s;
}
.report-signatory-option:hover { border-color:var(--accent); background:var(--surface-3) }
.report-signatory-option input { width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer }
.report-signatory-option span { display:grid; gap:3px; min-width:0 }
.report-signatory-option b { color:var(--text-primary); font-size:14.9px; overflow-wrap:anywhere }
.report-signatory-option small { color:var(--text-muted); font-size:12.7px }
.report-settings-empty { grid-column:1/-1; padding:20px; text-align:center; color:var(--text-muted) }
.report-menu {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:12px; padding:16px 20px;
}
.report-card {
  display:flex; align-items:center; gap:12px; text-align:start; cursor:pointer;
  padding:14px 15px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-1); color:inherit; font-family:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.report-card:hover { border-color:var(--_c); transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.report-card.on { border-color:var(--_c); background:var(--surface-2) }
.report-card .ic {
  width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  color:#fff; background:var(--_c); font-size:17.6px;
}
.report-card .body { display:grid; gap:4px; min-width:0 }
.report-card .body b { font-size:14.9px; font-weight:700; color:var(--text-primary) }
.report-card .body span { font-size:13.2px; color:var(--text-secondary); line-height:1.75 }
.report-card .arrow { margin-inline-start:auto; color:var(--text-muted); font-size:13.2px }
.report-card.on .arrow { color:var(--_c) }

/* الورقة تقصّ زوايا الترويسة الرسمية على انحناء البطاقة، فتبدأ من حافتها */
.report-sheet { overflow:hidden }
.report-head { padding:20px; border-bottom:1px solid var(--border); background:var(--surface-2) }
.report-head h2 { font-size:20.9px; font-weight:800; letter-spacing:-.3px }
.report-head .sub { font-size:14.3px; color:var(--text-secondary); margin-top:3px }
.report-mark {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background:var(--_c); font-size:19.8px; flex:0 0 auto;
}
.report-org { text-align:end; display:grid; gap:3px }
.report-org b { font-size:15.4px }
.report-org span { font-size:13.2px; color:var(--text-secondary) }
.report-meta {
  display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--border); font-size:13.2px; color:var(--text-muted);
}
.report-meta i { margin-inline-end:5px }
.report-tools { display:flex; gap:8px; margin-top:12px }
.report-body { padding:20px }

.info-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.info-grid > div { display:grid; gap:4px; padding:11px 14px; background:var(--surface-1) }
.info-grid > div > span { font-size:12.7px; color:var(--text-muted) }
.info-grid > div > b { font-size:14.9px; font-weight:700 }

@media (max-width:700px) {
  .report-org { text-align:start }
  .report-menu { grid-template-columns:1fr; padding:14px }
  .report-settings-grid { grid-template-columns:1fr; padding:14px }
  .report-settings-actions { width:100%; margin-top:8px }
}

/* الطباعة: ورقة التقرير وحدها — بلا قوائم ولا بطاقات أخرى */
@media print {
  #reportStats, #reportMenu, #reportFilters { display:none !important }
  /* overflow:visible في الطباعة: القصّ يحبس الورقة الطويلة في صفحة واحدة */
  .report-sheet { border:0; border-radius:0; box-shadow:none; overflow:visible }
  .report-head { background:#fff; border-bottom:1px solid #ccc }
  .report-tools { display:none !important }
  .report-card { break-inside:avoid }
  .card { break-inside:avoid }
}

.sidebar-toggle { display:none }
.sidebar-veil { display:none }

/* ---------- طيّ القائمة في الحاسب ----------
   لسانٌ ملتصق بحافة القائمة الخارجية، يتبعها إذا انسحبت فيبقى عند حافة الشاشة،
   والمحتوى يتّسع مكانها — app.js setSidebarCollapsed. وألوانه وظلّه وزجاجه
   منقولةٌ من لوحة TeleGroup كما هي في الوضعين. */
:root {
  --sbt-bg: rgba(255, 255, 255, .72);
  --sbt-bg-hover: rgba(15, 23, 60, .06);
  --sbt-line: rgba(30, 41, 90, .1);
  --sbt-ink: #65708f;
  --sbt-ink-hover: #0891b2;
  --sbt-ink-closed: #0d1330;
  --sbt-ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  --sbt-bg: rgba(17, 24, 45, .62);
  --sbt-bg-hover: rgba(255, 255, 255, .075);
  --sbt-line: rgba(148, 163, 255, .13);
  --sbt-ink: #91d5ff;
  --sbt-ink-hover: #22d3ee;
  --sbt-ink-closed: #eef2ff;
}
.sidebar-tab { display:none }
@media (min-width:1001px) {
  .sidebar-tab {
    position:fixed; top:calc(var(--mode-banner-h, 0px) + env(safe-area-inset-top, 0px) + 22px); right:var(--sidebar-w); z-index:50;
    display:grid; place-items:center; width:34px; height:44px; padding:0;
    border:1px solid var(--sbt-line); border-right:0; border-radius:12px 0 0 12px;
    background:var(--sbt-bg); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
    color:var(--sbt-ink); cursor:pointer; box-shadow:-6px 4px 18px rgba(0, 0, 0, .12);
    transition:right .35s var(--sbt-ease), color .2s, background .2s;
  }
  .sidebar-tab:hover { color:var(--sbt-ink-hover); background:var(--sbt-bg-hover) }
  .sidebar-tab:focus-visible { outline:2px solid var(--sbt-ink-hover); outline-offset:2px }
  .sidebar-tab svg {
    width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  }
  /* متّسعٌ للسان في أول الترويسة، فلا يركب عنوان الصفحة */
  .topbar { padding-inline-start:48px }
  .sidebar { transition:transform .35s var(--sbt-ease), visibility .35s }
  .main { transition:margin-inline-start .35s var(--sbt-ease) }
  .sb-collapsed .sidebar { transform:translateX(100%); visibility:hidden }
  .sb-collapsed .main { margin-inline-start:0 }
  .sb-collapsed .sidebar-tab { right:0; color:var(--sbt-ink-closed) }
}
@media (min-width:1001px) and (prefers-reduced-motion:reduce) {
  .sidebar, .main, .sidebar-tab { transition:none }
}

/* خطوط القائمة الثلاثة: الأعلى والأسفل يلتقيان في الوسط ويدوران X، والأوسط ينكمش */
.burger { position:relative; display:block; width:22px; height:16px }
.burger > span {
  position:absolute; inset-inline:0; height:2.5px; border-radius:2px; background:currentColor;
  transition:top .22s ease .12s, transform .22s ease, opacity .16s ease .1s;
}
.burger > span:nth-child(1) { top:0 }
.burger > span:nth-child(2) { top:6.75px }
.burger > span:nth-child(3) { top:13.5px }
body.menu-open .burger > span { transition:top .22s ease, transform .22s ease .16s, opacity .16s ease }
body.menu-open .burger > span:nth-child(1) { top:6.75px; transform:rotate(45deg) }
body.menu-open .burger > span:nth-child(2) { opacity:0; transform:scaleX(.2) }
body.menu-open .burger > span:nth-child(3) { top:6.75px; transform:rotate(-45deg) }

@media (max-width:1000px) {
  /* القائمة تنسدل تحت الترويسة لا فوقها، فيبقى زر X ظاهراً مكان الخطوط الثلاثة.
     ‎--menu-top‎ حافة الترويسة السفلى، تقيسها الواجهة عند الفتح */
  .sidebar {
    transform:translateX(100%); top:var(--menu-top, 0px);
    transition:transform .28s ease, opacity .8s ease;
  }
  .sidebar.open { transform:none; box-shadow:var(--shadow-modal) }
  /* html أيضاً: سفاري الآيفون يتجاهل منع التمرير على body وحده */
  html:has(body.menu-open), body.menu-open { overflow:hidden }
  body.menu-open .topbar { z-index:61 }
  body.menu-open .sidebar-toggle { color:var(--text-primary); background:var(--surface-3) }
  .sidebar-veil {
    display:block; position:fixed; inset:0; z-index:59; background:var(--veil);
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  body.menu-open .sidebar-veil { opacity:1; pointer-events:auto }
  /* تلاشي الجولة التعريفية بعد الدخول */
  body.menu-fading .sidebar, body.menu-fading .sidebar-veil { opacity:0; transition-duration:.8s }
  .main { margin-inline-start:0 }
  .sidebar-toggle { display:grid }
  .content { padding:18px }
  .topbar { padding:12px 16px; transition:padding .2s ease }
  .topbar h1 { transition:font-size .2s ease }

  /* الترويسة المنطوية عند نزول الصفحة: العنوان وحده في سطر — bindCompactTopbar() */
  .topbar.compact { padding-block:7px; flex-wrap:nowrap }
  .topbar.compact > div:not(.topbar-actions) { flex:1; min-width:0 }
  /* القصّ لازمٌ لنقاط الاختصار، لكن حروف Tajawal العالية (أ، ل، ا) تعلو سطرَها
     بنحو ‎0.15em‎ فيقطع القصُّ رؤوسها ويبدو العنوان نصفَ ظاهر. الحشوة تُوسّع
     حدَّ القصّ، والهامش السالب يردّ الارتفاع كما كان فلا يتحرّك شيء */
  .topbar.compact h1 {
    font-size:15.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding-block:.2em; margin-block:-.2em;
  }
  /* وبعد العنوان شرطةٌ فاسمُ التبويب المفتوح داخل الشاشة — syncPageTab() */
  .topbar.compact h1:not([data-tab=""])[data-tab]::after {
    content:" — " attr(data-tab); font-weight:600; color:var(--text-secondary);
  }
  .topbar.compact .sub,
  .topbar.compact .secure-badge,
  .topbar.compact .topbar-actions { display:none }

  /* سفاري 26 وشريطه السفلي مصغّر يغطّي رأس الترويسة الملتصقة بنحو 15–26 نقطة
     دون أن يبلّغ الصفحة (bindCompactTopbar). فيُفسح في رأسها متّسعٌ يقع عليه
     الغطاء بدل العنوان، وتصير خلفيتها معتمة ليصبغ سفاري منطقة شريط الحالة
     بلونها هي لا بلون الصفحة، فيبدوان قطعةً واحدة */
  .safari-bar-inset .topbar.compact { padding-top:35px; background:var(--topbar-solid) }

  /* هوية المدرسة في الجوال بنصف ارتفاعها: خطٌّ أصغر وشعارٌ أصغر، وشارتا
     المرحلة والباقة في سطرٍ واحد تحت المدينة بدل سطرين منفصلين — فتبقى
     القائمة نفسها ظاهرةً من أول فتح */
  .sidebar-head { padding:10px 14px 9px }
  .sidebar-head .logo { gap:9px; align-items:flex-start }
  .sidebar-head .mark { width:34px; height:34px; margin-top:2px }
  .sidebar-head .logo-text {
    display:flex; flex-wrap:wrap; align-items:center; gap:3px 5px;
  }
  .sidebar-head h2 { flex-basis:100%; font-size:14px; line-height:1.35 }
  .sidebar-head #schoolMeta { flex-basis:100%; order:1; font-size:11.5px }
  .sidebar-head .stage-chips { order:2; margin:0; gap:4px }
  .sidebar-head .stage-chip { padding:0 7px; font-size:10.5px; border-radius:5px }
  .sidebar-head .plan-chip { order:3; margin-top:0; padding:1px 8px; gap:5px; font-size:10.8px }
  .sidebar-head .plan-chip > i, .sidebar-head .plan-chip .up { font-size:10px }
  .sidebar-head .plan-chip .nav-emoji { font-size:11px }
}

@media print {
  .sidebar, .topbar-actions, .btn, .filters { display:none !important }
  .main { margin:0 }
  body { background:#fff; color:#000 }
  .card { border-color:#ccc; box-shadow:none }
}

/* ---------- زر المظهر العائم (صفحة الدخول) ---------- */
.theme-fab {
  position:fixed; top:18px; inset-inline-end:18px; z-index:20;
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-glass); border:1px solid var(--border); color:var(--text-secondary);
  cursor:pointer; font-size:15.4px; backdrop-filter:blur(14px);
  transition:background .16s, border-color .16s, color .16s;
}
.theme-fab:hover { background:var(--surface-3); border-color:var(--border-strong); color:var(--text-primary) }

/* ============ توقيع التصميم والبرمجة — يظهر في كافة الشاشات ============ */
.app-credit {
  padding:16px 26px 22px; text-align:center;
  font-size:13.8px; color:var(--text-muted); line-height:1.9;
  border-top:1px solid var(--hairline);
}
.app-credit .sig {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-secondary); font-weight:600;
}
.app-credit .sig i { color:var(--accent-ink); font-size:13.2px }
.app-credit .sig b { color:var(--text-primary); font-weight:700 }
/* رابط قناة تيليجرام — ظاهر دائماً ولو أُخفي التوقيع */
.app-credit { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px }
.app-credit .tg-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-secondary); font-weight:600; text-decoration:none;
  transition:border-color .16s, color .16s;
}
.app-credit .tg-link i { color:#229ED9; font-size:15px }
.app-credit .tg-link:hover { border-color:#229ED9; color:var(--text-primary) }

/* عدّاد الزوار — لمدير المنصة وحده، خافت صغير لا يلفت النظر */
.visit-counter {
  padding:0 16px 10px; text-align:center;
  font-size:11px; color:var(--text-muted); opacity:.45;
  font-variant-numeric:tabular-nums; user-select:none;
}
.visit-counter:hover { opacity:.9 }

.sidebar-credit {
  margin-top:10px; text-align:center;
  font-size:12.1px; color:var(--text-muted); line-height:1.7;
}
.sidebar-credit b { color:var(--text-secondary); font-weight:600 }

@media (max-width:1000px) {
  .app-credit { padding:14px 18px 20px }
}

@media print {
  .visit-counter { display:none !important }
  .app-credit .tg-link { display:none !important }
  .app-credit { border-top:1px solid #ccc; color:#000 }
  .app-credit .sig { background:none; border:none; color:#000 }
  .app-credit .sig b { color:#000 }
}


/* ============================================================
   شريط الوضع: نسخة الديمو، ومعاينة مدير النظام لدور آخر
   ============================================================ */
.mode-banner {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 20px; font-size:14.1px; line-height:1.75;
  border-bottom:1px solid var(--border); position:relative; z-index:5;
}
.mode-banner > i { font-size:16.5px; flex:none }
.mode-banner span { flex:1; min-width:220px }
.mode-banner b { font-weight:700 }
.mode-banner .btn { flex:none }

.mode-banner.demo {
  background:linear-gradient(90deg, rgba(139,92,246,.16), rgba(99,102,241,.10));
  border-bottom-color:rgba(139,92,246,.35); color:var(--text-secondary);
}
.mode-banner.demo > i { color:#8b5cf6 }

.mode-banner.preview {
  background:linear-gradient(90deg, rgba(232,130,63,.18), rgba(217,165,32,.10));
  border-bottom-color:rgba(232,130,63,.4); color:var(--text-secondary);
}
.mode-banner.preview > i { color:#e8823f }

/**
 * الدخول بحساب مشترك: أحمر صريح وخط أبيض — لا يشبه شريط الديمو ولا شريط
 * المعاينة، لأن ما يُكتب من داخله يُكتب في بيانات مدرسة حقيقية.
 */
.mode-banner.impersonate {
  /* مثبَّت أعلى الشاشة مهما نزل التصفّح: تحذيرٌ لا يجوز أن يغيب عن العين لحظة */
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:45;
  background:linear-gradient(90deg, #b91c1c, #dc2626);
  border-bottom-color:#7f1d1d; color:#fff;
}
.mode-banner.impersonate > i,
.mode-banner.impersonate b { color:#fff }
.mode-banner.impersonate .btn {
  background:#fff; border-color:#fff; color:#b91c1c; font-weight:700;
}
.mode-banner.impersonate .btn:hover { background:#fee2e2; border-color:#fee2e2; color:#7f1d1d }

/* بطاقة الدور في شاشة معاينة الأدوار */
.role-card { cursor:pointer; text-align:start; width:100% }
.role-card:hover { border-color:var(--accent); background:var(--accent-soft) }

@media print { .mode-banner { display:none !important } }

/* ============================================================
   الاشتراك السنوي عبر منصة سلة
   ============================================================ */
/* لون سلة الأخضر — مقصود أن يختلف عن أزرق النظام، فزرّ الدفع لا يُخلط بغيره */
.btn-salla {
  background:linear-gradient(135deg,#00a89b,#00776f); border-color:transparent; color:#fff;
  box-shadow:0 8px 20px -10px rgba(0,168,155,.85); font-size:16px; padding:11px 22px;
}
.btn-salla:hover { filter:brightness(1.08); background:linear-gradient(135deg,#00a89b,#00776f) }

/* رمز الاشتراك: يُقرأ من الشاشة ويُكتب في طلب سلة، فليكن بارزاً واضح الحروف */
.sub-ref {
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:11px;
  background:var(--surface-3); border:1px dashed var(--border-strong);
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:18.7px; font-weight:700; letter-spacing:1.5px; direction:ltr;
}
.sub-ref button { background:none; border:0; cursor:pointer; color:var(--text-secondary); font-size:14.3px }
.sub-ref button:hover { color:var(--accent) }

/* شريط المدة المتبقية */
.sub-meter { height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:9px }
.sub-meter > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#00a89b,#22b07d) }
.sub-meter.warn > i { background:linear-gradient(90deg,#e8823f,#d9a520) }
.sub-meter.over  > i { background:linear-gradient(90deg,#e66767,#c94f4f) }
/* حقول دراسة الحالة الاختيارية */
.behavior-study summary { cursor: pointer; font-weight: 700; padding-block: 10px; }
.behavior-study fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-block: 12px; }
.behavior-study legend { padding-inline: 8px; font-weight: 700; }
.behavior-study .tl-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* سجل مخرجات الخادم في لوحة المنصة */
.server-log-head { flex-wrap:wrap }
.server-log-head .head-actions { flex-wrap:wrap }
.server-log-note {
  padding:10px 20px; color:var(--text-muted); font-size:13.2px;
  border-bottom:1px solid var(--border); line-height:1.7;
}
.server-log {
  height:420px; overflow:auto; padding:10px 0;
  background:#111827; color:#d1d5db; direction:ltr; text-align:left;
  font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  font-size:13.2px; line-height:1.65; scrollbar-color:#475569 #111827;
}
.server-log-entry {
  display:grid; grid-template-columns:72px 58px minmax(0,1fr); gap:10px;
  padding:5px 14px; border-inline-start:3px solid transparent;
}
.server-log-entry:hover { background:rgba(255,255,255,.045) }
.server-log-time { color:#94a3b8; white-space:nowrap }
.server-log-level { color:#93c5fd; font-weight:700; white-space:nowrap }
.server-log-entry pre {
  margin:0; min-width:0; color:inherit; white-space:pre-wrap; overflow-wrap:anywhere;
  font:inherit; unicode-bidi:plaintext;
}
.server-log-entry.log-warn { border-inline-start-color:#f59e0b; background:rgba(245,158,11,.055) }
.server-log-entry.log-warn .server-log-level { color:#fbbf24 }
.server-log-entry.log-error { border-inline-start-color:#ef4444; background:rgba(239,68,68,.075); color:#fecaca }
.server-log-entry.log-error .server-log-level { color:#f87171 }
.server-log-empty { padding:45px 20px; color:#64748b; text-align:center; direction:rtl }
@media (max-width:700px) {
  .server-log { height:340px }
  .server-log-entry { grid-template-columns:66px minmax(0,1fr) }
  .server-log-entry pre { grid-column:1 / -1; padding-inline-start:4px }
}

/* ---------- لوحة رسائل سلة ---------- */
.salla-monitor { padding:20px }
.salla-monitor .salla-sub {
  margin:22px 0 10px; font-size:14.3px; font-weight:700; color:var(--text-primary);
}
.salla-monitor .salla-sub:first-child { margin-top:0 }
.salla-auto {
  display:flex; align-items:center; gap:6px; font-size:12.7px; color:var(--text-muted);
  white-space:nowrap; cursor:pointer;
}
.ltr-code { direction:ltr; text-align:left; unicode-bidi:plaintext }
.salla-note {
  max-width:280px; white-space:normal; line-height:1.7; margin-top:4px;
}
/* شريط الأيام: عمودٌ لكل يوم، ارتفاعه بقدر ما وصل فيه */
.salla-days {
  display:flex; gap:8px; align-items:flex-end; overflow-x:auto; padding:6px 2px 2px;
}
.salla-day { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:42px }
.salla-day i {
  display:block; width:20px; border-radius:5px; background:var(--accent); opacity:.85;
}
.salla-day span { font-size:11.6px; color:var(--text-muted); direction:ltr }
.salla-day b { font-size:12.1px; font-variant-numeric:tabular-nums }
/* الحمولة كما وصلت — تُقرأ لا تُحرَّر، ولا تكسر عرض النافذة مهما طالت */
.salla-payload {
  margin:0; max-height:340px; overflow:auto; padding:12px 14px; border-radius:12px;
  background:#111827; color:#d1d5db; text-align:left;
  font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  font-size:12.7px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* زرّ تذكير المشترك بالواتساب في جدول الاشتراكات — وعليه عدد ما أُرسل */
.icon-btn.wa-notice { display:inline-flex; align-items:center; vertical-align:middle; width:auto; padding:0 7px; gap:4px; color:#1fa855 }
.icon-btn.wa-notice i { font-size:16px }
.icon-btn.wa-notice .wa-count {
  min-width:18px; padding:0 5px; border-radius:9px; font-size:11.6px; font-weight:700; line-height:18px;
  background:var(--surface-2); color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.icon-btn.wa-notice.is-sent .wa-count { background:#1fa855; color:#fff }
/* نصّ إشعار المشترك كما سيصله — بسطوره، ويُقرأ قبل الإرسال */
.notice-text {
  margin:0 0 12px; max-height:320px; overflow:auto; padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-primary);
  font-family:inherit; font-size:14.3px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere;
}
@media (max-width:700px) {
  .salla-monitor { padding:14px }
  .salla-note { max-width:200px }
}

/* ============================================================
   أولياء الأمور: شرائح الأبناء في الجدول، وصفوفهم في محرّر الربط
   ============================================================ */
.kid-chips { display:flex; flex-wrap:wrap; gap:5px }
.kid-chip {
  display:inline-flex; align-items:center; gap:6px; max-width:250px;
  padding:3px 10px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-2); font-size:12.7px; line-height:1.7;
}
.kid-chip b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kid-chip span { color:var(--text-muted); white-space:nowrap }
/* صف الابن في المحرّر: صلته ووسم «الأول» وفكّ الربط في سطر واحد */
.kid-row {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  padding:9px 12px; border:1px solid var(--border); border-radius:11px;
  background:var(--surface-2);
}
.kid-row .kid-main { flex:1; min-width:0 }
.kid-row .kid-main > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kid-row select { width:auto; min-width:116px; padding:5px 28px 5px 10px; font-size:13.2px }
.kid-row .check { margin:0 }
@media (max-width:640px) {
  .kid-row { flex-wrap:wrap }
  .kid-row .kid-main { flex-basis:100% }
}

/* ============ الدعم الفني لمسؤول المدرسة ============
   قائمة المحادثات بجانب المحادثة المعروضة. وفقاعةُ المدرسة بلون التمييز لأنها
   صاحبة الشاشة، وردُّ فريق الدعم مقابلها — عكسُ شاشة مدير المنصة. */
.ssup-chat-grid { display:grid; grid-template-columns:300px 1fr; min-height:480px }
.ssup-chat-list { border-inline-end:1px solid var(--border); overflow-y:auto; max-height:560px }
.ssup-chat-item {
  display:grid; gap:5px; width:100%; text-align:start; cursor:pointer;
  padding:13px 15px; border:0; border-bottom:1px solid var(--hairline);
  background:transparent; font:inherit; color:var(--text-primary); transition:.15s;
}
.ssup-chat-item:hover { background:var(--surface-3) }
.ssup-chat-item.active { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent) }
.ssup-thread { display:flex; flex-direction:column; min-height:0 }
.ssup-thread-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding:13px 17px; border-bottom:1px solid var(--border);
}
.ssup-thread-body {
  flex:1; overflow-y:auto; max-height:420px; padding:16px;
  display:flex; flex-direction:column; gap:10px; background:var(--surface-2);
}
.ssup-reply { display:flex; gap:9px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--border) }
.ssup-reply textarea {
  flex:1; min-height:44px; max-height:120px; resize:none; padding:11px 13px;
  border-radius:12px; font-family:inherit; font-size:14.5px; line-height:1.7;
  color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border);
}
.ssup-reply textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
@media (max-width:900px) {
  .ssup-chat-grid { grid-template-columns:1fr }
  .ssup-chat-list { border-inline-end:0; border-bottom:1px solid var(--border); max-height:260px }
}

/* ============ ردود التذكرة داخل المنصة ============
   تشترك فيها نافذة التذكرة عند فريق الدعم وعند المدرسة. «mine» ما كتبه صاحب
   الشاشة بلون التمييز، و«theirs» ما كتبه الطرف الآخر. */
.tk-box { margin:12px 0 16px; border:1px solid var(--border); border-radius:14px; overflow:hidden }
.tk-box-head { padding:10px 14px; font-weight:600; font-size:14.3px; border-bottom:1px solid var(--border); background:var(--surface-1) }
.tk-box-head i { color:var(--accent); margin-inline-end:4px }
.tk-thread {
  display:flex; flex-direction:column; gap:9px; padding:14px;
  max-height:320px; overflow-y:auto; background:var(--surface-2);
}
.tk-empty { text-align:center; padding:14px 6px }
.tk-bub {
  position:relative; max-width:min(78%, 560px); min-width:120px; padding:6px 11px 4px;
  border-radius:14px; font-size:14.6px; line-height:1.7; box-shadow:0 1px 1.5px rgba(15,23,42,.1);
}
.tk-author { font-size:12.7px; font-weight:700; margin-bottom:1px; color:var(--accent) }
.tk-text { white-space:pre-wrap; overflow-wrap:anywhere }
.tk-time {
  margin-top:1px; font-size:11.6px; line-height:1.4; opacity:.7; text-align:end;
  direction:ltr; unicode-bidi:plaintext;
}
/* الذيل: زاويةٌ حادّة في جهة المُرسِل كما في واتساب وتيليجرام */
.tk-bub.mine {
  align-self:flex-end; border-end-end-radius:4px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.tk-bub.mine .tk-author { color:rgba(255,255,255,.9) }
.tk-bub.theirs {
  align-self:flex-start; border-end-start-radius:4px;
  color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border);
}
.tk-bub.system {
  align-self:center; max-width:92%; min-width:0; text-align:center; font-size:13.4px;
  color:var(--text-secondary); background:var(--accent-soft); border:1px solid rgba(57,135,229,.24); box-shadow:none;
}
.tk-bub.system .tk-time { text-align:center }
.tk-reply { display:flex; gap:9px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--border); background:var(--surface-1) }
.tk-reply textarea {
  flex:1; min-height:48px; max-height:140px; resize:vertical; padding:9px 12px;
  border-radius:11px; font-family:inherit; font-size:14.3px; line-height:1.7;
  color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border);
}
.tk-reply textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

/* ============ بيانات تواصل مع المشتركين ============ */
.link-btn { background:none; border:none; padding:0; cursor:pointer; font-family:inherit; color:var(--accent-ink); text-align:start }
.link-btn:hover { text-decoration:underline }
.contact-actions { display:flex; gap:6px; flex-wrap:wrap }
.contact-actions a.btn { text-decoration:none }
.contact-actions .btn:disabled { opacity:.35; cursor:not-allowed }
.btn-wa { color:#139a55 !important; border-color:rgba(19,154,85,.35) !important }
.contact-card-head { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.contact-card-head + .contact-actions { margin-bottom:18px }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.contact-grid section { border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--surface-2) }
.contact-grid h4 { font-size:14.9px; margin-bottom:8px; display:flex; gap:8px; align-items:center }
.contact-grid h4 i { color:var(--accent-ink) }
.contact-row { display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:13.8px; border-bottom:1px dashed var(--hairline) }
.contact-row:last-child { border-bottom:none }
.contact-row span { color:var(--text-muted); flex:none }
.contact-row b { font-weight:600; text-align:end; overflow-wrap:anywhere }

/* «رافد الموقع» — مصادر «كيف عرفت عنا؟» بأيقوناتها (platform-heard.js) */
.heard-filter { padding:4px 20px 12px }
.heard-filter-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px }
.heard-filter-tools { color:var(--text-muted) }
.heard-chip { padding:7px 11px }
.heard-chip i, .heard-cell i { width:16px; text-align:center; font-size:16.5px }
.heard-n { font-size:12.1px; font-weight:700; min-width:20px; padding:1px 6px; border-radius:99px;
  text-align:center; background:var(--surface-3); color:var(--text-secondary) }
.heard-cell { display:inline-flex; align-items:center; gap:7px }
.heard-chart-scroll { max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-gutter:stable }
.heard-chart-scroll > .chart-box { width:100% }

/* ============ أقسام الباقة الاحترافية ============ */
.nav-pro { margin-inline-start:auto; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px;
  color:#8a5a00; background:linear-gradient(135deg,#ffe29a,#f5b83d); letter-spacing:.2px }
.tab .nav-pro { margin-inline-start:6px }
/* شارة رويال: بنفسجيّها يفرقها عن ذهبيّ «برو» في القائمة نفسها */
.nav-royal { color:#fff; background:linear-gradient(135deg,#8b5cf6,#6d3fd4) }
/* الرمز النصّي (💎) لا يرث خطّ الأيقونات، ويُوسَّع ليأخذ عرض الأيقونة الخطّية
   فتستقيم أسماءُ الأقسام على خطٍّ واحد */
.nav-item .nav-emoji { display:inline-flex; align-items:center; justify-content:center;
  width:19px; flex:none; font-size:16px; line-height:1; font-style:normal }
.nav-emoji { font-style:normal; line-height:1 }

.pro-tag { display:inline-flex; align-items:center; gap:5px; font-size:12.1px; font-weight:800; padding:3px 10px; border-radius:999px;
  color:#8a5a00; background:linear-gradient(135deg,#ffe29a,#f5b83d) }
.pro-banner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:16px;
  border-radius:16px; border:1px solid rgba(232,169,47,.45); background:rgba(245,184,61,.10) }
.pro-banner > i { font-size:24.2px; color:#e8a92f }
.pro-banner > div { flex:1; min-width:220px }
.pro-banner b { display:block; font-size:15.4px; margin-bottom:3px }
.pro-banner span { font-size:13.8px; color:var(--text-muted) }
.pro-banner .btn { text-decoration:none }
.soon-hero { display:flex; gap:18px; align-items:flex-start; padding:22px }
.soon-hero h2 { font-size:20.9px; font-weight:800 }
.soon-hero p { margin-top:8px; line-height:1.9; font-size:14.9px; color:var(--text-secondary) }
.soon-ic { width:62px; height:62px; flex:none; border-radius:18px; display:grid; place-items:center; font-size:28.6px;
  color:var(--_c); background:color-mix(in srgb, var(--_c) 14%, transparent) }
.soon-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.soon-card { padding:16px 18px }
.soon-card h3 { font-size:16px; display:flex; gap:8px; align-items:center; margin-bottom:10px }
.soon-card h3 i { color:var(--accent-ink) }
.soon-card ul { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.soon-card li { display:flex; gap:8px; font-size:14.3px; line-height:1.7; color:var(--text-secondary) }
.soon-card li i { color:#1f9d6b; margin-top:4px; font-size:12.1px }

/* ============ التكامل مع نور (باقة رويال) ============ */
.royal-banner > .nav-emoji { font-size:24.2px }
.royal-upgrade { border-color:rgba(139,92,246,.4) }
.royal-upgrade .card-head h3 .nav-emoji { font-size:16.5px }
.royal-upgrade-body { padding:0 18px 18px; display:grid; gap:12px }
.royal-upgrade-body p { font-size:14.3px; line-height:1.95; color:var(--text-secondary) }
.royal-steps { width:100%; border-collapse:collapse; font-size:14.3px }
.royal-steps td { padding:9px 10px; border-bottom:1px dashed var(--hairline) }
.royal-steps tr:last-child td { border-bottom:none }
.royal-steps td:nth-child(2) { white-space:nowrap; text-align:center }
.royal-steps tr.on { background:rgba(139,92,246,.09) }
.royal-steps tr.on td:first-child { font-weight:700 }
.royal-upgrade .btn-primary .nav-emoji { font-size:14.3px }

.designer-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; align-items:start }
@media (max-width:980px){ .designer-grid { grid-template-columns:1fr } }
.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; padding:4px 18px 16px }
.tpl { display:grid; gap:8px; padding:10px; border-radius:13px; cursor:pointer; font-family:inherit; text-align:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-primary); transition:.15s }
.tpl:hover:not(:disabled) { border-color:var(--border-strong) }
.tpl.on { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.tpl:disabled { opacity:.55; cursor:not-allowed }
.tpl b { font-size:13.2px; font-weight:600 }
.tpl-swatch { display:block; height:38px; border-radius:9px; position:relative; overflow:hidden }
.tpl-swatch i { position:absolute; inset:0 0 auto 0; height:8px }
.designer-preview { padding:0 0 16px; background:#fff; border-radius:0 0 16px 16px; overflow:hidden }
.designer-sample { padding:18px 22px 0; color:#0b3945 }
.designer-sample h4 { font-size:16.5px; margin-bottom:12px }
.designer-lines { display:grid; gap:8px }
.designer-lines u { display:block; height:9px; border-radius:6px; background:#e7eeec; text-decoration:none }
.designer-preview .oh-org b { font-size:13.8px }
.designer-preview .oh-logo { height:56px }
.designer-preview .oh-side { font-size:11.6px }
.designer-preview .oh-side b { font-size:13.2px }
.designer-preview .oh-tab { font-size:16.5px }

/* ---------- الجديد في المنصة (whats-new.js) ----------
   لكل بطاقة لون نوعها (--_c): ميزة، تقرير، قوالب. والجديد منها غير المشاهَد
   يُعلَّم بحدٍّ ملوّن وشارة «جديد» بلون الشارة الحمراء في القائمة. */
.wn-hero { display:flex; gap:16px; align-items:flex-start; padding:20px; margin-bottom:14px }
.wn-hero h2 { font-size:20.9px; margin:0 0 6px }
.wn-hero p { margin:0 0 10px; color:var(--text-secondary); line-height:1.8 }
.wn-hero-ic, .wn-ic {
  flex:none; display:grid; place-items:center; border-radius:var(--radius-sm); color:#fff;
}
.wn-hero-ic { width:52px; height:52px; font-size:24.2px; background:#e0457b }
.wn-chip {
  display:inline-flex; gap:6px; align-items:center; font-size:13.2px; font-weight:700;
  padding:4px 11px; border-radius:99px; background:var(--critical); color:#fff;
}
.wn-list { display:grid; gap:12px }
.wn-item { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-inline-start:4px solid transparent }
.wn-item.is-new { border-inline-start-color:var(--_c) }
.wn-ic { width:44px; height:44px; font-size:19.8px; background:var(--_c) }
.wn-main { flex:1; min-width:0 }
.wn-main h3 { font-size:17.1px; margin:4px 0 6px }
.wn-main p { margin:0 0 10px; color:var(--text-secondary); line-height:1.8; font-size:14.9px }
.wn-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.7px }
.wn-meta time { margin-inline-start:auto; color:var(--text-muted) }
.wn-kind { color:var(--_c); font-weight:700 }
.wn-new { background:var(--critical); color:#fff; font-weight:700; padding:1px 8px; border-radius:99px }
.wn-where {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.8px;
  padding:7px 10px; margin-bottom:10px; border-radius:var(--radius-sm); background:var(--surface-3);
}
.wn-where > .fa-location-dot { color:var(--_c) }
.wn-where span { font-weight:600 }
.wn-sep { font-size:9.9px; opacity:.5 }
.wn-shots { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-bottom:12px; max-width:760px }
.wn-shots a { display:block; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#fff }
.wn-shots img { display:block; width:100%; height:190px; object-fit:cover; object-position:top; transition:transform .2s }
.wn-shots a:hover img { transform:scale(1.03) }
.wn-actions { display:flex; flex-wrap:wrap; gap:8px }
.wn-actions a.btn { text-decoration:none }
@media (max-width:600px) {
  .wn-hero, .wn-item { padding:14px }
  .wn-hero-ic { display:none }
  .wn-ic { width:36px; height:36px; font-size:16.5px }
}

/* ---------- الإحصاءات العامة (إدارة المنصة) — platform-overview.js ----------
   مربعات بتدرّجٍ لوني ونصٍّ أبيض: الدرجات داكنةٌ بما يكفي لتباين النص
   الأبيض في الوضعين، فلا تُعاد تعريفاً للثيم الداكن. */
.pov { padding:20px }
.pov-head, .pov-section-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.pov-head h3, .pov-section-head h3 { margin:0; display:flex; align-items:center; gap:8px }
.pov-head p { margin:4px 0 0; font-size:13.5px }
.pov-section-head { align-items:center; margin:28px 0 14px }

.pov-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:18px }
@media (max-width:1250px) { .pov-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px)  { .pov-grid { grid-template-columns:1fr } }

.pov-tile {
  --_a:#2f6fc4; --_b:#4f95ec;
  position:relative; overflow:hidden; border-radius:18px; padding:18px 18px 16px; color:#fff;
  background:linear-gradient(135deg, var(--_a), var(--_b));
  box-shadow:0 10px 24px -12px var(--_a); transition:transform .2s, box-shadow .2s;
}
.pov-tile:hover { transform:translateY(-3px); box-shadow:0 16px 30px -12px var(--_a) }
/* دائرتان شفّافتان للزخرفة خلف الرقم */
.pov-tile::before, .pov-tile::after {
  content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none;
}
.pov-tile::before { width:140px; height:140px; inset-inline-end:-40px; top:-50px }
.pov-tile::after  { width:90px;  height:90px;  inset-inline-end:40px;  bottom:-55px; background:rgba(255,255,255,.08) }
.pov-ic {
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:18px;
  background:rgba(255,255,255,.2); margin-bottom:12px; position:relative;
}
.pov-val { font-size:36px; font-weight:800; line-height:1.1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; position:relative }
.pov-lbl { font-size:14.5px; font-weight:600; opacity:.95; margin-top:2px; position:relative }
.pov-sub { font-size:12.5px; opacity:.88; margin-top:8px; position:relative }
.pov-bar { height:6px; border-radius:6px; background:rgba(255,255,255,.25); margin-top:10px; overflow:hidden; position:relative }
.pov-bar > span { display:block; height:100%; border-radius:inherit; background:#fff }

.pov-blue   { --_a:#1f5fb4; --_b:#3f8ae6 }
.pov-green  { --_a:#0f7a55; --_b:#22a877 }
.pov-orange { --_a:#b8471b; --_b:#e2733f }
.pov-purple { --_a:#6a4fc9; --_b:#9180ea }
.pov-teal   { --_a:#0a7487; --_b:#16a3bd }
.pov-pink   { --_a:#b0386a; --_b:#d9608f }
.pov-amber  { --_a:#9c6400; --_b:#c98a12 }
.pov-indigo { --_a:#33429c; --_b:#5667cf }

/* الموجّهون مجمَّعون بمدارسهم */
.pov-schools { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px }
@media (max-width:560px) { .pov-schools { grid-template-columns:1fr } }
.pov-school {
  background:var(--surface-1); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition:border-color .18s;
}
.pov-school:hover { border-color:var(--border-strong) }
.pov-school-head {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(90deg, var(--accent-soft), transparent); border-bottom:1px solid var(--border);
}
.pov-school-ic {
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,#33429c,#5667cf); color:#fff;
}
.pov-school-name { flex:1; min-width:0 }
.pov-school-name b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pov-school-name small { color:var(--text-muted); font-size:12px }
.pov-count {
  flex:none; min-width:30px; height:30px; padding:0 8px; border-radius:15px; display:grid; place-items:center;
  font-weight:800; background:var(--accent); color:#fff; font-variant-numeric:tabular-nums;
}
.pov-people { list-style:none; margin:0; padding:6px 0 }
.pov-person { display:flex; align-items:center; gap:10px; padding:8px 14px }
.pov-person + .pov-person { border-top:1px dashed var(--border) }
.pov-avatar {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff; background:var(--_c,var(--accent));
}
.pov-person-txt { flex:1; min-width:0 }
.pov-person-txt b { display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pov-person-txt small { color:var(--text-muted); font-size:12px }
.pov-state { flex:none; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px }
.pov-state.on  { background:color-mix(in srgb, var(--low) 16%, transparent); color:var(--low) }
.pov-state.off { background:color-mix(in srgb, var(--critical) 14%, transparent); color:var(--critical) }
@media (prefers-reduced-motion:reduce) { .pov-tile, .pov-school { transition:none } .pov-tile:hover { transform:none } }

/* ============ التقرير الشامل للطالب (student-report.js) ============ */
.sr-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px }
.sr-head > b { font-size:14.3px }
.sr-head > b i, .sr-tab-intro > i { color:var(--accent) }
.sr-quick { display:flex; gap:6px; flex-wrap:wrap }
.sr-sections { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; margin-bottom:14px }
.sr-chk { display:flex; align-items:center; gap:9px; min-width:0 }
.sr-chk > i { color:var(--accent); width:18px; text-align:center; flex:none }
.sr-chk > span { min-width:0; line-height:1.5 }
.sr-chk small { display:block; font-size:12px; color:var(--text-muted); font-weight:400 }
.sr-options { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:14px }
.sr-options .form-field { margin:0; min-width:150px }
.sr-options .form-field.grow { flex:1; min-width:200px }
.sr-charts { flex:1 1 300px }
.sr-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.sr-hint { flex:1 1 260px; line-height:1.7 }
.sr-tab-intro { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border) }
.sr-tab-intro > i { font-size:22px; margin-top:3px }
.sr-tab-intro p { margin:3px 0 0; line-height:1.8 }
@media (max-width:640px) {
  .sr-sections { grid-template-columns:1fr }
  .sr-actions .btn { flex:1 1 calc(50% - 8px); justify-content:center }
}