/* Rules Engine admin - minimal scoped layout overrides.
   Reuse existing tokens (lws-, eem-, jbf-rb-, cum-) for colors/spacing/typography.
   Do not introduce new color or radius values here. */

.rules-engine-page {
    position: relative;
}

.rules-engine-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.rules-engine-page .re-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    min-height: 0;
}

.rules-engine-page .re-tab-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rules-engine-page .re-tab-toolbar--with-filter .re-context-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

.rules-engine-page .re-context-filter-dd {
    width: 240px;
}

/* Per-tab toolbar lifted into the page tab-strip's actions slot.
   Keeps the Add button (and the Attributes context dropdown) on the same
   row as the tab toggle pill rather than taking a row of its own. */
.rules-engine-page .event-admin-tab-strip-actions.rules-engine-tab-actions {
    flex-wrap: wrap;
}

.rules-engine-page .re-context-filter--inline {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 220px;
}

.rules-engine-page .re-context-filter--inline .re-context-filter-dd {
    width: 220px;
}

/* Centered loader for tabs that need a delayed/secondary fetch (e.g. Attributes
   waits for contexts to land before it can ask for rows). Avoids a brief flash
   of "Pick a context…" before the data has arrived. */
.rules-engine-page .re-tab-initial-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    padding: 24px;
}

.rules-engine-page .re-grid {
    width: 100%;
}

/* Right-side admin panel - mirrors the eem-side-panel chrome already used by EventChecklistDialog
   so the visual language is identical to the rule-builder elsewhere in the app. */
.rules-engine-page .re-side-panel {
    width: 33.333%;
    min-width: 380px;
    max-width: 560px;
}

.rules-engine-page .re-side-panel--wide {
    width: 44%;
    max-width: 720px;
}

/* Monospace, slightly tighter line-height for raw JSON editing in the templates panel. */
.rules-engine-page .re-json-editor textarea,
.rules-engine-page .re-json-editor .rz-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}