/* ================================================================
DeBrox Operations — UI v2 · "Deep Blue Command"
Token sheet of record: docs/ui-redesign/DEBROX_UI_V2_TOKENS_2026-08-13.md
Standalone stylesheet: pages opting in via @section('ui','v2')
load THIS file only. Structure: tokens → base → components →
shell → page sections (per body-class scope).
================================================================ */
/* ---- 1 · Tokens ------------------------------------------------ */
:root {
--ui2-canvas-top: #F4F7FA;
--ui2-canvas-bottom: #E8EDF2;
--ui2-surface: #FFFFFF;
--ui2-surface-raised: #F3F6F8;
--ui2-sidebar: #FFFFFF;
--ui2-line: #D6DEE5;
--ui2-line-strong: #B8C5D0;
--ui2-ink: #17212B;
--ui2-ink-2: #425466;
--ui2-ink-3: #6B7C8D;
--ui2-cyan: #007FA8;
--ui2-cyan-bright: #0098C7;
--ui2-cyan-dim: rgba(0, 127, 168, .12);
--ui2-action: #007FA8;
--ui2-action-hover: #006A8D;
--ui2-action-text: #FFFFFF;
--ui2-action-shadow: 0 5px 14px rgba(0, 127, 168, .20);
--ui2-orange: #FF7A1A;
--ui2-orange-hover: #E96A0F;
--ui2-orange-grad: linear-gradient(135deg, #FF9944, #F2660A);
--ui2-orange-grad-hover: linear-gradient(135deg, #FF8A2B, #DE5C08);
--ui2-orange-glow: 0 6px 20px rgba(255, 122, 26, .28);
--ui2-cyan-grad: linear-gradient(135deg, rgba(0, 152, 199, .18), rgba(0, 127, 168, .08));
--ui2-orange-dim: rgba(255, 122, 26, .14);
--ui2-good: #167A54; --ui2-good-bg: rgba(22, 122, 84, .11);
--ui2-warn: #8A6200; --ui2-warn-bg: rgba(138, 98, 0, .11);
--ui2-crit: #C43D35; --ui2-crit-bg: rgba(196, 61, 53, .11);
--ui2-radius: 12px;
--ui2-radius-sm: 10px;
--ui2-shadow: 0 8px 24px rgba(31, 49, 66, .09);
--ui2-font: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--ui2-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ---- 2 · Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; background: var(--ui2-canvas-bottom); }
body.ui-v2 {
margin: 0;
font-family: var(--ui2-font);
font-size: 15px;
line-height: 1.5;
color: var(--ui2-ink);
background:
radial-gradient(1000px 480px at 22% -6%, rgba(255, 255, 255, .92), transparent 60%),
linear-gradient(180deg, var(--ui2-canvas-top), var(--ui2-canvas-bottom) 900px);
-webkit-font-smoothing: antialiased;
}
body.ui-v2.operations-register-ui {
background:
radial-gradient(1000px 500px at 28% -4%, rgba(255, 255, 255, .95), transparent 62%),
linear-gradient(180deg, #F6F8FA, #E9EEF2 900px);
}
.ui-v2 h1, .ui-v2 h2, .ui-v2 h3, .ui-v2 p { margin: 0; }
.ui-v2 a { color: var(--ui2-cyan); text-decoration: none; }
.ui-v2 img { max-width: 100%; }
.ui-v2 button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.ui-v2 select, .ui-v2 input, .ui-v2 textarea {
font: inherit;
color: var(--ui2-ink);
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
padding: 8px 12px;
}
.ui-v2 input[type="date"]::-webkit-calendar-picker-indicator,
.ui-v2 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: none;
cursor: pointer;
}
.ui-v2 input[type="date"],
.ui-v2 input[type="datetime-local"] {
cursor: pointer;
}
/* The hidden attribute must always win over component display rules. */
.ui-v2 [hidden] { display: none !important; }
.ui-v2 :focus-visible {
outline: 2px solid var(--ui2-cyan);
outline-offset: 2px;
}
/* ---- 3 · Shared components ------------------------------------ */
.ui-v2 .eyebrow,
.ui-v2 .workspace-page-kicker {
margin: 0;
color: var(--ui2-cyan);
font-size: 11px;
font-weight: 650;
letter-spacing: .15em;
text-transform: uppercase;
}
.ui-v2 .card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .primary-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
background: var(--ui2-orange-grad);
color: #24140A;
border-radius: 999px;
box-shadow: var(--ui2-orange-glow);
font-size: 13.5px;
font-weight: 650;
}
.ui-v2 .primary-button:hover { background: var(--ui2-orange-grad-hover); }
/* action-button = quiet secondary; orange is reserved for .primary-button only */
.ui-v2 .secondary-button,
.ui-v2 .action-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
color: var(--ui2-ink);
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
}
.ui-v2 .secondary-button:hover,
.ui-v2 .action-button:hover { border-color: var(--ui2-cyan); color: var(--ui2-cyan-bright); }
.ui-v2 .text-button { color: var(--ui2-ink-2); font-size: 13px; padding: 8px; }
.ui-v2 .text-button:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.ui-v2 .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-v2 .status-pill.good { background: var(--ui2-good-bg); color: var(--ui2-good); }
.ui-v2 .status-pill.warn { background: var(--ui2-warn-bg); color: var(--ui2-warn); }
.ui-v2 .status-pill.crit { background: var(--ui2-crit-bg); color: var(--ui2-crit); }
.ui-v2 .status-pill.info { background: var(--ui2-cyan-dim); color: var(--ui2-cyan-bright); }
.ui-v2 .flash-success {
margin: 0 0 18px;
padding: 10px 14px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
color: var(--ui2-good);
border-radius: var(--ui2-radius-sm);
font-size: 13.5px;
}
.ui-v2 .flash-warning {
margin: 0 0 18px;
padding: 10px 14px;
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .3);
color: var(--ui2-warn);
border-radius: var(--ui2-radius-sm);
font-size: 13.5px;
}
.ui-v2 .flash-error {
margin: 0 0 18px;
padding: 10px 14px;
background: var(--ui2-crit-bg);
border: 1px solid rgba(255, 106, 106, .32);
color: var(--ui2-crit);
border-radius: var(--ui2-radius-sm);
font-size: 13.5px;
}
.ui-v2 .flash-error strong { display: block; margin-bottom: 4px; }
.ui-v2 .flash-error ul { margin: 0; padding-left: 18px; }
.ui-v2 .flash-error li { margin-top: 2px; }
/* One-click readiness actions on a Job. */
.ui-v2 .readiness-actions {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 0; background: none; border: 0;
}
.ui-v2 .readiness-actions form { margin: 0; }
/* ---- 4 · Application shell ------------------------------------ */
.ui-v2 .application-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 240px 1fr;
}
.ui-v2 .sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
padding: 20px 14px 18px;
background: var(--ui2-sidebar);
border-right: 1px solid var(--ui2-line);
}
.ui-v2 .app-brand {
display: flex;
justify-content: center;
padding: 14px 12px;
margin-bottom: 18px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .app-brand img { width: 170px; height: auto; }
.ui-v2 .primary-nav { display: grid; gap: 4px; margin: 0; }
.ui-v2 .primary-nav a,
.ui-v2 .primary-nav summary,
.ui-v2 .nav-future {
min-height: 44px;
display: flex;
align-items: center;
gap: 11px;
padding: 0 12px;
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
}
.ui-v2 .primary-nav a:hover,
.ui-v2 .primary-nav summary:hover { background: rgba(46, 184, 230, .07); color: var(--ui2-ink); }
.ui-v2 .primary-nav a.active,
.ui-v2 .primary-nav summary.active {
background: var(--ui2-cyan-grad);
color: var(--ui2-cyan-bright);
box-shadow: inset 0 0 0 1px rgba(46, 184, 230, .35);
}
.ui-v2 .nav-icon {
width: 17px; height: 17px; flex: 0 0 17px;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
opacity: .9;
}
.ui-v2 .primary-nav summary { cursor: pointer; list-style: none; }
.ui-v2 .primary-nav summary::-webkit-details-marker { display: none; }
.ui-v2 .nav-chevron {
width: 13px; height: 13px; margin-left: auto;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .18s ease;
}
.ui-v2 .nav-group[open] .nav-chevron { transform: rotate(180deg); }
.ui-v2 .nav-submenu {
display: grid; gap: 2px;
margin: 4px 0 8px 20px;
padding-left: 11px;
border-left: 1px solid var(--ui2-line);
}
.ui-v2 .primary-nav .nav-submenu a,
.ui-v2 .primary-nav .nav-submenu span { min-height: 44px; padding: 0 10px; font-size: 12.5px; }
.ui-v2 .nav-placeholder { display: flex; align-items: center; color: var(--ui2-ink-3); }
.ui-v2 .nav-future { opacity: .55; }
.ui-v2 .sidebar-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--ui2-line);
color: var(--ui2-ink-2);
font-family: var(--ui2-mono);
font-size: 10px;
letter-spacing: .14em;
}
.ui-v2 .sidebar-foot small {
display: block;
margin-top: 5px;
color: var(--ui2-ink-3);
font-family: var(--ui2-font);
letter-spacing: 0;
font-size: 11px;
}
/* Workspace column */
.ui-v2 .workspace { min-width: 0; }
.ui-v2 .environment-banner {
min-height: 30px;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 6px 20px;
background: var(--ui2-warn-bg);
border-bottom: 1px solid rgba(245, 192, 68, .3);
color: var(--ui2-warn);
font-size: 11px; font-weight: 750; letter-spacing: .12em;
text-transform: uppercase; text-align: center;
}
.ui-v2 .environment-banner span { color: rgba(245, 192, 68, .75); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.ui-v2 .workspace-header {
min-height: 64px;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 0 clamp(20px, 3.5vw, 40px);
background: var(--ui2-sidebar);
border-bottom: 1px solid var(--ui2-line);
position: sticky; top: 0; z-index: 40;
}
.ui-v2 .workspace-kicker {
margin: 0 0 2px;
color: var(--ui2-cyan);
font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
}
.ui-v2 .workspace-header strong { font-size: 14px; }
.ui-v2 .header-actions { display: flex; align-items: center; gap: 14px; }
.ui-v2 .company-select { min-width: 170px; min-height: 36px; padding: 0 30px 0 10px; font-size: 13px; }
.ui-v2 .user-chip { display: flex; align-items: center; gap: 10px; }
.ui-v2 .user-chip > span {
width: 34px; height: 34px;
display: grid; place-items: center;
background: var(--ui2-orange);
color: #24140A;
border-radius: 50%;
font-size: 12.5px; font-weight: 800;
}
.ui-v2 .user-chip strong { display: block; font-size: 12.5px; }
.ui-v2 .user-chip small { display: block; margin-top: 1px; color: var(--ui2-ink-3); font-size: 11px; text-transform: capitalize; }
.ui-v2 .workspace-content {
width: calc(100% - 48px);
max-width: none;
margin: 0 auto;
padding: 26px 0 64px;
}
/* Page heading (compact v2) */
.ui-v2 .page-heading {
display: flex; align-items: end; justify-content: space-between; gap: 24px;
margin-bottom: 6px;
}
.ui-v2 .page-heading .eyebrow { margin-bottom: 8px; }
.ui-v2 .page-heading h1 {
font-size: clamp(22px, 3vw, 27px);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
}
.ui-v2 .page-heading > div > p:last-child {
max-width: 640px;
margin-top: 6px;
color: var(--ui2-ink-2);
font-size: 14px;
line-height: 1.5;
}
.ui-v2 .system-state {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 12px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: 999px;
color: var(--ui2-good);
font-size: 12px; font-weight: 600;
white-space: nowrap;
}
.ui-v2 .system-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--ui2-good); }
/* ---- 5 · Dashboard ------------------------------------------- */
.ui-v2 .dashboard-hero-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 20px;
align-items: start;
margin-bottom: 20px;
}
.ui-v2 .dashboard-heading { flex-direction: column; align-items: start; display: flex; gap: 10px; }
/* Weather card */
.ui-v2 .dashboard-weather-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px 18px;
}
.ui-v2 .dashboard-weather-card header {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
margin-bottom: 10px;
}
.ui-v2 .dashboard-weather-card header strong { display: block; font-size: 15px; margin-top: 3px; }
.ui-v2 .dashboard-weather-card header small { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .weather-location-button {
background: var(--ui2-cyan-dim);
color: var(--ui2-cyan-bright);
border: 1px solid rgba(46, 184, 230, .35);
border-radius: 999px;
padding: 5px 12px;
font-size: 12px; font-weight: 600;
white-space: nowrap;
}
.ui-v2 .weather-current { display: flex; align-items: center; gap: 12px; }
.ui-v2 .weather-current-icon { font-size: 30px; }
.ui-v2 .weather-current strong { font-size: 30px; font-weight: 700; line-height: 1; }
.ui-v2 .weather-current span { display: block; color: var(--ui2-ink-2); font-size: 12.5px; }
.ui-v2 .weather-current small { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .weather-current dl {
display: flex; gap: 14px; margin: 0 0 0 auto; padding: 0;
}
.ui-v2 .weather-current dl div { text-align: center; }
.ui-v2 .weather-current dt { color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .weather-current dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 650; }
.ui-v2 .weather-alert {
display: flex; align-items: center; gap: 8px;
margin: 12px 0;
padding: 7px 11px;
border-radius: var(--ui2-radius-sm);
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .28);
color: var(--ui2-warn);
font-size: 12.5px; font-weight: 550;
}
.ui-v2 .weather-alert.clear { background: var(--ui2-good-bg); border-color: rgba(62, 207, 142, .28); color: var(--ui2-good); }
.ui-v2 .weather-alert span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.ui-v2 .weather-forecast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ui-v2 .weather-forecast > div {
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
padding: 8px 6px;
text-align: center;
}
.ui-v2 .weather-forecast strong { display: block; font-size: 11.5px; }
.ui-v2 .weather-forecast span { font-size: 17px; line-height: 1.6; }
.ui-v2 .weather-forecast small { display: block; color: var(--ui2-ink-2); font-size: 11px; }
.ui-v2 .weather-forecast em { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-style: normal; }
.ui-v2 .dashboard-weather-card footer {
display: flex; justify-content: space-between;
margin-top: 10px;
color: var(--ui2-ink-3);
font-size: 11px;
}
.ui-v2 .weather-location-status { margin: 8px 0 0; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .dashboard-weather-card.unavailable .weather-unavailable-state,
.ui-v2 .weather-unavailable-state {
background: var(--ui2-surface-raised);
border-radius: var(--ui2-radius-sm);
padding: 14px;
color: var(--ui2-ink-2);
font-size: 13px;
}
/* Work pulse tiles */
.ui-v2 .dashboard-pulse-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.ui-v2 .dashboard-pulse-tile {
display: block;
padding: 14px 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
color: var(--ui2-ink);
text-decoration: none;
transition: transform .15s ease, border-color .15s ease;
}
.ui-v2 .dashboard-pulse-tile:hover { transform: translateY(-2px); border-color: var(--ui2-line-strong); }
.ui-v2 .dashboard-pulse-tile strong {
display: block;
font-size: 26px;
font-weight: 750;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.ui-v2 .dashboard-pulse-tile span {
display: flex;
align-items: center;
gap: 7px;
margin-top: 2px;
font-size: 13px;
font-weight: 650;
}
.ui-v2 .dashboard-pulse-tile span::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ui2-ink-3);
}
.ui-v2 .dashboard-pulse-tile small {
display: block;
margin-top: 1px;
color: var(--ui2-ink-3);
font-size: 11.5px;
}
.ui-v2 .dashboard-pulse-tile.crit { background: rgba(255, 107, 97, .06); border-color: rgba(255, 107, 97, .3); }
.ui-v2 .dashboard-pulse-tile.crit strong { color: var(--ui2-crit); }
.ui-v2 .dashboard-pulse-tile.crit span::before { background: var(--ui2-crit); box-shadow: 0 0 8px rgba(255, 107, 97, .5); }
.ui-v2 .dashboard-pulse-tile.warn strong { color: var(--ui2-warn); }
.ui-v2 .dashboard-pulse-tile.warn span::before { background: var(--ui2-warn); box-shadow: 0 0 8px rgba(245, 192, 68, .5); }
.ui-v2 .dashboard-pulse-tile.info strong { color: var(--ui2-cyan-bright); }
.ui-v2 .dashboard-pulse-tile.info span::before { background: var(--ui2-cyan); box-shadow: 0 0 8px rgba(46, 184, 230, .5); }
.ui-v2 .dashboard-pulse-tile.good strong { color: var(--ui2-good); }
.ui-v2 .dashboard-pulse-tile.good span::before { background: var(--ui2-good); box-shadow: 0 0 8px rgba(62, 207, 142, .5); }
/* Start grid */
.ui-v2 .dashboard-start-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.ui-v2 .dashboard-start-card {
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
color: var(--ui2-ink);
text-decoration: none;
transition: transform .15s ease, border-color .15s ease;
}
.ui-v2 .dashboard-start-card:hover { transform: translateY(-2px); border-color: var(--ui2-line-strong); }
.ui-v2 .dashboard-card-icon {
width: 42px; height: 42px; flex: 0 0 42px;
display: grid; place-items: center;
background: var(--ui2-cyan-dim);
color: var(--ui2-cyan-bright);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .dashboard-card-icon svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.ui-v2 .dashboard-start-card > span:not(.dashboard-card-icon) { min-width: 0; }
.ui-v2 .dashboard-start-card small {
display: block;
color: var(--ui2-ink-3);
font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
}
.ui-v2 .dashboard-start-card strong { display: block; margin: 1px 0; font-size: 15.5px; }
.ui-v2 .dashboard-start-card em { display: block; color: var(--ui2-ink-2); font-size: 12.5px; font-style: normal; }
.ui-v2 .dashboard-start-card b { margin-left: auto; color: var(--ui2-cyan); font-size: 16px; }
.ui-v2 .dashboard-start-card.primary { border-color: rgba(255, 122, 26, .45); }
.ui-v2 .dashboard-start-card.primary:hover { border-color: var(--ui2-orange); }
.ui-v2 .dashboard-start-card.primary .dashboard-card-icon { background: var(--ui2-orange); color: #24140A; }
.ui-v2 .dashboard-start-card.primary b { color: var(--ui2-orange); }
/* Register panel + account card */
.ui-v2 .dashboard-register-panel,
.ui-v2 .dashboard-account-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 20px;
margin-bottom: 20px;
}
.ui-v2 .dashboard-register-panel header {
display: flex; align-items: end; justify-content: space-between; gap: 20px;
margin-bottom: 14px;
}
.ui-v2 .dashboard-register-panel h2,
.ui-v2 .dashboard-account-card h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }
.ui-v2 .dashboard-register-panel header p { max-width: 380px; color: var(--ui2-ink-2); font-size: 12.5px; }
.ui-v2 .dashboard-register-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ui-v2 .dashboard-register-links a {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2px 10px;
padding: 12px 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink);
text-decoration: none;
}
.ui-v2 .dashboard-register-links a:hover { border-color: rgba(46, 184, 230, .45); background: rgba(46, 184, 230, .08); }
.ui-v2 .dashboard-register-links span { font-size: 13.5px; font-weight: 650; }
.ui-v2 .dashboard-register-links small { grid-column: 1; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .dashboard-register-links b { grid-row: span 2; color: var(--ui2-cyan); }
.ui-v2 .dashboard-account-card { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ui-v2 .dashboard-account-facts { display: flex; gap: 22px; margin-top: 12px; }
.ui-v2 .dashboard-account-facts span small { display: block; color: var(--ui2-ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .dashboard-account-facts span strong { font-size: 13.5px; }
.ui-v2 .dashboard-active-state { color: var(--ui2-good); }
.ui-v2 .panel-actions { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; max-width: 100%; }
.ui-v2 .panel-actions > * { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* ---- 6 · My Work — team leader field screens ------------------- */
.ui-v2 .field-work-page { max-width: 1140px; margin: 0 auto; }
.ui-v2 .field-work-heading {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-bottom: 16px;
}
.ui-v2 .field-work-heading h1 {
font-size: clamp(21px, 5vw, 26px);
font-weight: 700;
letter-spacing: -.01em;
}
.ui-v2 .field-work-heading > div > p:last-child { color: var(--ui2-ink-2); font-size: 12.5px; margin-top: 3px; }
.ui-v2 .field-work-today {
flex: 0 0 auto;
display: grid; place-items: center;
min-width: 62px;
padding: 8px 12px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
text-align: center;
}
.ui-v2 .field-work-today span { color: var(--ui2-cyan); font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.ui-v2 .field-work-today strong { font-size: 22px; font-weight: 750; line-height: 1.05; }
.ui-v2 .field-work-today small { color: var(--ui2-ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-work-tabs {
display: flex; gap: 8px;
margin: 0 -4px 14px;
padding: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ui-v2 .field-work-tabs::-webkit-scrollbar { display: none; }
.ui-v2 .field-work-tabs a {
flex: 0 0 auto;
display: flex; align-items: center; gap: 7px;
min-height: 40px;
padding: 0 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 999px;
color: var(--ui2-ink-2);
font-size: 13px; font-weight: 600;
white-space: nowrap;
}
.ui-v2 .field-work-tabs a strong {
min-width: 22px;
padding: 1px 7px;
background: var(--ui2-surface-raised);
border-radius: 999px;
text-align: center;
font-size: 12px; font-weight: 700;
color: var(--ui2-ink-2);
}
.ui-v2 .field-work-tabs a.active {
background: var(--ui2-cyan-dim);
border-color: rgba(46, 184, 230, .45);
color: var(--ui2-cyan-bright);
}
.ui-v2 .field-work-tabs a.active strong { background: rgba(46, 184, 230, .2); color: var(--ui2-cyan-bright); }
.ui-v2 .field-job-list {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
align-items: start;
}
.ui-v2 .field-job-card {
display: block;
padding: 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
color: var(--ui2-ink);
text-decoration: none;
}
.ui-v2 .field-job-card:active { border-color: var(--ui2-line-strong); }
.ui-v2 .field-job-card > header {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
margin-bottom: 12px;
}
.ui-v2 .field-job-date {
display: block;
color: var(--ui2-cyan);
font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 .field-job-card h2 { font-size: 17px; font-weight: 700; margin: 3px 0 1px; letter-spacing: -.01em; }
.ui-v2 .field-job-card > header p { color: var(--ui2-ink-3); font-size: 12px; font-family: var(--ui2-mono); }
.ui-v2 .dispatch-status {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px; font-weight: 650;
text-transform: capitalize;
white-space: nowrap;
background: var(--ui2-surface-raised);
color: var(--ui2-ink-2);
}
.ui-v2 .dispatch-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-v2 .dispatch-status.dispatched,
.ui-v2 .dispatch-status.accepted { background: var(--ui2-cyan-dim); color: var(--ui2-cyan-bright); }
.ui-v2 .dispatch-status.in_progress,
.ui-v2 .dispatch-status.photos_pending { background: var(--ui2-warn-bg); color: var(--ui2-warn); }
.ui-v2 .dispatch-status.ready_for_review,
.ui-v2 .dispatch-status.completed { background: var(--ui2-good-bg); color: var(--ui2-good); }
.ui-v2 .dispatch-status.unable_to_complete,
.ui-v2 .dispatch-status.cancelled { background: var(--ui2-crit-bg); color: var(--ui2-crit); }
.ui-v2 .field-job-customer {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.ui-v2 .field-job-customer > span {
width: 34px; height: 34px; flex: 0 0 34px;
display: grid; place-items: center;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: 9px;
font-size: 12px; font-weight: 750;
color: var(--ui2-cyan-bright);
}
.ui-v2 .field-job-customer small { display: block; color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-job-customer strong { font-size: 13.5px; }
.ui-v2 .field-job-card dl {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
margin: 0 0 14px; padding: 12px;
background: var(--ui2-surface-raised);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .field-job-card dt { color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-job-card dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 550; overflow-wrap: break-word; }
.ui-v2 .field-job-next {
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px;
background: var(--ui2-orange-grad);
color: #24140A;
border-radius: 999px;
box-shadow: var(--ui2-orange-glow);
font-size: 14.5px; font-weight: 700;
}
.ui-v2 .field-job-card:hover .field-job-next { background: var(--ui2-orange-grad-hover); }
.ui-v2 .field-work-empty {
display: grid; place-items: center; gap: 6px;
padding: 40px 20px;
background: var(--ui2-surface);
border: 1px dashed var(--ui2-line-strong);
border-radius: var(--ui2-radius);
text-align: center;
}
.ui-v2 .field-work-empty span {
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--ui2-good-bg);
color: var(--ui2-good);
border-radius: 50%;
font-size: 20px;
}
.ui-v2 .field-work-empty strong { font-size: 15px; }
.ui-v2 .field-work-empty p { color: var(--ui2-ink-2); font-size: 13px; max-width: 340px; }
/* ---- 6b · My Work — job detail --------------------------------- */
.ui-v2 .field-job-detail { max-width: 680px; margin: 0 auto; display: grid; gap: 14px; }
.ui-v2 .field-work-back {
justify-self: start;
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px; padding: 0 4px;
color: var(--ui2-ink-2);
font-size: 13.5px; font-weight: 600;
}
.ui-v2 .field-work-back:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .form-errors {
padding: 12px 14px;
background: var(--ui2-crit-bg);
border: 1px solid rgba(255, 107, 97, .35);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-crit);
font-size: 13.5px;
}
.ui-v2 .field-job-hero {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
padding: 18px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .field-job-hero h1 {
font-size: clamp(20px, 5vw, 24px);
font-weight: 750;
font-family: var(--ui2-mono);
letter-spacing: .01em;
margin: 4px 0 2px;
}
.ui-v2 .field-job-hero > div > p:not(.workspace-page-kicker) { color: var(--ui2-ink-2); font-size: 14px; }
.ui-v2 .field-job-hero span:not(.dispatch-status) {
display: block; margin-top: 6px;
color: var(--ui2-cyan);
font-size: 12.5px; font-weight: 650;
}
.ui-v2 .field-job-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ui-v2 .field-action-primary {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 14px;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .4);
border-radius: var(--ui2-radius);
color: var(--ui2-cyan-bright);
font-weight: 700; font-size: 14px;
}
.ui-v2 .field-action-primary small {
display: block;
color: var(--ui2-ink-3);
font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 .field-site-location {
padding: 12px 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .field-site-location small { display: block; color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-site-location strong { font-size: 13px; }
.ui-v2 .field-job-overview,
.ui-v2 .field-next-step {
padding: 18px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .field-job-overview header,
.ui-v2 .field-next-step header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-v2 .field-job-overview h2,
.ui-v2 .field-next-step h2 { font-size: 17px; font-weight: 700; margin-top: 4px; }
.ui-v2 .field-job-overview dl {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 0; padding: 0;
}
.ui-v2 .field-job-overview dt { color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-job-overview dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 550; }
.ui-v2 .field-job-overview dd + small { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .field-step-number {
flex: 0 0 auto;
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .35);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-cyan-bright);
font-family: var(--ui2-mono);
font-size: 16px; font-weight: 750;
}
.ui-v2 .field-next-step > p { color: var(--ui2-ink-2); font-size: 13.5px; margin-bottom: 12px; }
.ui-v2 .field-next-action {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 50px;
margin-bottom: 10px;
background: var(--ui2-orange-grad);
color: #24140A;
border-radius: 999px;
box-shadow: var(--ui2-orange-glow);
font-size: 15px; font-weight: 750;
text-decoration: none;
}
.ui-v2 .field-next-action:hover { background: var(--ui2-orange-grad-hover); }
.ui-v2 .field-secondary-action {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px;
margin-bottom: 10px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
color: var(--ui2-ink);
border-radius: 999px;
font-size: 14px; font-weight: 650;
text-decoration: none;
}
.ui-v2 .field-secondary-action:hover { border-color: var(--ui2-cyan); color: var(--ui2-cyan-bright); }
.ui-v2 .field-action-note { color: var(--ui2-ink-3); font-size: 12px; line-height: 1.45; }
.ui-v2 .field-complete-message {
display: grid; gap: 4px;
padding: 14px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-good);
}
.ui-v2 .field-complete-message.unable_to_complete {
background: var(--ui2-crit-bg);
border-color: rgba(255, 107, 97, .35);
color: var(--ui2-crit);
}
.ui-v2 .field-complete-message strong { font-size: 15px; }
.ui-v2 .field-complete-message span { font-size: 12px; opacity: .8; }
.ui-v2 .field-complete-message p { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .field-crew-card,
.ui-v2 .field-problem-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .field-crew-card summary,
.ui-v2 .field-problem-card summary {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 50px;
padding: 0 16px;
cursor: pointer;
list-style: none;
font-size: 14px; font-weight: 650;
}
.ui-v2 .field-crew-card summary::-webkit-details-marker,
.ui-v2 .field-problem-card summary::-webkit-details-marker { display: none; }
.ui-v2 .field-crew-card summary small { display: block; color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-crew-card > div,
.ui-v2 .field-problem-card form { padding: 0 16px 16px; }
.ui-v2 .field-crew-card p { color: var(--ui2-ink-2); font-size: 13px; margin-bottom: 8px; }
.ui-v2 .field-crew-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ui-v2 .field-crew-card li {
display: flex; justify-content: space-between; gap: 10px;
padding: 8px 10px;
background: var(--ui2-surface-raised);
border-radius: 8px;
font-size: 13px;
}
.ui-v2 .field-crew-card li small { color: var(--ui2-ink-3); font-family: var(--ui2-mono); }
.ui-v2 .field-problem-card { border-color: rgba(255, 107, 97, .3); }
.ui-v2 .field-problem-card summary { color: var(--ui2-crit); }
.ui-v2 .field-problem-card label span { display: block; margin-bottom: 6px; color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .field-problem-card textarea { width: 100%; resize: vertical; }
.ui-v2 .field-problem-card button[type="submit"] {
width: 100%;
min-height: 44px;
margin-top: 10px;
background: var(--ui2-crit-bg);
border: 1px solid rgba(255, 107, 97, .4);
color: var(--ui2-crit);
border-radius: var(--ui2-radius-sm);
font-size: 14px; font-weight: 650;
}
@media (max-width: 560px) {
.ui-v2 .field-job-quick-actions { grid-template-columns: 1fr; }
}
/* ---- 6c · Inspection capture (field, blueprint-ordered) -------- */
.ui-v2 .field-capture-page { max-width: 980px; margin: 0 auto; }
.ui-v2 .my-work-back {
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px; margin-bottom: 8px;
color: var(--ui2-ink-2);
font-size: 13.5px; font-weight: 600;
}
.ui-v2 .my-work-back:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .field-capture-heading {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
margin-bottom: 12px;
}
.ui-v2 .field-capture-heading h1 { font-size: clamp(19px, 4.5vw, 24px); font-weight: 700; margin: 3px 0 2px; }
.ui-v2 .field-capture-heading > div > p:not(.workspace-page-kicker) { color: var(--ui2-ink-3); font-size: 12.5px; font-family: var(--ui2-mono); }
.ui-v2 .field-report-summary {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 16px;
margin-bottom: 12px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .field-report-summary span { display: block; color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .field-report-summary strong { font-size: 14px; }
.ui-v2 .field-report-summary small { display: block; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .customer-report-logo img { max-height: 34px; width: auto; background: #fff; padding: 4px 8px; border-radius: 8px; }
/* Save-state strip: the field worker's trust signal */
.ui-v2 .inspection-save-state {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
margin-bottom: 12px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-good);
font-size: 13px;
}
.ui-v2 .inspection-save-state strong { font-weight: 650; }
.ui-v2 .inspection-save-state small { margin-left: auto; opacity: .75; font-size: 11.5px; }
.ui-v2 .inspection-save-state[data-state="pending"],
.ui-v2 .inspection-save-state[data-state="saving"] {
background: var(--ui2-warn-bg);
border-color: rgba(245, 192, 68, .3);
color: var(--ui2-warn);
}
.ui-v2 .inspection-save-state[data-state="offline"] {
background: var(--ui2-cyan-dim);
border-color: rgba(46, 184, 230, .35);
color: var(--ui2-cyan-bright);
}
/* Shell: page nav + form */
.ui-v2 .inspection-run-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-v2 .capture-page-nav {
position: sticky; top: 78px;
display: grid; gap: 4px;
padding: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.ui-v2 .capture-progress { margin-bottom: 8px; }
.ui-v2 .capture-progress span { display: block; color: var(--ui2-ink-3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .capture-progress strong { display: block; margin: 2px 0 6px; font-size: 13.5px; }
.ui-v2 .capture-progress progress {
width: 100%; height: 6px;
-webkit-appearance: none; appearance: none;
border: none; border-radius: 999px; overflow: hidden;
background: var(--ui2-surface-raised);
}
.ui-v2 .capture-progress progress::-webkit-progress-bar { background: var(--ui2-surface-raised); }
.ui-v2 .capture-progress progress::-webkit-progress-value { background: var(--ui2-cyan); }
.ui-v2 .capture-progress progress::-moz-progress-bar { background: var(--ui2-cyan); }
.ui-v2 .capture-page-nav a {
display: flex; align-items: center; gap: 9px;
min-height: 36px;
padding: 0 10px;
border-radius: 8px;
color: var(--ui2-ink-2);
font-size: 12.5px; font-weight: 550;
}
.ui-v2 .capture-page-nav a span {
flex: 0 0 auto;
color: var(--ui2-ink-3);
font-family: var(--ui2-mono);
font-size: 11px;
}
.ui-v2 .capture-page-nav a:hover { background: rgba(46, 184, 230, .07); color: var(--ui2-ink); }
.ui-v2 .capture-page-nav a.active {
background: var(--ui2-cyan-dim);
color: var(--ui2-cyan-bright);
box-shadow: inset 0 0 0 1px rgba(46, 184, 230, .35);
}
.ui-v2 .capture-page-nav a.active span { color: var(--ui2-cyan-bright); }
.ui-v2 .capture-preview-form {
padding: 18px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .field-capture-section-heading {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .field-capture-section-heading h2 { font-size: 18px; font-weight: 700; margin-top: 3px; }
.ui-v2 .field-capture-section-heading > span {
flex: 0 0 auto;
padding: 3px 10px;
background: var(--ui2-surface-raised);
border-radius: 999px;
color: var(--ui2-ink-2);
font-size: 11.5px; font-weight: 650;
}
.ui-v2 .capture-field-grid { display: grid; gap: 16px; }
.ui-v2 .capture-field > label {
display: block;
margin-bottom: 7px;
font-size: 13.5px; font-weight: 650;
}
.ui-v2 .required-mark { color: var(--ui2-orange); margin-left: 3px; }
.ui-v2 .capture-field input[type="text"],
.ui-v2 .capture-field input[type="number"],
.ui-v2 .capture-field input[type="date"],
.ui-v2 .capture-field input[type="datetime-local"],
.ui-v2 .capture-field input[type="datetime"],
.ui-v2 .capture-field select,
.ui-v2 .capture-field textarea {
width: 100%;
min-height: 46px;
font-size: 15px;
}
.ui-v2 .capture-field textarea { min-height: 90px; }
/* Choice options as field-glove-sized state buttons */
.ui-v2 .capture-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-v2 .capture-options label { position: relative; }
.ui-v2 .capture-options input {
position: absolute; inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.ui-v2 .capture-options input + span {
display: inline-flex; align-items: center; justify-content: center;
min-height: 46px;
padding: 0 18px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
font-size: 14px; font-weight: 600;
color: var(--ui2-ink-2);
}
.ui-v2 .capture-options input:checked + span {
background: var(--ui2-cyan-grad);
border-color: var(--ui2-cyan);
color: var(--ui2-cyan-bright);
box-shadow: 0 0 0 1px var(--ui2-cyan);
}
.ui-v2 .capture-options input:focus-visible + span { outline: 2px solid var(--ui2-cyan); outline-offset: 2px; }
.ui-v2 .capture-check {
display: flex; align-items: center; gap: 10px;
min-height: 46px;
padding: 0 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
font-size: 14px; font-weight: 600;
cursor: pointer;
}
.ui-v2 .capture-check input { width: 20px; height: 20px; accent-color: var(--ui2-cyan); }
/* Evidence: photo capture */
.ui-v2 .inspection-media-input {
display: grid; gap: 3px;
padding: 14px;
background: var(--ui2-cyan-dim);
border: 1px dashed rgba(46, 184, 230, .5);
border-radius: var(--ui2-radius-sm);
cursor: pointer;
text-align: center;
}
.ui-v2 .inspection-media-input input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-v2 .inspection-media-input span { color: var(--ui2-cyan-bright); font-size: 14px; font-weight: 650; }
.ui-v2 .inspection-media-input small { color: var(--ui2-good); font-size: 12px; font-weight: 600; }
/* Signature */
.ui-v2 .signature-pad canvas {
width: 100%; height: auto;
background: #F2F7FC;
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
touch-action: none;
}
.ui-v2 .signature-pad > div { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ui-v2 .signature-pad [data-clear-signature] {
min-height: 38px; padding: 0 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 8px;
color: var(--ui2-ink-2); font-size: 13px; font-weight: 600;
}
.ui-v2 .signature-pad small { color: var(--ui2-ink-3); font-size: 12px; }
/* GPS capture */
.ui-v2 .capture-location-button {
display: inline-flex; align-items: center; gap: 8px;
min-height: 46px; padding: 0 18px;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .4);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-cyan-bright);
font-size: 14px; font-weight: 650;
}
.ui-v2 .capture-location-status { margin: 8px 0; color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .capture-location-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-v2 .capture-location-coordinates label span { display: block; margin-bottom: 4px; color: var(--ui2-ink-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .capture-location-coordinates input { width: 100%; font-family: var(--ui2-mono); font-size: 13.5px; }
/* Repeat groups */
.ui-v2 .capture-repeat-group {
margin-top: 18px;
padding: 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .capture-repeat-group > header {
display: flex; align-items: end; justify-content: space-between; gap: 10px;
margin-bottom: 12px;
}
.ui-v2 .capture-repeat-group .panel-index { color: var(--ui2-cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.ui-v2 .capture-repeat-group h3 { font-size: 15.5px; font-weight: 700; margin-top: 2px; }
.ui-v2 .capture-repeat-group > header > span { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .repeat-item {
padding: 12px;
margin-bottom: 10px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .repeat-item-heading {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
font-size: 13px;
}
.ui-v2 .repeat-item-heading [data-remove-item] {
min-height: 34px; padding: 0 12px;
background: transparent;
border: 1px solid rgba(255, 107, 97, .35);
border-radius: 8px;
color: var(--ui2-crit); font-size: 12.5px; font-weight: 600;
}
.ui-v2 .repeat-item-heading [data-remove-item]:disabled { opacity: .35; }
.ui-v2 .add-repeat-item {
width: 100%;
min-height: 44px;
background: transparent;
border: 1px dashed var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-cyan-bright);
font-size: 13.5px; font-weight: 650;
}
.ui-v2 .add-repeat-item:hover { border-color: var(--ui2-cyan); }
/* Sticky action bar: Save & next is THE orange */
.ui-v2 .capture-page-actions {
position: sticky; bottom: 0; z-index: 30;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 18px -18px -18px;
padding: 12px 18px;
background: rgba(8, 22, 39, .96);
border-top: 1px solid var(--ui2-line);
border-radius: 0 0 var(--ui2-radius) var(--ui2-radius);
}
.ui-v2 .capture-page-actions > div { display: flex; gap: 8px; }
.ui-v2 .capture-page-actions .primary-button { min-height: 48px; font-size: 15px; }
.ui-v2 .inspection-run-locked fieldset { border: none; margin: 0; padding: 0; }
@media (max-width: 900px) {
.ui-v2 .inspection-run-shell { grid-template-columns: 1fr; }
.ui-v2 .capture-page-nav {
position: static;
max-height: none;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
align-items: center;
-webkit-overflow-scrolling: touch;
}
.ui-v2 .capture-progress { min-width: 170px; margin: 0 8px 0 0; }
.ui-v2 .capture-page-actions { margin: 18px -14px -14px; padding: 10px 14px; }
.ui-v2 .capture-preview-form { padding: 14px; }
.ui-v2 .capture-page-actions .secondary-button { padding: 0 10px; font-size: 12.5px; }
}
/* ---- 6d · Planning & dispatch (office) ------------------------- */
.ui-v2 .dispatch-page { display: grid; gap: 18px; }
.ui-v2 .dispatch-page-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ui-v2 .dispatch-page-header h1 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.01em; margin: 4px 0; }
.ui-v2 .dispatch-page-header p:not(.workspace-page-kicker) { color: var(--ui2-ink-2); font-size: 13.5px; max-width: 560px; }
.ui-v2 .dispatch-primary-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-v2 .dispatch-utility-link {
display: inline-flex; align-items: center;
min-height: 38px; padding: 0 13px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
color: var(--ui2-ink-2);
font-size: 13px; font-weight: 600;
}
.ui-v2 .dispatch-utility-link:hover { border-color: var(--ui2-cyan); color: var(--ui2-cyan-bright); }
.ui-v2 .dispatch-plan-action {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 16px;
background: var(--ui2-orange-grad);
color: #24140A;
border-radius: 999px;
box-shadow: var(--ui2-orange-glow);
font-size: 13.5px; font-weight: 700;
}
.ui-v2 .dispatch-plan-action:hover { background: var(--ui2-orange-grad-hover); }
.ui-v2 .dispatch-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ui-v2 .dispatch-metric-card {
position: relative;
display: flex; align-items: flex-start; gap: 10px;
padding: 13px 62px 13px 15px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
color: var(--ui2-ink);
text-decoration: none;
cursor: pointer;
}
.ui-v2 button.dispatch-metric-card { text-align: left; font: inherit; }
.ui-v2 .dispatch-metric-card > div { display: grid; gap: 1px; }
.ui-v2 .dispatch-metric-card > div > span { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .dispatch-metric-card > div > strong { font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ui-v2 .dispatch-metric-card > div > small { color: var(--ui2-ink-2); font-size: 12px; }
.ui-v2 .dispatch-metric-icon {
flex: 0 0 9px;
width: 9px; height: 9px;
margin-top: 5px;
border-radius: 50%;
background: var(--ui2-cyan);
font-size: 0;
box-shadow: 0 0 8px rgba(46, 184, 230, .5);
}
.ui-v2 .dispatch-metric-icon.overdue { background: var(--ui2-crit); box-shadow: 0 0 8px rgba(255, 107, 97, .5); }
.ui-v2 .dispatch-metric-cue { position: absolute; right: 14px; top: 12px; color: var(--ui2-cyan); font-size: 11.5px; font-weight: 650; }
.ui-v2 .dispatch-metric-card.overdue { background: rgba(255, 107, 97, .06); border-color: rgba(255, 107, 97, .3); }
.ui-v2 .dispatch-metric-card.overdue strong { color: var(--ui2-crit); }
.ui-v2 .dispatch-metric-card.on-track .dispatch-metric-icon { background: var(--ui2-good); box-shadow: 0 0 8px rgba(62, 207, 142, .5); }
.ui-v2 .dispatch-metric-card.on-track strong { color: var(--ui2-good); }
.ui-v2 .dispatch-metric-card.is-selected { box-shadow: 0 0 0 1px var(--ui2-cyan), var(--ui2-shadow); }
.ui-v2 .dispatch-metric-card:hover .dispatch-metric-cue { color: var(--ui2-cyan-bright); }
/* Queue: the dense-table pattern of record */
.ui-v2 .dispatch-queue {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
overflow: hidden;
}
.ui-v2 .dispatch-queue-heading {
display: flex; align-items: end; justify-content: space-between; gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .dispatch-queue-heading h2 { font-size: 16.5px; font-weight: 700; margin-top: 3px; }
.ui-v2 .dispatch-queue-heading > span { color: var(--ui2-ink-3); font-size: 12.5px; }
.ui-v2 .dispatch-table-head,
.ui-v2 .dispatch-job-row {
display: grid;
grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 1.1fr) minmax(130px, 1fr) 110px 120px 70px;
gap: 12px;
align-items: center;
padding: 0 16px;
}
.ui-v2 .dispatch-table-head {
min-height: 36px;
background: var(--ui2-surface-raised);
border-bottom: 1px solid var(--ui2-line);
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}
.ui-v2 .dispatch-job-row {
min-height: 58px;
padding-top: 9px; padding-bottom: 9px;
border-bottom: 1px solid var(--ui2-line);
cursor: pointer;
}
.ui-v2 .dispatch-job-row:hover { background: rgba(46, 184, 230, .05); }
.ui-v2 .dispatch-job-row:focus-visible { outline: 2px solid var(--ui2-cyan); outline-offset: -2px; }
.ui-v2 .dispatch-job-row.is-overdue { box-shadow: inset 3px 0 0 var(--ui2-crit); }
.ui-v2 .dispatch-job-row strong { display: block; font-size: 13.5px; font-weight: 650; }
.ui-v2 .dispatch-job-row small { display: block; margin-top: 1px; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .dispatch-site-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-v2 .dispatch-site-cell > div { min-width: 0; }
.ui-v2 .dispatch-site-cell strong,
.ui-v2 .dispatch-site-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-v2 .dispatch-customer-mark {
flex: 0 0 32px;
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: 8px;
color: var(--ui2-cyan-bright);
font-size: 11px; font-weight: 750;
}
.ui-v2 .dispatch-due-over strong,
.ui-v2 .dispatch-due-over small { color: var(--ui2-crit); }
.ui-v2 .dispatch-open-job { color: var(--ui2-cyan); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ui-v2 .dispatch-empty-state {
display: grid; place-items: center; gap: 6px;
padding: 40px 20px;
color: var(--ui2-ink-2);
text-align: center;
font-size: 13.5px;
}
/* Right-side job drawer */
.ui-v2 .dispatch-drawer { position: fixed; inset: 0; z-index: 80; }
.ui-v2 .dispatch-drawer[hidden] { display: none; }
.ui-v2 .dispatch-drawer-scrim {
position: absolute; inset: 0;
width: 100%;
background: rgba(2, 8, 18, .6);
border: none;
cursor: pointer;
}
.ui-v2 .dispatch-drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(440px, 94vw);
overflow-y: auto;
padding: 20px;
background: var(--ui2-canvas-top);
border-left: 1px solid var(--ui2-line-strong);
box-shadow: -18px 0 50px rgba(2, 8, 18, .6);
}
.ui-v2 .dispatch-drawer-panel > header {
display: flex; align-items: start; justify-content: space-between; gap: 12px;
margin-bottom: 14px;
}
.ui-v2 .dispatch-drawer-panel h2 { font-family: var(--ui2-mono); font-size: 19px; font-weight: 750; margin: 3px 0 2px; }
.ui-v2 .dispatch-drawer-panel > header p:not(.workspace-page-kicker) { color: var(--ui2-ink-2); font-size: 12.5px; }
.ui-v2 .dispatch-drawer-close {
flex: 0 0 auto;
width: 34px; height: 34px;
display: grid; place-items: center;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line-strong);
border-radius: 8px;
color: var(--ui2-ink-2);
font-size: 17px;
}
.ui-v2 .dispatch-drawer-status { margin-bottom: 14px; }
.ui-v2 .dispatch-drawer-details {
display: grid; gap: 10px;
padding: 14px;
margin-bottom: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 .dispatch-drawer-details dt { color: var(--ui2-ink-3); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.ui-v2 .dispatch-drawer-details dd { margin: 2px 0 0; font-weight: 550; }
.ui-v2 .dispatch-step-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
.ui-v2 .dispatch-step-list li {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
}
.ui-v2 .dispatch-step-list li.complete { border-color: rgba(62, 207, 142, .3); color: var(--ui2-good); }
.ui-v2 .dispatch-step-list li.attention { border-color: rgba(245, 192, 68, .35); color: var(--ui2-warn); }
.ui-v2 .dispatch-drawer-actions { display: grid; gap: 10px; }
.ui-v2 .dispatch-confirm-action {
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px;
background: var(--ui2-orange-grad);
color: #24140A;
border: none;
border-radius: 999px;
box-shadow: var(--ui2-orange-glow);
font-size: 14px; font-weight: 700;
text-decoration: none;
}
.ui-v2 .dispatch-confirm-action:hover { background: var(--ui2-orange-grad-hover); }
.ui-v2 .dispatch-cancel-action {
display: flex; align-items: center; justify-content: center;
min-height: 42px;
background: transparent;
border: 1px solid rgba(255, 107, 97, .35);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-crit);
font-size: 13px; font-weight: 650;
}
.ui-v2 .dispatch-programme-list { display: grid; gap: 10px; }
@media (max-width: 980px) {
.ui-v2 .dispatch-table-head { display: none; }
.ui-v2 .dispatch-job-row {
grid-template-columns: 1fr auto;
grid-auto-flow: row;
min-height: 0;
gap: 6px 10px;
padding: 12px 14px;
}
.ui-v2 .dispatch-site-cell { grid-column: 1 / -1; }
.ui-v2 .dispatch-open-job { justify-self: end; }
}
/* ---- 6e · Review queues & shared register components ----------- */
/* Neutral stat rows (engineering + QC metrics, register summaries) */
.ui-v2 .engineering-metrics,
.ui-v2 .metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.ui-v2 .engineering-metrics article,
.ui-v2 .metric-grid article {
padding: 12px 15px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .engineering-metrics article span,
.ui-v2 .metric-grid article span {
display: block;
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 .engineering-metrics article strong,
.ui-v2 .metric-grid article strong {
display: block; margin-top: 1px;
font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums;
}
/* Page headings for queue screens */
.ui-v2 .engineering-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ui-v2 .engineering-heading h1 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.01em; margin: 4px 0; }
.ui-v2 .engineering-heading p:not(.eyebrow) { color: var(--ui2-ink-2); font-size: 13.5px; max-width: 620px; }
/* Inline filter bars */
.ui-v2 .engineering-filter {
display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
padding: 12px 14px;
margin-bottom: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .engineering-filter label { display: grid; gap: 4px; }
.ui-v2 .engineering-filter label > span { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .engineering-filter input { min-width: 240px; }
/* Status tab pills */
.ui-v2 .review-page-tabs {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 14px;
}
.ui-v2 .review-page-tabs a {
display: inline-flex; align-items: center;
min-height: 38px; padding: 0 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 999px;
color: var(--ui2-ink-2);
font-size: 13px; font-weight: 600;
}
.ui-v2 .review-page-tabs a.active {
background: var(--ui2-cyan-dim);
border-color: rgba(46, 184, 230, .45);
color: var(--ui2-cyan-bright);
}
/* Shared register table (also used by QC + future registers) */
.ui-v2 .register-panel,
.ui-v2 .engineering-queue {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
overflow: hidden;
margin-bottom: 16px;
}
.ui-v2 .register-header,
.ui-v2 .register-row,
.ui-v2 .engineering-queue > header,
.ui-v2 .engineering-queue > article {
display: grid;
gap: 12px;
align-items: center;
padding: 10px 16px;
}
.ui-v2 .engineering-queue > header,
.ui-v2 .engineering-queue > article {
grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) 130px 120px minmax(120px, 1fr) 110px;
}
.ui-v2 .report-register .register-header,
.ui-v2 .report-register .register-row {
grid-template-columns: minmax(200px, 1.5fr) minmax(160px, 1.2fr) 120px 130px 100px;
}
.ui-v2 .register-header,
.ui-v2 .engineering-queue > header {
min-height: 36px;
background: var(--ui2-surface-raised);
border-bottom: 1px solid var(--ui2-line);
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}
.ui-v2 .register-row,
.ui-v2 .engineering-queue > article {
border-bottom: 1px solid var(--ui2-line);
min-height: 56px;
}
.ui-v2 .register-row:hover,
.ui-v2 .engineering-queue > article:hover { background: rgba(46, 184, 230, .05); }
.ui-v2 .register-row strong,
.ui-v2 .engineering-queue > article strong { display: block; font-size: 13.5px; font-weight: 650; }
.ui-v2 .register-row small,
.ui-v2 .engineering-queue > article small { display: block; margin-top: 1px; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .engineering-queue > article time { font-size: 12.5px; color: var(--ui2-ink-2); }
.ui-v2 .engineering-queue > article > a,
.ui-v2 .row-actions a { color: var(--ui2-cyan); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ui-v2 .engineering-queue > article > a:hover,
.ui-v2 .row-actions a:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .engineering-empty,
.ui-v2 .empty-state { padding: 36px 20px; color: var(--ui2-ink-2); text-align: center; font-size: 13.5px; }
/* Review/photo/report status badges (text always present) */
.ui-v2 .review-badge,
.ui-v2 .status-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px; font-weight: 650;
text-transform: capitalize;
white-space: nowrap;
background: var(--ui2-surface-raised);
color: var(--ui2-ink-2);
justify-self: start;
}
.ui-v2 .review-badge::before,
.ui-v2 .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-v2 .review-badge.awaiting_review,
.ui-v2 .review-badge.changes_requested,
.ui-v2 .review-badge.in_progress { background: var(--ui2-warn-bg); color: var(--ui2-warn); }
.ui-v2 .review-badge.in_review { background: var(--ui2-cyan-dim); color: var(--ui2-cyan-bright); }
.ui-v2 .review-badge.completed,
.ui-v2 .review-badge.complete,
.ui-v2 .status-badge.active { background: var(--ui2-good-bg); color: var(--ui2-good); }
/* Laravel pagination (default component) */
.ui-v2 nav[role="navigation"] { margin-top: 4px; font-size: 13px; }
.ui-v2 nav[role="navigation"] a,
.ui-v2 nav[role="navigation"] span[aria-current] > span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; min-height: 34px; padding: 0 8px; margin: 0 2px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 8px;
color: var(--ui2-ink-2);
}
.ui-v2 nav[role="navigation"] span[aria-current] > span {
background: var(--ui2-cyan-dim);
border-color: rgba(46, 184, 230, .45);
color: var(--ui2-cyan-bright);
}
.ui-v2 nav[role="navigation"] svg { width: 16px; height: 16px; }
.ui-v2 nav[role="navigation"] p { color: var(--ui2-ink-3); }
@media (max-width: 900px) {
.ui-v2 .register-header,
.ui-v2 .engineering-queue > header { display: none; }
.ui-v2 .register-row,
.ui-v2 .engineering-queue > article {
grid-template-columns: 1fr auto !important;
grid-auto-flow: row;
gap: 6px 10px;
padding: 12px 14px;
}
}
/* ---- 6f · Registers: Customers · Sites · Templates · Access ---- */
/* Default (customers) register grid */
.ui-v2 .register-panel .register-header:not(.site-register):not(.template-register):not(.access-register-grid):not(.duty-register):not(.field-register):not(.skill-type-grid),
.ui-v2 .register-panel .register-row:not(.site-register):not(.template-register):not(.access-register-grid):not(.duty-register):not(.field-register):not(.skill-type-grid) {
grid-template-columns: minmax(220px, 1.6fr) 130px 90px 120px 130px;
}
.ui-v2 .site-register.register-header,
.ui-v2 .site-register.register-row {
grid-template-columns: minmax(190px, 1.4fr) minmax(110px, .9fr) minmax(120px, 1fr) 110px 190px 90px;
}
.ui-v2 .template-register.register-header,
.ui-v2 .template-register.register-row {
grid-template-columns: minmax(220px, 1.6fr) minmax(130px, 1fr) 90px minmax(150px, 1fr) 110px;
}
.ui-v2 .access-register-grid.register-header,
.ui-v2 .access-register-grid.register-row {
grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1.2fr) minmax(120px, .9fr) 80px 110px 90px 90px;
}
.ui-v2 .field-register.register-header,
.ui-v2 .field-register.register-row {
grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 1fr) minmax(100px, .7fr) 140px 110px 90px;
}
.ui-v2 .field-people-register { margin-top: 22px; }
.ui-v2 .field-people-register .section-heading { padding: 14px 16px 4px; }
.ui-v2 .access-kind-choice {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px; margin-top: 12px;
}
/* Filter bars shared by sites/templates/access */
.ui-v2 .site-filter-form {
display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
padding: 12px 14px;
margin-bottom: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .site-filter-form label { display: grid; gap: 4px; }
.ui-v2 .site-filter-form label > span { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .site-search { flex: 1 1 260px; }
.ui-v2 .site-search input { width: 100%; }
.ui-v2 .site-filter-actions { display: flex; align-items: center; gap: 8px; }
.ui-v2 .site-result-count { color: var(--ui2-ink-3); font-size: 12.5px; margin: 0 0 10px; }
/* Identity cells */
.ui-v2 .customer-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-v2 .customer-logo-frame {
flex: 0 0 auto;
width: 56px; height: 34px;
display: grid; place-items: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.ui-v2 .customer-logo-frame img { max-width: 50px; max-height: 28px; object-fit: contain; }
.ui-v2 .mono-value { font-family: var(--ui2-mono); font-size: 12.5px; color: var(--ui2-cyan); }
.ui-v2 .access-user-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-v2 .access-avatar {
flex: 0 0 34px;
width: 34px; height: 34px;
display: grid; place-items: center;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: 50%;
color: var(--ui2-cyan-bright);
font-size: 12px; font-weight: 750;
overflow: hidden;
}
.ui-v2 .access-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Links & small action buttons in rows */
.ui-v2 .primary-link { color: var(--ui2-cyan); font-weight: 650; font-size: 13px; }
.ui-v2 .primary-link:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .danger-button {
display: inline-flex; align-items: center;
min-height: 34px; padding: 0 12px;
background: transparent;
border: 1px solid rgba(255, 107, 97, .35);
border-radius: 999px;
color: var(--ui2-crit);
font-size: 12.5px; font-weight: 600;
}
.ui-v2 .danger-button:hover { background: var(--ui2-crit-bg); }
.ui-v2 .site-row-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-v2 .site-action-button {
display: inline-flex; align-items: center; gap: 5px;
min-height: 32px; padding: 0 11px;
border-radius: 999px;
font-size: 12px; font-weight: 650;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
color: var(--ui2-ink-2);
/* "New job for this site" is a link now, not a button; it must look the same. */
text-decoration: none;
}
.ui-v2 .site-action-button.directions { color: var(--ui2-cyan-bright); border-color: rgba(46, 184, 230, .4); }
.ui-v2 .site-action-button.dispatch { color: var(--ui2-ink-2); }
.ui-v2 .site-action-button.dispatch:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .site-action-button:hover { border-color: var(--ui2-cyan); }
/* Access page metrics */
.ui-v2 .planning-metrics {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px; margin-bottom: 16px;
}
.ui-v2 .planning-metrics article {
padding: 12px 15px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .planning-metrics article span { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .planning-metrics article strong,
.ui-v2 .metric-hero { display: block; margin-top: 1px; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ui-v2 .planning-metrics article small { color: var(--ui2-ink-2); font-size: 12px; }
.ui-v2 .metric-active { color: var(--ui2-good); }
.ui-v2 .certificate-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--ui2-ink-2); }
.ui-v2 .certificate-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-v2 .certificate-state.valid { color: var(--ui2-good); }
.ui-v2 .certificate-state.expiring { color: var(--ui2-warn); }
.ui-v2 .certificate-state.expired { color: var(--ui2-crit); }
@media (max-width: 900px) {
.ui-v2 .site-register.register-row,
.ui-v2 .template-register.register-row,
.ui-v2 .access-register-grid.register-row,
.ui-v2 .field-register.register-row { grid-template-columns: 1fr auto !important; }
}
/* ---- 6f-2 · Sites register: choosing sites for the register ---- */
.ui-v2 .site-register.register-header.is-selectable,
.ui-v2 .site-register.register-row.is-selectable {
grid-template-columns: 34px minmax(170px, 1.3fr) minmax(100px, .8fr) minmax(105px, .9fr) 105px 240px 86px;
}
.ui-v2 .register-row.site-register.is-selectable .site-row-buttons {
display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.ui-v2 .site-select-cell { display: flex; align-items: center; justify-content: center; }
.ui-v2 .site-select-cell input {
width: 17px; height: 17px;
accent-color: var(--ui2-cyan);
cursor: pointer;
}
.ui-v2 .register-row.site-register:has([data-select-site]:checked) {
background: var(--ui2-cyan-dim);
}
.ui-v2 .site-selection-tray {
position: sticky;
bottom: 16px;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-top: 16px;
padding: 14px 18px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
box-shadow: 0 18px 44px rgba(2, 8, 18, .55);
}
.ui-v2 .site-selection-count { margin: 0; font-size: 15px; }
.ui-v2 .site-selection-count strong { font-size: 19px; color: var(--ui2-cyan); }
.ui-v2 .site-selection-count small { display: block; color: var(--ui2-ink-3); font-size: 12.5px; }
.ui-v2 .site-selection-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-v2 .site-selection-actions [aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* Review screen */
.ui-v2 .selection-summary { padding: 16px 18px; margin-bottom: 16px; }
.ui-v2 .selection-summary-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ui-v2 .selection-summary-grid article {
padding: 14px 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .selection-summary-grid article.is-flagged { border-color: var(--ui2-warn); background: var(--ui2-warn-bg); }
.ui-v2 .selection-summary-grid span {
display: block;
font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
color: var(--ui2-ink-3);
}
.ui-v2 .selection-summary-grid strong { display: block; font-size: 25px; font-weight: 750; margin: 4px 0 2px; }
.ui-v2 .selection-summary-grid small { color: var(--ui2-ink-3); font-size: 12.5px; }
.ui-v2 .form-card > h2 { font-size: 16px; margin: 0 0 14px; letter-spacing: -.01em; }
.ui-v2 .selection-commit {
display: flex; align-items: start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
margin-top: 16px; padding: 20px 22px;
background: var(--ui2-surface); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius);
}
.ui-v2 .selection-commit h2 { font-size: 17px; margin: 0 0 10px; }
.ui-v2 .selection-commit ol { margin: 0; padding-left: 20px; color: var(--ui2-ink-2); font-size: 15px; }
.ui-v2 .selection-commit li { margin-bottom: 8px; }
.ui-v2 .selection-commit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Travel estimate: day-by-day trip table */
.ui-v2 .travel-day-register.register-header,
.ui-v2 .travel-day-register.register-row {
grid-template-columns: 120px 70px 100px minmax(220px, 1fr);
}
.ui-v2 .travel-day-stops { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-v2 .travel-day-stops span {
padding: 3px 10px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: 999px;
font-size: 12.5px;
color: var(--ui2-ink-2);
}
@media (max-width: 900px) {
.ui-v2 .travel-day-register.register-row { grid-template-columns: 1fr 1fr !important; }
}
/* ---- 6g · Review workspaces (Engineering + QC) ----------------- */
.ui-v2 .review-topbar {
display: flex; align-items: start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 16px 18px;
margin-bottom: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .review-topbar h1 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; margin: 3px 0 2px; }
.ui-v2 .review-topbar p:not(.eyebrow) { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .review-summary {
display: flex; gap: 18px; flex-wrap: wrap;
padding: 12px 16px;
margin-bottom: 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
font-size: 13px;
}
.ui-v2 .review-summary > div > span,
.ui-v2 .review-summary dt { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .review-summary > div > strong,
.ui-v2 .review-summary dd { margin: 2px 0 0; font-weight: 600; }
.ui-v2 .review-gates { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
.ui-v2 .review-gates li {
display: flex; align-items: center; gap: 9px;
padding: 9px 12px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
}
.ui-v2 .review-gates li.done,
.ui-v2 .review-gates li.complete { border-color: rgba(62, 207, 142, .3); color: var(--ui2-good); }
.ui-v2 .review-error {
padding: 12px 14px;
margin-bottom: 14px;
background: var(--ui2-crit-bg);
border: 1px solid rgba(255, 107, 97, .35);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-crit);
font-size: 13.5px;
}
.ui-v2 .engineering-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.ui-v2 .original-panel,
.ui-v2 .correction-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px;
}
.ui-v2 .original-panel {
border-color: rgba(46, 184, 230, .35);
box-shadow: inset 0 1px 0 rgba(86, 208, 245, .12), var(--ui2-shadow);
}
.ui-v2 .original-panel h2,
.ui-v2 .correction-panel h2 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.ui-v2 .review-fields { display: grid; gap: 10px; }
.ui-v2 .review-field {
padding: 10px 12px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 .review-field.uncaptured { opacity: .6; }
.ui-v2 .review-field > span:first-child,
.ui-v2 .review-field label { display: block; color: var(--ui2-ink-3); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.ui-v2 .review-field-answer { font-weight: 600; overflow-wrap: break-word; }
.ui-v2 .repeat-review-title { color: var(--ui2-cyan); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 12px 0 6px; }
.ui-v2 .review-asset-entry {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 .page-decision {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px;
margin-top: 12px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .review-complete {
padding: 14px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-good);
font-size: 13.5px;
}
@media (max-width: 1080px) {
.ui-v2 .engineering-workspace { grid-template-columns: 1fr; }
}
/* QC workspace */
.ui-v2 .qc-workspace { display: grid; gap: 14px; }
.ui-v2 .control-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px 18px;
}
.ui-v2 .panel-index { color: var(--ui2-cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ui-v2 .qc-panel-heading { font-size: 16.5px; font-weight: 700; margin: 3px 0 4px; }
.ui-v2 .qc-panel-intro { color: var(--ui2-ink-2); font-size: 13px; margin-bottom: 12px; }
.ui-v2 .detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; font-size: 13px; }
.ui-v2 .detail-list dt { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .detail-list dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: break-word; }
.ui-v2 .qc-pdf-link { font-size: 13.5px; }
.ui-v2 .qc-report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ui-v2 .issue-report-form { margin-top: 12px; }
.ui-v2 .controlled-issued {
padding: 14px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-good);
font-size: 13.5px;
}
.ui-v2 .debrox-form { display: grid; gap: 12px; }
.ui-v2 .debrox-form label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.ui-v2 .debrox-form label > span { color: var(--ui2-ink-2); }
.ui-v2 .debrox-form textarea { resize: vertical; min-height: 80px; }
/* ---- 6h · Field Operations control panels ---------------------- */
.ui-v2 .data-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px 18px;
margin-bottom: 14px;
}
.ui-v2 .control-panel { margin-bottom: 14px; }
.ui-v2 .control-panel h2 { font-size: 16.5px; font-weight: 700; margin: 3px 0 6px; }
.ui-v2 .control-panel p { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .google-adapter-readiness { border-color: rgba(46, 184, 230, .3); }
.ui-v2 .google-readiness-gates { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; font-size: 13px; }
.ui-v2 .google-readiness-gates li {
display: flex; align-items: center; gap: 9px;
padding: 9px 12px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
}
.ui-v2 .google-billable-confirmation {
display: flex; align-items: flex-start; gap: 11px;
padding: 12px 14px;
margin: 10px 0;
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-warn);
font-size: 13px;
cursor: pointer;
}
.ui-v2 .google-billable-confirmation input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ui2-warn); flex: 0 0 18px; }
.ui-v2 .google-billable-confirmation strong { display: block; font-weight: 700; }
.ui-v2 .google-billable-confirmation small { display: block; margin-top: 2px; color: rgba(245, 192, 68, .75); font-size: 12px; }
.ui-v2 .google-readiness-action { margin-top: 10px; }
.ui-v2 .prototype-approval-form { display: grid; gap: 10px; margin-top: 12px; }
.ui-v2 .prototype-section-heading {
display: flex; align-items: end; justify-content: space-between; gap: 12px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .prototype-section-heading h2 { margin: 3px 0 0; }
.ui-v2 .prototype-section-heading > strong {
font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums;
color: var(--ui2-cyan-bright);
}
.ui-v2 .prototype-visit-list { display: grid; gap: 10px; }
.ui-v2 .prototype-visit-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink);
text-decoration: none;
}
.ui-v2 .prototype-visit-card:hover { border-color: rgba(46, 184, 230, .45); }
.ui-v2 .prototype-customer-dot {
flex: 0 0 9px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--ui2-cyan);
box-shadow: 0 0 8px rgba(46, 184, 230, .5);
}
.ui-v2 .prototype-visit-card-copy { min-width: 0; flex: 1; }
.ui-v2 .prototype-visit-card-copy strong { display: block; font-size: 13.5px; font-weight: 650; }
.ui-v2 .prototype-visit-card-copy small { display: block; margin-top: 1px; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .prototype-visit-card-copy .prototype-assignment-state { color: var(--ui2-ink-2); }
.ui-v2 .prototype-card-action { flex: 0 0 auto; text-align: right; }
.ui-v2 .prototype-card-action > span {
display: block;
color: var(--ui2-ink-3);
font-size: 11px; font-family: var(--ui2-mono);
}
.ui-v2 .prototype-card-action > strong {
display: block; margin-top: 2px;
color: var(--ui2-cyan);
font-size: 12.5px; font-weight: 650;
white-space: nowrap;
}
.ui-v2 .prototype-visit-list.exclusions .prototype-visit-card,
.ui-v2 .prototype-visit-list.exclusions > a,
.ui-v2 .prototype-visit-list.exclusions > div {
border-color: rgba(245, 192, 68, .3);
}
.ui-v2 .prototype-visit-list.exclusions .prototype-customer-dot { background: var(--ui2-warn); box-shadow: 0 0 8px rgba(245, 192, 68, .5); }
.ui-v2 .prototype-visit-list.exclusions .prototype-card-action > strong { color: var(--ui2-warn); }
.ui-v2 .prototype-assignment-state { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .prototype-route-board { overflow-x: auto; }
/* ---- 6i · Login (standalone) ----------------------------------- */
body.debrox-login-body.ui-v2 {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.ui-v2 .debrox-login-shell {
width: min(1060px, 100%);
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr);
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 20px;
overflow: hidden;
/* Safari: rounded-corner clipping needs its own stacking context */
isolation: isolate;
box-shadow: 0 24px 70px rgba(2, 8, 18, .6);
}
.ui-v2 .debrox-login-hero {
position: relative;
overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
min-height: 480px;
padding: 34px;
background:
radial-gradient(680px 380px at 12% -6%, rgba(46, 184, 230, .18), transparent 60%),
linear-gradient(160deg, #0A1E33, #050E1C);
}
.ui-v2 .debrox-login-grid,
.ui-v2 .debrox-login-rings { display: none; }
.ui-v2 .debrox-login-brand { position: relative; z-index: 1; }
.ui-v2 .debrox-login-brand img { width: 165px; }
.ui-v2 .debrox-login-copy { position: relative; z-index: 1; max-width: 62%; }
.ui-v2 .debrox-login-eyebrow { color: var(--ui2-cyan); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ui-v2 .debrox-login-copy h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -.01em; line-height: 1.16; margin: 8px 0; }
.ui-v2 .debrox-login-copy h1 span { color: var(--ui2-cyan-bright); }
.ui-v2 .debrox-login-copy > p:not(.debrox-login-eyebrow) { color: var(--ui2-ink-2); font-size: 13.5px; }
.ui-v2 .debrox-security-statement {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 14px;
padding: 8px 14px;
background: rgba(46, 184, 230, .1);
border: 1px solid rgba(46, 184, 230, .3);
border-radius: 999px;
color: var(--ui2-cyan-bright);
font-size: 12px; font-weight: 600;
}
.ui-v2 .debrox-login-character {
position: absolute; right: 0; bottom: 0;
max-width: 44%;
opacity: .92;
}
.ui-v2 .debrox-login-access {
display: flex; flex-direction: column; justify-content: center;
padding: 34px 32px;
}
.ui-v2 .debrox-development-badge {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
margin-bottom: 16px;
padding: 5px 12px;
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .3);
border-radius: 999px;
color: var(--ui2-warn);
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 .debrox-development-badge > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-v2 .debrox-form-brand { color: var(--ui2-cyan); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ui-v2 .debrox-login-card h2 { font-size: 25px; font-weight: 750; letter-spacing: -.01em; margin: 8px 0 4px; }
.ui-v2 .debrox-form-intro { color: var(--ui2-ink-2); font-size: 13.5px; margin-bottom: 18px; }
.ui-v2 .debrox-login-form { display: grid; gap: 8px; }
.ui-v2 .debrox-login-form label { font-size: 13px; font-weight: 650; margin-top: 8px; }
.ui-v2 .debrox-login-form input { min-height: 48px; font-size: 15px; width: 100%; }
.ui-v2 .debrox-login-form .primary-button { justify-content: center; min-height: 50px; font-size: 15px; margin-top: 14px; width: 100%; }
/* Forgot-password and reset screens reuse the login card without the hero. */
.ui-v2 .debrox-auth-single {
grid-template-columns: minmax(0, 460px);
justify-content: center;
}
.ui-v2 .debrox-auth-aside {
margin: 14px 0 0;
font-size: 13.5px;
color: var(--ui2-ink-3);
}
.ui-v2 .debrox-auth-aside a { color: var(--ui2-cyan); text-decoration: none; }
.ui-v2 .debrox-auth-aside a:hover { text-decoration: underline; }
.ui-v2 .debrox-restricted-note {
display: flex; gap: 9px;
margin-top: 18px;
color: var(--ui2-ink-3);
font-size: 12px; line-height: 1.5;
}
@media (max-width: 860px) {
.ui-v2 .debrox-login-shell { grid-template-columns: 1fr; }
.ui-v2 .debrox-login-hero { min-height: 0; padding: 26px; }
.ui-v2 .debrox-login-character { display: none; }
.ui-v2 .debrox-login-copy { max-width: 100%; }
}
/* ---- 6j · Generic forms & detail pages ------------------------- */
.ui-v2 .form-card,
.ui-v2 .register-detail-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 18px;
margin-bottom: 16px;
}
.ui-v2 .form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ui-v2 .form-grid label,
.ui-v2 .form-card label { display: grid; gap: 5px; font-size: 13px; font-weight: 650; }
.ui-v2 .form-grid label > span,
.ui-v2 .form-card label > span { color: var(--ui2-ink-2); }
.ui-v2 .form-grid label > small { color: var(--ui2-ink-3); font-size: 11.5px; font-weight: 400; }
.ui-v2 .form-grid .full,
.ui-v2 .form-grid .full-field { grid-column: 1 / -1; }
.ui-v2 .form-card input:not([type="checkbox"]):not([type="radio"]),
.ui-v2 .form-card select,
.ui-v2 .form-card textarea { width: 100%; min-height: 44px; }
.ui-v2 .form-card textarea { min-height: 90px; resize: vertical; }
.ui-v2 .form-actions {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 16px;
}
.ui-v2 .section-title,
.ui-v2 .section-heading,
.ui-v2 .register-section-heading {
font-size: 15.5px; font-weight: 700;
margin: 4px 0 10px;
}
.ui-v2 .check-row {
display: flex; align-items: center; gap: 10px;
min-height: 44px;
padding: 0 13px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
font-size: 13.5px; font-weight: 600;
cursor: pointer;
}
.ui-v2 .check-row input { width: 18px; height: 18px; accent-color: var(--ui2-cyan); }
.ui-v2 .choice-card {
display: flex; align-items: flex-start; gap: 11px;
padding: 13px 15px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
cursor: pointer;
font-size: 13.5px;
}
.ui-v2 .choice-card:hover { border-color: var(--ui2-cyan); }
.ui-v2 .choice-card input { accent-color: var(--ui2-cyan); width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.ui-v2 .choice-card strong { font-weight: 700; }
.ui-v2 .choice-card small { display: block; margin-top: 3px; color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .route-guidance {
padding: 11px 14px;
margin: 10px 0;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
font-size: 13px;
}
.ui-v2 .document-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
padding: 14px 16px;
margin-bottom: 12px;
}
/* Register detail pages (operations register, workforce, etc.) */
.ui-v2 .register-page-header {
display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
margin-bottom: 16px;
}
.ui-v2 .register-page-header h1 { font-size: clamp(20px, 2.5vw, 25px); font-weight: 700; letter-spacing: -.01em; margin: 4px 0; }
.ui-v2 .register-page-header p:not(.eyebrow) { color: var(--ui2-ink-2); font-size: 13.5px; max-width: 620px; }
.ui-v2 .register-back-context {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px;
margin-bottom: 6px;
color: var(--ui2-ink-2);
font-size: 13px; font-weight: 600;
}
.ui-v2 .register-back-context:hover { color: var(--ui2-cyan-bright); }
.ui-v2 .register-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
border-radius: 999px;
background: var(--ui2-surface-raised);
color: var(--ui2-ink-2);
font-size: 11.5px; font-weight: 650; text-transform: capitalize;
}
.ui-v2 .register-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Operations register job cards */
.ui-v2 .commercial-job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ui-v2 .commercial-job-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 14px 16px;
margin-bottom: 12px;
}
.ui-v2 .commercial-job-card h2,
.ui-v2 .commercial-job-card h3 { font-size: 15px; font-weight: 700; margin: 2px 0 6px; }
.ui-v2 .commercial-job-span { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .commercial-job-note { color: var(--ui2-ink-2); font-size: 12.5px; }
.ui-v2 .workforce-form-section { margin-bottom: 18px; }
/* Living-engineering / twin fallback kickers */
.ui-v2 .lei-kicker { color: var(--ui2-cyan); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 720px) {
.ui-v2 .form-grid { grid-template-columns: 1fr; }
}
/* ---- 6k · Route plans register --------------------------------- */
.ui-v2 .route-plan-queue {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
overflow: hidden;
margin-bottom: 16px;
}
.ui-v2 .route-plan-table-head,
.ui-v2 .route-plan-row {
display: grid;
grid-template-columns: minmax(190px, 1.4fr) minmax(150px, 1.1fr) 70px minmax(130px, 1fr) minmax(150px, 1fr) 110px 70px;
gap: 12px;
align-items: center;
padding: 0 16px;
}
.ui-v2 .route-plan-table-head {
min-height: 36px;
background: var(--ui2-surface-raised);
border-bottom: 1px solid var(--ui2-line);
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}
.ui-v2 .route-plan-row {
min-height: 58px;
padding-top: 10px; padding-bottom: 10px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .route-plan-row:hover { background: rgba(46, 184, 230, .05); }
.ui-v2 .route-plan-row.is-overdue { box-shadow: inset 3px 0 0 var(--ui2-crit); }
.ui-v2 .route-plan-row strong { display: block; font-size: 13.5px; font-weight: 650; }
.ui-v2 .route-plan-row small { display: block; margin-top: 1px; color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .route-plan-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-v2 .route-plan-name > span {
flex: 0 0 30px;
width: 30px; height: 30px;
display: grid; place-items: center;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: 8px;
color: var(--ui2-cyan-bright);
font-family: var(--ui2-mono);
font-size: 11.5px; font-weight: 750;
}
.ui-v2 .schedule-warning { color: var(--ui2-crit) !important; font-weight: 650; }
.ui-v2 .dispatch-status.draft { background: var(--ui2-surface-raised); color: var(--ui2-ink-2); }
.ui-v2 .dispatch-status.confirmed { background: var(--ui2-cyan-dim); color: var(--ui2-cyan-bright); }
@media (max-width: 980px) {
.ui-v2 .route-plan-table-head { display: none; }
.ui-v2 .route-plan-row {
grid-template-columns: 1fr auto;
grid-auto-flow: row;
min-height: 0;
gap: 6px 10px;
padding: 12px 14px;
}
.ui-v2 .route-plan-name { grid-column: 1 / -1; }
.ui-v2 .route-plan-row .dispatch-open-job { justify-self: end; }
}
/* Route detail workspace */
.ui-v2 .route-workspace-card,
.ui-v2 .route-confirm-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 18px;
margin-bottom: 16px;
}
.ui-v2 .route-workspace-card h2,
.ui-v2 .route-confirm-card h2 { font-size: 17px; font-weight: 700; margin: 3px 0 6px; }
.ui-v2 .route-workspace-card > header { margin-bottom: 12px; }
.ui-v2 .route-dispatch-card { border-color: rgba(255, 122, 26, .4); }
.ui-v2 .route-site-search { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.ui-v2 .route-site-search input { flex: 1; min-width: 0; }
.ui-v2 .route-stop-list { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.ui-v2 .route-stop {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .route-pin,
.ui-v2 .route-stop-handle {
flex: 0 0 30px;
width: 30px; height: 30px;
display: grid; place-items: center;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .35);
border-radius: 50%;
color: var(--ui2-cyan-bright);
font-family: var(--ui2-mono);
font-size: 12px; font-weight: 750;
}
.ui-v2 .route-stop-distance { color: var(--ui2-ink-3); font-size: 11.5px; font-family: var(--ui2-mono); }
.ui-v2 .route-stop-controls { display: flex; gap: 6px; margin-left: auto; }
.ui-v2 .route-map-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-v2 .route-limit-note { color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .crew-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ui-v2 .crew-member-list { display: grid; gap: 8px; }
.ui-v2 .crew-person-summary { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ui-v2 .danger-text { color: var(--ui2-crit); font-size: 12.5px; font-weight: 600; }
.ui-v2 .field-label { display: block; margin-bottom: 5px; color: var(--ui2-ink-2); font-size: 12.5px; font-weight: 650; }
.ui-v2 .route-date-field,
.ui-v2 .route-day-field,
.ui-v2 .route-programme-field { display: grid; gap: 5px; }
/* ---- 6k2 · Route planning wizard ------------------------------- */
.ui-v2 fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.ui-v2 legend { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.ui-v2 .route-form-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 18px;
margin-bottom: 16px;
}
.ui-v2 .route-form-card > header { margin-bottom: 14px; }
.ui-v2 .route-form-card > header h2 { font-size: 17px; font-weight: 700; margin-top: 3px; }
.ui-v2 .route-stepper {
display: flex; gap: 12px; flex-wrap: wrap;
list-style: none; padding: 0; margin: 0 0 16px;
}
.ui-v2 .route-stepper li {
flex: 1 1 200px;
display: flex; align-items: center; gap: 11px;
padding: 11px 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
color: var(--ui2-ink-3);
}
.ui-v2 .route-stepper li > span {
flex: 0 0 30px;
width: 30px; height: 30px;
display: grid; place-items: center;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 50%;
font-family: var(--ui2-mono);
font-size: 13px; font-weight: 750;
}
.ui-v2 .route-stepper li strong { display: block; color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .route-stepper li small { display: block; font-size: 11.5px; }
.ui-v2 .route-stepper li.active { border-color: rgba(46, 184, 230, .45); }
.ui-v2 .route-stepper li.active > span { background: var(--ui2-cyan-dim); border-color: var(--ui2-cyan); color: var(--ui2-cyan-bright); }
.ui-v2 .route-stepper li.active strong { color: var(--ui2-ink); }
.ui-v2 .route-stepper li.complete > span { background: var(--ui2-good-bg); border-color: rgba(62, 207, 142, .45); color: var(--ui2-good); }
.ui-v2 .route-customer-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.ui-v2 .route-customer-selector > p { color: var(--ui2-ink-2); font-size: 12.5px; font-weight: 400; }
.ui-v2 .route-guidance { display: flex; gap: 10px; align-items: flex-start; }
.ui-v2 .route-guidance > span {
flex: 0 0 22px;
width: 22px; height: 22px;
display: grid; place-items: center;
background: rgba(46, 184, 230, .18);
border-radius: 50%;
color: var(--ui2-cyan-bright);
font-size: 12px; font-weight: 700; font-style: normal;
}
.ui-v2 .route-guidance strong { color: var(--ui2-ink); }
/* ---- 6l · Operations Register ---------------------------------- */
/* Stronger block edges without changing the white surface or layout. */
body.ui-v2.operations-register-ui :is(.register-queue-card, .register-filter-panel, .register-table-panel) {
border-color: #829AAA;
}
body.ui-v2.operations-register-ui .register-queue-card:hover {
border-color: #6F899D;
}
body.ui-v2.operations-register-ui .register-queue-card.is-selected {
border-color: var(--ui2-cyan);
}
body.ui-v2.operations-register-ui .operations-register-table :is(th, td) {
border-bottom-color: #9BADBB;
}
body.ui-v2.operations-register-ui .sidebar { border-right-color: #829AAA; }
.ui-v2 .register-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-v2 .register-queue-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.ui-v2 .register-queue-card {
display: grid; gap: 2px;
padding: 13px 15px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
color: var(--ui2-ink);
text-decoration: none;
}
.ui-v2 .register-queue-card > span { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .register-queue-card > strong { font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ui-v2 .register-queue-card > small { color: var(--ui2-ink-2); font-size: 12px; }
.ui-v2 .register-queue-card.is-selected { box-shadow: 0 0 0 1px var(--ui2-cyan), var(--ui2-shadow); }
.ui-v2 .register-queue-card:hover { border-color: var(--ui2-line-strong); }
.ui-v2 .register-filter-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
padding: 14px 16px;
margin-bottom: 16px;
}
.ui-v2 .register-filter-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ui-v2 .register-filter-form label { display: grid; gap: 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ui2-ink-3); }
.ui-v2 .register-filter-form select,
.ui-v2 .register-filter-form input { min-height: 40px; font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ui2-ink); }
.ui-v2 .register-search-field { flex: 1 1 240px; }
.ui-v2 .register-search-field input { width: 100%; }
.ui-v2 .register-table-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
overflow: hidden;
margin-bottom: 16px;
}
.ui-v2 .register-table-panel > .register-section-heading,
.ui-v2 .register-table-panel > h2 { padding: 14px 16px 0; }
.ui-v2 .register-column-filter-form { margin: 0; }
.ui-v2 .register-table-top-scroll {
height: 17px;
overflow-x: auto;
overflow-y: hidden;
border-top: 1px solid var(--ui2-line);
border-bottom: 1px solid var(--ui2-line);
scrollbar-color: var(--ui2-line-strong) var(--ui2-surface-raised);
}
.ui-v2 .register-table-top-scroll > div { height: 1px; }
.ui-v2 .register-table-wrap {
overflow-x: auto;
scrollbar-width: none;
}
.ui-v2 .register-table-wrap::-webkit-scrollbar { height: 0; }
.ui-v2 .operations-register-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Declared column widths keep the whole register inside the window instead of
pushing a horizontal scrollbar under every screen. Only applied once there is
room for it — on a narrow window the table scrolls rather than shredding
ordinary words down the middle. */
.ui-v2 .operations-register-table.is-excel-register {
min-width: 1180px;
font-size: 12.5px;
}
.ui-v2 .operations-register-table.is-excel-register :is(th, td) {
overflow-wrap: break-word;
}
/* Site and job codes are one long unbreakable token; let those wrap anywhere. */
.ui-v2 .operations-register-table.is-excel-register td.register-site-number-cell { overflow-wrap: anywhere; }
@media (min-width: 1200px) {
.ui-v2 .operations-register-table.is-excel-register { table-layout: fixed; min-width: 0; }
}
/* Widths sit on the named s the table declares, not on a count of cells
from the left: a reader without the tick column (finance) has one cell fewer,
and counting put every width one column out for them. The two date columns
are pixels, not a share, so a full yyyy/mm/dd fits in the box at any window
width the fixed layout applies to. Comment declares no width and takes
whatever is left, which grows with the screen. */
.ui-v2 .operations-register-table.is-excel-register col.register-col-tick { width: 34px; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-client { width: 8%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-region { width: 5%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-site-name { width: 10%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-site-number { width: 10%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-scope { width: 10%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-site-status { width: 7%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-team { width: 9%; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-planned { width: 130px; }
.ui-v2 .operations-register-table.is-excel-register col.register-col-completed { width: 130px; }
.ui-v2 .operations-register-table.is-excel-register td > :is(strong, span, small, a) { display: block; margin-bottom: 2px; }
/* Below the fixed layout the table scrolls sideways instead, and a date box —
the heading's filter and the row's own — still needs room for a full date. */
.ui-v2 .operations-register-table input[type="date"] { min-width: 112px; }
.ui-v2 .operations-register-table th {
padding: 7px 8px;
background: var(--ui2-surface-raised);
border-bottom: 1px solid var(--ui2-line);
color: var(--ui2-ink-3);
font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
text-align: left;
vertical-align: top;
}
.ui-v2 .operations-register-table th > span { display: block; margin-bottom: 5px; }
.ui-v2 .operations-register-table th :is(input, select) {
width: 100%; min-width: 0; min-height: 30px;
padding: 4px 6px;
border: 1px solid var(--ui2-line-strong);
border-radius: 6px;
background: var(--ui2-surface);
color: var(--ui2-ink);
font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.ui-v2 .operations-register-table th :is(input, select):focus { border-color: var(--ui2-cyan); outline: 2px solid rgba(46, 184, 230, .18); }
.ui-v2 .operations-register-table th:has(> input:not(:placeholder-shown)),
.ui-v2 .operations-register-table th:has(> select option:checked:not([value=""])) { background: rgba(46, 184, 230, .12); }
/* Column pickers: tick several clients, regions, sites, scopes or crews in one
heading. The chosen values stay on screen as removable chips, so the register
always says out loud what it is filtered by. */
.ui-v2 .register-picker { position: relative; }
.ui-v2 .register-picker-box {
display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
width: 100%; min-height: 30px;
padding: 3px 4px;
border: 1px solid var(--ui2-line-strong);
border-radius: 6px;
background: var(--ui2-surface);
cursor: text;
}
.ui-v2 .register-picker.is-open .register-picker-box {
border-color: var(--ui2-cyan);
outline: 2px solid rgba(46, 184, 230, .18);
}
.ui-v2 .register-picker-chips { display: contents; }
.ui-v2 .register-picker-chip {
/* Never squeezed by the search box beside it: a short value like a region
code stays whole, and only a genuinely long one is trimmed. */
display: inline-flex; align-items: center; gap: 3px;
flex: none; width: max-content; max-width: 100%;
/* Trim: the narrowest column is Region, where the chip's own padding costs
more room than the two letters inside it. */
padding: 2px 4px;
border: 1px solid rgba(46, 184, 230, .45);
border-radius: 4px;
background: rgba(46, 184, 230, .14);
color: var(--ui2-ink);
font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.ui-v2 .register-picker-chip:hover { background: rgba(46, 184, 230, .26); }
/* Trimmed with an ellipsis, never broken down the middle of a short word. */
.ui-v2 .register-picker-chip-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ui-v2 .register-picker-chip-cross { flex: none; color: var(--ui2-ink-3); font-weight: 700; }
/* Beats the shared header rule that stretches any input to the full cell. */
.ui-v2 .operations-register-table th .register-picker-box input.register-picker-search {
flex: 1 1 60px;
width: auto; min-width: 44px; min-height: 22px;
padding: 1px 2px;
border: 0;
background: none;
outline: none;
}
.ui-v2 .operations-register-table th .register-picker-box input.register-picker-search:focus {
border: 0; outline: none;
}
.ui-v2 .register-picker-list {
position: absolute; z-index: 40; top: calc(100% + 3px); left: 0;
min-width: 100%; max-width: 260px; max-height: 240px;
overflow-y: auto;
padding: 3px;
border: 1px solid var(--ui2-line-strong);
border-radius: 6px;
background: var(--ui2-surface);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .register-picker-list[hidden] { display: none; }
.ui-v2 .register-picker-option {
display: block; width: 100%;
padding: 5px 7px;
border: 0; border-radius: 4px;
background: none;
color: var(--ui2-ink);
font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.ui-v2 .register-picker-option:hover,
.ui-v2 .register-picker-option:focus-visible { background: rgba(46, 184, 230, .16); }
.ui-v2 .register-picker-empty {
margin: 0; padding: 6px 7px;
color: var(--ui2-ink-3);
font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
/* A heading holding a choice is tinted, the same as the older filters. */
.ui-v2 .operations-register-table th:has(.register-picker-chip) { background: rgba(46, 184, 230, .12); }
/* Without JavaScript the picker is a plain multiple choice and a plain search
box, both of which still work. */
.ui-v2 .register-picker-source { min-height: 56px; }
.ui-v2 .operations-register-table td {
padding: 7px 8px;
border-bottom: 1px solid var(--ui2-line);
vertical-align: top;
line-height: 1.35;
}
/* Continuous scrolling: the next rows load as you reach the bottom, so the
register reads as one long list rather than a stack of numbered pages. */
.ui-v2 .register-scroll-sentinel {
padding: 14px 16px;
text-align: center;
font-size: 12.5px;
color: var(--ui2-ink-3);
}
.ui-v2 .register-scroll-sentinel[hidden] { display: none; }
.ui-v2 .register-scroll-count {
padding: 10px 16px 14px;
text-align: center;
font-size: 12px;
color: var(--ui2-ink-3);
}
.ui-v2 .register-job-row:hover { background: rgba(46, 184, 230, .05); }
/* The whole row opens the job, so it should read as clickable. */
.ui-v2 .register-job-row[data-panel-href] { cursor: pointer; }
.ui-v2 .register-job-row[data-panel-href]:hover { background: rgba(46, 184, 230, .09); }
.ui-v2 .register-job-row[data-panel-href] :is(a, button) { cursor: pointer; }
.ui-v2 .register-job-link { font-family: var(--ui2-mono); font-size: 12.5px; }
.ui-v2 .register-next-action { color: var(--ui2-ink-2); font-size: 12.5px; }
/* The Comment column now shows more of what was typed; four lines is the
most a row gives it, so one long comment cannot make its row three times
the height of its neighbours. The full text is one click away in the quick
view. Declared after the display:block rule above on purpose — the two
selectors weigh the same, so the later one wins. */
.ui-v2 .operations-register-table td[data-label="Comment"] > span {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ui-v2 .register-blocker { color: var(--ui2-crit); font-size: 12.5px; font-weight: 650; }
.ui-v2 .register-row-action { color: var(--ui2-cyan); font-weight: 650; font-size: 12.5px; white-space: nowrap; }
.ui-v2 .register-empty-state { padding: 32px 20px; color: var(--ui2-ink-2); text-align: center; font-size: 13.5px; }
/* ---- 6m · Template builder & preview --------------------------- */
.ui-v2 .builder-panel {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px 18px;
margin-bottom: 14px;
}
.ui-v2 .builder-panel.approval-panel { border-color: rgba(62, 207, 142, .35); }
.ui-v2 .builder-section-title { font-size: 15px; font-weight: 700; margin: 2px 0 10px; }
.ui-v2 .builder-form,
.ui-v2 .builder-inline-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.ui-v2 .builder-inline-form label,
.ui-v2 .builder-form label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 650; }
.ui-v2 .builder-list-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 .builder-list-item strong { font-weight: 650; }
.ui-v2 .builder-list-item small { color: var(--ui2-ink-3); }
.ui-v2 .builder-empty { padding: 22px; color: var(--ui2-ink-3); text-align: center; font-size: 13px; border: 1px dashed var(--ui2-line-strong); border-radius: var(--ui2-radius-sm); }
.ui-v2 .builder-output-summary { color: var(--ui2-ink-2); font-size: 12.5px; }
.ui-v2 .output-slot {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 9px;
background: var(--ui2-cyan-dim);
border-radius: 999px;
color: var(--ui2-cyan-bright);
font-family: var(--ui2-mono);
font-size: 11.5px;
}
.ui-v2 .member-picker {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;
margin-top: 8px;
}
.ui-v2 .repeat-group-card {
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
padding: 12px;
margin-bottom: 10px;
}
.ui-v2 .compact-form { gap: 10px; }
.ui-v2 .preview-warning {
display: flex; align-items: center; gap: 9px;
padding: 10px 13px;
margin-bottom: 12px;
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-warn);
font-size: 13px;
}
.ui-v2 .capture-preview-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-v2 .capture-preview-heading h1 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; margin: 3px 0; }
.ui-v2 .capture-preview-branding { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
/* Template builder layout */
.ui-v2 .template-builder-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
gap: 16px;
align-items: start;
}
.ui-v2 .template-canvas { min-width: 0; }
.ui-v2 .template-controls { display: grid; gap: 14px; position: sticky; top: 78px; }
.ui-v2 .template-state {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 12px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
font-size: 12px; font-weight: 650;
}
.ui-v2 .template-section-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 14px 16px;
margin-bottom: 12px;
}
.ui-v2 .template-section-card > header {
display: flex; align-items: end; justify-content: space-between; gap: 12px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .template-section-card > header h3 { font-size: 15px; font-weight: 700; margin-top: 2px; }
.ui-v2 .template-section-card > header > span { color: var(--ui2-ink-3); font-size: 12px; white-space: nowrap; }
.ui-v2 .template-field-list { display: grid; gap: 6px; }
.ui-v2 .template-field-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 11px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 .template-field-row strong { display: block; font-weight: 650; }
.ui-v2 .template-field-row small { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .template-field-row code {
color: var(--ui2-cyan);
font-family: var(--ui2-mono);
font-size: 11.5px;
white-space: nowrap;
}
.ui-v2 .builder-form summary {
cursor: pointer;
list-style: none;
display: inline-flex; align-items: center;
min-height: 38px; padding: 0 14px;
margin-top: 10px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
color: var(--ui2-cyan-bright);
font-size: 13px; font-weight: 650;
}
.ui-v2 .builder-form summary::-webkit-details-marker { display: none; }
.ui-v2 details.builder-form[open] summary { margin-bottom: 10px; }
@media (max-width: 1000px) {
.ui-v2 .template-builder-grid { grid-template-columns: 1fr; }
.ui-v2 .template-controls { position: static; }
}
/* ---- 6n · Public welcome landing ------------------------------- */
body.welcome-body { margin: 0; }
.ui-v2 .skip-link { position: absolute; left: -9999px; }
.ui-v2 .skip-link:focus { left: 16px; top: 12px; z-index: 99; background: var(--ui2-surface); padding: 8px 14px; border-radius: 8px; }
.ui-v2 .page-shell {
position: relative;
min-height: 100vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.ui-v2 .blueprint-grid {
position: absolute; inset: 0;
background:
linear-gradient(rgba(46, 184, 230, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(46, 184, 230, .05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(900px 600px at 30% 20%, #000, transparent 75%);
-webkit-mask-image: radial-gradient(900px 600px at 30% 20%, #000, transparent 75%);
pointer-events: none;
}
.ui-v2 .site-header {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 22px clamp(20px, 5vw, 56px);
}
.ui-v2 .site-header .brand img { width: 175px; }
.ui-v2 .edition {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
color: var(--ui2-ink-2);
font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
}
.ui-v2 .edition-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ui2-good);
box-shadow: 0 0 10px rgba(62, 207, 142, .8);
}
.ui-v2 .hero {
position: relative;
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr);
gap: 30px;
align-items: center;
padding: 20px clamp(20px, 5vw, 56px) 40px;
width: min(1240px, 100%);
margin: 0 auto;
}
.ui-v2 .hero-copy .eyebrow { color: var(--ui2-cyan); letter-spacing: .2em; }
.ui-v2 .hero-copy h1 {
font-size: clamp(34px, 5.5vw, 58px);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.08;
margin: 14px 0;
}
.ui-v2 .hero-copy h1 span { color: var(--ui2-cyan-bright); }
.ui-v2 .summary { color: var(--ui2-ink-2); font-size: 15.5px; line-height: 1.6; max-width: 460px; }
.ui-v2 .status-card {
display: inline-flex; align-items: center; gap: 12px;
margin-top: 22px;
padding: 12px 18px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .status-card strong { display: block; font-size: 14px; }
.ui-v2 .status-card small { color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .signal { display: inline-flex; align-items: end; gap: 3px; height: 20px; }
.ui-v2 .signal i {
width: 5px; border-radius: 2px;
background: var(--ui2-good);
animation: ui2-signal 1.4s ease-in-out infinite;
}
.ui-v2 .signal i:nth-child(1) { height: 8px; }
.ui-v2 .signal i:nth-child(2) { height: 13px; animation-delay: .18s; }
.ui-v2 .signal i:nth-child(3) { height: 18px; animation-delay: .36s; }
@keyframes ui2-signal { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ui-v2 .tower-stage { position: relative; display: grid; place-items: center; }
.ui-v2 .tower-stage .tower { max-height: 62vh; filter: drop-shadow(0 0 44px rgba(46, 184, 230, .22)); }
.ui-v2 .signal-rings {
position: absolute; inset: 10% 0;
background: radial-gradient(closest-side, rgba(46, 184, 230, .14), transparent 70%);
pointer-events: none;
}
.ui-v2 .technical-note {
position: absolute;
color: var(--ui2-ink-3);
font-family: var(--ui2-mono);
font-size: 10.5px; letter-spacing: .18em;
}
.ui-v2 .technical-note-top { top: 6%; right: 4%; }
.ui-v2 .technical-note-bottom { bottom: 5%; left: 6%; }
.ui-v2 .site-footer {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 16px clamp(20px, 5vw, 56px);
border-top: 1px solid var(--ui2-line);
color: var(--ui2-ink-3);
font-size: 12px;
}
@media (max-width: 860px) {
.ui-v2 .hero { grid-template-columns: 1fr; }
.ui-v2 .tower-stage { display: none; }
}
/* ---- 6o · Hero assistant & PWA (minimal v2 skin) ---------------- */
.ui-v2 .pwa-install { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 6px; }
.ui-v2 .pwa-install-button {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
color: var(--ui2-ink);
border-radius: 999px;
font-size: 13px; font-weight: 600;
box-shadow: var(--ui2-shadow);
}
.ui-v2 .pwa-install-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ui-v2 .pwa-install-help {
position: fixed; left: 18px; bottom: 74px; z-index: 61;
max-width: 320px;
display: flex; gap: 12px;
padding: 16px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
}
.ui-v2 .pwa-install-help img { width: 44px; height: 44px; border-radius: 10px; }
.ui-v2 .pwa-install-close { position: absolute; top: 6px; right: 10px; color: var(--ui2-ink-3); font-size: 18px; }
.ui-v2 .pwa-install-dismiss {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line-strong);
border-radius: 999px;
color: var(--ui2-ink-3);
font-size: 15px; line-height: 1;
box-shadow: var(--ui2-shadow);
}
/* Phones: the install prompt sits after the page content instead of floating,
so it can never cover a capture screen's action buttons. */
@media (max-width: 920px) {
.ui-v2 .pwa-install {
position: static;
justify-content: center;
margin: 4px auto 22px;
padding: 0 16px;
}
.ui-v2 .pwa-install-help {
left: 12px; right: 12px; bottom: 12px;
max-width: none;
}
}
/* ---- 7 · Responsive -------------------------------------------- */
@media (max-width: 1080px) {
.ui-v2 .dashboard-hero-row { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
.ui-v2 .application-shell { grid-template-columns: 1fr; }
/* Sidebar becomes a compact top bar: small logo + wrap-around pill nav */
.ui-v2 .sidebar {
position: static; height: auto; min-height: 0; overflow: visible;
flex-direction: row; flex-wrap: wrap; align-items: center;
gap: 8px 14px;
padding: 10px 14px;
border-right: 0; border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 .app-brand { margin: 0; padding: 0; background: none; border: 0; }
.ui-v2 .app-brand img { width: 92px; }
.ui-v2 .primary-nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 240px; }
.ui-v2 .primary-nav a,
.ui-v2 .primary-nav summary {
min-height: 38px;
padding: 0 13px;
font-size: 12.5px;
white-space: nowrap;
border: 1px solid var(--ui2-line);
border-radius: 999px;
}
.ui-v2 .nav-submenu { flex-basis: 100%; margin: 2px 0 6px; padding-left: 12px; }
.ui-v2 .sidebar-foot { display: none; }
.ui-v2 .workspace-header { position: static; }
.ui-v2 .page-heading { flex-direction: column; align-items: start; gap: 10px; }
.ui-v2 .dashboard-account-card { flex-direction: column; align-items: start; }
}
@media (max-width: 560px) {
.ui-v2 .weather-current dl { display: none; }
.ui-v2 .workspace-content { width: calc(100% - 32px); }
.ui-v2 .header-actions { gap: 8px; }
.ui-v2 .company-select { display: none; }
}
/* ---- 7b · Mobile guarantees (carried over from v1 contract) ----- */
@media (max-width: 700px) {
.ui-v2 .register-queue-grid.is-operations-only { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
/* v1 contract: comfortable touch targets on phones (pill nav) */
.ui-v2 .primary-nav a,
.ui-v2 .primary-nav summary { min-height: 48px; }
}
.ui-v2 .primary-nav a:focus-visible,
.ui-v2 .primary-nav summary:focus-visible { outline: 3px solid #56D0F5; outline-offset: 2px; }
/* Filter-bar checkbox rows keep normal text */
.ui-v2 .register-filter-form .check-row {
align-self: end;
letter-spacing: 0;
text-transform: none;
font-size: 13px;
color: var(--ui2-ink);
}
/* Route planning pages: consistent vertical rhythm; back-link aligns top */
.ui-v2 .route-planning-page { display: grid; gap: 16px; }
.ui-v2 .route-planning-page > * { min-width: 0; }
.ui-v2 .route-create-heading,
.ui-v2 .route-detail-heading { align-items: start; }
.ui-v2 .route-planning-page .route-stepper,
.ui-v2 .route-planning-page .planning-metrics { margin-bottom: 0; }
/* Google map embeds */
.ui-v2 .debrox-map {
width: 100%;
height: 320px;
border: 1px solid var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
background: var(--ui2-surface-raised);
}
.ui-v2 .route-map { height: 380px; margin-bottom: 14px; }
.ui-v2 .site-map-panel { margin-bottom: 16px; }
/* Dashboard dispatch map */
.ui-v2 .dashboard-map-card {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px 18px;
margin-bottom: 20px;
}
.ui-v2 .dashboard-map-card > header {
display: flex; align-items: end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-bottom: 12px;
}
.ui-v2 .dashboard-map-card h2 { font-size: 17px; font-weight: 700; margin-top: 3px; }
.ui-v2 .dashboard-map-legend {
display: flex; align-items: center; gap: 8px;
color: var(--ui2-ink-2);
font-size: 12px; font-weight: 600;
}
.ui-v2 .legend-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; }
.ui-v2 .legend-dot:first-child { margin-left: 0; }
.ui-v2 .legend-dot.crit { background: var(--ui2-crit); }
.ui-v2 .legend-dot.warn { background: var(--ui2-warn); }
.ui-v2 .legend-dot.info { background: var(--ui2-cyan); }
.ui-v2 .dashboard-map { height: 360px; }
/* Site photo pack */
.ui-v2 .photo-pack-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
margin-bottom: 14px;
}
.ui-v2 .photo-pack-stats article {
padding: 10px 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 .photo-pack-stats article span { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .photo-pack-stats article strong { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ui-v2 .photo-pack-notice {
padding: 11px 14px; margin-bottom: 14px;
background: var(--ui2-cyan-dim); border: 1px solid rgba(46, 184, 230, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2); font-size: 13px;
}
.ui-v2 .photo-pack-notice.ready { background: var(--ui2-good-bg); border-color: rgba(62, 207, 142, .3); color: var(--ui2-good); }
.ui-v2 .photo-upload-panel,
.ui-v2 .photo-register,
.ui-v2 .photo-pack-finish {
background: var(--ui2-surface); border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius); box-shadow: var(--ui2-shadow);
padding: 16px; margin-bottom: 14px;
}
.ui-v2 .site-photo-picker {
display: grid; gap: 4px; justify-items: center;
padding: 18px 14px; margin-bottom: 10px;
background: var(--ui2-cyan-dim);
border: 1px dashed rgba(46, 184, 230, .5);
border-radius: var(--ui2-radius-sm);
text-align: center; cursor: pointer;
}
.ui-v2 .site-photo-picker input[type="file"] { width: 100%; font-size: 13px; }
.ui-v2 .site-photo-picker > span { color: var(--ui2-cyan-bright); font-size: 14px; font-weight: 650; }
.ui-v2 .site-photo-picker small { color: var(--ui2-ink-3); font-size: 11.5px; }
.ui-v2 .photo-upload-panel form { display: grid; gap: 8px; }
.ui-v2 .photo-upload-panel .secondary-button { justify-content: center; min-height: 46px; }
.ui-v2 .photo-upload-message { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .photo-live-queue, .ui-v2 .photo-register-list { display: grid; gap: 8px; margin-top: 10px; }
.ui-v2 .photo-live-row, .ui-v2 .photo-register-list > article {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 12.5px;
}
.ui-v2 .photo-live-row > div, .ui-v2 .photo-register-list > article > div { flex: 1; min-width: 0; }
.ui-v2 .photo-live-row strong, .ui-v2 .photo-register-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-v2 .photo-live-row small, .ui-v2 .photo-register-list small { color: var(--ui2-ink-3); }
.ui-v2 .photo-file-icon { color: var(--ui2-cyan); }
.ui-v2 .photo-status.uploading { background: var(--ui2-cyan-dim); color: var(--ui2-cyan-bright); }
.ui-v2 .photo-status.uploaded, .ui-v2 .photo-status.resolved { background: var(--ui2-good-bg); color: var(--ui2-good); }
.ui-v2 .photo-status.failed { background: var(--ui2-crit-bg); color: var(--ui2-crit); }
.ui-v2 .photo-pack-finish form { display: grid; }
.ui-v2 .photo-pack-finish .primary-button { justify-content: center; min-height: 48px; }
.ui-v2 .photo-pack-finish [data-finish-help] { margin-top: 8px; color: var(--ui2-ink-3); font-size: 12.5px; text-align: center; }
/* Disabled actions never look hot */
.ui-v2 button:disabled,
.ui-v2 .primary-button:disabled,
.ui-v2 .action-button:disabled {
background: var(--ui2-surface-raised);
color: var(--ui2-ink-3);
box-shadow: none;
cursor: not-allowed;
}
/* ---- 8 · Coverage layer (2026-08-14) ---------------------------
Restores styling for screens the v2 rebuild missed (classes that
lost their rules when debrox-foundation.css was deleted). All
selectors use :where() so they carry minimal specificity — any
deliberate page styling above always wins. Token-based only. */
/* 8.1 Label/value safety net: definition lists never run together */
.ui-v2 :where(.workspace-content) dl { display: grid; gap: 2px; margin: 10px 0 0; }
.ui-v2 :where(.workspace-content) dl > div {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 7px 2px;
border-bottom: 1px dashed var(--ui2-line);
font-size: 13px;
}
.ui-v2 :where(.workspace-content) dl > div:last-child { border-bottom: 0; }
.ui-v2 :where(.workspace-content) dl dt { color: var(--ui2-ink-2); }
.ui-v2 :where(.workspace-content) dl dd { margin: 0; font-weight: 650; text-align: right; }
.ui-v2 :where(.workspace-content) dl:where(.vertical) > div { flex-direction: column; align-items: start; gap: 3px; }
.ui-v2 :where(.workspace-content) dl:where(.vertical) dd { text-align: left; }
/* 8.2 Surface cards */
.ui-v2 :where(.access-session-panel, .access-password-card, .contract-text-panel,
.prototype-exclusion-card, .prototype-constraints-panel, .prototype-customer-preview-panel,
.register-attention-card, .qc-panel, .crew-member-card, .knowledge-card, .certificate-card,
.certificate-add-panel, .skill-impact-panel, .narrow-form-card, .commercial-visit-card,
.history-import-gate, .history-overview, .site-summary, .contract-workspace,
.certificate-workspace, .knowledge-upload, .document-upload, .site-form-section,
.commercial-job-remediation, .commercial-site-exception, .import-preview, .import-commit,
.history-import-summary, .history-import-report, .prototype-constraint-group,
.leader-choice, .leader-allocation, .extraction-summary, .contract-page) {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 16px;
margin-bottom: 14px;
}
.ui-v2 :where(.contract-page) { white-space: pre-wrap; font-size: 12.5px; color: var(--ui2-ink-2); }
/* 8.3 Muted help / guidance notes */
.ui-v2 :where(.session-guidance, .import-safety-note, .form-help,
.finance-dashboard-boundary-note, .prototype-endpoint-help, .hero-hint, .register-help-note,
.register-privacy-note, .access-control-guide, .commercial-job-hierarchy,
.prototype-endpoint-summary) {
display: block;
padding: 10px 14px;
margin: 0 0 14px;
background: rgba(46, 184, 230, .05);
border: 1px dashed var(--ui2-line);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-2);
font-size: 12.5px;
}
.ui-v2 :where(.register-privacy-note) strong { display: block; margin-bottom: 3px; color: var(--ui2-ink); }
/* 8.4 Warning / error / info states */
.ui-v2 :where(.confirmation-warning, .hero-warning, .access-highlight-field,
.history-lock-banner, .import-message.warning) {
padding: 10px 14px; margin: 0 0 14px;
background: var(--ui2-warn-bg);
border: 1px solid rgba(245, 192, 68, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-warn);
font-size: 13px;
}
.ui-v2 :where(.alert.error, .import-message.error) {
padding: 10px 14px; margin: 0 0 14px;
background: var(--ui2-crit-bg);
border: 1px solid rgba(255, 107, 97, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-crit);
font-size: 13px;
}
.ui-v2 :where(.import-message, .alert) {
display: block; padding: 10px 14px; margin: 0 0 14px;
background: rgba(46, 184, 230, .08);
border: 1px solid rgba(46, 184, 230, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-cyan-bright); font-size: 13px;
}
.ui-v2 :where(.import-complete, .job-complete-message, .inspection-locked-state) {
padding: 12px 16px; margin: 0 0 14px;
background: var(--ui2-good-bg);
border: 1px solid rgba(62, 207, 142, .3);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-good); font-size: 13.5px;
}
.ui-v2 :where(.register-status.is-success) { background: var(--ui2-good-bg); color: var(--ui2-good); border-color: rgba(62, 207, 142, .35); }
.ui-v2 :where(.register-status.is-warning) { background: var(--ui2-warn-bg); color: var(--ui2-warn); border-color: rgba(245, 192, 68, .35); }
.ui-v2 :where(.register-status.is-danger) { background: var(--ui2-crit-bg); color: var(--ui2-crit); border-color: rgba(255, 107, 97, .35); }
/* Grade semantics: A = critical, B = monitor, C = good. Never invert. */
.ui-v2 :where(.grade-a) { background: var(--ui2-crit-bg); color: var(--ui2-crit); border: 1px solid rgba(255, 107, 97, .35); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.ui-v2 :where(.grade-b) { background: var(--ui2-warn-bg); color: var(--ui2-warn); border: 1px solid rgba(245, 192, 68, .35); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.ui-v2 :where(.grade-c) { background: var(--ui2-good-bg); color: var(--ui2-good); border: 1px solid rgba(62, 207, 142, .35); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
/* 8.5 Stat tile grids (label over value) */
.ui-v2 :where(.register-summary-grid, .employee-summary-grid, .finance-summary-grid,
.report-metrics, .route-metrics, .qc-fact-grid, .history-overview-grid, .import-summary-grid,
.skill-type-grid, .dashboard-system-state, .commercial-review-grid, .qc-evidence-facts,
.qc-report-facts, .history-import-match-grid) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 0 0 16px;
}
.ui-v2 :where(.register-summary-grid, .employee-summary-grid, .finance-summary-grid,
.report-metrics, .route-metrics, .qc-fact-grid, .history-overview-grid, .import-summary-grid,
.skill-type-grid, .dashboard-system-state, .commercial-review-grid, .qc-evidence-facts,
.qc-report-facts, .history-import-match-grid) > :where(article, div) {
padding: 10px 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
}
.ui-v2 :where(.register-summary-grid, .employee-summary-grid, .finance-summary-grid,
.report-metrics, .route-metrics, .qc-fact-grid, .history-overview-grid, .import-summary-grid,
.skill-type-grid, .dashboard-system-state, .commercial-review-grid, .qc-evidence-facts,
.qc-report-facts, .history-import-match-grid) > :where(article, div) > span {
display: block; margin-bottom: 2px;
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 :where(.register-summary-grid, .employee-summary-grid, .finance-summary-grid,
.report-metrics, .route-metrics, .qc-fact-grid, .history-overview-grid, .import-summary-grid,
.skill-type-grid, .dashboard-system-state, .commercial-review-grid, .qc-evidence-facts,
.qc-report-facts, .history-import-match-grid) > :where(article, div) > strong {
font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums;
}
/* 8.6 Row lists (registers, files, history, results) */
.ui-v2 :where(.commercial-readiness-list, .register-site-list, .register-visit-list,
.route-plan-list, .dispatch-job-list, .version-register, .certificate-list,
.commercial-audit-list, .history-import-file-list, .prototype-route-rows,
.site-search-results, .workforce-register, .access-register, .contract-register,
.skill-type-register, .hero-results, .decision-history, .knowledge-list,
.commercial-site-options, .history-import-match) {
display: grid; gap: 8px; margin: 0 0 14px;
}
.ui-v2 :where(.commercial-readiness-list, .register-site-list, .register-visit-list,
.route-plan-list, .dispatch-job-list, .version-register, .certificate-list,
.commercial-audit-list, .history-import-file-list, .prototype-route-rows,
.site-search-results, .workforce-register, .access-register, .contract-register,
.skill-type-register, .hero-results, .decision-history, .knowledge-list,
.commercial-site-options) > :where(article, a, li, label, div) {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
padding: 10px 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 :where(.session-row, .contract-row, .document-row, .knowledge-file, .history-record,
.history-finding) {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
padding: 10px 14px; margin-bottom: 8px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
font-size: 13px;
}
.ui-v2 :where(.register-empty) {
padding: 20px;
border: 1px dashed var(--ui2-line);
border-radius: var(--ui2-radius);
color: var(--ui2-ink-2);
font-size: 13px; text-align: center;
}
/* 8.7 Action rows and buttons */
.ui-v2 :where(.register-job-actions, .commercial-job-submit-actions, .commercial-wizard-actions,
.prototype-form-actions, .planning-actions, .knowledge-actions, .contract-actions,
.certificate-actions, .qc-source-actions, .history-import-approval) {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 14px 0;
}
.ui-v2 :where(.full-button) { width: 100%; display: inline-flex; justify-content: center; }
.ui-v2 :where(.inline-check, .confirmation-check, .prototype-return-toggle,
.register-archived-toggle) {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ui2-ink-2); font-size: 12.5px;
}
/* 8.8 Form stacks and field grids */
.ui-v2 :where(.workforce-form, .access-main-form, .skill-edit-form, .skill-type-form,
.contract-upload-form, .prototype-constraint-form, .inspection-run-form,
.commercial-job-form) { display: grid; gap: 12px; }
.ui-v2 :where(.commercial-job-grid-three, .prototype-field-grid, .prototype-schedule-grid,
.prototype-endpoint-grid, .prototype-operating-grid, .mapping-grid, .scope-register-grid,
.workforce-register-grid, .site-detail-grid, .workforce-detail-grid, .history-evidence-grid) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 12px;
align-items: start;
}
.ui-v2 :where(.prototype-inline-form) { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ui-v2 :where(.route-template-field) { display: grid; gap: 6px; }
/* 8.9 Page/section layouts */
.ui-v2 :where(.access-editor-layout, .contract-review-layout, .skill-edit-layout,
.skill-type-layout, .scope-layout, .prototype-two-column, .register-detail-grid) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
gap: 14px;
align-items: start;
}
.ui-v2 :where(.workforce-heading, .photo-pack-heading) {
display: flex; align-items: end; justify-content: space-between; gap: 16px;
margin-bottom: 16px;
}
.ui-v2 :where(.workforce-filters, .access-filters, .filter-bar) {
display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
margin-bottom: 14px;
}
.ui-v2 :where(.report-status-tabs, .hero-tabs, .commercial-job-progress) {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.ui-v2 :where(.report-status-tabs, .hero-tabs, .commercial-job-progress) > :where(a, button, span, li) {
display: inline-flex; align-items: center; gap: 7px;
min-height: 36px; padding: 0 14px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 999px;
color: var(--ui2-ink-2); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.ui-v2 :where(.report-status-tabs a.active, .hero-tabs button[aria-selected="true"]) {
background: var(--ui2-cyan-grad);
color: var(--ui2-cyan-bright);
box-shadow: inset 0 0 0 1px rgba(46, 184, 230, .35);
}
/* 8.10 Small identity pieces */
.ui-v2 :where(.scope-chip, .current-badge) {
display: inline-flex; align-items: center;
padding: 3px 10px;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .3);
border-radius: 999px;
color: var(--ui2-cyan-bright); font-size: 11.5px; font-weight: 650;
}
.ui-v2 :where(.current-badge) { background: var(--ui2-good-bg); border-color: rgba(62, 207, 142, .35); color: var(--ui2-good); }
.ui-v2 :where(.checksum) { font-family: var(--ui2-mono); font-size: 11px; color: var(--ui2-ink-3); word-break: break-all; }
.ui-v2 :where(.session-device) { display: flex; align-items: center; gap: 10px; }
.ui-v2 :where(.session-device-icon) {
width: 36px; height: 36px; flex: 0 0 36px;
display: grid; place-items: center;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 10px;
}
.ui-v2 :where(.route-stop-number) {
width: 28px; height: 28px; flex: 0 0 28px;
display: grid; place-items: center;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .35);
border-radius: 50%;
color: var(--ui2-cyan-bright); font-size: 12.5px; font-weight: 700;
}
.ui-v2 :where(.capture-media-placeholder, .prototype-map-placeholder, .signature) {
display: grid; place-items: center;
min-height: 90px; padding: 14px;
border: 1px dashed var(--ui2-line-strong);
border-radius: var(--ui2-radius-sm);
color: var(--ui2-ink-3); font-size: 12.5px;
}
.ui-v2 :where(.history-photo-grid) {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.ui-v2 :where(.history-photo) img { width: 100%; border-radius: var(--ui2-radius-sm); border: 1px solid var(--ui2-line); }
.ui-v2 :where(.capture-preview-shell) { max-width: 980px; margin: 0 auto; }
.ui-v2 :where(.register-pagination) {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 14px; font-size: 12.5px; color: var(--ui2-ink-2);
}
.ui-v2 :where(.register-pagination-links) { display: flex; align-items: center; gap: 5px; }
.ui-v2 :where(.register-page-control, .register-page-number) {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; min-height: 30px; padding: 0 9px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: 8px;
color: var(--ui2-ink-2); font-size: 12.5px; text-decoration: none;
}
.ui-v2 :where(.register-page-number.current) {
background: var(--ui2-cyan-grad); color: var(--ui2-cyan-bright);
box-shadow: inset 0 0 0 1px rgba(46, 184, 230, .35);
}
.ui-v2 :where(.register-page-control.disabled) { opacity: .45; pointer-events: none; }
.ui-v2 :where(.register-page-gap) { color: var(--ui2-ink-3); }
/* 8.11 Hero assistant (floating internal search) */
.ui-v2 :where(.hero-launcher) {
position: fixed; right: 18px; bottom: 76px; z-index: 70;
width: 52px; height: 52px; padding: 0;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line-strong);
border-radius: 50%;
overflow: hidden; cursor: pointer;
box-shadow: var(--ui2-shadow);
}
.ui-v2 :where(.hero-launcher) img { width: 100%; height: 100%; object-fit: cover; }
.ui-v2 :where(.hero-backdrop) { position: fixed; inset: 0; z-index: 80; background: rgba(2, 8, 18, .55); }
.ui-v2 :where(.hero-backdrop)[hidden] { display: none; }
.ui-v2 :where(.hero-drawer) {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
width: min(430px, 92vw);
padding: 18px;
overflow-y: auto;
background: var(--ui2-sidebar);
border-left: 1px solid var(--ui2-line);
box-shadow: -18px 0 50px rgba(2, 8, 18, .5);
transform: translateX(102%);
transition: transform .22s ease;
}
.ui-v2 :where(.hero-drawer)[aria-hidden="false"] { transform: translateX(0); }
.ui-v2 :where(.hero-drawer-header) { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ui-v2 :where(.hero-drawer-header) span { color: var(--ui2-cyan); font-size: 10px; font-weight: 650; letter-spacing: .16em; }
.ui-v2 :where(.hero-panel) { display: grid; gap: 10px; }
.ui-v2 :where(.hero-status) { color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 :where(.hero-footer) { margin-top: 14px; color: var(--ui2-ink-3); font-size: 11.5px; }
/* 8.12 Back navigation: one consistent, unmissable cyan pill on every screen */
.ui-v2 :where(.register-back-context, .field-work-back) a,
.ui-v2 :where(a.my-work-back, a.field-work-back, a.twin-config-return, a.dispatch-utility-link) {
display: inline-flex; align-items: center; gap: 8px;
min-height: 36px; padding: 0 14px;
margin: 0 0 14px;
background: var(--ui2-cyan-dim);
border: 1px solid rgba(46, 184, 230, .35);
border-radius: 999px;
color: var(--ui2-cyan-bright);
font-size: 12.5px; font-weight: 650; text-decoration: none;
}
.ui-v2 :where(.register-back-context, .field-work-back) a:hover,
.ui-v2 :where(a.my-work-back, a.field-work-back, a.twin-config-return, a.dispatch-utility-link):hover {
border-color: var(--ui2-cyan);
background: rgba(46, 184, 230, .2);
}
/* Wide register cards span the full row — restores intended page order */
.ui-v2 :where(.register-detail-wide) { grid-column: 1 / -1; }
/* 8.13 Form fields in coverage forms: label stacked above full-width control */
.ui-v2 :where(.commercial-job-form, .commercial-job-grid, .commercial-job-grid-three,
.workforce-form, .access-main-form, .skill-edit-form, .skill-type-form,
.contract-upload-form, .prototype-constraint-form, .inspection-run-form,
.prototype-field-grid, .prototype-schedule-grid, .prototype-endpoint-grid,
.prototype-operating-grid, .mapping-grid, .route-template-field, .knowledge-upload,
.document-upload, .workforce-filters, .access-filters, .filter-bar,
.prototype-inline-form, .commercial-job-card) label {
display: grid; gap: 6px; align-content: start; margin: 0;
font-size: 13px;
}
.ui-v2 :where(.commercial-job-form, .commercial-job-grid, .commercial-job-grid-three,
.workforce-form, .access-main-form, .skill-edit-form, .skill-type-form,
.contract-upload-form, .prototype-constraint-form, .inspection-run-form,
.prototype-field-grid, .prototype-schedule-grid, .prototype-endpoint-grid,
.prototype-operating-grid, .mapping-grid, .route-template-field, .knowledge-upload,
.document-upload, .workforce-filters, .access-filters, .filter-bar,
.prototype-inline-form, .commercial-job-card) label > span {
color: var(--ui2-ink-3);
font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.ui-v2 :where(.commercial-job-form, .commercial-job-grid, .commercial-job-grid-three,
.workforce-form, .access-main-form, .skill-edit-form, .skill-type-form,
.contract-upload-form, .prototype-constraint-form, .inspection-run-form,
.prototype-field-grid, .prototype-schedule-grid, .prototype-endpoint-grid,
.prototype-operating-grid, .mapping-grid, .route-template-field, .knowledge-upload,
.document-upload, .workforce-filters, .access-filters, .filter-bar,
.prototype-inline-form, .commercial-job-card) :where(input, select, textarea) {
width: 100%;
}
.ui-v2 :where(.commercial-job-span) { grid-column: 1 / -1; }
/* 8.14 Site page: latest classification hero + per-year history grouping */
.ui-v2 :where(.site-latest-grade) {
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius);
box-shadow: var(--ui2-shadow);
padding: 18px;
margin-bottom: 14px;
}
.ui-v2 :where(.site-latest-grade-body) { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.ui-v2 :where(.site-latest-grade-body) h2 { margin-bottom: 2px; }
.ui-v2 :where(.site-latest-grade-body) > div > p { color: var(--ui2-ink-2); font-size: 12.5px; margin-bottom: 8px; }
.ui-v2 :where(.site-latest-grade) .secondary-button { margin-top: 10px; }
.ui-v2 :where(.history-grades) {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.ui-v2 :where(.history-grades) span {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 4px 8px;
border: 1px solid var(--ui2-line);
border-radius: 999px;
background: rgba(255, 255, 255, .025);
color: var(--ui2-ink-1);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .015em;
}
.ui-v2 :where(.grade-hero) {
flex: 0 0 auto;
width: 96px; height: 96px;
display: grid; place-items: center;
border-radius: var(--ui2-radius);
font-size: 56px; font-weight: 800; line-height: 1;
}
/* Grade semantics: A = critical (red), B = monitor, C = good. Never invert. */
.ui-v2 :where(.grade-hero-a) { background: var(--ui2-crit-bg); color: var(--ui2-crit); border: 1px solid rgba(255, 107, 97, .45); box-shadow: 0 0 26px rgba(255, 107, 97, .25); }
.ui-v2 :where(.grade-hero-b) { background: var(--ui2-warn-bg); color: var(--ui2-warn); border: 1px solid rgba(245, 192, 68, .45); }
.ui-v2 :where(.grade-hero-c) { background: var(--ui2-good-bg); color: var(--ui2-good); border: 1px solid rgba(62, 207, 142, .45); }
.ui-v2 :where(.grade-hero-d, .grade-hero-e) { background: var(--ui2-crit-bg); color: var(--ui2-crit); border: 1px solid rgba(255, 107, 97, .45); }
.ui-v2 :where(.history-year-heading) {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin: 18px 0 8px;
padding-bottom: 5px;
border-bottom: 1px solid var(--ui2-line);
}
.ui-v2 :where(.history-year-heading) strong { font-size: 17px; font-weight: 750; color: var(--ui2-cyan-bright); }
.ui-v2 :where(.history-year-heading) span { color: var(--ui2-ink-3); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
/* 8.15 Light-theme action colours: controls must read as actions, not pale fields. */
body.ui-v2 button:not(:disabled):not(.primary-button):not(.danger-button),
body.ui-v2 .secondary-button,
body.ui-v2 .action-button,
body.ui-v2 .text-button,
body.ui-v2 .site-action-button,
body.ui-v2 .site-action-button.directions,
body.ui-v2 .site-action-button.dispatch,
body.ui-v2 .weather-location-button,
body.ui-v2 .capture-location-button,
body.ui-v2 .pwa-install-button {
background: var(--ui2-action);
border-color: var(--ui2-action);
color: var(--ui2-action-text);
box-shadow: var(--ui2-action-shadow);
}
body.ui-v2 button:not(:disabled):not(.primary-button):not(.danger-button):hover,
body.ui-v2 .secondary-button:hover,
body.ui-v2 .action-button:hover,
body.ui-v2 .text-button:hover,
body.ui-v2 .site-action-button:hover,
body.ui-v2 .weather-location-button:hover,
body.ui-v2 .capture-location-button:hover,
body.ui-v2 .pwa-install-button:hover {
background: var(--ui2-action-hover);
border-color: var(--ui2-action-hover);
color: var(--ui2-action-text);
}
body.ui-v2 .text-button { min-height: 34px; padding: 7px 12px; border-radius: 999px; }
body.ui-v2 .danger-button {
background: var(--ui2-crit);
border-color: var(--ui2-crit);
color: #FFFFFF;
}
body.ui-v2 .danger-button:hover { background: #A92F29; border-color: #A92F29; }
/* The crew's "we could not do this site" note. */
.ui-v2 .field-problem-note,
.field-problem-card .field-problem-note {
margin: 6px 0 10px;
font-size: 13px;
line-height: 1.5;
opacity: .78;
}
/* ---- 6z · Slide-over panel ------------------------------------- */
/* Opens a record over its list so the list keeps its scroll position,
its filters and every row already loaded. Deliberately wide: it holds
the real page, not a summary of it. */
.ui-v2 .panel-drawer { position: fixed; inset: 0; z-index: 80; }
.ui-v2 .panel-drawer[hidden] { display: none; }
.ui-v2 .panel-drawer-scrim {
position: absolute; inset: 0;
background: rgba(4, 14, 26, .55);
animation: panel-fade 140ms ease-out;
}
.ui-v2 .panel-drawer-sheet {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(1080px, 94vw);
display: flex; flex-direction: column;
background: var(--ui2-surface);
border-left: 1px solid var(--ui2-line);
box-shadow: -24px 0 60px -30px rgba(4, 14, 26, .7);
animation: panel-slide 180ms cubic-bezier(.22,.61,.36,1);
}
.ui-v2 .panel-drawer-sheet:focus { outline: none; }
.ui-v2 .panel-drawer-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 12px 18px;
border-bottom: 1px solid var(--ui2-line);
background: var(--ui2-surface-raised);
flex: 0 0 auto;
}
.ui-v2 .panel-drawer-title {
margin: 0; font-size: 13px; font-weight: 650;
letter-spacing: .04em; text-transform: uppercase; color: var(--ui2-ink-3);
}
.ui-v2 .panel-drawer-head-actions { display: flex; align-items: center; gap: 14px; }
/* A proper button, not a line of text — the owner asked for it to be visible. */
.ui-v2 .panel-drawer-expand {
display: inline-flex; align-items: center; gap: 7px;
min-height: 34px; padding: 0 16px;
background: var(--ui2-action); color: var(--ui2-action-text);
border-radius: 999px;
font-size: 12.5px; font-weight: 650;
box-shadow: var(--ui2-action-shadow);
}
.ui-v2 .panel-drawer-expand:hover { background: var(--ui2-action-hover); color: var(--ui2-action-text); }
.ui-v2 .panel-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: 18px 22px 40px;
}
/* The page inside is already a workspace; drop its outer page padding. */
.ui-v2 .panel-drawer-body > .panel-document > :is(.operations-register-page, .site-detail-page) { padding: 0; }
.ui-v2 .panel-drawer-body .register-back-context { display: none; }
.ui-v2 body.has-panel-open { overflow: hidden; }
@keyframes panel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.ui-v2 .panel-drawer-scrim, .ui-v2 .panel-drawer-sheet { animation: none; }
}
@media (max-width: 700px) {
.ui-v2 .panel-drawer-sheet { width: 100vw; border-left: 0; }
.ui-v2 .panel-drawer-body { padding: 14px 14px 32px; }
}
.ui-v2 .register-row[data-panel-href] { cursor: pointer; }
/* Tick column + team dropdown on the Operations Register. The tick column's
width lives on its with the other register columns. */
.ui-v2 .operations-register-table :is(.register-tick-head, .register-tick-cell) {
text-align: center; padding-left: 6px; padding-right: 4px;
}
.ui-v2 .operations-register-table :is(.register-tick-head, .register-tick-cell) input { margin: 2px 0 0; cursor: pointer; }
.ui-v2 .register-team-select {
width: 100%; min-width: 0; min-height: 28px;
padding: 3px 6px;
border: 1px solid var(--ui2-line-strong);
border-radius: 6px;
background: var(--ui2-surface);
color: var(--ui2-ink);
font-size: 11.5px;
}
.ui-v2 .register-team-select:focus { border-color: var(--ui2-cyan); outline: 2px solid rgba(46, 184, 230, .18); }
/* Inline date edits in the register body. */
.ui-v2 .register-inline-date {
width: 100%; min-width: 0; min-height: 28px;
padding: 3px 5px;
border: 1px solid var(--ui2-line-strong);
border-radius: 6px;
background: var(--ui2-surface);
color: var(--ui2-ink);
font-size: 11.5px;
}
.ui-v2 .register-inline-date:focus,
.ui-v2 .register-team-select:focus { border-color: var(--ui2-cyan); outline: 2px solid rgba(46, 184, 230, .18); }
/* Planning tray. Sits outside the filter form so its controls never re-run the search. */
.ui-v2 .register-plan-tray {
position: sticky; bottom: 12px; z-index: 20;
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
margin: 12px 16px 16px;
padding: 12px 16px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-cyan);
border-radius: var(--ui2-radius-sm);
box-shadow: 0 14px 34px -22px rgba(4, 14, 26, .8);
}
.ui-v2 .register-plan-tray[hidden] { display: none; }
.ui-v2 .register-plan-tray-count { font-size: 13px; align-self: center; }
.ui-v2 .register-plan-tray-count strong { font-size: 17px; margin-right: 4px; }
.ui-v2 .register-plan-tray label { display: grid; gap: 4px; }
.ui-v2 .register-plan-tray label > span:first-child {
font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
text-transform: uppercase; color: var(--ui2-ink-3);
}
.ui-v2 .register-plan-tray-control { display: flex; gap: 6px; align-items: center; }
.ui-v2 .register-plan-tray :is(select, input[type="date"]) {
min-height: 34px; padding: 5px 8px;
border: 1px solid var(--ui2-line-strong); border-radius: 7px;
background: var(--ui2-surface); color: var(--ui2-ink); font-size: 13px;
}
.ui-v2 .register-plan-tray .secondary-button { padding: 6px 12px; font-size: 12.5px; }
.ui-v2 .register-plan-tray-note {
flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--ui2-ink-3);
}
/* The tray's one non-planning action sits at the right end, apart from the
Apply buttons, so it never reads as a fourth field. */
.ui-v2 .register-plan-tray .register-plan-tray-dispatch { margin-left: auto; align-self: center; }
.ui-v2 .register-plan-tray .register-plan-tray-dispatch[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* Route creation from the register: the ticked jobs, reviewed before the
route exists. A blocked row is muted and its tick is off; the state label
carries the colour, the words carry the reason. */
.ui-v2 .route-register-jobs {
display: grid; gap: 8px;
padding: 12px 14px;
background: var(--ui2-surface-raised);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .route-register-jobs-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ui-v2 .route-register-jobs-heading strong { font-size: 13px; }
.ui-v2 .route-register-jobs-heading span { font-size: 12px; color: var(--ui2-ink-3); }
.ui-v2 .route-register-job {
display: grid; grid-template-columns: auto minmax(180px, 1.3fr) minmax(200px, 1.4fr) minmax(150px, .9fr);
gap: 12px; align-items: start;
padding: 10px 12px;
background: var(--ui2-surface);
border: 1px solid var(--ui2-line);
border-radius: var(--ui2-radius-sm);
}
.ui-v2 .route-register-job.is-blocked { opacity: .72; }
.ui-v2 .route-register-job-tick input { width: 16px; height: 16px; margin-top: 3px; }
.ui-v2 .route-register-job-site strong { display: block; font-size: 13.5px; }
.ui-v2 .route-register-job-site small { display: block; font-size: 12px; color: var(--ui2-ink-3); margin-top: 2px; }
.ui-v2 .route-register-job-note { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ui-v2 .route-register-job-plan { display: grid; gap: 4px; font-size: 12.5px; }
.ui-v2 .route-register-job-plan em { font-style: normal; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui2-ink-3); margin-right: 4px; }
.ui-v2 .route-register-job-warn { display: block; font-size: 11.5px; color: var(--ui2-warn); }
.ui-v2 .route-register-job-state { display: grid; gap: 6px; justify-items: start; font-size: 12px; }
.ui-v2 .route-register-job-reasons { margin: 0; padding-left: 16px; font-size: 12px; color: var(--ui2-ink-2); }
.ui-v2 .route-register-job-reasons li + li { margin-top: 2px; }
.ui-v2 .route-register-jobs-empty { margin: 0; font-size: 12.5px; color: var(--ui2-ink-2); }
@media (max-width: 760px) {
.ui-v2 .route-register-job { grid-template-columns: auto 1fr; }
.ui-v2 .route-register-job-plan, .ui-v2 .route-register-job-state { grid-column: 2; }
}
/* The register job behind a route stop, so she recognises what she ticked. */
.ui-v2 .route-stop-job {
display: inline-block; margin-left: 6px; padding: 1px 7px;
border: 1px solid var(--ui2-line-strong); border-radius: 999px;
font-size: 11px; font-weight: 600; color: var(--ui2-ink-2); vertical-align: middle;
}
/* ---------------------------------------------------------------------------
Responsibilities (duties)
A person holds several of these, so they read as a wrapping set of chips
rather than a single badge. The chips are deliberately quieter than the role
badge beside them: the role decides what the application opens, a duty only
records what the office holds someone to.
--------------------------------------------------------------------------- */
.ui-v2 .duty-chips {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.ui-v2 .duty-chip {
display: inline-block;
padding: 2px 8px;
border: 1px solid var(--ui2-line);
border-radius: 999px;
background: var(--ui2-surface-raised);
color: var(--ui2-ink-2);
font-size: 11px;
line-height: 1.6;
white-space: nowrap;
}
.ui-v2 .duty-none { color: var(--ui2-ink-3); display: block; margin-top: 6px; }
.ui-v2 .duty-checklist {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 8px;
/* min() so the track can collapse below 240px - the user form puts this
inside a narrow column, and a hard 240px minimum pushed the whole
checklist outside the card. */
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.ui-v2 .duty-checklist > li { margin: 0; }
.ui-v2 .duty-checklist label {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border: 1px solid var(--ui2-line);
border-radius: 10px;
background: var(--ui2-surface);
cursor: pointer;
}
.ui-v2 .duty-checklist label:hover { border-color: var(--ui2-line-strong); }
/* The form styles every input to fill its cell, which made this tick box 418px
wide and pushed the name and its sentence off the edge of the card. Sized
outright so no width rule can reach it. */
.ui-v2 .duty-checklist input[type="checkbox"] {
margin: 3px 0 0; flex: 0 0 16px;
width: 16px; min-width: 16px; max-width: 16px; height: 16px;
}
/* The form's own label styling makes this a grid cell with no width of its own
and shouts it in caps. Inside the tick box it is a name and a sentence, so it
takes the room left beside the checkbox and reads as written. */
.ui-v2 .duty-checklist label > span {
display: block; min-width: 0; flex: 1 1 auto;
text-transform: none; letter-spacing: normal;
}
.ui-v2 .duty-checklist strong {
display: block; color: var(--ui2-ink); font-size: 13px;
/* The form section styles its labels as small caps headings. A duty name is
a name, not a heading - it reads as shouting and wraps badly. */
text-transform: none; letter-spacing: normal; font-weight: 600;
}
.ui-v2 .duty-checklist small { display: block; color: var(--ui2-ink-3); margin-top: 2px; }
.ui-v2 .duty-checklist label:has(input:checked) {
border-color: var(--ui2-cyan);
background: var(--ui2-cyan-dim);
}
.ui-v2 .duty-footnote, .ui-v2 .duty-empty { margin-top: 10px; color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .duty-register.register-header,
.ui-v2 .duty-register.register-row {
grid-template-columns: minmax(200px, 1.6fr) minmax(200px, 1.8fr) 110px 110px 90px;
}
.ui-v2 .duty-inline-form { display: contents; }
/* The row is the form, so its cells hold live controls rather than text. They
fill their column - a name box the width of a word makes a long duty
unreadable while the space beside it sits empty. */
.ui-v2 .duty-register input[type="text"],
.ui-v2 .duty-register input:not([type]),
.ui-v2 .duty-register select { width: 100%; min-width: 0; }
.ui-v2 .duty-register > div { min-width: 0; }
.ui-v2 .duty-retired { opacity: .62; }
@media (max-width: 920px) {
.ui-v2 .duty-register.register-header { display: none; }
.ui-v2 .duty-register.register-row { grid-template-columns: 1fr; }
.ui-v2 .duty-checklist { grid-template-columns: 1fr; }
}
/* ---- 6j · Job quick view (the slide-over first glance) ---------- */
.ui-v2 .register-quick-view { display: grid; gap: 16px; }
.ui-v2 .register-quick-view .register-back-context { display: flex; justify-content: space-between; gap: 12px; }
.ui-v2 .qv-header h1 { font-size: clamp(21px, 2.4vw, 25px); }
.ui-v2 .register-status.is-muted { background: var(--ui2-surface-raised); color: var(--ui2-ink-3); }
.ui-v2 .qv-tiles article a { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 650; }
.ui-v2 .qv-tile-action { border-color: var(--ui2-cyan) !important; }
.ui-v2 .qv-card-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-v2 .qv-card { display: grid; gap: 10px; align-content: start; }
.ui-v2 .qv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-v2 .qv-facts { margin: 0; display: grid; gap: 8px; }
.ui-v2 .qv-facts > div { display: flex; justify-content: space-between; gap: 12px; }
.ui-v2 .qv-facts dt { color: var(--ui2-ink-3); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ui-v2 .qv-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }
.ui-v2 .qv-scope-form { display: grid; gap: 8px; justify-items: end; }
.ui-v2 .qv-scope-form label { display: grid; gap: 4px; width: 100%; }
.ui-v2 .qv-scope-form label > span { color: var(--ui2-ink-3); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ui-v2 .qv-card-actions { display: flex; justify-content: flex-end; }
.ui-v2 .qv-comment-add { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.ui-v2 .qv-scroll-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--ui2-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ui-v2 .qv-scroll-divider::before, .ui-v2 .qv-scroll-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ui2-line); }
.ui-v2 .qv-collapsible > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.ui-v2 .qv-collapsible > summary::-webkit-details-marker { display: none; }
.ui-v2 .qv-collapsible > summary h2 { margin: 2px 0 0; font-size: 17px; }
.ui-v2 .qv-toggle-hint::after { content: "View less"; color: var(--ui2-ink-2); font-size: 12px; font-weight: 650; }
.ui-v2 .qv-collapsible:not([open]) .qv-toggle-hint::after { content: "View more"; }
.ui-v2 .qv-table { margin-top: 12px; border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); overflow: hidden; }
.ui-v2 .qv-table-head, .ui-v2 .qv-table-row {
display: grid; grid-template-columns: minmax(0, 1.05fr) 96px minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.2fr);
gap: 10px; align-items: center; padding: 9px 14px;
}
.ui-v2 .qv-table-head { background: var(--ui2-surface-raised); color: var(--ui2-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .qv-table-row { border-top: 1px solid var(--ui2-canvas-bottom); }
.ui-v2 .qv-cell-label { font-size: 13.5px; font-weight: 600; }
.ui-v2 .qv-cell-date, .ui-v2 .qv-cell-responsible { color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .qv-cell-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-v2 .qv-status-select { width: auto; max-width: 100%; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; border: 1px solid var(--ui2-line); }
.ui-v2 .qv-status-select.is-success { background: var(--ui2-good-bg); color: var(--ui2-good); }
.ui-v2 .qv-status-select.is-warning { background: var(--ui2-warn-bg); color: var(--ui2-warn); }
.ui-v2 .qv-status-select.is-danger { background: var(--ui2-crit-bg); color: var(--ui2-crit); }
.ui-v2 .qv-status-select.is-muted { background: var(--ui2-surface-raised); color: var(--ui2-ink-3); }
.ui-v2 .qv-certify-actions { display: inline-flex; align-items: center; gap: 8px; }
.ui-v2 .qv-comment-form { display: flex; align-items: center; gap: 6px; }
.ui-v2 .qv-comment-form input { font-size: 12.5px; min-height: 32px; }
.ui-v2 .qv-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.ui-v2 .qv-table-foot p { color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .qv-table-foot .primary-button:disabled { background: var(--ui2-canvas-bottom); color: var(--ui2-ink-3); box-shadow: none; cursor: not-allowed; }
.ui-v2 .qv-foot-note { color: var(--ui2-ink-3); font-size: 11.5px; text-align: right; margin: 6px 0 0; }
/* The routing strip under Dispatch: a quiet one-liner, present on most jobs
(few sites carry a verified pin), left-aligned beside the button. */
.ui-v2 .qv-routing-note { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-v2 .qv-routing-note a { color: var(--ui2-action); font-weight: 600; text-decoration: none; }
.ui-v2 .qv-routing-note a:hover { text-decoration: underline; }
/* The server's own release reasons, printed before the press — quick view
and full job page alike. */
.ui-v2 .qv-gate-list { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ui2-line); border-radius: 8px; background: var(--ui2-canvas-bottom); font-size: 12.5px; color: var(--ui2-ink-2); }
.ui-v2 .qv-gate-list strong { display: block; margin-bottom: 4px; color: var(--ui2-ink); }
.ui-v2 .qv-gate-list ul { margin: 0; padding-left: 18px; }
.ui-v2 .qv-gate-list li { margin: 2px 0; }
.ui-v2 .qv-gate-list small { display: block; margin-top: 6px; color: var(--ui2-ink-3); }
.ui-v2 .route-prefill-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ui-v2 .qv-finance-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-v2 .qv-finance-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-v2 .qv-invoice-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.ui-v2 .qv-invoice-form label { display: grid; gap: 4px; }
.ui-v2 .qv-invoice-form label > span { color: var(--ui2-ink-3); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .qv-invoice-form input { width: auto; }
/* The final-invoice tick: a plain sentence, off by default — the first
upload on a site invoiced in stages must never close the job by accident. */
.ui-v2 .qv-invoice-final { display: flex; align-items: center; gap: 8px; }
.ui-v2 .qv-invoice-final > span { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ui2-ink-1); }
.ui-v2 .qv-invoice-final input { width: auto; margin: 0; }
.ui-v2 .qv-invoice-list { margin: 12px 0; }
.ui-v2 .qv-invoice-remove button { padding: 4px 10px; }
.ui-v2 #qv-finance .form-errors { margin: 12px 0 0; }
/* An attachment row's right-hand side: the Just added badge, Open, Archive. */
.ui-v2 .qv-attachment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-v2 .qv-attachment-actions form { margin: 0; }
.ui-v2 .qv-attachment-form select { width: auto; min-width: 200px; }
.ui-v2 #qv-attachments .flash-success, .ui-v2 #qv-attachments .form-errors { margin: 0 0 12px; }
/* The site page's one-line pointer to the job files it no longer lists. */
.ui-v2 .site-job-files-note { margin: 0 0 12px; color: var(--ui2-ink-2); font-size: 12.5px; }
@media (max-width: 900px) {
.ui-v2 .qv-card-row { grid-template-columns: 1fr; }
.ui-v2 .qv-table-head { display: none; }
.ui-v2 .qv-table-row { grid-template-columns: 1fr; gap: 6px; }
}
/* Inside the drawer the header button already offers the full page — the
in-page return links stay for the standalone quick page only. */
.ui-v2 .panel-drawer-body .register-quick-view .register-back-context { display: none; }
/* ---- 6j-2 · Quick view: the buttons round ----------------------- */
.ui-v2 .register-status.is-info, .ui-v2 .qv-status-select.is-info { background: var(--ui2-cyan-dim); color: var(--ui2-cyan); }
.ui-v2 .qv-plan-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ui-v2 .qv-plan-form label { display: grid; gap: 4px; }
.ui-v2 .qv-plan-form label > span { color: var(--ui2-ink-3); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .qv-plan-form select, .ui-v2 .qv-plan-form input { width: auto; min-width: 140px; }
.ui-v2 .qv-disabled { opacity: .55; cursor: not-allowed; }
.ui-v2 .qv-comment-history > summary { cursor: pointer; list-style: none; margin: 6px 0; }
.ui-v2 .qv-comment-history > summary::-webkit-details-marker { display: none; }
.ui-v2 .qv-comment-history .qv-toggle-more::after { content: "View more"; color: var(--ui2-cyan); font-size: 12.5px; font-weight: 650; }
.ui-v2 .qv-comment-history[open] .qv-toggle-more::after { content: "View less"; }
/* ---- New Job package: mode chooser, site search, requirements selection (2026-09-01) ---- */
.ui-v2 .commercial-job-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.ui-v2 .commercial-job-mode legend { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 700; color: var(--ui2-ink-2); }
.ui-v2 .commercial-job-mode-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--ui2-surface-raised); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); cursor: pointer; }
.ui-v2 .commercial-job-mode-option:has(input:checked) { border-color: var(--ui2-cyan); box-shadow: inset 0 0 0 1px var(--ui2-cyan); }
.ui-v2 .commercial-job-mode-option input { margin-top: 3px; }
.ui-v2 .commercial-job-mode-option span { display: grid; gap: 2px; font-size: 13px; }
.ui-v2 .commercial-job-mode-option small { color: var(--ui2-ink-2); font-size: 12px; }
.ui-v2 .commercial-site-search { display: block; margin: 0 0 10px; }
.ui-v2 .commercial-site-search input { width: 100%; }
.ui-v2 .commercial-site-count { margin: -4px 0 14px; color: var(--ui2-ink-2); font-size: 12.5px; font-weight: 650; }
/* ---- New Job wizard: a site value beside each ticked site (2026-09-07) ---- */
.ui-v2 .commercial-site-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; }
.ui-v2 .commercial-site-row > label:first-child { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ui-v2 .commercial-site-row > label:first-child input { width: auto; }
.ui-v2 .commercial-site-value { display: grid; gap: 2px; font-size: 12px; }
.ui-v2 .commercial-site-value input { width: 150px; text-align: right; }
.ui-v2 .commercial-review-values { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-v2 .commercial-review-values li { display: flex; justify-content: space-between; gap: 12px; }
.ui-v2 .commercial-review-total { margin: 6px 0 0; font-weight: 650; }
@media (max-width: 640px) { .ui-v2 .commercial-site-row { grid-template-columns: 1fr; } .ui-v2 .commercial-site-value input { width: 100%; } }
.ui-v2 .qv-requirements-note { margin: 10px 0 4px; color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .qv-requirements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.ui-v2 .qv-requirements-grid > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--ui2-surface-raised); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); font-size: 13px; }
.ui-v2 .qv-requirements-grid > label > span { display: grid; gap: 1px; font-weight: 650; }
.ui-v2 .qv-requirements-grid > label small { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .qv-requirements-grid select { width: 78px; }
/* Registration row: name · Yes/No · the person who carries it (2026-09-03) */
.ui-v2 .qv-requirements-grid { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.ui-v2 .qv-requirement { display: grid; grid-template-columns: minmax(150px, 1fr) 78px minmax(160px, 1fr); align-items: center; gap: 8px; padding: 9px 12px; background: var(--ui2-surface-raised); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); font-size: 13px; }
.ui-v2 .qv-requirement-name { display: grid; gap: 1px; font-weight: 650; }
.ui-v2 .qv-requirement-name small { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .qv-requirement-person select { width: 100%; font-size: 12.5px; }
.ui-v2 .qv-requirement-fixed { color: var(--ui2-ink-3); font-size: 12.5px; }
.ui-v2 .qv-responsible-select { width: auto; max-width: 100%; padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); background: transparent; color: var(--ui2-ink-2); }
.ui-v2 .qv-responsible-select:has(option:checked:not([value=""])) { color: var(--ui2-ink); font-weight: 650; }
@media (max-width: 900px) { .ui-v2 .qv-requirement { grid-template-columns: 1fr 78px; } .ui-v2 .qv-requirement-person { grid-column: 1 / -1; } }
.ui-v2 .qv-comment-history .qv-view-more, .ui-v2 .qv-comment-history .qv-view-less { color: var(--ui2-cyan); font-size: 12.5px; font-weight: 650; }
.ui-v2 .qv-comment-history .qv-view-less { display: none; }
.ui-v2 .qv-comment-history[open] .qv-view-more { display: none; }
.ui-v2 .qv-comment-history[open] .qv-view-less { display: inline; }
.ui-v2 .commercial-site-hint { margin: -6px 0 10px; color: var(--ui2-ink-3); font-size: 12.5px; }
/* ---- Site location verification strip (2026-09-02) ---- */
.ui-v2 .site-location-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; }
.ui-v2 .site-location-verify small { color: var(--ui2-ink-2); font-size: 12.5px; flex-basis: 100%; }
.ui-v2 .field-hint { display: block; margin-top: 4px; color: var(--ui2-ink-3); font-size: 12px; }
.ui-v2 .field-hint-warning { color: #C2372E; font-weight: 650; }
.ui-v2 .field-hint a { color: var(--ui2-cyan); font-weight: 650; }
/* ---- Employee training matrix (2026-09-03) ---------------------------- */
.ui-v2 .training-topline { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; margin-bottom: 14px; }
.ui-v2 .training-tiles { margin-bottom: 0; }
.ui-v2 .training-tiles a { display: block; padding: 12px 15px; background: var(--ui2-surface); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius); box-shadow: var(--ui2-shadow); text-decoration: none; color: inherit; border-left-width: 4px; }
.ui-v2 .training-tiles a span { display: block; color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ui-v2 .training-tiles a strong { display: block; margin-top: 1px; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ui-v2 .training-tiles a:hover { border-color: var(--ui2-cyan); }
.ui-v2 .training-tiles a.is-current { outline: 2px solid var(--ui2-cyan); outline-offset: -2px; }
.ui-v2 .training-tiles .tile-ok { border-left-color: var(--ui2-good); }
.ui-v2 .training-tiles .tile-ok strong { color: var(--ui2-good); }
.ui-v2 .training-tiles .tile-d60 { border-left-color: #d9b400; }
.ui-v2 .training-tiles .tile-d60 strong { color: #a68a00; }
.ui-v2 .training-tiles .tile-d30 { border-left-color: var(--ui2-warn); }
.ui-v2 .training-tiles .tile-d30 strong { color: var(--ui2-warn); }
.ui-v2 .training-tiles .tile-expired { border-left-color: var(--ui2-crit); }
.ui-v2 .training-tiles .tile-expired strong { color: var(--ui2-crit); }
.ui-v2 .training-tiles .tile-none { border-left-color: var(--ui2-ink-3); }
.ui-v2 .training-cost-card { padding: 14px 16px; background: var(--ui2-surface); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius); box-shadow: var(--ui2-shadow); display: grid; gap: 2px; }
.ui-v2 .training-cost-month { font-size: 15px; font-weight: 700; }
.ui-v2 .training-cost-amount { font-size: 24px; font-weight: 800; color: var(--ui2-crit); font-variant-numeric: tabular-nums; }
.ui-v2 .training-cost-card small { color: var(--ui2-ink-2); font-size: 12px; }
.ui-v2 .training-cost-months { margin: 8px 0 0; display: grid; gap: 2px; font-size: 12px; color: var(--ui2-ink-2); }
.ui-v2 .training-cost-months div { display: flex; justify-content: space-between; }
.ui-v2 .training-cost-months dd { margin: 0; font-variant-numeric: tabular-nums; }
.ui-v2 .training-search { margin-bottom: 12px; }
.ui-v2 .training-matrix-panel { padding: 0; }
.ui-v2 .training-matrix-scroll { overflow-x: auto; }
.ui-v2 .training-matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.ui-v2 .training-matrix th, .ui-v2 .training-matrix td { padding: 9px 12px; border-bottom: 1px solid var(--ui2-line); text-align: left; white-space: nowrap; vertical-align: middle; }
.ui-v2 .training-matrix thead th { background: var(--ui2-surface-raised); color: var(--ui2-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .training-matrix thead th.col-type { border-left: 1px solid var(--ui2-line); text-align: center; color: var(--ui2-ink); }
.ui-v2 .training-matrix thead th.sub { font-size: 10px; letter-spacing: .06em; }
.ui-v2 .training-matrix td.cell-date { border-left: 1px solid var(--ui2-line); color: var(--ui2-ink-2); font-variant-numeric: tabular-nums; }
.ui-v2 .training-matrix td.col-name a { font-weight: 700; color: var(--ui2-cyan); text-decoration: none; }
.ui-v2 .training-matrix td.col-name a:hover { text-decoration: underline; }
.ui-v2 .training-matrix tr.is-selected td { background: var(--ui2-cyan-dim); }
.ui-v2 .training-matrix td.empty-state { text-align: center; white-space: normal; }
.ui-v2 .training-band { display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 6px; border: 1px solid transparent; font-size: 11px; font-weight: 750; text-align: center; letter-spacing: .04em; }
.ui-v2 .training-band.band-ok { background: var(--ui2-good-bg); color: var(--ui2-good); border-color: color-mix(in srgb, var(--ui2-good) 40%, transparent); }
.ui-v2 .training-band.band-d60 { background: #fff9c4; color: #7a6600; border-color: #e6d24a; }
.ui-v2 .training-band.band-d30 { background: var(--ui2-warn-bg); color: var(--ui2-warn); border-color: color-mix(in srgb, var(--ui2-warn) 45%, transparent); }
.ui-v2 .training-band.band-expired { background: var(--ui2-crit-bg); color: var(--ui2-crit); border-color: color-mix(in srgb, var(--ui2-crit) 45%, transparent); }
.ui-v2 .training-band.band-none { background: var(--ui2-surface-raised); color: var(--ui2-ink-3); }
.ui-v2 .band-text.band-ok { color: var(--ui2-good); }
.ui-v2 .band-text.band-d60 { color: #a68a00; }
.ui-v2 .band-text.band-d30 { color: var(--ui2-warn); }
.ui-v2 .band-text.band-expired { color: var(--ui2-crit); }
.ui-v2 .training-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 14px; margin-top: 16px; padding: 18px; background: var(--ui2-surface); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius); box-shadow: var(--ui2-shadow); }
.ui-v2 .training-detail-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.ui-v2 .training-detail-head > div:nth-child(2) { flex: 1 1 240px; }
.ui-v2 .training-detail-head h2 { margin: 0 0 2px; font-size: 22px; }
.ui-v2 .training-detail-head p { margin: 0; color: var(--ui2-ink-2); font-size: 13px; }
.ui-v2 .training-avatar { width: 64px; height: 64px; border-radius: 12px; background: var(--ui2-canvas-bottom); color: var(--ui2-ink-2); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.ui-v2 .training-detail h3 { margin: 6px 0 8px; font-size: 15px; }
.ui-v2 .training-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-v2 .training-detail-table th, .ui-v2 .training-detail-table td { padding: 7px 8px; border-bottom: 1px solid var(--ui2-line); text-align: left; }
.ui-v2 .training-detail-table th { color: var(--ui2-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .training-add { margin-top: 14px; padding: 12px 14px; background: var(--ui2-surface-raised); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); }
.ui-v2 .training-add > summary { cursor: pointer; font-weight: 700; color: var(--ui2-cyan); }
.ui-v2 .training-add form { margin-top: 10px; }
.ui-v2 .training-detail-side { display: grid; gap: 12px; align-content: start; }
.ui-v2 .training-side-card { padding: 14px; background: var(--ui2-surface-raised); border: 1px solid var(--ui2-line); border-radius: var(--ui2-radius-sm); }
.ui-v2 .training-side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ui-v2 .training-side-head h3 { margin: 0; font-size: 15px; }
.ui-v2 .training-side-head a { font-size: 12.5px; font-weight: 650; color: var(--ui2-cyan); text-decoration: none; }
.ui-v2 .training-side-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.ui-v2 .training-side-total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ui2-line); font-size: 13px; font-weight: 700; }
.ui-v2 .training-side-card small, .ui-v2 .training-side-empty { color: var(--ui2-ink-3); font-size: 12px; margin: 4px 0 0; }
.ui-v2 .training-doc { display: block; padding: 4px 0; font-size: 12.5px; color: var(--ui2-ink); text-decoration: none; }
.ui-v2 .training-doc::before { content: "📄 "; }
.ui-v2 .training-doc:hover { color: var(--ui2-cyan); }
.ui-v2 .form-hint { margin: -4px 0 12px; color: var(--ui2-ink-3); font-size: 12px; }
@media (max-width: 900px) {
.ui-v2 .training-topline, .ui-v2 .training-detail { grid-template-columns: 1fr; }
}
.ui-v2 .training-add .inline-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; }
.ui-v2 .training-add .inline-check input { width: auto; margin: 0; }
.ui-v2 .skill-type-grid.register-header,
.ui-v2 .skill-type-grid.register-row { grid-template-columns: minmax(140px, 1.3fr) 100px 92px 118px 96px 48px; }
@media (max-width: 900px) { .ui-v2 .skill-type-grid.register-row { grid-template-columns: 1fr auto !important; } }
/* The training-types register gained cost + validity columns: give it the
room, and let it scroll sideways rather than clip when it still has none. */
.ui-v2 .skill-type-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); }
.ui-v2 .skill-type-register { overflow-x: auto; }
/* Person photos (2026-09-03) */
.ui-v2 img.training-avatar { object-fit: cover; }
.ui-v2 .person-photo-heading { width: 56px; height: 56px; margin-right: 12px; }
.ui-v2 .person-photo-field { display: grid; gap: 6px; }
.ui-v2 .person-photo-preview { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ui2-line); }
.ui-v2 .person-photo-field input[type="file"] { width: 100%; }
.ui-v2 .person-photo-field .inline-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
.ui-v2 .person-photo-field .inline-check input { width: auto; margin: 0; }
/* Audit correction: readable header actions and field-use touch targets. */
body.ui-v2 button[type="submit"] { min-height: 44px; min-width: 44px; }
@media (max-width: 700px) {
.ui-v2 .panel-actions { width: 100%; }
.ui-v2 .panel-actions > * { flex: 1 1 180px; }
body.ui-v2 .primary-nav a,
body.ui-v2 .primary-nav .nav-submenu a,
body.ui-v2 .primary-nav summary,
body.ui-v2 button[type="submit"],
body.ui-v2 .primary-button,
body.ui-v2 .secondary-button,
body.ui-v2 .action-button,
body.ui-v2 .panel-actions .primary-link { min-height: 48px; }
body.ui-v2 button[type="submit"] { min-width: 48px; }
}
/* Anchen's date selection and on-site report choices use full touch targets. */
body.ui-v2 [data-register-dates] { display: grid; gap: 6px; min-width: 0; }
body.ui-v2 [data-register-dates] button,
body.ui-v2 [data-register-dates] .check-row,
body.ui-v2 .field-template-options .check-row,
body.ui-v2 .field-template-options > summary { min-height: 48px; }
body.ui-v2 [data-filter-date-values] { display: grid; gap: 4px; }
body.ui-v2 [data-filter-date-values] .check-row { display: flex; align-items: center; gap: 5px; padding: 4px; white-space: nowrap; font-size: 11px; letter-spacing: 0; }
body.ui-v2 [data-filter-date-values] input[type="checkbox"] { flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; }
body.ui-v2 .field-template-options { min-width: 0; margin-block: 16px; }
body.ui-v2 .field-job-detail { min-width: 0; grid-template-columns: minmax(0, 1fr); }
body.ui-v2 .field-job-detail > *,
body.ui-v2 .field-next-step header > div { min-width: 0; overflow-wrap: anywhere; }
body.ui-v2 .field-job-overview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ui-v2 .field-job-overview dl > div { min-width: 0; }
@media (max-width: 700px) {
body.ui-v2 .field-job-overview dl > div { display: block; }
body.ui-v2 .field-job-overview dt { white-space: nowrap; }
body.ui-v2 .field-job-overview dd { text-align: left; margin-top: 5px; }
}
body.ui-v2 .field-template-options legend { max-width: 100%; white-space: normal; }
body.ui-v2 .field-template-options .check-row { display: flex; align-items: center; gap: 12px; padding: 8px; }
body.ui-v2 .field-template-options span,
body.ui-v2 .field-inspection-list a { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body.ui-v2 .field-inspection-list { display: grid; gap: 12px; }
body.ui-v2 .field-template-options > summary { cursor: pointer; padding: 12px 0; color: #126f95; }
body.ui-v2 .field-template-options :focus-visible,
body.ui-v2 [data-register-dates] :focus-visible { outline: 3px solid #157fad; outline-offset: 2px; }
.ui-v2 .register-planning-feedback:not(:empty) {
position: fixed;
z-index: 70;
right: 16px;
bottom: 88px;
width: min(420px, calc(100vw - 32px));
padding: 12px 16px;
border: 1px solid #59768c;
border-radius: 8px;
background: #fff;
color: #172b3a;
box-shadow: 0 4px 18px #17384a24;
overflow-wrap: anywhere;
}