/*
 * Megaservice Platform — Foundation Components / P0.3.
 * Future load order: tokens.css, foundation.css, components.css.
 * Opt-in only: .ms-ui and ms-* classes; no template integration yet.
 * HTML owns labels, error associations, currency formatting and behavior.
 * Do not combine these components with Bootstrap visual classes.
 */

/* 1. Buttons: native buttons or navigation links, never simulated semantics. */
.ms-ui .ms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-gap-related);
  min-width: var(--ms-interaction-target-min);
  min-height: max(var(--ms-button-height-md), var(--ms-interaction-target-min));
  max-width: 100%;
  padding: var(--ms-space-2) var(--ms-button-padding-inline);
  font-family: var(--ms-font-family-ui);
  font-size: var(--ms-type-body-size);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-type-body-line-height);
  letter-spacing: var(--ms-type-body-letter-spacing);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ms-color-action-secondary-text);
  background-color: var(--ms-color-action-secondary-background);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-color-action-secondary-border);
  border-radius: var(--ms-button-radius);
  cursor: pointer;
}

.ms-ui .ms-button--sm {
  min-height: max(var(--ms-button-height-sm), var(--ms-interaction-target-min));
  padding-block: var(--ms-space-1);
  font-size: var(--ms-type-body-small-size);
}

.ms-ui .ms-button--lg {
  min-height: max(var(--ms-button-height-lg), var(--ms-interaction-target-min));
}

.ms-ui .ms-button--secondary {
  color: var(--ms-color-action-secondary-text);
  background-color: var(--ms-color-action-secondary-background);
  border-color: var(--ms-color-action-secondary-border);
}

.ms-ui .ms-button:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--ms-color-action-secondary-text);
  background-color: var(--ms-color-action-secondary-hover);
  text-decoration: none;
}

.ms-ui .ms-button:not(:disabled):not([aria-disabled="true"]):active {
  color: var(--ms-color-action-secondary-text);
  background-color: var(--ms-color-action-secondary-active);
}

.ms-ui .ms-button--primary {
  color: var(--ms-color-action-primary-text);
  background-color: var(--ms-color-action-primary-background);
  border-color: var(--ms-color-action-primary-background);
}

.ms-ui .ms-button--primary:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--ms-color-action-primary-text);
  background-color: var(--ms-color-action-primary-hover);
  border-color: var(--ms-color-action-primary-hover);
}

.ms-ui .ms-button--primary:not(:disabled):not([aria-disabled="true"]):active {
  color: var(--ms-color-action-primary-text);
  background-color: var(--ms-color-action-primary-active);
  border-color: var(--ms-color-action-primary-active);
}

/* Ghost reuses secondary text/hover/active; its resting surface is unpainted. */
.ms-ui .ms-button--ghost {
  color: var(--ms-color-action-secondary-text);
  background: none;
  border-style: none;
}

.ms-ui .ms-button--danger {
  color: var(--ms-color-action-danger-text);
  background-color: var(--ms-color-action-danger-background);
  border-color: var(--ms-color-action-danger-background);
}

.ms-ui .ms-button--danger:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--ms-color-action-danger-text);
  background-color: var(--ms-color-action-danger-hover);
  border-color: var(--ms-color-action-danger-hover);
}

.ms-ui .ms-button--danger:not(:disabled):not([aria-disabled="true"]):active {
  color: var(--ms-color-action-danger-text);
  background-color: var(--ms-color-action-danger-active);
  border-color: var(--ms-color-action-danger-active);
}

/*
 * ARIA describes state but does not block activation. Future HTML must use
 * native disabled where supported, and omit actionable hrefs for disabled
 * links. Keep focus discoverable; pointer-events is not a keyboard guard.
 * Danger labels must state the action/consequence, not rely on red alone.
 */
.ms-ui .ms-button:disabled,
.ms-ui .ms-button[aria-disabled="true"] {
  color: var(--ms-color-action-disabled-text);
  background-color: var(--ms-color-action-disabled-background);
  border-color: var(--ms-color-action-disabled-border);
  opacity: 1;
  cursor: not-allowed;
}

/* Focus-visible is supplied by foundation.css, without changing dimensions. */

/* 2. Forms: explicit classes; no widget rendering or server validation here. */
.ms-ui .ms-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-related);
  min-width: 0;
}

.ms-ui .ms-form-field + .ms-form-field {
  margin-block-start: var(--ms-gap-field);
}

.ms-ui .ms-label,
.ms-ui .ms-form-field > label {
  display: block;
  margin: var(--ms-space-0);
  font-size: var(--ms-type-label-size);
  font-weight: var(--ms-type-label-weight);
  line-height: var(--ms-type-label-line-height);
  letter-spacing: var(--ms-type-label-letter-spacing);
  color: var(--ms-color-text-primary);
}

