.auth-loading {
    padding: 24px;
    color: var(--text);
}

.page-shell {
    padding: 0 0 2rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}

.page-head-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-bright);
    text-transform: uppercase;
}

.page-head-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 3px;
}

/* ── Rapid Engine page chrome ───────────────────────────────────────────── */
.engine-page {
    /* width:100% + box-sizing keeps the centred column at its full capped width.
       .engine-page is a direct child of the shared <RrnAppShell> .app-content,
       which is a flex column — without an explicit width the page shrink-wraps to
       its content and floats narrow in the middle instead of filling --rrn-page-max. */
    width: 100%;
    max-width: var(--rrn-page-max);
    margin: 0 auto;
    padding: 34px 28px 90px;
    box-sizing: border-box;
}

/* Network map */
.engine-map-wrap { position: relative; display: flex; flex-direction: column; gap: 10px; }
.engine-map { width: 100%; height: 480px; border-radius: 8px; overflow: hidden; background: #0a0c10; }

/* The map page is a full-bleed workspace: it opts out of the centred column
   entirely and fills the viewport below the top bar. The flex chain
   (page → host → wrap → layout) is what makes the map take exactly the
   remaining height — no viewport maths, so nothing ever runs off the bottom. */
.network-page.is-full-bleed {
    max-width: none;
    padding: 14px 18px 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.network-map-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.network-map-host .engine-map-wrap { flex: 1; min-height: 0; }
.network-map-host .engine-map-layout { flex: 1; min-height: 0; }
.network-map-host .engine-map { height: 100%; min-height: 320px; }
.network-map-host .engine-map-results { height: 100%; flex-basis: 360px; width: 360px; }

/* Search-first toolbar: postcode + scale + Find on the left, view mode and the
   display filter pushed to the far right by the spacer. The controls are
   width-capped (overriding .f-input's width:100%) so the row never wraps. */
.engine-map-toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine-map-toolbar-spacer { flex: 1 1 auto; }
.engine-page .engine-map-filter-input { width: auto; flex: 0 1 320px; min-width: 200px; max-width: 360px; }
.engine-page .engine-map-filter-scale { width: auto; flex: 0 0 auto; min-width: 150px; max-width: 220px; }
.engine-map-filter-button {
    display: inline-flex; align-items: center; gap: 7px; min-height: 31px;
    padding: 5px 10px; border: 1px solid var(--border, #2a2e36); border-radius: 7px;
    background: transparent; color: var(--text-dim); font: 600 12px/1.2 inherit;
    cursor: pointer;
}
.engine-map-filter-button:hover,
.engine-map-filter-button.active {
    border-color: rgba(28,196,120,.55); color: var(--text-bright);
    background: rgba(28,196,120,.08);
}
.engine-map-filter-count {
    display: inline-grid; min-width: 19px; height: 19px; padding: 0 5px;
    place-items: center; border-radius: 999px; background: var(--accent, #1cc478);
    color: #07130d; font-size: 10px; font-weight: 800;
}
.engine-map-filter-panel {
    position: absolute; z-index: 1100; top: 42px; left: 0;
    width: min(620px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 150px));
    display: flex; flex-direction: column;
    border: 1px solid var(--border, #2a2e36); border-radius: 12px;
    background: var(--surface, #15181e); box-shadow: 0 18px 50px rgba(0,0,0,.5);
    overflow: hidden;
}
.engine-map-filter-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 14px 16px 10px;
}
.engine-map-filter-panel__head > div { display: grid; gap: 3px; }
.engine-map-filter-panel__head strong { color: var(--text-bright); font-size: 14px; }
.engine-map-filter-panel__head span { color: var(--text-dim); font-size: 11px; }
.engine-map-filter-close {
    border: 0; background: transparent; color: var(--text-dim);
    font: 400 22px/1 inherit; cursor: pointer; padding: 0 2px;
}
.engine-map-filter-close:hover { color: var(--text-bright); }
.engine-map-filter-bands {
    display: flex; gap: 5px; padding: 0 16px 11px; overflow-x: auto;
}
.engine-map-filter-bands button {
    flex: 0 0 auto; border: 1px solid var(--border, #2a2e36); border-radius: 999px;
    background: transparent; color: var(--text-dim); padding: 5px 10px;
    font: 600 11px/1.2 inherit; cursor: pointer;
}
.engine-map-filter-bands button:hover { color: var(--text-bright); }
.engine-map-filter-bands button.active {
    color: var(--accent, #1cc478); border-color: rgba(28,196,120,.55);
    background: rgba(28,196,120,.1);
}
.engine-map-filter-search {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    padding: 10px 16px; border-block: 1px solid var(--border, #2a2e36);
    background: rgba(255,255,255,.015);
}
.engine-map-filter-search span { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.engine-map-filter-list {
    min-height: 120px; max-height: 340px; overflow-y: auto; padding: 6px 10px;
}
.engine-map-filter-empty { padding: 22px 8px; text-align: center; color: var(--text-dim); font-size: 12px; }
.engine-map-filter-repairer { padding: 8px 6px; border-bottom: 1px solid rgba(148,163,184,.1); }
.engine-map-filter-repairer:last-child { border-bottom: 0; }
.engine-map-filter-repairer > label {
    display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
}
.engine-map-filter-repairer input { margin-top: 3px; accent-color: var(--accent, #1cc478); }
.engine-map-filter-repairer label > span { display: grid; gap: 1px; }
.engine-map-filter-repairer strong { color: var(--text-bright); font-size: 12px; }
.engine-map-filter-repairer small { color: var(--text-dim); font-size: 10px; }
.engine-map-filter-centres {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px;
    margin: 8px 0 0 26px; padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,.025);
}
.engine-map-filter-centres label {
    display: flex; align-items: flex-start; gap: 7px; min-width: 0;
    color: var(--text-dim); font-size: 11px; cursor: pointer;
}
.engine-map-filter-centres label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-map-filter-centres__all { grid-column: 1 / -1; color: var(--text-bright) !important; font-weight: 700; }
.engine-map-filter-actions {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-top: 1px solid var(--border, #2a2e36); background: rgba(0,0,0,.12);
}
.engine-map-filter-actions .btn-link {
    border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
    padding: 4px 0; font: 600 11px/1.2 inherit;
}
.engine-map-filter-actions .btn-link:hover { color: var(--text-bright); }
.engine-map-filter-summary { flex: 1; color: var(--text-dim); font-size: 11px; text-align: right; }

/* Coverage / Capacity view switch. */
.engine-map-mode {
    display: inline-flex; border: 1px solid var(--border, #2a2e36);
    border-radius: 8px; overflow: hidden; flex: 0 0 auto;
}
.engine-map-mode button {
    border: 0; background: transparent; color: var(--text-dim);
    font: 600 12px/1.2 inherit; padding: 6px 12px; cursor: pointer;
}
.engine-map-mode button + button { border-left: 1px solid var(--border, #2a2e36); }
.engine-map-mode button.on { background: rgba(28,196,120,0.16); color: var(--accent, #1cc478); }
.engine-map-mode button:not(.on):hover { color: var(--text); }

/* Capacity heatmap legend: a single continuous ramp, matching heatColour()
   in engineMap.js (hue 145 → 0 as utilisation climbs). */
.engine-map-heat-legend { display: inline-flex; align-items: center; gap: 6px; }
.engine-map-heatbar {
    display: inline-block; width: 120px; height: 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: linear-gradient(90deg,
        hsl(145,78%,46%), hsl(109,78%,46%), hsl(72,78%,46%),
        hsl(36,78%,46%), hsl(0,78%,46%));
}

/* Map + postcode-search results panel, side by side. The panel only renders
   after a resolvable search; the map's ResizeObserver re-fits when it appears. */
.engine-map-layout { display: flex; gap: 10px; align-items: stretch; }
.engine-map-layout .engine-map { flex: 1 1 auto; min-width: 0; }
.engine-map-results {
    flex: 0 0 330px; width: 330px; height: 480px;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border, #2a2e36); border-radius: 8px;
    background: var(--surface, #1a1d23);
}
.emr-head { padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2e36); }
.emr-back {
    display: inline-flex; margin: 0 0 6px; padding: 0; border: 0;
    background: transparent; color: #60a5fa; font: 600 11px/1.2 inherit;
    cursor: pointer;
}
.emr-back:hover { color: #93c5fd; text-decoration: underline; }
.emr-title { font-size: 13px; font-weight: 700; color: var(--text-bright, #e2e8f0); }
.emr-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.emr-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.emr-card {
    display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
    border: 1px solid var(--border, #2a2e36); background: rgba(255,255,255,0.02);
    transition: border-color .12s ease, transform .12s ease;
}
.emr-card:hover { border-color: var(--accent, #1cc478); transform: translateY(-1px); }
.emr-card-top { display: flex; align-items: center; gap: 7px; }
.emr-band-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.5); }
.emr-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--text-bright, #e2e8f0);
}
.emr-status { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.emr-status-on  { color: #1cc478; border: 1px solid rgba(28,196,120,0.45); background: rgba(28,196,120,0.10); }
.emr-status-off { color: #c4b5fd; border: 1px solid rgba(139,92,246,0.45); background: rgba(139,92,246,0.10); }
.emr-repairer { font-size: 11px; color: var(--text-dim); margin: 2px 0 0 16px; }
.emr-capacity { display: flex; align-items: center; gap: 7px; margin: 6px 0 0 16px; font-size: 11px; color: var(--text-dim); }
.emr-capacity-nums { white-space: nowrap; }
.emr-capacity-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(148,163,184,0.18); overflow: hidden; }
.emr-capacity-fill { display: block; height: 100%; border-radius: 999px; }
.emr-capacity-pct { white-space: nowrap; font-variant-numeric: tabular-nums; }
.emr-scales { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 16px; }
.emr-scale { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.35); color: var(--text-dim); }
.emr-scale-active { color: #1cc478; border-color: rgba(28,196,120,0.5); background: rgba(28,196,120,0.08); }
/* Covering-but-not-deployable targets sit under a divider, greyed: still
   discoverable (why isn't X getting work?) but visually out of the running. */
.emr-divider {
    margin-top: 4px; padding: 6px 2px 2px; font-size: 11px; font-weight: 600;
    color: var(--text-dim); border-top: 1px dashed var(--border, #2a2e36);
    cursor: help;
}
.emr-card--off { opacity: 0.55; }
.emr-card--off:hover { opacity: 0.85; }

/* Empty-state panel: teaches the click interaction instead of sitting blank. */
.engine-map-results--empty { justify-content: center; }
.emr-placeholder { padding: 18px 20px; text-align: center; }
.emr-placeholder-title { font-size: 14px; font-weight: 700; color: var(--text-bright, #e2e8f0); margin-bottom: 8px; }
.emr-placeholder-text { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.emr-placeholder-hint { margin-top: 12px; font-style: italic; opacity: 0.8; }
@media (max-width: 900px) {
    /* Stacked layout can't fit in one screen — let the page scroll normally
       and give the map a sane fixed share of the viewport. */
    .network-page.is-full-bleed { overflow-y: auto; }
    .engine-map-layout { flex-direction: column; }
    .engine-map-results { width: auto; flex: 0 0 auto; height: auto; max-height: 320px; }
    .network-map-host .engine-map { height: 55vh; min-height: 300px; }
    .network-map-host .engine-map-results { width: auto; height: auto; }
    .engine-map-filter-panel { position: fixed; top: 72px; left: 12px; width: calc(100vw - 24px); }
    .engine-map-filter-centres { grid-template-columns: 1fr; }
}
.engine-map .leaflet-container { background: #0a0c10; font-family: inherit; }
.engine-map-empty,
.engine-map-note { color: var(--text-dim); font-size: 12px; }
.engine-map-note-muted { opacity: 0.7; font-style: italic; }
.engine-map-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; }
.engine-map-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine-map-toggle {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--text-dim); cursor: pointer; user-select: none; white-space: nowrap;
}
.engine-map-toggle input { accent-color: var(--accent, #1cc478); cursor: pointer; }
.skill-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.skill-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; padding: 2px 0; }
.skill-check input { accent-color: var(--accent, #1cc478); cursor: pointer; }

/* Skill tags: one look everywhere a skill appears (lines, repairers, centres,
   jobs). The per-skill accent colour comes from EngineSkillTag.Style inline. */
.skill-tag {
    display: inline-flex; align-items: center; padding: 2px 9px; margin: 1px 4px 1px 0;
    border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6;
    white-space: nowrap; border: 1px solid; letter-spacing: 0.01em;
}
.skill-tag-picker { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.skill-tag-toggle {
    cursor: pointer; background: transparent; color: var(--text-dim);
    border: 1px dashed rgba(148,163,184,0.45); transition: all .12s ease;
}
.skill-tag-toggle:hover { border-color: rgba(148,163,184,0.9); color: var(--text); }
.skill-tag-toggle.on { border-style: solid; }
.line-unassigned { color: var(--text-dim); font-style: italic; }

/* Deployable-capacity breakdown expander under the utilisation KPI. */
.util-breakdown { margin: -16px 0 28px; border: 1px solid var(--border, #2a2e36); background: var(--surface, #1a1d23); border-radius: 10px; padding: 12px 14px; }
.util-breakdown-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.util-breakdown-title { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.util-breakdown-sub { font-size: 12px; color: var(--text-dim); }
.util-breakdown-total td { border-top: 1px solid var(--border, #2a2e36); font-weight: 700; color: var(--text-bright); }
.util-breakdown .util-neg { color: #ef5350; }

/* No-result allocation alerts banner on the network dashboard. */
.alloc-alerts { margin: 0 0 16px; border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.06); border-radius: 10px; padding: 12px 14px; }
.alloc-alerts-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.alloc-alerts-title { font-size: 13px; font-weight: 700; color: #fbbf24; }
.alloc-alerts-sub { font-size: 12px; color: var(--text-dim); }
.alloc-alerts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alloc-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(245,158,11,0.15); }
.alloc-alert:first-child { border-top: none; }
.alloc-alert-body { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.alloc-alert-ref { font-weight: 600; color: var(--accent, #6ea8fe); text-decoration: none; white-space: nowrap; }
.alloc-alert-ref:hover { text-decoration: underline; }
.alloc-alert-reason { font-size: 12px; color: var(--text); }
.alloc-alert-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.engine-map-filter-input { min-width: 260px; max-width: 360px; }
.engine-map-lookup-result {
    font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border, #2a2e36); background: var(--surface, #1a1d23);
}
.engine-map-lookup-result--covered { border-color: rgba(28,196,120,0.45); color: var(--text); }
.engine-map-lookup-result--uncovered { border-color: rgba(245,165,36,0.45); color: var(--text); }
.engine-map-lookup-result--error { border-color: rgba(248,81,73,0.45); color: #f85149; }
.engine-map-lookup-centres { display: block; margin-top: 4px; color: var(--text-dim); font-size: 11px; }
.engine-map-crumb { font-size: 12px; color: var(--text-dim); }
.engine-map-crumb strong { color: var(--text); }
.engine-map-back {
    background: rgba(28,196,120,0.12); color: #1cc478;
    border: 1px solid rgba(28,196,120,0.45); border-radius: 6px;
    padding: 4px 10px; font: 600 12px/1.2 inherit; cursor: pointer;
}
.engine-map-back:hover { background: rgba(28,196,120,0.22); }
.engine-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.engine-map-footnotes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.engine-map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); align-items: center; }
.engine-map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 4px; vertical-align: middle; border: 1px solid #fff; }
.engine-map-legend .dot-explicit { width: 18px; height: 10px; border-radius: 3px; background: rgba(28,196,120,0.22); border: 2px solid #1cc478; }
.engine-map-legend .dot-fallback { width: 18px; height: 10px; border-radius: 3px; background: rgba(28,196,120,0.10); border: 1.5px dashed #1cc478; }
.engine-map-legend-sep { opacity: 0.4; }
.engine-map .leaflet-popup-content-wrapper { background: #14181f; color: #e2e8f0; border-radius: 8px; }
.engine-map .leaflet-popup-tip { background: #14181f; }
/* Coverage popups carry their own class so the dark theme never depends on the
   map wrapper's class surviving markup changes — white-on-white text is how the
   district popup became an unreadable white box. */
.leaflet-popup.engine-coverage-popup .leaflet-popup-content-wrapper {
    background: #14181f;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.leaflet-popup.engine-coverage-popup .leaflet-popup-tip { background: #14181f; }
.leaflet-popup.engine-coverage-popup .leaflet-popup-close-button { color: #94a3b8; }
.leaflet-tooltip.engine-coverage-tip {
    background: #14181f;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    pointer-events: none;
}
.leaflet-tooltip.engine-coverage-tip::before { display: none; }
.engine-coverage-label { background: transparent !important; border: none !important; }

/* List filtering + inline admin quick edits */
.list-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 12px;
}
.list-filters .f-input {
    min-width: 180px;
    max-width: 320px;
}
.quick-select {
    min-width: 110px;
}
.quick-toggle {
    min-height: 30px;
    padding: 4px 8px;
}
.quick-toggle .rule-toggle-name {
    font-size: 11px;
}
.quick-toggle .rule-toggle-desc,
.quick-toggle .app-toggle-meta {
    display: none;
}

/* Page header — matches the compact bordered "page-head" bar used across
   Dispatch / Capture so every app reads the same. Title is mono-uppercase,
   subtitle is a dim caption, actions sit just beneath. */
.engine-page-head {
    margin-bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: none;
}
.engine-page-head .page-head-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Page heading shares the canonical rrn-page-head look (green accent underline),
   so every Engine page matches Assess instead of the old mono/uppercase label. */
.page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    position: relative;
    padding-bottom: 10px;
}
.page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    background: var(--rrn-green);
    border-radius: 3px;
}
.page-subtitle { margin: 0; color: var(--text); font-size: 14px; }

/* Small inline uses of .page-subtitle (status hints, marker meta) stay compact. */
.marker-list .page-subtitle,
.detail-grid .page-subtitle { font-size: 12px; color: var(--text-dim); }

/* AdminSection body padding — the shared sheet pads .admin-section-body
   horizontally (22px) and full-bleed children (.data-table, .admin-pager…)
   cancel it with matching -22px margins to span edge-to-edge. Engine must NOT
   zero that padding: doing so leaves the negative margins in place and every
   table hangs 22px off both card edges. We only add the vertical inset the
   shared component doesn't provide. */
.engine-page .admin-section-body {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* The pager is full-bleed (shared -22px margins) but has no horizontal padding
   of its own — inset it to line up with the table cell text (12px). */
.engine-page .admin-section-body > .admin-pager {
    padding-left: 12px;
    padding-right: 12px;
}
.engine-page .admin-section + .admin-section,
.engine-page .admin-section ~ .admin-section { margin-top: 16px; }

/* Markers list inside an AdminSection (repairer/centre detail). The section
   body padding comes from the .admin-section child rule above — the list must
   not zero it out. */
.engine-page .marker-list {
    list-style: none;
    margin: 0;
}
.engine-page .marker-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.engine-page .marker-list li:first-child { padding-top: 0; }
.engine-page .marker-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.engine-page .marker-list li.marker-expired { opacity: 0.55; }
.engine-page .marker-list .marker-item-title { margin-left: 6px; }
.engine-page .marker-list .marker-item-exp { margin-left: 8px; }
.engine-page .marker-list .page-subtitle { margin: 4px 0 0; }
.engine-page .marker-list .marker-item-actions { margin-top: 8px; }

/* Stack panels in the detail grid with a small gap when wrapping. */
.engine-page .detail-grid > * { display: flex; flex-direction: column; gap: 16px; }

/* ── KPI cards ─────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi-card { padding: 14px 16px; border-radius: 10px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); }
.kpi-label { font-size: 11px; letter-spacing: 0.5px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.kpi-amber .kpi-value { color: #f5a623; }
.kpi-red   .kpi-value { color: #ef5350; }
.kpi-green .kpi-value { color: #4caf50; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { text-align: left; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2e36); }
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); color: var(--text); }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Health bands ──────────────────────────────────────────────────────── */
.band { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.band-green   { background: rgba(76, 175, 80, 0.15);  color: #4caf50; }
.band-amber   { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.band-red     { background: rgba(239, 83, 80, 0.18);  color: #ef5350; }
.band-purple  { background: rgba(156, 39, 176, 0.18); color: #ba68c8; }
.band-unknown { background: rgba(140, 140, 140, 0.15); color: var(--text-dim); }

.empty-state { padding: 28px; border: 1px dashed var(--border, #2a2e36); border-radius: 8px; color: var(--text-dim); text-align: center; }
.dashboard-asof { color: var(--text-dim); font-size: 12px; margin-top: 14px; }

/* ── Home (ops command centre) ─────────────────────────────────────────── */
.home-search { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; }
.home-search-input { flex: 1; max-width: 620px; font-size: 14px; padding: 12px 14px; }
.kpi-link { display: block; text-decoration: none; color: inherit; }
.kpi-link .kpi-card { transition: border-color 0.15s ease, transform 0.15s ease; height: 100%; }
.kpi-link:hover .kpi-card { border-color: var(--accent, #1cc478); transform: translateY(-1px); }
.home-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.home-grid > div { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) {
    .home-grid { grid-template-columns: 1fr; }
}

/* ── Network page — map fills the viewport height ──────────────────────── */
/* (Network page map sizing lives with the .network-page.is-full-bleed flex
   chain near the top of this file — no viewport height maths.) */

/* ── Tools landing page ────────────────────────────────────────────────── */
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tool-card { display: block; padding: 18px 20px; border-radius: 12px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); text-decoration: none; color: inherit; transition: transform 120ms ease, border-color 120ms ease; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent, #1cc478); }
.tool-card-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-bright); }
.tool-card-body { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* ── Buttons row in panels ─────────────────────────────────────────────── */
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Job detail / timeline ─────────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
.timeline-when { color: var(--text-dim); font-size: 12px; min-width: 130px; }
.timeline-event { font-weight: 600; }

.status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); color: var(--text); }
.status-AwaitingDeployment { background: rgba(245, 166, 35, 0.12);  color: #f5a623; border-color: transparent; }
.status-Allocated          { background: rgba(76, 175, 80, 0.12);   color: #4caf50; border-color: transparent; }
.status-FailedAllocation   { background: rgba(239, 83, 80, 0.18);   color: #ef5350; border-color: transparent; }

/* Pipeline stage pills — the shared CRM-derived job stage. */
.stage-ToDeploy                    { background: rgba(245, 166, 35, 0.12); color: #f5a623; border-color: transparent; }
.stage-ToBook                      { background: rgba(66, 165, 245, 0.14); color: #42a5f5; border-color: transparent; }
.stage-Booked                      { background: rgba(38, 198, 218, 0.14); color: #26c6da; border-color: transparent; }
.stage-CompleteAwaitingCostsImages { background: rgba(171, 71, 188, 0.16); color: #ce93d8; border-color: transparent; }
.stage-Complete                    { background: rgba(76, 175, 80, 0.12);  color: #4caf50; border-color: transparent; }
.stage-Invoiced                    { background: rgba(129, 199, 132, 0.16); color: #81c784; border-color: transparent; }
.stage-Cancelled                   { background: rgba(239, 83, 80, 0.18);  color: #ef5350; border-color: transparent; }

/* Pipeline stage chips — the filter row across the top of the Jobs board. */
.pipeline-chips .chip { cursor: pointer; color: var(--text); font-weight: 500; padding: 6px 12px; }
.pipeline-chips .chip:hover { border-color: var(--accent, #4caf50); }
.pipeline-chips .chip-active { border-color: var(--accent, #4caf50); background: rgba(76, 175, 80, 0.12); }
.pipeline-chips .chip strong { font-weight: 700; }

/* CRM note logs — one entry per "Author on date at time:" block */
.crm-notes { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.crm-note { background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 8px; padding: 8px 10px; }
.crm-note-hdr { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.crm-note-author { font-size: 12px; font-weight: 700; color: var(--text); }
.crm-note-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.crm-note-body { font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ── Priority pills ───────────────────────────────────────────────────────
   The new tri-state priority replaces the old urgency 1–5 + IsVip combo.
   Default ("None") shows nothing; "Priority" and "Vip" use accents that
   match Dispatch's colour vocabulary so the same badges read correctly
   across products. */
.priority-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
.priority-pill.priority-none      { background: transparent; color: var(--text-dim); border: 1px dashed var(--border); }
.priority-pill.priority-priority  { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.priority-pill.priority-vip       { background: rgba(156, 39, 176, 0.20); color: #ce93d8; }

/* ── Admin tabs ────────────────────────────────────────────────────────── */
/* Top-level admin tab bar — matches the Dispatch underline style (the integration
   sub-tabs inside an .admin-section keep the shared pill styling, which is more
   specific so it isn't affected by the bare .admin-tab rules below). */
.admin-tab-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--border);
}
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 44px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.admin-tab:hover { color: var(--text-bright); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab-icon { font-size: 13px; opacity: 0.7; }

/* ── Two-col grid (job detail, repairer detail) ────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 16px; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }

/* ── Inline list grouping ─────────────────────────────────────────────── */
.kv-list { margin: 0; display: grid; grid-template-columns: minmax(140px, 180px) 1fr; row-gap: 10px; column-gap: 18px; }
.kv-list dt {
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
    padding-top: 2px;
}
.kv-list dd { margin: 0; color: var(--text); word-break: break-word; }
@media (max-width: 700px) {
    .kv-list { grid-template-columns: 1fr; row-gap: 4px; }
    .kv-list dd { margin-bottom: 8px; }
}

/* Form controls used in modals / inline note adders. */
.engine-page .f-input,
.engine-page .f-textarea { width: 100%; padding: 8px 10px; background: var(--surface2, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; }
.engine-page .f-textarea { min-height: 64px; resize: vertical; }

/* ── Integrations admin ───────────────────────────────────────────────── */
.engine-integrations-admin .engine-int-body { display: flex; flex-direction: column; gap: 16px; }
.engine-integrations-admin .engine-int-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(280px, 1fr)); }
@media (max-width: 900px) { .engine-integrations-admin .engine-int-grid { grid-template-columns: 1fr; } }
.engine-integrations-admin .engine-int-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2, var(--surface));
}
.engine-integrations-admin .engine-int-field .rule-sub { margin-bottom: 0; }
.engine-integrations-admin .engine-int-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.engine-integrations-admin .engine-int-actions .f-input { flex: 1 1 200px; min-width: 180px; }
.engine-integrations-admin .engine-int-note {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2, var(--surface));
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.engine-integrations-admin .engine-integration-message { margin-bottom: 12px; }

/* Repairer integration settings are a dense configuration surface. The shared
   admin components already provide a card and inset, so keep this panel compact
   instead of stacking three generous padding layers around every control. */
.engine-repairer-integrations .admin-tabbed-section {
    gap: 10px;
}
.engine-repairer-integrations .section-head {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.engine-repairer-integrations .admin-section-body {
    padding: 10px 14px;
}
.engine-repairer-integrations .admin-section-body:empty {
    display: none;
}
.engine-repairer-integrations .admin-section + .admin-section,
.engine-repairer-integrations .admin-section ~ .admin-section {
    margin-top: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-body {
    gap: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-grid {
    gap: 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-field {
    gap: 4px;
    padding: 10px 12px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-feature-state {
    gap: 6px 10px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-actions {
    gap: 8px;
}
.engine-integrations-admin .engine-repairer-integrations .engine-int-note {
    padding: 8px 10px;
}
@media (max-width: 700px) {
    .engine-repairer-integrations .section-head {
        display: grid;
        align-items: stretch;
    }
    .engine-repairer-integrations .section-head > :last-child {
        justify-self: start;
    }
}

/* Log table grids — explicit columns keep things lining up the way Assess does. */
.engine-postcode-log-cols { grid-template-columns: 140px 110px 110px 100px 110px 130px 64px 90px 130px minmax(180px, 1fr); min-width: 1180px; }
.engine-ors-log-cols      { grid-template-columns: 140px 100px 160px 110px 90px 90px 64px 90px 90px minmax(160px, 1fr) 100px; min-width: 1280px; }
.engine-crm-log-cols      { grid-template-columns: 140px 145px 150px 60px minmax(180px, 1fr) 70px 64px 80px minmax(140px, 1fr); min-width: 1080px; }
.engine-lookup-log-table .table-row { align-items: center; }
.engine-lookup-log-table .audit-details { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-operation-cell { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }

/* Log filters bar shared between postcode + ORS tabs. */
.int-log-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.int-log-filters .f-input { max-width: 200px; }

/* Expanded JSON detail row beneath ORS log entries. */
.rt-log-detail-row { grid-column: 1 / -1; padding: 12px 14px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border); }
.rt-log-json { margin: 0; padding: 10px 12px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 6px; font: 11.5px/1.5 'Red Hat Mono', monospace; color: var(--text); white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.rt-result-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.4 'Red Hat Mono', monospace; letter-spacing: 0.5px; }
.rt-result-ok    { background: rgba(28,196,120,0.15); color: #1cc478; }
.rt-result-fail  { background: rgba(239,68,68,0.18);  color: #ef4444; }

.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.pager-info { color: var(--text-dim); font-size: 12px; }
.ok-box  { padding: 10px 12px; background: rgba(28,196,120,0.10); border: 1px solid rgba(28,196,120,0.35); color: #1cc478; border-radius: 6px; }
.err-box { padding: 10px 12px; background: rgba(239,68,68,0.10);  border: 1px solid rgba(239,68,68,0.35);  color: #ef4444; border-radius: 6px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-bright); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.admin-empty { padding: 18px; color: var(--text-dim); text-align: center; }
.table-scroll-wrap { overflow-x: auto; }

/* ── Job identity header (manual-job modal) ──────────────────────────────
   Mirrors RapidDispatch.Web's JobEditForm chrome so the "look and feel"
   stays consistent across products. */
.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 700px) { .modal-2col { grid-template-columns: 1fr; } }

.job-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--surface2, var(--surface));
    border-radius: 10px;
    border: 1px solid var(--border);
}
.job-identity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.job-title { font-size: 15px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.job-identity-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ref-badge {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border2, var(--border));
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .5px;
}

/* Form cards group related fields with a coloured spine on the label.
   Mirrors RapidDispatch.Web/Shared/JobEditForm.razor.css. */
.form-card {
    background: var(--surface2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 6px;
    margin-bottom: 12px;
    transition: box-shadow .2s;
}
.form-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.form-card-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: .3px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--accent, #4f8df7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 2px; margin-bottom: 10px; }

/* ── Detail pages (CentreDetail + RepairerDetail) ─────────────────────────
   Chip rows, the inactive banner and marker tag pills are shared between the
   two detail screens, so they live here rather than in inline page styles. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--surface, #1a1d23); border: 1px solid var(--border, #2a2e36); font-size: 12px; }
.chip-remove { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.chip-remove:hover { color: #ef5350; }

.centre-inactive-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(245,165,36,0.12);
    border: 1px solid rgba(245,165,36,0.45);
    border-radius: 8px;
    color: #f5a524;
}
.centre-inactive .form-card,
.centre-inactive .data-table { opacity: 0.7; }

.archived-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(229,72,77,0.12);
    border: 1px solid rgba(229,72,77,0.45);
    border-radius: 8px;
    color: #e5484d;
}
.repairer-archived .form-card,
.repairer-archived .data-table,
.repairer-archived .centre-grid { opacity: 0.7; }

.marker-tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.marker-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; line-height: 1.6;
    border: 1px solid var(--border, #2a2e36);
    background: var(--surface, #1a1d23);
}
.marker-red    { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); color: #f87171; }
.marker-amber  { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.10); color: #fbbf24; }
.marker-green  { border-color: rgba(28,196,120,0.45); background: rgba(28,196,120,0.10); color: #1cc478; }
.marker-tag-sev { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 10px; }
.marker-tag-title { font-weight: 500; color: var(--text); }
.marker-tag-exp { color: var(--text-dim); font-size: 10px; }
.marker-tag-x   { background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0; }
.marker-tag-x:hover { color: #ef5350; }

.row-inactive { opacity: 0.6; }
.status-inactive { background: rgba(140,140,140,0.15); color: var(--text-dim); border-color: transparent; }

/* "No coverage" pill: active-looking locations the allocator can never pick. */
.pill-no-coverage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(239, 83, 80, 0.18);
    color: #ef5350;
    white-space: nowrap;
}

/* Unified repair-network list: centres render as child rows under their repairer. */
.network-row-indent { color: var(--text-dim); margin: 0 6px 0 14px; }
.network-row-parent { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.network-row-parent a { color: var(--text-dim); }
.network-row-parent a:hover { color: var(--text); }

/* Inline failure reason under the status pill on the jobs list. */
.reason-cell { color: var(--text-dim); font-size: 12px; max-width: 280px; margin-top: 4px; }

/* Priority radio cards: mirrors Dispatch's segmented look. */
.priority-radio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .priority-radio-row { grid-template-columns: 1fr; } }
.priority-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.priority-option input { position: absolute; opacity: 0; pointer-events: none; }
.priority-option-label { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.priority-option-hint  { font-size: 11px; color: var(--text-dim); }
.priority-option:hover { border-color: var(--accent, #4f8df7); }
.priority-option.selected {
    border-color: var(--accent, #4f8df7);
    background: color-mix(in srgb, var(--accent, #4f8df7) 10%, transparent);
}

/* ── Repairer / centre change-history timeline ─────────────────────────────── */
.eng-history { list-style: none; margin: 0; padding: 4px 0 0; }
.eng-h-item { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.eng-h-item::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--line, #e2e8ef); }
.eng-h-item:last-child::before { display: none; }
.eng-h-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; background: var(--text-dim, #7a90aa); box-shadow: 0 0 0 3px var(--surface, #fff); z-index: 1; }
.eng-h-dot-info { background: #4f8df7; }
.eng-h-dot-ok { background: #1cc478; }
.eng-h-dot-warn { background: #f0854a; }
.eng-h-body { flex: 1; min-width: 0; }
.eng-h-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.eng-h-action { font-weight: 700; font-size: 13px; }
.eng-h-actor { font-size: 12px; color: var(--text-dim, #7a90aa); }
.eng-h-time { font-size: 11.5px; color: var(--text-dim, #7a90aa); margin-left: auto; }
.eng-h-detail { font-size: 12.5px; color: var(--text); margin-top: 3px; line-height: 1.45; }

/* ── Shared entity-detail tab rail (jobs, repairers and centres) ─────────── */
.detail-tabbed { display:flex; flex-direction:row; gap:14px; align-items:flex-start; min-width:0; margin-bottom:16px; }
.detail-rail { flex:0 0 148px; display:flex; flex-direction:column; gap:2px; position:sticky; top:12px; }
.rail-tab { display:flex; align-items:center; justify-content:space-between; gap:8px; background:none; border:none; border-left:2px solid transparent; border-radius:0 6px 6px 0; text-align:left; padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer; }
.rail-tab:hover { color:var(--text-bright); background:var(--surface2); }
.rail-tab.active { color:var(--accent); border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.rail-tab-count { font-size:10px; font-weight:700; background:var(--surface2); border-radius:999px; padding:1px 7px; color:var(--text-dim); }
.rail-tab.active .rail-tab-count { color:var(--accent); }
.detail-tab-content { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:16px; }
.detail-tab-content .form-card { margin-bottom:0; }

/* ── Paged network-detail lists and field-level history ─────────────────── */
.network-list-toolbar {
    display:grid;
    grid-template-columns:minmax(220px, 1fr) auto auto;
    gap:8px;
    align-items:center;
    margin-bottom:14px;
}
.network-list-toolbar.history-list-toolbar {
    grid-template-columns:minmax(220px, 1fr) minmax(180px, 240px) auto auto;
}
.network-change-history { padding-top:0; }
.history-change-list { display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.history-field-change {
    display:grid;
    grid-template-columns:minmax(150px, 0.8fr) minmax(100px, 1fr) auto minmax(100px, 1fr);
    gap:8px;
    align-items:center;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--bg);
    font-size:12px;
}
.history-field-name { font-weight:700; color:var(--text-bright); }
.history-field-value { min-width:0; overflow-wrap:anywhere; }
.history-field-before { color:var(--text-dim); }
.history-field-after { color:var(--text); font-weight:600; }
.history-field-arrow { color:var(--text-dim); }
.history-change-text {
    position:relative;
    padding:4px 8px 4px 18px;
    color:var(--text);
    font-size:12.5px;
    line-height:1.4;
}
.history-change-text::before {
    content:"";
    position:absolute;
    left:6px;
    top:10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--text-dim);
}

/* ── Repairer workforce, evidence and invoice administration ───────────── */
.engine-repairer-workflow,
.engine-job-repairer-workflow {
    display:grid;
    gap:14px;
}
.engine-feature-state {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
}
.engine-portal-layout {
    display:grid;
    gap:18px;
}
.engine-portal-skeleton {
    display:grid;
    gap:12px;
}
.engine-portal-skeleton span {
    display:block;
    height:76px;
    border:1px solid var(--border);
    border-radius:10px;
    background:linear-gradient(90deg,var(--surface) 20%,var(--surface2) 50%,var(--surface) 80%);
    background-size:240% 100%;
    animation:engine-portal-shimmer 1.4s ease-in-out infinite;
}
@keyframes engine-portal-shimmer {
    from { background-position:100% 0; }
    to { background-position:-100% 0; }
}
/* Must stay visible: the row action menu is absolutely positioned and would
   otherwise be clipped for the last user in the table. */
.engine-portal-section {
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    overflow:visible;
}
.engine-portal-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
}
.engine-portal-section-head > div {
    display:grid;
    gap:4px;
}
.engine-portal-section-head h3,
.engine-portal-result h3 {
    margin:0;
    color:var(--text-bright);
    font-size:15px;
}
.engine-portal-section-head p,
.engine-portal-empty p,
.engine-portal-result p,
.engine-portal-fallback p {
    margin:0;
    color:var(--text-dim);
    font-size:12.5px;
    line-height:1.45;
}
.engine-choice-group {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:18px;
    border:0;
}
.engine-choice-group > legend,
.engine-access-fieldset > legend {
    padding:0;
    color:var(--text-bright);
    font-size:12px;
    font-weight:700;
}
.engine-choice-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    align-items:start;
    min-height:78px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
    cursor:pointer;
}
.engine-choice-card.selected {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
}
.engine-choice-card:focus-within {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.engine-choice-card input {
    margin-top:3px;
    accent-color:var(--accent);
}
.engine-choice-card > span {
    display:grid;
    gap:4px;
}
.engine-choice-card strong {
    color:var(--text-bright);
    font-size:13px;
}
.engine-choice-card small {
    color:var(--text-dim);
    font-size:12px;
    line-height:1.4;
}
.engine-choice-group[disabled] .engine-choice-card {
    cursor:not-allowed;
    opacity:.68;
}
.engine-portal-section > .err-box {
    margin:0 18px 16px;
}
.engine-portal-section-actions {
    display:flex;
    justify-content:flex-end;
    padding:0 18px 18px;
}
.engine-portal-empty {
    display:grid;
    justify-items:start;
    gap:8px;
    padding:28px 18px;
}
.engine-portal-empty strong {
    color:var(--text-bright);
}
.engine-portal-table-wrap {
    width:100%;
    /* The last row loses its rule, so the card needs the space back. */
    padding-bottom:6px;
    overflow:visible;
}
.engine-portal-table {
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
}
.engine-portal-table th,
.engine-portal-table td {
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:middle;
}
.engine-portal-table th {
    color:var(--text-dim);
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.engine-portal-table tbody tr:last-child td {
    border-bottom:0;
}
.engine-portal-table td:first-child strong {
    display:block;
    color:var(--text-bright);
}
.engine-portal-email {
    display:block;
    margin-top:2px;
    color:var(--text-dim);
    overflow-wrap:anywhere;
}
/* Stays a real table-cell: a display:flex td is pulled out of the table's own
   layout, which left this column's row divider sitting 6px above the rest.
   Scoped to the table so it outranks the shared "td { text-align:left }". */
.engine-portal-table .engine-portal-row-actions {
    text-align:right;
    white-space:nowrap;
}
.engine-role-badge {
    display:inline-flex;
    padding:3px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface2);
    color:var(--text);
    font-size:11px;
    font-weight:700;
}
.engine-action-menu {
    position:relative;
    display:inline-block;
}
.engine-action-menu > summary {
    display:grid;
    width:34px;
    height:30px;
    place-items:center;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface2);
    color:var(--text-bright);
    cursor:pointer;
    font-weight:800;
    letter-spacing:.08em;
    list-style:none;
}
.engine-action-menu > summary::-webkit-details-marker {
    display:none;
}
.engine-action-menu > summary:hover,
.engine-action-menu > summary:focus-visible {
    border-color:var(--accent);
    outline:none;
}
/* The panel must stay hidden until the menu is opened. Setting a display value
   on the closed state would beat the browser's own rule for a shut <details>
   and leave the panel painted permanently over the rows beside it. */
.engine-action-menu > div {
    position:absolute;
    z-index:20;
    top:calc(100% + 5px);
    right:0;
    display:none;
    min-width:190px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.engine-action-menu[open] > div {
    display:grid;
}
/* The table is usually the last thing on the page, so the bottom row opens its
   menu upwards rather than off the end of the document. Short tables keep the
   menu below: flipping up there would cover the section heading and its Invite
   button instead of the rows the menu belongs to. */
.engine-portal-table tbody tr:last-child:nth-child(n+3) .engine-action-menu > div {
    top:auto;
    bottom:calc(100% + 5px);
}
.engine-action-menu button {
    width:100%;
    padding:8px 10px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text);
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.engine-action-menu button:hover,
.engine-action-menu button:focus-visible {
    background:var(--surface2);
    color:var(--text-bright);
    outline:none;
}
.engine-action-menu button.is-danger {
    color:var(--danger,#ef5350);
}
.engine-action-menu button:disabled {
    cursor:not-allowed;
    opacity:.55;
}
.engine-portal-form {
    display:grid;
    gap:16px;
}
.engine-choice-group-compact {
    padding:0;
}
.engine-access-summary-card,
.engine-portal-fallback {
    display:grid;
    gap:4px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-access-summary-card strong,
.engine-portal-fallback strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-access-summary-card span {
    color:var(--text-dim);
    font-size:12px;
    line-height:1.4;
}
.engine-access-fieldset {
    display:grid;
    gap:14px;
    margin:0;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
}
.engine-segmented-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.engine-segmented-options label {
    cursor:pointer;
}
.engine-segmented-options input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.engine-segmented-options span {
    display:block;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    text-align:center;
    font-size:12px;
    font-weight:700;
}
.engine-segmented-options input:checked + span {
    border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
    color:var(--text-bright);
}
.engine-segmented-options input:focus-visible + span {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.engine-centre-picker {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px;
    max-height:220px;
    overflow:auto;
    padding:10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--bg);
}
.engine-direct-jobs-toggle {
    padding-top:2px;
}
.engine-direct-jobs-toggle > span {
    display:grid;
    gap:2px;
}
.engine-direct-jobs-toggle strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-direct-jobs-toggle small {
    color:var(--text-dim);
    font-size:11.5px;
}
.engine-readonly-field {
    display:grid;
    gap:4px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-readonly-field span {
    color:var(--text-dim);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}
.engine-readonly-field strong {
    color:var(--text-bright);
    font-size:12.5px;
}
.engine-portal-action-error {
    margin:14px 18px 0;
}
.engine-portal-result {
    display:grid;
    justify-items:start;
    gap:10px;
}
.engine-portal-fallback {
    width:100%;
}
.engine-portal-fallback a {
    color:var(--accent);
    font-size:12.5px;
    font-weight:700;
}
.engine-confirm-copy {
    margin:0;
    color:var(--text);
    font-size:13px;
    line-height:1.55;
}
.engine-invoice-review {
    display:grid;
    gap:12px;
    margin-top:16px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-invoice-review h3 {
    margin:0;
    color:var(--text-bright);
}
.engine-invoice-decisions {
    margin:0;
    padding:12px 14px 12px 30px;
    display:grid;
    gap:6px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    color:var(--text-dim);
    font-size:12px;
    line-height:1.5;
}
.engine-invoice-decisions strong { color:var(--text-bright); }
.engine-evidence-upload {
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.engine-evidence-upload input[type=file] {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.engine-additional-evidence,
.engine-invoice-fallback {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
.engine-additional-evidence h4 { margin:0; color:var(--text-bright); }
.engine-additional-evidence > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.engine-additional-evidence > div > span { display:grid; gap:2px; }
.engine-additional-evidence small { color:var(--text-dim); }
.engine-invoice-fallback__totals {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.engine-invoice-fallback__totals > span {
    display:grid;
    gap:3px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface);
}
.engine-invoice-fallback__totals small { color:var(--text-dim); }
.engine-invoice-fallback__add {
    display:grid;
    grid-template-columns:minmax(180px,1fr) 130px minmax(180px,1fr) auto;
    gap:8px;
    align-items:end;
}
.engine-invoice-cost-input { min-width:100px; }
.engine-invoice-documents,
.engine-invoice-preview {
    display:grid;
    gap:10px;
}
.engine-invoice-documents {
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
}
.engine-invoice-preview > header {
    display:flex;
    align-items:center;
    gap:10px;
}
.engine-invoice-preview > header .btn {
    margin-left:auto;
}
.engine-invoice-preview iframe,
.engine-invoice-preview img {
    display:block;
    width:100%;
    min-height:480px;
    max-height:70vh;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    object-fit:contain;
}
.engine-invoice-workspace {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
    gap:14px;
    align-items:start;
}
.engine-invoice-workspace__visuals,
.engine-invoice-workspace__decision {
    display:grid;
    gap:12px;
    min-width:0;
}
.engine-invoice-workspace__decision {
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
}
.engine-invoice-workspace__decision .data-table {
    display:block;
    overflow-x:auto;
}
.engine-review-evidence {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
}
.engine-review-evidence > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.engine-review-evidence > header > span {
    color:var(--text-dim);
    font-size:12px;
}
.engine-review-evidence__grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.engine-review-evidence__item {
    display:grid;
    gap:6px;
    min-width:0;
    padding:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface2);
    color:inherit;
    text-align:left;
    cursor:pointer;
}
.engine-review-evidence__item:hover {
    border-color:var(--accent);
}
.engine-review-evidence__item > img,
.engine-review-evidence__placeholder {
    display:grid;
    width:100%;
    height:112px;
    place-items:center;
    background:#fff;
    object-fit:cover;
}
.engine-review-evidence__placeholder {
    color:var(--text-dim);
    background:var(--surface);
    font-size:12px;
}
.engine-review-evidence__item > span:last-child {
    display:grid;
    gap:2px;
    min-width:0;
    padding:0 8px 8px;
}
.engine-review-evidence__item strong,
.engine-review-evidence__item small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.engine-review-evidence__item small {
    color:var(--text-dim);
    font-size:10px;
}
.engine-invoice-sendback {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface2);
}
@media (max-width:1100px) {
    .engine-invoice-workspace {
        grid-template-columns:1fr;
    }
}
@media (max-width:700px) {
    .engine-review-evidence__grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
.engine-workflow-assignment {
    display:grid;
    grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr) auto;
    gap:10px;
    align-items:center;
}
.engine-workflow-override {
    display:grid;
    gap:8px;
    margin-top:12px;
}

@media (max-width: 900px) {
    .detail-tabbed { flex-direction:column; }
    .detail-rail { position:static; flex-direction:row; flex-wrap:wrap; width:100%; }
    .rail-tab { border-left:none; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; }
    .rail-tab.active { border-bottom-color:var(--accent); }
    .network-list-toolbar { grid-template-columns:1fr auto; }
    .network-list-toolbar.history-list-toolbar { grid-template-columns:1fr auto; }
    .network-list-toolbar .f-input { grid-column:1 / -1; }
    .history-field-change { grid-template-columns:1fr; gap:3px; }
    .history-field-arrow { display:none; }
    .engine-workflow-assignment,
    .engine-invoice-fallback__add,
    .engine-invoice-fallback__totals { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
    .engine-portal-section-head {
        align-items:flex-start;
        flex-direction:column;
    }
    .engine-portal-section-head .btn {
        width:100%;
    }
    .engine-choice-group,
    .engine-choice-group-compact,
    .engine-centre-picker,
    .engine-segmented-options {
        grid-template-columns:1fr;
    }
    .engine-portal-table-wrap {
        padding:12px;
        overflow:visible;
    }
    .engine-portal-table,
    .engine-portal-table tbody,
    .engine-portal-table tr,
    .engine-portal-table td {
        display:block;
        width:100%;
    }
    .engine-portal-table thead {
        display:none;
    }
    .engine-portal-table tbody {
        display:grid;
        gap:10px;
    }
    .engine-portal-table tr {
        padding:4px 12px;
        border:1px solid var(--border);
        border-radius:8px;
        background:var(--surface2);
    }
    .engine-portal-table td {
        display:grid;
        grid-template-columns:minmax(90px,.35fr) minmax(0,1fr);
        gap:10px;
        padding:9px 0;
    }
    .engine-portal-table td::before {
        content:attr(data-label);
        color:var(--text-dim);
        font-size:10px;
        font-weight:700;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .engine-portal-row-actions {
        display:flex !important;
        flex-wrap:wrap;
        justify-content:flex-start;
        white-space:normal;
    }
    .engine-portal-row-actions::before {
        display:none;
    }
    .engine-action-menu {
        width:100%;
    }
    .engine-action-menu > summary {
        margin-left:auto;
    }
    .engine-action-menu > div {
        position:static;
        width:100%;
        margin-top:5px;
        box-shadow:none;
    }
}