/**
 * Common, reusable jQuery UI dialog styling.
 *
 * Opt in by adding `ks-form-dialog` to a dialog's `dialogClass` option. Styles
 * the dialog chrome and native Drupal form fields rendered inside the dialog.
 * Unlayered on purpose: Drupal core's jQuery UI dialog CSS is unlayered, so
 * these overrides must be too (layered rules would lose the cascade).
 */

/*
 * Framed variant (opt in with `ks-form-dialog--framed`). Echoes the cookie
 * consent modal: the white dialog content is hugged by a thin then a thicker
 * line, with a gray band outside the lines. Drawn as stacked box-shadow rings
 * so the content area stays white and untouched.
 */
.ks-form-dialog--framed.ui-dialog {
  border-radius: var(--ks-radius-lg);
  box-shadow:
    0 0 0 var(--ks-border-width) var(--ks-color-border-subtle),
    0 0 0 calc(var(--ks-border-width) + var(--ks-border-width-strong)) var(--ks-color-border-default),
    0 0 0 calc(var(--ks-border-width) + var(--ks-border-width-strong) + var(--ks-space-2)) var(--ks-color-surface-section),
    var(--ks-shadow-lg);
}

/*
 * Dialog chrome. The titlebar is a flex row so the title takes the available
 * width and the close button sits at the end, vertically centered. jQuery UI's
 * `ui-widget-header` + `ui-corner-all` give the titlebar a full border + rounded
 * corners (an unwanted box around the title), so reset them to a single bottom
 * rule.
 */
.ks-form-dialog .ui-dialog-titlebar {
  align-items: center;
  background: var(--ks-color-surface-page);
  border: 0;
  border-bottom: var(--ks-border-width) solid var(--ks-color-border-subtle);
  border-radius: 0;
  display: flex;
  gap: var(--ks-space-3);
  justify-content: space-between;
  padding: var(--ks-space-2) var(--ks-space-5);
}

.ks-form-dialog .ui-dialog-title {
  color: var(--ks-color-text-strong);
  flex: 1 1 auto;
  font-size: 1.1rem;
  font-weight: var(--ks-font-weight-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}

/*
 * Center the close glyph. The jQuery UI button holds a sprite span, a spacer
 * span and a literal "Close" text node; `font-size: 0` collapses the text and
 * spacer (the sprite is a fixed-px background, unaffected) so only the centered
 * X shows. Also neutralize jQuery UI's absolute positioning of the inner sprite.
 */
.ks-form-dialog .ui-dialog-titlebar-close {
  align-items: center;
  background: var(--ks-color-surface-section);
  border: 0;
  border-radius: var(--ks-radius-md);
  color: var(--ks-color-text-muted);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 0;
  height: 2rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  transition: background-color var(--ks-duration-base) var(--ks-ease-standard);
  width: 2rem;
}

.ks-form-dialog .ui-dialog-titlebar-close .ui-icon {
  margin: 0;
  position: static;
}

.ks-form-dialog .ui-dialog-titlebar-close:hover {
  background: var(--ks-color-border-subtle);
}

.ks-form-dialog .ui-dialog-content {
  padding: calc(var(--ks-space-6) / 4) var(--ks-space-6);
}

/* In-dialog form layout */
.ks-form-dialog .ui-dialog-content form {
  display: grid;
  gap: var(--ks-space-5);
}

.ks-form-dialog .ui-dialog-content .form-item {
  margin: 0;
}

/* Address fields the format groups onto one line (e.g. first + last name). */
.ks-form-dialog .ui-dialog-content .address-container-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-4);
}

.ks-form-dialog .ui-dialog-content .address-container-inline > .form-item {
  flex: 1 1 0;
  min-width: 0;
}

.ks-form-dialog .ui-dialog-content label {
  color: var(--ks-color-text-default);
  display: block;
  font-weight: var(--ks-font-weight-strong);
  margin-top: var(--ks-space-4);
  margin-bottom: var(--ks-space-2);
}

/*
 * The second street-address line has no label, so the shared label top margin
 * cannot separate it from the first line. Space it from line 1 explicitly.
 */
.ks-form-dialog .ui-dialog-content input.address-line2 {
  margin-top: var(--ks-space-4);
}

