/* ==========================================================================
   muath.app — نظام التصميم الموحد
   الثيم الحالي: «الميناء الهادئ» (تركوازي + طيني)
   هذا الملف هو المصدر الوحيد لألوان وخطوط كل الأدوات: الرئيسية، /salary،
   /eos، /saibor. تغيير هوية الموقع كاملًا = تعديل كتلة :root هنا فقط،
   ولا حاجة للمساس بأي صفحة.
   الأسماء القديمة (--primary-color، --brand-dark ...) مُعرَّفة هنا أيضًا حتى
   تستمر كل قواعد CSS داخل الصفحات بالعمل كما هي بلا أي تعديل على التخطيط.
   ========================================================================== */

:root{
  color-scheme:light;
  /* ---- الهوية: الميناء الهادئ ---- */
  --mu-teal:#2D7D7D;         /* اللون الأساسي */
  --mu-teal-light:#3F9C9C;
  --mu-teal-deep:#1F5C5C;
  --mu-clay:#C98B5E;         /* لون التمييز: طيني دافئ */
  --mu-clay-soft:#DFA87C;
  --mu-clay-text:#8A5230;    /* طيني داكن للنص فقط — تباين كافٍ على أبيض */

  /* ---- الأسطح والنص ---- */
  --mu-bg:#F4F8F8;
  --mu-surface:#FFFFFF;
  --mu-surface-alt:#FBF5EF;
  --mu-text:#26363B;
  --mu-text-muted:#5E6F75;
  --mu-border:#E2ECEC;

  /* ---- الحالات ---- */
  --mu-error:#B5524A;
  --mu-success:#2F7D57;
  --mu-warning:#C98B5E;
  --mu-up:#B5524A;
  --mu-down:#2F7D57;

  /* ---- التدرجات والظلال ---- */
  --mu-gradient:linear-gradient(135deg,#2D7D7D 0%,#3F9C9C 100%);
  --mu-gradient-hover:linear-gradient(135deg,#1F5C5C 0%,#2D7D7D 100%);
  --mu-shadow:0 8px 28px rgba(45,125,125,.10);
  --mu-shadow-hover:0 12px 36px rgba(45,125,125,.18);

  /* ---- الشكل ---- */
  --mu-radius:13px;
  --mu-radius-sm:9px;
  --mu-transition:all .3s cubic-bezier(.4,0,.2,1);

  /* ---- الخطوط ---- */
  --mu-font-head:'Readex Pro';
  --mu-font-body:'IBM Plex Sans Arabic';

  /* ====== الأسماء القديمة المستخدمة داخل الصفحات ====== */
  --primary-color:var(--mu-teal);
  --primary-light:var(--mu-teal-light);
  --primary-dark:var(--mu-teal-deep);
  --secondary-color:var(--mu-clay);
  --bg-color:var(--mu-bg);
  --card-bg:var(--mu-surface);
  --text-color:var(--mu-text);
  --text-muted:var(--mu-text-muted);
  --border-color:var(--mu-border);
  --shadow:var(--mu-shadow);
  --shadow-hover:var(--mu-shadow-hover);
  --gradient:var(--mu-gradient);
  --gradient-hover:var(--mu-gradient-hover);
  --radius:var(--mu-radius);
  --radius-sm:var(--mu-radius-sm);
  --transition:var(--mu-transition);
  --error-color:var(--mu-error);
  --success-color:var(--mu-success);
  --warning-color:var(--mu-warning);
  --error-bg:#FDF1F0; --error-border:#F2CFCB; --error-text:#9A3B33;
  --warning-bg:var(--mu-surface-alt);
  --warning-border:#E0B98F;
  --warning-text:#7A4A22;

  /* أسماء سايبور */
  --brand-dark:var(--mu-teal);
  --brand-light:var(--mu-teal-light);
  --brand-gradient:var(--mu-gradient);
  --bg:var(--mu-bg);
  --text:var(--mu-text);
  --text-secondary:var(--mu-text-muted);
  --card-border:var(--mu-border);
  --card-shadow:var(--mu-shadow);
  --featured-bg:var(--mu-surface-alt);
  --gold:var(--mu-clay);
  --red-up:var(--mu-up);
  --green-down:var(--mu-down);
  --radius-card:var(--mu-radius);
  --radius-btn:var(--mu-radius-sm);
}

/* ==========================================================================
   الوضع الداكن — يعيد تعريف الأساسيات فقط، فتتبعها كل الأسماء المشتقة
   ========================================================================== */
[data-theme="dark"]{
  color-scheme:dark;
  --error-bg:rgba(181,82,74,.14); --error-border:rgba(181,82,74,.34); --error-text:#F0B8B2;
  --mu-teal:#7FC4C4;
  --mu-teal-light:#A5D8D8;
  --mu-teal-deep:#FFFFFF;
  --mu-clay:#DFA87C;
  --mu-clay-soft:#EDC29E;
  --mu-clay-text:#DFA87C;

  --mu-bg:#101A1C;
  --mu-surface:#18262A;
  --mu-surface-alt:rgba(223,168,124,.13);
  --mu-text:#E4EDED;
  --mu-text-muted:#93A5A8;
  --mu-border:rgba(255,255,255,.10);

  --mu-up:#E58A80;
  --mu-down:#6BC796;
  --mu-error:#E58A80;
  --mu-success:#6BC796;

  --mu-gradient:linear-gradient(135deg,#1F5C5C 0%,#2D7D7D 100%);
  --mu-gradient-hover:linear-gradient(135deg,#2D7D7D 0%,#3F9C9C 100%);
  --mu-shadow:0 8px 28px rgba(0,0,0,.35);
  --mu-shadow-hover:0 12px 36px rgba(0,0,0,.45);

  --warning-border:#7A4A22;
  --warning-text:#EDC29E;
}

/* ==========================================================================
   الهيدر الموحد — نفس الشريط في كل صفحات الموقع
   أزرار اللغة والوضع الداكن تُنقل إليه من كل صفحة كما هي، فتحتفظ بعملها.
   ========================================================================== */
.mu-head{
  position:sticky;top:0;z-index:100;
  background:var(--mu-surface);
  background:color-mix(in srgb, var(--mu-surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--mu-border);
  font-family:var(--mu-font-body),Tahoma,sans-serif;
  /* ارتفاع السطر صريح: بدونه يرث الشريط قيمة body في كل صفحة (1.7 و1.8 و1.9…)
     فيختلف ارتفاع الهيدر بين الصفحات ويقفز عند التنقل. */
  line-height:1.5;
}
@supports not (backdrop-filter:blur(1px)){ .mu-head{background:var(--mu-surface)} }
.mu-head__in{
  max-width:1200px;margin:0 auto;padding:9px 16px;
  display:flex;align-items:center;gap:14px;
}
.mu-head__brand{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--mu-font-head),Tahoma,sans-serif;
  font-weight:700;font-size:15px;color:var(--mu-text);text-decoration:none;
}
.mu-head__brand i{
  width:30px;height:30px;border-radius:50%;
  background:var(--mu-gradient);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700;
}
.mu-head__nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;flex-wrap:wrap}
.mu-head__nav a{
  font-size:13.5px;color:var(--mu-text-muted);text-decoration:none;
  padding:7px 12px;border-radius:var(--mu-radius-sm);
  transition:var(--mu-transition);white-space:nowrap;
}
.mu-head__nav a:hover{color:var(--mu-teal);background:var(--mu-bg)}
.mu-head__nav a[aria-current="page"]{
  color:var(--mu-teal);font-weight:600;background:var(--mu-surface-alt);
}
.mu-head__sep{width:1px;height:18px;background:var(--mu-border);margin:0 5px;flex:0 0 auto}
.mu-head__nav a.sec{font-size:12.5px;color:var(--mu-text-muted);opacity:.85}
.mu-head__nav a.sec:hover{opacity:1}
.mu-head__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* أزرار الصفحات المنقولة: تفقد التموضع العائم وتأخذ شكلًا موحدًا */
.mu-head__actions .theme-toggle,
.mu-head__actions .icon-btn,
.mu-head__actions .lang-btn{
  position:static !important;top:auto !important;left:auto !important;right:auto !important;
  width:auto;min-width:38px;height:38px;padding:0 11px;
  border-radius:var(--mu-radius-sm);border:1px solid var(--mu-border);
  background:var(--mu-surface);color:var(--mu-text-muted);
  box-shadow:none;transform:none !important;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--mu-font-body),Tahoma,sans-serif;font-size:12.5px;font-weight:600;
  transition:var(--mu-transition);
}
.mu-head__actions button:hover{color:var(--mu-teal);border-color:var(--mu-teal)}
.mu-head__actions svg{width:17px;height:17px}

/* صف ثانٍ لأقسام الصفحة الرئيسية — يظهر في الرئيسية وحدها */
.mu-head__sub{border-top:1px solid var(--mu-border);background:var(--mu-bg)}
.mu-head__sub .mu-head__in{padding:6px 16px;gap:2px;justify-content:center}
.mu-head__sub a{
  font-size:13px;color:var(--mu-text-muted);text-decoration:none;
  padding:5px 12px;border-radius:var(--mu-radius-sm);transition:var(--mu-transition);
}
.mu-head__sub a:hover{color:var(--mu-teal);background:var(--mu-surface)}

@media(max-width:700px){
  .mu-head__in{padding:7px 12px;gap:8px}
  .mu-head__brand > span{display:none}  /* الاسم فقط — لا الحرف داخل الدائرة */
  /* سطر واحد قابل للسحب بدل الالتفاف، حتى يبقى ارتفاع الهيدر واحدًا في كل صفحة */
  .mu-head__nav{
    flex-wrap:nowrap;overflow-x:auto;gap:0;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;min-width:0;
  }
  .mu-head__nav::-webkit-scrollbar{display:none}
  .mu-head__nav a{font-size:12.5px;padding:6px 8px;flex:0 0 auto}
  .mu-head__actions .theme-toggle,.mu-head__actions .icon-btn,.mu-head__actions .lang-btn{
    min-width:34px;height:34px;padding:0 8px}
  .mu-head__sub{overflow-x:auto;scrollbar-width:none}
  .mu-head__sub::-webkit-scrollbar{display:none}
  .mu-head__sub .mu-head__in{flex-wrap:nowrap;justify-content:flex-start}
  .mu-head__sub a{flex:0 0 auto}
}

/* ==========================================================================
   الفوتر الموحد — شريط الموقع أسفل كل صفحة
   ========================================================================== */
.mu-foot{
  /* كل خاصية هنا مصرَّح بها عمدًا لإلغاء أي قاعدة footer{} أو .container تسرّبت
     من CSS الصفحة نفسها — الشريط السفلي يجب أن يكون بعرض الصفحة في كل أداة */
  /* width:auto لا 100% — مع 100% يبقى عرض الصندوق محسوبًا من الحاوية
     فلا تتمدد الهوامش السالبة في الصفحات التي تضع حشوة على body */
  display:block;width:auto;max-width:none;
  margin:0;padding:0;border:0;border-top:0;
  text-align:initial;float:none;
  background:#1F5C5C;color:#D6E8E8;
  font-family:var(--mu-font-body),Tahoma,sans-serif;
  font-size:12.5px;line-height:2;
}
.mu-foot__in{
  max-width:1200px;margin:0 auto;padding:18px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.mu-foot__links{display:flex;gap:14px;flex-wrap:wrap}
.mu-foot a{color:#EAF4F4;text-decoration:none;transition:var(--mu-transition)}
.mu-foot a:hover{color:var(--mu-clay-soft)}
.mu-foot__copy{color:#A8C9C9;font-size:12px}
@media(max-width:560px){
  .mu-foot__in{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 12px}
}

/* ==========================================================================
   ثنائية اللغة داخل الشريط والفوتر — تعمل على كل الصفحات، حتى التي لا تملك
   مبدّل لغة (تبقى lang="ar" فيظهر العربي وحده)
   ========================================================================== */
/* قاعدة عامة لكل الصفحات: إظهار لغة واحدة فقط. النمط هذا يحافظ على نوع العرض
   الأصلي للعنصر (فقرة تبقى فقرة) بخلاف فرض display:inline. */
html[lang="ar"] .t-en{display:none}
html[lang="en"] .t-ar{display:none}

/* الهيدر والفوتر: يعملان حتى لو لم تُضبط lang بعد */
.mu-head .t-en,.mu-foot .t-en{display:none}
html[lang="en"] .mu-head .t-en,html[lang="en"] .mu-foot .t-en{display:inline}
html[lang="en"] .mu-head .t-ar,html[lang="en"] .mu-foot .t-ar{display:none}

/* الطباعة: لا حاجة لشريط تنقل ولا فوتر موقع على الورق */
@media print{.mu-head,.mu-foot{display:none}}

/* ==========================================================================
   عناوين مقصوصة بالتدرّج (background-clip:text)
   التدرّج الأساسي داكن ليصلح خلفيةً للأزرار بنص أبيض، لكنه يجعل هذه العناوين
   شبه غير مرئية في الوضع الداكن. الحل: نص صلب فاتح بدل القص.
   ========================================================================== */
[data-theme="dark"] .hero h1,
[data-theme="dark"] .header h1,
[data-theme="dark"] .code{
  -webkit-text-fill-color:var(--mu-text);
  color:var(--mu-text);
  background:none;
}

/* عناوين فرعية داخل أقسام السياسات (ما يخص كل أداة) */
.p-section h3{
  font-family:var(--mu-font-head),Tahoma,sans-serif;
  font-size:15px;font-weight:600;color:var(--mu-teal);
  margin:22px 0 8px;padding-inline-start:11px;
  border-inline-start:3px solid var(--mu-clay);
}
.p-section h3:first-of-type{margin-top:14px}

/* عنوان لقارئ الشاشة فقط */
.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}

/* صندوق تنبيه مشترك — يُستخدم في الدليل وصفحتي الخصوصية وإخلاء المسؤولية.
   كان معرّفًا داخل صفحة الدليل وحدها، فيظهر عاريًا في الصفحتين الأخريين. */
.highlight-box{
  background:var(--mu-surface-alt);
  border-inline-start:4px solid var(--mu-teal);
  padding:18px 20px;border-radius:var(--mu-radius-sm);margin:18px 0;
}
.highlight-box p{margin:0}
.highlight-box i{color:var(--mu-teal);margin-inline-end:8px}

/* ===== رابط «تخطَّ إلى المحتوى» =====
   مخفي بصريًا حتى يصل إليه التركيز بلوحة المفاتيح، فيظهر أول عنصر في الصفحة.
   يمنع مستخدم لوحة المفاتيح من المرور على روابط الهيدر السبعة في كل صفحة. */
.skip-link{
  position:absolute;inset-inline-start:16px;top:-80px;z-index:200;
  padding:10px 18px;border-radius:var(--mu-radius-sm,10px);
  background:var(--mu-teal,#2D7D7D);color:#fff;font-weight:700;
  text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:16px;outline:3px solid var(--mu-clay,#B8755C);outline-offset:2px}
/* لا نرسم إطار تركيز حول المحتوى كله عند الوصول إليه عبر رابط التخطي */
main:focus{outline:none}

/* ===== أيقونات SVG مضمّنة =====
   حلّت محل Font Awesome: كانت تكلّف 148 كيلوبايت خطًّا + 19 للـCSS ومصدرًا خارجيًا
   كاملًا (cdnjs) مقابل خمسين أيقونة. الآن بلا أي طلب شبكة.
   الأيقونات من Font Awesome Free 6.4.0 — رخصة الأيقونات CC BY 4.0
   https://fontawesome.com/license/free */
.ic{
  width:1em;height:1em;fill:currentColor;
  vertical-align:-.125em;flex:none;display:inline-block;
}