:root {
  /* ─── مقياس الألوان الأساسي (أزرق ووردبريس) 50→900 ─── */
  --blue-50:  #f0f6fc; --blue-100: #c5d9ed; --blue-200: #a4c4e3; --blue-300: #7da9d3;
  --blue-400: #4d8cc4; --blue-500: #2271b1; --blue-600: #135e96; --blue-700: #0a4b78;
  --blue-800: #073a5c; --blue-900: #042d47;

  /* ─── الرمادي/الأساسات ─── */
  --slate-50: #fafafa; --slate-100: #f5f5f5; --slate-150: #f1f5f9; --slate-200: #e5e7eb;
  --slate-300: #d1d5db; --slate-400: #9ca3af; --slate-500: #6b7280; --slate-600: #4b5563;
  --slate-700: #374151; --slate-800: #1f2937; --slate-900: #111827;

  /* ─── ألوان الحالة ─── */
  --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981; --success-600: #059669; --success-700: #047857;
  --warn-50: #fffbeb; --warn-100: #fef3c7; --warn-500: #f59e0b; --warn-600: #d97706; --warn-700: #b45309;
  --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #991b1b;

  /* ─── متغيّرات الاستخدام العام (تُبنى فوق المقياس أعلاه) ─── */
  --brand: var(--blue-500); --brand-dark: var(--blue-600); --brand-light: var(--blue-50);
  --bg: var(--slate-50); --card: #ffffff; --border: var(--slate-200);
  --text: var(--slate-800); --muted: var(--slate-500);
  --success: var(--success-700); --success-bg: var(--success-50); /* ACC-1: -700 gives 5.48:1 contrast */
  /* مبدأ دلالي صريح — لأي تطوير مستقبلي (موثَّق بمراجعة تصميم شاملة):
     --danger (أحمر): خطأ حقيقي، شيء انكسر فعليًا ويحتاج تدخّلًا فوريًا
     (فشل تحديث، اتصال فاشل). --warn (كهرماني): حالة إعداد مقصودة أو
     تستاهل انتباهًا، مو عطلًا بالنظام (مقالة مستبعدة بسبب كلمة محظورة
     ضبطها المستخدم بنفسه، موقع متخطّى اليوم بقرار). لا تستخدم danger
     لحالة "مقصودة/قابلة للتفسير الطبيعي" حتى لو بدت سلبية ظاهريًا —
     الأحمر تحديدًا يوهم بعطل يحتاج إصلاحًا، وهذا يربك أولوية الانتباه */
  --warn: var(--warn-700); --warn-bg: var(--warn-50); /* ACC-1: -700 gives 5.02:1 contrast */
  --danger: var(--danger-600); --danger-bg: var(--danger-50);
  --sidebar-bg: #1d2327; --sidebar-active: var(--blue-500);

  /* ─── مقياس التباعد (أساسه 4px) ─── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ─── الحواف والظلال (مقياس موحَّد) ─── */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px;
  --radius: var(--radius-xl); /* توافق مع الاستخدام القديم */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: var(--shadow-sm); /* توافق مع الاستخدام القديم */
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);

  /* ─── منحنيات الحركة ─── */
  --ease-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-normal: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* ─── Typography scale ─── */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px;
  /* D4-5b: سلّم دلالي مبنيّ على تصنيف D4-5a للـ224 موضعاً.
     الأسماء القديمة أعلاه تبقى للتوافق مع 4 مواضع تستخدمها. */
  --fs-stat-lg: 28px;   /* أرقام إحصائية كبيرة ← 30·28 */
  --fs-stat:    24px;   /* أرقام إحصائية       ← 26·25·24·23·22 */
  --fs-lg:      18px;   /* عناوين رئيسية       ← 20·19·18 */
  --fs-title:   16px;   /* عناوين فرعية        ← 17·16 */
  --fs-body:    14px;   /* نص أساسي            ← 15·14 */
  --fs-text:    13px;   /* نص عادي             ← 13.5·13 */
  --fs-meta:    12px;   /* ثانوي مضغوط         ← 12.5·12·11.5 */
  --fs-micro:   11px;   /* بيانات وصفية        ← 11·10.5·10 */
  /* ─── Input radius ─── */
  --radius-input: 9px;
}

* { box-sizing: border-box; }

h1 { font-size: var(--fs-stat); font-weight: 700; margin: 0; }
h2 { font-weight: 700; }
h3 { font-weight: 700; margin: 0 0 10px 0; font-size: var(--fs-title); }
.muted { color: var(--muted); font-size: var(--fs-text); }
/* خلل حقيقي واسع الانتشار اكتُشف بمراجعة مباشرة: كلاس .small مستخدَم
   بعشرات الأماكن بكل التطبيق (غالبًا مع .muted معًا)، بس **غير معرَّف
   إطلاقًا** بـCSS — صفر تأثير فعلي، فأي نص "small" كان يطلع بالحجم
   الافتراضي (وأحيانًا عريض من خاصية تانية)، يبان "ضخم" بدل صغير. تعريف
   واحد هون يصلح كل الاستخدامات دفعة وحدة بأثر رجعي */
.small { font-size: var(--fs-meta); }
code { background: var(--brand-light); padding: 2px 6px; border-radius: 4px; font-family: monospace; }

/* ===== العلامة التجارية ===== */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: var(--card); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-lg); flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(34,113,177,0.35);
}
.brand-name { font-weight: 900; font-size: var(--fs-title); }
.brand-sub { font-size: var(--fs-micro); color: var(--muted); }

/* ===== شاشات الدخول ===== */
/* P4-9: خلفية الصفحة نفسها لخلفية شاشات المصادقة — فحين تكون كل
   الشاشات مخفيّة (أثناء التحقّق الأوّلي) لا يظهر بياض ولا وميض.
   صفر عنصر غطاء وصفر اعتماد على JS: لو تعطّل السكربت لا يبقى شيء
   يحجب الواجهة. */
/* ══ R187 ② — كل زرّ يرث خطّ الصفحة ══════════════════════════════
   🔴 `<button>` في المتصفّحات **لا يرث** `font-family` — يستعمل خطّ
      النظام. فأي زرّ في السكربت بلا `font-family: inherit` يخرج بخطّ
      مختلف (رُصد على «تعليم الكل كمقروء»).
   ⚠️ وهذه **فئة لا حالة**: العلاج على كل الأزرار والحقول دفعةً، لا على
      الزرّ الواحد — وإلا تكرّرت مع كل زرّ جديد. */
button, input, select, textarea { font-family: inherit; }

body { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; background: radial-gradient(circle at 30% 20%, #eef2ff 0%, #f8f9fc 55%); margin: 0; color: var(--text); font-size: var(--fs-body); min-height: 100vh; }

.auth-screen {
  position: fixed; inset: 0; width: 100%; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #eef2ff 0%, #f8f9fc 55%);
  padding: 20px; z-index: 10; overflow: hidden;
}
.auth-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 36px 32px; width: 100%; max-width: 400px; border: 1px solid var(--border);
}
.auth-card .brand { margin-bottom: 24px; }
.auth-card h2 { font-size: var(--fs-lg); margin: 0 0 4px 0; }
.auth-card input {
  width: 100%; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--border);
  border-radius: 10px; font-family: inherit; font-size: var(--fs-body); background: var(--slate-50);
}
.auth-card input:focus { outline: none; border-color: var(--brand); background: var(--card); }
.error-text { color: var(--danger); font-size: var(--fs-text); min-height: 18px; }

/* ===== الهيكل العام ===== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; min-width: 240px; background: var(--sidebar-bg); color: var(--card);
  display: flex; flex-direction: column; padding: 22px 16px;
}
.sidebar .brand-name, .sidebar .brand-sub { color: var(--card); }
.sidebar .brand-sub { color: #a7aaad; }
.side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; flex: 1; }
.side-nav /* P4-6b: .tab-btn صارت <a href="#/..."> بدل <button> — ليعمل Ctrl+Click
   و«فتح في تبويب جديد» و«نسخ الرابط» طبيعياً. الخصائص أدناه تعيد parity
   كاملة مع شكل الزرّ: <a> يرث text-decoration و color من المتصفح،
   ولا يملك عرض الـblock الكامل الذي كان للزرّ داخل flex column. */
.tab-btn {
  display: flex; align-items: center; gap: 10px; text-align: right;
  background: transparent; border: none; color: #c3c4c7; padding: 11px 14px;
  border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: var(--fs-body); font-weight: 500;
  text-decoration: none;   /* <a> يضيف تسطيراً افتراضياً */
  width: 100%;             /* الزرّ كان يملأ العرض داخل عمود التنقّل */
  box-sizing: border-box;  /* padding داخل العرض — كما في <button> */
}
.tab-btn:hover,
.tab-btn:focus,
.tab-btn:active,
.tab-btn:visited { text-decoration: none; }
.side-nav .tab-btn:hover { background: rgba(255,255,255,0.06); color: var(--card); }
.side-nav .tab-btn.active { background: var(--sidebar-active); color: var(--card); }
/* تسمية مجموعة بالقائمة الجانبية (المرحلة 6) — طلب صريح بتجميع التابات
   المترابطة معنويًا (التحكّم بالنشر / المتابعة / أخرى)، فاصل بصري خفيف
   بلا أي وظيفة نقر — غرضه توجيه العين بس، مو عنصر تفاعلي */
.nav-group-label {
  font-size: var(--fs-micro); font-weight: 700; color: #7d8087; text-transform: uppercase;
  letter-spacing: 0.6px; padding: 14px 14px 4px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-group-label:first-of-type { border-top: none; margin-top: 8px; }
.side-footer { margin-top: auto; }

.main-content { flex: 1; padding: 26px 32px; max-width: 1400px; }

.top-bar {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; flex-wrap: wrap; gap: 14px;
}
/* السبب الحقيقي وراء اختلاف موضع الشريط بين الصفحات: طول نص العنوان
   الفرعي يختلف من صفحة لصفحة (زي "متابعة الدورات" اللي نصّها الفرعي أطول
   من باقي الصفحات) — فكان يدفع صف الإجراءات (تسجيل/مزامنة/نبضة) يلفّ لسطر
   تحت بمكان معيّن، بينما بباقي الصفحات يضلّ بنفس سطر العنوان. الإصلاح:
   عمود العنوان يقدر ينكمش ونصّه يلفّ لحاله، وصف الإجراءات ثابت لا يلفّ أبداً
   — فيضلّ بنفس المكان بالضبط بكل الصفحات، بغضّ النظر عن طول العنوان الفرعي */
.top-bar > div:first-child { flex: 1 1 auto; min-width: 0; }
.top-bar-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0;
  background: var(--slate-50); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 14px;
}
.status-group, .actions-group { display: flex; align-items: center; gap: 10px; }

/* إعادة تصميم مؤشّر الحالة (طلب صريح: "تصميم الشريط العلوي ضعيف مقارنة
   بباقي الصفحات") — شارة واحدة متماسكة بدل شارتين خضراوين منفصلتين
   بنفس الوزن البصري. النقطة الملوَّنة تعكس أسوأ الحالتين دفعة وحدة —
   لمحة سريعة كافية، بلا حاجة تقرأ نصّين منفصلين لتفهم "هل كل شي تمام؟" */
/* 🔴 R187 ③: النصّ ينتقل «يُفحَص…» ⇒ «يعمل» ⇒ العرض يتغيّر فينزاح ما
   حوله. عرض أدنى يحجز المساحة من اللحظة الأولى — صفر انزياح. */
.system-status-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--text);
  min-width: 78px;
}
#pauseStatus { display: inline-block; min-width: 46px; }
.status-sep { color: var(--slate-400); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--slate-400); }
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.status-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); animation: statusPulse 1.6s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.actions-group .btn { display: inline-flex; align-items: center; gap: 6px; }
.actions-group .btn svg { width: 15px; height: 15px; }

/* ===== الأزرار ===== */
.btn {
  border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-text); font-weight: 700; transition: transform var(--ease-fast);
  /* D4-5b: نص الزر لا يلتفّ — أزرار CTA الطويلة كانت تنكسر سطرين */
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand); color: var(--card); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-danger { background: var(--danger); color: var(--card); }
.btn-outline { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: #f3f4f6; }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-meta); }

/* ===== البطاقات ===== */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 20px;
}

/* ===== مؤشرات الشاشة الرئيسية ===== */
/* خلل تخطيط حقيقي اكتُشف بمراجعة مباشرة (صورة فعلية): شبكة بـ4 أعمدة
   ثابتة + 5 بطاقات = البطاقة الخامسة ("نسبة النجاح") تطيح لسطر لحالها،
   وتترك 3 خانات فاضية جنبها — يبان "مو منطقي" بصريًا بالضبط زي ما وُصِف.
   الحل: auto-fit بدل عدد أعمدة ثابت — الشبكة تتأقلم تلقائيًا مع أي عدد
   بطاقات (4، 5، أو أي عدد مستقبلي)، بلا خانات فاضية يتيمة أبدًا */
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-card .num { font-size: var(--fs-stat-lg); font-weight: 900; color: var(--brand-dark); }
.stat-card .label { font-size: var(--fs-meta); color: var(--muted); margin-top: 6px; font-weight: 600; }

.stat-breakdown {
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--slate-100); font-size: var(--fs-meta); color: var(--muted);
}
.stat-breakdown strong { color: var(--text); }

/* ===== الجداول ===== */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--border); font-size: var(--fs-text); }
th { color: var(--muted); font-weight: 700; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.3px; }
.sort-arrow { font-size: var(--fs-micro); color: var(--brand); display: inline-block; width: 10px; }
/* سهم توسّع "جدول اليوم" — تقوية بصرية مطلوبة: كان 14px بلون رمادي
   خافت (--muted)، بلا أي إشارة "هذا زر حقيقي". الآن أكبر، بلون النص
   الأساسي، وخلفية دائرية تظهر عند المرور — إحساس واضح بالتفاعلية،
   بنفس روح أنماط عالمية معروفة (GitHub، Notion) للصفوف القابلة للتوسّع */
.today-chevron-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--text);
  transition: transform 0.15s, background var(--ease-fast);
}
.today-chevron-btn svg { width: 16px; height: 16px; }
tr:hover .today-chevron-btn { background: var(--slate-100); }
/* عمود ترقيم موحَّد — يعكس الرقم الحقيقي عبر الصفحات (مو 1-15 متكرّرة
   بكل صفحة)، بلون خافت لتمييزه كمعلومة مرجعية ثانوية، مو بيانات أساسية */
.row-num { color: var(--muted); font-size: var(--fs-meta); text-align: center; width: 32px; }
/* خلل وظيفي حقيقي اكتُشف بمراجعة تصميم شاملة: .table-wrap مستخدَمة بكل
   جدول رئيسي بالنظام (6 مواضع)، لكن غير معرَّفة إطلاقًا بـCSS — صفر
   overflow-x. جدول عريض (10 أعمدة، زي جدول المواقع) على شاشة ضيقة كان
   يفيض ويكسر تخطيط الصفحة كاملة، بدل تمرير أفقي منظّم داخل حدوده هو.
   إصلاح واحد هنا يغطّي كل الجداول الستّة دفعة واحدة بأثر رجعي */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* D4-6b ⇒ مسحوب: أضفتُ .table-scroll (max-height: 62vh + overflow-y)
   لتفعيل رأس ثابت — والنتيجة كانت تمريراً داخلياً في الجداول الطويلة
   (متابعة الدورات · جدول اليوم · معاينة القادم)، وهو أسوأ من المشكلة
   التي حلّها: المستخدم يضطر للسحب داخل الجدول لرؤية الصفوف والإجراءات.
   الصحيح أن تتدفّق الجداول بطولها الطبيعي مع الترقيم — وهو موجود
   أصلاً في كل هذه الشاشات. الرأس الثابت لا يعمل بلا حاوية ممرِّرة،
   و.table-wrap يحمل overflow-x فيكسر sticky على مستوى الصفحة. */
.table-wrap table { min-width: 640px; } /* يضمن الجدول ما ينضغط لحدّ غير قابل للقراءة، ويترك overflow-x يتكفّل بالباقي */

/* تقوية بصرية لجدول "مراجعة القادم" — طلب صريح ("حاسس الجدول ضعيف") —
   رأس بخلفية مميَّزة وحدّ سفلي أوضح، وتظليل متبادل بسيط للصفوف يسهّل
   المتابعة عبر عدّة مواقع مع بعض، بلا أي تغيير عالمي على باقي الجداول */
.ur-summary-table thead th {
  background: var(--slate-50); border-bottom: 2px solid var(--border);
}
.ur-summary-table tbody tr:nth-child(4n+1):not([id^="urDetailRow_"]) { background: var(--slate-50); }
.ur-summary-table tbody tr:hover:not([id^="urDetailRow_"]) { background: var(--brand-light); }

/* ===== منتقي التصنيف/الوسم بالاستهداف — بحث، ترقيم، صفوف متّسقة ===== */
.target-picker-search {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: var(--fs-text); font-family: inherit; color: var(--text);
  background: var(--card); outline: none;
  transition: border-color var(--ease-normal);
  display: block;
}
.target-picker-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.target-picker-list {
  border: 1px solid var(--border); border-radius: 9px; max-height: 260px; overflow-y: auto; background: var(--card);
}
.target-picker-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--slate-100); cursor: pointer; transition: background var(--ease-fast);
}
.target-picker-row:last-child { border-bottom: none; }
.target-picker-row:hover { background: var(--slate-50); }
.target-picker-row input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.target-picker-row span { font-size: var(--fs-text); flex: 1; }
.target-picker-row .term-count { flex: 0 0 auto; color: var(--slate-500); font-size: var(--fs-meta); }
.target-picker-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: var(--fs-text); }
.target-picker-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; font-size: var(--fs-meta); color: var(--muted);
}
.target-picker-pager .btn { padding: 5px 12px; font-size: var(--fs-meta); }

/* ===== صف "الموقع كامل" بمتابعة الدورات — صف تاني تحت صف الاستهداف
   بالضبط، بنفس بنية الأعمدة (تمّ/متبقّي/النسبة تحت بعضها عمود بعمود)،
   مو سطر ملخّص أفقي منفصل ===== */
/* ═══════════════════════════════════════════
   متابعة الدورات — Expandable Rows System
   ═══════════════════════════════════════════ */

/* صف الموقع الرئيسي */
.progress-site-row td { transition: background .15s; }
.progress-site-row:hover td { background: var(--brand-light); }
.progress-site-row.has-targets td { cursor: pointer; }

/* زر التوسيع */
.expand-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: var(--fs-micro);
  cursor: pointer; transition: all .18s; flex-shrink: 0; vertical-align: middle;
  margin-inline-end: 6px; user-select: none;
}
.expand-toggle:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.expand-toggle.open { background: var(--brand); color: var(--card); border-color: var(--brand); transform: rotate(0deg); }

/* صفوف الحملات — مخفية افتراضياً */
.progress-campaign-row { display: none; }
.progress-campaign-row.visible { display: table-row; }
.progress-campaign-row td {
  background: var(--slate-150);
  border-bottom: 1px solid var(--slate-200) !important;
  font-size: var(--fs-meta); padding: 8px 12px;
}
.progress-campaign-row:last-of-type td { border-bottom: 2px solid var(--border) !important; }

/* خط جانبي يوضّح التعلّق بالموقع الأب */
.progress-campaign-row td:nth-child(2) {
  padding-inline-start: 32px;
  position: relative;
}
.progress-campaign-row td:nth-child(2)::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand), transparent);
  border-radius: 2px;
  opacity: .35;
}

/* اسم الحملة */
.campaign-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.campaign-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(0,0,0,0.2);
}
.campaign-type-pill {
  font-size: var(--fs-micro); font-weight: 600; padding: 2px 7px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0; letter-spacing: .02em;
}
.campaign-label-text {
  font-weight: 600; color: var(--text); font-size: var(--fs-meta);
}
.campaign-type-badge {
  font-size: var(--fs-micro); font-weight: 500; padding: 1px 6px; border-radius: 20px;
  background: var(--brand-light);
  color: var(--brand); white-space: nowrap; flex-shrink: 0;
}
.campaign-type-badge.permanent { background: rgba(217,119,6,0.12); color: var(--warn); }
.campaign-type-badge.done { background: var(--success-bg); color: var(--success); }

/* شريط التقدم داخل الحملة */
.campaign-bar { display: flex; align-items: center; gap: 8px; }
.campaign-bar .bar-track { width: 60px; flex-shrink: 0; }

/* Badge عدد الحملات في صف الموقع */
.campaigns-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 20px; padding: 0 5px;
  background: var(--brand); color: var(--card);
  font-size: var(--fs-micro); font-weight: 700; margin-inline-start: 6px;
  vertical-align: middle;
}

/* الصفوف القديمة */
.progress-row-grouped-top td { border-bottom: none !important; }
.progress-row-grouped-bottom td {
  border-top: none !important; padding-top: 2px !important; padding-bottom: 8px !important;
  background: var(--slate-50); font-size: var(--fs-meta);
}
tr:last-child td { border-bottom: none; }
.boost-control { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

/* قائمة منسدلة مخصَّصة بالكامل — تحكّم تام بالمحاذاة والمظهر، بلا الاعتماد
   على تنسيق <select> الأصلي بالمتصفح (اللي بعض المتصفحات ما تحترم فيه
   text-align جوّا الصندوق مع appearance:none) */
.custom-select { position: relative; display: inline-block; min-width: 78px; }
.custom-select-trigger {
  width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; font-size: var(--fs-meta); font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  transition: border-color var(--ease-normal);
}
.custom-select-trigger:hover { border-color: var(--brand); }
.custom-select-trigger svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }
.custom-select-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 20;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  overflow: hidden;
}
.custom-select-menu.open { display: block; }
.custom-select-option {
  padding: 8px 10px; font-size: var(--fs-meta); text-align: center; cursor: pointer;
  transition: background var(--ease-fast);
}
.custom-select-option:hover { background: var(--slate-50); }
.custom-select-option.selected { background: var(--brand-light); color: var(--brand-dark); font-weight: 700; }

tbody tr:hover { background: var(--slate-50); }

/* قائمة إجراءات منسدلة بعمود جدول (⋮) — للإجراءات الأقل استخدامًا وأعلى
   حساسية (زي المزامنة اليدوية)، بدل تكديسها كأزرار كاملة بجانب "تفاصيل"/
   "تعديل" (كان يسبب التفافًا لسطرين، وخطر ضغط عرضي على إجراء له أثر فعلي) */
.row-actions-menu { position: relative; display: inline-flex; }
.row-actions-menu-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  cursor: pointer; font-size: var(--fs-title); font-weight: 700; line-height: 1;
  transition: border-color var(--ease-normal);
}
.row-actions-menu-btn:hover { border-color: var(--brand); }
/* أزرار أيقونات مربّعة موحَّدة (تعديل، تفاصيل) — بنفس حجم زر "⋮" بالضبط،
   بديل مضغوط عن الأزرار النصّية الطويلة اللي كانت تدفع "⋮" لسطر منفصل */
.row-icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
  cursor: pointer; transition: border-color var(--ease-normal); flex-shrink: 0;
}
.row-icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.row-actions-dropdown {
  display: none; position: fixed; z-index: 9000;
  min-width: 160px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.row-actions-dropdown.open { display: block; }
.row-actions-dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: var(--fs-text); color: var(--text); text-decoration: none;
  transition: background var(--ease-fast);
}
.row-actions-dropdown a:hover { background: var(--slate-50); }
.row-actions-dropdown hr {
  margin: 3px 0; border: none; border-top: 1px solid var(--border);
}

/* يخلّي أرقام "1) 2) 3)" بتفاصيل التغييرات تبان كل وحدة بسطر مستقلّ، بدل
   ما تلزّق كلها بنفس السطر (الافتراضي بالمتصفح يطوي أي \n لمسافة وحدة) */
.last-error-multiline {
  white-space: pre-line; display: inline-block;
  font-size: var(--fs-text); line-height: 1.5;
}

/* 🔴 R162: «مفعّل» كانت تنكسر حرفين/حرف في عمود ضيّق. الشارة كلمة
   واحدة قصيرة بطبيعتها — كسرها تشويه لا التفاف مفيد. النهي هنا لا على
   الخلية وحدها، فيشمل كل شارة في كل جدول. */
.badge { padding: 4px 10px; border-radius: 20px; font-size: var(--fs-micro); font-weight: 700;
         white-space: nowrap; }
/* ══ R132b — الخلفية الملوّنة تعود · والأحمر يبقى الأقوى ══════════
   🔴 المفرَّغ جعل الشارة تشبه النصّ العاديّ فضاع تمييزها (رصد ميدانيّ).
   ⇒ كل الحالات بخلفية فاتحة كما كانت — والفشل وحده **مملوء غامق**،
     فيبقى الأنظف: وضوح للجميع، ونداء واحد للأحمر.
   🔴 وعمداً: «انتهت الدورة» ليست حمراء — إنجاز لا عطل. */
