/* ══════════════════════════════════════════════════════════════════════
   النوافذ والرسائل الموحّدة
   ⚠️ يجب أن يُحمَّل بعد premium-theme.css و dashboard.css (لا بعد sweetalert2
      مباشرةً) لأن تلك الملفات تستخدم !important — وقبل @yield('styles')
      حتى تبقى قواعد الصفحات قادرة على التخصيص.
   1) زر إغلاق المودال لا يختفي خلف العناصر
   2) وضوح النافذة: سطح شبه مصمت + تعتيم أعمق + ترويسة مفصولة
   3) الرسائل: أيقونة × بدل الزر السلبي (المنطق في assets/js/ui-dialogs.js)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1) زر إغلاق المودال: داخل الإطار ودائماً فوق المحتوى ──────────────
   سبب اختفاء الزر خلف العناصر في قالب Vuexy:
   • القاعدة ‏.modal .btn-close‏ تحمل transform: translate(-31px,-25px)
     تُخرج الزر خارج زاوية المودال. في المودال العادي يبقى قابلاً للنقر فوق
     الخلفية، أما في ‎.modal-dialog-scrollable‎ فـ‎.modal-content{overflow:hidden}‎
     (core.css) يقصّه فيختفي فعلياً.
   • خارج .modal-header يبقى الزر position:static فلا يعمل معه z-index،
     فيُرسم بترتيب التدفّق ويعلوه أي عنصر لاحق.
   الحل: إلغاء الإزاحة + جعله عنصراً موضَّعاً في طبقة أعلى. */
.modal .btn-close,
.modal .btn-close:hover,
.modal .btn-close:focus,
.modal .btn-close:active,
[dir="rtl"] .modal .btn-close,
[dir="rtl"] .modal .btn-close:hover,
[dir="rtl"] .modal .btn-close:focus,
[dir="rtl"] .modal .btn-close:active,
html:not([dir="rtl"]) .modal .btn-close,
html:not([dir="rtl"]) .modal .btn-close:hover,
html:not([dir="rtl"]) .modal .btn-close:focus,
html:not([dir="rtl"]) .modal .btn-close:active {
    /* !important مقصود هنا وحده: إزاحة القالب عيب لا خيار تصميم، وقواعد
       الصفحات (‎.phi-modal‎ …) تتعادل معنا في الخصوصية وتُحمَّل بعدنا عبر
       ‎@yield('styles')‎ — فبدونها يعود الزر مقصوصاً كلما ضمّ المودال
       ‎.modal-content{overflow:hidden}‎ (وهو شائع في مودالات الصفحات). */
    transform: none !important;
    position: relative;
    z-index: 11;
}

/* ترويسة المودال فوق بقية أجزائه حتى لا يعلو .modal-body زرَّ الإغلاق */
.modal .modal-header,
.modal .app-modal-header {
    position: relative;
    z-index: 3;
}

/* داخل .modal-header يبقى الزر مطلقاً كما يعرّفه القالب — نضيف الطبقة فقط */
[dir="rtl"] .modal .modal-header .btn-close,
html:not([dir="rtl"]) .modal .modal-header .btn-close {
    position: absolute;
    z-index: 11;
}

/* استثناء: زر إغلاق تنبيه alert داخل مودال يبقى مطلقاً في زاويته */
.modal .alert-dismissible .btn-close {
    position: absolute;
    z-index: 2;
}

/* ⚠️ ترتيب هذه القاعدة بعد قاعدة [dir] السابقة مقصود — الخصوصية متعادلة
   فالفوز بالترتيب. محدِّد القالب ‎.modal .modal-header .btn-close‎ محدِّد نسل،
   فيُثبِّت الزر في زاوية الترويسة حتى لو كان مغلَّفاً داخل صندوق أزرار
   (‎.d-flex‎) — فيهبط فوق زر آخر ويحجب نقره (مثال: مودال معاينة المستند).
   داخل غلاف: يبقى الزر في تدفّق غلافه. */
.modal .modal-header > :not(.btn-close):not(.alert-dismissible) .btn-close {
    position: static;
    transform: none;
    margin: 0;
    z-index: auto;
}

