Add per-device VPN and direct routing policies

src/web/styles.css

@@ -878,17 +878,17 @@ p {
 
 .client-device {
   display: grid;
-  gap: 7px;
-  padding: 14px 8px;
+  gap: 3px;
+  padding: 10px 8px;
   border-top: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
 }
 
 .client-device-heading {
   display: grid;
-  grid-template-columns: 68px minmax(0, 1fr) 32px;
+  grid-template-columns: 60px minmax(0, 1fr) auto 32px;
   align-items: center;
-  gap: 8px;
-  min-height: 32px;
+  gap: 6px;
+  min-height: 28px;
 }
 
 .client-device-title {
@@ -910,7 +910,7 @@ p {
 .client-device-status {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
   color: var(--client-muted);
   font-size: 9px;
   white-space: nowrap;
@@ -992,11 +992,11 @@ p {
 
 .client-device-meta {
   min-width: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 10px 16px;
-  margin-left: 76px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px auto;
+  align-items: center;
+  gap: 8px;
+  margin-left: 66px;
   color: var(--client-muted);
   font-size: 9px;
   line-height: 1.5;
@@ -1005,7 +1005,7 @@ p {
 .client-device-addresses {
   min-width: 0;
   display: flex;
-  flex-wrap: wrap;
+  overflow: hidden;
   gap: 3px 0;
 }
 
@@ -1019,11 +1019,6 @@ p {
   content: '·';
 }
 
-.client-device-mac {
-  display: inline-flex;
-  align-items: center;
-}
-
 .client-device-identity {
   position: relative;
   margin-left: 4px;
@@ -1032,8 +1027,6 @@ p {
 }
 
 .client-device-last-seen {
-  flex: 0 0 auto;
-  margin-left: auto;
   color: var(--client-text);
   cursor: default;
   white-space: nowrap;
@@ -1100,17 +1093,6 @@ p {
   outline-offset: 3px;
 }
 
-.client-device-details {
-  min-width: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 4px 12px;
-  margin-left: 76px;
-  font-size: 9px;
-}
-
 .client-device-manufacturer {
   min-width: 0;
   overflow: hidden;
@@ -1120,12 +1102,66 @@ p {
 }
 
 .client-device-traffic {
-  margin-left: auto;
   color: var(--client-text);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
+.client-device-traffic-slot {
+  min-width: 0;
+  font-size: 9px;
+}
+
+.client-device-policy-wrap {
+  width: 72px;
+  position: relative;
+}
+
+.client-device-policy {
+  width: 72px;
+  min-height: 22px;
+  padding: 0 5px;
+  border: 1px solid color-mix(in oklch, var(--client-border) 82%, transparent);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--client-muted);
+  font: 700 8px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  text-transform: uppercase;
+  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
+}
+
+.client-device-policy.is-direct {
+  border-color: color-mix(in oklch, var(--client-accent) 52%, var(--client-border));
+  color: var(--client-accent);
+}
+
+.client-device-policy.is-failed {
+  border-color: oklch(0.62 0.13 28);
+  color: oklch(0.7 0.12 28);
+}
+
+.client-device-policy.is-pending {
+  border-style: dashed;
+}
+
+.client-device-policy:hover:not(:disabled),
+.client-device-policy:focus-visible {
+  border-color: var(--client-accent);
+  color: var(--client-accent);
+}
+
+.client-device-policy-wrap.client-tooltip-anchor > .client-tooltip {
+  right: 0;
+  left: auto;
+  text-transform: none;
+  transform: translate(0, 2px);
+}
+
+.client-device-policy-wrap.client-tooltip-anchor:hover > .client-tooltip,
+.client-device-policy-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
+  transform: translate(0, 0);
+}
+
 .client-device-alias {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 28px 28px;
@@ -4097,6 +4133,7 @@ p {
   .client-device,
   .client-device-pin,
   .client-device-pin svg,
+  .client-device-policy,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,