/* Dialog contract: neutral chrome, 24px inset, 16px sections, 8px actions.
   Keep plugin sizing, DOM/tab order, dismiss handlers and loading states intact.
   SweetAlert2 here is the legacy .swal2-modal/.swal2-buttonswrapper release. */
.modal {
    --mkp-dialog-inset: 1.5rem;
    --bs-modal-width: 512px;
    --bs-modal-margin: 1rem;
    --bs-modal-bg: var(--mkp-surface);
    --bs-modal-color: var(--mkp-foreground);
    --bs-modal-border-color: var(--mkp-border);
    --bs-modal-border-radius: var(--mkp-radius-lg);
}

.modal-backdrop { --bs-backdrop-opacity: .5; }

.modal-dialog:not(.modal-dialog-scrollable):not([class*="modal-fullscreen"]) {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal .modal-content {
    color: var(--mkp-foreground);
    background: var(--mkp-surface);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    font-family: var(--mkp-font);
    font-size: .875rem;
    line-height: 1.5;
}

.modal .modal-header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
}

.modal .modal-title {
    color: var(--mkp-foreground);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.modal .modal-header .btn-close {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    padding: .5rem;
    margin: -.25rem -.5rem 0 auto;
    border-radius: var(--mkp-radius-sm);
    opacity: .65;
}

.modal .modal-header .btn-close:hover {
    background-color: var(--mkp-muted);
    opacity: 1;
}

.modal .modal-body { padding: 1rem var(--mkp-dialog-inset) 1.5rem; }
.modal .modal-body > :last-child { margin-bottom: 0; }

/* Standalone choices read as checkboxes, not full-width text inputs.
   Keep the native label association and a comfortable label hit target. */
.modal form > .mb-3 > .form-check:not(.form-switch,.form-check-inline) {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-height: 2rem;
    margin: 0;
    padding: .25rem 0;
}

.modal form > .mb-3 > .form-check:not(.form-switch,.form-check-inline) > :is(.form-check-input,.icheckbox_flat-green,.iradio_flat-green) {
    flex: 0 0 1rem;
    margin: .375rem 0 0;
}

.modal form > .mb-3 > .form-check:not(.form-switch,.form-check-inline) > .form-check-label {
    flex: 1;
    padding-block: .25rem;
    color: var(--mkp-foreground);
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
}

/* Empty validation placeholders stay empty; real errors receive a readable
   gap without altering the validator's visibility or announcement behavior. */
.modal .field-validation-error:not(:empty) {
    display: block;
    margin-top: .375rem;
    line-height: 1.5;
}

.modal .validation-summary-errors ul {
    margin-block: 0 1rem;
    padding-inline-start: 1.25rem;
}

/* AJAX partials and static forms both leave Bootstrap field margins at their
   end. The body already supplies the space before the action bar. */
.modal .modal-body form > .mb-3:not(:has(~ :not(input[type="hidden"],script))) {
    margin-bottom: 0 !important;
}

.modal .modal-footer {
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem var(--mkp-dialog-inset);
    border-top: 1px solid var(--mkp-border);
    border-radius: 0 0 var(--mkp-radius-lg) var(--mkp-radius-lg);
    background: var(--mkp-muted);
}

.modal .modal-footer > * { margin: 0; }
.modal .modal-footer .btn { min-height: 2.25rem; }

/* Some partials own their footer inside the body. Give them the same edge
   alignment without moving controls, changing tab order or clipping popups. */
.modal .modal-body .modal-footer {
    margin: 1.5rem calc(-1 * var(--mkp-dialog-inset)) -1.5rem;
}

.modal .modal-footer > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
    margin: 0 !important;
}

.modal .modal-footer > .row > .btn {
    flex: 0 1 auto;
    width: auto;
    margin: 0 !important;
}

/* The financial import has its actions inside the upload form. Keep native
   file selection and progress updates; style only their modal presentation. */
.modal #form-upload input[type="file"] {
    display: block;
    width: 100%;
    margin-top: .5rem;
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius);
    background: var(--mkp-surface);
    color: var(--mkp-muted-foreground);
    font: inherit;
}

.modal #form-upload input[type="file"]::file-selector-button {
    min-height: 2.5rem;
    margin-inline-end: .75rem;
    padding: .5rem .75rem;
    border: 0;
    border-inline-end: 1px solid var(--mkp-border);
    background: var(--mkp-muted);
    color: var(--mkp-foreground);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.modal #form-upload input[type="file"]::file-selector-button:hover {
    background: var(--mkp-border);
}

