v0.4.63: SSO row alignment, themed checkbox, dropdown affordance

Three UI nits the operator caught on v0.4.62, plus the queued PXE-theme
research note for the next release.

- SSO header grid is now a 4-column form-row matching the Administrator
  account card column-for-column (display name / logo URL / metadata
  source / metadata URL). Switching to XML mode collapses column 4 and
  drops the multi-line textarea on its own full-width row below.
- Native form chrome (checkboxes, scroll bars) follows the active
  OpenPXE theme via CSS `color-scheme`; the inline meta tag was forcing
  dark form controls in light mode, which is why the "Enable single
  sign-on" checkbox rendered as an opaque black square against the
  light panel.
- Checkbox itself is now custom-styled (16x16 rounded square, accent
  fill + tick on :checked) so the chrome reads identically across both
  palettes and browsers, not just on whichever WebKit happens to honor
  `accent-color`.
- <select> dropdowns get a hand-drawn chevron via background-image SVG;
  with `-webkit-appearance: none` the native arrow had disappeared,
  making "Metadata source" look squished next to the inputs beside it.
- Update credentials + Save SSO settings buttons get explicit top
  margins so they sit clearly under their input rows instead of butting
  against the field beneath.
- `docs/queued/ipxe-pxe-menu-theme-research.md` captures findings on
  how iVentoy paints its boot menu (iPXE `console --picture` with
  baked-in per-resolution PNGs, no EDID auto-detect) and the
  recommended Rust architecture for the follow-up release.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

crates/webui/src/app.css

@@ -34,9 +34,18 @@
   --topbar-h:   56px;
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+  /* v0.4.63: tie native form-control rendering (checkboxes, scroll bars,
+     date pickers) to the active OpenPXE theme. Without this, the inline
+     `<meta name="color-scheme" content="dark light">` in index.html forces
+     dark form chrome in *both* themes — so the SSO "Enable single sign-on"
+     checkbox renders as an opaque black square against the light-mode
+     panel, ignoring our accent-color hint. CSS `color-scheme` overrides
+     the meta and tracks `data-theme` correctly. */
+  color-scheme: dark;
 }
 
 :root[data-theme="light"] {
+  color-scheme: light;
   /* Light palette — high-contrast neutral, accent unchanged for brand
      consistency. Designed against Netbox Labs's reference screenshot:
      near-white surfaces, soft grey dividers, dark text. */
@@ -304,6 +313,23 @@ label.field textarea {
   font-size: 14px; line-height: 1.4;
   box-shadow: none; -webkit-appearance: none; appearance: none;
 }
+/* v0.4.63: with `appearance: none`, the native <select> dropdown arrow
+   disappears, which makes the "Metadata source" pick-list look like a
+   plain (and slightly squished) text input. Paint our own chevron via
+   background-image so the control still reads as a dropdown, and reserve
+   right-padding for it. The data-URI SVG inherits currentColor via the
+   `stroke` attribute so the arrow follows light/dark theme without a
+   second declaration. */
+label.field select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 11px 7px;
+  padding-right: 30px;
+}
+:root[data-theme="light"] label.field select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235a6377' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
+}
 label.field input:focus, label.field select:focus, label.field textarea:focus {
   outline: none; border-color: var(--accent);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
@@ -313,7 +339,40 @@ label.check {
   padding: 8px 10px; margin-bottom: 6px;
   border: 1px solid var(--border-soft); border-radius: var(--radius);
 }
-label.check input { accent-color: var(--accent); }
+/* v0.4.63: native checkboxes used to render as opaque black squares in
+   light mode because the page meta declares `color-scheme: dark light`
+   and `accent-color` alone only repaints the *check mark* (not the
+   container). Take full control of the chrome so the box reads cleanly
+   on both palettes and the checked state lights up in our accent. */
+label.check input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none;
+  width: 16px; height: 16px; flex: none;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  display: inline-grid; place-content: center;
+  cursor: pointer; margin: 0;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+label.check input[type="checkbox"]:hover { border-color: var(--accent); }
+label.check input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+label.check input[type="checkbox"]:checked::after {
+  /* Classic ✓ glyph built from a rotated rectangle border. Colour is
+     #002923 (the same near-black we use on solid-accent buttons) so the
+     tick stays legible against the teal fill in both themes. */
+  content: '';
+  width: 4px; height: 8px;
+  border: solid #002923;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+label.check input[type="checkbox"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
+}
 
 /* ── Drop zone ────────────────────────────────────────────────────── */