.badge.ok      { background: var(--success-bg); color: var(--success); }
.badge.warn    { background: var(--warn-bg);    color: var(--warn); }
.badge.neutral { background: #f3f4f6;           color: var(--slate-600); }
/* ══ شارة «تمّ بلا تغيير» — من طقم النجاح لا من التحذير ═══════════
   🔴 كانت `warn` صفراء ⇒ تُقرأ «فيها خطب» وهي تشغيلة **تمّت**:
      أخذت خانتها · وتحدّثت سجلّاتها · وأحياناً كُتب على ووردبريس.
   ⚠️ و`neutral` لا يصلح بديلاً — محجوز لـ`pending` (لم تُعالَج بعد)
      ⇒ حالتان متعاكستان بلون واحد.
   ⇒ خلفية النجاح الفاتحة + خطّ رماديّ: تُقرأ «سليمة» بلا أن تنافس
     الأخضر الكامل الذي يعني «تغيّر شيء فعلاً». */
.badge.done-quiet { background: var(--success-bg); color: var(--slate-600); }
.badge.info    { background: var(--brand-light); color: var(--brand-dark, var(--brand)); }
/* الفشل — الوحيدة المملوءة الغامقة */
/* 🔴 R225 ⑤: كانت **الوحيدة** بخلفية ممتلئة ونصّ أبيض وظلّ — بينما
   `ok`/`warn`/`neutral` كلّها خلفية فاتحة ونصّ ملوَّن. ثلاث مخالفات في
   شارة واحدة تجعلها تصرخ في كل صفّ.
   ⚠️ ونفس قرار «إنهاء الدورة»: محدَّد بالأحمر لا ممتلئ — يتميّز بلا أن
      يؤذي. والخطر يبقى واضحاً: اللون أحمر والحدّ ظاهر. */
.badge.bad {
  background: var(--danger-bg); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
/* خاملة: حاضرة بلا ضجيج */
.badge.idle    { background: #f8fafc; color: var(--slate-400, #9ca3af); font-weight: 600; }
/* سياق تحت الحالة الأساسية لا بجوارها */
.badge.sub     { font-size: 10px; padding: 2px 7px; opacity: .8; font-weight: 600; }
.badge-stack   { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.next-none     { color: var(--slate-400, #9ca3af); font-size: var(--fs-micro); }
/* ══ R137 — الصفّ المنتهي/الخامل يتنحّى بصرياً ═══════════════════════
   لا يُخفى ولا يُلوَّن بالخطر — يهدأ فقط، فتتنفّس الشاشة ويبرز الأحياء.
   ⚠️ صفر إخفاء: كل البيانات تبقى مقروءة ومتاحة. */
/* ══ R138 — طبقة الترشيح لجدول اليوم ═══════════════════════════════
   صندوق واحد يجمع البحث والمرشِّحات والتبويبات، ويلزق أعلى الشاشة عند
   التمرير — فتبقى الأدوات في المتناول مع 14 موقعاً وأكثر. */
.today-filters {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  /* 🔴 R138b: أُزيل `position: sticky` — كان يطغى على رؤوس الأعمدة عند
     التمرير فتظهر صفوف بلا رؤوس (رصد ميدانيّ). والجدول قصير أصلاً،
     فالفائدة أقلّ من الخسارة. */
}
.today-filters__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* ══ R139 — التناسق بين المتشابهات لا بين الجميع ═══════════════════
   🔴 قبل: البحث ضعف المنسدلة (2×) فبان الفرق صارخاً، والمنسدلتان
      **غير متطابقتين** ببعضهما (المجموعة أوسع من الموقع) ⇒ الشريط
      يبدو مبعثراً. والعلّة لم تكن اتّساع البحث بل اختلاف التوأم.
   ⇒ البحث أوسع بوضوح (1.5×) لأنه نصّ حرّ يحتمل اسماً طويلاً،
     والمنسدلتان **متطابقتان تماماً** لأنهما من النوع نفسه.
   ⚠️ وعرض موحّد للجميع مرفوض عمداً: يمنح المنسدلة فراغاً ميّتاً
     (نصّها ~60px) ويضيّق البحث — شكل مرتّب وقراءة أسوأ. */
.today-filters__search { flex: 3 1 300px; }
.today-filters__row .ui-field:not(.today-filters__search) { flex: 1 1 200px; max-width: 220px; }
.today-filters__row--tabs {
  margin-top: 10px; padding-top: 10px; align-items: center;
  border-top: 1px solid var(--slate-200, #e5e7eb);
  justify-content: space-between;
}
/* حالة النظام: عنصر واحد لا نصّ مبعثر بجوار زرّ */
/* 🔴 R151: كانت لا ترث خطّ السكربت فتبدو غريبة عن الصفحة. */
.today-refresh {
  font-family: inherit; font-size: var(--fs-micro);
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--slate-200, #e5e7eb);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  color: var(--slate-500, #6b7280); font-size: var(--fs-micro); font-weight: 600;
  transition: all var(--ease-normal);
}
.today-refresh:hover { color: var(--brand); border-color: var(--brand); }
.today-refresh__icon  { font-size: 13px; line-height: 1; }
.today-refresh__label { color: var(--slate-600, #4b5563); font-weight: 700; }
.today-refresh__sep   { opacity: .45; }
.today-refresh:hover .today-refresh__label { color: var(--brand); }
@media (max-width: 720px) {
  .today-filters__row--tabs { flex-direction: column; align-items: stretch; gap: 8px; }
}

tr.today-row--settled > td   { padding-top: 7px; padding-bottom: 7px; opacity: .78; }
tr.today-row--settled:hover > td { opacity: 1; }
.mini-bar      { height: 3px; border-radius: 2px; background: var(--slate-200, #e5e7eb);
                 margin-top: 4px; overflow: hidden; }
.mini-bar > i  { display: block; height: 100%; background: var(--success); border-radius: 2px; }
/* عناصر التاريخ/الوقت المفصولة (formatDate) — bdi يعزل الاتجاه تلقائيًا،
   بس unicode-bidi:isolate صراحة هون كضمانة مضاعفة وقاطعة */
.ltr-date-part, .ltr-date-sep, .ltr-time-part { unicode-bidi: isolate; }
/* أزرار النسخ (كود + معاينة مرئية) — تنسيق موحّد للأيقونة والنص، وحالة
   نجاح مؤقّتة واضحة بصريًا (لون + أيقونة صح) بعد الضغط */
.copy-btn { display: inline-flex; align-items: center; gap: 5px; }
.btn-copy-success { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success) !important; }
.special-status-badge { display: inline-flex; align-items: center; gap: 3px; }
.special-status-badge svg { width: 12px; height: 12px; }

.health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.health-dot.green { background: var(--success); }
.health-dot.yellow { background: var(--warn); }
.health-dot.red { background: var(--danger); }
.health-dot.neutral { background: var(--slate-300); }

/* ===== الفلاتر (شريط أفقي دائماً، بمعزل عن أي بطاقة تحتويه) ===== */
.filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters-bar input, .filters-bar select {
  width: auto; flex: 0 1 auto;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  font-size: var(--fs-text); font-family: inherit; background-color: var(--slate-50);
}
.filters-bar select { padding-inline-end: 32px; } /* space for arrow RTL/LTR */
.filters-bar input { flex: 1 1 220px; min-width: 160px; }
.filters-bar input:focus, .filters-bar select:focus { outline: none; border-color: var(--brand); background-color: var(--card); }

/* ===== مراجعة القادم: قائمة اختيار المواقع المخصَّصة (Checkboxes منسدلة) ===== */
/* Dropdown اختيار المواقع — header ثابت (بحث + أزرار) + قائمة scrollable */
.ur-dropdown-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  width: 300px; max-height: 360px;
  display: flex; flex-direction: column;
  overflow: hidden; /* الـoverflow على المحتوى فقط، لا على الـheader */
  box-sizing: border-box;
}
/* Header ثابت: بحث + أزرار تحديد/إلغاء */
.ur-dropdown-header {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card);
}
.ur-dropdown-panel input[type="text"] {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: var(--fs-text); font-family: inherit; box-sizing: border-box;
  display: block;
}
.ur-dropdown-actions { display: flex; gap: 8px; }
.ur-dropdown-actions .btn { flex: 1; }
/* القائمة scrollable فقط */
.ur-dropdown-options {
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 12px 10px;
  flex: 1 1 auto;
}
.ur-dropdown-options label {
  display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px;
  padding: 7px 4px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-text); width: 100%; box-sizing: border-box;
}
.ur-dropdown-options label:hover { background: var(--slate-50); }
.ur-dropdown-options input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.ur-dropdown-options label span { min-width: 0; overflow-wrap: break-word; line-height: 1.4; }

/* ===== التبويبات (المحتوى) ===== */
.panel { display: none; }
.panel.active { display: block; }

/* ===== حقول النماذج (الإعدادات فقط — نطاق محدود، لا يتسرّب لأي عنصر آخر) ===== */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-grid .card:first-child { grid-column: 1 / -1; }
.form-field-label { font-size: var(--fs-text); font-weight: 700; margin-top: 10px; display: block; }
/* خلل حقيقي اكتُشف بمراجعة مباشرة (صورة فعلية): القواعد التالية كانت
   مربوطة حصرًا بـ.sub-panel — لمّا انتقلت "الكلمات المحظورة" من تبويب
   فرعي داخل الإعدادات (.sub-panel) لتاب مستقلّ كامل (.panel، المرحلة 6)،
   فقدت كل هذا التنسيق تلقائيًا (labels، حقول الإدخال، صناديق الاختيار) —
   "مضروبة" بالضبط زي ما وُصِفت. الحل: نضيف #tab-blockedwords صراحة لكل
   قاعدة، بدل الاعتماد على .sub-panel وحدها */
.sub-panel label, .modal label, #tab-blockedwords label,
.group-detail-pane label {
  font-size: var(--fs-text); font-weight: 700; margin-top: 10px; display: block;
}
.sub-panel input, .sub-panel textarea, .sub-panel select,
#tab-blockedwords input, #tab-blockedwords textarea, #tab-blockedwords select,
.sub-panel input, .sub-panel textarea, .sub-panel select,
#tab-blockedwords input, #tab-blockedwords textarea, #tab-blockedwords select,
.group-detail-pane input:not([type=checkbox]):not([type=radio]):not(.filters-bar input),
.group-detail-pane textarea,
.group-detail-pane select:not(.filters-bar select) {
  width: 100%; padding: 9px 12px; margin: 5px 0; border: 1px solid var(--border);
  border-radius: 9px; font-family: inherit; font-size: var(--fs-text); box-sizing: border-box;
  background-color: var(--card); color: var(--text); transition: border-color .15s;
  padding-inline-end: 32px;
}
/* استثناء صريح: عناصر داخل filters-bar لا تأخذ width:100% */
.group-detail-pane .filters-bar input,
.group-detail-pane .filters-bar select {
  width: auto; margin: 0;
}
.group-detail-pane input:not([type=checkbox]):not([type=radio]):focus,
.group-detail-pane select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
/* خلل نظامي حرج اكتُشف بمراجعة متكرّرة: القاعدة فوق (width:100%) كانت
   تنطبق أيضًا على أي checkbox/radio داخل .sub-panel، وتمطّه لعرض الصف
   بالكامل (بدل حجمه الطبيعي الصغير) — ما لم نتذكّر استثناءه يدويًا بكل
   مرة (فشل هذا 3 مرات متتالية بمواضع مختلفة). الحل الجذري بمصدر القاعدة
   نفسها، لا بترقيع كل عنصر يدويًا: استثناء صريح يحمي كل checkbox/radio
   حالي ومستقبلي بالنظام كله دفعة واحدة، بلا اعتماد على التذكّر اليدوي */
.sub-panel input[type="checkbox"], .sub-panel input[type="radio"],
#tab-blockedwords input[type="checkbox"], #tab-blockedwords input[type="radio"] {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0;
}

/* ===== النوافذ المنبثقة ===== */
.modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.55);
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}

/* D4-7b (M-5): تكديس صريح. كل .modal-bg كانت z-index: 50 — فترتيب DOM
   وحده يقرّر أيّها فوق عند فتح مودال ثانٍ. لم تقع الحالة عملياً، لكن
   هذا الترتيب يحسمها بلا اعتماد على موضع العنصر في الملف. */
#addSiteModal, #groupModal, #editSiteModal, #startCycleModal { z-index: 50; }
#siteDetailModal { z-index: 55; }
#excludedArticlesModal, #specialStatusModal, #articleHistoryModal { z-index: 60; }
#diffModal { z-index: 65; }
/* D4-9: نافذة التأكيد تُنشَأ ديناميكياً في confirmDialog() بـclass
   "modal-bg open" — فترث z-index: 50، أي **خلف** siteDetailModal (55)
   وخلف مودالات التفاصيل (60/65). مُثبَت بالمتصفح. وفي D4-7b قلتُ إنه
   "لا يوجد مودال يستخدم .confirm-dialog" — وكان خطأ: الصنف يُبنى في
   وقت التشغيل لا في index.html. التأكيد يجب أن يعلو الجميع دائماً. */
.modal-bg:has(> .confirm-dialog) { z-index: 80; }
/* ══ R205 ①.1 — حوار التأكيد يعرض أسطره ══════════════════════════
   🔴 النصّ يُكتب بأسطر ونقاط (`\n`) ويُوضع في <p> ⇒ HTML يبتلعها،
      فتصير فقرة متّصلة: «هذا الإجراء نهائي • تُسجَّل… • المقالات…».
   ⚠️ وستّة حوارات في النظام تكتب أسطراً ولا تُعرض — وأخطرها «إنهاء
      الدورة» (فعل لا رجعة فيه ونقاطه لا تُقرأ).
   ⇒ سطر واحد يُصلح الستّة دفعةً. */
.confirm-dialog > p { white-space: pre-line; line-height: 1.75; }
.modal-bg.open { display: flex; }
.modal {
  background: var(--card); padding: 26px; border-radius: var(--radius); width: 440px;
  /* D4-7b (M-1): توقّعتُ تجاوزاً أفقياً بين 440px و700px — واختبار
     المتصفح دحضه: .modal عنصر flex داخل .modal-bg، وflex-shrink
     الافتراضي يقلّصه تلقائياً (400px ⇒ 360px = العرض ناقص الحشو).
     السطر يبقى **شبكة أمان صريحة** لا إصلاحاً: يحمي لو أُضيف
     flex-shrink: 0 أو تغيّر نموذج التخطيط لاحقاً. صفر أثر بصري. */
  max-width: calc(100vw - 40px);
  max-height: 85vh; box-shadow: var(--shadow-lg); position: relative;
  display: flex; flex-direction: column;
}
/* حاوية السكرول الفعلية — منفصلة عن .modal نفسها. هذا يحلّ مشكلة زر
   الإغلاق جذريًا على مستوى النظام كامل (مو ترقيع مودال بمودال): كانت
   .modal نفسها هي عنصر السكرول، فأي زر absolute بداخلها يتحرّك مع
   المحتوى وقت التمرير. هلق .modal ثابتة (بلا overflow)، والسكرول محصور
   بهالعنصر الداخلي بس — فزر الإغلاق (absolute بالنسبة لـ.modal) يضلّ
   مثبَّتًا بالزاوية دائمًا، بغضّ النظر عن شكل أو طول محتوى أي مودال */
.modal-scroll-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-top: 6px; }
.modal.wide { width: 700px; }
.modal.extra-wide {
  /* D4-7b (M-2): العرض 1100 يبقى — الفرق عن .sd-modal (1240) مبرَّر
     دلالياً: التفاصيل تحمل 4 تبويبات وشبكة إحصاءات وجداول، وهذه قوائم
     ومقارنة. الموحَّد هنا **صياغة الاستجابة** فقط: min() بدل
     width+max-width — نفس النتيجة البصرية تماماً، ونمط واحد للاثنين. */
  width: min(1100px, 95vw);
}

/* نافذة المقارنة تحديداً — رأس وتذييل ثابتين، والمساحة الوسطى (صناديق
   المقارنة) تاخذ كل المساحة المتبقية تلقائياً وتحتوي السكرول الوحيد بالنافذة.
   بدون هالهيكلة، كان عندنا سكرولين متنافسين (النافذة الخارجية + الصناديق
   الداخلية)، وكان ممكن زر "إغلاق" بالأسفل يصير غير قابل للوصول على شاشات
   عادية (ارتفاعها أقل من ~1100px) لو حاولنا نشيل السكرول الخارجي ببساطة
   بدل هالإعادة هيكلة */
.diff-modal-flex {
  display: flex; flex-direction: column; height: 85vh; max-height: 85vh; overflow: hidden;
}
.diff-modal-flex .diff-header { flex-shrink: 0; }
/* هيدر مضغوط بسطرين بس (بدل 6 عناصر مكدَّسة فوق بعض) — كل المعلومات
   الوصفية (عنوان، تاريخ، تحذير) بسطر واحد، والتنقّل بين التابات مع الأسطورة
   بسطر تاني، عشان أكبر مساحة ممكنة تروح للمحتوى الفعلي (iframes) — هدف
   المستخدم الأساسي من فتح "مقارنة" أصلًا، مو قراءة نصوص وصفية طويلة */
.diff-header-compact { padding-bottom: 8px; padding-inline-end: 40px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.diff-header-row1, .diff-header-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diff-header-row2 { margin-top: 8px; }
.diff-header-sep { color: var(--border); font-weight: 700; }
.diff-modal-flex .diff-body { flex: 1 1 auto; min-height: 0; margin-top: 10px; }
.diff-modal-flex .diff-grid { height: 100%; }
.diff-modal-flex .diff-col { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.diff-modal-flex .modal-actions { flex-shrink: 0; }

.diff-pane {
  border: 1px solid var(--border); border-radius: 9px; padding: 10px;
  overflow-y: auto; background: var(--slate-50); flex: 1 1 auto; min-height: 0;
}
.diff-preview-frame {
  border: 1px solid var(--border); border-radius: 9px; width: 100%; background: var(--card);
  flex: 1 1 auto; min-height: 0;
}
.diff-removed { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; }
.diff-added { background: var(--success-bg); color: var(--success); }
.diff-legend { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 10px; }
.diff-legend .diff-removed, .diff-legend .diff-added { padding: 1px 6px; border-radius: 4px; }
.modal-close-x {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 5;
  background: var(--slate-100); border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: background var(--ease-fast), color var(--ease-fast);
}
.modal-close-x:hover { background: var(--danger-bg); color: var(--danger); }
.modal h3:first-of-type { padding-inline-end: 38px; }
.modal label { font-size: var(--fs-text); font-weight: 700; margin-top: 10px; display: block; }
.modal input, .modal select {
  width: 100%; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--border);
  border-radius: 9px; font-family: inherit; font-size: var(--fs-text);
}
.modal select { padding-inline-end: 32px; }
/* نفس الإصلاح الجذري أعلاه (.sub-panel) — القاعدة نفسها موجودة هون
   بصياغة مطابقة (.modal input)، فتحتاج نفس الاستثناء بالضبط */
.modal input[type="checkbox"], .modal input[type="radio"] {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0;
}
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }

.row-actions button { margin-inline-start: 4px; }
/* الثلاثة عناصر (✏️ + 👁 + ⋮) في سطر واحد دائماً — بلا التفاف */
td.row-actions { display: flex; flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }

/* ⑤ الترقيم الحقيقي يتكفّل بالتقسيم (20/صفحة) — الـscroll الداخلي كان
   يحبس الصفحة في صندوق 420px فتبدو «قائمة طويلة واحدة» فوق الترقيم */
.articles-list { border: 1px solid var(--border); border-radius: 10px; }
.articles-list .article-row:last-child { border-bottom: none; }
#articlesPagePagination { margin-top: 14px; }
.article-row:last-child { border-bottom: none; }
/* ===== الرئيسية: مركز القيادة ===== */
.welcome-banner {
  display: flex; justify-content: space-between; align-items: center;
  background-color: var(--sidebar-bg); /* احتياطي متين قبل التدرّج، يمنع نص أبيض على خلفية بيضاء لو فشل التدرّج */
  background-image: linear-gradient(135deg, var(--sidebar-bg), #2c3338);
  color: var(--card); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px;
  flex-wrap: wrap; gap: 14px; position: relative; z-index: 1;
}
.welcome-banner h2 { margin: 0; font-size: var(--fs-lg); color: var(--card) !important; }
.welcome-banner .muted { color: #c3c4c7 !important; margin: 4px 0 0 0; }
.quick-actions { display: flex; gap: 10px; }

.pipeline-card { margin-bottom: 20px; }
.pipeline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pipeline-stage {
  flex: 1; min-width: 140px; text-align: center; padding: 16px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--slate-50);
}
.pipeline-stage.highlight { background: var(--brand-light); border-color: var(--brand); }
.pipeline-num { font-size: var(--fs-stat); font-weight: 900; color: var(--brand-dark); }
.pipeline-label { font-size: var(--fs-meta); color: var(--muted); margin-top: 4px; font-weight: 600; }
.pipeline-arrow { font-size: var(--fs-lg); color: var(--muted); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.attention-item, .performer-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-text);
}
.attention-item:last-child, .performer-item:last-child { border-bottom: none; }
/* ===== تبويبات فرعية (الإعدادات) ===== */
.sub-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
/* DS-1: Unified underline tab component — single source of truth */
.tab-underline {
  padding: 10px 18px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-text); font-weight: 700; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--ease-normal), border-color var(--ease-normal);
}
.tab-underline:hover { color: var(--text); }
.tab-underline.active { color: var(--brand); border-bottom-color: var(--brand); }
/* Aliases for existing class names — keep HTML unchanged */
.sub-tab-btn, .report-subtab-btn, .edit-subtab-btn { padding: 10px 18px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: var(--fs-text); font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease-normal), border-color var(--ease-normal); }
.sub-tab-btn:hover, .report-subtab-btn:hover, .edit-subtab-btn:hover { color: var(--text); }
.sub-tab-btn.active, .report-subtab-btn.active, .edit-subtab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.sub-panel { display: none; }
.sub-panel.active { display: block; }

.switch-row { display: flex; align-items: flex-start; justify-content: space-between; font-weight: 700; font-size: var(--fs-body); }
.switch-row input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ===== التقارير ===== */
.report-summary { font-size: var(--fs-body); line-height: 2; }
.report-summary strong { color: var(--brand-dark); }

/* ===== تفاصيل الموقع ===== */
.detail-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.detail-stat { text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--slate-50); }
.detail-stat .num { font-size: var(--fs-stat); font-weight: 900; color: var(--brand-dark); }
.detail-stat .label { font-size: var(--fs-micro); color: var(--muted); margin-top: 4px; }

.article-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ===================================================
   المرحلة الثانية: لغة بصرية (أيقونات + ألوان دلالية)
   =================================================== */

.nav-icon { display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; }
.side-nav .tab-btn.active .nav-icon { opacity: 1; }

.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); position: relative; padding-top: 16px; }
.stat-icon {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 10px;
}
.stat-icon.success { background: var(--success-bg); color: var(--success); }
.stat-icon.danger { background: var(--danger-bg); color: var(--danger); }
.stat-icon.warn { background: var(--warn-bg); color: var(--warn); }
.stat-icon.brand { background: var(--brand-light); color: var(--brand); }

.empty-state { color: var(--muted); font-size: var(--fs-text); padding: 30px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.empty-state svg { opacity: 0.4; }
.empty-state p, .empty-state span { margin: 0; }

.bar-row { margin-bottom: 14px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-row-top { display: flex; justify-content: space-between; font-size: var(--fs-text); margin-bottom: 5px; }
.bar-row-num { font-weight: 700; color: var(--brand-dark); }
.bar-track { background: #f0f0f1; border-radius: 6px; height: 8px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); height: 100%; border-radius: 6px; transition: width 0.3s; }

/* ===================================================
   المرحلة الثالثة: تلميع نهائي — محاذاة، تباعد، تجاوب
   =================================================== */

.bulk-bar { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding: 10px 14px; background: var(--slate-50); border: 1px solid var(--border); border-radius: 9px; }
.bulk-bar label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-text); font-weight: 600; margin: 0; }

.article-row { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.article-row > div:first-child { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.article-row input[type=checkbox] { margin-inline-end: 8px; margin-top: 3px; flex-shrink: 0; }

.card + .card { margin-top: 0; }
.two-col .card { margin-bottom: 0; }

/* ===== خريطة حرارية لنشاط الموقع (آخر 30 يوماً) ===== */
.heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin-top: 8px; }
.heat-cell { aspect-ratio: 1; border-radius: 4px; background: #ebedf0; cursor: default; }
.heat-cell.heat-1 { background: #c6e6d1; }
.heat-cell.heat-2 { background: #8fd19e; }
.heat-cell.heat-3 { background: #4caf6d; }
.heat-cell.heat-4 { background: var(--success); }

/* ===================================================
   المرحلة 1 من إعادة التصميم: البنية التحتية للعرض
   =================================================== */

/* ترقيم الصفحات */
.pagination-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 10px;
}
.pagination-controls { display: flex; gap: 6px; }
.pagination-controls .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* قوائم منسدلة مخصَّصة التصميم (بدون مكتبة خارجية) */
/* Base style for ALL select elements — unified arrow + border + radius */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px;
  padding: 8px 12px 8px 32px !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-text);
  color: var(--text);
  background-color: var(--card);
  cursor: pointer;
  transition: border-color var(--ease-normal), box-shadow var(--ease-normal);
  box-sizing: border-box;
}
select:hover { border-color: var(--brand) !important; }
select:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-light); }

/* حالات تحميل (Skeleton) */
.skeleton-line {
  height: 14px; border-radius: 6px; width: 100%;
  background: linear-gradient(90deg, #eceef1 25%, #f5f6f8 37%, #eceef1 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ===================================================
   المرحلة 2 من إعادة التصميم: رسوم بيانية حقيقية
   =================================================== */
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-text); }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#reportTrendChart, #reportStatusDonut, #reportLinkTypeDonut { margin-top: 8px; }

/* ===================================================
   المرحلة 3 من إعادة التصميم: هوية بصرية متكاملة
   =================================================== */

/* شاشة الدخول — خلفية زخرفية بعمق بصري */
.auth-screen::before, .auth-screen::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; z-index: 0;
}
.auth-screen::before { width: 380px; height: 380px; background: var(--brand); top: -120px; right: -100px; }
.auth-screen::after { width: 300px; height: 300px; background: #a5b4fc; bottom: -100px; left: -80px; }
.auth-card { position: relative; z-index: 1; border-top: 4px solid var(--brand); }
.auth-card .brand-mark { box-shadow: 0 6px 16px rgba(34,113,177,0.35); }

/* بطاقات تفاعلية — ارتفاع خفيف عند المرور */
.stat-card, .card { transition: box-shadow var(--ease-slow), transform var(--ease-slow); }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }

/* القائمة الجانبية — شريط تمييز للعنصر النشِط */
.side-nav .tab-btn { position: relative; transition: background var(--ease-normal), color var(--ease-normal); }

/* تقليم صفوف الجداول لسهولة القراءة */
tbody tr:nth-child(even) { background: #fbfbfc; }
tbody tr:nth-child(even):hover { background: #f5f5f6; }

/* انتقالات سلسة موحّدة لكل العناصر التفاعلية */
.btn, .badge, input, select, textarea { transition: all var(--ease-normal); }

/* تحسين ظهور شارة الصحّة بجدول المواقع */
.health-dot { box-shadow: 0 0 0 3px rgba(0,0,0,0.03); }

/* عنوان الصفحة الرئيسي — وزن بصري أوضح */
.top-bar h1 { letter-spacing: -0.3px; }

/* ===================================================
   المرحلة 4 من إعادة التصميم: نقاط التجاوب الموحَّدة
   (بدل الكتل المبعثرة من الجولات السابقة)
   =================================================== */

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .two-col { grid-template-columns: 1fr; }
  .pipeline { flex-direction: column; }
  .pipeline-arrow { transform: rotate(90deg); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .main-content { padding: 16px; }
  .top-bar { flex-direction: column; align-items: flex-start; }
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .modal, .modal.wide, .modal.extra-wide { width: 100% !important; max-width: 100% !important; border-radius: var(--radius-md); }
  .article-row { flex-direction: column; }
  .pagination-bar { flex-direction: column; align-items: flex-start; }
  /* تصغير خفيف يقلّل الحاجة للتمرير الأفقي بالجداول قبل الوصول لحدّها
     الأدنى (table-wrap table { min-width }) — تحسين تدريجي، مو استبدال
     لـoverflow-x نفسها (الحل الجذري الأساسي يبقى فوق، بلا شرط الشاشة) */
  th, td { padding: 8px 6px; font-size: var(--fs-meta); }
}

@media (max-width: 600px) {
  .heatmap { grid-template-columns: repeat(10, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   Toast — تنبيهات فورية
   =================================================== */
.toast-container {
  position: fixed; bottom: 20px; left: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border-right: 4px solid var(--slate-400); font-size: var(--fs-text);
  transform: translateX(-20px); opacity: 0; transition: transform var(--ease-slow), opacity var(--ease-slow);
}
.toast.is-open { transform: translateX(0); opacity: 1; }
.toast--success { border-color: var(--success); }
.toast--success .toast__icon { color: var(--success); }
.toast--error { border-color: var(--danger); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning { border-color: var(--warn); }
.toast--warning .toast__icon { color: var(--warn); }
.toast--info { border-color: var(--brand); }
.toast--info .toast__icon { color: var(--brand); }
.toast__msg { flex: 1; }
.toast__close { background: transparent; border: none; cursor: pointer; color: var(--muted); flex-shrink: 0; display: flex; }

/* ===================================================
   نافذة التأكيد المخصَّصة
   =================================================== */
.confirm-dialog { max-width: 420px; }
.confirm-dialog #confirmTypeInput {
  width: 100%; padding: 9px 12px; margin-top: 8px; border: 1px solid var(--border);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-text); box-sizing: border-box;
}
.confirm-dialog #confirmDialogYes:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================
   مركز الإشعارات
   =================================================== */
/* ===== نظام الإشعارات الاحترافي ===== */
/* ⚠️ R187: `position: relative` أُزيلت — كانت تجعل الجرس هو المرساة.
   والحدّ والاستدارة باقيان: مظهر الزرّ لم يتغيّر. */
.notif-bell-wrap {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.notif-bell-wrap:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
/* حالة "فيه إشعارات غير مقروءة" — الحدود تصير زرقاء تلقائياً */
.notif-bell-wrap.has-notif {
  border-color: var(--brand);
}

.notif-bell-btn {
  background: transparent; border: none;
  border-radius: 11px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; color: var(--text);
}
.notif-bell-btn:hover { background: transparent; }

.notif-badge {
  position: absolute; top: -6px; left: -6px;
  background: var(--danger); color: var(--card);
  font-size: var(--fs-micro); font-weight: 700;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-radius: 999px;
  /* دائرة مثالية للأرقام المفردة — تكبر أفقياً فقط عند الحاجة */
  width: 17px; height: 17px; min-width: 17px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1.5px solid var(--card);
  animation: notif-pop .2s ease;
  z-index: 2;
}
.notif-badge[data-wide] {
  width: auto; padding: 0 5px;
}
@keyframes notif-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* لوحة الإشعارات */
/* 🔴 R169: `left: 0` مع `position:absolute` نسبةً للجرس — والجرس قرب
   الحافة في RTL ⇒ اللوحة تخرج من الشاشة (رصد ميدانيّ: نصفها مقطوع).
   ⇒ تُثبَّت بالحافة المنطقية وتُقيَّد بعرض النافذة. */
/* ══ R187 ① — المرساة هي الحاوية لا الجرس ═════════════════════════
   🔴 كانت اللوحة تُرسى على `.notif-bell-wrap` (زرّ الجرس وحده)، وهو
      قرب حافة الشاشة ⇒ تمتدّ 380px من حافته **نحو خارج الصفحة**.
   ⚠️ وعلاجي في R169 عالج **العرض** ولم يعالج **الموضع** ⇒ إصلاح نصفيّ،
      ولهذا عادت المشكلة. العرض كان محسوباً صحيحاً والموضع خاطئاً.
   ⇒ المرساة تصير `.top-bar-actions` (الحاوية)، واللوحة تُثبَّت بحافتها
     الداخلية ⇒ تنزاح داخل الصفحة تلقائياً مهما كان موضع الجرس، وفي كل
     الصفحات بلا استثناء. */
.top-bar-actions { position: relative; }
/* ⚠️ حزام أمان: لو خرجت أي لوحة منبثقة مستقبلاً، الصفحة لا تكتسب
   تمريراً أفقياً — العيب يُرى فوراً ولا يُخفى بالتمرير. */
body { overflow-x: hidden; }
.notif-panel {
  /* 🔴 R188: الجهة كانت معكوسة. الحاوية تقع عند **الطرف الخارجيّ** من
     الصفحة (يسار الشاشة في RTL)، و`inset-inline-start: 0` يثبّت اللوحة
     بطرفها الداخليّ فتنمو **نحو الخارج** ⇒ تخرج من الصفحة، ويضطرّ
     المستخدم للتمرير الأفقيّ.
     ⚠️ وR187 صحّح المرساة (من الجرس إلى الحاوية) ولم يصحّح **الجهة** —
        إصلاح نصفيّ ثانٍ لنفس العطل.
     ⇒ التثبيت بالطرف المقابل ⇒ تنمو نحو **داخل** الصفحة دائماً. */
  /* 🔴 R190: `top: 50px` رقم ثابت مقيس على ارتفاع الترويسة يومَ كُتب —
     لو تغيّر الارتفاع التصقت اللوحة أو انفصلت عشوائياً. والالتصاق يجعلها
     تبدو امتداداً للشريط لا لوحة مستقلّة.
     ⇒ `calc(100% + 8px)`: ثمانية بكسل تحت الحاوية **مهما كان ارتفاعها**
       — الفجوة المعتادة في لوحات التطبيقات، وتبقى صحيحة بلا صيانة. */
  /* 🔴 R192: عرض ثابت (340px) لا علاقة له بعرض الحاوية ⇒ حافّتان غير
     متحاذيتين واللوحة تبدو معلّقة لا منبثقة من الشريط.
     ⇒ `inset-inline: 0` يجعلها **بعرض الحاوية تماماً**: الحافّتان
       متطابقتان، والعرض يتبع الشريط تلقائياً إن تغيّر محتواه.
     ⚠️ وحدّ أدنى يمنع لوحة ضيّقة لا تُقرأ لو ضاق الشريط. */
  position: absolute; top: calc(100% + 8px); inset-inline: 0;
  width: auto; min-width: min(300px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-xl);
  z-index: 200; display: none; overflow: hidden;
  transform-origin: top;
  animation: notif-slide .2s ease;
}
@keyframes notif-slide { from { opacity:0; transform: translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
.notif-panel.open { display: block; }

/* رأس اللوحة */
.notif-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: var(--fs-body);
}
.notif-mark-all-btn {
  font-size: var(--fs-micro); color: var(--brand); background: none; border: none;
  cursor: pointer; font-weight: 600; padding: 3px 8px;
  border-radius: 6px; transition: background .15s;
}
.notif-mark-all-btn:hover { background: var(--brand-light); }

/* تبويبات الفلتر */
.notif-filter-tabs {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--slate-50);
}
.notif-filter-tab {
  font-size: var(--fs-meta); font-weight: 600; padding: 4px 12px;
  border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); transition: all .15s;
  font-family: inherit; letter-spacing: 0;
}
.notif-filter-tab:hover { background: var(--card); color: var(--text); }
.notif-filter-tab.active {
  background: var(--card); color: var(--brand);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* قائمة الإشعارات */
#notifList { max-height: 360px; overflow-y: auto; }

/* بطاقة الإشعار الواحد */
.notif-item {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--slate-50); }
/* نقطة صغيرة بدل خط جانبي */
.notif-item.notif-unread::after {
  content: ''; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}

/* أيقونة الإشعار */
.notif-item-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-title);
}
.notif-item--danger .notif-item-icon  { background: var(--danger-50); color: var(--danger); }
.notif-item--warn   .notif-item-icon  { background: var(--warn-50); color: var(--warn); }
.notif-item--ok     .notif-item-icon  { background: #f0fdf4; color: var(--success); }
.notif-item--info   .notif-item-icon  { background: var(--brand-light); color: var(--brand); }

/* محتوى الإشعار */
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: var(--fs-text); font-weight: 700; color: var(--text); line-height: 1.35; }
.notif-item-desc  { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; line-height: 1.4; }
.notif-item-time  { font-size: var(--fs-micro); color: var(--muted); margin-top: 5px; }

/* زر عمل الإشعار */
.notif-item-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.notif-action-btn {
  font-size: var(--fs-micro); font-weight: 600; padding: 4px 10px;
  border-radius: 7px; cursor: pointer; border: 1px solid var(--border);
  background: var(--card); color: var(--text); transition: all .15s;
}
.notif-action-btn:hover { border-color: var(--brand); color: var(--brand); }
.notif-action-btn.primary {
  background: var(--brand); color: var(--card); border-color: var(--brand);
}
.notif-action-btn.primary:hover { opacity: .88; }
.notif-action-btn.danger {
  background: var(--danger); color: var(--card); border-color: var(--danger);
}

/* ذيل اللوحة */
.notif-panel__footer {
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--card); text-align: center;
}
.notif-panel__footer button {
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; font-family: inherit; transition: color .15s;
}
.notif-panel__footer button:hover { color: var(--brand); background: none; }

.notif-empty {
  padding: 36px 20px; text-align: center; color: var(--muted); font-size: var(--fs-text);
}
.notif-empty svg { opacity: .4; margin-bottom: 10px; }

/* ===================================================
   تبويبات التقارير الفرعية (منفصلة عن تبويبات الإعدادات)
   =================================================== */
/* report-subtab-btn → aliased to .tab-underline base above */
.report-subpanel { display: none; }
.report-subpanel.active { display: block; }

/* ===================================================
   تبويبات فرعية داخل نافذة تعديل الموقع
   =================================================== */
/* edit-subtab-btn → aliased to .tab-underline base above */
.edit-subpanel { display: none; padding-top: 4px; }
.edit-subpanel.active { display: block; }

/* ===================================================
   شرائح معلومات المقالة (بديل الشرطات المتتالية المزعجة)
   =================================================== */
.article-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.article-meta-date { margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); }
/* اسم الموقع بوضع البحث الشامل — سطر مستقلّ فوق العنوان، منفصل تمامًا عن
   شارات الحالة والإحصائيات (كانت متلزّقة سوا بنفس الصف، تبان غير منطقية) */
