/* Self-updater admin page (M-298). Presentation only — every string is in Blade, every behaviour in
   system_update_controller.js (coding-standards §4). Token-driven so it re-skins with the theme and reads
   on any surface (§12): all colour/spacing come from the design tokens, nothing hard-coded. Scoped under
   .platform-system-update so nothing here leaks to another page. */

.platform-system-update__notice,
.platform-system-update__uptodate {
    margin: 0;
    color: var(--platform-color-text-muted);
}

.platform-system-update__uptodate {
    font-weight: 600;
    color: var(--platform-color-ok);
}

/* State panel — a two-column definition list that stacks on narrow screens (mobile-first). */
.platform-system-update__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--platform-space-xs) var(--platform-space-lg);
    margin: 0;
}

.platform-system-update__meta dt {
    font-weight: 600;
    color: var(--platform-color-text-muted);
}

.platform-system-update__meta dd {
    margin: 0;
    word-break: break-word;
}

.platform-system-update__remote {
    font-family: var(--platform-font-mono, monospace);
    font-size: 0.9em;
}

@media (max-width: 40rem) {
    .platform-system-update__meta {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .platform-system-update__meta dd {
        margin-bottom: var(--platform-space-sm);
    }
}

/* Fetch-status flag chip. */
.platform-system-update__flag {
    display: inline-block;
    padding: 0.1rem var(--platform-space-sm);
    border-radius: var(--platform-radius-pill);
    font-size: 0.85em;
    font-weight: 600;
}

.platform-system-update__flag--ok {
    color: var(--platform-color-ok);
    background: var(--platform-color-accent-surface);
}

.platform-system-update__flag--warn,
.platform-system-update__flag--error {
    color: var(--platform-color-error-text);
    background: var(--platform-color-error-surface);
}

/* Scoped alert boxes (page-local — not a shared component). */
.platform-system-update__alert {
    margin-top: var(--platform-space-md);
    padding: var(--platform-space-md);
    border-radius: var(--platform-radius-md);
    border: 1px solid transparent;
}

.platform-system-update__alert--danger {
    color: var(--platform-color-error-text);
    background: var(--platform-color-error-surface);
    border-color: var(--platform-color-error);
}

.platform-system-update__alert--info {
    background: var(--platform-color-surface-muted);
    border-color: var(--platform-color-border);
}

.platform-system-update__warn-title {
    margin: 0 0 var(--platform-space-xs);
    font-weight: 700;
}

.platform-system-update__dirty,
.platform-system-update__commits {
    margin: var(--platform-space-xs) 0 0;
    padding-left: var(--platform-space-lg);
}

.platform-system-update__commits li {
    font-family: var(--platform-font-mono, monospace);
    font-size: 0.9em;
    margin-bottom: var(--platform-space-xs);
}

.platform-system-update__subhead {
    margin: var(--platform-space-md) 0 var(--platform-space-sm);
    font-size: 1rem;
    font-weight: 700;
}

/* Heading above the run-history grid (M-299), stacked under the state/diff panel. */
.platform-system-update__runs-title {
    margin: var(--platform-space-lg, 1.5rem) 0 var(--platform-space-sm, 0.5rem);
    font-size: var(--platform-font-size-md, 1rem);
    font-weight: 600;
}

/* Preformatted git output (diff stat, fetch error, step output) — wraps, never a horizontal scrollbar. */
.platform-system-update__output,
.platform-update-step__output {
    margin: 0;
    padding: var(--platform-space-sm);
    background: var(--platform-color-surface-muted);
    border-radius: var(--platform-radius-sm);
    font-family: var(--platform-font-mono, monospace);
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.platform-system-update__trigger {
    margin-top: var(--platform-space-lg);
}

/* Not-configured checklist. */
.platform-system-update__checklist {
    margin: var(--platform-space-md) 0 0;
    padding-left: var(--platform-space-lg);
}

.platform-system-update__checklist li.is-ok {
    color: var(--platform-color-ok);
}

.platform-system-update__checklist li.is-missing {
    color: var(--platform-color-error-text);
    font-weight: 600;
}

/* Live progress panel. */
.platform-system-update__status {
    margin: 0;
    font-weight: 600;
}

.platform-system-update__progress[data-state="running"] .platform-system-update__status {
    color: var(--platform-color-accent-strong);
}

.platform-system-update__progress[data-state="success"] .platform-system-update__status {
    color: var(--platform-color-ok);
}

.platform-system-update__progress[data-state="failed"] .platform-system-update__status {
    color: var(--platform-color-error-text);
}

.platform-system-update__steps {
    list-style: none;
    margin: var(--platform-space-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-md);
}

.platform-update-step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--platform-space-sm);
    margin-bottom: var(--platform-space-xs);
}

.platform-update-step__name {
    font-weight: 600;
}

.platform-update-step__badge {
    flex: none;
    padding: 0.1rem var(--platform-space-sm);
    border-radius: var(--platform-radius-pill);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.platform-update-step__badge--done {
    color: var(--platform-color-ok);
    background: var(--platform-color-accent-surface);
}

.platform-update-step__badge--skipped {
    color: var(--platform-color-text-muted);
    background: var(--platform-color-surface-muted);
}

.platform-update-step__badge--error {
    color: var(--platform-color-error-text);
    background: var(--platform-color-error-surface);
}