/* ==========================================================================
   responsive.css — Global Responsive Layer
   --------------------------------------------------------------------------
   طبقة Responsive موحّدة لكل صفحات النظام.
   تُحمَّل كآخر طبقة في:
     - resources/views/vendor/adminlte/master.blade.php   (الصفحات الداخلية)
     - resources/views/layouts/app.blade.php              (الصفحات العامة)

   القواعد هنا عامة ومبنية على الـ markup الموجود أصلاً (AdminLTE 3 / BS4
   في الداخل، Bootstrap 5 في العام)، فأي صفحة Blade جديدة ترث السلوك تلقائياً
   دون كتابة أي Responsive CSS خاص بها.

   تسلسل التحميل الفعلي على الصفحات الداخلية (مُتحقَّق منه في المتصفح):
     adminlte(BS4) → plugins → bs5-compat → custom.css → responsive.css
     → ‎@yield('adminlte_css') / @stack('css')‎ (CSS الصفحة يعلو الطبقة العامة)
   وعلى الصفحات العامة:
     bootstrap5 → enhanced-main-style → critical inline → responsive.css

   ‎!important مستعمل هنا في 8 مواضع فقط، كلها مشروعة بطبيعتها ولا واحد منها
   لكسب حرب specificity: أدوات العرض (hide-xs/only-xs)، ‎@media print،
   و prefers-reduced-motion.

   الترتيب:
     1.  احتواء الـ Overflow من جذوره (min-width / media / long strings)
     2.  الجداول
     3.  النماذج والحقول
     4.  الأزرار وأشرطة الأدوات
     5.  البطاقات والشبكات ورأس الصفحة
     6.  الـ Modals
     7.  التنقّل: Navbar / Sidebar / Dropdowns
     8.  Typography مرنة
     9.  الشاشات الكبيرة جداً
     10. RTL (Logical Properties)
     11. أدوات مساعدة عامة
     12. الطباعة وتفضيلات الحركة
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. نقاط الارتكاز المشتركة
   -------------------------------------------------------------------------- */
:root {
    /* هامش جانبي مرن: 12px على 320px ويصل إلى 24px على الشاشات الكبيرة */
    --rsp-gutter: clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem);
    --rsp-gap: clamp(0.5rem, 0.35rem + 0.75vw, 1rem);
    /* أصغر مقاس لمس مريح (WCAG 2.5.5) */
    --rsp-touch: 44px;
}

/* --------------------------------------------------------------------------
   1. احتواء الـ Overflow من جذوره
   --------------------------------------------------------------------------
   السبب الأول للتمرير الأفقي في تخطيطات Bootstrap هو أن عناصر flex/grid
   لا تصغُر تحت عرض محتواها (min-width: auto الافتراضية). نصفّر ذلك على
   الحاويات المعروفة بدل إخفاء المشكلة بـ overflow-x: hidden.
   -------------------------------------------------------------------------- */
.col,
[class*="col-"],
.card,
.card-body,
.card-header,
.card-footer,
.info-box,
.info-box-content,
.small-box,
.media-body,
.flex-fill,
.flex-grow-1,
.nav-item,
.list-group-item,
.tab-content,
.tab-pane,
.modal-body,
.toast-body,
.accordion-body,
.alert,
.content,
.content-header {
    min-width: 0;
}

/* أبناء صفوف flex داخل التنبيهات: النمط الشائع أيقونة + نص، والنص لا يصغر
   تحت عرضه الطبيعي فيدفع التنبيه خارج الشاشة.
   قياس فعلي: /purchase/check-active-package تجاوز 18px عند 375px. */
.alert .d-flex > *,
.callout .d-flex > * {
    min-width: 0;
}

/* الوسائط لا تتجاوز حاويتها أبداً */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

/* الصور ذات الأبعاد الثابتة في الـ markup (width/height attributes) */
img[width],
img[height] {
    max-width: 100%;
    height: auto;
}

