/**
 * Nestiko shell: Bootstrap modals as right-edge drawers (same interaction model as filter drawer).
 * Scoped to body.app-body. Opt out: .modal-layout-centered on .modal-dialog or data-modal-layout="center" on .modal / .modal-dialog.
 *
 * Width tiers via data-nestiko-drawer-size (set in common.js): sm ≈ quarter, md ≈ half, lg ≈ wide / xl forms.
 */

/* Sit above the shared overlay stack when both filter drawers and modals can exist */
body.app-body .modal {
    z-index: var(--nk-z-modal) !important;
}

body.app-body .modal-backdrop {
    z-index: var(--nk-z-modal-backdrop) !important;
}

/* Datetime widgets must stack above modals and any portaled UI. */
body.app-body .bootstrap-datetimepicker-widget {
    z-index: var(--nk-z-datepicker) !important;
}

body.app-body .modal.in:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)),
body.app-body .modal.show:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)),
/* Keep flex shell while .in is removed so the drawer can slide out without jumping to block layout */
body.app-body .modal.nestiko-modal-drawer--closing:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) {
    display: flex !important;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

body.app-body .modal.in:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)),
body.app-body .modal.show:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) {
    overflow-y: auto !important;
}

html[dir='rtl'] body.app-body .modal.in:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)),
html[dir='rtl'] body.app-body .modal.show:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)),
html[dir='rtl'] body.app-body .modal.nestiko-modal-drawer--closing:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) {
    justify-content: flex-start;
}

/* Centered layout: restore classic modal */
body.app-body .modal.in.modal-layout-centered,
body.app-body .modal.show.modal-layout-centered,
body.app-body .modal.in[data-modal-layout='center'],
body.app-body .modal.show[data-modal-layout='center'],
body.app-body .modal.in:has(.modal-dialog.modal-layout-centered),
body.app-body .modal.show:has(.modal-dialog.modal-layout-centered) {
    display: block !important;
    padding: 15px !important;
    padding-bottom: calc(15px + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

body.app-body .modal.in.modal-layout-centered .modal-dialog,
body.app-body .modal.show.modal-layout-centered .modal-dialog,
body.app-body .modal.in[data-modal-layout='center'] .modal-dialog,
body.app-body .modal.show[data-modal-layout='center'] .modal-dialog,
body.app-body .modal.in:has(.modal-dialog.modal-layout-centered) .modal-dialog,
body.app-body .modal.show:has(.modal-dialog.modal-layout-centered) .modal-dialog {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 30px auto !important;
    transform: none !important;
}

/* Backdrop fade aligned with drawer slide (Bootstrap default can feel faster than the panel) */
body.app-body .modal-backdrop.fade {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Slide from edge (not vertical drop) */
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)).fade .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translate3d(100%, 0, 0) !important;
    -webkit-transform: translate3d(100%, 0, 0) !important;
}

html[dir='rtl'] body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)).fade .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) {
    transform: translate3d(-100%, 0, 0) !important;
    -webkit-transform: translate3d(-100%, 0, 0) !important;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)).fade.in .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']),
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)).in .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']),
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)).show .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) {
    margin: 0 !important;
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Default until JS assigns data-nestiko-drawer-size */
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']):not([data-nestiko-drawer-size]) {
    width: min(100%, max(20rem, 50vw)) !important;
    max-width: min(100%, 48rem);
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog[data-nestiko-drawer-size='sm'] {
    width: min(100%, max(16rem, 25vw)) !important;
    max-width: min(100%, 26rem);
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog[data-nestiko-drawer-size='md'] {
    width: min(100%, max(22rem, 50vw)) !important;
    max-width: min(100%, 48rem);
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog[data-nestiko-drawer-size='lg'] {
    width: min(100%, 92vw) !important;
    max-width: min(100%, 72rem);
}

@media (max-width: 576px) {
    body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) {
        width: 100% !important;
        max-width: 100% !important;
    }
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-default, #e2e8f0);
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.15);
}

html[dir='rtl'] body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content {
    border-left: none;
    border-right: 1px solid var(--border-default, #e2e8f0);
    box-shadow: 12px 0 40px rgba(15, 23, 42, 0.15);
}

:root[data-theme='dark'] body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content {
    border-left-color: var(--border-strong, #334866);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
}

:root[data-theme='dark'] html[dir='rtl'] body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content {
    border-right-color: var(--border-strong, #334866);
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.45);
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-header {
    flex-shrink: 0;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-body {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/*
 * Many modals wrap header/body/footer in a single <form> inside .modal-content. Without a nested flex
 * column, the middle section does not scroll and the footer is pushed past the viewport (clipped).
 */
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content > form > .modal-header {
    flex-shrink: 0;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content > form > .modal-body,
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content > form > .notification-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-content > form > .modal-footer {
    flex-shrink: 0;
}

/* Notification template: centered-modal max-height breaks full-height drawer layout */
body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .nestiko-notification-modal .notification-modal-body {
    max-height: none;
}

body.app-body .modal:not([data-modal-layout='center']):not(:has(.modal-dialog.modal-layout-centered)) .modal-dialog:not(.modal-layout-centered):not([data-modal-layout='center']) .modal-footer {
    flex-shrink: 0;
}

@media print {
    body.app-body .modal,
    body.app-body .modal.in,
    body.app-body .modal.show {
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    body.app-body .modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    body.app-body .modal .modal-content {
        border: none !important;
        box-shadow: none !important;
    }
}