/* =========================================================
   رنين — تصحيحات فوق أنماط البروتوتايب
   ---------------------------------------------------------
   raneen.css نسخة أمينة مما استُخرج من البروتوتايب، ولا تُحرَّر: كل
   إصلاح يعيش هنا ليبقى ظاهرًا ومراجَعًا، وليبقى الفرق عن الأصل
   معروفًا سطرًا بسطر.

   يُحمَّل بعد raneen.css.
   ========================================================= */

/* ---------------------------------------------------------
   ١ — الشعار يطفح خارج الشريط الجانبي المطوي تلقائيًا

   البروتوتايب يطوي الشريط إلى 72px عند العرض 1100px فأقل
   (raneen.css:195)، ويخفي عندها نصّ العلامة وعناوين الأزرار — لكنه
   يترك .brand-logo على عرضه الكامل 174px. فيطفح الشعار خارج الشريط
   ويغطّي الشريط العلوي.

   الطيّ اليدوي بزرّ .sidebar-toggle يعالج الأمر صحيحًا
   (raneen.css:235) بتصغير الشعار إلى 50px. التصحيح هنا هو تطبيق
   المعالجة نفسها على الطيّ التلقائي — أي إكمال قاعدة ناقصة، لا
   تغيير تصميم.
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  .brand {
    justify-content: center;
  }

  .brand-logo {
    width: 50px;
    max-height: 48px;
    object-fit: contain;
    object-position: center;
  }
}

/* ---------------------------------------------------------
   ٢ — أخطاء التحقق داخل النماذج

   البروتوتايب لا يعرض أخطاء تحقق أصلًا: نماذجه تحفظ في الذاكرة ولا
   ترفض شيئًا. ولمّا صار الحفظ يمرّ بالسيرفر، صارت رسائل الرفض جزءًا
   من الواجهة وتحتاج شكلًا.
   --------------------------------------------------------- */
.form-error {
  background: #fde8ea;
  color: #c4273a;
  border: 1px solid #f6c9cf;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-error:last-child {
  margin-bottom: 0;
}

/* الإشعار حين يبلّغ عن فشل، لا عن نجاح. */
.toast.toast-error {
  background: #c4273a;
}

/* ---------------------------------------------------------
   ٣ — أزرار التنقّل المعطَّلة

   الصفحات التي لم تُبنَ بعد تظهر معطَّلة لا محذوفة، حتى تبقى خارطة
   النظام مرئية. والمعطَّل يجب ألّا يستجيب للمرور فيبدو قابلًا للنقر.
   --------------------------------------------------------- */
.nav-btn[disabled]:hover {
  background: transparent;
}

/* ---------------------------------------------------------
   ٤ — قائمة الحساب

   البروتوتايب يفتحها بدالة toggleAccountMenu ويصنّفها بـ .open، وهو
   ما نفعله. هذه القاعدة موجودة في الأصل، وتُعاد هنا صراحةً لأن
   Bootstrap يحمل .open بمعنى آخر في بعض مكوّناته.
   --------------------------------------------------------- */
.account-menu {
  display: none;
}

.account-menu.open {
  display: block;
}