/* النصوص الطويلة غير القابلة للكسر: روابط، بريد، معرّفات، توكنات، رموز API */
.card-title,
.card-body,
.card-header,
.list-group-item,
.dropdown-item,
.breadcrumb-item,
.alert,
.modal-body,
.toast-body,
.timeline-body,
.direct-chat-text,
.callout,
dd,
figcaption {
    overflow-wrap: break-word;
}

/* محتوى تقني: يُكسر في أي موضع لأنه غالباً كلمة واحدة طويلة جداً */
code,
kbd,
samp,
.text-monospace,
.font-monospace,
a[href^="mailto:"],
a[href^="tel:"],
.wrap-anywhere {
    overflow-wrap: anywhere;
}

pre,
.pre-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* الشارات: Bootstrap (4 و5) يفرض عليها white-space: nowrap، فأي شارة تحمل
   جملة كاملة — وهو نمط مستعمل في المشروع للتلميحات — تدفع الصفحة كلها.
   قياس فعلي: شارة تلميح في /system/users بعرض 494px تسبّبت بتمرير أفقي
   مقداره 234px عند 320px. الشارات القصيرة (عدّاد، حالة) لا تتأثر لأنها
   أقصر من حاويتها أصلاً. عدّاد الإشعارات المطلق يبقى على سطر واحد. */
.badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.navbar-badge {
    white-space: nowrap;
}

/* صفوف Bootstrap 5 ذات الفجوة الكبيرة (g-4/g-5/gx-5) تضبط --bs-gutter-x على
   نفسها، فيصبح هامشها السالب (نصف الفجوة) أكبر من الحشوة الجانبية لـ.container
   وتتجاوز الشاشة. عقد Bootstrap هو: حشوة الحاوية = نصف الفجوة.
   لكن enhanced-main-style.css يفرض على .container حشوات ثابتة مختلفة:
       ≤576px → 12px   |   ≤1200px → 15px   |   >1200px → 20px
   فنحدّ الفجوة الأفقية عند ضعف الحشوة في كل طبقة. النتيجة: الصفوف تحاذي
   بقية أقسام الصفحة تماماً، والفجوة الرأسية (--bs-gutter-y) تبقى كما صُمّمت.
   قياس فعلي: /tutorials تجاوز 12px عند 375 و9px عند 768 و1024. */
.row[class*="g-4"],
.row[class*="g-5"],
.row[class*="gx-4"],
.row[class*="gx-5"] {
    --bs-gutter-x: 2.5rem;          /* >1200px: حشوة 20px */
}

@media (max-width: 1199.98px) {
    .row[class*="g-4"],
    .row[class*="g-5"],
    .row[class*="gx-4"],
    .row[class*="gx-5"] {
        --bs-gutter-x: 1.875rem;    /* حشوة 15px */
    }
}

@media (max-width: 575.98px) {
    .row[class*="g-4"],
    .row[class*="g-5"],
    .row[class*="gx-4"],
    .row[class*="gx-5"] {
        --bs-gutter-x: 1.5rem;      /* حشوة 12px */
    }
}

/* هوامش الحاويات تصبح مرنة بدل 15px الثابتة على الجوال */
@media (max-width: 575.98px) {
    .content-wrapper > .content > .container-fluid,
    .content-wrapper > .content-header > .container-fluid,
    .content-wrapper > .content > .container,
    .content-wrapper > .content-header > .container {
        padding-inline: var(--rsp-gutter);
    }
}

/* --------------------------------------------------------------------------
   2. الجداول
   --------------------------------------------------------------------------
   كل <table> غير ملفوف يُلفّ تلقائياً بـ .table-scroll عبر
   public/js/responsive.js، فلا حاجة لتعديل صفحات Blade واحدة واحدة.
   -------------------------------------------------------------------------- */
.table-responsive,
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* مساحة للـ scrollbar حتى لا يغطّي آخر صف */
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 3px;
}

