/* =====================================================================
   شعار «معلم الحاسب» الموحّد في شرائط الواجهة
   ---------------------------------------------------------------------
   ▸ مصدر واحد لكل الشرائط: الرئيسية + خدمات المعلم/الطالب/العينات +
     السيرة الذاتية + ملف الإنجاز. يُحمَّل مرة واحدة عبر @once('mh-brand-css')
     من resources/views/partials/brand-logo.blade.php.
   ▸ مكتفٍ ذاتياً: لا يعتمد توكنات premium-theme لأن صفحات المستندات
     والمحفظة لا تحمّل الثيم.
   ===================================================================== */

.mh-brand { display: block; line-height: 0; }
.mh-brand-img {
  width: auto;
  object-fit: contain;
  display: block;
}

/* ---- المقاسان ----
   md: شريط الرئيسية.
   sm: شرائط الخدمات — ارتفاع الصف فيها أقصر أصلاً.
   ⚠️ بلا هوامش سالبة: الشعار الأطول من صندوق الصفّ كان يُقصّ من أعلى وأسفل
      لأن .app-brand-link يحمل overflow:hidden تحت 992px (premium-theme.css
      + nav-icons.css)، ويبرز خارج الشريط المدوّر على الشاشات العريضة. */
/* ⚠️ القفل المعتمد (‎3/logo-cmp-tch.png‎) نسبته 4.01:1، مقصوص على حدود
      الرسم أصلاً بلا هامش. الارتفاع هنا محكوم بالعرض لا بالذوق:
      عند 44px يعطي 176px، ملائم لأعرض الشرائط بلا تجاوز.
      لا ترفعه بلا قياس ‎scrollWidth vs clientWidth‎ على أعرض صفحة روابطَ. */
.mh-brand-img--md { height: 44px; max-width: 200px; }
.mh-brand-img--sm { height: 36px; max-width: 165px; }

/* ---- تبديل السمة: عنصر واحد ظاهر دائماً ----
   القفل المعتمد بحبر داكن غير مقروء فوق الشريط الداكن، فنُلبسه لوحاً أبيض
   في الوضع الداكن (لا لوح في الفاتح، ولا في الفوتر الأسود العميق). */
.mh-brand--dark { display: none; }
html.dark-style .mh-brand--light { display: none; }
html.dark-style .mh-brand--dark { display: block; }

/* الشريط يظهر بمعرّف ‎#layout-navbar‎ في تخطيط الإدارة وبفئة ‎.layout-navbar‎
   في تخطيطات front-cmp/front-portfolio؛ الفئة تغطّي الاثنين. */
html.dark-style .layout-navbar .app-brand-link .mh-brand--dark {
  background: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ---- تحت 576px: القفل الكامل مصغّراً ----
   لم نعد نستبدل بالأيقونة (طلب المستخدم). النسبة 4.01:1 فارتفاع 34px
   يعطي عرضاً 136px، يتّسع في شريط 375px مع زر همبرغر ~44px.
   الوضع الخاص ‎.mh-brand--mo‎ في القسم التالي لا يزال يبدّل إلى أيقونة. */
@media (max-width: 575.98px) {
  .mh-brand-img--md { height: 30px; max-width: 122px; }
  .mh-brand-img--sm { height: 28px; max-width: 114px; }
  /* اللوح الأبيض في الداكن يضيف حشوة؛ نضغطها على الجوال ليتّسع الشريط */
  html.dark-style .layout-navbar .app-brand-link .mh-brand--dark {
    padding: 3px 6px;
    border-radius: 6px;
  }
}

/* ---- وضع «أيقونة على الجوال فقط» ----
   لشرائط تحمل اسم الخدمة نصّاً (سيرة ذاتية / ملف الإنجاز): الشعار يظهر
   بجوار الاسم على الجوال فقط، فلا يتغيّر تصميم الشاشات العريضة. */
.mh-brand--mo { display: none; }
@media (max-width: 575.98px) {
  .mh-brand--mo.mh-brand--light { display: block; }
  html.dark-style .mh-brand--mo.mh-brand--light { display: none; }
  html.dark-style .mh-brand--mo.mh-brand--dark { display: block; }
  /* اسم الخدمة مكتوب بـstyle مضمّن (1.2rem) — نضغطه ليتّسع الصفّ للأيقونة */
  #layout-navbar .app-brand-link .app-brand-text { font-size: .95rem !important; }
  #layout-navbar .app-brand-link { gap: .45rem; }
}