/* ============================================================================
   Data Cleanser — Scenario wizard (inline editor) + searchable field combobox.
   Verbatim copies of the component stylesheets (minus @import "c/dcBrand").
   Transform: :host(.cls) → c-dc-scenario-wizard.cls (markup keeps the tag).
   ============================================================================ */

/* ============================================================================
   lwc/dcScenarioWizard/dcScenarioWizard.css (:host(.x) → c-dc-scenario-wizard.x)
   ============================================================================ */

c-dc-scenario-wizard.dc-wizard-host-open {
  position: fixed;
  inset: 0;
  z-index: 9001;
  display: block;
  pointer-events: none;
}

c-dc-scenario-wizard.dc-wizard-host-open .dc-drawer-scrim {
  pointer-events: auto;
}

.dc-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  background: rgba(26, 37, 51, 0.32);
  pointer-events: auto;
}

.dc-drawer-panel {
  width: min(760px, 100vw);
  height: 100vh;
  background: var(--dc-neutral-0);
  border-left: 1px solid var(--dc-border-1);
  box-shadow: var(--dc-shadow-xl);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: dc-drawer-in var(--dc-dur-base) var(--dc-ease);
}

/* Inline variant — drops down in document flow under the scenario row. */
c-dc-scenario-wizard.dc-wizard-host-inline {
  display: block;
  /* scroll-margin keeps the panel clear of the sticky app header + tab bar
     (~110 px on a typical Lightning Experience layout) when scrollIntoView
     pins it to the top of the viewport. */
  scroll-margin-top: 120px;
  scroll-margin-bottom: 24px;
}
.dc-wizard-inline-wrap {
  display: block;
}
.dc-wizard-inline-panel {
  width: 100%;
  background: var(--dc-neutral-0);
  border: 1px solid var(--dc-pastel-selected-border);
  border-radius: var(--dc-radius-lg, 14px);
  box-shadow: var(--dc-shadow-sm);
  display: flex;
  flex-direction: column;
  animation: dc-wizard-drop var(--dc-dur-base) var(--dc-ease);
}
@keyframes dc-wizard-drop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dc-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--dc-pastel-selected-border);
  background: var(--dc-pastel-surface);
}

.dc-wizard-head-main {
  min-width: 0;
  flex: 1;
}
.dc-wizard-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.dc-wizard-name-row .dc-h4 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-wizard-name-edit {
  flex: none;
  color: var(--dc-pastel-selected-text);
}
.dc-wizard-name-input {
  flex: 1;
  min-width: 0;
  max-width: 360px;
}
.dc-wizard-desc-input {
  display: block;
  margin-top: 8px;
  max-width: 360px;
}
.dc-wizard-desc-text {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-wizard-layout {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  background: var(--dc-bg-app);
  /* No overflow scroll here: a scroll box clips the lightning-combobox dropdown
     (it renders inline, not in an overlay). Steps are short, so the panel sizes
     to content and the page/scrim scrolls instead. */
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* SLDS2 pilot: lightning-vertical-navigation replaces custom step buttons. */
.dc-wizard-steps {
  min-height: 0;
  padding: 8px 0;
  border-right: 1px solid var(--dc-border-1);
  background: var(--dc-neutral-50);
  overflow: auto;
}

.dc-wizard-steps-nav {
  display: block;
  height: 100%;
}

.dc-wizard-body {
  overflow: visible;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dc-wizard-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.dc-wizard-section.dc-card {
  padding: 16px;
}

.dc-step-help {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
}

.dc-step-help p {
  margin: 4px 0 0;
}

.dc-wizard-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--dc-border-2);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
  color: var(--dc-fg-2);
  font: 400 var(--dc-text-sm)/1.4 var(--dc-font-sans);
  text-align: center;
}

/* Shared column grid for headers + data rows — one parent grid, subgrid rows. */
.dc-wizard-grid {
  --dc-wizard-row-gap: 8px;
  --dc-wizard-col-gap: 10px;
  --dc-wizard-actions-col: 4.5rem;
  display: grid;
  column-gap: var(--dc-wizard-col-gap);
  row-gap: var(--dc-wizard-row-gap);
  width: 100%;
  min-width: 0;
  align-items: center;
}

.dc-wizard-grid-rules {
  grid-template-columns:
    28px minmax(0, 1.4fr) minmax(0, 1fr)
    var(--dc-wizard-actions-col, 4.5rem);
}

/* Cross-object: Lead field → matching type → target. */
.dc-wizard-grid-rules-cross {
  grid-template-columns:
    28px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr)
    var(--dc-wizard-actions-col, 4.5rem);
}

