/* Workspace: one app, modules in the sidebar, pages in the view (docs/design-direction.md) */
:root { --sel: #f1f8f7; --wk: #f2f2f4; --side: 208px; --top: 52px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sel: #13201f; --wk: #1c1c1f; } }
:root[data-theme="dark"] { --sel: #13201f; --wk: #1c1c1f; }
html, body { height: 100%; }
/* iPhone web app: the page runs under the status bar (viewport-fit=cover); keep it clear of the clock / notch */
.ws { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; height: 100dvh; box-sizing: border-box; padding-top: env(safe-area-inset-top); background: var(--surface); }
/* sidebar */
.side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; min-height: 0; }
.side .brand { padding: 4px 8px 16px; } .side .brand img { height: 24px; display: block; }
.side .brand .brandname { display: block; font-weight: 650; font-size: 15px; line-height: 24px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }   /* no logo uploaded: the company name */
.side a[data-nav] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.side a[data-nav] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side a[data-nav]:hover { background: var(--hover); color: var(--text); }
.side a[data-nav].on { background: var(--accent-bg); color: var(--accent); }
.side .grow { flex: 1; }
/* sidebar footer: who is signed in (account) and the settings gear beside it */
.side .sfoot { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.side .me { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 2px 8px; color: var(--muted); font-size: 12px; border-radius: 8px; }
.side .me b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .me b { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.side .me:hover b { color: var(--accent); }
/* top bar */
.area { display: grid; grid-template-rows: var(--top) 1fr; min-width: 0; min-height: 0; }
.area > .top { grid-row: 1; } .area > .view { grid-row: 2; } .hvwall .area > .view { grid-row: 1; }   /* the top bar follows the page in the HTML */
.top { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.top .search { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; width: auto; min-width: 180px; margin-left: auto; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 10px; color: var(--muted); text-align: left; }
.top .search:hover { border-color: var(--line-strong); }
.top .search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.top .search span { flex: 1; } .top kbd { font: 11px var(--font); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; }
.top #newJob { margin-left: 0; flex: none; }
/* Working at (js/warehouses.js drawWorking): the whole app's warehouse; amber when it is not the person's home */
.topwh { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; }
.topwh .tw { color: var(--muted); white-space: nowrap; } .topwh select { border: 0; background: transparent; font: 600 13px var(--font); color: var(--text); padding: 4px 2px; cursor: pointer; max-width: 150px; }
.topwh.away { border-color: var(--amber); background: var(--amber-bg); } .topwh.away .tw, .topwh.away select { color: var(--amber); }
@media (max-width: 760px) { .topwh .tw { display: none; } .topwh { padding-left: 4px; } }
.atbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--hover); font-size: 13px; }
.atbar b { font-size: 16px; } .atbar.away { background: var(--amber-bg); } .atbar.away b { color: var(--amber); }
.atbar.pick { background: var(--amber-bg); color: var(--amber); } .atbar.pick b { font-size: 14px; } .atbar.pick span { color: var(--text-2); }
/* + New job: a briefcase with a plus and the label; on phones the icon alone */
.top .newjob { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px 0 11px; border-radius: 8px; font-weight: 600; }
.top .newjob svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.top .newjob kbd { border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-weight: 500; margin-left: 2px; }
.top .newjob:hover svg { transform: rotate(-6deg); } .top .newjob svg { transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .top .newjob svg { transition: none; } }
.iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); border: 0; background: transparent; padding: 0; cursor: pointer; }   /* links and buttons look the same */
.iconbtn:focus { outline: none; } .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.iconbtn:hover, .iconbtn.on { background: var(--hover); color: var(--text); }
.iconbtn.on { color: var(--accent); background: var(--accent-bg); }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the view */
.view { min-height: 0; overflow: auto; outline: none; position: relative; }
.view.fill { overflow: hidden; }
.pg { padding: 20px 24px 40px; max-width: 1500px; }
.ph { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ph h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .ph .grow { flex: 1; }
.ph .crumb { color: var(--muted); text-decoration: none; } .ph .crumb:hover { color: var(--accent); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
table.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.link { cursor: pointer; } .tbl tbody tr.link:hover { background: var(--hover); }
.tbl tbody tr.link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
.tscroll { overflow-x: auto; } .tscroll .tbl td:first-child { min-width: 180px; }   /* wide editable tables scroll inside their card */
.tbl .r { text-align: right; } .num, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.cards { display: grid; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card h2 .muted { font-weight: 400; } .card h2 .grow { flex: 1; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kpi small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-top: 2px; }
.kpi .d { font-size: 12px; } .up { color: var(--green); } .down { color: var(--red); }
.empty { color: var(--muted); padding: 10px 0; }
/* forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form .w { grid-column: 1 / -1; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; color: var(--text-2); }
/* two-column record pages */
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .rec { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs a, .tabs button { border: 0; background: none; padding: 8px 12px; color: var(--text-2); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs .on { color: var(--accent); border-bottom-color: var(--accent); }
/* Products: kit editor, categories, product search box */
.btn.sm.ic { width: 28px; padding: 0; }
.kited td { padding: 6px 8px; } .kited th { padding: 9px 8px; }
.kited .input, .kited .sel { min-height: 30px; padding: 4px 8px; } .kited .qty { width: 76px; text-align: right; }
.tscroll .kited td.mv { width: 1%; min-width: 0; white-space: nowrap; } .kited .mv .btn + .btn { margin-left: 2px; } .tscroll .kited td:nth-child(2) { min-width: 220px; }
.input.bad { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.pick { position: relative; max-width: 460px; margin-top: 12px; } .pick .input { width: 100%; }
.pickres { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow: auto; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pickres[hidden] { display: none; } .pickres p { margin: 0; padding: 8px 10px; }
.pickres button { display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 7px; color: var(--text); }
.pickres button .muted { margin-left: auto; font-size: 12px; white-space: nowrap; }
.pickres button.hl, .pickres button:hover { background: var(--accent-bg); } .pickres button:disabled { color: var(--muted); background: none; cursor: default; }
.edfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .edfoot .grow { flex: 1; }
.catwrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .catwrap { grid-template-columns: minmax(0, 1fr); } }
.ctree { max-height: calc(100vh - 230px); overflow: auto; margin: 0 -8px; }
.crow { display: flex; align-items: center; gap: 4px; padding: 5px 8px 5px calc(6px + var(--d, 0) * 16px); border-radius: 7px; cursor: pointer; color: var(--text-2); }
.crow:hover { background: var(--hover); color: var(--text); } .crow.on { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.crow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.crow .tw { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 0; background: none; padding: 0; border-radius: 4px; color: var(--muted); }
.crow .tw.open svg { transform: rotate(90deg); } .crow button.tw:hover { background: var(--line); color: var(--text); }
.crow .cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .cnt { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.crow .cfi, #pane h2 .cfi { flex: none; color: var(--muted); margin-right: 2px; vertical-align: -2px; } .crow .cn.fold { font-weight: 600; color: var(--text); } .crow.on .cfi { color: var(--accent); }
.crow.none { margin-bottom: 4px; }
.cacts { display: flex; gap: 6px; flex-wrap: wrap; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--accent-bg); }
.bulkbar[hidden] { display: none; } .bulkbar .grow { flex: 1; } .bulkbar .sel { min-height: 28px; padding: 3px 8px; max-width: 100%; }
.tbl .ck { width: 1%; }
/* charts (SVG) */
.chart { width: 100%; height: 220px; display: block; }
.chart text { font: 11px var(--font); fill: var(--muted); }
.chart .bar { fill: var(--accent-fill); } .chart .bar.b2 { fill: color-mix(in srgb, var(--accent-fill) 45%, transparent); }   /* pastel, as Reports */ .chart .bar:hover { opacity: .8; }
.chart .grid { stroke: var(--line); } .chart .axis { stroke: var(--line-strong); }
.hbar { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 90px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.hbar i { display: block; height: 10px; border-radius: 3px; background: var(--accent); }
.hbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .v { text-align: right; font-family: var(--mono); font-size: 12px; }
/* dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1350px) { .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dash .rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 800px) { .dash { grid-template-columns: 1fr; } }
.rail { display: grid; gap: 14px; }
.jc { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; align-items: start; }
.jc:first-of-type { border-top: 0; } .jc:hover { background: var(--hover); border-radius: 8px; }
.jc .t { font-family: var(--mono); font-size: 15px; font-weight: 500; } .jc .t small { display: block; font-family: var(--font); font-size: 11px; color: var(--muted); }
.jc .n b { font-weight: 600; } .jc .n .muted { font-size: 12px; }
.jc .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.clock { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.02em; } .clock small { font-family: var(--font); font-size: 13px; color: var(--muted); display: block; letter-spacing: 0; }
.wx { display: flex; gap: 14px; align-items: center; margin-top: 8px; } .wx .big { font-family: var(--mono); font-size: 22px; } .wx .days { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.vcal { display: grid; gap: 2px; font-size: 11.5px; overflow-x: auto; }
.vrow { display: grid; grid-template-columns: 230px 1fr; gap: 8px; align-items: center; } .vrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.vtrack { position: relative; height: 18px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--days) - 1px), var(--line) 0 calc(100% / var(--days))); border-radius: 4px; }
.vtrack a { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; background: var(--accent-bg); color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent); font-size: 11px; font-weight: 600; padding: 0 5px; overflow: hidden; white-space: nowrap; text-decoration: none; }
.vtrack a.q { background: var(--amber-bg); color: var(--amber); box-shadow: inset 2px 0 0 var(--amber); }
.vtrack a:hover { filter: brightness(.95); }
.vlegend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.vlegend span { display: inline-flex; align-items: center; gap: 6px; } .vlegend i { width: 18px; height: 10px; border-radius: 3px; }
.vlegend i.b { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.vlegend i.q { background: var(--amber-bg); box-shadow: inset 2px 0 0 var(--amber); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .week > div { text-align: center; padding: 6px 2px; border-radius: 8px; background: var(--bg); }
.week b { display: block; font-family: var(--mono); } .week .today { outline: 2px solid var(--accent); }
/* Vehicles > Fuel: by vehicle and by month side by side when there is room */
.fuelgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }   /* chart, then the month table full width (it has the On jobs and Invoiced columns) */
/* layer: documents, dialogs, search: always inside the workspace */
.layer { position: fixed; inset: 0; z-index: 80; padding-top: env(safe-area-inset-top); background: rgba(15,15,20,.32); display: grid; }
.layer[hidden] { display: none; }
.layer.center { place-items: initial; overflow-y: auto; overscroll-behavior: contain; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
/* a centered dialog taller than the screen: the layer scrolls and the dialog starts at the top (auto margins centre it only when it fits) */
.layer.center > * { margin: auto; } .layer.top { align-items: start; justify-items: center; padding-top: 12vh; }
.layer.full { padding: 16px; }
.dialog { background: var(--surface); border-radius: 12px; padding: 20px 22px; max-width: 440px; width: calc(100% - 32px); box-shadow: var(--shadow); }
.dialog h2 { margin: 0 0 6px; font-size: 16px; } .dialog p { margin: 0 0 16px; color: var(--text-2); } .dialog .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.docview { background: var(--surface); border-radius: 12px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; box-shadow: var(--shadow); max-width: 1000px; width: 100%; margin: 0 auto; }
.dvbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .dvbar .grow { flex: 1; }
.dvbody { background: #d9dbe0; min-height: 0; position: relative; } .dvbody iframe { width: 100%; height: 100%; border: 0; display: block; }
.dvwait { padding: 30px; color: var(--muted); }
@media (max-width: 560px) { .dvbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; } .dvbar > b { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dvbar > .muted { display: none; } .dvbar .grow { display: none; } .dvbar .btn { flex: 1; justify-content: center; } }
/* global search (⌘K, js/core.js openSearch): on wide screens it opens where the top bar's search box is and drops down from it; the page's
   card style (12 px corners, thin border, the usual shadow, 13-14 px type), groups headed like the dashboard's section lines, the chosen row
   light teal like the side bar's current page. Before typing it lists the side bar's pages. */
.layer.anchored { background: rgba(15,15,20,.14); justify-items: start; }
.spal { position: relative; display: flex; flex-direction: column; width: min(600px, calc(100% - 32px)); max-height: min(560px, 76vh); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(15,15,20,.14); overflow: hidden; }
.spal kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--muted); font: 500 11px var(--mono); }
.sbar { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; height: 44px; border-bottom: 1px solid var(--line); color: var(--muted); cursor: text; }
.sbar > svg { width: 16px; height: 16px; flex: none; }
.sbar:focus-within > svg { color: var(--accent); }
.sbar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: 400 14px var(--font); }
.sbar input::placeholder { color: var(--muted); }
.sbar kbd { cursor: pointer; } .sbar kbd:hover { color: var(--text); border-color: var(--line-strong); }
.sload { position: absolute; top: 43px; left: 0; height: 2px; width: 30%; background: var(--accent); animation: sload 1s ease-in-out infinite; }
@keyframes sload { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .sload { animation: none; width: 100%; opacity: .5; } }
.sres { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px 6px; }
.sgrp { display: flex; align-items: center; gap: 8px; padding: 10px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sgrp::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 1; }
.sgrp span { order: 2; font: 500 11px var(--mono); letter-spacing: 0; color: var(--muted); } .sgrp span:empty { display: none; }
.srow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "i t r" "i s r"; column-gap: 10px; align-items: center; min-height: 44px;
  padding: 5px 8px; border-radius: 8px; color: inherit; text-decoration: none; scroll-margin: 6px; }
.srow.hl { background: var(--accent-bg); }
.srow .st { grid-area: t; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--text); }
.srow .ss { grid-area: s; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.srow .ss:empty { display: none; } .srow:has(.ss:empty) .st { grid-row: 1 / 3; }
.srow .sr { grid-area: r; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .srow .sr small { font: 500 11px var(--mono); color: var(--muted); }
.srow mark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.srow .sno, .srow .sav, .srow .sph, .srow .sic { grid-area: i; justify-self: center; width: 34px; height: 30px; border-radius: 6px; display: grid; place-items: center; }
.srow .sno { width: 48px; font: 600 11px var(--mono); letter-spacing: -.02em; color: var(--text-2); background: var(--hover); }
.srow.hl .sno { color: var(--accent); background: var(--surface); }
.srow .sav { width: 30px; border-radius: 50%; font: 600 11.5px var(--font); color: var(--text-2); background: var(--hover); }
.srow .sph { width: 30px; height: 30px; background: #f3f3f1; color: #a1a1a1; overflow: hidden; }
.srow .sph img { width: 100%; height: 100%; object-fit: contain; }
.srow .sic { color: var(--accent); }
.srow.page { min-height: 36px; } .srow.page .sic { color: var(--muted); height: 24px; } .srow.page.hl .sic { color: var(--accent); }
.srow.page .sic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.srow.more { margin-top: 4px; } .srow.more .st { color: var(--accent); }
.shint { margin: 6px 8px 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sres > .shint:first-child { border-top: 0; padding-top: 4px; }
.sempty { display: grid; justify-items: start; gap: 2px; padding: 12px 8px 6px; color: var(--muted); font-size: 12px; }
.sempty svg { display: none; } .sempty b { color: var(--text); font-size: 13.5px; font-weight: 500; }
.sfoot { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--muted); }
.sfoot span { display: inline-flex; align-items: center; gap: 4px; } .sfoot .grow { flex: 1; }
/* the close button: touch screens get a ✕ (no Esc key there), keyboards the esc hint */
.sbar .sx { display: none; flex: none; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 8px; background: none; color: var(--muted); place-items: center; cursor: pointer; }
.sbar .sx:hover, .sbar .sx:focus-visible { color: var(--text); background: var(--hover); }
@media (pointer: coarse), (max-width: 600px) { .sbar .sx { display: grid; } .sbar kbd { display: none; } }
/* phones: the palette fits between the notch and the home bar (a column, so its height can be the space left); the conversation takes it all */
@media (max-width: 600px) {
  .sfoot span:not(.grow):not(:last-child) { display: none; }
  .layer.top { display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px); }
  .spal { max-height: 100%; min-height: 0; flex: none; } .spal.ask { flex: 1 1 auto; height: auto; }
}
/* the TEST pill would sit over the palette's footer and dialogs */
body:has(#layer:not([hidden])) .envbadge { display: none; }
.toast-ws { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); background: var(--inv-bg); color: var(--inv-text); box-shadow: var(--shadow); padding: 9px 14px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s; z-index: 90; }
.toast-ws.on { opacity: 1; transform: translate(-50%, 0); }
/* job screen inside the view */
.view.job .jv { height: 100%; }
.view.job .jv .jhead { position: relative; }
/* calendar: the job's date picker (job.js) and the date field (core.js dateField) share it; it opens on the body, outside .jv */
.rpick { position: fixed; z-index: 60; width: 580px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.16); padding: 14px 16px 12px; animation: rpIn .14s ease-out; }
@keyframes rpIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rpick { animation: none; } }
.rp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .rp-head b { font-size: 14px; font-weight: 600; }
.rp-hint { color: var(--accent); font-size: 12px; font-weight: 500; }
.rp-cal { display: grid; grid-template-columns: 28px 1fr 1fr 28px; gap: 14px; align-items: start; }
.rp-nav { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 6px; color: var(--text-2); font-size: 18px; line-height: 1; margin-top: -2px; }
.rp-nav:hover { background: var(--hover); color: var(--text); }
.rp-mh { text-align: center; font-weight: 600; font-size: 13px; margin: 3px 0 8px; }
.rp-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.rp-wd span { text-align: center; font-size: 11px; color: var(--muted); font-weight: 500; padding-bottom: 4px; }
.rp-g button { position: relative; height: 32px; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); border-radius: 0; font-variant-numeric: tabular-nums; }
.rp-g button::before { content: ""; position: absolute; inset: 2px; border-radius: 7px; z-index: -1; }
.rp-g button:hover::before { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rp-wd span.wk { color: var(--text-2); background: var(--wk); border-radius: 6px 6px 0 0; }
.rp-g button.wk { color: var(--text-2); background: var(--wk); }
.rp-g button.sh::before { box-shadow: inset 0 0 0 2px var(--amber); }
.rp-g button.shadd::before { box-shadow: inset 0 0 0 2px var(--amber) !important; background: var(--amber-bg) !important; }
.rp-g button.shdel::before { box-shadow: inset 0 0 0 2px var(--line-strong) !important; background: transparent !important; }
.rp-g button.shdel { text-decoration: line-through; color: var(--muted); }
.rp-cal.shooting .rp-g { user-select: none; }
.rp-g button.sh.st::before, .rp-g button.sh.en::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--amber); }
.rp-cal.shooting .rp-g button.in { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
.rp-cal.shooting .rp-g button.st, .rp-cal.shooting .rp-g button.en { color: var(--accent); }
.rp-cal.shooting .rp-g button.st::before, .rp-cal.shooting .rp-g button.en::before { background: var(--accent-bg); }
.rp-cal.shooting .rp-g button:hover::before { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent); background: transparent; }
.rp-cal.shooting .rp-g button.sh:hover::before { box-shadow: inset 0 0 0 2px var(--amber); }
.rp-g button.hol { color: var(--red); }
.rp-g button.hol::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); }
.rp-g button.today { font-weight: 700; } .rp-g button.today::before { box-shadow: inset 0 0 0 1px var(--text-2); }
.rp-g button.in, .rp-g button.wk.in { background: var(--accent-bg); }
.rp-g button.st.hasr { background: linear-gradient(90deg, transparent 50%, var(--accent-bg) 50%); }
.rp-g button.en.hasr { background: linear-gradient(90deg, var(--accent-bg) 50%, transparent 50%); }
.rp-g button.st.en { background: transparent; }
.rp-g button.st, .rp-g button.en { color: var(--on-accent); font-weight: 600; }
.rp-g button.st::before, .rp-g button.en::before { background: var(--accent); box-shadow: none; }
.rp-g button.st.hol::after, .rp-g button.en.hol::after { background: var(--on-accent); }
.rp-g button { isolation: isolate; }
.rp-legend { display: flex; gap: 14px; justify-content: center; margin: 8px 0 2px; color: var(--muted); font-size: 11px; }
.rp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.lg-today { box-shadow: inset 0 0 0 1px var(--text-2); } .lg-hol { background: var(--red); } .lg-wk { background: var(--wk); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 2px !important; }
.lg-range { background: var(--accent); } .lg-sh { box-shadow: inset 0 0 0 2px var(--amber); }
.rp-shots { margin-top: 10px; border: 1px solid var(--amber); border-radius: 8px; padding: 8px 10px; box-shadow: 0 0 0 3px var(--amber-bg); }
.rp-shots > small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 6px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-chip { border: 1px solid var(--amber); background: var(--amber-bg); color: var(--amber); border-radius: 999px; padding: 2px 6px 2px 9px; font-weight: 500; font-size: 12px; }
.rp-chip span { margin-left: 5px; opacity: .7; } .rp-chip:hover span { opacity: 1; }
.rp-none { color: var(--muted); font-size: 12px; }
.rp-shots .dnote { margin-top: 8px; }
.rp-g button.shout::before { box-shadow: inset 0 0 0 2px var(--red) !important; background: var(--red-bg); }
.rp-g button.shout { color: var(--red); }
.rp-span b { color: var(--text); font-weight: 600; }
.rp-days { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--hover); }
.rp-days .lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.rp-days .seg { background: var(--surface); } .rp-days .seg button { white-space: nowrap; }
.rp-days .rp-man { width: 60px; min-height: 28px; padding: 3px 6px; text-align: center; }
.rp-n { margin-left: auto; font-weight: 600; } .rp-span .m { color: var(--muted); }
.cdays { display: flex; gap: 8px; align-items: center; } .cdays input { width: 64px !important; flex: none; text-align: center; }
.cdays .seg button { white-space: nowrap; }
.dbasis { text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: 500; }
.rp-err { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 12.5px; line-height: 1.45; }
.rp-err b { font-weight: 600; }
.rp-err button { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; } .rp-shots .lnk { margin-top: 6px; padding: 0; color: var(--muted); }
.shring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--amber); flex: none; }
.rp-head .seg { margin-right: 4px; flex: none; } .rp-head .seg button { white-space: nowrap; } .rp-head { align-items: center; }
.rp-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rp-end { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.rp-end.act { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.rp-end small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.rp-end .rp-dl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 7px; }
.rp-end b { font-weight: 600; font-size: 13.5px; }
.rp-end .tfield { min-height: 28px; padding: 3px 6px; }
/* quick hours: the segmented control's look, in a grid */
.rp-times { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: 2px; border-radius: var(--r); background: var(--hover); }
.rp-times button { border: 0; background: transparent; border-radius: 6px; padding: 3px 0; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rp-times button:hover { color: var(--text); }
.rp-times button.on { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--line); }
.rp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rp-span { flex: 1; color: var(--text-2); font-size: 12px; }

.rp-g button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 7px; }
/* one day (date field) */
.rpick.day { width: 300px; padding: 12px 12px 10px; z-index: 90; }   /* above the layer: date fields in dialogs */
.rpick.day .rp-cal { grid-template-columns: 28px 1fr 28px; gap: 6px; }
.rpick.day .rp-g button.st { color: var(--on-accent); }
.rpick.day .rp-foot { margin-top: 8px; padding-top: 8px; }
@media (max-width: 640px) {
  .rpick:not(.day) .rp-cal { grid-template-columns: 28px 1fr 28px; } .rpick:not(.day) .rp-m + .rp-m { display: none; }
  .rp-ends { grid-template-columns: 1fr; } .rp-legend { flex-wrap: wrap; gap: 4px 12px; }
}
/* settings area */
.setwrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
.setnav { display: flex; flex-direction: column; gap: 2px; } .setnav a { padding: 7px 10px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.setnav a:hover { background: var(--hover); } .setnav a.on { background: var(--accent-bg); color: var(--accent); }
.setnav h4 { margin: 12px 10px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 900px) { .ws { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .side { flex-direction: row; overflow-x: auto; align-items: center; padding: 6px; }
  .side .grow, .side .me, .side .brand { display: none; } .side .sfoot { border: 0; padding: 0; margin-left: auto; } .side a[data-nav] span { display: none; } .setwrap { grid-template-columns: minmax(0, 1fr); }
  .setnav { flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 6px; } .setnav h4 { display: none; } .setnav a { white-space: nowrap; } }
/* job screen inside the workspace: it has the view's width, not the window's */
.view.job { container-type: inline-size; }
.view.job .jv { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.view.job .jv .jhead { flex-wrap: wrap; row-gap: 8px; column-gap: 20px; padding: 12px 18px; }
.view.job .jv .title { flex: 1 1 340px; }
.view.job .jv .title h1 { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.view.job .jv .title .sub { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.view.job .jv .hstats { flex-wrap: wrap; gap: 10px 18px; margin-left: 0; }
.view.job .jv .jmain { grid-template-columns: 228px minmax(300px, 1fr) minmax(520px, 1.5fr); }
.view.job .jv .jmain.navoff { grid-template-columns: 40px minmax(300px, 1fr) minmax(520px, 1.5fr); }
@container (max-width: 1150px) {
  .view.job .jv .jmain { grid-template-columns: 228px minmax(260px, .9fr) minmax(480px, 1.6fr); }
  .view.job .jv .jmain.navoff { grid-template-columns: 40px minmax(260px, .9fr) minmax(480px, 1.6fr); }
}
.view.job .jv .ohead { flex-wrap: wrap; row-gap: 6px; }
.view.job .jv .ohead .btn { white-space: nowrap; }
/* phone width (D4): one column, no page-wide horizontal scroll; wide tables scroll inside themselves */
@media (max-width: 760px) {
  .view.fill { overflow: auto; }
  .view.job .jv { height: auto; min-height: 100%; }
  .view.job .jv .jhead { padding: 10px 12px; }
  .view.job .jv .title { flex-basis: 100%; }
}
@container (max-width: 760px) {
  .view.job .jv .jmain, .view.job .jv .jmain.navoff { grid-template-columns: minmax(0, 1fr); }
  .view.job .jv .jmain > .col:first-child { display: none; }
  .view.job .jv .col { border-right: 0; border-bottom: 1px solid var(--line); }
  .view.job .jv .jmain > .col:nth-child(2) .scroll { max-height: 45vh; }
  .view.job .jv #orderScroll { overflow-x: auto; }
  .view.job .jv .grid { min-width: 560px; }
  .view.job .jv .ohead .right { margin-left: 0; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .top { gap: 8px; padding: 0 10px; }
  .top .search { width: auto; flex: 1; min-width: 0; } .top kbd { display: none; } .top .search span { font-size: 14px; }
  .ph .tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ph .tabs a, .ph .tabs button { white-space: nowrap; }   /* section tabs scroll, never widen the page */
  .top #newJob { padding: 0; width: 36px; justify-content: center; } .top .newjob span { display: none; }
  .pg { padding: 14px 12px 32px; }
  .filters .input { width: 100% !important; } .filters .seg { max-width: 100%; }
  .form { grid-template-columns: minmax(0, 1fr); }
  table.tbl { display: block; overflow-x: auto; }
  .ph .input { min-width: 0 !important; width: 100%; }
  .hbar { grid-template-columns: minmax(80px, 1fr) 1fr 80px; }
  .vrow { grid-template-columns: 140px 1fr; }
  .dvbar { flex-wrap: wrap; }
}

/* Booking | Warehouse: the two views of one job, switched in the same place on both (like Current RMS's view buttons) */
.viewsw { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 9px; background: var(--hover); }
.viewsw > * { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.viewsw > a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.viewsw > .on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); cursor: default; }
.viewsw svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .viewsw > .on svg { color: var(--accent); }
@media (pointer: coarse) { .viewsw > * { height: 40px; } }

/* group title rows in the order screen and the warehouse page: a full-width tint, so groups read at a glance */
:root { --grp-bg: color-mix(in srgb, var(--text) 5.5%, var(--surface)); --grp-line: color-mix(in srgb, var(--text) 9%, var(--surface)); }

/* Jobs list: warehouse progress (js/pages.js whProg), in greys only: a dark grey fill on a light track; the bar fills
   from the left while the gear goes out, and from the right as it comes back. The stage colours stay in the warehouse. */
.tbl td.whpc { width: 170px; min-width: 150px; }
.stcell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }   /* Jobs list: status, then invoiced */
.whp { display: grid; gap: 5px; font-size: 12px; color: var(--text-2); }
.whp .b { display: flex; height: 4px; border-radius: 2px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.whp .b.r { justify-content: flex-end; }
.whp .b i { display: block; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--text) 62%, var(--surface)); }
.whp.al .b i { background: color-mix(in srgb, var(--text) 30%, var(--surface)); }   /* allocated: lighter, nothing packed yet */
.whp span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.whp span .d { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); flex: none; }
.whp.res { color: var(--muted); } .whp.res span .d, .whp.al span .d { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.whp.done .b { background: var(--accent-bg); box-shadow: none; }
.whp.done .b i { background: color-mix(in srgb, var(--accent) 26%, var(--accent-bg)); }   /* everything checked in: light teal, like the menu's highlight */
.whp.done { color: var(--text-2); } .whp .ck { flex: none; width: 11px; min-width: 11px; height: 11px; color: var(--accent); }
.whp em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* sortable table headers (Jobs list): the header is a button; the arrow shows the order, faint until used */
.tbl th.sortable { padding: 0; } .tbl th.sortable button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; padding: 9px 12px; cursor: pointer; }
.tbl th.r.sortable button { justify-content: flex-end; }
.tbl th.sortable button:hover { color: var(--text); } .tbl th.sortable button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.tbl th.sortable .sarr { display: inline-grid; place-items: center; width: 12px; height: 12px; opacity: 0; transition: opacity .12s; } .tbl th.sortable .sarr svg { display: block; }
.tbl th.sortable button:hover .sarr { opacity: .45; } .tbl th.sortable.on { color: var(--text); } .tbl th.sortable.on .sarr { opacity: 1; color: var(--accent); }

/* Jobs list: the client in plain text (a link all the same: underlined on hover) */
.tbl a.jcl { color: inherit; text-decoration: none; } .tbl a.jcl:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Vehicles calendar: the name (a link to the vehicle) first, then the plate */
.vrow .vname { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vrow .vname a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-weight: 500; }
.vrow .vname a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.vrow .vname b { flex: none; font: 500 11px var(--mono); color: var(--muted); }

/* Jobs list: the status as a dot and a grey word (like the progress column); the Invoiced tick */
.jst { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.jst i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.jst.st-quote i, .jst.st-requested i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); } .jst.st-order i { background: var(--accent); }
.jst.st-out i { background: var(--text-2); } .jst.st-returned i, .jst.st-closed i { background: var(--line-strong); }
.jst.iv-draft i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); } .jst.iv-issued i { background: var(--accent); }
.jst.iv-paid i { background: var(--line-strong); } .jst.iv-void { color: var(--muted); } .jst.iv-void i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.jst.iv-overdue { color: var(--red); } .jst.iv-overdue i { background: var(--red); }
.jst.st-lost, .jst.st-cancelled, .jst.st-enquiry { color: var(--muted); } .jst.st-lost i, .jst.st-cancelled i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.tbl td.c, .tbl th.c { text-align: center; } .tbl td.nw { white-space: nowrap; }
.itick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--accent); text-decoration: none; }
.itick:hover { background: var(--accent-bg); } .itick.paid { background: var(--accent-bg); } .itick.due { color: var(--red); } .itick.due:hover { background: var(--red-bg); }
.itick.draft { width: 14px; height: 14px; border: 1.5px dashed var(--line-strong); }