/* اسم الموقع بوضع البحث الشامل — شارة متكاملة (خلفية + نص + أيقونة بمحاذاة
   موحّدة داخل عنصر واحد)، بدل نص وأيقونة منفصلين كان محاذاتهم العمودية
   تختلف (الاسم يبان "نازل" عن الأيقونة) — أنضف وأدق بصريًا كعنصر واحد متجانس */
.article-site-label {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 700;
  color: var(--brand-dark); background: var(--brand-light); border-radius: 6px;
  padding: 3px 8px; margin-bottom: 6px; line-height: 1;
}
.article-site-label svg { width: 11px; height: 11px; flex-shrink: 0; display: block; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 20px; font-size: var(--fs-micro); background: var(--slate-100); color: var(--muted);
}
.chip-ok { background: var(--success-bg); color: var(--success); }
.chip-danger { background: var(--danger-bg); color: var(--danger); }
.chip svg { width: 11px; height: 11px; }

/* حقل رقم الصفحة المباشر */
.page-jump-input {
  width: 48px; text-align: center; padding: 6px 4px; border: 1px solid var(--border);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-text);
}

/* ===== نافذة "حالات خاصّة" (المرحلة 2) — أقسام منفصلة بصريًا بالكامل،
   كل استهداف فعّال كرت مستقلّ، بدل النص المتلاصق القديم ===== */
.special-status-section {
  margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.special-status-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.special-status-section h4 { margin: 0 0 12px; font-size: var(--fs-body); font-weight: 700; }
.special-status-section p { margin: 0 0 8px; font-size: var(--fs-text); color: var(--text); }

.target-card {
  background: var(--slate-50); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
  transition: box-shadow .15s;
}
.target-card:last-child { margin-bottom: 0; }
.target-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.target-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.target-type-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(0,0,0,0.2);
}
.target-card-type { font-weight: 700; font-size: var(--fs-text); }
.target-card-value { font-size: var(--fs-text); margin-bottom: 4px; color: var(--text); }
.target-card-meta { font-size: var(--fs-meta); margin-top: 4px; }
/* M3: progress bar */
.target-card-progress { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.target-progress-bar-wrap { display: flex; align-items: center; gap: 8px; }
.target-progress-bar-wrap .bar-track { height: 6px; border-radius: 6px; }

.blocked-words-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.blocked-word-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 11px; border-radius: 20px;
  background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-meta); font-weight: 500;
  border: 1px solid rgba(220,38,38,0.25);
}
.blocked-word-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--danger); opacity: .55;
  font-size: var(--fs-text); line-height: 1; cursor: pointer; padding: 0;
  transition: opacity .15s, background .15s;
  flex-shrink: 0;
}
.blocked-word-chip button:hover {
  opacity: 1; background: rgba(220,38,38,0.12);
}


/* ════════════════════════════════════════════════════════════════
   نظام الدورات — Cycle System Components
   ════════════════════════════════════════════════════════════════ */

/* بطاقة الدورة الحالية — في تبويب الإعدادات وتفاصيل الموقع */
.cycle-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--brand-light);
  padding: 14px 16px;
  margin-top: 12px;
}
.cycle-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.cycle-card-label {
  font-size: var(--fs-meta); font-weight: 700; color: var(--brand-dark);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cycle-card-lock {
  font-size: var(--fs-micro); color: var(--muted);
}
.cycle-card-body {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
}
.cycle-card-body .cycle-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.cycle-card-body .cycle-stat-val {
  font-size: var(--fs-title); font-weight: 800; color: var(--brand-dark);
}
.cycle-card-body .cycle-stat-lbl {
  font-size: var(--fs-micro); color: var(--muted);
}

/* سطر تخصيص الدورة داخل تبويب الإعدادات */
.cycle-mode-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--card); margin-bottom: 6px;
}
.cycle-mode-row-label {
  font-size: var(--fs-text); color: var(--muted); white-space: nowrap;
}
.cycle-mode-row-num {
  font-size: var(--fs-text); font-weight: 700; color: var(--brand-dark);
  min-width: 52px;
}
.cycle-mode-row select { flex: 1; width: auto; margin: 0; }
.cycle-mode-row-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer; flex-shrink: 0;
  color: var(--muted); font-size: var(--fs-body); line-height: 1;
  transition: color .15s, background .15s;
}
.cycle-mode-row-remove:hover {
  color: var(--danger); background: var(--danger-bg);
}

/* سطر سجل الدورة في تفاصيل الموقع */
.cycle-log-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-text);
}
.cycle-log-row:last-child { border-bottom: none; }
.cycle-log-meta { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; }

/* ===== تاب المجموعات — تصميم كامل ===== */

/* بطاقة المجموعة — نفس نمط .card الموحَّد في النظام */
.group-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0;
  box-shadow: var(--shadow); margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.group-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: var(--brand-light);
}

/* جسم البطاقة */
.group-card-body {
  padding: 14px 18px 12px;
}

/* سطر العنوان + الشارات + الأزرار */
.group-card-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.group-card-name {
  font-size: var(--fs-title); font-weight: 800;
  color: var(--text); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-card-badges {
  display: flex; gap: 5px; align-items: center; flex-shrink: 0;
}
.group-card-actions {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}

/* وصف المجموعة */
.group-card-desc {
  font-size: var(--fs-meta); color: var(--muted);
  margin: 8px 0 0; line-height: 1.5;
}

/* قائمة المواقع المصغّرة */
.group-card-sites-preview {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.group-site-chip {
  font-size: var(--fs-meta); padding: 2px 9px; border-radius: 20px;
  background: var(--slate-50); border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
  transition: background .15s, color .15s;
}
.group-site-chip:hover { background: var(--brand-light); color: var(--brand); }
.group-site-chip-independent {
  opacity: 0.55; border-style: dashed !important;
}

/* حالة فارغة */
.groups-empty {
  text-align: center; padding: 64px 20px; color: var(--muted);
}
.groups-empty p { margin-top: 14px; font-size: var(--fs-body); }

/* ===== Phase 5: Dashboard Groups Summary ===== */
.groups-stat-grid {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.group-stat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 20px; background: var(--slate-50);
}

/* ===== Group Detail Panel — تصميم محسَّن ===== */
.group-detail-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 4px;
  box-shadow: var(--shadow);
}
.group-detail-header h2 {
  margin: 0; font-size: var(--fs-lg); font-weight: 800; min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-detail-header-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}

/* تبويبات التفصيل */
.group-detail-tabs {
  display: flex; gap: 2px; padding: 4px;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: 14px; overflow-x: auto; margin-bottom: 8px;
}
.group-detail-tab {
  padding: 8px 18px; font-size: var(--fs-text); font-weight: 600;
  font-family: inherit; letter-spacing: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); border-radius: 10px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.group-detail-tab:hover { color: var(--text); background: rgba(255,255,255,.7); }
.group-detail-tab.active {
  background: var(--card); color: var(--brand); font-weight: 700;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.group-detail-pane { display: none; }
.group-detail-pane.active { display: block; }

/* toggle الوراثة في جدول مواقع المجموعة */
.inherit-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); cursor: pointer; user-select: none;
}
.inherit-toggle input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }

/* Phase 4 — Inheritance UX */
.group-site-chip-independent {
  opacity: 0.6;
  border-style: dashed !important;
}

/* ===== Dashboard Actionable Stats ===== */
.stat-card-clickable {
  cursor: pointer; transition: transform var(--ease-slow), box-shadow var(--ease-slow);
}
.stat-card-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.stat-card-danger { border-color: var(--danger) !important; }
.stat-card-danger .num { color: var(--danger) !important; }

/* ===== Attention Items — Detailed View ===== */
.attention-item-detailed {
  flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0;
}
.attention-item-main { width: 100%; }
.attention-item-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;
}

/* stat-card-tap-hint */
.stat-card-tap-hint {
  font-size: var(--fs-micro); color: var(--danger); opacity: 0.7;
  margin-inline-start: 4px; vertical-align: middle;
}

/* ===== Toggle Switch — وراثة إعدادات المجموعة ===== */
.gs-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; vertical-align: middle;
}
.gs-toggle input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 32px; height: 18px; border-radius: 9px;
  background: var(--border); cursor: pointer; flex-shrink: 0;
  position: relative; transition: background .2s;
  margin: 0; vertical-align: middle;
}
.gs-toggle input[type=checkbox]::after {
  content: ''; position: absolute;
  width: 12px; height: 12px; border-radius: 50%; background: var(--card);
  top: 3px; left: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s;
}
.gs-toggle input[type=checkbox]:checked { background: var(--brand); }
.gs-toggle input[type=checkbox]:checked::after { transform: translateX(14px); }
.gs-toggle-label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
  transition: color .18s; line-height: 1;
}
.gs-toggle input[type=checkbox]:checked + .gs-toggle-label { color: var(--brand); }

/* ===== Group Detail — تحسينات عامة ===== */
/* الشريط العلوي للبطاقة — gradient موحّد مع التصميم */
.group-card-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
}
/* حقول group-detail-pane داخل .card */
.group-detail-pane .card label {
  font-size: var(--fs-text); font-weight: 700; margin-top: 12px; display: block; color: var(--text);
}
.group-detail-pane .card label:first-child { margin-top: 0; }
/* نص توضيحي داخل التبويبات */
.group-detail-pane .card > p.muted { margin-top: 0; margin-bottom: 16px; }

.auth-footer {
  text-align: center; margin-top: 16px;
  font-size: var(--fs-micro); color: var(--muted); font-weight: 500;
}


/* ===== إصلاح جدول السجلات داخل المجموعات ===== */
.group-detail-pane .table-wrap { overflow-x: auto; }
.group-detail-pane .table-wrap table { table-layout: fixed; width: 100%; }
.group-detail-pane .table-wrap table th:nth-child(1) { width: 36px; }
.group-detail-pane .table-wrap table th:nth-child(2) { width: 110px; }
.group-detail-pane .table-wrap table th:nth-child(3) { width: 180px; }
.group-detail-pane .table-wrap table th:nth-child(4) { width: 70px; }
.group-detail-pane .table-wrap table th:nth-child(5) { width: auto; }
.group-detail-pane .table-wrap table th:nth-child(6) { width: 120px; }
.group-detail-pane .table-wrap table th:nth-child(7) { width: 100px; }
.group-detail-pane .table-wrap table td { overflow-wrap: break-word; word-break: break-word; }
.group-detail-pane .last-error-multiline { white-space: pre-line; word-break: break-word; }

/* ═══════════════════════════════════════════════════
   ACC-3: Focus-visible — ring واضح لكل التفاعليات
   ═══════════════════════════════════════════════════ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible     { outline-offset: 3px; }
.tab-btn:focus-visible { outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 0;
  border-color: var(--brand);
}
.row-icon-btn:focus-visible,
.expand-toggle:focus-visible,
.notif-bell-btn:focus-visible,
.modal-close-x:focus-visible { outline-offset: 3px; }


/* ═══════════════════════════════════════════
   أزرار أفعال المقالات — موحَّدة عبر جدول اليوم + مراجعة القادم + المقالات
   ═══════════════════════════════════════════ */
.art-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: var(--fs-meta); font-family: inherit;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); cursor: pointer; white-space: nowrap;
  transition: background var(--ease-normal), border-color var(--ease-normal), color var(--ease-normal);
  flex-shrink: 0;
}
.art-btn:hover { background: var(--slate-50); }
.art-btn:disabled { opacity: .5; cursor: not-allowed; }

/* معاينة / مقارنة / ملخّص */
.art-btn-neutral { color: var(--text); border-color: var(--border); }
.art-btn-neutral:hover { border-color: var(--brand); color: var(--brand); }

/* تخطّى */
.art-btn-skip { color: var(--warn-700); border-color: var(--warn-700); }
.art-btn-skip:hover { background: var(--warn-50, var(--warn-50)); }

/* استبعاد دائم */
.art-btn-exclude { color: var(--danger); border-color: var(--danger); }
.art-btn-exclude:hover { background: var(--danger-bg, #fff1f1); }

/* ═══════════════════════════════════════════
   RTL: Logical properties بدل left/right
   ═══════════════════════════════════════════ */

/* select arrow — يمين في RTL */
select {
  background-position: right 10px center !important;
  padding-left: 12px !important;
  padding-right: 32px !important;
}

/* toast — يمين في RTL */
.toast-container {
  inset-inline-start: auto;
  inset-inline-end: 20px;
  left: auto;
  right: auto;
}
[dir="ltr"] .toast-container { left: 20px; right: auto; }

/* notification panel — يمين في RTL */
/* ══ R189 — القاعدة كانت تُلغي نفسها ════════════════════════════════
   🔴 في RTL يُترجَم `inset-inline-end` إلى `left`. و`left: auto` يأتي
      **بعده في القاعدة نفسها** فيمحوه ⇒ اللوحة بلا تثبيت أفقيّ ⇒ تقع
      حيث اتّفق وتخرج من الصفحة.
   ⚠️ وهذا ما أبطل محاولاتي الثلاث السابقة: كنت أصلح القاعدة الأولى
      (سطر 1127) وهذه تتجاوزها ثمّ تُبطل نفسها.
   ⇒ سطر واحد صريح بلا تعارض، وعرض أصغر يسع الشاشة براحة. */
/* ⚠️ R192: كانت تُثبّت طرفاً واحداً وتفرض عرضاً ثابتاً ⇒ تنقض التحاذي
   أعلاه. وُحِّدت معه: الطرفان مثبَّتان والعرض يتبع الحاوية. */
.notif-panel {
  inset-inline: 0;
  width: auto;
}

/* notification badge — corner يتبع الاتجاه */
.notif-badge {
  inset-inline-end: -6px;
  inset-inline-start: auto;
  top: -6px;
  left: auto;
}

/* notification unread dot */
.notif-item.notif-unread::after {
  inset-inline-end: 12px;
  inset-inline-start: auto;
  left: auto;
}

/* DASH-2: stats-grid — breakpoint وسيط */
/* stats-grid responsive — 5 columns on desktop, reduce only on smaller screens */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* RESP-1: Hamburger mobile navigation */
.sidebar-toggle {
  display: none;
  background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px;
  color: var(--card); cursor: pointer; padding: 8px 10px;
  align-items: center; gap: 8px; font-size: var(--fs-text); font-weight: 600;
}
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: -260px;
    width: 240px; height: 100vh; z-index: 100;
    transition: inset-inline-start 0.25s ease;
    overflow-y: auto;
  }
  .sidebar.open { inset-inline-start: 0; }
  .main-content { padding: 16px; }
  /* show toggle in top-bar on mobile */
  .mobile-menu-btn { display: flex !important; }
}

/* TGT-1: Execution mode helper text */
.exec-mode-hint {
  font-size: var(--fs-meta); color: var(--muted); margin-top: 5px; line-height: 1.5;
  padding: 6px 10px; background: var(--slate-50); border-radius: 6px;
  border-inline-start: 3px solid var(--brand-light);
}

/* ACC-1: Contrast improvement for small text */
.campaign-type-pill,
.campaign-type-badge,
.nav-group-label {
  /* Ensure readable contrast at small sizes */
  -webkit-font-smoothing: antialiased;
}
.notif-filter-tab { font-size: var(--fs-sm); }

/* ACC-4: Keep interactive elements visible - toast gets close button */
.toast { min-width: 260px; }

/* NAV-1: Tooltips for sidebar navigation */
.side-nav .tab-btn { position: relative; }
.side-nav .tab-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-inline-end: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--slate-800); color: var(--card);
  font-size: var(--fs-xs); padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.side-nav .tab-btn[data-tooltip]:hover::after { opacity: 1; }

/* FORM-3: exec mode select consistent with rest of UI */
.exec-mode-select {
  font-size: var(--fs-sm); padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  /* ⚠️ R85-K1: `background-color` لا `background` — الاختصار يمسح السهم */
  font-family: inherit; background-color: var(--card); color: var(--text);
  cursor: pointer; transition: border-color var(--ease-normal);
}
.exec-mode-select:hover { border-color: var(--brand); }
.exec-mode-select:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 1px;
}

/* LOAD-4: Retry button standard style */
.retry-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 8px; font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer; font-family: inherit;
  background: var(--brand-light); color: var(--brand);
  border: 1px solid var(--brand); transition: all var(--ease-normal);
}
.retry-btn:hover { background: var(--brand); color: var(--card); }

/* SITE-1: Site status with dot - ensure health-dot in status column */
.status-with-dot { display: inline-flex; align-items: center; gap: 6px; }

/* CON-4: Confirmation dialogs - standardize */
.confirm-dialog .modal-actions {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* RESP-3: Progressive column hiding on mobile */
@media (max-width: 768px) {
  /* Hide non-essential table columns on small screens */
  .sites-table .col-group,
  .sites-table .col-failed,
  .sites-table .col-excluded { display: none; }
  /* Compact row actions */
  td.row-actions { gap: 2px; }
  .row-icon-btn { width: 30px; height: 30px; }
}

/* RESP-4: Prevent top-bar-actions from wrapping */
@media (max-width: 900px) {
  .top-bar-actions { gap: 8px; padding: 8px 10px; }
  .system-status-chip .status-sep + span { display: none; } /* hide verbose text on mobile */
}
@media (max-width: 600px) {
  .top-bar-actions { gap: 6px; }
  .top-bar-actions .status-group { display: none; }
  /* D4-8b (R-2): عُزل بالقياس — .top-bar-actions يحمل
     flex-wrap: nowrap + flex-shrink: 0، فلا يتقلّص ولا يلتفّ. عند 360px
     امتدّ إلى -14px (يساراً في RTL) فأنتج scrollWidth 374 مقابل 360.
     الإصلاح من المصدر: نسمح بالالتفاف على أضيق الشاشات فقط — لا
     overflow-x: hidden على body (يُخفي العَرَض لا السبب). */
  .top-bar-actions { flex-wrap: wrap; justify-content: flex-end; } /* hide status on very small */
}

/* CON-5: Standardize formatDate contexts */
.date-only bdi.ltr-time-part,
.date-only bdi.ltr-date-sep { display: none; } /* hide time in date-only contexts */

/* EMPTY-1: Richer empty state */
.empty-state-contextual {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px; text-align: center; gap: 10px; color: var(--muted);
}
.empty-state-contextual .empty-icon { opacity: 0.3; margin-bottom: 4px; }
.empty-state-contextual h4 { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin: 0; }
.empty-state-contextual p { font-size: var(--fs-text); margin: 0; max-width: 320px; line-height: 1.6; }

/* NAV-2: Breadcrumb component */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); color: var(--muted); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--brand); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--slate-400); font-size: var(--fs-micro); }
.breadcrumb-current { font-weight: 700; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   Cycle v3 — قائمة الاستبعاد الموحّدة
   ════════════════════════════════════════════════════════════════ */
.exclude-menu-wrap { position: relative; display: inline-block; }
.exclude-menu {
  display: none; position: absolute; z-index: 60;
  inset-inline-end: 0; top: calc(100% + 4px);
  min-width: 240px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden;
}
.exclude-menu.open { display: block; }
.exclude-menu-item {
  display: block; width: 100%; text-align: start;
  padding: 10px 14px; border: none; background: transparent;
  cursor: pointer; font-family: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.exclude-menu-item:last-child { border-bottom: none; }
.exclude-menu-item:hover { background: var(--brand-light); }
.exclude-menu-danger:hover { background: var(--danger-bg); }
.exclude-menu-title { font-size: var(--fs-text); font-weight: 700; color: var(--text); }
.exclude-menu-desc  { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.exclude-menu-danger .exclude-menu-title { color: var(--danger); }

/* ════════════════════════════════════════════════════════════════
   Cycle v3 — مركز الدورات
   ════════════════════════════════════════════════════════════════ */
.cc-section { margin-bottom: 22px; }
.cc-section-title { font-size: var(--fs-body); font-weight: 800; margin: 0; }
.cc-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px; background: var(--card);
}
.cc-row-decision { border-inline-start: 3px solid var(--warn); }
.cc-row-running  { border-inline-start: 3px solid var(--success); }
.cc-row-starting { border-inline-start: 3px solid var(--brand); }
.cc-row-error    { border-inline-start: 3px solid var(--danger); background: var(--danger-bg); }
.cc-meta { font-size: var(--fs-meta); color: var(--muted); }
.cc-bar-wrap { display: flex; align-items: center; gap: 7px; min-width: 150px; }
.cc-empty { padding: 14px; text-align: center; color: var(--muted); font-size: var(--fs-text); }

/* BUG-4: شريط تنبيه عند فشل التحديث التلقائي — البيانات المعروضة تبقى */
.stale-banner {
  padding: 9px 14px; margin-bottom: 8px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(217,119,6,.25); border-radius: 9px;
  font-size: var(--fs-meta); font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   ═══ تحسينات بصرية: مركز الدورات · متابعة الدورات · الأولويات ═══
   معالجة ما ظهر في الصور: تكدّس · scroll يصغّر المحتوى ·
   ضعف التسلسل البصري · فلاتر غير واضحة
   ════════════════════════════════════════════════════════════════ */

/* ── تسلسل بصري: عناوين الأقسام أوضح ── */
.cc-section { margin-bottom: 26px; }
.cc-section:last-child { margin-bottom: 0; }
.cc-section-title { font-size: var(--fs-body); letter-spacing: -0.01em; }
.cc-count-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--brand-light); color: var(--brand-dark); font-size: var(--fs-meta); font-weight: 700; margin-inline-start: 6px; }

/* ── الصفوف: تنفّس أكبر + تمييز عند المرور ── */
.cc-row {
  padding: 13px 16px;
  margin-bottom: 8px;
  transition: box-shadow .14s, transform .14s;
}
.cc-row:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
/* التدرّجات أُزيلت: كانت تجعل كل صف يبدو صندوقاً منفصلاً */
.cc-row-decision, .cc-row-running, .cc-row-starting { background: var(--card); }
.cc-site-name { font-weight: 700; font-size: var(--fs-text); min-width: 175px; flex: 1; }
.cc-stats { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; line-height: 1.7; }

/* ── الإحصائيات: لا تصغُر بسبب الحاوية ── */
.cycle-card-body { gap: 16px 26px; }
.cycle-card-body .cycle-stat-val { font-size: var(--fs-lg); line-height: 1.25; }
.cycle-card-body .cycle-stat-lbl { font-size: var(--fs-meta); white-space: nowrap; }
.cycle-card { padding: 16px 18px; }

/* ── النافذة: ارتفاع أكبر فلا تنضغط الإحصائيات ── */
.modal-scroll-body { max-height: min(78vh, 900px); }
#siteDetailModal .detail-grid { gap: 12px; }
#siteDetailModal .detail-stat { padding: 12px 10px; }
#siteDetailModal .detail-stat .num { font-size: var(--fs-lg); }

/* ── الفلاتر: مجموعة مفصولة بصرياً ── */
.filters-bar {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 13px;
  align-items: center;
}
.filters-bar select, .filters-bar input { margin: 0; }

/* ── جدول متابعة الدورات: قراءة أسهل لـ11 عموداً ── */
#tab-progress table th { font-size: var(--fs-meta); white-space: nowrap; padding: 10px 8px; }
#tab-progress table td { padding: 11px 8px; vertical-align: middle; }
#tab-progress table tbody tr:hover { background: var(--slate-50); }
#progressSummary { gap: 8px; margin-bottom: 4px; }
#progressSummary .badge { font-size: var(--fs-meta); padding: 5px 11px; }

/* ── الأولويات: البطاقات الثلاث متساوية الارتفاع ── */
#tab-priorities .cycle-card { display: flex; flex-direction: column; }
#tab-priorities .cycle-card p { flex: 1; }
#tab-priorities .sub-tabs { border-bottom: 2px solid var(--border); }

/* ── حالات فارغة حقيقية ── */
.cc-empty {
  padding: 26px 16px; border: 1px dashed var(--border);
  border-radius: 11px; background: var(--slate-50);
}

/* ── شاشات ضيقة ── */
@media (max-width: 900px) {
  .cc-row { flex-direction: column; align-items: stretch; gap: 7px; }
  .cc-site-name { min-width: 0; }
  .cycle-card-body { gap: 12px 18px; }
}


/* ════════════════════════════════════════════════════════════════
   مركز الدورات — إعادة بناء (المرحلة 5)
   المشكلة السابقة: أربعة أقسام مكدَّسة رأسياً، إطار أحمر لكل حالة
   طبيعية، وإحصائيات تنضغط. الحل: تبويبان + تدرّج لوني دلالي.
   ════════════════════════════════════════════════════════════════ */

/* ── شريط الحالة: أرقام كبيرة مقروءة، لا تنضغط ── */
.cc-statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cc-stat:hover { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
/* التدرّج الدلالي: الأحمر للأخطاء وحدها */
/* لا خطوط جانبية: نقطة حالة صغيرة قبل التسمية — أهدأ وأكثر اتساقاً */
.cc-stat-lbl::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-inline-end: 6px; vertical-align: middle;
  background: var(--slate-300);
}
.cc-stat-ok   .cc-stat-lbl::before { background: var(--success); }
.cc-stat-info .cc-stat-lbl::before { background: var(--brand); }
.cc-stat-bad  .cc-stat-lbl::before { background: var(--danger); }
.cc-stat-bad  .cc-stat-num { color: var(--danger); }

/* ── التبويبان ── */
/* ⚠️ R219: أنماط `cc-tabs`/`cc-tab-label`/`cc-tab-count` لم تعد
   مستعملة — التبويبات صارت من `UI.tabs`. وتُترك كما هي: حذفها بالنمط
   طابق قواعد أخرى وأسقط حزمتين، والمكسب سطور قليلة. */
.cc-tabs {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
}
.cc-tab:hover { color: var(--text); }
.cc-tab-count {
  background: var(--slate-100); color: var(--muted);
  border-radius: 999px; padding: 2px 9px;
  font-size: var(--fs-meta); font-weight: 700;
}
.cc-tab.active .cc-tab-count { background: var(--brand-light); color: var(--brand-dark); }
.cc-tabpanel { display: none; }
.cc-tabpanel.active { display: block; }

/* ── شريط الأدوات ── */
.cc-checkall { display: flex; align-items: center; gap: 7px; font-size: var(--fs-text); cursor: pointer; margin: 0; }
.cc-checkall input { width: auto; margin: 0; }
.cc-toolbar .field-search { flex: 1; min-width: 170px; }
.cc-filter { min-width: 150px; margin: 0 !important; }
.cc-toolbar .btn { margin-inline-start: auto; }

/* ── صفوف المواقع ── */
.cc-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); border-color: var(--slate-300); }
.cc-item-muted { background: var(--slate-50); }
.cc-item-muted .cc-item-name { color: var(--muted); }
/* الأحمر هنا فقط — خطأ تحميل حقيقي */
.cc-item-error { border-color: rgba(220,38,38,.28); background: var(--card); }
.cc-item-error .cc-item-name::before {
  content: '⚠'; color: var(--danger); margin-inline-end: 6px;
}
.cc-item-error .cc-item-meta { color: var(--danger); }

