/* Light theme: white cards on a pale blue-grey ground, blue accents. */
:root {
  --bg: #f4f6fb; --card: #fff; --text: #111827; --muted: #5b6475; --border: #e3e8f0;
  --accent: #1662e8; --accent-soft: #e8f0fe; --pass: #15803d; --fail: #c62828; --warn: #b45309; --skip: #9aa0a6; --code: #f1f4f9;
  --low: #fff4e5; --hover: #f2f6fd; --side-w: 236px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--fail); white-space: pre-wrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- app shell: sidebar + top bar (fleet.html) ---- */
.sr { position: absolute; left: -9999px; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); display: flex; flex-direction: column; gap: 8px; padding: 14px 12px;
  background: var(--card); border-right: 1px solid var(--border); overflow-y: auto; z-index: 20; }
.brand a { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; padding: 4px 8px 10px; }
.brand svg { color: var(--accent); flex: none; }
.brand span { color: var(--accent); }
.brand b { color: var(--text); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 8px; color: #273041; text-decoration: none; font-weight: 500; }
.side nav a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side nav a:hover { background: var(--hover); }
.side nav a.active { background: var(--accent); color: #fff; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fail); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.nav-count[hidden] { display: none; }
/* the logged-in user, alerts bell, change password and log out sit right under the sidebar menu */
.side-user { margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--border); }
.side-user .who { flex-direction: column; align-items: stretch; gap: 4px; }
.side-user .who-id, .side-user .who-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.side-user .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who-acts { flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 4px; font-size: 13px; }
body.app-shell .bell-panel { top: auto; right: auto; bottom: 16px; left: calc(var(--side-w) + 12px); }
.side-foot { margin-top: auto; padding: 4px 12px 8px; font-size: 12px; color: var(--muted); }
.main-col { margin-left: var(--side-w); min-width: 0; }
/* the top bar only carries the menu button on small screens */
header.top { display: none; align-items: center; gap: 12px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10; }
.menu-btn { display: none; border: 0; background: none; padding: 8px; min-width: 44px; min-height: 44px; color: var(--text); }
.side-scrim { position: fixed; inset: 0; background: rgb(15 23 42 / .35); z-index: 15; }
@media (max-width: 900px) {
  .side { transform: translateX(-100%); transition: transform .2s ease; }
  body.side-open .side { transform: none; box-shadow: 0 10px 40px rgb(0 0 0 / .2); }
  .main-col { margin-left: 0; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  header.top { display: flex; }
  body.app-shell .bell-panel { left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
.who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.who-name { font-weight: 600; }

/* ---- login (login.html) and the change-password dialog (session.js) ---- */
body.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-box { width: min(360px, calc(100vw - 32px)); padding: 0; }
.login-box h1 { justify-content: center; margin-bottom: 14px; }
.login-box h1 span { color: var(--accent); }
.login-box form.card, .pw-form { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px; }
.login-box label, .pw-form label { font-size: 12px; color: var(--muted); }
.pw-form label { display: flex; flex-direction: column; gap: 3px; }
.login-box input { width: 100%; margin-bottom: 4px; }
.login-box button { margin-top: 6px; }
.login-box .err:empty, .pw-form .err:empty { display: none; }
#pw-dlg { width: min(380px, calc(100vw - 32px)); }

/* ---- layout ---- */
main { padding: 20px 24px 40px; }
h1 { font-size: 24px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
section.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; min-width: 0; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
section.card + section.card { margin-top: 16px; }
.grid > section.card + section.card { margin-top: 0; }
.wide { grid-column: 1 / -1; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.spacer { flex: 1; }

/* ---- controls ---- */
button, .btn { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; }
button:hover, .btn:hover { background: var(--hover); }
button.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--fail); }
button.link { border: 0; background: none; padding: 0 4px; color: var(--accent); }
button:disabled { opacity: .5; cursor: wait; }
select, input, textarea { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); max-width: 100%; }
textarea { min-height: 64px; width: 100%; }
input[type=search] { min-width: 220px; }

/* ---- tiles ---- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.tile .k { color: var(--muted); font-size: 12px; }
.tile .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--muted); font-size: 12px; }
a.tile { color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--accent); }

/* ---- tables ---- */
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: top; }
td.wrap { white-space: normal; min-width: 180px; }
th { color: var(--muted); font-weight: 500; user-select: none; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
th .arrow { font-size: 10px; margin-left: 3px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--hover); }
tr.low td { background: var(--low); }
tfoot td { font-weight: 600; border-bottom: 0; }

/* ---- badges & lights ---- */
.badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--code); color: var(--muted); font-weight: 500; white-space: nowrap; }
.badge.green, .badge.completed, .badge.active { background: color-mix(in srgb, var(--pass) 16%, transparent); color: var(--pass); }
.badge.red, .badge.urgent, .badge.out_of_service { background: color-mix(in srgb, var(--fail) 16%, transparent); color: var(--fail); }
.badge.yellow, .badge.in_progress, .badge.high { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge.pending { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge.test { background: transparent; border: 1px dashed var(--muted); color: var(--muted); letter-spacing: .04em; }
.badge.warranty { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #3b82f6; }
.light { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--skip); vertical-align: -1px; }
.light.green { background: var(--pass); }
.light.yellow { background: var(--warn); }
.light.red { background: var(--fail); }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 6px 12px; }
.tabs button.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ---- dialog ---- */
dialog { border: 1px solid var(--border); border-radius: 12px; padding: 0; background: var(--card); color: var(--text);
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form { padding: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; margin-bottom: 8px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.field label .req { color: var(--fail); }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; }
.field .help { font-size: 11px; color: var(--muted); }
.field.check label { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; margin-top: 20px; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 10px; max-height: 240px; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.checklist label { display: flex; gap: 6px; align-items: center; color: var(--text); font-size: 13px; margin: 0; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#dlg-error:empty { display: none; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
  padding: 8px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; }
#toast.error { background: var(--fail); color: #fff; }

/* ---- tires (M16): top-down axle drawing ---- */
.tread { font-weight: 600; }
.tread.yellow { color: var(--warn); }
.tread.red { color: var(--fail); }
.layout-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.layout-pick button { text-align: left; padding: 12px; }
/* A tyre seen from above: dark rubber with a directional tread; the ring shows the tread status. */
.tyre { display: block; position: relative; width: 36px; height: 60px; margin-bottom: 4px; border-radius: 9px; overflow: hidden; flex: none;
  background: #2b2e33; box-shadow: inset 4px 0 0 #1b1d21, inset -4px 0 0 #1b1d21, 0 0 0 2px var(--card), 0 0 0 4px var(--border); }
.tyre::before, .tyre::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; }
.tyre::before { left: 0; border-right: 1px solid #16181b;
  background: repeating-linear-gradient(-35deg, transparent 0 5px, #17191c 5px 8px); }
.tyre::after { right: 0; border-left: 1px solid #16181b;
  background: repeating-linear-gradient(35deg, transparent 0 5px, #17191c 5px 8px); }

/* ---- photos and documents (M15) ---- */
.dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 2px dashed var(--border); border-radius: 10px; margin-bottom: 10px; }
.dropzone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dropzone .err:empty { display: none; }
.dropzone .err { flex-basis: 100%; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.file-card { display: flex; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--card); min-width: 0; }
.file-card.main { border-color: var(--pass); }
.file-thumb { flex: 0 0 72px; height: 72px; display: grid; place-items: center; border-radius: 6px; background: var(--code); overflow: hidden; text-decoration: none; color: var(--muted); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-icon { font-size: 12px; text-align: center; line-height: 1.3; }
.file-meta { min-width: 0; }
.file-meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.thumb-sm { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; display: block; }
img.head-photo { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.vehicle-head { display: flex; gap: 12px; align-items: center; }

/* ---- inspections: phone-friendly checklist ---- */
.insp { max-width: 720px; }
.insp-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.insp-head label { display: block; font-size: 12px; color: var(--muted); }
.insp-head input, .insp-head select, .insp-head textarea { width: 100%; }
.insp-forms { display: grid; gap: 8px; }
.insp-forms button { text-align: left; padding: 12px 14px; font-size: 15px; }
.insp-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 10px; background: var(--card); }
.insp-item.failed { border-color: var(--fail); }
.insp-item .q { font-weight: 600; font-size: 15px; }
.insp-item .q .req { color: var(--fail); }
.insp-item .hint { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.pf { display: flex; gap: 8px; margin: 8px 0 4px; }
.pf button { flex: 1; padding: 12px; font-size: 16px; font-weight: 600; }
.pf button.on.pass { background: var(--pass); border-color: var(--pass); color: #fff; }
.pf button.on.fail { background: var(--fail); border-color: var(--fail); color: #fff; }
.insp-item input[type=number], .insp-item textarea { width: 100%; font-size: 16px; }
.insp-item .verdict { font-size: 12px; margin-top: 4px; }
.thumb { display: inline-block; margin: 6px 6px 0 0; vertical-align: top; }
.thumb img { max-width: 160px; max-height: 120px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.insp-submit { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.insp-submit button.primary { padding: 12px 22px; font-size: 16px; }

@media (max-width: 640px) {
  header.top { position: static; }
  input[type=search] { min-width: 0; width: 100%; }
  main { padding: 14px 12px 40px; }
}

/* ---- trips from GPS (M18): route drawing and speed chart ---- */
svg.route, svg.speed { width: 100%; height: auto; display: block; background: var(--hover); border: 1px solid var(--border); border-radius: 8px; }
svg.speed { margin-top: 4px; }
.r-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.r-fast { fill: none; stroke: var(--fail); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.r-start { fill: var(--pass); stroke: var(--card); stroke-width: 2; }
.r-end { fill: var(--text); stroke: var(--card); stroke-width: 2; }
.r-note, .s-lbl { fill: var(--muted); font-size: 11px; }
.s-axis { stroke: var(--border); }
.s-limit { stroke: var(--fail); stroke-dasharray: 5 4; }
.s-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.dot.start { background: var(--pass); } .dot.end { background: var(--text); } .dot.fast { background: var(--fail); border-radius: 2px; }

/* ---- Tyre Management screen (tire-arrange.js): blue-and-white, inventory | vehicle | selected tyre ---- */
.tm { --tm-blue: #1d6fe8; --tm-blue-soft: #e8f1fe; --tm-green: #16a34a; --tm-green-soft: #e6f6ec; --tm-red: #dc2626; --tm-red-soft: #fdeaea;
  --tm-orange: #f59e0b; --tm-panel: var(--card); --tm-line: var(--border); --tm-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 4px 16px rgb(16 24 40 / .06); }
.tm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-content: space-between; margin-bottom: 10px; }
.tm-head h2 { margin: 0; font-size: 22px; }
.tm-head h2 .muted { font-size: 15px; font-weight: 500; }
.tm-tabs { display: flex; flex-wrap: wrap; gap: 2px; background: color-mix(in srgb, var(--tm-line) 55%, transparent); padding: 3px; border-radius: 10px; width: fit-content; max-width: 100%; margin-bottom: 14px; }
.tm-tabs button { border: 0; background: transparent; padding: 9px 22px; border-radius: 8px; font-weight: 500; }
.tm-tabs button.on { background: var(--tm-blue); color: #fff; box-shadow: 0 2px 8px rgb(29 111 232 / .35); }
.tm-tabs button:not(.on):hover { background: var(--tm-panel); }
.tm-body { display: grid; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(270px, 320px); gap: 14px; align-items: start; }
@media (max-width: 1180px) {
  .tm-body { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .tm-side { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
}
@media (max-width: 760px) { .tm-body { grid-template-columns: 1fr; } .tm-tabs button { padding: 8px 12px; } }
.tm-panel { background: var(--tm-panel); border: 1px solid var(--tm-line); border-radius: 14px; padding: 16px; box-shadow: var(--tm-shadow); min-width: 0; }
.tm-panel h3, .tm-card h3, .tm-how h3 { margin: 0 0 12px; font-size: 17px; }
.tm-count { font-size: 12px; background: var(--tm-blue-soft); color: var(--tm-blue); border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.tm-inv.drop-ok { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-red) 45%, transparent), var(--tm-shadow); }
.tm-inv.drop-over.drop-ok { box-shadow: 0 0 0 3px var(--tm-red), var(--tm-shadow); background: color-mix(in srgb, var(--tm-red) 4%, var(--tm-panel)); }
.tm-inv.drop-bad, .tm-bin.drop-bad { opacity: 1; }
.tm-search { display: flex; align-items: center; border: 1px solid var(--tm-line); border-radius: 10px; padding: 0 10px; background: var(--bg); margin-bottom: 10px; }
.tm-search input { border: 0; background: transparent; flex: 1; padding: 9px 2px; outline: none; font: inherit; color: inherit; min-width: 0; }
.tm-search span { color: var(--muted); font-size: 18px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tm-chip { border: 1px solid var(--tm-line); background: var(--bg); border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.tm-chip.on { background: var(--tm-blue); border-color: var(--tm-blue); color: #fff; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 560px; overflow: auto; padding: 3px; }
.tm-tcard { display: flex; gap: 8px; align-items: center; border: 1px solid var(--tm-line); border-radius: 12px; padding: 9px 8px; background: var(--tm-panel);
  cursor: grab; touch-action: none; user-select: none; transition: box-shadow .15s, border-color .15s; }
.tm-tcard[hidden] { display: none; }
.tm-tcard:hover { border-color: color-mix(in srgb, var(--tm-blue) 50%, var(--tm-line)); box-shadow: 0 4px 12px rgb(29 111 232 / .12); }
.tm-tcard.tm-selected { border-color: var(--tm-blue); box-shadow: 0 0 0 2px var(--tm-blue); background: var(--tm-blue-soft); }
.tm-tcard.lifted { opacity: .35; }
.tm-tcard.off { cursor: not-allowed; opacity: .75; }
.tm-tcard.off .tyre-side { filter: grayscale(1) opacity(.6); }
.tm-tcard:focus-visible { outline: 3px solid var(--tm-blue); outline-offset: 2px; }
.tm-timg { flex: none; }
.tm-tinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.tm-tinfo b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-tinfo .tm-pill { margin-top: 4px; align-self: flex-start; }
.tm-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tm-pill.green { background: var(--tm-green-soft); color: var(--tm-green); }
.tm-pill.blue { background: var(--tm-blue-soft); color: var(--tm-blue); }
.tm-pill.red { background: var(--tm-red-soft); color: var(--tm-red); }
.tm-bins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--tm-line); }
.tm-bin { border: 2px dashed var(--tm-line); border-radius: 8px; padding: 6px 10px; font-size: 12px; background: var(--bg); }
.tm-bin.danger { color: var(--tm-red); }
.tm-bin.drop-ok { border-color: var(--tm-red); }
.tm-bin.drop-over.drop-ok { background: var(--tm-red-soft); }

/* the vehicle, seen from above, with its real wheel layout */
.tm-vehicle { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--tm-blue) 4%, var(--tm-panel)), var(--tm-panel)); }
.tm-truck { max-width: 640px; margin: 0 auto; }
.tm-front { text-align: center; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.tm-cab { display: flex; justify-content: center; margin: 2px 0 -6px; position: relative; z-index: 1; }
.tm-cab-svg { width: 200px; height: auto; filter: drop-shadow(0 4px 8px rgb(16 24 40 / .15)); }
.tm-chassis { position: relative; padding-bottom: 6px; }
.tm-rails { position: absolute; left: 50%; top: 0; bottom: 8px; width: 92px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, transparent 8px, #7b8591 8px 19px, transparent 19px 73px, #7b8591 73px 84px, transparent 84px),
              repeating-linear-gradient(180deg, transparent 0 40px, #9aa3ad 40px 46px); }
.tm-axle { position: relative; display: grid; grid-template-columns: minmax(64px, 1fr) auto 150px auto minmax(64px, 1fr); align-items: center; gap: 0 6px; padding: 12px 0; }
.tm-beam { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 100px; }
.tm-beam::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 10px; transform: translateY(-50%); border-radius: 5px;
  background: linear-gradient(180deg, #a9b1bb, #6f7883); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.tm-beam .tm-wheel { position: relative; z-index: 1; }
.tm-axname { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; background: var(--tm-panel); padding: 0 4px; border-radius: 4px; }
.tm-wh { display: flex; gap: 5px; position: relative; z-index: 1; }
.tm-gap { position: relative; height: 96px; display: flex; justify-content: center; align-items: center; }
.tm-tank { width: 72px; height: 52px; border-radius: 10px; background: linear-gradient(90deg, #c9cfd6, #eef1f4 45%, #b6bdc6); border: 1px solid #a8b0ba; position: relative; z-index: 1; }
.tm-lbl { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; min-width: 0; }
.tm-lbl.l { align-items: flex-end; text-align: right; padding-right: 4px; }
.tm-lbl.r { align-items: flex-start; padding-left: 4px; }
.tm-lbl b { font-size: 14px; }
.tm-lbl .steer { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.tm-wheel { border-radius: 12px; padding: 4px; transition: box-shadow .15s, background .15s; outline-offset: 2px; }
.tm-wheel .tok { display: block; cursor: grab; touch-action: none; user-select: none; border-radius: 10px; }
.tm-wheel .tok:focus-visible { outline: 3px solid var(--tm-blue); }
.tm-wheel .tyre { width: 46px; height: 88px; margin: 0; border-radius: 11px; }
.tm-wheel .tyre.slot { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--muted) 45%, transparent); }
.tm-wheel .tyre.slot::before, .tm-wheel .tyre.slot::after { display: none; }
.tm-wheel.on.green .tyre { box-shadow: inset 4px 0 0 #1b1d21, inset -4px 0 0 #1b1d21, 0 0 0 2px var(--tm-panel), 0 0 0 4px var(--pass); }
.tm-wheel.on.yellow .tyre { box-shadow: inset 4px 0 0 #1b1d21, inset -4px 0 0 #1b1d21, 0 0 0 2px var(--tm-panel), 0 0 0 4px var(--warn); }
.tm-wheel.on.red .tyre { box-shadow: inset 4px 0 0 #1b1d21, inset -4px 0 0 #1b1d21, 0 0 0 2px var(--tm-panel), 0 0 0 4px var(--fail); }
.tm-wheel.mismatch { background: color-mix(in srgb, var(--fail) 10%, transparent); }
.tm-wheel .tok.tm-selected .tyre { outline: 3px solid var(--tm-blue); outline-offset: 4px; }
.tm-wheel .tok.lifted { opacity: .25; }
.tm-wheel.drop-ok { background: color-mix(in srgb, var(--tm-green) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-green) 60%, transparent); }
.tm-wheel.drop-ok .tyre.slot { border-color: var(--tm-green); }
.tm-wheel.drop-bad { opacity: .45; }
.tm-wheel.drop-over.drop-ok { background: color-mix(in srgb, var(--tm-green) 26%, transparent); box-shadow: 0 0 0 3px var(--tm-green), 0 0 18px color-mix(in srgb, var(--tm-green) 55%, transparent); }
.tm-wheel.drop-over.drop-bad { opacity: 1; background: color-mix(in srgb, var(--tm-red) 14%, transparent); box-shadow: 0 0 0 3px var(--tm-red); }
.tm-wheel.tm-chosen { background: color-mix(in srgb, var(--tm-blue) 18%, transparent); box-shadow: 0 0 0 3px var(--tm-blue); }
.tm-wheel.tm-chosen .tyre.slot { border-color: var(--tm-blue); border-style: solid; }
.tm-spare { display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px dashed var(--tm-line); margin-top: 6px; padding-top: 10px; }
.tm-spare .tm-wheel .tyre { transform: rotate(90deg); margin: -21px 21px; }
.tm-legend { text-align: center; margin: 10px 0 0; }
@media (max-width: 520px) {
  .tm-axle { grid-template-columns: minmax(0, 1fr) auto 64px auto minmax(0, 1fr); }
  .tm-wheel .tyre { width: 30px; height: 58px; }
  .tm-lbl b { font-size: 12px; }
  .tm-lbl { font-size: 11px; }
}

/* right column */
.tm-side { display: flex; flex-direction: column; gap: 12px; }
.tm-card { background: var(--tm-panel); border: 1px solid var(--tm-line); border-radius: 14px; padding: 16px; box-shadow: var(--tm-shadow); }
.tm-selbody { display: flex; gap: 14px; align-items: flex-start; }
.tm-selimg { flex: none; background: var(--bg); border-radius: 12px; padding: 6px; }
.tm-kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; font-size: 13px; }
.tm-kv dt { white-space: nowrap; }
.tm-kv dt { color: var(--muted); }
.tm-kv dd { margin: 0; font-weight: 500; }
.tm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-btns button { padding: 11px; border-radius: 10px; font-size: 15px; }
.tm-primary { background: var(--tm-blue); border-color: var(--tm-blue); color: #fff; font-weight: 600; }
.tm-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--tm-blue) 85%, #000); }
.tm-primary:disabled { background: color-mix(in srgb, var(--tm-blue) 35%, var(--tm-panel)); border-color: transparent; color: #fff; }
.tm-qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tm-qa button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; text-align: center; background: var(--tm-panel); }
.tm-qa button:hover:not(:disabled) { border-color: var(--tm-blue); box-shadow: 0 4px 12px rgb(29 111 232 / .12); }
.tm-qa button:disabled { opacity: .45; }
.tm-qa small { color: var(--muted); font-size: 11px; line-height: 1.25; }
.tm-qa button.drop-ok { border-color: var(--tm-blue); }
.tm-qa button.drop-over.drop-ok { background: var(--tm-blue-soft); box-shadow: 0 0 0 3px var(--tm-blue); }
.tm-qa button.drop-bad { opacity: .45; }
.tm-qa button.drop-over.drop-bad { opacity: 1; box-shadow: 0 0 0 3px var(--tm-red); }
.tm-qi { font-size: 24px; line-height: 1.1; }
.tm-qi.blue { color: var(--tm-blue); }
.tm-qi.red { color: var(--tm-red); }
.tm-qsvg { display: block; width: 1em; height: 1em; }

/* how it works */
.tm-how { margin-top: 16px; }
.tm-how h3 { color: var(--tm-blue); }
.tm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tm-step { display: flex; gap: 10px; align-items: center; background: var(--tm-panel); border: 1px solid var(--tm-line); border-radius: 14px; padding: 14px; box-shadow: var(--tm-shadow); }
.tm-step i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tm-blue); color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.tm-step b { display: block; margin-bottom: 2px; }
.tm-step span { font-size: 12px; color: var(--muted); }
.tm-art { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.tm-art .tyre.mini { width: 16px; height: 30px; margin: 0; }
.tm-art .tyre.mini.flipped { transform: scaleX(-1); }
.tm-slot { width: 22px; height: 34px; border: 2px dashed var(--tm-line); border-radius: 6px; }
.tm-slot.ok { border-color: var(--tm-green); background: var(--tm-green-soft); }
.tm-arrow { font-size: 18px; font-weight: 700; }
.tm-arrow.green { color: var(--tm-green); }
.tm-arrow.red { color: var(--tm-red); }
.tm-arrow.orange { color: var(--tm-orange); }
.tm-arrow.blue { color: var(--tm-blue); }

/* dragging */
.tok.ghost { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; display: block; }
.tok.ghost .tyre { width: 46px; height: 88px; margin: 0; transform: rotate(-6deg) scale(1.08); box-shadow: 0 14px 24px rgb(0 0 0 / .35), 0 0 0 3px #1d6fe8; }
.drag-hint { position: fixed; z-index: 1001; pointer-events: none; max-width: 300px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.drag-hint.ok { border-color: #16a34a; color: #16a34a; }
.drag-hint.bad { border-color: var(--fail); color: var(--fail); }
.undo-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; gap: 14px; align-items: center;
  background: #10233f; color: #fff; padding: 11px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgb(0 0 0 / .25); font-size: 14px; }
.undo-bar .link { color: #7fb2ff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tok.ghost .tyre { transform: none; } .tm-tcard { transition: none; } }

/* ---- recalls and replacement (life-recalls.js) ---- */
.badge.lr-replace { background: #fff1e0; color: #b45309; border: 1px solid #f5c58a; }
.badge.lr-replace.strong { background: #f59e0b; color: #fff; border-color: #f59e0b; }
tr.lr-due td { background: color-mix(in srgb, #f59e0b 9%, transparent); }
.lr-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--border); vertical-align: middle; overflow: hidden; }
.lr-bar span { display: block; height: 100%; background: var(--pass); }
.lr-bar.orange span { background: #f59e0b; }
.lr-bar.red span { background: var(--fail); }
.lr-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #fbd38d; vertical-align: middle; }
.lr-dot.strong { background: #f59e0b; }

/* Tyre maintenance alerts (powder / flip) */
.tstage { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tstage.overdue, .tstage.due { color: var(--fail); }
.tstage.due_soon { color: var(--warn); }
.tstage.upcoming { color: var(--muted); }
.tstage.review { color: var(--fail); text-decoration: underline dotted; cursor: help; }
.tyre-launch { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; }
.tm-upkeep { display: grid; gap: 6px; margin-top: 8px; }
.tm-upkeep div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }

/* ---- Dashboard: live overview ---- */
.dash-head .row { margin-bottom: 0; }
.dash-clock { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted); }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: 16px; }
.kpi { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.kpi:hover { border-color: var(--accent); }
.kpi > svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi .k { font-weight: 500; }
.kpi .v { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 15px; font-weight: 600; }
.kpi .s { color: var(--muted); font-size: 13px; }
.kpi.blue { background: #f3f7ff; } .kpi.blue > svg { background: #dce8ff; color: #1662e8; } .kpi.blue .v { color: #1253c4; }
.kpi.green { background: #f2fbf5; } .kpi.green > svg { background: #d7f2df; color: #15803d; } .kpi.green .v { color: #166534; }
.kpi.amber { background: #fffaf0; } .kpi.amber > svg { background: #fde9c3; color: #b45309; } .kpi.amber .v { color: #9a4a06; }
.kpi.red { background: #fff5f5; } .kpi.red > svg { background: #fddcdc; color: #c62828; } .kpi.red .v { color: #b42318; }
.kpi.sky { background: #f2f8fd; } .kpi.sky > svg { background: #d6ebfb; color: #0b6aa9; } .kpi.sky .v { color: #0b5a8f; }
.kpi.violet { background: #f8f5fe; } .kpi.violet > svg { background: #e9e0fb; color: #6d3fc0; } .kpi.violet .v { color: #5b32a6; }
.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); margin-bottom: 16px; }
.dash-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.dash-grid > section.card + section.card { margin-top: 0; }
.dash-grid h2 svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; }
.dash-h { margin-top: 8px; }
.dash-osm { width: 100%; height: 300px; border: 1px solid var(--border); border-radius: 10px; display: block; }
.dash-pins { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.dash-pins .pin { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: #dcfce7; color: #166534; } .chip.warn { background: #fef3c7; color: #92400e; } .chip.bad { background: #fee2e2; color: #b42318; }
.chip.info { background: #e0ecff; color: #1d4ed8; } .chip.none { background: #eef1f5; color: #4b5563; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.dash-list li:last-child a { border-bottom: 0; }
.dash-list li a > span:nth-child(2) { flex: 1; min-width: 0; }
.dash-list .dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #cbd5e1; flex: none; }
.dash-list .dot.unread { background: var(--fail); }
.dash-list .ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex: none; }
.dash-list .ico.powder { background: #e5484d; } .dash-list .ico.flip { background: #f5a524; }
.dash-kv { list-style: none; margin: 0; padding: 0; }
.dash-kv li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-kv li:last-child { border-bottom: 0; }
@media (max-width: 640px) { .kpi .v { font-size: 24px; } .dash-osm { height: 240px; } .dash-clock { display: none; } }

/* =====================================================================================================
   FleetMate redesign (2026-10-17): IBM Plex type, dark grouped sidebar, softer cards and controls,
   and the merged Vehicles workspace (list + alerts on the left, one vehicle panel on the right).
   Everything below overrides the older rules above; delete this block to go back.
   ===================================================================================================== */
:root {
  --bg: #F4F5F7; --card: #fff; --text: #121722; --muted: #4A5363; --border: #E3E6EB;
  --accent: #1D4ED8; --accent-soft: #E8EEFD; --pass: #157F3D; --fail: #B42318; --warn: #8A4B06; --code: #F1F3F6;
  --hover: #F6F8FB; --side-w: 248px;
  --side-bg: #0E1420; --side-fg: #C9D1DE; --side-muted: #8A94A6; --side-hover: #1A2232;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
body { font: 14px/1.5 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.num, .mono { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid #3B6CF0; outline-offset: 2px; }

/* ---- sidebar ---- */
.side { background: var(--side-bg); color: var(--side-fg); border-right: 0; gap: 4px; padding: 16px 12px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; }
.brand a { display: flex; align-items: center; gap: 10px; padding: 0; text-decoration: none; }
.brand .lbl { display: flex; flex-direction: column; line-height: 1.2; }
.brand .brand-name { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand .brand-sub { color: var(--side-muted); font-size: 12px; font-weight: 400; }
.side-collapse { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--side-muted); }
.side-collapse:hover { background: var(--side-hover); color: #fff; }
.side svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand svg { width: 30px; height: 30px; stroke: none; }
.brand svg path + path { stroke: #0E1420; }
.quick { position: relative; padding-bottom: 8px; }
.quick-btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; }
.quick-btn:hover { background: #1A43BF; }
.quick-menu { position: absolute; z-index: 40; top: 50px; left: 0; width: 230px; padding: 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgb(14 20 32 / .22); display: flex; flex-direction: column; }
.quick-menu[hidden] { display: none; }
.quick-menu button, .vw-menu button, .vw-menu a { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text);
  text-align: left; font-weight: 500; display: flex; align-items: center; text-decoration: none; }
.quick-menu button:hover, .vw-menu button:hover, .vw-menu a:hover { background: #F1F4F9; }
.nav-group { padding: 14px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7D8799; }
.nav-group:first-child { padding-top: 6px; }
.side nav a { color: var(--side-fg); min-height: 40px; padding: 0 12px; gap: 12px; }
.side nav a svg { width: 18px; height: 18px; stroke-width: 1.8; }
.side nav a:hover { background: var(--side-hover); color: #fff; }
.side nav a.active { background: var(--accent); color: #fff; }
.nav-count { background: #D93A2B; }
.side-bottom { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.side-foot { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0; padding: 0 12px; border-radius: 8px; color: var(--side-fg); font-size: 14px; font-weight: 500; text-decoration: none; }
.side-foot:hover { background: var(--side-hover); color: #fff; }
.side-user { margin: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: #161E2D; color: var(--side-fg); }
.side-user .who-name { color: #fff; }
.side-user .badge { background: #2B3A55; color: #C9D1DE; }
.side-user button.link { color: #9DB8FF; padding: 0; }
.side-user .bell { color: #fff; }
/* collapsed: an icon rail */
@media (min-width: 901px) {
  body.side-collapsed { --side-w: 76px; }
  body.side-collapsed .side .lbl, body.side-collapsed .nav-group, body.side-collapsed .side-user .who-name,
  body.side-collapsed .side-user .badge, body.side-collapsed .side-user .who-acts { display: none; }
  body.side-collapsed .brand-row { flex-direction: column; }
  body.side-collapsed .side nav a, body.side-collapsed .side-foot, body.side-collapsed .quick-btn { justify-content: center; padding: 0; }
  body.side-collapsed .nav-count { position: absolute; margin: -18px 0 0 22px; min-width: 16px; height: 16px; font-size: 10px; }
  body.side-collapsed .side nav a { position: relative; }
  body.side-collapsed .nav-group + a { margin-top: 10px; }
  body.side-collapsed .side-user { padding: 8px 4px; display: flex; justify-content: center; }
}

/* ---- general controls & surfaces ---- */
main { padding: 20px 24px 40px; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 16px; font-weight: 600; }
button, .btn { min-height: 36px; padding: 6px 14px; border-radius: 10px; border-color: #D5DAE1; font-weight: 500; }
button.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover, a.btn.primary:hover { background: #1A43BF; }
button.link { min-height: 0; }
select, input, textarea { min-height: 36px; padding: 6px 10px; border-radius: 10px; border-color: #D5DAE1; }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--accent); }
section.card { border-radius: 16px; padding: 18px; box-shadow: none; }
.tile, .kpi { border-radius: 14px; box-shadow: none; }
th { background: #F7F8FA; color: var(--muted); font-weight: 600; font-size: 12px; padding: 9px 10px; }
td { padding: 9px 10px; border-bottom-color: #EEF0F3; }
.tabs { gap: 2px; margin-bottom: 16px; }
.tabs button { min-height: 44px; padding: 0 12px; color: var(--muted); font-weight: 500; }
.tabs button:hover { background: none; color: var(--text); }
.tabs button.active { font-weight: 600; }
.badge { padding: 2px 9px; font-weight: 600; }
dialog { border-radius: 16px; }
#toast { border-radius: 12px; padding: 10px 16px; }

/* ---- Vehicles workspace ---- */
.vw-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.vw-kpi { flex: 1 1 170px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.vw-kpi .k { font-size: 12px; font-weight: 500; color: var(--muted); }
.vw-kpi .v { font: 600 24px/1.25 var(--mono); letter-spacing: -.02em; }
.vw-kpi .s { font-size: 12px; color: #6B7380; }
.vw-kpi.good .v { color: var(--pass); } .vw-kpi.warn .v { color: var(--warn); } .vw-kpi.bad .v { color: var(--fail); }
.vw-main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.vw-left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vw-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.vw-detail { flex: 2 1 620px; display: flex; flex-direction: column; }
.vw-list-head { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border); }
.vw-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vw-title h2 { margin: 0; }
.vw-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: #F1F3F6; border-radius: 10px; }
.vw-seg button { flex: 1 1 auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; }
.vw-seg button:hover { background: rgb(255 255 255 / .6); }
.vw-seg button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgb(14 20 32 / .12); }
.vw-find { display: flex; gap: 8px; }
.vw-find input { flex: 1; min-width: 0; height: 42px; }
.vw-find button { min-width: 44px; }
.vw-row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.vw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { min-height: 32px; padding: 0 12px; border: 1px solid #D5DAE1; border-radius: 16px; background: #fff; font-size: 13px; }
.chip-btn:hover { background: #fff; border-color: #9AA3B2; }
.chip-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.vw-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.vw-more { font-size: 13px; }
.vw-more summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.vw-more .vw-where { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vw-more .vw-where > * { flex: 1 1 110px; }
.vw-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 104px; gap: 10px; }
.vw-colhead { padding: 10px 16px; background: #F7F8FA; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted); }
.vw-rows { max-height: 560px; overflow-y: auto; }
.vw-row { width: 100%; min-height: 0; align-items: center; padding: 11px 16px; border: 0; border-bottom: 1px solid #EEF0F3; border-radius: 0; background: #fff; text-align: left; font-weight: 400; }
.vw-row:hover { background: var(--hover); }
.vw-row.sel { background: #EEF3FE; }
.vw-row.sel .vno { color: var(--accent); }
.vw-row .c1, .vw-row .c2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vw-row .c1 > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vw-row .vno { font-weight: 600; }
.vw-row .sub { font-size: 12px; color: #6B7380; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-row .c3 { text-align: right; font: 500 13px var(--mono); }
.vw-row .badge { font-size: 10px; padding: 1px 6px; }
.vw-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.vw-alerts-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.vw-alerts-head h2 { margin: 0; }
.vw-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #EEF0F3; color: var(--muted); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; }
.vw-count.hot { background: #D93A2B; color: #fff; }
.vw-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #EEF0F3; }
.vw-alert .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; background: var(--warn); }
.vw-alert.red .dot { background: #D93A2B; } .vw-alert.review .dot { background: #7A3E9D; }
.vw-alert .t { font-weight: 600; } .vw-alert .m { font-size: 13px; color: var(--muted); }
.vw-alert .w { margin-left: auto; font-size: 12px; color: #6B7380; white-space: nowrap; }
.vw-alerts-foot { padding: 8px 10px; }
/* detail panel */
.vw-head { padding: 20px 20px 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.vw-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.vw-avatar { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; overflow: hidden; }
.vw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vw-avatar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.vw-id h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vw-id .muted { font-size: 13px; }
.vw-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vw-pop { position: relative; }
.vw-menu { position: absolute; z-index: 40; top: 44px; right: 0; width: 240px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(14 20 32 / .18); display: flex; flex-direction: column; }
.vw-menu[hidden] { display: none; }
.vw-menu .hint { display: block; font-size: 12px; color: #6B7380; font-weight: 400; }
.vw-menu button { flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 12px; }
.vw-menu .danger { color: var(--fail); }
.vw-tabs { display: flex; gap: 2px; padding: 14px 12px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vw-tabs button { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vw-tabs button:hover { background: none; color: var(--text); }
.vw-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.vw-tabs .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #EEF0F3; color: var(--muted); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; }
.vw-tabs .active .n { background: var(--accent-soft); color: var(--accent); }
.vw-tabs .n.red { background: #FDE8E6; color: var(--fail); }
.vw-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vw-body #tab { min-width: 0; }
.vw-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-sub:empty { display: none; }
.vw-ov-top { display: flex; flex-wrap: wrap; gap: 16px; }
.vw-photo { flex: 2 1 360px; min-height: 300px; border-radius: 14px; overflow: hidden; background: #F7F8FA; display: flex; }
.vw-photo img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; display: block; }
.vw-photo.empty { border: 2px dashed #C9CFD8; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }
.vw-photo.empty svg { width: 40px; height: 40px; fill: none; stroke: #6B7380; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vw-stack { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vw-box { border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vw-box > h3, .vw-boxhead h3 { margin: 0; font-size: 14px; font-weight: 600; }
.vw-boxhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vw-odo { display: flex; align-items: flex-end; gap: 4px; }
.vw-odo span { width: 30px; height: 42px; display: grid; place-items: center; border-radius: 6px; background: var(--text); color: #fff; font: 600 22px var(--mono); }
.vw-odo small { margin-left: 6px; color: var(--muted); font-size: 13px; }
.vw-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.vw-dot { width: 8px; height: 8px; border-radius: 50%; background: #B8BFCA; flex: none; display: inline-block; }
.vw-dot.on { background: #1F9D55; } .vw-dot.off { background: #D64545; }
.vw-place { font-size: 17px; font-weight: 600; }
.vw-coords { font: 13px var(--mono); color: var(--muted); }
.vw-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.vw-stat { flex: 1 1 120px; background: #F7F8FA; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.vw-stat span { font-size: 12px; color: var(--muted); }
.vw-stat b { font: 600 16px var(--mono); }
.vw-sched { padding: 0; gap: 0; overflow: hidden; }
.vw-sched .vw-boxhead { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.vw-srow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #EEF0F3; }
.vw-srow:last-child { border-bottom: 0; }
.vw-srow .r { text-align: right; } .vw-srow .r b { font-family: var(--mono); }
@media (max-width: 900px) { main { padding: 16px 16px 32px; } .vw-rows { max-height: 380px; } }
.vw-menu a { flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 12px; }
.vw-alert .w { margin-left: auto; flex: none; }
.vw-alert > div { min-width: 0; }

/* ---- delete confirmation code (2026-10-17) ---- */
#dlg-code { width: min(440px, calc(100vw - 32px)); }
#dlg-code h2 { margin: 0 0 6px; }
#dlg-code p { margin: 0 0 10px; }
#code-input { font: 600 24px/1.2 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .35em; text-align: center; padding: 10px; }
#code-error:empty { display: none; }
#dlg-code .dlg-actions { flex-wrap: wrap; }
button.primary.danger-fill { background: var(--fail); border-color: var(--fail); color: #fff; }

/* ---- Maintenance page (maintenance records) ---- */
.mt-add { display: inline-flex; align-items: center; gap: 8px; }
.mt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mt-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-weight: 500; color: var(--text); }
.mt-tabs button:hover { background: var(--hover); }
.mt-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.mt-main, .mt-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mt-side section.card + section.card, .mt-main section.card + section.card { margin-top: 0; }
.mt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mt-kpi { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.mt-kpi-ic { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.mt-kpi-ic.blue { background: #E6EFFE; color: var(--accent); }
.mt-kpi-ic.green { background: #E3F5EA; color: #15803D; }
.mt-kpi-ic.red { background: #FDE8E8; color: #DC2626; }
.mt-kpi-v { font-size: 20px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-kpi a { text-decoration: none; }
.mt-up { color: #15803D; } .mt-down { color: #15803D; } .mt-warn { color: #D97706; } .mt-bad { color: #DC2626; }
.mt-form h2 { margin: 0 0 6px; }
.mt-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: var(--accent); }
.mt-step span { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; }
.mt-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 500; }
.mt-f > span i, .mt-f > span > i { color: #DC2626; font-style: normal; }
.mt-f input, .mt-f select, .mt-f textarea { width: 100%; font-weight: 400; }
.mt-f[hidden] { display: none; }
.mt-cols4, .mt-cols3, .mt-cols2, .mt-cols6, .mt-cols-end { display: grid; gap: 12px 16px; margin-bottom: 12px; }
.mt-cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-cols6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mt-cols-end { grid-template-columns: 1.2fr 1.2fr auto; align-items: end; }
.mt-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mt-parts-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 20px; margin-bottom: 4px; }
table.mt-parts th { background: var(--code); font-weight: 600; }
table.mt-parts td { padding: 4px 6px; vertical-align: top; }
table.mt-parts input { width: 100%; min-height: 32px; padding: 4px 8px; }
table.mt-parts td:nth-child(2) input { width: 80px; } table.mt-parts td:nth-child(3) input { width: 110px; }
table.mt-parts .mt-ltot { padding-top: 10px; white-space: nowrap; }
.mt-src { display: block; font-size: 11px; }
.mt-addpart { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.mt-sums { display: flex; flex-direction: column; gap: 8px; }
.mt-sums label { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 10px; font-size: 13px; }
.mt-sums input[readonly] { background: var(--code); }
.mt-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: #E3F5EA; font-weight: 600; }
.mt-total b { font-size: 17px; }
.mt-status { color: #15803D; background: #EAF7EF; }
.mt-drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 64px; padding: 10px; border: 1.5px dashed #C4CCD8; border-radius: 10px; cursor: pointer; color: var(--accent); text-align: center; }
.mt-drop.over { background: var(--accent-soft); border-color: var(--accent); }
.mt-drop > div { width: 100%; }
.mt-actions { display: flex; gap: 10px; justify-content: flex-end; }
.mt-cats { list-style: none; margin: 0; padding: 0; }
.mt-cats button { display: grid; grid-template-columns: 26px 1fr auto 12px; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 4px 6px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; text-align: left; font-weight: 400; }
.mt-cats li:last-child button { border-bottom: 0; }
.mt-cats button:hover { background: var(--hover); }
.mt-cat-dot { width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c) 16%, transparent); position: relative; }
.mt-cat-dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--c); }
.mt-cat-n { color: var(--muted); }
.mt-side-h { display: flex; justify-content: space-between; align-items: baseline; }
.mt-side-h a { font-weight: 500; text-decoration: none; }
.mt-upcoming { list-style: none; margin: 0; padding: 0; }
.mt-upcoming li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mt-upcoming li:last-child { border-bottom: 0; }
.mt-upcoming a { color: var(--text); text-decoration: none; }
.mt-up-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #FEF3C7; color: #D97706; }
.mt-up-ic.red { background: #FDE8E8; color: #DC2626; } .mt-up-ic.green { background: #E3F5EA; color: #15803D; }
.mt-up-r { text-align: right; }
.mt-pill { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.mt-pill.yellow { background: #FEF3C7; color: #B45309; } .mt-pill.red { background: #FDE8E8; color: #B91C1C; } .mt-pill.green { background: #E3F5EA; color: #15803D; }
.mt-pill.completed { background: #E3F5EA; color: #15803D; } .mt-pill.in_progress { background: #E6EFFE; color: var(--accent); } .mt-pill.pending { background: #F1F4F9; color: var(--muted); }
.mt-hist { margin-top: 16px; }
.mt-hist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.mt-hist-head h2 { margin: 0; }
.mt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-filters select { min-width: 140px; }
.mt-filters button { display: inline-flex; align-items: center; gap: 6px; }
.mt-acts { display: inline-flex; gap: 10px; align-items: center; }
.mt-acts a, .mt-acts button.link { color: var(--accent); padding: 0; display: inline-flex; }
.mt-acts button.link.danger { color: #DC2626; }
@media (max-width: 1280px) {
  .mt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-cols6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .mt-grid { grid-template-columns: minmax(0, 1fr); }
  .mt-parts-wrap, .mt-cols-end { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mt-kpis, .mt-cols4, .mt-cols3, .mt-cols2, .mt-cols6 { grid-template-columns: 1fr; }
  .mt-tabs button { flex: 1 1 45%; justify-content: center; padding: 0 10px; }
}

/* =====================================================================================================
   White-and-blue theme (2026-10-17, from the dashboard reference): one set of tokens and shared components
   (sidebar, cards, KPI cards, tables, status pills, tabs, forms, buttons) used by every page.
   Everything below overrides the layers above.
   ===================================================================================================== */
:root {
  --bg: #F3F6FB; --card: #fff; --text: #0F1B33; --muted: #5A6478; --border: #E3E8F1;
  --accent: #1A6FE8; --accent-strong: #135BC7; --accent-soft: #E9F1FE; --pass: #15803D; --fail: #C62828; --warn: #B45309; --code: #F1F4F9;
  --hover: #F5F8FD; --side-w: 240px;
  --side-bg: #fff; --side-fg: #24324A; --side-muted: #8A94A6; --side-hover: #F1F5FC;
  --ok-bg: #E4F6EA; --ok-fg: #15803D; --warn-bg: #FFF3DB; --warn-fg: #B45309; --bad-bg: #FDE7E7; --bad-fg: #C62828;
  --info-bg: #E6EFFE; --info-fg: #1A5FD0; --none-bg: #EEF1F6; --none-fg: #5A6478;
  --shadow: 0 1px 2px rgb(15 27 51 / .04), 0 2px 10px rgb(15 27 51 / .04);
  --mono: 'Inter', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
body { font: 14px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-feature-settings: 'tnum' 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }

/* ---- sidebar: white, blue active item ---- */
.side { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--border); padding: 18px 14px; }
.brand .brand-name { color: var(--text); font-size: 18px; font-weight: 700; }
.brand .brand-sub { color: var(--accent); font-size: 13px; font-weight: 600; }
.brand svg path:first-child { fill: var(--accent); }
.brand svg path + path { stroke: #fff; }
.side-collapse { color: var(--side-muted); }
.side-collapse:hover { background: var(--side-hover); color: var(--text); }
.quick-btn { background: var(--accent); }
.quick-btn:hover { background: var(--accent-strong); }
.nav-group { color: var(--side-muted); }
.side nav a { color: var(--side-fg); border-radius: 10px; }
.side nav a:hover { background: var(--side-hover); color: var(--text); }
.side nav a.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgb(26 111 232 / .25); }
.nav-count { background: #E5383B; }
.side-foot { color: var(--side-muted); }
.side-foot:hover { background: var(--side-hover); color: var(--text); }
.side-user { background: var(--bg); color: var(--side-fg); border: 1px solid var(--border); }
.side-user .who-name { color: var(--text); }
.side-user .badge { background: var(--accent-soft); color: var(--accent); }
.side-user button.link { color: var(--accent); }
.side-user .bell { color: var(--text); }
header.top { background: var(--card); border-bottom: 1px solid var(--border); }

/* ---- page ---- */
main { padding: 20px 24px 40px; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
h2 { font-size: 16px; font-weight: 600; color: var(--text); }
.page-head { margin-bottom: 18px; }
.page-head .muted { font-size: 13px; }

/* ---- cards ---- */
section.card, .vw-card, .tm-panel, .tm-card, .mt-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
section.card { padding: 18px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-head .spacer { flex: 1; }
a.view-all { font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---- KPI cards (tinted) ---- */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-bottom: 18px; }
.kpi { align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; border: 1px solid transparent; box-shadow: none; }
.kpi > svg { width: 56px; height: 56px; padding: 14px; stroke-width: 2.2; }
.kpi .k { font-weight: 600; font-size: 14px; color: var(--text); }
.kpi .v { font-size: 30px; font-weight: 700; }
.kpi .s { color: var(--muted); }
.kpi.blue { background: #EAF2FE; } .kpi.blue > svg { background: #D3E3FD; color: var(--accent); } .kpi.blue .v { color: var(--accent-strong); }
.kpi.green { background: #E8F7EE; } .kpi.green > svg { background: #CDEFD9; color: #15803D; } .kpi.green .v { color: #15803D; }
.kpi.amber { background: #FFF6E3; } .kpi.amber > svg { background: #FDE7B5; color: #D97706; } .kpi.amber .v { color: #D97706; }
.kpi.red { background: #FDECEC; } .kpi.red > svg { background: #FBD0D0; color: #DC2626; } .kpi.red .v { color: #DC2626; }
.kpi:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---- tables ---- */
table { font-size: 13px; }
th { background: #F5F7FB; color: #4A5468; font-weight: 600; font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid #EDF1F7; }
tr.click:hover td { background: var(--hover); }
.tbl { border-radius: 10px; }

/* ---- status pills: one look for badge, chip and the page-specific pills ---- */
.badge, .chip, .mt-pill, .tm-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--none-bg); color: var(--none-fg); }
.chip.ok, .badge.green, .badge.completed, .badge.active, .mt-pill.green, .mt-pill.completed, .tm-pill.green { background: var(--ok-bg); color: var(--ok-fg); }
.chip.warn, .badge.yellow, .badge.in_progress, .badge.high, .mt-pill.yellow { background: var(--warn-bg); color: var(--warn-fg); }
.chip.bad, .badge.red, .badge.urgent, .badge.out_of_service, .mt-pill.red, .tm-pill.red { background: var(--bad-bg); color: var(--bad-fg); }
.chip.info, .badge.pending, .mt-pill.in_progress, .tm-pill.blue { background: var(--info-bg); color: var(--info-fg); }
.chip.none, .mt-pill.pending { background: var(--none-bg); color: var(--none-fg); }
.badge.test { background: transparent; border: 1px dashed #9AA3B4; color: var(--muted); padding: 2px 8px; }

/* ---- tabs ---- */
.tabs { border-bottom: 1px solid var(--border); }
.tabs button { color: var(--muted); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- buttons & forms ---- */
button, .btn { border-radius: 10px; border: 1px solid #D8DFEA; background: var(--card); color: var(--text); font-weight: 500; }
button:hover, .btn:hover { background: var(--hover); border-color: #C6D0DF; }
button.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover, a.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.link { border: 0; background: none; color: var(--accent); }
button.link:hover { background: none; text-decoration: underline; }
button.danger, button.link.danger { color: var(--fail); }
select, input, textarea { border: 1px solid #D8DFEA; border-radius: 10px; background: var(--card); color: var(--text); }
select:focus, input:focus, textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); outline-offset: 0; }
.field label { font-weight: 500; color: #3D475A; }
dialog { border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgb(15 27 51 / .25); }
dialog::backdrop { background: rgb(15 27 51 / .45); }
.light.green { background: #22A55A; } .light.yellow { background: #F59E0B; } .light.red { background: #E5383B; }

/* page-specific pieces brought onto the same palette */
.vw-row.sel { background: var(--accent-soft); }
.tm { --tm-blue: var(--accent); --tm-blue-soft: var(--accent-soft); }
.mt-tabs button.active { background: var(--accent); border-color: var(--accent); }

/* ---- Dashboard ---- */
.dash-head h1 { margin-bottom: 2px; }
.dash-head .row { margin: 0; }
.dash-clock { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 500; }
.dash-refresh { width: 40px; min-height: 38px; padding: 0; display: inline-grid; place-items: center; }
.dash-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dash-row { display: grid; gap: 16px; margin-bottom: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row > section.card { margin: 0; min-width: 0; }
.card-head h2 svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.card-head h2 .n { color: var(--accent); }
.legend { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.st-moving { background: #22A55A; } .st-idle { background: #F59E0B; } .st-offline { background: #E5383B; } .st-none { background: #9AA3B4; }
.icon-btn { width: 36px; min-height: 36px; padding: 0; display: inline-grid; place-items: center; }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dash-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dash-tools .search { flex: 1 1 220px; position: relative; display: block; }
.dash-tools .search input { width: 100%; padding-left: 34px; background: #F7F9FD; }
.dash-tools .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.dash-tools select { flex: 0 1 140px; }
.dash-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.dash-pager .pages { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-pager button { min-width: 32px; min-height: 32px; padding: 0 8px; border-radius: 8px; }
.dash-pager button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pin-btn { width: 30px; min-height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; color: var(--accent); }
.pin-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.dash-feed { list-style: none; margin: 0; padding: 0; }
.dash-feed li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EDF1F7; font-size: 13px; }
.dash-feed li:last-child { border-bottom: 0; }
.dash-feed .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #F59E0B; }
.dash-feed .dot.bad { background: #E5383B; } .dash-feed .dot.info { background: var(--accent); } .dash-feed .dot.ok { background: #22A55A; }
.dash-feed .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed .txt a { color: var(--text); text-decoration: none; }
.dash-feed .txt a:hover { color: var(--accent); }
.dash-feed .txt b { font-weight: 600; }
.dash-feed .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dash-feed .ic { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.dash-feed .ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-feed .ic.bad { background: var(--bad-bg); color: var(--bad-fg); } .dash-feed .ic.warn { background: var(--warn-bg); color: #D97706; } .dash-feed .ic.info { background: var(--info-bg); color: var(--info-fg); }
.dash-empty { color: var(--muted); padding: 10px 0; }
.fuel-ov { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.fuel-ov > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-width: 0; }
.fuel-ov .k { font-size: 13px; font-weight: 600; }
.fuel-ov .v { font-size: 24px; font-weight: 700; margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fuel-ov .v small { font-size: 13px; font-weight: 600; }
.fuel-ov .up { color: var(--bad-fg); } .fuel-ov .down { color: var(--ok-fg); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 10px; }
.bars span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: #8DB9F6; }
.bars span.today { background: var(--accent); }
.bars span.none { background: #E8EDF5; }
.gauge { display: block; width: 100%; max-width: 190px; margin: 8px auto 0; }
.gauge-v { text-align: center; font-size: 22px; font-weight: 700; margin-top: -40px; }
.gauge-s { text-align: center; color: var(--muted); font-size: 12px; }

/* ---- live map (OpenStreetMap tiles, no library) ---- */
.fmap { position: relative; height: 360px; overflow: hidden; border-radius: 12px; background: #E8EEF5; touch-action: none; user-select: none; cursor: grab; }
.fmap.dragging { cursor: grabbing; }
.fmap .tiles, .fmap .marks { position: absolute; inset: 0; }
.fmap .tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.fmap .mk { position: absolute; width: 32px; height: 40px; min-height: 0; margin: -40px 0 0 -16px; border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); }
.fmap .mk:hover { background: none; }
.fmap .mk svg { width: 32px; height: 40px; display: block; }
.fmap .mk.sel { z-index: 2; transform: scale(1.18); transform-origin: 50% 100%; }
.fmap .ctl { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.fmap .ctl button { width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; background: #fff; border-radius: 8px; border: 0; box-shadow: 0 1px 4px rgb(0 0 0 / .25); font-size: 18px; font-weight: 600; }
.fmap .ctl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.fmap .attr { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 1px 6px; font-size: 11px; background: rgb(255 255 255 / .85); border-radius: 6px 0 0 0; }
.fmap .scale { position: absolute; right: 10px; bottom: 24px; z-index: 3; padding: 0 4px; border: 2px solid #2b3a55; border-top: 0; font-size: 11px; line-height: 16px; text-align: center; background: rgb(255 255 255 / .8); }
.fmap .pop { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 48px)); min-width: 200px; padding: 10px 28px 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgb(15 27 51 / .25); font-size: 13px; cursor: default; line-height: 1.5; }
.fmap .pop b { font-size: 14px; }
.fmap .pop .x { position: absolute; right: 4px; top: 4px; min-height: 0; border: 0; padding: 0 6px; background: none; color: var(--muted); font-size: 16px; }
.fmap .empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); z-index: 3; background: rgb(243 246 251 / .7); }
.fmap:fullscreen { height: 100%; border-radius: 0; }

@media (max-width: 1200px) { .dash-row.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-row.three > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .dash-row, .dash-row.three { grid-template-columns: minmax(0, 1fr); } .dash-row.three > :last-child { grid-column: auto; } }
@media (max-width: 640px) {
  main { padding: 14px 12px 40px; }
  .kpi { padding: 14px; } .kpi > svg { width: 46px; height: 46px; padding: 11px; } .kpi .v { font-size: 24px; }
  .fmap { height: 300px; }
  .fuel-ov { grid-template-columns: minmax(0, 1fr); }
  .dash-clock { display: none; }
}
.dash-feed .txt.two a { display: flex; flex-direction: column; min-width: 0; }
.dash-feed .txt.two a > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed .txt.two .muted { font-size: 12px; }

/* Tyre screen: lay out by the width it actually has (full page, or the narrower vehicle panel) */
.tm { container-type: inline-size; }
@container (max-width: 1120px) {
  .tm-body { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .tm-side { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
}
@container (max-width: 900px) { .tm-body { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 560px) {
  .tm-axle { grid-template-columns: minmax(0, 1fr) auto 64px auto minmax(0, 1fr); }
  .tm-wheel .tyre { width: 30px; height: 58px; }
  .tm-lbl b { font-size: 12px; } .tm-lbl { font-size: 11px; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .kpi > svg { width: 38px; height: 38px; padding: 9px; }
  .kpi .v { font-size: 22px; } .kpi .k { font-size: 13px; } .kpi .s { font-size: 12px; }
}

/* ---- Maintenance: history first, add / edit popup ---- */
.mt-hist { margin-top: 0; }
.mt-search { position: relative; flex: 1 1 240px; display: block; }
.mt-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.mt-search input { width: 100%; padding-left: 34px; background: #F7F9FD; }
td.mt-work { min-width: 200px; max-width: 320px; }
.mt-hist-foot { margin-top: 10px; text-align: right; }
.mt-hist-foot:empty { display: none; }
.mt-kpis-below { margin-top: 16px; }
.mt-below { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mt-below > section.card { margin: 0; }
dialog.mt-dlg { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: hidden; }
dialog.mt-dlg[open] { display: flex; }
dialog.mt-dlg form { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 24px); padding: 0; }
.mt-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--border); }
.mt-dlg-head h2 { margin: 0; font-size: 20px; }
.mt-x { min-height: 0; width: 36px; height: 36px; padding: 0; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); }
.mt-x:hover { background: var(--hover); color: var(--text); }
.mt-dlg-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 22px 18px; overscroll-behavior: contain; }
.mt-dlg-body .mt-step:first-child { margin-top: 12px; }
.mt-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--border); background: #F7F9FD; }
#mt-err:empty { display: none; }
#mt-err { margin-top: 10px; padding: 10px 12px; background: var(--bad-bg); border-radius: 10px; }
.mt-f select:disabled, .mt-f input:disabled, .mt-sums input:disabled { background: var(--code); color: var(--muted); }
@media (max-width: 900px) { .mt-below { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  dialog.mt-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.mt-dlg form { max-height: 100dvh; height: 100%; }
  .mt-dlg-head, .mt-dlg-body, .mt-dlg-foot { padding-left: 14px; padding-right: 14px; }
  .mt-dlg-foot button { flex: 1; }
}

/* ---- Vehicles page: list + selected vehicle (picture, details, related information) ---- */
.vl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 20px; align-items: start; }
.vl-main { min-width: 0; }
.vl-head { align-items: center; }
.vl-head h1 { font-size: 30px; margin-bottom: 0; }
.vl-head .muted { font-size: 15px; }
.vl-head .row { margin: 0; gap: 10px; }
.vl-import, .vl-add { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 600; }
a.btn.vl-import { border: 1.5px solid var(--accent); color: var(--accent); background: var(--card); }
a.btn.vl-import:hover { background: var(--accent-soft); }
.vl-list { padding: 14px; }
.vl-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vl-search { position: relative; flex: 1 1 260px; display: block; }
.vl-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.vl-search input { width: 100%; height: 46px; padding-left: 44px; }
.vl-filter { position: relative; flex: 0 1 190px; display: block; }
.vl-filter svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text); pointer-events: none; }
.vl-filter select { width: 100%; height: 46px; padding-left: 40px; font-weight: 600; }
table.vl-table th { background: transparent; color: var(--text); font-size: 13px; padding: 12px 14px; }
table.vl-table td { padding: 13px 14px; vertical-align: middle; font-size: 14px; }
table.vl-table td b { font-size: 15px; }
table.vl-table tr.sel td { background: #E7F0FE; }
table.vl-table tr.sel:hover td { background: #DDEAFD; }
table.vl-table .badge { padding: 4px 14px; border-radius: 999px; font-size: 13px; }
.vl-act-h { text-align: right; }
.vl-acts { text-align: right; white-space: nowrap; }
.vl-acts a, .vl-acts button.link { display: inline-flex; padding: 4px; color: var(--accent); vertical-align: middle; }
.vl-none { text-align: center; color: var(--muted); padding: 28px 12px !important; }
.vl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 10px 4px; color: var(--muted); }
.vl-pages { display: flex; gap: 6px; margin-left: auto; }
.vl-pages button { min-width: 36px; min-height: 36px; padding: 0 8px; border-radius: 8px; }
.vl-pages button.on { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; background: var(--card); }
.vl-per { display: inline-flex; align-items: center; gap: 10px; }
.vl-per select { min-width: 80px; }
.vl-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 16px; }
.vl-side section.card { margin: 0; }
.vl-empty { padding: 28px; text-align: center; }
.vl-top { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.vl-photo { flex: 0 0 168px; height: 160px; border-radius: 12px; overflow: hidden; background: #EEF3FA; display: grid; place-items: center; }
.vl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-nophoto { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.vl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vl-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vl-name h2 { margin: 0; font-size: 26px; font-weight: 700; }
.vl-name .badge { padding: 4px 14px; border-radius: 999px; font-size: 13px; }
.vl-id .muted { font-size: 15px; }
.vl-edit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; }
.vl-edit:hover { background: var(--accent-soft); }
.vl-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 16px 0 0; }
.vl-kv dt { color: var(--muted); font-size: 13px; }
.vl-kv dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.vl-kv dd .badge { padding: 2px 12px; border-radius: 999px; }
.vl-period { position: relative; display: block; }
.vl-period svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.vl-period select { padding-left: 36px; min-height: 38px; }
@media (max-width: 1100px) {
  .vl { grid-template-columns: minmax(0, 1fr); }
  .vl-side { position: static; }
}
@media (max-width: 640px) {
  .vl-head h1 { font-size: 26px; }
  .vl-head .row { width: 100%; }
  .vl-import, .vl-add { flex: 1; justify-content: center; }
  .vl-filter { flex: 1 1 100%; }
  .vl-top { flex-direction: column; }
  .vl-photo { flex-basis: auto; width: 100%; height: 190px; }
  .vl-pages { margin-left: 0; }
}
/* tighter list and value column so everything fits next to the panel */
table.vl-table th, table.vl-table td { padding-left: 10px; padding-right: 10px; }
table.vl-table .badge.test { font-size: 10px; padding: 1px 6px; margin-left: 6px; border-radius: 6px; vertical-align: 2px; }
@media (min-width: 1101px) and (max-width: 1500px) { .vl { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); } .vl-photo { flex-basis: 140px; height: 136px; } }
table.vl-table td:nth-child(3), table.vl-table td:nth-child(4) { white-space: normal; min-width: 72px; }
table.vl-table .badge:not(.test) { padding: 3px 11px; }
@media (min-width: 1101px) and (max-width: 1500px) { .vl { grid-template-columns: minmax(0, 1fr) minmax(330px, 376px); gap: 16px; } }

/* ---- Vehicles page, v2: status chips, related-information tiles, records under them ---- */
.vl { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; }
@media (min-width: 1101px) and (max-width: 1500px) { .vl { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; } .vl-photo { flex-basis: 168px; height: 150px; } }
@media (max-width: 1280px) { .vl { grid-template-columns: minmax(0, 1fr); } .vl-side { position: static; } }
.vl-side { position: static; }
.vl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.vl-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; font-weight: 500; }
.vl-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.vl-chip b { font-weight: 600; }
.vl-chip.green { background: #E6F6EC; color: #14532D; } .vl-chip.green i { background: #22A55A; }
.vl-chip.yellow { background: #FFF4DE; color: #7A4A06; } .vl-chip.yellow i { background: #F59E0B; }
.vl-chip.red { background: #FDECEC; color: #7F1D1D; } .vl-chip.red i { background: #E5383B; }
.vl-chip:hover { border-color: currentColor; background-blend-mode: multiply; }
.vl-chip.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.vl-acts button.link.danger { color: #DC2626; }
/* selected vehicle card: picture left, details right */
.vl-top { border-bottom: 0; padding-bottom: 0; gap: 22px; }
.vl-photo { flex: 0 0 200px; height: 180px; }
.vl-name { justify-content: flex-start; }
.vl-name .vl-edit { margin: 0 0 0 auto; }
.vl-reg { margin-top: -2px; }
.vl-top .vl-kv { margin-top: 10px; }
.vl-rel-h { margin: 0 0 12px; font-size: 17px; }
.vl-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.vl-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card); font-size: 13px; font-weight: 500; color: var(--text); text-align: center; }
.vl-tile:hover { background: var(--hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.vl-tile.on { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.vl-tile.red svg { color: #DC2626; } .vl-tile.blue svg { color: #1A6FE8; } .vl-tile.amber svg { color: #E08A00; }
.vl-tile.violet svg { color: #7C3AED; } .vl-tile.green svg { color: #15803D; } .vl-tile.sky svg { color: #1A6FE8; }
.vl-recs { padding: 16px; }
.vl-recs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.vl-recs-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.vl-recs-ic.red { background: #FDE8E8; color: #DC2626; } .vl-recs-ic.blue { background: #E6EFFE; color: #1A6FE8; } .vl-recs-ic.amber { background: #FFF2DA; color: #E08A00; }
.vl-recs-ic.violet { background: #F1E9FE; color: #7C3AED; } .vl-recs-ic.green { background: #E3F5EA; color: #15803D; } .vl-recs-ic.sky { background: #E6F1FD; color: #1A6FE8; }
.vl-recs-t h2 { margin: 0; font-size: 18px; }
.vl-recs-head .spacer { flex: 1; }
.vl-period select { min-height: 38px; }
.vl-dates { display: inline-flex; align-items: center; gap: 6px; }
.vl-dates[hidden] { display: none; }
.vl-dates input { min-height: 38px; }
.vl-addrec { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.vl-sum { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.vl-recs table th { font-size: 12px; padding: 9px 8px; }
.vl-recs table td { font-size: 13px; padding: 9px 8px; }
.vl-recs td .link { display: inline-flex; padding: 2px 4px; vertical-align: middle; }
.vl-recs td .link.danger { color: #DC2626; }
.vl-recs .vl-pager { padding: 12px 4px 0; }
@media (max-width: 760px) { .vl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .vl-top { flex-direction: column; }
  .vl-photo { flex-basis: auto; width: 100%; height: 190px; }
  .vl-recs-head .spacer { display: none; }
  .vl-period, .vl-addrec { flex: 1 1 auto; }
  .vl-period select { width: 100%; }
  .vl-chip { flex: 1 1 auto; justify-content: center; }
}
table.vl-table th, table.vl-table td { padding-left: 8px; padding-right: 8px; }
.vl-recs table th, .vl-recs table td { white-space: normal; }
.vl-recs table td.wrap { min-width: 90px; }
.vl-recs table td:last-child { white-space: nowrap; }
.vl-recs table th, .vl-recs table td { padding-left: 6px; padding-right: 6px; }
.vl-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); } @media (max-width: 760px) { .vl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 420px) { .vl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the photo is a button: add or change it here */
.vl-photo { position: relative; cursor: pointer; border: 1.5px dashed transparent; transition: border-color .15s; }
.vl-photo:hover, .vl-photo:focus-within { border-color: var(--accent); }
.vl-photo:has(img) { border-style: solid; }
.vl-photo-btn { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px;
  background: rgb(255 255 255 / .92); color: var(--accent); font-size: 12px; font-weight: 600; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.vl-photo.busy { opacity: .55; pointer-events: none; }

/* ---- Vehicles: compact selected-vehicle card (2026-10-20) ---- */
.vl-top { flex-direction: row; align-items: center; gap: 14px; }
.vl-photo { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; }
.vl-nophoto { display: grid; place-items: center; color: var(--accent); }
.vl-id { gap: 2px; }
.vl-name h2 { font-size: 22px; }
.vl-name .badge { padding: 2px 10px; font-size: 12px; }
.vl-line { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.vl-sep { color: var(--border); }

/* ---- Maintenance popup: three sections side by side (2026-10-20) ---- */
dialog.mt-dlg { width: min(1440px, calc(100vw - 24px)); }
.mt-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 14px; }
.mt-sec { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px 14px; }
.mt-dlg-body .mt-sec .mt-step { margin: 14px 0 12px; }
.mt-sec .mt-cols4, .mt-sec .mt-cols3, .mt-sec .mt-cols2, .mt-sec .mt-cols6, .mt-sec .mt-parts-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mt-sec table.mt-parts td:nth-child(2) input { width: 56px; } .mt-sec table.mt-parts td:nth-child(3) input { width: 84px; }
.mt-sec table.mt-parts th, .mt-sec table.mt-parts td { padding-left: 4px; padding-right: 4px; }
@media (max-width: 1000px) { .mt-secs { grid-template-columns: minmax(0, 1fr); } }

/* ---- Maintenance page: tabs beside the heading (2026-10-20) ---- */
.page-head.mt-head { align-items: center; }
.mt-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-width: 0; }
.mt-title h1 { margin: 0; }
.mt-head .mt-tabs { margin: 0; }

/* ---- Vehicles: Delete next to Edit (2026-10-20) ---- */
.vl-del { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #DC2626; color: #DC2626; font-weight: 600; background: var(--card); }
.vl-del:hover { background: #FEF2F2; }
.vl-name .vl-btns { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.vl-name .vl-btns .vl-edit { margin: 0; align-self: center; }
/* Name, status, TEST, Edit and Delete always on one line: the buttons
   show only their icons until the card is wide enough for the words. */
.vl-id { container-type: inline-size; }
.vl-name { flex-wrap: nowrap; gap: 8px; min-width: 0; }
.vl-name h2 { flex: none; white-space: nowrap; }
.vl-name .badge { flex: none; }
.vl-name .vl-btns { gap: 6px; }
.vl-name .vl-btns button { min-height: 32px; padding: 0 9px; gap: 6px; font-size: 13px; }
.vl-name .vl-btn-t { display: none; }
@container (min-width: 400px) { .vl-name .vl-btn-t { display: inline; } }

/* ---- Maintenance History: heading + filters in one row (2026-10-20) ---- */
@media (min-width: 1500px) {
  .mt-hist-head { flex-wrap: nowrap; gap: 16px; }
  .mt-hist-head h2 { flex: none; white-space: nowrap; }
  .mt-hist-head .mt-filters { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; gap: 6px; }
  .mt-hist-head .mt-search { flex: 1 1 150px; min-width: 120px; max-width: 280px; }
  .mt-hist-head .mt-filters select { min-width: 110px; flex: 0 1 130px; }
  .mt-hist-head .mt-filters input[type=date] { flex: 0 1 135px; min-width: 118px; }
  .mt-hist-head .mt-filters button { flex: none; }
}

/* ---- Vehicles: narrow list + small Add Vehicle (2026-10-20) ---- */
.vl-head { flex-wrap: nowrap; }
.vl-head .vl-add { flex: none; min-height: 34px; padding: 0 12px; gap: 6px; font-size: 14px; }
.vl { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
@media (max-width: 900px) { .vl { grid-template-columns: minmax(0, 1fr); } }
.vl-side { container-type: inline-size; }
.vl-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@container (min-width: 900px) { .vl-pair { grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr); } .vl-pair > section.card:first-child { order: 2; } }
.vl-pair > section.card, .vl-pair > section.card + section.card { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.vl-pair .vl-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vl-pair .vl-tile { min-height: 64px; }
@media (max-width: 520px) { .vl-pair .vl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- even page padding, snug cards (2026-10-21) ---- */
main { padding: 20px; }
.page-head { margin-bottom: 14px; align-items: center; }
section.card { padding: 14px 16px; }
section.card + section.card { margin-top: 14px; }
section.card > h2:first-child, section.card > .card-head:first-child { margin-top: 0; }
.card-head { margin-bottom: 10px; }
.vl { gap: 14px; }
.vl-side { gap: 14px; }
.vl-pair { gap: 14px; }
.vl-pair > section.card { padding: 12px; }
.vl-pair .vl-tiles { flex: 1; align-items: stretch; }
.vl-pair .vl-tile { height: 100%; }
.vl-recs { padding: 14px 16px; }
.vl-recs-head { margin-bottom: 10px; }
@media (max-width: 900px) { main { padding: 16px; } }
@media (max-width: 640px) { main { padding: 12px; } }
/* Add Vehicle sits next to the status filter inside the list card (2026-10-21) */
.vl-tools .vl-filter { flex: 1 1 140px; }
.vl-tools .vl-add { flex: none; height: 46px; min-height: 46px; padding: 0 14px; gap: 6px; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) { .vl-tools .vl-filter { flex: 1 1 140px; } }