.ms-ui .ms-help-text,
.ms-ui .ms-field-error,
.ms-ui .ms-form-field > .errorlist {
  margin: var(--ms-space-0);
  font-size: var(--ms-type-body-small-size);
  line-height: var(--ms-type-body-small-line-height);
  overflow-wrap: anywhere;
}

.ms-ui .ms-help-text {
  color: var(--ms-color-text-muted);
}

.ms-ui .ms-field-error,
.ms-ui .ms-form-field > .errorlist {
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-status-danger-text);
}

/* ms-input is for visible text-like/file inputs, not checkbox/radio/hidden. */
.ms-ui :is(.ms-input, .ms-select, .ms-textarea, .ms-form-field > input, .ms-form-field > select, .ms-form-field > textarea):where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) {
  display: block;
  width: 100%;
  min-width: var(--ms-interaction-target-min);
  max-width: 100%;
  min-height: max(var(--ms-control-height), var(--ms-interaction-target-min));
  padding: var(--ms-space-2) var(--ms-inset-control);
  font-family: var(--ms-font-family-ui);
  font-size: var(--ms-type-body-size);
  font-weight: var(--ms-type-body-weight);
  line-height: var(--ms-type-body-line-height);
  letter-spacing: var(--ms-type-body-letter-spacing);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-control-border-color);
  border-radius: var(--ms-control-radius);
  appearance: auto;
}

.ms-ui :is(.ms-textarea, .ms-form-field > textarea) {
  min-height: max(var(--ms-control-textarea-min-height), var(--ms-interaction-target-min));
  resize: vertical;
}

.ms-ui :is(.ms-input, .ms-textarea, .ms-form-field > input, .ms-form-field > textarea)::placeholder {
  color: var(--ms-color-text-muted);
  opacity: 1;
}

.ms-ui :is(.ms-input, .ms-select, .ms-textarea, .ms-form-field > input, .ms-form-field > select, .ms-form-field > textarea):where(:not(:disabled):not([readonly]):not([aria-disabled="true"])):hover {
  border-color: var(--ms-color-text-secondary);
}

/* Readonly applies to supported inputs/textarea, never to select/checkbox. */
.ms-ui :is(.ms-input, .ms-textarea)[readonly] {
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-control-read-only-background);
  border-style: dashed;
}

/* Native checkbox preserves its checkmark and high-contrast rendering. */
.ms-ui :is(input[type="checkbox"].ms-checkbox, .ms-form-field > input[type="checkbox"]) {
  flex: none;
  width: var(--ms-interaction-target-min);
  height: var(--ms-interaction-target-min);
  margin: var(--ms-space-0);
  vertical-align: middle;
  accent-color: var(--ms-color-action-primary-background);
  appearance: auto;
  cursor: pointer;
}

.ms-ui :is(input[type="checkbox"].ms-checkbox, .ms-form-field > input[type="checkbox"]):not(:disabled):not([aria-disabled="true"]):hover {
  accent-color: var(--ms-color-action-primary-hover);
}

/*
 * Server-rendered aria-invalid avoids marking untouched required fields.
 * Stronger borders supplement color; actual error text/IDs remain mandatory.
 */
.ms-ui :is(.ms-input, .ms-select, .ms-textarea, .ms-form-field > input, .ms-form-field > select, .ms-form-field > textarea)[aria-invalid="true"] {
  border-width: var(--ms-border-width-strong);
  border-color: var(--ms-color-control-border-error);
}

.ms-ui :is(input[type="checkbox"].ms-checkbox, .ms-form-field > input[type="checkbox"])[aria-invalid="true"] {
  box-shadow: var(--ms-space-0) var(--ms-space-0) var(--ms-space-0) var(--ms-border-width-strong) var(--ms-color-control-border-error);
}

.ms-ui :is(.ms-input, .ms-select, .ms-textarea, .ms-form-field > input, .ms-form-field > select, .ms-form-field > textarea):disabled,
.ms-ui :is(.ms-input, .ms-select, .ms-textarea, .ms-form-field > input, .ms-form-field > select, .ms-form-field > textarea)[aria-disabled="true"] {
  color: var(--ms-color-action-disabled-text);
  background-color: var(--ms-color-action-disabled-background);
  border-color: var(--ms-color-action-disabled-border);
  border-style: dashed;
  opacity: 1;
  cursor: not-allowed;
}

.ms-ui :is(input[type="checkbox"].ms-checkbox, .ms-form-field > input[type="checkbox"]):disabled,
.ms-ui :is(input[type="checkbox"].ms-checkbox, .ms-form-field > input[type="checkbox"])[aria-disabled="true"] {
  accent-color: var(--ms-color-action-disabled-text);
  opacity: 1;
  cursor: not-allowed;
}

.ms-ui .ms-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-gap-related);
  margin-block-start: var(--ms-gap-group);
}

