/* ---------- System status (/admin/system, Pages/Admin/SystemStatus.razor, Components/Health) ----------
   A staff tool, read at a glance: one verdict line, then every connection and background task as a hairline row
   (state in words + icon, never colour alone; what it is doing; last sign of life; the one action that fixes it)
   with its details folded under it; beside the list, who hears about an outage, maintenance and the app facts.
   Tokens only; no cards, no glow. Motion: a state chip pops when it changes (the chip is keyed by its level, so only
   a change re-inserts it). The list is not [data-flip]: opening a row's details moves the rows below, and FLIP would
   slide them back from their old place. */

/* ---- Verdict */

.pn-sys-verdict {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-sys-verdict--error {
    border-color: rgba(var(--mud-palette-error-rgb), .45);
    background: rgba(var(--mud-palette-error-rgb), .06);
}

.pn-sys-verdict--warning {
    border-color: rgba(var(--mud-palette-warning-rgb), .45);
    background: rgba(var(--mud-palette-warning-rgb), .06);
}

.pn-sys-verdict-mark {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-success-rgb), .14);
    color: var(--mud-palette-success);
}

.pn-sys-verdict--error .pn-sys-verdict-mark {
    background: rgba(var(--mud-palette-error-rgb), .14);
    color: var(--mud-palette-error);
}

.pn-sys-verdict--warning .pn-sys-verdict-mark {
    background: rgba(var(--mud-palette-warning-rgb), .16);
    color: var(--mud-palette-warning);
}

.pn-sys-verdict-text {
    min-width: 0;
}

.pn-sys-verdict-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.pn-sys-verdict-detail {
    margin: 2px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-sys-verdict-detail a {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pn-line-strong);
    text-underline-offset: 3px;
}

.pn-sys-sep {
    margin: 0 8px;
}

/* ---- Layout */

.pn-sys-layout {
    display: grid;
    gap: 32px;
}

@media (min-width: 1100px) {
    .pn-sys-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        align-items: start;
    }

    .pn-sys-side {
        position: sticky;
        top: calc(var(--pn-appbar-h) + 16px);
    }
}

.pn-sys-main {
    display: grid;
    gap: 32px;
    min-width: 0;
}

/* ---- Groups and rows */

.pn-sys-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pn-line-strong);
}

.pn-sys-group-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.pn-sys-group-count {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-sys-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-sys-row {
    border-bottom: 1px solid var(--pn-line);
    scroll-margin-top: calc(var(--pn-appbar-h) + 24px);
}

.pn-sys-row--error {
    background: rgba(var(--mud-palette-error-rgb), .04);
}

.pn-sys-row-line {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto auto;
    grid-template-areas: "state text signal actions";
    align-items: center;
    gap: 8px 16px;
    min-height: 60px;
    padding: 10px 8px;
}

.pn-sys-state {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--pn-radius-sm);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    animation: pn-pop var(--pn-dur) var(--pn-ease-out);
}

.pn-sys-state .mud-icon-root {
    font-size: 1rem;
}

.pn-sys-row-text {
    grid-area: text;
    display: grid;
    min-width: 0;
}

.pn-sys-row-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.pn-sys-row-icon {
    color: var(--mud-palette-text-secondary);
    font-size: 1.125rem !important;
}

.pn-sys-row-summary {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pn-sys-row--error .pn-sys-row-summary {
    color: var(--mud-palette-text-primary);
}

.pn-sys-row-signal {
    grid-area: signal;
    min-width: 64px;
    font-size: .8125rem;
    text-align: right;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pn-sys-row-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 40px;
}

.pn-sys-toggle .mud-icon-root {
    transition: transform var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-sys-toggle.is-open .mud-icon-root {
    transform: rotate(180deg);
}

.pn-sys-more {
    padding: 0 8px 16px calc(88px + 24px);
}

.pn-sys-more[hidden] {
    display: none;
}

.pn-sys-error-label {
    margin: 0 0 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-error);
}

.pn-sys-error {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--mud-palette-error-rgb), .25);
    border-radius: var(--pn-radius-sm);
    background: rgba(var(--mud-palette-error-rgb), .06);
    font-family: var(--pn-font-mono);
    font-size: .8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- Key/value lists */

.pn-sys-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 24px;
    margin: 0;
}

.pn-sys-kv dt {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.pn-sys-kv dd {
    margin: 0;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.pn-sys-kv--side {
    grid-template-columns: 1fr;
    gap: 0;
}

.pn-sys-kv--side > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pn-line);
}

.pn-sys-kv--side dt {
    flex-shrink: 0;
    font-size: .8125rem;
}

.pn-sys-kv--side dd {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 8px;
    text-align: right;
}

.pn-sys-mono {
    font-family: var(--pn-font-mono);
    font-size: .8125rem !important;
    overflow-wrap: anywhere;
}

.pn-sys-copy {
    margin: -6px -6px -6px 0 !important;
}

.pn-sys-bad {
    color: var(--mud-palette-error);
}

/* ---- Side */

.pn-sys-side {
    display: grid;
    gap: 28px;
    min-width: 0;
}

.pn-sys-side-block {
    min-width: 0;
}

.pn-sys-side-title {
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pn-line-strong);
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.pn-sys-side-lede {
    margin: 8px 0 4px;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.pn-sys-side-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
}

.pn-sys-side-subtitle {
    margin: 20px 0 8px;
    font-size: .875rem;
    font-weight: 600;
}

.pn-sys-side-empty {
    margin: 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-sys-link {
    font-size: .875rem;
    color: var(--pn-brand-text);
    text-decoration: underline;
    text-decoration-color: rgba(var(--pn-brand-rgb), .35);
    text-underline-offset: 3px;
}

.pn-sys-mention {
    padding: 0 6px;
    border-radius: var(--pn-radius-sm);
    background: var(--pn-brand-soft);
    color: var(--pn-brand-text);
    font-weight: 600;
}

.pn-sys-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 8px 12px;
    border-radius: var(--pn-radius-sm);
    font-size: .875rem;
}

.pn-sys-note--warning {
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .4);
    background: rgba(var(--mud-palette-warning-rgb), .08);
}

.pn-sys-note--warning .mud-icon-root {
    color: var(--mud-palette-warning);
}

.pn-sys-incidents {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-sys-incidents li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pn-sys-incidents li > div {
    display: grid;
    min-width: 0;
}

.pn-sys-incident-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor !important;
    transform: translateY(-1px);
}

.pn-sys-incident-title {
    font-size: .875rem;
    font-weight: 600;
}

.pn-sys-incident-when {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-sys-incidents .is-ongoing .pn-sys-incident-when {
    color: var(--mud-palette-error);
}

/* ---- Phones: the state and its age on one line, the text under them, the action last */

@media (max-width: 640px) {
    .pn-sys-verdict {
        align-items: flex-start;
        padding: 14px 16px;
    }

    .pn-sys-verdict-title {
        font-size: 1.25rem;
    }

    .pn-sys-row-line {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "state signal"
            "text text"
            "actions actions";
        gap: 6px 12px;
        padding: 12px 4px;
    }

    .pn-sys-row-actions {
        justify-content: flex-start;
    }

    .pn-sys-row-actions:empty {
        display: none;
    }

    .pn-sys-more {
        padding: 0 4px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-sys-state {
        animation: none;
    }

    .pn-sys-toggle .mud-icon-root {
        transition: none;
    }
}