/* Common shell. Screen styles own content, widths and report-specific controls. */
:root {
    --dialog-radius: 16px;
    --dialog-padding: 24px;
    --dialog-gap: 12px;
}

body.emplex-dialog-open {
    overflow: hidden;
}

.emplex-dialog {
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--dialog-radius);
    background: var(--surface, #fff);
    color: var(--text);
    box-shadow: var(--dialog-shadow);
    font-family: var(--font-ui);
    overscroll-behavior: contain;
}

.grid-layout-popover.emplex-dialog {
    border-radius: var(--dialog-radius);
    box-shadow: var(--dialog-shadow);
}

.modal.emplex-dialog {
    position: relative;
    padding: var(--dialog-padding);
    gap: var(--dialog-gap);
}

.modal-backdrop:has(> .emplex-dialog),
.swal2-container.swal2-backdrop-show {
    background: var(--dialog-backdrop);
}

dialog.emplex-dialog::backdrop {
    background: var(--dialog-backdrop);
}

.emplex-dialog-close {
    justify-self: end;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--popup-close-target-size, 36px);
    height: var(--popup-close-target-size, 36px);
    padding: 0;
    cursor: pointer;
}

html[data-theme] .modal > .emplex-dialog-close {
    order: -1;
}

.emplex-dialog:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.emplex-dialog-language-tools {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
    width: 100%;
}

.emplex-dialog [hidden] {
    display: none !important;
}

.emplex-dialog-language-tools button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    :root {
        --dialog-padding: 16px;
    }
}