/*
    ========================================================================
    طبقة تكبير الخط على شاشات الموبايل فقط
    ========================================================================

    الغرض: رفع أحجام الخطوط على الهاتف إلى مقياس مريح للقراءة قريب مما تستخدمه
    تطبيقات مثل فيسبوك (نص أساسي ≈ 16px)، دون أي مساس بتنسيق الديسكتوب.

    لماذا ملف مستقل ولماذا يُحمَّل أخيراً؟
      • site.css مربوط من _Layout.cshtml وحده، وصفحات Layout = null لا تقرأه
        إطلاقاً — ومنها الصفحة الرئيسية نفسها. فوضع القواعد في site.css وحده
        كان سيُسقط أهمّ صفحة في الموقع من التعديل.
        لذلك يُربط هذا الملف صراحةً في أربعة مواضع: _Layout.cshtml و
        Pages/Index.cshtml و Pages/Properties/Index.cshtml و
        Pages/Admin/Documentation.cshtml. صفحات التقارير الأربع مستثناة عمداً
        لأنها مستندات طباعة لا صفحات تُقرأ على الهاتف.
      • كثير من الصفحات تعرّف أحجامها في <style> مضمّن داخل <head>، وهذا الملف
        يُربط بعد @RenderSection("Styles") فيفوز عليها بترتيب المصدر.

    متى يُستعمل !important هنا ومتى لا يُستعمل — القاعدة مقصودة لا اعتباطية:

      • القواعد العامة (p، li، .small، .badge، .btn، حقول الإدخال، العناوين)
        بلا !important. وظيفتها أن تكون «حدّاً أدنى» يتغلّب على بوتستراب وعلى
        تنسيقات <head>، لكنه يتنازل لأي فئة خاصة بصفحة تقصد حجماً أكبر عمداً.
        وضع !important عليها كان سيُصغّر نصوصاً مكبّرة أصلاً بدل تكبيرها.

      • القواعد الخاصة بمكوّن قيست فيه قيمة صغيرة فعلاً تحمل !important، لأن
        مصادرها تأتي بعد هذا الملف في ترتيب المستند فلا سبيل آخر لتجاوزها:
          - chat.css يُربط من _ChatScripts.cshtml داخل <body> لا في <head>.
          - صفحات مثل Account/Index و Admin/PendingSubmissions تكتب <style>
            في جسم الصفحة مباشرة (لا داخل @section Styles).
          - بعض العناصر تحمل الحجم في style="" وهو أعلى من أي مُحدِّد.

    كل شيء هنا محصور بـ `screen and (max-width: 767.98px)`:
      • `screen` تمنع تسرّب التكبير إلى صفحات التقارير عند الطباعة/حفظ PDF.
      • 767.98px هو نفس حدّ الموبايل المستعمل أصلاً في site.css.

    سلّم الأحجام المعتمد (الجذر على الموبايل = 16px):
        النص الأساسي والعناوين داخل البطاقات ......... 1rem      = 16px
        النص الثانوي (أوصاف، تسميات، أسماء) .......... 0.9375rem = 15px
        نص مساعد (small، تواريخ، عدّادات) ............ 0.875rem  = 14px
        بيانات وصفية دقيقة (توقيت رسالة، شارة) ....... 0.8125rem = 13px
        شارات مصغّرة فوق الصور ....................... 0.75rem   = 12px
    أما العناوين h1–h5 فلا تُمَسّ هنا إطلاقاً: مقاييس بوتستراب لها صارت تُحسب
    على جذر 16px فكبرت من تلقاء نفسها وبقيت أعلى من السلّم أعلاه (h5 = 20px،
    h4 = 24px). التفصيل في القسم 4.
*/

