/* =============================================================
   شعار «محك» الموحد — brand.css
   ملف واحد يخدم الموقع والاختبار ولوحة التحكم والبريد.
   العنصر: resources/views/components/brand.blade.php
   الرموز: resources/views/partials/brand-sprite.blade.php

   المبدأ: الشعار SVG داخل الصفحة، فألوانه تأتي من CSS لا من الملف.
   لذلك لا حاجة لنسخة بيضاء ولا نسخة داكنة ولا ملف لكل مقاس.

   ┌─ التركيبتان الرسميتان، مبنيتان من ثلاثة رموز لا من ملفين ──┐
   │ عريض : الرمز + «محك» + الوصف  = mahak-logo-horizontal-tagline │
   │ ضيق  :        «محك» + الوصف  = mahak-wordmark-tagline         │
   │ الضيقة هي العريضة ناقص الرمز حرفياً — تحققنا منه بالقياس.     │
   └──────────────────────────────────────────────────────────────┘

   ⚠️ الأرقام أدناه نسب مقيسة من ملفات الهوية بـgetBBox، لا تقدير:
      صندوق الرمز 328.70×344.20 · «محك» 465.41×261.67 · الوصف 446.90×42.38
      وقاعدة التراصف الرسمية: أسفل الرمز يحاذي أسفل الوصف (لا التوسيط).
      لا تدورها ولا تبدل رموز السبرايت دون إعادة القياس.

   ⚠️ ترتيب التخصيص هنا مقصود، وقد كسرناه مرتين:
      • التوكنات (‎--mk-*‎) بتخصيص صنف واحد كي تغلبها مقاسات
        ‎--sm/--md/--lg/--xl‎ وتجاوزات الصفحات مثل ‎.h6-brand{--mk-h:42px}‎.
      • الخصائص البنيوية بصنف مضاعف ‎.mk-brand.mk-brand‎ لأن العنصر يحمل
        غالباً صنف المضيف (navbar-brand / app-brand-link) وتلك تحمل بعد
        هذا الملف، فـ‎.navbar-brand{display:inline-block}‎ كانت تكسر التراص.
      لا تنقل إعلاناً بين الكتلتين دون فهم هذا.
   ============================================================= */