.cc-item-pick { margin: 0; display: flex; align-items: center; }
.cc-item-pick input { width: auto; margin: 0; cursor: pointer; }
.cc-item-main { flex: 1; min-width: 0; }
.cc-sep { opacity: .45; margin: 0 5px; }
.cc-cycle-tag {
  background: var(--slate-100); color: var(--muted);
  border-radius: 20px; padding: 4px 10px;
  font-size: var(--fs-micro); font-weight: 700;
}

/* ── شريط التقدم داخل الصف ── */
.cc-progress { display: flex; align-items: center; gap: 9px; margin: 6px 0 5px; }
.cc-progress-fill { height: 100%; background: var(--success); border-radius: 999px; transition: width .3s; }
.cc-progress-pct { font-size: var(--fs-meta); font-weight: 700; min-width: 38px; }

/* ── شاشات ضيقة ── */
@media (max-width: 820px) {
  .cc-item { flex-wrap: wrap; }
  .cc-item-side { width: 100%; justify-content: flex-end; }
  .cc-toolbar .btn { margin-inline-start: 0; width: 100%; }
  .cc-progress-track { max-width: none; }
}


/* ════════════════════════════════════════════════════════════════
   ⑦ نظام موحّد لحقول البحث — كانت كل شاشة بارتفاع وحدود مختلفة
   ════════════════════════════════════════════════════════════════ */
.field-search {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  font-family: inherit;
  font-size: var(--fs-text);
  color: var(--text);
  margin: 0;
  transition: border-color .14s, box-shadow .14s;
}
.field-search::placeholder { color: var(--slate-400, #94a3b8); }
.field-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
/* الفلاتر بجانبها بنفس الارتفاع تماماً */
.cc-toolbar select, .filters-bar select,
.cc-toolbar .field-search, .filters-bar .field-search {
  height: 38px;
}
.cc-toolbar .btn, .filters-bar .btn { height: 38px; }

/* عنوان قائمة الاستبعاد — يوضّح أن هناك نوعين مختلفين */
.exclude-menu-head {
  padding: 9px 13px 7px;
  font-size: var(--fs-micro); font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}
/* الخيار المؤقت حين لا توجد دورة: مرئي لكن معطَّل — المفهوم يبقى ظاهراً */
.exclude-menu-disabled {
  opacity: .5; cursor: not-allowed;
  padding: 9px 13px;
}
.exclude-menu-disabled .exclude-menu-desc { color: var(--warn); }

/* توحيد ارتفاع الفلاتر مع حقول البحث في كل الشاشات */
.filters-row select, .filters-bar select,
.cc-toolbar select, .sub-filters select { height: 38px; }
.field-search[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ── تنظيف مركز الدورات: مسافات ومحاذاة أهدأ ── */
.cc-statbar { gap: 12px; margin-bottom: 22px; }
.cc-tabs { gap: 2px; margin-bottom: 16px; }
/* أزرار الصف: ارتفاع موحّد مع بقية النظام */
.cc-item-side .btn { height: 34px; padding: 0 14px; }
/* شريط ترتيب المعالجة في «كيف تعمل الأولويات؟» */
.prio-order {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--border);
}
.prio-order-lbl { font-size: var(--fs-meta); font-weight: 700; color: var(--muted); }
.prio-chip {
  padding: 5px 12px; border-radius: 20px;
  font-size: var(--fs-meta); font-weight: 700;
  border: 1px solid var(--border);
}
.prio-chip-3 { background: var(--success-bg); color: var(--success); border-color: rgba(5,150,105,.2); }
.prio-chip-2 { background: var(--warn-bg);    color: var(--warn);    border-color: rgba(217,119,6,.2); }
.prio-chip-1 { background: var(--slate-50);   color: var(--muted); }
.prio-arrow { color: var(--slate-300); font-weight: 700; }

/* ⑥ تبسيط مركز الدورات: القائمة هي العنصر الأساسي */
.cc-statbar { gap: 10px; margin-bottom: 18px; }
.cc-item:hover { border-color: var(--slate-300); box-shadow: none; }
/* سبب الحجب: نص محايد لا شارة تحذير */
.cc-blocked { font-size: var(--fs-meta); color: var(--muted); }
/* شريط الأولويات المختصر بجوار العنوان */
.cc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }


/* ════════════════════════════════════════════════════════════════
   ⑧ مركز الدورات — تنظيف نهائي
   المشكلة: حدود متعدّدة المصادر (بطاقة داخل بطاقة)، ونقاط حالة
   تكسر المحاذاة، وحشو غير متساوٍ يجعل الكتل تبدو مائلة.
   ════════════════════════════════════════════════════════════════ */

/* شريط الإحصائيات: بطاقات متساوية بحدّ واحد ومحاذاة مضبوطة */
.cc-statbar { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.cc-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; padding: 14px 15px; transition: border-color .14s, box-shadow .14s; display: flex; flex-direction: column; justify-content: center; min-height: 74px; }
.cc-stat-lbl::before { flex-shrink: 0; }

/* التبويبان: خط سفلي واحد مستقيم */
.cc-tabs { border-bottom-width: 1px; }
.cc-tab.active { color: var(--brand); border-bottom-color: var(--brand); border-bottom-width: 2px; }

/* شريط الأدوات والصفوف: حدّ واحد وحشو متساوٍ */
.cc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--slate-50); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; padding: 10px 14px; margin-bottom: 14px; border-color: var(--border); }
.cc-item { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; padding: 14px 16px; transition: box-shadow .14s, border-color .14s; }
.cc-item + .cc-item { margin-top: 0; }
.cc-list { display: flex; flex-direction: column; gap: 8px; }

/* المحتوى الداخلي: محاذاة رأسية واحدة */
.cc-item-main { display: flex; flex-direction: column; gap: 4px; }
.cc-item-side { flex-shrink: 0; display: flex; align-items: center; gap: 8px; align-self: center; }

/* شريط التقدّم: لا يدفع المحتوى */
.cc-progress { margin: 2px 0; }
.cc-progress-track { flex: 1; max-width: 260px; height: 5px; background: var(--slate-100); border-radius: 999px; overflow: hidden; }

/* الشارات داخل الصف: مقاس موحّد */
.cc-item .badge { font-size: var(--fs-micro); padding: 3px 9px; }


/* ════════════════════════════════════════════════════════════════
   الاستهداف اليدوي: قائمة محدَّدة + مطابقة عناوين
   ════════════════════════════════════════════════════════════════ */
.tgt-block {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 15px; margin-top: 12px; background: var(--card);
}
.tgt-block:first-child { margin-top: 0; }
.tgt-block-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.tgt-block-title { margin: 0; font-size: var(--fs-text); font-weight: 700; }
.tgt-count {
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: 20px; padding: 3px 11px; font-size: var(--fs-meta); font-weight: 700;
}
/* الصفوف: محاذاة واحدة، بلا scroll داخلي — الترقيم يتكفّل */
.tgt-list { display: flex; flex-direction: column; }
.tgt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--slate-100);
  font-size: var(--fs-text);
}
.tgt-row:last-child { border-bottom: none; }
.tgt-row-num { color: var(--muted); font-size: var(--fs-meta); min-width: 26px; }
.tgt-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgt-row-x {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-body); padding: 2px 6px; border-radius: 6px;
}
.tgt-row-x:hover { color: var(--danger); background: var(--danger-bg); }
/* الترقيم */
.tgt-pager {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.tgt-pager:empty { display: none; }
.tgt-pager-info { font-size: var(--fs-meta); color: var(--muted); }
.tgt-empty {
  padding: 18px 12px; text-align: center; color: var(--muted);
  font-size: var(--fs-meta); border: 1px dashed var(--border); border-radius: 9px;
}
/* نتائج المطابقة */
.tgt-match {
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 9px;
}
.tgt-match-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tgt-match-term { font-size: var(--fs-meta); font-weight: 600; }
.tgt-match-ok    { border-color: rgba(5,150,105,.25); }
.tgt-match-multi { border-color: rgba(217,119,6,.25); }
.tgt-match-none  { border-color: var(--border); background: var(--slate-50); }
.tgt-match-err   { border-color: rgba(220,38,38,.25); }

/* بانر معاينة الدورة القادمة في «مراجعة القادم» */
.ur-preview-note {
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 10px;
  font-size: var(--fs-meta); line-height: 1.7;
}
.ur-preview-note .muted { display: block; margin-top: 4px; }

/* عرض عناوين الأولوية اليومية — نفس نمط «عرض عناوين المقالات» بالاستهداف */
.dp-details { margin-top: 8px; }
.dp-summary {
  cursor: pointer; font-size: var(--fs-meta); font-weight: 600;
  color: var(--brand); padding: 3px 0; list-style: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.dp-summary::before { content: '▸'; transition: transform .14s; }
.dp-details[open] .dp-summary::before { transform: rotate(90deg); }
.dp-summary::-webkit-details-marker { display: none; }
.dp-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-meta);
}
.dp-row:last-child { border-bottom: none; }
.dp-num { color: var(--muted); font-size: var(--fs-micro); min-width: 20px; }
.dp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row .badge { font-size: var(--fs-micro); padding: 2px 8px; flex-shrink: 0; }

/* ── تاريخ الموقع ── */
.hist-cycle {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 9px; background: var(--card);
}
.hist-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.hist-num { font-weight: 700; font-size: var(--fs-text); }
.hist-span, .hist-mode { font-size: var(--fs-meta); color: var(--muted); }
.hist-mode { margin-inline-start: auto; }
.hist-stats { font-size: var(--fs-meta); color: var(--muted); line-height: 1.7; }
.hist-details { margin-top: 8px; }
.hist-art {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-meta);
}
.hist-art:last-child { border-bottom: none; }
.hist-time { font-size: var(--fs-micro); color: var(--muted); margin-inline-start: auto; }
.hist-changes, .hist-err {
  flex-basis: 100%; font-size: var(--fs-meta); padding-inline-start: 28px;
}
.hist-changes { color: var(--muted); }
.hist-err { color: var(--danger); }

/* ── تحسين قوائم المقالات: بطاقات لا نقاط نصية ── */
.tgt-row, .dp-row, .hist-art {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.tgt-row:hover, .dp-row:hover, .hist-art:hover { background: var(--slate-50); }
.tgt-row-title, .dp-title { font-weight: 500; }
.tgt-row-num, .dp-num {
  background: var(--slate-100); color: var(--muted);
  border-radius: 6px; padding: 2px 7px;
  font-size: var(--fs-micro); font-weight: 700; min-width: 24px; text-align: center;
}
.tgt-list, .dp-titles { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dp-titles { margin-top: 7px; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 9px; }

/* ── مركز الدورات: تسلسل بصري أوضح ── */
.cc-statbar { margin-bottom: 20px; }
.cc-item-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body); font-weight: 600; margin-bottom: 5px; margin: 0; line-height: 1.5; }
.cc-item-meta { font-size: var(--fs-meta); color: var(--muted); line-height: 1.6; margin: 0; }
@media (max-width: 640px) {
  .cc-statbar { grid-template-columns: repeat(2, 1fr); }
  .cc-stat-num { font-size: var(--fs-stat); }
}

/* ⑫ بطاقات مركز الدورات — ثلاث طبقات لا نص متراص */
.cc-stat-desc { font-size: var(--fs-micro); color: var(--muted); margin-top: 4px; line-height: 1.4; }
.cc-stat-lbl { font-size: var(--fs-meta); color: var(--text); margin-top: 7px; line-height: 1.4; display: flex; align-items: center; font-weight: 600; margin: 0 0 6px; }
.cc-stat-num { font-size: var(--fs-stat-lg); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

/* ⑬ التجهيز ≠ المعالجة */
.cc-prep {
  background: var(--brand-light); border-radius: 9px;
  padding: 11px 13px; margin: 6px 0;
}
.cc-prep-title { font-size: var(--fs-text); font-weight: 700; color: var(--brand-dark); }
.cc-prep-desc { font-size: var(--fs-meta); color: var(--brand-dark); margin-top: 4px; line-height: 1.7; }
.cc-prep-bar {
  height: 4px; background: rgba(255,255,255,.6);
  border-radius: 999px; overflow: hidden; margin-top: 9px;
}
.cc-prep-fill {
  height: 100%; width: 35%; background: var(--brand); border-radius: 999px;
  animation: prepSlide 1.4s ease-in-out infinite;
}
@keyframes prepSlide {
  0%   { margin-inline-start: 0;    width: 25%; }
  50%  { margin-inline-start: 45%;  width: 40%; }
  100% { margin-inline-start: 100%; width: 15%; }
}

/* ⑳ حالة الدورات في الرئيسية */
.dash-cy-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.dash-cy {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 15px; background: var(--card);
  transition: border-color .14s;
}
.dash-cy:hover { border-color: var(--slate-300); }
.dash-cy-lbl  { font-size: var(--fs-meta); font-weight: 600; }
.dash-cy-num  { font-size: var(--fs-stat-lg); font-weight: 700; line-height: 1.1; margin: 5px 0 4px; }
.dash-cy-desc { font-size: var(--fs-micro); color: var(--muted); line-height: 1.4; }
.dash-cy-ok   .dash-cy-num { color: var(--success); }
.dash-cy-info .dash-cy-num { color: var(--brand); }
.dash-cy-idle .dash-cy-num { color: var(--muted); }

/* ㉑ الطبقات الثلاث منفصلة بصرياً */
.dash-layers {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--border);
}
.dash-layer {
  font-size: var(--fs-meta); color: var(--muted);
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
}
.dash-layer b { color: var(--text); }


/* ════════════════════════════════════════════════════════════════
   ⑧⑨⑩ صف المقالة الموحَّد — مصدر تصميم واحد لكل الشاشات
   ════════════════════════════════════════════════════════════════ */
.art-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-text);
  transition: background .12s;
}
.art-row:last-child { border-bottom: none; }
.art-row:hover { background: var(--slate-50); }
.art-row-muted { opacity: .72; }
.art-row-num {
  flex-shrink: 0; min-width: 26px; text-align: center;
  background: var(--slate-100); color: var(--muted);
  border-radius: 6px; padding: 2px 6px;
  font-size: var(--fs-micro); font-weight: 700;
}
.art-row-title {
  flex: 1; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-row-badges { display: flex; gap: 5px; flex-shrink: 0; }
.art-row-badges .badge { font-size: var(--fs-micro); padding: 3px 9px; }
.art-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ⑨ زر المعاينة الموحَّد — شكل واحد في كل النظام */
.art-preview-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--muted);
  font-family: inherit; font-size: var(--fs-meta); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .14s, color .14s, background .14s;
}
.art-preview-btn:hover {
  border-color: var(--brand); color: var(--brand); background: var(--brand-light);
}
.art-row-x {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-body); padding: 3px 7px; border-radius: 6px;
  line-height: 1;
}
.art-row-x:hover { color: var(--danger); background: var(--danger-bg); }

/* الحاويات: إطار واحد يلفّ الصفوف */
.dp-titles, .tgt-list { padding: 0; overflow: hidden; }

/* ⑱ شاشات صغيرة: الصف يلتفّ بلا ضغط */
/* D4-5b: دُمجت 720px في 700px — فارق 20px · صفر تداخل في المحدِّدات */
@media (max-width: 700px) {
  .art-row { flex-wrap: wrap; gap: 7px; }
  .art-row-title { flex-basis: 100%; white-space: normal; }
  .art-row-actions { margin-inline-start: auto; }
  .dash-cy-grid { grid-template-columns: repeat(2, 1fr); }
}

/* R83 · D-1 — الشاشات الضيّقة جداً
   الكتلة عند 700px تلفّ الصفّ وتُعطي العنوان عرضاً كاملاً، لكن مجموعة
   الأزرار تبقى `flex-shrink: 0` بلا لفّ ⇒ خمسة أزرار تتجاوز الحاوية
   أفقياً دون 420px. هذه القاعدة تسمح لها باللفّ وحدها.
   ⚠️ لا تمسّ >420px إطلاقاً — سطح المكتب واللوحي والكتلة القائمة كما هي. */
@media (max-width: 420px) {
  .art-row-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}

/* DESIGN-08: الجدول التفصيلي — مجموعات مقروءة بدل 14 عموداً */
#tab-progress table td { vertical-align: middle; padding: 12px 10px; }
.pt-site { font-weight: 600; font-size: var(--fs-text); }
.pt-bar {
  height: 6px; background: var(--slate-100); border-radius: 999px;
  overflow: hidden; margin-bottom: 5px;
}
.pt-fill { height: 100%; background: var(--success); border-radius: 999px; transition: width .3s; }
/* ══ UI-13 — شريط الدورة المنتهية محايد لا أخضر ═══════════════════
   الأخضر في هذا الجدول يعني «يتقدّم الآن». ودورة انتهت لا تتقدّم —
   فنسبتها **سجلّ** لا حالة. اللون هو ما يفرّق، لا غياب الشريط. */
.pt-bar.is-ended .pt-fill { background: var(--slate-400, #9ca3af); }
.pt-pct.is-ended { color: var(--slate-500, #6b7280); font-weight: 600; }
.pt-pct { font-size: var(--fs-meta); font-weight: 700; }
.pt-nums { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); line-height: 1.5; }
.pt-time { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); line-height: 1.5; }
.pt-err { background: var(--danger-bg); }

/* DESIGN-12: ترويسة الاستهداف */
.tgt-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tgt-hd-main { display: flex; align-items: baseline; gap: 8px; }
.tgt-hd-count { font-size: var(--fs-stat); font-weight: 700; line-height: 1; }
.tgt-hd-lbl { font-size: var(--fs-text); font-weight: 600; }
.tgt-hd-mode { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; margin-bottom: 0; }
.tgt-hd-note {
  margin: 10px 0 0; padding: 9px 12px;
  background: var(--slate-50); border-radius: 8px;
  font-size: var(--fs-meta); line-height: 1.7; color: var(--muted);
}
.tgt-hd-note .muted { display: block; margin-top: 3px; }

/* DESIGN-15: الملاحظة تحت العنوان لا بجانبه */
.art-row { flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   DESIGN-21: RTL · typography · spacing — اتساق عبر النظام
   ════════════════════════════════════════════════════════════════ */
/* الأرقام اللاتينية داخل نص عربي: عزل اتجاهي يمنع انعكاس الترتيب */
.art-row-num, .cc-stat-num, .dash-cy-num,
.tgt-hd-count, .pt-pct, .hist-num {
  unicode-bidi: isolate; direction: ltr;
}
.art-row-title, .pt-site, .dp-title { text-align: start; }
/* مقاسات موحّدة: عنوان قسم · نص · ثانوي */
.cc-section-title, .tgt-block-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.5; }
.muted.small, .art-row-note, .cc-item-meta { font-size: var(--fs-meta); line-height: 1.65; }
/* الشارات: مقاس واحد في كل النظام */
.badge { font-size: var(--fs-micro); padding: 3px 9px; border-radius: 20px; font-weight: 700; }
/* الأزرار الصغيرة: ارتفاع موحّد */
.btn.btn-sm, .art-preview-btn { height: 28px; }

/* R21: ثلاثة تبويبات بعرض متساوٍ — كانت اثنين */
.cc-tabs { display: flex; gap: 0; }
.cc-tab { display: flex; align-items: center; gap: 8px; padding: 11px 18px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-text); font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .14s, border-color .14s; flex: 1 1 0; justify-content: center; }
@media (max-width: 520px) {
  .cc-tab { font-size: var(--fs-meta); padding: 10px 8px; }
  .cc-tab-label { font-size: var(--fs-meta); }
}

/* R21: خانات الأرقام في صفوف المركز — قيمة بارزة + تسمية صريحة.
   كانت سطراً واحداً مضغوطاً: «16,295 مقالة · حصة 7/يوم · آخر دورة: 1» */
.cc-facts { display: flex; gap: 20px; margin: 9px 0 6px; flex-wrap: wrap; }
.cc-fact { min-width: 72px; }
.cc-fact-val {
  font-size: var(--fs-title); font-weight: 700; line-height: 1.2; color: var(--text);
  unicode-bidi: isolate;
}
.cc-fact-unit { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.cc-fact-lbl { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; line-height: 1.4; }
@media (max-width: 520px) {
  .cc-facts { gap: 14px; }
  .cc-fact { min-width: 62px; }
  .cc-fact-val { font-size: var(--fs-body); }
}

/* R21: شريط الأدوات والترقيم على الشاشات الضيقة */
@media (max-width: 640px) {
  .cc-toolbar { flex-wrap: wrap; gap: 8px; }
  .cc-toolbar .field-search { flex: 1 1 100%; min-width: 0; }
  .cc-toolbar .cc-filter { flex: 1 1 auto; }
  .cc-toolbar #ccBulkStartBtn { flex: 1 1 100%; }
  .cc-checkall { flex: 0 0 auto; }
  .pagination-bar { flex-direction: column; gap: 8px; align-items: stretch; }
  .pagination-bar .muted { text-align: center; font-size: var(--fs-meta); }
  .pagination-controls { display: flex; gap: 8px; }
  .pagination-controls .btn { flex: 1 1 0; }
  .cc-item { flex-wrap: wrap; }
  .cc-item-side { flex-basis: 100%; margin-top: 8px; }
}



/* R21 · Loading: placeholder داخل مكان القيمة النهائية وبأبعادها.
   نفس Layout النهائي من أول لحظة — القيم وحدها تتغيّر عند وصول البيانات.
   لا «0» (تعني لا دورات) ولا نص مؤقّت */
@keyframes phShimmer {
  0%   { background-position: 100% 0 }
  100% { background-position: -100% 0 }
}
.ph {
  display: inline-block; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg,
    var(--slate-100) 25%, var(--slate-50) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: phShimmer 1.5s linear infinite;
}
.ph-stat  { width: 40px;  height: 26px; }   /* بحجم .cc-stat-num */
.ph-count { width: 20px;  height: 13px; }   /* بحجم .cc-tab-count */
.ph-fact  { width: 52px;  height: 17px; }   /* بحجم .cc-fact-val */
.ph-name  { width: 150px; height: 15px; }
.ph-btn   { width: 84px;  height: 28px; }
.ph-line  { width: 220px; height: 12px; }
.cc-item-pending { pointer-events: none; }
.cc-stat-pending { cursor: default !important; }
@media (prefers-reduced-motion: reduce) { .ph { animation: none; } }



/* ════════════════════════════════════════════════════════════════
   Phase 10 · نافذة تفاصيل الموقع — كتلة واحدة، صفر تكرار
   ════════════════════════════════════════════════════════════════ */
.sd-modal {
  width: min(1240px, 96vw);
  height: auto;              /* يتبع المحتوى — تبويب قصير بلا فراغ ضخم */
  max-height: 92vh;
  display: flex; flex-direction: column;
  padding: 0;                /* الحشو داخل الأقسام */
  overflow: hidden;          /* التمرير في .sd-body وحدها */
}

.sd-header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 18px 26px 14px; border-bottom: 1px solid var(--border);
}
.sd-header h3 { margin: 0; font-size: var(--fs-title); flex: 1; min-width: 0; }
.sd-close { position: static; flex: 0 0 auto; }

.sd-tabs {
  flex: 0 0 auto; display: flex; gap: 2px; padding: 0 26px;
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
.sd-tab {
  flex: 0 0 auto; background: none; border: none;
  border-bottom: 2px solid transparent; padding: 11px 16px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  font-size: var(--fs-text); font-weight: 600; color: var(--muted);
  transition: color .14s, border-color .14s;
}
.sd-tab:hover  { color: var(--text); }
.sd-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.sd-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 26px; }
.sd-panel { display: none; }
.sd-panel.active { display: block; }

.sd-footer {
  flex: 0 0 auto; display: flex; justify-content: flex-end;
  padding: 14px 26px; border-top: 1px solid var(--border);
  background: var(--card);
}

/* كل مجموعة في حاوية بإطار — فصل بصري لا مسافة فقط */
.sd-group {
  margin-bottom: 18px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card);
}
.sd-group:last-child { margin-bottom: 2px; }
.sd-group-title {
  margin: 0 0 13px; padding-bottom: 9px;
  font-size: var(--fs-meta); font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.sd-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 13px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.sd-group .articles-list { margin: 0; }
.sd-group .cc-empty { margin: 4px 0 0; }

/* بطاقة الدورة داخل مجموعة ⇒ بلا إطار مزدوج */
#sdCycleCard { border: none; padding: 0; background: none; }
.cycle-card-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 18px 22px;
}
.cycle-stat-val { line-height: 1.25; }
.cycle-stat-lbl { margin-top: 3px; }

/* الخريطة الحرارية: خلايا تكبر مع عرض النافذة بدل 15 عموداً ثابتاً */
.sd-group .heatmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 6px; margin-top: 0;
}
.sd-group .heat-cell { aspect-ratio: 1; border-radius: 5px; min-height: 30px; }

@media (max-width: 900px) {
  .sd-modal { width: 97vw; max-height: 94vh; }
}
@media (max-width: 520px) {
  .sd-header, .sd-tabs, .sd-body, .sd-footer { padding-inline: 14px; }
  .sd-header { padding-top: 15px; }
  .sd-tab { padding: 10px 12px; font-size: var(--fs-meta); }
  .sd-body { padding-block: 18px; }
  .sd-group { padding: 13px 14px; margin-bottom: 14px; }
  .sd-group-head { flex-wrap: wrap; }
}

/* الفراغ العمودي: الجسم لا يتمدّد أكثر من محتواه */
.sd-body { flex: 0 1 auto; }
.sd-modal > .sd-body:only-of-type { flex: 1 1 auto; }

/* B4/B6/B7 · Phase 12 — شريط الطبقات والبطاقات */
.dash-layer {
  transition: border-color .14s, background .14s;
}
.dash-layer:hover,
.dash-cy[role="button"]:hover { border-color: var(--brand); }
.dash-layer:focus-visible,
.dash-cy[role="button"]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (max-width: 520px) {
  .dash-layers { flex-direction: column; align-items: stretch; gap: 8px; }
  .dash-layer { text-align: center; font-size: var(--fs-meta); line-height: 1.6; }
  .dash-cy-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-cy { padding: 11px 12px; }
}

/* R32 · Phase 13: زر إنهاء الدورة — إجراء لا رجعة فيه.
   كان في ثلاثة أشكال، أحدها أيقونة ⏹ بنفس فئة زر «إزالة من القائمة».
   نمط واحد: حدّ أحمر يميّزه عن الأزرار العادية بلا صراخ بصري */
