/* ==========================================================================
DAAN — application design system
--------------------------------------------------------------------------
One stylesheet, one visual language. Structure:
01 Foundations ......... tokens, reset, base elements
02 Controls ............ button / input / select / textarea primitives
03 Shell ............... training banner, toasts, user bar, navigation
04 Page ................ canvas, headings, back link, banners
05 Tabs ................ segmented tabs, cross-page links
06 Filters ............. chips, filter bars, segmented toggle, search
07 Tables .............. surface, sticky head/foot, sort + filter engine,
active-state summary, column and right-click menus
08 Nested tables ....... jobcards, hover panels, totals, history
09 Review controls ..... code assignment forms and their read-only state
10 Status ............... badges, pills, flags, semantic text
11 Cards ............... task/party/status/handover surfaces
12 Overlays ............ modals, popovers, legend
13 Page variants ....... density and column geometry per screen
14 Responsive .......... breakpoints, reduced motion, print
Rules live at the lowest level that is still correct: a component is styled
once by its own class, and a page selector only ever adjusts density or
column geometry. Anything scoped to a page that would look right everywhere
belongs one level up instead.
========================================================================== */
/* ==========================================================================
01 FOUNDATIONS
========================================================================== */
:root {
color-scheme: light;
/* Surfaces ---------------------------------------------------------- */
--bg: #f5f5f7;
--surface: #ffffff;
--surface-subtle: #f7f7f9;
--surface-sunken: #f0f0f3;
--surface-translucent: rgba(255, 255, 255, 0.82);
--surface-hover: #f5f5f7;
--surface-chrome: rgba(255, 255, 255, 0.86);
--surface-popover: rgba(255, 255, 255, 0.96);
--surface-veil: rgba(255, 255, 255, 0.6);
--surface-veil-strong: rgba(255, 255, 255, 0.7);
--surface-sunken-hover: #e9e9ed;
--tint: rgba(0, 0, 0, 0.07);
--tint-strong: rgba(0, 0, 0, 0.16);
--scrim: rgba(29, 29, 31, 0.36);
--toast-bg: rgba(40, 40, 44, 0.94);
--toast-text: #ffffff;
--training-wash: rgba(253, 232, 160, 0.3);
/* Darkest pixel rgb(226, 228, 232): --muted keeps its 4.7:1 there. */
--app-backdrop: url("app-backdrop-light.jpg");
/* Ink ---------------------------------------------------------------- */
--text: #1d1d1f;
--text-secondary: #38383d;
--muted: #636368;
--faint: #808085;
--on-accent: #ffffff;
/* Lines -------------------------------------------------------------- */
--line: rgba(0, 0, 0, 0.10);
--line-soft: rgba(0, 0, 0, 0.06);
--line-strong: rgba(0, 0, 0, 0.16);
/* Accent (JetSupport teal) ------------------------------------------- */
--accent: #087f78;
--accent-hover: #066c66;
--accent-press: #055a55;
--accent-soft: #e6f3f2;
--accent-soft-hover: #d8ebe9;
--accent-line: rgba(8, 127, 120, 0.24);
--accent-wash: rgba(8, 127, 120, 0.07);
--row-hover: #f1f8f7;
--row-focus: #e9f4f3;
/* Marks drawn on an --accent fill. */
--on-accent-ring: rgba(255, 255, 255, 0.92);
--on-accent-veil: rgba(255, 255, 255, 0.22);
--on-accent-bar: rgba(255, 255, 255, 0.8);
/* Semantics ---------------------------------------------------------- */
--go: #1a7342;
--go-soft: #e4f2e9;
/* The done-mark green, brighter than --go because it is only ever a solid
fill behind a white glyph, never text. Held back from the vivid green of
the emoji it echoes: past roughly this point white stops being legible
on it at 17px. */
--go-vivid: #2ea44f;
--attention: #8c5a00;
--attention-soft: #fdf1d6;
--attention-line: rgba(180, 120, 0, 0.22);
--danger: #b42318;
--danger-soft: #fdeceb;
--danger-line: rgba(180, 35, 24, 0.22);
--info: #095db0;
--info-soft: #e6f0fb;
--info-ink: #0a558c;
--violet-soft: #ede9fe;
--violet: #5b21b6;
/* --amber marks, --amber-ink text. */
--amber: #d29200;
--amber-ink: #7a5200;
--amber-soft: #fdefbe;
--amber-edge: #b8860b;
--amber-surface: #fffdf6;
--orange: #e06c1a;
--focus: #007aff;
--focus-ring: 0 0 0 4px rgba(0, 122, 255, 0.28);
/* Glyphs ------------------------------------------------------------- */
/* Masks, not images: whatever uses one picks its own colour. */
--glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.9 9.6 17.9 19.6 6.3'/%3E%3C/svg%3E");
--glyph-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5'/%3E%3C/svg%3E");
/* Bar and dot, for a filled disc to punch out. stroke-linecap round turns
the zero-length second path into the dot, so both halves share one
stroke width and the mark scales as a unit. */
--glyph-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.4v7.2'/%3E%3Cpath d='M12 17.8h.01'/%3E%3C/svg%3E");
/* Slashed circle. The bar meets the ring at 45 degrees, so its ends sit at
12 +/- 8/sqrt(2) and stop exactly on the circle rather than poking past it. */
--glyph-no-entry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M6.34 6.34 17.66 17.66'/%3E%3C/svg%3E");
/* Two chain halves and the bar between them: "connect this to that". */
--glyph-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2'/%3E%3Cpath d='M15 7h2a5 5 0 1 1 0 10h-2'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
/* Radii -------------------------------------------------------------- */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 999px;
/* Elevation ---------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04);
--shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.10), 0 32px 64px rgba(0, 0, 0, 0.14);
/* Motion — one curve (Apple's standard decelerate) and three speeds,
so nothing in the app animates on its own private timing. */
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--t-fast: 110ms;
--t-base: 160ms;
--t-slow: 240ms;
/* Type --------------------------------------------------------------- */
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
"Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* Layout ------------------------------------------------------------- */
--page-max: 1760px;
--gutter: clamp(18px, 3vw, 48px);
--navbar-h: 56px;
/* Stacking — one scale, so nothing has to guess a number. */
--z-sticky-cell: 2;
--z-nav: 100;
--z-popover: 200;
--z-menu: 2000;
--z-modal: 3000;
--z-modal-nested: 3100;
--z-dialog: 4000;
--z-toast: 5000;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
background: var(--bg);
-webkit-text-size-adjust: 100%;
}
body {
min-width: 320px;
margin: 0;
color: var(--text);
font-family: var(--font);
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* --- Backdrop: the login photo, pre-blurred, added after load by
master.html. Fixed layer, not background-attachment (no scroll repaints);
100lvh so a phone's toolbar does not resize it. */
body.has-backdrop:not(.is-login)::before {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
height: 100lvh;
background: var(--app-backdrop) 50% 55% / cover no-repeat;
pointer-events: none;
animation: backdrop-in var(--t-slow) var(--ease) both;
}
body.has-backdrop.training-mode::before {
background-image: linear-gradient(var(--training-wash), var(--training-wash)), var(--app-backdrop);
}
@keyframes backdrop-in {
from { opacity: 0; }
}
/* The single source of truth for hiding. Several components set their own
`display`, which outranks the user-agent's `[hidden] { display: none }` and
silently breaks every `el.hidden = true` in the app (the filter menu's value
list and the handover board both hit this). One authoritative rule here
means `hidden` always works, and no component has to remember to guard it. */
[hidden] {
display: none !important;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-weight: 650;
line-height: 1.2;
letter-spacing: -0.015em;
text-wrap: balance;
}
p {
margin: 0 0 0.75em;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--accent-hover);
text-decoration: none;
text-underline-offset: 3px;
}
a:hover {
text-decoration: underline;
}
img,
svg {
vertical-align: middle;
}
hr {
height: 1px;
margin: 20px 0;
border: 0;
background: var(--line);
}
code,
kbd,
samp {
font-family: var(--font-mono);
font-size: 0.92em;
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* Pointer interaction never flashes a grey box on touch, and never selects
text on a control that behaves like a button. */
button,
a,
[role="button"],
summary,
.filter-table-value-main,
.wo-chip,
.filter-btn,
.value-mode-btn,
.fourm-tile {
-webkit-tap-highlight-color: transparent;
}
button,
[role="button"],
summary,
.wo-chip,
.filter-btn,
.value-mode-btn {
user-select: none;
}
/* Text for screen readers only. For a control or a column heading whose
meaning is carried by a symbol: the symbol stays the whole visual, and this
keeps the name it would otherwise lose. Not display:none, which would take
it out of the accessibility tree along with the layout. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ==========================================================================
02 CONTROLS
These style the bare elements, so every button and field in the app —
including the ~50 that carry no class at all — is part of the system.
========================================================================== */
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* Default button: the neutral, bordered "secondary" action.
:where() gives these element-level defaults zero specificity, so a single
component class — .wo-chip, .history-button, .item-btn-secondary — always
wins without having to out-specify `button[type="submit"]`. Hover/active
states below keep their natural specificity; every component that restyles
a state matches it with the same :not(:disabled) shape. */
:where(button, input[type="submit"], input[type="button"]) {
min-height: 34px;
padding: 7px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-xs);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface-hover);
}
button:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
background: var(--surface-sunken);
box-shadow: none;
transform: scale(0.985);
}
button:disabled,
input[type="submit"]:disabled {
border-color: var(--line-soft);
background: var(--surface-sunken);
color: var(--faint);
box-shadow: none;
cursor: default;
}
/* Submit is the affirmative action of its form, so it reads as primary
unless a component deliberately says otherwise (see .history-button,
.user-signout, .item-btn-secondary, .jort-* below). */
:where(button[type="submit"], input[type="submit"]) {
border-color: transparent;
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 1px 2px rgba(8, 127, 120, 0.22);
}
button[type="submit"]:hover:not(:disabled) {
border-color: transparent;
background: var(--accent-hover);
}
button[type="submit"]:active:not(:disabled) {
background: var(--accent-press);
}
button[type="submit"]:disabled {
border-color: transparent;
background: var(--surface-sunken);
color: var(--faint);
}
:where(
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="tel"],
select,
textarea
) {
min-height: 34px;
padding: 6px 10px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-size: 13px;
line-height: 1.3;
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
:where(textarea) {
padding: 8px 10px;
line-height: 1.45;
resize: vertical;
}
:where(select) {
padding-right: 26px;
background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
linear-gradient(135deg, var(--faint) 50%, transparent 50%);
background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
appearance: none;
-webkit-appearance: none;
}
select:disabled {
background-image: none;
}
input::placeholder,
textarea::placeholder {
color: var(--faint);
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
}
input:disabled,
select:disabled,
textarea:disabled {
border-color: var(--line-soft);
background: var(--surface-sunken);
color: var(--muted);
opacity: 1;
cursor: default;
}
/* Number fields are money and quantities: right-aligned, lining figures, no
spinner furniture competing with the value. */
:where(input[type="number"]) {
font-variant-numeric: tabular-nums;
text-align: right;
appearance: textfield;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
margin: 0;
appearance: none;
-webkit-appearance: none;
}
input[type="search"] {
appearance: none;
-webkit-appearance: none;
}
input[type="search"]::-webkit-search-cancel-button {
appearance: none;
-webkit-appearance: none;
}
input[type="checkbox"],
input[type="radio"] {
width: 15px;
height: 15px;
accent-color: var(--accent);
cursor: pointer;
}
fieldset {
margin: 0;
padding: 14px 16px 16px;
border: 1px solid var(--line);
border-radius: var(--r-md);
}
legend {
padding: 0 6px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Django's `{{ form.as_p }}` output (consumables dialogs) — a stack of
— needs to read as a form, not as prose. */
form > p {
margin: 0 0 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
form > p > label {
color: var(--muted);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.02em;
}
form > p > label:empty {
display: none;
}
.number-input {
width: 100%;
max-width: 180px;
}
/* ==========================================================================
03 SHELL
========================================================================== */
.training-banner {
position: sticky;
top: 0;
z-index: var(--z-toast);
padding: 7px 14px;
background: linear-gradient(180deg, #f6d96a 0%, #f2cf4a 100%);
color: #63480a;
font-size: 11px;
font-weight: 750;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
}
/* --- Toasts ------------------------------------------------------------- */
#wo-toast-container {
position: fixed;
top: 14px;
right: 14px;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.wo-toast {
max-width: min(380px, calc(100vw - 28px));
padding: 11px 15px;
border-radius: var(--r-md);
background: var(--toast-bg);
color: var(--toast-text);
box-shadow: var(--shadow-lg);
font-size: 13px;
font-weight: 550;
line-height: 1.4;
opacity: 0;
transform: translateY(-10px) scale(0.97);
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
pointer-events: auto;
}
.wo-toast-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* --- Top bar ------------------------------------------------------------
One row carrying both navigations. They are still two landmarks, because to
a screen reader the site's sections and the signed-in account are different
things, but they no longer take a strip of the window each: the account row
held one address and one button, and cost every page 44px of height.
The bar owns the chrome -- the sticky, the blur, the rule underneath -- so
neither nav inside it draws a background of its own. */
.app-topbar {
position: sticky;
top: 0;
z-index: var(--z-nav);
min-height: var(--navbar-h);
padding: 8px var(--gutter);
display: flex;
align-items: center;
gap: 16px;
background: var(--surface-chrome);
border-bottom: 1px solid var(--line);
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
}
/* --- Account ------------------------------------------------------------ */
.user-bar {
min-width: 0;
/* Shrinks before the links do: an address can lose its tail to an ellipsis
and still be recognisable, where a navigation item cannot. */
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
color: var(--muted);
font-size: 12px;
}
.user-identity {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-signout-form {
flex: none;
margin: 0;
}
/* A submit button, but signing out is never the primary action on a page. */
.user-signout {
min-height: 28px;
padding: 4px 11px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-xs);
font-size: 12px;
}
.user-signout:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface-hover);
}
/* --- Primary navigation ------------------------------------------------- */
.wo-quicklinks {
min-width: 0;
/* Takes the free space, which is what puts the account at the right-hand
end without an auto margin, and scrolls inside itself rather than
widening the bar when there is none. */
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.wo-quicklinks::-webkit-scrollbar {
display: none;
}
.wo-brand {
flex: none;
margin-right: clamp(16px, 3vw, 40px);
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--text);
font-size: 18px;
font-weight: 750;
letter-spacing: -0.032em;
white-space: nowrap;
}
/* Sized by height with width:auto so the mark keeps its own aspect ratio; the
width/height attributes in the markup only reserve space before it loads. */
/* The for the dark-mode mark must not become a box of its own. */
.wo-brand picture,
.login-brand picture {
display: contents;
}
.wo-brand-mark {
width: auto;
height: 27px;
flex: none;
display: block;
}
.wo-brand-name {
display: block;
}
.wo-quicklinks a {
padding: 7px 12px;
border-radius: var(--r-sm);
color: var(--muted);
font-size: 13.5px;
font-weight: 560;
white-space: nowrap;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wo-quicklinks a:hover {
background: var(--surface-sunken);
color: var(--text);
text-decoration: none;
}
.wo-quicklinks a.is-active,
.wo-quicklinks a[aria-current="page"] {
background: var(--accent-soft);
color: var(--accent-hover);
font-weight: 650;
}
/* ==========================================================================
04 PAGE
========================================================================== */
.wo-page,
.po-page,
.invoice-page,
.app-page {
width: min(100%, var(--page-max));
margin: 0 auto;
padding: clamp(28px, 3.4vw, 48px) var(--gutter) 72px;
color: var(--text);
}
.wo-topbar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.wo-title,
.po-page > h1,
.po-page > h2,
.invoice-page > h1,
.app-page > h1 {
margin: 0 0 26px;
color: var(--text);
font-size: clamp(28px, 2.8vw, 40px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.028em;
}
.po-page > h2 {
font-size: clamp(24px, 2.3vw, 32px);
}
.wo-page h2,
.po-page h2,
.invoice-page h2,
.app-page h2 {
font-size: 18px;
font-weight: 660;
letter-spacing: -0.012em;
}
.wo-page h3,
.po-page h3,
.invoice-page h3,
.app-page h3 {
font-size: 15px;
font-weight: 650;
}
.app-back-link {
margin: 0 0 12px;
}
.app-back-link a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--muted);
font-size: 13px;
font-weight: 600;
transition: color var(--t-fast) var(--ease);
}
.app-back-link a::before {
content: "‹";
font-size: 17px;
font-weight: 500;
line-height: 1;
}
.app-back-link a:hover {
color: var(--accent-hover);
text-decoration: none;
}
/* --- Page-level banners ------------------------------------------------- */
.wo-banner,
.wo-banner-invoiced {
margin: 0 0 18px;
padding: 11px 15px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--attention-line);
border-radius: var(--r-md);
background: var(--attention-soft);
color: var(--amber-ink);
font-size: 13px;
font-weight: 600;
}
.wo-banner::before,
.wo-banner-invoiced::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* --- Workorder detail header ------------------------------------------- */
.workorder-detail-header {
margin-bottom: 22px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.workorder-detail-heading {
min-width: 0;
}
.workorder-detail-heading .app-back-link {
margin-bottom: 8px;
}
.workorder-detail-heading h1 {
margin: 0;
color: var(--text);
font-size: clamp(26px, 2.5vw, 38px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.028em;
}
.workorder-detail-heading h1 > span:last-child {
color: var(--muted);
font-weight: 600;
}
.workorder-detail-separator {
margin: 0 0.16em;
color: var(--faint);
font-weight: 300;
}
.workorder-detail-actions {
min-height: 36px;
display: flex;
flex: none;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.workorder-detail-actions form {
margin: 0;
}
/* Closing a workorder is irreversible, so it is bordered rather than filled:
present and reachable, but never the thing the eye lands on first. */
#close-workorder-btn,
#close-workorder-btn[type="submit"] {
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-xs);
}
#close-workorder-btn:hover:not(:disabled) {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
.workorder-export-link {
min-height: 34px;
padding: 7px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-xs);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.workorder-export-link:hover {
border-color: var(--line-strong);
background: var(--surface-hover);
text-decoration: none;
}
.workorder-readonly-state {
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--surface-sunken);
color: var(--muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* ==========================================================================
05 TABS
========================================================================== */
.wo-tabs {
position: relative;
width: fit-content;
max-width: 100%;
margin: 0 0 20px;
padding: 3px;
display: flex;
align-items: center;
gap: 3px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-sunken);
}
.wo-page > .wo-tabs {
overflow-x: auto;
scrollbar-width: none;
}
.wo-page > .wo-tabs::-webkit-scrollbar {
display: none;
}
.po-page > .wo-tabs,
.invoice-page > .wo-tabs {
width: 100%;
flex-wrap: wrap;
}
.wo-tab,
a.wo-tab {
min-height: 34px;
margin: 0;
padding: 6px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 0 0 auto;
border: 0;
border-radius: var(--r-sm);
background: transparent;
box-shadow: none;
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.wo-tab:hover:not(:disabled),
a.wo-tab:hover {
border: 0;
background: var(--surface-veil);
color: var(--text);
text-decoration: none;
}
.wo-tab:active:not(:disabled) {
transform: none;
}
.wo-tab.is-active,
.wo-tab[aria-selected="true"] {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.wo-tab-count {
min-width: 21px;
height: 20px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--tint);
color: currentColor;
font-size: 11px;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.wo-tab.is-active .wo-tab-count,
.wo-tab[aria-selected="true"] .wo-tab-count {
background: var(--accent-soft);
color: var(--accent-hover);
}
.wo-tab-count-accent {
background: var(--amber-soft);
color: var(--amber-ink);
}
.wo-tab.is-active .wo-tab-count-accent,
.wo-tab[aria-selected="true"] .wo-tab-count-accent {
background: var(--amber-soft);
color: var(--amber-ink);
}
/* Cross-page links deliberately never carry data-tab (the shared tab script
would mark them all active at once), so they are their own component. */
.wo-crosslinks {
width: fit-content;
max-width: 100%;
margin: 0 0 20px;
padding: 3px;
display: flex;
flex-wrap: wrap;
gap: 3px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-sunken);
}
.wo-crosslink {
min-height: 34px;
padding: 6px 14px;
display: inline-flex;
align-items: center;
border-radius: var(--r-sm);
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wo-crosslink:hover {
background: var(--surface-veil);
color: var(--text);
text-decoration: none;
}
.wo-crosslink.is-active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
/* Sits at the end of the tab strip rather than in a bar of its own. */
.legend-trigger {
min-height: 30px;
margin-left: auto;
padding: 5px 11px;
flex: 0 0 auto;
align-self: center;
border: 0;
border-radius: var(--r-sm);
background: transparent;
box-shadow: none;
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.legend-trigger:hover:not(:disabled),
.legend-trigger:focus-visible {
border: 0;
background: var(--surface-veil-strong);
color: var(--text);
}
/* ==========================================================================
06 FILTERS
========================================================================== */
.filter-bars {
margin: 0 0 14px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-veil);
}
.filter-bars-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
}
.filter-bar-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.filter-bar-label {
flex: none;
min-width: 72px;
color: var(--faint);
font-size: 10px;
font-weight: 720;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wo-entity-bar,
.po-filter-bar,
.filter-bar {
max-width: 100%;
margin: 0 0 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.filter-bar-row .wo-entity-bar,
.filter-bars .wo-entity-bar {
margin: 0;
}
.wo-chip,
.po-filter-chip,
.filter-btn {
min-height: 32px;
padding: 5px 12px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: var(--shadow-xs);
color: var(--muted);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.wo-chip:hover:not(:disabled),
.po-filter-chip:hover:not(:disabled),
.filter-btn:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface);
color: var(--text);
transform: translateY(-1px);
}
.wo-chip:active:not(:disabled),
.filter-btn:active:not(:disabled) {
transform: translateY(0);
}
.wo-chip.is-active,
.po-filter-chip.is-active,
.filter-btn.is-active {
border-color: var(--accent);
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 1px 3px rgba(8, 127, 120, 0.28);
}
.wo-chip-count,
.filter-count {
font-size: 11px;
font-weight: 650;
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
.wo-chip.is-active .wo-chip-count,
.filter-btn.is-active .filter-count {
opacity: 0.85;
}
/* A jcstatus chip carries the same dot the table draws in front of a jobcard
number, so the colours have a legend where you would look for one. On the
teal of an active chip every one of those hues loses its contrast, so there
the dot gets a ring to sit in and keeps its own colour either way. */
.wo-chip.is-active .jc-dot {
box-shadow: 0 0 0 1.5px var(--on-accent-ring);
}
/* Hours ↔ Financial switch: a segmented control, matching .wo-tabs. */
.value-mode-toggle {
min-height: 32px;
margin-left: auto;
padding: 3px;
display: inline-flex;
gap: 2px;
flex: none;
border: 1px solid var(--line-soft);
border-radius: var(--r-pill);
background: var(--surface-sunken);
}
.value-mode-btn {
min-height: 26px;
padding: 4px 13px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
box-shadow: none;
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.value-mode-btn:hover:not(:disabled) {
border: 0;
background: var(--surface-veil);
color: var(--text);
}
.value-mode-btn.is-active {
background: var(--surface);
color: var(--accent-hover);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
/* No mode matches the columns on screen (both kinds showing, picked by hand
in the column chooser): the pill fades but stays clickable, and either
button puts its mode's columns back. */
.value-mode-toggle.is-mixed {
opacity: 0.55;
}
.value-mode-toggle.is-mixed:hover,
.value-mode-toggle.is-mixed:focus-within {
opacity: 1;
}
/* The hours and financial figures each have their own column now (master.html
hides the other mode's pair). Only the invoiced total under Review still
holds both in one cell: the mode the columns show picks its own, and a mix
stacks the two. */
[data-po-table="tasks"] .col-mode-hours,
[data-po-table="tasks"] .col-mode-financial {
display: block;
}
[data-po-table="tasks"][data-value-mode-shown="hours"] .col-mode-financial,
[data-po-table="tasks"][data-value-mode-shown="financial"] .col-mode-hours {
display: none;
}
/* --- Search ------------------------------------------------------------- */
.wo-search {
margin-bottom: 14px;
}
.wo-search input[type="search"] {
width: 100%;
max-width: 480px;
min-height: 38px;
padding: 8px 13px;
border-radius: var(--r-md);
font-size: 14px;
}
/* While search results occupy the New tab's table, the column sort/filter
controls still reference the original browse rows, so they are inert. */
.wo-table.wo-search-active thead .filter-table-header,
.wo-disabled {
pointer-events: none;
opacity: 0.4;
}
/* The summary strip sits before the table, so it is reached through the panel
rather than as a sibling selector. It describes state that applies to the
browse rows, which the search results have replaced. */
.wo-panel:has(.wo-table.wo-search-active) .filter-summary {
display: none;
}
/* ==========================================================================
07 TABLES
========================================================================== */
table {
border-collapse: collapse;
}
/* The scroll box is the card: it owns the border, radius, shadow and the
clipping, so the table inside can stay a plain grid of cells. A max-height
also makes it a real scroll container, which is what the sticky header and
totals row need to pin against — without one the element scrolls with the
page and `position: sticky` has nothing to hold on to. */
.table-scroll {
width: 100%;
max-height: min(72vh, 880px);
overflow: auto;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
overscroll-behavior: contain;
}
.overview-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
/* A table outside a scroll box draws its own card. border-radius has no
visible effect while border-collapse is "collapse", and an ancestor's
overflow-clip can't be relied on for table backgrounds, so the corners are
rounded on the actual outer cells. Inside .table-scroll the wrapper is
already the card, so the table drops its own frame again. */
.overview-table {
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
}
.overview-table thead tr:first-child th:first-child { border-top-left-radius: var(--r-lg); }
.overview-table thead tr:first-child th:last-child { border-top-right-radius: var(--r-lg); }
.overview-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.overview-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
.overview-table tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.overview-table tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
.table-scroll > .overview-table {
border: 0;
border-radius: 0;
box-shadow: none;
}
.table-scroll > .overview-table th,
.table-scroll > .overview-table td {
border-radius: 0;
}
/* The pinned totals paint two pixels of their own background past their
bottom edge, which the scroll box clips away. A scroll box whose height
lands between whole pixels -- min(70vh, 760px) at most window heights, and
any browser zoom that is not 100% -- can leave the sticky row a fraction
short of the bottom, and the row scrolling underneath shows through the gap
as a sliver of itself. This leaves nothing for that to expose. */
.table-scroll > .overview-table tfoot td,
.table-scroll > .overview-table tfoot th {
box-shadow: 0 2px 0 var(--accent-soft);
}
.overview-table th,
.overview-table td {
border: 0;
border-bottom: 1px solid var(--line-soft);
text-align: left;
}
.overview-table th {
min-height: 40px;
padding: 9px 12px;
background: var(--surface-subtle);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
.overview-table td {
padding: 9px 12px;
color: var(--text-secondary);
font-size: 13px;
vertical-align: middle;
}
/* Header pins to the top of the scroll box.
Anchored to the table's own thead with a child combinator. As a plain
descendant it also matched the jobcards table nested inside an expanded
row, and at (0,1,2) it beat that table's own "position: static" at (0,1,1),
so a nested header detached and floated down through its own rows, or
pinned to the top of the page's scroll box. */
.overview-table > thead th {
position: sticky;
top: 0;
z-index: var(--z-sticky-cell);
border-bottom: 1px solid var(--line);
}
.overview-table tbody tr:last-child td {
border-bottom: 0;
}
.overview-table tbody tr {
transition: background-color var(--t-fast) var(--ease);
}
.overview-table tbody tr:hover {
background: var(--row-hover);
}
.overview-table tbody tr:focus-within {
background: var(--row-focus);
box-shadow: inset 2px 0 var(--accent);
}
.overview-table a {
color: var(--accent-hover);
font-weight: 620;
}
.overview-table a:hover {
color: var(--accent-press);
text-decoration: underline;
}
/* Totals pin to the bottom of the same scroll box. */
.overview-table tfoot td,
.overview-table tfoot th {
position: sticky;
bottom: 0;
z-index: var(--z-sticky-cell);
padding: 10px 12px;
border-top: 1px solid var(--accent-line);
border-bottom: 0;
background: var(--accent-soft);
color: var(--accent-hover);
font-size: 13px;
font-weight: 700;
}
/* Money and quantity cells: one rule, so every table aligns its figures the
same way instead of restating text-align inline. */
.overview-table th.num,
.overview-table td.num,
.num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.overview-totals-row td:not(:first-child) {
white-space: normal;
}
.overview-totals-row [data-total-for] {
min-width: 0;
font-variant-numeric: tabular-nums;
}
/* A filtered total is two figures: what is on screen, and what it is part of.
They stack, right-aligned on each other, and the words that say which is
which are written once under "Totals" rather than in front of every figure.
Repeated per column they had to be 10px to fit a 92px money column, and a
10px grey line wedged under a 13px bold one is what made the pair read as
squeezed no matter how much air it actually had. */
.table-total-current,
.table-total-overall {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.table-total-current {
color: var(--accent-hover);
font-weight: 750;
line-height: 1.25;
}
.table-total-overall {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
/* 1.45 keeps roughly 4px between the ink and either edge of a box that
clips, so nothing about the line can read as shaved. */
line-height: 1.45;
}
/* Our own display:block would otherwise beat the UA's [hidden] rule. */
.table-total-overall[hidden],
.table-total-caption[hidden] {
display: none;
}
/* The words for the second line of figures, under the Totals label. */
.table-total-caption {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
line-height: 1.45;
letter-spacing: 0;
}
/* Section separator rows (PO groupings, invoice sections). */
.section-row td {
padding: 9px 12px;
border-top: 1px solid var(--line);
background: var(--surface-subtle);
color: var(--text);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
}
.wo-table-empty-cell,
.filter-table-empty td,
.labour-empty-row td,
.parts-empty-row td {
padding: 26px 14px;
color: var(--muted);
font-size: 13px;
text-align: center;
}
/* Consumables: a group can span several physical rows via rowspan, so the
seam between groups is drawn explicitly rather than per row. */
.consumables-table tr.consumable-group-shaded > td {
background: var(--surface-subtle);
}
.consumables-table tr.consumable-group-start > td {
border-top: 1px solid var(--line);
}
/* --- Sort + filter engine ----------------------------------------------- */
.overview-table.filterable-table > thead > tr > th {
padding: 0;
vertical-align: middle;
}
.overview-table.filterable-table > thead > tr > th[data-no-filter="true"] {
padding: 9px 12px;
}
.filter-table-header {
min-height: 40px;
display: grid;
grid-template-columns: minmax(0, 1fr) 32px;
align-items: stretch;
}
.filter-table-title {
min-width: 0;
padding: 0 4px 0 12px;
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* The words of the title (master.html wraps them). Shrinkable, so a column
too narrow for its name ends it in an ellipsis on the right, whichever way
the title is aligned; the sort arrow and rank badge beside it keep their
size. The full name is on the title's tooltip. */
.filter-table-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-table-title:hover {
background: var(--accent-wash);
color: var(--accent-hover);
}
.filter-table-heading.filter-table-sorted {
background: var(--accent-soft);
}
.filter-table-heading.filter-table-sorted .filter-table-title {
color: var(--accent-hover);
font-weight: 750;
}
.filter-table-button {
width: 28px;
min-width: 28px;
min-height: 28px;
margin: 6px 4px 6px 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--r-xs);
background: transparent;
box-shadow: none;
color: var(--faint);
cursor: pointer;
}
.filter-table-button:hover:not(:disabled),
.filter-table-button:focus-visible {
border: 0;
background: var(--tint);
color: var(--text);
}
.filter-table-filtered .filter-table-button {
background: var(--accent-soft);
color: var(--accent-hover);
}
.filter-table-caret {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4.5px solid currentColor;
}
/* A filtered column swaps its caret for a funnel, so "this column is hiding
rows" is readable from the glyph itself and not only from the tint behind
it -- which is easy to miss on a wide table, and invisible to anyone who
cannot pick the accent out against the header. */
.filter-table-filtered .filter-table-caret {
width: 9px;
height: 9px;
border: 0;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 62% 42%, 62% 100%, 38% 84%, 38% 42%);
}
/* Sort direction indicator, drawn after the label text. */
.filter-table-sorted .filter-table-title::after {
content: "";
order: 1;
flex: 0 0 auto;
width: 0;
height: 0;
margin-left: 5px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
}
.filter-table-heading[data-sort-direction="asc"] .filter-table-title::after {
border-bottom: 4.5px solid var(--accent-hover);
}
.filter-table-heading[data-sort-direction="desc"] .filter-table-title::after {
border-top: 4.5px solid var(--accent-hover);
}
/* Rank badge for multi-column sorts. */
.filter-table-sort-badge {
order: 2;
min-width: 15px;
height: 15px;
margin-left: 4px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 4px;
background: var(--accent);
color: var(--on-accent);
font-size: 9px;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* --- Active-state summary ------------------------------------------------
Sits directly above its table and names every active sort and filter, so
the state is legible without scrolling the column back into view. Hidden
entirely while the table is untouched, and so costs nothing by default. */
.filter-summary {
margin: 0 0 10px;
padding: 8px 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
border: 1px solid var(--accent-line);
border-radius: var(--r-md);
background: var(--accent-soft);
}
.filter-summary-chips {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.filter-summary-meta {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.filter-summary-count {
color: var(--accent-hover);
font-size: 12px;
font-weight: 650;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.filter-summary-clear {
min-height: 28px;
padding: 4px 11px;
border: 1px solid var(--accent-line);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: none;
color: var(--accent-hover);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.filter-summary-clear:hover:not(:disabled),
.filter-summary-clear:focus-visible {
border-color: var(--accent);
background: var(--surface);
color: var(--accent-press);
}
/* One chip = one active sort or filter. The two buttons inside it share a
pill: the body re-opens or flips it, the trailing x removes just that one. */
.filter-chip {
max-width: 100%;
display: inline-flex;
align-items: stretch;
border: 1px solid var(--accent-line);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.filter-chip-rank {
min-width: 20px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
background: var(--accent);
color: var(--on-accent);
font-size: 10px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.filter-chip-body,
.filter-chip-remove {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-size: 12px;
}
.filter-chip-body {
min-width: 0;
min-height: 26px;
padding: 3px 8px;
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text-secondary);
font-weight: 560;
}
.filter-chip-body:hover:not(:disabled),
.filter-chip-body:focus-visible {
border: 0;
background: var(--accent-soft);
color: var(--accent-press);
}
.filter-chip-name {
flex: none;
color: var(--muted);
font-weight: 600;
}
.filter-chip-value {
min-width: 0;
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
font-weight: 680;
}
/* Direction arrow on a sort chip, matching the one drawn in the header. */
.filter-chip-sort .filter-chip-body::after {
content: "";
flex: 0 0 auto;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
}
.filter-chip-sort[data-direction="asc"] .filter-chip-body::after {
border-bottom: 4.5px solid var(--accent-hover);
}
.filter-chip-sort[data-direction="desc"] .filter-chip-body::after {
border-top: 4.5px solid var(--accent-hover);
}
.filter-chip-remove {
width: 24px;
min-width: 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border-left: 1px solid var(--line-soft);
color: var(--faint);
font-size: 14px;
line-height: 1;
}
.filter-chip-remove::before {
content: "\00d7";
}
.filter-chip-remove:hover:not(:disabled),
.filter-chip-remove:focus-visible {
border: 0;
border-left: 1px solid var(--line-soft);
background: var(--danger-soft);
color: var(--danger);
}
/* --- Column menu (appended to , positioned by script) -------------- */
.filter-table-menu {
position: fixed;
z-index: var(--z-menu);
display: grid;
/* minmax(0, ...) so a long column name ellipsizes in the title instead
of widening the track and pushing every row past the right edge. */
grid-template-columns: minmax(0, 1fr);
gap: 10px;
width: min(300px, calc(100vw - 24px));
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface-popover);
box-shadow: var(--shadow-lg);
color: var(--text-secondary);
font-size: 13px;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.filter-table-menu-head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 9px;
border-bottom: 1px solid var(--line-soft);
}
.filter-table-menu-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
font-size: 13.5px;
font-weight: 700;
}
.filter-table-menu-clear {
min-height: 24px;
margin-left: auto;
padding: 2px 9px;
flex: none;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: none;
color: var(--muted);
font-size: 11px;
font-weight: 650;
}
.filter-table-menu-clear:hover:not(:disabled),
.filter-table-menu-clear:focus-visible {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
.filter-table-section,
.filter-table-filter {
display: grid;
gap: 5px;
font-weight: normal;
}
.filter-table-legend {
color: var(--faint);
font-size: 10px;
font-weight: 720;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Sorting used to be reachable only by knowing that the header text itself is
clickable. These name both directions outright and double as the readout of
which one is on. */
.filter-table-sort-choice {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.filter-table-sort-option {
min-height: 32px;
padding: 5px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: none;
color: var(--text-secondary);
font-size: 12px;
font-weight: 620;
}
.filter-table-sort-option:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface);
color: var(--text);
}
.filter-table-sort-option.is-active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-press);
}
.filter-table-sort-glyph {
width: 0;
height: 0;
flex: none;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
}
[data-sort-option="asc"] .filter-table-sort-glyph {
border-bottom: 4.5px solid currentColor;
}
[data-sort-option="desc"] .filter-table-sort-glyph {
border-top: 4.5px solid currentColor;
}
.filter-table-sort-rank {
min-width: 14px;
height: 14px;
padding: 0 3px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border-radius: 4px;
background: var(--accent);
color: var(--on-accent);
font-size: 9px;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.filter-table-input-wrap {
position: relative;
display: block;
}
.filter-table-input-wrap input {
width: 100%;
min-height: 34px;
padding: 6px 30px 6px 10px;
border-radius: var(--r-sm);
font-size: 13px;
}
.filter-table-clear {
position: absolute;
top: 50%;
right: 5px;
width: 20px;
min-width: 20px;
min-height: 20px;
height: 20px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--tint);
box-shadow: none;
color: var(--muted);
font-size: 10px;
transform: translateY(-50%);
}
.filter-table-clear:hover:not(:disabled) {
border: 0;
background: var(--tint-strong);
color: var(--text);
}
.filter-table-values {
padding-top: 10px;
border-top: 1px solid var(--line-soft);
}
.filter-table-value-list {
display: grid;
gap: 1px;
max-height: 240px;
overflow-y: auto;
padding-right: 2px;
overscroll-behavior: contain;
}
/* A value row carries its checkbox, how many rows it is worth, and an "Only"
shortcut. The count and the button occupy the same track: the count steps
aside on hover so the row never reflows as the pointer crosses it. */
.filter-table-value {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 6px;
padding: 3px 6px;
border-radius: var(--r-xs);
font-weight: normal;
}
.filter-table-value:hover {
background: var(--surface-sunken);
}
.filter-table-value-main {
min-width: 0;
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 8px;
align-items: center;
cursor: pointer;
}
.filter-table-value-main input {
width: 14px;
height: 14px;
margin: 0;
}
.filter-table-value-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-table-value-count {
flex: none;
color: var(--faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.filter-table-value-only {
display: none;
min-height: 20px;
padding: 1px 7px;
border: 1px solid var(--accent-line);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: none;
color: var(--accent-hover);
font-size: 10px;
font-weight: 700;
}
.filter-table-value-only:hover:not(:disabled) {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-press);
}
.filter-table-value:hover .filter-table-value-only,
.filter-table-value:focus-within .filter-table-value-only {
display: inline-flex;
}
.filter-table-value:hover .filter-table-value-count,
.filter-table-value:focus-within .filter-table-value-count {
display: none;
}
.filter-table-value-all {
margin-bottom: 5px;
padding-bottom: 7px;
border-bottom: 1px solid var(--line-soft);
border-radius: var(--r-xs) var(--r-xs) 0 0;
font-weight: 650;
}
.filter-table-value-group .filter-table-value-text {
color: var(--muted);
}
.filter-table-reset-state {
width: 100%;
min-height: 34px;
padding: 7px 10px;
border: 1px solid var(--accent-line);
border-radius: var(--r-sm);
background: var(--accent-soft);
box-shadow: none;
color: var(--accent-hover);
font-size: 12px;
font-weight: 650;
}
.filter-table-reset-state:hover:not(:disabled),
.filter-table-reset-state:focus-visible {
border-color: var(--accent);
background: var(--accent-soft-hover);
color: var(--accent-press);
}
/* Superseded by the per-menu reset button above. */
.filter-table-reset-all {
display: none;
}
/* --- Header right-click menu -------------------------------------------- */
.filter-context-menu {
position: fixed;
z-index: var(--z-menu);
display: grid;
gap: 1px;
width: max-content;
min-width: 200px;
max-width: min(300px, calc(100vw - 24px));
padding: 5px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface-popover);
box-shadow: var(--shadow-lg);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.filter-context-item {
min-height: 30px;
padding: 5px 10px;
display: block;
width: 100%;
border: 0;
border-radius: var(--r-xs);
background: transparent;
box-shadow: none;
color: var(--text-secondary);
font-size: 12.5px;
font-weight: 560;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-context-item:hover:not(:disabled),
.filter-context-item:focus-visible {
border: 0;
background: var(--accent-soft);
color: var(--accent-press);
}
.filter-context-item.is-active {
color: var(--accent-hover);
font-weight: 700;
}
.filter-context-item:disabled {
background: transparent;
color: var(--faint);
opacity: 0.5;
}
.filter-context-separator {
height: 1px;
margin: 4px 6px;
background: var(--line-soft);
}
/* --- Column chooser ------------------------------------------------------ */
/* The cells stay in the DOM (the engine and the page scripts keep reading
them), so hiding has to beat any display a cell's own component sets. */
.overview-table > * > tr > .col-hidden,
.overview-table > colgroup > col.col-hidden {
display: none !important;
}
/* The fixed-layout tables carry a floor equal to the sum of all their
columns. A fixed-layout table can never shrink below the columns it still
shows anyway, so with some of them hidden the floor only gets in the way
of the one reason to hide them: fitting the rest on the screen. */
table.overview-table.has-hidden-columns {
min-width: 0;
}
/* Sticky in both directions and zero high: it takes no room in the scroll
box, and keeps the button over the header's visible right end. */
.column-chooser-dock {
position: sticky;
top: 0;
left: 0;
z-index: calc(var(--z-sticky-cell) + 1);
height: 0;
}
.column-chooser-button {
position: absolute;
top: 6px;
right: 6px;
min-width: 28px;
min-height: 28px;
padding: 0 6px;
gap: 4px;
border: 0;
border-radius: var(--r-xs);
background: var(--surface-subtle);
box-shadow: none;
color: var(--faint);
cursor: pointer;
}
.column-chooser-button svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.column-chooser-button:hover:not(:disabled),
.column-chooser-button:focus-visible,
.column-chooser-button[aria-expanded="true"] {
border: 0;
background: var(--surface-sunken-hover);
color: var(--text);
}
.column-chooser-button.has-hidden,
.column-chooser-button.has-hidden:hover:not(:disabled) {
background: var(--accent-soft);
color: var(--accent-hover);
}
.column-chooser-count {
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.overview-table.filterable-table > thead > tr > th.column-chooser-room {
padding-right: 36px;
}
.column-chooser {
position: fixed;
z-index: var(--z-menu);
display: grid;
gap: 8px;
width: min(260px, calc(100vw - 24px));
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface-popover);
box-shadow: var(--shadow-lg);
color: var(--text-secondary);
font-size: 13px;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.column-chooser-head {
display: flex;
align-items: baseline;
gap: 8px;
padding-bottom: 9px;
border-bottom: 1px solid var(--line-soft);
}
.column-chooser-title {
color: var(--text);
font-size: 13.5px;
font-weight: 700;
}
.column-chooser-meta {
color: var(--faint);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.column-chooser-head .filter-table-menu-clear {
align-self: center;
}
.column-chooser-list {
max-height: min(360px, 60vh);
margin: 0 -6px;
display: grid;
gap: 1px;
overflow-y: auto;
}
.column-chooser-option {
min-height: 30px;
padding: 4px 6px;
display: flex;
align-items: center;
gap: 9px;
border-radius: var(--r-xs);
cursor: pointer;
}
.column-chooser-option:hover {
background: var(--accent-soft);
}
.column-chooser-option:has(input:disabled) {
cursor: default;
}
.column-chooser-option:has(input:disabled):hover {
background: transparent;
}
.column-chooser-option input {
flex: none;
margin: 0;
}
.column-chooser-label {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.column-chooser-option:has(input:not(:checked)) .column-chooser-label {
color: var(--muted);
}
.column-chooser-tag {
flex: none;
padding: 1px 7px;
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent-hover);
font-size: 10.5px;
font-weight: 650;
}
.column-chooser-hint {
margin: 0;
padding-top: 8px;
border-top: 1px solid var(--line-soft);
color: var(--faint);
font-size: 11.5px;
}
/* Two pill actions share the column menu's header; only the first one takes
the push to the right. */
.filter-table-menu-clear:not([hidden]) + .filter-table-menu-hide {
margin-left: 0;
}
/* ==========================================================================
08 NESTED TABLES
========================================================================== */
/* Expanded jobcards under a labour package. */
.labour-jobcards-row > td {
padding: 10px 12px 14px 46px;
background: var(--surface-subtle);
}
.labour-jobcards-table {
width: 100%;
/* Without this the column widths below are only hints: a long observation
claims whatever it wants, the nested table grows past the cell holding
it, and the parent table grows with it, so expanding one row put the
whole page into horizontal scroll. Fixed layout makes the widths hold
and the text wrap inside them. */
table-layout: fixed;
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-md);
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
}
/* Corners rounded on the outer cells rather than by clipping the table, the
same way .overview-table does it. overflow:hidden here would also clip the
communications popover, which is positioned out of a cell and is taller
than the row it hangs off, so a note was cut in half by the table edge. */
.labour-jobcards-table thead tr:first-child th:first-child { border-top-left-radius: var(--r-md); }
.labour-jobcards-table thead tr:first-child th:last-child { border-top-right-radius: var(--r-md); }
.labour-jobcards-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); }
.labour-jobcards-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-md); }
.labour-jobcards-table th {
padding: 8px 11px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--surface-subtle);
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.labour-jobcards-table td {
padding: 9px 11px;
border: 0;
border-bottom: 1px solid var(--line-soft);
color: var(--text-secondary);
font-size: 12px;
line-height: 1.45;
vertical-align: top;
overflow-wrap: anywhere;
}
.labour-jobcards-table tbody tr:last-child td {
border-bottom: 0;
}
/* The number column opts out of the anywhere-wrapping the prose columns need:
every hyphen in 4-1-8-1 is a break opportunity, and it was being taken. */
.labour-jobcards-table td:first-child {
overflow-wrap: normal;
white-space: nowrap;
}
.labour-jobcards-table th:nth-child(5),
.labour-jobcards-table th:nth-child(6),
.labour-jobcards-table td:nth-child(5),
.labour-jobcards-table td:nth-child(6) {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.labour-jobcards-table .jc-pill {
align-items: flex-start;
white-space: normal;
}
.labour-jobcards-table .jc-dot {
margin-top: 0.42em;
}
/* --- Hover panels (communications, installation summary) ---------------- */
.communications-container,
.installation-smry-container {
position: relative;
display: inline-block;
}
img.communications {
width: 18px;
height: auto;
opacity: 0.75;
transition: opacity var(--t-fast) var(--ease);
}
.communications-container:hover img.communications {
opacity: 1;
}
/* The used quantity is the trigger here, and it used to look like any other
number, so nobody knew there was a breakdown behind it. The dotted
underline and the small "i" mark it as something to point at. */
.installation-smry-container {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: help;
text-decoration: underline dotted var(--muted);
text-underline-offset: 3px;
}
.installation-smry-container::after {
content: "i";
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
border: 1px solid var(--accent-line);
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-size: 9.5px;
font-style: italic;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.installation-smry-container:hover::after,
.installation-smry-container:focus-visible::after {
background: var(--accent);
color: var(--surface);
}
.installation-smry-container:focus-visible,
.communications-container:focus-visible {
outline: 2px solid var(--accent-line);
outline-offset: 2px;
border-radius: 3px;
}
/* A fixed width, so long text wraps inside the panel instead of running out
of the screen. The cells these panels sit in are nowrap (.col-ident,
.num), and white-space inherits, which is what kept a long jobcard message
on one line. placeHoverPanel in master.html pins the panel to the
viewport, where the table's scroll box cannot clip it; the absolute
position below is only the fallback for pages without that script. */
.communications-table,
.installation-smry-table {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: var(--z-popover);
margin-left: 8px;
border: 1px solid var(--line);
border-radius: var(--r-md);
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
box-shadow: var(--shadow-lg);
font-size: 12px;
text-align: left;
white-space: normal;
cursor: auto;
overflow: hidden;
}
.communications-table.is-floating,
.installation-smry-table.is-floating {
position: fixed;
margin: 0;
}
.communications-table {
width: min(520px, calc(100vw - 32px));
}
.installation-smry-table {
width: min(440px, calc(100vw - 32px));
}
.communications-container:hover .communications-table,
.communications-container:focus-within .communications-table,
.installation-smry-container:hover .installation-smry-table,
.installation-smry-container:focus-within .installation-smry-table {
display: table;
}
.communications-table th,
.installation-smry-table th {
padding: 8px 11px;
border-bottom: 1px solid var(--line);
background: var(--surface-subtle);
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.communications-table td,
.installation-smry-table td {
padding: 8px 11px;
border-bottom: 1px solid var(--line-soft);
color: var(--text-secondary);
vertical-align: top;
overflow-wrap: break-word;
line-height: 1.45;
}
/* Date and sender stay on one line; the message and observation are what
wrap. */
.communications-table td:not(:last-child),
.installation-smry-table tr:not(.installation-smry-observation) td:first-child {
white-space: nowrap;
}
.installation-smry-table .installation-smry-observation td {
background: var(--surface-subtle);
}
.installation-smry-table .installation-smry-observation td:first-child {
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.communications-table tr:last-child td,
.installation-smry-table tr:last-child td {
border-bottom: 0;
}
/* --- Invoice totals table ----------------------------------------------- */
.totals-table {
width: auto;
border: 1px solid var(--line);
border-radius: var(--r-lg);
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
box-shadow: var(--shadow-md);
font-variant-numeric: tabular-nums;
overflow: hidden;
}
.totals-table th,
.totals-table td {
padding: 10px 20px;
font-size: 13px;
text-align: right;
}
.totals-table th:first-child,
.totals-table td:first-child {
text-align: left;
}
.totals-table thead th {
border-bottom: 1px solid var(--line);
background: var(--surface-subtle);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.totals-table th.totals-col,
.totals-table td.totals-col {
border-left: 1px solid var(--line-soft);
}
.totals-table tbody tr:not(:last-child) td {
border-bottom: 1px solid var(--line-soft);
}
.totals-table tbody td:first-child {
color: var(--text);
font-weight: 600;
}
.totals-table .totals-row td {
border-top: 1px solid var(--accent-line);
background: var(--accent-soft);
color: var(--accent-hover);
font-weight: 750;
}
/* Totals and the workorder dates side by side; the dates drop below once
the totals table (one column per category) takes the full width. */
.invoice-summary {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 14px 28px;
}
/* The dates have no header row, so they are a label/value list in the same
card as .totals-table rather than a table. */
.workorder-dates {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
font-variant-numeric: tabular-nums;
overflow: hidden;
}
.workorder-dates > div {
display: flex;
justify-content: space-between;
gap: 32px;
padding: 10px 20px;
font-size: 13px;
}
.workorder-dates > div:not(:last-child) {
border-bottom: 1px solid var(--line-soft);
}
.workorder-dates dt {
color: var(--text);
font-weight: 600;
}
.workorder-dates dd {
margin: 0;
text-align: right;
white-space: nowrap;
}
/* --- Edit history ------------------------------------------------------- */
.history-entry {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
overflow: hidden;
}
.history-entry-meta {
padding: 10px 12px 2px;
font-size: 13px;
font-weight: 650;
}
.history-entry-target {
padding: 0 12px 10px;
color: var(--muted);
font-size: 12px;
}
.history-change-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid var(--line-soft);
font-size: 12px;
}
.history-change-table th {
padding: 8px 12px;
border-bottom: 1px solid var(--line-soft);
background: var(--surface-subtle);
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
}
.history-change-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--line-soft);
text-align: left;
vertical-align: top;
}
.history-change-table tr:last-child td {
border-bottom: 0;
}
.history-entry-empty {
margin: 0;
padding: 10px 12px 12px;
color: var(--muted);
font-size: 13px;
}
/* Blue Eye classification: the per-invoice prepayment/final buttons reuse
.history-entry-empty as their row. */
#blue-invoice-modal .history-entry-empty button {
margin-right: 8px;
}
/* ==========================================================================
09 REVIEW CONTROLS
The per-row code assignment used on Project Overview and JORT. It is the
densest interaction in the app, so it gets a tight, fixed grid: the same
field is always in the same place, row after row.
========================================================================== */
.code-review-form,
.part-review-controls {
width: 100%;
min-width: 0;
display: grid;
/* Code, Note and Save, the same three places on every row: the Note is
the same width whether or not the row's code also asks for a quantity
or a price. Those used to take a track of their own beside the Note,
which shrank it on just the rows that had them and pushed Save out to
a different spot, so no two kinds of row lined up. They now sit on a
line of their own under the Note (.code-amounts below). */
grid-template-columns: minmax(80px, 100px) minmax(64px, 1fr) auto;
align-items: center;
gap: 6px;
}
/* Placed rather than auto-flowed, so nothing that is display:none (a hidden
amount, a collapsed error) can shift the others along. */
.code-review-form > .code-select,
.code-review-form > .code-note,
.code-review-form > .code-review-button,
.part-review-controls > .code-select,
.part-review-controls > .code-note,
.part-review-controls > .code-review-button {
grid-row: 1;
}
.code-review-form > .code-select,
.part-review-controls > .code-select { grid-column: 1; }
.code-review-form > .code-note,
.part-review-controls > .code-note { grid-column: 2; }
.code-review-form > .code-review-button,
.part-review-controls > .code-review-button { grid-column: 3; }
/* Quantity and price, starting under the Note's left edge. They may also use
the width under Save, so a narrow Review column still holds both. Rows
without them get no second line at all. No visible labels: "Total" was
not true for every code, so the fields go by their placeholders. */
.code-review-form > .code-amounts,
.part-review-controls > .code-amounts {
grid-row: 2;
grid-column: 2 / -1;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
}
.code-amount {
min-width: 0;
display: inline-flex;
align-items: center;
}
/* A hidden field takes its wrapper with it, and an amounts line with nothing
left in it goes too, so it never leaves an empty gap under the row. */
.code-amount:has(> input[hidden]) {
display: none;
}
.code-amounts:not(:has(input:not([hidden]))) {
display: none;
}
/* A part's blocked qty and price (a processing-script amount, shown
disabled) are already in the row's To invoice column, as the amount and
its qty x unit price. Shown here as well they put the same figure on screen
twice, in a field that looks editable and is not. Only a code that asks for
them (enabled) brings them into the Review cell. Labour keeps them: its
table has no such column. Disabled is never a transient state here, a save
does not disable the fields. */
.part-review-controls .code-amount:has(> input:disabled),
.part-review-controls > .code-amounts:not(:has(input:enabled)) {
display: none;
}
.code-review-form .code-select,
.code-review-form input,
.part-review-controls > .code-select,
.part-review-controls > input,
.part-review-controls .code-amount > input {
width: 100%;
min-width: 0;
min-height: 32px;
padding: 5px 9px;
font-size: 12px;
}
.code-review-form .code-amount > input,
.part-review-controls .code-amount > input {
width: 76px;
text-align: right;
}
.code-review-form .code-select,
.part-review-controls > .code-select {
padding-right: 22px;
background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
}
.part-review-controls > .code-review-error-msg {
grid-column: 1 / -1;
}
/* Reserved space, not conditional layout: the button appears in place when a
row needs a manual save, and the grid never reflows underneath the cursor. */
.code-review-button {
width: auto;
min-width: 56px;
min-height: 32px;
padding: 5px 11px;
border-color: transparent;
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 1px 2px rgba(8, 127, 120, 0.22);
font-size: 12px;
font-weight: 680;
white-space: nowrap;
visibility: hidden;
}
.code-review-button:hover:not(:disabled) {
border-color: transparent;
background: var(--accent-hover);
}
.code-review-button.needs-manual-save {
visibility: visible;
}
/* The auto-save countdown (AUTO_SAVE_DELAY_MS in projectOverview.html). The
button shows while it runs, with a bar draining along its bottom edge:
click it to save now, or click the note to hold the save and type first. */
.code-review-button.is-counting {
position: relative;
overflow: hidden;
visibility: visible;
}
.code-review-button.is-counting::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--on-accent-bar);
transform-origin: left;
animation: code-autosave-drain var(--autosave-ms, 2500ms) linear forwards;
}
@keyframes code-autosave-drain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
.code-note.is-inviting {
border-style: dashed;
border-color: var(--accent);
background: var(--accent-soft);
}
.code-note.is-inviting::placeholder {
color: var(--accent-press);
opacity: 1;
}
.code-review-form input:disabled,
.code-price:disabled,
.code-qty:disabled {
border-color: var(--line-soft);
background: var(--surface-sunken);
color: var(--muted);
font-weight: 560;
}
/* Save feedback — a ring, never a layout change. It lasts only as long as
the row is held after a save (holdSavedRow in projectOverview.html), so it
says "this one, just now" instead of lingering on whatever view the row
turns up in. */
.code-review-saved {
outline: 2px solid var(--go);
outline-offset: -2px;
border-radius: var(--r-sm);
transition: outline-color var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.code-review-saved > td {
background: var(--go-soft);
}
/* A held row no longer matches the active chip filter, but stays on screen
until it is released. Collapsed detail rows keep their hidden attribute. */
.overview-table tbody tr[data-hold]:not([hidden]) {
display: table-row !important;
}
.overview-table tbody tr.is-leaving {
opacity: 0;
outline-color: transparent;
}
.code-review-error-msg.is-success {
color: var(--go);
}
.code-review-error-msg.is-success::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-right: 5px;
vertical-align: -1px;
background: currentColor;
-webkit-mask: var(--glyph-check) center / 11px 11px no-repeat;
mask: var(--glyph-check) center / 11px 11px no-repeat;
}
.code-review-saving {
opacity: 0.55;
}
.code-review-error,
.field-error {
outline: 2px solid var(--danger);
outline-offset: -2px;
border-radius: var(--r-sm);
}
.code-review-error-msg {
display: block;
margin-top: 2px;
color: var(--danger);
font-size: 11.5px;
font-weight: 600;
}
.review-note {
margin-top: 4px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.35;
white-space: normal;
}
/* Read-only mirror of the same three fields, in the same three positions. */
.review-readonly {
width: 100%;
display: grid;
grid-template-columns: minmax(86px, 1fr) 84px 92px 60px;
gap: 6px;
align-items: center;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.review-readonly[title] {
cursor: help;
}
.review-readonly-code {
font-weight: 650;
}
.review-readonly-qty,
.review-readonly-price,
.review-readonly-margin {
text-align: right;
}
.review-readonly-not-invoiced {
grid-column: span 2;
color: var(--faint);
font-style: italic;
text-align: right;
}
.labour-review-locked,
.locked {
color: var(--faint);
font-size: 12px;
font-style: italic;
}
/* --- Matching, as the table shows it ------------------------------------
The table no longer matches anything itself; the match workspace does. What
it keeps is the state and the way in: an unmatched part says so where its
quote would be and opens the workspace with itself picked, and a quote a
person matched says so and opens the workspace on itself. */
.part-match-button {
width: 100%;
max-width: 200px;
min-height: 32px;
padding: 5px 11px 5px 9px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px dashed var(--accent);
border-radius: var(--r-sm);
background: var(--accent-soft);
color: var(--accent-press);
box-shadow: none;
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.part-match-button:hover:not(:disabled) {
border-style: solid;
border-color: var(--accent);
background: var(--accent-soft-hover);
color: var(--accent-press);
}
.part-match-button-icon {
width: 15px;
height: 15px;
flex: none;
background: currentColor;
-webkit-mask: var(--glyph-link) center / 15px 15px no-repeat;
mask: var(--glyph-link) center / 15px 15px no-repeat;
}
/* Nothing on the part's jobcard and no JC0 quote: it still opens the
workspace, to see what was quoted, but reads as a question rather than a
job waiting to be done. */
.part-match-button.is-no-fit {
border-color: var(--line-strong);
background: var(--surface);
color: var(--muted);
font-weight: 560;
}
.part-match-button.is-no-fit:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface-hover);
color: var(--text-secondary);
}
.match-origin-tag {
padding: 1px 7px;
border-radius: var(--r-pill);
background: var(--surface-sunken);
color: var(--muted);
font-size: 10.5px;
font-weight: 650;
white-space: nowrap;
}
.match-origin-tag.is-manual {
background: var(--accent-soft);
color: var(--accent-press);
}
/* "12 fitted items · by hand": only on quotes a person matched parts to.
Quiet, an outline in the muted text colour, because it is detail you may
look at rather than something the row still needs; it tints only while
its list is open. */
.part-hand-toggle {
min-height: 24px;
padding: 1px 8px 1px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--muted);
box-shadow: none;
font-size: 11.5px;
font-weight: 620;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.part-hand-toggle:hover:not(:disabled) {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--accent-press);
}
.part-hand-count {
color: var(--text-secondary);
}
.part-hand-meta::before {
content: "·";
margin-right: 6px;
}
.part-hand-toggle:hover:not(:disabled) .part-hand-count,
.part-hand-toggle[aria-expanded="true"] .part-hand-count {
color: inherit;
}
.part-hand-caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--t-fast) var(--ease);
}
.part-hand-toggle[aria-expanded="true"],
.part-hand-toggle[aria-expanded="true"]:hover:not(:disabled) {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-press);
}
.part-hand-toggle[aria-expanded="true"] .part-hand-caret {
transform: rotate(180deg);
}
/* On a line of its own under the code and note (and under the amounts, when
the row has them), starting where the code does, so the fields above keep
the same width as on every other row. No fixed row: it takes the first
full-width line that is free. */
.part-review-controls > .part-hand-toggle {
grid-column: 1 / -1;
justify-self: start;
}
.part-review-cell > .part-hand-toggle {
margin-top: 6px;
}
/* --- A quote's hand-matched parts, opened under the quote ----------------
Full width, like the labour tab's jobcard row, so a dozen of them read as
a list rather than being squeezed into the Review cell. */
.workorder-detail-page .parts-overview-table > tbody > tr.part-fitted-detail-row > td {
height: auto;
padding: 10px 12px 14px 50px;
background: var(--surface-subtle);
text-align: left;
overflow-wrap: normal;
}
.part-fitted-panel-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 14px;
margin-bottom: 8px;
}
.part-fitted-panel-title {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
color: var(--text);
font-size: 12.5px;
font-weight: 680;
}
.part-fitted-panel-meta {
color: var(--muted);
font-size: 12px;
font-weight: 520;
font-variant-numeric: tabular-nums;
}
.part-fitted-panel-open {
min-height: 28px;
padding: 3px 11px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--accent-press);
box-shadow: var(--shadow-xs);
font-size: 12px;
font-weight: 650;
}
.part-fitted-panel-open:hover:not(:disabled) {
border-color: var(--accent-line);
background: var(--accent-soft);
}
.part-fitted-table .pf-col-jobcard { width: 96px; }
.part-fitted-table .pf-col-pn { width: 150px; }
.part-fitted-table .pf-col-description { width: auto; }
.part-fitted-table .pf-col-qty { width: 84px; }
.part-fitted-table .pf-col-cost { width: 84px; }
.part-fitted-table .pf-col-received { width: 96px; }
.part-fitted-table .pf-col-owner { width: 150px; }
.part-fitted-table .pf-col-match { width: 84px; }
.part-fitted-table .pf-col-action { width: 150px; }
/* Qualified with .overview-table because .po-page .overview-table td sets
vertical-align: top at (0,2,1), later in this file, and it reaches these
nested cells too. */
.overview-table .part-fitted-table tbody td {
vertical-align: middle;
overflow-wrap: break-word;
}
/* The labour jobcards table right-aligns and greys its 5th and 6th columns
(its hours); here those are cost and a date, so they read like the rest. */
.part-fitted-table th:nth-child(5),
.part-fitted-table th:nth-child(6),
.part-fitted-table td:nth-child(5),
.part-fitted-table td:nth-child(6) {
color: inherit;
text-align: left;
}
.part-fitted-table th:nth-child(5),
.part-fitted-table th:nth-child(6) {
color: var(--muted);
}
.part-fitted-table th.num,
.part-fitted-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.part-fitted-table .pf-pn {
color: var(--text);
font-weight: 620;
}
.part-fitted-table .pf-action {
text-align: right;
}
.part-fitted-table tbody tr:hover td {
background: var(--surface-hover);
}
.part-unmatch-button {
min-height: 26px;
padding: 2px 11px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--text-secondary);
box-shadow: none;
font-size: 11.5px;
font-weight: 650;
white-space: nowrap;
}
.part-unmatch-button:hover:not(:disabled) {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
/* Armed: the quote is coded and this click would clear that code. */
.part-unmatch-button.is-armed,
.part-unmatch-button.is-armed:hover:not(:disabled) {
border-color: var(--danger);
background: var(--danger);
color: var(--on-accent);
}
/* A part just unmatched, back in the table under its old quote. */
.overview-table tbody tr.is-just-unmatched > td {
background: var(--attention-soft);
transition: background-color var(--t-slow) var(--ease);
}
/* Cells that host a review form must wrap, whatever density the surrounding
table uses. */
.labour-review-cell,
.part-review-cell {
white-space: normal;
}
/* A form used purely as a submit wrapper inside a table cell. */
.wo-track-form,
.jort-resolve-form,
.jort-delete-remark-form {
margin: 0;
}
.history-button {
width: 100%;
min-height: 32px;
padding: 5px 9px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-xs);
font-size: 12px;
font-weight: 600;
}
.history-button:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--surface-hover);
}
.history-button:disabled {
border-color: var(--line-soft);
background: var(--surface-sunken);
color: var(--faint);
box-shadow: none;
}
.labour-row-toggle {
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-xs);
color: var(--accent-hover);
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.labour-row-toggle:disabled {
color: var(--faint);
}
.open-jobcard-count {
font-weight: 650;
font-variant-numeric: tabular-nums;
text-align: center;
}
/* Green to red by the share still open, computed by the server. */
.open-jobcard-count[style] {
color: var(--open-jobcard-color);
}
.parts-chapter {
margin-top: 16px;
}
.parts-chapter summary {
padding: 8px 0;
font-weight: 650;
cursor: pointer;
}
/* ==========================================================================
10 STATUS
One badge geometry, many meanings. Every pill in the app is the same shape
and weight, so colour alone carries the signal.
========================================================================== */
.wo-badge,
.cop-badge,
.status-badge,
.jobcard-status-badge,
.caution-severity-badge,
.driver-badge,
.chip,
.wo-flag-feedback {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--r-pill);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.5;
white-space: nowrap;
}
/* Entity */
.wo-badge-jsnl { background: var(--info-soft); color: var(--info-ink); }
.wo-badge-jsde { background: var(--attention-soft); color: var(--amber-ink); }
.wo-badge-jsfr { background: var(--violet-soft); color: var(--violet); }
.wo-badge-other { background: var(--surface-sunken); color: var(--muted); }
.wo-badge-fitted { background: var(--go-soft); color: var(--go); }
.wo-badge-quoted { background: var(--surface-sunken); color: var(--muted); }
.cop-badge {
margin-left: 4px;
background: var(--amber-soft);
color: var(--amber-ink);
}
/* Handover card status */
.status-badge {
background: var(--surface-sunken);
color: var(--muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status-badge-future,
.status-badge-open { background: var(--accent-soft); color: var(--accent-hover); }
.status-badge-waiting { background: var(--attention-soft); color: var(--attention); }
.status-badge-blocked { background: var(--danger-soft); color: var(--danger); }
.status-badge-done { background: var(--go-soft); color: var(--go); }
/* Blue's own jobcard status, shared by the board card and its modal. */
.jobcard-status-open { background: var(--accent-soft); color: var(--accent-hover); }
.jobcard-status-awaiting_validation { background: var(--attention-soft); color: var(--attention); }
.jobcard-status-performed { background: var(--go-soft); color: var(--go); }
.jobcard-status-deferred { background: var(--surface-sunken); color: var(--muted); }
.jobcard-status-not_complied { background: var(--danger-soft); color: var(--danger); }
.jobcard-status-other { background: var(--surface-sunken); color: var(--muted); }
.jobcard-status-badge.in-modal {
position: absolute;
top: 12px;
right: 18px;
z-index: 2;
}
/* The badge is out of the form's flow, so the first field is pushed clear. */
.jobcard-status-badge.in-modal + .card-edit-form {
margin-top: 24px;
}
.jobcard-status-badge.on-board {
position: absolute;
bottom: 11px;
right: 15px;
}
/* Job-card status pill in table cells: a coloured dot plus the raw status. */
.jc-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.jc-dot {
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
}
/* Five statuses, five hues. In the Parts table the dot is the whole signal --
the status column was folded into the jobcard number and the word now only
lives on the tooltip -- so two statuses sharing a colour cannot be told
apart at all. Awaiting Validation takes the blue rather than a second warm
tone: the warm end is already Open, Deferred and Not Complied With, and
"waiting on a signature" is a different kind of state from "there is still
work to do". */
.jc-performed .jc-dot { background: var(--go); }
.jc-open .jc-dot { background: var(--amber); }
.jc-awaiting_validation .jc-dot { background: var(--info); }
.jc-deferred .jc-dot { background: var(--orange); }
.jc-not_complied .jc-dot { background: var(--danger); }
.jc-other .jc-dot { background: var(--faint); }
/* Next to a labour package's Open count when any of its jobcards was Deferred
or Not Complied With. The colours are the ones those statuses' dots carry;
Not Complied With wins when both are present. The count's own colour sits
inline on the cell, so the flag sets its own. The negative right margin
gives back the room it takes, so a flagged count stays centred in line
with the unflagged ones above and below it. */
.jc-flag {
width: 12px;
height: 12px;
margin-left: 5px;
margin-right: -17px;
display: inline-block;
vertical-align: -1px;
}
.jc-flag svg {
width: 100%;
height: 100%;
display: block;
}
.jc-flag-deferred { color: var(--orange); }
.jc-flag-not-complied { color: var(--danger); }
/* Workorder status mark. The overview tables carry Blue's status as a symbol in
their first column instead of a column of repeated words. Blue spells it four
ways and no more: Closed, Paid, Cancelled and Open. Each gets its own mark
below, and the status word itself lives on title/aria-label, so the mark
never carries text of its own. */
/* A status Blue has never used draws nothing. Better an empty cell than a mark
the legend cannot explain. */
.wo-status {
display: none;
}
/* One footprint for all four, so the column reads as a single row of marks and
the reference beside it never shifts. Fill and glyph carry the meaning. */
.wo-status-closed,
.wo-status-paid,
.wo-status-cancelled,
.wo-status-open {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 17px;
height: 17px;
border-radius: 5px;
vertical-align: middle;
}
/* Paid is drawn exactly as Closed. Both mean the workorder is done and off the
list, and the difference between them is finance's business, not something
worth a second colour in a column scanned for "is this finished". The class
stays separate so the tooltip still says which, and so splitting them later
is one rule. */
.wo-status-closed,
.wo-status-paid { background: var(--go-vivid); }
.wo-status-cancelled { background: var(--muted); }
/* Open is the one state with work still to do, and it is the one that has to
read as such without a tooltip. It breaks the shape of the finished pair
rather than only their colour: a ring, not a filled square, in the blue this
system uses for information rather than the amber it wore first, which read
as a warning about the row instead of a fact about it. The centre dot is
what keeps the ring from looking like an empty box waiting to be ticked. */
.wo-status-open {
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--info);
}
.wo-status-open::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--info);
}
/* Glyphs are masks rather than an