/* ── Project Configuration → Alerts → custom rule builder modal ──────────────────────────────
   Pages/ProjectConfig/Components/AlertRuleModal.razor + js/pages/projectConfig/projectAlertRuleModal.js
   (Alert Engine v2, plan 2026-09-19 F4, spec §10.2). Prefix palrm-. Tokens --atlas-* only; the
   backdrop/z-index come from .pcfg-list-confirm-backdrop (projectConfig.css). Linked from _Host.cshtml. */

body.palrm-open { overflow: hidden; }

.palrm-dialog { max-width: 1080px; }
.palrm-content { max-height: calc(100vh - 3rem); display: flex; flex-direction: column; }
.palrm-body { overflow-y: auto; padding: 1rem 1.25rem; }
.palrm-modal.is-busy .palrm-body { pointer-events: none; opacity: .75; }

/* header */
.palrm-header { align-items: flex-start; }
.palrm-header-sub { font-size: .8rem; color: var(--atlas-text-muted); margin-top: .15rem; }

/* rule identity (code / label / category / description) */
.palrm-meta {
	display: grid;
	grid-template-columns: minmax(200px, 1.1fr) minmax(200px, 1.4fr) minmax(160px, .8fr);
	gap: .75rem 1rem;
	padding: .75rem 1rem;
	border: 1px solid var(--atlas-border);
	border-radius: var(--atlas-radius-lg);
	background: var(--atlas-surface-muted);
	margin-bottom: 1rem;
}
.palrm-meta-desc { grid-column: 1 / -1; }
.palrm-hint { font-size: .74rem; color: var(--atlas-text-faint); }
.palrm-readonly { background: var(--atlas-gray-100); color: var(--atlas-text-secondary); }

/* builder / json tabs */
.palrm-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--atlas-border); margin-bottom: 1rem; }
.palrm-tab {
	border: none; background: none; padding: .45rem .9rem; font-size: .85rem; font-weight: 500;
	color: var(--atlas-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.palrm-tab:hover { color: var(--atlas-text); }
.palrm-tab.is-active { color: var(--atlas-color-primary); border-bottom-color: var(--atlas-color-primary); }

/* wizard: step rail on the left, pane on the right */
.palrm-wizard { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.25rem; }
.palrm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.palrm-step-item {
	display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: var(--atlas-radius-md);
	font-size: .84rem; color: var(--atlas-text-muted); cursor: pointer; user-select: none;
}
.palrm-step-item:hover { background: var(--atlas-surface-muted); }
.palrm-step-item.is-active { background: var(--atlas-color-primary-soft); color: var(--atlas-color-primary-strong); font-weight: 600; }
.palrm-step-num {
	width: 22px; height: 22px; border-radius: var(--atlas-radius-full); display: inline-flex; align-items: center; justify-content: center;
	font-size: .72rem; font-weight: 600; background: var(--atlas-gray-200); color: var(--atlas-gray-700); flex-shrink: 0;
}
.palrm-step-item.is-active .palrm-step-num { background: var(--atlas-color-primary); color: var(--atlas-text-on-primary); }
.palrm-step-item.is-done .palrm-step-num { background: var(--atlas-sev-ok-bg); color: var(--atlas-sev-ok-text); }
.palrm-step-item.has-error .palrm-step-num { background: var(--atlas-sev-danger-bg); color: var(--atlas-sev-danger-text); }
.palrm-step-item.has-error .palrm-step-name::after { content: " !"; color: var(--atlas-sev-danger); font-weight: 700; }

.palrm-step-panes { min-height: 320px; }
.palrm-step-title { font-size: 1rem; font-weight: 600; color: var(--atlas-text); }
.palrm-step-help { font-size: .8rem; color: var(--atlas-text-muted); margin: .2rem 0 .9rem; }
.palrm-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.palrm-empty {
	padding: .9rem 1rem; border: 1px dashed var(--atlas-border); border-radius: var(--atlas-radius-md);
	color: var(--atlas-text-muted); font-size: .82rem; background: var(--atlas-surface-muted);
}
.palrm-error { font-size: .76rem; color: var(--atlas-sev-danger-text); margin-top: .3rem; }
.palrm-link { padding: 0 .25rem; font-size: .76rem; text-decoration: none; white-space: nowrap; }

/* chips (fields summary, title placeholders, days_list) */
.palrm-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.palrm-chip {
	display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--atlas-gray-200); background: var(--atlas-gray-100);
	border-radius: var(--atlas-radius-full); padding: .18rem .6rem; font-size: .76rem; color: var(--atlas-gray-700);
	font-family: var(--atlas-font-mono); cursor: pointer; line-height: 1.3;
}
button.palrm-chip:hover { background: var(--atlas-color-primary-soft); border-color: var(--atlas-color-primary); color: var(--atlas-color-primary-strong); }
.palrm-chip-fn { background: var(--atlas-indigo-50); border-color: var(--atlas-indigo-100); color: var(--atlas-indigo-800); }
.palrm-chip-static { cursor: default; font-family: var(--atlas-font-sans); }
.palrm-chip-static small { color: var(--atlas-text-faint); font-family: var(--atlas-font-mono); }
.palrm-chip button { border: none; background: none; color: var(--atlas-gray-400); line-height: 1; padding: 0; cursor: pointer; font-size: .85rem; }
.palrm-chip button:hover { color: var(--atlas-red-500); }
.palrm-day-add { width: 70px; }
.palrm-fields-summary { margin-top: 1rem; }
.palrm-fields-title { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--atlas-text-faint); margin-bottom: .4rem; }