@media screen and (max-width: 767.98px) {

    /* ====================================================================
       1) الجذر: توحيد مقياس rem بين كل الصفحات
       ====================================================================
       site.css كان يضبط الجذر على 14px للموبايل بينما الصفحات ذات
       Layout = null تعمل على 16px الافتراضي للمتصفح. فرق المقياس هذا كان
       يجعل نفس الفئة (مثل .chat-contact-name: 0.88rem) تُعرض 12.3px في
       صفحة الدردشة و14.1px في الصفحة الرئيسية. توحيده على 16px شرط لأن
       تكون كل القيم بالـ rem أدناه ذات معنى واحد في كل الصفحات.
    */
    html {
        font-size: 16px;
    }

    body {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* ====================================================================
       2) النص الأساسي — الفقرات والقوائم والجداول ومحتوى البطاقات
       ==================================================================== */
    p,
    li,
    dd,
    dt,
    td,
    figcaption,
    .card-text,
    .lead,
    .form-check-label,
    .alert,
    .modal-body {
        font-size: 1rem;
    }

    /* لا قاعدة عامة لـ th: قيمته الافتراضية 1rem أصلاً، وخفضها كان سيُصغّر
       رؤوس الجداول العادية. الجداول المصغَّرة تُعالَج في القسم 11. */

    /* حقول الإدخال: 16px تحديداً تمنع سفاري على iOS من تكبير الصفحة تلقائياً
       عند لمس الحقل، فهي مقروئية ومنع قفزة تخطيط في آن واحد. */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        font-size: 1rem;
    }

    .form-control-sm,
    .form-select-sm {
        font-size: 0.9375rem;
    }

    /* .form-label قيمته الافتراضية 1rem فلا يُمَس. .form-text افتراضه 0.875em
       (نسبة من الأب) فيُثبَّت ويُرفع قليلاً. */
    .form-text {
        font-size: 0.9375rem;
    }

    /* ====================================================================
       3) النص المساعد — .small و <small>
       ====================================================================
       بوتستراب يعرّف .small بـ 0.875em (نسبة من الأب لا من الجذر)، فكان
       الحجم يتراكم للأسفل: .small داخل عنصر حجمه 0.85rem كان ينتهي عند
       11.2px. تثبيتها بالـ rem يقطع هذا التراكم ويضمن 14px أينما وردت.
    */
    .small,
    small {
        font-size: 0.875rem;
    }

    /* وصف/فقرة رمادية: أكبر قليلاً من .small العادية لأنها نص يُقرأ لا تسمية.
       !important لأن وصف العقار في بطاقة الهيرو بالصفحة الرئيسية يحمل
       style="font-size: 0.85rem" مباشرة على الوسم. */
    p.text-muted.small,
    p.small {
        font-size: 0.9375rem !important;
    }

    /* ====================================================================
       4) العناوين
       ====================================================================
       لا يُعاد تعريف h1–h5 ولا فئات .fs-* هنا عن قصد. مقاييس بوتستراب
       الافتراضية (h5 = 1.25rem، h4 = 1.5rem، .fs-5 = 1.25rem …) صارت تُحسب
       على جذر 16px بدل 14px، فكبرت تلقائياً في صفحات _Layout وبقيت كما هي في
       الصفحات ذات Layout = null. أي سلّم بديل هنا كان سيُصغّرها في الصفحة
       الرئيسية (h5 كانت 20px فصارت 18px في محاولة أولى) بدل تكبيرها.

       الاستثناء الوحيد h6: قيمته الافتراضية 1rem أي بحجم النص الأساسي بالضبط،
       فيُرفع قليلاً ليبقى متمايزاً عنه بصرياً.
    */
    h6, .h6 {
        font-size: 1.0625rem;
    }

    /* العناوين المقصوصة بسطر واحد (.text-truncate) داخل بطاقات العقارات:
       ارتفاع سطر 1.2 يقصّ نزول الحروف العربية داخل صندوق overflow: hidden،
       فيُرخى قليلاً — لا يغيّر حجم الخط ولا محاذاة البطاقة. */
    h1.text-truncate, h2.text-truncate, h3.text-truncate,
    h4.text-truncate, h5.text-truncate, h6.text-truncate {
        line-height: 1.6;
    }

    /* ====================================================================
       5) الأزرار والشارات
       ==================================================================== */
    .btn {
        font-size: 1rem;
    }

    .btn-sm {
        font-size: 0.9375rem;
    }

    /* .btn أعلاه (نفس درجة التخصيص، ومتأخر عن بوتستراب) كان يبتلع .btn-lg
       فيهبط زر «حفظ كافة الإعدادات» من 17.5px إلى 16px — تُعاد قيمته صراحةً */
    .btn-lg {
        font-size: 1.25rem;
    }

    /* .badge في بوتستراب 0.75em (نسبة من الأب) — تُثبّت بالـ rem لنفس سبب .small */
    .badge {
        font-size: 0.8125rem;
    }

    .nav-link,
    .dropdown-item {
        font-size: 1rem;
    }

    /* ====================================================================
       6) الصفحة الرئيسية — Pages/Index.cshtml
       ====================================================================
       كل ما يلي فئات معرّفة في <style> المضمّن داخل الصفحة، وهذا الملف
       يُحمَّل بعده فيفوز عليه بترتيب المصدر دون حاجة إلى !important.
    */
    .hero-eyebrow {
        font-size: 0.9375rem;
    }

    .hero-agent-label,
    .hero-agent-date {
        font-size: 0.875rem;
    }

    .hero-agent-name {
        font-size: 1.0625rem;
    }

    .hero-agent-phone {
        font-size: 0.9375rem;
    }

    .btn-hero-details {
        font-size: 1rem;
    }

    /*
        شريط الإحصاءات هو الاستثناء الوحيد الذي تعذّر تكبيره:
        خمسة أعمدة متجاورة داخل ~330px أي نحو 66px للعمود الواحد، وأوسع نصوصه
        («بيع / إيجار» و«خيارات الدفع» و«أنواع العروض») تلتفّ إلى سطر ثانٍ عند
        أي زيادة تُذكر. قيست العتبة تجريبياً: عند 0.875rem/0.75rem تلتفّ ثلاث
        تسميات، وعند 0.8125rem/0.6875rem لا يلتفّ شيء لم يكن ملتفّاً أصلاً.
        فرض «لا كسر في التخطيط» رجّح الإبقاء على هذه العتبة هنا — وهي نصوص
        وصفية مصغّرة لا نص محتوى يُقرأ.
        لذلك .stat-number يُترك على قيمته الأصلية (0.82rem) بلا قاعدة هنا،
        ولا يُرفع سوى .stat-label من 0.65rem إلى 0.6875rem وهو أقصى ما يتّسع له.
    */
    .stat-label {
        font-size: 0.6875rem;
        line-height: 1.4;
    }

    /* بطاقة «العقارات المتاحة» ومصغّراتها */
    .property-thumb-badge {
        font-size: 0.75rem;
    }

    .property-thumb-title {
        font-size: 0.8125rem;
    }

    .nav-arrow-btn {
        font-size: 0.9375rem;
    }

    /* بطاقات المزايا الصغيرة */
    .feature-card-lg h6 {
        font-size: 0.9375rem;
    }

    .feature-card-lg span {
        font-size: 0.8125rem;
    }

    /* البحث والفلاتر */
    .search-label {
        font-size: 0.9375rem;
    }

    .search-select-pill {
        font-size: 1rem;
    }

    .section-counter-badge {
        font-size: 0.875rem;
    }

    .date-filter-tab {
        font-size: 0.9375rem;
    }

    .date-filter-count {
        font-size: 0.8125rem;
    }

    .home-search-suggestion span {
        font-size: 1rem;
    }

    .home-search-suggestion small {
        font-size: 0.875rem;
    }

    .app-version-update-banner {
        font-size: 1rem;
    }

    /* شريط الأخبار المتحرك أعلى الصفحة الرئيسية */
    .ann-ticker-item {
        font-size: 0.9375rem;
    }

    /* ====================================================================
       7) بطاقة العقار — مشتركة بين الصفحة الرئيسية وصفحة كل العقارات
       ====================================================================
       شريط الناشر أسفل البطاقة يكتب الحجم inline في Pages/Properties/Index.cshtml
       وبفئتَي .agent-label/.agent-name في _PropertyCard.cshtml، فيُغطّى الشكلان
       معاً هنا. .lh-1 (line-height: 1) كانت تقصّ أعلى/أسفل الحروف العربية عند
       الحجم الأكبر، فتُرخى إلى 1.35.
    */
    .agent-bar .lh-1 {
        line-height: 1.35 !important;
    }

    .agent-label,
    .agent-bar .lh-1 > span {
        font-size: 0.875rem !important;
    }

    .agent-name,
    .agent-bar .lh-1 > span.fw-bold {
        font-size: 1rem !important;
    }

    /* السعر يحمل .fs-5 أي 1.25rem = 20px بعد توحيد الجذر — لا يحتاج تدخّلاً،
       وأي قيمة هنا كانت ستُصغّره في الصفحة الرئيسية. */

    .btn-property-details {
        font-size: 1rem;
    }

        /* الزر يحمل class="small" في صفحة كل العقارات فيلزم رفع الابن نصّياً */
        .btn-property-details > span {
            font-size: 1rem;
        }

    /* عنوان قسم «اكتشف العقارات المتاحة» ورابط «عرض الكل» — كلاهما inline */
    .available-properties-card span.small {
        font-size: 0.9375rem !important;
    }

    .available-properties-card a.text-muted {
        font-size: 0.875rem !important;
    }

    /* ====================================================================
       8) صفحة تفاصيل العقار — Pages/Properties/PropertyDetails.cshtml
       ==================================================================== */
    .btn-back-flat {
        font-size: 0.9375rem;
    }

    .feature-box-flat h6 {
        font-size: 1rem;
    }

    .feature-box-flat span {
        font-size: 0.875rem;
    }

    .share-btn-item {
        font-size: 1rem;
    }

    /* وصف العقار: أهم نص طويل في الموقع، والحجم مكتوب inline على الفقرة */
    .details-flat-card p.text-muted[style*="pre-line"] {
        font-size: 1rem !important;
    }

    /* أزرار الاتصال/واتساب في بطاقة الموظف تحمل الحجم inline أيضاً */
    .btn-action-call,
    .btn-action-phone {
        font-size: 1rem !important;
    }

    /* ====================================================================
       9) الدردشة — wwwroot/css/chat.css
       ====================================================================
       كل قاعدة هنا تحمل !important: chat.css يُربط من _ChatScripts.cshtml
       داخل <body> أي بعد هذا الملف في ترتيب المستند، فبدونها تبقى الأحجام
       الأصلية (كانت فقاعة الرسالة 12.2px وتوقيتها 9.2px على الهاتف).
    */
    .chat-bubble {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .chat-bubble-time {
        font-size: 0.8125rem !important;
    }

    .chat-day-divider {
        font-size: 0.8125rem !important;
    }

    .chat-composer textarea {
        font-size: 1rem !important;
    }

    .chat-contact-name,
    .chat-people-name {
        font-size: 1rem !important;
    }

    .chat-contact-preview {
        font-size: 0.875rem !important;
    }

    .chat-contact-time,
    .chat-contact-unread,
    .chat-people-sub {
        font-size: 0.8125rem !important;
    }

    .chat-thread-name {
        font-size: 1.0625rem !important;
    }

    .chat-thread-sub,
    .chat-connection-state {
        font-size: 0.8125rem !important;
    }

    .chat-panel-header .chat-panel-title {
        font-size: 1.125rem !important;
    }

    .chat-panel-header a {
        font-size: 0.875rem !important;
    }

    .chat-empty,
    .chat-rec-hint,
    .chat-voice-meta,
    .chat-voice-fallback {
        font-size: 0.875rem !important;
    }

    .chat-rec-time {
        font-size: 1rem !important;
    }

    .chat-install-title,
    .home-chat-title {
        font-size: 1.0625rem !important;
    }

    .chat-install-sub,
    .home-chat-subtitle {
        font-size: 0.9375rem !important;
    }

    .chat-read-mark {
        font-size: 0.875rem !important;
    }

    /* عنوان «جهات الاتصال» وعدّادها يحملان الحجم inline في رأس لوحة الدردشة
       المنسدلة (_ChatContactsPanel) وفي عمود صفحة /Chat (chat-side-header) */
    .chat-panel-header span.fw-bold,
    .chat-side-header span.fw-bold {
        font-size: 1.125rem !important;
    }

    .chat-panel-header span.text-muted,
    .chat-side-header span.text-muted {
        font-size: 0.875rem !important;
    }

    /* ====================================================================
       10) الإشعارات — wwwroot/css/notifications.css و _NotificationsDropdown
       ==================================================================== */
    .notifications-panel-header .notifications-panel-title {
        font-size: 1.25rem;
    }

    .notifications-tab {
        font-size: 0.875rem;
    }

        .notifications-tab i {
            font-size: 1rem;
        }

    .notifications-tab-count {
        font-size: 0.75rem;
    }

    .notification-title {
        font-size: 1rem;
    }

    .notification-text {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .notification-time {
        font-size: 0.8125rem;
    }

    .notification-count-badge {
        font-size: 0.8125rem;
    }

    /* ====================================================================
       11) صفحات الإدارة
       ====================================================================
       هذه الصفحات تكتب <style> في جسم الصفحة لا في <head>، فتأتي قواعدها بعد
       هذا الملف — ومن هنا !important. الجداول تُترك على 15px لا 16px لأنها
       عريضة أصلاً وتتمرر أفقياً داخل .table-responsive.
    */
    .admin-section-link {
        font-size: 0.9375rem !important;
    }

    /* شريط تنقّل أقسام الإدارة (_AdminSectionNav) وجداول الموظفين */
    .table-modern thead th {
        font-size: 0.9375rem !important;
    }

    .table-modern tbody td {
        font-size: 1rem !important;
    }

    .badge-role,
    .badge-branch {
        font-size: 0.875rem !important;
    }

    .btn-edit-action {
        font-size: 0.9375rem !important;
    }

    /* بطاقة عرض الزائر في Admin/PendingSubmissions */
    .sub-spec {
        font-size: 1rem !important;
    }

        .sub-spec .k {
            font-size: 0.875rem !important;
        }

        .sub-spec .v {
            font-size: 1rem !important;
        }

    /* ====================================================================
       12) تذييل الصفحة — نفس التذييل في _Layout و Index و Properties/Index
       ==================================================================== */
    .site-footer-note {
        font-size: 0.875rem;
        line-height: 1.6;
    }
}