/* ---------------------------------------------------------
   ٥ — وسم البيانات المحاكاة

   الجسر الأندرويدي الأصلي غير متوفّر بعد، فبعض الزيارات تُغذّى
   بحمولات مولَّدة بشكل العقد. والوسم يجب أن يكون ظاهرًا لا لطيفًا:
   رقم في تقرير لا يُعرَف مصدره أسوأ من غياب الرقم.

   تُحذف هذه القواعد مع المحاكي حين يصل الجسر.
   --------------------------------------------------------- */
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: repeating-linear-gradient(45deg, #FFF4D8, #FFF4D8 6px, #ffeec2 6px, #ffeec2 12px);
  color: #8a5200;
  border: 1px solid #e0b45c;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.sim-banner {
  background: repeating-linear-gradient(45deg, #FFF4D8, #FFF4D8 10px, #ffeec2 10px, #ffeec2 20px);
  border: 1px solid #e0b45c;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 12px;
  color: #7a4800;
  font-size: 11px;
  line-height: 1.7;
}

.sim-banner b { display: block; font-size: 12px; margin-bottom: 3px; }

/* صفّ زيارة محاكاة: شريط جانبي يميّزه في الجدول. */
tr.sim-row td:first-child { box-shadow: inset 3px 0 0 #e0b45c; }


/* =========================================================
   6 — عرض الهاتف (≤ 620px)

   أصغر نقطة توقّف في البروتوتايب هي 700px، ولا شيء تحتها: الهاتف
   لم يُصمَّم له أصلًا. وقياسٌ على 375px أظهر صفحتين تزحفان أفقيًا —
   الأصول الماديّة والملف الشخصي — وسببهما واحد: شبكاتٌ بأعمدة
   ثابتة العدد، وعناصرها min-width:auto فلا تقبل النزول تحت مقاس
   محتواها، فيفيض مجموع الأعمدة على الحاوية وتزحف الصفحة كلها.

   وباقي الصفحات لا تزحف: جداولها العريضة داخل .table-wrap وهي
   overflow-x:auto، فتزحف في مكانها كما يُراد لها.
   ========================================================= */
@media (max-width: 620px) {

  /* نموذج من عمودين على شاشة 275px يعني عمودين بعرض 138px لكلٍّ
     منهما حقلٌ وعنوانه. عمود واحد أصدق. */
  .form-grid { grid-template-columns: 1fr; }

  /* الشرط الذي يسمح للعمود بالانكماش فعلًا: بدونه يظلّ 1fr محكومًا
     بمقاس المحتوى الأدنى مهما ضاقت الحاوية. */
  .form-grid > *,
  .detail-grid > *,
  .asset-kpi-grid > * { min-width: 0; }

  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .asset-kpi-grid { grid-template-columns: repeat(2, 1fr); }

  /* أزرار الأدوات تلتفّ بدل أن تضغط بعضها. */
  .toolbar { gap: 8px; }
}


/* =========================================================
   7 — الحقل المقفول يبان مقفولًا

   مودال التذكرة المغلقة يجعل كل حقوله readonly/disabled — وهو
   الصحيح: تذكرة انتهت لا تُحرَّر. لكن الحقل المقفول كان يبدو
   كالمفتوح تمامًا: خلفية بيضاء وحدّ عادي ومؤشّر كتابة. فيضغط
   المستخدم ولا يحدث شيء، بلا سبب ظاهر.

   والقاعدة هنا واحدة في كل الواجهة: ما لا يقبل الإدخال لا يُعرض
   كأنه يقبله — سواء كان مقفولًا لأن السجلّ انتهى، أو لأنّ قيمته
   مشتقّة لا تُكتب (مثل «المعترف به في دفتر التكاليف»).
   ========================================================= */
.modal-body input[readonly],
.modal-body textarea[readonly],
.modal-body select:disabled,
.modal-body input:disabled {
  background: #f4f6f9;
  border-color: #e4e9f0;
  color: #5b6675;
  cursor: not-allowed;
}

.modal-body textarea[readonly] { resize: none; }


/* =========================================================
   8 — صفحة الحسابات

   صفحة لا نظير لها في البروتوتايب، فلا أنماط لها فيه. وهذان
   الصنفان وحدهما جديدان — وما عداهما يُعاد استعماله كما هو:
   ‏.asset-kpi و.badge و.table-wrap و.row-actions و.icon-btn.
   ========================================================= */

/* الحساب المعطَّل يُميَّز ولا يُخفى: الإيقاف حالة تُقرأ وتُراجَع،
   ومن يبحث عمّن أوقفه يجب أن يجده في الجدول لا خارجه. */
tr.user-row-inactive td { background: #fafbfc; color: #8a94a3; }
tr.user-row-inactive td b { color: #6b7583; font-weight: 700; }

/* وسم «أنت»: الأزرار التي تخصّ الصفّ نفسه معطَّلة، وهذا يقول لماذا. */
.user-self-tag {
  display: inline-block;
  background: #eaf2ff;
  color: #1769ff;
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 8px;
  font-weight: 800;
  vertical-align: middle;
  margin-inline-start: 4px;
}

/* الزرّ المعطَّل في عمود الإجراءات يبان معطَّلًا — القاعدة نفسها
   التي في القسم ٧: ما لا يقبل الضغط لا يُعرض كأنه يقبله. */
.row-actions .icon-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* صندوق التسليم في مودال التعطيل: يفصل ما ينتقل عمّا لا يُمسّ. */
.handover-box {
  background: #f8fafc;
  border: 1px solid #e6ecf4;
  border-radius: 9px;
  padding: 12px;
  margin: 12px 0 0;
}

.handover-box h4 { margin: 0 0 7px; font-size: 11px; }

.handover-list {
  margin: 0 0 10px;
  padding-inline-start: 18px;
  font-size: 11px;
  line-height: 1.9;
}


/* =========================================================
   9 — شريط تبويبات المودال على الشاشات الضيّقة

   ‏.modal-tabs في البروتوتايب flex بلا التفاف: أربعة تبويبات
   بعناوين طويلة («Overview & Identification») تخرج عن عرض 335px.
   ========================================================= */
@media (max-width: 620px) {
  .modal-tabs {
    flex-wrap: wrap;
    padding: 8px 10px;
  }

  .modal-tabs button { font-size: 9px; padding: 6px 8px; }
}


/* =========================================================
   ١٠ — تقرير الزيارات: الجدول والرسم جنبًا إلى جنب

   البروتوتايب يضع «Scan Outcome» يمين الجدول (لقطة 075).
   والنسبة 1.6fr/1fr تترك للجدول ذي الأعمدة الإحدى عشرة ما يكفيه.
   ========================================================= */
.report-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  align-items: start;
}

/* الشرط الذي يسمح للعمود بالانكماش تحت مقاس محتواه — والجدول هنا
   أعرض من الشاشة عمدًا ويزحف داخل .table-wrap. بدونه يتمدّد العمود
   إلى عرض الجدول كاملًا فتزحف الصفحة نفسها. (القاعدة نفسها في القسم ٦.) */
.report-split > * { min-width: 0; }

/* الرسم يحتفظ بنسبته ويزحف في حاويته لو ضاقت — لا يزحف عليه الجسم. */
.chart-wrap { padding: 12px 12px 4px; overflow-x: auto; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 12px 12px;
  font-size: 9px;
  font-weight: 700;
  color: #667085;
}

/* تحت 1100px الشريط الجانبي مطويّ والمساحة أضيق: الرسم تحت الجدول. */
@media (max-width: 1100px) {
  .report-split { grid-template-columns: 1fr; }
}


/* =========================================================
   ١١ — كروت قراءات الحسّاسات

   ألوان الخلفية والنصّ تأتي من قواعد الفئة عبر style في الـHTML، فلا
   تُحدَّد هنا: ضبطُ لونٍ في محرّر الفئة يجب أن يظهر في الكرت، ولونٌ
   مكتوب في ورقة الأنماط يُبطل ذلك الضبط.
   ========================================================= */
.sensor-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}

.sensor-card {
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 9px;
  padding: 11px;
  min-width: 0;
}

.sensor-card header { display: flex; flex-direction: column; gap: 2px; opacity: .85; }
.sensor-card header b { font-size: 10px; font-weight: 800; }
.sensor-card header span { font-size: 8px; }

.sensor-card-value {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.25;
  margin: 6px 0 8px;
  font-variant-numeric: tabular-nums;
}

.sensor-card-bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(16, 24, 40, .08);
  overflow: hidden;
}

.sensor-card-bar span { display: block; height: 100%; border-radius: 99px; }

.sensor-card footer {
  display: block;
  margin-top: 8px;
  font-size: 8px;
  font-weight: 700;
  opacity: .85;
}

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

/* «غير متحقَّق» على الكرت: معلومة تُقرأ لا تنبيه يصرخ — الأصل أن كل
   تاج بلا طراز مسجَّل، والمواصفة تمنع ربطه بطراز لم يتأكّد. */
.sensor-card-unverified { opacity: .6; font-weight: 600; }


/* =========================================================
   ١٢ — قائمة نتائج البحث الشامل

   ‏.search-wrap و.search من البروتوتايب (raneen.css:29) وتُستعملان كما
   هما. الجديد هنا هو اللوحة المنسدلة وحدها — لا نظير لها في الأصل
   لأن بحثه لم يكن يبحث.
   ========================================================= */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dbe4f1;
  border-radius: 9px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  z-index: 2500;
  padding: 6px;
}