/* Text/select/textarea fields (native Drupal classes + element fallbacks) */
.ks-form-dialog .ui-dialog-content .form-text,
.ks-form-dialog .ui-dialog-content .form-tel,
.ks-form-dialog .ui-dialog-content .form-email,
.ks-form-dialog .ui-dialog-content .form-number,
.ks-form-dialog .ui-dialog-content .form-select,
.ks-form-dialog .ui-dialog-content .form-textarea,
.ks-form-dialog .ui-dialog-content select,
.ks-form-dialog .ui-dialog-content textarea,
.ks-form-dialog .ui-dialog-content input[type="text"],
.ks-form-dialog .ui-dialog-content input[type="email"],
.ks-form-dialog .ui-dialog-content input[type="tel"],
.ks-form-dialog .ui-dialog-content input[type="number"] {
  background-color: var(--ks-color-surface-page);
  border: var(--ks-border-width) solid var(--ks-color-border-default);
  border-radius: var(--ks-radius-md);
  color: var(--ks-color-text-default);
  min-height: 2.75rem;
  padding: var(--ks-space-3) var(--ks-space-4);
  transition:
    border-color var(--ks-duration-base) var(--ks-ease-standard),
    box-shadow var(--ks-duration-base) var(--ks-ease-standard);
  width: 100%;
}

.ks-form-dialog .ui-dialog-content .form-text:focus-visible,
.ks-form-dialog .ui-dialog-content .form-tel:focus-visible,
.ks-form-dialog .ui-dialog-content .form-email:focus-visible,
.ks-form-dialog .ui-dialog-content .form-number:focus-visible,
.ks-form-dialog .ui-dialog-content .form-select:focus-visible,
.ks-form-dialog .ui-dialog-content .form-textarea:focus-visible,
.ks-form-dialog .ui-dialog-content select:focus-visible,
.ks-form-dialog .ui-dialog-content textarea:focus-visible,
.ks-form-dialog .ui-dialog-content input[type="text"]:focus-visible,
.ks-form-dialog .ui-dialog-content input[type="email"]:focus-visible,
.ks-form-dialog .ui-dialog-content input[type="tel"]:focus-visible,
.ks-form-dialog .ui-dialog-content input[type="number"]:focus-visible {
  border-color: var(--ks-color-primary-500);
  outline: var(--ks-border-width-strong) solid color-mix(in srgb, var(--ks-color-primary-400) 35%, transparent);
  outline-offset: 0.125rem;
}

.ks-form-dialog .ui-dialog-content .form-textarea,
.ks-form-dialog .ui-dialog-content textarea {
  min-height: 6.25rem;
  resize: vertical;
}

/* Help text and errors */
.ks-form-dialog .ui-dialog-content .description {
  color: var(--ks-color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 0.35rem;
}

.ks-form-dialog .ui-dialog-content .form-item--error-message {
  color: var(--ks-color-tertiary-800);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.ks-form-dialog .ui-dialog-content .error {
  border-color: var(--ks-color-tertiary-600);
}

/* Form actions */
.ks-form-dialog .ui-dialog-content .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-space-3);
  justify-content: flex-end;
  margin-top: var(--ks-space-2);
  padding-top: var(--ks-space-5);
}

.ks-form-dialog .ui-dialog-content .button,
.ks-form-dialog .ui-dialog-content .form-submit,
.ks-form-dialog .ui-dialog-content input[type="submit"] {
  border: 0;
  border-radius: var(--ks-radius-lg);
  cursor: pointer;
  font-weight: var(--ks-font-weight-strong);
  min-height: 2.5rem;
  padding: var(--ks-space-3) var(--ks-space-5);
  transition: background-color var(--ks-duration-base) var(--ks-ease-standard);
}

.ks-form-dialog .ui-dialog-content .button--primary,
.ks-form-dialog .ui-dialog-content .form-submit,
.ks-form-dialog .ui-dialog-content input[type="submit"] {
  background-color: var(--ks-color-primary-600);
  color: var(--ks-color-text-inverse);
}

.ks-form-dialog .ui-dialog-content .button--primary:hover,
.ks-form-dialog .ui-dialog-content .form-submit:hover,
.ks-form-dialog .ui-dialog-content input[type="submit"]:hover {
  background-color: var(--ks-color-primary-700);
}

.ks-form-dialog .ui-dialog-content .button:not(.button--primary):not(.form-submit) {
  background-color: var(--ks-color-surface-section);
  color: var(--ks-color-text-default);
}

.ks-form-dialog .ui-dialog-content .button:not(.button--primary):not(.form-submit):hover {
  background-color: var(--ks-color-border-subtle);
}

/*
 * Buttons moved into jQuery UI's button pane (e.g. the confirm form's Delete /
 * Cancel) sit outside `.ui-dialog-content`, so space them here.
 */
.ks-form-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  display: flex;
  gap: var(--ks-space-3);
  justify-content: flex-end;
}