/* Tokens sourced directly from Venn_Design_System_v1 (tokens/colors.css,
   typography.css, spacing.css) — see .claude memory for the source path.
   Do not hand-tune these values; if the design system updates, re-sync
   from there instead of drifting locally. */

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/jbmono-var.woff2') format('woff2');
}

:root {
  /* ---- Brand ---- */
  --lime: #D1FF10;
  --lime-fg: #0B0B0B;
  --lime-ring: rgba(230, 250, 0, .55);
  --lime-glow: rgba(209, 255, 16, .06);
  --venn-steel-blue: #4F8E99;

  /* ---- Product dark surfaces ---- */
  --bg: #0B171F;
  --surface: #0D232D;
  --surface-2: #0A1C24;
  --surface-3: #08121A;
  --secondary: #35383C;
  --accent-grey: #393E42;

  /* ---- Foreground ---- */
  --fg: #ECEFF2;
  --fg-muted: #94999E;

  /* ---- Borders ---- */
  --border: rgba(74, 78, 82, .5);
  --border-strong: rgba(74, 78, 82, .9);

  /* ---- Status (real states only) ---- */
  --online: #4ADE80;
  --destructive: #FE0019;
  --info: #5B8CFF;
  --offline: #94999E;
  /* Not part of the official palette — the doc defines online/info/offline/
     destructive but this app genuinely needs a middle "degraded" tier
     (partial uptime, not down). Picked to sit tonally between online and
     destructive rather than introducing an unrelated hue. Flagged here so
     it's not mistaken for an official token if this file is next compared
     against the design system source. */
  --warning: #F5B642;

  /* ---- Semantic aliases (match probe's existing class names) ---- */
  --text-primary: var(--fg);
  --text-muted: var(--fg-muted);
  --text-faint: var(--fg-muted);
  --accent: var(--lime);
  --accent-ink: var(--lime-fg);
  --accent-wash: var(--lime-glow);
  --good: var(--online);
  --critical: var(--destructive);
  --nodata: var(--offline);

  /* ---- Type ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Spacing / shape ---- */
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius: var(--radius-card);

  --sidebar-width: 248px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, .30);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-focus: 0 0 0 1px var(--lime-ring);
  --shadow-active: 0 0 0 1px var(--lime-ring);

  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: inherit; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  padding: 0 20px 4px;
  text-decoration: none;
}
.brand img { height: 24px; display: block; }

.nav { display: flex; flex-direction: column; gap: 0; }
.nav-label {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 18px 8px 15px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 11px 18px 11px 15px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--fg); }
.nav-item.active {
  background: var(--lime-glow);
  color: var(--lime);
  font-weight: 600;
  border-left-color: var(--lime);
}

.sidebar-foot {
  margin-top: auto;
  padding: 16px 20px;
  font-size: 11px;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
}
.sidebar-foot .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--online); margin-right: 6px;
}
.sidebar-foot .whoami { display: block; margin-bottom: 6px; color: var(--fg); font-weight: 600; }

/* ---------- Main ---------- */
.main { padding: 28px 36px 60px; max-width: 1240px; }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 26px; gap: 20px;
}
.eyebrow {
  font-size: 11px; font-weight: 700; color: var(--lime);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
}
.page-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 6px; }
.page-sub { font-size: 13px; color: var(--fg-muted); max-width: 56ch; }

/* Primary action — fully-rounded lime pill, per the design system's Button spec. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime); color: var(--lime-fg);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 18px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- Metric cards (StatCard) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
.metric-head {
  display: flex; align-items: center; gap: 7px;
  color: var(--fg-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.metric-head svg { width: 15px; height: 15px; opacity: 0.9; }
.metric-value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 8px 0 2px;
}
.metric-value .unit { font-size: 16px; font-weight: 600; color: var(--fg-muted); margin-left: 2px; }
.metric-cap { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.metric-delta { font-size: 12px; font-weight: 600; margin-top: 6px; }
.metric-delta.good { color: var(--online); }
.metric-delta.warn { color: var(--warning); }

/* ---------- System health ---------- */
.health-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 18px 20px; margin-bottom: 22px;
}
.health-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.health-sub { font-size: 12px; color: var(--fg-muted); margin-bottom: 14px; }
.health-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 2px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.health-row:first-of-type { border-top: none; }
.health-left { display: flex; align-items: center; gap: 10px; }
.health-left svg { width: 15px; height: 15px; color: var(--fg-muted); }
.health-name { font-weight: 600; }
.health-detail { color: var(--fg-muted); font-size: 12px; margin-left: 4px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--online); box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.status-dot.bad { background: var(--destructive); box-shadow: 0 0 0 3px rgba(254,0,25,.15); }
.health-right { display: flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 12.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Device table ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.section-title { font-size: 15px; font-weight: 700; }
.section-note { font-size: 12px; color: var(--fg-muted); }

.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,.03); }