.search-group + .search-group { border-top: 1px solid #eef2f7; margin-top: 4px; padding-top: 4px; }

.search-group-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #98a2b3;
  padding: 6px 8px 3px;
}

.search-hit {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
}

.search-hit:hover, .search-hit:focus-visible { background: #f2f6fd; }
.search-hit b { display: block; font-size: 11px; color: #101828; }
.search-hit span { display: block; font-size: 9px; color: #667085; margin-top: 1px; }

.search-empty { padding: 14px; text-align: center; font-size: 10px; color: #98a2b3; }

/* الشريط العلوي ضيّق على الهاتف: الحقل يختفي والصفحة تُفتح من القائمة.
   بحثٌ بعرض 60px ليس بحثًا. */
@media (max-width: 900px) {
  #globalSearchWrap { display: none; }
}


/* =========================================================
   ١٣ — ملاحظة «نسيت كلمة المرور» في صفحة الدخول

   الزرّ نفسه من البروتوتايب وأنماطه فيه (.login-options>button).
   الجديد هو الملاحظة التي تظهر تحته: البروتوتايب يفتح حوارًا لا
   يفعل شيئًا، وهنا تُقال الحقيقة — لا استرجاع ذاتيًّا، والمسؤول
   يضبطها من صفحة الحسابات.
   ========================================================= */
.login-forgot-note {
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  border-radius: 7px;
  padding: 9px 11px;
  margin: 0 0 14px;
  font-size: 9px;
  line-height: 1.8;
  color: #1d4ed8;
}


/* =========================================================
   ١٤ — مبدّل اللغة في صفحة الدخول

   يأخذ موضع .login-back-site في البروتوتايب (raneen.css:2832) —
   أعلى لوحة النموذج — ويرث مقاسه وموضعه، فلا يُزاح شيء عن مكانه.
   ========================================================= */
.login-locale {
  position: absolute;
  top: 18px;
  inset-inline-start: 22px;
  display: flex;
  gap: 4px;
  z-index: 3;
}

.login-locale a {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  color: #667085;
  text-decoration: none;
}

.login-locale a:hover { background: #eef2f7; }
.login-locale a.active { background: #eaf2ff; color: #1769ff; }


/* =========================================================
   ١٥ — رأس تفاصيل الأصل

   الفيديو (لقطة 18:50) يضع الصورة والهويّة ورمز الـQR في صفّ واحد
   أعلى لوح «Overview & ID». والبروتوتايب يملك أنماط .asset-qr-value
   و.asset-photo-* ويُعاد استعمالها؛ الجديد هو الصفّ الجامع وحده.
   ========================================================= */
.asset-identity {
  display: grid;
  grid-template-columns: 150px 1fr 170px;
  gap: 14px;
  align-items: start;
}

.asset-identity > * { min-width: 0; }

.asset-photo {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 9px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.asset-photo img { width: 100%; height: 100%; object-fit: cover; }

.asset-photo-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #98a2b3;
  font-size: 9px;
}

.asset-photo-empty .icon { width: 22px; height: 22px; }

.asset-identity-main h3 { margin: 6px 0 2px; font-size: 17px; }

/* سريال النظام هو هويّة الأصل: يُبرز، ويبقى LTR لأنه معرّف لا نصّ. */
.asset-serial {
  font-size: 14px;
  font-weight: 900;
  color: #1769ff;
  direction: ltr;
  unicode-bidi: plaintext;
}

.asset-identity-main .muted { font-size: 10px; margin-top: 3px; }

.asset-qr {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
}

.asset-qr img { width: 110px; height: 110px; }
.asset-qr .k { font-size: 8px; color: #7a8697; letter-spacing: .05em; }

.asset-qr-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  color: #667085;
  direction: ltr;
  word-break: break-all;
}

@media (max-width: 760px) {
  .asset-identity { grid-template-columns: 1fr; }
  .asset-photo { aspect-ratio: 16 / 9; }
}


/* =========================================================
   ١٦ — عمود «المتغيّرات المتجاوزة»

   الفيديو (لقطة 25:30) يضع تجاوزات التاج الواحد سطرًا تحت سطر في
   خلية واحدة: نقطةٌ بلون الخطورة، ثم اسم المتغيّر، ثم قيمته ومستواه.
   ========================================================= */
.exceeded-variable {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
}

.exceeded-variable + .exceeded-variable { margin-top: 3px; }

.exceeded-variable .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.exceeded-variable b { font-variant-numeric: tabular-nums; }
.exceeded-variable .muted { font-size: 9px; }


/* =========================================================
   ١٧ — صفحة نين

   الفيديو (لقطة 28:30) يعرض عنوان «Try asking Neen» وشرائح مجالات
   وكروت «Recent history». وأنماط البروتوتايب لشبكة الاقتراحات
   ‏(.neen-suggestion-grid) مبنيّة على بنية مختلفة، فهذه أصناف جديدة.
   ========================================================= */
.neen-heading {
  margin: 0 0 8px;
  font-size: 12px;
  color: #101828;
}

.neen-domains {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.neen-domain {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 9px;
  font-weight: 800;
  color: #667085;
  cursor: pointer;
}

.neen-domain:hover { background: #f5f8fd; }
.neen-domain.active { background: #eaf2ff; border-color: #acc9ff; color: #1769ff; }

/* الاقتراح زرّ يُقرأ كسؤال: النصّ يبدأ من جهة القراءة لا من الوسط. */
.neen-suggestion {
  text-align: start;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 14px;
}

.neen-suggestion:hover { border-color: #acc9ff; background: #f7faff; }
.neen-suggestion-q { font-size: 12px; font-weight: 700; color: #111065; line-height: 1.6; }
.neen-suggestion-d { font-size: 9px; margin-top: 5px; }

.neen-history {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

.neen-history > * { min-width: 0; }

.neen-history-card {
  display: grid;
  gap: 5px;
  text-align: start;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 9px;
  padding: 12px;
  cursor: pointer;
}

.neen-history-card:hover { background: #f2f6fd; border-color: #dbe7fb; }

.neen-history-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 800;
  color: #6b5ce7;
}

.neen-history-mark .icon { width: 11px; height: 11px; }
.neen-history-card b { font-size: 11px; line-height: 1.6; color: #101828; }
.neen-history-card .muted { font-size: 8px; }

@media (max-width: 900px) { .neen-history { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .neen-history { grid-template-columns: 1fr; } }


/* =========================================================
   ١٨ — كروت التاجات داخل الفرع

   الفيديو (لقطة 01:10) يعرضها في عمودين: الاسم وشارة التحقّق، ثم
   المعرّف العتادي، ثم القراءات. وألوان القراءة من مستواها المحفوظ
   مع الزيارة لا من حسابٍ يجري الآن — القراءة لقطة، ولونها يتبعها.
   ========================================================= */
.branch-tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.branch-tag-grid > * { min-width: 0; }

.branch-tag-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px;
  background: #fff;
}

.branch-tag-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.branch-tag-card b { display: block; font-size: 11px; }

/* المعرّف العتادي هويّة تقنية: يبقى LTR في الاتجاهين. */
.branch-tag-id {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  color: #98a2b3;
  direction: ltr;
  unicode-bidi: plaintext;
}

.branch-tag-readings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  font-size: 10px;
}

.branch-tag-reading {
  border-radius: 6px;
  padding: 3px 8px;
  font-weight: 800;
  background: #f2f4f7;
  color: #475467;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.branch-tag-reading.level-good { background: #e8f7ee; color: #16823d; }
.branch-tag-reading.level-warning { background: #fff4d8; color: #b26a00; }
.branch-tag-reading.level-critical { background: #fde8ea; color: #c4273a; }

.branch-tag-unverified { opacity: .7; }

.branch-tag-card .sim-badge { margin-top: 8px; }

@media (max-width: 620px) { .branch-tag-grid { grid-template-columns: 1fr; } }


/* =========================================================
   ١٩ — سطر اللغة في الشريط الجانبي يبدّل فعلًا

   البروتوتايب يعرضه نصًّا: «Language  English». وهو أوّل ما تقع عليه
   العين حين يُراد تبديل اللغة، فيُضغط ولا يحدث شيء — وهو بالضبط ما
   يحذّر منه البريف: ما لا يفعل شيئًا لا يُعرض كأنه يفعل.
   ========================================================= */
.language a {
  text-decoration: none;
  border-radius: 5px;
  padding: 1px 6px;
  margin: -1px -6px;
  transition: background .12s;
}

.language a:hover,
.language a:focus-visible { background: #eaf2ff; }

/* الشريط المطويّ يخفي البطاقة كلّها، فلا يبقى للسطر موضع. */
.app.sidebar-collapsed .language { display: none; }

/* =========================================================
   ٢٠ — كروت فئات التاجات

   الأنماط كانت موجودة في raneen.css منذ البداية — منقولةً حرفًا بحرف
   من البروتوتايب — ولم يستعملها الرسم: كان يبني الكرت بأنماطٍ سطرية
   وشاراتٍ صغيرة، فظهرت النطاقات الثلاثة صفًّا من الأقراص بدل ثلاث
   خانات ملوّنة. نفس عيب كروت مؤشّرات الأصول: CSS يصف شيئًا والـHTML
   يبني غيره.

   وما يبقى هنا شيئان لا ثالث لهما في البروتوتايب: سطر الظرف الفعلي،
   وعدّاد التاجات. كلاهما معلومةٌ حقيقية لا زينة، فبقيا تابعين بصريًّا
   لا منافسين للخانات.
   ========================================================= */

.rule-envelope {
  margin-top: 6px;
  font-size: 8px;
  font-weight: 700;
  color: #667085;
  background: #f2f5fa;
  border-radius: 5px;
  padding: 4px 6px;
  text-align: center;
}

.category-usage {
  margin-top: 9px;
  font-size: 9px;
  color: #667085;
}

/* =========================================================
   ٢١ — تحذير نطاق التاج

   تاجٌ لا يدخل أي زيارة لأن فرعه فارغ بينما أصله في فرع. العيب صامت
   بطبيعته — الصف موجود والربط موجود ولا شيء يبدو خاطئًا — فالوسم
   يحتاج أن يُرى في صف الجدول لا في تلميحٍ عند المرور وحده.
   ========================================================= */

.tag-scope-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  color: #b26a00;
  background: #fff4d8;
  border: 1px solid #f0d9a6;
  border-radius: 5px;
  padding: 3px 5px;
}

.tag-scope-warning .icon {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

/* =========================================================
   ٢٢ — قائمة التقارير الفرعية حين يضيق الشريط

   دون ‎1100px يضيق الشريط إلى ‎72px ويُخفي raneen.css نصوص أزرار
   التنقّل — وكُتبت تلك القاعدة قبل أن توجد قائمة فرعية. فبقيت أزرار
   التقارير تحمل نصوصها كاملةً في عمودٍ عرضه ‎72px، فانسكبت فوق
   المحتوى: «Attention & Incidents» تتكسّر على أربعة أسطر فوق جدول
   الحوادث.

   والعلاج ليس إخفاء القائمة — تلك حالة الطيّ اليدوي حيث يقصد المستخدم
   الإخفاء — بل معاملتها معاملة إخوتها: أيقونةٌ وحدها، والنصّ في
   ‏title.
   ========================================================= */

@media (max-width: 1100px) {
  .nav-submenu {
    padding-inline-start: 5px;
    padding-inline-end: 5px;
  }

  .nav-sub-btn {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
  }

  .nav-sub-btn > span {
    display: none;
  }

  /* السهم يشير إلى قائمةٍ صارت أيقوناتٍ، ويبقى مفيدًا للطيّ والفتح. */
  .nav-caret {
    inset-inline-end: 2px;
  }
}

/* =========================================================
   ٢٣ — محرّر مخطّط الفرع

   كانت العلامة زرًّا نقرةٌ واحدة تحذفه، فتحريكُ تاجٍ شبرًا يعني حذفه
   وإعادة وضعه. والشرح يصف غير ذلك: «حتى تحرّك مكانه وتغيّر».

   فصارت تُسحَب، والحذف زرٌّ صغير يظهر عند المرور — حتى لا تكون الحركة
   والإزالة إيماءةً واحدة.
   ========================================================= */

.layout-hint {
  font-size: 11px;
  margin: 0 0 8px;
  line-height: 1.7;
}

.layout-workspace {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
}

.layout-canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f5f7fb;
}

.layout-canvas img {
  display: block;
  width: 100%;
}

/* طبقة العلامات لا تعترض النقر على الصورة؛ العلامة وحدها تعترضه. */
.layout-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layout-marker {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: #246bfd;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .28);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transition: box-shadow .12s, transform .12s;
}

.layout-marker:hover {
  box-shadow: 0 2px 8px rgba(36, 107, 253, .45);
}

/* أثناء السحب: لا انتقال، وإلّا تخلّفت العلامة عن المؤشّر. */
.layout-marker.dragging {
  cursor: grabbing;
  transform: scale(1.12);
  transition: none;
  z-index: 3;
}

.layout-marker-n {
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.layout-marker-x {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #d92d20;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.layout-marker:hover .layout-marker-x {
  display: flex;
}

.layout-marker.dragging .layout-marker-x {
  display: none;
}

.layout-side-head {
  margin: 0 0 6px;
  font-size: 12px;
}

.layout-unplaced {
  max-height: 300px;
  overflow: auto;
}

@media (max-width: 760px) {
  .layout-workspace {
    grid-template-columns: 1fr;
  }
}