:root {
    /* التركوازي: يتبع توكن النظام حيث توجد db.css، وإلا يقع على القيمة الصريحة */
    --mk-primary: var(--tq-primary, #1CA390);
    --mk-ink: #8a878c;   /* رمادي الرمز والوصف */
}

/* ------------------------------------------------------------------
   1) التوكنات — مقياس واحد (--mk-h) تشتق منه كل الأبعاد.
      ‎--mk-h‎ = ارتفاع الشعار كاملاً في التركيبة العريضة.
      تخصيص صنف واحد عمداً: انظر التنبيه أعلاه.
   ------------------------------------------------------------------ */
.mk-brand {
    --mk-h: 44px;

    /* نسب مقيسة — لا تقدر */
    --mk-word-h: calc(var(--mk-h) * .76022);   /* 261.67 ÷ 344.20 */
    --mk-tag-h:  calc(var(--mk-h) * .12313);   /*  42.38 ÷ 344.20 */
    --mk-stack:  calc(var(--mk-h) * .05901);   /* الفراغ بين «محك» والوصف */
    --mk-gap:    calc(var(--mk-h) * .12432);   /* الفراغ بين كتلة النص والرمز */

    /* كم يخرج الشعار خارج تدفقه رأسياً (أعلى وأسفل معاً).
       يكبر الشعار بصرياً دون أن يزيد ارتفاع الشريط: الزيادة تخرج إلى
       حشو الشريط الفارغ. الارتفاع المحسوب في التدفق = --mk-h ناقص ضعفه. */
    --mk-bleed: 0px;
}

/* المقاسات — بعد التوكنات ليغلباها بالترتيب لا بالتخصيص */
.mk-brand--sm { --mk-h: 34px; }
.mk-brand--md { --mk-h: 46px; }
.mk-brand--lg { --mk-h: 62px; }
.mk-brand--xl { --mk-h: 88px; }

/* ── شريط الموقع وشريط الاختبار (partials/brand-mark) ──
   الشريط ارتفاعه من محتواه: 46px شعاراً + 8px حشواً أعلى وأسفل = 62px،
   وأطول عنصر بعده 40px. فلو نقص إسهام الشعار عن 46 قصر الشريط.
   نكبر الشعار إلى 58px ونسحب 6px من كل جهة، فيبقى إسهامه 46px:
   الشريط كما هو، والشعار أكبر بـ26٪ والوصف أوضح. */
.site-brand { --mk-h: 58px; --mk-bleed: 6px; }

/* ------------------------------------------------------------------
   2) البنية — صنف مضاعف كي لا يدهسها صنف المضيف
   ------------------------------------------------------------------ */
.mk-brand.mk-brand {
    display: inline-flex;
    align-items: flex-end;   /* القاعدة الرسمية: أسفل الرمز = أسفل الوصف */
    gap: var(--mk-gap);
    margin-block: calc(-1 * var(--mk-bleed));
    color: var(--mk-primary);
    text-decoration: none;
    line-height: 1;
    max-width: 100%;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}

/* اللون مثبت على العناصر المرسومة لا موروثاً من الرابط:
   صفحات كثيرة تعيد ضبط الروابط بـ`a{color:inherit}` بتخصيص أعلى،
   فيسحب الشعار لون النص من حوله ويتلون خطأً بلا أي رسالة. */
.mk-brand .mk-brand__icon,
.mk-brand .mk-brand__word,
.mk-brand .mk-brand__tag { color: var(--mk-primary); }

.mk-brand .mk-brand__icon {
    flex: 0 0 auto;
    display: block;
    height: var(--mk-h);
    width: calc(var(--mk-h) * .95497);         /* 328.70 ÷ 344.20 */
}

.mk-brand .mk-brand__text {
    display: flex;
    flex-direction: column;
    align-items: center;      /* الوصف يتوسط تحت «محك» كما في الهوية */
    justify-content: flex-end;
    min-width: 0;
}

.mk-brand .mk-brand__word {
    flex: 0 0 auto;
    display: block;
    height: var(--mk-word-h);
    width: calc(var(--mk-word-h) * 1.77854);   /* 465.41 ÷ 261.67 */
}

.mk-brand .mk-brand__tag {
    flex: 0 0 auto;
    display: block;
    height: var(--mk-tag-h);
    width: calc(var(--mk-tag-h) * 10.54507);   /* 446.90 ÷ 42.38 */
    margin-block-start: var(--mk-stack);
}

/* بديل نصي للوصف حين يمرر sub="نص آخر" — الهوية تفضل الرمز المتجهي */
.mk-brand .mk-brand__sub {
    margin-block-start: var(--mk-stack);
    font-size: max(10px, calc(var(--mk-h) * .155));
    font-weight: 600;
    color: var(--mk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ------------------------------------------------------------------
   3) الأنماط — بعد كتلة البنية لتغلبها بالترتيب
   ------------------------------------------------------------------ */

/* بلا وصف → التركيبة تصير mahak-logo-horizontal: الرمز متوسط على «محك» */
.mk-brand.mk-brand--nosub {
    --mk-gap: calc(var(--mk-h) * .08074);      /* 27.79 ÷ 344.20 */
    align-items: center;
}

/* رأسي: الرمز فوق، و«محك» والوصف تحته — للدخول والتذييل والبطاقات */
.mk-brand.mk-brand--stacked {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--mk-h) * .16);
}

/* الرمز وحده */
.mk-brand.mk-brand--icon { gap: 0; }

/* ------------------------------------------------------------------
   4) التكيف التلقائي (layout="auto")
      عريض : الرمز + «محك» + الوصف
      ضيق  : يسقط الرمز فتبقى «محك» + الوصف — التركيبة الرسمية الثانية
      ولشريط ضيق جداً: أضف mk-brand--xs-word فيسقط الرمز أبكر
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .mk-brand.mk-brand--auto { gap: 0; }
    .mk-brand--auto .mk-brand__icon { display: none; }
}

@media (max-width: 991.98px) {
    .mk-brand.mk-brand--xs-word { gap: 0; }
    .mk-brand--xs-word .mk-brand__icon { display: none; }
}

/* ------------------------------------------------------------------
   5) الأرضيات — نسخة واحدة تخدم الفاتح والداكن والتركوازي
   ------------------------------------------------------------------ */