/* step 2: condition rows */
.palrm-conditions { display: flex; flex-direction: column; gap: .5rem; }
.palrm-cond { border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md); padding: .5rem .6rem; background: var(--atlas-surface); }
.palrm-cond.has-error { border-color: var(--atlas-sev-danger); }
.palrm-cond-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1fr) minmax(180px, 1.4fr) auto; gap: .5rem; align-items: center; }
.palrm-cond-value { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.palrm-cond-value .form-control, .palrm-cond-value .form-select { min-width: 0; }
.palrm-days { max-width: 170px; }
.palrm-cond-rm { padding: 0 .25rem; }
.palrm-ref {
	display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: var(--atlas-radius-sm);
	background: var(--atlas-amber-100); color: var(--atlas-amber-800); font-family: var(--atlas-font-mono); font-size: .78rem; font-weight: 600;
}

/* step 3: severity */
.palrm-sev-modes { display: flex; gap: 1.25rem; margin-bottom: .9rem; }
.palrm-radio { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; cursor: pointer; }
.palrm-radio.is-disabled { color: var(--atlas-text-faint); cursor: not-allowed; }
.palrm-sev-fixed { display: flex; align-items: center; gap: .5rem; }
.palrm-sev-select { width: auto; min-width: 160px; }
.palrm-sev-days { max-width: 520px; }
.palrm-sevmap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.palrm-sevmap-row {
	display: flex; align-items: center; gap: .4rem; background: var(--atlas-gray-50); border: 1px solid var(--atlas-gray-200);
	border-radius: var(--atlas-radius-md); padding: .3rem .55rem;
}
.palrm-sevmap-day { font-size: .78rem; color: var(--atlas-gray-700); min-width: 48px; text-align: right; }
.palrm-sevmap-row .form-select { width: auto; }
.palrm-sevmap-add .form-control { width: 84px; }

/* step 4: title */
.palrm-title-preview { margin-top: .5rem; }

/* step 5: params */
.palrm-params { display: flex; flex-direction: column; gap: .6rem; }
.palrm-param { border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md); padding: .6rem .75rem; background: var(--atlas-surface); }
.palrm-param.has-error { border-color: var(--atlas-sev-danger); }
.palrm-param-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.palrm-param-type { font-size: .72rem; font-family: var(--atlas-font-mono); color: var(--atlas-text-muted); background: var(--atlas-gray-100); border-radius: var(--atlas-radius-sm); padding: .1rem .4rem; }
.palrm-param-grid { display: grid; grid-template-columns: 1.2fr 1.4fr .6fr .6fr; gap: .5rem .75rem; align-items: start; }
.palrm-param-wide { grid-column: 1 / -1; }

/* step 6: preview */
.palrm-preview-status { display: inline-flex; align-items: center; gap: .4rem; }
.palrm-badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: var(--atlas-radius-full); font-size: .74rem; font-weight: 600; }
.palrm-badge-ok { background: var(--atlas-sev-ok-bg); color: var(--atlas-sev-ok-text); }
.palrm-badge-err { background: var(--atlas-sev-danger-bg); color: var(--atlas-sev-danger-text); }
.palrm-errors { margin: 0 0 .9rem; padding: .6rem .9rem .6rem 1.6rem; border: 1px solid var(--atlas-sev-danger); border-radius: var(--atlas-radius-md); background: var(--atlas-sev-danger-bg); font-size: .8rem; color: var(--atlas-sev-danger-text); }
.palrm-errors li + li { margin-top: .2rem; }
.palrm-preview-kpis { display: flex; gap: .75rem; margin-bottom: .9rem; }
.palrm-kpi { flex: 1; border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md); padding: .55rem .8rem; background: var(--atlas-surface-muted); }
.palrm-kpi-value { font-size: 1.35rem; font-weight: 700; color: var(--atlas-text); line-height: 1.1; }
.palrm-kpi-value small { font-size: .7rem; font-weight: 500; color: var(--atlas-text-muted); margin-left: .15rem; }
.palrm-kpi-label { font-size: .72rem; color: var(--atlas-text-muted); }
.palrm-sample { border: 1px solid var(--atlas-border); border-radius: var(--atlas-radius-md); max-height: 320px; overflow: auto; }
.palrm-sample table { font-size: .8rem; }
.palrm-sev { display: inline-block; padding: .1rem .5rem; border-radius: var(--atlas-radius-full); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.palrm-sev-1 { background: var(--atlas-sev-info-bg); color: var(--atlas-sev-info-text); }
.palrm-sev-2 { background: var(--atlas-sev-warn-bg); color: var(--atlas-sev-warn-text); }
.palrm-sev-3 { background: var(--atlas-orange-100); color: var(--atlas-orange-800); }
.palrm-sev-4 { background: var(--atlas-sev-danger-bg); color: var(--atlas-sev-danger-text); }

/* json tab */
.palrm-json { font-size: .78rem; line-height: 1.45; tab-size: 2; }

/* footer */
.palrm-footer { justify-content: space-between; }
.palrm-footer-msg { flex: 1 1 auto; min-width: 0; }

@media (max-width: 900px) {
	.palrm-meta { grid-template-columns: 1fr; }
	.palrm-wizard { grid-template-columns: 1fr; }
	.palrm-steps { flex-direction: row; flex-wrap: wrap; }
	.palrm-step-item .palrm-step-name { display: none; }
	.palrm-row-2, .palrm-cond-row, .palrm-param-grid { grid-template-columns: 1fr; }
}