/* Quickly dashboard v2.3.0 — calm, dense, precise. One token layer on top; everything below is built from it. */
@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/quicksand-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/quicksand-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* type */
  --font: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 13px; --fs-cell: 12.5px; --fs-small: 12px; --fs-meta: 11.5px; --fs-th: 11px; --fs-title: 18px; --fs-section: 14px; --fs-kpi: 23px;
  /* neutrals */
  --bg: #F7F8FA; --surface: #FFFFFF; --subtle: #F1F3F6; --hover: #F7F8FA; --line: #E6E8EC; --line-strong: #D5D9E0;
  --text: #0F172A; --text-2: #475569; --muted: #64748B; --placeholder: #94A3B8;
  /* brand green ramp: 500 is the logo green (never under small white text); 600+ carry white text */
  --green-50: #E8F7EE; --green-100: #CDEFDB; --green-300: #6BD49B; --brand: #01B254; --green-600: #067A3A; --green-700: #05622F; --green-800: #044A24;
  /* status: soft tint + dark text of the same hue */
  --ok-bg: #E6F6EC; --ok: #0B6B31; --warn-bg: #FEF3C7; --warn: #92400E; --bad-bg: #FEE4E2; --bad: #B42318; --info-bg: #DFEBFE; --info: #1D4ED8;
  --violet-bg: #EDE9FE; --violet: #5B21B6; --idle-bg: #EEF1F4; --idle: #475569;
  /* shape, depth, space (4 px grid) */
  --r: 8px; --r-sm: 6px; --r-lg: 12px;
  --shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --side: 220px; --top: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.boot { padding: 40px; color: var(--muted); }
h1, h2, h3 { line-height: 1.3; margin: 0; letter-spacing: -0.006em; }
h1 { font-size: var(--fs-title); font-weight: 600; }
h2 { font-size: var(--fs-section); font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 13px; font-weight: 600; }
p { margin: 0 0 8px; }
a { color: var(--green-600); text-underline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
code { font: 500 12px/1.4 var(--mono); background: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.icon { flex: 0 0 auto; display: block; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1 1 auto; }
.grow { flex: 1 1 auto; min-width: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------------ buttons */
button, input, select, textarea { font: inherit; color: inherit; }
button, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
  color: var(--text); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
button:hover, a.btn:hover { background: var(--hover); border-color: #C3C9D2; }
button:active { background: var(--subtle); }
button.primary, a.btn.primary { background: var(--green-600); border-color: var(--green-600); color: #fff; }
button.primary:hover, a.btn.primary:hover { background: var(--green-700); border-color: var(--green-700); }
button.primary.dangerfill { background: var(--bad); border-color: var(--bad); }
button.primary.dangerfill:hover { background: #912018; border-color: #912018; }
button.ghost, a.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--subtle); border-color: transparent; color: var(--text); }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-bg); border-color: #F5B5AE; color: var(--bad); }
button.ghost.danger:hover { border-color: transparent; }
button.small, a.btn.small { height: 28px; padding: 0 10px; font-size: var(--fs-small); border-radius: 7px; }
button.wide { width: 100%; }
button.link { height: auto; padding: 0; border: 0; background: none; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; font-weight: 400; border-radius: 4px; }
button.link:hover { color: var(--text); background: none; }
button:disabled { opacity: .45; cursor: default; pointer-events: none; }
.iconbtn { width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); border-radius: 7px; }
.iconbtn:hover, .iconbtn[aria-haspopup][aria-expanded="true"] { background: var(--subtle); border-color: transparent; color: var(--text); }
.iconbtn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.backbtn { padding: 0 8px 0 6px; margin-left: -6px; }

/* ------------------------------------------------------------------ fields */
input, select, textarea { width: 100%; height: 32px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); font-size: var(--fs-body); transition: border-color .12s, box-shadow .12s; }
textarea { height: auto; min-height: 56px; padding: 7px 10px; resize: vertical; display: block; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
/* v2.4.0: what people type is kept in CAPITALS - shown so while typing (app.js also changes the value itself).
   Boxes marked data-nocaps (UPI ID, template, campaign ID ...) and emails, passwords, dates and numbers keep their letters.
   A hint inside an empty box is not shouted. */
input:not([type]):not([data-nocaps]), input[type=text]:not([data-nocaps]), input[type=search]:not([data-nocaps]), textarea:not([data-nocaps]) { text-transform: uppercase; }
input::placeholder, textarea::placeholder { text-transform: none; }
input:hover, select:hover, textarea:hover { border-color: #C3C9D2; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(1, 178, 84, .14); }
input[type=checkbox], input[type=radio] { width: 15px; height: 15px; padding: 0; margin: 0; accent-color: var(--green-600); flex: 0 0 auto; box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline-offset: 2px; box-shadow: none; }
input[type=date] { min-width: 132px; font-variant-numeric: tabular-nums; }
input[type=number] { font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled { background: var(--subtle); color: var(--muted); border-color: var(--line); }
label, .label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); margin: 0 0 4px; }
.field { min-width: 0; }
.hint { font-size: var(--fs-meta); color: var(--muted); margin: 4px 0 0; line-height: 1.4; }
.stack { display: grid; gap: var(--s4); }
.stack > * { min-width: 0; }
.stack.tight { gap: var(--s3); }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); align-items: start; }
.formgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formgrid.narrow { grid-template-columns: 1fr 1fr; gap: var(--s2); }
.formend { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s1); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 160px; }
.row > .field.slim { flex: 0 1 110px; }
.row > .rowend { flex: 0 0 auto; }
fieldset.group { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin: 0; min-width: 0; }
fieldset.group legend { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); padding: 0 4px; margin-left: -4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks + .checks { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
label.check { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 10px 0 8px; font-size: var(--fs-small); font-weight: 500; color: var(--text); border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer; background: var(--surface); }
label.check:hover { background: var(--hover); }
label.check:has(input:checked) { background: var(--green-50); border-color: var(--green-300); color: var(--green-700); }
label.check:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
label.check:has(input:disabled) { cursor: default; opacity: .6; }
form.sections > h3 { padding-top: var(--s4); border-top: 1px solid var(--line); margin-bottom: -4px; }
form.sections > h3:first-child { padding-top: 0; border-top: 0; }

/* segmented controls: Paid / COD, quick dates, the rider filter */
.segmented, .seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--subtle); border-radius: var(--r); border: 1px solid var(--line); }
.segmented label { margin: 0; cursor: pointer; position: relative; font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.segmented input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; height: 26px; line-height: 26px; padding: 0 18px; border-radius: 6px; }
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04); }
.segmented label[for=ocod] input:checked + span { color: var(--warn); }
.segmented label[for=opaid] input:checked + span { color: var(--green-700); }
.segmented input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-small); gap: 6px; }
.seg button:hover { background: rgba(15, 23, 42, .04); color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04); }
.seg button b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg button.alerting b { color: var(--bad); font-weight: 600; }

