/* System pages — page-only layout tweaks on top of the component
   contract (docs/DASHBOARD_STYLE.md). Anything that looks like a
   reusable block belongs in components/, not here. */

/* Pre-5.102 page header block. Views that still emit it render the same
   shape as `.page__header`; remove once every System view migrates. */
.system__header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-5); flex-wrap: wrap; gap: var(--sp-3); }
.system__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* A `.table-wrap` that shares a card body with other content (a chart
   above it, a form or note beside it) keeps the edge-to-edge bleed but
   must not overlap its neighbours the way the all-sides negative margin
   would. */
[data-page="system"] .card__body > .table-wrap:not(:first-child),
[data-page="security"] .card__body > .table-wrap:not(:first-child) { margin-top: var(--sp-3); }
[data-page="system"] .card__body > .table-wrap:not(:last-child),
[data-page="security"] .card__body > .table-wrap:not(:last-child) { margin-bottom: var(--sp-3); }

/* Shared list pager (partials/_pager.php) under a paginated list. */
[data-page="system"] .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* Notifications feed (System → Notifications) — a `.list` whose rows
   carry a read state. Unread rows are bold with a leading dot; read
   rows fade. system.js flips the modifiers when a row is marked read. */
.notif-feed__item { position: relative; padding-left: var(--sp-4); transition: opacity var(--t-fast); }
.notif-feed__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-hi);
    opacity: 0;
    transition: opacity var(--t-fast);
}
.notif-feed__item--unread::before { opacity: 1; }
.notif-feed__item--read { opacity: 0.72; }
.notif-feed__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.notif-feed__icon { flex-shrink: 0; }
.notif-feed__item--unread .notif-feed__heading { font-weight: 600; }
.notif-feed__meta { display: flex; align-items: center; gap: var(--sp-2); }

/* Docs (CHANGELOG + TODO row-store viewer). The body is source
   markdown verbatim, so a <pre> block with wrap-at-the-edge keeps
   long lines (URLs, tables) visible without forcing horizontal scroll. */
.docs__body {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 70vh;
    overflow-y: auto;
}

/* Users (System → Security, admin only). The create form is a `.form`
   in the card body; the edit row is built by security.js under the
   user it edits. */
.users__form { margin-bottom: var(--sp-3); }
.users__form-actions { justify-content: flex-end; }
.users__error { margin: 0 0 var(--sp-3); white-space: pre-wrap; }
.users__edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
}
.users__edit > .input, .users__edit > .select { flex: 1 1 180px; width: auto; }
.users__edit > .btn-group { margin-left: auto; }

/* Power — stacked daily bars use the semantic tones; the kv list under
   a stat needs a gap of its own. */
.power__bar--cheap  { fill: var(--color-success); }
.power__bar--normal { fill: var(--color-danger); }
.legend__sw--cheap  { background: var(--color-success); }
.legend__sw--normal { background: var(--color-danger); }
.power__kv, .quantum__kv { margin-top: var(--sp-4); }
.power__chart { max-height: var(--height-line-chart); }