/* Vehicles > Fuel: fill-ups and jobs */
.ftbl .fjob { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ftbl tr.off td { color: var(--muted); }
.ftbl .sel.sm { height: 28px; padding: 0 6px; font-size: 12.5px; max-width: 240px; }
/* questions (core.js ask): the app's card look (thin border, soft shadow, light dim), pastel buttons; a destructive one has a red mark */
.layer.center { background: rgba(15,15,20,.16); }
.dialog.ask { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; max-width: 420px; padding: 18px 20px 16px; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(15,15,20,.14); }
.dialog.ask .dlgbody { grid-column: 2; min-width: 0; } .dialog.ask:not(.warn) .dlgbody { grid-column: 1 / -1; }
.dialog.ask h2 { font-size: 15px; font-weight: 600; margin: 4px 0 6px; line-height: 1.3; }
.dialog.ask p { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0 0 16px; }
.dialog.ask .row { grid-column: 1 / -1; }
.dlgmark { grid-row: 1; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--red-bg); color: var(--red); }
.dialog.fadd { max-width: 560px; } .dialog.fadd .form { grid-template-columns: 1fr 1fr; }
.pjl { display: grid; gap: 2px; margin: 10px 0; max-height: 300px; overflow: auto; }
.pjr { text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 7px; cursor: pointer; color: var(--text); } .pjr:hover { background: var(--accent-bg); }

