/* The admin pages of vcloud: no inline styles anywhere (CSP style-src 'self'). */
:root {
  --bg: #f6f7f9; --fg: #1d2330; --muted: #667085; --line: #d9dde3; --card: #ffffff;
  --ok: #1a7f37; --bad: #c62828; --warn: #b26a00; --unknown: #8a94a6; --link: #1f5fbf;
  --s0: #1f5fbf; --s1: #d1495b; --s2: #2a9d8f; --s3: #e9a03b; --s4: #7b4fbf; --s5: #5c6b73;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b; --fg: #e3e7ee; --muted: #9aa3b2; --line: #2b313c; --card: #1a1e26;
    --ok: #3fb950; --bad: #f85149; --warn: #d29922; --unknown: #6e7681; --link: #6ea8fe;
    --s0: #6ea8fe; --s1: #ff7b8b; --s2: #4fd1c5; --s3: #f2c14e; --s4: #b392f0; --s5: #a0aec0;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
header .brand { font-weight: 600; }
header nav { display: flex; gap: 14px; flex: 1; }
header nav a.here { font-weight: 600; color: var(--fg); }
header .who { color: var(--muted); }
header form { margin: 0; }
main { padding: 20px; max-width: 1280px; }
h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 22px 0 10px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px; margin-bottom: 14px; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
pre { background: var(--bg); border: 1px solid var(--line); padding: 10px; overflow: auto; max-height: 480px; margin: 0; }
.light { display: inline-block; min-width: 72px; padding: 2px 8px; border-radius: 10px; font-size: 12px; text-align: center; color: #fff; }
.light.ok { background: var(--ok); }
.light.bad { background: var(--bad); }
.light.warn { background: var(--warn); }
.light.unknown { background: var(--unknown); }
.light.none { background: transparent; color: var(--muted); }
.state-active, .state-verified { color: var(--ok); }
.state-degraded, .state-new { color: var(--warn); }
.state-dead, .state-banned, .state-gone { color: var(--bad); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 14px; }
.ranges { display: flex; gap: 10px; margin-bottom: 10px; }
.ranges a.here { font-weight: 600; color: var(--fg); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
form.login { max-width: 340px; margin: 80px auto; }
form.login label { display: block; margin: 10px 0 4px; color: var(--muted); }
form.login input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--fg); font: inherit; }
button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--fg); font: inherit; cursor: pointer; }
form.login button { margin-top: 16px; width: 100%; background: var(--link); color: #fff; border: 0; }
.error { color: var(--bad); margin: 10px 0; }
.note { border-left: 3px solid var(--unknown); padding: 6px 10px; color: var(--muted); background: var(--card); }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart .tick { fill: var(--muted); font-size: 11px; }
svg.chart .title { fill: var(--fg); font-size: 13px; font-weight: 600; }
svg.chart polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
svg.chart .s0 { stroke: var(--s0); fill: var(--s0); }
svg.chart .s1 { stroke: var(--s1); fill: var(--s1); }
svg.chart .s2 { stroke: var(--s2); fill: var(--s2); }
svg.chart .s3 { stroke: var(--s3); fill: var(--s3); }
svg.chart .s4 { stroke: var(--s4); fill: var(--s4); }
svg.chart .s5 { stroke: var(--s5); fill: var(--s5); }
svg.chart polyline.s0, svg.chart polyline.s1, svg.chart polyline.s2, svg.chart polyline.s3, svg.chart polyline.s4, svg.chart polyline.s5 { fill: none; }
svg.chart text.legend { stroke: none; font-size: 11px; }
svg.chart .empty { fill: var(--muted); font-size: 12px; }
.htmx-request { opacity: .6; }