/* ============================================================================
   Data Cleanser — Scenarios page (header actions, filter toolbar, scenario
   rows, validation modal). Verbatim copy of lwc/dcScenarios/dcScenarios.css
   (minus @import "c/dcBrand"; no :host rules in source).
   ============================================================================ */

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

.dc-scenario-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

/* Cross-object label is longer than CRM object names; allow the filter row to wrap. */
.dc-object-filters {
  flex-wrap: wrap;
  max-width: 100%;
}

.dc-new-action {
  position: relative;
}

/* Primary header CTA — pastel fill, darker label (distinct from filter selection). */
.dc-new-action lightning-button-menu {
  --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-color-background-active: var(
    --dc-pastel-action-bg-active
  );
  --slds-c-button-brand-text-color: var(--dc-pastel-action-text);
  --slds-c-button-brand-color-border: var(--dc-brand-200);
  --slds-c-button-brand-color-border-hover: var(--dc-brand-300);
}

.dc-scenario-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row wrapper stacks the card and its inline edit wizard drop-down. */
.dc-scenario-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The new-scenario create editor needs breathing room before the existing
   scenarios that follow it. */
.dc-scenario-row-new {
  margin-bottom: 24px;
}

.dc-scenario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  cursor: pointer;
  transition:
    border-color var(--dc-dur-fast) var(--dc-ease),
    box-shadow var(--dc-dur-fast) var(--dc-ease);
}
.dc-scenario:focus-visible {
  outline: 2px solid var(--dc-brand-500);
  outline-offset: 2px;
}
.dc-scenario:not(.is-running-scenario):hover {
  border-color: var(--dc-brand-200);
  box-shadow: var(--dc-shadow-md);
}
.dc-scenario.is-running-scenario {
  /* scroll-margin keeps the row clear of the sticky app header when
     scrollIntoView pins the processing scenario to the top of the list. */
  scroll-margin-top: 120px;
  outline: 2px solid var(--dc-brand-200);
  outline-offset: 0;
  box-shadow:
    0 0 0 4px var(--dc-pastel-selected-bg),
    var(--dc-shadow-sm);
}
.dc-scenario-id {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.dc-scenario-copy {
  min-width: 0;
}
.dc-scenario-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-scenario-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-scenario-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  cursor: default;
}

.dc-scenario-status-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--slds-g-spacing-2, 8px);
}

.dc-scenario-groups-pill {
  gap: var(--slds-g-spacing-1, 4px);
  height: 22px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  font: inherit;
  transition:
    background var(--dc-dur-fast) var(--dc-ease),
    box-shadow var(--dc-dur-fast) var(--dc-ease);
}

.dc-scenario-groups-pill:hover {
  background: var(--dc-brand-100);
  box-shadow: 0 0 0 1px var(--dc-brand-200);
}

.dc-scenario-groups-pill:focus-visible {
  outline: 2px solid var(--dc-brand-500);
  outline-offset: 2px;
}

.dc-scenario-groups-pill lightning-icon {
  --slds-c-icon-color-foreground-default: var(--dc-brand-600);
}

.dc-fav-btn {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--dc-radius-sm);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
}
/* lightning-icon utility icons take their fill from
   --slds-c-icon-color-foreground-default (the plain --slds-c-icon-color-foreground
   hook is for non-utility categories and is ignored here). */
.dc-fav-icon {
  --slds-c-icon-color-foreground-default: var(--dc-neutral-400);
}
.dc-fav-btn:hover .dc-fav-icon {
  --slds-c-icon-color-foreground-default: var(--dc-neutral-500);
}
/* Favourited star: SLDS2 global teal token when available, with a pastel
   teal-green fallback for orgs that don't ship the --slds-g-color-palette-*
   globals. utility:favorite ignores the foreground hook in some versions
   (shadow-root intervention), so we also set `color` + slds-current-color in
   markup as a guaranteed path — one of the two always paints the star. */
.dc-fav-icon-on {
  color: var(--slds-g-color-palette-teal-90, #7dd3c0);
  --slds-c-icon-color-foreground-default: var(
    --slds-g-color-palette-teal-90,
    #7dd3c0
  );
}

/* Row primary action — pastel sky (Activate). */
.dc-action-btn {
  --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-color-background-active: var(
    --dc-pastel-action-bg-active
  );
  --slds-c-button-brand-text-color: var(--dc-pastel-action-text);
  --slds-c-button-brand-color-border: var(--dc-brand-200);
  --slds-c-button-brand-color-border-hover: var(--dc-brand-300);
}

/* Processing — disabled neutral, aligned with the status badge tone. */
.dc-action-processing.dc-action-btn {
  --slds-c-button-neutral-color-background: var(--dc-pastel-selected-bg);
  --slds-c-button-neutral-color-border: var(--dc-brand-200);
  --slds-c-button-text-color: var(--dc-pastel-selected-text);
  cursor: default;
}

.dc-action-deactivate {
  --slds-c-button-brand-color-background: var(--dc-deactivate-50);
  --slds-c-button-brand-color-background-hover: #ebe4f7;
  --slds-c-button-brand-color-background-active: #e2d9f3;
  --slds-c-button-brand-text-color: var(--dc-deactivate-700);
  --slds-c-button-brand-color-border: #d4c8eb;
  --slds-c-button-brand-color-border-hover: #c4b5e3;
}

.dc-scenario-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dc-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-form-label {
  font: 600 var(--dc-text-xs)/1 var(--dc-font-sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dc-fg-3);
}
.dc-input-block {
  width: 100%;
  box-sizing: border-box;
}
.dc-form-hint {
  margin: 0;
  font: 400 var(--dc-text-xs)/1.4 var(--dc-font-sans);
  color: var(--dc-fg-3);
}
@keyframes dc-run-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}

.dc-scenario-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  text-align: left;
}

.dc-scenario-empty p {
  margin: 4px 0 0;
}

@media (max-width: 760px) {
  .dc-scenario,
  .dc-scenario-actions,
  .dc-scenario-empty {
    align-items: flex-start;
    flex-direction: column;
  }
}

.dc-validation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(20% 0 0 / 0.45);
  padding: 1rem;
}

.dc-validation-modal {
  width: min(32rem, 100%);
  background: var(--dc-surface, #fff);
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.5rem oklch(20% 0 0 / 0.25);
  overflow: hidden;
}

.dc-validation-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid oklch(90% 0 0);
}

.dc-validation-body {
  padding: 1rem 1.25rem;
}

.dc-validation-lead {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.dc-validation-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dc-validation-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.25rem;
}

.dc-validation-foot 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);
}