/* فوق أرضية تركوازية أو داكنة: الشعار كله أبيض */
.mk-brand--onteal { --mk-primary: #fff; --mk-ink: rgba(255, 255, 255, .85); }

/* الوضع الداكن: الرمادي يفتح كي لا يختفي الرمز ولا الوصف */
[data-bs-theme="dark"] .mk-brand,
html.dark-style .mk-brand { --mk-ink: #a7a3ab; }

[data-bs-theme="dark"] .mk-brand--onteal,
html.dark-style .mk-brand--onteal { --mk-ink: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------
   6) الطباعة — الشعار حبر أسود
   ------------------------------------------------------------------ */
@media print {
    .mk-brand { --mk-primary: #000; --mk-ink: #555; }

    /* كبسولة «تجريبي» لا تطبع. هذه هي الحمالة، وd-print-none على العنصر حزام:
       صفحات الموقع لا تحمل أدوات بوتستراب كلها، وصنف no-print لا يصلح بديلاً
       لأن ‎.no-print{display:block}‎ في exam/app.css بلا ‎!important‎ يعيد الإظهار. */
    .mk-brand .mk-brand__beta { display: none !important; }
}

/* ------------------------------------------------------------------
   7) سايدبار لوحة التحكم — عند طي القائمة يبقى الرمز وحده،
      نظير ما تفعله Vuexy بـ.app-brand-text (المحددات منقولة من core.css).

      لماذا هنا لا في db.css رغم قاعدة المشروع؟ لأن هذا سلوك العنصر نفسه،
      وbrand.css محمل في كل الواجهات؛ وdb.css فيه عمل غير مودع.
   ------------------------------------------------------------------ */
/* ‎.app-brand‎ صندوق ثابت 64px، فالتكبير هنا بلا نزيف — 4px متنفساً */
.app-brand .mk-brand { --mk-h: 56px; }

:not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) .mk-brand .mk-brand__text,
:not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) .mk-brand .mk-brand__beta {
    display: none;
}
:not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) .mk-brand.mk-brand {
    gap: 0;
}

@media (min-width: 1200px) {
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .mk-brand .mk-brand__text,
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .mk-brand .mk-brand__beta {
        display: none;
    }
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .mk-brand.mk-brand {
        gap: 0;
    }
}

/* ------------------------------------------------------------------
   8) كبسولة «تجريبي» — شارة حالة تطفو بجوار الشعار بلا حيز

   ⚠️ القاعدة الصلبة: صندوق الشعار لا يتغير. الكبسولة ‎position:absolute‎،
      ولا حشو ولا هامش ولا فجوة تضاف إلى ‎.mk-brand‎ نفسه، فعرض الشعار
      وارتفاعه في التدفق واحد ظهرت أو غابت. شريط ‎.h6-nav‎ بلا متسع وفيه
      ‎overflow:hidden‎، فأي عرض زائد يقص رابطاً بلا خطأ. هذا امتداد لمبدأ
      ‎--mk-bleed‎: خروج بصري بلا ثمن في التخطيط.

   ⚠️ المرساة مقيسة من خريطة حبر الرمزين لا مقدرة: «محك» فارغة الحبر في
      ركنها الأعلى من جهة نهاية القراءة — أول حبر يظهر عند ٤٠٪ من العرض،
      وما دون ٣٢٪ يبقى فارغاً حتى ٣٠٪ من الارتفاع. فالكبسولة تجلس في هذا
      الجيب: طرفها ‎--mk-beta-out‎ خارج نهاية الشعار، ورأسها ‎--mk-beta-up‎
      فوق حافته — وكلاهما أصغر من متنفس أضيق مضيف: أفقياً ١٨px فجوة الشريط
      قبل ‎.h6-nav‎ (الخروج ١٤px عند مقاس ٥٨px)، ورأسياً ٤px فوق شعار
      السايدبار داخل ‎.app-brand‎ وعليه ‎overflow:hidden‎ (الرفع ٢٫٢px عند ٥٦px).

   ⚠️ التوكنات هنا بصنف واحد ‎.mk-brand--beta‎ والبنية بصنف مضاعف —
      نفس الانقسام المشروح في رأس الملف. لا تنقل إعلاناً بين الكتلتين.
   ------------------------------------------------------------------ */
