/* ==========================================================================
   Metadata Form Styles
   Compact, dual-column layout for administrative/structural editing
   ========================================================================== */

/* Base metadata form container - sans-serif throughout */
.metadata-form {
  font-family: var(--font-ui);
}

.metadata-form h2 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  margin: 0 0 var(--space-sm) 0;
  font-weight: 600;
  color: var(--warm-grey-dark);
}

/* Tighter spacing for form fields */
.metadata-form .form-field {
  margin-bottom: var(--space-sm);  /* 1rem instead of 2rem */
}

.metadata-form label,
.metadata-form .form-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  margin-bottom: var(--space-2xs);  /* Tighter than default --space-xs */
}

.metadata-form .text-input,
.metadata-form select.text-input {
  font-family: var(--font-ui);
  padding: 0.75rem;  /* Slightly tighter than default 1rem */
}

.metadata-form .field-hint {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  margin: var(--space-2xs) 0 0;
}

/* Dual-column grid layout */
.metadata-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);  /* row-gap: 1rem, column-gap: 2rem */
}

/* Full-width items within the grid */
.metadata-form-grid-full {
  grid-column: 1 / -1;
}

/* Icon selector - reduce size */
.metadata-form .icon-selector-preview-container {
  width: 48px;
  height: 48px;
  padding: var(--space-xs);
}

.metadata-form .icon-selector-preview-container .icon-preview {
  width: 32px;
  height: 32px;
}

/* Field warning - full width in grid */
.metadata-form .field-warning {
  grid-column: 1 / -1;
  margin-bottom: var(--space-sm);
}

/* Actions section */
.metadata-form .inline-edit-actions {
  margin-top: var(--space-lg);  /* 2rem instead of 3rem */
  gap: var(--space-sm);
}

/* Delete section - tighter spacing */
.metadata-form .metadata-delete-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--parchment-dark);
  text-align: center;
}

/* Color scheme picker - keep existing grid but ensure full width */
.metadata-form .color-scheme-picker {
  grid-column: 1 / -1;
}

/* Rich text editor - full width in grid */
.metadata-form .form-field:has(lexxy-editor) {
  grid-column: 1 / -1;
}

/* ==========================================================================
   System-Specific Config Sections
   ========================================================================== */

.system-config-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--parchment-dark);
}

.system-config-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.system-config-header h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--warm-grey-dark);
}

.system-config-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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

@media (max-width: 768px) {
  /* Single column on tablet and below */
  .metadata-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .metadata-form-grid-full {
    grid-column: 1;
  }

  .metadata-form .field-warning,
  .metadata-form .color-scheme-picker,
  .metadata-form .form-field:has(lexxy-editor) {
    grid-column: 1;
  }
}