/**
 * @file
 * Form styling for entity edit forms.
 * Targets: Project, Environment, Server node forms.
 */

/* ==========================================================================
   Form Container - Card-like appearance
   ========================================================================== */

.layout-content form.node-form,
.layout-content form.node-environment-form,
.layout-content form.node-environment-edit-form,
.layout-content form.node-project-form,
.layout-content form.node-project-edit-form,
.layout-content form.node-server-form,
.layout-content form.node-server-edit-form {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 800px;
}

/* ==========================================================================
   Form Items - Spacing and layout
   ========================================================================== */

.node-form .form-item,
.node-environment-form .form-item,
.node-environment-edit-form .form-item,
.node-project-form .form-item,
.node-project-edit-form .form-item,
.node-server-form .form-item,
.node-server-edit-form .form-item {
  /*margin-bottom: var(--space-5);*/
}

/* ==========================================================================
   Labels - More prominent styling
   ========================================================================== */

.node-form .form-item label,
.node-environment-form .form-item label,
.node-environment-edit-form .form-item label,
.node-project-form .form-item label,
.node-project-edit-form .form-item label,
.node-server-form .form-item label,
.node-server-edit-form .form-item label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
  display: block;
}

/* Required indicator */
.node-form .form-item label .form-required,
.node-environment-form .form-item label .form-required,
.node-environment-edit-form .form-item label .form-required,
.node-project-form .form-item label .form-required,
.node-project-edit-form .form-item label .form-required,
.node-server-form .form-item label .form-required,
.node-server-edit-form .form-item label .form-required {
  color: var(--color-error-text);
}

/* ==========================================================================
   Text Inputs, Textareas, and Number Fields
   ========================================================================== */

.node-form .form-text,
.node-form .form-textarea,
.node-form .form-email,
.node-form .form-url,
.node-form .form-number,
.node-environment-form .form-text,
.node-environment-form .form-textarea,
.node-environment-edit-form .form-text,
.node-environment-edit-form .form-textarea,
.node-project-form .form-text,
.node-project-form .form-textarea,
.node-project-edit-form .form-text,
.node-project-edit-form .form-textarea,
.node-server-form .form-text,
.node-server-form .form-textarea,
.node-server-edit-form .form-text,
.node-server-edit-form .form-textarea {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.node-form .form-text:focus,
.node-form .form-textarea:focus,
.node-form .form-email:focus,
.node-form .form-url:focus,
.node-form .form-number:focus,
.node-environment-form .form-text:focus,
.node-environment-form .form-textarea:focus,
.node-environment-edit-form .form-text:focus,
.node-environment-edit-form .form-textarea:focus,
.node-project-form .form-text:focus,
.node-project-form .form-textarea:focus,
.node-project-edit-form .form-text:focus,
.node-project-edit-form .form-textarea:focus,
.node-server-form .form-text:focus,
.node-server-form .form-textarea:focus,
.node-server-edit-form .form-text:focus,
.node-server-edit-form .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.1);
  outline: none;
}

/* ==========================================================================
   Select Dropdowns
   ========================================================================== */

.node-form .form-select,
.node-environment-form .form-select,
.node-environment-edit-form .form-select,
.node-project-form .form-select,
.node-project-edit-form .form-select,
.node-server-form .form-select,
.node-server-edit-form .form-select {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.node-form .form-select:focus,
.node-environment-form .form-select:focus,
.node-environment-edit-form .form-select:focus,
.node-project-form .form-select:focus,
.node-project-edit-form .form-select:focus,
.node-server-form .form-select:focus,
.node-server-edit-form .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.1);
  outline: none;
}

/* ==========================================================================
   Field Descriptions
   ========================================================================== */

.node-form .form-item .description,
.node-environment-form .form-item .description,
.node-environment-edit-form .form-item .description,
.node-project-form .form-item .description,
.node-project-edit-form .form-item .description,
.node-server-form .form-item .description,
.node-server-edit-form .form-item .description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-2);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   Form Actions (Button Container)
   ========================================================================== */

.node-form .form-actions,
.node-environment-form .form-actions,
.node-environment-edit-form .form-actions,
.node-project-form .form-actions,
.node-project-edit-form .form-actions,
.node-server-form .form-actions,
.node-server-edit-form .form-actions {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

/* Footer region spacing fix */
.node-form .layout-region--footer .layout-region__content,
.node-environment-form .layout-region--footer .layout-region__content,
.node-environment-edit-form .layout-region--footer .layout-region__content,
.node-project-form .layout-region--footer .layout-region__content,
.node-project-edit-form .layout-region--footer .layout-region__content,
.node-server-form .layout-region--footer .layout-region__content,
.node-server-edit-form .layout-region--footer .layout-region__content {
  margin-top: 0;
}

/* ==========================================================================
   Details/Fieldsets (Collapsed Sections)
   ========================================================================== */

.node-form details.claro-details,
.node-environment-form details.claro-details,
.node-environment-edit-form details.claro-details,
.node-project-form details.claro-details,
.node-project-edit-form details.claro-details,
.node-server-form details.claro-details,
.node-server-edit-form details.claro-details {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.node-form details.claro-details > summary,
.node-environment-form details.claro-details > summary,
.node-environment-edit-form details.claro-details > summary,
.node-project-form details.claro-details > summary,
.node-project-edit-form details.claro-details > summary,
.node-server-form details.claro-details > summary,
.node-server-edit-form details.claro-details > summary {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

input::placeholder {
  color: var(--color-gray-200);
}

/* For better browser support, include vendor prefixes */
input::-webkit-input-placeholder {
  color: var(--color-gray-200);
}
input::-moz-placeholder {
  color: var(--color-gray-200);
}
input:-ms-input-placeholder {
  color: var(--color-gray-200);
}