/* Keep each dialog's existing visibility controls and form handlers. Overrides
   replace the legacy centered geometry, including inline panel dimensions. */
[data-drawer] {
    position: fixed !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}

[data-drawer].hidden:not(.show) {
    display: none !important;
}

[data-drawer-wrapper] {
    height: 100%;
    min-height: 0 !important;
    padding: 0 !important;
}

[data-drawer] [data-drawer-panel] {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    box-sizing: border-box;
    width: min(100%, var(--drawer-width, 32rem)) !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: -12px 0 32px rgb(15 23 42 / 18%) !important;
    transform: none !important;
    opacity: 1 !important;
    animation: drawer-enter 250ms ease-out;
}

#educationModal, #skillModal, #employmentModal, #projectModal, #blogModal {
    --drawer-width: 44rem;
}

#jobModal, #surveyModal, #surveyApplyModal, #applicantDrawer {
    --drawer-width: 38rem;
}

#candidateModal {
    --drawer-width: 56rem;
}

/* SweetAlert confirmation and message dialogs use the same presentation.
   Toast notifications retain their compact placement. */
.swal2-container:has(> .swal2-modal) {
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    overflow: hidden !important;
}

.swal2-container > .swal2-popup.swal2-modal {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: stretch !important;
    align-content: center;
    box-sizing: border-box;
    width: min(100%, 32rem) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.swal2-container > .swal2-modal.swal2-show {
    animation: drawer-enter 250ms ease-out !important;
}

.swal2-container > .swal2-modal.swal2-hide {
    animation: drawer-exit 200ms ease-in !important;
}

@keyframes drawer-enter {
    from { translate: 100% 0; }
    to { translate: 0 0; }
}

@keyframes drawer-exit {
    from { translate: 0 0; }
    to { translate: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    [data-drawer] [data-drawer-panel],
    .swal2-container > .swal2-modal.swal2-show,
    .swal2-container > .swal2-modal.swal2-hide {
        animation: none !important;
    }
}