/* Instances, Releases, Settings and Activity. Colours come only from theme variables (app.css). */

.view-settings .detail-sub { max-width: 75ch; }
.settings-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-items: stretch; }
@media (max-width: 60rem) { .settings-panel { grid-template-columns: minmax(0, 1fr); } }
.settings-panel[hidden] { display: none; }
.settings-panel > .settings-wide { grid-column: 1 / -1; }
.view-settings > .status-line { min-height: 0; margin: 0 0 var(--space-2); }
.view-settings > .status-line:empty { display: none; }

/* tabs (Phase 9.36) */
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 var(--space-3); border-bottom: 1px solid var(--border); }
.tab { font: inherit; color: var(--muted); background: none; border: 1px solid transparent; border-top: 3px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 0.45rem 0.9rem; margin-bottom: -1px; cursor: pointer; }
.tabs .tab:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--text); background: var(--hover); border-color: transparent; }
.tabs .tab[aria-selected="true"]:hover:not(:disabled) { background: var(--surface); border-color: var(--border); border-top-color: var(--accent); border-bottom-color: var(--surface); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 700; background: var(--surface); border-color: var(--border); border-top-color: var(--accent); border-bottom: 1px solid var(--surface); }
.tab[hidden] { display: none; }

/* Diagnostics: a button, its one-line hint, one shared result box */
.diagnostics-list { display: grid; gap: 0.4rem; margin: 0.4rem 0 0.6rem; padding: 0; list-style: none; }
.diagnostics-row { display: grid; grid-template-columns: minmax(13rem, 16rem) 1fr; align-items: center; gap: 0.75rem; }
.diagnostics-row .btn { justify-self: start; }
.diagnostics-hint { color: var(--muted); font-size: 0.85rem; cursor: help; }
@media (max-width: 40rem) { .diagnostics-row { grid-template-columns: 1fr; gap: 0.2rem; } }
.view-settings .settings-group { margin: 0; }
.view-releases > .filter-row, .view-activity > .filter-row { margin: 0.5rem 0 0.75rem; }
.filter-row select, .filter-row input:not(.search), .view-settings select, .view-settings select, .view-settings input[type="text"], .view-settings input[type="email"], .view-settings input[type="password"], .cfg-editor input {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.55rem;
}
.filter-row .btn { padding: 0.3rem 0.8rem; }
.app-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.app-link:hover { text-decoration: underline; }
.instances-table .app-scope { font-weight: 400; }
.instances-table td, .instances-table th { white-space: nowrap; }
.instances-table td:last-child { white-space: normal; }
.view-instances .table-scroll, .view-releases .table-scroll { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-1); }
.view-instances .detail-table th, .view-instances .detail-table td, .view-releases .detail-table th, .view-releases .detail-table td { padding: 0.5rem 0.8rem; }
.view-instances .detail-table tbody tr:last-child > *, .view-releases .detail-table tbody tr:last-child > * { border-bottom: 0; }

.timeline .day-row th { padding-top: 0.9rem; font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); }
.timeline .event-kind { white-space: nowrap; font-weight: 600; }
.timeline td, .timeline th { white-space: nowrap; }
.timeline td:last-child { white-space: normal; }
.timeline-host { margin-top: 0.5rem; }

/* Fill layout (Phase 9.37): like Pipeline, the top of the page stays put and the table takes the rest of the height and scrolls
   inside itself. Below the floor the page scrolls instead, so the table is never squeezed to nothing. */
#view:has(> .view-fill) { display: flex; flex-direction: column; }
.view-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view-fill .detail-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.view-releases > .table-frame { flex: 1; display: flex; flex-direction: column; min-height: min(20rem, 50vh); }
.view-releases .table-frame-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view-releases .timeline-host { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0; }
.view-releases .table-scroll { flex: 1; min-height: 0; overflow: auto; }

.settings-group { margin: 0 0 1rem; padding: 0.75rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-1); }
.settings-group legend { padding: 0 0.4rem; font-weight: 700; font-size: 0.95rem; }
.view-settings .settings-sub { position: relative; margin: 1rem 0 0; padding: 1rem 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.settings-sub::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--border); }
.settings-sub legend { padding: 0; font-size: 0.9rem; }
legend + .settings-sub { margin-top: 0.25rem; padding-top: 0.25rem; }
legend + .settings-sub::before { display: none; }
.radio { display: block; margin: 0.2rem 0; }
.field { margin: 0.5rem 0 0.9rem; }
.field > label { display: inline-block; min-width: 12rem; font-weight: 600; }
.field input { width: 8rem; }
.field input[type="checkbox"] { width: auto; }
.field input.wide { width: min(36rem, 100%); }
.field .unit { margin-left: 0.4rem; color: var(--muted); }
.field input[aria-invalid="true"], .cfg-editor input[aria-invalid="true"] { border-color: var(--sev-error); border-width: 2px; }
.field-error { margin: 0.2rem 0 0; color: var(--sev-error); font-weight: 700; }
.field-error::before { content: "✖ "; }
/* Display section: radios in a row, number fields in a grid (3, 2 or 1 columns) */
.radio-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem var(--space-4); }
.field-grid .field { margin: 0.4rem 0 0.6rem; }
.field-grid .field > label { display: block; min-width: 0; margin-bottom: 0.2rem; }
.field-grid .field-span { grid-column: 1 / -1; }
@media (max-width: 60rem) { .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
.fail-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.settings-group .notes-preview { margin: 0.5rem 0; }
.settings-group > .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.config-result { margin: 0.5rem 0; }
.problem-list { font-size: 0.9rem; overflow-wrap: anywhere; }
.config-summary { margin-top: 0.5rem; }
input[type="file"] { display: block; margin: 0.5rem 0; font: inherit; }

.activity-entry { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.activity-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: baseline; }
.activity-head time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.activity-status { font-weight: 700; white-space: nowrap; }
.activity-error .activity-status { color: var(--sev-error); }
.activity-kind { padding: 0 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.72rem; color: var(--muted); }
.activity-details { margin: 0.3rem 0 0; padding: 0.5rem; overflow: auto; font-size: 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }

/* Help and feedback block (About and Settings) */
.feedback-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; margin: 0.4rem 0; }
.feedback-copy { margin: 0.4rem 0 0.2rem; }
.feedback-status { margin-left: 0.5rem; }
.feedback-status:empty { display: none; }

.badge-advanced { display: inline-block; margin-left: 0.2rem; padding: 0 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; }