/* Forms, grids, and documentation/help patterns */

/* Toggleable documentation blocks */
.documentation { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; margin-top: 0.5rem; display: none; }
.documentation.show { display: block; }
.info-icon { color: #6c757d; cursor: pointer; margin-left: 5px; }
.info-icon:hover { color: #0d6efd; }

/* Field types collapsible container used in test setup */
#fieldTypesContainer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
#fieldTypesContainer.show { max-height: 500px; transition: max-height 0.5s ease-in; }

/* Job results summary + settings grid */
.summary-box { background-color: #e9ecef; padding: 15px; border-radius: 5px; }
.summary-table { width: 100%; margin-bottom: 20px; }
.summary-table th { background-color: #007bff; color: #fff; }
.summary-table td { padding: 10px; text-align: left; }
.summary-table tr:nth-child(odd) { background-color: #f8f9fa; }
.summary-table tr:nth-child(even) { background-color: #e9ecef; }

/* Dark mode variants for summary + settings */
html.dark-mode .summary-box,
body.dark-mode .summary-box {
  background-color: var(--app-card-bg);
  color: var(--app-fg);
  border: 1px solid var(--app-card-border);
}
html.dark-mode .summary-table th,
body.dark-mode .summary-table th {
  background-color: #3a3a3a;
  color: #e4e4e7;
}
html.dark-mode .summary-table tr:nth-child(odd),
body.dark-mode .summary-table tr:nth-child(odd) { background-color: rgba(255,255,255,0.03); }
html.dark-mode .summary-table tr:nth-child(even),
body.dark-mode .summary-table tr:nth-child(even) { background-color: rgba(255,255,255,0.06); }

.field-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.field-type-cell { padding: 4px 8px; text-align: center; border-radius: 4px; font-size: 0.9em; }
.field-type-active { background-color: #90EE90; }
.field-type-inactive { background-color: #E0E0E0; }

/* Dark mode tweaks for field type chips inside Job Settings */
html.dark-mode .field-type-active,
body.dark-mode .field-type-active {
  background-color: #166534; /* dark green */
  color: #e4e4e7;
}
html.dark-mode .field-type-inactive,
body.dark-mode .field-type-inactive {
  background-color: #3a3a3a;
  color: #e4e4e7;
}

/* Pipeline config table overrides */
#pipeline-config table { width: 100%; font-size: 0.9em; }
#pipeline-config th { background-color: #6c757d; color: #fff; }
#pipeline-config td:first-child { font-weight: bold; }