/* ==========================================================================
   Global SweetAlert2 responsive fit
   --------------------------------------------------------------------------
   Goal: every SweetAlert modal (form or alert) fits the screen on both
   desktop and smartphone. The popup never exceeds the viewport. If a form is
   genuinely taller than the screen, only the field area scrolls so the
   Save / Cancel buttons always stay visible and reachable.
   Loaded globally from index.php (applies to every app page).
   ========================================================================== */

.swal2-container {
    padding: 0.5rem !important;
}

.swal2-popup {
    box-sizing: border-box;
    max-width: 96vw !important;   /* never wider than the screen */
    max-height: 96vh !important;  /* never taller than the screen  */
    padding: 1.15rem 1.15rem 0.95rem !important;
}

.swal2-popup .swal2-title {
    padding: 0.25rem 0 0.4rem !important;
}

/* The content/form area is the only part that scrolls. It is capped to the
   viewport height minus the space reserved for the title, action buttons and
   padding, so the popup as a whole always fits the screen and the buttons stay
   pinned and reachable. (A flexible grid row can't shrink here because the
   SweetAlert popup uses auto-sized rows, so we cap this element directly.) */
.swal2-popup .swal2-html-container {
    margin: 0.35rem 0.3rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(96vh - 12rem) !important;
}

.swal2-popup .swal2-actions {
    margin-top: 0.7rem !important;
}

/* Compact form controls so multi-field forms fit without scrolling */
.swal2-html-container .form-control,
.swal2-html-container .form-select,
.swal2-html-container textarea.form-control {
    margin-bottom: 0.5rem !important;
}
.swal2-html-container .form-control:last-child,
.swal2-html-container .form-select:last-child {
    margin-bottom: 0 !important;
}

/* Form content inside SweetAlert: honour .text-start (the sb-admin-2 / Bootstrap 4
   bundle has no .text-start utility, so labels would otherwise inherit the
   popup's centered alignment) and make native SweetAlert inputs flush and
   full-width instead of being offset by their default auto side-margins. */
.swal2-html-container .text-start,
.swal2-html-container .text-start * {
    text-align: left;
}
.swal2-html-container .swal2-input,
.swal2-html-container .swal2-textarea,
.swal2-html-container .swal2-select {
    width: 100% !important;
    margin: 0.4rem 0 !important;
    box-sizing: border-box !important;
}

/* -------- Smartphone: near full-width, tighter paddings and fonts -------- */
@media (max-width: 575.98px) {
    .swal2-container {
        padding: 0.35rem !important;
    }
    .swal2-popup {
        width: 96vw !important;
        max-height: 94vh !important;
        padding: 0.95rem 0.8rem 0.8rem !important;
        border-radius: 14px !important;
    }
    .swal2-popup .swal2-title {
        font-size: 1.12rem !important;
    }
    .swal2-popup .swal2-html-container {
        font-size: 0.95rem !important;
        max-height: calc(94vh - 11rem) !important;
    }
    .swal2-html-container .form-control,
    .swal2-html-container .form-select {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.95rem !important;
    }
    /* Buttons wrap and never overflow horizontally on narrow screens */
    .swal2-actions {
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
    }
    .swal2-actions .swal2-confirm,
    .swal2-actions .swal2-cancel,
    .swal2-actions .swal2-deny {
        margin: 0 !important;
    }
}

/* Prefer the dynamic viewport height where supported so the modal accounts
   for the mobile browser's address bar instead of being clipped under it. */
@supports (max-height: 100dvh) {
    .swal2-popup {
        max-height: 96dvh !important;
    }
    .swal2-popup .swal2-html-container {
        max-height: calc(96dvh - 12rem) !important;
    }
    @media (max-width: 575.98px) {
        .swal2-popup {
            max-height: 94dvh !important;
        }
        .swal2-popup .swal2-html-container {
            max-height: calc(94dvh - 11rem) !important;
        }
    }
}