@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/components/modals.css
| الوصف:
|   أنماط المودالات المشتركة على مستوى المنصة.
|
| الهدف:
|   - توحيد بنية المودالات المركزية داخل المشروع.
|   - دعم رأس واضح للمودال، جسم داخلي قابل للتمرير، وذيل منظم للأزرار.
|   - منع كل صفحة من إنشاء سلوك مختلف للمودالات.
|   - تحسين تجربة الاستخدام على الجوال والشاشات الصغيرة عند امتلاء المحتوى.
|   - توفير بنية مرنة قابلة لإعادة الاستخدام مع modal-confirm والمودالات المستقبلية.
|
| المكونات المستهدفة:
|   - .modal-confirm
|   - .modal-confirm__backdrop
|   - .modal-confirm__viewport
|   - .modal-confirm__positioner
|   - .modal-confirm__dialog
|   - .modal-confirm__content
|   - .modal-confirm__header
|   - .modal-confirm__body
|   - .modal-confirm__footer
|
| القواعد:
|   - لا توضع هنا أنماط صفحات كاملة.
|   - لا توضع هنا أنماط تخص layout عام.
|   - لا يعتمد هذا الملف على JavaScript inline.
|   - يجب أن يبقى هذا الملف مرجعًا مركزيًا لأي modal مشترك في المنصة.
|   - يتم تمرير المحتوى الطويل داخل body فقط، وليس على كامل المودال.
|
| ملاحظات:
|   - هذا الملف يفترض أن إظهار/إخفاء المودال يتم عبر JS بإزالة/إضافة
|     أصناف مثل u-hidden أو عبر data attributes.
|   - تم دعم وحدات viewport الحديثة مثل dvh لتحسين التوافق مع الجوال.
|   - يوجد fallback إلى vh للحالات التي لا تدعم dvh.
*/

/* ==========================================================================
   Root Modal Wrapper
   ========================================================================== */

.modal-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  isolation: isolate;
}

.modal-confirm[hidden] {
  display: none !important;
}

/* ==========================================================================
   Backdrop
   ========================================================================== */

.modal-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ==========================================================================
   Viewport / Positioner
   ========================================================================== */