.table-responsive > .table,
.table-scroll > .table {
    margin-bottom: 0;
}

/* الخلايا: اسمح بكسر النص الطويل بدل تمدد الجدول بلا نهاية */
.table td,
.table th {
    overflow-wrap: break-word;
}

/* خلايا تحتوي بريد/رابط/معرّف */
.table td a[href^="mailto:"],
.table td a[href^="http"],
.table td code {
    overflow-wrap: anywhere;
}

/* أزرار الإجراءات داخل الجداول: لا تُكسر أيقوناتها */
.table td .btn-group,
.table td .btn-toolbar {
    flex-wrap: nowrap;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* كثافة أعلى على الجوال لتقليل الحاجة للتمرير الأفقي */
    .table:not(.table-keep-padding) > :not(caption) > * > * {
        padding: 0.5rem;
    }

    .table,
    .table-sm {
        font-size: 0.875rem;
    }
}

/* DataTables: عناصر التحكم تلتف بدل أن تدفع العرض */
.dataTables_wrapper .row {
    margin-inline: 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: start;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-inline-start: 0;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none;
        display: flex;
        justify-content: center;
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   3. النماذج والحقول
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.custom-select,
.custom-file,
textarea,
select,
input {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* مكتبات الاختيار المستعملة في المشروع */
.select2-container,
.ts-wrapper,
.tom-select {
    max-width: 100%;
}

.select2-container .select2-dropdown {
    max-width: 100vw;
}

/* قوائم select2 الطويلة: لا تخرج عن الشاشة */
.select2-results__option {
    overflow-wrap: anywhere;
}

/* مجموعات الإدخال: تلتف على الشاشات الصغيرة بدل أن تدفع العرض */
@media (max-width: 575.98px) {
    .input-group:not(.input-group-nowrap) {
        flex-wrap: wrap;
    }

    .input-group:not(.input-group-nowrap) > .form-control,
    .input-group:not(.input-group-nowrap) > .custom-select,
    .input-group:not(.input-group-nowrap) > .form-select {
        min-width: 60%;
    }
}

/* تسميات الأعمدة الأفقية (col-form-label) تصبح فوق الحقل على الجوال */
@media (max-width: 767.98px) {
    .form-group.row > .col-form-label,
    .row.form-group > .col-form-label,
    .mb-3.row > .col-form-label {
        text-align: start;
        padding-bottom: 0.25rem;
    }
}

/* رسائل التحقق لا تتجاوز الحقل */
.invalid-feedback,
.valid-feedback,
.form-text,
.help-block {
    overflow-wrap: break-word;
    max-width: 100%;
}

/* منع تكبير iOS التلقائي عند التركيز على حقل (<16px يسبب zoom) */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .custom-select,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"] {
        font-size: 16px;
    }
}

/* حقول الترشيح/البحث في رؤوس البطاقات */
@media (max-width: 767.98px) {
    .card-header .card-tools,
    .card-header .card-tools .input-group {
        max-width: 100%;
        float: none;
    }
}

/* --------------------------------------------------------------------------
   4. الأزرار وأشرطة الأدوات
   -------------------------------------------------------------------------- */
.btn {
    /* النص الطويل داخل الزر (عربي/إنجليزي) لا يكسر التخطيط */
    max-width: 100%;
    overflow-wrap: break-word;
}

.btn-group,
.btn-toolbar {
    max-width: 100%;
}

/* شريط أدوات عام: يلتف تلقائياً */
.btn-toolbar,
.actions-bar {
    flex-wrap: wrap;
    gap: var(--rsp-gap);
}

/* أي صف flex يحمل فراغاً (gap-*) يُسمح له بالالتفاف على الشاشات الضيقة.
   .d-flex في Bootstrap لا يلتف افتراضياً، فصف من خانات اختيار أو أزرار
   مع gap حقيقي يتجاوز الشاشة عند 320px بدل أن ينزل لسطر ثانٍ.
   قياس فعلي: صف .d-flex.gap-3 في /campaigns/create تجاوز 9px عند 320px.
   مستثنى: من صرّح بـ flex-nowrap أو flex-column أو حدّد سلوكه بنفسه. */
