/* Full-window application dialogs. Keep component-specific forms and scrolling intact. */
body :is(.modal, .customer-profile) {
    box-sizing: border-box;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

/* Older size variants use !important; these dimensions apply to every variant. */
body :is(.modal, .customer-profile) > :is(.modal-panel, .modal-dialog, .customer-profile-panel, .fb-preview-shell) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Record cards reserve the remaining space for their active tab, regardless of notices. */
body .customer-profile > .customer-profile-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}
body .customer-profile-panel > * { flex: 0 0 auto; min-width: 0; }
body .customer-profile-panel > .profile-panels {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    padding: 0.875rem 1rem;
}
body .customer-profile-header {
    min-height: 0;
    padding: 0.5rem 1rem;
}
body .customer-profile-header > * { min-width: 0; }
body .customer-profile-header h3 { margin-top: 0; font-size: 1.25rem; overflow-wrap: anywhere; }

/* Forms that scroll as a whole keep their heading and dismiss action at the top. */
body .modal > .modal-panel,
body.form-builder-page .modal > .fb-dialog {
    padding: 1rem !important;
    scroll-padding-top: 6rem;
}
body .modal-panel > .modal-header,
body.form-builder-page .fb-dialog > .fb-dialog-heading {
    position: sticky;
    top: -1rem;
    z-index: 12;
    flex-shrink: 0;
    min-height: 0;
    margin: -1rem -1rem 0;
    padding: 0.5rem 1rem;
    background: var(--panel-elevated, var(--panel, #fff));
}
body .modal-header :is(h2, h3, h4),
body.form-builder-page .fb-dialog-heading h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
body :is(.modal-header, .customer-profile-header, .fb-dialog-heading, .pool-dialog-header) button { min-height: 44px; }

/* Native dialogs are used by feedback, global workspace forms, and the DC portal. */
body dialog {
    box-sizing: border-box;
    inset: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body :is(#feedback-dialog, .feedback-review-dialog, .engineer-profile-dialog, .pool-publication-dialog:not(.pool-review-dialog)) {
    padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left)) !important;
    overflow: auto;
    scroll-padding-top: 6rem;
}
body :is(.feedback-heading, .feedback-review-heading, .engineer-profile-header),
body .pool-publication-dialog:not(.pool-review-dialog) > .pool-dialog-header {
    position: sticky;
    top: calc(-1rem - env(safe-area-inset-top));
    z-index: 12;
    margin: calc(-1rem - env(safe-area-inset-top)) calc(-1rem - env(safe-area-inset-right)) 0 calc(-1rem - env(safe-area-inset-left));
    padding: calc(0.5rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 0.5rem calc(1rem + env(safe-area-inset-left));
    background: var(--panel, #fff);
}
body #app-feedback .feedback-heading { background: var(--feedback-bg); }
body .engineer-profile-header { background: var(--portal-surface); }
body .engineer-profile-header h2 { margin: 0; font-size: 1.25rem; }
body .engineer-profile-header button { flex-shrink: 0; min-height: 44px; }

/* These dialogs already have a scrolling body and fixed action footer. */
body :is(.pool-form-dialog, .pool-review-dialog) {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body .pool-dialog-header { padding-block: 0.5rem; }
body .pool-review-content { flex: 1 1 0; }

/* Customer tracker dialogs use a separate stylesheet and a flex body. */
body .modal > .modal-dialog:not(.fb-dialog) > .modal-header {
    flex-shrink: 0;
    padding-block: 0.5rem;
}

/* Keep keyboard focus targets clear of the sticky headings. */
body :is(.modal, dialog) :is(input, select, textarea, button, [tabindex]) { scroll-margin-block: 6rem 1rem; }

/* The floating launcher must not cover form actions in a full-window overlay. */
body:has(:is(.modal, .customer-profile):not([hidden]):not([aria-hidden="true"])) #app-feedback .feedback-launcher {
    visibility: hidden;
}

/* Desktop record/form overlays occupy the same rectangle as the active workspace card. */
@media (min-width: 768px) and (min-height: 560px) {
    body :is(.modal, .customer-profile)[data-workspace-aligned="true"] > :is(.modal-panel, .modal-dialog, .customer-profile-panel, .fb-preview-shell) {
        position: absolute;
        left: var(--workspace-modal-left);
        top: var(--workspace-modal-top);
        width: var(--workspace-modal-width) !important;
        max-width: var(--workspace-modal-width) !important;
        height: var(--workspace-modal-height) !important;
        max-height: var(--workspace-modal-height) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--workspace-modal-radius, 18px) !important;
        box-shadow: var(--shadow) !important;
    }
}

/* A light scrim and restrained card motion keep the workspace in view. */
body :is(.modal-backdrop, .customer-profile-backdrop) {
    background: rgba(12, 20, 32, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
    body :is(.modal, .customer-profile) > :is(.modal-panel, .modal-dialog, .customer-profile-panel) {
        transition: none !important;
    }
    body :is(.modal, .customer-profile):is([data-apple-opening], [data-apple-closing]) {
        opacity: 1;
        transition: none;
    }
    body :is(.modal, .customer-profile)[data-apple-opening] > :is(.modal-panel, .modal-dialog, .customer-profile-panel) {
        transform-origin: center;
        animation: workspace-modal-enter 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    body :is(.modal, .customer-profile)[data-apple-closing] > :is(.modal-panel, .modal-dialog, .customer-profile-panel) {
        transform-origin: center;
        animation: workspace-modal-exit 140ms cubic-bezier(0.4, 0, 1, 1) both;
    }
    body :is(.modal, .customer-profile)[data-apple-opening] > :is(.modal-backdrop, .customer-profile-backdrop) {
        animation: workspace-backdrop-enter 160ms ease-out both;
    }
    body :is(.modal, .customer-profile)[data-apple-closing] > :is(.modal-backdrop, .customer-profile-backdrop) {
        animation: workspace-backdrop-enter 140ms ease-in reverse both;
    }
}
@keyframes workspace-modal-enter {
    from { opacity: 0; transform: translateY(6px) scale(0.994); filter: none; }
    to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@keyframes workspace-modal-exit {
    from { opacity: 1; transform: translateY(0) scale(1); filter: none; }
    to { opacity: 0; transform: translateY(3px) scale(0.997); filter: none; }
}
@keyframes workspace-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Loading occupies the final card rectangle while the complete form is prepared. */
body .customer-profile[data-profile-loading="true"] > .customer-profile-panel > :not(.profile-loading-shell) { visibility: hidden; }
.profile-loading-shell {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    overflow: hidden;
    background: var(--panel);
    border-radius: inherit;
}
.profile-loading-shell[hidden] { display: none; }
.profile-loading-shell > button { position: absolute; top: 0.5rem; right: 1rem; }
.profile-loading-shell > p { margin: 0.5rem 3rem 2rem 0; color: var(--muted); }
.profile-loading-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.profile-loading-lines > span { height: 4.5rem; border-radius: 10px; background: color-mix(in srgb, var(--muted) 10%, var(--panel)); }
@media (max-width: 600px) { .profile-loading-lines { grid-template-columns: minmax(0, 1fr); } }

.profile-edit-lock-notice {
    margin: 0;
    padding: 0.5rem 1rem;
    color: var(--text);
    background: color-mix(in srgb, var(--accent, #e53935) 8%, var(--panel));
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.profile-edit-lock-notice[hidden] { display: none; }