.modal-confirm__viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.modal-confirm__positioner {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

/* ==========================================================================
   Dialog
   ========================================================================== */

.modal-confirm__dialog {
  position: relative;
  width: min(100%, 40rem);
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: 0;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 1rem 2.25rem rgba(15, 23, 42, 0.16),
    0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   Dialog Content Structure
   ========================================================================== */

.modal-confirm__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
  background: var(--surface, #ffffff);
}

/* ==========================================================================
   Header
   ========================================================================== */

.modal-confirm__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--line, #d8e2ee);
  background: var(--surface, #ffffff);
  flex: 0 0 auto;
}

.modal-confirm__header-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.modal-confirm__icon {
  flex: 0 0 auto;
}

.modal-confirm__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.modal-confirm__title {
  margin: 0;
  color: var(--text, #132238);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 800;
  overflow-wrap: break-word;
}

.modal-confirm__subtitle {
  margin: 0.35rem 0 0;
  color: var(--muted, #5b6b7f);
  font-size: 0.9375rem;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.modal-confirm__meta {
  color: var(--muted, #5b6b7f);
  flex-wrap: wrap;
}

.modal-confirm__header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.modal-confirm__close {
  white-space: nowrap;
}

/* ==========================================================================
   Body
   ========================================================================== */

.modal-confirm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.modal-confirm__body-inner {
  padding: 1.125rem;
}

.modal-confirm__description {
  min-width: 0;
}

.modal-confirm__text,
.modal-confirm__body-html {
  overflow-wrap: break-word;
  word-break: break-word;
}

.modal-confirm__body-html > :first-child {
  margin-top: 0;
}

.modal-confirm__body-html > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.modal-confirm__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line, #d8e2ee);
  background: var(--surface, #ffffff);
  padding: 0;
}

.modal-confirm__footer-inner {
  padding: 0.875rem 1.125rem 1rem;
}

.modal-confirm__divider {
  margin: 0;
}

.modal-confirm__before-actions,
.modal-confirm__after-actions {
  min-width: 0;
}

.modal-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.modal-confirm__actions > * {
  flex: 0 0 auto;
}

.modal-confirm__form {
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   Scrollbar Enhancements
   ========================================================================== */

.modal-confirm__body::-webkit-scrollbar {
  width: 0.7rem;
}

.modal-confirm__body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-confirm__body::-webkit-scrollbar-thumb {
  background: rgba(91, 107, 127, 0.24);
  border-radius: 999px;
  border: 0.18rem solid transparent;
  background-clip: padding-box;
}

.modal-confirm__body::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 107, 127, 0.36);
  border: 0.18rem solid transparent;
  background-clip: padding-box;
}

/* ==========================================================================
   Open State Helpers
   ========================================================================== */

.modal-confirm[aria-hidden="true"] {
  pointer-events: none;
}

.modal-confirm[aria-hidden="false"] {
  pointer-events: auto;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .modal-confirm__backdrop {
    transition: opacity 160ms ease;
  }

  .modal-confirm__dialog {
    transition:
      opacity 160ms ease,
      transform 160ms ease;
    transform: translateY(0);
  }

  .modal-confirm[aria-hidden="true"] .modal-confirm__backdrop {
    opacity: 0;
  }

  .modal-confirm[aria-hidden="true"] .modal-confirm__dialog {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.99);
  }

  .modal-confirm[aria-hidden="false"] .modal-confirm__backdrop {
    opacity: 1;
  }

  .modal-confirm[aria-hidden="false"] .modal-confirm__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   Tablet and Down
   ========================================================================== */

@media (max-width: 991.98px) {
  .modal-confirm__positioner {
    padding:
      max(0.875rem, env(safe-area-inset-top))
      max(0.875rem, env(safe-area-inset-right))
      max(0.875rem, env(safe-area-inset-bottom))
      max(0.875rem, env(safe-area-inset-left));
  }

  .modal-confirm__dialog {
    width: min(100%, 37rem);
    max-height: calc(100vh - 1.75rem);
    max-height: calc(100dvh - 1.75rem);
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767.98px) {
  .modal-confirm__positioner {
    align-items: center;
    justify-content: center;
    padding:
      max(1rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }

  .modal-confirm__dialog {
    width: 100%;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    border-radius: 1rem;
  }

  .modal-confirm__header {
    padding: 0.9rem 1rem;
    gap: 0.75rem;
  }

  .modal-confirm__header-main {
    gap: 0.625rem;
  }

  .modal-confirm__title {
    font-size: 1rem;
    line-height: 1.4;
  }

  .modal-confirm__subtitle {
    font-size: 0.875rem;
    line-height: 1.75;
  }

  .modal-confirm__body-inner {
    padding: 1rem;
  }

  .modal-confirm__footer-inner {
    padding: 0.8rem 1rem 1rem;
  }

  .modal-confirm__actions {
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-start;
  }

  .modal-confirm__actions > *,
  .modal-confirm__actions .btn,
  .modal-confirm__actions a,
  .modal-confirm__actions form {
    width: 100%;
  }

  .modal-confirm__form {
    display: block;
  }

  .modal-confirm__form .btn {
    width: 100%;
  }

  .modal-confirm__close {
    min-width: auto;
  }
}

/* ==========================================================================
   Very Small Screens
   ========================================================================== */

@media (max-width: 479.98px) {
  .modal-confirm__positioner {
    padding:
      max(0.875rem, env(safe-area-inset-top))
      max(0.625rem, env(safe-area-inset-right))
      max(0.875rem, env(safe-area-inset-bottom))
      max(0.625rem, env(safe-area-inset-left));
  }

  .modal-confirm__dialog {
    max-height: calc(100vh - 1.75rem);
    max-height: calc(100dvh - 1.75rem);
    border-radius: 0.95rem;
  }

  .modal-confirm__header,
  .modal-confirm__body-inner,
  .modal-confirm__footer-inner {
    padding-inline: 0.875rem;
  }
}