/* زر الإغلاق يُقرأ كزر لا كرمز شارد.
   ⚠️ أيقونة × في القالب مرسومة داخل background-image بلون رمادي فاتح
   (‎stroke:#a5a3ae‎) وكان يعوّضها بخلفية بيضاء مصمتة وظل. إزالة الظل وحدها
   تُذيب الزر في الترويسة — لذلك نُعيد رسم الأيقونة بلون النص لا بالخلفية. */
.modal .btn-close {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4.5L5 13.5' stroke='%234b465c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 4.5L14 13.5' stroke='%234b465c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: rgba(75, 70, 92, .08);
    border-radius: .5rem;
    box-shadow: none;
    opacity: 1;
}
.modal .btn-close:hover,
.modal .btn-close:focus {
    background-color: rgba(212, 110, 42, .16);
}
/* على الأسطح الداكنة تُقلب الأيقونة لتبقى مرئية (نفس حيلة .btn-close-white) */
html.dark-style .modal .btn-close {
    background-color: rgba(255, 255, 255, .10);
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* الـoffcanvas نافذة حوار أيضاً — نفس الرقعة حتى لا تتفاوت نافذتان في صفحة */
.offcanvas .offcanvas-header .btn-close {
    background-color: rgba(75, 70, 92, .08);
    border-radius: .5rem;
    opacity: 1;
}
.offcanvas .offcanvas-header .btn-close:hover,
.offcanvas .offcanvas-header .btn-close:focus {
    background-color: rgba(212, 110, 42, .16);
}

/* ── 2) وضوح النافذة: سطح مصمت وطبقة تعتيم أعمق ───────────────────────
   premium-theme.css يجعل .modal-content زجاجاً شفافاً 72% مع blur 18px —
   جميل للأسطح الثابتة، لكن نافذة الحوار تُقرأ عندها مع الصفحة خلفها معاً
   فتبدو «غير واضحة». النافذة سطح قرار: شبه مصمتة، والصفحة خلفها تنسحب
   بتعتيم أعمق وتمويه خفيف. إلغاء backdrop-filter عن .modal-content يزيل
   أيضاً سياق تكديس كان يحبس z-index أبنائه (ومنهم زر الإغلاق).

   ⚠️ لا نكتب background هنا: قاعدة premium-theme تحمل !important فلن تُهزم
   بالخصوصية، ومزاحمتها بـ!important مضاد تفتح سباقاً يُبطل تخصيص الصفحات.
   الحل الأنظف: نُعيد تعريف المتغيّر الذي تقرأه هي — فتَرسم القاعدة نفسها
   سطحاً مصمتاً، وتبقى مودالات الصفحات المصمَّمة عمداً (‎.th-glass-modal‎ …)
   حرّة كما وعد رأس الملف. */
.modal .modal-content {
    --glass-bg: rgba(255, 255, 255, .985);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.dark-style .modal .modal-content {
    --glass-bg: rgba(34, 38, 47, .985);
}

.modal-backdrop {
    --bs-backdrop-bg: #2f2b3d;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.modal-backdrop.show {
    opacity: .62;
}

/* ترويسة مفصولة عن الجسم — القالب يجعل عرض الفاصل 0px فيلتصق العنوان بالمحتوى */
.modal .modal-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(75, 70, 92, .12);
}
html.dark-style .modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, .08);
}
.modal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

/* ── 3) نمط الرسالة الموحّد (.app-swal يضيفه ui-dialogs.js لكل رسالة) ─── */
.swal2-popup.app-swal {
    border-radius: .625rem;
    padding: 1.75rem 1.5rem 1.5rem;
    font-family: inherit;
    box-shadow: 0 .25rem 1.125rem rgba(75, 70, 92, .1);
}
.swal2-popup.app-swal .swal2-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b465c;
    padding: 0;
    margin-bottom: .35rem;
}
.swal2-popup.app-swal .swal2-html-container {
    font-size: .9375rem;
    line-height: 1.6;
    color: #6f6b7d;
    margin: .5rem 0 0;
}
.swal2-popup.app-swal .swal2-icon {
    margin: .25rem auto 1rem;
}
.swal2-popup.app-swal .swal2-actions {
    gap: .5rem;
    margin-top: 1.5rem;
}
/* أزرار Bootstrap: نُلغي هوامش me-* المتوارثة من نداءات قديمة */
.swal2-popup.app-swal .swal2-actions > .btn {
    margin: 0;
    min-width: 6rem;
}

