/* Shared dismissal controls. Select semantic close actions, not business actions named close. */
:root {
    --popup-close-target-size: 36px;
}

html[data-theme]
    :is(
        .workspace-toolbar [data-toolbar-command='cancel'],
        .popup-close-action,
        .employee-modal-close,
        .system-modal-close,
        .swal2-close,
        .report-preview [data-pdf-close],
        .employee-document-preview [data-close],
        .grid-layout-popover [data-close],
        .madar-grid-panel [data-panel-close],
        .theme-palette [data-close],
        .signature-pad-heading [id='closeSignaturePad'],
        [id='madar-success-notice'] > button,
        :is(.modal, .modal-panel, [role='dialog'], dialog)
            > :is(header, .employee-archive__header)
            [data-close],
        :is(.modal, .modal-panel, [role='dialog'], dialog) :is(.modal-actions, footer) > [data-close]
    ):not(:disabled):not([aria-disabled='true']) {
    min-inline-size: var(--popup-close-target-size);
    min-block-size: var(--popup-close-target-size);
    padding: 6px !important;
    border: 1px solid transparent !important;
    border-radius: 6px;
    color: #fff !important;
    background: var(--popup-close-background) !important;
    box-shadow: none;
    cursor: pointer;
    transition: none;
}

html[data-theme]
    :is(
        .workspace-toolbar [data-toolbar-command='cancel'],
        .popup-close-action,
        .employee-modal-close,
        .system-modal-close,
        .swal2-close,
        .report-preview [data-pdf-close],
        .employee-document-preview [data-close],
        .grid-layout-popover [data-close],
        .madar-grid-panel [data-panel-close],
        .theme-palette [data-close],
        .signature-pad-heading [id='closeSignaturePad'],
        [id='madar-success-notice'] > button,
        :is(.modal, .modal-panel, [role='dialog'], dialog)
            > :is(header, .employee-archive__header)
            [data-close],
        :is(.modal, .modal-panel, [role='dialog'], dialog) :is(.modal-actions, footer) > [data-close]
    ):hover:not(:disabled):not([aria-disabled='true']) {
    background: var(--popup-close-hover) !important;
}

html[data-theme]
    :is(
        .workspace-toolbar [data-toolbar-command='cancel'],
        .popup-close-action,
        .employee-modal-close,
        .system-modal-close,
        .swal2-close,
        .report-preview [data-pdf-close],
        .employee-document-preview [data-close],
        .grid-layout-popover [data-close],
        .madar-grid-panel [data-panel-close],
        .theme-palette [data-close],
        .signature-pad-heading [id='closeSignaturePad'],
        [id='madar-success-notice'] > button,
        :is(.modal, .modal-panel, [role='dialog'], dialog)
            > :is(header, .employee-archive__header)
            [data-close],
        :is(.modal, .modal-panel, [role='dialog'], dialog) :is(.modal-actions, footer) > [data-close]
    ):focus-visible {
    outline: 2px solid var(--popup-close-focus) !important;
    outline-offset: 2px !important;
}

html[data-theme]
    :is(
        .workspace-toolbar [data-toolbar-command='cancel'],
        .popup-close-action,
        .employee-modal-close,
        .system-modal-close,
        .report-preview [data-pdf-close],
        .employee-document-preview [data-close],
        .grid-layout-popover [data-close],
        .madar-grid-panel [data-panel-close],
        .theme-palette [data-close],
        .signature-pad-heading [id='closeSignaturePad'],
        :is(.modal, .modal-panel, [role='dialog'], dialog)
            > :is(header, .employee-archive__header)
            [data-close],
        :is(.modal, .modal-panel, [role='dialog'], dialog) :is(.modal-actions, footer) > [data-close]
    )
    > :is(i, svg) {
    color: inherit !important;
}

/* Text dismissal buttons need stronger contrast than an icon on the soft coral background. */
html[data-theme]
    :is(.modal, .modal-panel, [role='dialog'], dialog)
    :is(.modal-actions, footer)
    > [data-close]:not(:disabled):not([aria-disabled='true']) {
    color: #241d20 !important;
}

/* The last flex item is on the left in RTL and on the right in LTR. */
:is(
    .workspace-toolbar [data-toolbar-command='cancel'],
    .popup-close-action,
    .report-preview [data-pdf-close],
    .employee-document-preview [data-close],
    .grid-layout-popover [data-close],
    .madar-grid-panel [data-panel-close],
    .theme-palette [data-close],
    .signature-pad-heading [id='closeSignaturePad'],
    [id='madar-success-notice'] > button,
    :is(.modal, .modal-panel, [role='dialog'], dialog) > :is(header, .employee-archive__header) [data-close],
    :is(.modal, .modal-panel, [role='dialog'], dialog) :is(.modal-actions, footer) > [data-close]
) {
    order: 100;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    flex-shrink: 0;
}

/* Existing absolute dismiss buttons keep their own top spacing. */
html[data-theme] .workspace-toolbar > [data-toolbar-command='cancel'] {
    order: -1;
    align-self: stretch;
    flex: 0 0 42px;
    width: 42px;
    height: auto;
    min-height: 100%;
    margin: 0 !important;
    border-radius: 5px 0 0 5px !important;
}

@media (max-width: 760px) {
    html[data-theme] .workspace-toolbar > [data-toolbar-command='cancel'] {
        flex-basis: 44px;
        width: 44px;
    }
}

:is(.employee-modal-close, .system-modal-close) {
    inset-inline-start: auto !important;
    inset-inline-end: 16px !important;
}

html[data-theme] .swal2-popup .swal2-close {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 12px;
    top: 12px;
    grid-column: auto;
    grid-row: auto;
    inline-size: 36px;
    block-size: 36px;
    margin: 0;
    font-size: 26px;
    line-height: 1;
}

.swal2-popup.madar-confirm-dialog:has(> .swal2-close[style*='display: flex']) {
    grid-template-columns: 58px minmax(0, 1fr) 44px;
}

.swal2-popup.electronic-approval-dialog:has(> .swal2-close[style*='display: flex']) {
    grid-template-columns: minmax(0, 1fr) 44px;
}

.swal2-popup:not(.madar-confirm-dialog):has(> .swal2-close[style*='display: flex']) .swal2-title {
    padding-inline-end: 52px;
}

@media (max-width: 760px) {
    :root {
        --popup-close-target-size: 44px;
    }
}