.mk-brand--beta {
    /* ‎max(8px…)‎ أرضية القراءة: دون ذلك يصير النص لطخة.
       وفوق ٤٢px تقريباً تعود النسبة هي الحاكمة فتكبر الكبسولة مع الشعار. */
    --mk-beta-fs:  max(8px, calc(var(--mk-h) * .16));
    --mk-beta-out: calc(var(--mk-h) * .24);
    /* الرفع مقصوص عمداً على أضيق متنفس: ‎.app-brand‎ في السايدبار صندوق 64px
       فيه شعار 56px وعليه ‎overflow:hidden‎ — أي 4px فوق الشعار لا أكثر. */
    --mk-beta-up:  calc(var(--mk-h) * .04);

    --mk-beta-bg: var(--mk-primary);
    --mk-beta-fg: #fff;
    --mk-beta-bd: transparent;
}

/* فوق التركوازي أو الداكن يصير ‎--mk-primary‎ أبيض، فالكبسولة البيضاء بنص
   أبيض تختفي: تقلب هنا إلى زجاج شفاف بحد أبيض رفيع — كما تفعل بقية onteal */
.mk-brand--beta.mk-brand--onteal {
    --mk-beta-bg: rgba(255, 255, 255, .22);
    --mk-beta-fg: #fff;
    --mk-beta-bd: rgba(255, 255, 255, .62);
}

/* ‎position:relative‎ بنية، وبصنف مضاعف كي لا يدهسها ‎.navbar-brand‎ وأخواتها.
   وهي معلقة على ‎--beta‎ وحده: بلا كبسولة يبقى الشعار ساكناً كما كان. */
.mk-brand.mk-brand--beta { position: relative; }

.mk-brand .mk-brand__beta {
    position: absolute;
    inset-block-start: calc(-1 * var(--mk-beta-up));
    inset-inline-end: calc(-1 * var(--mk-beta-out));
    z-index: 1;
    padding-inline: .45em;
    padding-block: .2em;
    border: 1px solid var(--mk-beta-bd);
    border-radius: 999px;
    background: var(--mk-beta-bg);
    color: var(--mk-beta-fg);
    font-size: var(--mk-beta-fs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;   /* لا تسرق نقرة الرابط تحتها */
}

/* الرأسي: الرمز متوسط فوق النص فلا جيب في الركن — تخرج الكبسولة كاملة
   بجوار أعلى الرمز من جهة نهاية القراءة */
.mk-brand.mk-brand--stacked .mk-brand__beta {
    inset-inline-end: auto;
    inset-inline-start: 100%;
    inset-block-start: calc(var(--mk-h) * .04);
    margin-inline-start: calc(var(--mk-h) * .08);
}

/* أين تخفى:
   • دون ٤٢px تتجمد الكبسولة عند ٨px بينما يستمر «محك» في الصغر، فتزحف
     الكبسولة على حبره — أصغر المضيفين: ‎--sm‎ ٣٤px، تذييل الاختبار ٢٨px،
     شريط ‎.site-header--nav‎ ٣٨px.
   • بلا «محك» أصلاً (الرمز وحده) لا جيب لها. القائمة المطوية مخدومة في ٧. */
.mk-brand--sm .mk-brand__beta,
.mk-brand--icon .mk-brand__beta,
.site-footer-simple-brand .mk-brand__beta {
    display: none;
}

/* شريط الباني (انشاء/تعديل اختبار): ‎--mk-h‎ فيه ٥٨px كبقية الشرائط، ولا يهبط
   الى ٣٨px الا تحت ٥٧٦px (‎app.css‎ داخل ‎@media (max-width:575.98px)‎). فالاخفاء
   مقصور على ذلك النطاق وحده، والكبسولة تظهر على الشاشات الاوسع كما في الشريط
   الرئيسي سواء بسواء. */
@media (max-width: 575.98px) {
    .site-header--nav .site-brand .mk-brand__beta { display: none; }
}