/* ═══════════════════════════════════════════════════════════════════════
ASSET REGISTER — list, detail, categories
─────────────────────────────────────────────────────────────────────
Reuses most chip / modal patterns from callouts. Only the bits unique
to assets (card variant, details panel, category manager) live here.
═══════════════════════════════════════════════════════════════════════ */
.asset-list-wrap {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0 0;
}
.asset-list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ── Visual / gallery view — interiors assets where the photo is the hero.
A responsive grid of cover-photo tiles; fills the width, no stranded cards. */
/* Top strip = the Category filter (left) + the List/Gallery view switcher pushed
to the far right. The status filter (All / Due / Overdue) is the clickable KPI
cards below, so there is no separate pill row to balance against. */
.asset-view-toggle { align-self: center; margin-left: auto; }
.asset-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.asset-gallery-tile {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
padding: 0;
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.asset-gallery-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.asset-gallery-tile:active { transform: scale(0.98); }
.asset-gallery-photo {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
background: var(--bg-elevated);
display: flex;
align-items: center;
justify-content: center;
}
.asset-gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-gallery-ph svg { width: 40%; height: 40%; opacity: 0.55; }
.asset-gallery-count {
position: absolute;
top: 7px;
right: 7px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 999px;
font: 600 11px / 1 var(--body);
}
.asset-gallery-count svg { width: 12px; height: 12px; }
.asset-gallery-cap {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 10px;
}
.asset-gallery-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.asset-gallery-name {
font: 600 13px / 1.3 var(--body);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Photo hero moved to the shared `.photo-hero` in css/14 (used by the Asset
register, Tasks and Call-outs). See ui/photo-hero.js. */
/* Photo capture emphasised when adding a visual (interiors) asset — the photo
is the point, so the camera CTA gets an accent tint. */
.tasks-photo-capture.is-visual .tasks-photo-capture-cta {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.asset-loading {
padding: 40px 24px;
text-align: center;
font-size: var(--text-base);
color: var(--text-muted);
}
.asset-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 24px;
text-align: center;
color: var(--text-muted);
}
.asset-empty-icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--text-secondary);
}
.asset-empty-icon svg { width: 28px; height: 28px; }
.asset-empty-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.asset-empty-sub {
font-size: var(--text-base);
color: var(--text-muted);
max-width: 360px;
}
/* Card — matches callout-card geometry for cross-module consistency.
Left 4px category-colour bar, rectangular ref chip, category +
warranty chips on the top row. */
.asset-card {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
padding: 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s, transform 0.05s, box-shadow 0.12s;
touch-action: manipulation;
}
.asset-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
[data-theme="dark"] .asset-card:hover { box-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.asset-card:active { transform: scale(0.997); }
.asset-card-bar {
width: 4px;
flex-shrink: 0;
align-self: stretch;
}
.asset-card-main {
flex: 1;
min-width: 0;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Head row — the asset NAME is the hero (front-left, fills the row) with the
category chip beside it. The chip never shrinks; it wraps below the title
only when the name needs the full width. Mirrors .kb-instr-card-head. */
.asset-card-head {
display: flex;
align-items: flex-start;
gap: 10px;
}
.asset-card-head .asset-card-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.asset-card-head .asset-card-cat { flex-shrink: 0; }
/* Two-tier TOP strip — location (left) + category (right), one matching chip
family (mirrors .tasks-card-top). The card's coloured left bar carries the scan. */
.asset-card-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.asset-card-top .card-loc-chip { flex: 0 1 auto; min-width: 0; }
.asset-card-top .asset-card-cat { margin-left: auto; flex-shrink: 0; }
.asset-card-ref {
display: inline-flex;
align-items: center;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-secondary);
background: var(--bg-elevated);
padding: 3px 7px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.asset-card-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.2; /* text-line = 13px → exactly matches the location chip's 13px pin height (both 23px) */
letter-spacing: 0.01em;
}
.asset-card-cat-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; }
.asset-card-warranty {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: var(--text-xs);
font-weight: 600;
}
.asset-card-warranty.is-expired { color: #dc2626; background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.45); }
.asset-card-warranty.is-expiring { color: #ea580c; background: rgba(234,88,12,0.12); border-color: rgba(234,88,12,0.45); }
.asset-card-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
word-wrap: break-word;
}
/* Bottom signal row — service/warranty/fvr chips (only when firing).
Tighter gap than the old meta row since it now holds chips. */
.asset-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: 2px;
}
.asset-card-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-muted);
}
.asset-card-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Location chip styling moved to .card-loc-chip in css/04-dashboard-shared.css
(shared by Tasks / Call-outs / Assets — one location chip everywhere). */
/* (.asset-card-photos rule retired — photo count is no longer shown
on list cards. Photos remain visible in the asset detail view.) */
/* ─── Detail view ───────────────────────────────────────────────── */
/* Header mirrors the Call Outs header (see modules/assets/detail.js): the ref
+ category chip sit on the calm top strip and the asset NAME is the hero on
its own line below, so it reads at a glance. Stacked at every width. */
.asset-detail-header { /* extends .callout-detail-header */ }
/* CALM (2026-06-29) — neutral chip + colour on the dot, matching the asset CARD
category chip + the chip family (was a loud tinted 700-weight pill). */
.asset-detail-cat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
}
.asset-detail-cat-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; }
.asset-detail-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.asset-detail-panel {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px;
}
.asset-detail-panel-title {
margin: 0 0 10px;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
/* Inside the collapsible Details toggle the title sits directly above the
summary line — drop its bottom margin so they read as one tight header. */
.asset-detail-panel.asset-svc-section .asset-svc-section-toggle .asset-detail-panel-title {
margin: 0;
}
.asset-detail-grid {
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 480px) {
.asset-detail-grid { grid-template-columns: 1fr 1fr; }
}
.asset-detail-grid-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.asset-detail-grid-row:nth-child(-n+2),
.asset-detail-grid-row:first-child { border-top: 0; }
@media (max-width: 479px) {
.asset-detail-grid-row { border-top: 1px solid var(--border); }
.asset-detail-grid-row:first-child { border-top: 0; }
}
.asset-detail-grid-label {
margin: 0;
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.asset-detail-grid-value {
margin: 0;
font-size: var(--text-sm);
color: var(--text-primary);
}
.asset-detail-grid-value.is-mono {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.asset-detail-notes {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.asset-detail-notes-title {
margin: 0 0 6px;
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.asset-detail-notes-text {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
white-space: pre-wrap;
}
/* ─── 2×2 info grid (contractor / instructions / add task / log service) ─ */
.asset-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* If exactly 3 tiles are shown, let the last one span the full row */
.asset-info-grid > :last-child:nth-child(3) { grid-column: span 2; }
/* Sub-line inside a tile (e.g. contractor phone number) */
.tasks-detail-info-tile-sub {
display: block;
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.tasks-detail-info-tile.is-active .tasks-detail-info-tile-sub {
color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}
/* Add task + Log service tiles — plain neutral tiles, identical to the
Contractor / Instructions cards (neutral surface, secondary-grey icon).
No accent fill: every tile in the grid looks the same at rest, and they all
lift to an accent border on hover. */
.asset-action-tile--task .tasks-detail-info-tile-icon,
.asset-action-tile--service .tasks-detail-info-tile-icon { color: var(--text-secondary); }
/* ─── Category manager ──────────────────────────────────────────── */
.asset-cat-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.asset-cat-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.asset-cat-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.02em;
}
.asset-cat-builtin {
font-size: var(--text-xs);
color: var(--text-muted);
padding: 2px 6px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.asset-cat-visual-badge {
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent);
padding: 2px 7px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: var(--radius-sm);
}
/* "Photo-first (Visual)" toggle row in the category editor */
.asset-cat-visual-row { display: flex; align-items: center; gap: 14px; }
.asset-cat-visual-text { flex: 1; min-width: 0; }
.asset-cat-visual-name { font: 600 13px / 1.3 var(--body); color: var(--text-primary); }
.asset-cat-visual-sub { font: 500 11.5px / 1.4 var(--body); color: var(--text-muted); margin-top: 3px; }
.asset-cat-row-actions {
margin-left: auto;
display: flex;
gap: 2px;
flex-shrink: 0;
}
.asset-cat-row-actions .callout-costs-row-btn {
width: 40px;
height: 40px;
}
.asset-cat-row-actions .callout-costs-row-btn svg { width: 16px; height: 16px; }
/* ─── Areas & Locations — foldered, searchable manager ───────────────
Settings → Areas & Locations (+ the assets ⋯ shortcut). REUSES the
app-wide collapsible group (.cl-cat-group*) for areas and .asset-cat-row
for leaf locations; only the search bar, the nesting indent and the
search-result path are new here. */
.ah-loc-search {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; margin-bottom: 12px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.ah-loc-search svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.ah-loc-search-input {
flex: 1; min-width: 0; border: none; background: transparent;
color: var(--text-primary); font: 500 var(--text-base)/1.3 var(--body);
outline: none; padding: 0;
}
.ah-loc-search-input::placeholder { color: var(--text-muted); }
.ah-loc-level { display: flex; flex-direction: column; gap: 6px; }
.ah-loc-row-primary,
.ah-loc-area-primary {
flex: 1; min-width: 0; min-height: 44px;
display: flex; align-items: center; gap: 10px;
padding: 0; border: 0; border-radius: var(--radius-sm);
background: transparent; color: inherit; font: inherit; text-align: left;
cursor: pointer;
}
.ah-loc-row-primary:focus-visible,
.ah-loc-area-primary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Persistent selection is separate from folder expansion. Match the shared
tree picker's calm current-row treatment so reorder actions have context. */
.asset-cat-row.ah-loc-row.is-selected,
.cl-cat-group-header.ah-loc-area-head.is-selected,
.cl-cat-group-header.ah-loc-area-head.is-selected:hover {
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
background: var(--accent-soft);
}
.ah-loc-area-body {
margin-top: 8px; padding-left: 10px;
border-left: 2px solid var(--border);
display: flex; flex-direction: column; gap: 8px;
}
/* Keep the glyphs compact, but the interactive boxes meet the app-wide 44px
touch-target floor in every foldered taxonomy at every viewport width. */
.ah-loc-area-head .asset-cat-row-actions { margin-left: 0; }
.ah-loc-area-head .callout-costs-row-btn,
.ah-loc-row .callout-costs-row-btn { width: 44px; height: 44px; }
.ah-loc-area-actions { display: inline-flex; }
.ah-loc-row .asset-cat-row-actions { margin-left: auto; }
/* ── Drag-and-drop reorganise (desktop) — the shared foldered manager ──
Native HTML5 DnD is pointer-only, so this no-ops on touch (rows stay tappable);
the ⋯ "Move to…" covers mobile. Mirrors the KB-tree drag visuals (css/04):
accent-soft fill + outline = "drop INSIDE this folder"; a top/bottom accent
line = "drop before/after to reorder". */
.ah-loc-row[draggable="true"], .ah-loc-area-head[draggable="true"] { cursor: grab; }
.ah-loc-row.is-dragging, .ah-loc-area-head.is-dragging { opacity: 0.4; }
.ah-loc-row.is-drop-inside, .ah-loc-area-head.is-drop-inside {
background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px;
}
.ah-loc-row.is-drop-before, .ah-loc-area-head.is-drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.ah-loc-row.is-drop-after, .ah-loc-area-head.is-drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
/* search result: where the location lives (its area path) */
.ah-loc-path {
font: 500 var(--text-xs)/1.3 var(--body); color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-loc-path-top { font-style: italic; opacity: .8; }
.ah-loc-empty { margin: 2px 0; font: 500 var(--text-sm)/1.4 var(--body); color: var(--text-muted); }
/* "Add inside " — the picker's accent pill (.psheet-act-pill), sitting at
the TOP of an open area's body, content-width + left-aligned so it reads as a
nested create (vs the full-width root pill). */
.ah-loc-add-inside {
align-self: flex-start;
margin-bottom: 4px;
}
.ah-loc-add-inside svg { width: 15px; height: 15px; }
/* root "New area or location" — the picker's accent pill (.psheet-act-pill),
full width, sitting directly below the search (above the list). */
.ah-loc-add-root {
width: 100%;
margin: 0 0 12px;
}
.ah-loc-add-root svg { width: 16px; height: 16px; }
/* Location FIELD — the form control (a button showing the selection that opens
the full-screen location picker). Looks like a form input/select trigger. */
.ah-locfield {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 10px 12px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary); font: 500 var(--text-base)/1.2 var(--body);
cursor: pointer; text-align: left;
transition: border-color .12s, background .12s; touch-action: manipulation;
}
.ah-locfield:hover { border-color: var(--accent); }
.ah-locfield-ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.ah-locfield-text {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-locfield-text.is-empty { color: var(--text-muted); }
.ah-locfield-chev { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
/* optional per-task "exact spot" detail input, shown under the button once a
location is picked (withDetail) */
.ah-locfield-wrap { display: flex; flex-direction: column; gap: 8px; }
.ah-locfield-detail {
width: 100%; padding: 9px 12px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary); font: 500 var(--text-base)/1.2 var(--body);
outline: none; box-sizing: border-box;
}
.ah-locfield-detail::placeholder { color: var(--text-muted); }
.ah-locfield-detail:focus { border-color: var(--accent); }
.asset-cat-swatch-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.asset-cat-swatch {
width: 32px; height: 32px;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
padding: 0;
transition: transform 0.08s, border-color 0.12s;
}
.asset-cat-swatch:hover { transform: scale(1.06); }
.asset-cat-swatch.is-selected {
border-color: var(--text-primary);
box-shadow: 0 0 0 2px var(--bg-base);
}
/* ─── Phase 2: asset card fix-vs-replace badge ──────────────────── */
.asset-card-fvr {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.asset-card-fvr.is-watch { color: #ca8a04; background: rgba(202,138,4,0.10); }
.asset-card-fvr.is-review { color: #ea580c; background: rgba(234,88,12,0.12); }
.asset-card-fvr.is-replace { color: #dc2626; background: rgba(220,38,38,0.12); }
/* ─── Phase 2: running cost panel + callout history ─────────────── */
.asset-history-cost-panel {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.asset-history-cost-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.asset-history-cost-title {
margin: 0;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
.asset-history-cost-callouts {
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-history-cost-figures {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: var(--bg-elevated);
border-radius: var(--radius-md);
overflow: hidden;
}
@media (max-width: 520px) {
.asset-history-cost-figures { grid-template-columns: 1fr; gap: 1px; background: var(--border); }
.asset-history-cost-figures > * { background: var(--bg-elevated); }
}
.asset-history-cost-figure {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
border-right: 1px solid var(--border);
}
.asset-history-cost-figure:last-child { border-right: 0; }
.asset-history-cost-label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.asset-history-cost-value {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
.asset-history-cost-trend {
font-family: inherit;
font-size: var(--text-sm);
}
.asset-history-cost-trend.is-rising_fast,
.asset-history-cost-trend.is-rising { color: #dc2626; }
.asset-history-cost-trend.is-falling_fast,
.asset-history-cost-trend.is-falling { color: #16a34a; }
.asset-history-cost-trend.is-flat { color: var(--text-secondary); }
.asset-history-cost-trend.is-new { color: var(--accent); }
/* Fix-vs-replace progress bar */
.asset-history-fvr {
display: flex;
flex-direction: column;
gap: 4px;
}
.asset-history-fvr-bar {
width: 100%;
height: 8px;
background: var(--bg-elevated);
border-radius: var(--radius-pill);
overflow: hidden;
}
.asset-history-fvr-fill {
height: 100%;
background: #16a34a;
border-radius: var(--radius-pill);
transition: width 0.4s ease;
}
.asset-history-fvr.is-watch .asset-history-fvr-fill { background: #ca8a04; }
.asset-history-fvr.is-review .asset-history-fvr-fill { background: #ea580c; }
.asset-history-fvr.is-replace .asset-history-fvr-fill { background: #dc2626; }
.asset-history-fvr-bar { position: relative; }
/* Repair-vs-replace reference ticks — the industry 50% (review) and 75%
(replace) thresholds, so the fill % reads against a decision, not a void. */
.asset-history-fvr-tick {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-1px);
background: var(--text-muted);
opacity: 0.45;
}
.asset-history-fvr-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-size: var(--text-xs);
color: var(--text-muted);
font-weight: 600;
}
.asset-history-fvr-pct { color: var(--text-secondary); }
.asset-history-fvr-thresh { color: var(--text-muted); }
/* Collapsible cost sub-sections (spend-by-category + spend-by-year) — divider
above each, accordion mechanics inherited from .asset-svc-section. */
.asset-history-cost-panel .asset-cost-section {
border-top: 1px solid var(--border);
padding-top: 12px;
}
.asset-history-cost-subhead {
margin: 0;
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
}
/* Spend-by-category breakdown — one slim stacked bar + a row per category in
the shared cost-entry colours (passed inline). */
.asset-cost-cat-bar {
display: flex;
height: 16px;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 12px;
background: var(--bg-elevated);
}
.asset-cost-cat-seg { display: block; height: 100%; }
.asset-cost-cat-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.asset-cost-cat-row {
display: grid;
grid-template-columns: 12px 1fr auto auto;
gap: 10px;
align-items: center;
}
.asset-cost-cat-dot { width: 10px; height: 10px; border-radius: 3px; }
.asset-cost-cat-label { font-size: var(--text-sm); color: var(--text-primary); }
.asset-cost-cat-pct { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.asset-cost-cat-amt {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
text-align: right;
min-width: 56px;
}
/* Recommendation copy */
.asset-history-rec {
padding: 10px 12px;
background: var(--bg-elevated);
border-radius: var(--radius-md);
border-left: 3px solid var(--text-muted);
}
.asset-history-rec.is-fresh { border-left-color: #16a34a; }
.asset-history-rec.is-watch { border-left-color: #ca8a04; }
.asset-history-rec.is-review { border-left-color: #ea580c; }
.asset-history-rec.is-replace { border-left-color: #dc2626; }
/* Year-by-year spend breakdown — sits inside the running cost panel.
Compact bar + amount per calendar year so managers can answer the
"what did this asset cost us in 2024 vs 2025" question at a glance. */
.asset-history-yearly {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 6px;
}
.asset-history-yearly-head {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.asset-history-year-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.asset-history-year-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: 10px;
align-items: center;
padding: 4px 0;
}
.asset-history-year-label {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
}
.asset-history-year-bar {
display: block;
height: 10px;
background: var(--bg-elevated);
border-radius: var(--radius-pill);
overflow: hidden;
}
.asset-history-year-fill {
display: block;
height: 100%;
background: var(--accent);
border-radius: var(--radius-pill);
transition: width 0.4s ease;
}
/* Current year uses the SAME solid accent fill as every other bar — the
"year so far" tag already flags that it's a partial year, so no stripes. */
.asset-history-year-amount {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
text-align: right;
min-width: 60px;
}
.asset-history-year-tag {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
padding: 2px 6px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
letter-spacing: 0.02em;
}
.asset-history-rec-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
}
.asset-history-rec-sub {
font-size: var(--text-xs);
color: var(--text-muted);
line-height: 1.45;
margin-top: 2px;
}
/* Quick action chips above the tab bar */
.asset-history-quick-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin: 12px 0 8px;
}
/* Tab bar — Activity / Running cost */
.asset-history-tabs {
display: flex;
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0 -20px 0;
background: var(--bg-base);
}
.asset-history-tab {
flex: 1;
padding: 12px 0;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-right: 1px solid var(--border);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
text-align: center;
transition: color 0.12s, border-color 0.12s;
}
.asset-history-tab:last-child { border-right: none; }
.asset-history-tab:hover { color: var(--text-primary); }
.asset-history-tab.is-active {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Callout list section */
.asset-history-list-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
}
.asset-history-list-title {
margin: 0;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
.asset-history-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.asset-history-callout {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.asset-history-callout:hover { border-color: var(--accent); }
.asset-history-callout-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-history-callout-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-history-callout-ref {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
background: var(--bg-elevated);
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.asset-history-callout-date { margin-left: auto; color: var(--text-muted); }
.asset-history-callout-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
word-wrap: break-word;
}
.asset-history-callout-cost {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
/* Activity kind chip — tells callouts apart from tasks in the unified feed.
Same rectangular shape as the rest of the chip family. */
.asset-history-activity-kind {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.asset-history-activity-kind-callout { color: var(--accent); background: rgba(0,216,230,0.10); }
.asset-history-activity-kind-task { color: #7c3aed; background: rgba(124,58,237,0.10); }
/* ─── Service status banner — sticky below asset top bar ────────── */
/* flex-shrink:0 keeps it pinned; engineers see service dates + the bar
without scrolling. Fill travels left→right (elapsed time). Colour
switches from green to amber at ≤30 days and red when overdue. */
.asset-svc-banner {
flex-shrink: 0;
padding: 10px 18px 12px;
background: var(--bg-base);
border-bottom: 1px solid var(--border);
}
.asset-svc-banner[data-svc-state=""] { display: none; }
.asset-svc-banner-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
gap: 6px;
}
.asset-svc-banner-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asset-svc-banner-col--right { text-align: right; }
.asset-svc-banner-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.asset-svc-banner-val { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.asset-svc-banner-delta {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-muted);
text-align: center;
flex-shrink: 0;
}
.asset-svc-banner[data-svc-state="warning"] .asset-svc-banner-delta { color: #f59e0b; }
.asset-svc-banner[data-svc-state="breach"] .asset-svc-banner-delta { color: #ef4444; }
/* Track: a quiet 3 px line — no border, no pill shape */
.asset-svc-banner-track {
height: 3px;
border-radius: 2px;
background: var(--border);
overflow: hidden;
}
.asset-svc-banner-fill {
height: 100%;
border-radius: 2px;
background: #22c55e;
transition: width 0.5s ease;
}
.asset-svc-banner[data-svc-state="warning"] .asset-svc-banner-fill { background: #f59e0b; }
.asset-svc-banner[data-svc-state="breach"] .asset-svc-banner-fill { background: #ef4444; }
/* ─── Per-type service schedule — one bar per configured service ── */
/* When an asset carries several service types (asset.service_configs), the
single aggregate banner above is replaced by this stack: one labelled bar
per type, each on its own frequency with its own last/next/countdown. The
zone is a transparent flex-shrink passthrough so the legacy banner keeps its
own styling; the schedule provides its own padding + border. */
.asset-svc-zone { flex-shrink: 0; }
/* The service zone now lives at the TOP of the scroll body (not pinned below the
header), so it scrolls away with the asset — only the top bar stays fixed,
giving more visibility. Break it out of the body's padding so it stays
full-bleed (flush to the top, full-width bottom border) exactly as it looked
when it sat directly under the header. Margins mirror .callout-detail-body's
padding: 16/18 by default, 12/14 at ≤600px (the mobile override in css/12). */
.asset-detail-body > .asset-svc-zone {
margin: -16px -18px 0;
}
@media (max-width: 600px) {
.asset-detail-body > .asset-svc-zone {
margin: -12px -14px 0;
}
}
.asset-svc-sched {
flex-shrink: 0;
padding: 10px 18px 12px;
background: var(--bg-base);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 13px;
max-height: 38vh;
overflow-y: auto;
}
.asset-svc-sched-row { display: flex; flex-direction: column; gap: 5px; }
.asset-svc-sched-head {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.asset-svc-sched-name {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Frequency chip — calm neutral classifier ("Yearly", "3-monthly", …). */
.asset-svc-sched-freq {
flex-shrink: 0;
padding: 4px 9px;
border-radius: var(--radius-pill);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
}
/* Compliance chip — same purple as the form/wizard, at the standard chip size. */
.asset-svc-sched-chip {
flex-shrink: 0;
padding: 4px 9px;
border-radius: var(--radius-pill);
background: rgba(124,58,237,0.12);
color: #7c3aed;
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
}
.asset-svc-sched-delta {
margin-left: auto;
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-muted);
}
.asset-svc-sched-row[data-svc-state="warning"] .asset-svc-sched-delta { color: #f59e0b; }
.asset-svc-sched-row[data-svc-state="breach"] .asset-svc-sched-delta { color: #ef4444; }
.asset-svc-sched-row[data-svc-state="warning"] .asset-svc-banner-fill { background: #f59e0b; }
.asset-svc-sched-row[data-svc-state="breach"] .asset-svc-banner-fill { background: #ef4444; }
.asset-svc-sched-row[data-svc-state="idle"] .asset-svc-banner-fill,
.asset-svc-sched-row[data-svc-state="loading"] .asset-svc-banner-fill { background: var(--border); }
/* Next-due is disputed (see .asset-svc-sched-note): the fill is computed from
last -> next, so a date the row has just called into question makes the bar's
"this much time left" a claim it cannot back. Drop it to the same neutral as
idle/loading — honest uncertainty, not false confidence.
NOT in breach: the stored date already says "act now", and while a disputed
date can turn "you are fine" into a lie, greying a live overdue signal never
makes anyone safer. Never downgrade an act-now signal (§4).
The :not() carries the specificity of its argument, so this lands at (0,4,0)
and beats the (0,3,0) state rules above on specificity, not merely on source
order — it cannot be silently disarmed by a later reorder. */
.asset-svc-sched-row[data-svc-mismatch="1"]:not([data-svc-state="breach"]) .asset-svc-banner-fill {
background: var(--border);
}
.asset-svc-sched-dates {
font-size: var(--text-xs);
color: var(--text-muted);
}
/* Schedule disagreement — the stored next-due no longer matches "last done +
this row's interval". The app never rewrites the date (it cannot tell a
deliberate certificate date from one left behind by an interval edit), so
this note is the whole signal: it must read as an act-now amber, not as
another muted caption. Wraps deliberately — unlike the one-line .toast, the
expected date at the end must never be ellipsed away. */
.asset-svc-sched-note {
padding: 5px 8px;
border-radius: var(--radius-sm);
background: var(--warning-soft);
color: var(--warning);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
}
/* ─── Asset activity — unified timeline event types ─────────────── */
/* Reuses .callout-event + .callout-event-icon from the shared feed CSS.
Only the icon colour/background differs per event type. */
.callout-event[data-event-type="service_logged"] .callout-event-icon {
color: #6366f1;
border-color: rgba(99,102,241,0.35);
background: rgba(99,102,241,0.07);
}
.callout-event[data-event-type="callout_linked"] .callout-event-icon {
color: var(--accent);
border-color: rgba(0,216,230,0.4);
background: rgba(0,216,230,0.08);
}
.callout-event[data-event-type="task_linked"] .callout-event-icon {
color: #7c3aed;
border-color: rgba(124,58,237,0.35);
background: rgba(124,58,237,0.07);
}
/* Clickable event rows (callout / task) */
.asset-event-clickable { cursor: pointer; }
.asset-event-clickable:hover { opacity: 0.82; }
/* ─── Service status card (top of Activity tab) ──────────────────── */
/* Visible at all times so QR-scan users can confirm service history
without hunting through the feed. Colour-coded to match SLA chips. */
.asset-svc-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 14px;
}
.asset-svc-card.is-breach { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.06); }
.asset-svc-card.is-warning { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.05); }
.asset-svc-icon { flex-shrink: 0; padding-top: 1px; }
.asset-svc-icon svg { width: 15px; height: 15px; color: var(--text-muted); }
.asset-svc-card.is-breach .asset-svc-icon svg { color: #ef4444; }
.asset-svc-card.is-warning .asset-svc-icon svg { color: #f59e0b; }
.asset-svc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.asset-svc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.asset-svc-label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
min-width: 68px;
}
.asset-svc-value { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.asset-svc-delta { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.asset-svc-delta.is-breach { color: #ef4444; font-weight: 700; }
.asset-svc-delta.is-warning { color: #f59e0b; font-weight: 700; }
/* ─── Phase 3: Instructions row on asset detail ─────────────────── */
.asset-detail-instructions {
display: grid;
grid-template-columns: 36px 1fr 16px;
gap: 12px;
align-items: center;
width: 100%;
margin-top: 14px;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.asset-detail-instructions:hover { border-color: var(--accent); }
.asset-detail-instructions.is-empty { border-style: dashed; }
.asset-detail-instructions-icon {
width: 36px; height: 36px;
display: grid; place-items: center;
background: rgba(124,58,237,0.10);
color: #7c3aed;
border-radius: var(--radius-md);
}
.asset-detail-instructions-icon svg { width: 18px; height: 18px; }
.asset-detail-instructions-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asset-detail-instructions-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.asset-detail-instructions-sub { font-size: var(--text-xs); color: var(--text-muted); }
.asset-detail-instructions-arrow {
width: 16px; height: 16px;
color: var(--text-muted);
}
/* ─── Asset detail: 2-col action cards (contractor + instructions) ── */
.asset-action-card {
width: 100%;
min-height: 64px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
font-family: inherit;
font-size: var(--text-sm);
text-align: left;
border-radius: var(--radius-md);
background: var(--bg-elevated);
border: 1.5px solid var(--border-strong);
color: var(--text-primary);
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
}
.asset-action-card.is-empty {
border-style: dashed;
background: transparent;
color: var(--text-secondary);
}
.asset-action-card.is-empty:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.asset-action-card.is-filled:hover { border-color: var(--accent); }
.asset-action-card.is-readonly { cursor: default; }
.asset-action-card-icon { display: flex; align-items: center; flex-shrink: 0; }
.asset-action-card-icon svg { width: 18px; height: 18px; }
.asset-action-card.is-filled .asset-action-card-icon svg { color: var(--accent); }
.asset-action-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asset-action-card-title { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-action-card-sub { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── Phase 3: QR modal ─────────────────────────────────────────── */
.asset-qr-modal { max-width: 380px; }
.asset-qr-body {
align-items: center;
text-align: center;
gap: 14px;
}
.asset-qr-info { display: flex; flex-direction: column; gap: 2px; }
.asset-qr-info-name {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.asset-qr-info-ref {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.asset-qr-info-location {
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-qr-canvas {
display: grid;
place-items: center;
padding: 10px;
background: #ffffff;
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.asset-qr-hint {
font-size: var(--text-xs);
color: var(--text-muted);
line-height: 1.45;
max-width: 280px;
}
/* ─── Phase 3: KB folder picker rows ────────────────────────────── */
.asset-kb-folder-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-sm);
color: var(--text-primary);
text-align: left;
cursor: pointer;
transition: border-color 0.12s;
}
.asset-kb-folder-row:hover { border-color: var(--accent); }
.asset-kb-folder-row.is-selected { border-color: var(--accent); background: var(--bg-surface); }
.asset-kb-folder-row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.asset-kb-folder-name { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-kb-folder-current {
font-size: var(--text-xs);
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ─── Phase 3: Scan action chooser ──────────────────────────────── */
.asset-scan-overlay {
position: fixed;
inset: 0;
z-index: 8800;
background: var(--bg-base);
opacity: 0;
transition: opacity 0.2s ease;
overflow-y: auto;
}
.asset-scan-overlay.is-open { opacity: 1; }
/* The QR entry form is its own fixed scroller. Give iOS enough scroll runway
to lift the final textarea above the on-screen keyboard. */
body.kb-open .asset-scan-overlay {
padding-bottom: var(--keyboard-height, 0px);
}
.asset-scan-shell {
/* The ✕ is PARKED in this shell's own top-right padding gutter (see
.asset-scan-close). Both the padding and the button read these two vars, so
the single ≤599px override at the end of this file moves them together —
the button can never drift out of the corner it is parked in. */
--scan-pad-x: 20px;
--scan-pad-top: max(20px, calc(env(safe-area-inset-top) + 12px));
/* Clearance kept on whatever sits under the parked ✕ (44px button + 8px). */
--scan-close-clear: 52px;
position: relative;
width: 100%;
min-height: 100%;
max-width: 520px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: var(--scan-pad-top) var(--scan-pad-x) max(20px, calc(env(safe-area-inset-bottom) + 12px));
gap: 20px;
}
/* PARKED, not a flex item (Radek 2026-07-26: on the engineer entry form the ✕
owned a whole 40px row PLUS the 20px gap above "Engineer access" — ~60px of a
phone's first screen spent on a close button, pushing the asset name and the
sign-in card down).
Absolute rather than moved into each header's markup ON PURPOSE: FIVE shells
render this button (engineer entry / asset view / loading / not-found, and the
staff scan chooser), so parking it reclaims the row on all five with ZERO
markup change — the [data-act="close"] / .asset-scan-close wiring in
engineer.js and scan-action.js is untouched, and a sixth shell inherits it
free. It scrolls away with the content exactly as it did in flow.
Level with the badge/eyebrow, i.e. the corner every modal in the app uses —
NOT level with the asset name. A 40px button beside an --text-2xl title makes
a long name wrap early and leaves the button floating against a 3-line block;
the corner reclaims the identical row without that cost. */
.asset-scan-close {
position: absolute;
top: var(--scan-pad-top);
right: var(--scan-pad-x);
z-index: 2;
width: 40px; height: 40px;
display: grid; place-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.asset-scan-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.asset-scan-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asset-scan-close svg { width: 18px; height: 18px; }
/* …and every block that sits UNDER the parked ✕ *with text anchored top-left*
keeps its right edge clear, so a long asset name can never run beneath it.
THAT is the invariant — a new first-child block up here needs a line adding.
CENTRED blocks are deliberately excluded, and it is not an oversight: the
engineer view body can also open with .callout-loading (centred, 40px top
padding) or the shared .asset-empty load-error card (centred, 60px), and
.asset-scan-not-found is the same shape. None can collide — they start well
below the button — and one-sided padding would visibly knock all three off
centre. So this cannot be written as `.engineer-view-body > *:first-child`.
Inside .engineer-view-body the clearance is pinned to :first-child because
the OWNER PREVIEW puts the banner above the head: whichever is first is the
one under the button, and the other has the button well clear of it.
…and inside those two it goes on the CHILD LINES, never the container. The
view head is a flex column whose last row carries `End visit`
(margin-left:auto): padding on the head pushed that button 52px in from
every other block on the page AND lowered its wrap threshold, so a name like
the form's own "John Smith · ABC Catering Engineers" placeholder wrapped to a
second row and gave back 22.5px of the 56px this change reclaims. Same story
for the preview banner, a bordered card that read as mis-padded (15px left,
52px right). Only the lines that actually sit under the button take it.
Kept UNCONDITIONAL rather than scoped to a shell that actually has the ✕
(`:has(> .asset-scan-close)`): the only shell without one is the owner
PREVIEW of the staff chooser, where the cost is 52px of unused right gutter
nobody will notice — not worth making "a long asset name must never run
under the close button" depend on :has() support. */
.engineer-entry-header,
.asset-scan-asset,
.engineer-view-body > .engineer-preview-banner:first-child > .engineer-preview-banner-text,
.engineer-view-body > .engineer-view-head:first-child > .engineer-view-asset-name,
.engineer-view-body > .engineer-view-head:first-child > .engineer-view-asset-meta { padding-right: var(--scan-close-clear); }
/* The head's session row is left full-width by the rule above, which is right
only while the name+meta lines above it are tall enough to push it clear of
the button. An asset with NEITHER a ref_id NOR a location collapses the meta
line to zero height (the CF projects `ref_id: d.ref_id || ''`, so it is
representable even though assets_create always mints one) and `End visit`
would rise ~5px into the button's band — two live controls overlapping.
Reserving one line keeps that impossible. Inert otherwise: a populated meta
line already measures taller than this. */
.engineer-view-body > .engineer-view-head:first-child > .engineer-view-asset-meta { min-height: 1.4em; }
.asset-scan-asset {
display: grid;
grid-template-columns: 52px 1fr;
gap: 12px;
align-items: center;
}
.asset-scan-asset-icon {
width: 52px; height: 52px;
display: grid; place-items: center;
border-radius: var(--radius-md);
}
.asset-scan-asset-icon svg { width: 24px; height: 24px; }
.asset-scan-asset-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asset-scan-asset-ref {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.asset-scan-asset-name {
margin: 0;
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.asset-scan-asset-loc {
font-size: var(--text-sm);
color: var(--text-muted);
}
.asset-scan-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.asset-scan-action {
display: grid;
grid-template-columns: 48px 1fr 16px;
gap: 14px;
align-items: center;
width: 100%;
padding: 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s, transform 0.06s, background 0.12s;
touch-action: manipulation;
}
.asset-scan-action:hover:not(.is-disabled) {
border-color: var(--scan-accent, var(--accent));
background: color-mix(in srgb, var(--scan-accent, var(--accent)) 4%, var(--bg-surface));
}
.asset-scan-action:active:not(.is-disabled) { transform: scale(0.99); }
.asset-scan-action.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.asset-scan-action-icon {
width: 48px; height: 48px;
display: grid; place-items: center;
background: color-mix(in srgb, var(--scan-accent, var(--accent)) 14%, transparent);
color: var(--scan-accent, var(--accent));
border-radius: var(--radius-md);
}
.asset-scan-action-icon svg { width: 22px; height: 22px; }
.asset-scan-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asset-scan-action-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
.asset-scan-action-sub {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.4;
}
.asset-scan-action-arrow {
width: 16px; height: 16px;
color: var(--text-muted);
}
/* Service-due status chip (conditional — only when due-soon / overdue) */
.asset-scan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.asset-scan-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: var(--radius-md);
font: 600 var(--text-sm) / 1 var(--body); white-space: nowrap;
}
.asset-scan-chip.is-overdue { color: #dc2626; background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.4); }
.asset-scan-chip.is-due { color: #d97706; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); }
/* "Preview this role's scan menu" bar (Settings → Roles). Amber so it reads as
a non-live preview, distinct from the orange-red impersonation banner. */
.asset-scan-preview-bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 0 0 16px; padding: 9px 12px;
background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.4);
border-radius: var(--radius-md);
}
.asset-scan-preview-label {
display: inline-flex; align-items: center; gap: 8px; min-width: 0;
font: 600 var(--text-sm) / 1.3 var(--body); color: #d97706;
}
.asset-scan-preview-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.asset-scan-preview-label strong { font-weight: 700; }
.asset-scan-preview-exit {
flex-shrink: 0; padding: 5px 12px; border-radius: var(--radius-sm);
background: rgba(217,119,6,0.16); border: 1px solid rgba(217,119,6,0.5);
font: 600 var(--text-sm) / 1 var(--body); color: #d97706; cursor: pointer;
font-family: inherit;
}
.asset-scan-preview-exit:hover { background: rgba(217,119,6,0.26); }
/* Do / View section labels */
.asset-scan-group-label {
font: 700 var(--text-xs) / 1 var(--body); text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text-muted); margin: 14px 2px 8px;
}
/* "View" rows — lighter than the big "Do" buttons; shortcuts into the detail tabs */
.asset-scan-views { display: flex; flex-direction: column; gap: 8px; }
.asset-scan-view {
display: grid; grid-template-columns: 34px 1fr 16px; gap: 12px; align-items: center;
width: 100%; padding: 11px 12px;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
text-align: left; font-family: inherit; cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.06s; touch-action: manipulation;
}
.asset-scan-view:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg-surface)); }
.asset-scan-view:active { transform: scale(0.99); }
.asset-scan-view-icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--bg-elevated); color: var(--text-secondary); border-radius: var(--radius-sm); }
.asset-scan-view-icon svg { width: 18px; height: 18px; }
.asset-scan-view-label { font: 600 var(--text-base) / 1.3 var(--body); color: var(--text-primary); min-width: 0; }
.asset-scan-view-arrow { width: 16px; height: 16px; color: var(--text-muted); }
.asset-scan-foot {
margin-top: auto;
text-align: center;
}
.asset-scan-link {
padding: 8px 14px;
background: transparent;
border: 0;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.asset-scan-link:hover { text-decoration: underline; }
.asset-scan-not-found {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 60px 24px;
text-align: center;
}
.asset-scan-foot-sep { color: var(--text-muted); margin: 0 6px; }
.asset-scan-engineer-link { color: var(--text-secondary); }
.asset-scan-engineer-link:hover { color: var(--accent); }
/* Visiting-engineer entry — a prominent, calm BUTTON (was an easily-missed grey
text link). Same card shape as the action rows but on the elevated surface
with a neutral tone, so it reads clearly as "the other door" for when a staff
phone is handed to a contractor, without competing with the staff actions
(Radek 2026-07-03). Sits at the bottom via .asset-scan-foot's margin-top:auto. */
.asset-scan-engineer {
display: grid; grid-template-columns: 44px 1fr 16px; gap: 14px; align-items: center;
width: 100%; padding: 14px 16px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-lg); text-align: left; font-family: inherit;
cursor: pointer; touch-action: manipulation;
transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.asset-scan-engineer:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated)); }
.asset-scan-engineer:active { transform: scale(0.99); }
.asset-scan-engineer-icon {
width: 44px; height: 44px; display: grid; place-items: center;
background: var(--bg-surface); color: var(--text-secondary); border-radius: var(--radius-md);
}
.asset-scan-engineer-icon svg { width: 22px; height: 22px; }
.asset-scan-engineer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asset-scan-engineer-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.asset-scan-engineer-sub { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }
/* ═══════════════════════════════════════════════════════════════════════
ENGINEER ACCESS — Field-service overlays
─────────────────────────────────────────────────────────────────────
Engineers use this on their own phone, often in challenging conditions
(basement, gloves, bright sunlight). Tap targets are oversized, text
is high-contrast, primary actions sit within thumb reach.
═══════════════════════════════════════════════════════════════════════ */
.engineer-shell { gap: 16px; }
.engineer-entry-header {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.engineer-entry-badge {
align-self: flex-start;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--purple);
background: var(--purple-soft);
padding: 4px 10px;
border-radius: var(--radius-sm);
}
.engineer-entry-title {
margin: 0;
font-size: var(--text-2xl);
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.engineer-entry-meta {
font-size: var(--text-sm);
color: var(--text-muted);
}
.engineer-entry-ref {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.engineer-entry-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.engineer-entry-card-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
.engineer-entry-card-sub {
margin: 0;
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.5;
}
.engineer-entry-go {
width: 100%;
padding: 14px 18px;
font-size: var(--text-base);
font-weight: 700;
margin-top: 6px;
}
.engineer-entry-footnote {
text-align: center;
font-size: var(--text-xs);
color: var(--text-muted);
padding: 0 20px;
line-height: 1.5;
}
/* "Staff member? Sign in instead" — escape hatch on the engineer entry form,
shown only when a signed-out engineer was routed here from the login wall. */
.engineer-entry-stafflink {
display: block;
margin: 16px auto 0;
padding: 8px 12px;
background: none;
border: none;
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.engineer-entry-stafflink:hover { color: var(--text-primary); }
/* ─── Engineer asset view ──────────────────────────────────────── */
.engineer-view-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.engineer-view-asset-name {
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-primary);
line-height: 1.25;
}
.engineer-view-asset-meta {
font-size: var(--text-sm);
color: var(--text-muted);
}
.engineer-view-asset-meta span {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 600;
letter-spacing: 0.04em;
}
.engineer-view-session {
margin-top: 6px;
font-size: var(--text-xs);
color: var(--text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.engineer-view-session strong { color: var(--text-secondary); font-weight: 600; }
.engineer-end-session {
margin-left: auto;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
}
.engineer-end-session:hover { color: var(--text-primary); border-color: var(--text-muted); }
/* The view body stacks its sections with one even rhythm — every block
(callouts, log-service, recent services, asset details) gets the same
breathing room, so the page reads cleanly top-to-bottom. */
.engineer-view-body {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Asset facts reuse the staff .asset-detail-panel; just round it a touch
more here to match the other rounded cards in the field view. */
.engineer-details-panel {
border-radius: var(--radius-lg);
padding: 16px;
}
.engineer-instructions-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 8px 10px;
background: var(--purple-soft);
border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--purple);
cursor: pointer;
}
.engineer-instructions-link svg { width: 14px; height: 14px; }
.engineer-view-section { display: flex; flex-direction: column; gap: 8px; }
.engineer-view-section-title {
margin: 0;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
}
.engineer-callout-card {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
padding: 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s;
}
.engineer-callout-card:hover { border-color: var(--accent); }
.engineer-callout-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--text-muted);
}
.engineer-callout-ref {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-secondary);
background: var(--bg-elevated);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.engineer-callout-status {
text-transform: capitalize;
padding: 2px 8px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-weight: 600;
}
.engineer-callout-date { margin-left: auto; }
.engineer-callout-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.engineer-callout-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.4;
}
.engineer-callout-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
font-size: var(--text-xs);
color: var(--text-muted);
}
.engineer-callout-arrow { width: 14px; height: 14px; }
.engineer-callout-card-past { background: var(--bg-elevated); }
.engineer-past {
margin-top: 8px;
background: var(--bg-elevated);
border-radius: var(--radius-md);
padding: 8px 12px;
}
.engineer-past-summary {
cursor: pointer;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
padding: 4px 0;
list-style: none;
}
.engineer-past-summary::-webkit-details-marker { display: none; }
.engineer-past-summary::before {
content: '▸';
margin-right: 6px;
color: var(--text-muted);
transition: transform 0.15s;
display: inline-block;
}
.engineer-past[open] > .engineer-past-summary::before { transform: rotate(90deg); }
.engineer-past-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
/* ─── Engineer bottom sheets ───────────────────────────────────── */
.engineer-sheet-overlay {
position: fixed;
inset: 0;
z-index: 8950;
background: rgba(0,0,0,0.5);
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity 0.18s ease;
padding: 0;
}
.engineer-sheet-overlay.is-open { opacity: 1; }
.engineer-sheet {
width: 100%;
max-width: 560px;
background: var(--bg-surface);
border-radius: 18px 18px 0 0;
transform: translateY(40px);
transition: transform 0.22s ease;
overflow: hidden;
max-height: calc(92vh - var(--keyboard-height, 0px));
display: flex;
flex-direction: column;
}
.engineer-sheet-overlay.is-open .engineer-sheet { transform: translateY(0); }
.engineer-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.engineer-sheet-title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.engineer-sheet-close {
width: 32px; height: 32px;
display: grid; place-items: center;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
}
.engineer-sheet-close svg { width: 16px; height: 16px; }
.engineer-sheet-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
/* Document type chips */
.engineer-doctype-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.engineer-doctype {
padding: 14px;
background: var(--bg-elevated);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.engineer-doctype:hover {
border-color: var(--doc-colour);
background: color-mix(in srgb, var(--doc-colour) 8%, transparent);
color: var(--doc-colour);
}
/* ═══════════════════════════════════════════════════════════════════════
SERVICES — staff list + engineer service entry
═══════════════════════════════════════════════════════════════════════ */
/* Staff-side services section on the asset detail */
.asset-services-section {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.asset-services-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.asset-services-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.asset-services-head-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-services-last { font-size: var(--text-xs); color: var(--text-muted); }
.asset-services-last-empty { font-style: italic; }
.asset-services-add {
padding: 7px 12px;
font-size: var(--text-sm);
gap: 4px;
}
.asset-services-add svg { width: 14px; height: 14px; }
/* Service due chip */
.asset-service-due {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.asset-service-due.is-overdue { background: rgba(220,38,38,0.12); color: #dc2626; }
.asset-service-due.is-soon { background: rgba(234,88,12,0.12); color: #ea580c; }
.asset-service-due.is-ok { background: rgba(22,163,74,0.10); color: #16a34a; }
/* Service rows in the list */
.asset-services-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.asset-service-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.asset-service-row-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.asset-service-type,
.asset-service-outcome {
display: inline-flex;
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.02em;
}
.asset-service-date {
margin-left: auto;
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-service-row-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.asset-service-performer {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
.asset-service-report {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
white-space: pre-wrap;
}
.asset-service-row-foot {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--text-muted);
}
.asset-service-cert {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
background: var(--bg-surface);
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.asset-service-cost {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-weight: 600;
color: var(--text-secondary);
}
.asset-service-next {
color: var(--text-secondary);
font-weight: 600;
}
.asset-svc-outcomes { grid-template-columns: repeat(2, 1fr) !important; }
/* ── "What you're here to fix" — the highlighted jobs section ──────────
When there are open callouts this is the LOUD element on the page: the
engineer should see the work the moment the view loads. Empty state is
calm (no tint). */
.engineer-jobs { display: flex; flex-direction: column; gap: 10px; }
.engineer-jobs.has-jobs {
padding: 14px;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
border: 1.5px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.engineer-jobs-head { display: flex; align-items: center; gap: 10px; }
.engineer-jobs-title {
margin: 0;
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
.engineer-jobs-count {
display: inline-grid; place-items: center;
min-width: 24px; height: 24px; padding: 0 7px;
border-radius: 999px;
font-size: var(--text-xs); font-weight: 700;
background: var(--bg-elevated);
color: var(--text-secondary);
}
.engineer-jobs.has-jobs .engineer-jobs-count {
background: var(--accent); color: #fff;
}
.engineer-jobs-list { display: flex; flex-direction: column; gap: 10px; }
/* ── Calm action tiles (Call Maintenance + Log a service) ─────────────
Shared neutral-card base so neither shouts; identity comes from a soft
coloured icon chip only (the two-tier card rule — colour on the icon,
calm context everywhere else). */
.engineer-actions-label {
margin: 4px 0 -2px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.engineer-action-tile {
display: grid;
grid-template-columns: 46px 1fr 18px;
gap: 12px;
align-items: center;
width: 100%;
padding: 15px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-align: left;
font-family: inherit;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.engineer-action-tile:hover { border-color: var(--text-muted); background: var(--bg-elevated); }
.engineer-action-tile:active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
transform: scale(0.99);
}
.engineer-action-tile-icon {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: var(--radius-md);
}
.engineer-action-tile-icon svg { width: 22px; height: 22px; }
.engineer-action-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.engineer-action-tile-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.engineer-action-tile-sub { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.35; }
.engineer-action-tile-arrow { width: 16px; height: 16px; color: var(--text-muted); }
/* Per-tile icon colour — soft chip, the only colour on the card */
.engineer-call-maint .engineer-action-tile-icon { background: var(--warning-soft); color: var(--warning); }
.engineer-log-service .engineer-action-tile-icon { background: var(--purple-soft); color: var(--purple); }
/* ── Call Maintenance inline panel ────────────────────────────────────
Taps expand a short "what's happening" box that visually attaches under
the card (no separate modal). The hint adapts to whether maintenance is
on duty so the engineer knows up-front what to expect. */
.engineer-call-wrap { display: flex; flex-direction: column; }
.engineer-call-chevron { transition: transform 0.18s ease; }
.engineer-call-wrap.is-open .engineer-call-chevron { transform: rotate(180deg); }
.engineer-call-wrap.is-open .engineer-call-maint {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent;
background: var(--bg-elevated);
}
.engineer-call-panel {
display: flex; flex-direction: column; gap: 10px;
padding: 14px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.engineer-call-panel[hidden] { display: none; }
.engineer-call-hint {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-md);
font-size: var(--text-sm); line-height: 1.4;
color: var(--text-secondary);
}
.engineer-call-hint svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.engineer-call-hint.is-onduty {
background: var(--success-soft);
border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.engineer-call-hint.is-onduty svg { color: var(--success); }
.engineer-call-hint.is-offduty {
background: var(--warning-soft);
border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
}
.engineer-call-hint.is-offduty svg { color: var(--warning); }
/* Match .callout-form-field textarea (this one isn't inside a form-field wrap) */
.engineer-call-input {
width: 100%;
font-family: inherit;
font-size: var(--text-base);
color: var(--text-primary);
padding: 10px 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
resize: vertical;
min-height: 70px;
transition: border-color 0.12s, background 0.12s;
}
.engineer-call-input:focus { outline: none; border-color: var(--accent); }
.engineer-call-input:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--accent-soft);
}
.engineer-call-input::placeholder { color: var(--text-muted); }
.engineer-call-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Recent-services strip in engineer view */
.engineer-recent-services {
display: flex;
flex-direction: column;
gap: 4px;
}
.engineer-recent-service {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
padding: 8px 10px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
color: var(--text-secondary);
}
.engineer-recent-service-type { font-weight: 600; color: var(--text-primary); }
.engineer-recent-service-date { color: var(--text-muted); }
.engineer-recent-service-by { grid-column: 1 / -1; color: var(--text-muted); }
/* The engineer's own log (within the 24h window) is tappable to edit */
button.engineer-recent-service {
width: 100%;
text-align: left;
font: inherit;
cursor: pointer;
}
.engineer-recent-service--editable {
border: 1px solid var(--border-color, var(--border));
transition: background .12s ease, border-color .12s ease;
}
.engineer-recent-service--editable:hover,
.engineer-recent-service--editable:active {
background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.engineer-recent-service-edit {
grid-column: 1 / -1;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-weight: 700;
color: var(--accent);
}
.engineer-recent-service-edit svg { width: 13px; height: 13px; }
/* ── Field-view polish ─────────────────────────────────────────────────
Scoped to .engineer-view-body so these only touch the engineer's asset
view (never the staff side that shares .asset-svc-banner). Goal: even
spacing, generous tap targets and consistently rounded cards — the view
is used one-handed in plant rooms, so everything reads big and clear. */
/* Service status as a self-contained rounded card (staff side keeps the
full-bleed sticky banner; here it's just one card among several). */
.engineer-view-body .asset-svc-banner {
padding: 13px 15px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.engineer-view-body .asset-svc-banner[data-svc-state="warning"] { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.engineer-view-body .asset-svc-banner[data-svc-state="breach"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
/* Clearer section headings */
.engineer-view-body .engineer-view-section { gap: 10px; }
.engineer-view-body .engineer-view-section-title { font-size: var(--text-lg); }
/* Roomier, more rounded callout cards */
.engineer-view-body .engineer-callout-card {
padding: 16px;
border-radius: var(--radius-lg);
gap: 6px;
}
/* Recent-service rows: legible body text + comfortable padding instead of
the cramped xs strip — these are tap targets when editable. */
.engineer-view-body .engineer-recent-services { gap: 8px; }
.engineer-view-body .engineer-recent-service {
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
/* ── Owner preview of the engineer view ───────────────────────────── */
.engineer-preview-banner {
display: flex;
align-items: center;
gap: 10px;
margin: 0; /* even rhythm comes from .engineer-view-body gap */
padding: 13px 15px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--text-primary);
}
.engineer-preview-banner svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.engineer-preview-banner-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.engineer-preview-banner-text strong { font-size: var(--text-sm); }
.engineer-preview-banner-text span { font-size: var(--text-xs); color: var(--text-secondary); }
.engineer-preview-sessionnote { font-style: italic; color: var(--accent); }
/* ── Settings → Engineer access ───────────────────────────────────── */
.eng-access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.eng-access-list + .eng-access-list {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--border-color, var(--border));
}
.eng-access-list li {
position: relative;
padding-left: 26px;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.4;
}
.eng-access-list li::before {
position: absolute;
left: 0; top: 1px;
width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
}
.eng-access-list--yes li::before { content: '✓'; background: color-mix(in srgb, var(--rag-pass) 18%, transparent); color: var(--rag-pass); }
.eng-access-list--no li::before { content: '✕'; background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.eng-access-preview-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eng-access-select {
flex: 1 1 220px;
min-width: 0;
padding: 9px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color, var(--border));
background: var(--bg-elevated);
color: var(--text-primary);
font: inherit;
font-size: var(--text-sm);
}
/* ─── Asset folder browser — mobile folder-card nav ────────────── */
.asset-folder-nav {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 0;
}
.asset-folder-card {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
width: 100%;
padding: 14px 50px 14px 16px;
position: relative;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-align: left;
font-family: inherit;
font-size: var(--text-base);
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s;
touch-action: manipulation;
}
/* GHOST at rest (matches the KB folder kebab + the app-wide icon-button
standard); the accent container returns only in .is-editing below. */
.asset-folder-card-kebab {
position: absolute;
top: 10px; right: 10px;
width: 30px; height: 30px;
display: grid; place-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--text-muted);
cursor: pointer; flex-shrink: 0;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.asset-folder-card-kebab:hover {
background: var(--bg-elevated);
color: var(--text-primary);
}
.asset-folder-card-kebab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asset-folder-card-kebab svg { width: 16px; height: 16px; pointer-events: none; }
.asset-folder-card.is-editing .asset-folder-card-kebab {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
.asset-folder-card-edit-chips {
display: none;
flex: 0 0 100%;
gap: 6px;
padding-left: 48px;
padding-bottom: 4px;
}
.asset-folder-card.is-editing .asset-folder-card-edit-chips {
display: flex;
}
.asset-folder-card.is-editing .asset-folder-card-chevron {
display: none;
}
.asset-folder-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
/* Bare icon, matching the location picker's .psheet-row-icon — no square
background tile. Per-location colour comes from the inline style; areas/rooms
without a colour fall back to accent; "All assets" stays neutral. */
.asset-folder-card-icon {
width: 24px; height: 24px;
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--accent);
}
.asset-folder-card-icon svg { width: 18px; height: 18px; }
.asset-folder-card-all .asset-folder-card-icon {
color: var(--text-secondary);
}
.asset-folder-card-name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-folder-card-chevron {
position: absolute;
top: 50%; right: 14px;
transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--text-muted);
pointer-events: none;
}
.asset-folder-card-edit-btns {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.asset-folder-empty {
padding: 20px 16px;
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
}
.asset-folder-inline-btn {
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-surface);
cursor: pointer;
color: var(--text-secondary);
transition: border-color 0.12s, color 0.12s;
touch-action: manipulation;
}
.asset-folder-inline-btn svg { width: 14px; height: 14px; }
.asset-folder-inline-btn:hover { border-color: var(--accent); color: var(--accent); }
.asset-folder-inline-btn.is-danger { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.asset-folder-inline-btn.is-danger:hover { border-color: #ef4444; }
.asset-folder-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 4px 8px 0;
border: none;
background: none;
font-family: inherit;
font-size: var(--text-base);
font-weight: 700;
color: var(--text-primary);
cursor: pointer;
letter-spacing: -0.01em;
touch-action: manipulation;
}
.asset-folder-back-btn svg { width: 18px; height: 18px; color: var(--accent); }
.asset-folder-back-btn:hover { color: var(--accent); }
/* Edit-mode action buttons inside the desktop sidebar tree rows */
.asset-folder-edit-actions {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}
/* Empty-state hint inside the sidebar tree */
.kb-tree-empty-hint {
padding: 16px 14px;
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.5;
}
/* ─── Phase 4c: Asset list KPI cards + filter strip ──────────────────── */
/* The KPI cards (Total / Due / Overdue) ARE the status filter — clickable. */
.asset-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 4px;
}
/* Filter strip: the Category dropdown chip (left) + the List/Gallery view
switcher (pushed right), wrapping on narrow screens. */
.asset-filter-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
/* Reminder CTA banner inside the services section */
.asset-services-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
border-left: 4px solid;
flex-wrap: wrap;
}
.asset-services-cta.is-due_soon { background: rgba(234,88,12,0.08); border-left-color: #ea580c; }
.asset-services-cta.is-overdue { background: rgba(220,38,38,0.08); border-left-color: #dc2626; }
.asset-services-cta-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.asset-services-cta-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
}
.asset-services-cta-sub {
font-size: var(--text-xs);
color: var(--text-muted);
line-height: 1.45;
}
.asset-services-cta-btn {
padding: 8px 12px;
font-size: var(--text-sm);
font-weight: 600;
flex-shrink: 0;
}
/* ─── Phase 4d: UK compliance preset chips on asset form ────────── */
.asset-svc-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.asset-svc-preset {
padding: 6px 12px;
background: var(--bg-elevated);
border: 1.5px solid var(--border);
border-radius: var(--radius-pill);
font-family: inherit;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
}
.asset-svc-preset:hover {
border-color: #7c3aed;
color: #7c3aed;
}
.asset-svc-preset.is-selected {
border-color: #7c3aed;
background: rgba(124, 58, 237, 0.10);
color: #7c3aed;
}
/* ═══════════════════════════════════════════════════════════════════════
SERVICE LOG WIZARD — 3-step modal (services.js)
─────────────────────────────────────────────────────────────────────
Extends .callout-modal with service-specific layout:
progress dots, before/after photo zones, collapsible sections,
outcome cards, follow-up callout panel, urgency buttons.
═══════════════════════════════════════════════════════════════════════ */
/* ── Modal width override ───────────────────────────────────────────── */
.svc-log-modal {
max-width: 640px;
}
/* ── Head: two-row layout (title+close / progress) ─────────────────── */
.svc-log-head {
display: block !important; /* override flex from .callout-modal-head */
padding: 16px 20px 12px !important;
gap: 0 !important;
}
.svc-log-head-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 2px;
}
.svc-log-head-top h2 {
margin: 0;
font-family: var(--display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.svc-log-asset {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
font-size: var(--text-xs);
color: var(--text-muted);
font-weight: 500;
}
.svc-log-asset svg { width: 12px; height: 12px; flex-shrink: 0; }
/* ── Progress indicator ─────────────────────────────────────────────── */
.svc-log-progress {
display: flex;
align-items: center;
gap: 0;
margin-top: 14px;
padding-bottom: 2px;
}
.svc-progress-dot {
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
border: 2px solid var(--border);
color: var(--text-muted);
background: var(--bg-surface);
transition: border-color 0.15s, background 0.15s, color 0.15s;
position: relative;
z-index: 1;
}
.svc-progress-dot svg { width: 13px; height: 13px; }
.svc-progress-dot.is-done {
border-color: var(--accent);
background: var(--accent);
color: #fff;
stroke: #fff;
}
.svc-progress-dot.is-done svg { stroke: #fff; }
.svc-progress-dot.is-active {
border-color: var(--accent);
color: var(--accent);
background: var(--bg-surface);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.svc-progress-labels {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-top: 12px;
font-size: var(--text-xs);
color: var(--text-muted);
}
.svc-progress-label {
font-weight: 600;
white-space: nowrap;
}
.svc-progress-label.is-active {
color: var(--text-primary);
font-weight: 800;
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.svc-progress-sep { color: var(--border-strong); }
.svc-progress-line {
flex: 1;
height: 2px;
background: var(--border);
transition: background 0.15s;
margin: 0 2px;
}
.svc-progress-line.is-done { background: var(--accent); }
/* ── Body ───────────────────────────────────────────────────────────── */
.svc-log-body {
gap: 16px !important;
}
/* ── Footer ─────────────────────────────────────────────────────────── */
.svc-log-foot {
justify-content: space-between !important;
}
/* ── Before / After photo zones ─────────────────────────────────────── */
.svc-photo-zone {
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-photo-zone-label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
}
.svc-photo-zone-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.svc-photo-slots {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}
.svc-photo-thumb {
position: relative;
width: 72px; height: 72px;
border-radius: var(--radius-md);
overflow: hidden;
flex-shrink: 0;
background: var(--bg-elevated);
}
.svc-photo-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.svc-photo-remove {
position: absolute;
top: 3px; right: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
border: 0;
color: #fff;
display: grid; place-items: center;
cursor: pointer;
padding: 0;
line-height: 1;
transition: background 0.12s;
-webkit-tap-highlight-color: transparent;
}
.svc-photo-remove:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
.svc-photo-remove svg { width: 10px; height: 10px; stroke-width: 3; }
/* Default: small square add tile shown alongside existing thumbnails */
.svc-photo-add {
width: 72px; height: 72px;
border-radius: var(--radius-md);
border: 2px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 4%, transparent);
display: grid; place-items: center;
color: var(--accent);
cursor: pointer;
transition: border-color 0.12s, background 0.14s, color 0.12s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.svc-photo-add:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.svc-photo-add:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.svc-photo-add svg { width: 22px; height: 22px; }
/* Full-width banner shown when no photos have been added yet */
.svc-photo-add-wide {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 14px;
border-radius: var(--radius-md);
border: 2px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 4%, transparent);
color: var(--accent);
font: 600 14px / 1 var(--body);
cursor: pointer;
transition: background 0.14s;
-webkit-tap-highlight-color: transparent;
}
.svc-photo-add-wide:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.svc-photo-add-wide:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.svc-photo-add-wide svg { width: 20px; height: 20px; flex-shrink: 0; }
/* ── Two-button photo row (Take photo / Choose from library) ────────── */
.svc-photo-btn-row {
display: flex;
gap: 8px;
}
.svc-photo-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 10px;
background: transparent;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
}
.svc-photo-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.svc-photo-btn:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.svc-photo-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Before/after photo buttons always start accented — obvious tap targets. */
.svc-photo-zone .svc-photo-btn {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.svc-photo-zone .svc-photo-btn:hover,
.svc-photo-zone .svc-photo-btn:active {
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
/* ── Collapsible sections (costs, files) ────────────────────────────── */
.svc-collapsible {
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.svc-collapsible-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 11px 14px;
background: var(--bg-elevated);
border: 0;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.12s;
}
.svc-collapsible-toggle:hover { background: var(--bg-elevated2, var(--bg-elevated)); }
.svc-collapsible-toggle:active { background: var(--accent-soft); }
.svc-collapsible-toggle svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.svc-collapsible-toggle span:not(.svc-badge-count):not(.svc-badge-opt):not(.svc-chevron) {
flex: 1;
}
.svc-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
}
.svc-badge-opt {
font-size: var(--text-xs);
font-weight: 400;
color: var(--text-muted);
}
.svc-chevron {
display: grid; place-items: center;
width: 18px; height: 18px;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.18s;
}
.svc-chevron svg { width: 14px; height: 14px; }
.svc-collapsible.is-open .svc-chevron { transform: rotate(180deg); }
.svc-collapsible-body {
display: none;
padding: 16px 14px;
border-top: 1px solid var(--border);
flex-direction: column;
gap: 12px;
}
.svc-collapsible.is-open .svc-collapsible-body { display: flex; }
/* ── Cost / file item rows ──────────────────────────────────────────── */
.svc-items-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 2px;
}
.svc-item-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
.svc-item-row svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-secondary); }
.svc-item-tag {
padding: 2px 7px;
background: var(--accent-soft);
color: var(--accent);
border-radius: var(--radius-pill);
font-size: 10px;
font-weight: 600;
flex-shrink: 0;
}
.svc-item-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
}
.svc-item-amount {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-primary);
flex-shrink: 0;
}
/* Action icons (edit + delete) on the right of each cost/file row */
.svc-item-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.svc-item-remove,
.svc-item-edit-btn {
width: 32px; height: 32px;
border: 0; background: transparent;
border-radius: var(--radius-sm);
display: grid; place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
padding: 0;
color: var(--text-muted);
}
.svc-item-remove svg, .svc-item-edit-btn svg { width: 15px; height: 15px; display: block; }
.svc-item-remove:hover { background: var(--danger-soft); color: var(--danger); }
.svc-item-edit-btn:hover { background: var(--bg-elevated2, var(--bg-elevated)); color: var(--text-primary); }
/* Attachment thumbnail in a file row — image preview, or a file-type icon
for non-images. Image rows are tappable to open the full-screen viewer. */
.svc-item-thumb {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
background: var(--bg-base);
display: grid; place-items: center;
}
.svc-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-item-thumb svg { width: 16px; height: 16px; color: var(--text-secondary); }
.svc-item-row--file[role="button"] { cursor: pointer; transition: background 0.12s; }
.svc-item-row--file[role="button"]:hover { background: var(--bg-surface); }
/* (The bespoke .svc-cost-edit mini sheet was removed — editing a cost line now
reuses the shared AngelHubCostEntry widget in edit mode, identical to "Add
costs". See modules/assets/services.js.) */
/* ── Cost entry form ────────────────────────────────────────────────── */
.svc-cost-entry {
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-cost-entry-row {
display: flex;
align-items: stretch;
gap: 6px;
}
.svc-gbp-prefix {
display: flex;
align-items: center;
padding: 0 10px;
background: var(--bg-elevated);
border: 1.5px solid var(--border);
border-right: 0;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
flex-shrink: 0;
}
.svc-cost-entry-row .callout-modal-input[type="number"] {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
border-left: 0 !important;
flex: 1;
min-width: 0;
}
.svc-add-btn {
flex-shrink: 0;
padding: 0 14px;
font-size: var(--text-sm);
font-weight: 600;
height: auto;
}
/* ── File add button — solid accent (matches primary CTA) ───────────── */
.svc-file-add-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: auto;
align-self: flex-start;
max-width: 100%;
padding: 11px 18px;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-base);
font-weight: 600;
color: #001317;
cursor: pointer;
touch-action: manipulation;
transition: filter 0.12s, transform 0.06s;
-webkit-tap-highlight-color: transparent;
}
.svc-file-add-btn:hover { filter: brightness(1.08); }
.svc-file-add-btn:active { transform: scale(0.98); }
.svc-file-add-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* ── Open cost-entry widget button — solid accent (matches primary CTA) */
.svc-open-cost-entry {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: auto;
align-self: flex-start;
max-width: 100%;
padding: 11px 18px;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-base);
font-weight: 600;
color: #001317;
cursor: pointer;
touch-action: manipulation;
transition: filter 0.12s, transform 0.06s;
-webkit-tap-highlight-color: transparent;
}
.svc-open-cost-entry:hover { filter: brightness(1.08); }
.svc-open-cost-entry:active { transform: scale(0.98); }
.svc-open-cost-entry svg { width: 18px; height: 18px; flex-shrink: 0; }
/* ── Outcome cards ──────────────────────────────────────────────────── */
.svc-outcome-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (max-width: 420px) {
.svc-outcome-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.svc-outcome-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 10px 12px;
background: var(--bg-elevated);
border: 2px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
cursor: pointer;
text-align: center;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
-webkit-tap-highlight-color: transparent;
}
.svc-outcome-btn:hover {
border-color: color-mix(in srgb, var(--oc) 60%, transparent);
background: color-mix(in srgb, var(--oc) 6%, var(--bg-elevated));
}
.svc-outcome-btn:active {
border-color: var(--oc);
background: color-mix(in srgb, var(--oc) 16%, var(--bg-elevated));
transform: scale(0.99);
}
.svc-outcome-btn.is-selected {
border-color: var(--oc);
background: color-mix(in srgb, var(--oc) 10%, var(--bg-surface));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc) 20%, transparent);
}
.svc-outcome-icon {
display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--oc) 12%, transparent);
color: var(--oc);
flex-shrink: 0;
}
.svc-outcome-icon svg { width: 18px; height: 18px; }
.svc-outcome-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.svc-outcome-sub {
font-size: 11px;
color: var(--text-muted);
line-height: 1.3;
}
/* ── Follow-up callout zone ─────────────────────────────────────────── */
.svc-followup-zone {
padding: 14px;
border: 1.5px solid color-mix(in srgb, var(--warning) 40%, transparent);
background: color-mix(in srgb, var(--warning) 5%, transparent);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 10px;
transition: opacity 0.15s, max-height 0.2s;
}
.svc-followup-zone.is-hidden { display: none; }
.svc-followup-zone-header {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
}
.svc-followup-zone-header > svg {
width: 15px; height: 15px;
flex-shrink: 0;
color: var(--warning);
}
.svc-followup-detail {
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-followup-detail.is-hidden { display: none; }
/* ── Follow-up inline callout form ──────────────────────────────────── */
.svc-followup-form {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.svc-followup-form.is-hidden { display: none; }
/* Engineer "book your return visit" — date + time side by side. Explicit field
styling so the native date/time controls match the app (the time input renders
native-white otherwise). */
.svc-return-when {
display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px;
}
.svc-return-when .callout-modal-input {
width: 100%; box-sizing: border-box;
padding: 11px 12px; font-family: inherit; font-size: var(--text-base);
color: var(--text-primary); background: var(--bg-surface);
border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.svc-followup-form-priority {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.svc-followup-form-priority > svg {
width: 14px; height: 14px;
flex-shrink: 0;
color: var(--text-muted);
}
.svc-followup-form-hint {
font-size: var(--text-xs);
color: var(--text-muted);
flex: 1;
}
.svc-followup-photos {
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-followup-photo-label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
}
.svc-followup-photo-label > svg {
width: 14px; height: 14px;
flex-shrink: 0;
}
.svc-followup-priority-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-sm);
border: 1px solid;
letter-spacing: 0.02em;
align-self: flex-start;
}
/* ── Issues-found form — enhanced legibility for field use ──────────── */
/* Labels are bigger and primary-coloured so engineers can scan quickly */
.svc-followup-form .callout-form-field label {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0;
text-transform: none;
}
/* Inputs and textarea get a bigger font + more padding than the default */
.svc-followup-form .callout-form-field input[type="text"],
.svc-followup-form .callout-form-field textarea {
font-size: 15px;
padding: 13px 14px;
border-color: var(--border-strong);
}
/* Photo label also bumped up */
.svc-followup-form .svc-followup-photo-label {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
}
/* Photo buttons start in the accented "active" state so they're */
/* immediately obvious as tappable actions — no hover required. */
.svc-followup-form .svc-photo-btn {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
padding: 16px 10px;
font-size: 14px;
font-weight: 700;
}
.svc-followup-form .svc-photo-btn:hover,
.svc-followup-form .svc-photo-btn:active {
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
/* ── Urgency buttons (P1 / P2 / P3) — kept for back-compat ─────────── */
.svc-urgency-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.svc-urgency-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.svc-urgency-btn {
padding: 5px 12px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border);
background: var(--bg-elevated);
font-family: inherit;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.svc-urgency-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.svc-urgency-btn.is-selected[data-urgency="p1"] {
border-color: var(--danger); background: var(--danger-soft); color: var(--danger);
}
.svc-urgency-btn.is-selected[data-urgency="p2"] {
border-color: var(--warning); background: var(--warning-soft); color: var(--warning);
}
.svc-urgency-btn.is-selected[data-urgency="p3"] {
border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
/* ── Optional label (small muted suffix in field labels) ────────────── */
.svc-opt-label {
font-size: var(--text-xs);
font-weight: 400;
color: var(--text-muted);
margin-left: 4px;
}
.svc-next-due {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
}
.svc-next-due-label {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-secondary);
}
.svc-next-due-value {
font-size: var(--text-sm);
line-height: 1.4;
color: var(--text-primary);
}
/* ── Service log → link a register contractor ───────────────────────── */
.svc-ctr-link-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 var(--text-sm) / 1 var(--body);
padding: 11px 14px;
border-radius: var(--radius-md);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.svc-ctr-link-btn.is-empty {
width: 100%;
justify-content: center;
border-style: dashed;
}
.svc-ctr-link-btn:hover { border-color: var(--accent); color: var(--accent); }
.svc-ctr-link-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.svc-ctr-freetext { margin-top: 8px; }
.svc-ctr-linked {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.svc-ctr-linked-chip {
display: inline-flex;
align-items: center;
gap: 7px;
font: 600 var(--text-sm) / 1 var(--body);
padding: 8px 12px;
border-radius: var(--radius-md);
color: var(--accent);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.svc-ctr-linked-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.svc-ctr-unlink-btn {
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.svc-ctr-unlink-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.svc-ctr-unlink-btn svg { width: 14px; height: 14px; }
.svc-ctr-help {
display: block;
margin-top: 6px;
font: 400 var(--text-xs) / 1.4 var(--body);
color: var(--text-muted);
}
/* ── Full-screen log overlay (replaces old modal) ───────────────────── */
.svc-log-overlay {
position: fixed;
inset: 0;
z-index: 8600;
background: var(--bg-base);
opacity: 0;
transition: opacity 0.2s ease;
display: flex;
align-items: stretch;
overflow: hidden;
}
.svc-log-overlay.is-open { opacity: 1; }
body.svc-log-open { overflow: hidden; }
.svc-log-shell {
width: 100%;
height: 100%;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
background: var(--bg-base);
overflow: hidden;
}
/* ── Header: title + close + progress strip ─────────────────────────── */
.svc-log-header {
flex-shrink: 0;
padding: max(14px, calc(env(safe-area-inset-top) + 10px)) 18px 12px;
background: var(--bg-base);
border-bottom: 1px solid var(--border);
}
.svc-log-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
/* Action buttons (trash + close) — grouped so they sit flush on the right */
.svc-log-header-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Reusable icon button — matches .svc-log-close size */
.svc-log-action-btn {
width: 36px; height: 36px;
border-radius: var(--radius-md);
border: 0;
background: var(--bg-elevated);
color: var(--text-muted);
display: grid; place-items: center;
cursor: pointer;
transition: background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
}
.svc-log-action-btn svg { width: 17px; height: 17px; }
.svc-log-action-btn:hover { background: var(--bg-elevated2, var(--bg-elevated)); color: var(--text-primary); }
.svc-log-action-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.svc-log-header-title {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
overflow: hidden;
}
.svc-log-header-title h2 {
margin: 0;
font-family: var(--display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.015em;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.svc-log-asset {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-muted);
min-width: 0;
}
.svc-log-asset svg { width: 12px; height: 12px; flex-shrink: 0; }
.svc-log-asset span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.svc-log-close {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: var(--radius-md);
border: 0;
background: var(--bg-elevated);
color: var(--text-muted);
display: grid; place-items: center;
cursor: pointer;
transition: background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
}
.svc-log-close:hover { background: var(--bg-elevated2, var(--bg-elevated)); color: var(--text-primary); }
.svc-log-close svg { width: 18px; height: 18px; }
/* ── Scrollable body ────────────────────────────────────────────────── */
.svc-log-scroll {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: calc(18px + var(--keyboard-height, 0px));
}
.svc-log-content {
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 640px;
margin: 0 auto;
}
/* ── Footer: back / cancel + next / submit ──────────────────────────── */
.svc-log-foot {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px max(14px, calc(env(safe-area-inset-bottom) + 8px));
border-top: 1px solid var(--border);
background: var(--bg-base);
gap: 10px;
}
/* iOS anchors fixed overlays to the layout viewport while the keyboard changes
the visual viewport. Re-anchor the service/callout wizard to the visible
viewport, then yield its action bar while the engineer is typing. The scroll
spacer above leaves room for the final field to rise into view. */
body.kb-open .svc-log-overlay {
top: var(--vvtop, 0px);
bottom: auto;
height: var(--vvh, 100%);
}
body.kb-open .svc-log-foot { display: none; }
/* ── Service type selection chips (step 1) ──────────────────────────── */
.svc-type-chips {
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-type-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
background: var(--bg-elevated);
border: 2px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
-webkit-tap-highlight-color: transparent;
width: 100%;
}
.svc-type-chip:hover {
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated));
}
.svc-type-chip:active {
border-color: var(--accent);
background: var(--accent-soft);
}
.svc-type-chip.is-selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.svc-type-chip-check {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--bg-surface);
display: grid; place-items: center;
color: var(--accent);
transition: border-color 0.15s, background 0.15s;
}
.svc-type-chip.is-selected .svc-type-chip-check {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.svc-type-chip-check svg { width: 12px; height: 12px; stroke-width: 3; }
.svc-type-chip-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.svc-type-chip-name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.svc-type-chip-meta {
font-size: var(--text-xs);
color: var(--text-muted);
}
.svc-type-chip-compliance {
flex-shrink: 0;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: var(--purple-soft);
color: var(--purple);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ── Empty state (no service_configs on asset) ──────────────────────── */
.svc-no-configs {
padding: 24px 18px;
background: var(--bg-elevated);
border: 1.5px dashed var(--border);
border-radius: var(--radius-md);
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-no-configs p {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
}
.svc-no-configs strong { color: var(--text-primary); }
.svc-no-configs-loading {
font-size: var(--text-sm);
color: var(--text-muted);
font-style: italic;
}
/* ── Service activity card ──────────────────────────────────────────── */
/* Replaces the plain callout-event row for service log entries. */
/* Rendered as so it sits in the same */
/* callout-event-list but has full card treatment. */
.svc-feed-item {
list-style: none;
/* Remove the left-icon + body layout inherited from callout-event-list */
padding: 6px 0; /* vertical breathing room matching timeline rhythm */
}
/* Flash highlight after a service is logged — catches the user's eye */
@keyframes svc-card-flash {
0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent), 0 2px 8px rgba(0,0,0,0.06); }
60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent), 0 2px 8px rgba(0,0,0,0.06); }
100% { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
}
.svc-activity-card.svc-card-flash {
animation: svc-card-flash 1.2s ease-out forwards;
}
.svc-activity-card {
display: flex;
align-items: stretch;
border-radius: var(--radius-md);
border: 1.5px solid var(--border);
background: var(--bg-elevated);
overflow: hidden;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.svc-activity-card:hover {
border-color: color-mix(in srgb, var(--svc-col, var(--accent)) 50%, transparent);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
background: color-mix(in srgb, var(--svc-col, var(--accent)) 3%, var(--bg-elevated));
}
/* 4 px coloured left bar — the visual "priority" indicator */
.svc-activity-card-bar {
flex-shrink: 0;
width: 4px;
background: var(--svc-col, var(--accent));
}
.svc-activity-card-inner {
flex: 1;
min-width: 0;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Top row: title + badge + relative time */
.svc-activity-card-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.svc-activity-card-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/* Service-activity status — CALM (neutral chip + colour on the dot); the card's
coloured left bar carries the accent. (Radek 2026-06-29) */
.svc-activity-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-primary);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
}
.svc-activity-cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Ref-id chip in the service-activity feed — CALM neutral (it's an identifier,
not a signal). */
.svc-activity-ref-chip {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
flex-shrink: 0;
font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
}
.svc-activity-card-time {
margin-left: auto;
font-family: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Footer: performer + photo thumbs + cost */
.svc-activity-card-foot {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 2px;
}
.svc-activity-card-performer {
font-size: var(--text-xs);
color: var(--text-muted);
font-weight: 500;
}
/* Asset name + ref chip in service card footer */
.svc-card-asset-name {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
}
.svc-card-asset-ref {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-elevated);
white-space: nowrap;
letter-spacing: 0.04em;
flex-shrink: 0; font-family: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));}
.svc-card-foot-dot {
color: var(--text-muted);
font-size: var(--text-xs);
opacity: 0.5;
flex-shrink: 0;
}
/* Inline thumbnail strip */
.svc-card-thumbs {
display: flex;
align-items: center;
gap: 4px;
}
.svc-card-thumb {
width: 32px; height: 32px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 1px solid var(--border);
flex-shrink: 0;
display: block;
}
.svc-card-more {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
padding: 0 4px;
}
.svc-card-date {
font-size: var(--text-xs);
color: var(--text-muted);
}
.svc-card-cost {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-secondary);
margin-left: auto;
}
/* Follow-up callout ref link */
.svc-card-followup {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: var(--accent-soft);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.12s;
white-space: nowrap;
}
.svc-card-followup svg { width: 11px; height: 11px; flex-shrink: 0; }
.svc-card-followup:hover { opacity: 0.75; }
/* Linked callout row inside the service detail overlay */
.svc-detail-linked-callout {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
cursor: pointer;
width: 100%;
text-align: left;
font-family: inherit;
transition: background 0.12s;
-webkit-tap-highlight-color: transparent;
}
.svc-detail-linked-callout:hover { background: var(--bg-elevated2, var(--bg-elevated)); }
.svc-detail-linked-callout-ref {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
flex-shrink: 0;
}
.svc-detail-linked-callout-title {
flex: 1;
min-width: 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svc-detail-linked-callout-status {
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.svc-detail-linked-callout-arrow {
color: var(--text-muted);
flex-shrink: 0;
}
.svc-detail-linked-callout-arrow svg { width: 14px; height: 14px; display: block; }
/* ── Activity feed service chips ────────────────────────────────────── */
.svc-feed-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}
.svc-feed-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: var(--radius-sm);
border: 1px solid;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
white-space: nowrap;
}
.svc-feed-cost {
margin-top: 4px;
font-size: var(--text-xs);
color: var(--text-muted);
}
/* Title/description line used by callout + task cards */
.svc-feed-card-desc {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
margin: 5px 0 4px;
line-height: 1.4;
}
/* Title + date on one tidy baseline row (date tucked right) — so the chip row
above stays clean and the date never wraps to its own line. (Radek 2026-06-29) */
.svc-feed-card-titlerow {
display: flex;
align-items: baseline;
gap: 10px;
}
.svc-feed-card-titlerow .svc-feed-card-desc { flex: 1; min-width: 0; margin: 0; }
.svc-feed-card-titlerow .svc-activity-card-time { margin-left: 0; }
/* ── Service detail overlay — read-only view from activity feed ─────── */
/* Meta row (date · performer) below the header title */
.svc-detail-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.svc-detail-meta svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
.svc-detail-meta-sep {
color: var(--text-muted);
font-size: var(--text-xs);
}
/* Generic label + content section inside the scroll area */
.svc-detail-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-detail-section-label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.svc-detail-section-label svg { width: 13px; height: 13px; flex-shrink: 0; }
/* ── Issues found section (inline fault data from service log) ───────── */
.svc-issues-section {
border-left: 3px solid rgba(234,88,12,0.50);
padding-left: 12px;
}
.svc-issues-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
margin-top: 8px;
}
/* Photo grid */
.svc-detail-photo-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.svc-detail-photo-thumb {
width: 100px; height: 100px;
border-radius: var(--radius-md);
overflow: hidden;
border: 0;
padding: 0;
cursor: pointer;
background: var(--bg-elevated);
transition: opacity 0.12s, transform 0.12s;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.svc-detail-photo-thumb:hover { opacity: 0.88; transform: scale(0.98); }
.svc-detail-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) {
.svc-detail-photo-thumb { width: 80px; height: 80px; }
}
/* Work-done report block */
.svc-detail-report {
font-size: var(--text-sm);
color: var(--text-primary);
line-height: 1.6;
white-space: pre-wrap;
padding: 12px 14px;
background: var(--bg-elevated);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
/* Outcome pill (inside svc-type-outcome-header in read-only mode) */
.svc-type-outcome-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.svc-detail-outcome-pill {
flex-shrink: 0;
padding: 3px 9px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
}
/* Field pair (label above, value below) */
.svc-detail-field-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.svc-detail-field {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 120px;
}
.svc-detail-field-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.svc-detail-field-value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
}
.svc-detail-field-empty {
font-size: var(--text-xs);
color: var(--text-muted);
font-style: italic;
}
/* Cost total */
.svc-detail-cost-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-elevated);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.svc-detail-cost-total {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
}
/* File attachment row */
.svc-detail-file-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.svc-detail-file-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
.svc-detail-file-name {
flex: 1;
min-width: 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--accent);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.svc-detail-file-name:hover { text-decoration: underline; }
/* ── Service detail edit mode ───────────────────────────────────────── */
/* Ghost "Edit" button in the footer */
.callout-btn-ghost {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text-secondary);
}
.callout-btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.callout-btn-ghost svg {
width: 14px; height: 14px;
margin-right: 5px;
vertical-align: middle;
margin-top: -2px;
}
/* Header tint when in edit mode */
.svc-log-header.is-edit {
background: color-mix(in srgb, var(--accent) 5%, var(--bg-base));
border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
/* "Add photo" button inside detail view (same shape as log-form add) */
.svc-detail-add-photo {
width: 100px; height: 100px;
border-radius: var(--radius-md);
border: 2px dashed var(--border);
display: grid; place-items: center;
color: var(--text-muted);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.svc-detail-add-photo:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 5%, transparent);
color: var(--accent);
}
.svc-detail-add-photo svg { width: 24px; height: 24px; }
@media (max-width: 480px) {
.svc-detail-add-photo { width: 80px; height: 80px; }
}
/* "new" badge on freshly-added photos */
.svc-detail-photo-thumb { position: relative; }
.svc-new-photo-badge {
position: absolute;
bottom: 4px; left: 4px;
padding: 1px 5px;
border-radius: var(--radius-pill);
background: var(--accent);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.03em;
pointer-events: none;
}
/* File remove button (edit mode) */
.svc-detail-file-remove {
flex-shrink: 0;
width: 20px; height: 20px;
border: 0; background: transparent;
color: var(--text-muted);
border-radius: 50%;
display: grid; place-items: center;
font-size: 16px; line-height: 1;
cursor: pointer;
transition: background 0.12s, color 0.12s;
-webkit-tap-highlight-color: transparent;
padding: 0;
margin-left: auto;
}
.svc-detail-file-remove:hover { background: rgba(220,38,38,0.12); color: #dc2626; }
/* "is-new" tint on file name for newly-added files */
.svc-detail-file-name.is-new { color: var(--accent); font-style: italic; }
/* ── Per-type outcome sections (step 3) ─────────────────────────────── */
.svc-type-outcome-section {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.svc-type-outcome-section + .svc-type-outcome-section {
margin-top: 2px;
}
.svc-type-outcome-header {
padding: 10px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.svc-type-outcome-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── Asset edit form — maintenance schedule checkboxes ──────────────── */
/* Maintenance schedule — collapsible card in the asset form. Collapsed by
default so a regular asset can be added without scrolling the service list. */
.asset-svc-section-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.asset-svc-section-titles { flex: 1; min-width: 0; }
.asset-svc-section-summary {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 2px;
}
.asset-svc-section-chevron {
width: 18px; height: 18px; flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.18s ease;
}
.asset-svc-section.is-collapsed .asset-svc-section-chevron { transform: rotate(-90deg); }
.asset-svc-section-body { margin-top: 10px; }
.asset-svc-section.is-collapsed .asset-svc-section-body { display: none; }
/* Add Asset linked records: keep the shared Tasks link cards and the existing
two-column meta-row, but restore the same container-aware polarity as form
controls. The section is --bg-elevated, so empty cards need --bg-surface and
--border-strong to remain visibly tappable in both themes. Active cards keep
the shared accent state from css/05. */
.asset-links-body { gap: 12px; }
.asset-links-group .asset-link-pair { margin: 0; }
.asset-link-pair .callout-detail-meta-cell > .tasks-detail-info-tile { min-height: 58px; }
.asset-link-pair .callout-detail-meta-cell > .tasks-detail-info-tile:not(.is-active) {
background: var(--bg-surface);
border-color: var(--border-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.asset-link-pair .tasks-detail-info-tile:not(.is-active) .tasks-detail-info-tile-icon {
background: var(--bg-elevated);
color: var(--text-secondary);
}
.asset-link-pair .tasks-detail-info-tile:not(.is-active) .tasks-detail-info-tile-value em {
color: var(--text-secondary);
}
.asset-link-pair .callout-detail-meta-cell > .tasks-detail-info-tile:not(.is-active):hover {
border-color: var(--accent);
}
.asset-link-pair .callout-detail-meta-cell > .tasks-detail-info-tile:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Site field — for users without assets.change-site (or a single-site org) the
shared taxonomy dropdown renders read-only: clicks disabled, chevron hidden,
so it reads as a fixed value rather than a control they can change. */
.asset-site-dd-wrap.is-readonly .tasks-priority-trigger { pointer-events: none; cursor: default; opacity: 0.9; }
.asset-site-dd-wrap.is-readonly .tasks-priority-trigger-chev { display: none; }
.asset-svc-configs-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.asset-svc-config-row {
display: flex;
flex-wrap: wrap; /* anchor-dates line wraps to its own full-width row */
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--bg-elevated);
transition: background 0.12s;
}
.asset-svc-config-row:last-child { border-bottom: 0; }
.asset-svc-config-row.is-checked {
background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
}
.asset-svc-config-check {
flex-shrink: 0;
width: 16px; height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.asset-svc-config-label {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.asset-svc-config-name {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-svc-config-badge {
flex-shrink: 0;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: rgba(124,58,237,0.12);
color: #7c3aed;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.asset-svc-config-interval {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 5px;
}
.asset-svc-config-interval-input {
width: 60px;
padding: 5px 8px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-surface);
font-family: inherit;
font-size: var(--text-sm);
color: var(--text-primary);
text-align: right;
transition: border-color 0.12s;
-moz-appearance: textfield;
}
.asset-svc-config-interval-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.asset-svc-config-interval-input::-webkit-outer-spin-button,
.asset-svc-config-interval-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Anchor dates — a second line inside a ticked row: "Last done · Next due".
Seeds the schedule (past service / booked first visit) until the first
in-app service log. Hidden while the type is unticked. */
.asset-svc-config-dates {
display: none;
width: 100%;
gap: 10px;
padding: 2px 0 2px 26px; /* aligns under the label, past the checkbox */
}
.asset-svc-config-row.is-checked .asset-svc-config-dates { display: flex; }
.asset-svc-config-date-field {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.asset-svc-config-date-field label {
font: 600 var(--text-xs) / 1 var(--body);
color: var(--text-muted);
}
.asset-svc-config-date-field input[type="date"] {
width: 100%;
min-width: 0;
padding: 6px 8px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-surface);
font-family: inherit;
font-size: var(--text-sm);
color: var(--text-primary);
}
.asset-svc-config-date-field input[type="date"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.asset-svc-config-interval-label {
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
}
.asset-svc-configs-empty {
padding: 16px;
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
}
/* ── Engineer callout "Log this visit" — problem context card (Step 1) ── */
.eng-visit-context {
background: var(--bg-elevated);
border: 1px solid var(--border-color, var(--border));
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 16px;
}
.eng-visit-context-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.eng-visit-context-ref { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--text-muted); }
.eng-visit-context-status { font-size: 11px; text-transform: capitalize; color: var(--accent); font-weight: 600; }
.eng-visit-context-title { font-weight: 700; font-size: var(--text-md, 16px); color: var(--text-primary); line-height: 1.3; }
.eng-visit-context-loc { display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-secondary); margin-top: 5px; }
.eng-visit-context-loc svg { width: 13px; height: 13px; flex: 0 0 auto; }
.eng-visit-context-desc { margin-top: 7px; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
/* Fault photos raised with the callout — read-only thumbnails the engineer
taps to see the problem full-screen (shared photo viewer). */
.eng-visit-fault-photos { margin-top: 11px; }
.eng-visit-fault-label {
display: flex; align-items: center; gap: 6px;
font-size: var(--text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text-muted); margin-bottom: 7px;
}
.eng-visit-fault-label svg { width: 13px; height: 13px; }
.eng-visit-fault-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 7px;
}
.eng-visit-fault-thumb {
position: relative;
aspect-ratio: 1 / 1;
padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md);
overflow: hidden; cursor: pointer; background: var(--bg-surface);
}
.eng-visit-fault-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* annotation-count badge → shared .ah-annot-badge.is-thumb.at-tr (Prompt 106) */
/* ── Dimensions W × D × H strip ──────────────────────────────────── */
/* Unit toggle sits on its OWN line under the Dimensions label (clearly grouped
with the W×D×H inputs, away from Serial number) with mobile-friendly tap
targets (≈42px tall) — not a tiny pill crammed beside the serial field. */
.asset-dims-unit-toggle {
display: inline-flex;
align-self: flex-start; /* shrink-wrap inside the flex-column field (don't stretch) */
margin: 2px 0 10px;
border: 1.5px solid var(--border);
border-radius: 999px;
overflow: hidden;
background: var(--bg-elevated);
}
.asset-dims-unit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
min-height: 42px;
padding: 0 18px;
font: 600 13px/1 var(--body);
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.12s, color 0.12s;
}
.asset-dims-unit-btn:hover { color: var(--text-primary); }
.asset-dims-unit-btn.is-on {
background: var(--accent);
color: var(--bg-base);
border-radius: 999px;
}
.asset-dims-row {
display: flex;
align-items: flex-end;
gap: 6px;
}
.asset-dims-cell {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.asset-dims-unit {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.06em;
text-align: center;
}
.asset-dims-cell input {
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 8px 6px;
border: 1.5px solid var(--border-subtle, var(--border));
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-primary);
font: 500 14px / 1 var(--body);
-moz-appearance: textfield;
}
.asset-dims-cell input::-webkit-outer-spin-button,
.asset-dims-cell input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.asset-dims-sep {
font-size: 15px;
color: var(--text-muted);
flex-shrink: 0;
padding-bottom: 9px;
}
/* ── Category dropdown + "New category" button (matches the asset picker's
.tasks-priority-* menu). The dropdown fills the row; the menu opens aligned
UNDER the trigger (left:0, full trigger width) and caps its height so a long
list scrolls inside it instead of being clipped by the scrolling modal body. */
.asset-tax-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.asset-form-cat-dd { flex: 1 1 200px; min-width: 0; }
.asset-form-cat-dd .tasks-priority-trigger { width: 100%; height: 44px; }
.asset-form-cat-dd .tasks-priority-trigger-label { overflow: hidden; text-overflow: ellipsis; }
.asset-form-cat-dd .tasks-priority-menu { left: 0; right: auto; width: 100%; max-height: 280px; overflow-y: auto; }
/* "New category" is a square + button matching the Location + button below
(a lone plus reads as "add"); look shared with .asset-location-add-btn. */
/* Inline create field (reuses the picker's .apick-newcat styling), full row width. */
#assetCatField .apick-newcat { margin-top: 8px; margin-bottom: 0; }
/* Slim search pinned at the top of the category menu — type to filter. Sticky so
it stays visible while the options scroll under it (app search style: elevated
bg, left icon, accent focus ring). The INPUT rules are scoped under #assetCatMenu
so they beat the generic `.callout-form-field input[type="text"]` rule — without
that, its 12px left padding pulls the placeholder under the icon. */
.acat-search { position: sticky; top: 0; z-index: 1; background: var(--bg-surface); padding-bottom: 6px; margin-bottom: 2px; }
.acat-search-ico { position: absolute; left: 11px; top: 10px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.asset-form-cat-dd .acat-search .acat-search-input {
width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px 0 32px;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text-primary);
font: 500 13px/1 var(--body); outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
}
.asset-form-cat-dd .acat-search .acat-search-input::placeholder { color: var(--text-muted); }
.asset-form-cat-dd .acat-search .acat-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* ── Location dropdown row (asset form) ──────────────────────────── */
.asset-location-select-row {
display: flex;
align-items: stretch;
gap: 6px;
}
.asset-location-select-row select {
flex: 1;
min-width: 0;
padding: 9px 12px;
border: 1.5px solid var(--border-subtle, var(--border));
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-primary);
font: 500 14px / 1.2 var(--body);
appearance: auto;
}
.asset-location-add-btn,
.asset-cat-add-btn {
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--border-subtle, var(--border));
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.asset-location-add-btn { width: 40px; height: 40px; } /* matches the location select */
.asset-cat-add-btn { width: 44px; height: 44px; } /* matches the 44px category trigger */
.asset-location-add-btn:hover,
.asset-cat-add-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.asset-location-add-btn svg,
.asset-cat-add-btn svg { width: 17px; height: 17px; }
/* ── Location name chip in the locations list ─────────────────────── */
.asset-loc-name {
flex: 1;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile width pass (2026-06-25): tighten horizontal padding on mobile so content
uses the screen width. Appended at end-of-file so it beats the base rules AND any
wider-breakpoint (600/640/767px) blocks at equal specificity (later source wins).
Desktop (>=600px) untouched. */
@media (max-width: 599px) {
.asset-svc-banner { padding: 10px 12px 12px; }
.asset-svc-sched { padding: 10px 12px 12px; }
.asset-history-tabs { margin: 0 -12px 0; }
.asset-scan-not-found { padding: 40px 16px; }
.engineer-details-panel { padding: 14px 10px; }
.engineer-callout-card { padding: 12px 10px; }
.engineer-jobs.has-jobs { padding: 12px 10px; }
.engineer-action-tile { padding: 13px 10px; }
.engineer-call-panel { padding: 12px 10px; }
.engineer-call-hint { padding: 10px 8px; }
.asset-folder-card { padding: 12px 42px 12px 12px; }
/* Set the two gutter vars, never the padding shorthand: the parked ✕ reads
them too, so the button follows the padding to the phone's 12px edge
instead of being left behind at 20px (see .asset-scan-close). */
.asset-scan-shell {
--scan-pad-x: 12px;
--scan-pad-top: max(16px, calc(env(safe-area-inset-top) + 8px));
padding: var(--scan-pad-top) var(--scan-pad-x) max(16px, calc(env(safe-area-inset-bottom) + 8px));
}
.asset-scan-action { padding: 14px 12px; gap: 10px; }
.asset-scan-view { padding: 10px 8px; gap: 8px; }
.engineer-entry-card { padding: 14px 12px; }
}
/* The filter sits against the left edge of the desktop asset panel. Anchor its
wider menu to the trigger's LEFT edge so it opens into the panel instead of
extending beneath (and being clipped by) the Locations sidebar. This must
stay TOP-LEVEL: desktop is the layout that has the Locations sidebar. */
.asset-cat-dropdown .tasks-priority-menu {
left: 0;
right: auto;
}
/* ── Asset list category-filter dropdown — readable menu width on mobile ──
The list's category filter lives in a NARROW chip, but the shared mobile rule
(.tasks-priority-menu { left:0; right:0; min-width:0 } in css/05, written for
the full-width form-field taxonomy dropdowns) collapses this menu to the chip
width → "All categories" / "Refrigeration" get clipped. Re-size to content,
anchored under the chip's left edge, capped to the viewport. Higher
specificity (.asset-cat-dropdown .tasks-priority-menu) so it wins regardless
of file order; lives in a 599px block appended at the end (source-order rule). */
@media (max-width: 599px) {
/* Menu opens DOWN-and-RIGHT from the left-positioned Category chip, so it never
clips off the left edge of the screen. Sized to its content, capped to the
viewport. */
.asset-cat-dropdown .tasks-priority-menu {
left: 0;
right: auto;
min-width: 180px;
width: max-content;
max-width: 78vw;
}
}
/* Engineer portal phone ergonomics (Prompt 137). Keep this at the absolute end:
the ≤599px full-width rules must win by source order. All shared photo/button
classes are scoped to the engineer wizard so staff forms stay unchanged. */
@media (max-width: 599px) {
.svc-log-header {
padding-left: 14px;
padding-right: 14px;
}
.svc-log-content {
padding: 16px 14px;
gap: 16px;
}
.svc-log-foot {
padding: 12px 14px max(12px, calc(env(safe-area-inset-bottom) + 8px));
}
.svc-log-foot .callout-btn,
.engineer-end-session,
.engineer-entry-stafflink,
.engineer-past-summary,
.svc-collapsible-toggle {
min-height: 44px;
}
.svc-log-action-btn,
.svc-log-close,
/* The scan/portal ✕ was left at 40px when P137 raised every other engineer
control — a §4 miss on the one button every scanned QR shows first. It also
serves the staff scan chooser, which wants the same floor. --scan-close-clear
(52px) already covers 44 + 8. */
.asset-scan-close,
.svc-item-remove,
.svc-item-edit-btn,
.svc-log-overlay .callout-form-photo-btn,
.svc-log-overlay .svc-photo-remove {
width: 44px;
height: 44px;
}
.engineer-entry-stafflink,
.engineer-past-summary {
display: flex;
align-items: center;
}
.engineer-entry-stafflink { justify-content: center; }
.svc-log-overlay .callout-form-photo-tile,
.svc-log-overlay .callout-form-photo-thumb-wrap {
width: 100px;
}
.svc-log-overlay .callout-form-photo-thumb-wrap { height: 100px; }
}