/* Shared component surface. Began as a lift from ProDAQ's shell.css (2622 lines) per docs license-manager-ui-prompt.md §1.1 — the rule groups that file names, not the file. READ THIS BEFORE EDITING. Every rule below is written in tokens — --c-* semantic colour, --sp-* spacing, --radius-*, --field-*, --s-* status — and NOTHING else. tokens.css defines them and must load first. An undefined custom property is invalid at computed-value time: it does not fall back to a browser default, it drops the whole declaration. So a missing token layer does not mis-colour these components, it strips them to transparent, unpadded boxes. The Razor components in Components/Shared/ carry almost no var() of their own — they are class names, and all of their appearance is here. component -> class -> this file -> tokens.css. WHAT WAS CHANGED IN THE LIFT - Selectors for surfaces this app does not have were dropped from shared selector lists: .nav-list and .settings-card-rows (ProDAQ's nav rail and settings cards — §2 says do not copy the rail, this app has four destinations) and .table-scroll (its two-axis card table). .filter-bar likewise, leaving .inline-field to carry that rule alone. - ProDAQ's .modal-change* group is NOT here — those classes are written by ProDAQ's page markup, not by ConfirmDialog, so nothing in this app emits them. .modal-section-title IS here: the Add client form uses it to head its two halves (the company, then the machine it runs on). - One rule is an ADDITION rather than a lift, marked where it appears: the .form-grid collapse to one column under 640px, which §3 asks for on every form grid. WHAT THE BRAND PASS CHANGED AFTERWARDS, and where to look before undoing any of it - There is a LEFT RAIL. §2 above says not to build one; it was asked for and built, and the shell-chrome section at the foot of this file is the tie-break. The four destinations live there as pills, and the topbar keeps only the account zone — no nav, and no clock. - The RAIL AND THE TOPBAR share one gradient (--brand-stops) at two angles, 180deg and 90deg, so they begin on the same stop at the corner they meet. The stops are pastel, so everything on both is DARK ink — --c-on-brand / --c-on-brand-muted, never --c-text-muted and never white. A hover or fill on either surface is frosted WHITE for the same reason: --c-selection is a tint mixed against a white page and does not show on a violet one. - The MODAL head carries the same gradient, the card takes --radius-panel, and it floats on a WHITE frosted scrim rather than a dark one — which is why that card keeps a border and a three-layer shadow: on a white veil they are the only things drawing its edge. Its danger variant drops the gradient for a red wash rather than wearing both. - EVERY FIELD is an underline — no border, no fill, a rule that thickens and takes the accent on focus. .form-grid controls, .inline-field controls, native : it still announces as a checkbox with a checked state, still toggles on Space, still binds through @bind, still posts in a form with JavaScript off, and the component tests still drive it with .Change(false). A div-and-JS switch gives up all five and buys nothing this rule cannot draw. Element selector, not a class, and on purpose: the ask was every checkbox, and a class would only be every checkbox somebody remembered to mark. The four that exist today — Active and Air-gapped on the client forms, Air-gapped on Add client, Unregistered-only on the verify log — all become toggles from this one block, and so does the fifth whenever it is written. The underline-field rules above (.form-grid input, .inline-field input) now exclude [type="checkbox"] so this is not fighting a border-bottom it never wanted. That exclusion is what makes this block work; do not drop the :not() without moving the rule. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; /* .inline-field is a flex row; the track must not stretch or squash */ position: relative; width: 38px; height: 22px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer; vertical-align: middle; /* The OFF state needs a visible boundary, not just a pale fill. A switch is a control whose shape carries its meaning, so its edge is held to 3:1 (WCAG 1.4.11) — and --field-line, which is right for a hairline under text, is about 1.6:1 on white and would leave the track a ghost. The border is --field-line-hover, ~3.5:1, and the fill sits inside it. */ background-color: var(--c-selection); border: 1px solid var(--field-line-hover); transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); } /* The thumb. Dark when off and white when on, rather than white throughout: white on the pale off track is invisible, and the two states have to differ by more than the position of one disc. */ input[type="checkbox"]::before { content: ""; position: absolute; top: 50%; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--s-offline); transform: translateY(-50%); transition: transform var(--motion-base) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); } input[type="checkbox"]:hover { border-color: var(--c-primary); } input[type="checkbox"]:checked { background-color: var(--c-primary); border-color: var(--c-primary); } input[type="checkbox"]:checked::before { /* 38 track − 2 border − 2 gap × 2 − 16 thumb = 16px of travel. */ transform: translate(16px, -50%); background-color: var(--c-primary-ink); } /* A RING here, and it does not contradict the no-outline rule the field blocks above state twice. That rule exists because an outline redraws the box an underline field was designed to remove, and because it fires on whatever field a modal autofocuses. A switch has no underline to thicken instead — the track IS the box — so a ring is the only indicator left, and no form autofocuses one. */ input[type="checkbox"]:focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: 2px; } input[type="checkbox"]:disabled { cursor: default; opacity: 0.55; } /* The thumb slides. That is the one piece of motion the control has, and it is the piece that says a switch was thrown rather than a box ticked — so under reduced motion the state still changes instantly, it just does not travel. */ @media (prefers-reduced-motion: reduce) { input[type="checkbox"], input[type="checkbox"]::before { transition: none; } } /* appearance:none opts the control out of the platform's high-contrast painting, so in forced colours this would otherwise be an invisible track with an invisible thumb. Redrawn here in system colours, where the CHECKED state is a filled track — colour alone is all forced-colors leaves to work with, and the thumb still moves. */ @media (forced-colors: active) { input[type="checkbox"] { border-color: CanvasText; background-color: Canvas; } input[type="checkbox"]::before { background-color: CanvasText; } input[type="checkbox"]:checked { background-color: Highlight; } input[type="checkbox"]:checked::before { background-color: HighlightText; } input[type="checkbox"]:disabled { border-color: GrayText; } input[type="checkbox"]:disabled::before { background-color: GrayText; } } /* ADDITION, not a lift. ProDAQ collapses .form-grid to one column only inside a modal; every other form of its lives in a card wide enough for two. §3 asks for it on every form grid — "at 640px: .form-grid is one column ... the page never scrolls sideways" — and this app's forms appear on bare pages as well as in modals. Stated once here rather than per context, so a form added later cannot miss it, and at the same 640px the modal rules use, so a form does not collapse at one width on a page and a different one in a dialog. */ @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* ============================================================================= Native ------------------------------------------------------- Every drop-down that is not a ComboBox or a Select. Two rules already agreed on the BOX (`.form-grid select` and `.inline-field select`) and neither of them said anything about the ARROW, so each screen showed whatever the platform draws — a grey square button on Windows, a blue disc on macOS — beside a ComboBox wearing our own chevron. This settles the arrow for all of them at once. The two keep their padding, which genuinely differs between a form field and a toolbar filter, and this carries the rest. It has to carry the rest. `appearance: none` takes the platform's border and background away with the arrow, so a select that reached neither of those two would be left as bare text with a chevron after it. The rule (now a bottom line, not a box) is repeated here so that cannot happen to one nobody remembered to check. The chevron is two gradients rather than an SVG data URI, because a background image is a separate document and cannot read `currentColor`: its colour would have to be a literal in the URL, and it would then be wrong on a disabled field, which is the one other state this control has. Two diagonal bands meeting corner to corner draw the same "v" as the ComboBox's boxicon chevron, and being `currentColor` they follow the field's own ink without a second rule to maintain. `appearance: none` reaches the CLOSED control only — the half that sits in the layout beside our own boxes. The open list stays the platform's, and is not stylable from here; a screen that needs the list itself styled is asking for ComboBox, not for this. Safe on all of them either way: nothing in the app uses `multiple` or `size`, so there is no select whose list is meant to render inline rather than as a popup. */ select { appearance: none; -webkit-appearance: none; /* Safari honours only the prefixed one for the drop-down button */ padding: var(--sp-1) 2px; padding-right: var(--sp-6); border: none; border-bottom: 1px solid var(--field-line); border-radius: 0; background-color: transparent; color: var(--c-text); cursor: pointer; /* Two 5px squares meeting corner to corner — "\" then "/" — ending 2px in from the right edge. They used to end 7px in, to clear a border that no longer exists: on an underline field the chevron belongs at the end of the RULE, not inset from a box edge that is not drawn. Two gradients rather than an SVG data URI, because a background image is a separate document and cannot read `currentColor` — its colour would have to be a literal in the URL, and would then be wrong on a disabled field, which is the one state this control actually has. */ background-image: linear-gradient(to bottom left, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%), linear-gradient(to bottom right, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%); background-repeat: no-repeat; background-size: 5px 5px; background-position: right 7px center, right 2px center; } /* Room for the chevron at each density. Stated per context, and not once above, because all the rules that size a select set `padding` as a shorthand — which resets any right-hand padding this one asked for. `.form-grid` is the roomy one; the toolbar density is set after its own rule. */ .form-grid select { padding-right: var(--sp-8); } /* Muted ink takes the chevron with it, since it is drawn in `currentColor`. */ select:disabled { color: var(--c-text-muted); cursor: default; } /* The same rule-thickens-and-takes-the-accent focus every other field in the app answers a Tab with. NOT an outline any more: it is the one control that had a box left, and a ring around a field with no border is a rectangle appearing out of nowhere. `:focus-visible` rather than `:focus`: a select takes focus on a mouse press, and marking it for the length of a click is noise on a control the pointer is already on. */ select:focus-visible { outline: none; border-bottom: 2px solid var(--c-focus); padding-bottom: calc(var(--sp-1) - 1px); box-shadow: 0 6px 10px -8px var(--c-focus); } /* ============================================================================= Dropdowns: the one .combo surface — Select, ComboBox, DatePicker (§5/§6) ============================================================================= */ /* ---- Combo box (ComboBox.razor) ------------------------------------------- A dropdown you can also type into. It has to read as ONE control at rest — a reader glancing down a form must not see two different kinds of box — so the border, radius and background live on the wrapper and the input inside is stripped bare. That also puts the focus ring around the pair rather than around the text half of it, which is what a where the LIST has to be ours too. It reuses every rule above — `.combo` for the anchor, `.combo-control` for the box, `.combo-panel` and `.combo-option` for the list — so the two controls are not two designs that have to be kept level. All that is left is the trigger, which is a