/* one vehicle: log book and recent jobs on the left, the registry fields (label, value) on the right */
.vpage .ph .plate { font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 5px; }
.vpage .kpi .datebtn { margin-top: 4px; } .vpage .kpi b.vsz { font-size: 17px; white-space: nowrap; padding-top: 4px; } .vpage .kpi .warn { color: var(--amber); } .vpage .kpi .bad { color: var(--red); }
.vgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; } .vgrid > div { display: grid; gap: 14px; }
@media (max-width: 1000px) { .vgrid { grid-template-columns: minmax(0, 1fr); } }
.vfs { display: grid; } .vf { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.vf:last-child { border-bottom: 0; } .vf > span { color: var(--muted); font-size: 12px; } .vf > b { font-weight: 400; } .vf > i { font-style: normal; color: var(--muted); font-size: 12px; }
.vf .input { border-color: transparent; background: transparent; padding: 4px 6px; height: auto; min-width: 0; width: 100%; }
.vf .input:hover { border-color: var(--line); } .vf .input:focus { border-color: var(--accent); background: var(--surface); }
.vf .datebtn { border-color: transparent; background: transparent; justify-self: start; } .vf .datebtn:hover { border-color: var(--line); }
.vlog td { vertical-align: top; } .vlog .btn.sm { margin-left: 6px; }
.vjob { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.vjob:last-child { border-bottom: 0; } .vjob > .muted { grid-column: 2; }
.field.chk { display: flex; align-items: center; gap: 8px; } .field.chk input { width: auto; }
.btn.danger { color: var(--red); }
/* Vehicles: registry report upload (drop zone at the foot of the page) */
.regup { margin-top: 14px; border-style: dashed; transition: border-color .15s, background .15s; }
.regup.over { border-color: var(--accent); background: var(--accent-bg); }
.regdrop { display: flex; align-items: center; gap: 16px; } .regdrop > div { flex: 1; } .regdrop h2 { margin-bottom: 4px; } .regdrop p { margin: 0; max-width: 70ch; }
.regres { margin-top: 12px; } .regres td { vertical-align: top; }
@media (max-width: 700px) { .regdrop { flex-direction: column; align-items: flex-start; } }
/* Vehicles: smart tachograph tick */
.vtick { color: var(--accent); font-weight: 700; }
.vchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.vin { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
/* Vehicles list: one line per vehicle; long names and clients cut with … (full text on hover) */
.vfleet td { white-space: nowrap; } .vfleet td > * { vertical-align: middle; } .vfleet td .datebtn, .vfleet td .pill { display: inline-flex; margin-right: 6px; }
.vfleet .vn { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.vfleet .vcl { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
/* Vehicles calendar: vehicles booked on a job but not assigned yet (dashed bars, rows by type under the fleet) */
.vcal .vsep { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vrow .vna { color: var(--muted); font-style: italic; }
.vtrack a.na { outline: 1px dashed var(--accent); outline-offset: -1px; box-shadow: none; background: var(--accent-bg); }
.vtrack a.na.q { outline-color: var(--amber); background: var(--amber-bg); }
.vlegend i.na { outline: 1px dashed var(--muted); outline-offset: -1px; }
/* Vehicles calendar: job name in the bar (cut to fit), shooting days darker */
.vtrack a { display: flex; align-items: center; }
.vtrack a > span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.vtrack a > span b { font-weight: 600; }
.vtrack a i.shot { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.vtrack a.q i.shot { background: color-mix(in srgb, var(--amber) 30%, transparent); }
.vlegend i.sh { background: color-mix(in srgb, var(--accent) 30%, var(--accent-bg)); }
.vjobs { max-height: 520px; overflow: auto; margin: 0 -4px; } .vjobs thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
/* Invoices > Bank payments */
.bankdrop { border-style: dashed; margin-bottom: 14px; } .bankdrop.over { border-color: var(--accent); background: var(--accent-bg); } .bankdrop #bxMsg p { margin: 8px 0 0; }
.banktbl td { vertical-align: top; } .banktbl .bxd { max-width: 34ch; } .banktbl mark { background: var(--accent-bg); color: var(--accent); border-radius: 3px; padding: 0 2px; }
.bxc { display: grid; gap: 4px; margin-bottom: 6px; } .bxi { display: flex; align-items: baseline; gap: 6px; cursor: pointer; } .bxi.dim { opacity: .6; }
.bxa { display: flex; gap: 6px; align-items: center; } .bxa .input.sm { width: 110px; height: 28px; font-size: 12.5px; }
/* Loss & damage report (/jobs/:id/damage) */
.dmgpg .ph { flex-wrap: wrap; gap: 8px; } .dmstat { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.dmgpg .card + .card { margin-top: 14px; } .dmintro { width: 100%; resize: vertical; }
.dmtot { font-size: 14px; font-weight: 400; } .dmtot b { font-size: 16px; }
.dmtbl td { vertical-align: top; } .dmtbl tr.off td:not(:first-child) { opacity: .45; }
.dmtbl .dmnote { width: 100%; min-width: 220px; resize: vertical; font-size: 13px; }
.dmtbl .dmmoney { width: 110px; text-align: right; } .dmtbl .dmmoney.auto::placeholder { color: var(--text-2); }
.dmph { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 260px; }
.dmthumb { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; background: var(--hover); cursor: zoom-in; }
.dmthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmadd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
/* Quarantine */
.qtbl td { vertical-align: middle; } .qtbl .qnote { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtbl td.r .btn { margin-left: 6px; } .qpg .tabs { margin-top: 4px; }
.qtbl td { white-space: nowrap; } .qtbl .qcut { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .qtbl .qi { max-width: 26ch; } .qtbl .qn { max-width: 19ch; } .qtbl .qg { max-width: 14ch; } .qtbl .qc { max-width: 16ch; font-size: 12px; } .qst { border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; cursor: pointer; } .qst:hover { background: var(--hover); }
.qtbl .qcl { display: inline-block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.qtag { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--red-bg, #fdecec); color: var(--red); font-size: 12px; font-weight: 500; }
.qtbl .qfit { width: 1%; padding-right: 14px; } .tscroll .qtbl td:first-child { min-width: 0; }
/* Quarantine: scan box, photo in the list, the item card, phone layout */
.qscan { position: relative; margin: 0 0 14px; } .qscan .qsi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.qscan .input { width: 100%; height: 44px; padding-left: 38px; font-size: 15px; }
.qtbl .qth { width: 44px; padding-top: 4px; padding-bottom: 4px; position: relative; }
.qtbl .qth img, .qtbl .qth i { display: block; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--hover); border: 1px solid var(--line); }
.qtbl .qth span { position: absolute; right: 4px; bottom: 2px; font-size: 11px; background: var(--surface); border-radius: 4px; padding: 0 3px; border: 1px solid var(--line); }
.qtbl .qp { max-width: 14ch; display: block; }
.qcard .qhd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .qcard h2 a { color: inherit; text-decoration: none; } .qcard h2 a:hover { color: var(--accent); }
.qphotos { margin-top: 14px; } .qbig { position: relative; border-radius: 10px; overflow: hidden; background: var(--hover); }
.qbig img { display: block; width: 100%; max-height: 340px; object-fit: contain; } .qbig .qn { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.qthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qthumbs button, .qadd { width: 54px; height: 54px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--hover); cursor: pointer; }
.qthumbs button.on { outline: 2px solid var(--accent); outline-offset: 1px; } .qthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qadd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--accent); border-style: dashed; background: none; }
.qnoph { padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; } .qnoph label { cursor: pointer; }
.qcard .qnote { width: 100%; resize: vertical; } .qcard .qtext { margin: 0; white-space: pre-wrap; }
.qfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 14px; } .qf small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.qacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .qacts .btn.on { box-shadow: 0 0 0 2px var(--accent-bg); }
.qform { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); } .qform .field { display: grid; gap: 4px; margin-bottom: 8px; } .qform textarea, .qform input { width: 100%; }
.qtime { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); } .qtime li { position: relative; padding: 0 0 12px 8px; }
.qtime li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
@media (max-width: 760px) {
  .qtbl thead { display: none; } .qtbl, .qtbl tbody { display: block; } .tscroll .qtbl td:first-child { min-width: 0; }
  .qtbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .qtbl td, .qtbl .qfit { display: block; border: 0; padding: 0; white-space: normal; width: auto; } .qtbl .qcl { display: inline; max-width: none; }
  .qtbl .qth:has(i) { display: none; } .qtbl .qth { width: 34px; }
  .qtbl td:nth-child(4) { flex: 1 1 50%; font-weight: 600; } .qtbl .qcut { max-width: none; white-space: normal; display: inline; }
  .qtbl td:nth-child(5), .qtbl td:nth-child(6), .qtbl td:nth-child(9) { display: none; }
  .qtbl td:nth-child(7) { flex: 1 1 100%; color: var(--text-2); } .qtbl td:nth-child(8) { flex: 1 1 100%; }
  .qtbl td:nth-child(10) { flex: 1 1 auto; } .qtbl td:nth-child(11) { margin-left: auto; }
  .qfacts { grid-template-columns: 1fr; } .qscan .input { font-size: 16px; }
}
.qtbl .qth i { background: none; border-color: transparent; }
/* ---------- Chat ---------- */
.side a .navbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 11px/18px var(--font); text-align: center; }
.viewsw .vcn, .btn .vcn { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--line-strong); color: var(--text); font: 600 11px/16px var(--font); text-align: center; }
.viewsw .vcn.new { background: var(--accent); color: var(--on-accent); }
.view.chatview { overflow: hidden; }
.chat { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 100%; min-height: 0; }
.chlist { border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.chhead { display: flex; align-items: center; gap: 4px; padding: 14px 12px 0 16px; margin: 0; min-height: 0; } .chhead h1 { margin: 0; font-size: 18px; }   /* the title goes into the top bar on wide screens */
.chfindrow { display: flex; align-items: center; gap: 4px; padding: 12px 10px 10px 0; } .chfindrow .chfind { flex: 1; min-width: 0; height: 34px; margin: 0 4px 0 12px; }
.chfindrow .iconbtn { flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--text-2); } .chfindrow .iconbtn:hover { background: var(--hover); color: var(--text); }
.chhead .iconbtn { font-weight: 600; font-size: 13px; }
.chfind { margin: 0 12px 8px; }
#chNav { overflow: auto; padding: 0 6px 16px; }
.chwh > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .chwh > summary::-webkit-details-marker { display: none; }
.chwh > summary::before { content: '›'; display: inline-block; width: 10px; transition: transform .12s; } .chwh[open] > summary::before { transform: rotate(90deg); }
.chhome { font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); }
.chsub { padding: 6px 10px 2px 22px; font-size: 11px; color: var(--muted); }
.chsec { padding: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.chrow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 7px; color: var(--text-2); cursor: pointer; font-size: 14px; }
.chrow:hover { background: var(--hover); } .chrow.on { background: var(--accent-bg); color: var(--accent); } .chrow.unread { color: var(--text); font-weight: 600; } .chrow.muted { opacity: .55; }
.chrow .chn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--hover); color: var(--muted); font: 600 12px var(--font); flex: none; }
.chrow.on .chic { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.chb { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--line-strong); color: var(--text); font: 600 11px/18px var(--font); text-align: center; }
.chb.at { background: var(--accent); color: var(--on-accent); }
.chres { display: grid; gap: 2px; padding: 8px 10px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: 13px; } .chres:hover { background: var(--hover); }
.cav { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: none; background: hsl(var(--h) 45% 88%); color: hsl(var(--h) 45% 28%); font: 600 12px var(--font); }
.chrow .cav { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.chmain { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; position: relative; background: var(--bg); }
.chmain.drop::after { content: 'Drop photos or PDFs to add them'; position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-bg) 80%, transparent); color: var(--accent); font-weight: 600; z-index: 3; }
.chpick { display: grid; place-items: center; height: 100%; }
.chtop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chtop .chtitle { flex: 1; min-width: 0; } .chtop h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chtop h2 a { color: inherit; } .chback { display: none; font-size: 22px; }
.chbell { position: relative; } .chmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 200px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chmenu button { all: unset; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; } .chmenu button:hover { background: var(--hover); } .chmenu button.on { color: var(--accent); font-weight: 600; }
.chlog { overflow: auto; padding: 12px 0 8px; overscroll-behavior: contain; }
.chmore, .chempty { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }
.chday, .chnew { display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.chday::before, .chday::after, .chnew::before, .chnew::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chnew { color: var(--accent); } .chnew::before, .chnew::after { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.chm { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 6px 16px; }
.chm.join { padding-top: 1px; padding-bottom: 1px; } .chm:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); } .chm.hl { background: var(--accent-bg); }
.chm .cht { font-size: 11px; color: var(--muted); text-align: right; padding-top: 4px; opacity: 0; } .chm:hover .cht { opacity: 1; }
.chwho { display: flex; align-items: baseline; gap: 8px; } .chwho b { font-size: 14px; }
.chtext { font-size: 14px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; } .chtext a { color: var(--accent); }
.chmen { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.chmen.me { background: color-mix(in srgb, #f5c518 35%, transparent); color: var(--text); }
.chjob { font-family: var(--mono); font-size: 13px; }
.chpics { display: grid; gap: 4px; margin-top: 6px; max-width: 420px; } .chpics.n1 { grid-template-columns: minmax(0, 320px); } .chpics.n2 { grid-template-columns: 1fr 1fr; } .chpics.n3 { grid-template-columns: 1fr 1fr 1fr; }
.chpics button { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--hover); cursor: zoom-in; aspect-ratio: 4 / 3; }
.chpics.n1 button { aspect-ratio: auto; max-height: 260px; } .chpics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chreacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chreacts button { all: unset; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; cursor: pointer; }
.chreacts button.mine { border-color: var(--accent); background: var(--accent-bg); }
.chtools { position: absolute; right: 14px; top: -12px; display: none; gap: 1px; padding: 2px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chm:hover .chtools, .chm:focus-within .chtools { display: flex; } .chtools button { all: unset; width: 28px; height: 26px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; font-size: 14px; }
.chtools button:hover { background: var(--hover); }
.chm.del .chbody { opacity: .7; }
.chedit { width: 100%; resize: vertical; }
.chjump { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 4; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.chcomp { position: relative; padding: 8px 16px 14px; background: var(--bg); }
.chin { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); }
.chin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.chin textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 15px; line-height: 1.4; padding: 6px 4px; max-height: 180px; }
.chcam { cursor: pointer; } .chsend { flex: none; }
.chpre { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 6px; } .chpre[hidden] { display: none; }
.chpv { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); } .chpv img { width: 100%; height: 100%; object-fit: cover; }
.chpv button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; }
.chat-pop { position: absolute; left: 16px; bottom: calc(100% - 4px); z-index: 6; display: grid; min-width: 260px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chat-pop button { all: unset; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; } .chat-pop button.on, .chat-pop button:hover { background: var(--accent-bg); }
.chat-pop .cav, .chpeople .cav { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; }
.chpeople { display: grid; gap: 2px; max-height: 50vh; overflow: auto; margin: 10px 0; } .chpeople button { all: unset; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.chpeople button:hover { background: var(--hover); } .chpeople .muted { margin-left: auto; }
.chatpop { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 2px; width: min(340px, calc(100vw - 36px)); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow); text-align: left; cursor: pointer; font: inherit; color: var(--text); transform: translateY(20px); opacity: 0; transition: transform .2s, opacity .2s; }
.chatpop.on { transform: none; opacity: 1; } .chatpop span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slk .slpic { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; margin: 4px 4px 0 0; } .slk h2 a { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; } .chat.conv .chlist { display: none; } .chat:not(.conv) .chmain { display: none; }
  .chback { display: inline-grid; } .chtools { right: 8px; } .chm { padding: 6px 10px; } .chcomp { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  .chin textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chatpop { transition: none; } }
/* chat: line icons, PDFs */
.ci { display: block; flex: none; }
.chhead .iconbtn { display: inline-grid; place-items: center; } .chback { place-items: center; }
.chbell .btn { display: inline-flex; align-items: center; gap: 6px; }
.chtop .chjob { display: inline-flex; align-items: center; gap: 6px; flex: none; text-decoration: none; font: 500 12.5px var(--font); color: var(--text); white-space: nowrap; } .chtop .chjob svg { color: var(--muted); }
@media (max-width: 600px) { .chtop .chjob { font-size: 0; gap: 0; width: 32px; justify-content: center; padding: 0; } }
.chtools button { color: var(--text-2); } .chtools button:hover { color: var(--accent); }
.chreacts button { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .chreacts button.mine { color: var(--accent); }
.chreacts button span { font-size: 12px; font-weight: 500; }
.chfiles { display: grid; gap: 6px; margin-top: 6px; max-width: 420px; }
.chfile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; }
.chfile:hover { border-color: var(--accent); } .chfi { display: grid; justify-items: center; color: var(--red); } .chfi b { font-size: 11px; letter-spacing: .04em; margin-top: -2px; }
.chfn { display: grid; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; } .chfn small { color: var(--muted); font-weight: 400; } .chfn { white-space: nowrap; text-overflow: ellipsis; }
.chfd { color: var(--muted); padding: 4px; border-radius: 6px; } .chfd:hover { color: var(--accent); background: var(--hover); }
.chpd { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; height: 64px; padding: 0 8px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--red); }
.chpd span { display: grid; min-width: 0; color: var(--text); font-size: 12px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .chpd small { color: var(--muted); font-weight: 400; }
.chpd button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; } .chpd button:hover { background: var(--hover); color: var(--text); }
.chpd.up { opacity: .6; } .chpv button { display: grid; place-items: center; }
.slre { display: inline-flex; align-items: center; gap: 3px; } .slre .ci, .slfile .ci { display: inline-block; vertical-align: -2px; }
.slfile { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--accent); }
/* the job's Files drawer */
.viewsw > button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.viewsw > button:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); } .viewsw > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jfdrop { display: grid; justify-items: center; gap: 4px; margin: 16px 0 6px; padding: 18px; border: 1.5px dashed var(--line-strong); border-radius: 12px; text-align: center; cursor: pointer; }
.jfdrop:hover, .jfdrop.over { border-color: var(--accent); background: var(--accent-bg); } .jfbig { color: var(--accent); } .jfdrop select { font: inherit; border: 0; background: none; color: var(--accent); font-weight: 500; }
.jfrow { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.jfopen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; padding: 4px; border-radius: 8px; } .jfopen:hover { background: var(--hover); }
.jft { flex: none; width: 36px; height: 40px; display: grid; place-items: center; border-radius: 6px; font: 700 11px var(--font); letter-spacing: .03em; color: #fff; background: #6b7280; }
.jft.t-pdf { background: #c2410c; } .jft.t-image { background: #0b7a73; } .jft.t-sheet { background: #15803d; } .jft.t-doc { background: #1d4ed8; }
.jfn { display: grid; min-width: 0; } .jfn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jfn small { color: var(--muted); }
.jfk { max-width: 130px; font-size: 12px; } .jfrow .iconbtn { display: inline-grid; place-items: center; color: var(--muted); } .jfrow .iconbtn:hover { color: var(--accent); }
/* iPhone Home Screen app (iOS 26): the system fades the strip just under the status bar; start the nav below it */
@media (display-mode: standalone) and (max-width: 900px) { .ws { padding-top: calc(env(safe-area-inset-top) + 18px); } .layer, .jv .drawer { padding-top: calc(env(safe-area-inset-top) + 18px); } }
/* technicians with access (js/access.js): a job's Access drawer and the project page's card */
.jaccess h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 4px; display: flex; gap: 6px; align-items: baseline; }
.jaccess h3 a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.acrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.acav { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.acn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .acn small { color: var(--muted); font-size: 11.5px; }
.acrow .iconbtn { display: inline-grid; place-items: center; color: var(--muted); } .acrow .iconbtn:hover { color: var(--danger, #c0392b); }
.acadd { width: 100%; margin-top: 10px; }
/* a project's jobs: drag grip, sort buttons */
.pjobs .pjh { width: 22px; padding-right: 0; } .tscroll .pjobs td:first-child, .pjobs td:first-child { min-width: 0; }
.pjgrip { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--muted); cursor: grab; border-radius: 5px; }
.pjgrip svg { width: 16px; height: 16px; fill: currentColor; } .pjgrip:hover, .pjgrip:focus-visible { color: var(--accent); background: var(--accent-bg); outline: none; }
.pjobs tr.dragging { opacity: .45; } .pjobs tr.dragging td { background: var(--accent-bg); }
.pjsort { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-weight: 400; }
/* Edit project drawer */
.pedit { display: flex; flex-direction: column; gap: 14px; }
.pedit .fd { display: flex; flex-direction: column; gap: 4px; position: relative; } .pedit .fd > span { font-size: 12px; color: var(--text-2); font-weight: 500; }
.pedit .fd small { font-size: 11.5px; } .pedit textarea { resize: vertical; } .pedit .fd .input { width: 100%; box-sizing: border-box; }
.pedit .sugg { position: absolute; z-index: 30; top: 60px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: grid; }
.pedit .sugg[hidden] { display: none; } .pedit .sugg button { all: unset; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .pedit .sugg button:hover { background: var(--accent-bg); }
.pefoot { display: flex; justify-content: flex-end; }
.btn .vcn[hidden] { display: none; } .btn[data-projfiles] { gap: 6px; }
.jfiles h3 a { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Settings > Action log */
.alog { max-width: 1200px; } .alf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .alf #alQ { flex: 1; min-width: 240px; }
.alf label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.altbl td { vertical-align: top; } .tscroll .altbl td:first-child { min-width: 0; } .altbl .qcut { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.altbl tr.alerr td:first-child { box-shadow: inset 3px 0 0 var(--danger, #c0392b); } .alerrt { color: var(--danger, #c0392b); }
.altbl tr.aldet td { background: var(--bg); } .alk { color: var(--muted); }
.altbl td:nth-child(2) { white-space: nowrap; }
.alf #alUser { width: auto; max-width: 240px; }
/* chat: new conversation, people of a channel */
.chnewd { width: min(520px, calc(100vw - 32px)); display: grid; gap: 12px; } .chnewd .form { margin: 0; }
.chpk { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; } .chpk:hover { background: var(--hover); }
.chpk input { margin: 0; } .chpick2 { max-height: 260px; overflow: auto; margin-top: 6px; }
#chPeople { display: inline-flex; align-items: center; gap: 4px; }
.chpk .grow { flex: 1; } .chpk .iconbtn { display: inline-grid; place-items: center; color: var(--muted); }
/* Reports (js/reports.js): pastel, as the dashboard. Teal = this period, grey = the one before; lavender / peach the 2nd and 3rd part of a
   mix (checked 2026-11-06: every pair 17+ apart in normal vision, 8.6+ in colour-blind simulation; legends name each part).
   --c1l: lines and dots stay dark teal, so a 2 px line still reads on white */
.rp { --c1: #4fb3aa; --c1l: #0b7a73; --c2: #9a8ae0; --c3: #eea56f; --cmp: #c9ccd3; --cmpd: #6b7280; position: relative; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp { --c1: #2fa79d; --c1l: #5eead4; --c2: #8f80dc; --c3: #e3925a; --cmp: #4b4f57; --cmpd: #9aa0aa; } }
:root[data-theme="dark"] .rp { --c1: #2fa79d; --c1l: #5eead4; --c2: #8f80dc; --c3: #e3925a; --cmp: #4b4f57; --cmpd: #9aa0aa; }
.rp .ph { flex-wrap: wrap; } .rptabs { margin: 0 0 0 8px; } .rpper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rpper .input { width: auto; }
.rpnote { margin: 0 0 14px; max-width: 1100px; }
.rpk8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.rpk8 .rpk { background: var(--surface); }
.rpk { padding: 14px 16px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.rpk small { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rpk > b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpk > span { font-size: 12px; color: var(--muted); } .rpk .rpd { justify-self: start; }
.rpk4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; margin: 4px 0 10px; } .rpk4 .rpk { padding: 8px 0; border-top: 2px solid var(--text); } .rpk4 .rpk > b { font-size: 19px; }
.rpd { font: 600 11px var(--mono, 'JetBrains Mono', monospace); color: var(--muted); white-space: nowrap; } .rpd.up { color: #15803d; } .rpd.dn { color: #b91c1c; }
.rpwarn { color: #b91c1c; font-weight: 600; } .rpwarnbox { margin-bottom: 10px; }
.rpg2, .rpg3 { display: grid; gap: 14px; margin-bottom: 14px; } .rpg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpg2 > .card, .rpg3 > .card { min-width: 0; } .rp .card h2 .muted { font-weight: 400; font-size: 12.5px; }
.rpc { width: 100%; height: auto; display: block; overflow: visible; }
.rpc .grid { stroke: var(--line); stroke-width: 1; } .rpc .ax { font: 11px var(--mono, 'JetBrains Mono', monospace); fill: var(--muted); }
.rpc .s1 { fill: var(--c1); } .rpc .sq { fill: var(--cmp); } .rpc .hit { fill: transparent; } .rpc .cmp { stroke: var(--cmpd); stroke-width: 2; }
.rpc .l1 { fill: none; stroke: var(--c1l); stroke-width: 2; } .rpc .lcmp { fill: none; stroke: var(--cmp); stroke-width: 2; } .rpc .dot { fill: var(--c1l); stroke: var(--surface); stroke-width: 2; }
.rpc .rng { stroke: var(--cmpd); stroke-width: 1.5; } .rpc .sd { fill: var(--c1); fill-opacity: .45; stroke: var(--surface); stroke-width: 1; } .rpc .sd:hover { fill-opacity: 1; }
.rpc g:hover .s1 { filter: brightness(1.12); }
/* Reports › Market */
.mkrep { padding: 6px 4px 10px; } .mkrep .rpt td, .mkrep .rpt th { white-space: nowrap; padding: 5px 7px; }
.mkrep > .rpg2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .mkrep .rph3:first-child { margin-top: 4px; } .mkrep .form { margin-top: 10px; }
.mktbl th, .mktbl td.num, .mktbl td.r { white-space: nowrap; } .mktbl td:first-child { min-width: 170px; }
.rpt .mkloss { color: var(--red); }
.mktbl .mkprof { font-size: 12px; color: var(--muted); margin-top: 2px; } .mktbl .mkprof.mkloss { color: var(--red); }   /* profit under the revenue */
.mktbl .mkhint { font: 400 11px var(--font); text-transform: none; letter-spacing: 0; color: var(--muted); }   /* Market: the profit columns, a loss in red */
.mkseg { display: flex; flex-wrap: wrap; gap: 2px 14px; } .mkbrands { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mkform { margin-top: 10px; } .mkform summary { cursor: pointer; color: var(--accent); font-size: 13px; } .mkform .form { margin-top: 8px; }
.rppick { margin-left: 6px; min-height: 22px; padding: 0 7px; font-size: 11.5px; }
.rppk { width: min(820px, 96vw); max-width: none; } .rppk .rph3 { margin-top: 10px; }
.ppkg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .ppkg .seg { margin: 6px 0; flex-wrap: wrap; }
.ppklist { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; } .ppklist .chpk { font-size: 13px; } .ppklist p { margin: 6px; }
.ppkterms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .ppkx { border: 0; background: none; padding: 0 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; } .ppkx:hover { color: var(--red); }
.ppkadd { display: flex; gap: 8px; } .ppkadd .input { flex: 1; }
@media (max-width: 700px) { .ppkg { grid-template-columns: 1fr; } }
.rpc .s3 { fill: var(--c3); } .rpc g:hover .s3 { filter: brightness(1.06); } .rpt tr.tot td { border-top: 1px solid var(--line-strong); }
.rpmini { width: 100%; table-layout: fixed; margin-top: 6px; } .rpmini td { text-align: center; padding: 0; } .rpmini small { display: block; color: var(--muted); font-size: 11px; } .rpmini span { font-size: 11px; }
.rph { display: grid; gap: 6px; } .rphr { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 70px 64px; align-items: center; gap: 10px; font-size: 13px; }
.rphn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rphv { text-align: right; }
.rphb { position: relative; height: 10px; background: var(--hover); border-radius: 0 4px 4px 0; } .rphb i { display: block; height: 100%; background: var(--c1); border-radius: 0 4px 4px 0; }
.rphb b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--cmpd); }
.rph3 { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.rpstack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin: 6px 0; } .rpstack i { background: var(--c1); } .rpstack .s2 { background: var(--c2); } .rpstack .s3 { background: var(--c3); }
.rplegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; margin-bottom: 10px; } .rplegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--c1); }
.rplegend .s2 { background: var(--c2); } .rplegend .s3 { background: var(--c3); }
.rpm { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--hover); vertical-align: middle; margin-right: 6px; overflow: hidden; } .rpm i { display: block; height: 100%; background: var(--c1); } .rpm.hi i { background: var(--c3); }
.rpt td, .rpt th { padding: 6px 8px; } .tscroll .rpt td:first-child { min-width: 0; } .rpall td:first-child { min-width: 220px; }
.rp th.sortable button { all: unset; cursor: pointer; } .rp th.sortable.on button { color: var(--accent); }
.rptip { position: absolute; z-index: 20; pointer-events: none; background: var(--inv-bg); color: var(--inv-text); font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 320px; box-shadow: var(--shadow); }
@media (max-width: 1100px) { .rpg3 { grid-template-columns: 1fr; } .rpk8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rpg2 { grid-template-columns: 1fr; } .rpk4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rphr { grid-template-columns: minmax(0, 1fr) 60px 56px; } .rphb { grid-column: 1 / -1; order: 3; } }
.rptake { margin-bottom: 14px; } .rptake ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .rptake li { line-height: 1.45; } .rptake li::marker { color: var(--accent); font-weight: 600; }
.rpc .vl { font: 600 11px var(--mono, 'JetBrains Mono', monospace); fill: var(--text); } .rplegend .sq { background: var(--cmp); }
.rphow summary { cursor: pointer; list-style: none; } .rphow summary h2 { display: inline; } .rphow summary::before { content: '▸ '; color: var(--muted); } .rphow[open] summary::before { content: '▾ '; }
.rphow ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 760px) { .rpk > b { font-size: 19px; } }
/* Reports › Costs */
.rp .input.sm { height: 28px; font-size: 12.5px; padding: 0 6px; max-width: 220px; } .rp .filters .input.sm { width: auto !important; flex: 1; min-width: 180px; }
.rp .filters .input { flex: 1; min-width: 160px; width: auto !important; }
.rpsug { margin-bottom: 14px; } .rpsug ol { list-style: none; margin: 0; padding: 0; }
.rpsug li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.rpsug li:first-child { border-top: 0; } .rpsug li .pill { justify-self: start; margin-top: 1px; } .rpsug li p { margin: 2px 0 0; color: var(--muted); line-height: 1.45; max-width: 820px; }
.rpsugv { display: flex; gap: 10px; align-items: center; text-align: right; } .rpsugv b { display: block; font-size: 15px; } .rpsugv small { display: block; color: var(--muted); font-size: 11px; }
.rpsub > td { background: var(--hover); padding: 4px 12px 10px !important; } .rpsub .rpt td { font-size: 12.5px; } tr.on > td { background: var(--accent-bg); }
.rpjob { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); } .rpjob:first-child { border-top: 0; }
.rpjob .r { text-align: right; } .rpjob .r .input.sm { width: 60px; display: inline-block; }
.rpjc { display: grid; gap: 4px; margin: 8px 0; } .rpjc label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; } .rpjc .money { width: 100px; margin-left: auto; text-align: right; }
.rpjb { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
#cxJst { margin: 0 0 6px; } #cxCats summary h2 { display: inline; } #cxCats .rpt .input { max-width: 280px; }
@media (max-width: 760px) { .rpsug li { grid-template-columns: 1fr; gap: 4px; } .rpsugv { justify-content: flex-start; text-align: left; } .rpjob { grid-template-columns: 1fr; } .rpjob .r { text-align: left; } .rpjb { justify-content: flex-start; } }
/* Reports › Today */
.rpc .fc { fill: var(--c1); fill-opacity: .4; } .rpc .today { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.rplegend .fcl { background: var(--c1); opacity: .4; } .rplegend .rngl { width: 2px !important; background: var(--cmpd); }
.rptoday th[scope=row], .rpsplit th[scope=row] { font: 500 13px var(--font, inherit); text-transform: none; letter-spacing: 0; color: var(--text); text-align: left; min-width: 200px; }
.rptoday th[scope=row] .muted, .rpsplit th[scope=row] .muted { font-weight: 400; font-size: 11.5px; } .rptoday td, .rptoday th, .rpsplit td, .rpsplit th { vertical-align: top; }
.rpsplit thead .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rptoday .rpnow { background: var(--accent-bg); } .rptoday thead th:nth-child(3) { background: var(--accent-bg); }
.chpdlg .seg { margin-bottom: 2px; } .chpdlg #cpNote { margin: 8px 0; }
/* Inspections */
.insp h3 { font-size: 15px; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; } .inspph { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: var(--hover); float: right; margin: 0 0 8px 12px; }
.inspg { margin: 10px 0; padding: 12px 14px; } .inspg details summary { cursor: pointer; font-weight: 500; margin-top: 4px; } .insptools { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; } .insptools li { margin-bottom: 3px; break-inside: avoid; }
.insbefore { margin-top: 10px; } .insbefore ul, .inspgd .note ul { margin: 4px 0 0; padding-left: 18px; }
.inspsteps { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; counter-reset: s; }
.inspsteps > li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.inspsteps > li.good { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); } .inspsteps > li.bad { border-color: var(--red); background: var(--red-bg); } .inspsteps > li.na { opacity: .7; }
.inspsteps p { margin: 4px 0; line-height: 1.45; } .isthead { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .isfail { color: var(--text-2); font-size: 13px; }
.isact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .ismeas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; } .ismeas .input { width: 110px; }
.isrefs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; } .isrefs img, .isthumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.isph { position: relative; } .isph .iconbtn { position: absolute; top: -6px; right: -6px; background: var(--surface); border: 1px solid var(--line); width: 22px; height: 22px; border-radius: 50%; }
.inspfoot { display: flex; gap: 8px; align-items: center; position: sticky; bottom: -28px; background: var(--surface); padding: 12px 0; border-top: 1px solid var(--line); }
.inspgd summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .inspgd summary h2 { margin: 0; font-size: 16px; }
.inspgd { padding: 0; } .inspgd > .inspgrid { padding: 0 16px 16px; }
.inspgd summary.gdrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) 70px 150px 96px 80px; gap: 14px; align-items: center; padding: 12px 16px; list-style: none; border-radius: inherit; }
.inspgd summary.gdrow::-webkit-details-marker { display: none; }
.inspgd summary.gdrow:hover { background: var(--hover); }
.gdrow h2 { font-size: 14.5px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.gdchev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; justify-self: center; }
.inspgd[open] .gdchev { transform: rotate(45deg); }
.gdevery { font-size: 12.5px; color: var(--text-2); }
.gdnum { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gdnum b { color: var(--text); font-weight: 500; }
.inspgd + .inspgd { margin-top: 6px; }
@media (max-width: 760px) { .inspgd summary.gdrow { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 4px; } .gdrow h2 { white-space: normal; }
  .gdrow .gdevery { grid-column: 2 / -1; } .gdrow .gdnum { grid-column: auto; text-align: left; } .gdrow .gdnum:first-of-type { grid-column: 2; } }
.inspgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; margin-top: 12px; } .inspsteps.ro > li { counter-increment: s; } .inspsteps.ro .isthead b::before { content: counter(s) '. '; }
.insset { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; } .insset .check, .insset .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) { .inspgrid { grid-template-columns: 1fr; } }
/* customer signatures (warehouse) */
.whsign { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0; display: grid; gap: 8px; background: var(--surface); }
.whsignh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .whsig { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--surface); cursor: pointer; }
.whsig:hover { background: var(--hover); } .whsig img { width: 120px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--line); }
.whsigdlg { width: min(560px, 96vw); } .sgpad { position: relative; border: 1px dashed var(--line-strong); border-radius: 10px; background: #fff; margin: 8px 0 12px; }
.sgpad canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; } .sgline { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1px solid #c8c8cc; font-size: 11px; color: #8a8a93; padding-top: 2px; pointer-events: none; }
.sgimg { width: 100%; max-height: 200px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
/* My bookings (external users) */
.mypg { max-width: 920px; } .mycard { margin-bottom: 12px; padding: 14px 16px; } .mycard h2 { margin: 4px 0 2px; font-size: 17px; }
.mydates { display: flex; gap: 14px; align-items: center; margin: 10px 0; padding: 10px 12px; background: var(--hover); border-radius: 10px; flex-wrap: wrap; } .mydates small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.myarrow { color: var(--muted); } .myitems summary { cursor: pointer; font-weight: 500; } .myitems ul { margin: 6px 0 0; padding-left: 18px; columns: 2 260px; font-size: 13px; } .myitems li { break-inside: avoid; margin-bottom: 2px; }
.mydocs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; } .myact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .mywh { margin-top: 16px; }
/* inspection drawings and gear gallery */
.isbody { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; align-items: start; } .isart { color: var(--text-2); }
.insart { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.insart .a { stroke: var(--accent); } .insart .x { stroke: var(--red); stroke-width: 2.5; } .insart .f { fill: currentColor; stroke: none; } .insart .w { fill: var(--surface); }
.insart text { fill: currentColor; stroke: none; text-anchor: middle; font: 11px var(--mono, 'JetBrains Mono', monospace); } .insart text.m { font-size: 12px; font-weight: 600; } .insart text.a { fill: var(--accent); } .insart text.s { font-size: 11px; }
.insgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.insgal a { display: grid; gap: 3px; text-decoration: none; color: var(--text-2); font-size: 11px; line-height: 1.25; } .insgal img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--hover); border-radius: 8px; }
.insgal span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 560px) { .isbody { grid-template-columns: 1fr; } .isart { max-width: 220px; } }
.inspgrid > *, .inspsteps > li, .isbody > * { min-width: 0; } .isbody { grid-template-columns: minmax(0, 1fr) minmax(110px, 32%); }
@media (max-width: 1180px) { .inspgrid { grid-template-columns: 1fr; } }
/* the Products tabs (Products · Categories · Quarantine · Inspections) share one header: same title, place and tab row */
.ph { min-height: 34px; }
.pv .pvtop { max-width: none; padding-bottom: 0; } .pv .pvtop .tabs { margin-bottom: 0; }
.pv .pvtop .btn { min-height: 32px; padding: 0 12px; border-radius: var(--r); font-size: inherit; }   /* the workspace's buttons are small; the header's are page size */
/* section tabs sit in the title row, after the title (as on Reports): Jobs, Products, Vehicles, Reports */
.ph .tabs { margin: 0 0 0 8px; }
/* Stock take */
.sthead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .sthead h2 { margin: 0; font-size: 16px; }
.stlast { margin: -6px 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; border: 1px solid var(--line); }
.stlast.ok { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); } .stlast.warn { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.stlast.bad { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); } .stlast.again { background: var(--hover); }
.stbar { display: block; height: 5px; background: var(--hover); border-radius: 3px; margin-top: 6px; overflow: hidden; } .stbar i { display: block; height: 100%; background: var(--accent); }
tr.stg td { background: var(--hover); padding-top: 6px; padding-bottom: 6px; } .sttbl .input.sm { width: 84px; text-align: right; }