.dc-wizard-grid-filters {
  grid-template-columns:
    28px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr)
    var(--dc-wizard-actions-col, 4.5rem);
}

.dc-wizard-grid-masters {
  grid-template-columns:
    28px minmax(0, 1.2fr) 72px minmax(0, 1fr) minmax(0, 1.2fr)
    var(--dc-wizard-actions-col, 4.5rem);
}

.dc-wizard-grid > .dc-row-headers,
.dc-wizard-grid > .dc-rule-row,
.dc-wizard-grid > .dc-filter-row,
.dc-wizard-grid > .dc-master-rule-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: var(--dc-wizard-col-gap);
  align-items: center;
  box-sizing: border-box;
}

.dc-wizard-add-action {
  align-self: flex-start;
  margin-top: 2px;
}

.dc-row-headers {
  align-items: end;
  padding: 0 1px 2px;
  box-sizing: border-box;
}

.dc-master-rule-row {
  padding: 10px 0;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
}

.dc-master-number {
  width: 24px;
  height: 24px;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-mono);
}

.dc-master-editor-grid {
  grid-column: 2 / -2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 72px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.dc-master-id-warning,
.dc-wizard-readonly-msg {
  color: var(--dc-warning-700, #8c4b02);
  font: 500 var(--dc-text-xs)/1.4 var(--dc-font-sans);
  margin: 4px 0 0;
}

.dc-wizard-readonly-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 22px;
  background: var(--dc-warning-50, #fef3e0);
  border-bottom: 1px solid var(--dc-warning-200, #f9d9a5);
  color: var(--dc-warning-800, #6b3900);
}

.dc-wizard-readonly-banner-icon {
  flex: none;
  margin-top: 2px;
  --slds-c-icon-color-foreground-default: var(--dc-warning-700, #8c4b02);
}

.dc-wizard-readonly-banner-text {
  font: 500 var(--dc-text-sm)/1.45 var(--dc-font-sans);
}

.dc-wizard-panel--readonly .dc-wizard-head {
  border-bottom-color: var(--dc-warning-200, #f9d9a5);
}

.dc-wizard-body--readonly .dc-wizard-section {
  position: relative;
}

.dc-wizard-body--readonly .dc-wizard-grid,
.dc-wizard-body--readonly .dc-wizard-add-action,
.dc-wizard-body--readonly .dc-advanced-logic-block {
  opacity: 0.72;
}

.dc-wizard-body--readonly .dc-row-edit[disabled],
.dc-wizard-body--readonly .dc-row-remove[disabled],
.dc-wizard-body--readonly lightning-button[disabled] {
  opacity: 0.45;
}

.dc-row-header-label {
  color: var(--dc-fg-2);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
  text-align: start;
  justify-self: start;
}

.dc-row-header-spacer {
  display: block;
}

.dc-row-header-actions {
  width: var(--dc-wizard-actions-col, 4.5rem);
  justify-self: end;
}

.dc-row-invalid {
  border-color: var(--dc-error-300);
  box-shadow: inset 3px 0 0 var(--dc-error-500);
}

.dc-row-locked {
  background: var(--dc-neutral-50, #f8f9fb);
  cursor: default;
}

.dc-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: var(--dc-wizard-actions-col, 4.5rem);
  justify-self: end;
}

.dc-row-action-spacer {
  display: inline-block;
  width: 32px;
}

.dc-rule-field-display,
.dc-rule-operator-display,
.dc-filter-field-display,
.dc-filter-operator-display,
.dc-filter-value-display,
.dc-master-field-display,
.dc-master-operator-display,
.dc-master-value-display,
.dc-master-score-display {
  align-self: center;
  justify-self: start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 var(--dc-text-sm)/1.4 var(--dc-font-sans);
  color: var(--dc-fg-1);
  text-align: start;
}

.dc-master-score-display {
  font: 600 var(--dc-text-sm)/1.2 var(--dc-font-mono);
}

.dc-filter-value-placeholder {
  display: block;
  min-height: 1px;
}

.dc-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-form-label {
  color: var(--dc-fg-2);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
}

.dc-master-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Column headers are shown above — hide duplicate per-field labels in edit rows. */
.dc-wizard-grid .dc-master-field .dc-master-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dc-wizard-grid .dc-master-field {
  position: relative;
}

.dc-input-block {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.dc-object-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
}

.dc-object-lock-value {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
}

.dc-combobox-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  overflow: visible;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
}

.dc-combobox-wrap:focus-within {
  z-index: 3;
}

.dc-combobox-wrap > lightning-combobox,
.dc-combobox-wrap > c-dc-search-combobox,
.dc-rule-row > lightning-input,
.dc-filter-row > lightning-input {
  min-width: 0;
  width: 100%;
}

.dc-master-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.dc-master-field > c-dc-search-combobox,
.dc-master-field > lightning-combobox,
.dc-master-field > lightning-input {
  min-width: 0;
  width: 100%;
}

.dc-master-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
  width: 100%;
  box-sizing: border-box;
}

/* When value is hidden, keep Score in the second column of row 2. */
.dc-master-field-score-row {
  grid-column: 2;
  grid-row: 2;
}

.dc-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dc-rule-row,
.dc-filter-row {
  padding: 10px 0;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
  overflow: visible;
  position: relative;
}

.dc-filter-row {
  width: 100%;
}

/* Cross-object field cell — keeps picker and read-only text vertically centered. */
.dc-rule-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  justify-self: stretch;
}

/* The shared display rule sets align-self:center for grid-item displays (filters/
   masters). Inside the rule cell that axis is horizontal, so we stretch the value to
   the column edge and let text-align:start left-align it under the header. */
.dc-rule-cell .dc-rule-field-display {
  align-self: stretch;
}

.dc-rule-operator-cell {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
}

.dc-rule-operator-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
}

/* Read-only matching type pill — left-aligned with the column header. */
.dc-rule-operator-chip {
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-filter-number,
.dc-rule-number {
  width: 24px;
  height: 24px;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
  font: 600 var(--dc-text-xs)/1 var(--dc-font-mono);
}

.dc-advanced-toggle {
  align-self: flex-start;
}

.dc-advanced-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.dc-advanced-display strong {
  font-family: var(--dc-font-mono);
}

.dc-advanced-logic {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-md);
  background: var(--dc-neutral-0);
}

.dc-advanced-logic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dc-form-hint {
  margin: 0;
  color: var(--dc-fg-2);
  font: 400 var(--dc-text-xs)/1.4 var(--dc-font-sans);
}

.dc-pill {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-pill);
  background: var(--dc-neutral-0);
  color: var(--dc-fg-2);
  cursor: pointer;
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
}

.dc-pill:hover {
  background: var(--dc-neutral-50);
}

.dc-pill.is-active {
  border-color: var(--dc-brand-300);
  background: var(--dc-brand-50);
  color: var(--dc-brand-700);
}

.dc-pill:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}

