/* ==========================================================================
   Form Components
   ========================================================================== */

.form-field {
  margin-bottom: var(--space-lg);
}

.form-field label,
.form-field .form-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--warm-grey-dark);
}

.form-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.form-field-header label {
  margin-bottom: 0;
}

.field-hint {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--warm-grey-light);
}

.text-input,
.color-input {
  width: 100%;
  max-width: 30rem;
  padding: var(--space-sm);
  border: 2px solid var(--parchment-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--parchment-base);
  color: var(--warm-grey-dark);
}

.text-input:focus,
.color-input:focus {
  outline: none;
  border-color: var(--warm-grey);
}

.color-input {
  max-width: 10rem;
  height: 3rem;
  padding: var(--space-xs);
}

/* Color scheme picker */
.color-scheme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: 40rem;
}

.color-scheme-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.color-scheme-option {
  cursor: pointer;
  margin: 0;
  display: block;
}

.color-scheme-preview {
  height: 5rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--parchment-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.color-scheme-preview:hover {
  border-color: var(--warm-grey);
  box-shadow: var(--shadow-sm);
}

.color-scheme-radio:checked + .color-scheme-option .color-scheme-preview {
  border-color: var(--warm-grey-dark);
  border-width: 3px;
  box-shadow: var(--shadow-md);
}

.color-scheme-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.02em;
}

.form-actions {
  margin-top: var(--space-xl);
  display: flex;
  gap: var(--space-md);
}

/* Inline field errors */
.field-error {
  color: #c33;
  font-size: 0.9rem;
  margin-top: var(--space-xs);
  min-height: 1.5rem;
}

.field_with_errors {
  display: contents;
}

.field_with_errors .text-input,
.field_with_errors .color-input,
.field_with_errors trix-editor {
  border-color: #c33;
  border-width: 2px;
}

.field_with_errors .text-input:focus,
.field_with_errors .color-input:focus,
.field_with_errors trix-editor:focus {
  border-color: #c33;
  outline: none;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) /* tablet */ {
  .text-input,
  .color-input {
    max-width: 100%;  /* Full width on mobile */
  }

  /* Color scheme picker: 2 columns on mobile instead of 3 */
  .color-scheme-picker {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  .color-scheme-preview {
    height: 4rem;  /* Slightly smaller */
  }

  .form-actions {
    flex-direction: column;  /* Stack buttons vertically */
    gap: var(--space-sm);
  }

  .form-actions .button-primary,
  .form-actions .button-secondary {
    width: 100%;  /* Full width buttons */
    text-align: center;
  }

  /* Buttons - Ensure adequate touch targets (44x44px minimum) */
  .button-primary,
  .button-secondary {
    padding: var(--space-md) var(--space-md);  /* Larger touch target */
    min-height: 44px;  /* iOS minimum touch target */
  }
}

/* ==========================================================================
   Icon Selector Form Component
   ========================================================================== */

.icon-selector-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.icon-selector-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: var(--space-sm);
  background-color: var(--parchment-base);
  border: 2px solid var(--parchment-400);
  border-radius: var(--radius-md);
}

.icon-selector-preview-container:empty {
  border-style: dashed;
  border-color: var(--parchment-300);
}

.icon-selector-preview-container .icon-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
}