/* a text button inside a sentence (Show them, Undo) */
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--ink, inherit); }
.oldnote { margin: 12px 2px; }
/* Jobs to invoice (Invoices): finished jobs on no invoice */
.chk-tbl td.act { white-space: nowrap; text-align: right; }
.chk-tbl td.act .btn + .btn { margin-left: 6px; }
.chk-why { color: var(--muted); font-size: 12px; }
/* invoice page: payments card */
.paylist { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.paylist li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.paylist li .n { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paysum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; margin-bottom: 10px; }
.paysum b { font-variant-numeric: tabular-nums; text-align: right; }
.paysum .owed { font-weight: 600; }
.chkrow { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.chk-skip summary { cursor: pointer; font-size: 13px; margin-bottom: 8px; }
.chkwhy { margin: 8px 0 12px; }
.chkwhy .input { margin-top: 4px; }

/* side menu: the arrows beside the logo narrow it to icons (core.js SIDE; remembered); wide screens only (phones have the top bar) */
.sidehead { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sidetog { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; flex: none; }
.sidetog:hover { background: var(--hover); color: var(--text); }
.sidetog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.side .me .ini { display: none; }
@media (min-width: 901px) {
  .ws { transition: grid-template-columns .2s ease; }
  .ws.sidemin { --side: 60px; }
  .sidemin .side { padding: 12px 8px; align-items: center; }
  .sidemin .sidehead { flex-direction: column; } .sidemin .side .brand { display: none; }
  .sidemin .sidetog { margin-bottom: 10px; } .sidemin .sidetog svg { transform: rotate(180deg); }
  .sidemin .side a[data-nav] { position: relative; justify-content: center; width: 42px; padding: 9px 0; }
  .sidemin .side a[data-nav] span { display: none; }
  .sidemin .side a .navbadge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; line-height: 16px; margin: 0; }
  .sidemin .side .sfoot { flex-direction: column; width: 100%; gap: 2px; }
  .sidemin .side .me { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
  .sidemin .side .me b, .sidemin .side .me { font-size: 0; } .sidemin .side .me b { display: none; }
  .sidemin .side .me .ini { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--text-2); font: 600 11px var(--font); }
}
@media (prefers-reduced-motion: reduce) { .ws, .sidetog svg { transition: none; } }
@media (max-width: 900px) { .sidetog { display: none; } .sidehead { display: none; } }

/* order screen: the line between the search column and the order is dragged to resize them (job.js; remembered) */
.view.job .jv .jmain > .col:nth-child(3) { position: relative; }
.colgrip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; z-index: 6; cursor: col-resize; touch-action: none; }
.colgrip::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.colgrip:hover::after, .jmain.resizing .colgrip::after { background: var(--accent); }
.view.job .jv .jmain.resizing { transition: none; user-select: none; cursor: col-resize; }
@container (min-width: 761px) {
  .view.job .jv .jmain.sized { grid-template-columns: 228px var(--midw) minmax(420px, 1fr); }
  .view.job .jv .jmain.sized.navoff { grid-template-columns: 40px var(--midw) minmax(420px, 1fr); }
}
@container (max-width: 760px) { .colgrip { display: none; } }

/* page titles and their tabs in the top bar (core.js liftTitle): the same on every page */
.toptitle { display: flex; align-items: center; gap: 12px; align-self: stretch; flex: none; }
.toptitle:empty, .topacts:empty { display: none; }
.topacts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; white-space: nowrap; }
.topacts:not(:empty) + .search { margin-left: 0; }
.topacts .rpper { flex-wrap: nowrap; }
.top { min-width: 0; overflow: hidden; }   /* so a bar too full shows as overflow (core.js puts the page's buttons back) */
.top .search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top #newJob { flex: none; white-space: nowrap; }
.toptitle h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.toptitle .crumb { color: var(--muted); text-decoration: none; white-space: nowrap; } .toptitle .crumb:hover { color: var(--accent); }
.toptitle .tabs { align-self: stretch; align-items: stretch; border-bottom: 0; margin: 0 0 0 8px; }
.toptitle .tabs a, .toptitle .tabs button { display: flex; align-items: center; margin-bottom: -1px; white-space: nowrap; }
.toptitle .seg, .toptitle .seg2 { flex: none; }
.ph.lifted-empty { display: none; }
.pg:has(> .ph.lifted-empty:only-child) { display: none; }   /* a title strip of its own (Products) with nothing left in it */