@media (max-width: 575.98px) {
    .d-flex[class*="gap-"]:not(.flex-nowrap):not([class*="flex-column"]):not([class*="flex-wrap"]) {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    /* مجموعات الأزرار تتحول لشبكة مرنة بدل صف واحد يتجاوز الشاشة.
       مستثنى منها ما داخل خلايا الجداول (الجدول نفسه قابل للتمرير أفقياً،
       وتوسيع الأزرار هناك يوسّع الأعمدة بلا داعٍ). */
    .btn-group:not(.btn-group-keep):not(.btn-group-sm):not(.btn-group-toggle) {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .btn-group:not(.btn-group-keep):not(.btn-group-sm):not(.btn-group-toggle) > .btn {
        flex: 1 1 auto;
    }

    .table td .btn-group,
    .table th .btn-group {
        display: inline-flex;
        flex-wrap: nowrap;
        width: auto;
    }

    .table td .btn-group > .btn,
    .table th .btn-group > .btn {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* أهداف لمس مريحة */
    .btn:not(.btn-sm):not(.btn-xs):not(.close):not(.btn-link) {
        min-height: var(--rsp-touch);
    }
}

/* حاوية أزرار الإجراءات داخل الجداول.
   كانت معرّفة حرفياً ثلاث مرات في companies/index و role/index و
   permission/index — نُقلت هنا بلا تغيير في السلوك. */
.table-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.header-container-custom {
    gap: 15px;
}

.btn-group-custom {
    gap: 8px;
}

@media (max-width: 767.98px) {
    .header-container-custom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .btn-group-custom {
        justify-content: center;
        width: 100%;
    }

    .btn-group-custom .btn,
    .btn-group-custom a {
        flex: 1 1 auto;
        min-width: 120px;
        max-width: 250px;
        margin: 4px;
        text-align: center;
        justify-content: center;
        float: none;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    .table-actions-container {
        justify-content: center;
    }

    .table-actions-container .btn,
    .table-actions-container form {
        width: 100%;
        max-width: 240px;
        margin: 4px auto;
        display: block;
        text-align: center;
    }

    .table-actions-container form .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* --------------------------------------------------------------------------
   5. البطاقات والشبكات ورأس الصفحة
   --------------------------------------------------------------------------
   نمط متكرر في المشروع: عنوان في جهة ومجموعة أزرار في الأخرى داخل
   .content-header أو .page-header. يُعالَج مرة واحدة هنا.
   -------------------------------------------------------------------------- */
.content-header .row,
.page-header .row {
    row-gap: var(--rsp-gap);
}

/* الحاوية العامة لرأس الصفحة (تستعملها x-page-header) */
.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsp-gap);
}

.page-toolbar > .page-toolbar-title {
    min-width: 0;
}

.page-toolbar > .page-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsp-gap);
}

/* .page-title / .page-subtitle كانا بلا تنسيق في المشروع رغم استعمالهما
   في عشرات الصفحات — يُعرَّفان هنا مرة واحدة. */
.page-subtitle {
    color: #6c757d;
    margin-bottom: 0;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .page-toolbar > .page-toolbar-actions {
        width: 100%;
    }

    .page-toolbar > .page-toolbar-actions > .btn {
        flex: 1 1 calc(50% - var(--rsp-gap));
        justify-content: center;
        text-align: center;
    }
}

/* رؤوس البطاقات: العنوان والأدوات يتكدسان بدل التجاوز */
@media (max-width: 575.98px) {
    .card-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--rsp-gap);
    }

    /* clearfix الخاص بـ AdminLTE يصبح عنصر flex فارغاً — نُلغيه هنا */
    .card-header::after {
        display: none;
    }

    .card-header > .card-title,
    .card-header > .card-tools {
        float: none;
        margin: 0;
    }

    .card-header > .card-title {
        flex: 1 1 100%;
    }

    .card-body {
        padding: var(--rsp-gutter);
    }
}