/* on/off switch */
.switch { width: 30px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: #CBD2DB; position: relative; flex: 0 0 auto; }
.switch:hover { background: #B8C0CC; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]:hover { background: #019A49; }
.switch[aria-checked="true"] .knob { transform: translateX(12px); }
.switchcell { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ chips, notes */
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; background: var(--idle-bg); color: var(--idle); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn, .pill.cod { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.violet { background: var(--violet-bg); color: var(--violet); }
.pill.idle, .pill.off { background: var(--idle-bg); color: var(--idle); }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--idle-bg); color: var(--idle); vertical-align: 1px; }
.tag.first { margin-left: 0; margin-right: 6px; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.info { background: var(--info-bg); color: var(--info); }
.msg { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin: 0 0 12px; border-radius: var(--r); font-size: var(--fs-small); line-height: 1.45; border: 1px solid transparent; }
.msg .icon { margin-top: 2px; }
.msg.bad { background: var(--bad-bg); color: var(--bad); border-color: #FACDC8; }
.msg.ok { background: var(--ok-bg); color: var(--ok); border-color: #C4E9D1; }
.msg.warn { background: var(--warn-bg); color: var(--warn); border-color: #FCE19A; }
.msg.info { background: var(--info-bg); color: var(--info); border-color: #C4D9FD; }
.msg a { color: inherit; font-weight: 600; }
.note:empty { display: none; }
.note .msg, .result .msg, .tripview > .msg, .tripview > div > .msg:last-child, .stack > .msg { margin: 0; }
.tripview > div:empty { display: none; }
.note { scroll-margin-top: 80px; }
.okink { color: var(--ok); } .badink { color: var(--bad); }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 3000; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 10px; background: #0F172A; color: #F8FAFC; font-size: var(--fs-body); line-height: 1.4; box-shadow: var(--shadow); animation: toastin .18s ease-out; }
.toast .icon { margin-top: 1px; }
.toast.ok > .icon { color: #4ADE80; } .toast.bad > .icon { color: #FCA5A5; }
.toasttext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toastx { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #94A3B8; border-radius: 6px; margin-top: -1px; }
.toastx:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* empty states and skeletons */
.emptystate { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--muted); }
.emptyicon { width: 36px; height: 36px; border-radius: 10px; background: var(--subtle); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.emptystate .empty { margin: 0; max-width: 360px; color: var(--text-2); }
.emptystate .btn, .emptystate button { margin-top: 4px; }
.soon { max-width: 560px; text-align: center; }
.soon .emptystate { padding-bottom: 4px; }
.soon .empty { font-size: 14px; color: var(--text); font-weight: 500; }
.sk { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #ECEFF3 25%, #F6F7F9 37%, #ECEFF3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.sk.fill { width: 100%; height: 100%; border-radius: 0; }
.sk.thin { height: 8px; } .sk.tall { height: 32px; border-radius: var(--r); }
.sk.w10 { width: 10%; } .sk.w15 { width: 15%; } .sk.w20 { width: 20%; } .sk.w30 { width: 30%; } .sk.w40 { width: 40%; } .sk.w50 { width: 50%; } .sk.w60 { width: 60%; } .sk.w70 { width: 70%; } .sk.w75 { width: 75%; } .sk.w80 { width: 80%; } .sk.w90 { width: 90%; }
.skelrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.skelrow:last-child { border-bottom: 0; }
.skel-cards { display: grid; gap: 12px; } .skelcard { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.skel-form { display: grid; gap: 16px; } .skelfield { display: grid; gap: 8px; }
.skel-block { display: grid; gap: 12px; padding: 4px 0; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------------ login and setup */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.authwrap { width: 100%; max-width: 360px; display: grid; gap: 20px; justify-items: center; }
.authwrap.wide { max-width: 480px; }
.authwrap .card { width: 100%; padding: 24px; }
.biglogo { height: 36px; width: auto; display: block; }
.authtitle { font-size: 15px; text-align: center; margin: 0 0 16px; }
.login form { display: grid; gap: var(--s3); margin-top: var(--s4); }
.login .msg { margin: 0 0 12px; }
.authswitch { text-align: center; margin-top: 12px; }
.authfoot { margin: 0; font-size: var(--fs-small); color: var(--muted); text-align: center; }
.captcharow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.captcha { border: 1px solid var(--line); border-radius: var(--r); background: #fff; min-width: 0; flex: 0 1 240px; height: auto; display: block; }
.captcharow .iconbtn { border-color: var(--line-strong); width: 32px; height: 32px; }
#gbtn { display: flex; justify-content: center; min-height: 44px; }
.setup.login { align-items: flex-start; padding-top: 48px; }
.setup h1 { font-size: 18px; margin: 0 0 4px; }
.setup .lead { color: var(--text-2); margin: 0 0 16px; }
.setup .login form, .setup form { margin-top: 0; }
.stephead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.setup .step { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--green-600); white-space: nowrap; }
.stepbar { display: flex; gap: 4px; flex: 1 1 auto; }
.stepbar span { flex: 1; height: 4px; border-radius: 999px; background: var(--idle-bg); }
.stepbar span.done { background: var(--brand); }

/* ------------------------------------------------------------------ shell */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
.app.collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); min-width: 0; }
.sideinner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 0 8px 8px; overflow: hidden; }
.sidehead { height: var(--top); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 8px; margin-bottom: 8px; }
.brand { display: flex; align-items: center; border-radius: 6px; }
.brand .lockup { height: 28px; width: auto; display: block; }
.brand .brandicon { display: none; width: 28px; height: 28px; }
.sidenav { display: grid; gap: 2px; }
.navitem { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 7px; color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.navitem:hover { background: var(--subtle); color: var(--text); }
.navitem.on { background: var(--green-50); color: var(--green-600); }
.navitem.on::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; border-radius: 0 2px 2px 0; background: var(--brand); }
.navitem .navlabel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.navitem .tag { margin: 0; font-size: 10.5px; height: 16px; padding: 0 5px; }
.sidefoot { border-top: 1px solid var(--line); padding-top: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: var(--r); }
.chipwords { min-width: 0; line-height: 1.3; }
.chipwords b { display: block; font-weight: 600; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipwords span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.badge { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; background: var(--green-50); color: var(--green-600); font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.badge.logo { background: #fff; border: 1px solid var(--line); }
.badge.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app.collapsed .lockup, .app.collapsed .navlabel, .app.collapsed .navitem .tag, .app.collapsed .chipwords { display: none; }
.app.collapsed .brand .brandicon { display: block; }
.app.collapsed .sidehead { height: auto; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
.app.collapsed .navitem { justify-content: center; padding: 0; }
.app.collapsed .chip { justify-content: center; padding: 6px 0; }

.body { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1000; height: var(--top); flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mobilebrand { display: none; border-radius: 7px; } .mobilebrand img { display: block; border-radius: 7px; }
#pagetitle { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
#pagetitle .here { overflow: hidden; text-overflow: ellipsis; }
#pagetitle .crumbparent { color: var(--muted); font-weight: 500; text-decoration: none; border-radius: 4px; }
#pagetitle .crumbparent:hover { color: var(--text); }
#pagetitle .icon { color: var(--placeholder); }
.pickupswitch { position: relative; display: flex; align-items: center; color: var(--text-2); }
.pickupswitch > .icon { position: absolute; left: 9px; pointer-events: none; }
.pickupswitch > .chev { left: auto; right: 8px; color: var(--muted); }
.pickupswitch select { width: auto; max-width: 240px; padding-left: 28px; background-image: none; font-weight: 500; cursor: pointer; }
.avatar { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--green-600); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
button.avatar:hover { background: var(--green-700); }
.avatar.big { width: 34px; height: 34px; font-size: 12px; }
main { padding: 20px 24px 40px; min-width: 0; flex: 1 1 auto; }
main a { color: var(--green-600); }

.popover { position: fixed; z-index: 2600; }
.menu { min-width: 184px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; gap: 1px; }
.menuitem { justify-content: flex-start; width: 100%; height: 30px; padding: 0 8px; gap: 8px; border: 0; border-radius: 6px; background: transparent; font-weight: 400; color: var(--text); }
.menuitem .icon { color: var(--muted); }
.menuitem:hover, .menuitem:focus-visible { background: var(--subtle); outline: none; }
.menuitem.danger, .menuitem.danger .icon { color: var(--bad); }
.menuitem.danger:hover, .menuitem.danger:focus-visible { background: var(--bad-bg); }
.usermenu { min-width: 240px; }
.userwho { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.usertag { padding: 0 8px 8px; } .usertag .tag { margin: 0; }
.usermenu .menuitem { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; height: 34px; margin-top: 2px; }

.tabbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 2500; background: rgba(15, 23, 42, .42); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadein .12s ease-out; }
.scrim.bottom { align-items: flex-end; padding: 0; }
.dialog { width: min(420px, 100%); background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.dialog h2 { margin: 0; font-size: 15px; }
.dialogtext { margin: 0; color: var(--text-2); }
.dialogend { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.sheet { width: 100%; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); animation: sheetup .18s ease-out; }
.sheethead { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; }
.sheethead h2 { margin: 0; }
.sheetitem { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: var(--r); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.sheetitem .icon { color: var(--text-2); } .sheetitem .chev { margin-left: auto; color: var(--placeholder); }
.sheetitem:hover { background: var(--subtle); }
.sheetitem.on, .sheetitem.on .icon { color: var(--green-600); }
.sheetfoot { padding: 10px 12px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetup { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ page furniture */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.card.flush { padding: 0; overflow: hidden; }
.card.narrow, form.narrow { max-width: 720px; }
.aftercard { margin-top: var(--s4); } .beforecard { margin-bottom: var(--s4); }
p.aftercard { margin: 12px 2px 0; }
.inset { padding: 12px 16px; margin: 0; }
h2.inset { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cardnote { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--muted); background: #FBFCFD; }
.bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; min-height: 32px; }
.bar h2 { margin: 0; }
.bar h2 + span { display: block; font-size: var(--fs-small); margin-top: 1px; }
.bar.spaced { margin-top: 24px; }
.bar.flat { margin: 0; min-height: 0; }
.bar.inset { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.barend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.titlerow h2 { margin: 0; }
.titlerow .backbtn + h2 { padding-left: 10px; border-left: 1px solid var(--line-strong); }
.filter { display: flex; align-items: center; gap: 8px; }
.filter label { margin: 0; white-space: nowrap; color: var(--muted); font-weight: 400; }
.filter input, .filter select { width: auto; }
.searchbox { position: relative; display: inline-flex; }
.searchbox > .icon { position: absolute; left: 9px; top: 9px; color: var(--muted); pointer-events: none; }
.searchbox input { padding-left: 28px; width: 260px; max-width: 100%; }
.tabs { display: flex; gap: 20px; margin: -20px -24px 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 11px 0 9px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--brand); }
.tabs a:focus-visible { outline-offset: -2px; }
.split { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 300px); gap: var(--s4); align-items: start; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 16px; margin: 0; }
.facts dt { font-size: var(--fs-meta); color: var(--muted); }
.facts dd { margin: 1px 0 0; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.facts.two { grid-template-columns: 1fr 1fr; }
.facts.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts .wide { grid-column: 1 / -1; }
.facts.rows { display: block; }
.facts.rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.facts.rows > div:first-child { border-top: 0; padding-top: 0; }
.facts.rows dt { font-size: var(--fs-small); } .facts.rows dd { margin: 0; text-align: right; }
.plancard .hint { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
td .under, dd .under, th .under, figcaption .under { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
.line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.line h3 { margin: 0; }
.listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.listhead h2 { margin: 0; }
.actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.actions.wrap { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.actions.tiny { gap: 0; }
.menuslot { width: 28px; height: 28px; flex: 0 0 auto; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); min-height: 44px; }
ul.plain, .ticklist { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------ tables */
.tablewrap { overflow: auto; max-height: max(360px, calc(100vh - 190px)); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-cell); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 16px; } th:last-child, td:last-child { padding-right: 16px; }
thead th { position: sticky; top: 0; z-index: 2; background: #FBFCFD; font-size: var(--fs-th); line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; padding-top: 8px; padding-bottom: 8px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--hover); }
th.plain { font-weight: 500; color: var(--text); }
td.num, th.num { text-align: right; }
td.wrap { white-space: normal; min-width: 180px; max-width: 340px; }
td.addr { width: 34%; min-width: 160px; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
td.addr .under { overflow: hidden; text-overflow: ellipsis; }
tr.click { cursor: pointer; }
tr.click:focus-visible { outline-offset: -2px; }
tr.offrow th, tr.offrow td { color: var(--muted); }
tr.totals th, tr.totals td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; background: #FBFCFD; }
tr.totals:hover th, tr.totals:hover td { background: #FBFCFD; }
/* v3.5.0 - click a heading to sort, drag the line between two headings to resize (app.js table()) */
thead th.sortable { cursor: pointer; user-select: none; -webkit-user-select: none; }
thead th.sortable:hover { color: var(--text); background: var(--subtle); }
thead th.sortable:focus-visible { outline: 2px solid var(--green-600); outline-offset: -2px; }
thead th.sorted { color: var(--text); }
.sortmark { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; opacity: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; transition: opacity .12s; }
thead th.sortable:hover .sortmark { opacity: .35; }
thead th.sorted .sortmark { opacity: 1; }
thead th.sorted.down .sortmark { border-bottom: 0; border-top: 5px solid currentColor; }
/* the handle sits INSIDE its own heading: half over the next one, the neighbour paints on top of it and the drag never starts */
.colgrip { position: absolute; top: 0; right: 0; width: 12px; height: 100%; z-index: 4; cursor: col-resize; }
.colgrip::after { content: ""; position: absolute; left: 9px; top: 22%; height: 56%; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.colgrip:hover::after { background: var(--green-600); }
body.colsizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.colsizing .colgrip::after { background: var(--green-600); }
table.fixedcols { table-layout: fixed; }
table.fixedcols td { overflow: hidden; text-overflow: ellipsis; }
table.fixedcols th { overflow: visible; }
table.fixedcols td.addr { max-width: none; width: auto; }
.colreset { position: sticky; left: 12px; height: auto; margin: 6px 0 10px 12px; padding: 0; border: 0; background: none;
  color: var(--muted); font-size: var(--fs-small); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.colreset:hover { background: none; border-color: transparent; color: var(--text); }
.colreset[hidden] { display: none; }
@media (max-width: 900px) { .colgrip, .colreset { display: none; } }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.thumb { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--green-50); color: var(--green-600); font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pinmark { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--green-600); }
.platform th, .wraphead thead th { white-space: normal; vertical-align: bottom; }
.progress { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.progress .track { width: 64px; height: 4px; border-radius: 999px; background: var(--idle-bg); overflow: hidden; display: inline-block; }
.progress .track span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.progress.wide { display: flex; font-size: var(--fs-meta); color: var(--muted); margin: 6px 0 4px; }
.progress.wide .track { flex: 1 1 auto; width: auto; }
.permgrid th, .permgrid td { padding: 7px 10px; }
.permgrid .tick { text-align: center; width: 72px; }
.permgrid .tick input { vertical-align: middle; }
fieldset .tablewrap { max-height: none; border: 1px solid var(--line); border-radius: var(--r); margin-top: 8px; }
.presets { display: inline-flex; gap: 2px; padding: 2px; background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; margin: 8px 0 2px; }
.presets button { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-small); }
.presets button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04); }

/* ------------------------------------------------------------------ dashboard */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; height: auto; min-width: 0; padding: 12px 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; font-weight: 400; white-space: normal; }
.kpi:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.kpitop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kpilabel { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.kpiicon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin: -2px -4px 0 0; }
.kpiicon.brand { background: var(--green-50); color: var(--green-600); } .kpiicon.warn { background: var(--warn-bg); color: var(--warn); } .kpiicon.ok { background: var(--ok-bg); color: var(--ok); }
.kpiicon.info { background: var(--info-bg); color: var(--info); } .kpiicon.violet { background: var(--violet-bg); color: var(--violet); } .kpiicon.grey { background: var(--idle-bg); color: var(--idle); } .kpiicon.bad { background: var(--bad-bg); color: var(--bad); }
.kpinum { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: -2px; }
.kpinum.loading { color: transparent; width: 48px; border-radius: 6px; background: linear-gradient(90deg, #ECEFF3 25%, #F6F7F9 37%, #ECEFF3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.kpicap { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.kpi.alerting .kpicap { color: var(--bad); }
.live { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; height: calc(100vh - var(--top) - 170px); min-height: 480px; }
.mapwrap { position: relative; min-width: 0; min-height: 0; }
.sidecol { display: grid; grid-template-rows: fit-content(55%) minmax(0, 1fr); gap: 16px; min-height: 0; min-width: 0; }
.panel { display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; }
.panelhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 16px 10px; flex: 0 0 auto; }
.panelhead h2 { margin: 0; }
.panel .counts { margin: 0 16px 8px; align-self: flex-start; flex: 0 0 auto; }
.panel .list, .activitybody { overflow-y: auto; min-height: 0; flex: 1 1 auto; border-top: 1px solid var(--line); }
.panel .list { padding: 4px; }
.panel .skelrow { padding: 0 12px; }
.rider { display: flex; gap: 10px; padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.rider:hover { background: var(--hover); }
.rider:focus-visible { outline-offset: -2px; }
.riderwords { min-width: 0; flex: 1 1 auto; }
.rider .name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 500; }
.rider .meta { font-size: var(--fs-meta); color: var(--muted); }
.rider .alert { display: flex; gap: 4px; align-items: center; color: var(--bad); font-weight: 500; font-size: var(--fs-meta); }
.ontrip { font-size: var(--fs-meta); color: var(--violet); font-weight: 500; }
.activity { list-style: none; margin: 0; padding: 4px 0; }
.activity li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 16px; }
.acticon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--idle-bg); color: var(--idle); margin-top: -1px; }
.acticon.ok { background: var(--ok-bg); color: var(--ok); } .acticon.bad { background: var(--bad-bg); color: var(--bad); } .acticon.violet { background: var(--violet-bg); color: var(--violet); }
.actwords { flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; font-size: var(--fs-small); overflow-wrap: anywhere; }
main a.actwords { color: var(--text); } a.actwords:hover { text-decoration: underline; }
.acttime { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sync { position: absolute; top: 10px; right: 10px; z-index: 500; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(1, 178, 84, .18); }
.sync.bad .livedot { background: var(--bad); box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }

/* ------------------------------------------------------------------ maps */
#map, #route, .spotmap, .planmap, .tripmap, #livemap { border-radius: var(--r); border: 1px solid var(--line); height: 100%; min-height: 340px; z-index: 0; background: #EEF1F4; }
.spotmap { height: 280px; min-height: 0; }
.spotmap.small { height: 220px; margin-top: 8px; }
.spotmap.moving { outline: 2px solid var(--brand); outline-offset: 2px; cursor: crosshair; }
.leaflet-container { font: 12px/1.4 var(--font); }
.leaflet-container a { color: var(--green-600); }
.leaflet-bar, .leaflet-touch .leaflet-bar { border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); overflow: hidden; background-clip: padding-box; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 28px; height: 28px; line-height: 27px; font: 400 17px/27px var(--font); color: var(--text-2); border-bottom: 1px solid var(--line); }
.leaflet-bar a:hover { background: var(--hover); color: var(--text); }
.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-bar a:focus-visible { outline-offset: -2px; }
.leaflet-popup-content-wrapper { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); }
.leaflet-popup-content { margin: 9px 12px; font-size: 12px; line-height: 1.45; }
.leaflet-popup-content b { font-weight: 600; }
.leaflet-popup-tip { box-shadow: none; border: 1px solid var(--line); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); font-size: 16px; top: 2px; right: 2px; }
.leaflet-control-attribution { font-size: 10px; color: var(--muted); background: rgba(255, 255, 255, .85) !important; border-radius: 6px 0 0 0; padding: 1px 6px; }
.dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .4); color: #fff; font: 600 11px/1 var(--font); letter-spacing: .01em; display: flex; align-items: center; justify-content: center; background: #64748B; }
.dot.ok { background: #15803D; } .dot.idle { background: #B45309; } .dot.bad { background: #DC2626; } .dot.off { background: #64748B; }
.dot.mini { flex: 0 0 auto; border: 0; box-shadow: none; margin-top: 1px; }
.dot.mini.off { background: var(--idle-bg); color: var(--idle); }
.dot.big { cursor: pointer; }
.dot.chosen { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35), 0 1px 4px rgba(15, 23, 42, .4); }
.storepin { width: 30px; height: 30px; border-radius: 9px; background: #DC2626; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .4); display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font); }
.numpin { width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 600 11px/1 var(--font); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .4); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.numpin.dim, .dot.dim { opacity: .4; }
.numpin.donepin { opacity: .55; }
.numpin.donepin.dim { opacity: .25; }
.numpin.going { box-shadow: 0 0 0 4px rgba(217, 119, 6, .35), 0 1px 3px rgba(15, 23, 42, .4); }
.spotpin { display: block; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35)); }
.spotpin path { fill: var(--green-600); stroke: #fff; stroke-width: 1.5; } .spotpin circle { fill: #fff; }
.routegrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; height: 440px; }
.events { overflow-y: auto; }
.eventsfoot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ riders: papers, logo */
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.doc { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.doc h3 { margin: 0; } .doc .hint { margin: 0; }
.doc .actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.docpreview { height: 140px; border-radius: var(--r-sm); background: var(--bg); border: 1px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.docpreview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pdfbadge { background: var(--bad); color: #fff; font-weight: 600; letter-spacing: .06em; border-radius: 6px; padding: 6px 12px; font-size: 13px; }
.logorow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.logopreview { width: 72px; height: 72px; border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line-strong); color: var(--placeholder); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; }
.logopreview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logorow .hint { margin-top: 6px; }

/* ------------------------------------------------------------------ orders: list, drawer, form */
.filters { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
.filters .filter.grow { flex: 1 1 240px; min-width: 0; }
.filters .searchbox input { width: 100%; }
.quick { flex: 0 0 auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.chipbtn { height: 26px; padding: 0 10px; gap: 4px; border-radius: 999px; font-size: var(--fs-small); color: var(--text-2); border-color: var(--line); }
.chipbtn .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.chipbtn.on { background: var(--green-50); border-color: var(--green-300); color: var(--green-700); }
.chipbtn.on .n { color: var(--green-600); }
.orderstable td, .orderstable th { padding-top: 8px; padding-bottom: 8px; }
.orderstable td .pill + .under { margin-top: 2px; }
@media (max-width: 1180px) and (min-width: 901px) { .orderstable th, .orderstable td { padding-left: 8px; padding-right: 8px; } .orderstable td.addr { min-width: 110px; } .orderstable td .pill + .under { white-space: normal; min-width: 96px; } .orderstable th:first-child, .orderstable td:first-child { padding-left: 16px; } }
.shade { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); z-index: 1500; animation: fadein .12s ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--surface); z-index: 1600; border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: drawerin .18s ease-out; }
@keyframes drawerin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawerhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--top); flex: 0 0 auto; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.drawerhead h2 { margin: 0; font-size: 15px; }
.drawerbody { padding: 16px 20px 28px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.drawerbody h3 { margin: 4px 0 -6px; padding-top: 16px; border-top: 1px solid var(--line); }
.drawertop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photos { display: flex; gap: 12px; flex-wrap: wrap; }
figure { margin: 0; }
figcaption { font-size: var(--fs-meta); color: var(--muted); margin-top: 4px; }
.photothumb { width: 140px; height: 105px; padding: 0; border-radius: var(--r); overflow: hidden; background: var(--bg); border: 1px solid var(--line); cursor: zoom-in; }
.photothumb:disabled { opacity: 1; cursor: default; }
.photothumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r); box-shadow: var(--shadow); }
.lightbox .closex { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: rgba(255, 255, 255, .12); color: #fff; }
.lightbox .closex:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line-strong); display: grid; gap: 12px; }
.timeline li { position: relative; font-size: var(--fs-small); }
.timeline li b { font-weight: 500; font-size: var(--fs-body); }
.timeline li::before { content: ""; position: absolute; left: -21px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 3px var(--surface); }
.timeline li.delivered::before { background: var(--brand); }
.timeline li.failed::before { background: #DC2626; }
.timeline li.cancelled::before { background: var(--placeholder); }
.timeline li.new::before { background: #D97706; }

.orderform { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s4); align-items: start; max-width: 1100px; }
.ordermain { display: grid; gap: var(--s4); min-width: 0; }
.ordersum { position: sticky; top: calc(var(--top) + 16px); }
.billgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sumgrid { grid-template-columns: 1fr; }
.wholine { margin: 0; color: var(--text-2); }
.wholine b { color: var(--text); font-weight: 600; }
.custwho:empty { display: none; } .custwho .hint { margin: 0; }
.addresspick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.addresscard { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; color: var(--text); font-size: var(--fs-small); font-weight: 400; background: var(--surface); min-width: 0; }
.addresscard b { font-weight: 600; font-size: var(--fs-body); }
.addresscard > div { min-width: 0; overflow-wrap: anywhere; }
.addresscard input { margin-top: 2px; }
.addresscard:hover { background: var(--hover); }
.addresscard:has(input:checked) { border-color: var(--brand); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--brand); }
.addresscard:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.addresscard.new { border-style: dashed; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.badges:empty { display: none; }
.foldrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.foldbtn { height: 28px; padding: 0 10px 0 8px; border-style: dashed; color: var(--text-2); font-size: var(--fs-small); }
.foldbtn[aria-expanded="true"] { border-style: solid; background: var(--subtle); }
.foldbtn.has { border-style: solid; border-color: var(--green-300); background: var(--green-50); color: var(--green-700); }
.billrow { display: grid; gap: var(--s3); }
.finalbox { background: var(--subtle); border-radius: var(--r); padding: 10px 12px; }
.finalbox .label { margin: 0; font-weight: 400; color: var(--muted); font-size: var(--fs-meta); }
.final { display: block; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hint.codwords { color: var(--warn); font-weight: 500; }
.sumend { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: var(--s4); }
.sumend button { width: 100%; }

/* ------------------------------------------------------------------ plan, trips, cash */
.plangrid { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100vh - var(--top) - 150px); min-height: 480px; }
.planlist { display: flex; flex-direction: column; min-height: 0; }
.planlist > div:first-child { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.planlist .listhead { padding: 12px 16px 4px; }
.planlist .skelrow { padding: 0 16px; }
.tickall { display: inline-flex; gap: 8px; align-items: center; margin: 4px 16px 8px; color: var(--text-2); font-size: var(--fs-small); cursor: pointer; }
.ticklist li { border-top: 1px solid var(--line); }
.ticklist label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 16px; margin: 0; cursor: pointer; color: var(--text); font-size: var(--fs-body); font-weight: 400; }
.ticklist label:hover { background: var(--hover); }
.ticklist input { margin-top: 2px; }
.ticklist .line b { font-weight: 600; }
.plancontrols { display: grid; gap: 8px; border-top: 1px solid var(--line); padding: 12px 16px 16px; flex: 0 0 auto; background: #FBFCFD; }
.plangrid .mapwrap { min-height: 0; }
.triptag { color: #fff; font-size: 11px; font-weight: 500; border-radius: 5px; padding: 1px 6px; }
.tripcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.tripcard { display: grid; gap: 10px; }
.tripcard h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tripcard h3 .icon { color: var(--muted); }
.tripcard .msg { margin: 0; }
.tripcard .btn { justify-self: start; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.tripnumbers { margin: 0; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
/* v3.1.0 part 3: routes on the plan screen - route chips, waiting / locked trips, drag and drop, the cost of a change */
.routechip { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.routechip .swatch { width: 8px; height: 8px; border-radius: 2px; }
.routebox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.routebox select { height: 28px; }
.triphead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.triphead .spacer { flex: 1 1 auto; }
.triphead button.small { height: 26px; padding: 0 8px; font-size: var(--fs-small); gap: 5px; }
.tripcard { border-top: 3px solid var(--trip, var(--line)); }
.tripcard.waits { background: #FFFDF6; border-color: #FCD9A0; border-top-color: var(--trip, #FCD9A0); }
.tripcard.locked { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lockbtn.on { color: var(--text); background: var(--subtle); border-color: var(--line-strong); }
.waitchip { white-space: nowrap; }
.tripdelta { margin: -4px 0 0; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.tripdelta.up { color: #B45309; } .tripdelta.down { color: var(--green-700); }
.stops li[draggable="true"] { cursor: grab; }
.stops .grip { flex: 0 0 auto; color: var(--placeholder, #94A3B8); font-size: 12px; letter-spacing: -2px; cursor: grab; user-select: none; }
.ticklist li[draggable="true"] { cursor: grab; }
body.dragging .dropzone, body.dragging .newzone { outline: 2px dashed var(--line-strong); outline-offset: 2px; }
.dropover { outline: 2px dashed var(--brand) !important; background: var(--green-50) !important; }
.newzone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border: 1.5px dashed var(--line-strong); border-top-width: 1.5px;
  background: transparent; color: var(--muted); font-size: var(--fs-small); box-shadow: none; }
.planpin { width: 24px; height: 32px; filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, .35)); }
.planpin.dim { opacity: .55; }
.unrouted { align-items: flex-start; line-height: 1.6; }
.unrouted a { font-weight: 600; }
.tripnumbers b { color: var(--text); font-weight: 500; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; }
.stops li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.stops .line b { font-weight: 600; }
.seq { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--info); color: #fff; font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.addrow, .riderrow { display: flex; gap: 8px; align-items: center; }
.addrow select, .riderrow select { flex: 1 1 auto; min-width: 0; }
.addrow button, .riderrow button { flex: 0 0 auto; }
.riderrow label { margin: 0; }
.riderrow { border-top: 1px solid var(--line); padding-top: 10px; }
.poolbox { margin-top: 16px; }
.poolbox h2 { margin-bottom: 2px; }
.poolbox li { padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.poolbox p { margin: 0 0 8px; }
.tripgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; }
.tripview > .mapwrap .tripmap { height: 360px; }
.tripgrid .tripmap { min-height: 340px; }
.triptools { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.changebox { width: 96px; height: 28px; text-align: right; padding: 0 8px; }
.bringback { font-size: var(--fs-body); margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: #FBFCFD; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bringback b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.printme .note { padding: 0 16px; } .printme .note .msg { margin: 12px 0 0; }
.printme .formend { padding: 12px 16px; margin: 0; }
.printme .note + .formend { border-top: 0; }
.signline, .printhead { display: none; }
.closepanel { border-color: var(--green-300); box-shadow: 0 0 0 3px var(--green-50); max-width: 720px; }
.expected { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--subtle); border-radius: var(--r); padding: 10px 12px; }
.expected .label { margin: 0; }
.expected b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.diff { margin: 0; font-weight: 500; color: var(--muted); }
.diff.bad { color: var(--bad); } .diff.ok { color: var(--ok); }
.result { display: grid; gap: 16px; }
.result.bad { border-color: #F5B5AE; } .result.ok { border-color: #A9DDBC; }
.resulthead { display: flex; align-items: center; gap: 12px; }
.resulticon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.result.bad .resulticon { background: var(--bad-bg); color: var(--bad); } .result.ok .resulticon { background: var(--ok-bg); color: var(--ok); }
.resulthead .label { margin: 0; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.resulthead b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.result.bad .resulthead b { color: var(--bad); } .result.ok .resulthead b { color: var(--ok); }

/* live orders */
.live.liveorders { grid-template-columns: minmax(0, 1fr) 360px; height: calc(100vh - var(--top) - 60px); min-height: 520px; }
.board { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.boardsection { padding: 12px 14px 14px; display: grid; gap: 8px; flex: 0 0 auto; }
.boardsection p { margin: 0; }
.boarditem { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--surface); }
main a.boarditem { color: var(--text); }
.boarditem:hover { border-color: var(--line-strong); background: var(--hover); }
.boarditem .line b { font-weight: 600; }
.rideritem { cursor: pointer; }
.rideritem.on { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); background: #F5F9FF; }
.rideritem .line a { margin-left: auto; font-size: var(--fs-meta); }
a.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: var(--fs-small); text-decoration: none; }
a.more:hover { text-decoration: underline; }
.donepair { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.donepair b { display: block; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.donepair span { font-size: var(--fs-meta); color: var(--muted); }

/* customers */
.addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; align-items: start; }
.addresscardbig { display: grid; gap: 10px; min-width: 0; }
.addresscardbig h3 { font-size: 14px; }
.addresscardbig .hint { margin: 0; }
.addresscardbig.offcard { background: #FBFCFD; } .addresscardbig.offcard .addresstext { color: var(--muted); }
.addresstext { overflow-wrap: anywhere; }
.pinphoto { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; align-items: start; }
.pinside { min-width: 0; } .pinside .hint { margin-top: 6px; }
.formend.between { justify-content: space-between; align-items: center; } .formend.between .hint { margin: 0; flex: 1 1 240px; }
.formend.bare { border-top: 0; padding-top: 0; }
.pinphoto .spotmap.small { height: 160px; margin-top: 0; }
.gate.none { width: 140px; height: 105px; border-radius: var(--r); border: 1px dashed var(--line-strong); background: var(--bg); color: var(--placeholder); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 6px; }

/* ------------------------------------------------------------------ print: the handover list only, black on white */
/* v2.2.0 polish */
.nb { white-space: nowrap; }
@media (min-width: 901px) { .billgrid .field:first-child .hint { white-space: nowrap; } }
.addresscard:has(input:checked) .pill { background: var(--surface); }

@media print {
  .sidebar, .topbar, .tabbar, .tabs, .noprint, .note, .shade, .drawer, .toasts, .scrim, .popover { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  .app { display: block; }
  main { padding: 0; }
  body.printing main > *:not(:has(.printme)):not(.printme) { display: none !important; }
  .printme { border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; }
  .printme .tablewrap { overflow: visible; max-height: none; }
  .printme thead th { position: static; background: none; color: #000; border-bottom: 1px solid #000; }
  .printme th, .printme td { padding: 6px 8px; border-bottom: 1px solid #999; color: #000; }
  .printme tr.totals th, .printme tr.totals td { background: none; border-top: 1px solid #000; }
  .printme .pill { background: none; color: #000; padding: 0; font-weight: 600; }
  .printme .bar.inset { padding: 0 0 8px; border-bottom: 0; }
  .printme .muted { color: #333; }
  .printhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; margin-bottom: 12px; border-bottom: 1px solid #000; }
  .printhead img { height: 14px; width: auto; filter: grayscale(1) brightness(0); }
  .printhead b { font-size: 13px; }
  .changebox, .changebox:focus, .changebox:focus-visible { border: 0; border-bottom: 1px solid #333; border-radius: 0; background: none; outline: none; box-shadow: none; color: #000; -moz-appearance: textfield; appearance: textfield; }
  .changebox::-webkit-inner-spin-button, .changebox::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
  .changebox::placeholder { color: transparent; }
  .bringback { background: none; border-top: 0; padding: 14px 0 0; }
  .signline { display: block; margin-top: 40px; padding: 0; font-size: 12px; white-space: pre-wrap; }
}

@media (min-width: 901px) {
  table.pinlast th:last-child, table.pinlast td:last-child { position: sticky; right: 0; background: var(--surface); }
  table.pinlast thead th:last-child { z-index: 3; background: #FBFCFD; }
  table.pinlast tbody tr:hover td:last-child { background: var(--hover); }
  .tablewrap.scrolled table.pinlast td:last-child, .tablewrap.scrolled table.pinlast th:last-child { box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .18); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live { height: calc(100vh - var(--top) - 270px); }
  .orderform { grid-template-columns: minmax(0, 1fr) 280px; }
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ phone widths: bottom tab bar, bigger targets */
/* ------------------------------------------------------------------ v2.3.0: form dialogs, daily payout, reports, rider app */
.dialog.formdialog { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.dialog.formdialog.wide { width: min(560px, 100%); }
.dialoghead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dialoghead h2 { margin: 4px 0 0; }
.dialoghead + .dialogtext { margin-top: -8px; color: var(--muted); font-size: var(--fs-small); }
.stack.tight { gap: 12px; }
.facts.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; background: var(--subtle); border-radius: var(--r); }
.facts .diff.warn dd { color: var(--warn); } .facts .diff.bad dd { color: var(--bad); }
.facts dd a { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; }
.context { margin: -4px 0 0; }
.paysum { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); display: flex; justify-content: flex-end; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.paysum b { font-size: 16px; }
.hint.warnink { color: var(--warn); }
.paylist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); }
.paylist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.paylist li:first-child { border-top: 0; }
.payouttable td.tick, .payouttable th.tick { width: 28px; padding-right: 0; text-align: center; }
.payouttable td.tick input, .payouttable th.tick input { width: 15px; height: 15px; margin: 0; vertical-align: middle; accent-color: var(--green-600); }
.payouttable .kmedit { width: 72px; height: 28px; padding: 0 6px; text-align: right; font-size: var(--fs-cell); font-variant-numeric: tabular-nums; }
.payouttable .under.bad { color: var(--bad); }
.payouttable th, .payouttable td { padding-left: 7px; padding-right: 7px; }
.payouttable thead th { white-space: normal; line-height: 1.25; }
.payouttable th:first-child, .payouttable td:first-child { padding-left: 16px; }
.payouttable tr.paidrow td, .payouttable tr.paidrow th { color: var(--text-2); }
.payouttable .actions button.small { white-space: nowrap; }
.csvbtn { height: 28px; padding: 0 10px; font-size: var(--fs-small); }
.appfiles:empty { display: none; }
.appcard { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; }
.appcard .kpiicon { margin: 0; }
.appwords { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.appwords .muted { overflow-wrap: anywhere; }
.appwords details { margin-top: 2px; font-size: var(--fs-small); }
.appwords summary { cursor: pointer; color: var(--text-2); }
.appwords ul { margin: 4px 0 0; padding-left: 18px; }
.rangebar { padding: 0; }
.kpis.reporttiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chartbox { padding: 12px 16px 4px; border-bottom: 1px solid var(--line); }
.charthead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; margin-bottom: 4px; }
.charthead .muted { margin-left: auto; font-weight: 400; }
.chartdot { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.daychart { display: block; width: 100%; height: 150px; overflow: visible; }
.daychart .bar rect { fill: var(--brand); }
.daychart .bar:hover rect { fill: var(--green-600); }
.daychart .axis { stroke: var(--line-strong); stroke-width: 1; }
.daychart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.daychart text { font: 500 11px var(--font); fill: var(--muted); text-anchor: middle; font-variant-numeric: tabular-nums; }
.daychart text.val { fill: var(--text-2); font-weight: 600; }
.chartsk { display: block; height: 150px; margin-bottom: 12px; }
tr.quietrow th, tr.quietrow td { color: var(--placeholder); }
tr.quietrow th .under { color: var(--placeholder); }

@media (max-width: 900px) {
  .kpis.reporttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts.grid4 { grid-template-columns: 1fr 1fr; }
  .rangebar { width: 100%; } .rangeseg { display: flex; flex-wrap: wrap; } .rangeseg .segbtn { flex: 1 1 30%; }
  .appcard { flex-wrap: wrap; } .appcard .btn { flex: 1 1 100%; }
  .payouttable .kmedit { height: 36px; }
  .app, .app.collapsed { display: block; }
  .sidebar { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .mobilebrand { display: block; flex: 0 0 auto; }
  #pagetitle { font-size: 16px; flex: 0 1 auto; }
  #pagetitle .crumbparent, #pagetitle .icon { display: none; }
  .pickupswitch { min-width: 0; flex: 0 1 auto; } .pickupswitch select { max-width: 172px; }
  .avatar { width: 34px; height: 34px; }
  main { padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
  .tabitem { flex: 1 1 0; min-width: 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 500; text-decoration: none; }
  .tabitem span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabitem:hover { background: none; }
  .tabitem.on { color: var(--green-600); }
  .tabitem:focus-visible { outline-offset: -3px; }
  .toasts { right: 12px; left: 12px; width: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  button, a.btn, input, select { height: 40px; }
  input, select, textarea { font-size: 16px; }
  button.small, a.btn.small, .iconbtn, .foldbtn, .changebox { height: 40px; } .iconbtn { width: 40px; }
  .chipbtn, .seg button, .presets button { height: 36px; } .segmented span { height: 36px; line-height: 36px; }
  .toastx { width: 32px; height: 32px; } button.link { height: auto; min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; }
  label.check { height: 40px; } .switch { width: 44px; height: 26px; } .switch .knob { width: 22px; height: 22px; } .switch[aria-checked="true"] .knob { transform: translateX(18px); }
  .menuitem { height: 44px; font-size: 14px; }
  .tabs { margin: -16px -16px 16px; padding: 0 16px; gap: 18px; } .tabs a { padding: 13px 0 11px; }
  .tablewrap { max-height: none; } thead th { position: static; }
  .kpis, .kpis.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .live, .live.liveorders { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  #map { height: 52vh; min-height: 300px; } #livemap { height: 52vh; min-height: 300px; }
  .sidecol { grid-template-rows: auto auto; } .panel .list, .activitybody { max-height: 360px; }
  .routegrid { grid-template-columns: minmax(0, 1fr); height: auto; } #route { height: 46vh; }
  .orderform, .split, .plangrid, .tripgrid, .pinphoto { grid-template-columns: minmax(0, 1fr); }
  .plangrid { height: auto; } .planlist > div:first-child { max-height: 420px; }
  .planmap, .tripmap { height: 48vh; min-height: 280px; }
  .ordersum { position: static; }
  .billgrid, .formgrid.two { grid-template-columns: 1fr 1fr; }
  .facts.cols4 { grid-template-columns: 1fr 1fr; }
  .tripcards, .addresses, .addresspick { grid-template-columns: minmax(0, 1fr); }
  .stops li { flex-wrap: wrap; } .stops li .grow { flex: 1 1 calc(100% - 40px); } .stops li .actions { margin-left: 30px; }
  .riderrow { flex-wrap: wrap; } .riderrow select { flex: 1 1 100%; } .riderrow button { flex: 1 1 auto; }
  .filters .filter { flex: 1 1 130px; min-width: 0; } .filters .filter input { width: 100%; min-width: 0; } .filters .searchbox input, .searchbox input { width: 100%; }
  .filters .filter:not(.searchbox) { display: grid; gap: 4px; align-items: stretch; } .filters .filter input[type=date] { padding: 0 8px; }
  .filters .filter.searchbox { flex: 1 1 100%; } .filters .quick { flex: 1 1 100%; } .filters .quick .segbtn { flex: 1 1 auto; }
  .filter { flex: 1 1 100%; } .filter input, .filter select { flex: 1 1 auto; }
  .barend { flex: 1 1 100%; } .barend > button { flex: 1 1 auto; }
  .formend button { flex: 1 1 auto; }
  .drawer { border-radius: 0; } .drawerbody { padding: 14px 16px 24px; }
  .authwrap .card { padding: 20px 16px; } .setup.login { padding-top: 24px; }
  .segmented { display: flex; } .segmented label { flex: 1; text-align: center; }
  .titlerow .backbtn + h2 { border-left: 0; padding-left: 0; flex: 1 1 100%; }
}
/* ------------------------------------------------------------------ an address in parts (v2.5.0) */
/* v3.1.0 part 3: a 12-column grid - Address (whole row); Area (half) · City (a third) · Pincode (a sixth); Landmark · label; paste */
.addrgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.addrgrid .c12 { grid-column: span 12; } .addrgrid .c8 { grid-column: span 8; } .addrgrid .c6 { grid-column: span 6; }
.addrgrid .c4 { grid-column: span 4; } .addrgrid .c2 { grid-column: span 2; }
.addrgrid .pinf input { min-width: 0; }
.pasterow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pasterow .pastebox { flex: 1 1 260px; min-width: 0; }
.pasterow .foldrow { flex: 0 1 auto; gap: 8px; }
.pasterow button { flex: 0 0 auto; height: 34px; }
.pastewords { margin: 5px 0 0; font-size: var(--fs-small); line-height: 1.4; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pastewords:empty { display: none; }
.pastewords.ok > span:first-child { color: var(--green-700); font-weight: 600; }
.pastewords.bad { color: var(--bad); }
.pastewarn { display: inline-flex; gap: 4px; align-items: center; color: #92400E; background: var(--warn-bg); border-radius: 6px; padding: 1px 8px; }
.pastemap { height: 150px; }
.addrgrid label { margin-bottom: 4px; }
.fielderr { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--bad); line-height: 1.35; }
input.invalid, input.invalid:focus { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.fixnote { padding: 8px 10px; border: 1px solid #FCD9A0; border-radius: var(--r); background: var(--warn-bg); color: #5B2A06; font-size: var(--fs-small); line-height: 1.45; }
.fixnote .pill { background: var(--surface); vertical-align: 1px; }
.fixnote .oldline { font-weight: 600; overflow-wrap: anywhere; }
.newaddress.fixing { padding: 10px 12px 12px; border: 1px solid #FCD9A0; border-radius: var(--r); background: #FFFCF3; }
.newaddress.fixing .fixnote { padding: 0; border: 0; background: none; }
.checkchip { cursor: help; }
.blockchip { cursor: help; white-space: nowrap; }        /* v3.1.4: Google found only the block */
.addresscard:has(input:checked) .pill.warn { background: var(--warn-bg); }
.areabox { position: relative; display: inline-flex; }
.areabox > .icon { position: absolute; left: 9px; top: 9px; color: var(--muted); pointer-events: none; }
.areabox input { padding-left: 28px; width: 230px; max-width: 100%; }
.areabox input::-webkit-calendar-picker-indicator { opacity: .5; }
td.areacell { white-space: nowrap; color: var(--text-2); }
.sharecell { width: 28%; min-width: 90px; }
.sharebar { display: block; height: 6px; border-radius: 3px; background: var(--subtle); overflow: hidden; }
.sharebar > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
@media (max-width: 600px) {
  .addrgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addrgrid .c12, .addrgrid .c8, .addrgrid .c6, .addrgrid .c4 { grid-column: span 2; } .addrgrid .cityf, .addrgrid .c2 { grid-column: span 1; }
  .areabox { flex: 1 1 100%; } .areabox input { width: 100%; }
}
@media (max-width: 420px) { .formgrid.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .formgrid.three { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .sk, .kpinum.loading { animation: none; }
}

/* ---- time estimates (v2.6.0): always "about"; a grey note says how they are made */
.etanote { display: flex; gap: 5px; align-items: flex-start; margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--muted); }
.etanote svg { flex: 0 0 auto; margin-top: 1px; }
.list .etanote, .riderlist .etanote { padding: 6px 12px 2px; }
.etawhen { font-weight: 500; }
.etaback { color: var(--text-2, var(--muted)); }
.etaline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.etaline > svg { color: var(--violet); flex: 0 0 auto; }
.etaline .etanote { flex-basis: 100%; margin: 0; }
.etacell { font-size: var(--fs-meta); white-space: nowrap; }
.etanote .nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ v2.7.0 */
/* Normal / Priority: a small solid red chip, the same everywhere (list, card, plan, trip, handover, live orders) */
.pill.prio { background: #D92D20; color: #fff; font-weight: 700; font-size: 10.5px; letter-spacing: .05em; height: 18px; padding: 0 6px; border-radius: 5px; }
.line .pill.prio, th .pill.prio { vertical-align: 1px; }
td.num.prioink { color: #B42318; font-weight: 600; }
tr.priorow > th:first-child, tr.priorow > td:first-child { box-shadow: inset 2px 0 0 #D92D20; }
.prioseg label[for=opriority] input:checked + span { color: #B42318; }
.priorow2 { display: grid; gap: 6px; }
.priorow2 .hint { margin: 0; }
/* called back: amber, never missed */
.pill.callchip { background: #FEF3C7; color: #92400E; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; height: 18px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px #F59E0B; margin-left: 6px; }
.ontrip .pill.callchip { vertical-align: 1px; }
.callbanner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: #FFFBEB; border: 1px solid #F59E0B; color: #78350F; }
.callbanner > .icon { color: #D97706; }
.callbanner b { font-weight: 600; }
.boarditem.calledback { border-color: #F59E0B; background: #FFFBEB; }
.callline { display: flex; align-items: center; gap: 4px; color: #92400E; font-weight: 500; margin: 2px 0; }
.outtools { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; padding-top: 0; margin: 0; }
tr.greyrow th, tr.greyrow td { color: var(--muted); }
tr.greyrow { background: #FBFCFD; }
/* the new-version bar (stays until Reload) */
.updatebar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3500; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  border-radius: 10px; background: #0F172A; color: #F8FAFC; box-shadow: var(--shadow); font-size: var(--fs-body); max-width: calc(100vw - 24px); flex-wrap: wrap; }
.updatebar .muted { color: #94A3B8; }
.toast.info > .icon { color: #93C5FD; }
/* the customer drop-down under the mobile box (ARIA combobox) */
.field.combo { position: relative; }
.combolist { position: absolute; z-index: 40; left: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; width: max(100%, 520px); max-width: calc(100vw - 32px); max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.comboopt { display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: var(--fs-small); }
.comboopt.on, .comboopt:hover { background: var(--green-50); }
.comboname { font-weight: 600; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.combophone { font-variant-numeric: tabular-nums; color: var(--text-2); }
.comboaddr { color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.comboopt.new { display: flex; align-items: center; gap: 6px; color: var(--green-700); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 2px; }
.comboopt.new:first-child { border-top: 0; border-radius: 7px; margin-top: 0; }
/* approximate (pincode) pins */
.approx { font-size: var(--fs-meta); font-style: italic; }
.approxline { height: 28px; padding: 0 10px 0 8px; border: 1px dashed var(--line-strong); color: var(--text-2); font-size: var(--fs-small); font-weight: 400; background: #FBFCFD; }
.approxline:hover { border-style: solid; }
.approxwords { overflow: hidden; text-overflow: ellipsis; }
/* delivery partners */
.partnerbox { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r); border: 1px solid #DDD6FE; background: #F8F7FF; margin: 0 0 12px; }
.partnerhead { display: flex; align-items: center; gap: 8px; color: var(--violet); }
.partnerhead b { font-weight: 600; }
.partnerhead .muted { font-size: var(--fs-small); }
.partnerseg span { padding: 0 14px; }
.partneritem .line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.partnercash { border-top: 1px solid var(--line); }
.subhead { padding: 14px 16px 6px; margin: 0; border-top: 1px solid var(--line); }
td.tickcell, th.tickcell { width: 34px; padding-right: 0 !important; }
.rowtick { margin: 0; }
/* the rider form: emergency contact in one row */
.formgrid.three { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
fieldset.emergency .hint { margin: 6px 0 0; }
/* forms that change an order the rider has */
.reasoncard .msg { margin: 0; }
/* Login codes: the "still on PIN" warning stays in view */
.stickywarn { position: sticky; top: calc(var(--top) + 8px); z-index: 5; }
.stickywarn:empty { display: none; }
.pinwarn { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.pinwarn span { flex: 1 1 auto; }
.checks.col { flex-direction: column; align-items: flex-start; }
.receiveback .check { height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; white-space: normal; }
.addlist { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); }
@media (max-width: 900px) {
  .formgrid.three { grid-template-columns: minmax(0, 1fr); }
  .combolist { width: 100%; }
  .comboopt { grid-template-columns: minmax(0, 1fr) auto; }
  .comboaddr { grid-column: 1 / -1; text-align: left; }
}
@media print { .updatebar, .stickywarn { display: none !important; } .printme .pill.prio { color: #000; } }
.payprio { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 4px; }
.payprio .segmented span { padding: 0 12px; }

.appver { font-size: 11px; color: var(--muted); padding: 6px 4px 0; letter-spacing: .02em; }
.app.collapsed .appver { display: none; }
/* v2.8.0: the Area drop-down of the address forms */
.arealist { width: max(100%, 380px); }
.areaopt { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.areaopt .comboaddr { text-align: left; }
@media (max-width: 900px) { .arealist { width: 100%; } }

/* ------------------------------------------------------------------ v2.9.0 */
/* time estimates: a tiny caption says whose times they are */
.etacap { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .01em; white-space: nowrap; }
.etacap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #CBD2DB; }
.etacap.google::before { background: #1A73E8; }
.etarow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; }
.etarow .etawhen { color: var(--text-2); }
/* going home, not back at the store, cash due */
.pill.homechip { background: #FEF3C7; color: #92400E; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; height: 18px; padding: 0 6px; border-radius: 5px; margin-left: 6px; box-shadow: inset 0 0 0 1px #FBBF24; }
.pill.notbackchip { background: #FFF7ED; color: #9A3412; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; height: 18px; padding: 0 6px; border-radius: 5px; margin-left: 6px; box-shadow: inset 0 0 0 1px #FB923C; }
.titlerow .pill.homechip, .titlerow .pill.notbackchip, td .pill.homechip, td .pill.notbackchip { margin-left: 0; }
.ontrip .pill.homechip, .ontrip .pill.notbackchip { vertical-align: 1px; }
.pill.duechip { font-weight: 600; }
.name .pill.duechip { margin-left: 2px; }
.homebanner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; }
.homebanner > .icon { color: #B45309; flex: 0 0 auto; }
.homebanner b { font-weight: 600; }
.callbanner.notback { background: #FFF7ED; border-color: #FB923C; color: #7C2D12; }
.callbanner.notback > .icon { color: #EA580C; }
.callline.notbackline { color: #9A3412; }
.callbanner + .homebanner { margin-top: 8px; }
/* close panel: the cash comes later */
.cashlater { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--subtle); }
.cashlater .check span { font-weight: 500; }
.laterfields .field { margin: 0; }
.result.warn { border-color: #FCD34D; }
.result.warn .resulticon { background: var(--warn-bg); color: var(--warn); }
.result.warn .resulthead b { color: var(--warn); }
.timewords { color: var(--text-2); margin: 0; }
/* verified: a rider was at this door (his pin + the gate photo) */
.pill.verified { background: #DCFCE7; color: #166534; font-weight: 600; box-shadow: inset 0 0 0 1px #86EFAC; }
.line .pill.verified, td .pill.verified, .badges .pill.verified { vertical-align: 1px; }
.googlepin { font-size: var(--fs-meta); }
.verifiedseg .count { white-space: nowrap; }
/* rider: his home on a small map, and the cash he owes */
.homepin { display: grid; gap: 6px; }
.homepinhead { display: flex; align-items: center; justify-content: space-between; }
.homepinhead .label { font-size: 12px; font-weight: 500; color: var(--text); }
.homemap { height: 200px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.homepin .hint { margin: 0; }
.duecard { border-color: #F5B5AE; margin-bottom: 16px; }
.duecard .panelhead h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--bad); }
.duecard .hint { margin: 4px 0 8px; }
.duelist { display: grid; gap: 0; }
.duelist .dueline { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.duelist .dueline:first-child { border-top: 0; }
.duelist .dueline .line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.duelist .dueline.settled { opacity: .75; }
.riderchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.riderchips:empty { display: none; }
/* a dialog with several ways out */
.choicedialog .dialogend.choices { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.choicedialog .dialogend.choices button { width: 100%; justify-content: center; }
/* Google Maps card (platform owner) */
.googlecard .panelhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.googlecard .panelhead h2 { margin: 0; }
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; }
.googlecard .lasterror { margin: 0; }
/* Map | Satellite on the big maps (Google base map only) */
.maptype { display: flex; background: #fff; }
.maptype button { height: 26px; padding: 0 10px; border: 0; border-radius: 0; background: #fff; font: 500 11.5px/1 var(--font); color: var(--text-2); cursor: pointer; }
.maptype button + button { border-left: 1px solid var(--line); }
.maptype button[aria-pressed="true"] { background: var(--green-50); color: var(--green-700); }
.duecard .panelhead, .googlecard .panelhead { padding: 0; border: 0; margin: 0 0 4px; }

/* ================================================================== v3.0.0 — Live (one page for the map, the riders and the orders) */
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 100% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }
@keyframes halo { 0% { transform: scale(.85); opacity: .32; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes flash { 0% { background: var(--green-50); } 100% { background: transparent; } }
.navdotbox { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.livepulse { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: livepulse 1.4s ease-out infinite; }
#pagetitle.livetitle::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #DC2626; animation: livepulse 1.4s ease-out infinite; }
.topslot { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.topslot:not([hidden]) + .spacer { display: none; }
.updchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.updchip .upddot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.updchip.warn { background: var(--warn-bg); color: var(--warn); }
.updchip.bad { background: var(--bad-bg); color: var(--bad); }
.livenums { display: flex; gap: 6px; margin-left: auto; min-width: 0; }
button.livenum { height: 42px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; line-height: 1.1; min-width: 0; }
button.livenum:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.lnumrow { display: flex; align-items: baseline; gap: 5px; }
.lnum { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lsub { font-size: 10.5px; font-weight: 600; color: var(--bad); white-space: nowrap; }
.lcap { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.livenum.warn .lnum { color: #B45309; } .livenum.violet .lnum { color: #6D28D9; } .livenum.ok .lnum { color: var(--green-600); }
.livenum.alerting { border-color: #F5B5AE; }

main.livemain { padding: 0; }
.livegrid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: calc(100vh - var(--top)); min-height: 520px; }
.livemapbox { position: relative; min-width: 0; min-height: 0; background: #EEF1EC; }
.livemapbox #livemap { height: 100%; min-height: 340px; border: 0; border-radius: 0; }
.mapov { position: absolute; z-index: 500; display: flex; align-items: center; gap: 6px; }
.mapov.tl { left: 14px; top: 14px; } .mapov.tr { right: 14px; top: 14px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 200px); }
.mappill { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-weight: 600; font-size: 12.5px; }
.gmark { width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); }
button.trafficbtn { height: auto; padding: 0; border: 0; background: none; font-weight: 600; font-size: 12.5px; color: var(--text-2); }
button.trafficbtn:hover { background: none; color: var(--text); text-decoration: underline; }
button.trafficbtn[aria-pressed="false"] { color: var(--muted); }
button.mapbtn { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-weight: 600; font-size: 12.5px; color: var(--text); }
button.mapbtn:hover { background: #F8FAFC; }
button.mapbtn.on { background: var(--green-600); color: #fff; }
.maptypebtns { display: flex; gap: 6px; }
.maplegend { position: absolute; left: 14px; bottom: 14px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 80px); padding: 7px 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-size: 11.5px; color: var(--muted); }
.maplegend:empty { display: none; }
.maplegend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.livemapbox .leaflet-bottom.leaflet-right { margin-bottom: 4px; }

/* v3.1.0 a rider on the map: a top-view scooter in his colour, turned to where he rides, with a small name tag;
   finished / no signal: a grey dot with his initials */
.rmarkicon { background: none; border: 0; }
.rmark { position: relative; width: 44px; height: 44px; --c: #2563EB; cursor: pointer; transition: opacity .2s; }
.rmark .rhalo { position: absolute; inset: 2px; border-radius: 50%; background: var(--c); opacity: 0; }
.rmark .rarrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; }
.rmark .bike { display: block; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.rmark .bike .bodyfill { fill: var(--c); }
.rmark .rdot { display: none; position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; border-radius: 50%; background: #94A3B8; border: 2.5px solid #fff; color: #fff; font: 700 10px/1 var(--font); align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); }
.rmark .rtag { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); padding: 3px 6px; border-radius: 6px; background: #0F172A; color: #fff; font: 700 10px/1 var(--font); letter-spacing: .02em; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); }
.rmark.grey .rdot { display: flex; } .rmark.grey .rarrow, .rmark.grey .rtag, .rmark.grey .rhalo { display: none; }
.rmark.sel .rhalo { opacity: .22; animation: halo 1.8s ease-out infinite; }
.rmark.sel .rtag { background: var(--c); }
.rmark.dim { opacity: .35; }
/* stops: numbered map pins (the number is inside the SVG); delivered faded with a green tick, failed with a red cross */
.tpin { position: relative; width: 26px; height: 35px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); transform-origin: 50% 100%; }
.tpin svg { display: block; }
.tpin.next { transform: scale(1.25); }
.tpin.done svg, .tpin.failed svg { opacity: .55; }
.tpin.grey svg { opacity: .8; }
.tpin.dim { opacity: .25; }
.tbadge { position: absolute; right: -5px; top: -4px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 8.5px/1 var(--font); }
.tbadge.ok { background: #01B254; } .tbadge.bad { background: #DC2626; }
.arrowhead { width: 14px; height: 14px; }
.arrowhead svg { display: block; }
/* the one control group, top right */
.mapctl { display: flex; align-items: stretch; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(15, 23, 42, .2); overflow: hidden; }
.mapctl .maptypebtns { display: flex; gap: 0; }
.mapctl button.ctlbtn { height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #fff; font-weight: 600; font-size: 12.5px; color: var(--text); }
.mapctl > :last-child, .mapctl > button:not([hidden]):last-of-type { border-right: 0; }
.mapctl button.ctlbtn:hover { background: #F8FAFC; }
.mapctl button.ctlbtn.on { background: var(--green-50); color: var(--green-700); }
.maplegend i.sq { border-radius: 3px; }
.maplegend i.ln { width: 16px; height: 3px; border-radius: 2px; vertical-align: 3px; }
.maplegend i.dash { width: 18px; height: 3px; border-radius: 0; vertical-align: 3px; background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.trafficnote { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #B45309; font-weight: 600; }
.trafficnote .tdot { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.leaflet-interactive.pendingdot { filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .3)); }

/* the side panel */
.livepanel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.paneltabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
button.paneltab { height: auto; padding: 12px 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-weight: 600; font-size: 13.5px; color: var(--muted); }
button.paneltab:hover { background: none; color: var(--text); }
button.paneltab.on { color: var(--green-600); border-bottom-color: var(--brand); }
.tabcount { font-style: normal; margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: var(--subtle); color: var(--text-2); font-size: 11px; font-weight: 600; }
.tabcount:empty { display: none; }
.panelbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; }
.panelfilters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; }
.fchips { display: flex; flex-wrap: wrap; gap: 4px; }
button.fchip { height: 26px; gap: 5px; padding: 0 9px; border-color: var(--line); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
button.fchip b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
button.fchip.on { background: var(--green-50); border-color: var(--green-300); color: var(--green-700); } button.fchip.on b { color: var(--green-700); }
button.fchip.alerting b { color: var(--bad); }
.kmnow { white-space: nowrap; }
.rcard { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rcard:hover { border-color: var(--green-300); }
.rcard.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--green-50); cursor: default; }
.rcard:focus-visible { outline-offset: 1px; }
.rcard.offcard { padding: 10px 12px; }
.rhead { display: flex; align-items: center; gap: 10px; }
.ravatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; letter-spacing: .01em; }
.offcard .ravatar { width: 30px; height: 30px; font-size: 11px; }
.rwho { flex: 1 1 auto; min-width: 0; }
.rname { font-weight: 700; font-size: 13.5px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.rsub .motion.move { color: var(--text); font-weight: 700; } .rsub .motion.bad { color: var(--bad); font-weight: 600; } .rsub .motion.store { color: var(--green-700); font-weight: 600; }
.rsub .batt.low { color: var(--bad); font-weight: 600; }
.rchips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; align-self: flex-start; }
.pill.statuschip { border-radius: 999px; font-weight: 700; font-size: 11px; }
.ralert { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--bad); font-size: var(--fs-meta); font-weight: 600; }
.rlate { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.rcard .callline { margin-top: 8px; }
.rbar { height: 6px; margin: 10px 0 6px; border-radius: 9px; background: #EEF2F6; overflow: hidden; }
.rbar i { display: block; height: 100%; border-radius: 9px; transition: width .4s; }
.rline { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.rbar + .rline { margin-top: 0; }
.rline b { color: var(--text); font-weight: 700; }
.rnext { margin-top: 2px; color: var(--text-2); }
.srcchip { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--subtle); color: var(--text-2); font-size: 10.5px; font-weight: 700; vertical-align: 1px; cursor: help; }
.srcchip.google { background: var(--info-bg); color: var(--info); }
.rdetail { margin-top: 8px; }
.rmeta { margin-bottom: 2px; }
.rstops { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.rstop { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--line); }
.sn { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.sn.done { background: #16A34A; border-color: #16A34A; color: #fff; } .sn.failed { background: #DC2626; border-color: #DC2626; color: #fff; }
.sn.next { color: #fff; } .sn.grey { background: #94A3B8; border-color: #94A3B8; color: #fff; }
button.stopwords { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; gap: 6px; border: 0; background: none; justify-content: flex-start; font-size: 12.5px; font-weight: 500; text-align: left; color: var(--text); }
button.stopwords:hover { background: none; text-decoration: underline; }
button.stopwords > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rstop.done button.stopwords, .rstop.grey button.stopwords { color: var(--text-2); }
.rstop .when { margin-left: auto; padding-left: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rstop.done .when { color: var(--ok); } .rstop.failed .when { color: var(--bad); } .rstop.next .when { color: var(--text); font-weight: 600; }
.racts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.racts .btn .icon { color: var(--green-600); }
button.offtoggle { width: 100%; height: 32px; justify-content: flex-start; gap: 6px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font-weight: 600; }
button.offtoggle:hover { background: var(--subtle); }
.offlist { margin-top: 4px; }
.riderstab > .more, .osechead .more { font-size: var(--fs-small); }
.attention { margin-top: 14px; }
h3.sec { margin: 0 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.attrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; cursor: pointer; }
.attrow:hover { border-color: var(--line-strong); }
.attrow .pill { border-radius: 999px; font-weight: 700; }
.attrow .more { margin-left: auto; white-space: nowrap; font-weight: 700; }
.attrow.allgood { color: var(--ok); font-weight: 600; cursor: default; } .attrow.allgood:hover { border-color: var(--line); }
.osec { margin-bottom: 16px; border-radius: 10px; }
.osec.flash { animation: flash 1.2s ease-out; }
.osechead { display: flex; align-items: center; gap: 8px; margin: 2px 2px 8px; }
.osechead h3 { font-size: 13px; }
.osechead .pill { border-radius: 999px; font-weight: 700; }
.osechead .more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.oitem { display: block; margin-bottom: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; cursor: pointer; }
main a.oitem { color: var(--text); }
.oitem:hover { border-color: var(--line-strong); }
.oitem.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--green-50); }
.oitem .line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.orderstab .donepair { margin-top: 0; }
.panelbody .activity { padding: 0; }
.panelbody .activity li { padding: 7px 4px; }

@media (max-width: 1280px) and (min-width: 1001px) {
  button.livenum { padding: 0 9px; } .lnum { font-size: 14.5px; } .lcap { font-size: 9.5px; letter-spacing: .03em; }
  .livegrid { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1000px) {
  .livegrid { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .livemapbox { height: 56vh; min-height: 320px; }
  .livepanel { border-left: 0; border-top: 1px solid var(--line); }
  .panelbody { overflow: visible; padding: 12px 12px 16px; }
  body.onlive .topbar { height: auto; min-height: var(--top); flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 10px; }
  body.onlive .topslot { display: contents; }
  body.onlive .updchip { margin-right: auto; }
  .livenums { order: 10; flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  button.livenum { height: 46px; padding: 0 10px; }
  .mapov.tr { max-width: calc(100% - 28px); }
  .mapov.tl { top: 58px; }
  .maplegend { max-width: calc(100% - 28px); right: 14px; }
}
@media (max-width: 900px) {
  body.onlive main.livemain { padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)); }
  button.fchip { height: 32px; } button.mapbtn { height: 34px; } button.paneltab { height: auto; padding: 13px 0 11px; }
  button.stopwords { height: auto; min-height: 28px; }
  button.offtoggle { height: 40px; }
  button.livenum { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .livepulse, #pagetitle.livetitle::before, .rmark.sel .rhalo { animation: none; } }
@media (max-width: 900px) { .mapctl button.ctlbtn { height: 36px; padding: 0 10px; } }

/* ================================================================== v3.0.0 — the customer page */
.custpage { max-width: 1320px; }
.custhero { padding: 0; overflow: hidden; }
.herotop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; }
.heroav { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--green-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.herowho { min-width: 0; flex: 1 1 auto; }
h1.heroname { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.heroverified { border-radius: 999px; height: 22px; font-size: 11.5px; }
.herosub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.herophone { font-size: 15px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.iconlink { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green-600); text-decoration: none; }
.iconlink:hover { background: var(--green-50); border-color: var(--green-100); }
.herosince { font-size: var(--fs-small); margin-left: 4px; }
.heroacts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.heroacts button { height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.ckpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ckpi { padding: 12px 22px 14px; border-right: 1px solid var(--line); min-width: 0; }
.ckpi:last-child { border-right: 0; }
.ckpi .l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ckpi .n { margin-top: 3px; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckpi .c { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custcols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.sechead h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.countchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--subtle); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.custmain > div:empty { display: none; }
.custmain #addressform { margin-bottom: 16px; }
.addrcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.addrcard { padding: 0; overflow: hidden; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.addrcard.offcard { opacity: .72; }
.amap { position: relative; height: 210px; background: #EEF1F4; }
.amap.nopin { height: 120px; }
.amapleaf { position: absolute; inset: 0; z-index: 0; }
.amap.moving .amapleaf { cursor: crosshair; outline: 2px solid var(--brand); outline-offset: -2px; }
.amap .atl { position: absolute; left: 12px; top: 12px; z-index: 500; display: flex; gap: 6px; }
.amap .atl .pill { height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); font-weight: 600; }
.amap .atl .pill.verified.solid { background: var(--green-600); color: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.amapbtns { position: absolute; right: 12px; top: 12px; z-index: 500; display: flex; gap: 6px; }
button.amapbtn { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .22); font-size: 11.5px; font-weight: 600; }
button.amapbtn.on { background: var(--green-600); color: #fff; }
.adist { position: absolute; left: 12px; bottom: 12px; z-index: 500; padding: 5px 10px; border-radius: 9px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.agate { position: absolute; right: 12px; bottom: 12px; z-index: 500; width: 104px; height: 78px; border: 3px solid #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, .3); background: var(--bg); }
.agate .photothumb { width: 100%; height: 100%; border: 0; border-radius: 0; }
.agatecap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 9.5px; font-weight: 700; text-align: center; letter-spacing: .04em; pointer-events: none; }
.movehint { pointer-events: none; position: absolute; left: 50%; top: 44px; transform: translateX(-50%); z-index: 500; padding: 5px 10px; border-radius: 8px; background: var(--text); color: #fff; font-size: 11.5px; white-space: nowrap; }
.anopin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-weight: 600; font-size: 12.5px; padding-top: 14px; }
.anopin small { font-weight: 400; font-size: 11.5px; }
.amap.moving .anopin { display: none; }
.acontent { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.atitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.atitle b { font-size: 13.5px; letter-spacing: .04em; }
.pill.srcpill { border-radius: 999px; }
.al1 { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.al2 { margin-top: 1px; color: var(--muted); font-size: 12.5px; }
.aparts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 12.5px; }
.aparts dt { color: var(--muted); }
.aparts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.aparts dd.none { color: var(--muted); font-weight: 500; }
.ameta { color: var(--muted); font-size: 12px; }
.aacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.aacts .amore { margin-left: auto; }
.addnew { height: auto; min-height: 220px; flex-direction: column; gap: 4px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent; color: var(--muted); align-self: start; white-space: normal; }
.addnew:hover { border-color: var(--green-300); background: #FAFDFB; color: var(--green-700); }
.addnewmain { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.addnew small { font-size: 11.5px; font-weight: 500; }
.recent { padding: 16px 18px; }
.recenthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.recenthead h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.timeline2 { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; font-size: 12.5px; }
.timeline2::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline2 .ev { position: relative; padding: 0 0 12px; }
.timeline2 .ev:last-child { padding-bottom: 0; }
.timeline2 .ev::before { content: ""; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--placeholder); }
.timeline2 .ev.g::before { background: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); }
.timeline2 .ev.r::before { background: #DC2626; box-shadow: 0 0 0 1.5px #DC2626; }
.timeline2 .ev.v::before { background: #7C3AED; box-shadow: 0 0 0 1.5px #7C3AED; }
.timeline2 .ev small { display: block; color: var(--muted); font-size: 11px; }
.evwords { display: inline; height: auto; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; text-align: left; white-space: normal; color: var(--text); }
button.evwords:hover { background: none; text-decoration: underline; }
.timeline2.full { padding: 16px 16px 16px 40px; }
.timeline2.full::before { left: 21px; top: 22px; bottom: 22px; }
.custhistory { margin-top: 24px; }
.htabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); }
button.htab { height: auto; padding: 12px 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 600; }
button.htab:hover { background: none; color: var(--text); }
button.htab.on { color: var(--green-600); border-bottom-color: var(--brand); }
.custhistory td.mono, .custhistory th.mono { font-weight: 700; }
.custhistory .tablewrap { border: 0; }
@media (max-width: 1100px) and (min-width: 901px) { .ckpi { padding: 12px 14px; } .ckpi .n { font-size: 17px; } }
@media (max-width: 900px) {
  .herotop { padding: 16px; gap: 12px; }
  .heroacts { margin-left: 0; width: 100%; }
  .heroacts button { flex: 1 1 auto; height: 44px; }
  .heroacts #custneworder { flex: 2 1 auto; }
  .ckpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ckpi { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .ckpi:nth-child(2n) { border-right: 0; }
  .ckpi:last-child { grid-column: span 2; border-bottom: 0; }
  .custcols { grid-template-columns: minmax(0, 1fr); }
  .addrcards { grid-template-columns: minmax(0, 1fr); }
  .iconlink { width: 40px; height: 40px; }
  .hide-m { display: none; }
  .custhistory th, .custhistory td { padding-left: 10px; padding-right: 10px; }
  .custhistory td .pill { white-space: normal; height: auto; min-height: 20px; padding-top: 2px; padding-bottom: 2px; }
  .adist { max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; }
}
.rline .nowrap, .rsub .nowrap { white-space: nowrap; }
.rsub .batt { white-space: nowrap; }
@media (max-width: 1000px) { .livemapbox .leaflet-control-zoom { display: none; } }

/* ------------------------------------------------------------------ v3.1.0 the Dashboard (overview) */
.dbhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pill.datechip { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.pill.datechip.bad { color: var(--bad); border-color: #F5B5AE; }
.dbseg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dbseg button { height: 32px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; font-weight: 600; color: var(--text-2); }
.dbseg button + button { border-left: 1px solid var(--line); }
.dbseg button:hover { background: var(--hover); }
.dbseg button.on { background: var(--green-600); color: #fff; }
.dbkpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dbk { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 14px; border-radius: 12px; color: var(--text); text-decoration: none; }
a.dbk:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.dbkl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbkn { font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbkn.g { color: var(--green-600); } .dbkn.a { color: #B45309; } .dbkn.v { color: #6D28D9; }
.dbkc { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbup { color: var(--green-600); font-weight: 700; } .dbdn { color: var(--bad); font-weight: 700; } .dbflat { color: var(--muted); font-weight: 700; }
.dbk .sk { display: block; height: 10px; margin: 3px 0; } .dbk .sk.tall { height: 22px; }
.dbgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dbthree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.dbmain .card { border-radius: 12px; }
.dbcardhead { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.dbcardhead.plain { padding: 0 0 10px; }
.dbcardhead h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.dbmore { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--green-600); text-decoration: none; white-space: nowrap; }
.dbmore:hover { text-decoration: underline; }
.dbriders .tablewrap { max-height: none; }
.dbriders table th { background: #fff; }
.dbriders table td, .dbriders table th { padding: 9px 8px; }
.dbriders table td:first-child, .dbriders table th:first-child { padding-left: 16px; }
.dbriders table td:last-child, .dbriders table th:last-child { padding-right: 16px; }
.dbriders table tr:last-child td { border-bottom: 0; }
.dbriders .num, .dbriders th.num { text-align: right; }
.dbwho { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dbav { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 700 10.5px/28px var(--font); text-align: center; }
.dbname { font-weight: 600; }
.dbchips { display: flex; gap: 4px; flex-wrap: wrap; }
.dbriders .badink, .dbcash .badink { color: var(--bad); } .dbcash .warnink { color: #B45309; }
.dbriders .pad { padding: 8px 16px 16px; }
.dblive h2 .livepulse { flex: 0 0 auto; }
.dbatt { margin-top: 8px; }
.dbatt .sec { margin-bottom: 4px; }
.dbit { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 12.5px; }
.dbit:last-child { border-bottom: 0; }
a.dbit:hover .grow { text-decoration: underline; }
.dbit.allgood { color: var(--ok); font-weight: 600; }
.dbbars { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding-top: 4px; }
.dbbar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.dbstack { width: 100%; max-width: 28px; display: flex; flex-direction: column; min-height: 0; border-radius: 5px 5px 0 0; overflow: hidden; }
.dbstack i { display: block; background: var(--brand); min-height: 2px; } .dbstack i.f { background: #FCA5A5; }
.dbbarn { font-size: 10.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 13px; }
.dbbarl { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dbnote { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
.dbkey { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.dbkey i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--brand); margin-left: 6px; } .dbkey i.f { background: #FCA5A5; }
.dbrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.dbrow b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dbrow:last-child { border-bottom: 0; font-weight: 700; }
.dbact { list-style: none; margin: 0; padding: 0; }
.dbact li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.dbact li:last-child { border-bottom: 0; }
.dbact a { color: var(--text); text-decoration: none; min-width: 0; }
.dbact a:hover .dbwords { text-decoration: underline; }
.dbact small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbact time { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbicon { flex: 0 0 auto; width: 24px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--idle-bg); color: var(--idle); }
.dbicon.ok { background: var(--ok-bg); color: var(--ok); } .dbicon.bad { background: var(--bad-bg); color: var(--bad); } .dbicon.violet { background: var(--violet-bg); color: var(--violet); }
@media (max-width: 1180px) and (min-width: 901px) {
  .dbkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dbthree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbthree > :last-child { grid-column: span 2; }
}
@media (max-width: 1100px) { .dbgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .dbkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dbk { padding: 12px; } .dbkn { font-size: 21px; }
  .dbthree { grid-template-columns: minmax(0, 1fr); }
  .dbhead .spacer { display: none; }
  .dbseg { width: 100%; } .dbseg button { flex: 1 1 0; padding: 0 6px; height: 36px; }
  .dbriders table th:nth-child(5), .dbriders table td:nth-child(5), .dbriders table th:nth-child(7), .dbriders table td:nth-child(7),
  .dbriders table th:nth-child(8), .dbriders table td:nth-child(8) { display: none; }
}

/* ------------------------------------------------------------------ v3.1.0 why late */
.whylate { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-2); white-space: normal; }
.whylate .pill { flex: 0 0 auto; height: 18px; font-size: 10.5px; }
.whybox { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--subtle); font-size: 12.5px; }
.whybox.late { background: var(--warn-bg); }
.whybox b { display: block; margin-bottom: 2px; }
button.speedtoggle { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .22); font-size: 12px; font-weight: 600; }
button.speedtoggle.on { background: var(--green-50); color: var(--green-700); }
.latehead { display: flex; align-items: center; gap: 16px; }
.latehead .check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; margin: 0; }
td.whycell { min-width: 260px; max-width: 460px; } td.whycell .under { display: block; margin-top: 4px; }

/* v3.1.0 part 2 - the riders' day */
.dbname .under.gpsoff { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-meta); }
.dbchips .startduty { height: 24px; padding: 0 8px; font-size: 11.5px; }
.cpchip { margin-left: 6px; }

/* ------------------------------------------------------------------ v3.1.0 part 3: Settings -> Routes */
.routegrid2 { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.routegrid2 .mapwrap { position: sticky; top: 64px; }
.routemap { height: 520px; min-height: 0; }
.routelist { display: grid; gap: 12px; }
.routecard { display: grid; gap: 10px; border-top: 3px solid var(--trip, var(--line)); }
.routecard h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.unroutedcard { border-top-color: var(--line-strong); background: #FBFCFD; }
.unroutedcard p { margin: 0; }
.beatchips { display: flex; gap: 6px; flex-wrap: wrap; }
.beatchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.beatchip.off { opacity: .6; text-decoration: line-through; }
.beatchip.code { font-variant-numeric: tabular-nums; background: var(--surface); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatchpick { position: relative; cursor: pointer; }
.swatchpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatchpick span { display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.swatchpick input:checked + span { box-shadow: 0 0 0 2px var(--text); }
.swatchpick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.arealist-pick { max-height: 230px; overflow: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r); }
.arealist-pick li label { display: flex; gap: 8px; align-items: center; padding: 6px 10px; }
.arealist-pick li + li { border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .routegrid2 { grid-template-columns: minmax(0, 1fr); } .routegrid2 .mapwrap { position: static; } .routemap { height: 320px; } }
.pinrow:has(> .spotmap[hidden]) { display: none; }
.waitline { margin: -4px 0 0; }

/* ---- v3.1.2: honest rider status - GPS chip, "Reached ... not marked delivered" / "Left ... without Order complete", the grey
   "Earlier GPS gaps today" note, the Dashboard's status line, detours on the travelled line */
.pill.gpschip { border-radius: 999px; font-size: 10.5px; font-weight: 700; height: 18px; padding: 0 7px; }
.reachedline { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; padding: 5px 8px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.reachedline svg { flex: 0 0 auto; margin-top: 2px; }
.reachedline.open { background: var(--warn-bg); color: var(--warn); }
.reachedline.left { background: var(--bad-bg); color: var(--bad); }
.gpsnote { margin-top: 4px; font-size: 11px; color: var(--muted); }
.dbmotion { display: block; margin-top: 3px; font-size: var(--fs-meta); color: var(--muted); }
.dbmotion.move { color: var(--text); font-weight: 600; } .dbmotion.bad { color: var(--bad); font-weight: 600; } .dbmotion.store { color: var(--green-700); font-weight: 600; }
.dbreached { display: block; margin-top: 3px; font-size: var(--fs-meta); font-weight: 600; color: var(--warn); white-space: normal; }
.dbreached.left { color: var(--bad); }
.pill.reachedchip { white-space: normal; height: auto; min-height: 20px; padding: 2px 8px; line-height: 1.3; }
.legend i.detour { background: #F59E0B; }
.pill.reachedchip { display: inline-flex; margin: 0 0 4px; max-width: 260px; }

/* v3.1.3 - Settings -> Areas "Pins at the store (N)", the customer card's "Pin looks like the store" chip */
button.warnbtn { background: var(--warn-bg); color: var(--warn); border-color: #FCE19A; }
button.warnbtn:hover:not(:disabled) { filter: brightness(0.97); }
.storepins { margin-bottom: 14px; border-left: 3px solid var(--bad); }
.storepins h3 { margin: 0 0 4px; }
.storepins td .storepinchip { margin-top: 4px; }
.storepinchip { white-space: nowrap; }

/* v3.2.0 agent K2 - the trip timeline under the chosen rider's card on Live tracking (app/static/timeline.js).
   The lines reuse the customer page's "Recent activity" classes (.timeline2 / .ev / small) so the sizes are the same;
   everything here is only what that box does not have: two more dot colours, the pulsing "now" line, map stop marks. */
.riderstab.tl-open > :not(.rcard.sel):not(.tl-wrap):not(.tl-back):not(.attention) { display: none; }
.riderstab.tl-open > .offlist:has(.rcard.sel) { display: block; } .riderstab.tl-open > .offlist > .rcard:not(.sel) { display: none; }
.riderstab.tl-open .attention .attrow.tl-other { display: none; }
.tl-wrap { margin: 2px 0 14px; }
.tl-back { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--green-700); text-decoration: none; }
.tl-back:hover { color: var(--green-800); text-decoration: underline; background: none; }
.tl-card { padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tl-card .recenthead { margin-bottom: 8px; }
.tl-card .recenthead span { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.tl-now { position: relative; margin: 0 0 12px; padding-left: 24px; font-size: 12.5px; font-weight: 600; color: var(--info); }
.tl-now::before { content: ""; position: absolute; left: 1px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 4px rgba(29, 78, 216, .18); animation: tl-pulse 1.6s infinite; }
.tl-now.seen { color: var(--muted); } .tl-now.seen::before { background: var(--placeholder); box-shadow: 0 0 0 4px rgba(148, 163, 184, .2); animation: none; }
.tl-now.door { color: var(--green-700); } .tl-now.door::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(1, 178, 84, .18); }
@keyframes tl-pulse { 50% { box-shadow: 0 0 0 8px rgba(29, 78, 216, .04); } }
.tl-list .ev { cursor: pointer; border-radius: 6px; margin-left: -6px; padding-left: 6px; padding-right: 6px; }
.tl-list .ev:hover, .tl-list .ev.on { background: var(--subtle); }
.tl-list .ev.a::before { background: #D97706; box-shadow: 0 0 0 1.5px #D97706; }
.tl-list .ev.b::before { background: #2563EB; box-shadow: 0 0 0 1.5px #2563EB; }
.tl-list .ev.m::before { background: var(--placeholder); box-shadow: 0 0 0 1.5px var(--placeholder); }
.tl-list .ev.a .evwords { color: var(--warn); } .tl-list .ev.r .evwords { color: var(--bad); }
.tl-list .ev .pill { height: 16px; padding: 0 6px; margin-left: 5px; font-size: 10.5px; vertical-align: 1px; }
.tl-list.timeline2::before { left: 5px; }
.tl-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
/* v3.3.0: draw ONE trip on the map instead of his whole day */
.tl-onmap { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: #fff; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tl-onmap.on { border-color: var(--green); color: var(--green); background: #F0FDF4; }
.tl-foldhead { display: flex; justify-content: flex-end; padding: 6px 2px 2px; }
.daytrail.faint { pointer-events: none; }
.tl-sec { margin: 14px 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl-earl { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 6px; padding: 9px 12px; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; font-weight: 500; text-align: left; white-space: normal; }
.tl-earl:hover { border-color: var(--line-strong); background: var(--surface); }
.tl-earl b { font-weight: 700; } .tl-earl span { color: var(--muted); font-weight: 500; }
.tl-earl.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.tl-fold { margin: 0 0 6px; padding: 10px 12px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }
.tl-stopm { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #D97706; color: #fff; font: 700 10px/1 var(--font); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tl-stopm.nogps { background: var(--placeholder); }
.tl-stopm.offroute { background: #F59E0B; }

/* v3.7.0 - Attendance: the selfie taken as duty started, beside the record of where and when */
.selfiethumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; background: var(--subtle); }
.selfiebtn { width: auto; height: auto; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; overflow: hidden; }
.selfiebtn:hover { border-color: var(--green-600); background: none; }
.attsummary { border-bottom: 1px solid var(--line); font-size: var(--fs-body); }

/* v3.9.0 - Day activity: the time list beside the day's map */
.daysplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.daysplit > div:first-child { max-height: max(420px, calc(100vh - 220px)); overflow: auto; }
.daymap { min-height: 420px; height: 100%; border-left: 1px solid var(--line); }
.dayline .daytime { display: inline-block; min-width: 46px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 8px; }
.dayline .ev { padding-bottom: 14px; }
@media (max-width: 1000px) { .daysplit { grid-template-columns: minmax(0, 1fr); } .daymap { border-left: 0; border-top: 1px solid var(--line); min-height: 320px; } }

/* v3.9.0 - an address as two lines: the area on top, the house under it */
/* v3.11.0: the close panel's parcel rows - the parcel, then its change tucked under it */
.receiveback .backrow + .backrow { margin-top: 6px; }
.receiveback .check.sub { margin-left: 26px; font-size: var(--fs-meta); color: var(--text-2); }
.takebackmany .check.allcheck { font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
td.addr.two { white-space: normal; display: flex; align-items: center; gap: 4px; }   /* v3.10.1: the pin sits centred against both lines */
td.addr.two .addrlines { min-width: 0; flex: 1 1 auto; }          /* min-width:0 keeps the ellipsis working inside a flex row */
td.addr.two .pinmark { flex: none; margin: 0; }
td.addr.two .areatop { display: block; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.addr.two .under { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }