/* ====================================================
   Automation Form — Global Dark Theme Popup Overrides
   DxPopup renders as a portal outside the component tree,
   so scoped ::deep CSS cannot reach it. These global rules
   target popup elements via the CssClass / HeaderCssClass /
   BodyCssClass / FooterCssClass parameters.
   ==================================================== */

/* ── Popup dialog container ── */
.af-popup-theme .dxbl-popup-dialog,
.af-popup-theme.dxbl-popup {
    border-radius: var(--s-border-radius-default) !important;
    overflow: hidden;
}

/* ── Header ── */
.af-popup-header-theme,
.af-popup-theme .dxbl-popup-header {
    background-color: var(--s-color-surface) !important;
    color: var(--s-color-body-text) !important;
    border-bottom: 1px solid var(--s-color-border) !important;
}

.af-popup-header-theme .dxbl-popup-header-button,
.af-popup-theme .dxbl-popup-header-button {
    color: var(--s-color-body-text) !important;
}

/* ── Body ── */
.af-popup-body-theme,
.af-popup-theme .dxbl-popup-body {
    background-color: var(--s-color-surface) !important;
    color: var(--s-color-body-text) !important;
}

/* ── Footer ── */
.af-popup-footer-theme,
.af-popup-theme .dxbl-popup-footer {
    background-color: var(--s-color-surface) !important;
    color: var(--s-color-body-text) !important;
    border-top: 1px solid var(--s-color-border) !important;
}

/* ── Inputs inside popup ── */
.af-popup-body-theme .dxbl-input-editor,
.af-popup-body-theme .dxbl-text-edit,
.af-popup-body-theme .dxbl-combobox,
.af-popup-body-theme .dxbl-tagbox,
.af-popup-body-theme .dxbl-input-group {
    background-color: var(--s-color-input-bg) !important;
    border: 1px solid var(--s-color-border) !important;
    border-radius: var(--s-border-radius-default) !important;
    color: var(--s-color-body-text) !important;
}

.af-popup-body-theme .dxbl-edit-input,
.af-popup-body-theme .dxbl-text,
.af-popup-body-theme input {
    color: var(--s-color-body-text) !important;
}

.af-popup-body-theme .dxbl-input-editor:focus-within,
.af-popup-body-theme .dxbl-text-edit:focus-within,
.af-popup-body-theme .dxbl-combobox:focus-within,
.af-popup-body-theme .dxbl-tagbox:focus-within {
    border-color: var(--s-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.15) !important;
}

/* ── Labels inside popup ── */
.af-popup-body-theme label,
.af-popup-body-theme .aeoe-label {
    color: var(--s-color-label) !important;
}

/* ── Listbox / List items in popup ── */
.af-popup-body-theme .dxbl-listbox {
    background-color: var(--s-color-surface) !important;
    border-color: var(--s-color-border) !important;
}

.af-popup-body-theme .dxbl-listbox-item {
    color: var(--s-color-body-text) !important;
}

.af-popup-body-theme .dxbl-listbox-item:hover,
.af-popup-body-theme .dxbl-listbox-item.dxbl-active {
    background-color: var(--s-color-secondary-hover) !important;
}

/* ── Checkbox in popup ── */
.af-popup-body-theme .dxbl-checkbox-label {
    color: var(--s-color-body-text) !important;
}

.af-popup-body-theme .dxbl-checkbox-check-element {
    border-color: var(--s-color-border) !important;
}

.af-popup-body-theme .dxbl-checkbox-checked .dxbl-checkbox-check-element {
    background-color: var(--s-color-primary) !important;
    border-color: var(--s-color-primary) !important;
}

/* ── TagBox chips ── */
.af-popup-body-theme .dxbl-tag {
    background-color: var(--s-color-accent) !important;
    color: var(--s-color-accent-foreground) !important;
    border-color: var(--s-color-border) !important;
}

/* ── Buttons inside popup ── */
.af-popup-footer-theme .dxbl-btn,
.af-popup-body-theme .dxbl-btn {
    border-radius: var(--s-border-radius-default) !important;
}

/* ── ComboBox dropdown (also renders as portal) ── */
.dxbl-popup-window .dxbl-listbox {
    background-color: var(--s-color-surface) !important;
}

.dxbl-popup-window .dxbl-listbox-item {
    color: var(--s-color-body-text) !important;
}

.dxbl-popup-window .dxbl-listbox-item:hover,
.dxbl-popup-window .dxbl-listbox-item.dxbl-active {
    background-color: var(--s-color-secondary-hover) !important;
}