/* البطاقات الإحصائية: أرقام طويلة لا تكسر الصندوق */
.info-box-number,
.small-box h3,
.description-header {
    overflow-wrap: anywhere;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
}

.info-box-text,
.small-box p,
.description-text {
    overflow-wrap: break-word;
}

/* شبكة بطاقات عامة قابلة لإعادة الاستخدام (بديل مرن عن col-md-4 الثابتة) */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--rsp-gap);
}

.auto-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.auto-grid-lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* --------------------------------------------------------------------------
   6. الـ Modals
   -------------------------------------------------------------------------- */
.modal-body {
    overflow-wrap: break-word;
}

.modal-title {
    overflow-wrap: break-word;
    min-width: 0;
}

.modal-header,
.modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 767.98px) {
    /* modal-lg / modal-xl تعود لعرض الشاشة كاملاً مع هامش صغير.
       المودالات المعلَنة modal-fullscreen-*-down مستثناة: عرضها 100% وهامشها
       صفر بحكم تعريفها، وفرض هامش عليها كان يُخرجها 8px عن حافة الشاشة. */
    .modal-dialog:not([class*="modal-fullscreen"]),
    .modal-dialog.modal-lg:not([class*="modal-fullscreen"]),
    .modal-dialog.modal-xl:not([class*="modal-fullscreen"]) {
        max-width: none;
        margin: 0.5rem;
    }

    /* الجسم يتمرر رأسياً بدل أن يخرج المودال عن الشاشة.
       100dvh تحسب شريط المتصفح المتحرك على الجوال. */
    .modal-body {
        max-height: calc(100vh - 11rem);
        max-height: calc(100dvh - 11rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog:not([class*="modal-fullscreen"]) {
        margin: 0.35rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-inline: var(--rsp-gutter);
    }
}

/* --------------------------------------------------------------------------
   7. التنقّل: Navbar / Sidebar / Dropdowns
   -------------------------------------------------------------------------- */

/* الشريط العلوي لا يتجاوز الشاشة ولا ينتج تمريراً أفقياً */
.main-header,
.main-header .navbar-nav,
#mainNavbar .navbar-nav {
    max-width: 100%;
}

/* القوائم المنسدلة: لا تتجاوز الشاشة أبداً.
   المقاسات المعرّفة في AdminLTE (dropdown-menu-lg/xl) تحتفظ بعرضها على
   الشاشات الكبيرة وتنكمش فقط عند الحاجة. */
.dropdown-menu {
    max-width: calc(100vw - 1rem);
}

.dropdown-menu:not(.dropdown-menu-lg):not(.dropdown-menu-xl) {
    max-width: min(320px, calc(100vw - 1rem));
}

.dropdown-item {
    overflow-wrap: break-word;
    white-space: normal;
}

/* Breadcrumb طويل يلتف بدل أن يدفع الصفحة */
.breadcrumb {
    flex-wrap: wrap;
    max-width: 100%;
}

/* الترقيم: يلتف ويتوسّط على الشاشات الضيقة بدل أن يمتد أفقياً.
   (كان معرّفاً داخل companies/index فقط رغم أن المشكلة عامة) */
.pagination {
    flex-wrap: wrap;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .pagination {
        justify-content: center;
    }
}

/* السايدبار كـ Drawer على الشاشات الصغيرة:
   AdminLTE يتكفل بالإزاحة؛ نضيف قفل تمرير الصفحة خلف الـ overlay فقط. */
@media (max-width: 991.98px) {
    body.sidebar-open {
        overflow: hidden;
    }

    .main-sidebar {
        max-width: 85vw;
    }

    /* روابط السايدبار: أهداف لمس مريحة ونص يلتف */
    .nav-sidebar .nav-link {
        min-height: var(--rsp-touch);
        display: flex;
        align-items: center;
    }

    .nav-sidebar .nav-link p {
        overflow-wrap: break-word;
        white-space: normal;
    }
}

/* تبويبات أفقية طويلة: تلتف، أو تتمرر داخل حاويتها عند .nav-tabs-scroll */
.nav-tabs,
.nav-pills:not(.flex-column) {
    flex-wrap: wrap;
}

.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.nav-tabs-scroll > .nav-item > .nav-link {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Typography مرنة
   --------------------------------------------------------------------------
   تستبدل تجاوزات font-size الثابتة لكل breakpoint بقيمة واحدة تتدرّج.
   -------------------------------------------------------------------------- */
.content-header h1,
.content-header .h1,
.page-title {
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.875rem);
    line-height: 1.35;
    overflow-wrap: break-word;
}

.content-header h1 small,
.page-title small,
.page-subtitle {
    font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.95rem);
}