.dev-name { font-weight: 700; font-size: 13.5px; }
.dev-name a { text-decoration: none; }
.dev-name a:hover { color: var(--lime); }
.dev-meta { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wan-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--fg-muted);
  background: var(--secondary); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: var(--radius-pill); margin: 3px 4px 0 0;
}

.uptime-cell { display: flex; align-items: center; gap: 12px; }
.spark { width: 100px; height: 28px; flex-shrink: 0; }
.uptime-pct { font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; min-width: 48px; }

td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Badge (status chip) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip.healthy { background: rgba(74,222,128,.14); color: var(--online); }
.chip.healthy .dot { background: var(--online); }
.chip.degraded { background: rgba(245,182,66,.14); color: var(--warning); }
.chip.degraded .dot { background: var(--warning); }
.chip.critical { background: rgba(254,0,25,.14); color: var(--destructive); }
.chip.critical .dot { background: var(--destructive); }
.chip.neutral { background: rgba(148,153,158,.14); color: var(--fg-muted); }
.chip.neutral .dot { background: var(--fg-muted); }

.foot-note { margin-top: 20px; font-size: 11.5px; color: var(--fg-muted); text-align: center; }
.link-action { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); text-decoration: none; margin-right: 10px; }
.link-action:hover { color: var(--lime); }

/* ---------- Users screen ---------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--venn-steel-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #04232a; font-family: var(--font-sans);
  flex-shrink: 0;
}
.user-cell { display: flex; align-items: center; gap: 12px; }
.user-name { font-weight: 700; font-size: 13.5px; }
.user-email { font-size: 12px; color: var(--fg-muted); }
.role-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(148,153,158,.14); border: 1px solid var(--border); color: var(--fg-muted);
}
.role-chip.owner { background: var(--lime-glow); color: var(--lime); border-color: transparent; }

/* ---------- Drawer / panel ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(4,6,9,0.6);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-normal) var(--ease-standard);
  z-index: 20;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 440px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border-strong);
  transform: translateX(100%); transition: transform var(--dur-normal) var(--ease-standard);
  z-index: 21; display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.drawer-sub { font-size: 12px; color: var(--fg-muted); max-width: 32ch; }
.drawer-close {
  width: 28px; height: 28px; border-radius: var(--radius-control);
  background: var(--secondary); border: 1px solid var(--border);
  color: var(--fg-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.drawer-close svg { width: 13px; height: 13px; }
.drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.field .hint { font-size: 11px; color: var(--fg-muted); font-weight: 400; }
.field input, .field select {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); color: var(--fg);
  font-family: var(--font-sans); font-size: 13px; padding: 9px 11px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--lime); box-shadow: var(--shadow-focus); }
.field input::placeholder { color: var(--fg-muted); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

/* Secondary button — square radius, neutral fill, per the Button spec. */
.btn-secondary {
  background: var(--secondary); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 9px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: filter var(--dur-fast) var(--ease-standard);
}
.btn-secondary:hover { filter: brightness(1.12); }

.form-page {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px; max-width: 560px;
  display: flex; flex-direction: column; gap: 16px;
}

.wan-table-wrap { margin-bottom: 18px; }
.type-tag {
  display: inline-block; background: var(--secondary); border: 1px solid var(--border);
  color: var(--fg-muted); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; font-weight: 600;
}

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 20px 18px 40px; }
}