/**
 * ============================================================
 * الملف: assets/css/ui-system.css
 * المسار: /assets/css/ui-system.css
 * الوصف: نظام موحد لأحجام النوافذ والطبقات والاستجابة
 * المطور: بومبو
 * الملكية: الملكية الخاصة لشركة المتر
 * الإصدار: 1.0.2
 * ============================================================
 */

:root {
    --kh-layer-menu: 1040;
    --kh-layer-backdrop: 1080;
    --kh-layer-modal: 1090;
    --kh-layer-popover: 1110;
    --kh-layer-toast: 1140;
    --kh-modal-sm: 430px;
    --kh-modal-md: 680px;
    --kh-modal-lg: 960px;
    --kh-modal-xl: 1180px;
    --kh-modal-edge: 18px;
}

.modal-backdrop,
.kh-modal-backdrop {
    z-index: var(--kh-layer-backdrop) !important;
}

.modal,
.kh-modal,
dialog.kh-dialog,
dialog.ai-dialog {
    z-index: var(--kh-layer-modal) !important;
}

.popover,
.tooltip,
.dropdown-menu.show,
.flatpickr-calendar.open {
    z-index: var(--kh-layer-popover) !important;
}

.toast-container,
.kh-toast-layer,
[data-toast-container] {
    z-index: var(--kh-layer-toast) !important;
}

.modal-dialog {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-md));
    max-width: none !important;
    margin: var(--kh-modal-edge) auto;
}

.modal-sm .modal-dialog,
.modal-dialog.modal-sm,
.modal-dialog[data-kh-size="sm"],
[data-kh-modal-size="sm"] .modal-dialog {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-sm));
}

.modal-lg .modal-dialog,
.modal-dialog.modal-lg,
.modal-dialog[data-kh-size="lg"],
[data-kh-modal-size="lg"] .modal-dialog {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-lg));
}

.modal-xl .modal-dialog,
.modal-dialog.modal-xl,
.modal-dialog[data-kh-size="xl"],
[data-kh-modal-size="xl"] .modal-dialog {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-xl));
}

.modal-content,
.kh-modal-content {
    max-height: calc(100dvh - (var(--kh-modal-edge) * 2));
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}

.modal-body,
.kh-modal-body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.modal-header,
.modal-footer,
.kh-modal-header,
.kh-modal-footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    background: inherit;
}

dialog.kh-dialog,
dialog.ai-dialog {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-lg));
    max-width: none;
    max-height: calc(100dvh - (var(--kh-modal-edge) * 2));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .32);
}

dialog.kh-dialog[data-kh-size="xl"],
dialog.ai-dialog[data-kh-size="xl"] {
    width: min(calc(100vw - (var(--kh-modal-edge) * 2)), var(--kh-modal-xl));
}

dialog.kh-dialog::backdrop,
dialog.ai-dialog::backdrop {
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
}

body.kh-overlay-open {
    overflow: hidden !important;
    padding-right: var(--kh-scrollbar-compensation, 0px);
}

@media (max-width: 575.98px) {
    :root {
        --kh-modal-edge: 8px;
    }

    .modal-dialog,
    .modal-sm .modal-dialog,
    .modal-lg .modal-dialog,
    .modal-xl .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .modal-content,
    .kh-modal-content,
    dialog.kh-dialog,
    dialog.ai-dialog {
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    .modal-header,
    .modal-footer {
        padding: 12px 14px;
    }

    .modal-body {
        padding: 14px;
    }

    .modal-footer {
        gap: 8px;
    }

    .modal-footer > .btn {
        flex: 1 1 140px;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-dialog,
    dialog {
        transition: none !important;
        animation: none !important;
    }
}