.modal #form-upload input[type="file"]:focus-visible {
    outline: 2px solid var(--mkp-muted-foreground);
    outline-offset: 2px;
    box-shadow: var(--mkp-ring);
}

.modal #form-upload > .py-3:has(> #import-progress-container[style*="display:none"]):has(> #import-status:empty),
.modal #form-upload > .py-3:has(> #import-progress-container[style*="display: none"]):has(> #import-status:empty) {
    padding-block: 0 !important;
}

.modal #form-upload > .text-center:not(:has(~ :not(input[type="hidden"],script))) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin: 1.5rem calc(-1 * var(--mkp-dialog-inset)) -1.5rem !important;
    padding: 1rem var(--mkp-dialog-inset);
    border-top: 1px solid var(--mkp-border);
    border-radius: 0 0 var(--mkp-radius-lg) var(--mkp-radius-lg);
    background: var(--mkp-muted);
}

/* Kendo positions/resizes its own windows: do not override inline dimensions,
   transforms, overflow, z-index or maximized/minimized state. */
.k-window, .k-dialog {
    color: var(--mkp-foreground);
    background: var(--mkp-surface);
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius-lg);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    font-family: var(--mkp-font);
    font-size: .875rem;
}

.k-overlay { background-color: #000; opacity: .5; }

.k-window > .k-window-titlebar,
.k-dialog > .k-dialog-titlebar {
    padding: 1.5rem 1.5rem 1rem;
    gap: 1rem;
    border: 0;
    background: transparent;
    color: var(--mkp-foreground);
}

.k-window-title, .k-dialog-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.k-window > .k-window-content,
.k-dialog > .k-dialog-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--mkp-foreground);
    background: transparent;
    line-height: 1.5;
}

.k-dialog > .k-dialog-actions {
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--mkp-border);
    border-radius: 0 0 var(--mkp-radius-lg) var(--mkp-radius-lg);
    background: var(--mkp-muted);
}

/* Kendo focuses the content wrapper initially. Draw that focus around the
   dialog, not across its text; interactive descendants retain their rings. */
:is(.k-window,.k-dialog) > :is(.k-window-content,.k-dialog-content):focus-visible {
    outline: none;
}

:is(.k-window,.k-dialog):has(> :is(.k-window-content,.k-dialog-content):focus-visible) {
    outline: 2px solid var(--mkp-muted-foreground);
    outline-offset: 2px;
}

.k-dialog > .k-dialog-actions .k-button {
    flex: 0 1 auto;
    min-width: 4rem;
    min-height: 2.25rem;
    margin: 0;
    border-radius: var(--mkp-radius);
}

.swal2-container.swal2-shown { background-color: rgb(0 0 0 / 50%); }

.swal2-container .swal2-modal {
    width: 512px;
    max-width: 100%;
    padding: 1.5rem !important; /* vendor writes its default padding inline */
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius-lg);
    background: var(--mkp-surface);
    color: var(--mkp-foreground);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    font-family: var(--mkp-font);
    font-size: .875rem;
    text-align: start;
}

.swal2-modal .swal2-title {
    margin: 0 0 .5rem;
    padding: 0;
    color: var(--mkp-foreground);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
}

.swal2-modal .swal2-content {
    color: var(--mkp-muted-foreground);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
}

/* Scale the complete legacy icon, including its animated internal geometry. */
.swal2-modal .swal2-icon { zoom: .5; margin: 0 0 2rem; }

.swal2-modal .swal2-buttonswrapper {
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--mkp-border);
    border-radius: 0 0 var(--mkp-radius-lg) var(--mkp-radius-lg);
    background: var(--mkp-muted);
    text-align: end;
}

/* Inline buttons preserve display:none controlled by SweetAlert and the actual
   reverseButtons DOM order (also used for keyboard focus). */
.swal2-modal .swal2-buttonswrapper > button {
    min-height: 2.25rem;
    margin: 0 !important; /* remove legacy me-3/me-4 gaps */
    padding: .4375rem 1rem;
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: var(--mkp-shadow);
}

.swal2-modal .swal2-buttonswrapper > button + button { margin-inline-start: .5rem !important; }