.btn-danger-outline {
  background: var(--card); color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-danger-outline:hover { background: var(--danger); color: var(--card); }
.btn-danger-outline:focus-visible {
  outline: 2px solid var(--danger); outline-offset: 2px;
}
.btn-xs { padding: 4px 9px; font-size: var(--fs-meta); white-space: nowrap; }

/* R47 · عمود الإجراء في جدول متابعة الدورات
   كان width:34px يكفي أيقونة ⏹ · Phase 13 استبدلها بزر نصّي ~90px */
.pt-action-col  { width: 116px; }
/* ══ R215 — عمود الإجراء: ثلاثة أزرار لا واحد ═══════════════════
   🔴 كان `nowrap` مع `width:100%` لكل زرّ ⇒ الثلاثة في صفّ واحد يمدّدون
      الجدول، فيخرج «إنهاء الدورة» خارج الشاشة ويحتاج تمريراً أفقياً
      للوصول إليه — وهو الإجراء الأهمّ في العمود.
   ⇒ تكديس رأسيّ: العمود ضيّق والأزرار تحت بعضها، فلا تمدّد ولا تمرير. */
.pt-action-cell { text-align: start; }
.pt-action-cell .btn {
  display: block; width: 100%; max-width: 132px; margin-bottom: 4px;
  white-space: nowrap;
}
.pt-action-cell .btn:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  /* الجدول يمرَّر أفقياً في .table-wrap — العمود يبقى بعرضه ولا ينضغط */
  .pt-action-col  { width: 104px; }
  .pt-action-cell .btn { max-width: 96px; font-size: var(--fs-micro); padding: 4px 6px; }
}

/* R52 v3: الترتيب بالتخطيط لا بالنص. <bdi> عزلت الاتجاه الداخلي لكنها
   تُعامَل ككائن محايد، فبقي ترتيب الكتل رهن خوارزمية bidi على محايدات.
   flex + direction صريحة تُخرج الترتيب من الخوارزمية نهائياً: ترتيب
   العناصر = ترتيب DOM مهما كان السياق الموروث. */
.art-row-note { font-size: var(--fs-meta); color: var(--muted); flex-shrink: 0; flex-basis: 100%; padding-inline-start: 36px; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: baseline; direction: rtl; gap: 0; }
.art-row-note > bdi     { unicode-bidi: isolate; flex: 0 0 auto; white-space: nowrap; }
.art-row-note > .nt-sep { color: var(--border); padding: 0 6px; flex: 0 0 auto; }

/* R59: شارة الاستهداف في صف متابعة الدورات — طبقة مستقلة عن الدورة،
   لهذا لونها محايد ولا تُخلط بأرقام التقدّم */
.pt-tgt-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: var(--fs-micro); color: var(--muted);
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px;
  /* R59-C: صارت <button> — نضبط ما يرثه من المتصفح ولا تضبطه القاعدة */
  font-family: inherit; cursor: pointer; line-height: 1.6;
}
.pt-tgt-badge:hover { background: var(--slate-100, var(--slate-50)); color: var(--text); }
/* R77: طبقة الأولوية — لون مميّز يفصلها بصرياً عن الاستهداف وأرقام الدورة */
.pt-prio-badge {
  display: inline-flex; align-items: center; margin: 3px 0 0 4px;
  font-size: var(--fs-micro); color: var(--warn, var(--warn-700));
  background: var(--warn-50); border: 1px solid #fde68a;
  border-radius: 5px; padding: 1px 6px;
  font-family: inherit; cursor: pointer; line-height: 1.6;
}
.pt-prio-badge:hover { background: var(--warn-100); }
/* A1-fix: تفصيل «المفحوص» كان يلتفّ بجوار الرقم فيبدو الوسم منفصلاً عن
   قيمته (قُرئ «المفحوص = 0» بينما 0 هي «المتبقّي») — سطر مستقل تحته */
.cycle-done-breakdown {
  display: block; font-size: var(--fs-micro); font-weight: 400;
  color: var(--muted); line-height: 1.5; margin-top: 1px;
  white-space: nowrap;
}
.pt-tgt-badge svg { width: 10px; height: 10px; }

/* D4-5b: احترام تفضيل تقليل الحركة — التصميم الطبيعي بلا تغيير لمن لا يطلبه */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* D4-5b: نص مرئي لقارئ الشاشة فقط */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD DNA — لغة بصرية واحدة
   السبب الجذري المُقاس: كل مكوّن كان يعرّف قيمه بنفسه، فاختلفت:
     radius   12px (.card) · 10px (.dash-cy · .cc-item) · 20px (.dash-layer)
     padding  20/22 (.card) · 18 (.stat-card) · 14/15 (.dash-cy) · 14/16 (.cc-item)
     رأس القسم  h3 = fs-title/700  مقابل  .cc-section-title = fs-body/800
   ⇒ العلاج **بدائل مشتركة** لا CSS خاص لكل صندوق.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --surface-radius: 12px;   /* السطح الخارجي — بطاقة القسم */
  --tile-radius:    10px;   /* البلاطة الداخلية — تدرّج مقصود لا تنافر */
  --surface-pad:    18px 20px;
  --tile-pad:       14px 16px;
}

/* ① رأس القسم — مصدر واحد. كان h3 و.cc-section-title لغتين لمفهوم واحد. */
.card > h3,
.pipeline-card > h3,
.cc-section-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  line-height: 1.3;
}
.cc-section-head { margin-bottom: 14px; }
.cc-section-head .cc-section-title { margin-bottom: 0; }

/* ② السطح الخارجي — قيمة واحدة */
.card, .pipeline-card, .stat-card {
  border-radius: var(--surface-radius);
  padding: var(--surface-pad);
}

/* ③ البلاطة الداخلية — قيمة واحدة */
.dash-cy, .cc-item, .pipeline-stage, .cycle-card {
  border-radius: var(--tile-radius);
  padding: var(--tile-pad);
}

/* ④ تدرّج الأرقام — مستويان لا ثلاثة.
   .pipeline-num كان fs-stat بينما نظراؤه fs-stat-lg. */
.dash-cy-num, .pipeline-num, .stat-card .num, .cc-stat-num {
  font-size: var(--fs-stat-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ⑤ التسمية تحت الرقم — كانت موحَّدة أصلاً (fs-meta/600)؛ نثبّتها. */
.dash-cy-lbl, .pipeline-label, .stat-card .label, .cc-stat-lbl {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1px;
}

/* ⑥ شريط الإجراء — رفيع، بلا بطاقة، بلا فراغ علوي زائد */
.dash-actionbar {
  display: flex; justify-content: flex-start; gap: 8px;
  margin: -4px 0 12px;
}


/* ════════════════════════════════════════════════════════════════════
   DASHBOARD DNA — واجهة نظام واحدة
   ────────────────────────────────────────────────────────────────────
   الملاحظة التي فرضت هذا القسم: «حالة الدورات» كانت تبدو مكوّناً من
   نظام تصميم آخر. الفحص أثبت أن السبب ليس القسم نفسه بل غياب مصدر
   موحَّد: ثلاث لغات لرأس القسم (h3 عارٍ · cc-section-head بخط سفلي ·
   لا رأس إطلاقاً فوق شبكة المؤشرات)، وأربع لغات للتحميل (skeleton-line ·
   ph · «—» · لا شيء)، وثلاث معالجات للبلاطة.
   الحل مصدر واحد لكل مفهوم — لا CSS خاصاً بأي قسم بعينه.
   ════════════════════════════════════════════════════════════════════ */

/* ① رأس القسم — مصدر واحد لكل أقسام الرئيسية.
   بلا خط سفلي: حدّ البطاقة يفصل أصلاً، والخط كان يخصّ قسماً واحداً
   فيجعله يبدو من مكتبة أخرى. المحاذاة baseline ليستقرّ العنوان
   والملاحظة على خطّ قاعدة واحد مهما اختلف حجمهما. */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 14px; padding: 0; border: 0;
}
.sec-title {
  font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em;
  margin: 0; line-height: 1.3; color: var(--text);
}
.sec-note {
  font-size: var(--fs-meta); font-weight: 500; color: var(--muted);
  white-space: nowrap;
}
.sec-link { color: var(--brand); font-weight: 600; text-decoration: none; }
.sec-link:hover { text-decoration: underline; }

/* ② لغة تحميل واحدة على مستوى اللوحة كاملة.
   كانت .skeleton-line و.ph متدرّجين مختلفين بسرعتين مختلفتين — يظهران
   في نفس الشاشة معاً فيبدوان مكوّنين من مصدرين. الآن تدرّج واحد،
   توقيت واحد، انحناء واحد؛ ويبقى الاختلاف في الأبعاد فقط لأن كل
   عنصر نائب يأخذ أبعاد القيمة النهائية مكانها بالضبط. */
@keyframes sk-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
/* التدرّج على --slate-200/--slate-100 لا 100/50: النائب يقع الآن داخل
   بلاطات خلفيتها --slate-50، فالتدرّج القديم كان يذوب فيها ويكاد لا
   يُرى — ظهر ذلك في لقطة حالة التحميل. */
.sk, .skeleton-line, .ph {
  background: linear-gradient(90deg,
    var(--slate-200) 25%, var(--slate-100) 50%, var(--slate-200) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.sk { display: block; }
.ph { display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .sk, .skeleton-line, .ph { animation: none; } }

/* هندسة النائب = هندسة القيمة النهائية، فلا يقفز التخطيط عند وصول البيانات */
.sk-lbl  { width: 62%;  height: 13px; }
.sk-num  { width: 46px; height: 30px; margin: 7px 0 6px; }
.sk-desc { width: 84%;  height: 11px; }
.sk-row  { width: 100%; height: 44px; border-radius: var(--tile-radius); margin-bottom: 8px; }
.sk-row:last-child { margin-bottom: 0; }
.sk-cell { height: 13px; width: 70%; }

/* ③ البلاطة — معالجة واحدة داخل كل أقسام الرئيسية.
   كانت pipeline-stage رمادية، وdash-cy بيضاء، وstat-card بطاقة مستقلة
   بظلّ خاص تطفو بلا رأس قسم فوقها. الثلاثة الآن بلاطة واحدة. */
#tab-dashboard .dash-cy,
#tab-dashboard .pipeline-stage,
#tab-dashboard .stat-card {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  padding: var(--tile-pad);
  box-shadow: none;
  text-align: start;
  transition: border-color var(--ease-normal), background var(--ease-normal);
}
#tab-dashboard .pipeline-stage.highlight {
  background: var(--brand-light); border-color: var(--brand);
}
#tab-dashboard .stat-card:hover,
#tab-dashboard .dash-cy[role="button"]:hover,
#tab-dashboard .stat-card-clickable:hover {
  transform: none; box-shadow: none; border-color: var(--brand);
}

/* بنية البلاطة موحَّدة: تسمية ← رقم ← تفصيل. كانت stat-card تعكسها
   (رقم ثم تسمية) فتُقرأ بترتيب مخالف لجارتها في نفس الشاشة. */
#tab-dashboard .stat-head { display: flex; align-items: center; gap: 8px; }
#tab-dashboard .stat-card .label,
#tab-dashboard .pipeline-label,
#tab-dashboard .dash-cy-lbl {
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
  margin: 0; letter-spacing: 0.1px;
}
#tab-dashboard .stat-card .num,
#tab-dashboard .pipeline-num,
#tab-dashboard .dash-cy-num {
  font-size: var(--fs-stat-lg); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin: 7px 0 0;
}
#tab-dashboard .stat-icon { width: 26px; height: 26px; border-radius: 7px; margin: 0; flex-shrink: 0; }
#tab-dashboard .stat-icon svg { width: 15px; height: 15px; }

/* ④ كثافة واحدة: نفس الفجوة بين البلاطات في الأقسام الثلاثة */
#tab-dashboard .stats-grid,
#tab-dashboard .dash-cy-grid,
#tab-dashboard .pipeline { gap: 10px; margin-bottom: 0; }
#tab-dashboard .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#tab-dashboard .dash-layers { margin-top: 12px; }

/* ⑤ لا فراغ علوي غير مبرَّر: القسم الأول يلامس الترويسة مباشرة.
   شريط الإجراء المنفصل (.dash-actionbar) أُلغي — الإجراء انتقل إلى
   صفّ إجراءات الترويسة، وهو موضعه الصحيح. */
#tab-dashboard > .card:first-child,
#tab-dashboard > .two-col:first-child { margin-top: 0; }
.dash-actionbar { display: none !important; }

/* الإجراء الأساسي في الترويسة: واضح، وبلا منافسة للمحتوى التشغيلي */
#btnAddSiteTop { white-space: nowrap; }

/* ⑥ توازن المساحات: بطاقتا الصف الأوسط كانتا تتمدّدان لنفس الارتفاع
   (سلوك grid الافتراضي stretch)، فتترك الأقصر فراغاً ميتاً بأسفلها —
   ظاهر بوضوح في «الأكثر تحديثاً اليوم». كل بطاقة الآن بارتفاع محتواها. */
#tab-dashboard .two-col { align-items: start; gap: 16px; margin-bottom: 16px; }
#tab-dashboard > .card { margin-bottom: 16px; }
#tab-dashboard > .card:last-child { margin-bottom: 0; }

/* ⑦ الشاشات الضيّقة: عند التكديس العمودي كانت مراحل خطّ السير تبقى
   بعرض محتواها في وسط البطاقة (flex:1 لا يمدّ في اتجاه العمود)، فتبدو
   عائمة. وسهم التسلسل كان يدور +90° فيصير ↑ — عكس اتجاه القراءة
   الفعلي من أعلى لأسفل. */
@media (max-width: 900px) {
  #tab-dashboard .pipeline { align-items: stretch; }
  #tab-dashboard .pipeline-stage { width: 100%; }
  #tab-dashboard .pipeline-arrow { transform: rotate(-90deg); text-align: center; }
}

/* «مكتملة» سياق لا بلاطة: سطر واحد أسفل بلاطات الحالة الجارية، بنفس
   لغة .dash-layers (شريحة رفيعة على حدّ علوي) — فلا يبدو مكوّناً جديداً. */
.dash-done-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: var(--fs-meta);
}
.dash-done-line a { color: var(--brand); font-weight: 700; text-decoration: none; }
.dash-done-line a:hover { text-decoration: underline; }

/* رابط «التشغيل» في الترويسة: إشارة لا زرّ — لئلا يبدو فعلاً مساوياً
   لـ«إضافة موقع». الأزرار التقنية نفسها انتقلت إلى الإعدادات › التشغيل. */
.ops-link {
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
  white-space: nowrap; transition: color var(--ease-normal), background var(--ease-normal);
}
.ops-link:hover { color: var(--brand); background: var(--brand-light); }
#subtab-ops .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
#subtab-ops .stat-card {
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--tile-radius); padding: var(--tile-pad); box-shadow: none;
}
#subtab-ops .stat-card .num { font-size: var(--fs-stat); font-weight: 800; margin-top: 7px; }
#subtab-ops .stat-head { display: flex; align-items: center; gap: 8px; }
#subtab-ops .stat-icon { width: 26px; height: 26px; border-radius: 7px; margin: 0; flex-shrink: 0; }

/* «المحتوى المفهرس» — سطر مضغوط لا ثلاث بطاقات */
.sd-indexed {
  margin: 0 0 12px; padding: 9px 12px;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  font-size: var(--fs-text); font-weight: 600; color: var(--text);
}

/* 🔴 لوحة الإشعارات كانت width:380px ثابتاً مع left:0 — على شاشة 430px
   تخرج خارج الـviewport وتُحدث تمريراً أفقياً للصفحة كاملةً (مُثبَت
   بلقطة على 430px). على الجوال: عرض الشاشة ناقص هامش، ومثبَّتة أسفل
   الترويسة بدل تعليقها على زرّ الجرس. */
@media (max-width: 600px) {
  .notif-panel {
    position: fixed;
    top: 64px;
    inset-inline: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    border-radius: 14px;
  }
}
/* حتى على الشاشات الأوسع: لا تتجاوز حدّ النافذة */
.notif-panel { max-width: calc(100vw - 24px); }

/* 🔴 شريط تبويبات الإعدادات صار سبعة (بعد إضافة «التشغيل») فيفيض على
   430px ويُحدث تمريراً أفقياً للصفحة كاملةً — مُثبَت بالقياس.
   التمرير يُحصر في الشريط نفسه (وهو نمط تبويبات مقبول ومقصود، لا
   يشبه table-scroll الذي أزلناه: ذاك كان يُخفي صفوف بيانات). */
@media (max-width: 700px) {
  .sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding-bottom: 2px;
  }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tabs .sub-tab-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════════════
   TAB DNA — عائلة واحدة لكل التبويبات
   القياس أثبت ثلاث لغات لمفهوم واحد:
     .sub-tab-btn / .edit-subtab-btn → خط سفلي + brand
     .cc-tab                         → خلفية brand-light (وثلاث قواعد
                                        padding متضاربة: 2/9 · 11/18 · 10/8)
     .notif-filter-tab               → بطاقة بيضاء بظلّ (وثلاث قواعد أيضاً)
   المستخدم يرى «تبويب» في أربع شاشات بأربعة أشكال. الآن: نشاط واحد
   (خط سفلي + brand)، وإيقاع واحد، ومقاسان فقط — رئيسي وفرعي.
   ════════════════════════════════════════════════════════════════════ */
.sub-tabs, .cc-tabs, .notif-filters {
  display: flex; gap: 2px; align-items: stretch;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
.sub-tabs::-webkit-scrollbar, .cc-tabs::-webkit-scrollbar,
.notif-filters::-webkit-scrollbar { display: none; }

.sub-tab-btn, .edit-subtab-btn, .cc-tab, .notif-filter-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: var(--fs-text); font-weight: 600;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--ease-normal), border-color var(--ease-normal);
}
.notif-filter-tab { padding: 8px 12px; font-size: var(--fs-meta); }

.sub-tab-btn:hover, .edit-subtab-btn:hover,
.cc-tab:hover, .notif-filter-tab:hover { color: var(--text); }

.sub-tab-btn.active, .edit-subtab-btn.active,
.cc-tab.active, .notif-filter-tab.active {
  color: var(--brand); border-bottom-color: var(--brand);
  background: none; box-shadow: none; font-weight: 700;
}
/* عدّاد التبويب — شارة واحدة لكل العائلة */
.cc-tab-count, .notif-tab-count {
  font-size: var(--fs-micro); font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
  background: var(--slate-100); color: var(--muted);
}
.cc-tab.active .cc-tab-count, .notif-filter-tab.active .notif-tab-count {
  background: var(--brand-light); color: var(--brand-dark);
}

/* كثافة تفاصيل الموقع: كانت أربع مجموعات ببطاقات كبيرة متباعدة تفرض
   تمريراً طويلاً لقراءة أرقام قصيرة. الشبكة أضيق والبطاقة أخفّ —
   نفس المعلومات بنصف الارتفاع تقريباً. */
.sd-group { margin-bottom: 14px; }
.sd-group-title { font-size: var(--fs-meta); font-weight: 700; color: var(--muted);
  margin: 0 0 8px; letter-spacing: .2px; }
