@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/assets/css/primitives.css

@@ -0,0 +1,1113 @@
+/**
+ * PLATFORM REDESIGN - THE PAGE PRIMITIVES.
+ *
+ * Phases 1-5 tokenised what Vuetify draws. This file is the other half: the
+ * pieces the design draws that Vuetify has no component for, taken as literal
+ * CSS out of the handoff prototype
+ * (`design_handoff_platform_redesign/iService365 Redesign.dc.html`) rather
+ * than re-derived by eye. Every declaration below has a line in that file.
+ *
+ * The rule for a screen adopting these: MARKUP, not a theme override. A
+ * `.v-btn` restyled into a pill is still a `.v-btn` with Vuetify's ripple,
+ * overlay, min-width and uppercase tracking fighting it at a higher
+ * specificity; a `<button class="app-btn">` simply is the button in the
+ * design. Where Vuetify owns the behaviour (the data table, the menu, the
+ * dialog) it stays - only the chrome around it is replaced.
+ *
+ * Numbers, for review against the handoff:
+ *   page title 22px/800/-0.01em   ·  card radius 14px, 1px border, --shadow
+ *   in-card toolbar 0 20px, tabs 14px 2px 12px, 2px accent underline
+ *   fields 40px (34px compact), 10px radius, 13.5px/500
+ *   primary button 40px, 10px radius, 13.5px/800  ·  ghost 38px, 13px/700
+ */
+
+/* ------------------------------------------------------------------ */
+/* The typeface.                                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase 1 loaded Manrope and deliberately did not apply it, so that the
+ * product would not sit half-migrated between two typefaces. The page
+ * scaffold is the migration, so the font goes on now - on Vuetify's own
+ * application root, which is every rendered page in all eleven apps.
+ *
+ * `.v-application` and not `body`: Vuetify sets `font-family` on that class
+ * itself, so a rule on `body` loses to it and the product would keep Roboto
+ * everywhere while the new primitives alone changed - the exact
+ * half-migrated look this was avoiding.
+ */
+.v-application,
+.v-overlay-container {
+  font-family: var(--font-sans);
+}
+
+/**
+ * ...and the places Vuetify hard-codes Roboto, which BEAT the rule above
+ * because they name the element rather than inherit into it. In
+ * vuetify 3.12 that is exactly 81 declarations, in three files:
+ *
+ *   main.css   `html` (1) and the typography utilities .text-h1 ...
+ *              .text-overline (13), each repeated for the five responsive
+ *              breakpoints .text-sm-* ... .text-xxl-* (65) = 79
+ *   VBadge.css `.v-badge__badge`
+ *   VKbd.css   `.v-kbd`
+ *
+ * None of them carries `!important`, so specificity alone re-points them:
+ * `:root` (0,1,0) beats `html` (0,0,1), and a descendant of `.v-application`
+ * (0,2,0) beats a bare `.text-h1` (0,1,0). No `!important` here either -
+ * a screen that wants a different face must still be able to say so.
+ *
+ * This lives HERE, once, and not in each of the eleven apps: the utilities
+ * are Vuetify's, the token is this layer's, and a per-app copy would drift.
+ *
+ * The var() fallback keeps Vuetify's own stack if a build ever resolves a
+ * pre-redesign layer-common in which `--font-sans` does not exist.
+ */
+:root {
+  font-family: var(--font-sans, Roboto, sans-serif);
+}
+
+.v-application
+  :is(
+    [class*="text-h"],
+    [class*="text-subtitle"],
+    [class*="text-body"],
+    [class*="text-button"],
+    [class*="text-caption"],
+    [class*="text-overline"],
+    .v-badge__badge,
+    .v-kbd
+  ):not(.material-symbols-outlined),
+.v-overlay-container
+  :is(
+    [class*="text-h"],
+    [class*="text-subtitle"],
+    [class*="text-body"],
+    [class*="text-button"],
+    [class*="text-caption"],
+    [class*="text-overline"],
+    .v-badge__badge,
+    .v-kbd
+  ):not(.material-symbols-outlined) {
+  font-family: var(--font-sans, Roboto, sans-serif);
+}
+
+/* ------------------------------------------------------------------ */
+/* The icon face.                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws every icon with Google's `Material Symbols Outlined`
+ * variable font, requested in `nuxt.config.ts` alongside Manrope. The icon
+ * set in `plugins/vuetify.ts` turns each `mdi-*` name into that font's
+ * ligature and puts this class on the element; this rule is what makes the
+ * ligature resolve.
+ *
+ * One class, no `!important`. `.v-icon` already gives us `font-feature-
+ * settings: "liga"`, `letter-spacing: normal`, `line-height: 1` and the 1em
+ * box, and Vuetify never sets `font-family` on it - the old family arrived
+ * through `.mdi:before`, which we no longer emit. Only `text-transform` has
+ * to be stated: `.v-btn` uppercases its contents, and an uppercased "close"
+ * matches no ligature, so the icon would render as the word.
+ */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-variation-settings:
+    "FILL" 0,
+    "GRAD" 0,
+    "opsz" 24;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * The icon face, re-asserted at (0,3,0).
+ *
+ * A `<v-icon class="text-h6">` carries BOTH the icon class and a typography
+ * utility, so the re-point above (a descendant of `.v-application`, (0,2,0))
+ * would otherwise beat the single-class rule (0,1,0) and the ligature would
+ * fall back to Manrope - drawing the literal word "local_shipping" instead of
+ * a truck. The `:not()` guard above stops that here; this block stops it
+ * anywhere an app ships its own copy of the re-point, whatever the stylesheet
+ * order. Repeating the class is how the weight is raised - no `!important`,
+ * same precedent as the re-point itself, so a screen can still override.
+ */
+.v-application .material-symbols-outlined.material-symbols-outlined,
+.v-overlay-container .material-symbols-outlined.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+}
+
+/* mdi's spin modifier, kept working now the glyph is not a `:before`.
+   `@keyframes mdi-spin` still comes from `@mdi/font`, which stays loaded so
+   that any icon name without a mapping keeps drawing its old glyph. */
+.material-symbols-outlined.mdi-spin {
+  animation: mdi-spin 2s infinite linear;
+}
+
+/* ------------------------------------------------------------------ */
+/* PageHeader - the row every screen opens with.                       */
+/* ------------------------------------------------------------------ */
+
+.app-page-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.app-page-head__title {
+  margin: 0;
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  line-height: 1.25;
+  color: var(--text);
+}
+
+.app-page-head__sub {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.app-page-head__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppCard - the surface everything else sits on.                      */
+/* ------------------------------------------------------------------ */
+
+.app-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.app-card--flush {
+  overflow: visible;
+}
+
+/* ------------------------------------------------------------------ */
+/* CardToolbar - the in-card top row.                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Two shapes in the handoff, one component. With tabs the row is `0 20px` and
+ * the tabs supply their own vertical padding, so the underline meets the
+ * card's rule; without tabs (a refresh button on the left) it is `10px 14px`.
+ */
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  /* One row at desktop widths, as drawn. On a phone the tabs and the
+     search/pager group drop onto their own lines rather than overflow. */
+  flex-wrap: wrap;
+  gap: 22px;
+  padding: 0 var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+  min-height: 48px;
+}
+
+.app-toolbar--plain {
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.app-toolbar__spacer {
+  flex: 1;
+}
+
+.app-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The list toolbar's own search box. `--search` alone stretches (it is written
+   for the filter row), which would push the pager off the end of the row. */
+.app-toolbar__search.app-field--search {
+  flex: 0 0 auto;
+  width: 200px;
+  min-width: 0;
+}
+
+.app-toolbar__count {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.app-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.app-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.app-tab {
+  padding: 14px 2px 12px 2px;
+  border: none;
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+  cursor: pointer;
+  /* A tab is a <button> on the screens that switch a list in place and a link
+     on the ones that route (Invitations), so the underline has to be ours. */
+  text-decoration: none;
+}
+
+.app-tab:hover {
+  color: var(--text2);
+}
+
+.app-tab--active {
+  font-weight: 800;
+  color: var(--accent-text);
+  border-bottom-color: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* The table, drawn as a grid.                                         */
+/* ------------------------------------------------------------------ */
+
+.app-thead {
+  display: grid;
+  gap: 12px;
+  padding: 12px var(--cellpad-x);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--thead);
+}
+
+.app-trow {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+  padding: var(--cellpad) var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.app-trow:hover {
+  background: var(--hover);
+}
+
+.app-cell--strong {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--muted {
+  color: var(--text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--num {
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 52px var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppButton.                                                          */
+/* ------------------------------------------------------------------ */
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--btn-h);
+  padding: 0 16px;
+  border: none;
+  border-radius: var(--r-inner);
+  /* `--accent` at 3.23:1 cannot carry a white label - see Phase 1. The fill,
+     and only the fill, uses the 18%-darker `--accent-strong`; the underline,
+     the links and every soft background stay on `--accent`. */
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  font-family: inherit;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-btn:hover {
+  filter: brightness(1.06);
+}
+
+/*
+ * THE `type="button"` TIE, AND WHY THIS BLOCK EXISTS.
+ *
+ * Vuetify ships `[type="button"] { color: inherit }`. That is an ATTRIBUTE
+ * selector at (0,1,0) - an exact tie with every `.app-btn` rule above, which is
+ * also (0,1,0). A tie is broken by INJECTION ORDER, so in a document where
+ * Vuetify's stylesheet lands after this one, the background from the rules above
+ * still applies and the `color` does not: the button keeps its accent fill and
+ * takes the page ink instead of its own.
+ *
+ * `AppButton` renders `<button :type="type">` with `type` defaulting to
+ * "button", so EVERY variant carries the attribute the tie needs.
+ *
+ * MEASURED, 2026-08-16. Injecting `[type="button"] { color: inherit }` last, on
+ * a real primary in the harness:
+ *
+ *     before   fill rgb(75,116,196)   ink rgb(255,255,255)   4.57:1
+ *     after    fill rgb(75,116,196)   ink rgb(25,27,31)      3.77:1
+ *
+ * `rgb(25,27,31)` is `--text` on the light theme - the button had stopped
+ * choosing its own ink at all.
+ *
+ * Naming the ELEMENT makes each of these (0,1,1), which beats an attribute
+ * selector WHATEVER the order. No `!important`: a screen that wants a different
+ * label colour must still be able to say so.
+ *
+ * This is an ADDITIONAL block rather than an edit to the rules above, and
+ * deliberately so: `AppButton` renders a `NuxtLink` when `to` is given, which is
+ * an `<a>` with no `type` attribute. Putting `button` on the original selectors
+ * would have taken the colour away from that path entirely. The values below are
+ * copied verbatim from the rules above; if one changes, change both.
+ */
+button.app-btn {
+  color: var(--on-accent-strong);
+}
+
+button.app-btn--ghost {
+  color: var(--text2);
+}
+
+button.app-btn--icon {
+  color: var(--text2);
+}
+
+button.app-btn--row {
+  color: var(--muted);
+}
+
+button.app-btn--ok {
+  color: var(--on-ok);
+}
+
+button.app-btn--err {
+  color: var(--err);
+}
+
+.app-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+  filter: none;
+}
+
+/* The design draws the ghost at the SAME size as the primary it stands next to
+   - Bulk Upload beside Add Unit, Scan QR Code beside Add Visitor are both
+     `height:40px; padding:0 16px; font-size:13.5px`, and only the fill, the
+   border and the weight differ. 38px / 0 14px / 13px was a smaller button than
+   the handoff asks for, and the 2px mismatch shows on every screen that draws
+   the pair. Height, padding and type therefore come from `.app-btn`. */
+.app-btn--ghost {
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+  font-weight: var(--fw-btn);
+}
+
+.app-btn--ghost:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+.app-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text2);
+}
+
+.app-btn--icon:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* The 30px bordered row action - the `more_vert` at the end of a member row. */
+.app-btn--row {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.app-btn--row:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* The check-in / check-out pair.                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * NEW DESIGN, approved by the owner on 2026-08-14. The handoff draws no
+ * check-in and no check-out button, so there is nothing to match here; the
+ * gatehouse screens had been carrying Vuetify's `color="success"` and a
+ * hardcoded `color="red"` instead.
+ *
+ * Both are `.app-btn` first - the same 40px box, the same 10px radius, the
+ * same 13.5px/800 - so only the fill, the ink and the edge differ and the pair
+ * sits level with every other button in the product. The 16px icon at an 8px
+ * gap is the only metric either adds.
+ *
+ * CHECK IN is SOLID. It is the affirmative action a guard hits hundreds of
+ * times a shift and should be the heaviest thing on its row.
+ *
+ * CHECK OUT is TONAL, and that is measured rather than preferred: white on
+ * `--err` reads 2.99:1 in the dark theme, which is why batch C built a solid
+ * danger button, measured it and reverted it. `--err-bg` fill + `--err` ink +
+ * a 24%/28% `--err` edge is the construction the status chips already use, it
+ * passes in both themes, and it keeps a routine action from reading as a
+ * destructive one.
+ */
+.app-btn--ok,
+.app-btn--err {
+  gap: 8px;
+}
+
+/* The label is `--on-ok`, not a literal white - see tokens.css. White on the
+   DARK theme's `--ok` measures 2.14:1; `--on-ok` is the on-fill pair the theme
+   already carries, so the green stays exactly the green the design names. */
+.app-btn--ok {
+  border: 1px solid var(--ok);
+  background: var(--ok);
+  color: var(--on-ok);
+}
+
+.app-btn--err {
+  border: 1px solid var(--err-border);
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+/* A tint cannot be hovered with `brightness()` - above 1 it fades in the light
+   theme, which is the wrong direction. Layering the theme's own `--hover` over
+   the fill darkens in light and lightens in dark, with no new token. */
+.app-btn--err:hover {
+  background: linear-gradient(var(--hover), var(--hover)), var(--err-bg);
+  filter: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppField / AppSelect / AppDateField.                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Flat and compact, with the label OUTSIDE the box as a small muted word -
+ * not Vuetify's outlined field with a label that floats through the border.
+ * A native `<input>`/`<select>`, so the browser keeps the keyboard, the date
+ * picker and the accessibility for free.
+ */
+.app-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--input-h);
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+}
+
+.app-field--compact {
+  height: var(--input-h-compact);
+}
+
+.app-field:focus-within {
+  border-color: var(--accent);
+}
+
+.app-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.app-field__icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-field__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.app-field__input::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+/*
+ * A native `<select>`'s option list is painted by the BROWSER, not by the page.
+ * The control above sets `color`, and an `<option>` inherits it - but it gets
+ * no background of its own, so the browser paints its own popup behind the
+ * theme's ink. In dark mode that popup is white on Windows/Chrome, and the
+ * theme's near-white ink on it measures 1.14:1: the list reads as blank, with
+ * only the highlighted row legible. QA reported exactly that on two apps.
+ *
+ * Giving the option the card's own fill and ink is what makes the open list
+ * belong to the theme. `--card`/`--text` and not a literal, so it follows the
+ * `v-theme--*` subtree the select is actually in - a dialog that forces a
+ * theme included. Declared once here rather than per component, so every
+ * native select this layer renders is covered, in every consuming app.
+ *
+ * The FRAME around the list is browser chrome and is not ours to paint; a
+ * light strip may remain around the options in some browsers.
+ */
+select option {
+  background-color: var(--card);
+  color: var(--text);
+}
+
+/* The `trailing` slot's control - same muted weight as the leading icon, so a
+   reveal toggle reads as field chrome rather than as a second action. */
+.app-field__trailing {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.app-field__trailing:hover {
+  color: var(--text2);
+}
+
+/*
+ * AppSelect wears the same field chrome as a button and opens a themed
+ * popover. Multi values are `StatusChip pill tone-neutral`, the soft pill the
+ * design already uses and the one whose contrast is measured.
+ */
+.app-select {
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.app-select--disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.app-select--single {
+  min-width: 180px;
+  font-family: inherit;
+  text-align: left;
+}
+
+.app-select__single-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The SAME step for the typed field, which never had one. `AppField` and
+ * `AppDateField` both take a `disabled` prop and pass it to the native
+ * `<input>` - and `AppField`'s prop doc says disabled "also greys the box" -
+ * but `.app-field` pins `background: var(--card)` and `.app-field__input` pins
+ * `color: var(--text)`, which overrides the greying a browser gives a disabled
+ * input for free. Measured 2026-08-16 on `AccessManagement`: enabled and
+ * disabled came back identical on background, colour, border, opacity and
+ * filter, on BOTH themes. The field was genuinely dead and read as live.
+ *
+ * Keyed off the input's own `:disabled` rather than a new modifier class, so
+ * it covers `AppField` and `AppDateField` without two templates having to
+ * remember to add it. 0.55 is
+ * `.app-select--disabled`'s number, not a second one.
+ */
+.app-field:has(.app-field__input:disabled) {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.app-select__values {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.app-select__placeholder {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+/* The x that removes one pill, and the one that empties the field. */
+.app-select__x,
+.app-select__clear {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  opacity: 0.7;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.app-select__x:hover,
+.app-select__clear:hover {
+  opacity: 1;
+}
+
+.app-select__clear {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-select__menu {
+  min-width: 200px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
+  background: var(--card);
+  box-shadow: var(--shadow-menu);
+}
+
+.app-select__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--r-inner-sm);
+  background: none;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.app-select__option:hover {
+  background: var(--hover);
+}
+
+.app-select__option--selected {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.app-select__option--selected:hover {
+  background: var(--accent-soft);
+}
+
+.app-select__box {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-select__box--on {
+  color: var(--accent);
+}
+
+.app-select__option-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-field--search {
+  flex: 1;
+  min-width: 220px;
+}
+
+.app-filter-row {
+  display: flex;
+  gap: var(--grid-gap);
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 599.98px) {
+  .app-filter-row > * {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* SegmentedControl - Today | Week | Month.                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws this as a 3px-padded bordered tray holding 8px-radius
+ * segments; the SELECTED one is an ACCENT FILL, not a grey one. Vuetify's
+ * `v-btn-toggle` cannot be talked into that shape (its own height scale, its
+ * dividers, its overlay layer), so the tray is written as markup.
+ *
+ * The fill is `--accent-strong`, not `--accent`: white on `--accent` measures
+ * 3.23:1, the same Phase-1 rule every other filled label follows.
+ */
+.app-seg {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.app-seg__item {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-seg__item:hover {
+  background: var(--hover);
+}
+
+.app-seg__item--on,
+.app-seg__item--on:hover {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/* Switch - the settings toggle.                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * THE DESIGN'S TOGGLE, WRITTEN ONCE.
+ *
+ * The handoff draws it on the Settings screen's ANPR Camera section and then
+ * says, in the prototype's own words, that every other module's
+ * "toggles, form fields and tables use the same styling as the ANPR Camera
+ * section" - so this IS the spec for the HID panels, not an interpretation:
+ *
+ *   track  38x22, `border-radius:999px`; ON `var(--accent)`, OFF `var(--hover)`
+ *   thumb  18x18 circle at `top:2px`; ON `left:18px` `#ffffff`,
+ *                                     OFF `left:2px`  `var(--muted)`
+ *   label  13.5px/700; the OFF label is `var(--text2)`
+ *
+ * `--toggle-w` / `--toggle-h` were put in `tokens.css` in Phase 1 for exactly
+ * this and had no rule to serve until now.
+ *
+ * Vuetify slides `.v-selection-control__input` and leaves the thumb static
+ * inside it; the design slides the THUMB inside a fixed track. So the input's
+ * transform is reset and the thumb is positioned directly - otherwise the two
+ * movements compound and the knob leaves the track.
+ *
+ * Three HID panels each carried their own copy of this with hardcoded hexes
+ * (`#8b9297` / `#2eaf55` / `#e0e0e0`), which is why a disabled toggle read as
+ * light grey on the dark theme's dark card. One rule, both themes, no hex.
+ */
+.app-switch .v-selection-control__wrapper {
+  position: relative;
+  flex: 0 0 auto;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+}
+
+.app-switch .v-switch__track {
+  position: absolute;
+  inset: 0;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  opacity: 1;
+  transition: background var(--motion);
+}
+
+.app-switch .v-selection-control--dirty .v-switch__track {
+  background: var(--accent);
+}
+
+.app-switch .v-selection-control__input {
+  position: absolute;
+  inset: 0;
+  width: var(--toggle-w);
+  height: var(--toggle-h);
+  /*
+   * Vuetify's own slide. The design moves the thumb, not this box - but the
+   * reset never landed: Vuetify ships it as
+   * `.v-locale--is-ltr .v-switch .v-selection-control__input` (THREE classes)
+   * and, when checked, `.v-locale--is-ltr .v-switch .v-selection-control--dirty
+   * .v-selection-control__input` (FOUR), both of which outrank this two-class
+   * rule. So every `.app-switch` in the layer drew its thumb 10px out: measured
+   * OFF thumb at `track.x - 8` (design: +2) and ON at `track.x + 28`
+   * (design: +18). `!important` rather than stacking four `.app-switch`
+   * selectors to out-specify it.
+   */
+  transform: none !important;
+}
+
+/* The 40px hover/ripple disc is bigger than the whole control in this shape. */
+.app-switch .v-selection-control__input::before,
+.app-switch .v-selection-control__input .v-ripple__container {
+  display: none;
+}
+
+.app-switch .v-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--muted);
+  box-shadow: none;
+  transition: left var(--motion), background var(--motion);
+}
+
+.app-switch .v-selection-control--dirty .v-switch__thumb {
+  left: 18px;
+  background: #ffffff;
+}
+
+.app-switch .v-label {
+  padding-inline-start: 12px;
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: 13.5px;
+  font-weight: 700;
+  opacity: 1;
+}
+
+.app-switch .v-selection-control--dirty .v-label {
+  color: var(--text);
+}
+
+.app-switch.v-input--disabled {
+  opacity: 0.55;
+}
+
+/* ------------------------------------------------------------------ */
+/* KpiTile - the dashboard's headline figure.                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Three rows, in this order, straight from the handoff:
+ *   1. a 34px soft icon square and the uppercase label, side by side
+ *   2. the 30px tabular number with its percentage pill BESIDE it
+ *   3. the sub-line
+ * The product had the icon alone on row 1 and the pill stranded at the
+ * bottom, which is why the tile read as a different component.
+ */
+.app-kpi {
+  padding: 18px;
+}
+
+.app-kpi__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.app-kpi__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: var(--r-inner);
+}
+
+.app-kpi__label {
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.app-kpi__action {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.app-kpi__figure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-kpi__value {
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-kpi__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.app-kpi__chip--down {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.app-kpi__sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Responsive - the prototype has no reference, this follows Phase 1.  */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 767.98px) {
+  .app-page-head {
+    align-items: flex-start;
+  }
+
+  /* The grid table keeps its columns and scrolls sideways inside the card,
+     deliberately not restacked into key/value blocks: the columns carry
+     meaning by position. Same decision as Phase 1's tables. */
+  .app-table-scroll {
+    overflow-x: auto;
+  }
+
+  .app-table-scroll > * {
+    min-width: 720px;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Field label (`components/InputLabel.vue`, 125 caller files).        */
+/*                                                                     */
+/* Every form label in the product rendered Vuetify's `text-subtitle-2`:*/
+/* 14px/500 at 0.0071em tracking, declaring `font-family: Roboto`.     */
+/* The handoff's own label - the Create Role modal - is 12.5px/700 with*/
+/* a 6px gap under it and the asterisk on `--err`.                     */
+/*                                                                     */
+/* `margin-bottom` is deliberately NOT `!important`, so the ~40 callers*/
+/* that already pass a Vuetify spacing utility (`mb-1`, `mb-2`) keep   */
+/* winning - those classes carry `!important` - and only the labels    */
+/* that state no spacing take the design's 6px.                        */
+/* ------------------------------------------------------------------ */
+.app-input-label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.app-input-label__req {
+  color: var(--err);
+}