/*
 * forms.css — Default Forms-System styles
 * ----------------------------------------
 * Minimal, theme-overridable defaults for the markup rendered by
 * `forms.html` and animated by `forms.js`. Every meaningful value is
 * exposed as a CSS custom property; themes can re-skin forms by
 * setting variables on any ancestor scope (e.g. `:root`,
 * `.cms-panel--login`, `.cms-form` itself) without forking this file.
 * Themes may also fully replace it via `themes/<active>/forms/forms.css`.
 *
 * Class-name index (see forms.html for the markup contract):
 *   .cms-form, .cms-form-row[--inline|--submit|--upload],
 *   .cms-form-label[--inline|--group],
 *   .cms-form-input[--textarea], .cms-form-select,
 *   .cms-form-checkbox, .cms-form-radio-group,
 *   .cms-form-submit,
 *   .cms-form-upload, .cms-form-upload-preview,
 *   .cms-form-upload-placeholder, .cms-form-upload-filename,
 *   .cms-form-upload-picker, .cms-form-upload-remove,
 *   .cms-form-error, .cms-form-hint, .cms-form-sr-only
 *
 * State classes toggled by forms.js:
 *   .is-submitting|.is-success|.is-error    on .cms-form
 *   .is-invalid                             on .cms-form-row
 *   .is-dragover|.is-uploading|.has-file    on .cms-form-upload
 *
 * See also: forms.html, forms.js, docs/forms-system.md
 */

:root {
  --cms-form-bg: transparent;
  --cms-form-input-bg: #fff;
  --cms-form-input-color: #111;
  --cms-form-input-border: 1px solid #ddd;
  --cms-form-input-border-radius: 0.25rem;
  --cms-form-input-padding-block: 0.5rem;
  --cms-form-input-padding-inline: 0.75rem;
  --cms-form-input-font-size: 1rem;
  --cms-form-input-line-height: 1.4;
  --cms-form-label-color: currentColor;
  --cms-form-label-font-size: 0.9375rem;
  --cms-form-label-font-weight: 600;
  --cms-form-label-margin: 0.25rem;
  --cms-form-row-gap: 0.25rem;
  --cms-form-row-margin: 1rem;
  --cms-form-focus-color: #0066cc;
  --cms-form-focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.25);
  --cms-form-error-color: #c00;
  --cms-form-hint-color: #666;
  --cms-form-submit-bg: #0066cc;
  --cms-form-submit-color: #fff;
  --cms-form-submit-bg-hover: #004a99;
  --cms-form-submit-padding-block: 0.6rem;
  --cms-form-submit-padding-inline: 1.25rem;
  --cms-form-submit-border-radius: 0.25rem;
  --cms-form-submit-font-size: 1rem;
  --cms-form-submit-font-weight: 600;
  --cms-form-disabled-opacity: 0.6;
  --cms-form-upload-border: 2px dashed #bbb;
  --cms-form-upload-bg: #fafafa;
  --cms-form-upload-bg-hover: #f0f0f0;
  --cms-form-upload-bg-dragover: #e6f0fa;
  --cms-form-upload-min-height: 8rem;
  --cms-form-upload-radius: 0.375rem;
}

/* Form + rows */
.cms-form { background: var(--cms-form-bg); display: block; }
.cms-form-row {
  display: flex; flex-direction: column;
  gap: var(--cms-form-row-gap);
  margin-block-end: var(--cms-form-row-margin);
}
.cms-form-row--inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.cms-form-row--submit { flex-direction: row; justify-content: flex-end; }

/* Labels */
:where(.cms-form-label, .cms-form-label--group) {
  color: var(--cms-form-label-color);
  font-size: var(--cms-form-label-font-size);
  font-weight: var(--cms-form-label-font-weight);
  margin-block-end: var(--cms-form-label-margin);
  display: inline-block;
}
.cms-form-label--inline { font-weight: 400; margin-block-end: 0; cursor: pointer; }

