:root {
    --bg: #f4f6f8; --card: #fff; --ink: #1e2733; --muted: #6b7787;
    --line: #e2e8f0; --brand: #2563eb; --brand-ink: #fff;
    --ok: #16a34a; --warn: #d97706; --err: #dc2626;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg); color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: var(--ink); color: #fff; }
.topbar .brand { font-weight: 700; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; }
.topbar nav a { color: #cbd5e1; margin-left: 18px; }
.topbar nav a:hover { color: #fff; }
.nav-dropdown { position: relative; margin-left: 18px; }
.nav-dropdown-label { color: #cbd5e1; cursor: default; font-size: inherit; }
.nav-dropdown:hover .nav-dropdown-label { color: #fff; }
.nav-dropdown-menu { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0;
    padding-top: 6px; min-width: 160px; z-index: 100;
    transition: visibility 0s 0.2s, opacity 0.15s 0.2s; }
.nav-dropdown-menu::after { content: ''; display: block; position: absolute; top: 6px; left: 0; right: 0; bottom: 0;
    background: var(--ink); border: 1px solid #334155; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: -1; }
.nav-dropdown:hover .nav-dropdown-menu { visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.15s 0s; }
.nav-dropdown-menu a { position: relative; z-index: 1; display: block; padding: 7px 16px; margin: 0; color: #cbd5e1; text-decoration: none; }
.nav-dropdown-menu a:first-child { margin-top: 6px; border-radius: 6px 6px 0 0; }
.nav-dropdown-menu a:last-child { margin-bottom: 6px; border-radius: 0 0 6px 6px; }
.nav-dropdown-menu a:hover { background: #334155; color: #fff; text-decoration: none; }

.container { max-width: 1650px; margin: 22px auto; padding: 0 16px; }
/* Pages that set $fullWidth: use the whole screen. Wide tables with a dozen
   columns are unreadable squeezed into a reading-width column. */
.container-full { max-width: none; margin: 12px auto; padding: 0 12px; }
/* …and the whole height. The default table wrapper caps at 400px, which on the
   asset register means scrolling a tiny window inside a mostly empty page. */
.asset-page .codd-table-wrap { max-height: calc(100vh - 330px); min-height: 300px; }
@media (max-width: 900px) {
    .asset-page .codd-table-wrap { max-height: 60vh; }
    .container-full { padding: 0 8px; }
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
input, select, textarea { width: 100%; padding: 9px 10px; margin-top: 4px;
    border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink);
    background: #fff; }
label.checkbox { display: flex; align-items: center; gap: 8px; }
label.checkbox input { width: auto; margin: 0; }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > label { flex: 1 1 200px; }
.grow { flex: 1; }

button, .btn { display: inline-block; padding: 9px 14px; border-radius: 8px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font: inherit; cursor: pointer; }
button:hover, .btn:hover { background: #f1f5f9; }
.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.primary:hover { background: #1d4ed8; }
.btn.danger, button.danger { background: #fff; color: var(--err); border-color: #fecaca; }
.btn.danger:hover, button.danger:hover { background: #fef2f2; }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-del { border: none; background: none; color: #cbd5e1; cursor: pointer; font-size: 15px;
    line-height: 1; padding: 4px 6px; border-radius: 6px; }
.row-del:hover { color: var(--err); background: #fef2f2; }

.hint { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.error { color: var(--err); }
.success { color: var(--ok); }

table.results { width: 100%; border-collapse: collapse; }
table.results th, table.results td { text-align: left; padding: 10px 8px;
    border-bottom: 1px solid var(--line); vertical-align: top; }
table.results th { font-size: 12px; text-transform: uppercase; color: var(--muted); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
    background: #eef2f7; color: var(--muted); }
.status-customer { background: #dcfce7; color: #166534; }
.status-prospect { background: #dbeafe; color: #1e40af; }
.status-contacted { background: #fef9c3; color: #854d0e; }
.status-negotiating { background: #ffedd5; color: #9a3412; }
.status-not_interested { background: #fee2e2; color: #991b1b; }
.status-archived_dissolved,.status-archived_dormant,.status-archived_left { background: #e5e7eb; color: #6b7280; }

/* Data staleness indicators — on company-head (title) and on individual timestamp spans */
.data-warning h1,.data-warning .muted { color: #d97706 !important; }
.data-stale h1,.data-stale .muted { color: #dc2626 !important; }
.data-critical h1,.data-critical .muted { color: #dc2626 !important; }
span.data-warning,span.data-warning strong { color: #d97706 !important; }
span.data-stale,span.data-stale strong { color: #dc2626 !important; }
span.data-critical,span.data-critical strong { color: #dc2626 !important; }
.stale-banner { background: #fef2f2; border: 2px solid #dc2626; border-radius: 8px; padding: 16px 24px; margin-bottom: 16px; text-align: center; color: #991b1b; }
.stale-banner p { margin: 6px 0 12px; }

.map { height: 300px; border-radius: 10px; border: 1px solid var(--line); }
.map.tall { height: 560px; }
/* Hide Leaflet Routing Machine's turn-by-turn panel — show only the route line */
.leaflet-routing-container { display: none !important; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 10px; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px)  { .grid-3 { grid-template-columns: 1fr; } }

.company-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.status-box { min-width: 200px; }
.facts { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.facts h3 { margin: 0 0 8px; }
.facts dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0 0 16px; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; }
.enrich-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.contacts { list-style: none; padding: 0; margin: 0; }
.contacts li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.notes { margin-top: 20px; }
.popup-overlay[hidden] { display: none !important; }
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.popup-box { background: var(--bg, #fff); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.25); max-width: 600px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; }
.popup-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.popup-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--fg); padding: 0 4px; }
.popup-body { padding: 18px; overflow-y: auto; }
.address-book { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.address-book h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.ab-panel { border: 1px solid var(--line, #e2e8f0); border-radius: 8px; padding: 14px 16px; }
.address-book h3 .btn { font-size: 11px; padding: 2px 8px; }
.ab-card { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; position: relative; }
.ab-card.main-contact { border-color: var(--primary, #2563eb); background: rgba(37,99,235,.04); }
.badge.main { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--primary, #2563eb); color: #fff; vertical-align: middle; }
.ab-card .ab-actions, .ab-card .ab-actions a { font-size: 11px; }
.ab-card .ab-actions { position: absolute; top: 8px; right: 10px; }
.address-book label { display: block; margin-bottom: 4px; font-size: 13px; }
.address-book label input { width: 100%; margin-top: 2px; }
.address-book .btn { margin-top: 6px; }
.saved-flag { font-size: 12px; color: var(--ok); }
.filters { margin-bottom: 12px; }

.results-head { display: flex; align-items: center; gap: 14px; }
.results-head h2 { margin: 0; flex: 1; }

.stat-row { display: flex; gap: 14px; margin-top: 14px; }
.stat { flex: 1; background: #f8fafc; border: 1px solid var(--line);
    border-radius: 10px; padding: 16px; text-align: center; }
.stat-num { font-size: 30px; font-weight: 700; }
.stat-label { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }

pre.code { background: #0f172a; color: #e2e8f0; padding: 14px; border-radius: 8px;
    overflow-x: auto; font-size: 12.5px; line-height: 1.5; }

/* ---- Display-status colour system ------------------------------------- */
.dnc-banner { background: #dc2626; color: #fff; font-weight: 800; font-size: 22px;
    letter-spacing: .1em; text-align: center; padding: 16px; border-radius: 10px;
    margin-bottom: 18px; text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(220,38,38,.45); animation: dncpulse 1.6s ease-in-out infinite; }
@keyframes dncpulse { 0%,100% { opacity: 1; } 50% { opacity: .82; } }

.ds-pill { color: #fff !important; }
.ds-pill.ds-dnc { background: #dc2626; }
.ds-pill.ds-customer { background: #16a34a; }
.ds-pill.ds-buyer { background: #0d9488; }
.ds-pill.ds-callback { background: #ea580c; }
.ds-pill.ds-contacted { background: #2563eb; }
.ds-pill.ds-hubspot { background: #7c3aed; }
.ds-pill.ds-none { background: #1f2937; }

/* "In HubSpot" rows get a subtle purple marker */
tr.ds-hubspot td:first-child { box-shadow: inset 4px 0 0 #7c3aed; }

/* DO NOT CONTACT rows stand out red in search + call-back lists */
tr.ds-dnc td { background: #fef2f2; }
tr.ds-dnc a { color: #dc2626; font-weight: 700; }
tr.ds-dnc td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
tr.ds-callback td:first-child { box-shadow: inset 4px 0 0 #ea580c; }

.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px;
    font-size: 13px; color: var(--muted); }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,.25); }

.callback-current { font-size: 12px; color: #ea580c; margin-top: 4px; min-height: 14px; }
.dnc-toggle { margin-top: 10px; color: #dc2626; font-weight: 600; }

.company-logo { max-height: 34px; max-width: 160px; vertical-align: middle;
    margin-bottom: 6px; display: block; }
.desc-block { margin: 4px 0 12px; }
.tech-block { margin-top: 8px; }

.side-col { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.side-col .manual-contact { margin: 0; }
.manual-contact { margin: 4px 0 14px; padding: 10px 12px; background: #f8fafc;
    border: 1px solid var(--line); border-radius: 8px; }
.manual-contact h3 { margin: 0 0 8px; }
.manual-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 8px; }
.manual-fields label { margin: 0; }

/* ---- Reconcile page --------------------------------------------------- */
.reconcile-list { list-style: none; margin: 0; padding: 0; }
.reconcile-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.recon-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.recon-actions { display: flex; gap: 8px; flex: none; }
.recon-candidates { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cand { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.recon-result { margin-top: 8px; }
.recon-linked { background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px;
    padding: 8px 10px; font-size: 14px; }
.recon-linked .btn { margin-left: 8px; }
.tech-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
    background: #eef2f7; color: #334155; border: 1px solid var(--line); text-decoration: none; }
a.tech-tag:hover { background: #e0e7ff; border-color: #c7d2fe; text-decoration: none; }

.jobs { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.jobs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.jobs-head h3 { margin: 0; }
.job-row { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fff; }
.job-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.job-body { margin-top: 10px; }
.job-form .row { gap: 12px; margin-bottom: 8px; }
.ji-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ji-table th, .ji-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ji-table input, .ji-table select { padding: 5px 7px; margin: 0; }
.ji-table th { font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: left; }
.ji-total { font-weight: 700; }
.job-site { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.job-site legend { font-size: 12px; color: var(--muted); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.job-site.open { background: #f8fafc; }
.job-route { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.job-route-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.job-route-head strong { flex: 1; }
.job-route .jr-map { height: 260px; }
.job-route .jr-list { max-height: 260px; overflow-y: auto; margin: 0; }
.ji-bad td { background: #fef2f2; }
.ji-bad .ji-net::after { content: '  ⚠ check'; color: #dc2626; font-size: 11px; }

/* ---- Company page tabs ------------------------------------------------ */
.company-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-top: 16px; }
.tab-btn { background: none; border: none; padding: 10px 20px; cursor: pointer; font-size: 14px;
    font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--fg); border-bottom-color: #2563eb; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---- Confirmation modal ----------------------------------------------- */
.confirm-modal[hidden] { display: none; }
.confirm-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999;
    display: flex; align-items: center; justify-content: center; }
.confirm-modal-box { background: #fff; border-radius: 10px; padding: 24px 28px; max-width: 460px;
    width: 90%; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.confirm-modal-box h3 { margin: 0 0 8px; }
.confirm-modal-box p { margin: 0; color: var(--muted); }

.nearby-launch { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.nearby { margin-top: 14px; }
.nearby-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.nearby-head h3 { margin: 0; flex: 1; }
.nearby-head label { margin: 0; }

/* ---- SIC code picker -------------------------------------------------- */
.sic-field { flex: 1 1 100%; }
.field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.sic-picker { position: relative; }
.sic-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
.sic-control input { border: none; outline: none; flex: 1; min-width: 200px; padding: 4px; margin: 0; }
.sic-chips { display: contents; }
.sic-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff;
    color: #3730a3; border: 1px solid #c7d2fe; border-radius: 6px; padding: 3px 6px; font-size: 12px; max-width: 100%; }
.sic-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.sic-chip button { border: none; background: none; color: #3730a3; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.sic-panel { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.sic-group-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    padding: 9px 10px 4px; position: sticky; top: 0; background: #fff; }
.sic-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.sic-row:hover { background: #f1f5f9; }
.sic-row .sic-check { width: 14px; height: 14px; border: 1px solid #cbd5e1; border-radius: 3px; flex: none; }
.sic-row.sel .sic-check { background: var(--brand); border-color: var(--brand);
    box-shadow: inset 0 0 0 2px #fff; }
.sic-row.sel { background: #eff6ff; }

/* --- Job documents ------------------------------------------------------- */
.job-codd { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.codd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.codd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.codd-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.codd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.codd-table th { position: sticky; top: 0; background: var(--card); border-bottom: 2px solid var(--line);
    padding: 6px 8px; text-align: left; white-space: nowrap; font-size: 12px; }
.codd-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.codd-table tr:hover td { background: #f1f5f9; }
.codd-sn { font-family: monospace; font-size: 12px; }
.job-docs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.job-docs-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.doc-qr-box { margin: 4px 0 12px; padding: 12px; border: 1px solid var(--line);
    border-radius: 8px; background: #f8fafc; text-align: center; }
.doc-qr-box .qr-canvas { display: inline-block; }
.doc-qr-box .qr-canvas img,
.doc-qr-box .qr-canvas canvas { display: block; }
.doc-qr-box a { word-break: break-all; }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.doc-thumb { flex: none; width: 56px; height: 56px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: #f1f5f9; }
.doc-thumb.doc-ext { font-size: 12px; font-weight: 700; color: #475569; text-decoration: none; }
.doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-meta > a { word-break: break-word; }
.doc-tag { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.doc-tag select { margin: 0; }
.doc-item .doc-del { flex: none; align-self: center; }

/* ---- Report tabs ------------------------------------------------------- */
.report-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

/* ---- Calendar ---------------------------------------------------------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cal-title { margin: 0; flex: 1; text-align: center; }

.cal-layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }

.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { text-align: center; padding: 8px 4px; font-size: 12px; text-transform: uppercase;
    color: var(--muted); border-bottom: 2px solid var(--line); }
.cal-grid th.cal-weekend { color: #cbd5e1; }
.cal-grid td { border: 1px solid var(--line); vertical-align: top; padding: 6px 8px;
    height: 90px; transition: background .15s; }
.cal-empty { background: #fafbfc; }
.cal-day:hover { background: #f1f5f9; }
.cal-day.cal-selected { background: #eff6ff; box-shadow: inset 0 0 0 2px var(--brand); }
.cal-today .cal-num { background: var(--brand); color: #fff; border-radius: 50%;
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.cal-past { opacity: .55; }
.cal-future { background: #fff; }
.cal-weekend { background: #fafbfc; }
.cal-num { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.cal-info { font-size: 11px; color: var(--muted); }
.cal-info .cal-jobs { margin-right: 6px; }
.cal-info .cal-kg { font-weight: 600; color: var(--ink); }
.cal-cap-bar { height: 5px; background: #e2e8f0; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.cal-cap-bar-lg { height: 10px; border-radius: 5px; }
.cal-cap-fill { height: 100%; border-radius: 3px; background: var(--ok); transition: width .3s; }
.cal-cap-fill.cap-busy { background: var(--warn); }
.cal-cap-fill.cap-full { background: var(--err); }

.cal-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); align-items: center; }
.cap-sample { display: inline-block; width: 14px; height: 8px; border-radius: 4px; margin-right: 4px; vertical-align: middle; }
.cap-sample.cap-ok { background: var(--ok); }
.cap-sample.cap-busy { background: var(--warn); }
.cap-sample.cap-full { background: var(--err); }

.cal-sidebar { border: 1px solid var(--line); border-radius: 10px; padding: 16px;
    background: #f8fafc; align-self: start; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.cal-sidebar h2 { font-size: 16px; margin: 0 0 12px; }
.cal-side-cap { margin-bottom: 14px; }
.cal-cap-text { font-size: 13px; margin-top: 6px; }

.cal-job-list { display: flex; flex-direction: column; gap: 8px; }
.cal-job-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.cal-job-top { font-weight: 600; font-size: 14px; }
.cal-job-top a { color: var(--brand); }
.cal-job-meta { font-size: 12px; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cal-driver { color: var(--muted); }
.cal-job-weight { font-size: 13px; margin-top: 5px; }

/* "not saved" marker on transient search results (added on click-through). */
.muted-pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
    background: #f1f5f9; color: #64748b; border: 1px solid var(--line); vertical-align: middle; }

/* ITAD asset log */
.job-itad { margin-top: 18px; }
.itad-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.itad-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; }
.itad-settings label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.itad-settings select { font-size: 13px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); }
.itad-table th { font-size: 12px; }
.itad-table td { font-size: 13px; }
.itad-actions { display: flex; gap: 10px; margin-top: 8px; }
.itad-add-form { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 10px; }
.itad-add-form .row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.itad-add-form label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); flex: 1; min-width: 140px; }
.itad-add-form input, .itad-add-form select { font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); margin-top: 2px; }
.itad-del { background: none; border: none; color: var(--err); cursor: pointer; font-size: 16px; font-weight: 700; }
.btn-sm { background: none; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 13px; padding: 2px 6px; }
.btn-sm:hover { background: var(--line); }
.enrich-timestamps { display: flex; flex-wrap: wrap; gap: 2px 0; }
.itad-comp-box { display: flex; flex-wrap: wrap; gap: 6px 16px; background: #eef6ff; border: 1px solid #bdd7f5; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.itad-comp-item { font-size: 12px; white-space: nowrap; }
.itad-pm-drive-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.itad-pm-drive-pills .pill { cursor: pointer; font-size: 12px; }
.itad-pm-drive-pills .pill:hover { background: var(--brand); color: var(--brand-ink); }
.itad-msg { margin-left: auto; }

/* ---- Carrier management ------------------------------------------------ */
.carrier-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; }
.carrier-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.carrier-head strong { font-size: 16px; }
.carrier-actions { margin-left: auto; display: flex; gap: 6px; }
.carrier-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 700px) { .carrier-body { grid-template-columns: 1fr; } }
.carrier-section { padding: 8px 0; }
.carrier-section > strong { display: block; margin-bottom: 6px; }
.carrier-list { list-style: none; padding: 0; margin: 6px 0 0; }
.carrier-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.carrier-list li:last-child { border-bottom: none; }
.inline-add { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dropdown-results { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 50; width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.dd-item { padding: 6px 10px; cursor: pointer; }
.dd-item:hover { background: #f1f5f9; }
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.alert.success { background: #dcfce7; color: #166534; }
.alert.danger { background: #fee2e2; color: #991b1b; }

/* ── Asset register ─────────────────────── */
.asset-pipeline { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.pipeline-tile { display:flex; flex-direction:column; align-items:center; padding:12px 16px; border-radius:8px; border:2px solid var(--line); background:var(--card); text-decoration:none; color:var(--ink); min-width:90px; transition:border-color .15s; }
.pipeline-tile:hover { border-color:var(--tile-colour, var(--brand)); }
.pipeline-tile.active { border-color:var(--tile-colour, var(--brand)); background:color-mix(in srgb, var(--tile-colour, var(--brand)) 8%, var(--card)); }
.pipeline-count { font-size:1.5rem; font-weight:700; color:var(--tile-colour, var(--ink)); }
.pipeline-label { font-size:.8rem; margin-top:2px; }

.asset-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.asset-search-input { flex:1; min-width:200px; padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:.9rem; }
.asset-filters select { padding:7px 10px; border:1px solid var(--line); border-radius:6px; }

.asset-bulk-bar { display:flex; gap:8px; align-items:center; padding:8px 12px; background:#eef2ff; border-radius:6px; margin-bottom:10px; }
.bulk-count { font-weight:600; font-size:.85rem; }

.asset-register-table th, .asset-register-table td { font-size:.82rem; white-space:nowrap; }
.asset-register-table td { vertical-align:middle; }

.asset-detail-panel { padding:12px; background:var(--bg); border-radius:6px; }
.asset-detail-panel .row { display:flex; gap:10px; flex-wrap:wrap; }
.asset-detail-panel label { display:flex; flex-direction:column; font-size:.8rem; font-weight:600; gap:2px; }
.asset-detail-panel select, .asset-detail-panel input { padding:5px 8px; border:1px solid var(--line); border-radius:4px; font-size:.85rem; }

.asset-history { margin-top:10px; font-size:.8rem; }
.asset-history table { width:100%; }
.asset-history td { padding:3px 8px; border-bottom:1px solid var(--line); }

/* ── Customer Report ────────────────────────────────── */
.cr-tiles { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.cr-tile { flex:1; min-width:120px; background:var(--bg); border-radius:8px; padding:16px; text-align:center; }
.cr-tile-num { font-size:28px; font-weight:700; color:var(--brand); }
.cr-tile-label { font-size:13px; color:var(--muted); margin-top:4px; }

.cr-breakdown { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-top:16px; }
.cr-bars { display:flex; flex-direction:column; gap:8px; }
.cr-bar-row { display:flex; align-items:center; gap:8px; }
.cr-bar-label { width:160px; font-size:13px; text-align:right; flex-shrink:0; }
.cr-bar-track { flex:1; height:20px; background:var(--bg); border-radius:4px; overflow:hidden; }
.cr-bar-fill { height:100%; border-radius:4px; transition:width .3s ease; min-width:2px; }
.cr-bar-val { width:36px; font-size:13px; font-weight:600; }

/* ── Warehouse Locations ────────────────────────────────── */
.loc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-top:12px; }
.loc-card { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; transition:box-shadow .2s; }
.loc-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.loc-card.loc-inactive { opacity:.55; }
.loc-card.loc-full { border-color:#ef4444; }
.loc-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.loc-code { font-weight:700; font-size:18px; font-family:monospace; color:var(--brand); }
.loc-label { font-size:13px; color:var(--muted); margin-bottom:8px; }
.loc-stats { font-size:13px; display:flex; gap:4px; align-items:baseline; }
.loc-count { font-weight:600; }
.loc-cap { color:var(--muted); }
.loc-bar-track { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px; }
.loc-bar-fill { height:100%; border-radius:3px; transition:width .3s ease; }
.loc-actions { display:flex; gap:6px; margin-top:8px; }
.loc-actions .btn-sm { padding:2px 6px; font-size:13px; cursor:pointer; background:none; border:1px solid var(--line); border-radius:4px; }
.loc-actions .btn-sm:hover { background:var(--card); }

/* Scan page */
.scan-modes { display:flex; gap:6px; margin-bottom:16px; }
.scan-mode-btn { padding:10px 20px; border:2px solid var(--line); border-radius:8px; background:var(--card);
    cursor:pointer; font-size:15px; font-weight:600; transition:all .15s; }
.scan-mode-btn:hover { border-color:var(--brand); }
.scan-mode-btn.active { border-color:var(--brand); background:var(--brand); color:#fff; }
.scan-log-item { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
.scan-log-item:last-child { border-bottom:0; }
.scan-log-item.scan-ok { border-left:3px solid var(--ok); }
.scan-log-item.scan-err { border-left:3px solid var(--err); background:#fef2f2; }
.scan-log-item.scan-dup { border-left:3px solid var(--warn); background:#fffbeb; }
.scan-log-item.scan-found { border-left:3px solid var(--brand); }
.scan-log-icon { font-size:20px; flex-shrink:0; }
.scan-log-body { flex:1; min-width:0; }
.scan-log-serial { font-family:monospace; font-weight:700; font-size:15px; }
.scan-log-detail { font-size:13px; color:var(--muted); }
.scan-log-time { font-size:12px; color:var(--muted); white-space:nowrap; }
.scan-log-actions { display:flex; gap:4px; }
.scan-log-actions .btn-sm { font-size:12px; padding:2px 8px; cursor:pointer; background:none; border:1px solid var(--line); border-radius:4px; }
.scan-log-actions .btn-sm:hover { background:var(--card); }
.scan-log-actions { flex-wrap:wrap; }
/* Lookup: a found item opens in the quick editor below the list. */
.scan-log-item.scan-editable { cursor:pointer; }
.scan-log-item.scan-editable:hover { background:#f5f8ff; }
.scan-log-item.scan-editing { background:#eef2ff; box-shadow:inset 3px 0 0 var(--brand); }
.scan-edit-hint { font-size:11px; color:var(--brand); margin-top:2px; }
.scan-editor .qe-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.scan-editor .qe-head > div { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.scan-editor .qe-ref { font-family:monospace; font-size:16px; }
.scan-editor .qe-chip { font-size:11px; padding:1px 7px; border-radius:10px; background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.scan-editor .qe-body { padding:12px 16px 14px; }
.scan-editor .qe-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:10px; }
.scan-editor .qe-grid.qe-lock { grid-template-columns:1fr 1.5fr auto; padding:10px; background:#fff1f2; border:1px solid #fecdd3; border-radius:8px; }
.scan-editor .qe-grid.qe-wide { grid-template-columns:1fr 3fr; }
.scan-editor label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); min-width:0; }
.scan-editor input[type="text"], .scan-editor select, .scan-editor textarea { width:100%; padding:7px 8px; border:1px solid var(--line); border-radius:6px; font-size:14px; color:inherit; background:#fff; box-sizing:border-box; }
.scan-editor input[type="text"]:focus, .scan-editor select:focus, .scan-editor textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; }
.scan-editor label.qe-check { flex-direction:row; align-items:center; gap:6px; align-self:end; padding-bottom:8px; font-size:13px; color:inherit; white-space:nowrap; }
.scan-editor .qe-foot { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.scan-editor .qe-foot .btn-sm { font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:4px; text-decoration:none; }
.scan-editor .qe-msg { font-size:13px; }
@media (max-width: 640px) {
    .scan-editor .qe-grid, .scan-editor .qe-grid.qe-wide, .scan-editor .qe-grid.qe-lock { grid-template-columns:1fr 1fr; }
}
@keyframes scanFlash { 0%{background:rgba(37,99,235,.15)} 100%{background:transparent} }
.scan-flash { animation: scanFlash .6s ease-out; }

/* ── Audit Trail ─────────────────────────────────────── */
.audit-trail-table th, .audit-trail-table td { font-size:.82rem; }
.audit-stage-badge { display:inline-block; padding:1px 7px; border-radius:4px; background:var(--bg); border:1px solid var(--line); font-size:.78rem; }
.audit-stage-badge.audit-stage-to { background:#eef2ff; border-color:#c7d2fe; font-weight:600; }

/* ── KPI panel colour coding ─────────────────────────── */
.kpi-green { color: var(--ok); }
.kpi-amber { color: var(--warn); }
.kpi-red   { color: var(--err); }

/* ── SLA Tracker ──────────────────────────────────────── */
.sla-table th, .sla-table td { font-size:.85rem; }
.sla-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.78rem; font-weight:600; }
.sla-badge-green { background:#dcfce7; color:#166534; }
.sla-badge-amber { background:#fef3c7; color:#92400e; }
.sla-badge-red   { background:#fee2e2; color:#991b1b; }
.sla-rules-table { width:100%; margin-top:6px; }
.sla-rules-table th, .sla-rules-table td { padding:4px 8px; font-size:.82rem; border-bottom:1px solid var(--line); text-align:left; }

/* ── Certifications ──────────────────────────────────── */
.cert-table th, .cert-table td { font-size:.85rem; }
.cert-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.78rem; font-weight:600; }
.cert-badge-green   { background:#dcfce7; color:#166534; }
.cert-badge-amber   { background:#fef3c7; color:#92400e; }
/* Signed for at the gate, but not yet issued - the weights still have to be
   confirmed before the paperwork goes out. */
.cert-badge-blue    { background:#dbeafe; color:#1e40af; }
.cert-badge-red     { background:#fee2e2; color:#991b1b; }
.cert-badge-expired { background:#7f1d1d; color:#fff; }

/* Cert expiries on the main calendar */
.cal-cert-flag { font-size:.72rem; color:#b45309; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cert-panel { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:.85rem; }
.cal-cert-item { padding:3px 0; }

/* ── Data-Bearing Device Ledger ──────────────────────── */
.ledger-table th, .ledger-table td { font-size:.82rem; }
.ledger-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.ledger-badge-critical { background:#7f1d1d; color:#fff; }
.ledger-badge-warn     { background:#fef3c7; color:#92400e; }
.ledger-badge-pending  { background:#dbeafe; color:#1d4ed8; }
.ledger-badge-ok       { background:#dcfce7; color:#166534; }
.ledger-badge-none     { background:var(--bg); color:var(--muted); border:1px solid var(--line); }

/* ── eBay value per item ─────────────────────────────── */
.ebay-value-table th, .ebay-value-table td { font-size:.85rem; }
.ebay-value-table tr.ebay-month-current { background:#f0f9ff; }
.ebay-per-item { font-weight:700; font-size:.95rem; }

/* ── Mass balance ────────────────────────────────────── */
.mb-equation { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:16px 0; }
.mb-term { flex:1; min-width:130px; background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.mb-term .mb-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; }
.mb-term .mb-val { font-size:1.35rem; font-weight:800; color:#0f2a4a; }
.mb-term .mb-sub { font-size:.75rem; color:var(--muted); }
.mb-term.mb-in { border-left:4px solid #2563eb; }
.mb-term.mb-out { border-left:4px solid #d97706; }
.mb-term.mb-closing { border-left:4px solid #16a34a; background:#f0fdf4; }
.mb-op { display:flex; align-items:center; font-size:1.4rem; font-weight:700; color:var(--muted); }
.mb-table th, .mb-table td { font-size:.85rem; }
.mb-bar { height:7px; border-radius:4px; background:var(--bg); margin:2px 0; overflow:hidden; }
.mb-bar-in { height:100%; background:#2563eb; border-radius:4px; }
.mb-bar-out { height:100%; background:#d97706; border-radius:4px; }

/* ── Manifest reconciliation ─────────────────────────── */
.manifest-table th, .manifest-table td { font-size:.82rem; }
.manifest-table tr.manifest-missing td { background:#fef2f2; }
.manifest-table tr.manifest-extra td { background:#fffbeb; }
.manifest-mapping { margin:14px 0; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.manifest-mapping summary { cursor:pointer; font-weight:600; font-size:.9rem; }
.cert-badge-none { background:var(--bg); color:var(--muted); border:1px solid var(--line); }

/* ── Consignment notes ───────────────────────────────── */
.cn-table th, .cn-table td { font-size:.82rem; }
.cn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 14px; }
.cn-lines th, .cn-lines td { font-size:.8rem; padding:4px 6px; }
.cn-lines input, .cn-lines select { font-size:.8rem; padding:3px 5px; width:100%; }

/* ── Non-conformance register ────────────────────────── */
.ncr-table th, .ncr-table td { font-size:.82rem; }
.ncr-table tr.ncr-overdue td { background:#fef2f2; }
.ncr-sev { display:inline-block; padding:2px 9px; border-radius:12px; font-size:.75rem; font-weight:600; }
.ncr-sev-minor    { background:#e2e8f0; color:#334155; }
.ncr-sev-major    { background:#fef3c7; color:#92400e; }
.ncr-sev-critical { background:#fee2e2; color:#991b1b; }

/* Mega-menu: a wide grouped panel instead of one very long list. The Tools
   menu had grown past the bottom of the screen, so its items are split into
   labelled columns that all fit in view. Anchored right because these menus
   sit at the end of the bar and a left-anchored panel runs off-screen. */
.nav-dropdown-menu.mega {
    left: auto; right: 0;
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 4), minmax(168px, 1fr));
    gap: 0 4px;
    padding: 6px 10px 12px;
    min-width: 0;
    max-width: 94vw;
}
.nav-dropdown-menu.mega .mega-col { min-width: 0; }
.nav-dropdown-menu.mega h4 {
    position: relative; z-index: 1;
    margin: 12px 0 4px; padding: 0 10px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #94a3b8; white-space: nowrap;
}
/* Undo the single-column rounding; every item here is its own pill. */
.nav-dropdown-menu.mega a,
.nav-dropdown-menu.mega a:first-child,
.nav-dropdown-menu.mega a:last-child {
    margin: 0; padding: 6px 10px; border-radius: 5px; white-space: nowrap;
}
@media (max-width: 900px) {
    .nav-dropdown-menu.mega { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

/* ── Printer picker ─────────────────────────────────────────────────────
   Shown the first time a machine tries to print, and whenever the printer
   it had chosen has gone away. */
.rp-modal-back {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.rp-modal {
    background: var(--card, #fff);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    padding: 22px 24px;
    width: 100%; max-width: 440px;
    max-height: 85vh; overflow-y: auto;
}
.rp-modal h3 { margin: 0 0 6px; }
.rp-opt {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
    padding: 10px 12px; margin-top: 8px; cursor: pointer;
}
.rp-opt:hover { border-color: var(--brand, #2563eb); background: rgba(37, 99, 235, .04); }
.rp-opt input { margin-top: 3px; }
.rp-on  { color: #16a34a; }
.rp-off { color: #dc2626; }
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ── Runs on the month grid ─────────────────────────────────────────────
   A day is a sequence of van loads, not one load. The chips are the runs
   with their start times; the bar underneath is the fullest single run,
   because the van is emptied between them. */
.cal-runs { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0; }
.cal-run {
    font-size: 9px; font-weight: 700; line-height: 1;
    padding: 2px 4px; border-radius: 3px;
    background: #dbeafe; color: #1d4ed8;
}
.cal-run-busy { background: #fef3c7; color: #92400e; }
.cal-run-full { background: #ffedd5; color: #9a3412; }
.cal-run-over { background: #fee2e2; color: #991b1b; }
.cal-unplanned { font-size: 9px; font-weight: 700; color: #b45309; }
.cal-over { font-size: 9px; font-weight: 700; color: #b91c1c; margin-top: 1px; }
/* The bands are defined once now; cap-ok is the default green fill. */
.cal-cap-fill.cap-over { background: var(--err); }
/* Run chips in the dashboard diary. */
.cal-runs-line { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.cal-run-chip {
    font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
    background: #e0e7ff; color: #3730a3;
}
.cal-run-chip.unplanned { background: #fef3c7; color: #92400e; }
/* Carried on someone else's vehicle - shown, but never against our capacity. */
.cal-run-chip.other { background: #ede9fe; color: #5b21b6; }
.cal-others { color: #6d28d9; font-weight: 600; }
.cal-pct.cal-over { color: #dc2626; font-weight: 700; }
.dash-wrap.tv .cal-run-chip { background: #1e293b; color: #93c5fd; }
.dash-wrap.tv .cal-run-chip.unplanned { background: #422006; color: #fbbf24; }
.dash-wrap.tv .cal-run-chip.other { background: #2e1065; color: #c4b5fd; }
.dash-wrap.tv .cal-others { color: #c4b5fd; }

/* --- Extra drives inside one machine -------------------------------------
   A drive is subordinate to the machine above it, so it reads as an indented
   continuation rather than another asset in its own right. */
.itad-table tr.itad-drive > td { background: #f8fafc; }
.itad-table tr.itad-drive > td:first-child { padding-left: 18px; }
.itad-drive-tick { color: #94a3b8; font-weight: 400; }
.ia-drive-banner {
    margin: 6px 0 10px; padding: 7px 11px; font-size: 12.5px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; color: #1e3a8a;
}
.ia-drive-banner a { color: #1d4ed8; }

/* Filter box above a long <select>. */
.sel-filter {
    display: block; width: 100%; margin-bottom: 3px;
    padding: 4px 7px; font-size: 12px;
    border: 1px solid var(--line, #cbd5e1); border-radius: 5px;
}
.sel-filter:focus { outline: 2px solid #93c5fd; outline-offset: -1px; }

/* Customer portal: how far a collection has got (views/portal.php). */
.portal-steps { display: flex; gap: 3px; margin-top: 5px; }
.portal-steps span { width: 14px; height: 5px; border-radius: 3px; background: #e5e7eb; }
.portal-steps span.on { background: #0d9488; }
.portal-jobs td { vertical-align: top; }

/* Model index: the line under Make / Model on the asset form (app.js indexHint). */
.ia-index-hint { margin: -2px 0 8px; color: var(--muted, #6b7280); line-height: 1.45; }
.ia-index-hint[hidden] { display: none; }
.ia-index-hint.ia-index-warn { color: #b45309; font-weight: 600; }

/* Model index review page (views/model_index.php). */
.mi-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.mi-stat { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff); color: inherit; text-decoration: none; font-size: 13px; }
.mi-stat strong { font-size: 16px; }
.mi-stat-hot { border-color: #f59e0b; background: #fffbeb; }
.mi-stat-form { padding: 4px 8px; }
.mi-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border, #e5e7eb); margin: 10px 0 12px; align-items: flex-end; }
.mi-tabs a { padding: 7px 14px; border-radius: 6px 6px 0 0; text-decoration: none; color: inherit; }
.mi-tabs a.active { background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-bottom-color: var(--card, #fff); margin-bottom: -1px; font-weight: 600; }
.mi-filter, .mi-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.mi-table td { vertical-align: top; font-size: 13px; }
.mi-table .mi-ai { max-width: 340px; }
.mi-status-rejected td, .mi-status-merged td { opacity: .65; }
.mi-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mi-ok { background: #dcfce7; color: #166534; }
.mi-warn { background: #fef3c7; color: #92400e; }
.mi-bad { background: #fee2e2; color: #991b1b; }
.mi-grey { background: #f3f4f6; color: #4b5563; }
.mi-inline { display: inline; margin: 0; }
.mi-link { background: none; border: 0; padding: 0; color: var(--link, #2563eb); cursor: pointer; font-size: 12px; text-align: left; }
.mi-link:hover { text-decoration: underline; }
.mi-warn-text { color: #b45309; }
.mi-src { margin-right: 6px; }
.mi-actions { white-space: nowrap; }
.mi-edit { display: inline-block; }
.mi-edit[open] > form { position: absolute; z-index: 20; right: 24px; width: 380px; padding: 12px; background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); white-space: normal; }
.mi-edit form label { display: block; margin-bottom: 8px; }
.mi-edit form input[type=text], .mi-edit form input[type=number] { width: 100%; }
.mi-edit fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.mi-check { display: inline-flex !important; gap: 4px; align-items: center; margin-right: 10px; font-weight: normal; }
.mi-keyform { display: flex; gap: 4px; margin-top: 4px; }
.mi-keyform input { width: 12em; }
.mi-pages { display: flex; gap: 8px; flex-wrap: wrap; }

/* Job number field with its Generate button alongside. */
.jf-number-row { display: flex; gap: 6px; align-items: stretch; }
.jf-number-row .jf-number { flex: 1; }
.jf-number-row .jf-gen-number { white-space: nowrap; margin-top: 4px; padding: 9px 12px; }
.jf-number-row .jf-gen-number[hidden] { display: none; }
/* Pointed at after a save, when the job still needs its number. */
.jf-gen-number.jf-attention { animation: jfAttention 1.1s ease-in-out 4;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
@keyframes jfAttention { 0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
                         50% { box-shadow: 0 0 0 7px rgba(37, 99, 235, .12); } }

/* Save job: saving, then held until the form changes (app.js bindForm).
   The asset Save buttons use the same spinner while saving (saveWithFeedback). */
.jf-save.jf-saving, .jf-save.jf-saved, .btn.ia-saving { opacity: 1; cursor: progress; }
.jf-save.jf-saved { background: #16a34a; border-color: #16a34a; color: #fff; cursor: default; }
/* In the button's own text colour, so it shows on a blue button and a white one. */
.jf-spinner { display: inline-block; width: .9em; height: .9em; vertical-align: -.12em;
    margin-right: .35em; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: jfSpin .8s linear infinite; }
@keyframes jfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .jf-spinner { animation-duration: 2.4s; }
    .jf-gen-number.jf-attention { animation: none; }
}

/* --- Timesheets ---------------------------------------------------------- */
.ts-head { display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; }
.ts-head h1 { margin: 0; }
.ts-weeknav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-person { margin-bottom: 26px; }
.ts-person:last-child { margin-bottom: 0; }
.ts-person-head { display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; flex-wrap: wrap; border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.ts-person-head h3 { margin: 0; text-transform: none; letter-spacing: 0;
    font-size: 16px; color: var(--ink); }
.ts-person-head h3 .muted { font-weight: 400; margin-left: 8px; }
.ts-week-total { display: flex; align-items: baseline; gap: 8px; }
.ts-week-total strong { font-size: 18px; }
.ts-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ts-table th { text-align: left; font-size: 11px; text-transform: uppercase;
    color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ts-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ts-table td.ts-day { font-weight: 600; white-space: nowrap; }
.ts-table tr.ts-today td { background: #f0fdf4; }
.ts-table tr.ts-future td { opacity: .5; }
.ts-actions { text-align: right; white-space: nowrap; }
.btn-sm { padding: 2px 8px; font-size: 12px; border-radius: 5px;
    border: 1px solid var(--line); background: #fff; cursor: pointer; }
.btn-sm:hover { background: #f1f5f9; }
.btn-sm.danger { color: var(--err); border-color: #fecaca; }
.ts-approve { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-grand { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--line); font-size: 15px; }

/* Timesheets: board, month picker, holidays. */
.ts-clock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ts-inline label { margin: 0; }
.ts-brk input { width: 70px; margin-top: 0; padding: 5px 7px; }
.ts-onsite { color: #16a34a; font-weight: 600; }
.ts-board { width: 100%; border-collapse: collapse; }
.ts-board th { text-align: left; font-size: 11px; text-transform: uppercase;
    color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ts-board td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ts-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.ts-chip { display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--ink); font-size: 13px; text-decoration: none; }
.ts-chip:hover { background: #f1f5f9; text-decoration: none; }
.ts-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ts-chip-tag { font-size: 10px; opacity: .75; }
.ts-month-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; }
.ts-month-total strong { font-size: 20px; }
.ts-payday { margin-left: auto; font-size: 12.5px; color: #7c3aed; font-weight: 600; }
.ts-table tr.ts-nonwork td { background: #fafbfc; color: var(--muted); }
.ts-away { font-size: 11px; color: #7c3aed; margin-left: 5px; cursor: help; }

/* --- Company closures ----------------------------------------------------- */
.cal-day.cal-closed { background: #fef2f2; }
.cal-day.cal-closed-wfh { background: #fffbeb; }
.cal-closure { font-size: 10px; font-weight: 700; line-height: 1.2; margin: 2px 0;
    padding: 2px 4px; border-radius: 4px; background: #dc2626; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.cal-closed-wfh .cal-closure { background: #d97706; }
.cal-closure-strip { font-size: 11px; font-weight: 700; margin: 3px 0;
    padding: 3px 7px; border-radius: 5px; background: #dc2626; color: #fff; }
.cal-closure-strip.wfh { background: #d97706; }
.ts-closed-banner { margin: 0 0 12px; padding: 9px 13px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13.5px; }
.ts-closed-banner.wfh { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.jf-closure-warn { margin: 8px 0 12px; padding: 9px 13px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px; }
.jf-closure-warn[hidden] { display: none; }
.alert.error { padding: 11px 14px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.req { color: #dc2626; }
.cal-day.cal-closed-bank_holiday { background: #ecfeff; }
.cal-closed-bank_holiday .cal-closure { background: #0891b2; }
.cal-closure-strip.bh { background: #0891b2; }
.ts-closed-banner.bank_holiday { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }

/* --- Asset form: grouped sections ----------------------------------------- */
.ia-group { border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px 4px; margin: 4px 0 12px; }
.ia-group > legend { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 0 6px; font-weight: 700; }
.ia-spec-offer { margin-bottom: 8px; display: flex; align-items: center;
    gap: 6px; flex-wrap: wrap; }
.ia-spec-offer[hidden] { display: none; }
.ia-spec-offer .btn-sm { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ia-spec-offer .btn-sm:hover { background: #dbeafe; }

/* Date shortcut on the job form. */
.jf-next-day { margin-top: 5px; display: inline-block; padding: 3px 10px;
    font-size: 12px; border-radius: 6px; border: 1px solid #bfdbfe;
    background: #eff6ff; color: #1e40af; cursor: pointer; }
.jf-next-day:hover { background: #dbeafe; }
.ts-table .ts-running { font-variant-numeric: tabular-nums; color: var(--muted);
    white-space: nowrap; }
.ts-table tr:last-child .ts-running { font-weight: 700; color: var(--ink); }
.ts-auto { font-size: 9px; font-weight: 700; text-transform: uppercase;
    background: #fef3c7; color: #92400e; padding: 1px 4px; border-radius: 3px;
    margin-left: 4px; cursor: help; vertical-align: middle; }

/* An issued consignment note, frozen because the consignee holds a copy. */
.cn-locked { border: 1px solid #f59e0b; background: #fffbeb; border-radius: 6px;
             padding: 10px 14px; margin-bottom: 14px; }
.cn-locked p { margin: 0 0 8px; font-size: 13px; color: #7c2d12; }
.cn-unlock { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cn-unlock label { flex: 1 1 340px; margin: 0; }
.cn-unlock input[type="text"] { width: 100%; }
.cn-grid [readonly], .cn-lines [readonly] { background: #f1f5f9; color: #475569; cursor: not-allowed; }

/* Attaching the countersigned copy straight from the consignment register. */
.cn-upload { cursor: pointer; display: inline-block; }
.cn-signed { background: #dcfce7; border-color: #86efac; text-decoration: none; }

/* A photograph kept whole because the sheet could not be found in it. */
.ds-check { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* Dragging the corners of a photographed sheet onto A4. */
.crop-stage { position: relative; display: inline-block; max-width: 100%;
              background: #0f172a; border-radius: 6px; overflow: hidden;
              touch-action: none; }
.crop-stage img { display: block; max-width: 100%; height: auto; user-select: none;
                  -webkit-user-drag: none; }
.crop-stage svg { position: absolute; inset: 0; }
.crop-poly { fill: rgba(59,130,246,0.16); stroke: #3b82f6; stroke-width: 2.5;
             stroke-dasharray: 7 5; }
.crop-handle { fill: #fff; stroke: #2563eb; stroke-width: 3.5; cursor: grab; }
.crop-handle.is-held { fill: #bfdbfe; cursor: grabbing; }

/* A signed copy whose sheet could not be found: worth a look before printing. */
.cn-needscrop { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* Proof a load was received: the customer signed on the driver's phone, or the
   countersigned paper came back. A note cannot be completed without one, so the
   register says which it has rather than leaving somebody to be refused. */
.cn-proof { margin-left: 6px; font-size: 12px; white-space: nowrap; cursor: help; }
.cn-proof-none { color: #b45309; background: #fffbeb; border: 1px solid #fcd34d;
                 border-radius: 4px; padding: 1px 5px; font-size: 11px; }

/* The row just dealt with, after closing the QR and reloading. Fades out on
   its own - a permanent highlight would still be there tomorrow. */
.cn-justdone > td { background: #dbeafe !important; transition: background 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .cn-justdone > td { transition: none; } }

/* Merging several collections into one set of paperwork. */
.mg-list { max-height: 46vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; }
.mg-row { display: flex; gap: 10px; align-items: center; padding: 7px 10px;
          border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.mg-row:last-child { border-bottom: none; }
.mg-row:hover { background: #f8fafc; }
.mg-num { font-weight: 600; min-width: 96px; }
.mg-date { color: #64748b; min-width: 92px; }
.mg-site { flex: 1; color: #334155; }
.mg-kg { font-weight: 600; min-width: 78px; text-align: right; }
.mg-meta { color: #94a3b8; min-width: 150px; font-size: 12px; }
.mg-preview { margin-top: 12px; padding: 10px 12px; background: #eff6ff;
              border: 1px solid #bfdbfe; border-radius: 6px; font-size: 13px; }
.mg-warn { color: #92400e; }
.mg-err { color: #991b1b; }

/* Booking-in: the same serial already logged on this job. A warning, never a
   block - two identical units really can arrive with the same blank serial,
   and refusing outright would only teach people to type a fake one. */
.ia-dup-warn { display: block; margin-top: 4px; font-size: 12px; font-weight: 600;
               color: #c2410c; background: #fff7ed; border: 1px solid #fdba74;
               border-radius: 4px; padding: 4px 6px; }

/* The "what is in it now" row, set apart from the as-received boxes above it
   so the two are not read as one long line of fields. */
.ia-now-row { border-left: 3px solid #e2e8f0; padding-left: 10px; margin-top: 6px; }
.ia-now-row .ia-tick { display: flex; align-items: center; gap: 6px; font-size: 13px;
                       white-space: nowrap; }
.ia-now-row .ia-tick input { width: auto; margin: 0; }

/* ---------------------------------------------------------------------------
   Releasing a certificate.

   A Certificate of Destruction is signed for rather than merely printed, so
   the dialog that asks for the PIN sits over everything and takes the focus -
   it is a deliberate act at the end of a job, not another button press.
   --------------------------------------------------------------------------- */
.rel-back {
    position: fixed; inset: 0; z-index: 4000; display: flex;
    align-items: center; justify-content: center;
    background: rgba(15, 42, 74, .45);
}
.rel-box {
    background: #fff; border-radius: 10px; padding: 18px 20px;
    width: min(420px, calc(100vw - 32px));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.rel-box h3 { font-size: 16px; }