/* ── 4) أيقونة × بدل الزر السلبي ─────────────────────────────────────── */
.swal2-popup .swal2-close {
    width: 2rem;
    height: 2rem;
    margin: .4rem .4rem -2.4rem;
    padding: 0;
    border: none;
    border-radius: .5rem;
    background: rgba(75, 70, 92, .06);
    color: #6f6b7d;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    transition: background-color .15s ease, color .15s ease, transform .2s ease;
}
.swal2-popup .swal2-close:hover {
    background: rgba(212, 110, 42, .12);
    color: #d46e2a;
    transform: rotate(90deg);
}
.swal2-popup .swal2-close:focus {
    outline: none;
    box-shadow: none;
}

/* زر deny: لا تستعمله أي صفحة في النظام (لا وجود لـ showDenyButton في أي
   نداء)، ومع ذلك ظهر زرّاً ثالثاً بنصّه الإنجليزي الافتراضي «No» في صفحة
   اشتراك ملف الإنجاز — على الأرجح لأن نسخة sweetalert أخرى تُحمَّل بعد
   ui-dialogs.js فتتجاهل توحيدنا. الحجب هنا حارس بصري مستقل عن سبب الظهور،
   يكمّل التمرير الصريح showDenyButton:false في ui-dialogs.js.
   ⚠️ إن احتيج زر deny مستقبلاً فالمكان الصحيح لرفع الحجب هو هنا مركزياً. */
.swal2-popup .swal2-deny {
    display: none !important;
}

/* التوستات تُغلق بالمؤقّت — لا زر إغلاق فيها */
.swal2-popup.swal2-toast .swal2-close {
    display: none;
}

/* أثناء تنفيذ عملية التأكيد (showLoaderOnConfirm) يختفي × حتى لا يُغلق
   المستخدم الحوار والطلب ما يزال جارياً فتضيع نتيجته */
.swal2-popup.swal2-loading .swal2-close,
.swal2-popup:has(.swal2-actions.swal2-loading) .swal2-close {
    display: none;
}

/* ── 5) التوستات: عرض أوسع قليلاً ونصّ أوضح ────────────────────────────
   القالب يعطيها 22em ونصّاً بلون #5d596c الباهت على أبيض — سطر عربي واحد
   يُقصّ فيلتفّ التفافاً ضيقاً، والتباين أضعف مما يستحقّه إشعار يُقرأ في
   ثوانٍ. التعديل مقيَّد بثلاثة مبادئ:
   • العرض 26em (‎+18%‎) لا أكثر — يتّسع لجملة عربية متوسطة دون أن يزاحم
     المحتوى، ولا يتجاوز الشاشة على الجوال.
   • ألوان النصّ من توكنات القالب نفسها: #4b465c للنص و#5d596c للعنوان
     الثانوي — تباين أعلى بلا لون جديد في النظام.
   • نصف القطر يساوي نصف قطر رقعة زر الإغلاق (‎.5rem‎) فتبدو الرسائل
     والنوافذ من عائلة واحدة.
   المُهَل والموضع والحركة ليست هنا — مقبضها window.appToast في
   assets/js/flash-toasts.js. */
#toast-container:not(.toast-bottom-full-width, .toast-top-full-width) > div {
    width: 26em !important;
    max-width: calc(100vw - 1.5rem) !important;
}

#toast-container > .toast {
    border-radius: .5rem;
    opacity: 1;   /* الوضوح أولاً — كان .96 في dashboard.css */
}

.toast-message {
    font-size: .9375rem;
    line-height: 1.6;
    color: #4b465c;
}

.toast-title {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: .3rem;
}

.dark-style .toast-message {
    color: #cfd3ec;
}