/* Text-like inputs and selects */
:where(.cms-form-input, .cms-form-select) {
  width: 100%;
  background: var(--cms-form-input-bg);
  color: var(--cms-form-input-color);
  border: var(--cms-form-input-border);
  border-radius: var(--cms-form-input-border-radius);
  padding-block: var(--cms-form-input-padding-block);
  padding-inline: var(--cms-form-input-padding-inline);
  font: inherit;
  font-size: var(--cms-form-input-font-size);
  line-height: var(--cms-form-input-line-height);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:where(.cms-form-input, .cms-form-select):focus-visible {
  outline: none;
  border-color: var(--cms-form-focus-color);
  box-shadow: var(--cms-form-focus-ring);
}
.cms-form-input--textarea { min-height: 6rem; resize: vertical; }

/* Checkbox + radio group */
.cms-form-checkbox { flex-shrink: 0; }
.cms-form-radio-group { display: flex; flex-direction: column; gap: 0.375rem; }
.cms-form-radio-group label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 400; cursor: pointer;
}

/* Submit button */
.cms-form-submit {
  background: var(--cms-form-submit-bg);
  color: var(--cms-form-submit-color);
  border: 0;
  border-radius: var(--cms-form-submit-border-radius);
  padding-block: var(--cms-form-submit-padding-block);
  padding-inline: var(--cms-form-submit-padding-inline);
  font-size: var(--cms-form-submit-font-size);
  font-weight: var(--cms-form-submit-font-weight);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cms-form-submit:hover,
.cms-form-submit:focus-visible { background: var(--cms-form-submit-bg-hover); }
.cms-form-submit:focus-visible { outline: none; box-shadow: var(--cms-form-focus-ring); }

/* Upload drop-zone */
.cms-form-upload {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cms-form-upload-min-height);
  padding: 1rem;
  border: var(--cms-form-upload-border);
  border-radius: var(--cms-form-upload-radius);
  background: var(--cms-form-upload-bg);
  text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cms-form-upload:hover { background: var(--cms-form-upload-bg-hover); }
.cms-form-upload.is-dragover {
  background: var(--cms-form-upload-bg-dragover);
  border-color: var(--cms-form-focus-color);
}
.cms-form-upload.is-uploading { animation: cms-form-pulse 1.2s ease-in-out infinite; }
.cms-form-upload-preview {
  max-width: 100%; max-height: 12rem; display: none;
  border-radius: calc(var(--cms-form-upload-radius) - 2px);
}
.cms-form-upload.has-file .cms-form-upload-preview { display: block; }
.cms-form-upload.has-file .cms-form-upload-placeholder { display: none; }
.cms-form-upload-placeholder { color: var(--cms-form-hint-color); font-size: 0.9375rem; }
.cms-form-upload-filename { font-size: 0.9375rem; word-break: break-all; }
.cms-form-upload-picker {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cms-form-upload-remove {
  position: absolute;
  inset-block-start: 0.25rem; inset-inline-end: 0.25rem;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  border: 0; border-radius: 50%;
  width: 1.5rem; height: 1.5rem;
  font-size: 1rem; line-height: 1;
  cursor: pointer; display: none;
}
.cms-form-upload.has-file .cms-form-upload-remove {
  display: inline-flex; align-items: center; justify-content: center;
}

/* Hints + errors */
:where(.cms-form-error, .cms-form-hint) { font-size: 0.875em; line-height: 1.4; margin: 0; }
.cms-form-error { color: var(--cms-form-error-color); }
.cms-form-hint  { color: var(--cms-form-hint-color); }

/* Invalid state */
.cms-form-row.is-invalid :where(.cms-form-input, .cms-form-select) {
  border-color: var(--cms-form-error-color);
}
.cms-form-row.is-invalid :where(.cms-form-input, .cms-form-select):focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
}

/* Form-level submitting state */
.cms-form.is-submitting { cursor: wait; }
.cms-form.is-submitting :where(.cms-form-input, .cms-form-select, .cms-form-checkbox, .cms-form-upload, .cms-form-submit) {
  opacity: var(--cms-form-disabled-opacity);
  pointer-events: none;
}
/* .cms-form.is-success / .is-error — hooks for theme animations */

@keyframes cms-form-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* SR-only helper */
.cms-form-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}