/* a record's title in the top bar (core.js liftTitle: the job's Booking / Warehouse pages, invoices): two lines, the name cut with … when long */
.toptitle.rec { align-self: center; flex: 0 0 auto; max-width: 56%; min-width: 0; overflow: hidden; }   /* the title keeps its width; the search box and badge give way */
.toptitle.rec .title { min-width: 0; max-width: 100%; }
.toptitle.rec .title h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.005em; display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; line-height: 1.3; }
.toptitle.rec .title h1 .no { font: 500 13px var(--mono); color: var(--text-2); text-decoration: none; }
.toptitle.rec .title h1 > .hlink, .toptitle.rec .title h1 .tt { min-width: min(14ch, 100%); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toptitle.rec .title .sub .pill, .jv .title .sub .pill { flex: none; font-size: 12px; padding-block: 0; }
.toptitle.rec .title .sub .invchips:empty { display: none; }
.toptitle.rec .title h1 .pill { flex: none; font-size: 12px; }
.toptitle.rec .title .sub { margin-top: 1px; display: flex; align-items: center; gap: 4px 10px; white-space: nowrap; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.toptitle.rec .title .sub .chip { padding: 0 6px; font-size: 12.5px; } .toptitle.rec .title .sub svg { width: 13px; height: 13px; }
.toptitle.recwh .title .sub b { color: var(--text-2); font-weight: 500; } .toptitle.recwh .title .sub .dt { display: inline-flex; align-items: center; gap: 6px; }
.topacts .viewsw > * { height: 30px; }
/* the header left on the page: the switch (when it stayed) on the totals' row, no empty first row */
.jv .jhead.jhead2.tlift { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jv .jhead2.tlift > .jrow { display: contents; }   /* totals, switch and buttons share the rows and wrap as they fit */
.jv .jhead2.tlift .hstats { order: 1; flex: 0 1 auto; width: auto; } .jv .jhead2.tlift .jacts { order: 2; margin-left: auto; } .jv .jhead2.tlift .viewsw { order: 3; }   /* totals | … | Expand kits, Actions | the switch at the far right */
.jv .jhead.tlift:not(.jhead2):not(:has(> :not(.title))) { display: none; }
.whjh.tlift:not(:has(> :not(.title))) { display: none; }
.whjh .viewsw { margin-left: auto; }   /* the job switch at the right, as on Booking */
@media (max-width: 520px) { .whjh .viewsw { max-width: 100%; } .whjh .viewsw > :not(.on) { font-size: 0; gap: 4px; padding: 0 11px; } }   /* phones: icons only but the open page, as on Booking */

/* the Agent inside ⌘K (core.js askAgent): the same card, taller; their words right in a grey bubble, the Agent's answer as plain text with
   links as chips and prepared changes as small cards (Apply opens the order screen with them). Teal marks the Agent, as on its page. */
.srow.agent .sic { color: var(--accent); } .srow.agent .ss kbd { margin-left: 4px; height: 16px; font-size: 11px; }
.spal.ask { height: min(640px, 80vh); max-height: none; }
.spal.ask .sbar > svg { color: var(--accent); }
.spal.ask .sres { padding: 0; }
.aconv { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 20px; }
.amsg { max-width: 92%; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.amsg.me { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--hover); white-space: pre-wrap; }
.amsg.ag p { margin: 0 0 6px; } .amsg.ag p:last-child { margin-bottom: 0; }
.amsg.ag ul { margin: 2px 0 8px; padding-left: 18px; } .amsg.ag li { margin: 2px 0; }
.amsg.ag b { font-weight: 600; }
.amsg.err { color: var(--red); }
.amsg.wait { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.amsg.wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: adot 1.2s ease-in-out infinite; }
.amsg.wait i:nth-child(2) { animation-delay: .15s; } .amsg.wait i:nth-child(3) { animation-delay: .3s; } .amsg.wait span { margin-left: 6px; }
@keyframes adot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .amsg.wait i { animation: none; opacity: .6; } }
.achips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.achip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--text-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.achip b { font: 600 11px var(--mono); color: var(--accent); } .achip:hover, .achip:focus-visible { border-color: var(--accent); color: var(--text); }
.acard { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ach { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ach small { color: var(--muted); font-size: 12px; }
.aclist { list-style: none; margin: 0; padding: 6px 12px; display: grid; gap: 3px; font-size: 12.5px; }
.aclist li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 0 !important; margin: 0 !important; }
.aclist li > span { font: 600 11px var(--mono); color: var(--text-2); }
.aclist li > span.add { color: var(--accent); } .aclist li.off { color: var(--muted); text-decoration: line-through; } .aclist li.off > span { color: var(--red); text-decoration: none; }
.aclist li.dt s { display: block; color: var(--muted); font-size: 11.5px; text-decoration: none; }
.acf { display: flex; justify-content: flex-end; padding: 8px 10px; background: var(--hover); }
.anote { display: block; width: calc(100% - 20px); box-sizing: border-box; margin: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; resize: vertical; white-space: pre-wrap; }
textarea.anote:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; }
p.anote { border-color: transparent; background: none; padding-top: 0; color: var(--muted); }
@media (pointer: coarse) { textarea.anote { font-size: 16px; } }
.acf .btn svg { margin-left: 2px; } .adone { font-size: 12px; color: var(--muted); }
.aintro { padding: 22px 18px; color: var(--muted); font-size: 12.5px; }
.aintro b { display: block; margin-bottom: 8px; color: var(--text); font-size: 13.5px; font-weight: 500; }
.aintro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: start; }
.aintro button { all: unset; cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); font-size: 13px; }
.aintro button:hover, .aintro button:focus-visible { border-color: var(--accent); color: var(--text); background: var(--accent-bg); }
.spal.ask .sfoot button { all: unset; cursor: pointer; color: var(--accent); font-size: 11.5px; } .spal.ask .sfoot button:hover { text-decoration: underline; }
.spal.ask .sfoot button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.spal.ask .sfoot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .spal.ask .sfoot > span:first-child { display: none; } }
/* iPhone zooms the page into any field under 16 px when it is tapped (the ⌘K box then sat off-screen to the left): 16 px on touch screens */
@media (pointer: coarse) { .sbar input { font-size: 16px; } }