.ms-ui .ms-form-error-summary {
  margin-block-end: var(--ms-gap-group);
  padding: var(--ms-inset-surface);
  color: var(--ms-color-status-danger-text);
  background-color: var(--ms-color-status-danger-background);
  border: var(--ms-border-width-strong) var(--ms-border-style-default) var(--ms-color-control-border-error);
  border-radius: var(--ms-control-radius);
  overflow-wrap: anywhere;
}

/* 3. Alerts: also cover contextual inline feedback; no duplicate component. */
.ms-ui .ms-alert {
  padding: var(--ms-inset-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default);
  border-radius: var(--ms-control-radius);
  overflow-wrap: anywhere;
}

/* Shared semantic palettes for alerts and badges; meanings come from HTML. */
.ms-ui .ms-alert,
.ms-ui .ms-alert--neutral,
.ms-ui .ms-badge,
.ms-ui .ms-badge--neutral {
  color: var(--ms-color-text-secondary);
  background-color: var(--ms-color-background-subtle);
  border-color: var(--ms-color-border-default);
}

.ms-ui .ms-alert--success,
.ms-ui .ms-badge--success {
  color: var(--ms-color-status-success-text);
  background-color: var(--ms-color-status-success-background);
  border-color: var(--ms-color-status-success-border);
}

.ms-ui .ms-alert--warning,
.ms-ui .ms-badge--warning {
  color: var(--ms-color-status-warning-text);
  background-color: var(--ms-color-status-warning-background);
  border-color: var(--ms-color-status-warning-border);
}

.ms-ui .ms-alert--danger,
.ms-ui .ms-badge--danger {
  color: var(--ms-color-status-danger-text);
  background-color: var(--ms-color-status-danger-background);
  border-color: var(--ms-color-status-danger-border);
}

.ms-ui .ms-alert--info,
.ms-ui .ms-badge--info {
  color: var(--ms-color-status-info-text);
  background-color: var(--ms-color-status-info-background);
  border-color: var(--ms-color-status-info-border);
}

/* 4. Status badges: text labels, not interactive controls or domain states. */
.ms-ui .ms-badge {
  display: inline-block;
  max-width: 100%;
  padding: var(--ms-space-1) var(--ms-space-2);
  font-size: var(--ms-type-label-size);
  font-weight: var(--ms-type-label-weight);
  line-height: var(--ms-type-label-line-height);
  letter-spacing: var(--ms-type-label-letter-spacing);
  border-width: var(--ms-border-width-default);
  border-style: var(--ms-border-style-default);
  border-radius: var(--ms-badge-radius);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 5. Card: one related content unit; a subtle elevation over .ms-surface. */
.ms-ui .ms-card {
  min-width: 0;
  padding: var(--ms-inset-surface);
  color: var(--ms-color-text-primary);
  background-color: var(--ms-color-background-surface);
  border: var(--ms-border-width-default) var(--ms-border-style-default) var(--ms-border-color-default);
  border-radius: var(--ms-surface-radius);
  box-shadow: var(--ms-shadow-xs);
  overflow-wrap: anywhere;
}

/* 6. Price: Django clp and HTML labels retain meaning and currency format. */
.ms-ui .ms-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ms-gap-related);
  font-variant-numeric: var(--ms-type-metric-numerals);
  overflow-wrap: anywhere;
}

.ms-ui .ms-price__current {
  font-size: var(--ms-type-h4-size);
  font-weight: var(--ms-type-h4-weight);
  line-height: var(--ms-type-h4-line-height);
  color: var(--ms-color-text-primary);
}

.ms-ui .ms-price__original {
  font-size: var(--ms-type-body-small-size);
  line-height: var(--ms-type-body-small-line-height);
  color: var(--ms-color-text-muted);
  text-decoration-line: line-through;
}

/* 7. Page headers: semantic heading level stays a template decision. */
.ms-ui .ms-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-related);
  margin-block-end: var(--ms-gap-group);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-ui .ms-page-header__title {
  margin: var(--ms-space-0);
  font-size: var(--ms-type-h1-size);
  font-weight: var(--ms-type-h1-weight);
  line-height: var(--ms-type-h1-line-height);
  letter-spacing: var(--ms-type-h1-letter-spacing);
}

.ms-ui .ms-page-header__description {
  margin: var(--ms-space-0);
  color: var(--ms-color-text-secondary);
}

.ms-ui .ms-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-gap-related);
}

/* 8. Empty states: no illustrations, fabricated copy or implied actions. */
.ms-ui .ms-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--ms-gap-related);
  padding-block: var(--ms-gap-group);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-ui .ms-empty-state__title {
  margin: var(--ms-space-0);
  font-size: var(--ms-type-h3-size);
  font-weight: var(--ms-type-h3-weight);
  line-height: var(--ms-type-h3-line-height);
  letter-spacing: var(--ms-type-h3-letter-spacing);
}

.ms-ui .ms-empty-state__description {
  margin: var(--ms-space-0);
  color: var(--ms-color-text-secondary);
}

.ms-ui .ms-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-gap-related);
}