.dc-wizard-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 22px;
  border-top: 1px solid var(--dc-pastel-selected-border);
  background: var(--dc-pastel-surface);
  /* Sit beneath the layout so an open combobox dropdown paints over the foot. */
  position: relative;
  z-index: 0;
}

.dc-wizard-foot-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.dc-wizard-foot-actions lightning-button[variant="brand"] {
  --slds-c-button-brand-color-background: var(--dc-pastel-action-bg);
  --slds-c-button-brand-color-background-hover: var(
    --dc-pastel-action-bg-hover
  );
  --slds-c-button-brand-text-color: var(--dc-pastel-action-text);
  --slds-c-button-brand-color-border: var(--dc-brand-200);
}

.dc-wizard-foot-msg {
  flex: 1 1 100%;
  margin: 0;
  font: 600 var(--dc-text-xs)/1.4 var(--dc-font-sans);
}

.dc-wizard-foot-msg-error {
  color: var(--dc-error-600);
}

@keyframes dc-drawer-in {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .dc-wizard-layout {
    grid-template-columns: 1fr;
  }

  .dc-wizard-steps {
    border-right: 0;
    border-bottom: 1px solid var(--dc-border-1);
  }

  .dc-wizard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--dc-wizard-row-gap);
  }

  .dc-wizard-grid > .dc-row-headers,
  .dc-wizard-grid > .dc-rule-row,
  .dc-wizard-grid > .dc-filter-row,
  .dc-wizard-grid > .dc-master-rule-row {
    display: grid;
    grid-column: auto;
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 10px;
  }

  .dc-subrow,
  .dc-master-row,
  .dc-master-editor-grid {
    grid-template-columns: 1fr;
  }

  .dc-master-editor-grid {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-drawer-panel {
    animation: none;
  }
}