.swal2-modal .swal2-buttonswrapper:not(.swal2-loading) .swal2-confirm {
    background: var(--mkp-primary) !important;
    border-color: var(--mkp-primary) !important;
    color: var(--mkp-on-primary) !important;
}

.swal2-modal .swal2-buttonswrapper:not(.swal2-loading) .swal2-confirm:enabled:hover {
    background: var(--mkp-primary-hover) !important;
    border-color: var(--mkp-primary-hover) !important;
    color: var(--mkp-on-primary-hover) !important;
}

.swal2-modal .swal2-buttonswrapper:not(.swal2-loading) .swal2-confirm:enabled:active {
    background: var(--mkp-primary-active) !important;
    color: var(--mkp-on-primary-active) !important;
}

/* The base theme colors styled confirms with !important; retain the vendor's
   transparent text/background while the confirm itself is the loading spinner. */
.swal2-modal .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-confirm {
    background: transparent !important;
    color: transparent !important;
}

.swal2-modal .swal2-cancel {
    background: var(--mkp-surface) !important;
    color: var(--mkp-foreground) !important;
}

.swal2-modal .swal2-cancel:enabled:hover { background: var(--mkp-muted) !important; }
.swal2-modal .swal2-buttonswrapper > button:disabled { cursor: not-allowed; }
.swal2-modal .swal2-buttonswrapper button:focus-visible,
.swal2-modal .swal2-close:focus-visible,
.modal .btn-close:focus-visible { outline: 2px solid var(--mkp-muted-foreground); outline-offset: 2px; box-shadow: var(--mkp-ring); }

.swal2-modal .swal2-close {
    top: .75rem;
    right: .75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--mkp-radius-sm);
    color: var(--mkp-muted-foreground);
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
}

.swal2-modal .swal2-close:hover { color: var(--mkp-foreground); background: var(--mkp-muted); }
.swal2-modal:has(.swal2-close[style*="display: block"]) .swal2-title { padding-right: 1.5rem; }

.swal2-modal .swal2-input, .swal2-modal .swal2-textarea, .swal2-modal .swal2-select {
    margin: 1rem 0;
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius);
    color: var(--mkp-foreground);
    font-family: inherit;
    font-size: .875rem;
    box-shadow: var(--mkp-shadow);
}

.swal2-modal .swal2-input { height: 2.25rem; padding: .375rem .75rem; }
.swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus, .swal2-modal .swal2-select:focus {
    border-color: var(--mkp-muted-foreground);
    box-shadow: var(--mkp-ring);
}

@media (prefers-reduced-motion: reduce) {
    /* The legacy SweetAlert stylesheet predates this preference. Preserve its
       animation-end lifecycle while removing perceptible zoom and shake. */
    .swal2-container .swal2-modal,
    .swal2-modal .swal2-icon,
    .swal2-modal .swal2-icon * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 575.98px) {
    .modal { --mkp-dialog-inset: 1rem; }
    .modal .modal-header { padding: 1rem 1rem 0; }
    .modal .modal-body { padding: 1rem; }
    .modal .modal-footer { padding: 1rem; }
    .modal .modal-body .modal-footer,
    .modal #form-upload > .text-center:not(:has(~ :not(input[type="hidden"],script))) { margin-bottom: -1rem !important; }
    .modal .modal-footer .btn,
    .modal #form-upload > .text-center .btn { max-width: 100%; white-space: normal; }
    /* Give the native filename its own line instead of sharing the narrow
       mobile field with the chooser. Keep the real input and its events. */
    .modal #form-upload input[type="file"] {
        padding: 0 .75rem .625rem;
        line-height: 1.5;
    }
    .modal #form-upload input[type="file"]::file-selector-button {
        display: block;
        width: calc(100% + 1.5rem);
        margin: 0 -.75rem .625rem;
        border-inline-end: 0;
        border-bottom: 1px solid var(--mkp-border);
        text-align: start;
    }
    .swal2-container { padding: 1rem; }
    .swal2-container .swal2-modal { padding: 1rem !important; }
    .swal2-modal .swal2-buttonswrapper { margin: 1rem -1rem -1rem; padding: 1rem; }
    .swal2-modal .swal2-buttonswrapper > button { max-width: 100%; white-space: normal; }
    /* Equal row margins also align short cancel/confirm labels side by side. */
    .swal2-modal .swal2-buttonswrapper > button { margin-block: .25rem !important; }
}