/* Base Input Styles */
.input {
  appearance: none;
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  margin-top: var(--spacing-2);
}

.input:focus {
  outline: 2px solid var(--color-selected-dark);
  outline-offset: 2px;
}

/* Form Layout & Spacing */
.field-group {
  margin-bottom: var(--spacing-12);  /* 48px between sections */
}

.field-group h3 {
  margin-bottom: var(--spacing-6);  /* 24px below section headers */
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.field {
  margin-bottom: var(--spacing-8);  /* 32px between fields */
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

/* Specific Input Types */
textarea.input {
  min-height: 100px;
  resize: vertical;
}

select.input {
  padding-right: var(--spacing-8);
  background-image: url("/assets/select-arrow.svg");
  background-position: right var(--spacing-3) center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Action Items Spacing - High specificity to override Bootstrap */
.actions {
  margin-top: var(--spacing-8) !important;  /* 32px above actions */
  display: flex !important;
  gap: var(--spacing-4) !important;  /* 16px between actions */
  flex-wrap: wrap !important;
}

/* Ensure Bootstrap buttons in actions have proper spacing - multiple fallbacks */
.actions .btn {
  margin-right: var(--spacing-4) !important; /* 16px right margin as fallback */
}

.actions .btn:last-child {
  margin-right: 0 !important; /* Remove margin from last button */
}

/* Additional specificity to override Bootstrap defaults */
.actions > * + * {
  margin-left: var(--spacing-4) !important; /* 16px left margin between elements */
}

/* Bootstrap-specific overrides for form actions */
.actions.d-flex {
  gap: var(--spacing-4) !important;
}

/* Force spacing even if Bootstrap resets display */
.actions input[type="submit"],
.actions .btn,
.actions a.btn {
  margin-right: var(--spacing-4) !important;
}

.actions input[type="submit"]:last-child,
.actions .btn:last-child,
.actions a.btn:last-child {
  margin-right: 0 !important;
}

/* Error Messages */
.error-messages {
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4);
  border: 1px solid var(--color-negative);
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--color-negative) 10%, transparent);
}

.error-messages h2 {
  margin-bottom: var(--spacing-2);
  color: var(--color-negative);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
}

.error-messages ul {
  margin: 0;
  padding-left: var(--spacing-4);
}

/* Invalid State */
.input:user-invalid {
  border-color: var(--color-negative);
}

.input:user-invalid ~ .invalid-feedback {
  display: flex;
}

.input:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-50);
}

/* Field with Errors */
.field_with_errors .input {
  border-color: var(--color-negative);
}

.invalid-feedback {
  display: none;
  color: var(--color-negative);
  font-size: var(--text-sm);
  margin-top: var(--spacing-1);
}