.detail-grid { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.detail-stat { padding: 10px 12px; border-radius: var(--tile-radius);
  background: var(--slate-50); border: 1px solid var(--border); }
.detail-stat .num { font-size: var(--fs-lg); font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; }
.detail-stat .label { font-size: var(--fs-micro); font-weight: 600;
  color: var(--muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════
   ARTICLE ROW — كثافة الجوال
   القياس: 149px لكل صف على 430px ⇒ عشرون صفاً = تمرير ~3000px لقراءة
   صفحة واحدة. والصف نفسه يحمل خمسة إجراءات بنفس الوزن البصري للعنوان،
   فيصير الفعل هو المسيطر بدل المحتوى.
   الحل بلا لمس أي منطق: العنوان يتقدّم بصرياً، والميتا تنكمش، والإجراءات
   تصير صفّاً واحداً مضغوطاً أسفل البطاقة.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .article-row { padding: 10px 12px; gap: 6px; }
  .article-row > div { gap: 8px; }
  /* العنوان أولاً وأوضح — كان بنفس وزن سطر الموقع */
  .article-row strong {
    display: block;
    font-size: var(--fs-text); font-weight: 700; line-height: 1.45;
    margin: 2px 0 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .article-site-label { font-size: var(--fs-micro); opacity: .75; }
  .article-site-label svg { width: 12px; height: 12px; }
  .article-meta-chips { gap: 4px; margin: 0; }
  .article-meta-date { font-size: var(--fs-micro); margin-top: 3px; }
  /* الإجراءات: صفّ واحد مضغوط، لا خمسة أزرار بحجم كامل */
  .article-row .btn,
  .article-row .btn-sm {
    padding: 4px 9px; font-size: var(--fs-micro); border-radius: 7px;
  }
  .article-row input[type="checkbox"] { margin-top: 3px; }
}

/* القياس: 84px محتوى + 28px صفّ إجراءات + حشو. الإجراءات الخمسة تأخذ
   صفّاً كاملاً بارتفاع 28px وتُزاحم المحتوى بصرياً. على الجوال تصير
   شريطاً رفيعاً بمحاذاة النهاية — أصغر وزناً من العنوان بوضوح. */
@media (max-width: 700px) {
  .article-row .article-actions {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: flex-end; margin-top: 6px;
  }
  .article-row .article-actions .btn,
  .article-row .art-preview-btn {
    height: 24px; min-height: 24px; padding: 0 8px;
    font-size: var(--fs-micro); line-height: 22px; border-radius: 6px;
  }
  .article-row .art-preview-btn svg { width: 12px; height: 12px; }
  /* سطر الموقع + التاريخ في سطر واحد بدل سطرين */
  .article-row .article-meta-date { display: inline; margin-inline-start: 6px; }
  .article-row .article-meta-chips { display: inline-flex; vertical-align: middle; }
}

/* 🔴 جدول اليوم على الجوال: عمود «تمّ» كان يعرض «/6» بدل «0/6» — الرقم
   الأول مقصوص لأن الخلية تضيق تحت ضغط عمود اسم الموقع. مُثبَت بلقطة.
   الأرقام لا تُكسَر ولا تُقصّ، والاسم هو من يلتفّ. */
@media (max-width: 700px) {
  #todayScheduleList td, #todayScheduleList th { padding: 9px 6px; }
  /* أعمدة الأرقام والحالة: عرض محتواها كاملاً بلا قصّ */
  #todayScheduleList td:nth-child(3),
  #todayScheduleList td:nth-child(4),
  #todayScheduleList td:nth-child(5),
  #todayScheduleList th:nth-child(3),
  #todayScheduleList th:nth-child(4),
  #todayScheduleList th:nth-child(5) {
    white-space: nowrap; width: 1%; text-align: center;
  }
  /* اسم الموقع يأخذ الباقي ويلتفّ هو */
  #todayScheduleList td:nth-child(2) { width: auto; word-break: break-word; }
  #todayScheduleList table { table-layout: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   R83d — نظام بطاقات مركز الدورات (بطاقة واحدة · أربعة تبويبات)
   يستبدل .cc-item بأربع بِنى مختلفة. الهدف: تسلسل بصري واحد
   (اسم ← حالة ← تقدّم ← حقائق ← إجراء)، كثافة رأسية أعلى، وصفر
   فراغ غير مبرَّر. لا يمسّ أي مكوّن خارج مركز الدورات.
   ═══════════════════════════════════════════════════════════════════ */
.cc-card {
  display: flex; align-items: stretch; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px;          /* كان 14px 16px */
  transition: border-color .14s, box-shadow .14s;
}
.cc-card + .cc-card { margin-top: 7px; }            /* تباعد محكوم */
.cc-card:hover { border-color: var(--slate-300); }
.cc-card--muted { background: var(--slate-50); }
.cc-card--muted .cc-card__title { color: var(--muted); }

.cc-card__pick { margin: 0; display: flex; align-items: center; }
.cc-card__pick input { width: auto; margin: 0; cursor: pointer; }

.cc-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* ① الاسم والحالة في سطر واحد — الحالة لصيقة بالاسم لا معزولة يميناً */
.cc-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.cc-card__title { font-weight: 650; font-size: var(--fs-text); line-height: 1.3; }
.cc-card__cycle {
  font-size: var(--fs-meta); color: var(--muted);
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}

/* ② التقدّم مباشرةً تحت الحالة */
.cc-card__progress { display: flex; align-items: center; gap: 9px; }
.cc-card__bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--slate-100); overflow: hidden; }
.cc-card__bar-fill { height: 100%; background: var(--brand, #2563eb); transition: width .4s; }
.cc-card__pct { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: end; }

/* ③ الحقائق سطر مضغوط — كانت شبكة بأعمدة عريضة تُنتج فراغاً كبيراً */
.cc-card__facts { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cc-card__fact { display: flex; align-items: baseline; gap: 5px; }
.cc-card__fact-val { font-weight: 650; font-size: var(--fs-text); font-variant-numeric: tabular-nums; }
.cc-card__fact-unit { font-weight: 400; font-size: var(--fs-meta); color: var(--muted); }
.cc-card__fact-lbl { font-size: var(--fs-meta); color: var(--muted); }

.cc-card__meta { font-size: var(--fs-meta); color: var(--muted); }
.cc-card__prep { font-size: var(--fs-meta); color: var(--muted); line-height: 1.55; }
.cc-card__prep-bar { height: 4px; border-radius: 2px; background: var(--slate-100); overflow: hidden; margin-top: 6px; }
.cc-card__prep-fill { height: 100%; width: 38%; background: var(--brand, #2563eb); animation: ccPrep 1.5s ease-in-out infinite; }
@keyframes ccPrep { 0% { margin-inline-start: -38%; } 100% { margin-inline-start: 100%; } }

/* ④ الإجراء: الأساسي أولاً، ومحاذاة رأسية للوسط مهما طال الجسم */
.cc-card__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; align-self: center; }
.cc-card__actions .btn { height: 32px; padding: 0 13px; white-space: nowrap; }
/* R82h · B — منطقة الفعل بوزن بصري واحد في الحالات الأربع.
   في اللقطة الميدانية بدت بطاقة «مكتملة» أضعف: سبب المنع كان نصّاً
   رمادياً سائباً حيث يقف زرّ في البطاقات الأخرى، فاختلّ ثقل الصفّ.
   الآن رقاقة لها إطار وارتفاع الزرّ نفسه ⇒ الصفّ متّزن مهما كانت
   الحالة، بلا اختلاق زرّ لا معنى له. */
.cc-card__blocked {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 11px; border-radius: 8px;
  border: 1px dashed var(--border); background: var(--slate-50);
  font-size: var(--fs-meta); color: var(--muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* responsive: الإجراء ينتقل تحت الجسم بعرض كامل بدل أن ينضغط */
@media (max-width: 720px) {
  .cc-card { flex-wrap: wrap; }
  .cc-card__actions { width: 100%; justify-content: flex-end; align-self: auto; padding-top: 2px; }
  .cc-card__blocked { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   R82h · B — اتساق الحالات الأربع
   البطاقات تشترك في نفس مقياس النصوص والأوزان والمحاذاة؛ الحالة وحدها
   تختلف. هذه القواعد تمنع انزلاق أي حالة إلى «مكوّن آخر».
   ═══════════════════════════════════════════════════════════════════ */
/* اسم طويل لا يكسر الصفّ ولا يزيح الحالة */
.cc-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }
/* أرقام كبيرة (51,613) لا تُقصّ ولا تلتفّ */
.cc-card__fact-val { white-space: nowrap; }
/* الشارات بنفس الارتفاع في كل الحالات — لا شارة أضخم من أخرى */
.cc-card__head .badge { line-height: 1.6; }
/* الجسم لا ينضغط تحت زرّين طويلين */
.cc-card__body { flex: 1 1 auto; }
/* أدنى ارتفاع موحّد يمنع بطاقة «مكتملة» من الظهور أنحف — بلا حشو مصطنع */
.cc-card { min-height: 62px; }

@media (max-width: 1024px) {
  .cc-card__facts { gap: 5px 14px; }
  .cc-card__title { max-width: 28ch; }
}
@media (max-width: 720px) {
  .cc-card { padding: 11px 12px; }
  .cc-card__title { max-width: 100%; white-space: normal; }
  .cc-card__actions .btn { flex: 1 1 auto; }   /* أزرار بعرض متساوٍ */
  .cc-card__blocked { max-width: 100%; white-space: normal; height: auto; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   R82h · C — نافذة «إضافة موقع جديد»
   كانت 440px بحشوة 26px وسكرول داخلي طويل، بينما سطح المكتب فارغ حولها:
   سبعة حقول داخل صندوق ضيّق. النافذة نفسها (.modal) تخدم نوافذ كثيرة،
   فلا نغيّرها — نضيف صنفاً مخصّصاً يُطبَّق على هذه النافذة وحدها.
   ═══════════════════════════════════════════════════════════════════ */
.modal.form-wide {
  width: min(880px, calc(100vw - 48px));
  padding: 0;                      /* الحشو ينتقل إلى الأقسام الثلاثة */
  max-height: min(88vh, 940px);
}
.modal.form-wide .form-modal-head {
  padding: 22px 26px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.modal.form-wide .form-modal-head h3 { margin: 0 0 4px; }
.modal.form-wide .form-modal-sub { font-size: var(--fs-meta); color: var(--muted); }
.modal.form-wide .modal-scroll-body { padding: 20px 26px; max-height: none; }
/* عمودان على السعة، وعمود واحد عند الضيق — الحقول تُقرأ بلا سكرول طويل */
.modal.form-wide .form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px;
}
.modal.form-wide .form-grid label { margin-top: 12px; }
.modal.form-wide .form-grid label:first-of-type { margin-top: 0; }
.modal.form-wide .form-grid .form-full { grid-column: 1 / -1; }
/* تذييل ثابت لا يغطّي المحتوى — قسم مستقلّ خارج حاوية السكرول */
.modal.form-wide .modal-actions {
  padding: 14px 26px; border-top: 1px solid var(--border);
  background: var(--card); flex: 0 0 auto; margin: 0;
  display: flex; gap: 10px; justify-content: flex-start;
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (max-width: 760px) {
  .modal.form-wide { width: calc(100vw - 24px); max-height: 92vh; }
  .modal.form-wide .form-grid { grid-template-columns: 1fr; }
  .modal.form-wide .form-modal-head,
  .modal.form-wide .modal-scroll-body,
  .modal.form-wide .modal-actions { padding-inline: 16px; }
  .modal.form-wide .modal-actions .btn { flex: 1 1 auto; }
}

/* R83 — خلية حالة الجلب الأولي: احتواء قسريّ
   الشارة والنصّ المساعد والزرّ في عمود واحد، ولا يتمدّد أيّها خارج
   الخلية مهما طال محتواه. حدّ الطول في app.js يعالج المصدر، وهذه
   تمنع أي محتوى طويل مستقبليّ من كسر الصفّ. */
#sitesTableBody td { overflow: hidden; }
#sitesTableBody td .badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════
   R85-M2 — نظام التصميم الموحَّد
   ══════════════════════════════════════════════════════════════════
   🔴 التدقيق أظهر: 129 شارة · 103 زرّ · 94 حالة فارغة · 210 توست —
      كلها مكتوبة يدوياً، وثلاثة أنماط تبويبات (tab-btn · sub-tab ·
      report-subtab) فروقها **شكلية لا وظيفية**.
   ⚠️ ولا نلمس الأصناف القائمة إطلاقاً: نُضيف طبقة `ui-` جديدة تستهلكها
      المراحل ③–⑦ تدريجياً. ⇒ صفر انحدار بصريّ في هذه المرحلة.
   ⚠️ والمتغيّرات مستعملة كما هي (95 متغيّراً قائماً) — لا لوحة جديدة.
   ══════════════════════════════════════════════════════════════════ */

/* ── ① الرموز: ما نقص فقط ─────────────────────────────────────── */
:root {
  --ui-gap-xs: 4px;  --ui-gap-sm: 8px;  --ui-gap: 12px;  --ui-gap-lg: 20px;
  --ui-radius-sm: 6px; --ui-radius: 10px; --ui-radius-lg: 14px;
  --ui-fs-xs: 11px; --ui-fs-sm: 12px; --ui-fs: 14px; --ui-fs-lg: 16px;
  --ui-dur: .15s;
  /* ⚠️ الناقص فقط — تحقّقتُ أن `--warn-50/-700` و`--success-*` معرَّفة
     أصلاً في اللوحة، فلا نُكرّرها. */
  --warn-200: #fde68a;
}

/* ── ② التبويبات — نمط واحد يستبدل الثلاثة ───────────────────── */
.ui-tabs {
  display: flex; gap: var(--ui-gap-xs); align-items: center;
  border-bottom: 1px solid var(--border); margin-bottom: var(--ui-gap-lg);
  overflow-x: auto; scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
  padding: 10px 16px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--ui-fs); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: color var(--ui-dur), border-color var(--ui-dur);
}
.ui-tab:hover { color: var(--text); }
.ui-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.ui-tab .ui-tab-count {
  margin-inline-start: 6px; font-size: var(--ui-fs-xs);
  background: var(--bg); border-radius: 999px; padding: 1px 7px; color: var(--muted);
}
.ui-tab[aria-selected="true"] .ui-tab-count { background: var(--blue-50); color: var(--brand); }

/* ── ③ الشارات — نغمات موحَّدة ────────────────────────────────── */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--ui-gap-xs);
  padding: 2px 9px; border-radius: 999px; font-size: var(--ui-fs-xs);
  font-weight: 600; white-space: nowrap; line-height: 1.7;
}
.ui-badge--neutral { background: var(--bg); color: var(--muted); }
.ui-badge--ok      { background: var(--success-50, #ecfdf5); color: var(--success-700, #047857); }
.ui-badge--warn    { background: var(--warn-50, #fffbeb);    color: var(--warn-700, #b45309); }
.ui-badge--bad     { background: var(--danger-50);           color: var(--danger-700); }
.ui-badge--info    { background: var(--blue-50);             color: var(--blue-700); }
.ui-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── ④ الأزرار ────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ui-gap-sm); padding: 8px 16px; border-radius: var(--ui-radius-sm);
  font-family: inherit; font-size: var(--ui-fs); font-weight: 600;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background var(--ui-dur), border-color var(--ui-dur), opacity var(--ui-dur);
}
.ui-btn--primary { background: var(--brand); color: #fff; }
.ui-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }
.ui-btn--outline { background: transparent; border-color: var(--border); color: var(--text); }
.ui-btn--outline:hover:not(:disabled) { background: var(--bg); }
.ui-btn--danger  { background: transparent; border-color: var(--danger-500); color: var(--danger-600); }
.ui-btn--danger:hover:not(:disabled) { background: var(--danger-50); }
.ui-btn--ghost   { background: transparent; border-color: transparent; color: var(--muted); }
.ui-btn--sm { padding: 5px 11px; font-size: var(--ui-fs-sm); }
/* ⚠️ الزرّ المعطَّل يبقى **مرئياً** — فيعرف المستخدم أن الإجراء موجود
   ولا يملكه، بدل أن يختفي فيظنّه غير موجود. */
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── ⑤ البطاقات ──────────────────────────────────────────────── */
.ui-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--ui-radius); padding: var(--ui-gap-lg);
}
.ui-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ui-gap); margin-bottom: var(--ui-gap);
}
.ui-card__title { font-size: var(--ui-fs-lg); font-weight: 700; margin: 0; }
.ui-card__sub { font-size: var(--ui-fs-sm); color: var(--muted); margin: 2px 0 0; }
/* بطاقة إحصاء بارتفاع ثابت — يحلّ اختلاف الارتفاعات في «مؤشرات الشبكة» */
.ui-stat { display: flex; flex-direction: column; gap: var(--ui-gap-xs); min-height: 104px; }
.ui-stat__label { font-size: var(--ui-fs-sm); color: var(--muted); }
.ui-stat__value { font-size: 30px; font-weight: 700; line-height: 1.1; }
.ui-stat__note  { font-size: var(--ui-fs-xs); color: var(--muted); margin-top: auto; }

/* ── ⑥ الحقول والمنسدلات ─────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: var(--ui-gap-xs); }
.ui-field__label { font-size: var(--ui-fs-sm); color: var(--muted); font-weight: 600; }
.ui-input, .ui-select {
  /* ⚠️ `background-color` لا `background` — الاختصار يمسح سهم المنسدلة */
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--ui-radius-sm); background-color: var(--card);
  font-family: inherit; font-size: var(--ui-fs); color: var(--text);
}
.ui-input:focus, .ui-select:focus { outline: 2px solid var(--blue-200); outline-offset: -1px; }
/* منسدلة متعدّدة الاختيار — تحلّ كسر «معاينة القادم»:
   القائمة هناك بلا مربّعات ولا عدّاد ⇒ لا يُفهم أنها متعدّدة. */
.ui-multi { position: relative; }
.ui-multi__panel {
  position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 4px);
  min-width: 280px; max-height: 320px; overflow: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--ui-radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: var(--ui-gap-sm);
}
.ui-multi__opt {
  display: flex; align-items: center; gap: var(--ui-gap-sm);
  padding: 7px 9px; border-radius: var(--ui-radius-sm); cursor: pointer; font-size: var(--ui-fs);
}
.ui-multi__opt:hover { background: var(--bg); }
.ui-multi__opt input { margin: 0; }
.ui-multi__bar {
  display: flex; gap: var(--ui-gap-sm); align-items: center;
  padding-bottom: var(--ui-gap-sm); border-bottom: 1px solid var(--border); margin-bottom: var(--ui-gap-sm);
}

/* ── ⑦ شريط المرشِّحات — تسمية فوق كل واحد ───────────────────── */
/* 🔴 «كلّ الحالات» و«كلّ الحالات الخاصّة» و«كلّ المجموعات» متجاورة بلا
   تسميات ⇒ لا تُعرف وظيفة كلٍّ إلا بفتحه. */
/* 🔴 R209 ⑪: بلا فراغ سفليّ ⇒ الشريط يلتصق بالجدول في **كل** شاشة
   تستعمله — لا في المتابعة وحدها. والعلاج في المكوّن لا في كل صفحة. */
.ui-filters {
  display: flex; flex-wrap: wrap; gap: var(--ui-gap); align-items: flex-end;
  margin-bottom: 16px;
}
/* ⚠️ وآخر شريط داخل بطاقة لا يحتاجه — البطاقة تحمل حشوها. */
.ui-filters:last-child { margin-bottom: 0; }
.ui-filters > .ui-field { min-width: 160px; flex: 0 1 auto; }
.ui-filters__spacer { flex: 1 1 auto; }

/* ── ⑧ الجداول ───────────────────────────────────────────────── */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs); }
.ui-table th {
  text-align: start; font-size: var(--ui-fs-sm); color: var(--muted);
  font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ui-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* ══ D-1 — شارة الحالة تحاذي **أوّل سطر** لا منتصف الفقرة ═══════════
   🔴 الجذر: `vertical-align: middle` أعلاه. خليّة «الحالة» تحمل سطراً
      واحداً (شارة) وخليّة «التفاصيل» تحمل خمسة ⇒ الشارة تتوسّط ارتفاع
      الصفّ فتحاذي **السطر الثالث** من الفقرة المجاورة ⇒ تُقرأ كأنها
      داخلة في النصّ. ولهذا لا تظهر المشكلة في الصفوف القصيرة.
   ⇒ في جدول السجلّ وحده — حيث التفاصيل فقرة لا كلمة — تُحاذى الخلايا
     إلى الأعلى، فتقف الشارة بجوار أوّل سطر بالضبط.
   ⚠️ صفر تغيير في النصّ · صفر تغيير في `direction`/الـRTL · وصفر أثر
      على بقيّة الجداول (النطاق `#tab-logs` وحده). */
#tab-logs .table-wrap table td { vertical-align: top; }
#tab-logs .table-wrap table td .badge { margin-top: 1px; }
.ui-table tr:last-child td { border-bottom: none; }
/* 🔴 «مفعّلة» كانت تنكسر سطرين في جدول المواقع (11 عموداً بلا nowrap) */
/* ⚠️ R85-M7: كانت مقيَّدة بـ`.ui-table` — والجداول القائمة ليست منها،
   فما كانت لتعمل على «مفعّلة» في جدول المواقع. الآن صنف مستقلّ يعمل
   في أي جدول، ويبقى داخل `.ui-table` كما هو. */
.ui-nowrap { white-space: nowrap; }
.ui-table__num { font-variant-numeric: tabular-nums; text-align: end; }
/* صفّ تفاصيل موسَّع — يُربط بأبيه بحدّ جانبيّ بدل أن يبدو صفّاً مستقلاً */
.ui-row-detail > td {
  background: var(--bg); border-inline-start: 3px solid var(--brand); padding: var(--ui-gap-lg);
}

/* ── ⑨ الحالات: فارغ · تحميل · خطأ ──────────────────────────── */
.ui-state { display: flex; flex-direction: column; align-items: center; gap: var(--ui-gap-sm); padding: 28px 16px; text-align: center; }
.ui-state__icon { font-size: 22px; opacity: .5; }
.ui-state__title { font-size: var(--ui-fs); font-weight: 600; margin: 0; }
.ui-state__msg { font-size: var(--ui-fs-sm); color: var(--muted); margin: 0; max-width: 46ch; }
.ui-state--inline { padding: 14px 12px; }
.ui-skel { background: linear-gradient(90deg, var(--bg) 25%, var(--border) 37%, var(--bg) 63%); background-size: 400% 100%; animation: ui-skel 1.3s ease-in-out infinite; border-radius: var(--ui-radius-sm); }
@keyframes ui-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ui-skel--line { height: 12px; margin: 8px 0; }
.ui-skel--row  { height: 40px; margin: 6px 0; }

/* ── ⑩ التنبيهات داخل الصفحة ────────────────────────────────── */
.ui-alert {
  display: flex; gap: var(--ui-gap); align-items: flex-start;
  padding: var(--ui-gap); border-radius: var(--ui-radius);
  border: 1px solid var(--border); font-size: var(--ui-fs);
}
.ui-alert--info { background: var(--blue-50);   border-color: var(--blue-200); }
.ui-alert--warn { background: var(--warn-50, #fffbeb); border-color: var(--warn-200, #fde68a); }
.ui-alert--bad  { background: var(--danger-50); border-color: var(--danger-100); }
.ui-alert__body { flex: 1; }
.ui-alert__title { font-weight: 600; margin: 0 0 2px; }
.ui-alert__msg { margin: 0; color: var(--muted); font-size: var(--ui-fs-sm); }
/* ⚠️ التنبيه يحمل إجراءً — الرسالة التي تشرح قيداً بلا حلّ لا تُقرأ مرّتين */
.ui-alert__action { flex-shrink: 0; }

@media (max-width: 720px) {
  .ui-filters > .ui-field { min-width: 100%; }
  .ui-tabs { gap: 0; }
  .ui-tab { padding: 10px 12px; font-size: var(--ui-fs-sm); }
}

/* ══════════════════════════════════════════════════════════════════
   R85-M7 — التلميع النهائيّ
   ══════════════════════════════════════════════════════════════════ */

/* ── شريحة الحالة تصمت حين يكون كل شيء سليماً ────────────────── */
/* 🔴 كانت تحتلّ صدر كل صفحة بنصّ لا يعني شيئاً في 99% من الوقت.
   النقطة تبقى (مرجع سريع) والنصّ يظهر عند التأخّر فقط. */
.system-status-chip.is-healthy { padding-inline: 10px; gap: 6px; }
.system-status-chip.is-healthy .status-dot { margin: 0; }

/* ── تباعد وتسلسل بصريّ ─────────────────────────────────────── */
.ui-filters + .table-wrap, .ui-filters + .ui-tabs { margin-top: var(--ui-gap); }
.ui-tabs + .table-wrap { margin-top: 0; }

/* ── الاستجابة ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* الجداول العريضة تتمرّر أفقياً بدل أن تنكسر خلاياها */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 720px; }
  /* شريط المرشِّحات يصير عمودياً — كل مرشِّح بعرض كامل مع تسميته */
  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-bar > * { width: 100%; }
}
@media (max-width: 560px) {
  .ui-card { padding: var(--ui-gap); }
  .ui-stat__value { font-size: 24px; }
  .ui-stat { min-height: 88px; }
  /* الإجراءات في الصفوف تلتفّ بدل أن تُخرج الجدول عن حدّه */
  .ui-table td.ui-actions { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ── حركات دقيقة: محدودة ومحترمة لتفضيل تقليل الحركة ───────── */
.ui-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-tab, .ui-btn, .ui-badge { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-tab { transition: none; }
  .ui-skel { animation: none; }
  .ui-btn:active:not(:disabled) { transform: none; }
}

/* ── تركيز مرئيّ للوحة المفاتيح ─────────────────────────────── */
.ui-btn:focus-visible, .ui-tab:focus-visible,
.ui-input:focus-visible, .ui-select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ── R85-G1: توحيد مربّعات البحث والمرشِّحات القائمة ──────────────
   🔴 21 مربّع بحث بـ`.field-search` و`.cc-filter` بأشكال متفاوتة عن
      الطبقة الموحَّدة ⇒ «مربّع البحث هنا يختلف عن هناك».
   ⚠️ ولا نلمس بنية أي صفحة: نُحاذي **الشكل** فقط بقاعدة واحدة،
      فتتوحّد الصفحات كلها دفعةً بلا تعديل في HTML. */
/* 🔴 R85-K1: كنتُ أستعمل `background` (اختصار) ⇒ **مسح
   `background-image`** وهو سهم المنسدلة ⇒ اختفت الأسهم من كل
   السكربت. الاختصار يُصفّر كل خصائص الخلفية لا اللون وحده.
   ⇒ `background-color` فقط · والسهم يُعرَّف صراحةً للمنسدلات. */
.field-search,
.cc-filter,
.filters-bar select,
.filters-bar input[type="search"],
.filters-bar input:not([type="checkbox"]):not([type="radio"]) {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-sm);
  background-color: var(--card);
  font-family: inherit;
  font-size: var(--ui-fs);
  color: var(--text);
}

/* ── سهم موحَّد لكل منسدلة في السكربت ────────────────────────────
   ⚠️ يُطبَّق على `select` أينما كان — فلا يعود شكل المنسدلة يختلف
      بين تبويب وآخر، وهو ما لاحظتَه. */
select.ui-select,
select.cc-filter,
.filters-bar select,
.ui-filters select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23697586' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 12px 8px;
  padding-inline-start: 34px;
}
[dir="rtl"] select.ui-select,
[dir="rtl"] select.cc-filter,
[dir="rtl"] .filters-bar select { background-position: left 12px center; }
.field-search:focus,
.cc-filter:focus,
.filters-bar select:focus,
.filters-bar input:focus {
  outline: 2px solid var(--blue-200);
  outline-offset: -1px;
}

/* ── وتبويبات إدارة الدورات تُحاذي الطبقة الموحَّدة ───────────────
   🔴 «التبويبات في متابعة الدورات ممتازة وفي إدارة الدورات سيّئة»
      — والفرق شكليّ بحت. نُحاذيها بلا لمس منطق `switchCcTab`. */
.cc-tabs {
  display: flex; gap: var(--ui-gap-xs); align-items: center;
  border-bottom: 1px solid var(--border); margin-bottom: var(--ui-gap-lg);
  overflow-x: auto; scrollbar-width: none;
}
.cc-tabs::-webkit-scrollbar { display: none; }
.cc-tab {
  padding: 10px 16px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--ui-fs); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; display: inline-flex; align-items: center;
  transition: color var(--ui-dur), border-color var(--ui-dur);
}
.cc-tab:hover { color: var(--text); }
.cc-tab.active {
  color: var(--brand); border-bottom-color: var(--brand); font-weight: 600;
}
.cc-tab-count {
  margin-inline-start: 6px; font-size: var(--ui-fs-xs);
  background: var(--bg); border-radius: 999px; padding: 1px 7px; color: var(--muted);
}
.cc-tab.active .cc-tab-count { background: var(--blue-50); color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════
   R85-K1 — شريط أدوات واحد لكل الصفحات
   ══════════════════════════════════════════════════════════════════
   🔴 «كل تبويب شكل مختلف وترتيب مختلف» — والسبب أن كل صفحة تبني
      شريطها يدوياً: أزرار ومرشِّحات وبحث بلا نظام.
   ⚠️ القاعدة الواحدة: **بحث يتمدّد · مرشِّحات ثابتة · إجراءات يساراً**
      وتُطبَّق على `.filters-bar` القائم في كل الصفحات دفعةً —
      بلا لمس بنية أي صفحة. */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-gap);
  padding: var(--ui-gap);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius);
  margin-bottom: var(--ui-gap-lg);
}
/* البحث يأخذ المساحة المتبقّية — وهو أكثر ما يُستعمل */
.filters-bar .field-search,
.filters-bar input[type="search"] { flex: 1 1 240px; min-width: 200px; }
/* المرشِّحات بعرض ثابت مريح — لا تتمدّد ولا تنضغط */
.filters-bar select,
.filters-bar .ui-field { flex: 0 0 auto; min-width: 150px; }
/* الإجراءات تُدفع إلى الطرف — فتُقرأ كإجراءات لا كمرشِّحات */
.filters-bar .btn,
.filters-bar .ui-btn { margin-inline-start: auto; }
.filters-bar .btn ~ .btn,
.filters-bar .ui-btn ~ .ui-btn { margin-inline-start: 0; }

/* ── حاوية الجدول: بلا حدّ مزدوج مع الشريط ─────────────────────── */
.filters-bar + .table-wrap { margin-top: 0; }

