/* Full-screen picker sheet and star rows, shared by the admin (admin.css) and the driver-facing pages (front.css). Load this before either so its per-app overrides still win on ties. */
.pickwrap{position:relative}
.sheet{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column}
.sheet[hidden]{display:none}
/* picker sheet: title on top, a grid of small boxes stacked from the bottom, and the hint, Save, close + search at the bottom where the thumb is
   (and where the keyboard lifts them: picker.js sizes the sheet to the visual viewport) */
.ps-top{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:var(--heading);color:#fff}
.ps-title{margin:0;font-size:1.05rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-hint{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 2px 6px;font-size:.76rem;color:var(--muted);min-height:24px}
.ps-all{background:0;border:0;padding:4px 2px;margin:0;width:auto;font:inherit;font-size:.82rem;font-weight:700;color:var(--accent);cursor:pointer}
.sheet-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 12px 10px}
.ps-grid{margin-top:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ps-sec{grid-column:1/-1;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 2px -2px}
.ps-sec .ps-tip{margin-left:8px;font-size:.74rem;font-weight:500;text-transform:none;letter-spacing:0}
.ps-sec .ps-tip.on{color:var(--accent);font-weight:700}
.ps-hint[hidden]{display:none}
.ps-sec.sep{margin-top:6px;padding-top:10px;border-top:1px solid var(--border-strong,var(--border))}
.pbox{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;margin:0;padding:8px 10px;text-align:center;background:#fff;border:1px solid var(--border-strong,var(--border));border-radius:10px;font:inherit;font-size:.95rem;font-weight:600;line-height:1.2;color:var(--heading);cursor:pointer;overflow-wrap:break-word;hyphens:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.pbox:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(hover:hover){.pbox:hover{border-color:var(--accent)}}
.pbox.pin{border-color:var(--accent);border-width:1.5px}
.pbox.on{background:#a6d4b6;border-color:#5ea57a;color:#0e3a22}
.pbox.new{grid-column:1/-1;border-style:dashed;border-color:var(--accent);color:var(--accent);font-weight:700;min-height:46px}
.pbox.new small{font-weight:500;margin-left:6px;opacity:.8}
.pbox.held{transform:scale(.96);transition:transform .15s}
/* the apps' button:hover fill outranks a bare class: pin each picker button's own colors (a phone keeps "hover" after a tap) */
.pbox:hover,.pbox:focus{background:#fff;color:var(--heading)}
.pbox.on:hover,.pbox.on:focus{background:#a6d4b6;color:#0e3a22}
.pbox.new:hover,.pbox.new:focus{background:#fff;color:var(--accent)}
.pbox.long{font-size:.8rem}
.ps-all:hover{background:0;color:var(--accent);text-decoration:underline}
.ps-done:hover{background:var(--accent);color:#fff}
.sheet-x:hover{background:#fff;color:var(--heading)}
.ps-foot{padding:6px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border)}
.ps-done{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 0 8px;padding:9px 14px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
.ps-done b{font-size:1.05rem;letter-spacing:.08em}
.ps-done small{font-size:.76rem;opacity:.9;margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-bar{display:flex;align-items:center;gap:8px}
.ps-bar input{flex:1 1 auto;min-width:0;margin:0;font-size:16px;border-radius:10px;padding:11px 14px}
.sheet-x{width:44px;height:44px;flex:0 0 auto;padding:0;margin:0;border:1px solid var(--border-strong,var(--border));border-radius:10px;background:#fff;color:var(--heading);font-size:1.5rem;line-height:1;cursor:pointer}
.sheet-empty{text-align:center;color:var(--muted);font-size:.88rem;padding:28px 12px}

/* show/hide toggle that pwa.js adds to every password field */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:50px!important;width:100%;box-sizing:border-box}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--muted,#6b6b7b);padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pweye:hover,.pweye:focus-visible{color:var(--accent,#1a1a2e);background:var(--accent-soft,rgba(0,0,0,.06));outline:none}
.pweye svg{width:22px;height:22px;display:block}
.pweye .off,.pweye.on .eye{display:none}
.pweye.on .off{display:block}

/* ---- the photo viewer (#lb, admin/viewer.js): the office's uploads and the drivers' tickets alike ---- */
#lb .modes{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:6px;
  background:rgba(0,0,0,.42);padding:5px;border-radius:22px;backdrop-filter:blur(3px);width:max-content;max-width:calc(100vw - 76px);flex-wrap:wrap;justify-content:center}
/* left:50% alone lets the row be only half the screen wide: on a phone the four chips stacked three rows deep over
   the ticket (2026-09-30). max-content keeps them on one row; a phone starts them at the left, clear of the x */
#lb .modes .sm{display:none}
@media(max-width:560px){#lb .modes{left:10px;transform:none;justify-content:flex-start}#lb .modes button{padding:7px 11px}#lb .modes .lg{display:none}#lb .modes .sm{display:inline}}
#lb .modes button{background:0;border:0;color:#d8d8e2;font:inherit;font-size:.76rem;font-weight:700;
  padding:7px 13px;border-radius:18px;cursor:pointer;white-space:nowrap}
#lb .modes button:hover{color:#fff;background:rgba(255,255,255,.16)}
#lb .modes button.on{background:#fff;color:#14142a}
#lb{position:fixed;inset:0;background:rgba(10,10,20,.94);display:none;z-index:100;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:6px;touch-action:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;cursor:zoom-in}
#lb.zoomed img{cursor:grab;will-change:transform}
#lb .load{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#d6d6e0;font-size:.9rem;text-align:center;width:min(80vw,320px)}
#lb .load[hidden]{display:none}
#lb .load button{display:block;margin:12px auto 0;background:#fff;color:#14142a;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;cursor:pointer}
#lb.zoomed .modes,#lb.zoomed .cap{opacity:.25;pointer-events:none}
#lb .x{position:absolute;top:12px;right:16px;color:#fff;font-size:2rem;line-height:1;cursor:pointer;background:0;border:0;padding:8px}
#lb .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;background:0;border:0;cursor:pointer;padding:18px 14px;opacity:.75}
#lb .nav:hover{opacity:1}
#lb .prev{left:2px}#lb .next{right:2px}
#lb .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#d6d6e0;font-size:.8rem;padding:0 16px}
#lb .det{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:.8rem;font-weight:600;background:rgba(0,0,0,.45);padding:5px 12px;border-radius:20px;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
#lb .det:empty{display:none}
#lb.zoomed .det{opacity:.25}

/* ---- the account menu in every header: name + chevron, then Change password / Install / Sign out ---- */
.usermenu{position:relative;flex:0 0 auto}
.usermenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px;border-radius:10px;color:#fff;font-size:.82rem;font-weight:600;max-width:150px}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:hover{background:rgba(255,255,255,.14)}
.usermenu>summary .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usermenu>summary .ini{display:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:.9rem;line-height:30px;text-align:center;flex:0 0 auto}
@media (max-width:520px){.usermenu>summary .nm{display:none}.usermenu>summary .ini{display:block}.usermenu>summary{padding:0 6px}}
.usermenu>summary .chev{width:8px;height:8px;border-right:2px solid #c9c9d6;border-bottom:2px solid #c9c9d6;transform:rotate(45deg) translate(-2px,-2px);flex:0 0 auto}
.usermenu .umenu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.18);overflow:hidden;z-index:30}
.usermenu .umenu a,.usermenu .umenu button{display:block;width:100%;text-align:left;padding:13px 16px;font-size:.9rem;font-weight:600;color:var(--heading);background:#fff;border:0;border-top:1px solid var(--border);border-radius:0}
.usermenu .umenu a:first-child{border-top:0}
.usermenu .umenu a:hover,.usermenu .umenu button:hover{background:var(--accent-soft);color:var(--heading);text-decoration:none}
.usermenu .umenu small{display:block;color:var(--muted);font-weight:400;font-size:.74rem;margin-top:2px}
.usermenu>summary .chev{transition:transform .15s}
.usermenu[open]>summary .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.usermenu .umenu a{text-decoration:none}   /* the driver pages underline links; not in a menu */
.usermenu>summary{-webkit-tap-highlight-color:transparent}

/* ---- shared components: one look for the same thing in the office, the driver app, the sub-leaser pages and the customer portal ---- */
/* segmented switch: .seg wraps radio labels (a form choice), .views wraps links (page views); .wide fills the row with big touch targets */
.seg,.views{display:inline-flex;border:1px solid var(--border-strong,var(--border));border-radius:8px;overflow:hidden;background:#fff;font-size:.8rem}
.seg label,.views a{margin:0;text-transform:none;letter-spacing:0;padding:9px 14px;cursor:pointer;color:var(--muted);font-weight:700;white-space:nowrap;display:block;text-decoration:none;font-size:inherit;line-height:1.3}
.seg label+label,.views a+a{border-left:1px solid var(--border)}
.seg input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.seg label:hover,.views a:hover{background:var(--accent-soft);color:var(--heading);text-decoration:none}
.seg label:has(input:checked),.views a.on{background:var(--accent);color:#fff}
.seg.wide,.views.wide{display:flex;margin-bottom:16px}
.seg.wide label,.views.wide a{flex:1;text-align:center;padding:14px 8px;font-size:.95rem}
/* one search bar: the text box filters the list; a picker, button or count can sit beside it */
.searchbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.searchbar input,.searchbar select{margin:0;min-width:0}
.searchbar input{flex:1 1 auto;padding:12px 14px;font-size:1rem;border-radius:10px}
.searchbar select{flex:1 1 auto;width:auto;padding:11px 14px;border-radius:10px}
.searchbar button,.searchbar .btn{width:auto;flex:0 0 auto;padding:12px 18px;border-radius:10px}
.searchbar .n{font-size:.78rem;color:var(--muted);white-space:nowrap}
/* back link at the top of a detail page: one glyph, one weight, everywhere */
.back{display:inline-block;margin:0 0 10px;font-size:.86rem;font-weight:700;color:var(--accent);text-decoration:none}
.back::before{content:"\2039\00a0"}
.back:hover{text-decoration:underline}
p .back,.hdrrow .back{margin:0}
/* one message box: ok = done, bad = problem, warn = heads-up */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:.88rem}
.flash.ok{background:var(--accent-soft);color:var(--accent-hover);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.flash.bad{background:rgba(161,27,27,.08);color:var(--danger);border:1px solid rgba(161,27,27,.25)}
.flash.warn{background:rgba(138,90,0,.1);color:var(--warn,#8a5a00);border:1px solid rgba(138,90,0,.3)}
.flash ul{margin:6px 0 0;padding-left:18px}
/* an empty list */
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:.88rem}
/* small repeats that were inline styles: a note under a field, a lede with room under it, the muted half of a title,
   a number column's heading */
.lede.under{margin:6px 0 0}
.lede.tight{margin:0 0 10px}
.mute{font-weight:500;color:var(--muted)}
table th.num{text-align:right}
.empty.sm{text-align:left;padding:6px 0;margin:0}   /* a part of a card with nothing in it, under its own heading */
/* status chips */
/* text that warns (a stock under zero, a fill over the miles, a link refusing): one red, never typed on the tag */
.txt-bad,.lede.txt-bad{color:var(--danger)}
/* the line under a popup's buttons that says what is happening (bsSay): muted, red when it went wrong */
.pop-msg{display:block;font-size:.78rem;color:var(--muted);margin-top:8px;min-height:1em}
.pop-msg.txt-bad{color:var(--danger)}
.txt-bad.strong{font-weight:700}
.chip{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.chip+.chip{margin-left:4px}
/* a chip's class says what it means: ok (done, all good), warn (waiting on someone), bad (refused, overdue, failed),
   info (new, for information), muted (closed, canceled). A ticket's and a service's own states keep their names. */
.chip.info,.chip.new,.chip.invoiced{background:rgba(42,120,214,.12);color:#1c5cab}
.chip.warn,.chip.reviewed,.chip.soon{background:rgba(237,161,0,.16);color:#7a5200}
.chip.ok,.chip.sent,.chip.emailed,.chip.fine,.chip.fixed{background:var(--accent-soft);color:var(--accent-hover)}
.chip.muted,.chip.archived,.chip.finalized{background:rgba(0,0,0,.07);color:var(--muted)}
.chip.bad,.chip.overdue,.chip.edited,.chip.due{background:rgba(161,27,27,.12);color:var(--danger)}
/* list rows: .r = one row (bubble), .t = text column, .m = right-hand figure/chip, .act = buttons/menu; the card around a list steps out of the way */
.rows{display:flex;flex-direction:column;gap:8px}
.rows .r{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--border-strong,var(--border));border-radius:10px;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.05));color:inherit;text-decoration:none}
.rows .r[hidden]{display:none}
.rows .r .t{min-width:0;flex:1}
.rows .r .t b{display:block;font-size:.98rem;color:var(--heading)}
.rows .r .t small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;line-height:1.4}
.rows .r .m{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--heading)}
.rows .r .m small{display:block;color:var(--muted);font-size:.74rem;font-weight:400}
.rows .r .act{flex:0 0 auto}
a.rows .r:hover,.rows a.r:hover{border-color:var(--accent)}
.card:has(> .rows):not(.solid),.card:has(> .empty):not(.solid){background:transparent;border:0;padding:0;box-shadow:none}
.card:has(> .rows):not(.solid) > h3,.card:has(> .rows):not(.solid) > h2{margin:0 2px 8px}
.card:has(> .rows):not(.solid) > .empty,.card:has(> .empty):not(.solid) > .empty{background:var(--card);border:1px solid var(--border-strong,var(--border));border-radius:10px;padding:14px}
/* plain tables (stack into label/value cards on a phone) and the Newer/Older pager under a list */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 10px 8px;border-bottom:1px solid var(--border)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:699px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--border);border-radius:10px;margin-bottom:9px;padding:4px 2px;background:#fff}
  .tbl td{border:0;padding:6px 12px;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .tbl td::before{content:attr(data-l);font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted);text-align:left}
}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.85rem}
.pager a{color:var(--accent);text-decoration:none;font-weight:700}
/* the confirm box (bsConfirm in shared.js): one look instead of the browser's */
.bsdlg{border:0;border-radius:14px;padding:0;width:calc(100% - 32px);max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.28);color:var(--text);background:#fff}
.bsdlg::backdrop{background:rgba(10,10,20,.5)}
.bsdlg form{margin:0;padding:20px}
.bsdlg .msg p{margin:0 0 8px;font-size:.95rem;line-height:1.5}
.bsdlg .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.bsdlg .acts button{width:auto;flex:0 0 auto;margin:0;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:700;border-radius:8px;border:0;cursor:pointer}
.bsdlg .acts .no{background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border))}
.bsdlg .acts .no:hover{background:var(--accent-soft);color:var(--heading)}
.bsdlg .acts .yes{background:var(--accent);color:#fff}
.bsdlg .acts .yes.danger{background:var(--danger)}
/* secondary buttons: ghost = outlined, sm = compact, danger = outlined red (list rows use ghost sm) */
.btn.ghost,button.ghost{background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border))}
.btn.ghost:hover,button.ghost:hover{background:var(--accent-soft);color:var(--heading)}
.btn.sm,button.sm{padding:7px 12px;font-size:.78rem;width:auto;border-radius:8px}
.btn.danger{background:transparent;color:var(--danger);border:1px solid rgba(161,27,27,.35)}
.btn.danger:hover{background:rgba(161,27,27,.08);color:var(--danger)}
/* inside a row's text column: chips sit on the title line, a bold figure inside a detail line stays inline,
   and .subrow spreads its spans out with dots between them */
.rows .r .t .chip{vertical-align:middle}
.rows .r .t small b{display:inline;font-size:inherit;color:var(--heading);font-weight:600}
.rows .r .t small a{color:var(--accent);font-weight:600;text-decoration:none}
.rows .r .t small.subrow{display:flex;flex-wrap:wrap;gap:2px 0}
.subrow>span{white-space:nowrap}
.subrow>span+span::before{content:"\2013";margin:0 7px;color:var(--muted)}
.rows .r .act{display:flex;gap:6px;align-items:center}
.rows .r .m .chip{margin:0}
/* a figure on a row's title line ("Total: $1,349.46"): the label in the muted ink, the amount bold */
.rows .r .t b:has(.tot){display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.rows .r .t b .tot{margin-left:auto;white-space:nowrap}
.rows .r .t b .tot .lbl{font-weight:500;color:var(--muted)}
/* a row whose details stack under its title line (a fill, an inspection, a time card, a day off): .top is the title
   with its figure (.fig) or chip on the right; small lines are muted (.txt: body text), then notes, photos, a .foot
   row of thumbnails and a button. .dim fades a row that is over. A .top also works inside a plain row's .t. */
.rows .r.stack{flex-direction:column;align-items:stretch;gap:2px}
.rows .r .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rows .r .top>b{flex:1 1 auto;font-size:.98rem;color:var(--heading);min-width:0;overflow-wrap:anywhere}
.rows .r .top>.fig{flex:0 0 auto;margin-left:auto;font-weight:700;white-space:nowrap;color:var(--heading)}
.rows .r .top>.chip{flex:0 0 auto;margin:0 0 0 auto}
.rows .r .top>small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;min-width:0}
.rows .r .top>small:last-child:not(:first-child){flex:0 0 auto;margin-left:auto;color:var(--text);white-space:nowrap}
.rows .r.stack>small,.rows .r.stack>.t>small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}
.rows .r.stack small.txt,.rows .r .t small.txt{color:var(--text)}
.rows .r.stack>.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:6px}
.rows .r.stack>.foot .iss-ph{margin:0}
.rows .r.stack>.foot .btn{flex:0 0 auto;margin-left:auto}
.rows .r.stack>form,.rows .r.stack>.btn{align-self:flex-start;margin-top:6px}
.rows .r.dim{opacity:.7}
/* two chips on a row's right (Confirmed + Updated) stack */
.rows .r .m:has(.chip+.chip){display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* a row's leading square: a document's type (PDF, SIGN), a tick */
.rows .r>.ic{flex:0 0 44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-hover);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;letter-spacing:.02em}
/* a heading with something on its right (a link, a total): every area */
.hdrrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.hdrrow>:is(h2,h3){margin:0}
.hdrrow .lede{min-width:0;flex:1}
@media(max-width:560px){.hdrrow:has(>.lede){flex-wrap:wrap}.hdrrow>.lede{flex:1 1 100%}}
.card:has(> .rows):not(.solid) > .hdrrow{margin:0 2px 8px}
/* a photo tile whose cleaned picture is still being made (shared.js bsScanWait): a badge over its corner */
.scan-wait{position:relative}
.scan-wait::after{content:"Cleaning\2026";position:absolute;left:6px;bottom:6px;z-index:1;padding:3px 8px;border-radius:20px;background:rgba(0,0,0,.66);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.02em;pointer-events:none;animation:bsPulse 1.6s ease-in-out infinite}
@keyframes bsPulse{50%{opacity:.55}}
/* a section whose heading folds it (Dashboard's Needs attention): the heading, a muted hint, a chevron; with
   data-remember="<key>" the browser keeps it open or folded (shared.js) */
details.fold{margin:0 0 14px}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.95rem;font-weight:700;color:var(--heading);user-select:none;-webkit-tap-highlight-color:transparent}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .hint{font-size:.78rem;font-weight:500;color:var(--muted)}
details.fold>summary .chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;flex:0 0 auto}
details.fold:not([open])>summary .chev{transform:rotate(-45deg)}
.hdrrow>a.more{font-size:.85rem;font-weight:700;text-decoration:none}   /* "All my hours ›" */
.rows a.r:active{background:var(--accent-soft)}                       /* a tapped row answers on a phone */
/* a row of views or choices that may be wider than a phone: scrolls sideways, spreads out when there is room */
.views.scroll,.seg.scroll{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.views.scroll::-webkit-scrollbar,.seg.scroll::-webkit-scrollbar{display:none}
.views.scroll a,.seg.scroll label{flex:1 0 auto;text-align:center}
/* form rows, the same in every area: .row stacks its fields, .row.pair puts two side by side (each may shrink) */
.row{display:grid;gap:12px}
.row.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row>*{min-width:0}
/* ---- the filter card: a segment row with a more-filters button, and the panel it opens ---- */
.card.filtercard{padding:12px;margin-bottom:12px}
.ftop{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.ftop .seg{flex:1 1 auto;min-width:0;display:flex}
.ftop .seg label{flex:1;text-align:center;padding:8px 6px}
/* on a phone the choices scroll sideways inside the card (never the whole page) so the more-filters button
   keeps its place on the same line whatever the screen width */
@media(max-width:560px){
  .ftop .seg{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ftop .seg::-webkit-scrollbar{display:none}
  .ftop .seg label{flex:1 0 auto;padding:7px 7px;font-size:.72rem}
  /* a row that also holds a dropdown (Users' roles) gives the switch the whole width and the dropdown the next line:
     side by side the switch was cut off mid-word (2026-10-09) */
  .ftop:has(> .field select){flex-wrap:wrap}
  .ftop:has(> .field select) > .seg{flex:1 1 100%}
  .ftop:has(> .field select) > .field{flex:1 1 100%;max-width:none !important}
}
.fbtn{width:auto;margin:0 0 0 auto;background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border));padding:9px 11px;font-size:.82rem;border-radius:8px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;cursor:pointer}
.fbtn:hover{background:var(--accent-soft);color:var(--heading)}
.fbtn .chev{transition:transform .18s;font-size:.7rem;line-height:1}
.fbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fbtn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.fbody{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.fbody[hidden]{display:none}
.fbody .field{margin-bottom:12px}
.fbody .acts{display:flex;gap:8px}
.fbody .acts button,.fbody .acts .btn{width:auto}
/* the one date range picker (admin/_range.php): its panel's ranges as chips that fill Start and End */
.rmore{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rmore label{position:relative;margin:0;text-transform:none;letter-spacing:0;font-weight:600;font-size:.8rem;padding:7px 12px;border:1px solid var(--border-strong,var(--border));border-radius:999px;background:#fff;color:var(--heading);cursor:pointer;white-space:nowrap}
.rmore input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.rmore [hidden]{display:none}   /* the ranges behind "…" (admin/_range.php bs_range_order) */
.rmore .rchip.rdots{letter-spacing:.08em;padding-left:14px;padding-right:14px}
.rmore label:hover{background:var(--accent-soft)}
.rmore label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.rmore label:has(input:focus-visible),.rquick label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rmore .rchip{margin:0;font:inherit;font-weight:600;font-size:.8rem;padding:7px 12px;border:1px solid var(--border-strong,var(--border));border-radius:999px;background:#fff;color:var(--heading);min-height:0;width:auto;line-height:1.3;cursor:pointer;box-shadow:none}
.rmore .rchip:hover{background:var(--accent-soft)}
.rmore .rchip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.rinner{margin-top:10px}
.rangebar .rquick{flex:1 1 auto}
.rquick .rtoggle{flex:1;margin:0;border:0;border-left:1px solid var(--border);border-radius:0;background:#fff;color:var(--muted);font:inherit;font-weight:700;
  padding:8px 6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;width:auto;min-height:0;box-shadow:none;line-height:1.3}
.rquick .rtoggle:hover{background:var(--accent-soft);color:var(--heading)}
.rquick .rtoggle.on{background:var(--accent);color:#fff}
.rquick .rtoggle .chev{font-size:.62rem;transition:transform .18s}
.rquick .rtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* a phone: the four share the line whole (none scrolled away); a long name takes two lines */
@media(max-width:560px){
  .rangebar.card.filtercard{padding:10px}
  .rangebar .ftop .rquick{overflow:visible}
  .rangebar .ftop .rquick label,.rangebar .rquick .rtoggle{flex:1 1 auto;min-width:0;padding:8px 2px;font-size:.68rem;letter-spacing:-.01em;white-space:normal;text-align:center;line-height:1.2}
  .rangebar .ftop .rquick label{display:flex;align-items:center;justify-content:center}
}
/* a dispatch order changed after it went out (admin/_dispatch.php bs_dispatch_changes): what changed, above the order */
/* an order's facts, one compact card (bs_dispatch_facts): wrapping pairs, then a labeled line each */
.dsp-facts{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:10px 14px;margin:0 0 12px}
.dsp-facts small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dsp-kv{display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.dsp-kv:last-child{border:0;margin:0;padding:0}
.dsp-kv b{color:var(--heading);overflow-wrap:anywhere}
.dsp-facts h3{font-size:.8rem;color:var(--heading);margin:8px 0 2px}
.dsp-row{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:8px;align-items:baseline;padding:3px 0}
.dsp-row>span{color:var(--heading);font-weight:600;overflow-wrap:anywhere}
.dsp-facts a{color:var(--accent);text-decoration:none}
.dsp-facts .dot{color:var(--muted);font-weight:400}
.dsp-row .n{font-weight:500;color:var(--text)}
.dsp-map{font-size:.78rem;font-weight:600;margin-left:4px}
.dsp-edited{background:#fff6dd;border:1px solid #e9c46a;border-left:4px solid #d99a00;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:.9rem;color:#4a3b00}
.dsp-edited p{margin:0}.dsp-edited p+p{margin-top:6px}
.dsp-edited .dim{color:#7a6a3a;font-size:.82rem}
/* ---- one ticket, one page: the drivers', sub-leasers' and customers' ticket view ---- */
.tkt-hero{background:var(--heading);color:#fff;border-radius:14px;padding:18px 18px 16px;margin-bottom:12px;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.08))}
.tkt-hero .top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tkt-hero .no{font-size:1.7rem;font-weight:800;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}   /* a long ticket number breaks, not the page width */
.tkt-hero .chips{display:flex;gap:6px;flex-wrap:wrap}
.tkt-hero .chip{background:rgba(255,255,255,.18);color:#fff}
.tkt-hero .chip.edited{background:rgba(255,140,140,.3);color:#ffd6d6}
.tkt-hero .cust{margin-top:10px;font-size:1.05rem;font-weight:700}
.tkt-hero .when{margin-top:2px;font-size:.86rem;color:rgba(255,255,255,.75)}
.tkt-hero .total{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tkt-hero .total small{font-size:.78rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.tkt-hero .total b{font-size:1.5rem}
.tkt-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media(min-width:620px){.tkt-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tkt-facts .fact{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:12px 14px;min-width:0}
.tkt-facts .fact small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.tkt-facts .fact b{display:block;font-size:1.05rem;color:var(--heading);overflow-wrap:anywhere}
.tkt-facts .fact b .u{font-size:.82rem;font-weight:600;color:var(--muted)}
.tkt-facts .fact.wide{grid-column:1 / -1}
.tkt-facts .fact a{color:var(--accent);text-decoration:none}
.tkt-notes{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:.92rem;line-height:1.5;white-space:pre-line}
.tkt-notes small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.tkt-acts{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.tkt-acts .btn{width:auto;padding:11px 18px}
.tkt-photos h2{margin:0 0 8px;font-size:.95rem;color:var(--heading)}
/* photo thumbnails, the same in every area: .pgal is a grid of them (.big: portrait ticket pages), .iss-ph a row of
   small ones (an inspection's issue photos); a button.pthumb in either opens the photo viewer (data-full, viewer.js),
   and its label is the "remove" tick over the corner. .lock is the "this can't be changed anymore" note over a form. */
.lock{padding:12px 14px;border-radius:10px;margin:0 0 16px;font-size:.88rem;background:rgba(0,0,0,.05);color:var(--muted);border:1px solid var(--border)}
.pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:16px}
.pgal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block}
.pthumb{position:relative}
.pthumb label{position:absolute;left:4px;bottom:4px;background:rgba(255,255,255,.92);border-radius:6px;padding:3px 6px;display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--danger);margin:0;text-transform:none}
.pthumb input{width:16px;height:16px;margin:0}
.pgal button.pthumb{padding:0;border:0;background:0;width:100%;margin:0;cursor:zoom-in;display:block}
.iss-ph{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.iss-ph img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.iss-ph button.pthumb{width:64px;height:64px;padding:0;border:0;background:0;margin:0;cursor:zoom-in;display:block}
.pgal.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pgal.big img{border-radius:12px;aspect-ratio:3/4;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.08))}
/* nothing on a page may let a phone pan sideways: whatever pokes past the edge is clipped (clip, not hidden,
   so the sticky header keeps working) */
body{overflow-x:clip}
/* the home screen's truck chip: "Hi Jesus – [Truck 26 ▾]" (field app and the sub-leaser shell alike) */
h1:has(.hometruck){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.hometruck{display:inline-flex;width:auto;align-items:center;gap:6px;margin:0;padding:5px 12px;border:1px solid var(--accent);border-radius:20px;background:var(--accent-soft);color:var(--accent);font:700 .9rem/1.2 inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.hometruck small{font-size:.7em;opacity:.8}
.hometruck.none{border-style:dashed;background:transparent}
/* filter card with the applied filters summed up on the top line (driver histories, service due) */
.ftop .fsum{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftop .fsum b{color:var(--heading)}
.fbtn .lbl{font-size:.82rem}
/* popup forms (bs_pop_start), office and driver app */
.dlg{position:fixed;inset:0;background:rgba(10,10,20,.55);z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:0}
.dlg[hidden]{display:none}
.dlg-card{width:100%;max-width:560px;margin:0;border-radius:14px 14px 0 0;max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.dlg{overscroll-behavior:contain;touch-action:none}
.dlg-card{touch-action:pan-y}
@media(min-width:620px){.dlg{align-items:center;padding:16px}.dlg-card{border-radius:14px}}
.dlg-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dlg-head h3{margin:0;flex:1;min-width:0}
.dlg-x{width:auto;flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:1.7rem;line-height:1;padding:2px 8px;margin:-6px -10px -6px 0;cursor:pointer}
.dlg-x:hover{color:var(--heading);background:none}
/* bsCopy's off-screen helper (shared.js) */
.bs-copy-ta{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
/* a long address or key in running text breaks onto the next line instead of running off a phone screen */
code{overflow-wrap:anywhere}
/* a checkbox with its label (and an optional <small> line under it): every page, every area */
.ckline{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:500;margin:0 0 12px;cursor:pointer}
.ckline input{width:auto;margin:3px 0 0;flex:0 0 auto}
.ckline small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:2px}
.pop-more{margin-top:14px}
.pop-more>summary{font-size:.8rem;color:var(--muted);cursor:pointer}
.pop-more>summary:hover{color:var(--text)}
.pop-more[open]>summary{margin-bottom:8px}
.pop-save{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));background:var(--card, #fff);padding:10px 0 4px}
body:has(.dlg:not([hidden])){overflow:hidden}
/* ---- the phone keyboard (shared.js sets html.kb and --vv-top, --vv-h, --kb-h while a field has it up) ----
   Every layer fixed to the screen is on one of the three lists below, and deploy/lint.sh refuses a position:fixed
   rule whose layer is on none (owner, 2026-10-07: new pages must not bring the old keyboard bugs back). A new layer
   goes on one list and gets its class added here:
     kb-fit:  .dlg .sheet .drawer .vv-fit
              holds fields: sized to the part of the screen the keyboard leaves, its content scrolls in that
     kb-bar:  .ftabs .signfoot .selbar .signbar .kb-bar
              a bar along the bottom: out of the way while typing; the one holding the field rides above the keys
     kb-over: #lb .photoview .docview #bsLoad .drawer-back .done .kb-over
              a viewer or overlay with nothing to type in: left as it is */
html.kb :is(.dlg, .sheet, .drawer, .vv-fit):not([hidden]){top:var(--vv-top);height:var(--vv-h);bottom:auto}
html.kb .dlg:not(.full){align-items:flex-end;padding:0}
html.kb .dlg-card{max-height:100%}
html.kb :is(.ftabs, .signfoot, .selbar, .signbar, .kb-bar):not(:focus-within){display:none !important}
html.kb :is(.ftabs, .signfoot, .selbar, .signbar, .kb-bar):focus-within{top:calc(var(--vv-top) + var(--vv-h));bottom:auto;transform:translateY(-100%);padding-bottom:10px}
/* a text box grows with its text (bsGrow, shared.js) to this cap, then scrolls; rows="1" starts it one line tall */
textarea{max-height:45vh;max-height:45dvh}
textarea[rows="1"]{min-height:0;resize:none}
/* picked photos on a driver's form (bsPhotoPick / bsThumb in shared.js): an x on each, a tap shows it full size */
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.thumbs:empty{display:none}
.thumb{position:relative;display:block;width:76px;height:76px;flex:0 0 auto}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;cursor:zoom-in}
.thumb-x,.thumb-x:hover,.thumb-x:focus{position:absolute;top:-8px;right:-8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0 0 2px;margin:0;
  border:2px solid #fff;border-radius:50%;background:#3d3d4e;color:#fff;font:400 20px/1 system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.photoview{position:fixed;inset:0;z-index:300;background:#111;display:flex;flex-direction:column}
.photoview img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;padding:calc(8px + env(safe-area-inset-top)) 8px 0;box-sizing:border-box}
.pv-bar{display:flex;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.pv-bar button,.pv-bar button:hover{flex:1;width:auto;margin:0;padding:14px 8px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.pv-bar .pv-del,.pv-bar .pv-del:hover{background:var(--danger)}
.pv-bar .ghost,.pv-bar .ghost:hover{background:#fff;color:var(--heading)}

/* pdfview.js: a document open over the page, with its close (X) button always in reach */
html.dv-open,html.dv-open body{overflow:hidden}
.docview{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#3a3d42}
.dv-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:#1c1e22;color:#fff}
.dv-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.dv-z{display:flex;gap:4px}
.dv-z button,.dv-x{width:40px;height:40px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;line-height:40px;cursor:pointer}
.dv-x{width:44px;height:44px;font-size:1.9rem;background:rgba(255,255,255,.2)}
.dv-dl{color:#fff;font-size:.85rem;font-weight:700;padding:10px 8px;text-decoration:underline}
.dv-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 8px calc(20px + env(safe-area-inset-bottom))}
.dv-pages{width:100%;max-width:1000px;margin:0 auto}
.dv-pages .dv-img{display:block;width:100%;height:auto;background:#fff}
.dv-msg{color:#fff;text-align:center;padding:30px 16px;margin:0}
.pv-page{position:relative;width:100%;background:#fff;margin:0 auto 10px;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.pv-page canvas{position:absolute;inset:0;width:100%;height:100%}

/* docsign.js: boxes over a PDF's pages - placing them (the office) and filling them in (the person) */
.signdoc{max-width:900px;margin:0 auto}
.signdoc.armed .pv-page{cursor:crosshair}
.sbox{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0;padding:0 2px;border:1.5px solid #c98a00;border-radius:3px;background:rgba(255,213,79,.38);color:#5c3d00;font:700 clamp(8px,1.6vw,12px)/1.1 system-ui,sans-serif;text-align:center;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none}
.sbox span{overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sbox.splace{cursor:move}
.sbox.splace.sel{outline:2px solid #1c5cab;outline-offset:1px;z-index:2}
.sbox.splace.t-sig,.sbox.splace.t-init{background:rgba(42,120,214,.18);border-color:#1c5cab;color:#12407a}
.sbox .rs{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;background:#1c5cab;border-radius:2px 0 2px 0;cursor:nwse-resize}
.sbox.sfill{cursor:pointer;background:rgba(255,213,79,.38);width:auto;min-width:0;min-height:0;font-weight:700}
.sbox.sfill.req:not(.sdone){background:rgba(255,193,7,.55);border-color:#b47b00}
.sbox.sfill.sdone{background:rgba(46,125,50,.08);border-color:rgba(46,125,50,.45);color:#111;font-weight:500;justify-content:flex-start}
.sbox.sfill.t-check{justify-content:center;font-size:clamp(10px,2.4vw,16px)}
.sbox.sfill.t-date{background:transparent;border-style:dashed;border-color:rgba(0,0,0,.25);color:#111;font-weight:500;cursor:default}
.sbox.sfill img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
/* a form line is often under 10px tall on a phone: the text may spill a pixel rather than lose its top, and the
   finger target reaches a little past the box */
.sbox.sfill{overflow:visible}
.sbox.sfill span{max-width:100%;line-height:1}
.sbox.sfill::after{content:"";position:absolute;inset:-3px -1px}
.sbox.pulse{animation:sboxpulse .9s ease-out}
@keyframes sboxpulse{0%{box-shadow:0 0 0 0 rgba(255,152,0,.9)}100%{box-shadow:0 0 0 14px rgba(255,152,0,0)}}
.signpad canvas{display:block;width:100%;height:190px;border:1.5px dashed var(--border-strong,#bbb);border-radius:10px;background:#fff;touch-action:none}

/* ---- waiting on the server (shared.js, bsBusy): the bar along the top and the spinner in a button ----
   The bar sits under the iPhone status bar (the admin app draws under it, black-translucent) and over everything the
   app layers (popups 90, sheets 150, the viewers 200-300); it never takes a tap. Every header it lies on is the dark
   theme color, so the moving part is the accent lightened, with a glow. */
#bsLoad{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:1000;height:3px;overflow:hidden;pointer-events:none;
  background:color-mix(in srgb,var(--accent,#2d6a4f) 35%,transparent);opacity:0;transition:opacity .25s}
#bsLoad.on{opacity:1;transition-duration:.15s}
#bsLoad i{position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:0 2px 2px 0;background:color-mix(in srgb,var(--accent,#2d6a4f) 45%,#fff);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent,#2d6a4f) 55%,#fff);animation:bsload 1.1s cubic-bezier(.45,.05,.55,.95) infinite}
#bsLoad:not(.on) i{animation-play-state:paused}
@media print{#bsLoad{display:none}}
@keyframes bsload{from{transform:translateX(-100%)}to{transform:translateX(225%)}}
/* the spinner: the button's own text color, so it reads on a filled, a ghost and a danger button alike. Also usable
   inline (<span class="bs-spin" aria-hidden="true"></span> before "Loading…") */
.bs-spin{display:inline-block;box-sizing:border-box;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:bsspin .7s linear infinite}
.bs-busy{cursor:progress}
.bs-busy>.bs-spin{position:absolute;margin:0;pointer-events:none}
@keyframes bsspin{to{transform:rotate(360deg)}}
/* reduced motion: nothing travels or turns; the bar is whole and the spinner still, both breathe (opacity only) */
@media (prefers-reduced-motion:reduce){
  #bsLoad i{width:100%;border-radius:0;animation:bspulse 1.6s ease-in-out infinite}
  .bs-spin{animation:bspulse 1.6s ease-in-out infinite}
}
@keyframes bspulse{50%{opacity:.35}}
/* an inspection's comments (v66, admin/field.php and the driver's Past inspections): the office's tinted, the driver's plain */
.inote{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--bg,#f5f3ef);border:1px solid var(--border)}
.inote.off{background:var(--accent-soft)}
.inote small{display:block;color:var(--muted);margin-bottom:2px}
.inote span{display:block;font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
.iack{color:var(--accent);font-weight:600}
.inote-reply{margin-top:8px;width:auto}

/* ---- The Add / Edit service popup (_service_form.php), in the office and the driver app ---- */
/* both frames: the popup's own pieces (admin.css and front.css know nothing of them) */
#svcDlg [hidden]{display:none!important}   /* .row and .svc-batch set display, which beats the browser's [hidden] */
#svcForm.many .row.pair,#svcDlg .row.pair.solo{grid-template-columns:minmax(0,1fr)}
#svcDlg .svc-batch{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
#svcDlg .svc-bhead,#svcDlg .svc-brow{display:grid;grid-template-columns:minmax(0,1fr) 100px 88px;gap:8px;align-items:center}
#svcDlg .svc-bhead{padding:0 10px;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
#svcDlg .svc-brow{padding:8px 10px;border:1px solid var(--border);border-radius:10px}
#svcDlg .svc-brow b{display:block;font-size:.92rem;color:var(--heading);overflow-wrap:anywhere}
#svcDlg .svc-brow small{display:block;color:var(--muted);font-size:.76rem;line-height:1.3}
#svcDlg .svc-brow input{margin:0;padding:8px;min-width:0}
#svcDlg .svc-brow .na{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.2}
#svcDlg .svc-btot{text-align:right;font-size:.86rem;color:var(--muted)}
#svcDlg .svc-btot b{color:var(--heading);font-variant-numeric:tabular-nums}
#svcDlg .svc-fix{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;margin:4px 0;font-weight:600}
#svcDlg .svc-fix input{width:auto;margin:0}
#svcErr{margin:0 0 12px}
/* Users > Access (a staff login's modules, bs_perm): a module a line, its name and what it covers, then Off / View only / View & edit */
.perm-grid{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.perm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--text);border-top:1px solid var(--border);font-weight:600}
.perm-row:first-child{border-top:0}
.perm-row>span{flex:1 1 auto;min-width:0}
.perm-row small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.perm-row select{flex:0 0 auto;width:auto;max-width:150px;margin:0}