/**
 * Embed mode backup styles (loaded after app.css).
 * Primary early rules: partials/iframe-embed-boot.html
 * Shell also force-hides chrome in admin-shell.js
 */
html.embed-in-frame .app-topbar,
html.embed-in-frame header.app-topbar,
html.embed-in-frame .sidenav-menu,
html.embed-in-frame #theme-settings-offcanvas,
html.embed-in-frame .button-close-offcanvas,
html.embed-in-frame .button-on-hover {
    display: none !important;
}

html.embed-in-frame .content-page {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    min-height: 100vh; 
    padding-top: 0.75rem;
}

html.embed-in-frame .wrapper {
    min-height: 100%;
}

html.embed-in-frame.embed-awaiting-data .content-page {
    visibility: hidden !important;
}

/* Tips are shown on the shell (full window); hide the page-local copy in embed */
html.embed-in-frame #tips2 {
    display: none !important;
}

/* Same mask as shell chrome backdrop — avoid blur (looks uneven across regions) */
html.embed-in-frame .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.embed-in-frame .modal-backdrop.fade {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}
html.embed-in-frame .modal-backdrop.fade.show {
    opacity: 1 !important;
}

/*
 * Center in the iframe first, then shift by half shell chrome size so the dialog
 * appears centered in the full browser window (sidebar + topbar included).
 * --shell-sidenav-w / --shell-topbar-h are set by admin-shell-modal.js
 * (from the iframe's getBoundingClientRect — 0 on mobile offcanvas).
 */
html.embed-in-frame .modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - var(--bs-modal-margin, 0.5rem) * 2) !important;
}

html.embed-in-frame .modal.fade .modal-dialog {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
    transform: translate(
            calc(var(--shell-sidenav-w, 0px) / -2),
            calc(var(--shell-topbar-h, 0px) / -2 - 6px)
        )
        scale(0.96);
    opacity: 0;
}
html.embed-in-frame .modal.show .modal-dialog {
    animation: none !important;
    transform: translate(
        calc(var(--shell-sidenav-w, 0px) / -2),
        calc(var(--shell-topbar-h, 0px) / -2)
    );
    opacity: 1;
}

/* Narrow screens: keep dialogs inside the viewport */
@media (max-width: 767.98px) {
    html.embed-in-frame .modal {
        --bs-modal-margin: 0.5rem;
        padding: 0.5rem !important;
    }
    html.embed-in-frame .modal-dialog,
    html.embed-in-frame .modal-dialog.modal-sm,
    html.embed-in-frame .modal-dialog.modal-lg,
    html.embed-in-frame .modal-dialog.modal-xl,
    html.embed-in-frame .modal-dialog.modal-fullscreen-sm-down {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html.embed-in-frame .modal-content {
        width: 100%;
        max-width: 100%;
    }
    html.embed-in-frame .modal-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    html.embed-in-frame .modal-body img,
    html.embed-in-frame .modal-body table {
        max-width: 100%;
    }
    html.embed-in-frame .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}