/* Servers (Pages/Servers.razor, ServerView.razor, ServerAlerts.razor, ServerSettings.razor; Shared/ServerChart, ChangeList, ServerNav). */
/* .sv-diagnostics: the server monitoring panel on Agent Health uses the same look. */
.sv-screen, .sv-diagnostics {
    --sv-ink: #0f172a;
    --sv-text: #1e293b;
    --sv-muted: #64748b;
    --sv-line: #e2e8f0;
    --sv-card: #ffffff;
    --sv-blue: #2563eb;
    --sv-blue-deep: #1d4ed8;
    --sv-blue-soft: #eff6ff;
    --sv-green: #047857;
    --sv-green-soft: #ecfdf5;
    --sv-amber: #b45309;
    --sv-amber-soft: #fffbeb;
    --sv-red: #b91c1c;
    --sv-red-soft: #fef2f2;
    --sv-radius: 1rem;
    --sv-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    display: grid;
    gap: 1.1rem;
    max-width: 84rem;
    color: var(--sv-text);
}
.sv-kicker { margin: 0; color: var(--sv-blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-intro, .sv-state, .sv-panel, .sv-table-wrap, .sv-chart { border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-card); box-shadow: var(--sv-shadow); }
.sv-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; }
.sv-intro h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .35rem 0 .4rem; color: var(--sv-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.sv-intro p { max-width: 52rem; margin: 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.sv-totals { display: flex; gap: .6rem; margin: 0; }
.sv-totals div { min-width: 6.5rem; padding: .6rem .85rem; border: 1px solid var(--sv-line); border-radius: .8rem; background: #f8fafc; }
.sv-totals dt { color: var(--sv-muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sv-totals dd { margin: .15rem 0 0; color: var(--sv-ink); font-size: 1.25rem; font-weight: 800; }
.sv-totals .is-alert { border-color: #fecaca; background: var(--sv-red-soft); }
.sv-totals .is-alert dd { color: var(--sv-red); }
.sv-state { display: grid; gap: .35rem; padding: 1.4rem 1.5rem; color: #475569; }
.sv-state strong { color: var(--sv-ink); }
.sv-back { justify-self: start; color: var(--sv-blue-deep); font-size: .88rem; font-weight: 600; text-decoration: none; }
.sv-back:hover { text-decoration: underline; }

.sv-table-wrap { overflow-x: auto; }
.sv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sv-table th { padding: .7rem .9rem; border-bottom: 1px solid var(--sv-line); background: #f8fafc; color: var(--sv-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.sv-table td { padding: .65rem .9rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.sv-table tr:last-child td { border-bottom: 0; }
.sv-table tr.is-problem td { background: var(--sv-amber-soft); }
.sv-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-table td.is-warn { color: var(--sv-amber); font-weight: 700; }
.sv-table td.is-alert { color: var(--sv-red); font-weight: 700; }
.sv-sub { display: block; margin-top: .1rem; color: var(--sv-muted); font-size: .78rem; }
.sv-wrap { overflow-wrap: anywhere; }
.sv-server-link { color: var(--sv-ink); font-weight: 700; text-decoration: none; }
.sv-server-link:hover { color: var(--sv-blue-deep); text-decoration: underline; }
.sv-footnote { margin: 0; color: var(--sv-muted); font-size: .8rem; }

.sv-status, .sv-state-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sv-status::before { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; content: ""; }
.sv-status.is-online, .sv-state-pill.is-on { background: var(--sv-green-soft); color: var(--sv-green); }
.sv-status.is-offline { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-status.is-unlicensed, .sv-status.is-waiting, .sv-state-pill.is-off { background: #f1f5f9; color: #475569; }

.sv-tabs, .sv-range { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: .8rem; background: #f1f5f9; justify-self: start; }
.sv-tabs button, .sv-range button { padding: .45rem .85rem; border: 0; border-radius: .6rem; background: transparent; color: #334155; font-size: .86rem; font-weight: 600; cursor: pointer; }
.sv-tabs button[aria-pressed="true"], .sv-range button[aria-pressed="true"] { background: var(--sv-card); color: var(--sv-blue-deep); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.sv-tabs button:focus-visible, .sv-range button:focus-visible, .sv-link:focus-visible { outline: 2px solid var(--sv-blue); outline-offset: 1px; }

.sv-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.sv-chart { margin: 0; padding: 1rem 1.1rem .6rem; }
.sv-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .4rem; }
.sv-chart-title { color: var(--sv-ink); font-size: .95rem; font-weight: 800; }
.sv-chart-figures { display: flex; gap: .9rem; color: var(--sv-muted); font-size: .8rem; }
.sv-chart-figures b { color: var(--sv-ink); }
.sv-chart-second b { color: #7c3aed; }
.sv-chart svg { display: block; width: 100%; height: 11rem; overflow: visible; }
.sv-grid { stroke: #eef2f7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sv-axis { fill: #94a3b8; font-size: 10px; }
.sv-area { fill: rgba(37, 99, 235, .1); stroke: none; }
.sv-line { fill: none; stroke: var(--sv-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sv-peak { fill: none; stroke: rgba(37, 99, 235, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sv-line-second { fill: none; stroke: #7c3aed; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

.sv-panel { display: grid; gap: .75rem; padding: 1.1rem 1.25rem; }
.sv-panel h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--sv-ink); font-size: 1rem; font-weight: 800; }
.sv-empty { margin: 0; color: var(--sv-muted); font-size: .88rem; }
.sv-volume { display: grid; grid-template-columns: minmax(6rem, 14rem) minmax(0, 1fr) auto; align-items: center; gap: .9rem; font-size: .88rem; }
.sv-volume-name { font-weight: 700; color: var(--sv-ink); }
.sv-volume-figures { color: var(--sv-muted); white-space: nowrap; }
.sv-bar { height: .6rem; overflow: hidden; border-radius: 999px; background: #eef2f7; }
.sv-bar span { display: block; height: 100%; border-radius: 999px; background: var(--sv-blue); }
.sv-bar span.is-warn { background: #f59e0b; }
.sv-bar span.is-alert { background: #dc2626; }
.sv-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--sv-blue-deep); font-size: .86rem; font-weight: 600; cursor: pointer; }
.sv-link:hover { text-decoration: underline; }

.sv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.sv-filters .form-control { max-width: 20rem; }
.sv-check { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: #334155; font-size: .86rem; cursor: pointer; }
.sv-check input { width: 1rem; height: 1rem; accent-color: var(--sv-blue); }

.sv-adapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.sv-adapter dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem; margin: 0; font-size: .86rem; }
.sv-adapter dt { color: var(--sv-muted); }
.sv-adapter dd { margin: 0; overflow-wrap: anywhere; }

.sv-changes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sv-changes li { display: grid; grid-template-columns: 7.5rem 9.5rem minmax(0, 1fr); align-items: start; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid #f1f5f9; font-size: .86rem; }
.sv-changes li:last-child { border-bottom: 0; }
.sv-changes time { color: var(--sv-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-change-kind { justify-self: start; padding: .15rem .55rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sv-change-kind.is-added { background: var(--sv-blue-soft); color: var(--sv-blue-deep); }
.sv-change-kind.is-removed { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-change-text { min-width: 0; overflow-wrap: anywhere; }

.sv-totals .is-warn { border-color: #fde68a; background: var(--sv-amber-soft); }
.sv-totals .is-warn dd { color: var(--sv-amber); }

/* Alerts and settings */
.sv-nav { display: flex; flex-wrap: wrap; gap: .25rem; justify-self: start; padding: .25rem; border-radius: .8rem; background: #f1f5f9; }
.sv-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: .6rem; color: #334155; font-size: .86rem; font-weight: 600; text-decoration: none; }
.sv-nav a:hover { color: var(--sv-blue-deep); }
.sv-nav a[aria-current="page"] { background: var(--sv-card); color: var(--sv-blue-deep); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.sv-nav a:focus-visible { outline: 2px solid var(--sv-blue); outline-offset: 1px; }
.sv-nav-count { min-width: 1.3rem; padding: 0 .4rem; border-radius: 999px; background: var(--sv-red); color: #fff; font-size: .72rem; line-height: 1.3rem; text-align: center; }

.sv-severity { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.sv-severity.is-critical { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-severity.is-warning { background: var(--sv-amber-soft); color: var(--sv-amber); }
a.sv-severity:hover { text-decoration: underline; }
.sv-healthy { color: var(--sv-green); font-size: .82rem; font-weight: 600; white-space: nowrap; }

.sv-alerts { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sv-alert { display: grid; gap: .45rem; padding: .9rem 1rem; border: 1px solid var(--sv-line); border-left: 4px solid #f59e0b; border-radius: .8rem; background: #fff; box-shadow: var(--sv-shadow); }
.sv-alert-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.sv-alert-head .sv-alert-title { margin: 0; font-size: 1rem; }
.sv-alert-where { color: var(--sv-muted); font-size: .86rem; }
.sv-alert-advice { color: #334155; font-size: .86rem; }
.sv-alert .sv-alert-actions { justify-content: flex-start; margin-top: .2rem; }
.sv-confirm { display: grid; gap: .5rem; margin-top: .2rem; padding: .8rem .9rem; border: 1px solid var(--sv-line); border-radius: .7rem; background: #f8fafc; font-size: .88rem; }
.sv-confirm p { margin: 0; }
.sv-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sv-guide li { display: grid; gap: .2rem; padding: .7rem .9rem; border: 1px solid var(--sv-line); border-radius: .8rem; background: #fff; font-size: .84rem; }
.sv-guide b { color: var(--sv-ink); }
.sv-guide span { color: #475569; }
.sv-tab-count { display: inline-block; min-width: 1.3rem; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .72rem; line-height: 1.3rem; text-align: center; }
.sv-tabs button[aria-pressed="true"] .sv-tab-count { background: var(--sv-blue-soft); color: var(--sv-blue-deep); }
.sv-alert.is-critical { border-left-color: #dc2626; }
.sv-alert > .sv-severity { justify-self: start; }
.sv-alert p { margin: 0; }
.sv-alert-body { display: grid; gap: .15rem; min-width: 0; }
.sv-alert-title { color: var(--sv-ink); font-weight: 700; }
.sv-alert-message { overflow-wrap: anywhere; font-size: .88rem; }
.sv-alert-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.sv-alerts.is-compact .sv-alert { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem 1rem; box-shadow: none; }
.sv-sub-inline { margin-left: .35rem; color: var(--sv-muted); font-size: .78rem; font-weight: 500; }
.sv-panel.is-healthy { border-color: #a7f3d0; background: var(--sv-green-soft); }
.sv-table-wrap.is-flat { border: 0; box-shadow: none; }

.sv-button { padding: .45rem .9rem; border: 1px solid var(--sv-blue-deep); border-radius: .6rem; background: var(--sv-blue-deep); color: #fff; font-size: .86rem; font-weight: 600; cursor: pointer; }
.sv-button:hover { background: #1e40af; }
.sv-button.is-secondary { justify-self: start; border-color: var(--sv-line); background: #fff; color: var(--sv-blue-deep); }
.sv-button.is-secondary:hover { background: var(--sv-blue-soft); }
.sv-button:disabled { opacity: .6; cursor: default; }
.sv-button:focus-visible, .sv-select:focus-visible { outline: 2px solid var(--sv-blue); outline-offset: 1px; }
.sv-select { min-height: 2.1rem; padding: .3rem .55rem; border: 1px solid #cbd5e1; border-radius: .6rem; background: #fff; color: var(--sv-text); font-size: .86rem; }
.sv-link.is-danger { color: var(--sv-red); }
.sv-button.is-danger { border-color: var(--sv-red); background: var(--sv-red); }
.sv-button.is-danger:hover { background: #991b1b; }
.sv-button.is-danger-text { color: var(--sv-red); }
.sv-button.is-danger-text:hover { background: var(--sv-red-soft); }

.sv-notice { margin: 0; padding: .75rem 1rem; border: 1px solid #bfdbfe; border-radius: .8rem; background: var(--sv-blue-soft); color: #1e3a8a; font-size: .88rem; }
.sv-notice.is-error { border-color: #fecaca; background: var(--sv-red-soft); color: var(--sv-red); }
.sv-notice ul { margin: 0; padding-left: 1.1rem; }

.sv-settings { display: grid; gap: 1.1rem; }
.sv-field { display: grid; align-content: start; gap: .3rem; margin: 0; color: #334155; font-size: .84rem; font-weight: 600; }
.sv-field small { color: var(--sv-muted); font-weight: 400; }
.sv-field .form-control { font-weight: 400; }
.sv-field-row { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.5rem; }
.sv-thresholds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem; }
.sv-thresholds fieldset { display: grid; align-content: start; gap: .55rem; margin: 0; padding: .8rem .9rem; border: 1px solid var(--sv-line); border-radius: .8rem; }
.sv-thresholds legend { width: auto; margin: 0; padding: 0 .3rem; color: var(--sv-ink); font-size: .88rem; font-weight: 800; }
.sv-thresholds input { max-width: 8rem; }
.sv-window { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem 1rem; padding: .8rem .9rem; border: 1px solid var(--sv-line); border-radius: .8rem; background: #f8fafc; }
.sv-window input[type="number"] { max-width: 6.5rem; }
.sv-days { display: flex; flex-wrap: wrap; gap: .3rem; }
.sv-day { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .5rem; border: 1px solid var(--sv-line); border-radius: .5rem; background: #fff; font-size: .8rem; cursor: pointer; }
.sv-muted { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sv-muted li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid #f1f5f9; font-size: .88rem; }
.sv-details summary { color: var(--sv-blue-deep); font-size: .86rem; font-weight: 600; cursor: pointer; }
.sv-save { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.sv-group { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--sv-line); border-radius: .9rem; background: #f8fafc; }
.sv-members { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: .7rem .9rem; border: 1px solid var(--sv-line); border-radius: .8rem; background: #fff; }
.sv-members legend { width: auto; margin: 0; padding: 0 .3rem; color: var(--sv-ink); font-size: .88rem; font-weight: 800; }
.sv-group .sv-thresholds fieldset { background: #fff; }
.sv-subhead { margin: 0; color: var(--sv-ink); font-size: .9rem; font-weight: 800; }
.sv-reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; margin: 0; }
.sv-reach div { padding: .6rem .8rem; border: 1px solid var(--sv-line); border-radius: .7rem; background: #fff; }
.sv-reach dt { color: var(--sv-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sv-reach dd { margin: .2rem 0 0; font-size: .9rem; font-weight: 700; }
.sv-reach .is-alert dd { color: var(--sv-red); }
.sv-reach .is-ok dd { color: var(--sv-green); }

.sv-diagnostics { margin-top: 1rem; gap: .75rem; }
.sv-diagnostics .sv-totals { flex-wrap: wrap; }
.sv-diagnostics .sv-totals dd { font-size: 1.05rem; }

/* Productivity */
.sv-split { display: flex; height: 1rem; overflow: hidden; border-radius: 999px; background: #eef2f7; }
.sv-split-part { height: 100%; }
.sv-split-part.is-business, .sv-dot.is-business { background: #059669; }
.sv-split-part.is-infrastructure, .sv-dot.is-infrastructure { background: #2563eb; }
.sv-split-part.is-overhead, .sv-dot.is-overhead { background: #d97706; }
.sv-split-part.is-unclassified, .sv-dot.is-unclassified { background: #94a3b8; }
.sv-split-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .5rem 1rem; margin: 0; }
.sv-split-legend dt { display: flex; align-items: center; gap: .4rem; color: var(--sv-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sv-split-legend dd { margin: .15rem 0 0; font-size: .9rem; }
.sv-split-legend dd b { color: var(--sv-ink); font-size: 1.15rem; }
.sv-dot { width: .6rem; height: .6rem; border-radius: 50%; }
.sv-class { display: inline-flex; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sv-class.is-business { background: var(--sv-green-soft); color: var(--sv-green); }
.sv-class.is-infrastructure { background: var(--sv-blue-soft); color: var(--sv-blue-deep); }
.sv-class.is-overhead { background: var(--sv-amber-soft); color: var(--sv-amber); }
.sv-class.is-unclassified, .sv-class.is-other { background: #f1f5f9; color: #475569; }
.sv-programs-row td { background: #f8fafc; }
.sv-programs { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sv-programs li { display: grid; gap: .45rem; padding: .6rem .7rem; border: 1px solid var(--sv-line); border-radius: .7rem; background: #fff; }
.sv-programs li > .sv-button { justify-self: start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sv-class.is-critical { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.sv-score-dial { display: grid; place-items: center; width: 6.2rem; height: 6.2rem; border-radius: 50%; border: .5rem solid #94a3b8; text-align: center; line-height: 1; }
.sv-score-dial b { display: block; color: var(--sv-ink); font-size: 1.9rem; font-weight: 800; }
.sv-score-dial span { display: block; color: var(--sv-muted); font-size: .72rem; }
.sv-score-dial.is-business { border-color: #059669; }
.sv-score-dial.is-overhead { border-color: #d97706; }
.sv-score-dial.is-critical { border-color: #dc2626; }
.sv-score-text { display: grid; gap: .35rem; }
.sv-score-text h2 { margin: 0; }
.sv-score-summary { margin: 0; color: #334155; font-size: .95rem; line-height: 1.55; }
.sv-score-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .8rem; margin: 0; }
.sv-score-parts > div { display: grid; gap: .3rem; padding: .7rem .8rem; border: 1px solid var(--sv-line); border-radius: .8rem; background: #f8fafc; }
.sv-score-parts dt { color: var(--sv-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sv-score-parts dt span { margin-left: .3rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sv-score-parts dd { margin: 0; color: var(--sv-ink); font-size: 1.25rem; font-weight: 800; }
.sv-score-parts small { color: var(--sv-muted); font-size: .78rem; }
.sv-insights { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sv-insights li { display: grid; gap: .15rem; padding: .6rem .8rem; border-left: 4px solid #2563eb; border-radius: .6rem; background: var(--sv-blue-soft); font-size: .88rem; }
.sv-insights li.is-overhead, .sv-insights li.is-heavy-unclassified { border-left-color: #d97706; background: var(--sv-amber-soft); }
.sv-insights li.is-undersized { border-left-color: #dc2626; background: var(--sv-red-soft); }
.sv-insights b { color: var(--sv-ink); }
.sv-heatmap-wrap { display: grid; gap: .4rem; overflow-x: auto; }
.sv-heatmap { border-collapse: separate; border-spacing: 2px; font-size: .7rem; }
.sv-heatmap th { color: var(--sv-muted); font-weight: 600; text-align: left; padding: 0 .3rem 0 0; }
.sv-heatmap thead th { text-align: left; }
.sv-heatmap td { width: 1.1rem; min-width: .9rem; height: 1.1rem; border-radius: 3px; background: rgba(5, 150, 105, calc(.08 + var(--sv-heat, 0) * .92)); }
.sv-heatmap td.is-empty { background: repeating-linear-gradient(45deg, #f1f5f9 0 3px, #e2e8f0 3px 4px); }
.sv-score-dial.is-unclassified { border-color: #cbd5e1; }
.sv-report-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin: 0; }
.sv-report-figures div { padding: .45rem .6rem; border: 1px solid var(--sv-line); border-radius: .6rem; background: #f8fafc; }
.sv-report-figures dt { color: var(--sv-muted); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sv-report-figures dd { margin: .1rem 0 0; color: var(--sv-ink); font-size: 1rem; font-weight: 800; }
.sv-trend { display: flex; align-items: flex-end; gap: 3px; height: 3rem; padding: .3rem; border-radius: .6rem; background: #f8fafc; }
.sv-trend span { flex: 1 1 0; max-width: 1.4rem; border-radius: 3px 3px 0 0; background: #94a3b8; }
.sv-trend span.is-business { background: #059669; }
.sv-trend span.is-overhead { background: #d97706; }
.sv-trend span.is-critical { background: #dc2626; }

@media (max-width: 640px) {
    .sv-intro { padding: 1.1rem; }
    .sv-totals { flex-wrap: wrap; }
    .sv-volume { grid-template-columns: 1fr; gap: .35rem; }
    .sv-changes li { grid-template-columns: 1fr; gap: .25rem; }
    .sv-alerts.is-compact .sv-alert { grid-template-columns: 1fr; }
    .sv-score { grid-template-columns: 1fr; }
}

/* Backups (Phase 3) */
.sv-backup { display: inline-flex; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sv-backup.is-good { background: var(--sv-green-soft); color: var(--sv-green); }
.sv-backup.is-warn { background: var(--sv-amber-soft); color: var(--sv-amber); }
.sv-backup.is-bad { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-backup.is-idle { background: #f1f5f9; color: #475569; }
.sv-runs { display: block; min-width: 180px; }
.sv-runs rect.is-success { fill: #059669; }
.sv-runs rect.is-warning { fill: #d97706; }
.sv-runs rect.is-failed { fill: #dc2626; }
.sv-runs rect.is-cancelled { fill: #94a3b8; }
.sv-runs rect.is-none { fill: #e2e8f0; }
.sv-adapter dd.is-alert { color: var(--sv-red); font-weight: 700; }

/* Windows events (Phase 3) */
.sv-event { display: inline-flex; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sv-event.is-critical { background: var(--sv-red); color: #fff; }
.sv-event.is-error { background: var(--sv-red-soft); color: var(--sv-red); }
.sv-event.is-warning { background: var(--sv-amber-soft); color: var(--sv-amber); }
.sv-event.is-info, .sv-event.is-audit { background: #f1f5f9; color: #475569; }
.sv-message { white-space: pre-wrap; }

/* Friendly server names */
.sv-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.sv-rename-link { font-size: .85rem; font-weight: 600; }
.sv-rename { display: grid; gap: .5rem; max-width: 32rem; }

/* A server's notifications (its Notifications tab) */
.sv-notify-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem 1rem; margin: .5rem 0; }
.sv-notify-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; }
.sv-notify-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--sv-line); border-radius: .6rem; }
.sv-notify-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: .75rem; }
.sv-notify-add .sv-field { flex: 1 1 12rem; }
.sv-notify-add fieldset { border: 0; padding: 0; margin: 0; flex-basis: 100%; }
.sv-notify-add legend { font-size: .8rem; font-weight: 700; color: var(--sv-muted); }
.sv-notice.is-warn { background: var(--sv-amber-soft); color: var(--sv-amber); }

/* Server page: the tab content takes focus after a tab change, without a ring around the whole panel. */
.sv-tabpanel { display: grid; gap: 1rem; }
.sv-tabpanel:focus { outline: none; }
.sv-tabpanel:focus-visible { outline: 2px solid var(--sv-blue); outline-offset: 4px; border-radius: var(--sv-radius); }

/* Phones: full-size tap targets for tabs, ranges and the row links. */
@media (max-width: 640px) {
    .sv-tabs button, .sv-range button { min-height: 2.75rem; }
    .sv-table .sv-link { min-height: 2.75rem; padding-inline: .25rem; }
}