/* Forms */


.app-form__group {
  margin-bottom: var(--space-9);
}

.app-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-8);
}

.app-form__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.app-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.app-form__label-row .app-form__label {
  margin-bottom: 0;
}

.app-form__input,
.app-form__textarea,
.app-form__select {
  display: block;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--text-lg);
  background: var(--color-surface);
  color: var(--color-text);
}

.app-form__textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

.app-form__textarea--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-md);
}

.app-form__input:focus,
.app-form__textarea:focus,
.app-form__select:focus {
  outline: 2px solid var(--color-brand-soft);
  border-color: var(--color-brand);
}

.app-form__input[readonly],
.app-form__textarea[readonly] {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.app-form--readonly .app-form__input,
.app-form--readonly .app-form__textarea {
  background: var(--color-bg);
  border-color: var(--color-border);
  border-style: solid;
  color: var(--color-text);
  cursor: default;
  resize: none;
  opacity: 0.92;
}

/* Inputs don't need interaction; textareas must stay scrollable when readonly. */
.app-form--readonly .app-form__input {
  pointer-events: none;
}

.app-form--readonly .app-form__input:focus,
.app-form--readonly .app-form__textarea:focus {
  outline: none;
  border-color: var(--color-border);
  box-shadow: none;
}

.app-form--readonly .app-form__label {
  color: var(--color-text-muted);
}

.app-form__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.app-form__fieldset {
  margin: 0 0 var(--space-9);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.app-form__legend {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.app-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-md);
  cursor: pointer;
}

.app-form__check input {
  margin-top: 0.var(--space-12);
}

.app-form__actions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.app-form__save-status {
  margin: 0 0 var(--space-8);
  min-height: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.app-form__save-status--saving {
  color: var(--color-text-muted);
}

.app-form__save-status--saved {
  color: var(--color-brand);
}

.app-form__save-status--error {
  color: var(--color-danger-strong);
}

.app-disclosure__body > .app-form__group:last-child {
  margin-bottom: 0;
}

.app-form__error {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-danger-strong);
}

.app-form__error--field {
  margin: var(--space-2_5) 0 0;
}

.app-form__error[hidden] {
  display: none;
}

.field_with_errors {
  display: contents;
}

.app-form__textarea--notes {
  resize: vertical;
  min-height: 4.5rem;
}

.app-form__save-status--bar {
  margin: var(--space-2) 0 0;
  min-height: 1rem;
  font-size: var(--text-xs);
}

.app-form__save-status--inline {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.15rem);
  margin: 0;
  min-height: 0;
  font-size: 0.7rem;
}

.login-page__form .app-form__actions {
  margin-top: var(--space-4);
}

.app-form--compact .app-form__field {
  margin-bottom: var(--space-6);
}