/* The fleet page. The same tokens, the same radius, the same hairline and
   the same class names as the node's own page (internal/api/web/plexus.css),
   so a device's GUI opened from here looks like the page it came from rather
   than like a different product. Only what this page actually uses is here:
   the node's stylesheet is 1200 lines of panels this page has no equivalent
   of, and copying it would be a second copy to keep in step. */

:root {
  --plx-bg: var(--bg, #101418);
  --plx-bg-1: var(--bg-1, #161a1f);
  --plx-bg-2: var(--bg-2, #1c2127);
  --plx-text: var(--text, #e8eaed);
  --plx-text-muted: var(--text-muted, rgba(232, 234, 237, 0.58));
  --plx-border: var(--border, rgba(255, 255, 255, 0.15));
  --plx-accent: var(--accent, #73186c);
  --plx-accent-light: var(--accent-light, #cc84cb);
  --plx-hover: var(--hover, #a961a3);
  --plx-ok: var(--ok, #39c668);
  --plx-warn: var(--warn, #e6a23c);
  --plx-err: var(--err, #ee5353);
  --plx-info: var(--info, #5371f8);
  --plx-rounding: var(--rounding, 4px);
  --plx-font: var(--font, 'Red Hat', system-ui, sans-serif);
  --plx-font-display: var(--font-display, 'Red Hat Display', 'Red Hat', system-ui, sans-serif);
  --plx-mono: var(--mono, 'Red Hat Mono', ui-monospace, 'Roboto Mono', monospace);
  --plx-space-1: var(--space-1, 0.25rem);
  --plx-space-2: var(--space-2, 0.5rem);
  --plx-space-3: var(--space-3, 0.75rem);
  --plx-space-4: var(--space-4, 1rem);
}

html, body { margin: 0; background: var(--plx-bg); color: var(--plx-text); }
body { font: 0.85rem/1.4 var(--plx-font); }
:focus-visible { outline: 1px solid var(--plx-accent-light); outline-offset: 2px; }
button { font: inherit; }
[hidden] { display: none !important; }

.plx { max-width: 1200px; margin: 0 auto; padding: var(--plx-space-4); display: grid; gap: var(--plx-space-4); }
.plx-head { display: flex; align-items: center; justify-content: space-between; gap: var(--plx-space-3); }
.plx-head-right { display: flex; align-items: center; gap: var(--plx-space-2); }
.plx-title { font: 600 1.15rem/1.2 var(--plx-font-display); margin: 0; }

.micro { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--plx-text-muted); }
.mono { font-family: var(--plx-mono); font-variant-numeric: tabular-nums; }

.panel { background: var(--plx-bg-1); border-radius: var(--plx-rounding); overflow: hidden; }
.panel__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--plx-space-2); padding: var(--plx-space-2) var(--plx-space-3); background: var(--plx-bg-2); }
.panel__body { padding: var(--plx-space-2) var(--plx-space-3); }

.btn { padding: 0.3rem 0.8rem; border-radius: var(--plx-rounding); border: 1px solid var(--plx-border); background: var(--plx-accent); color: #fff; cursor: pointer; display: inline-block; text-decoration: none; font: inherit; }
.btn:hover { background: var(--plx-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--quiet { background: transparent; color: var(--plx-text-muted); }
.btn--quiet:hover { background: var(--plx-bg-2); color: var(--plx-text); }
.btn--small { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
.txt { padding: 0.3rem 0.4rem; background: var(--plx-bg-2); color: var(--plx-text); border: 1px solid var(--plx-border); border-radius: var(--plx-rounding); font: inherit; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--plx-text-muted); }
.status-dot--ok { background: var(--plx-ok); }
.status-dot--warn { background: var(--plx-warn); }
.status-dot--err { background: var(--plx-err); }
.status-dot--idle { background: var(--plx-text-muted); opacity: 0.5; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; font-family: var(--plx-mono); border: 1px solid var(--plx-border); color: var(--plx-text-muted); }
.badge--ok { color: var(--plx-ok); border-color: color-mix(in oklch, var(--plx-ok) 50%, transparent); }
.badge--warn { color: var(--plx-warn); border-color: color-mix(in oklch, var(--plx-warn) 50%, transparent); }
.badge--err { color: var(--plx-err); border-color: color-mix(in oklch, var(--plx-err) 50%, transparent); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--plx-space-2); }
.grid { display: grid; gap: var(--plx-space-2); }

table.fleet { width: 100%; border-collapse: collapse; }
table.fleet th { text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--plx-text-muted); padding: var(--plx-space-2) var(--plx-space-2); border-bottom: 1px solid var(--plx-border); }
table.fleet td { padding: var(--plx-space-2); border-bottom: 1px solid var(--plx-border); vertical-align: top; }
table.fleet tr:last-child td { border-bottom: 0; }
.fleet-name { font-weight: 600; }
.fleet-id { color: var(--plx-text-muted); font-family: var(--plx-mono); font-size: 0.72rem; }
.fleet-wans { display: flex; flex-wrap: wrap; gap: var(--plx-space-1); }
.fleet-wan { font-family: var(--plx-mono); font-size: 0.72rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--plx-border); color: var(--plx-text-muted); }
.fleet-wan--up { color: var(--plx-ok); border-color: color-mix(in oklch, var(--plx-ok) 50%, transparent); }
.fleet-wan--down { color: var(--plx-err); border-color: color-mix(in oklch, var(--plx-err) 50%, transparent); }

.note { color: var(--plx-text-muted); }
.note--err { color: var(--plx-err); }
.code { font-family: var(--plx-mono); font-size: 1.3rem; letter-spacing: 0.12em; }

.signin { max-width: 320px; margin: 12vh auto; display: grid; gap: var(--plx-space-3); }
.signin label { display: grid; gap: var(--plx-space-1); }