@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;
}

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

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

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

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

.modal-confirm__positioner {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

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

.modal-confirm__dialog {
    position: relative;
    width: min(100%, 42rem);
    max-width: 100%;
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);
    margin: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow:
        0 1.25rem 3rem rgba(15, 23, 42, 0.20),
        0 0.25rem 1rem rgba(15, 23, 42, 0.08);
}

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

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

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

.modal-confirm__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    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.875rem;
    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 {
    color: var(--text, #132238);
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 800;
    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.25rem;
}

.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: 1rem 1.25rem 1.25rem;
}

.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.75rem;
    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.75rem;
}

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

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

.modal-confirm__body::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 107, 127, 0.42);
    border: 0.1875rem 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 180ms ease;
    }

    .modal-confirm__dialog {
        transition:
            opacity 180ms ease,
            transform 180ms 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.625rem) scale(0.985);
    }

    .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: 1rem;
    }

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

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

@media (max-width: 767.98px) {
    .modal-confirm__positioner {
        align-items: flex-end;
        padding: 0.75rem;
    }

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

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

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

    .modal-confirm__title {
        font-size: 1.0625rem;
        line-height: 1.45;
    }

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

    .modal-confirm__footer-inner {
        padding: 0.875rem 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: 0.5rem;
    }

    .modal-confirm__dialog {
        max-height: calc(100vh - 0.5rem);
        max-height: calc(100dvh - 0.5rem);
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

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