/* Jobs › Cards (pages.js jobCards): the jobs as cards across the page, Outgoing and Incoming, in the dashboard card's language
   (big time, number + title, client, one warning line, a progress bar in the warehouse stage colours, quiet chips). */
.filters .grow { flex: 1; }
.jvw button { display: inline-flex; align-items: center; gap: 6px; }
.jkv { display: grid; gap: 28px; }
.jk-sec > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: 17px; font-weight: 600; }
.jk-sec > h2 em { font: 500 13px var(--mono); color: var(--muted); font-style: normal; }
.jk-sec > h2 small { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.jk-sec.out > h2::before, .jk-sec.back > h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; align-self: center; background: var(--st-pr-fill); }
.jk-sec.back > h2::before { background: var(--st-in-fill); }
.jk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.jk-day { display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.jk-day i { flex: 1; height: 1px; background: var(--line); } .jk-day em { font: 500 11.5px var(--mono); color: var(--muted); font-style: normal; letter-spacing: 0; }
.jk-day.alert > span { color: var(--red); }
.jk-fold { margin-bottom: 4px; }
.jk-fold > summary { cursor: pointer; list-style: none; border-radius: 6px; padding: 8px 4px 6px; }
.jk-fold > summary::-webkit-details-marker { display: none; }
.jk-fold > summary:hover { background: var(--hover); } .jk-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jk-fold > summary svg { flex: none; transition: transform .15s; } .jk-fold[open] > summary svg { transform: rotate(90deg); }
.jk-fold > .jk-grid { margin: 4px 0 8px; opacity: .85; }
/* one slim row per job: time | job, client, tags | progress | value, chips, people */
.jk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 28%) minmax(150px, 200px); gap: 0 20px; align-items: center;
  padding: 10px 16px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.jk:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.jk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jk.late::before, .jk.soon::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--late-edge, var(--red)); }
.jk.soon::before { background: var(--soon-edge, var(--amber)); }
.jk.draft { background: var(--bg); border-style: dashed; } .jk.draft .jk-p { opacity: .65; }
.jk.dead { opacity: .7; }
.jk-main { min-width: 0; display: grid; gap: 4px; }
.jk-t { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.jk-t .no { flex: none; font: 600 13px var(--mono); color: var(--accent); text-decoration: none; } .jk-t .no:hover { text-decoration: underline; text-underline-offset: 3px; }
.jk-t .ti { font-size: 14.5px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jk-t .jst { flex: none; margin-left: 4px; }
.jk-c { font-size: 12.5px; line-height: 1.4; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jk-c b { color: var(--text); font-weight: 600; } .jk-c a.jcl { color: inherit; text-decoration: none; } .jk-c a.jcl:hover b { text-decoration: underline; text-underline-offset: 3px; }
.jk-c > span::before { content: " · "; color: var(--muted); }
.jk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .jk-tags .pill { display: inline-flex; align-items: center; gap: 4px; }
.jk .pill.p-draft { background: var(--hover); color: var(--text-2); } .jk .pill.p-draft::before { display: none; }
.jk .wp { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.45; background: var(--red-bg); color: var(--red); }
.jk .wp.soon { background: var(--amber-bg); color: var(--amber); } .jk .wp.chg { background: var(--accent-bg); color: var(--accent); }
.jk-p { min-width: 0; }
.jk-none { font-size: 12.5px; color: var(--muted); } .jk-none b { font-family: var(--mono); color: var(--text-2); }
.jk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-2); }
.jk-top b { font: 600 16px var(--mono); color: var(--text); letter-spacing: -.02em; }
.jk-top .pct { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--mono); }
.jk-trk { height: 6px; border-radius: 4px; background: var(--st-res-bg, var(--hover)); overflow: hidden; display: flex; margin: 4px 0 5px; }
.jk-trk i { display: block; height: 100%; background: var(--st-pr-fill); } .jk-trk i.out { background: var(--st-out-fill); } .jk-trk i.in { background: var(--st-in-fill); }
.jk-trk.done i { background: var(--st-pr-fill) !important; }
.jk-est { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--text-2); } .jk-est svg { flex: none; color: var(--muted); } .jk-est b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.jk-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.jk-steps li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .jk-steps li span { font-family: var(--mono); }
.jk-steps li i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.jk-steps li.part { color: var(--text-2); } .jk-steps li.part i { border-color: var(--st-pr-fill); background: linear-gradient(90deg, var(--st-pr-fill) 50%, transparent 50%); }
.jk-steps li.on { color: var(--text); } .jk-steps li.on i { border-color: var(--st-pr-fill); background: var(--st-pr-fill); }
.jk-sec.back .jk-steps li.on i, .jk-sec.back .jk-steps li.part i { border-color: var(--st-in-fill); } .jk-sec.back .jk-steps li.on i { background: var(--st-in-fill); }
.jk-sec.back .jk-steps li.part i { background: linear-gradient(90deg, var(--st-in-fill) 50%, transparent 50%); }
.jk-f { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-2); text-align: right; }
.jk-f .mo { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--mono); color: var(--text); }
.jk-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .jk-chips:empty { display: none; }
.jk .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--hover); font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.jk .chip svg { color: var(--muted); } .jk .chip.dept { background: transparent; border: 1px solid var(--line); }
.jk-m { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
/* narrower screens: progress and the right column move under the job */
@media (max-width: 1100px) {
  .jk { grid-template-columns: minmax(0, 1fr) minmax(200px, 34%); }
  .jk-f { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; margin-top: 8px; gap: 4px 10px; }
  .jk-chips { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .jk { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 12px; align-items: start; }
  .jk-p, .jk-f { grid-column: 1 / -1; margin-top: 10px; } .jk-p { padding-top: 8px; border-top: 1px solid var(--line); }
  .jk-t .ti { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jk-t { flex-wrap: wrap; } .jk-c { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jk-f { margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) { .jkv .jk-sec { animation: drise2 .4s cubic-bezier(.2, .7, .2, 1) both; } .jkv .jk-sec + .jk-sec { animation-delay: .06s; } }
@keyframes drise2 { from { transform: translateY(6px); opacity: .4; } }
@media (max-width: 560px) { .jvw button span { display: none; } .jk-sec > h2 small { display: block; width: 100%; margin: 0; } .jk-sec > h2 { flex-wrap: wrap; } }
/* Jobs › Cards: vehicles under the job (name, plate, road toll / inspection; amber = not allocated, red = toll or inspection problem) */
.jk-veh { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.jk .chip.veh { max-width: 100%; } .jk .chip.veh > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk .chip .plate { font-family: var(--mono); font-weight: 600; color: var(--text); flex: none; }
.jk .chip .tt { font-size: 11px; flex: none; } .jk .chip .tt.ok { color: var(--green); } .jk .chip .tt.bad { color: var(--red); }
.jk .chip.warn { background: var(--amber-bg); color: var(--amber); } .jk .chip.bad { background: var(--red-bg); color: var(--red); }
.jk .chip.warn svg, .jk .chip.bad svg { color: inherit; }
/* Jobs › Cards: the "Show n more" bar under the first five */
.jk-rest { margin-top: 6px; } .jk-rest[hidden] { display: none; }
.jk-moreb { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; min-height: 40px; padding: 8px 14px;
  border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--accent); font: 600 13px var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.jk-moreb:hover { background: var(--accent-bg); border-color: var(--accent); } .jk-moreb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jk-moreb svg { transition: transform .15s; } .jk-moreb[aria-expanded="true"] svg { transform: rotate(180deg); }
.jk-c { overflow-wrap: anywhere; }
@media (max-width: 700px) { .jk-main { overflow: hidden; } .jk .chip.veh { flex-wrap: wrap; row-gap: 0; } .jk .chip.veh > span:not(.plate):not(.tt) { white-space: normal; } }
/* department switch (Jobs, Dashboard): icon + word */
.dbtn { display: inline-flex; align-items: center; gap: 6px; } .dbtn svg { flex: none; opacity: .8; } .dbtn.on svg { opacity: 1; }
/* Jobs › Cards: the dates line (rental period with the time that matters in bold, then the shooting days) */
.jk-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 12.5px; color: var(--text-2); }
.jk-rent, .jk-shoot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.jk-dates svg { flex: none; color: var(--muted); }
.jk-rent .k { color: var(--text); font-weight: 600; } .jk-rent .tm { font-family: var(--mono); font-size: 12px; }
.jk-rent .k .tm { font-weight: 600; } .jk-rent .ar { color: var(--muted); }
.jk-rent em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 2px; } .jk-rent em.late { color: var(--red); font-weight: 600; }
.jk-m { display: inline-flex; align-items: center; gap: 4px; } .jk-m svg { flex: none; color: var(--muted); }
/* phones: a compact top — slimmer nav row and bar; the section tabs name the page, so its title and count line go */
@media (max-width: 600px) {
  .ws { --top: 46px; }
  .side { padding: 2px 4px; } .side a[data-nav] { padding: 7px 9px; }
  .pg { padding-top: 8px; } .ph { margin-bottom: 10px; gap: 8px; }
  .filters .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filters .seg button { white-space: nowrap; }   /* one row that scrolls, not two */
  .ph:has(> .tabs) > h1, .ph:has(> .tabs) > .muted.small { display: none; }
  .ph > .tabs { margin: 0; flex: 1 1 100%; }
  .ws .pv .pvtop { padding: 4px 8px 0; } .ws .pv .pvtop .ph { margin-bottom: 0; }
  .ws .pv .pvfilters { padding: 8px 12px 2px; gap: 6px; }
  .ws .pv .pvfilters .sb { order: 0; flex: 1 1 calc(100% - 48px); min-width: 0; }   /* search + New product share the first row */
  .ws .pv .pvfilters .pvnew { order: 1; margin-left: 0; width: 34px; padding: 0; justify-content: center; } .pv .pvfilters .pvnew span { display: none; }
  .ws .pv .pvlhead { padding: 6px 12px 4px; }
}
/* the Agent's answers (⌘K and the Agent page): paragraphs, lists and small tables */
.amsg.bot p { margin: 0 0 6px; } .amsg.bot p:last-child { margin-bottom: 0; }
.amsg.bot ul { margin: 2px 0 8px; padding-left: 18px; } .amsg.bot li { margin: 2px 0; } .amsg.bot b { font-weight: 600; }
.atable { margin: 4px 0 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.atable table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.atable th { text-align: left; font-weight: 600; color: var(--text-2); background: var(--hover); white-space: nowrap; }
.atable th, .atable td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.atable tr:last-child td { border-bottom: 0; } .atable td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spal.ask .sfoot a.aopen { color: var(--accent); font-size: 11.5px; text-decoration: none; } .spal.ask .sfoot a.aopen:hover { text-decoration: underline; }
/* Settings › Server (settings.js serverPage) */
.dg { display: grid; gap: 14px; max-width: 980px; }
.dg .card h2 { margin: 0; font-size: 15px; }
.dghead { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.dgsum { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid var(--green); }
.dgsum.warn { border-left-color: var(--amber); } .dgsum.bad { border-left-color: var(--red); } .dgsum p { margin: 2px 0 0; }
.dgpill { display: inline-block; min-width: 54px; text-align: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--green-bg); color: var(--green); }
.dgpill.warn { background: var(--amber-bg); color: var(--amber); } .dgpill.bad { background: var(--red-bg); color: var(--red); }
.dgbig { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .dgbig b { font: 500 28px var(--mono); letter-spacing: -.02em; } .dgbig span { color: var(--muted); }
.dgbar { height: 10px; border-radius: 999px; background: var(--hover); overflow: hidden; border: 1px solid var(--line); }
.dgbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-fill); }
.dgbar.warn i { background: var(--amber); } .dgbar.bad i { background: var(--red); }
.dgdisk .dgbar { height: 14px; }
.dglegend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.dgpill.info { background: var(--hover); color: var(--text-2); }
.dglog { list-style: none; margin: 8px 0 10px; padding: 0; font-size: 12.5px; }
.dglog li { border-top: 1px solid var(--line); } .dglog li.bad { background: color-mix(in srgb, var(--red-bg) 45%, transparent); }
.dglog .r, .dglog summary { display: grid; grid-template-columns: 120px 74px 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 6px; }
.dglog summary { cursor: pointer; list-style: none; } .dglog summary::-webkit-details-marker { display: none; } .dglog summary .m::after { content: ' · details'; color: var(--muted); }
.dglog .t { color: var(--text-2); font-size: 12px; } .dglog .s { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dglog .m { overflow-wrap: anywhere; }
.dglog pre { margin: 0 6px 8px; padding: 8px 10px; background: var(--hover); border-radius: 6px; font: 11.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
@media (max-width: 640px) { .dglog .r, .dglog summary { grid-template-columns: auto auto minmax(0, 1fr); } .dglog .s { display: none; } .dglog .m { grid-column: 1 / -1; } }
.dgchecks { list-style: none; margin: 0; padding: 0; display: grid; }
.dgchecks li { display: grid; grid-template-columns: 74px 190px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dgchecks li:first-child { border-top: 0; } .dgchecks li > span:last-child { color: var(--text-2); overflow-wrap: anywhere; }
.dggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dgdl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; } .dgdl dt { color: var(--muted); } .dgdl dd { margin: 0; }
.dgcounts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; color: var(--text-2); } .dgcounts b { font-family: var(--mono); color: var(--text); font-weight: 500; }
@media (max-width: 600px) { .dgchecks li { grid-template-columns: 74px minmax(0, 1fr); } .dgchecks li > span:last-child { grid-column: 2; } .dgsum { flex-wrap: wrap; } }
.note.pgerr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .note.pgerr .grow { flex: 1; }
/* links in tables: accent colour, underlined only on hover (one look everywhere; buttons keep theirs) */
.tbl a:not(.btn) { text-decoration: none; } .tbl a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
/* phones (order panel 520 px or less): each order line on two rows, nothing scrolls sideways.
   Row 1: tick, the item's full name, remove. Row 2: status, qty, days, price, discount, total. The header carries the same two rows. */
@container (max-width: 760px) { .view.job .jv .jmain > .col:nth-child(3) { order: -1; } }   /* what is on the job first, adding below */
@container jvorder (max-width: 520px) {
  .view.job .jv .grid { min-width: 0; }
  .view.job .jv #orderScroll { overflow-x: hidden; }
  .view.job .jv .grid, .view.job .jv.noprice .grid { --cols: none; }
  .view.job .jv .row, .view.job .jv .thead { grid-template-columns: 22px 20px 62px 40px minmax(0, 1fr) 46px 72px; column-gap: 6px; row-gap: 2px; padding: 6px 10px 6px 12px;
    grid-template-areas: "cb nm nm nm nm nm rm" "cb st qty days price disc tot"; }
  .view.job .jv.noprice .row, .view.job .jv.noprice .thead { grid-template-columns: 22px 20px 62px minmax(0, 1fr) 22px; grid-template-areas: "cb nm nm nm rm" "cb st qty days days"; }
  .view.job .jv .thead { height: auto; }
  .view.job .jv .row > .cb, .view.job .jv .thead > .cb { grid-area: cb; align-self: start; margin-top: 3px; }
  .view.job .jv .row > .nm, .view.job .jv .thead > .hitem { grid-area: nm; } .view.job .jv .row > .stg, .view.job .jv .thead > .stg { grid-area: st; }
  .view.job .jv .row > .stepper, .view.job .jv .thead > .stg + .r { grid-area: qty; }
  .view.job .jv .row > .stepper + input, .view.job .jv .thead > .stg + .r + .r { grid-area: days; }
  .view.job .jv .row > [data-f="price"], .view.job .jv .thead > .stg + .r + .r + .r { grid-area: price; }
  .view.job .jv .row > [data-f="disc"], .view.job .jv .thead > .stg + .r + .r + .r + .r { grid-area: disc; }
  .view.job .jv .row > .tot, .view.job .jv .thead > .stg + .r + .r + .r + .r + .r { grid-area: tot; }
  .view.job .jv .row > .rmx, .view.job .jv .thead > .addwrap { grid-area: rm; justify-self: end; }
  .view.job .jv .row > .rmx { opacity: .6; }
  .view.job .jv .row .nm .nmline { flex-wrap: wrap; } .view.job .jv .row .nm .t { white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 0; min-width: 60%; }
  .view.job .jv .row.part .nm { padding-left: 14px; }
  .view.job .jv .row > .grip { display: none; }
}

/* Products › RFID tags (js/rfid.js): what to write into the tags, check a tag, numbers too long */
.rfnote { margin: 0 0 14px; max-width: 760px; }
.rfcard { margin: 0 0 14px; } .rfcard h2 { font-size: 15px; margin: 0 0 10px; } .rfcard summary { cursor: pointer; } .rfcard summary h2 { display: inline; }
.rfrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .rfrow .grow { flex: 1; }
.rftools { gap: 12px; align-items: center; margin: -4px 0 10px; }
.rfchk { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 4px 14px; align-items: baseline; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rfchk .mono { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; } .rfchk.ok b { color: var(--green); } .rfchk.bad b { color: var(--red); }
@media (max-width: 600px) { .rfchk { grid-template-columns: 1fr; } }

.sttools { margin: -6px 0 10px; } .stscan + .sttools + .whrf { margin: 0 0 10px; }

/* Jobs: the status filter as one button with a small menu */
.jfilt { position: relative; }
.jfbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; font-weight: 500; }
.jfbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .jfbtn .chev { width: 14px; height: 14px; color: var(--muted); }
.jfbtn b { font-weight: 500; color: var(--accent); white-space: nowrap; } .jfbtn b::before { content: "· "; color: var(--muted); }
.jfbtn.set { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.jfpop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 240px; padding: 4px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.jfpop[hidden] { display: none; }
.jfpop button { display: flex; align-items: center; text-align: left; gap: 8px; border: 0; background: none; padding: 7px 10px 7px 28px; border-radius: 7px; cursor: pointer; color: var(--text); position: relative; }
.jfpop button span { display: grid; } .jfpop button b { font-weight: 500; font-size: 13.5px; } .jfpop button small { color: var(--muted); font-size: 11.5px; } .jfpop button small:empty { display: none; }
.jfpop button:hover, .jfpop button:focus-visible { background: var(--hover); outline: none; }
.jfpop button.on { color: var(--accent); } .jfpop button.on::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* Products › Check in (js/checkin.js): global check-in */
.ckintro { margin: 0 0 12px; max-width: 760px; }
.ckat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ckscan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; margin: 0 0 8px; } .ckscan .qscan { margin: 0; }
.ckqty { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; } .ckqty .input { width: 58px; height: 44px; text-align: center; }
.ckpg .whrf { margin: 0 0 8px; } .ckpg #ckLast { margin: 0 0 14px; }
.ckhead { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 8px; } .ckhead h2 { font-size: 15px; margin: 0; } .ckhead .lnk { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; }
.ckjob { margin: 0 0 10px; padding: 12px 14px; }
.ckjh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .ckjh .tt { font-weight: 500; } .ckjh .grow { flex: 1; }
.ckprog { font-size: 12.5px; color: var(--text-2); } .ckprog.fin { color: var(--green); font-weight: 600; }
.ckbar { height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; margin: 8px 0 6px; } .ckbar i { display: block; height: 100%; background: var(--st-in, var(--accent-fill)); border-radius: 999px; }
.ckitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--text-2); } .ckitems li { display: flex; gap: 10px; } .ckitems .num { min-width: 6em; color: var(--text); }
@media (max-width: 640px) { .ckscan { grid-template-columns: minmax(0, 1fr) auto; } .ckscan .qscan { grid-column: 1 / -1; } }

/* Inspections › Guides and tools: editing (js/inspections.js guideEditor, guideProducts) */
.gdtop { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; } .gdtop p { flex: 1; margin: 0; }
.gdacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gedlg { width: min(860px, 96vw); max-height: 90vh; overflow: auto; }
.gehead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; } .gehead .w { grid-column: 1 / -1; }
.gesteps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.gestep { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--surface); }
.gesh { display: flex; align-items: center; gap: 8px; } .gesh .num { min-width: 1.6em; color: var(--muted); } .gesh .input { flex: 1; font-weight: 500; } .gemv { display: flex; gap: 2px; }
.gerow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; } .gerow .field.sm { flex: 1 1 160px; } .gerow .field.xs { flex: 0 0 72px; } .gerow .check { margin-bottom: 8px; }
.gpdlg { width: min(720px, 96vw); } .gpscroll { max-height: 50vh; overflow: auto; }
.gphits { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; } .gphits li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px; border-radius: 6px; } .gphits li:hover { background: var(--hover); }
@media (max-width: 640px) { .gehead { grid-template-columns: 1fr 1fr; } }
.dialog.gedlg, .dialog.gpdlg { max-width: none; }   /* wider than the app's usual dialog */

