/* =========================================================
   Marco Lombart — opt-in styling for standard Salesforce Flow forms.
   Loaded only by the ML Flow Form Styles utility component.
   ========================================================= */

/* SLDS styling hooks: CSS custom properties inherit through shadow
   boundaries, so these reach the standard LWR Flow component's
   Next/Finish (brand) and Previous (neutral) buttons. Styled as the ML
   outline ("ghost") pill — transparent fill, navy border and text —
   inverting to a navy fill on hover. The `body *` scope plus !important
   beats the theme's own hook assignments (which otherwise paint these
   buttons the site green). */
:root,
body,
body * {
  /* Brand (Next / Finish / Submit) — outline pill */
  --slds-c-button-brand-color-background: transparent !important;
  --slds-c-button-brand-color-background-hover: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-color-background-active: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-color-border: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-color-border-hover: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-color-border-active: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-text-color: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-brand-text-color-hover: var(--ml-c-white, #fff) !important;
  --slds-c-button-brand-text-color-active: var(--ml-c-white, #fff) !important;
  --slds-c-button-brand-spacing-block-start: 8px !important;
  --slds-c-button-brand-spacing-block-end: 8px !important;
  --slds-c-button-brand-spacing-inline-start: 26px !important;
  --slds-c-button-brand-spacing-inline-end: 26px !important;
  /* Neutral (Previous / Back) — same ghost treatment, lighter border */
  --slds-c-button-neutral-color-background: transparent !important;
  --slds-c-button-neutral-color-border: rgba(0, 22, 36, 0.4) !important;
  --slds-c-button-neutral-spacing-block-start: 8px !important;
  --slds-c-button-neutral-spacing-block-end: 8px !important;
  --slds-c-button-neutral-spacing-inline-start: 24px !important;
  --slds-c-button-neutral-spacing-inline-end: 24px !important;
  /* Shared */
  --slds-c-button-radius-border: 999px !important;
  --slds-c-button-text-color: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-text-color-hover: var(--ml-c-ml-blue, #001624) !important;
  --slds-c-button-text-color-active: var(--ml-c-ml-blue, #001624) !important;
  /* Legacy prefix used by older base-component versions */
  --sds-c-button-brand-color-background: transparent !important;
  --sds-c-button-brand-color-background-hover: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-color-background-active: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-color-border: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-color-border-hover: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-color-border-active: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-text-color: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-brand-text-color-hover: var(--ml-c-white, #fff) !important;
  --sds-c-button-brand-text-color-active: var(--ml-c-white, #fff) !important;
  --sds-c-button-brand-spacing-block-start: 8px !important;
  --sds-c-button-brand-spacing-block-end: 8px !important;
  --sds-c-button-brand-spacing-inline-start: 26px !important;
  --sds-c-button-brand-spacing-inline-end: 26px !important;
  --sds-c-button-neutral-color-background: transparent !important;
  --sds-c-button-neutral-color-border: rgba(0, 22, 36, 0.4) !important;
  --sds-c-button-neutral-spacing-block-start: 8px !important;
  --sds-c-button-neutral-spacing-block-end: 8px !important;
  --sds-c-button-neutral-spacing-inline-start: 24px !important;
  --sds-c-button-neutral-spacing-inline-end: 24px !important;
  --sds-c-button-radius-border: 999px !important;
  --sds-c-button-text-color: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-text-color-hover: var(--ml-c-ml-blue, #001624) !important;
  --sds-c-button-text-color-active: var(--ml-c-ml-blue, #001624) !important;
}

lightning-flow,
.flowruntimeBody,
.flowruntimeBody .slds-form-element,
.flowruntimeBody .slds-rich-text-editor__output {
  font-family: var(--ml-f-sans, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Wireframe form card — white rounded panel around the whole flow */
lightning-flow,
.flowruntimeBody {
  display: block;
  background: var(--ml-c-white, #fff);
  border: 1px solid var(--ml-c-border, #DCE4E8);
  border-radius: var(--ml-r-lg, 16px);
  padding: var(--ml-s-6, 32px);
  box-shadow: 0 4px 12px rgba(0, 62, 81, 0.08);
}
/* Avoid double cards when the runtime body renders inside lightning-flow */
lightning-flow .flowruntimeBody,
lightning-flow .slds-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: var(--ml-c-white, #fff);
}

.flowruntimeBody .slds-form-element {
  margin-bottom: var(--ml-s-4, 16px);
}

lightning-flow .slds-form-element__label,
.flowruntimeBody .slds-form-element__label,
.flowruntimeBody label {
  display: block;
  margin-bottom: 6px;
  color: var(--ml-c-warm-gray, #545454);
  font-size: var(--ml-fs-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

lightning-flow .slds-input,
lightning-flow .slds-textarea,
lightning-flow .slds-select,
lightning-flow .slds-combobox__input,
.flowruntimeBody input,
.flowruntimeBody textarea,
.flowruntimeBody select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ml-c-border, #DCE4E8);
  border-radius: var(--ml-r-sm, 4px);
  background: var(--ml-c-white, #fff);
  color: var(--ml-c-text, #001624);
  font-family: var(--ml-f-sans, 'Montserrat', sans-serif);
  font-size: var(--ml-fs-sm, 14px);
  box-shadow: none;
}

lightning-flow .slds-textarea,
.flowruntimeBody textarea {
  min-height: 120px;
  line-height: 1.5;
}

lightning-flow .slds-input:focus,
lightning-flow .slds-textarea:focus,
lightning-flow .slds-select:focus,
lightning-flow .slds-combobox__input:focus,
.flowruntimeBody input:focus,
.flowruntimeBody textarea:focus,
.flowruntimeBody select:focus {
  border-color: var(--ml-c-ml-blue, #001624);
  box-shadow: 0 0 0 2px rgba(0,22,36,0.12);
  outline: none;
}

lightning-flow .slds-required,
.flowruntimeBody .slds-required {
  color: var(--ml-c-ml-green, #97D700);
}

lightning-flow .slds-file-selector__dropzone,
.flowruntimeBody .slds-file-selector__dropzone {
  border-color: var(--ml-c-border, #DCE4E8);
  border-radius: var(--ml-r-md, 8px);
  background: var(--ml-c-surface, #F4F7F9);
}

lightning-flow .slds-button_brand,
lightning-flow .flowruntimeNextButton,
.flowruntimeBody .slds-button_brand,
.flowruntimeBody .flowruntimeNextButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid var(--ml-c-ml-blue, #001624) !important;
  background: transparent !important;
  color: var(--ml-c-ml-blue, #001624) !important;
  font-family: var(--ml-f-sans, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: var(--ml-fs-xs, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

lightning-flow .slds-button_brand:hover,
lightning-flow .flowruntimeNextButton:hover,
.flowruntimeBody .slds-button_brand:hover,
.flowruntimeBody .flowruntimeNextButton:hover {
  background: var(--ml-c-ml-blue, #001624) !important;
  border-color: var(--ml-c-ml-blue, #001624) !important;
  color: var(--ml-c-white, #fff) !important;
  transform: translateY(-1px);
  box-shadow: var(--ml-sh-md, 0 4px 12px rgba(0,62,81,0.08));
}

lightning-flow .slds-button_neutral,
lightning-flow .flowruntimeBackButton,
.flowruntimeBody .slds-button_neutral,
.flowruntimeBody .flowruntimeBackButton {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 22, 36, 0.4) !important;
  background: transparent !important;
  color: var(--ml-c-ml-blue, #001624) !important;
  font-weight: 700;
  font-size: var(--ml-fs-xs, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

lightning-flow .slds-has-error .slds-input,
lightning-flow .slds-has-error .slds-textarea,
lightning-flow .slds-has-error .slds-select,
.flowruntimeBody .slds-has-error .slds-input,
.flowruntimeBody .slds-has-error .slds-textarea,
.flowruntimeBody .slds-has-error .slds-select {
  border-color: #ba0517;
}

lightning-flow .slds-form-element__help,
.flowruntimeBody .slds-form-element__help {
  font-size: var(--ml-fs-xs, 12px);
}