/*
 * Centered Modal Override for StackDialog — all screen sizes.
 *
 * StackDialog renders:
 *   outer: .fixed.inset-0.z-50.flex.items-center.justify-content-center
 *   panel: [role="dialog"].relative.z-50.grid.w-full.max-w-lg ...
 *
 * This file must load AFTER mystackblazor.css (see App.razor).
 * Forces the dialog to appear centered with a pop-in animation on every device.
 */

/* 1. Ensure the outer wrapper is always a centered flex container */
.inset-0.z-50.flex.items-center.justify-center {
    align-items: center;
    padding: 16px;
}

/* 2. Panel — centered, capped width, scrollable if tall */
[role="dialog"] {
    max-width:     min(520px, 100%);
    border-radius: 20px;
    max-height:    90dvh;
    overflow-y:    auto;
    overflow-x:    hidden;
    padding-bottom: 4px;
    animation:     dialogPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. Footer buttons: side by side (Tailwind stacks them) */
[role="dialog"] .flex-col-reverse {
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
}

[role="dialog"] .flex-col-reverse > * {
    width: auto;
    flex: 1;
}

@keyframes dialogPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}