/* Inspections › Rounds (js/inspections.js): inspect product groups in one go */
.inspall { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.irpick .chpk { align-items: center; } .irg { display: grid; gap: 1px; min-width: 0; justify-items: start; text-align: left; } .irg .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irtbl td.r { text-align: right; white-space: nowrap; }

/* the Scanner switch sits inside the scan box, at its right (stock take, inspection round, check-in, RFID tags) */
.qscan .whsw.qsw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px; height: 32px; padding: 0 10px 0 7px;
  border-color: transparent; background: var(--hover); font-size: 12.5px; }
.qscan .whsw.qsw:hover { border-color: var(--line-strong); }
.qscan .whsw.qsw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qscan:has(.qsw) .input { padding-right: 112px; text-overflow: ellipsis; }
.sttools:empty { display: none; }
/* RFID tag finder (/rfid-find, js/rfid.js): pick box, what is looked for (chips), the focus meter, the reader box, the list */
.fdpick { max-width: 720px; margin: 0 0 10px; } .fdsrch { position: relative; } .fdsrch .input { width: 100%; }
.fdhits { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); max-height: 340px; overflow: auto; }
.fdhit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 8px 12px; cursor: pointer; align-items: baseline; }
.fdhit .muted { grid-column: 2; } .fdhit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fdhit.hl, .fdhit:hover { background: var(--hover); }
.fdhit .pill { font-size: 11px; min-width: 64px; text-align: center; }
.fdsrc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; } .fdsrc:empty { display: none; }
.fdchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 3px 4px 3px 11px; font-size: 13px; }
.fdchip button { border: 0; background: none; color: var(--muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; } .fdchip button:hover { background: var(--hover); color: var(--text); }
.fdradar { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 16px 18px; margin: 0 0 12px; transition: border-color .2s, box-shadow .2s; }
.fdradar:empty { display: none; } .fdradar.hot { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.fdtop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .fdtop > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdn { font-family: var(--mono); font-size: 28px; line-height: 1.15; letter-spacing: -.01em; } .fdp { overflow: hidden; text-overflow: ellipsis; }
.fdmeter { --l: 0; position: relative; height: 22px; border-radius: 11px; background: var(--hover); margin: 14px 0 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.fdmeter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--l) * 100%); border-radius: 11px; transition: width .12s linear, background-color .3s;
  background: color-mix(in srgb, var(--green) calc(var(--l) * 100%), var(--amber)); }