/* ============================================================================
   lwc/dcSearchCombobox/dcSearchCombobox.css (verbatim)
   ============================================================================ */

.dc-search-combobox {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Match the SLDS form-element label (lightning-combobox / lightning-input) so
   the search field's label box is the same height — otherwise the input below
   sits at a different Y and the row looks misaligned. */
.dc-search-label {
  display: block;
  margin: 0 0 0.125rem;
  color: var(--dc-neutral-700);
  font: 400 0.75rem / 1.5 var(--dc-font-sans);
}

.dc-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.dc-search-icon {
  position: absolute;
  left: 0.5rem;
  pointer-events: none;
  --slds-c-icon-color-foreground-default: var(--dc-neutral-400);
}

.dc-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  padding: 0 0.65rem 0 1.85rem;
  border: 1px solid var(--dc-border-2);
  border-radius: var(--dc-radius-sm);
  background: var(--dc-neutral-0);
  color: var(--dc-fg-1);
  font: 400 var(--dc-text-sm) / 1.25 var(--dc-font-sans);
  transition:
    border-color var(--dc-dur-fast) var(--dc-ease),
    box-shadow var(--dc-dur-fast) var(--dc-ease);
}

.dc-search-input::placeholder {
  color: var(--dc-neutral-400);
}

.dc-search-input:focus {
  outline: none;
  border-color: var(--dc-brand-500);
  box-shadow: var(--dc-shadow-focus);
}

.dc-search-input:disabled {
  background: var(--dc-neutral-50);
  color: var(--dc-fg-3);
  cursor: not-allowed;
}

.dc-search-dropdown {
  position: absolute;
  z-index: 7000;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--dc-border-1);
  border-radius: var(--dc-radius-sm);
  background: var(--dc-neutral-0);
  box-shadow: var(--dc-shadow-md);
}

.dc-search-list {
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
}

.dc-search-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: background var(--dc-dur-fast) var(--dc-ease);
}

.dc-search-option:hover,
.dc-search-option:focus {
  background: var(--dc-pastel-selected-bg);
}

.dc-search-option-label {
  font: 500 var(--dc-text-sm) / 1.25 var(--dc-font-sans);
  color: var(--dc-fg-1);
}

.dc-search-option-api {
  font: 400 var(--dc-text-xs) / 1.2 var(--dc-font-mono);
  color: var(--dc-fg-3);
}

.dc-search-empty {
  margin: 0;
  padding: 0.75rem;
  font: 400 var(--dc-text-sm) / 1.4 var(--dc-font-sans);
  color: var(--dc-fg-3);
  text-align: center;
}