@media screen {
/* Shared dialog geometry. Loaded after feature styles to keep one platform-wide policy.
   Legacy inline widths are intentionally overridden; tables retain their own horizontal scroll.
   Short dialogs remain content-sized; long editors use the available 90% viewport. */
:root {
    --dialog-width: 90vw;
    --dialog-height: 90dvh;
    --dialog-pad: clamp(20px, 1.75vw, 28px);
}
.modal-backdrop, .modal-overlay, .career-modal-backdrop,
.hr-modal-backdrop, .entity-drawer-backdrop {
    box-sizing: border-box;
    padding: 0;
    align-items: center;
    justify-content: center;
    place-items: center;
    overflow: hidden;
}
:is(.modal-backdrop, .modal-overlay, .career-modal-backdrop, .hr-modal-backdrop, .entity-drawer-backdrop)
> :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal, .career-modal, .hr-modal, .entity-drawer) {
    box-sizing: border-box;
    width: var(--dialog-width) !important;
    max-width: var(--dialog-width) !important;
    max-height: var(--dialog-height) !important;
    margin: 0;
    min-width: 0;
}
:is(.modal-backdrop, .modal-overlay)
> :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal),
.hr-modal-backdrop > .hr-modal, .entity-drawer-backdrop > .entity-drawer {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding: 0;
    border-radius: 10px;
}
/* The header and actions must never shrink into or cover the scrollable content. */
:is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal)
> :is(.modal-header, .modal-header-bar),
.entity-drawer > .drawer-header, .hr-modal-backdrop .hr-modal > header {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: 12px var(--dialog-pad);
    gap: 12px;
    align-items: center;
}
:is(.modal-header, .modal-header-bar) > div { min-width: 0; }
:is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal) :is(.modal-header, .modal-header-bar) :is(h2, h3) {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
:is(.modal-header, .modal-header-bar) p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
}
:is(.modal-header, .modal-header-bar) .eyebrow { font-size: 10px; line-height: 1.3; }
:is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal)
> :is(.modal-body, .modal-body-content),
.entity-drawer > .drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding: var(--dialog-pad);
}
:is(.modal, .modal-dialog, .modal-dialog-card, .modal-content)
> :is(.modal-footer, .modal-footer-bar),
.entity-drawer > .drawer-footer {
    flex: 0 0 auto;
    position: static;
    margin: 0;
    padding: 12px var(--dialog-pad);
    gap: 8px;
    flex-wrap: wrap;
}
:is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal)
:is(.modal-footer, .modal-footer-bar, .modal-actions) > :is(button, a) {
    min-height: 36px;
    padding: 6px 14px;
    line-height: 1.5;
}
:is(.modal-header, .modal-header-bar) :is(.close-button, .modal-close) {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d8d0c4;
    border-radius: 6px;
    background: #fff;
    color: #322e29;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
/* Editors where EditForm itself is the scroll surface. */
.modal-backdrop > :is(.employee-modal, .contract-modal) > form,
.hr-modal-backdrop > .hr-modal > form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--dialog-pad) var(--dialog-pad) 0;
}
.modal-backdrop :is(.employee-modal, .contract-modal) .modal-actions {
    flex: none;
    margin: 12px calc(-1 * var(--dialog-pad)) 0;
    padding: 12px var(--dialog-pad);
    gap: 8px;
    flex-wrap: wrap;
}
/* Settings has no enclosing form: inset fields and actions independently. */
.modal-backdrop > .employee-modal > .form-grid {
    box-sizing: border-box;
    margin: 0;
    padding: 24px var(--dialog-pad);
    gap: 20px 24px;
    min-height: 0;
    overflow: auto;
}
.modal-backdrop > .employee-modal > .modal-actions {
    box-sizing: border-box;
    margin: 0;
    padding: 14px var(--dialog-pad);
    gap: 12px;
}
.modal-backdrop > .settings-modal .form-grid > label { gap: 8px; }
.modal-backdrop > .company-editor-modal > .company-editor-form { padding: 0; overflow: hidden; }
.company-editor-modal .company-editor-body { padding: var(--dialog-pad); }
.modal-backdrop .company-editor-modal .modal-actions { margin: 0; }
.modal-backdrop .contract-modal .form-section { padding-block: 14px; }
/* Recruitment: remove stacked whitespace so fields appear immediately below the title. */
.modal-backdrop > .job-editor { height: var(--dialog-height); }
.job-editor > .modal-header .eyebrow { display: none; }
.job-editor > .modal-body { gap: 12px; }
.job-editor .job-editor-section { padding: 14px 16px; }
.job-editor .job-section-title { gap: 8px; margin-bottom: 12px; padding-bottom: 8px; flex-wrap: wrap; }
.job-editor .job-section-title span { width: 24px; height: 24px; }
.job-editor .job-lang-tabs { padding: 4px; gap: 6px; }
.job-editor .job-lang-tabs button { padding: 7px 12px; }
.job-editor .job-meta-grid { gap: 12px; }
.job-editor .job-lang-card { padding: 14px; gap: 12px; }
.job-editor .job-lang-card-header { padding-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.entity-drawer-backdrop > .entity-drawer { height: var(--dialog-height); }
.entity-drawer .drawer-tabs-nav { flex: none; padding-block: 8px; }
.entity-drawer .drawer-section { margin-bottom: 16px; }
.hr-modal-backdrop .hr-modal > header h2 { margin: 0; font-size: 18px; }
.hr-modal-backdrop .hr-modal form { gap: 12px; }
.hr-modal-backdrop .hr-modal form > footer { padding-block: 8px; }
.career-modal-backdrop > .career-modal { overflow: auto; }
.career-modal .career-modal-summary { padding: 32px 24px; }
.career-modal .career-modal-summary h2 { font-size: clamp(24px, 2.5vw, 36px); margin-block: 12px; }
@media (max-width: 640px) {
    :root { --dialog-width: calc(100vw - 16px); --dialog-height: calc(100dvh - 16px); --dialog-pad: 16px; }
    :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal) :is(.modal-header, .modal-header-bar) :is(h2, h3) { font-size: 16px; }
    :is(.modal-header, .modal-header-bar) :is(.close-button, .modal-close) { width: 44px; height: 44px; }
    :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal)
    :is(.modal-footer, .modal-footer-bar, .modal-actions) > :is(button, a) { min-height: 44px; flex: 1 1 120px; }
    .modal-backdrop .modal-body[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .job-editor .job-editor-section { padding: 12px; }
    .job-editor .job-section-title small { flex-basis: 100%; margin-inline-start: 32px; }
    .job-editor .job-meta-grid { grid-template-columns: minmax(0, 1fr); }
    .career-modal-backdrop > .career-modal { grid-template-columns: minmax(0, 1fr); }
}
/* At high zoom / short viewport sizes, keep all controls reachable with one outer scroll. */
@media (max-height: 480px) {
    :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content, .employee-modal, .contract-modal),
    .hr-modal-backdrop > .hr-modal, .entity-drawer-backdrop > .entity-drawer { overflow: auto !important; height: auto; }
    :is(.modal, .modal-dialog, .modal-dialog-card, .modal-content) > :is(.modal-body, .modal-body-content),
    .modal-backdrop > :is(.employee-modal, .contract-modal) > form,
    .hr-modal-backdrop > .hr-modal > form, .entity-drawer > .drawer-body { flex: none; overflow: visible; }
}

}