/* ── التنبيهات داخل الصفحات: هوية واحدة ────────────────────────── */
/* 🔴 «توسيع سريع…» في معاينة القادم بلون وشكل غريبين عن كل شيء. */
.expand-all-bar,
.upcoming-hint,
.cc-hint {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ui-gap); padding: 10px var(--ui-gap);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--ui-radius); margin-bottom: var(--ui-gap);
  font-size: var(--ui-fs-sm); color: var(--muted);
}
.expand-all-bar button { flex-shrink: 0; }
/* ⚠️ والزرّ المعطَّل داخلها لا يبدو زرّاً — إنه رسالة إرشادية */
.expand-all-bar button:disabled {
  background: transparent; border: none; color: var(--muted);
  cursor: default; opacity: 1; padding: 0; font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════
   R85-R1 — ضبط ارتفاع الحقول في الشريط
   ══════════════════════════════════════════════════════════════════
   🔴 مربّع البحث تمدّد إلى ارتفاع الشريط كلّه. السبب: `.ui-field` عمود
      مرن داخل شريط مرن، والحقل بداخله بلا ارتفاع ⇒ يملأ ما أُتيح.
      وقواعد `.filters-bar input` القائمة تضبط `height: 38px` للحقول
      المباشرة فقط — لا لما هو داخل `.ui-field`.
   ⇒ نضبط الارتفاع صراحةً ونمنع التمدّد العموديّ. */
.filters-bar .ui-field { align-self: flex-end; }
.filters-bar .ui-field > .ui-input,
.filters-bar .ui-field > .ui-select,
.filters-bar .ui-field > select,
.filters-bar .ui-field > input {
  height: 38px;
  flex: 0 0 38px;      /* لا يتمدّد عمودياً مهما ارتفع الشريط */
  box-sizing: border-box;
}
.filters-bar .ui-field > .ui-btn { height: 38px; }
/* والتسمية بارتفاع ثابت فتتحاذى الحقول أفقياً */
.filters-bar .ui-field > .ui-field__label {
  min-height: 16px; line-height: 16px;
}


/* ══ R141 — معاينة القادم: اليوم وحدة عمل · والشريط يلحق التحديد ════ */
.ur-day { margin-bottom: 8px; border: 1px solid var(--slate-200, #e5e7eb);
          border-radius: 10px; background: #fff; overflow: hidden; }
.ur-day__head { display: flex; align-items: center; gap: 10px; cursor: pointer;
                padding: 9px 12px; background: var(--slate-50, #f8fafc);
                font-size: 13px; list-style: none; }
.ur-day__head::-webkit-details-marker { display: none; }
.ur-day__pick { display: inline-flex; align-items: center; }
.ur-day__title { font-weight: 700; color: var(--slate-700, #374151); }
.ur-day__count { margin-inline-start: auto; color: var(--slate-500, #6b7280);
                 font-size: var(--fs-micro); }
.ur-day__body  { padding: 2px 12px 8px; }
.ur-art { display: flex; align-items: center; gap: 10px; padding: 7px 0;
          border-top: 1px solid var(--slate-100, #f1f5f9); }
/* الوقت بعرض ثابت ⇒ العناوين تبدأ من خطّ واحد فتُقرأ بالمسح */
.ur-art__num   { flex: 0 0 42px; color: var(--slate-400, #9ca3af);
                 font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
                 text-align: start; }
.ur-list       { border: 1px solid var(--slate-200, #e5e7eb); border-radius: 10px;
                 background: #fff; padding: 2px 12px 6px; }
.ur-list .ur-art:first-child { border-top: 0; }
/* R148: الصفّ المركَّز بلوحة المفاتيح — إشارة خفيفة لا تنافس التحديد */
.ur-art--focus { background: var(--brand-light); border-radius: 6px;
                 box-shadow: inset 2px 0 0 var(--brand); }
.ur-keys { font-family: inherit; color: var(--slate-500, #6b7280);
            font-size: var(--fs-micro); margin-inline-end: auto; cursor: pointer;
            background: transparent; border: 1px solid var(--slate-200, #e5e7eb);
            border-radius: 999px; padding: 4px 10px; }
.ur-keys:hover { color: var(--brand); border-color: var(--brand); }
.ur-keys__panel { position: absolute; z-index: 20; margin-top: 6px; background: #fff;
                  border: 1px solid var(--slate-200, #e5e7eb); border-radius: 10px;
                  padding: 10px 12px; box-shadow: 0 8px 24px rgba(15,23,42,.14);
                  font-size: var(--fs-micro); display: grid; gap: 6px; }
.ur-keys__panel div { display: flex; align-items: center; gap: 6px; }
.ur-keys__panel kbd { background: var(--slate-100, #f1f5f9); border-radius: 4px;
                      padding: 1px 6px; font-family: monospace; font-size: 11px; }
/* فصل بصريّ بين مجموعتَي الأزرار */
.today-filters__row--tabs > .today-refresh:first-of-type { margin-inline-start: 8px; }
.ur-sidebar__search { position: sticky; top: 0; background: #fff; padding: 8px;
                      border-bottom: 1px solid var(--slate-200, #e5e7eb); z-index: 1; }
.ur-sidebar__search .ui-input { width: 100%; font-size: var(--fs-micro); }
@media (max-width: 900px) { .ur-keys { display: none; } }
.ur-more { display: flex; justify-content: center; padding: 10px 0 2px; }
/* ══ R145 — خطّ العلامة: حدّ لا صفّ ══════════════════════════════════ */
.ur-marker { display: flex; align-items: center; gap: 8px; margin: 6px 0;
             color: var(--brand-dark, var(--brand)); font-size: var(--fs-micro);
             font-weight: 700; }
.ur-marker::before, .ur-marker::after {
  content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 35%, transparent); }
.ur-art__title { flex: 1; min-width: 0; }
.ur-art--excluded .ur-art__title { opacity: .55; text-decoration: line-through; }

/* 🔴 R149: كان `inset-inline: 24px` يمدّه على الشاشة كلها بينما الجدول
   داخل حاوية أضيق ⇒ يبدو غريباً عن الصفحة. الآن يتحاذى مع المحتوى. */
/* 🔴 R154: كان يعلو القائمة الجانبية السوداء ويتجاوز عرض الصفحة.
   ⇒ يتقيّد بحاوية المحتوى، و`z-index` أقلّ من قائمة التنقّل. */
.ur-bulkbar { position: sticky; bottom: 12px; z-index: 5; margin: 12px 0 0;
              width: 100%;
              display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
              background: #fff; border: 1px solid var(--slate-200, #e5e7eb);
              border-radius: 12px; padding: 10px 16px;
              box-shadow: 0 8px 28px rgba(15, 23, 42, .16); }
.ur-bulkbar__count   { font-weight: 700; color: var(--slate-700, #374151); }
.ur-bulkbar__actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ur-bulkbar { bottom: 8px; }
  .ur-bulkbar__actions { margin-inline-start: 0; width: 100%; }
}


/* ══ R147 — «معاينة القادم»: صفّ فلاتر واحد · وشاشة مقسومة ══════════
   🔴 خمسة حقول بصفّين كانت تلتهم نصف الشاشة لمن يقضي نصف يومه هنا.
   ⇒ صفّ واحد: أربع منسدلات متطابقة + بحث يأخذ ما تبقّى. */
#tab-upcoming .today-filters__row .ui-field:not(.ur-filters__search) {
  flex: 1 1 165px; max-width: 200px;
}
.ur-filters__search { flex: 2 1 220px; }

/* شاشة مقسومة: المواقع يساراً (شريط ضيّق) والمقالات يميناً */
/* R154: 250 ⇒ 200 — الشريط أداة اختيار لا لوح عرض. */
.ur-split { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.ur-sidebar {
  border: 1px solid var(--slate-200, #e5e7eb); border-radius: 10px;
  background: #fff; overflow: hidden; max-height: 72vh; overflow-y: auto;
}
.ur-sidebar__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border: 0; background: transparent; cursor: pointer;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
  font: inherit; text-align: start; color: var(--slate-700, #374151);
}
.ur-sidebar__item:hover { background: var(--slate-50, #f8fafc); }
/* 🔴 R154: الخطّ الجانبيّ الأزرق أُزيل — غريب عن لغة السكربت.
   الخلفية الخفيفة وحدها تكفي للتمييز، كبقيّة الشاشات. */
.ur-sidebar__item--active {
  background: var(--brand-light); color: var(--brand-dark, var(--brand)); font-weight: 700;
}
.ur-sidebar__item { flex-direction: column; align-items: stretch; gap: 2px; }
.ur-sidebar__row   { display: flex; align-items: center; gap: 8px; width: 100%; }
.ur-sidebar__name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* حالة الدورة: نصّ باهت لا لون — 400 نقطة ملوّنة ضجيج */
.ur-sidebar__state { color: var(--slate-400, #9ca3af); font-size: 10.5px; }
.ur-sidebar__item--idle .ur-sidebar__name  { color: var(--slate-400, #9ca3af); }
.ur-sidebar__item--idle .ur-sidebar__state { opacity: .7; }
.ur-sidebar__count { color: var(--slate-500, #6b7280); font-size: var(--fs-micro);
                     font-variant-numeric: tabular-nums; }
.ur-sidebar__item--active .ur-sidebar__count { color: inherit; }
.ur-pane { min-width: 0; }
.ur-col  { min-width: 0; display: flex; flex-direction: column; }
/* الشريط العائم كان يغطّي آخر صفّ */
.ur-pane { padding-bottom: 84px; }
@media (max-width: 900px) {
  .ur-split { grid-template-columns: 1fr; }
  .ur-sidebar { max-height: 220px; }
}


/* ══ R171 — شريط ملخّص المواقع ══════════════════════════════════════
   صندوق واحد بارتفاع صفّ: الرقم كبير والتسمية تحته — قوّة البطاقة بلا
   مساحتها. ويضمّ زرّ «إضافة موقع» فلا يبدو غريباً عن الصفّ. */
/* 🔴 R173: الزرّ كان أطول من الشريط فيبدو معلّقاً. التوسيط العموديّ
   يجعلهما صفّاً واحداً متوازناً. */
.sites-summary { display: flex; align-items: stretch; gap: 0;
  background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-200, #e5e7eb);
  /* 🔴 R175: كان `flex: 1 1 auto` ⇒ الشريط يتمدّد على العرض كلّه فيُدفع
     الزرّ إلى أقصى الطرف ويبدو منفصلاً. ⇒ الشريط بعرض محتواه.
     🔴 R178: وذلك وحده لم يكفِ — الحاوية `.sec-head` عليها
     `justify-content: space-between` فدفعت الاثنين إلى الطرفين وتركت
     فجوة ميّتة بينهما. ⇒ نلغي التباعد **في هذا الرأس وحده** فيلتصق
     الزرّ بالشريط ويصيران وحدة واحدة تُقرأ معاً. */
  border-radius: 12px; overflow: hidden; flex: 0 0 auto; align-self: center; }
/* ══ R181 — الزرّ يعود إلى لغته: صفر قاعدة مقاس خاصّة ══════════════
   🔴 أجبرتُه على مطابقة ارتفاع صندوق الملخّص (`align-self: stretch`).
      والصندوق عالٍ لأنه يحوي رقماً 20px فوق تسمية، والزرّ محتواه سطر
      واحد ⇒ حشو داخليّ ضخم فبدا كتلة سمجة. وفي «المجموعات» لا قاعدة
      كهذه ⇒ زرّان مختلفان لفعل واحد.
   ⚠️ والخطأ في المبدأ: التناسق ليس «كل شيء بنفس الارتفاع» بل «العنصر
      نفسه يبدو نفسه أينما وُجد». كل قاعدة مقاس خاصّة بشاشة تُضعف ذلك،
      وأضفتُ ثلاثاً لهذا الزرّ.
   ⇒ حُذفت كلّها. يبقى التباعد فقط (ليس مقاساً)، والزرّ متوسّط عمودياً
     ومطابق حرفياً لنظيره في «المجموعات». */
#tab-sites .sec-head { justify-content: flex-start; align-items: center; gap: 12px; }
#tab-sites .sec-head .sites-summary { flex: 1 1 auto; }
.sites-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 10px 20px; min-width: 92px;
  background: transparent; border: 0; border-inline-end: 1px solid var(--slate-200, #e5e7eb);
  font: inherit; cursor: pointer; color: var(--slate-600, #4b5563);
}
.sites-stat:last-child { border-inline-end: 0; }
.sites-stat[disabled] { cursor: default; }
.sites-stat b { font-size: 20px; font-weight: 800; line-height: 1.1;
                font-variant-numeric: tabular-nums; color: var(--slate-800, #1f2937); }
.sites-stat span { font-size: var(--fs-micro); }
.sites-stat:not([disabled]):hover { background: #fff; color: var(--brand); }
.sites-stat:not([disabled]):hover b { color: var(--brand); }
.sites-stat--danger b { color: var(--danger); }
.sites-stat--warn   b { color: var(--warn); }


/* ══ R163 — صفوف المجموعات: نفس لغة جدولَي اليوم والمواقع ═══════════ */
.groups-row__name  { display: block; font-weight: 700; color: var(--slate-800, #1f2937); }
.groups-row__desc  { display: block; color: var(--slate-500, #6b7280);
                     font-size: var(--fs-micro); margin-top: 2px; }
.groups-row__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.groups-row__more  { background: var(--brand-light); color: var(--brand);
                     border-color: var(--brand-light); }
.groups-row:hover  { background: var(--slate-50, #f8fafc); }


/* ══ R169 — سطر حالة الموقع في الجدول ═══════════════════════════════ */
.site-state__line { display: inline-block; color: var(--slate-500, #6b7280);
                    font-size: var(--fs-micro); }
/* «مفعّل بلا دورة»: ليست خطأ — لكنها حالة تستحقّ الانتباه */
.site-state__line--idle { color: var(--warn); font-weight: 700; }


/* ══ R171 — وسوم الحالات الخاصّة: نصّ يُقرأ لا شارة تصرخ ═══════════ */
.special-status-badge { color: var(--slate-600, #4b5563); font-size: var(--fs-micro);
                        font-weight: 600; white-space: nowrap; }
.special-status-badge:hover { color: var(--brand); text-decoration: underline !important; }


/* ══ R176 — نافذة «حالات خاصّة»: تلخيص ثمّ تفصيل ════════════════════ */
.special-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; text-decoration: none;
  background: var(--slate-100, #f1f5f9); color: var(--slate-500, #6b7280);
  font-size: 13px; line-height: 1; transition: all var(--ease-normal); }
.special-mark:hover { background: var(--brand-light); color: var(--brand); }
/* فراغ صريح: يقول «فُحص ولا شيء» لا «لم يُفحص» */
.special-none { color: var(--slate-300, #d1d5db); }

.ss-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 16px; }
.ss-overview__item { display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 12px 8px; border-radius: 10px;
  background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-200, #e5e7eb); }
.ss-overview__item b { font-size: 20px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--slate-800, #1f2937); }
.ss-overview__item span { font-size: var(--fs-micro); color: var(--slate-500, #6b7280); }
.ss-overview__item--empty { opacity: .5; }
.ss-overview__item--empty b { color: var(--slate-400, #9ca3af); }
@media (max-width: 640px) { .ss-overview { grid-template-columns: repeat(3, 1fr); } }
/* القسم العامّ مطويّ: نبرة أهدأ لأنه سياق لا قرار يخصّ هذا الموقع */
.ss-globals > summary { cursor: pointer; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; list-style: none; }
.ss-globals > summary::-webkit-details-marker { display: none; }
.ss-globals > summary::before { content: '▸'; color: var(--slate-400, #9ca3af); }
.ss-globals[open] > summary::before { content: '▾'; }
.blocked-word-chip--global { opacity: .7; }


/* ══ R185 — بحث الموقع بالكتابة · نمط واحد للتابين ═══════════════════ */
.site-typeahead {
  position: absolute; z-index: 60; inset-inline-start: 0; inset-inline-end: 0;
  /* R201 ⑦: 340px ≈ ثماني نتائج — تُمسح بالعين ولا تفيض على الصفحة. */
  top: calc(100% + 4px); max-height: 340px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-xl);
}
.ui-field { position: relative; }
.site-typeahead__item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; background: transparent; border: 0;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
  font: inherit; text-align: start; cursor: pointer;
}
.site-typeahead__item:last-child { border-bottom: 0; }
.site-typeahead__item:hover { background: var(--brand-light); color: var(--brand); }
.site-typeahead__empty { padding: 12px; color: var(--slate-500, #6b7280);
                         font-size: var(--fs-micro); text-align: center; }

/* 🔴 R185: حقول الكلمة/العبارة/العنوان كانت ضيّقة جداً — والقيمة قد
   تكون جملة كاملة. مساحة كافية تُقرأ وتُراجَع قبل الاعتماد. */
#tgtKeywordInput, #tgtPhraseInput, #tgtTitleInput,
#dpTitleInput, #dpKeywordInput, #dpPhraseInput {
  width: 100%; min-height: 46px; font-size: 15px; padding: 11px 14px;
}


/* ══ R185 — صفّ التفاصيل المتوسّع ═══════════════════════════════════ */
.tgt-row-details > td { background: var(--slate-50, #f8fafc); padding: 12px 16px; }
.tgt-det-card { background: var(--card); border: 1px solid var(--border);
                border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.tgt-det-card:last-child { margin-bottom: 0; }
.tgt-det-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tgt-det-card__value { font-size: var(--fs-text); margin-bottom: 4px; }


/* ══ R185 ⑦ — أرقام المعاينة الأربعة · وقائمة الاستبعاد ═════════════ */
.tgt-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tgt-counts__item { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 10px;
  background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-200, #e5e7eb); }
.tgt-counts__item b { font-size: 19px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--slate-800, #1f2937); }
.tgt-counts__item span { font-size: var(--fs-micro); color: var(--slate-500, #6b7280); }
.tgt-counts__item--warn b { color: var(--warn); }
.tgt-counts__item--ok   b { color: var(--success); }
@media (max-width: 640px) { .tgt-counts { grid-template-columns: repeat(2, 1fr); } }

.tgt-prev-row { display: flex; align-items: center; gap: 9px; padding: 6px;
  border-bottom: 1px solid var(--slate-100, #f1f5f9); font-size: 13px; cursor: pointer; }
.tgt-prev-row:last-child { border-bottom: 0; }
.tgt-prev-row--excluded > span:first-of-type { text-decoration: line-through;
  color: var(--slate-400, #9ca3af); }


/* ══ R187 ③ — هيكل شريط الملخّص ═══════════════════════════════════ */
.sites-stat--skeleton { cursor: default; }
.sites-stat--skeleton .skeleton-line { border-radius: 5px; }


/* ══ R195 ① — عمود «تحجب» في الكلمات المحظورة ═════════════════════ */
/* R201 ③: شارتان — النطاق والعدد — لا نصّ ورقم عاريان. */
.bw-scope, .bw-usage { white-space: nowrap; flex-shrink: 0; }
.bw-usage { font-variant-numeric: tabular-nums; }
/* الصفر ليس محايداً: كلمة بلا أثر مرشَّحة للحذف. */
.bw-usage--zero { background: var(--warn-bg, #fffbeb); color: var(--warn);
                  border-color: var(--warn); }


/* ══ R196 ② — رؤوس المجموعات داخل منتقي المواقع ═══════════════════ */
.site-typeahead__group {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 12px; background: var(--slate-50, #f8fafc);
  border-bottom: 1px solid var(--slate-200, #e5e7eb);
  font-size: var(--fs-micro); font-weight: 700; color: var(--slate-600, #4b5563);
}


/* R201 ②: أنماط القائمة المستقلّة حُذفت — صفّ المقالة صار يستعمل مكوّن
   row-actions-menu نفسه المستعمل في صفحة المواقع. */


/* ══ R197 ③ — شرائح فلترة الحالة في السجلّ ════════════════════════ */
.chip-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-filter {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  font: inherit; font-size: var(--fs-micro); font-weight: 600;
  color: var(--slate-600, #4b5563); transition: background .15s, color .15s, border-color .15s;
}
.chip-filter:hover { border-color: var(--brand); color: var(--brand); }
.chip-filter.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}


/* ══ R197 ③ — سطر الأنواع وأسطر التفاصيل ═════════════════════════ */
.log-types {
  font-size: var(--fs-micro); font-weight: 700; color: var(--brand);
  margin-bottom: 4px;
}
/* R201 ⑧: `.log-line` حُذف — التفاصيل صارت مجمَّعة بالنوع، والعنوان
   فوقها يميّزها فلا تحتاج سهماً ولا رقماً. */


/* ══ R198 ④ — التقارير: أقسام قابلة للفتح ════════════════════════ */
.report-attention { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* R215: صارت أزراراً تفتح أقسامها — كانت جامدة تماماً. */
.report-attention__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; font: inherit; transition: border-color .15s, background .15s;
  padding: 12px 8px; border-radius: 10px;
  background: var(--slate-50, #f8fafc); border: 1px solid var(--slate-200, #e5e7eb);
}
.report-attention__item b { font-size: 22px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--slate-800, #1f2937); }
.report-attention__item span { font-size: var(--fs-micro); color: var(--slate-500, #6b7280); }
.report-attention__item.is-bad b { color: var(--danger); }
.report-attention__item:hover { border-color: var(--brand); background: var(--brand-light); }
@media (max-width: 640px) { .report-attention { grid-template-columns: repeat(2, 1fr); } }

.report-sec { border-bottom: 1px solid var(--slate-100, #f1f5f9); }
.report-sec:last-child { border-bottom: 0; }
.report-sec > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 4px; cursor: pointer; list-style: none;
}
.report-sec > summary::-webkit-details-marker { display: none; }
.report-sec > summary::before { content: '▸'; color: var(--slate-400, #9ca3af); }
.report-sec[open] > summary::before { content: '▾'; }
.report-sec > summary:hover .report-sec__title { color: var(--brand); }
.report-sec__title { font-weight: 700; font-size: var(--fs-text); }
.report-sec__body { padding: 4px 4px 16px; }
.report-lead { font-size: var(--fs-text); font-weight: 600; margin: 0 0 10px; }
.report-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.report-table th, .report-table td {
  padding: 7px 9px; text-align: start;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.report-table th { font-weight: 700; color: var(--slate-600, #4b5563); white-space: nowrap; }
.report-table td { font-variant-numeric: tabular-nums; }


/* ══ R199 — منتقي الموقع: السهم والمجموعات ═══════════════════════ */
/* 🔴 بلا السهم يبدو حقل بحث عادياً، فلا يعرف أحد أن النقر يفتح قائمة
   تصفّح. والنصّ داخل الحقل يختفي فور الكتابة. */
.site-picker-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-400, #9ca3af) 50%),
                    linear-gradient(135deg, var(--slate-400, #9ca3af) 50%, transparent 50%);
  background-position: calc(12px) calc(50% + 2px), calc(17px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: 30px;
}
/* 🔴 R201 ⑦: كان زرّاً رمادياً يبدو عنصراً قابلاً للاختيار كالمواقع.
   وهو **عنوان قسم** — فليبدُ كذلك: خطّ فاصل وخلفية شفّافة. */
.site-typeahead__group--btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; border-bottom: 1px solid var(--slate-200, #e5e7eb);
  background: transparent; font: inherit; cursor: pointer; text-align: start;
}
.site-typeahead__group--btn:hover { background: var(--brand-light); color: var(--brand); }


/* ══ R201 ⑧ — تفاصيل السجلّ مجمَّعة بالنوع ═══════════════════════ */
.log-group { margin-bottom: 8px; }
.log-group:last-child { margin-bottom: 0; }
.log-group__head {
  font-size: var(--fs-micro); font-weight: 700; color: var(--brand);
  margin-bottom: 2px;
}
/* ⚠️ بلا نقطة ولا سهم: العنوان فوقها يميّزها أصلاً. */
.log-group__item {
  font-size: var(--fs-meta); color: var(--slate-600, #4b5563);
  padding-inline-start: 18px; line-height: 1.6;
}


/* ══ R203 ب — الرئيسية: المقام ومجموعات الانتباه ═════════════════ */
/* «58» وحدها لا تقول إن كنتَ متأخّراً — والمقام أصغر فلا يزاحم الرقم. */
.stat-denom { font-size: 0.5em; font-weight: 600; color: var(--slate-400, #9ca3af); }

.attn-group { margin-bottom: 14px; }
.attn-group:last-child { margin-bottom: 0; }
.attn-group__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 2px 8px; border-bottom: 1px solid var(--slate-200, #e5e7eb);
  margin-bottom: 8px; font-weight: 700; font-size: var(--fs-meta);
}
.attn-group__head .btn { margin-inline-start: auto; }
/* السقف كان صامتاً في الخادم — والإعلان يمنع أن تظنّ المعروض هو الكلّ. */
/* 🔴 R244: حشو 6px بلا فاصل عن الصفوف فوقه ⇒ الزرّ ملتصق بالخطّ.
   ⚠️ ولا حدّ علويّ هنا: الصفّ الذي فوقه يحمل `border-bottom` أصلاً
      (`.attention-item`)، وإضافة حدّ ثانٍ تُنتج خطّين متلاصقين.
   ⇒ مسافة فقط — والخطّ القائم يفصل. */
.attn-more {
  padding: 2px; font-size: var(--fs-micro);
  color: var(--slate-500, #6b7280);
  margin-top: 10px;
}


/* ══ R203 ب — نشاط اليوم · قراراتك · سطر التغيير ═════════════════ */
.activity-head {
  font-weight: 700; font-size: var(--fs-meta); padding: 4px 2px 10px;
  border-bottom: 1px solid var(--slate-200, #e5e7eb); margin-bottom: 8px;
}
.text-danger { color: var(--danger); }
.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; cursor: pointer; border-radius: 8px;
}
.activity-row:hover { background: var(--brand-light); }
.activity-row__name { flex: 1 1 auto; font-size: var(--fs-meta); font-weight: 600; }
/* شريط التقدّم يُقرأ بالعين قبل الرقم — والأحمر لمن لم ينشر شيئاً. */
.activity-row__bar {
  flex: 0 0 88px; height: 6px; border-radius: 999px;
  background: var(--slate-200, #e5e7eb); overflow: hidden;
}
.activity-row__bar > i { display: block; height: 100%; background: var(--brand); }
/* ══ UI-1 — الصفّ المكتمل حالة كاملة لا شارة ═══════════════════════
   🔴 «أُنجزت» كانت شارة صغيرة في طرف صفّ يشبه بقيّة الصفوف تماماً ⇒
      الإكمال يحتاج قراءة لا نظرة.
   ⇒ الصفّ كلّه يأخذ الأزرق المعتمَد للإكمال في النظام (`--brand-light`
     خلفية · `--brand` حدّاً جانبياً) — ونفس التنسيق يبقى قائماً:
     الحقول الأربعة بنفس الترتيب وبنفس العرض. */
/* ── UI-2 · مراجعة: الإكمال يُقرأ بالشريط لا بالخلفية ──────────────
   🔴 الحالة السابقة كانت تحمل **خمس** إشارات لمعنى واحد:
      شريط ممتلئ + «5 من 5» + شارة «مكتملة» + خلفية زرقاء + خطّ جانبيّ.
      وعلى سبعين صفّاً متتالياً تصير جداراً مخطّطاً يطغى على ما يحتاج
      انتباهاً فعلاً (متأخّر · باقٍ).
   🔴 وخطأ اتّجاه مُثبَت: `inset 2px 0 0` يضع الخطّ على **اليسار**،
      والصفحة `dir="rtl"` ⇒ يقع في **نهاية** الصفّ لا بدايته.
   ⇒ تُحذف الخلفية والخطّ · ويحمل الشريط الدلالة بلونه:
     أخضر ممتلئ = أُنجزت · أزرق ناقص = باقٍ.
   ⚠️ وصفر تبهيت أو ترميد: الموقع المنجَز ليس معطَّلاً، ولونه الطبيعيّ
      يبقى كما هو — والحقول الأربعة بترتيبها وعرضها بلا مساس. */
.activity-row.is-complete .activity-row__bar { background: var(--success-bg); }
.activity-row.is-complete .activity-row__bar > i { background: var(--success); }
.activity-row__num {
  flex: 0 0 auto; font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--slate-500, #6b7280);
}
/* سطر أنواع التغيير تحت العنوان — بلغة السجلّ نفسها. */
.dash-change {
  font-size: var(--fs-micro); color: var(--brand); font-weight: 600; margin-top: 2px;
}
.dash-change.muted { color: var(--slate-400, #9ca3af); font-weight: 500; }


/* ══ R204 ج — سطر الخلل الصامت ═══════════════════════════════════ */
/* الدَّين والإعادات أدقّ مقياسين في النظام — ولم يكونا يظهران إطلاقاً.
   ⚠️ والسطر يظهر عند وجود خلل فقط: اليوم الهادئ لا يراه. */
.dash-silent {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  margin-top: 10px; padding: 9px 12px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e5e7eb); border-radius: 9px;
  font-size: var(--fs-meta); font-weight: 600;
}
.dash-silent a { color: var(--slate-700, #374151); text-decoration: none; }
.dash-silent a:hover { color: var(--brand); text-decoration: underline; }


/* ══ R205 ①.2 — سطر تفصيل «مكتملة» ═══════════════════════════════ */
/* خمس من سبع أُنهيت يدوياً = إشارة عن صحّة النظام، لا تصنيف. */
.cc-note {
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e5e7eb); border-radius: 9px;
  font-size: var(--fs-meta); color: var(--slate-600, #4b5563);
}
/* سهم الفرز — كان الوسم ناقصاً في جدول المتابعة والآلية قائمة. */
.sort-arrow { font-size: 10px; color: var(--brand); margin-inline-start: 3px; }


/* ══ R206 ②.7 — الرابط المتبادل بين التابين ══════════════════════ */
/* التابان يعرضان نفس المواقع — أحدهما يُدير والآخر يقارن. */
.tab-crosslink {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tab-crosslink .btn { margin-inline-start: auto; }


/* ══ R209 ⑩ — شبكة ثلاثية لقواعد الاختيار ════════════════════════ */
/* ثلاث بطاقات في شبكة رباعية تترك فراغاً في الطرف. */
.stats-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .stats-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats-grid--3 { grid-template-columns: 1fr; } }

/* ══ R209 ⑤ — «كل المواقع ←» كان رابطاً بنفسجياً بلا تنسيق ═══════ */
.attn-more a {
  color: var(--brand); text-decoration: none; font-weight: 600;
}
.attn-more a:hover { text-decoration: underline; }


/* ══ R211 — رقم القسم في رأسه ═══════════════════════════════════ */
/* الصفحة كانت قائمة أسئلة بلا أرقام — تفتحها واحداً واحداً لتعرف. */
.report-sec__count {
  margin-inline-start: auto; flex-shrink: 0;
  font-size: var(--fs-micro); font-weight: 700;
  color: var(--slate-500, #6b7280); font-variant-numeric: tabular-nums;
}
.report-sec__count.is-bad { color: var(--danger); }


/* ══ R213 — ذيل «نشاط اليوم» ══════════════════════════════════════ */
/* كان سطرين: العدّ ثمّ رابط بنفسجيّ تحته بلا محاذاة. */
.activity-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--slate-100, #f1f5f9);
}
/* ⚠️ R244 رفض `margin-inline-start: auto` لأنها تمطّ الفجوة بكل العرض
   المتبقّي ⇒ هوّة ضخمة. والرفض كان في محلّه — لكنّه رفض **الحيلة**
   لا الفكرة: العنصران **فعلان مختلفان جذرياً** (توسيع في المكان مقابل
   مغادرة الصفحة) ⇒ طرفان لا متجاوران.
   ⇒ UI-FOOT: `space-between` مع سقف عرض ⇒ فصل واضح بلا هوّة. */
.activity-foot { justify-content: space-between; max-width: 560px; }
.activity-foot > .btn { flex: 0 0 auto; }


/* ══ R222 — صفّ التبويبات: التبويبات يميناً والانتقال يساراً ═════ */
/* 🔴 كان `tab-crosslink` صفّاً كامل العرض فوق التبويبات ⇒ يدفعها لأسفل.
   ⇒ صفّ واحد: التبويبات تتمدّد والزرّ يلتصق بالطرف. */
.tabs-row { display: flex; align-items: center; gap: 12px; }
.tabs-row__tabs { flex: 1 1 auto; min-width: 0; }
/* ⚠️ و`ui-tabs` داخل الصفّ لا تحمل هامشها السفليّ — البطاقة تحمله. */
.tabs-row .ui-tabs { margin-bottom: 0; }
.tabs-row > .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .tabs-row { flex-wrap: wrap; }
  .tabs-row > .btn { margin-inline-start: auto; }
}


/* ══ R223 — أفعال الصفحة مجموعة في الطرف ═════════════════════════ */
/* 🔴 زرّ يتيم في طرف الصفّ يبدو مقطوعاً — والمجموعة توازنه. */
.tabs-row__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* 🔴 الشرائح كانت سطراً وحدها والزرّ داخل شريط الفلاتر كأنه حقل.
   ⇒ يتقاسمان سطراً: الترشيح يميناً وأفعال الصفحة يساراً. */
.toolbar-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar-row > .chip-filters { flex: 1 1 auto; margin-bottom: 0; }
.toolbar-row > .btn { flex: 0 0 auto; margin-inline-start: auto; }
/* فاصل مرن حين لا شرائح — يدفع الفعل إلى الطرف. */
.toolbar-row__spacer { flex: 1 1 auto; }


/* ══ R224 — مقالات الاستهداف والكلمات الحاظرة ════════════════════ */
/* «التفاصيل» كانت تعرض عدداً بلا مقالة واحدة. */
.tgt-det-articles { margin-top: 8px; border-top: 1px solid var(--slate-200, #e5e7eb); padding-top: 8px; }
.tgt-det-articles__head { font-size: var(--fs-micro); margin-bottom: 6px; }
.tgt-det-article {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px; border-bottom: 1px solid var(--slate-100, #f1f5f9);
  font-size: var(--fs-meta);
}
.tgt-det-article__title { flex: 1 1 auto; min-width: 0; }
.tgt-det-articles__pager {
  display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px;
}
/* «294 محظورة» بلا سبب ⇒ الكلمات الحاظرة وعدد كلٍّ. */
.tgt-why {
  padding: 8px 10px; background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e5e7eb); border-radius: 9px;
}
.tgt-why__row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: var(--fs-meta);
}


/* ══ R229 — أرشيف الإشعارات ═══════════════════════════════════════ */
/* صفّ واحد لكل إشعار — والمفتوح يتميّز بحدّه لا بخلفيته (قرار R225 ⑤). */
.notif-arc {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.notif-arc.is-open { border-inline-start: 3px solid var(--danger); padding-inline-start: 10px; }
.notif-arc__icon { flex: 0 0 auto; color: var(--slate-400, #9ca3af); }
.notif-arc__main { flex: 1 1 auto; min-width: 0; }
.notif-arc__title { font-weight: 600; font-size: var(--fs-meta); }
.notif-arc .badge, .notif-arc .btn { flex: 0 0 auto; }


/* ══ R235 — معاينة الاستهداف: كل المطابقين ═══════════════════════ */
/* «عيّنة 300» لم تعد — القائمة مرقَّمة وما يُستبعد يُحفظ. */
.tgt-prev-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 6px 0 8px; font-size: var(--fs-meta);
}
.tgt-prev-tools__chk { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.tgt-prev-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-bottom: 1px solid var(--slate-100); font-size: 13px;
}
/* المستبعَدة تُشطب — ترى قرارك دون أن تختفي. */
.tgt-prev-row.is-ex .tgt-prev-row__title { text-decoration: line-through; opacity: .55; }
.tgt-prev-row__title { flex: 1 1 auto; min-width: 0; }


/* ══ R238 — شريط إجراء النتائج ═══════════════════════════════════ */
/* 🔴 كان الاعتماد أسفل الصفحة: تختار هنا وتُمرّر لتطبّق هناك. */
.pm-actionbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--brand-light); border: 1px solid var(--brand);
  border-radius: 9px;
}
.pm-actionbar__count { flex: 1 1 auto; font-size: var(--fs-meta); }

/* ══ D-4 — قائمة الكلمات الفعّالة بمصادرها ═══════════════════════════ */
/* BW-UI: القائمة داخل .modal-scroll-body — التمرير للحاوية وحدها (لا تمرير متداخل) */
.bw-eff-list { margin: 0; }
.bw-eff-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border);
}
.bw-eff-row:last-child { border-bottom: none; }
.bw-eff-word { font-weight: 600; }
.bw-eff-src { display: flex; gap: 4px; flex-wrap: wrap; }

/* ══ BW — صفحة إدارة كلمات الموقع ═══════════════════════════════════ */
.bw-add-row { display: flex; gap: 8px; align-items: stretch; margin: 14px 0 8px; }
.bw-add-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.bw-add-row .btn { flex: 0 0 auto; }
.bw-search { width: 100%; margin: 0 0 6px; }
.bw-count-line { font-size: var(--fs-meta); color: var(--muted); min-height: 1.4em; }
/* BW-UI: فوق نافذة تعديل الموقع (50) · وتحت حوار التأكيد (80) */
#siteBlockedWordsModal { z-index: 60; }
.bw-eff-row .bw-eff-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.bw-eff-row .bw-eff-word { overflow-wrap: anywhere; }
.bw-state { display: block; padding: 18px 2px; color: var(--muted); }
.bw-eff-row.is-unblocked .bw-eff-word { text-decoration: line-through; opacity: .6; }
.bw-eff-row > .btn { margin-inline-start: auto; }

/* ══ SP — نُشرت بعد نقطة التوقّف ═══════════════════════════════════ */
.ur-art--after-stop { opacity: .62; }
.ur-art--after-stop .ur-art__title { color: var(--muted, #6b7280); }

/* ══ UX-BW — إضافة الكلمة ونطاقها ══════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bw-add-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bw-add-grid label, .bw-label { display: block; font-weight: 700; font-size: var(--fs-text); margin: 0 0 6px; }
.bw-add-grid input[type="text"], .bw-add-word input { width: 100%; box-sizing: border-box; margin: 0; }
.bw-scope-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-scope-seg label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--card); }
.bw-scope-seg label:has(input:checked) { border-color: var(--brand); background: var(--brand-50, rgba(37,99,235,.08)); color: var(--brand); }
.bw-scope-seg input { margin: 0; width: auto; }
.bw-scope-summary { margin: 10px 0 0; font-size: var(--fs-meta); color: var(--muted); }
.bw-add-actions { display: flex; justify-content: flex-start; margin-top: 14px; }
@media (max-width: 760px) { .bw-add-grid { grid-template-columns: 1fr; } }
/* القائمة: النطاق ظاهر وقابل للنقر */
.bw-scope-btn { border: 0; cursor: pointer; font: inherit; }
.bw-scope-btn:hover { filter: brightness(.96); text-decoration: underline; }
.bw-actions-spacer { flex: 1 1 auto; }
.bwd-group { margin-bottom: 14px; }
.bwd-group h4 { margin: 0 0 6px; font-size: var(--fs-text); }
.bwd-site { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid var(--border); }
.bwd-site:last-child { border-bottom: none; }
.bwd-site-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* ══ UX-IA — روابط سريعة في تفاصيل الموقع ═══════════════════════════ */
.sd-quicklinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sd-quicklinks .btn { display: inline-flex; align-items: center; gap: 6px; }
/* ══ UX-TG — بطاقة تفاصيل الاستهداف داخل متابعة الدورات ═══════════════ */
.progress-campaign-row.tg-card-row td { padding: 10px 14px; }
.progress-campaign-row.tg-card-row td::before { content: none !important; }
.tg-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.tg-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.tg-card__title { font-weight: 700; font-size: var(--fs-text); }
.tg-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.tg-card__facts div { min-width: 0; }
.tg-card__facts dt { font-size: var(--fs-meta); color: var(--muted); margin: 0; }
.tg-card__facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.tg-card__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 150px; }
.tg-card__actions .tg-danger-zone { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.tg-card .bar-track { width: 100%; max-width: 160px; display: inline-block; vertical-align: middle; }
@media (max-width: 760px) { .tg-card { grid-template-columns: 1fr; } .tg-card__actions { flex-direction: row; flex-wrap: wrap; } }

/* ══ BWS — صفحة الكلمات المحظورة ═══════════════════════════════════════ */
.bw-page__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bw-page__head h3 { margin: 0; }
.bw-page__sub { flex-basis: 100%; }
.bw-add-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bw-add-line__word { flex: 1 1 260px; min-width: 200px; margin: 0; }
.bw-add-line .bw-scope-seg { flex-wrap: nowrap; gap: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.bw-add-line .bw-scope-seg label { border: 0; border-radius: 0; padding: 8px 12px; white-space: nowrap; }
.bw-add-line .bw-scope-seg label + label { border-inline-start: 1px solid var(--border); }
.bw-add-line .bw-scope-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bw-add-line__group select { margin: 0; min-width: 160px; }
.bw-add-line .bw-scope-summary { flex-basis: 100%; }
.bw-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.bw-toolbar .field-search { flex: 2 1 220px; margin: 0; }
.bw-toolbar select { flex: 1 1 150px; margin: 0; width: auto; }
.bw-list-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
.bw-list-head__all { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: var(--fs-meta); }
.bw-list-head__all input { width: 16px; height: 16px; margin: 0; }
.bw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px !important; margin-bottom: 8px; }
.bw-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.bw-row__main input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.bw-row__scope { color: var(--muted); font-size: var(--fs-meta); }
.bw-row__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bw-row-menu { position: relative; }
.bw-row-menu__list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); padding: 4px; }
.bw-row-menu__list button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; text-align: start; }
.bw-row-menu__list button:hover { background: var(--slate-50, #f5f7fa); }
.bw-row-menu__list button.danger { color: var(--danger); }
.bw-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bw-list-foot select { width: auto; margin: 0; }
/* أيقونة 🚫 في صفّ الموقع مع عدد المُزالة */
.bw-row-btn { position: relative; }
.bw-row-count { position: absolute; top: -5px; inset-inline-start: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--warn, #d97706); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; }
/* أزرار الأيقونة (× / ↺) */
.icon-action { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.icon-action:hover { background: var(--slate-50, #f5f7fa); border-color: var(--border); color: var(--text); }
.icon-action:disabled { opacity: .4; cursor: default; }
.bw-eff-row.is-unblocked .bw-eff-word { text-decoration: line-through; opacity: .6; }
.toast__action { margin-inline-start: 10px; flex-shrink: 0; }
/* إدارة النطاق */
.bwd-scope-editor, .bwd-filters, .bwd-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bwd-scope-editor select, .bwd-filters select { width: auto; margin: 0; }
.bwd-filters input { flex: 2 1 220px; margin: 0; }
.bwd-bulk { padding: 8px 10px; background: var(--slate-50, #f5f7fa); border-radius: var(--radius); }
.bwd-group { margin-bottom: 14px; }
.bwd-group__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.bwd-group__actions { margin-inline-start: auto; display: flex; gap: 6px; }
.bwd-table { width: 100%; border-collapse: collapse; }
.bwd-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bwd-table tr:last-child td { border-bottom: 0; }
.bwd-table tr.is-excluded .bwd-name { opacity: .6; }
.bwd-cb { width: 28px; } .bwd-cb input { width: 16px; height: 16px; margin: 0; }
.bwd-src, .bwd-state { white-space: nowrap; } .bwd-act { width: 40px; text-align: end; }
.btn-xs { padding: 3px 8px; font-size: 12px; }

/* ══ BWS-G — نافذة قرار الاستثناءات ══════════════════════════════════ */
.bw-decision-overlay { z-index: 90; }
.bw-decision { width: min(520px, calc(100vw - 32px)); }
.bw-decision h3 { margin: 0 0 6px; padding-inline-end: 28px; }
.bw-decision__list { margin: 10px 0 14px; padding-inline-start: 18px; max-height: 40vh; overflow-y: auto; }
.bw-decision__list li { margin: 4px 0; }
.bw-decision__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bw-decision__actions .btn { flex: 1 1 200px; }

/* ══ BWS-UI2 — اتّساق سطر الإضافة · قائمة مضغوطة · تحديد في رأس القائمة ══ */
.bw-add-line { align-items: stretch; }
.bw-add-line > .bw-add-line__word, .bw-add-line > .btn, .bw-add-line__group select { height: 44px; box-sizing: border-box; }
.bw-add-line .bw-scope-seg { height: 44px; box-sizing: border-box; border-radius: var(--radius); align-items: stretch; background: var(--card); }
.bw-add-line .bw-scope-seg label { display: inline-flex; align-items: center; font-weight: 500; font-size: var(--fs-text); padding: 0 14px; color: var(--text); background: transparent; }
.bw-add-line .bw-scope-seg label:has(input:checked) { background: var(--brand); color: #fff; border-color: var(--brand); }
.bw-add-line .bw-scope-seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -3px; }
.bw-scope-summary[hidden] { display: none; }
.bw-page { padding-top: 18px; }
/* 🔴 كان `overflow: hidden` (لقصّ الزوايا الدائريّة) ⇒ قائمة «⋮» تُقصّ حين
   تتجاوز الحاوية — المُثبَت: صفّان فقط في النتيجة ⇒ «تعديل النصّ» ظاهر
   و«حذف» مخفيّ تحته. ويقع لآخر صفّ في أيّ صفحة.
   ⇒ `overflow: visible`، والزوايا تُقصّ على الصفّين الطرفيّين وحدهما —
     فالشكل واحد والقائمة حرّة. */
#blockedWordsGlobalList { border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; }
#blockedWordsGlobalList > .bw-row:first-child { border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); }
#blockedWordsGlobalList > .bw-row:last-child  { border-end-start-radius: var(--radius); border-end-end-radius: var(--radius); }
/* والقائمة فوق كل ما حولها — الصفوف التالية لا تغطّيها */
.bw-row-menu__list { z-index: 60; }
#blockedWordsGlobalList:empty { border: 0; }
.bw-row.card { box-shadow: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; padding: 8px 12px !important; }
.bw-row.card:last-child { border-bottom: 0; }
.bw-row.card:hover { background: var(--slate-50, #f7f9fb); }
.bw-list-head { padding: 6px 13px; margin: 8px 0 0; }
.bw-list-head__all { font-weight: 500; color: var(--muted); }
.bw-exc-link { border: 0; background: none; padding: 0; font: inherit; color: var(--warn, #b45309); font-weight: 600; cursor: pointer; }
.bw-exc-link:hover { text-decoration: underline; }
.bw-dup { font-size: 11px; }

/* ══ BWS-UI4 — التحكّم المُقسَّم (كل المواقع | مجموعة | مواقع محدَّدة | مسودة) ═════════
   🔴 الجذر المُثبت: قاعدة قديمة عامّة `#tab-blockedwords label { margin-top:10px; display:block;
      font-weight:700 }` بمحدِّد **ID** — أقوى من كل قواعد `.bw-add-line .bw-scope-seg label`
      (أصناف فقط). ⇒ كل خيار يُزاح 10px للأسفل داخل حاوية ارتفاعها 44px مع overflow:hidden
      ⇒ الخلفية الزرقاء تبدأ متأخّرة وتُقصّ من الأسفل (الصور) + خطّ عريض غير مقصود.
   ⇒ لا ترقيع بـ!important: نفس وزن المحدِّد (ID) + تصميم «Segmented control» قياسيّ:
      مسار رماديّ بحشوة داخليّة، والخيار المحدَّد «قرص» أزرق كامل الارتفاع بزوايا داخليّة —
      لا فواصل تُقصّ ولا حوافّ تتعارض مع زاوية الحاوية. */
#tab-blockedwords .bw-scope-seg {
  display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 2px;
  height: 44px; box-sizing: border-box; padding: 3px; margin: 0;
  background: var(--slate-100, #eef1f5); border: 1px solid var(--border); border-radius: 10px;
  overflow: visible;
}
#tab-blockedwords .bw-scope-seg label {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  margin: 0; padding: 0 14px; height: auto; min-width: 0;
  border: 0; border-radius: 7px; background: transparent;
  font-size: var(--fs-text); font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--text); cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#tab-blockedwords .bw-scope-seg label + label { border-inline-start: 0; }
#tab-blockedwords .bw-scope-seg label:hover { background: rgba(0, 0, 0, .04); }
#tab-blockedwords .bw-scope-seg label:has(input:checked) {
  background: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
#tab-blockedwords .bw-scope-seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
#tab-blockedwords .bw-scope-seg input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
/* نفس الجذر يمسّ بقيّة عناصر الصفحة داخل سطر الإضافة وشريط التصفية ورأس القائمة */
#tab-blockedwords .bw-add-line input:not([type="radio"]):not([type="checkbox"]),
#tab-blockedwords .bw-add-line select,
#tab-blockedwords .bw-toolbar input,
#tab-blockedwords .bw-toolbar select,
#tab-blockedwords .bw-list-foot select { margin: 0; }
#tab-blockedwords .bw-add-line__group { display: inline-flex; align-items: stretch; }
#tab-blockedwords .bw-list-head__all {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 500; font-size: var(--fs-meta); color: var(--muted);
}
@media (max-width: 760px) {
  #tab-blockedwords .bw-scope-seg { width: 100%; }
  #tab-blockedwords .bw-scope-seg label { flex: 1 1 0; padding: 0 8px; }
}

/* ══ UI5 — DNA موحّد لأزرار الإنشاء (إضافة موقع · إنشاء مجموعة · إضافة كلمة) ══════════
   قبل: «[أيقونة] إضافة موقع» · «+ إنشاء مجموعة» (رمز نصّيّ) · «إضافة» (بلا أيقونة ولا مفعول).
   بعد: بنية واحدة — زرّ أساسيّ · أيقونة + SVG واحدة · فعل + مفعول · نفس الارتفاع والمسافة. */
.btn.btn-create { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-create__icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.btn-create__icon svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ══ UI5 — شريط الترقيم في صفحة الكلمات المحظورة ═════════════════════════════
   🔴 الجذر: نفس القاعدة القديمة بمحدِّد ID `#tab-blockedwords input { width:100%; margin:5px 0; … }`
      تمطّ حقل «رقم الصفحة» إلى كامل العرض ⇒ الأزرار تنضغط وتلتصق («الأولىالسابقةالتاليةالأخيرة»).
   ⇒ حقل الصفحة بحجمه الطبيعيّ + تخطيط الذيل: الترقيم يأخذ المساحة و«بالصفحة» في الطرف. */
#tab-blockedwords .pagination-bar .page-jump-input {
  width: 56px; margin: 0; padding: 6px 4px; text-align: center; padding-inline-end: 4px;
  border-radius: var(--radius-md, 8px);
}
#tab-blockedwords .bw-list-foot { align-items: center; }
#tab-blockedwords .bw-list-foot > #blockedWordsGlobalPagination { flex: 1 1 auto; min-width: 0; }
#tab-blockedwords .bw-list-foot .pagination-bar { margin-top: 0; padding-top: 0; border-top: 0; }
#tab-blockedwords .bw-list-foot { border-top: 1px solid var(--border); padding-top: 12px; }
#tab-blockedwords .pagination-controls { align-items: center; flex-wrap: wrap; }
#tab-blockedwords .bw-list-foot { display: flex; flex-wrap: nowrap; gap: 12px; justify-content: space-between; }
#tab-blockedwords .bw-list-foot > select#blockedWordsPageSize { width: auto; min-width: 140px; flex: 0 0 auto; margin: 0; }
@media (max-width: 760px) {
  #tab-blockedwords .bw-list-foot { flex-wrap: wrap; }
  #tab-blockedwords .bw-list-foot > select#blockedWordsPageSize { width: 100%; }
}

/* ══ UI6 — أزرار بطاقة الاستهداف (متابعة الدورات) ═══════════════════════════════
   🔴 الجذر: «منطقة الخطر» كتلة عاديّة ⇒ زرّ «إلغاء الاستهداف» بعرضه الطبيعيّ منزاحاً عن
      «إدارة الاستهداف» الممتدّ بكامل العرض، وبتعبئة حمراء ثقيلة تخالف نمط الصفحة
      (أزرار الصفّ: «إنهاء الدورة» حمراء بإطار).
   ⇒ عمود واحد بعرض واحد لكل الأزرار · الفعل الخطِر بنفس DNA «إنهاء الدورة» (إطار أحمر). */
.tg-card__actions { min-width: 180px; }
.tg-card__actions > .btn,
.tg-card__actions .tg-danger-zone > .btn { width: 100%; justify-content: center; text-align: center; }
.tg-card__actions .tg-danger-zone { display: flex; flex-direction: column; align-items: stretch; margin-top: 0; }
@media (max-width: 760px) {
  .tg-card__actions { flex-direction: column; }
}

/* ══ TGT-P1 — تحديد المقالات في شاشة الاستهداف ═════════════════════════ */
.tgt-pick-hint { margin: 10px 0 6px; font-size: var(--fs-meta); color: var(--muted); }
.tgt-pick-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px); background: var(--slate-50, #f7f9fb); }
.tgt-pick-bar__sum { font-weight: 700; font-size: var(--fs-meta); }
.tgt-prev-row--picked { background: rgba(16, 185, 129, .08); border-radius: 6px; }
.tgt-prev-row--picked > span:first-of-type { font-weight: 600; }
.tgt-activate-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tgt-activate-row .btn { flex: 0 1 auto; }

.tgt-pick-bar .btn[disabled] { opacity: .6; cursor: progress; }

/* ══ ART-A/B — صفّ المقالات: أيقونات · شرائح · شريط لاصق ═════════════════ */
.article-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.article-actions .row-icon-btn { flex: 0 0 auto; }
.article-actions .row-icon-btn[disabled] { opacity: .45; cursor: not-allowed; }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.art-chip { border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: var(--fs-meta);
  font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.art-chip:hover { background: var(--slate-50, #f3f4f6); }
.art-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.art-chip b { font-weight: 700; }
.art-chip--calc { border-style: dashed; color: var(--muted); }
.art-page-size { width: auto; min-width: 130px; margin: 0; }
#advancedFiltersToggle.has-active { border-color: var(--brand); color: var(--brand); font-weight: 700; }
/* شريط الفلاتر والعدّاد والجماعيّ يبقى ظاهراً أثناء التمرير */
#tab-articles .filters-bar--sticky { position: sticky; top: 0; z-index: 20;
  background: var(--card); padding-top: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); }
@media (max-width: 760px) {
  .article-actions { flex-wrap: wrap; }
  .art-page-size { width: 100%; }
}

/* ══ ART-E — صفّ الأيقونات · وشريط لا ينكسر مهما طال ═══════════════════════
   🔴 المُثبت: عند «تحديد الظاهر» تظهر خمسة أزرار بنصوص طويلة داخل شريط بلا
      التفاف ⇒ الشريط يتمدّد أفقيّاً فتنضغط الصفوف وتنكسر الصفحة كلّها.
   ⇒ التفاف صريح · عرض أقصى 100% · بلا تمرير أفقيّ للصفحة إطلاقاً. */
#tab-articles, #articlesToolbarBar, #articlesPageList { max-width: 100%; }
#articlesToolbarBar { overflow-x: clip; }
#tab-articles .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
#tab-articles .bulk-bar > * { flex: 0 0 auto; }
#tab-articles .bulk-bar > p#articleResultCount { flex: 1 1 220px; min-width: 0; }
#tab-articles .bulk-bar .btn { white-space: nowrap; }
.article-row { max-width: 100%; }
.article-row > div:first-child { min-width: 0; }
.article-row strong { overflow-wrap: anywhere; }
.article-actions { flex: 0 0 auto; }
.row-icon-btn--danger { color: var(--text); position: relative; }
.row-icon-btn--danger::after {   /* نقطة صغيرة = «فيه خيارات» بدل سهم يكسر التناظر */
  content: ''; position: absolute; inset-block-end: 5px; inset-inline-end: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--danger); opacity: .55; }
.row-icon-btn--danger:hover, .row-icon-btn--danger[aria-expanded="true"] {
  background: var(--danger); border-color: var(--danger); color: #fff; }
.row-icon-btn--danger:hover::after { background: #fff; opacity: .9; }
.row-icon-btn--ok { color: var(--success, #059669); }

.art-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px;
  padding: 6px 10px; border: 1px dashed var(--border); border-radius: 8px;
  font-size: var(--fs-meta); color: var(--muted); }
.art-legend svg { width: 14px; height: 14px; vertical-align: -2px; }
.art-legend > span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  #tab-articles .bulk-bar > p#articleResultCount { flex: 1 1 100%; }
  .article-row { flex-wrap: wrap; }
}
/* ══ GRP-2 — صفّ المجموعة في كل المنتقيات: بلا تراكب وبعرض واحد ══════════ */
.stg-row { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box;
  padding: 2px 6px; background: var(--slate-50, #f7f9fb); border-block-end: 1px solid var(--border); }
.stg-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 7px 6px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--text); text-align: start; }
/* ══ PKG2-⑥ — سهم واحد يدور: شكله يقول مفتوح أم مطويّ ══════════════════ */
.stg-caret { flex: 0 0 auto; width: 12px; color: var(--muted);
  display: inline-block; transition: transform .15s ease; }
.stg-caret.is-open { transform: rotate(-90deg); }
.stg-list[hidden] { display: none; }
.stg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-count { flex: 0 0 auto; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.stg-all { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--brand);
  border-radius: 999px; padding: 3px 10px; font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.stg-all:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.art-chip--review { border-style: dashed; color: var(--brand); }


/* ══ PKG1-① — صفّ المقالات: زرّان بنصّ ═══════════════════════════════════
   الصفّ صار فعلين اثنين فقط ⇒ النصّ أوضح من الأيقونة المجرّدة، ولا يزاحم
   العنوان لأن العرض ثابت وصغير. */
.article-actions--pair { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; }
.art-act {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); cursor: pointer; font-family: inherit;
  font-size: var(--fs-meta); font-weight: 600;
  transition: border-color var(--ease-normal), color var(--ease-normal);
}
.art-act svg { width: 14px; height: 14px; flex: 0 0 auto; }
.art-act:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.art-act--do:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.art-act[disabled] { opacity: .45; cursor: not-allowed; }

/* ══ PKG0 — شريط إدارة المقالات = نفس DNA شريط «معاينة القادم» ═════════
   لا قيم «مشابهة»: العنصر يحمل صنف المرجع `ur-bulkbar` نفسه، فيرث منه
   الموضع (sticky داخل التدفّق) والبطاقة والظلّ والحشو حرفيّاً — ويستحيل
   أن يفترقا مستقبلاً لأن المصدر واحد.
   وهذه القواعد الثلاث هي كل ما يخصّ صفحة المقالات وحدها. */
.art-dock[hidden] { display: none; }
#tab-articles .art-dock { margin-block-start: 16px; }
.art-dock .ui-btn { white-space: nowrap; }
}


/* ══ PKG2-⑥ — رأس وضع البحث داخل المنتقي ════════════════════════════════
   الوضعان لا يتداخلان: تصفّح بأسهم ومجموعات · أو بحث بنتائج مسطّحة. */
/* ══ STP-MODE — شريط وضع البحث كان ينكسر ═══════════════════════════════
   🔴 عيبان: ① النصّ بلا غلاف ⇒ عنصر `flex` مجهول لا يُقصّ ⇒ يزاحم الزرّ
      ويكسر السطر على العرض الضيّق. ② الحاوية تتمرّر (340px بسقف) والشريط
      يمرّ معها ⇒ **يختفي زرّ «عودة للتصفّح»** بمجرّد التمرير.
   ⇒ النصّ في غلاف يُقصّ بثلاث نقاط · والشريط **ملتصق بالأعلى**. */
.site-typeahead__mode {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; font-size: var(--fs-micro); color: var(--muted);
  background: var(--slate-50, #f7f9fb); border-block-end: 1px solid var(--border);
  position: sticky; inset-block-start: 0; z-index: 1;
}
.stp-mode-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stp-back {
  border: 1px solid var(--border); background: var(--card); color: var(--brand);
  border-radius: 999px; padding: 2px 10px; font-family: inherit; font-size: var(--fs-micro);
  font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.stp-back:hover { background: var(--brand); border-color: var(--brand); color: #fff; }


/* ══ PKG3-⑩ — (ⓘ) صغيرة تحمل الشرح بدل نصّ دائم ═══════════════════════ */
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-inline-start: 4px; padding: 0;
  border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 12px; line-height: 1; cursor: help; vertical-align: -1px;
}
.info-dot:hover, .info-dot:focus-visible { color: var(--brand); }

/* ══ SCOPE — الهيكل العظميّ أثناء تحميل جدولَي «ما يعمل الآن» ═══════════
   🔴 كانت الشاشة تعرض «جارٍ التحميل…» نصّاً ساكناً بلا أي إشارة إلى الشكل
      القادم — فبدت معلّقة، خصوصاً مع بطء النقطة (392 طلباً · أُصلح). */
.scope-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.scope-skeleton span {
  display: block; height: 34px; border-radius: 8px;
  background: linear-gradient(90deg, var(--border) 25%, transparent 37%, var(--border) 63%);
  background-size: 400% 100%; animation: scopeShimmer 1.4s ease infinite; opacity: .45;
}
@keyframes scopeShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.scope-summary b { color: var(--text); }

/* ══ SCOPE — فاصل المجموعتين ════════════════════════════════════════════
   الترتيب كان صحيحاً (الأسوأ أوّلاً) لكنه يُقرأ كسلّم أرقام بلا معنى.
   العنوان يجعله مفهوماً في نظرة واحدة. */
.scope-group td {
  font-weight: 700; font-size: var(--fs-micro); padding: 8px 12px !important;
  background: var(--slate-50, #f7f9fb); color: var(--muted);
  border-block: 1px solid var(--border);
}
.scope-group.is-bad td { color: var(--danger); }

/* ══ SCOPE — شريط القيادة: يظهر حين تطغى مشكلة واحدة على أكثر من النصف */
.scope-lead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent);
  font-size: var(--fs-meta); font-weight: 600;
}

/* ══ SCOPE — سطر الحملة: حكم واحد يغني عن عشرات الصفوف المتطابقة ═══════ */
.scope-camp {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--slate-50, #f7f9fb);
  font-size: var(--fs-meta);
}
.scope-camp.is-bad { border-color: var(--danger); }

/* ══ منسدلة بمظهر صحيح — سهم ظاهر ونصّ غير مقصوص ════════════════════════
   🔴 كانت تستعمل صنف حقل نصّ (`field-search`) فيختفي السهم ويُقصّ النصّ. */
.ui-select {
  height: 34px; min-width: 200px; padding-inline: 10px 30px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card) no-repeat left 10px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  color: var(--text); font-family: inherit; font-size: var(--fs-meta);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.ui-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ══ جدول استهداف المجموعة — ستّة أعمدة في حاوية ضيّقة ═══════════════════
   🔴 بلا حدّ أدنى للعرض يضغط المتصفّح العمود الأطول نصّاً إلى حرف واحد
      في السطر. و`overflow-x:auto` لا يمرّر إلا بعرض أدنى يتجاوز الحاوية. */
.gt-table { min-width: 720px; }
.gt-table th, .gt-table td { vertical-align: middle; }
.gt-table td:nth-child(1), .gt-table td:nth-child(3), .gt-table td:nth-child(5),
.gt-table th { white-space: nowrap; }
.gt-table td:nth-child(2) { max-width: 260px; overflow-wrap: anywhere; }

/* ══ صفّ مقالة الاستهداف — حالة ووقت ومعاينة قبل الاستبعاد ══════════════ */
.tgt-det-article { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tgt-det-article__title { flex: 1 1 200px; min-width: 0; }
.tgt-det-article__when { flex: 0 0 auto; white-space: nowrap; }

/* ══ شرائح «المزيد» — النادر خلف زرّ، والشائع ظاهر ══════════════════════ */
.art-chip-more { position: relative; display: inline-flex; align-items: center; }
.art-chip-more__list { display: none; gap: 6px; flex-wrap: wrap; margin-inline-start: 6px; }
.art-chip-more.is-open .art-chip-more__list { display: inline-flex; }

/* ══ زرّ «المقالات المستبعدة» — تمييز صامت بلا لون ══════════════════════
   🔴 كان مطابقاً لجيرانه («تحديد الظاهر» · «20 بالصفحة» · «حدّد كل
      النتائج») وهي تعمل على القائمة أمامك، وهو **يفتح شاشة أخرى**.
   ⚠️ والمحاولة الأولى كتبت الحشوات بـ`style` من JS فتعارضت مع تنسيق
      الزرّ وخرجت الأيقونة عن حدّه ⇒ التنسيق كلّه هنا، والأيقونة بحجم
      مقيَّد صراحةً لا موروث. */
.btn-excluded {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 10px; padding-inline: 12px;
}
.btn-excluded > svg {
  width: 15px; height: 15px; flex: 0 0 15px; opacity: .7;
}
.btn-excluded > span { line-height: 1; }

/* ══ «ن مقالات» — شارة من نمط الشاشة نفسه ═══════════════════════════════
   🔴 **الجذر لم يكن الحجم بل الـDNA:** اخترعتُ عنصراً بصريّاً لا وجود له
      في النظام — حبّة زرقاء بخلفيّة زرقاء وأيقونة عين — بينما كل شيء في
      الشاشة شاراتٌ رماديّة هادئة. فبدت غريبة مهما ضبطتُ مقاسها.
   ⚠️ وحاولتُ ثلاث مرّات أن أُبرزها، وكنتُ **أُضيف** بينما المطلوب أن
      **أحذف** وأعود إلى النمط القائم.
   ⇒ شارة محايدة كأخواتها · بلا أيقونة · والدلالة على قابليّة الضغط
     تظهر **عند المرور وحده**. */
.bw-usage-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-meta); line-height: 1.6;
  color: var(--muted); background: var(--slate-50);
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.bw-usage-btn > b { font-weight: 700; color: var(--text); }
.bw-usage-btn::after { content: none; }

.bw-usage-btn:hover {
  color: var(--brand); border-color: var(--brand); background: var(--card);
}
.bw-usage-btn:hover > b { color: var(--brand); }
.bw-usage-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* صفر: حالة مختلفة نوعاً — مرشَّحة للحذف لا مدخل لمقالات */
.bw-usage-btn.bw-usage--zero { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ══ صفّ الكلمة المحظورة ═══════════════════════════════════════════════
   🔴 جرّبتُ شبكة بثلاثة أعمدة ثابتة لتتحاذى الأرقام — **فتباعدت العناصر
      بمسافات ضخمة** وصار كل حقل في عالم. الشبكة تفرض عرضاً لكل عمود ولو
      كان محتواه كلمتين.
   ⇒ عودة إلى التدفّق الطبيعيّ: العناصر متجاورة، والفراغ بينها ثابت
     صغير، والإجراءات وحدها تُدفَع إلى الطرف. */
.bw-row__main {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bw-row__main > .bw-word-text { font-size: var(--fs-body); }
.bw-row__scope { color: var(--muted); font-size: var(--fs-meta); }

/* ══ CC-BULK-BTN — زرّ البدء الجماعيّ ═══════════════════════════════════
   🔴 محاولتي الأولى زادت الحشوة والخطّ على زرّ مقفول بـ`.btn.btn-sm {
      height: 28px }` ⇒ النصّ فاض وانقصّ من تحت. لم أقرأ قواعد الأزرار أوّلاً.
   ⇒ `btn-sm` أُزيلت من الزرّين في HTML ⇒ يأخذان `.cc-toolbar .btn` القائمة
     (38px) كباقي أزرار الشريط. والسطر الوحيد هنا: المحاذاة على خطّ الحقول
     (تحت عناوينها) بدل التوسّط الرأسيّ. */
.cc-toolbar #ccBulkStartBtn,
.cc-toolbar #ccBulkStartCompletedBtn { align-self: flex-end; }