/* ============================================================
   q-drawer.css — right-edge full-height drawer presentation for
   MudDialog when invoked with QDrawer.RightSide.

   Mirrors SSB.Design/page-drawers.jsx (V1 720px sectioned drawer).
   Targets MudBlazor 7's centerright position container so other
   dialog positions (Center, etc.) stay untouched.
   ============================================================ */

/* Container that MudBlazor renders for CenterRight position.
   Pin to the right edge, take full height, no centering padding. */
.mud-dialog-container.mud-dialog-centerright {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

/* The dialog panel itself: width 720px, full viewport height,
   no rounded corners on the right edge, slide in from the right. */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog {
    margin: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 720px !important;
    max-width: 720px !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl, 0 20px 40px -10px rgba(15, 19, 32, 0.3));
    animation: q-drawer-slide-in 220ms ease-out;
    display: flex;
    flex-direction: column;
}

/* Make the body scroll inside the drawer instead of the viewport. */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog > .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 28px !important;
}

/* Header area (TitleContent slot) */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog > .mud-dialog-title {
    padding: 20px 28px !important;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    margin: 0 !important;
}

/* Footer (DialogActions slot) */
.mud-dialog-container.mud-dialog-centerright > .mud-dialog > .mud-dialog-actions {
    padding: 14px 28px !important;
    border-top: 1px solid var(--border-subtle);
    background: var(--n-0);
    flex-shrink: 0;
    margin: 0 !important;
    gap: 12px;
}

@keyframes q-drawer-slide-in {
    from {
        transform: translateX(40px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Compact tablet / narrow viewport: cap to 100% width on small screens */
@media (max-width: 768px) {
    .mud-dialog-container.mud-dialog-centerright > .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}