.fdword { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .fdword b { font-size: 18px; }
.fdidle { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 6px 0; }
.fdscan { margin: 0 0 10px; }
.fdtools { display: flex; gap: 8px 12px; align-items: center; margin: 4px 0 8px; } .fdtools .fdsum { flex: 1; margin: 0; }
.fdsum { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 4px 0 8px; font-size: 14px; min-width: 0; } .fdsum .grow { flex: 1; }
.fdrows { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.fdrow { display: grid; grid-template-columns: 56px minmax(80px, auto) minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fdrow:last-child { border-bottom: 0; } .fdrow .fdp { white-space: nowrap; } .fdrow.on { background: var(--accent-bg); } .fdrow.got { opacity: .62; } .fdrow.got b { text-decoration: line-through; }
.fdrow.heard b { color: var(--green); } .fdact { display: flex; gap: 6px; justify-content: flex-end; }
.fdbar { --l: 0; height: 8px; border-radius: 4px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.fdbar i { display: block; height: 100%; width: calc(var(--l) * 100%); background: color-mix(in srgb, var(--green) calc(var(--l) * 100%), var(--amber)); transition: width .2s linear; }
.fdhelp { margin: 16px 0 0; max-width: 760px; } .fdhelp summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.stfind { margin: 0 0 10px; }
@media (max-width: 640px) {
  .fdrow { grid-template-columns: 44px auto minmax(0, 1fr); } .fdrow .fdp { grid-column: 1 / -1; white-space: normal; } .fdago { grid-column: 1 / 3; } .fdact { grid-column: 3; }
  .fdn { font-size: 24px; } .fdtop .btn { min-height: 44px; } .fdact .btn { min-height: 38px; } .fdtools { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .fdmeter i, .fdbar i { transition: none; } }
/* Reports › People (js/reports.js peopleHtml) */
.pplt td.small { min-width: 190px; color: var(--text-2); }
.pplx { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding-top: 6px; } .pplx .small { max-width: 420px; }
.pplm .pplb { fill: var(--accent-fill); } .pplm g:hover .pplb { fill: var(--accent); } .pplm .ax { font-size: 11px; fill: var(--muted); }
.pplm .ppls { fill: var(--red); } .pplm .ppll { fill: var(--amber); }
.ppls-k, .ppll-k { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); vertical-align: middle; } .ppll-k { background: var(--amber); }
.rphow p { margin: 0 0 8px; max-width: 900px; }
/* People › Warehouse: what the estimated work is made of (fixed order: jobs, stock take, inspections, repairs, stock changes, hand-overs) */
.whmix { display: flex; gap: 2px; width: 150px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--hover); margin: 2px 0 3px; }
.whmix i, .whleg i { display: block; } .whleg { margin: 0 0 8px; } .whleg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.w1 { background: var(--c1, var(--accent)); } .w2 { background: var(--c2, var(--violet)); } .w3 { background: var(--c3, var(--amber)); }
.w4 { background: var(--st-in-fill); } .w5 { background: var(--st-al-fill); } .w6 { background: var(--muted); }

/* phone: the module bar keeps its words (11 px under each icon), 44 px targets, Settings pinned at the right end while the rest scrolls */
@media (max-width: 640px) {
  .side { gap: 0; padding: 4px 0 4px 4px; scrollbar-width: none; } .side::-webkit-scrollbar { display: none; }
  .side a[data-nav] { flex-direction: column; gap: 2px; min-width: 58px; min-height: 48px; padding: 5px 4px; justify-content: center; font-size: 11px; }
  .side a[data-nav] span { display: block; line-height: 1.1; white-space: nowrap; }
  .side a[data-nav] svg { width: 20px; height: 20px; }
  .side .sfoot { position: sticky; right: 0; background: var(--surface); padding: 0 4px 0 6px; box-shadow: -8px 0 8px -6px rgba(0,0,0,.12); }
  .side .sfoot button, .side .sfoot a { min-width: 44px; min-height: 44px; }
}
.pplname { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; border-radius: 4px; }
.pplname:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pplt td:first-child, .pplh td:first-child { white-space: nowrap; }
.ppleft { font-size: 11px; font-weight: 500; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.pplcav { margin: -4px 0 10px; }
/* Settings › Appearance: the two styles side by side, each with a small preview drawn in its own look */
.apgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.apopt { display: grid; gap: 4px; text-align: left; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
.apopt b { font-size: 14px; } .apopt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .apopt:hover { border-color: var(--text-2); }
.apv { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto 1fr; gap: 4px 8px; height: 104px; padding: 8px; border-radius: 8px; background: #fafafa; border: 1px solid #ececec; margin-bottom: 6px; }
.apv .apnav { grid-column: 1; height: 10px; border-radius: 3px; background: #ececec; } .apv .apnav.on { background: #e9f6f5; box-shadow: inset 0 0 0 1px #0b7a73; }
.apv .apcard { grid-column: 2; grid-row: 1 / 4; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 8px; background: #fff; border: 1px solid #ececec; border-radius: 6px; }
.apv .apcard b { font: 500 20px/1 "JetBrains Mono", monospace; color: #18181b; }
.apv .appill { font: 500 10.5px/1.6 Archivo, sans-serif; color: #15803d; background: #eaf7ef; border-radius: 999px; padding: 0 7px; }
.apv .apbtn { font: 500 11px/1.9 Archivo, sans-serif; color: #0b7a73; background: #e9f6f5; border-radius: 6px; padding: 0 9px; }
.apv.bold { background: #eef2f1; border-color: transparent; } .apv.bold .apnav { border-radius: 999px; background: #e2e6e5; } .apv.bold .apnav.on { background: #0a6f68; box-shadow: none; }
.apv.bold .apcard { border: 0; border-radius: 12px; } .apv.bold .apcard b { font: 700 24px/1 Urbanist, Inter, sans-serif; color: #0e0f11; }
.apv.bold .appill { font: 600 11px/1.7 Inter, sans-serif; color: #1f6b43; background: #d6f0e0; padding: 0 8px; }
.apv.bold .apbtn { font: 600 11px/2 Inter, sans-serif; color: #fff; background: #0e0f11; border-radius: 999px; padding: 0 11px; }
/* Products › Containers (js/containers.js) */
.ctscan { max-width: 760px; margin: 0 0 10px; }
.ctmsg { max-width: 760px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-weight: 500; } .ctmsg.ok { background: var(--green-bg); color: var(--green); } .ctmsg.bad { background: var(--red-bg); color: var(--red); }
.ctcase { max-width: 900px; } .cthead { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.cthead h2 { font-size: 18px; margin: 2px 0 6px; } .cthead h2 .mono { font-size: 18px; } .ctstate { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ctacts { display: flex; gap: 8px; } .ctmiss { margin: 0 0 10px; }
.ctbulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } .ctpick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ctpw { position: relative; display: inline-block; } .ctpw .input { width: 280px; }
.ctsug { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: 360px; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; }
.ctsug button { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 6px; text-align: left; color: var(--text); }
.ctsug button.hl, .ctsug button:hover { background: var(--hover); } .ctsug button:disabled { opacity: .55; }
.ctmore { margin-top: 12px; } .ctmore summary { cursor: pointer; color: var(--text-2); } .ctmore .lnk.danger { color: var(--red); }
.ctlisthead { max-width: 420px; margin: 0 0 10px; } .ctlisthead .input { width: 100%; }
@media (max-width: 640px) { .ctpw .input { width: 100%; } .ctsug { width: 100%; } .ctacts .btn, .ctitems .lnk { min-height: 44px; } }

/* Containers: the RFID check of a case */
.ctchk { border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--hover); } .ctchk.ok { background: var(--green-bg); }
.ctchkh { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .ctchkh > b { font: 600 28px/1 var(--mono); } .ctchk.ok .ctchkh > b { color: var(--green); } .ctchkh .grow { flex: 1; }
.ctchkbar { height: 8px; border-radius: 4px; background: var(--surface); margin: 10px 0 6px; overflow: hidden; } .ctchkbar i { display: block; height: 100%; background: var(--green); transition: width .2s; }
.ctchk p { margin: 6px 0 0; font-size: 13px; }
.ctlast { margin: 0 0 10px; font-size: 13px; } .ctlast.ok { color: var(--green); } .ctlast.bad { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ctchkbar i { transition: none; } }
.ctlist { margin: 6px 0 12px; } .ctlisth { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .ctlisth .grow { flex: 1; }
.ctallow td, .ctallow th { padding: 6px 8px; } .ctallow { max-width: 760px; }

/* Settings › Document layouts (js/doclayouts.js): the controls left, the live document right */
.dlwrap { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dled { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; } .dled h3 { font-size: 12.5px; color: var(--text-2); margin: 16px 0 8px; font-weight: 650; }
.dlhead .input { width: 100%; font-weight: 600; }
.dlcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.dlc { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px; border-radius: 8px; cursor: pointer; }
.dlc input { grid-row: span 2; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.dlc span { font-size: 13px; } .dlc code { font-size: 11px; color: var(--muted); } .dlc.ch, .dls.ch, .dlf.ch > span { color: var(--accent); }
.dlc.ch { background: var(--accent-bg); }
.dlsw { display: grid; gap: 2px; } .dls { margin: 0; padding: 4px 0; text-transform: none; }
.dlf { margin: 0 0 10px; } .dlf textarea { width: 100%; resize: vertical; }
.dlacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .dlimp { cursor: pointer; }
.dlhist { margin-top: 8px; font-size: 12.5px; }
.dlprev { min-width: 0; } .dlbar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .dlbar .grow { flex: 1; }
#dlFrame { width: 100%; height: calc(100vh - 150px); min-height: 600px; border: 1px solid var(--line); border-radius: 12px; background: #d9dbe0; }
@media (max-width: 1100px) { .dlwrap { grid-template-columns: 1fr; } .dled { position: static; max-height: none; } }

/* the document logo box (Settings › Company, Document layouts) */
.logobox { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 14px; }
.logoimg { height: 64px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 8px; }
.logoimg img { max-width: 100%; max-height: 100%; object-fit: contain; } .logoacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dled .logobox { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }

/* Products › Technical facts (js/specs.js) */
.spnote { max-width: 900px; margin: 0 0 12px; } .sptools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } .sptools .input { width: 260px; }
.sptbl td { vertical-align: middle; } .sptbl tr.need td:first-child { box-shadow: inset 3px 0 0 var(--amber); } .sptbl select.input { min-width: 120px; }
/* working hours (js/hours.js): the sidebar's Check in / Check out, its dialog, the /hours page */
.toast-ws.on.act { pointer-events: auto; } .hrundo { all: unset; margin-left: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; } .hrundo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hrdlg { width: min(440px, calc(100vw - 32px)); } .hrdlg p { margin: 4px 0 12px; } .hrdlg .seg { display: flex; margin-bottom: 12px; } .hrdlg .seg button { flex: 1; }
.hrother { display: grid; gap: 10px; margin-bottom: 10px; } .hrother[hidden] { display: none; }
.hrfld { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); font-weight: 500; } .hrfld .input { width: 100%; }
.hrgeo { margin: 4px 0 14px; } .hrgeo.warn, .hrpg .warn { color: var(--amber); }
.hrtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .hrrange { display: inline-flex; align-items: center; gap: 6px; } .hrrange .input { width: 150px; }
.hrnowcard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hrnowcard h2 { margin: 2px 0; font-size: 18px; } .hrnowcard.in { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.hrkpis .kpi b .muted { font-size: 15px; } .hrkpis .kpi .d { display: block; margin-top: 2px; } .kpi.bad b, .hrpg .bad { color: var(--red); } .kpi.amb b { color: var(--amber); }
.hrgrid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 14px; } .hrgrid > .card:only-child { grid-column: 1 / -1; max-width: 520px; }
@media (max-width: 900px) { .hrgrid { grid-template-columns: 1fr; } }
.hrweek { display: flex; gap: 14px; align-items: flex-end; padding-top: 6px; } .hrwd { display: grid; justify-items: center; gap: 3px; font-size: 12px; }
.hrbar { position: relative; width: 26px; height: 80px; border-radius: 6px; background: var(--hover); overflow: hidden; }
.hrbar i { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 35%, var(--surface)); border-radius: 4px 4px 0 0; }
.hrbar i.late { background: var(--red); left: 6px; right: 6px; }
.hrtbl td { vertical-align: top; } .hrtbl tr.off td { color: var(--muted); background: color-mix(in srgb, var(--hover) 50%, transparent); }
.hrtbl a { color: inherit; text-decoration: none; } .hrtbl a:hover { text-decoration: underline; } hr.hrsep { border: 0; border-top: 1px dashed var(--line); margin: 6px 0; }
.hrteam tr.off td { color: var(--muted); } .hrown { white-space: nowrap; } .hrown .input { width: 92px; padding-left: 6px; padding-right: 4px; } .hrown .input + .input { margin-left: 4px; }
.hrset .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .hrset .hrfld .input { width: 120px; }
.hrteam th, .hrteam td.r, .hrtbl td.r { white-space: nowrap; } .hrteam th { font-size: 11px; } .hrgrid[hidden] { display: none; }
/* working hours: one rhythm of 14 px between the blocks; the weekday chart fills the KPI grid's last row */
#hrBody { display: grid; gap: 14px; } #hrBody > * { margin: 0; } .hrkpis { margin: 0; }
.hrnowcard { padding: 14px 18px; } .hrnowcard .grow { flex: 1; } .hrnowcard small { font-size: 12px; }
.hrwk { grid-column: span 3; display: flex; flex-direction: column; } .hrwk small .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.hrwk .hrweek { margin-top: 8px; gap: 18px; } .hrwk .hrbar { height: 44px; width: 22px; } .hrwk .hrwd b { font: 600 12px var(--font); margin: 0; letter-spacing: 0; }
.hrwk .hrwd .small { font: 11px var(--mono); }
@media (max-width: 760px) { .hrwk { grid-column: 1 / -1; } }
.hrtbl th:last-child, .hrtbl td:last-child { text-align: right; } .hrtbl td:last-child .pill { margin-left: 4px; }
/* working hours · Team: read-only table, edits in dialogs */
.hrteam td { vertical-align: top; } .hrteam td .mono { font-size: 12.5px; } .hrteam td.r .muted { font-weight: 400; }
.hrteam tr.off td, .hrteam tr.off td b { color: var(--muted); font-weight: 500; } .hrteam a { color: var(--accent); text-decoration: none; } .hrteam a:hover { text-decoration: underline; }
.hrlink { all: unset; cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; border-bottom: 1px dashed var(--line-strong); } .hrlink:hover { background: var(--hover); }
.hrlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hrco { font-weight: 400; text-transform: none; letter-spacing: 0; } .hrco b { color: var(--text); font-weight: 500; }
.card h2 .hrco + .btn { margin-left: 8px; } .hrfoot { margin: 10px 0 0; }
.hrrow3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hrtrk { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 13px; cursor: pointer; } .hrtrk .switch { margin-top: 2px; }

/* Hours in the sidebar (js/hours.js): the page link with today's state, and Check in / Check out beside it (one item, Alvar 2026-11-11) */
/* Hours in the sidebar (Alvar 2026-11-13: minimal, like the menu items above): one row, no box: clock · Hours · dot + state, a small pill on the right */
.side .hrbox { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 2px 0 0; border: 0; background: transparent; }
.side .hrbox[hidden] { display: none; }
.side .hrbox a[data-nav] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.side .hrbox a[data-nav] svg { order: 0; flex: none; } .side .hrbox a[data-nav] span { order: 1; line-height: 1.2; }
.side .hrbox .hrdot { order: 2; flex: none; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--line-strong, #c9c9c9); }
.side .hrbox small { order: 3; margin-left: -4px; font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.side .hrbox.in .hrdot { background: var(--green); } .side .hrbox.old .hrdot { background: var(--red); } .side .hrbox.old small { color: var(--red); }
.side .hract { flex: none; height: 26px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font: 600 12px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.side .hrbox:not(.in) .hract { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.side .hract:hover { background: var(--hover, rgba(0,0,0,.04)); } .side .hrbox:not(.in) .hract:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.side .hract:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidemin .side .hrbox { border: 0; padding: 0; background: transparent; justify-content: center; } .sidemin .side .hrbox a[data-nav] { display: flex; width: 42px; padding: 9px 0; justify-content: center; }
.sidemin .side .hrbox small, .sidemin .side .hract { display: none; } .sidemin .side .hrbox .hrdot { left: 23px; top: 6px; }
@media (max-width: 900px) { .side .hrbox { border: 0; padding: 0; margin: 0; background: transparent; flex: none; } .side .hrbox a[data-nav] { display: flex; }
  .side .hrbox small, .side .hract { display: none; } }
@media (max-width: 640px) { .side .hrbox a[data-nav] { flex-direction: column; gap: 2px; min-width: 58px; min-height: 48px; padding: 5px 4px; justify-content: center; font-size: 11px; }
  .side .hrbox .hrdot { left: calc(50% + 4px); top: 5px; } }
.side .hract { padding: 6px 8px; }
/* Settings › Warehouses (js/warehouses.js) */
.whset .card + .card, .whset .whcard { margin-bottom: 12px; } .whcard.off { opacity: .7; }
.whhead { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; } .whhead h2 { margin: 0 0 2px; } .whhead .grow { flex: 1; }
.mbrows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 10px; } .mbrows > div { display: grid; gap: 2px; min-width: 0; } .mbrows small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.mbrows b { overflow-wrap: anywhere; } @media (max-width: 640px) { .mbrows { grid-template-columns: 1fr; } }
.mblist { list-style: none; margin: 0; padding: 0; } .mblist li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.cosub { margin: 16px 0 8px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.whnums { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); } .whnums b { color: var(--text); }
.whdlg { width: min(640px, calc(100vw - 32px)); } .whdlg .form { margin-bottom: 6px; }
.jv .avail.elsew { color: var(--violet, var(--accent)); }
.trtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .trtools select { width: auto; }
.trdlg { width: min(560px, calc(100vw - 32px)); } .trgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } @media (max-width: 520px) { .trgrid { grid-template-columns: 1fr; } }
.dwh { width: auto; height: 34px; padding: 0 28px 0 10px; }
/* Reports › Warehouses (reports.js whReportHtml) */
.rp .rpsay { margin: 0 0 12px; font-size: 14px; color: var(--text); max-width: 80ch; } .rp #rpBody > .card + .card { margin-top: 12px; } .rp #rpBody > .card h2 { margin: 0 0 4px; font-size: 14px; }

/* Transfers: "Send back?" suggestions (warehouses.js drawSug) */
.trsug { margin-bottom: 12px; } .trsugh { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.trsugl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
/* vehicle page: Based at (pages.js) */
.vpage .kpi select[data-vf="warehouse_id"] { display: block; width: 100%; max-width: 180px; margin: 2px 0 4px; }

.vold { margin-top: 14px; } .vold summary { cursor: pointer; } ul.vold { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }   /* Vehicles › Fleet: sold and retired */

/* Charges for use (js/meters.js): the product's charge lines and the warehouse screen's readings */
#pvMeters { grid-column: 1 / -1; } #pvMeters:empty, #vMeters:empty, #whMeters:empty { display: none; }
.mtrows { display: grid; gap: 10px; margin: 10px 0; }
.mtrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mtrow .field { flex: 1 1 110px; margin: 0; } .mtrow .field:first-child { flex: 2 1 180px; }
.mtrow .mtdel { flex: none; }
.mtsec .mtr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(90px, .6fr); gap: 12px; align-items: start; padding: 10px 12px; border-top: 1px solid var(--line); }
.mtr .mtu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtin { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.mtin > span:first-child { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.mtin.cur > span:first-child { color: var(--text); font-weight: 600; }
.mtin input { width: 100%; max-width: 150px; }
.mtr.due .mtin.cur input { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
.mtused { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: 16px; }
@media (max-width: 640px) { .mtsec .mtr { grid-template-columns: 1fr 1fr; } .mtr .mtu, .mtused { grid-column: 1 / -1; } .mtused { align-items: flex-start; text-align: left; padding-top: 0; } }

/* bulb operating hours (js/meters.js): the unit panel's readings and bulb, chips */
.mtbulb { white-space: nowrap; }
.mtu .mtbulb { align-self: flex-start; margin-top: 3px; }
#uMeters:empty { display: none; }
#uMeters .mth { margin-top: 18px; }
.mtunit { margin: 10px 0 16px; } .mtunit h3 { font-size: 13px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.mtbulbbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.mtbulbbox.near { border-color: #f0c674; } .mtbulbbox.past { border-color: #f1a7a7; }
.mtbh { display: flex; align-items: center; gap: 8px; }
.mtbar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 8px 0 6px; } .mtbar i { display: block; height: 100%; background: var(--accent, #0d9488); }
.mtbulbbox.near .mtbar i { background: #d97706; } .mtbulbbox.past .mtbar i { background: #dc2626; }
.mtchg { margin-top: 6px; }
.pv .vdot.warn { background: #d97706; }
.mtunit h3 .muted, .mtunit h3 .pill { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Settings › Pricing: general rates (one row per kind of line) and Settings › Departments */
.rtrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rtrow:last-of-type { border-bottom: 0; }
.dpacts { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.dghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dghead h2 { margin: 0 0 8px; }
.dgdlg { width: min(560px, calc(100vw - 32px)); }
.dgdlg .dg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgpct { display: inline-flex; align-items: center; gap: 4px; }
.dgpct .input { width: 80px; text-align: right; }
.dgrule { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.dgrule .sel { flex: 1 1 200px; min-width: 0; }
.dgh3 { font-size: 13px; margin: 14px 0 8px; }
@media (max-width: 520px) { .dgdlg .dg3 { grid-template-columns: minmax(0, 1fr); } }
/* collapsed sidebar and phones: the state dot sits on the clock again */
.sidemin .side .hrbox a[data-nav] { position: relative; } .sidemin .side .hrbox .hrdot { position: absolute; margin: 0; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 900px) { .side .hrbox a[data-nav] { position: relative; } .side .hrbox .hrdot { position: absolute; left: 20px; top: 3px; margin: 0; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--surface); } }
@media (max-width: 640px) { .side .hrbox .hrdot { left: calc(50% + 4px); top: 5px; } }
/* checked in: the time takes the word "Hours"' place (no room for both beside Check out); still read out */
@media (min-width: 901px) { .side:not(.x) .hrbox.in a[data-nav] span, .side .hrbox.old a[data-nav] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side .hrbox.in small, .side .hrbox.old small { margin-left: 0; font: 500 13px var(--mono, ui-monospace, monospace); color: var(--text-2); } .side .hrbox.old small { color: var(--red); } .side .hrbox.in .hrdot, .side .hrbox.old .hrdot { order: 2; margin-left: 0; } }