.card-title {
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
}

/* عناوين طويلة (أسماء حملات، قوالب، عملاء) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-1 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8b. حلقة التركيز بلوحة المفاتيح
   --------------------------------------------------------------------------
   الـ layout العام يملك نظام :focus-visible في enhanced-main-style.css، بينما
   الداخلي كان يعتمد على AdminLTE/Bootstrap الذي يلغي outline على .btn و.close
   فلا تظهر أي إشارة تركيز عند التنقل بـTab. هذه القاعدة توحّد السلوك بين
   الـlayoutين. :focus-visible لا يظهر مع نقر الفأرة، فلا أثر بصري على
   الاستخدام المعتاد.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.close:focus-visible,
.btn-close:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--wa-primary, #25d366);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   9. الشاشات الكبيرة جداً (Ultra-wide)
   --------------------------------------------------------------------------
   على 2560px تمتد .container-fluid بلا حدود فيصبح النص صعب المسح بالعين.
   نضع سقفاً مع توسيط، دون المساس بالمقاسات المعتادة.
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
    .content-wrapper > .content > .container-fluid,
    .content-wrapper > .content-header > .container-fluid {
        max-width: 1800px;
        margin-inline: auto;
    }
}

/* --------------------------------------------------------------------------
   10. RTL — Logical Properties
   --------------------------------------------------------------------------
   الأدوات الجديدة أعلاه تستعمل padding-inline / margin-inline / text-align:
   start فتعمل في الاتجاهين تلقائياً. هنا فقط ما لا يمكن التعبير عنه منطقياً.
   -------------------------------------------------------------------------- */

/* الأيقونات ذات الاتجاه (أسهم التنقّل) تنعكس في RTL */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   11. أدوات مساعدة عامة
   -------------------------------------------------------------------------- */

/* حاوية تمرير أفقي لأي محتوى عريض (كتل كود، مخططات، تقاويم) */
.scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* نسبة أبعاد ثابتة للفيديو/الخرائط/الـ iframes */
.ratio-16x9 {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ratio-16x9 > * {
    width: 100%;
    height: 100%;
}

/* إخفاء/إظهار حسب المقاس دون الاعتماد على أدوات إطار معيّن */
@media (max-width: 575.98px) {
    .hide-xs {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .only-xs {
        display: none !important;
    }
}

/* المخططات (Chart.js) داخل بطاقات: ارتفاع مرن بدل قيمة ثابتة */
.chart-box {
    position: relative;
    width: 100%;
    height: clamp(200px, 40vw, 360px);
}

.chart-box > canvas {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   12. الطباعة وتفضيلات الحركة
   -------------------------------------------------------------------------- */
@media print {
    .table-scroll,
    .table-responsive,
    .scroll-x {
        overflow: visible;
    }

    .main-sidebar,
    .main-header,
    .main-footer,
    .page-toolbar-actions {
        display: none !important;
    }

    .content-wrapper {
        margin: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}