:root {
  color-scheme: light;
  --bg: #f2f5f3;
  --band: #e8eee9;
  --surface: #ffffff;
  --ink: #15201d;
  --muted: #65716d;
  --line: #d9e0dc;
  --accent: #0f766e;
  --accent-soft: #e1f3ef;
  --amber: #a26016;
  --amber-soft: #fff0d9;
  --danger: #b42318;
  --danger-soft: #ffe4df;

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  /* One radius for all interactive controls (buttons / inputs / selects) so
     they read as one family — Apple-style consistency. */
  --r-control: 10px;

  /* 8-pt spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(21, 32, 29, 0.06);
  --shadow-md: 0 6px 20px rgba(21, 32, 29, 0.08);
  --shadow-lg: 0 24px 70px rgba(21, 32, 29, 0.22);

  /* Focus ring */
  --ring: 0 0 0 3.5px rgba(15, 118, 110, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;

  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: linear-gradient(180deg, #f7faf8 0%, var(--bg) 32%);
  color: var(--ink);
  overflow-x: clip;
}

body,
#app,
main,
section,
article,
form,
dialog,
div {
  min-width: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select,
input,
textarea {
  border-radius: var(--r-control);
}

button {
  min-height: 44px;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0 16px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

button:hover {
  /* Subtle darken — quieter and more Apple than the old saturate+brighten. */
  filter: brightness(0.96);
}

button:active {
  transform: scale(0.97);
  filter: brightness(0.93);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: none;
  transform: none;
}

:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

input,
select,
textarea {
  width: 100%;
  border: 0.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  min-height: 38px;
  padding: 8px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Radios and checkboxes must never inherit the full-width 38px input sizing —
   otherwise a native radio stretches to 100% of its row (it did in the invoice
   and dispatch Match modals, squashing the payment text to zero width). Specific
   rules that give a checkbox an explicit size still win over this. */
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c4cdc8;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input::placeholder,
textarea::placeholder {
  color: #9aa6a1;
}

textarea {
  resize: vertical;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2.1rem, 8vw, 4.25rem);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.brand-logo {
  display: block;
  width: min(260px, 58vw);
  height: 92px;
  margin: 0 0 2px;
  object-fit: contain;
  object-position: left center;
  transition: height 0.16s ease, width 0.16s ease;
}
/* Collapsed side menu → the main column narrows, so shrink the logo to suit. */
.app-shell.nav-collapsed .brand-logo {
  width: min(150px, 42vw);
  height: 54px;
}

h2 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Apple-way: no bold anywhere — cap emphasis at 500, lean on size/color/spacing
   for hierarchy. <strong>/<b> default to 700 in the UA sheet, so pin them. */
strong,
b {
  font-weight: 500;
}

.hidden {
  display: none !important;
}

/* Cold-start shell: with a stored session (html.has-session, set by an inline
   head script before app.js runs) the workspace paints immediately and the
   login screen never flashes. app.js toggles the class on login/logout. */
html.has-session #loginView { display: none !important; }
html.has-session #workspaceView.hidden { display: grid !important; }
/* Until app.js picks the right tab for the ROLE (view-ready, set in
   showWorkspace after renderRoleAccess), keep tab contents and menu items
   invisible — otherwise a driver briefly sees the dock worker's Create
   Service tab on cold start / pull-to-refresh. */
html.has-session:not(.view-ready) #workspaceView .view-stack,
html.has-session:not(.view-ready) .tabbar .tab-button,
html.has-session:not(.view-ready) .nav-foot { visibility: hidden; }

body:not(.admin-role) #customerInvLine {
  display: none !important;
}

body:not(.admin-role) .tab-button[data-view="adminView"] {
  display: none !important;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  /* clip, not hidden: overflow-x:hidden makes this a scroll container and
     breaks position:sticky on descendants (filter bars) even though it never
     actually scrolls itself. */
  overflow-x: clip;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  min-width: 0;
}

/* Desktop, logged in: the topbar leaves the flow so the work area starts at
   the very top of the page; the logo overlays the empty strip above the side
   menu, which keeps its old position via the tabbar margin below. */
@media (min-width: 781px) {
  .app-shell.has-workspace .topbar {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: 20px;
    right: 20px;
    margin-bottom: 0;
    z-index: 20;
    pointer-events: none;
  }
  .app-shell.has-workspace .topbar > * {
    pointer-events: auto;
  }
  .app-shell.has-workspace .tabbar {
    margin-top: 123px;
  }
  /* Center the logo + user pill over the rail column (JS mirrors the rail's
     actual width into --nav-col-w; expanded rail is max-content). Flex, not
     grid: flex cross-axis centering overflows an oversized child evenly on
     both sides, grid justify-items pins it to the track start. */
  .app-shell.has-workspace .brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: var(--nav-col-w, auto);
    text-align: center;
  }
  .app-shell.has-workspace .brand-logo {
    object-position: center;
  }
  /* Collapsed rail is only 60px — shrink the logo so its centered overhang
     stays small and clear of the page edge; keep the user pill on one line. */
  .app-shell.nav-collapsed .brand-logo {
    width: 88px;
    height: 44px;
  }
  .app-shell.nav-collapsed .user-name-pill {
    white-space: nowrap;
  }
}

.brand-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: min(520px, 48vw);
}

.top-actions .status-pill {
  order: 1;
}

.top-actions #logoutButton {
  order: 2;
}

.user-name-pill {
  display: block;
  min-height: 1.05rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: none;
  overflow-wrap: anywhere;
  max-width: min(380px, 64vw);
}

.status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 8px 12px;
  white-space: nowrap;
  max-width: min(300px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill.hidden {
  display: none;
}

.status-pill.ok {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-pill.offline {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(180, 35, 24, 0.16);
}

.status-pill.waiting {
  background: #dff3ff;
  color: #0a5f88;
  border-color: rgba(10, 95, 136, 0.16);
}

.status-pill.reconnecting {
  background: #dff3ff;
  color: #0a5f88;
  border-color: rgba(10, 95, 136, 0.16);
}

.ghost-button {
  border: 0.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

.ghost-button:hover {
  background: var(--band);
  border-color: #c4cdc8;
  filter: none;
}

.danger-button {
  border-color: var(--danger-soft);
  color: var(--danger);
}

.approve-button {
  border-color: rgba(17, 127, 112, 0.22);
  color: var(--accent);
  background: var(--accent-soft);
}

.approve-button:disabled,
.danger-button:disabled,
.ghost-button:disabled {
  opacity: 0.5;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.connected-button {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 12px;
}

.integration-row strong,
.integration-row small {
  display: block;
}

.integration-row small {
  margin-top: 3px;
  color: var(--muted);
}

.push-test-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
}

.push-test-panel h3 {
  margin: 0;
  font-weight: 500;
}

.push-test-panel h3 small {
  color: var(--muted);
  font-weight: 500;
}

.push-test-panel .muted-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.push-test-panel label {
  display: grid;
  gap: 6px;
}

.push-device-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.push-device-line button {
  flex: 0 0 auto;
}

.customer-search-line {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

/* Login: the topbar carries no useful controls before sign-in (and a stale
   collapsed-rail state would shrink the logo to the bare mark), so hide it and
   let the login screen own the branding. Gated on has-session so a cold start
   that already has a session never flashes a hidden topbar. */
html:not(.has-session) .app-shell:not(.has-workspace) .topbar { display: none; }
html:not(.has-session) .app-shell:not(.has-workspace) .impersonation-banner { display: none; }

.login-layout {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}

/* While an input is focused (keyboard up) the centered layout leaves no room to
   scroll, so on iOS the field can sit under the keyboard. Top-align then, which
   gives the window scroll room for scrollIntoView to lift the field clear. */
.login-layout.kb-open {
  justify-content: flex-start;
  padding-top: 28px;
}

.login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 400px;
}

.login-logo {
  width: 176px;
  height: auto;
  margin-bottom: 4px;
}

/* Slogan sits below the description as the closing line, so it doesn't stack
   three "ONE"s next to the mark. ONE picks up the mark's teal. */
.login-tagline {
  margin-top: 6px;
  font-size: 1.7rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.login-tagline span {
  color: var(--accent);
}

.login-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 340px;
}

#loginForm {
  width: min(400px, 100%);
  margin-top: 0;
  text-align: left;
}

/* Google sign-in: brand G left of the label, both centered as a group. */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.google-btn .google-g {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

:root {
  --nav-w: 210px;
  --nav-w-collapsed: 60px;
}

/* Sidebar (left) + main content (right). The visible view sits in column 2;
   hidden views are display:none so they don't take a grid cell. */
.workspace {
  display: grid;
  /* Rail sizes to its widest tab label (adaptive per role), content takes the rest. */
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.app-shell.nav-collapsed .workspace {
  grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr);
}
.workspace > .view-stack {
  grid-column: 2;
  min-width: 0;
}

.tabbar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(232, 238, 233, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  min-width: 0;
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--line);
}
.nav-brand { font-weight: 500; font-size: 0.9rem; color: var(--ink); letter-spacing: -0.01em; }
.nav-toggle {
  width: 30px; height: 30px; min-height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--muted); box-shadow: none;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); filter: none; }
.nav-toggle-ico { transition: transform var(--dur) var(--ease); }
.app-shell.nav-collapsed .nav-toggle-ico { transform: rotate(180deg); }

.tab-button {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  min-height: 40px;
  font-weight: 500;
  box-shadow: none;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.12;
  padding: 8px 10px;
  font-size: 0.92rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.tab-ico { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.tab-ico svg { width: 20px; height: 20px; }
.tab-label { min-width: 0; white-space: nowrap; }

/* Gmail-style group separator between tab sections (hidden when a side is empty). */
.nav-divider { height: 0; border-top: 0.5px solid var(--line); margin: 8px 8px; }

/* Collapsed desktop rail: icons only, centered. */
.app-shell.nav-collapsed .nav-brand,
.app-shell.nav-collapsed .tab-label { display: none; }
.app-shell.nav-collapsed .nav-head { justify-content: center; }
.app-shell.nav-collapsed .tab-button { justify-content: center; padding: 8px; }

/* Account actions pinned below the nav groups (outside categories). */
.nav-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 0.5px solid var(--line); }
.nav-foot-btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; min-height: 38px; padding: 8px 10px; font-size: 0.88rem; }
.nav-foot-btn svg { flex: 0 0 auto; }
.app-shell.nav-collapsed .nav-foot-btn { justify-content: center; padding: 8px; }

/* Mobile hamburger (top bar) + drawer scrim: hidden on desktop. */
.nav-hamburger { display: none; }
.nav-scrim { display: none; }

/* Inline pencil to rename a payment's payer (e.g. nameless Clover payments). */
.name-edit-btn {
  min-height: 0; padding: 0 4px; margin-left: 4px;
  background: transparent; border: 0; box-shadow: none;
  color: var(--muted); font-size: 0.85rem; line-height: 1;
  vertical-align: baseline;
}
.name-edit-btn:hover { color: var(--accent); background: transparent; filter: none; }

.tab-button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  filter: none;
}

.tab-button.active {
  border-color: rgba(0, 0, 0, 0.04);
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 10px 28px rgba(21, 32, 29, 0.035);
  min-width: 0;
  max-width: 100%;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.panel-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.92rem;
}

.view-stack {
  display: grid;
  gap: 14px;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-layout {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.payments-layout {
  grid-template-columns: minmax(0, 1fr);
}

.services-workbench-panel {
  min-width: 0;
}

.worker-flow {
  grid-template-columns: minmax(0, 1fr);
}

.service-wizard {
  gap: 12px;
}

.wizard-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 252, 251, 0.84);
  padding: 12px;
  min-width: 0;
}

.wizard-step h3 {
  margin: 0 0 10px;
  font-size: 0.96rem;
}

.step-marker {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.service-block.hidden {
  display: none !important;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.form-grid label span {
  color: var(--muted);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.form-row > label {
  min-width: 0;
}

.line-builder {
  display: grid;
  gap: 8px;
}

.line-builder-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(96px, 130px) auto auto;
  gap: 8px;
  align-items: end;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 252, 251, 0.84);
  padding: 10px;
}

.line-builder-row > * {
  min-width: 0;
}

.nested-service {
  display: grid;
  gap: 10px;
  border-left: 2px solid var(--line);
  margin-top: 8px;
  padding-left: 12px;
}

.contact-select-line,
.suggestion-select-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 128px);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.contact-select-line > span {
  grid-column: 1 / -1;
}

.suggestion-select-line select,
.contact-select-line select {
  min-width: 0;
}

/* Searchable combo that replaced the plain saved-value <select>. */
.suggestion-combo {
  min-width: 0;
  align-self: end;
}

.combo-option.is-clear {
  color: var(--muted);
}

.total-breakdown,
.setting-price-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  color: var(--ink) !important;
}

.checkbox-line input {
  width: 18px;
  min-height: 18px;
}

.checkbox-group {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.checkbox-group legend {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0 4px;
}

.form-message {
  min-height: 20px;
  color: var(--muted);
  font-size: 0.88rem;
}

.form-message.error {
  color: var(--danger);
}

.record-list {
  display: grid;
  gap: 8px;
}

/* Expanded customer list shows ~15 rows and scrolls through the rest. */
.customer-list-details .record-list {
  max-height: min(66dvh, 1030px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.filter-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.queue-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.queue-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.queue-panel summary::-webkit-details-marker {
  display: none;
}

.queue-panel summary::before {
  content: ">";
  color: var(--muted);
  font-weight: 500;
  margin-right: 2px;
}

.queue-panel[open] summary::before {
  transform: rotate(90deg);
}

.queue-panel > .record-list {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.list-heading {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Users heading carries the Add user button on the right. */
.users-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Admin Users grouped by warehouse → account type → name. */
.users-loc { border: 0.5px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 12px; }
.users-loc-head { font-size: 0.82rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.01em; }
.users-role { margin-top: 8px; }
.users-role-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; margin: 4px 0 6px; display: flex; gap: 6px; align-items: center; }
.users-loc .record-row,
.users-loc-body .record-row { margin-bottom: 6px; }
#adminUsersList .cgroup { margin-bottom: 10px; }

.users-heading button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.82rem;
  text-transform: none;
}

.record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
  min-width: 0;
}

.service-workbench-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.service-select-check input {
  width: 18px;
  min-height: 18px;
}

.record-row strong {
  display: block;
  overflow-wrap: anywhere;
}

.record-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

/* Pills size to their own text; the Actions control keeps a comfortable
   fixed width. Items wrap instead of overflowing on narrow screens. */
.badge-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

/* The payment-matching workbench keeps aligned columns across rows. */
.service-workbench-row .badge-stack {
  display: grid;
  grid-template-columns: 64px 118px max-content 34px;
  justify-content: end;
}

.user-action-select {
  width: 132px;
  min-height: 38px;
  padding: 8px 28px 8px 10px;
  font-size: 0.86rem;
  flex: 0 0 auto;
}

.badge {
  border-radius: 999px;
  background: var(--band);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 9px;
  white-space: nowrap;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge.good {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.diagnostics-panel {
  margin-top: 18px;
}

.compact-heading {
  gap: 12px;
  margin-bottom: 10px;
}

.compact-heading h3 {
  margin: 0;
}

.compact-list {
  max-height: 360px;
  overflow: auto;
}

.compact-row {
  align-items: flex-start;
  gap: 12px;
}

.status-badge.status-open {
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--line);
}

.status-badge.status-not-matched {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-badge.status-under-review {
  background: #dff3ff;
  color: #0a5f88;
}

.status-badge.status-matched,
.status-badge.status-paid {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-badge.status-invoiced {
  background: var(--amber-soft);
  color: var(--amber);
}

.payment-type-chip {
  width: 118px;
  min-width: 0;
  max-width: 118px;
  min-height: 32px;
  border-radius: 999px;
  padding: 4px 28px 4px 10px;
  background: var(--band);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.service-edit-button {
  width: 34px;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.service-edit-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-edit-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.workbench-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  align-items: flex-end;
  gap: 8px;
  margin: 12px 0 10px;
  max-width: 100%;
  min-width: 0;
}

.filter-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
}

.filter-field.date-filter {
  min-width: 0;
}

.filter-field > span {
  line-height: 1;
}

.filter-field input,
.multi-filter > summary {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 7px 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  width: 100%;
  min-width: 0;
}

.filter-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  width: 100%;
  max-width: 100%;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.filter-field input[type="date"]::-webkit-date-and-time-value {
  display: block;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.filter-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  margin: 0 0 0 2px;
  padding: 0;
}

.multi-filter {
  position: relative;
}

.filter-scrim {
  display: none;
}

.multi-filter[open] .filter-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
  cursor: default;
}

.multi-filter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.multi-filter > summary::-webkit-details-marker {
  display: none;
}

.multi-filter > summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
}

.multi-filter[open] > summary {
  border-color: rgba(15, 118, 110, 0.42);
  background: var(--accent-soft);
  color: var(--accent);
}

.multi-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: min(280px, calc(100vw - 30px));
  max-width: calc(100vw - 30px);
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(217, 224, 220, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(21, 32, 29, 0.16), 0 2px 12px rgba(21, 32, 29, 0.08);
  padding: 8px;
}

.filter-field:nth-last-child(-n+2) .multi-filter-menu {
  right: 0;
  left: auto;
}

.filter-search {
  width: 100%;
  min-height: 34px;
  margin-bottom: 7px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.service-wizard .form-row {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.multi-filter-options {
  display: grid;
  gap: 4px;
}

.multi-filter-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}

.multi-filter-option:hover {
  background: var(--bg);
}

.multi-filter-option input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--accent);
}

.filter-empty {
  margin: 0;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Customer quick-pick combo (Create Service) */
.customer-pick-line {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: 12px;
}

/* The label carries its own spacing; zero it inside the row so the + button
   lines up with the input, not the label block above it. */
.customer-pick-line .customer-search-line {
  margin-bottom: 0;
}

.smart-combo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Higher specificity than the filters' mobile rule so the form combo keeps a
   consistent 44px height (matching the other inputs) on desktop and phone. */
.smart-combo .smart-combo-details > summary {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
}

.smart-combo .smart-combo-details > summary.is-placeholder {
  color: var(--muted);
  font-weight: 400;
}

.smart-combo-details .multi-filter-menu {
  width: min(360px, calc(100vw - 30px));
}

/* The New invoice customer combo opens a dropdown that the dialog's overflow
   clip would otherwise cut off at its edge — relax the clip while a combo is
   open (the services list keeps its own scroll, so nothing else spills). */
.workbench-dialog:has(.smart-combo-details[open]) {
  overflow: visible;
}

.combo-option {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 38px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: none;
}

.combo-option:hover {
  background: var(--band);
  filter: none;
  transform: none;
}

.combo-option.is-selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
}

.icon-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  filter: none;
}

.icon-button:active {
  transform: scale(0.94);
}

/* Dock workers can only ADD saved values: the Actions select (with Delete)
   is swapped for a plain + button. Managers keep the full Actions select. */
.suggestion-add-button {
  display: none;
}

body.dock-worker-role .suggestion-add-button {
  display: grid;
}

body.dock-worker-role .suggestion-action {
  display: none !important;
}

/* The + button is narrower than the Actions select it replaces. */
body.dock-worker-role .contact-select-line,
body.dock-worker-role .suggestion-select-line {
  grid-template-columns: minmax(0, 1fr) 44px;
}

/* Additional Charges wizard step */
.charge-builder {
  display: grid;
  gap: var(--space-2);
}

.charge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}

/* Free-text explanation shown under the Extra charge row. */
.charge-note-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: 0 10px 0 34px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.charge-row > input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  accent-color: var(--accent);
}

.charge-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
}

.charge-prefix {
  color: var(--muted);
  font-weight: 500;
}

.charge-amount input {
  width: 72px;
  text-align: right;
}

/* Total step rows: label left, value/select right (matches Additional Charges) */
.total-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.total-line > span:first-child {
  font-weight: 500;
  color: var(--ink);
}

.total-line .auto-select {
  width: auto;
  min-width: 130px;
  max-width: 62vw;
}

/* Inline $ prefix for full-width money inputs (Discount, Total, Amount) */
.money-field {
  position: relative;
  display: block;
}

.money-field .money-prefix {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.money-field input {
  padding-left: 22px;
}

.charge-amount input:disabled {
  background: var(--band);
  color: var(--muted);
}


.workbench-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

/* My Services: action toolbar floats fixed at the bottom-right of the screen
   (left of the version badge) instead of sitting in the normal flow — no
   wrapping bar/background, just the buttons. Single row, never wraps: buttons
   appearing/relabelling must extend the row leftwards, not push it upward. */
.services-sticky-actions {
  position: fixed;
  right: 72px; /* clears the round chat FAB in the corner */
  bottom: 8px;
  z-index: 3999;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.services-sticky-actions button {
  white-space: nowrap;
}
/* Filter bar stays pinned to the top while the list scrolls (My Services and My
   Payments both use .services-workbench-panel). */
.services-workbench-panel .workbench-filterbar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -14px 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--line);
}

.compact-actions button {
  width: auto;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 14px;
}

.service-status-group {
  display: grid;
  gap: 8px;
}

.workbench-table {
  display: grid;
  gap: 6px;
}

.match-service-group {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(246, 249, 247, 0.82);
  padding: 8px;
}

.match-service-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
  color: var(--muted);
  font-size: 0.84rem;
}

.service-workbench-row {
  display: grid;
  grid-template-columns: 28px minmax(210px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.service-workbench-row strong {
  overflow-wrap: anywhere;
}

.service-workbench-row small {
  display: block;
  margin-top: 2px;
}

.service-workbench-main {
  min-width: 0;
}

.service-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}

/* Apple-style detail pills: soft tinted capsules with a small uppercase
   label and a regular-weight value. Tones tell categories apart at a glance. */
.service-info-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--band);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-info-pill b {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.service-info-pill.pallet-pill {
  background: var(--accent-soft);
  color: var(--accent);
}

.service-info-pill.pallet-pill b {
  color: rgba(15, 118, 110, 0.62);
}

.service-info-pill.vehicle-pill {
  background: #eceafa;
  color: #5a51a8;
}

.service-info-pill.vehicle-pill b {
  color: rgba(90, 81, 168, 0.62);
}

.service-info-pill.discount-pill {
  background: var(--danger-soft);
  color: var(--danger);
}

.service-info-pill.discount-pill b {
  color: rgba(180, 35, 24, 0.6);
}

.service-info-pill.dock-pill {
  background: #dff3ff;
  color: #0a5f88;
}

.service-info-pill.dock-pill b {
  color: rgba(10, 95, 136, 0.62);
}

.service-info-pill.charge-pill {
  background: var(--amber-soft);
  color: var(--amber);
}

.service-info-pill.charge-pill b {
  color: rgba(162, 96, 22, 0.66);
}

.wide-dialog {
  width: 100%;
}

.modal-list {
  min-height: 0;
  max-height: min(56vh, 560px);
  overflow: auto;
}

.workbench-dialog {
  width: min(920px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.workbench-dialog .dialog-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 30px);
  gap: 10px;
  padding: 18px;
}

.workbench-dialog .dialog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--surface) 28%);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.settings-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.settings-block h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.settings-block ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-editor {
  display: grid;
  gap: 8px;
}

.setting-group {
  display: grid;
  gap: 12px;
}

.setting-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setting-group-header h3 {
  margin: 0;
}

.setting-list {
  display: grid;
  gap: 8px;
}

.setting-table-head,
.setting-table-row {
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.setting-table-head {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Setting rows: name and Actions share the top line; dynamic data pills sit
   on a second line under the name. */
.location-row,
.simple-row,
.priced-row,
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}

.location-row > strong,
.simple-row > strong,
.priced-row > strong,
.service-row > strong {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.setting-table-row > .setting-action-select,
.setting-table-row > .user-action-select {
  grid-column: 2;
  grid-row: 1;
}

.location-row > .setting-price-badges,
.priced-row > .setting-price-badges {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
}

/* Column-header rows no longer match the pill layout. */
.setting-table-head {
  display: none;
}

.setting-table-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(251, 252, 251, 0.84);
  min-height: 50px;
  padding: 8px 10px;
}

.setting-list-name strong,
.setting-list-name small {
  display: block;
  overflow-wrap: anywhere;
}

.setting-list-name small {
  margin-top: 3px;
  color: var(--muted);
}

.setting-price {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.setting-action-select {
  justify-self: end;
  width: min(132px, 100%);
}

.setting-actions {
  display: flex;
  gap: 6px;
}

.setting-add-button {
  justify-self: start;
}

.service-setting {
  display: grid;
  gap: 8px;
}

.setting-subgroup {
  display: grid;
  gap: 8px;
  margin-left: 24px;
  border-left: 2px solid var(--line);
  padding: 6px 0 6px 12px;
  min-width: 0;
}

.drag-handle {
  display: none;
}

.settings-summary,
.setting-record summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.settings-summary {
  min-height: 42px;
  font-size: 1rem;
  font-weight: 500;
}

.settings-summary::-webkit-details-marker,
.setting-record summary::-webkit-details-marker {
  display: none;
}

.settings-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.setting-record {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(251, 252, 251, 0.84);
  padding: 8px 10px;
  min-width: 0;
}

.setting-record summary strong {
  overflow-wrap: anywhere;
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.settings-row.add-row {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(251, 252, 251, 0.84);
  padding: 10px;
}

.settings-row input,
.settings-row select,
.setting-field input,
.setting-field select {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.settings-row.rate-row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.setting-field {
  display: grid;
  gap: 4px;
}

.setting-field span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.mini-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  min-height: 38px;
}

.muted-line {
  color: var(--muted);
  font-size: 0.9rem;
}

.app-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.app-dialog[open] {
  animation: dialog-pop var(--dur) var(--ease);
}

@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.app-dialog.workbench-dialog {
  width: min(920px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

.app-dialog.service-dialog {
  width: min(1040px, calc(100vw - 28px));
}

/* While ANY modal dialog is open the page behind it must not scroll: wheel /
   trackpad over the dialog occasionally scrolled the background instead.
   overscroll-behavior also stops scroll-chaining when a dialog body or popover
   reaches its end. */
html:has(dialog[open]) { overflow: hidden; }
.app-dialog, .app-dialog .dialog-card { overscroll-behavior: contain; }
.dtpop { overscroll-behavior: contain; }

.app-dialog::backdrop {
  background: rgba(21, 32, 29, 0.45);
  backdrop-filter: blur(7px);
}

.dialog-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.service-dialog-card {
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

.service-dialog-slot #serviceForm {
  box-shadow: none;
  border-radius: 18px;
  margin: 0;
}
/* Inside the New Service dialog the form's own "Create Service" heading is a
   duplicate of the dialog title — hide it (no cascade). */
.service-dialog-slot #serviceForm .panel-heading { display: none; }

.dialog-card h2 {
  margin: 0;
}

.dialog-card p {
  margin: 0;
  color: var(--muted);
}

.dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* Right-aligned variant (single/short actions) — matches the workbench dialogs. */
.dialog-actions.right { display: flex; justify-content: flex-end; }
.dialog-actions.right button { width: auto; }

.dialog-fields {
  display: grid;
  gap: 10px;
}

.rate-dialog-group {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.rate-dialog-group h3 {
  margin: 0;
  font-size: 0.95rem;
}

.rate-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

/* Worker's Activity */
.period-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--band);
}

.period-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 32px;
  padding: 0 12px;
  font-weight: 500;
  box-shadow: none;
}

.period-button.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.activity-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Location filter chips (admin). */
.activity-loc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.loc-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  min-height: 32px;
}

.loc-chip.active {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* One warehouse's block, tinted by --loc-accent set inline per location. */
.activity-loc-group {
  margin-bottom: var(--space-4);
}

.activity-loc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  padding-left: 10px;
  border-left: 4px solid var(--loc-accent, var(--accent));
}

.activity-loc-name {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--loc-accent, var(--ink));
  letter-spacing: 0.02em;
}

.activity-loc-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--band);
  border-radius: 999px;
  padding: 1px 8px;
}

.activity-loc-group .activity-card {
  border-left: 3px solid var(--loc-accent, var(--line));
}

.activity-loc-group .activity-grid {
  margin-bottom: var(--space-2);
}

/* Collapsible "Offline · N" divider between on-site and off-site tiles. */
.offline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-2) 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  min-height: 32px;
}

.offline-toggle span {
  font-size: 0.7rem;
}

/* ---- Invoices ---- */
.primary-button {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
.report-good { color: var(--accent); }

/* Invoices stat strip — one quiet full-width segmented unit; each segment is a
   status filter (hairline dividers, no boxed cards, Apple-way). */
.invoice-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  /* Clear the absolute "sending as …" caption that hangs under the header. */
  margin-top: 22px;
}
.invoice-stat {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border-left: 0.5px solid var(--line);
}
.invoice-stat:first-child { border-left: none; }
.invoice-stat-label { color: var(--muted); font-size: 0.7rem; font-weight: 500; }
.invoice-stat-value { color: var(--ink, #15201d); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.invoice-stat-sub { color: var(--muted); font-size: 0.72rem; }
@media (max-width: 640px) {
  .invoice-stats { grid-template-columns: repeat(2, 1fr); }
  .invoice-stat:nth-child(3) { border-left: none; }
  .invoice-stat:nth-child(n+3) { border-top: 0.5px solid var(--line); }
}

.invoice-search {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 36px;
  border-radius: var(--r-control);
  font-size: 0.9rem;
}

.invoice-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.invoice-filter-spacer { flex: 1; }
.invoice-loc-chips { display: inline-flex; gap: 6px; }

/* Compact From–To range (no labels) sitting just left of the status dropdown. */
.invoice-range { display: inline-flex; align-items: center; gap: 4px; }
.invoice-range .invoice-range-input,
.invoice-range .us-date-wrap { width: 128px; flex: 0 0 auto; }
.invoice-range .invoice-range-input { min-height: 36px; border-radius: var(--r-control); font-size: 0.85rem; }
.invoice-range-dash { color: var(--muted); }

/* Status dropdown is the right-most control — open its menu right-aligned so it
   never spills off the screen edge. */
.invoice-status-filter .multi-filter-menu { left: auto; right: 0; }

/* Invoices header: Connected sits right next to New invoice; the "sending as …"
   caption hangs directly under Connected (absolute, so it doesn't widen the
   column and push Connected away from New invoice). */
.invoice-head-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.invoice-gmail { position: relative; display: inline-flex; }
.invoice-gmail-status { position: absolute; top: 100%; left: 0; margin-top: 3px; color: var(--muted); font-size: 0.72rem; white-space: nowrap; }

/* Compact header buttons (Connect Gmail / New invoice) — shorter and lighter
   than the 44px default so they read as secondary header actions. */
.compact-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 500;
}

.invoice-list { display: grid; gap: 0; border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.invoice-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 0.5px solid var(--line);
}
.invoice-row:first-child { border-top: none; }
.invoice-row.is-selected { background: var(--accent-soft); }
.invoice-select { display: inline-flex; align-items: center; margin: 0; }
.invoice-select input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }

/* Selection action bar (Send / PDF / Delete). */
.invoice-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.invoice-action-count { font-weight: 500; font-size: 0.88rem; margin-right: auto; }

/* Status filter as a single dropdown button. */
.invoice-status-filter > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.86rem;
  cursor: pointer;
}
.invoice-status-filter > summary::-webkit-details-marker { display: none; }
.invoice-status-filter > summary::after { content: "▾"; color: var(--muted); font-size: 0.8rem; }

/* Send picker groups. */
.send-group { border: 0.5px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; }
.send-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.send-invoice-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.send-invoice-chip { font-size: 0.78rem; background: var(--band); color: var(--muted); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.send-recipient { padding: 5px 0; }
.send-recipient small { color: var(--muted); }
.invoice-row-main { min-width: 0; display: grid; gap: 4px; }
.invoice-row-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.invoice-row-head strong { font-weight: 500; }
.invoice-num { color: var(--muted); font-size: 0.8rem; }
.invoice-status { align-self: center; font-size: 0.68rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; }
.invoice-row-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.invoice-group-pill { font-size: 0.72rem; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.invoice-row-badges { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.invoice-short { font-size: 0.68rem; background: #FCEBEB; color: #791F1F; padding: 2px 8px; border-radius: 999px; }
.invoice-reason-tag { font-size: 0.68rem; background: var(--band); color: var(--muted); padding: 2px 8px; border-radius: 999px; }
.invoice-match-tag { color: var(--accent); }
/* Amount and the Match button share one LEFT edge (the block itself still
   hugs the row's right side). */
.invoice-row-side { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.invoice-amount { font-weight: 500; }
.invoice-amount small { color: var(--muted); font-weight: 400; }
.invoice-row-actions { display: flex; gap: 6px; margin-top: 6px; }

.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.invoice-picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0.5px solid var(--line); border-radius: var(--radius); }
.invoice-customer-options { max-height: 190px; overflow: auto; display: grid; gap: 2px; margin-top: 6px; }
.invoice-selectall { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.invoice-selectall input { width: 16px; height: 16px; }
.invoice-service-list { max-height: 260px; overflow: auto; border: 0.5px solid var(--line); border-radius: var(--radius); margin-top: 6px; }
.invoice-service-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 0.5px solid var(--line); }
.invoice-service-row:first-child { border-top: none; }
/* Global inputs get width:100% + min-height:38px; checkboxes must opt out. */
.invoice-service-row input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }
.invoice-service-main { flex: 1; min-width: 0; font-size: 0.9rem; display: flex; flex-direction: column; gap: 4px; }
.invoice-service-title small { color: var(--muted); }
.invoice-service-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.invoice-service-row { align-items: flex-start; }
.invoice-service-row input[type="checkbox"] { margin-top: 2px; }
.invoice-service-main small { color: var(--muted); }
.invoice-service-amount { font-weight: 500; }
.invoice-create-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.invoice-create-total span { color: var(--muted); font-size: 0.85rem; }
.invoice-sendfrom { margin-top: 10px; }

/* New invoice: top fields block, 3-up From/To/Warehouse, and the footer that
   holds the total + actions below the (now taller) service list. */
.invoice-create-top { display: grid; gap: 10px; min-width: 0; }
.invoice-create-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.invoice-create-dates:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invoice-create-foot { display: grid; gap: 8px; }

/* Grouped invoice: toggle, per-customer group headers, per-customer send rows. */
.invoice-grouped-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.invoice-grouped-toggle input { width: 16px; height: 16px; }
.invoice-group + .invoice-group { margin-top: 6px; border-top: 0.5px solid var(--line); padding-top: 6px; }
.invoice-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 4px 2px; position: sticky; top: 0; background: var(--surface); }
.invoice-group-head strong { font-weight: 500; }
.invoice-group-head span { color: var(--muted); font-size: 0.8rem; }
.invoice-send-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 0.5px solid var(--line); }
.invoice-send-cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invoice-send-cust strong { font-weight: 500; }
.invoice-send-cust span { color: var(--muted); font-size: 0.8rem; }
.invoice-send-row input { flex: 0 1 260px; min-width: 0; }

/* ---- Info pills, row actions, contact editor, info dialogs ---- */
.badge.info { background: #e6effd; color: #1d4ed8; }
.badge.phone { background: #eef2f7; color: #334155; font-variant-numeric: tabular-nums; }

/* A record row's trailing controls: Actions select + round info button. */
.record-actions { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.info-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
}

/* Repeatable dispatcher / driver rows in the customer editor. */
.contact-group { margin-top: 12px; }
.contact-group > .contact-group-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.contact-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; background: rgba(255, 255, 255, 0.6); }
.contact-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.contact-row.cols-1 { grid-template-columns: minmax(0, 1fr) 38px; }
.contact-row.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.1fr) 38px; }
.contact-row input { min-height: 38px; }
.contact-row-remove {
  width: 38px; height: 38px; min-height: 38px; padding: 0; font-size: 1.25rem; line-height: 1;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: var(--radius);
}
.contact-row-remove:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.contact-row-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 12px; border: 1px dashed var(--line); background: transparent; color: var(--accent);
  font-size: 0.85rem; box-shadow: none;
}
.contact-row-add:hover { background: var(--accent-soft); border-style: solid; border-color: var(--accent); filter: none; }

/* Read-only info dialog (staff or customer). */
.info-rows { display: grid; gap: 2px; margin-top: 6px; }
.info-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 2px; border-top: 0.5px solid var(--line); align-items: baseline; }
.info-row:first-child { border-top: none; }
.info-row dt { color: var(--muted); font-size: 0.82rem; }
.info-row dd { margin: 0; overflow-wrap: anywhere; }
.info-section-label { margin-top: 12px; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.info-empty { color: var(--muted); font-size: 0.88rem; }

.invoice-pay-list { max-height: 230px; overflow: auto; border: 0.5px solid var(--line); border-radius: var(--radius); margin-top: 4px; }
.invoice-pay-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-top: 0.5px solid var(--line); }
.invoice-pay-row:first-child { border-top: none; }
.invoice-pay-row.is-selected { background: var(--band); }

/* Shared match list: type chips + a pinned Suggestions block (tinted rows under
   a translucent header). */
.match-type-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.match-filter-side,
.match-filter-dates {
  flex: 1 1 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 6px;
}
.match-filter-side { justify-content: flex-start; }
.match-filter-search {
  flex: 0 1 420px;
  display: flex;
  justify-content: center;
  min-width: 220px;
}
.match-filter-dates { justify-content: flex-end; }
.match-search {
  width: min(100%, 420px);
  flex: 0 1 420px;
}
.match-pay-group + .match-pay-group { margin-top: 6px; }
.match-pay-group-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 4px; font-size: 0.8rem; font-weight: 500; color: var(--muted); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.match-pay-count { color: var(--muted); opacity: 0.7; }
.match-suggest-head { padding: 5px 10px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.invoice-pay-row.is-suggested { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.invoice-pay-row.is-suggested.is-selected { background: var(--band); }
.invoice-pay-main { flex: 1; min-width: 0; font-size: 0.9rem; display: flex; flex-direction: column; }
.invoice-pay-main small, .invoice-pay-amt small { color: var(--muted); font-size: 0.72rem; }
.invoice-pay-amt { text-align: right; font-weight: 500; display: flex; flex-direction: column; }
.invoice-alloc { border: 0.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; display: grid; gap: 6px; }
.invoice-alloc-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invoice-alloc-line input { width: 120px; text-align: right; }
.invoice-alloc-note { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--muted); }
.invoice-reason { margin-top: 4px; }
.invoice-mini-date { height: 30px; padding: 0 8px; font-size: 0.8rem; width: auto; }
.match-range-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.match-range-warn { color: var(--amber); font-size: 0.78rem; }
.match-outside-note { color: var(--amber); }
/* Enhanced (mini-calendar) date fields inside dialogs — keep them compact so
   two sit side by side instead of stretching full width. */
.invoice-filter-row .us-date-wrap { width: 150px; flex: 0 0 auto; }
.my-attention-custom .us-date-wrap { width: 148px; flex: 0 0 auto; }

/* ---- Dispatch / Driver ---- */
.dispatch-datenav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
/* US-format label with the native picker overlaid invisibly on top (so the
   readout is MM/DD/YYYY regardless of the device locale, but tapping still
   opens the native date picker). */
.dispatch-date-field { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border: 0.5px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.dispatch-date-label { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dispatch-date-field input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; margin: 0; cursor: pointer; }

/* Dispatch day/range/filter bar. Apple-way: weights ≤500. */
/* No overflow clipping here — the Date-range <details> popover is absolutely
   positioned and must escape the bar; filters wrap on narrow screens instead. */
.dispatch-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.dispatch-bar > * { flex: 0 0 auto; }
/* Dispatch heading: title | centered day nav | New PU/Del. */
.dispatch-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.dispatch-heading > :last-child { justify-self: end; }
.disp-daynav { display: inline-flex; align-items: center; gap: 10px; justify-self: center; white-space: nowrap; }
.disp-arr {
  width: 30px; height: 30px; min-height: 30px; padding: 0;
  border: 0.5px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.disp-daylabel { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.disp-daylabel .dn-today { color: var(--accent); }
.disp-range-x {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center;
  margin-left: 7px; flex: 0 0 auto; cursor: pointer;
}
@media (max-width: 780px) {
  .dispatch-heading { grid-template-columns: 1fr auto; }
  .disp-daynav { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 8px; }
}

/* Range mode: day sections, newest first; empty days are just a header. */
.disp-day { margin-bottom: 4px; }
.disp-dayhead { display: flex; align-items: baseline; gap: 10px; margin: 14px 2px 8px; }
.disp-dayhead .wd { font-size: 0.95rem; font-weight: 500; }
.disp-dayhead .dt { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.disp-dayhead .cnt { margin-left: auto; color: var(--muted); font-size: 0.76rem; }
.disp-day-empty { margin: 0 2px 6px; font-size: 0.82rem; }
/* Date range button: no static fill (plain like a text button), a neutral band
   fill only while pressed/open or when a range is set. No green, no chevron. */
.disp-range > summary { height: 36px; padding: 0 12px; border: 0.5px solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--ink); display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; }
.disp-range[open] > summary,
.disp-range > summary.is-active { background: var(--band); border-color: transparent; }
.disp-range > summary::-webkit-details-marker { display: none; }
.disp-range > summary::after { content: none; display: none; }
/* .disp-range prefix beats `.smart-combo-details .multi-filter-menu` (0,2,0),
   which otherwise forces a fixed 360px and leaves empty space next to the two
   fields. Fit the content instead. */
.disp-range .disp-range-menu { width: max-content; max-width: calc(100vw - 30px); min-width: 0; padding: 9px; }
.disp-range-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* Needs .disp-range-row prefix to beat `.us-date-wrap { width:100% }` (same
   specificity, but that rule sits later in the file) — otherwise each field
   stretches full-width and only one shows in the dropdown. */
.disp-range-row .disp-range-field { position: relative; width: 122px; flex: 0 0 auto; }
.disp-range-row .us-date-text { height: 34px; min-height: 34px; font-size: 0.8rem; padding: 0 30px 0 8px; border: 0.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.disp-range-sep { color: var(--muted); flex: 0 0 auto; }
.disp-filter { height: 36px; min-height: 36px; border: 0.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-size: 0.78rem; color: var(--muted); padding: 0 8px; max-width: 130px; }

/* Dispatch "Live now" strip — Motive duty status + location per driver. */
.dispatch-live { margin: 0; }
.dispatch-live:empty { display: none; }
/* Hide the whole "Drivers statuses" frame when there are no live driver tiles
   (Motive not configured / no drivers) rather than showing an empty box. */
.dispatch-drivers-panel:has(.dispatch-live:empty) { display: none; }
.live-strip-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.live-strip-label .sync-tag { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.live-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.live-chip {
  min-width: 0;
  border: 0.5px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 8px 11px; box-shadow: var(--shadow-sm);
  display: grid; gap: 3px; align-content: start;
}
.live-chip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.live-name { font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-loc { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-drive { font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.live-chip .duty-pill { flex: 0 0 auto; }
.duty-pill { font-size: 0.68rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--band); color: var(--muted); }
.duty-pill.duty-driving { background: var(--accent-soft); color: var(--accent); }
.duty-pill.duty-onduty { background: var(--amber-soft); color: var(--amber); }
.duty-pill.duty-sleeper { background: #ece9fb; color: #5b4bcc; }
.duty-pill.duty-offduty { background: var(--band); color: var(--muted); }
.live-fleet { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-left: 10px; }
.live-groups { display: grid; gap: 12px; }
.cgroup-head .live-group-mi { margin-left: 0; }
.live-group { margin-bottom: 12px; border: 0.5px solid var(--line); border-radius: 12px; padding: 9px 10px 11px; }
.live-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.live-group-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.live-group-driving .live-group-dot { background: var(--accent); }
.live-group-onduty .live-group-dot { background: var(--amber); }
.live-group-off .live-group-dot { background: #b4b2a9; }
.live-group-name { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; }
.live-group-driving .live-group-name { color: var(--accent); }
.live-group-onduty .live-group-name { color: var(--amber); }
.live-group-ct { font-size: 0.72rem; color: var(--muted); }
.live-group-mi { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.live-group-off { padding-bottom: 9px; }
.live-group-off > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.live-group-off[open] > summary { margin-bottom: 8px; }
.live-group-off > summary::-webkit-details-marker { display: none; }
.live-group-chev { margin-left: auto; font-style: normal; color: var(--muted); transition: transform var(--dur) var(--ease); }
.live-group-off[open] .live-group-chev { transform: rotate(90deg); }
.live-chip { border-left: 3px solid var(--line); }
.live-chip.is-driving { border-left-color: var(--accent); }
.live-chip.is-onduty { border-left-color: var(--amber); }
.live-chip.is-off { border-left-color: #b4b2a9; }
.live-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.live-mi { color: var(--ink); font-weight: 500; }
.live-hrs.warn { color: var(--danger); font-weight: 500; }
.dispatch-list, .driver-body { display: grid; gap: 10px; }
/* Reusable collapsible group (dispatch board, My Services, any large grouped
   list). Apple-way: no bold — weight caps at 500. */
.dispatch-groups, .cgroup-stack { display: grid; gap: 12px; }
.cgroup { border: 0.5px solid var(--line); border-radius: 12px; padding: 9px 10px 11px; }
.cgroup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cgroup.is-collapsed .cgroup-head { margin-bottom: 0; }
.cgroup-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cgroup-name { font-size: 0.82rem; font-weight: 500; }
.cgroup-count { font-size: 0.72rem; color: var(--muted); }
.cgroup-toggle { margin-left: auto; font-size: 0.72rem; font-weight: 500; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 4px 12px; min-height: 0; }
.cgroup-toggle:hover { filter: none; background: var(--accent-soft); }
.cgroup-body { display: grid; gap: 8px; }
.cgroup.is-collapsed .cgroup-body { display: none; }

/* Big delivery tile. Apple-way: weights ≤500. */
.dt-tile { border: 0.5px solid var(--line); border-left: 3px solid var(--line); border-radius: 12px; background: var(--surface); padding: 11px 12px; box-shadow: var(--shadow-sm); display: grid; gap: 9px; position: relative; }
.dt-num { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.dt-pill { font-size: 0.62rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dt-grow { flex: 1 1 auto; min-width: 8px; }
/* Rate reads like the system-wide .badge; the payment type goes teal so both
   stand apart from the amber charge pills. */
.dt-rate { font-size: 0.78rem; font-weight: 500; background: var(--band); color: var(--ink); border-radius: 999px; padding: 6px 11px; display: inline-flex; align-items: center; }
.dt-rate small { font-size: 0.68em; color: var(--muted); font-weight: 500; }
.dt-ip.dt-pay-pill { border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
/* The very top-right corner: [charges] [payment] [rate]. The customer line
   leaves room for it. */
.dt-corner { position: absolute; top: 9px; right: 11px; display: inline-flex; align-items: center; gap: 6px; }
.dt-tile.has-corner .dt-cust { padding-right: 320px; }
.dt-ip.dt-charge { background: var(--amber-soft); color: var(--amber); }
.dt-route { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Vertical stop chain: marker (done / here / upcoming), PU/DEL/REL kind pill,
   place, in/out right beside it (tap-editable for dispatch on non-home stops),
   note text pill. */
.dt-stops { display: grid; }
/* flex-start + tiny pill offsets: the App/in-out pills line up with the
   address's first (value) line instead of centering on the two-deck block. */
.dt-stop { display: flex; align-items: flex-start; gap: 8px; position: relative; padding: 2px 0 2px 20px; font-size: 0.88rem; flex-wrap: wrap; min-height: 26px; }
.dt-stop > .dt-tpill, .dt-stop > .n-pill { margin-top: 2px; }
/* The dot anchors to the FIRST line (the address), not the block centre —
   notes on their own line and wrapped addresses no longer drag it down. */
.dt-stop::before { content: ""; position: absolute; left: 5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dt-stop.is-done::before { background: var(--accent); }
.dt-stop.is-here::before { background: #185fa5; box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.18); }
.dt-stop:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 21px; bottom: -9px; width: 1px; background: var(--line); }
/* Kind pill sits inline at the start of the address text, so a long address
   wraps under it instead of pushing it to its own line. */
.dt-skind { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; vertical-align: text-bottom; margin-right: 7px; }
/* Origin (inbound OTR pickup, not ours): reference-only row in the i-card. */
.dt-skind-origin { background: var(--band); color: var(--muted); }
.dt-stop.is-origin { opacity: 0.85; }
.dt-ip.dt-sold-pill { background: #ece6fa; color: #6247b8; }
/* Forces the following note pill onto its own flex line (the "i" card). */
.dt-brk { flex-basis: 100%; height: 0; }
/* A note dropped to its own line starts under the ADDRESS, not the kind pill. */
.dt-brk + .n-pill { margin-left: 42px; }
.dt-efs-pill { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.service-efs-pill { background: var(--amber-soft); color: var(--amber); }
.efs-dialog .efs-input { width: 100%; border: 0.5px solid var(--line); border-radius: 10px; padding: 10px; font-size: 0.95rem; margin: 8px 0 12px; font-family: inherit; }
.dt-sp { min-width: 0; }
.dt-sp.is-home { color: var(--muted); }
/* Compact time chip — the explicit min-height/padding beat the app-wide 44px
   button sizing, which was inflating it and pushing stop rows into each other. */
.dt-tpill { display: inline-flex; align-items: center; gap: 4px; height: 18px; min-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--band); color: var(--muted); font-size: 0.66rem; line-height: 1; border: 0; font-family: inherit; flex: 0 0 auto; box-shadow: none; }
button.dt-tpill { cursor: pointer; }
.dt-tpill.t-empty { opacity: 0.6; }
/* Per-stop appt time — bright azure so it reads at a glance — and i-card refs. */
.dt-tpill.dt-stop-appt { background: #d8ecff; color: #0b6ddb; font-weight: 500; }
.dt-tpill.dt-stop-ref { background: var(--band); color: var(--ink); }

/* Group sub-caption on the board group headers. */
.dispatch-grp-sub { color: var(--muted); font-weight: 400; font-size: 0.74rem; margin-left: 4px; }

@media (max-width: 760px) {
  /* Narrow screens: the corner block flows above the customer line instead of
     overlapping it. */
  .dt-corner { position: static; order: -1; flex-wrap: wrap; }
  .dt-tile.has-corner .dt-cust { padding-right: 0; }
}
.dt-i { width: 20px; height: 20px; min-height: 20px; padding: 0; border-radius: 50%; border: 0.5px solid var(--line); color: var(--muted); background: var(--surface); font-style: italic; font-size: 0.68rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dt-reason { font-size: 0.75rem; color: var(--danger); background: var(--danger-soft); border-radius: 7px; padding: 5px 9px; }
.dt-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dt-ip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--muted); background: var(--band); border-radius: 6px; padding: 3px 8px; }
.dt-ip b { color: var(--ink); font-weight: 500; }
.dt-ip.dt-matched { background: var(--accent-soft); color: var(--accent); }

/* Pill categories (mirror the New PU/Del form groups) — subtle tints so each
   kind of info is distinguishable at a glance. b stays a touch darker. */
.dt-ip.dt-cat-driver { background: rgba(11, 94, 203, 0.10); color: #0b5ecb; }
.dt-ip.dt-cat-driver b { color: #0a4ea8; }
.dt-ip.dt-cat-equip { background: rgba(107, 70, 193, 0.10); color: #6b46c1; }
.dt-ip.dt-cat-equip b { color: #58399f; }
.dt-ip.dt-cat-appt { background: rgba(162, 96, 22, 0.12); color: #8a5210; }
.dt-ip.dt-cat-appt b { color: #6f420c; }
.dt-ip.dt-cat-cargo { background: rgba(15, 118, 110, 0.10); color: #0f766e; }
.dt-ip.dt-cat-cargo b { color: #0c5f59; }
.dt-match-pill { font-size: 0.72rem; padding: 3px 8px; }

@media (prefers-color-scheme: dark) {
  .dt-ip.dt-cat-driver { background: rgba(106, 166, 255, 0.16); color: #6aa6ff; }
  .dt-ip.dt-cat-driver b { color: #9cc3ff; }
  .dt-ip.dt-cat-equip { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
  .dt-ip.dt-cat-equip b { color: #c4b5fd; }
  .dt-ip.dt-cat-appt { background: rgba(255, 180, 84, 0.16); color: #ffb454; }
  .dt-ip.dt-cat-appt b { color: #ffd39c; }
  .dt-ip.dt-cat-cargo { background: rgba(87, 217, 126, 0.16); color: #57d97e; }
  .dt-ip.dt-cat-cargo b { color: #8ee8a8; }
}
.dt-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 500; border-radius: 999px; padding: 3px 8px; }
.dt-badge.bd-dng { background: var(--danger-soft); color: var(--danger); }
.dt-badge.bd-amb { background: var(--amber-soft); color: var(--amber); }
.dt-btn { height: 30px; min-height: 30px; padding: 0 12px; border: 0.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.dt-btn.match { background: var(--accent); color: #fff; border-color: transparent; }
.dt-btn.matched { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dt-btn.del { color: var(--danger); border-color: #f0b7b1; }
.dt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Mini-CRM tile: big pills, customer line, collapsed chat alert ---- */
.dt-pill-big { font-size: 0.8rem; padding: 5px 12px; }
.dt-status { border: 0; cursor: pointer; font-weight: 500; min-height: 0; font-family: inherit; }
.dt-status .dt-chev { font-size: 0.62em; opacity: 0.7; margin-left: 2px; }
.dt-cust { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.dt-cust-name { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; }
.dt-checkin { font-size: 0.78rem; color: var(--ink); opacity: 0.7; }

/* Driver status pill: outline style so it reads apart from the load status. */
.dt-drv-pill { background: transparent; border: 1px solid currentColor; }

/* Load-type pill left of the customer name (all three tile flavors). */
.dt-type-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.02em; flex: 0 0 auto; align-self: center; }

/* Order-in-the-driver's-day circle: filled when set, hollow "№" when not.
   The dispatcher's is a button (tap → position menu); elsewhere it's static. */
.dt-seq {
  width: 22px; height: 22px; min-height: 22px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; border: 0; background: var(--ink); color: var(--surface);
  font-size: 0.72rem; font-weight: 500; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
button.dt-seq { cursor: pointer; }
.dt-seq.is-empty { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
.seq-holder { font-size: 0.72rem; color: var(--muted); }

/* The dock comment on the dispatch tile reuses the amber note pill. */
.dt-wh-pill { max-width: 220px; }

/* Stops + the actions row share one block: actions bottom-right, level with
   the LAST stop line (wrap under on narrow screens). */
.dt-body { display: flex; align-items: flex-end; gap: 6px 8px; flex-wrap: wrap; }
.dt-body .dt-stops { flex: 1 1 auto; min-width: 0; }
.dt-body .dt-pills-side { margin-left: auto; justify-content: flex-end; flex: 0 1 auto; }

/* Date-grouped feeds (driver Work Board + dock Load Board): the day header
   sticks to the top until the next day scrolls in. */
.wb-day { display: grid; }
.wb-day + .wb-day { margin-top: 14px; }
.wb-day-body { display: grid; gap: 10px; }
.wb-dayhead {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 -8px 8px; padding: 8px 8px;
  background: var(--surface);
}
.wb-dayhead .dn-today { color: var(--muted); }
.wb-dayhead .wb-date { font-size: 0.95rem; font-weight: 500; }
.wb-dayhead .wb-cnt { margin-left: auto; color: var(--muted); font-size: 0.76rem; }

/* Dock tile comment pill: amber when set, dashed ghost when empty. */
.dock-comment.is-empty { background: transparent; border: 1px dashed var(--line); color: var(--muted); }

/* Driver phone FAB: same shape as the chat one, stacked above it. */
.phone-fab { bottom: 70px; }

/* ---- Compact (collapsed) delivery tile ---- */
.dt-min { padding: 8px 11px; gap: 5px; }
.dt-min-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.dt-min-cust { font-size: 0.92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-min-pill { font-size: 0.72rem; padding: 3px 10px; font-weight: 500; }
.dt-rate-sm { padding: 4px 10px; }
.dt-chev-btn {
  width: 24px; height: 24px; min-height: 24px; padding: 0; flex: 0 0 auto;
  border-radius: 50%; border: 0.5px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 0.7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none;
}
/* The "total" money pill: system badge look — amount on top, a quiet "total"
   caption underneath; still pressable (opens the breakdown). */
/* Identical to the plain rate pill next to it — it only adds the quiet
   "total" suffix and a pointer, no extra box of its own. */
.dt-total-btn {
  border: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  min-height: 0;
  line-height: 1.2;
  gap: 3px;
}
.dt-total-btn small { font-size: 0.72em; color: var(--muted); font-weight: 400; }
.total-pop { display: grid; gap: 2px; font-size: 0.85rem; min-width: 200px; }
.total-pop .tp-ln { display: flex; justify-content: space-between; gap: 16px; }
.total-pop .tp-sum { border-top: 0.5px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 500; }

/* Horizontal stop chain on the compact tile. */
.dt-hstops { display: flex; align-items: flex-start; overflow-x: auto; padding: 1px 0; scrollbar-width: none; }
.dt-hstops::-webkit-scrollbar { display: none; }
.dt-hn { display: grid; grid-template-columns: 13px minmax(0, 1fr); flex: 0 0 auto; min-width: 0; max-width: 70%; }
.dt-hn-l1 { grid-column: 1 / 3; display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.82rem; }
.dt-hn-l1 .dt-skind { margin-right: 0; }
.dt-hn-l2 { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; padding-left: 20px; }
.dt-hdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; font-style: normal; }
.dt-hn.is-done .dt-hdot { background: var(--accent); }
.dt-hn.is-here .dt-hdot { background: #185fa5; box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.18); }
.dt-hcity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-hline { flex: 0 0 26px; height: 1px; background: var(--line); margin: 8px 7px 0; font-style: normal; }
.dt-here-tag { font-size: 0.62rem; color: #185fa5; background: rgba(24, 95, 165, 0.10); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* ---- Structured address: one selectable line, faded separators (pseudo —
   never copied), tiny faded field labels underneath. ---- */
.addr-parts { display: inline-flex; flex-wrap: wrap; align-items: start; min-width: 0; row-gap: 2px; }
.addr-part { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.addr-part + .addr-part { margin-left: 15px; position: relative; }
.addr-part + .addr-part::before { content: "|"; position: absolute; left: -10px; top: 0; opacity: 0.3; }
.addr-lab { font-size: 0.58rem; color: var(--muted); opacity: 0.75; line-height: 1.15; user-select: none; -webkit-user-select: none; }
.dt-inout { background: var(--band); color: var(--muted); }
.dt-rate small { font-size: 0.68em; color: var(--muted); font-weight: 500; }

/* Load-status menu + dialog forms (inside the dt popover). */
.ls-list { display: grid; padding: 6px; gap: 2px; overflow-y: auto; }
.ls-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left; }
.ls-opt:hover { background: var(--band); }
.ls-opt.is-current { background: var(--accent-soft); }
.ls-cur { font-size: 0.68rem; color: var(--muted); margin-left: auto; }
.ls-log { margin: 0 6px 8px; padding: 8px 9px; border: 0; background: transparent; color: var(--accent); font-size: 0.8rem; font-weight: 500; text-align: left; border-top: 0.5px solid var(--line); cursor: pointer; font-family: inherit; }
.ls-form { display: grid; gap: 10px; padding: 12px 14px; }
.ls-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.ls-yn { display: inline-flex; gap: 4px; }
.ls-flag { min-height: 30px; padding: 0 13px; border: 0.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: inherit; }
.ls-flag.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ls-fld { display: grid; gap: 4px; font-size: 0.78rem; color: var(--muted); }
.ls-fld input { min-height: 36px; border-radius: var(--r-control); font-size: 0.86rem; }
.ls-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ls-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 0 14px 12px; }

/* ---- Overlays over the board: event log popover + chat window ---- */
/* Popovers sit ABOVE the chat FAB (5500) and chat window (5600) — the FAB was
   overlapping the driver check-in sheet's buttons on mobile. */
.dtpop-scrim { position: fixed; inset: 0; z-index: 5690; background: rgba(21, 32, 29, 0.18); }
.dtpop {
  position: fixed; z-index: 5700;
  width: min(520px, calc(100vw - 16px));
  max-height: min(560px, calc(100vh - 16px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(21, 32, 29, 0.28);
  overflow: hidden;
}
.dtpop-chat { width: min(400px, calc(100vw - 16px)); }
.dtpop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 8px; border-bottom: 0.5px solid var(--line); }
.dtpop-head h4 { margin: 0; font-size: 0.9rem; font-weight: 500; }
.dtpop-pad { padding: 14px; }

.dtlog { overflow-y: auto; padding: 4px 14px 10px; }
.dtlog-row { display: grid; grid-template-columns: 84px 20px minmax(0, 1fr); gap: 8px; padding: 7px 0; font-size: 0.8rem; align-items: baseline; }
.dtlog-row + .dtlog-row { border-top: 0.5px solid var(--line); }
.dtlog-row time { color: var(--muted); font-size: 0.72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtlog-k {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.64rem; background: var(--band); color: var(--muted); flex: 0 0 auto;
}
.dtlog-row.is-update .dtlog-k, .dtlog-row.is-q .dtlog-k { background: var(--amber-soft); color: var(--amber); }
.dtlog-row.is-accept .dtlog-k { background: var(--accent-soft); color: var(--accent); }
.dtlog-row.is-a .dtlog-k { background: var(--accent-soft); color: var(--accent); }
.dtlog-body { min-width: 0; overflow-wrap: anywhere; }
.dtlog-body b { font-weight: 500; }
.dtlog-body s { color: var(--muted); }
.dtlog-sub { color: var(--muted); font-size: 0.72rem; }
.dtlog-unans { color: var(--danger); font-size: 0.72rem; }

.dt-thread { overflow-y: auto; padding: 12px 14px; display: grid; gap: 8px; flex: 1; min-height: 60px; }
.dt-bubble {
  max-width: 88%; justify-self: start;
  background: var(--band);
  border-radius: 13px; border-bottom-left-radius: 4px;
  padding: 7px 11px; font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.dt-bubble.is-mine {
  justify-self: end;
  background: var(--accent-soft);
  border-radius: 13px; border-bottom-right-radius: 4px;
}
.dt-bubble time { display: block; font-size: 0.66rem; color: var(--muted); margin-top: 2px; }
.dt-ask { display: flex; gap: 8px; padding: 10px 14px; border-top: 0.5px solid var(--line); align-items: center; }
.dt-ask input { flex: 1; min-width: 0; border: 0.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 7px 11px; font-size: 0.82rem; font-family: inherit; }

/* ---- Cross-cutting driver chat dock (same design on mobile, scaled) ---- */
/* Icon-only round FAB; the unread count sits on its corner. */
.chat-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 5500;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  background: var(--accent); color: #fff; border: 0; border-radius: 50%;
  font-size: 1.15rem; font-family: inherit; cursor: pointer;
  box-shadow: 0 12px 32px rgba(15, 118, 110, 0.35);
}
.chat-fab-cnt { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; border-radius: 999px; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; padding: 0 5px; }
.chat-fab-cnt.hidden { display: none; }

.chat-win {
  position: fixed; right: 14px; bottom: 68px; z-index: 5600;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 90px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 0.5px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(21, 32, 29, 0.30);
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px; border-bottom: 0.5px solid var(--line); }
.chat-head h4 { margin: 0; font-size: 0.92rem; font-weight: 500; flex: 1; }
.chat-list { overflow-y: auto; }
.chat-drv { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 0.5px solid var(--line); background: transparent; cursor: pointer; font-family: inherit; text-align: left; }
.chat-drv:hover { background: var(--band); }
.chat-drv:last-child { border-bottom: 0; }
.chat-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 500; flex: 0 0 auto; }
.chat-who { flex: 1; min-width: 0; display: grid; }
.chat-nm { font-size: 0.86rem; color: var(--ink); }
.chat-pv { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta { display: grid; justify-items: end; gap: 3px; flex: 0 0 auto; }
.chat-meta time { font-size: 0.68rem; color: var(--muted); }
.chat-un { background: var(--danger); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; padding: 0 5px; }

.chat-plus { width: 32px; height: 32px; min-height: 32px; border-radius: 50%; border: 0.5px solid var(--line); background: var(--surface); color: var(--accent); font-size: 1rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; }
/* Day separators + the date-jump field in a thread (history keeps 30 days). */
.chat-day { justify-self: center; text-align: center; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.04em; background: var(--band); border-radius: 999px; padding: 2px 10px; margin: 2px auto; width: fit-content; }
.chat-date-wrap { flex: 0 0 auto; width: 128px; }
.chat-date-wrap .us-date-wrap .us-date-text { min-height: 30px; height: 30px; font-size: 0.76rem; padding: 0 26px 0 8px; border-radius: var(--r-control); }
.chat-date-wrap .us-date-ico { right: 6px; }
/* Clearing the date filter is a small red ✕, distinct from the close button. */
.chat-date-clear { width: 22px; height: 22px; min-height: 22px; padding: 0; border: 0.5px solid #f0b7b1; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 0.66rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; flex: 0 0 auto; box-shadow: none; }
.chat-refchip {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  background: var(--surface); border: 0.5px solid var(--line); border-radius: 10px;
  padding: 5px 10px; margin-top: 6px; font-size: 0.76rem; cursor: pointer; font-family: inherit; text-align: left; color: var(--ink);
}
.chat-refchip .rc-num { color: var(--accent); font-weight: 500; white-space: nowrap; }
.chat-refchip .rc-dest { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-refchip .rc-i { margin-left: auto; color: var(--muted); font-style: italic; }
.chat-refchip.is-draft { cursor: default; margin: 0; }
.chat-refs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.chat-refs:empty { display: none; }
.chat-refs + .dt-ask { border-top: 0; padding-top: 8px; }
.chat-attach { max-height: 180px; overflow-y: auto; border-top: 0.5px solid var(--line); }
.chat-pick { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 0.5px solid var(--line); background: transparent; cursor: pointer; font-family: inherit; font-size: 0.8rem; text-align: left; }
.chat-pick:hover { background: var(--band); }
.chat-pick .rc-num { color: var(--accent); font-weight: 500; white-space: nowrap; }
.chat-pick .rc-dest { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .chat-fab { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .phone-fab { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .chat-win { right: 10px; left: 10px; width: auto; bottom: calc(64px + env(safe-area-inset-bottom)); max-height: min(70dvh, calc(100dvh - 84px)); }
}

/* Scrolling inside the chat must never reach the page behind it: the window
   and its scroll areas contain overscroll, and a JS guard in openChatDock
   swallows wheel/touch moves over the non-scrollable parts (header, input). */
.chat-win,
.chat-win .dt-thread,
.chat-win .chat-list,
.chat-win .chat-attach { overscroll-behavior: contain; }

/* The FAB has no job while the window is open — and on phones it used to
   overlap the message input. */
body:has(#chatWin) .chat-fab { display: none; }

/* ---- Change card (opened from the "info has changed" push) ---- */
tr.cc-chg td { background: var(--amber-soft); }
tr.cc-chg td s { color: var(--muted); margin-right: 4px; }
tr.cc-chg td b { font-weight: 500; }
.cc-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cc-call {
  width: 42px; height: 42px; min-height: 42px; border-radius: 50%;
  border: 0.5px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.cc-accept {
  flex: 1; min-height: 42px; border-radius: 12px; border: 0;
  background: var(--accent); color: #fff; font-size: 0.92rem; font-weight: 500;
}

/* ---- Pull-to-refresh: floating disc that follows the drag, spins on reload */
.ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 6000;
}
.ptr-disc {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface);
  border: 0.5px solid var(--line);
  box-shadow: 0 6px 18px rgba(21, 32, 29, 0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-6px);
  transition: transform 0.2s var(--ease), opacity 0.15s ease;
  margin-top: -44px;
}
.ptr.is-pulling .ptr-disc { opacity: 1; transition: opacity 0.15s ease; }
.ptr.is-ready .ptr-disc { color: var(--accent); border-color: var(--accent); }
.ptr.is-refreshing .ptr-disc { opacity: 1; transition: transform 0.2s var(--ease); }
.ptr.is-refreshing .ptr-disc svg { display: none; }
.ptr.is-refreshing .ptr-disc::after {
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.dispatch-card, .driver-card {
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--surface);
  display: grid;
  gap: 8px;
}
.driver-card.is-current { border: 2px solid var(--accent); }
.dispatch-card-head, .driver-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dispatch-num { font-size: 0.9rem; font-weight: 500; }
.dispatch-cust { font-size: 0.82rem; color: var(--muted); }
.dispatch-head-spacer, .dispatch-foot-spacer { flex: 1; }
.dispatch-driver { font-size: 0.82rem; }
.dispatch-rate { font-weight: 500; }
.dispatch-stops { display: grid; gap: 3px; }
.dispatch-stop { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.dispatch-seq {
  width: 18px; height: 18px; border-radius: 50%; background: var(--band);
  font-size: 0.7rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
}
.dispatch-stop-kind { font-size: 0.66rem; font-weight: 500; padding: 1px 6px; border-radius: 999px; }
.dispatch-card-foot { display: flex; align-items: center; gap: 8px; }
.dispatch-broker { font-size: 0.72rem; color: var(--muted); }
.driver-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.driver-dayhead { margin-bottom: 8px; }
.driver-current-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 10px 0 5px; }
.driver-route { font-size: 1rem; font-weight: 500; }
.driver-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* New PU/Del is a long flat form — override the workbench grid so it scrolls
   and each field keeps its own row (no squished/overlapping labels). */
.pudel-dialog .dialog-card {
  grid-template-rows: none;
  grid-auto-rows: max-content;
  overflow-y: auto;
}
.pudel-dialog .dialog-card > label { display: grid; gap: 4px; }
/* New PU/Del form — one-row sections, Apple-style, normalized controls
   (consistent across Chrome/Safari). Weights ≤500. */
.df-head { padding: 0; margin-bottom: 6px; }
.df-section { border: 0.5px solid var(--line); border-radius: 13px; padding: 12px 14px 14px; margin-bottom: 12px; }
.df-cap { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.df-section input, .df-section select { height: 38px; min-height: 38px; border: 0.5px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 0.85rem; color: var(--ink); padding: 0 11px; width: 100%; }
.df-section select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2365716d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.df-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.df-fld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 0; }
.df-fld > label { font-size: 0.72rem; color: var(--muted); }
.df-grow { flex: 2 1 200px; }
.df-w-type { flex: 0 0 150px; }
.df-w-money { flex: 0 0 118px; }
.df-w-pay { flex: 0 0 150px; }
.df-w-trailernum { flex: 0 0 140px; }
/* `.df-section input` sets padding: 0 11px and lands after .money-field in the
   sheet, so the generic money padding loses and the $ sits on top of the value. */
.df-section .money-field input { padding-left: 22px; }
.df-section .money-field .money-prefix { font-size: 0.85rem; }
.df-datewrap { position: relative; display: flex; align-items: center; }
.df-datewrap .df-date { flex: 1; min-width: 0; padding-right: 34px; }
.df-cal { position: absolute; right: 5px; width: 26px; height: 30px; min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.df-cal:hover { color: var(--accent); }
.df-date-native { position: absolute; right: 6px; bottom: 2px; width: 24px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.df-checkin-wrap { display: flex; align-items: center; gap: 2px; }
.df-checkin-wrap input { flex: 1; min-width: 0; }
.df-picked { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 12px; border: 0.5px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 0.85rem; }
.df-picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.df-picked-change { flex: 0 0 auto; border: 0; background: none; color: var(--accent); font-size: 0.78rem; font-weight: 500; padding: 4px 8px; min-height: 0; }
.df-picked-change:hover { color: var(--accent); text-decoration: underline; filter: none; }

.df-stops { display: grid; gap: 7px; }
/* Grid columns keep every stop's cells identically sized (the home cell no
   longer ends up wider than the empty address cells). */
/* Columns: [red ✕] [seq] [kind] [address] ([note]) — the row-delete lives on
   the LEFT and the old right-side ✕ column is gone. */
.df-stop { display: grid; grid-template-columns: 18px 20px 116px minmax(0, 1fr); gap: 8px; align-items: center; border-radius: 10px; }
.df-stops.with-notes .df-stop { grid-template-columns: 18px 20px 116px minmax(0, 1fr); }
/* Structured address fields share line 1; widths follow their content. */
.df-addr-parts { display: flex; gap: 6px; min-width: 0; }
.df-addr-parts input { min-width: 0; }
.df-addr-parts .df-a-fac { flex: 1.1 1 0; }
.df-addr-parts .df-a-str { flex: 1.5 1 0; }
.df-addr-parts .df-a-city { flex: 0.7 1 0; }
.df-addr-parts .df-a-zip { flex: 0 0 72px; }
/* Focused address field with clipped text takes the row's spare width; its
   row-mates give it up. Only this row is affected. */
.df-addr-parts input.df-a-wide { flex: 4 1 0; }
/* "Did you mean…?" geocoder suggestion under the address row. */
.df-verify-slot { flex: 1 1 100%; }
.df-verify-slot:empty { display: none; }
.df-verify-accept {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  margin-top: 4px; padding: 5px 10px; min-height: 0;
  border: 0.5px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 0.8rem; font-family: inherit; text-align: left; cursor: pointer;
}
.df-verify-accept:hover { background: var(--accent-soft); filter: brightness(0.97); }
.df-verify-q { color: var(--muted); font-size: 0.72rem; flex: 0 0 auto; }
@media (max-width: 760px) {
  .df-addr-parts { flex-wrap: wrap; }
  .df-addr-parts .df-a-fac { flex: 1 1 100%; }
  .df-addr-parts .df-a-str { flex: 1 1 100%; }
  .df-addr-parts .df-a-city { flex: 1 1 40%; }
  .df-addr-parts .df-a-zip { flex: 0 0 80px; }
  .df-stop-appt { flex-wrap: wrap; }
}
/* Per-stop appt/ref/appt# line under the address (never on home stops). */
.df-stop-appt { grid-column: 4 / -1; display: flex; gap: 8px; }
.df-stop-appt input { flex: 1; min-width: 0; height: 32px; min-height: 32px; font-size: 0.8rem; }
/* Appt window fits ~15 characters and no longer tracks the address grid. */
.df-stop-appt input.df-appt-w { flex: 0 0 auto; width: 15ch; }
.df-stop-appt input.df-stop-seal { flex: 0 0 auto; width: 11ch; }
.df-stop-appt .df-stop-note { flex: 1.3; }
.df-grip { cursor: grab; user-select: none; }
.df-grip:active { cursor: grabbing; }
.df-dragging { opacity: 0.4; }
.df-drop-target { box-shadow: 0 -2px 0 0 var(--accent); }
.df-stop-kind { min-width: 0; }
.df-stop-addr { position: relative; min-width: 0; }
.df-stop-addr input { width: 100%; text-overflow: ellipsis; }
.df-stop-note { min-width: 0; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
/* The note control stands out once a note is set. */
.df-stop-note.has-note { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
/* Tiny red ✕ left of the row number removes the stop row; the note is cleared
   by erasing its text in the note editor. */
.df-note-x { width: 16px; height: 16px; min-height: 16px; padding: 0; border: 0.5px solid #f0b7b1; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 0.56rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; flex: 0 0 auto; box-shadow: none; }
/* Full stop note popover keeps the author's line breaks. */
/* Full-note popover matches the note editor's width so lines wrap in the same
   places the dispatcher saw while typing. */
.dtpop-note { width: min(820px, calc(100vw - 16px)); }
.dt-note-full { padding: 12px 14px; font-size: 0.85rem; white-space: pre-line; overflow-wrap: anywhere; }
.df-home-stop { min-width: 0; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border: 0.5px solid var(--line); border-radius: 10px; color: var(--accent); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.df-home-ico { display: inline-flex; flex: 0 0 auto; }
.df-x { width: 34px; height: 38px; min-height: 38px; padding: 0; border: 0.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.df-x-lg { width: 30px; height: 30px; min-height: 30px; }
.df-addr-pop { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5; background: var(--surface); border: 0.5px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; max-height: 240px; overflow-y: auto; }
.df-addr-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 0.85rem; background: var(--surface); border: 0; border-bottom: 0.5px solid var(--line); color: var(--ink); }
.df-addr-pop button:last-child { border-bottom: 0; }
.df-addr-pop button:hover { background: var(--accent-soft); color: var(--accent); }
.df-addstop { height: 34px; padding: 0 14px; margin-top: 8px; border: 0.5px dashed var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.8rem; }

.df-eq-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) max-content max-content minmax(120px, 150px); gap: 10px 12px; align-items: end; }
.df-eq-grid .df-fld { flex: none; }
.df-truck-wrap { display: inline-flex; align-items: center; gap: 4px; }
.df-truck-pill { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 56px; padding: 0 12px; border: 0.5px solid var(--line); border-radius: 10px; background: var(--band); font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.df-truck-input { width: 82px; }
.df-pencil { width: 22px; height: 38px; min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.df-pencil:hover { color: var(--accent); }

.df-seg { display: inline-flex; background: var(--band); border: 0.5px solid var(--line); border-radius: 10px; padding: 3px; height: 38px; }
.df-seg-o { padding: 0 15px; height: auto; min-height: 0; display: inline-flex; align-items: center; border: 0; background: none; border-radius: 8px; font-size: 0.78rem; color: var(--muted); white-space: nowrap; width: auto; }
.df-seg-o.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.df-seg-sm { height: 32px; padding: 2px; }
.df-seg-sm .df-seg-o { padding: 0 12px; font-size: 0.74rem; }
.df-rmode { grid-column: 3; justify-self: start; margin-top: 2px; }
.df-rtemp { grid-column: 4; justify-self: start; margin-top: 2px; }
.df-tw { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); height: 32px; }
.df-tinput { width: 46px; height: 32px; min-height: 32px; text-align: center; padding: 0; }

.df-dollar { position: relative; display: flex; align-items: center; }
.df-dollar > span { position: absolute; left: 11px; color: var(--muted); pointer-events: none; font-size: 0.85rem; }
.df-dollar input { width: 100%; padding-left: 23px; }

.df-carrier-pill { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border: 0.5px solid var(--line); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 500; font-size: 0.85rem; }
.df-carrier-pill span { flex: 1; min-width: 0; }
.df-carrier-pill small { color: var(--muted); font-weight: 400; }

.df-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.df-btn { height: 38px; padding: 0 20px; border-radius: 10px; border: 0.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 0.85rem; font-weight: 500; }
.df-btn.pri { background: var(--accent); color: #fff; border-color: transparent; }
/* The note editor opens WIDE so one line fits much more text before it has to
   visually wrap — line breaks stay exactly where the user typed them. */
.note-dialog { width: min(820px, calc(100vw - 28px)); }
.note-area { width: 100%; min-height: 160px; border: 0.5px solid var(--line); border-radius: 10px; padding: 10px; font-size: 0.9rem; resize: vertical; margin: 8px 0 12px; font-family: inherit; }

.carrier-list { display: grid; gap: 4px; margin: 6px 0 12px; max-height: 300px; overflow-y: auto; }
.carrier-row { display: flex; align-items: center; gap: 6px; }
.carrier-pick { flex: 1; text-align: left; background: var(--surface); border: 0.5px solid var(--line); border-radius: 9px; padding: 9px 12px; color: var(--ink); }
.carrier-pick:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.carrier-del { flex: 0 0 auto; width: 34px; height: 36px; min-height: 36px; padding: 0; border: 0.5px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; }
.carrier-del:hover { background: var(--danger-soft); border-color: transparent; }
.carrier-add { display: flex; gap: 8px; }
.carrier-add input { flex: 1; }

@media (max-width: 640px) {
  .df-eq-grid { grid-template-columns: 1fr 1fr; }
  .df-rmode, .df-rtemp { grid-column: auto; }
}
/* The categorized "i" card has more children than the workbench dialog's
   5-row grid template expects — the STOPS section landed in the squeezable
   1fr row and overlapped the next sections. Plain block flow + its own scroll. */
#deliveryInfoDialog .dialog-card { display: block; overflow-y: auto; }

/* Categorized "i" card sections. */
.di-sec { margin-top: 12px; border-top: 0.5px solid var(--line); padding-top: 9px; }
.di-sec-label { display: block; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.di-sec .di-table td { border-top: none; padding: 4px 0; }
.di-trailer { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
/* Stop note shown as its own small text pill (absent when there's no note). */
.n-pill { display: inline-flex; align-items: center; gap: 4px; height: 18px; min-height: 18px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--amber); background: var(--amber-soft); color: var(--amber); font-size: 0.66rem; line-height: 1; font-weight: 400; flex: 0 1 auto; max-width: 300px; overflow: hidden; white-space: nowrap; }
.n-pill i { font-style: normal; font-weight: 500; margin-right: 2px; }
.n-pill .n-text { overflow: hidden; text-overflow: ellipsis; }

.di-docs { margin-top: 12px; border-top: 0.5px solid var(--line); padding-top: 10px; }
.di-docs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.di-doc { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.di-doc a { flex: 1; min-width: 0; color: var(--accent); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.di-table td { padding: 7px 0; border-top: 0.5px solid var(--line); vertical-align: top; }
.di-table tr:first-child td { border-top: none; }
.di-l { color: var(--muted); width: 130px; }
.di-actions { display: flex; gap: 8px; }

/* Delivery accessorial charges (driver assist / detention / lumper). */
.di-match-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.dic-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dic-label { font-size: 0.9rem; font-weight: 500; }
.dic-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 0.74rem; font-weight: 500; }
/* The delete cross sits OUTSIDE the pill on the card background — легче найти глазом. */
.dic-x { width: 18px; height: 18px; min-height: 18px; margin: 0 2px 0 -4px; border: 0; border-radius: 50%; background: var(--danger-soft, #FCEBEB); color: var(--danger); font-size: 0.62rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.dic-add { height: 24px; min-height: 24px; padding: 0 10px; border: 0.5px dashed var(--line-strong, var(--line)); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.74rem; font-weight: 500; cursor: pointer; }
.dic-none { font-size: 0.8rem; color: var(--muted); }
.dic-grow { flex: 1; }
.dic-lock { font-size: 0.78rem; color: var(--muted); }
.diag-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diag-controls select { min-height: 34px; border: 0.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); font-size: 0.8rem; font-family: inherit; }
.di-charges { margin-top: 12px; border-top: 0.5px solid var(--line); padding-top: 10px; }
.di-charges-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.82rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.di-charge-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.9rem; }
.di-charge-row .di-charge-amt { margin-left: auto; font-weight: 500; }
.di-charge-add { display: grid; grid-template-columns: minmax(0, 1.1fr) 64px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 8px; }
.di-charge-add input, .di-charge-add select { min-height: 38px; }
.di-charge-add button { min-height: 38px; padding: 0 14px; }
.dc-reason { display: grid; gap: 4px; padding: 8px 0; font-size: 0.8rem; color: var(--muted); }
.dc-reason input { width: 100%; }
.dc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 0.5px solid var(--line); }
.dc-row:first-of-type { border-top: none; }
.dc-row > span:first-child { flex: 1; font-size: 0.9rem; }
.dc-row.dc-sub { padding-left: 16px; font-size: 0.85rem; color: var(--muted); }

/* Check-in / closing extras: location + editable out-time, stop picker. */
.dc-where { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--line); flex-wrap: wrap; }
.dc-loc { font-size: 0.85rem; color: var(--muted); }
.dc-time { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.dc-time input { min-height: 36px; width: 110px; border-radius: var(--r-control); }
.ck-pencil { font-style: normal; opacity: 0.6; font-size: 0.85em; }
.ck-stops { display: grid; gap: 4px; }
.ck-stop { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0.5px solid var(--line); border-radius: 10px; font-size: 0.86rem; cursor: pointer; }
.ck-stop input { width: 16px; height: 16px; min-height: 16px; accent-color: var(--accent); }
.tile-report.dc-turned { color: var(--danger); }
.dc-yn { display: inline-flex; gap: 4px; }
.dc-qty { width: 64px; text-align: center; }
.dc-upload { display: block; margin-top: 10px; }
.dc-files { display: grid; gap: 4px; margin-top: 6px; }
.dc-file { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--muted); }
.call-menu { display: grid; gap: 2px; }
.call-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; border-top: 0.5px solid var(--line); text-decoration: none; color: var(--ink); }
.call-item:first-child { border-top: none; }
.call-item .call-num { color: var(--accent); font-weight: 500; }
.service-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 500;
  background: #E1F5EE;
  color: #085041;
  padding: 2px 8px;
  border-radius: 999px;
}
.service-match-pill .pill-link { font-style: normal; opacity: 0.8; }

.activity-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.activity-name-main {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

/* Deliberately tiny so the last-sync time doesn't disturb the card. */
.sync-tag {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.sync-tag.failed {
  color: #b42318;
  font-weight: 500;
}

.sync-tag.syncing {
  color: var(--accent);
}

.activity-status {
  display: grid;
  gap: 2px;
  font-size: 0.86rem;
  color: var(--muted);
}

.activity-perf {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.perf-value {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.perf-vs {
  font-size: 0.78rem;
  color: var(--muted);
}

.perf-arrow {
  font-size: 0.82rem;
  font-weight: 500;
}

.perf-arrow.up {
  color: var(--accent);
}

.perf-arrow.down {
  color: var(--danger);
}

.perf-arrow.flat {
  color: var(--muted);
}

.worker-settings .worker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: nowrap;
  padding-block: var(--space-2);
}

.worker-row-main {
  min-width: 0;
}

.worker-row small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-row-actions {
  flex: 0 0 auto;
}

.worker-action-select {
  width: 168px;
  min-height: 38px;
  padding: 0 34px 0 14px;
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Activity tiles v2 + warehouse summary row */

.summary-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.summary-card {
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 118px;
}

.summary-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.summary-value {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.summary-value small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.summary-unclosed {
  min-width: 140px;
}

.summary-unclosed.has-unclosed {
  border-color: rgba(180, 35, 24, 0.28);
}

.summary-unclosed > summary {
  display: grid;
  gap: 2px;
  cursor: pointer;
  list-style: none;
}

.summary-unclosed > summary::-webkit-details-marker {
  display: none;
}

.summary-drill {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  max-height: 240px;
  overflow-y: auto;
}

.summary-drill-worker {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
}

.summary-drill-service {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.74rem;
}

.tile-v2 {
  gap: 9px;
}

.tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tile-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tile-id strong {
  min-width: 0;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.tile-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b4b2a9;
  flex: 0 0 auto;
}

.tile-dot.in {
  background: var(--accent);
}

.tile-loc {
  background: var(--band);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--muted);
}

.tile-status {
  background: var(--band);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.tile-status.in {
  background: var(--accent-soft);
  color: var(--accent);
}

.tile-timeline {
  display: grid;
  gap: 3px;
}

.tile-timeline-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--band);
  overflow: hidden;
}

.tile-timeline-bar span {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.tile-seg { cursor: pointer; }

.tile-seg-info {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 500;
}
.tile-seg-info:empty { display: none; }

.tile-timeline-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 0.6rem;
}

.tile-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
}

.tile-kpi {
  display: grid;
  gap: 1px;
  background: var(--band);
  border-radius: 8px;
  padding: 7px 4px;
}

.tile-kpi b {
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tile-kpi small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
}

.tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.tile-days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tile-days small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.tile-week { display: inline-grid; gap: 2px; justify-items: stretch; }
.tile-daydots { display: inline-flex; gap: 3px; }
.tile-daylabels { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.52rem; }

.tile-day {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--band);
  border: 1px solid var(--line);
}

.tile-day.worked {
  background: var(--accent);
  border-color: var(--accent);
}

.tile-day.today.worked {
  background: #9fe1cb;
  border-color: #9fe1cb;
}

.tile-rankline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tile-rank {
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eceafa;
  color: #5a51a8;
  font-size: 0.66rem;
  font-weight: 500;
  border: 0;
  box-shadow: none;
}

.tile-rank:hover {
  filter: brightness(0.97);
}

.tile-vsteam {
  background: var(--band);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--muted);
}

.tile-vsteam.up {
  color: var(--accent);
}

.tile-vsteam.down {
  color: var(--danger);
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tile-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tile-unclosed {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 500;
}

.tile-report {
  min-height: 30px;
  padding: 0 13px;
  border-radius: var(--r-control);
  border: 0.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 500;
  box-shadow: none;
}
.tile-report:hover { background: var(--band); filter: none; }

/* ---------------------------------------------------------------------------
   Admin impersonation banner */

.impersonation-banner {
  position: sticky;
  top: max(6px, env(safe-area-inset-top));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 14px;
  border: 1px solid rgba(162, 96, 22, 0.3);
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 0.86rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
}

.impersonation-banner button {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 9px;
  border: 1px solid rgba(162, 96, 22, 0.35);
  background: var(--surface);
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   My activity (dock worker) */

.my-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--band);
  border-radius: 12px;
  padding: 14px 16px;
}

.my-hero.in {
  background: var(--accent-soft);
}

.my-hero small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.my-hero.in small {
  color: rgba(15, 118, 110, 0.72);
}

.my-hero b {
  display: block;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.my-hero.in b {
  color: var(--accent);
}

.my-hero-right {
  text-align: right;
}

.my-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  text-align: center;
}

.my-kpi {
  display: grid;
  gap: 2px;
  background: var(--band);
  border-radius: 8px;
  padding: 9px 4px;
}

.my-kpi b {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-kpi small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.my-week {
  margin-top: 14px;
}

.my-week-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.my-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
  margin-top: 6px;
}

.my-bar-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.my-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  min-height: 3px;
}

.my-bar.today {
  background: #9fe1cb;
}

.my-bar-labels {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}

.my-bar-labels span {
  flex: 1;
  text-align: center;
  color: var(--muted);
  font-size: 0.6rem;
}

.my-attention {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}

.my-attention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 500;
}

.my-attention-count {
  display: inline-block;
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 500;
}

.my-attention-switch {
  display: inline-flex;
  gap: 3px;
  background: var(--band);
  border-radius: 999px;
  padding: 2px;
}

.my-attention-switch button {
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  box-shadow: none;
}

.my-attention-switch button.active {
  background: var(--surface);
  color: var(--accent);
}

.my-attention-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.my-attention-custom input {
  width: 138px;
  min-height: 34px;
  padding: 5px 8px;
  font-size: 0.82rem;
}

.my-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--band);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.8rem;
}

.my-attention-row b {
  color: var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Reports dialog */

.activity-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.report-tabs {
  display: flex;
  gap: 4px;
  background: var(--band);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  /* Reports used to live in a dialog whose .dialog-card supplied a 12px grid
     gap between every child — now it's a plain .panel section (no auto gap),
     so the controls row needs its own spacing or it sits flush under the tabs. */
  margin-bottom: 12px;
}

.report-tab {
  min-height: 32px;
  padding: 5px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
}

.report-tab.active {
  background: var(--surface);
  color: var(--accent);
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.report-entity {
  width: auto;
  min-width: 160px;
  max-width: 260px;
}

.report-period-select {
  width: auto;
  min-width: 150px;
  min-height: 34px;
  font-size: 0.84rem;
}

.report-transport-line {
  margin-left: 2px;
}

/* .checkbox-line forces display:flex !important — at equal specificity the
   later rule in the sheet wins over .hidden's display:none !important, so
   toggling .hidden on this element did nothing on tabs where it should be
   hidden (Worker/Drivers/Customers). This compound selector outranks it. */
.report-transport-line.hidden {
  display: none !important;
}

.report-period {
  display: flex;
  gap: 4px;
  background: var(--band);
  border-radius: 999px;
  padding: 3px;
}

.report-period-button {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
}

.report-period-button.active {
  background: var(--surface);
  color: var(--accent);
}

.report-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.report-custom input {
  width: 140px;
  min-height: 34px;
  padding: 5px 8px;
  font-size: 0.84rem;
}

/* Enhanced US-format date wrapper keeps the report range compact. */
.report-custom .us-date-wrap { width: 150px; }
.report-custom .us-date-wrap .df-date { width: 100%; }

/* Enhanced US date field: a MM/DD/YYYY text input + a calendar icon button that
   opens the custom mini-calendar popover (never the native picker). The native
   <input type=date> stays only as the hidden ISO source of truth. */
.us-date-wrap { position: relative; width: 100%; cursor: pointer; }
/* The whole cell opens the calendar; the date reads semi-transparent (Apple). */
.us-date-wrap .us-date-text { width: 100%; padding-right: 34px; cursor: pointer; color: var(--ink); font-weight: 400; }
.us-date-wrap .us-date-text::placeholder, .df-datewrap .df-date::placeholder { color: var(--muted); opacity: 0.65; }
.us-date-wrap .us-date-native-hidden { display: none; }
.us-date-wrap .us-date-ico {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.us-date-wrap:hover .us-date-ico { color: var(--accent); }
/* New PU/Del appt-date field: same semi-transparent, tap-to-open treatment. */
.df-datewrap { cursor: pointer; }
.df-datewrap .df-date { color: var(--ink); font-weight: 400; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  .us-date-wrap .us-date-text,
  .df-datewrap .df-date { color: var(--ink); }
}

/* Custom mini calendar popover (global, replaces native date pickers). */
.mini-cal {
  position: fixed;
  z-index: 6500; /* above the chat window (5600) and dt popovers (5700) */
  width: 244px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(21, 32, 29, 0.18), 0 2px 12px rgba(21, 32, 29, 0.08);
  user-select: none;
}
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mc-title { font-size: 0.86rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.mc-nav {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mc-nav:hover { background: var(--band); }
.mc-dow, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-dow {
  margin-bottom: 4px;
  font-size: 0.66rem;
  color: var(--muted);
  text-align: center;
}
.mc-day, .mc-empty {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-day {
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-height: 0;
  padding: 0;
}
.mc-day:hover { background: var(--band); }
.mc-day.is-today { color: var(--accent); font-weight: 500; }
.mc-day.is-sel { background: var(--accent); color: #fff; }

/* My Payments reference pill uses a subtle tone (distinct from ↳ match pills). */
.service-match-pill.mypay-ref { background: var(--band); color: var(--muted); }

/* Auto vs manual match tag — quiet, colour-only distinction (Apple-way). */
.service-match-pill.match-src-auto { background: #EAF1FB; color: #2B4C7E; }
.service-match-pill.match-src-manual { background: #F3EFFA; color: #574083; }

.report-body {
  display: grid;
  gap: 12px;
}

.report-range {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.report-kpi {
  display: grid;
  gap: 3px;
  background: var(--band);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.report-kpi-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.report-kpi-value {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.report-kpi-value small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.report-delta {
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.report-delta.up {
  color: var(--accent);
}

.report-delta.down {
  color: var(--danger);
}

.report-delta.flat {
  color: var(--muted);
}

.report-block {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
}

.report-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 500;
}

.report-block-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.report-bad {
  color: var(--danger);
}

.report-bar {
  display: flex;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--band);
}

.report-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px 12px;
  font-size: 0.78rem;
  color: var(--ink);
}

.report-legend i,
.report-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.report-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.report-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--band);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 4px 10px;
}

.report-pill.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.report-pill.teal {
  background: var(--accent-soft);
  color: var(--accent);
}

.report-pill.warm {
  background: var(--amber-soft);
  color: var(--amber);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.report-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 5px 6px 5px 0;
  border-bottom: 1px solid var(--line);
}

.report-table td {
  padding: 5px 6px 5px 0;
  border-bottom: 1px solid rgba(217, 224, 220, 0.5);
}

.report-table .report-num,
.report-table th.report-num {
  text-align: right;
}

.report-dim {
  color: var(--muted);
}

.report-donut-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.report-donut {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.report-donut-hole {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0;
}

.report-donut-top {
  font-size: 0.95rem;
  font-weight: 500;
}

.report-donut-bottom {
  font-size: 0.62rem;
  color: var(--muted);
}

.report-rank {
  display: grid;
  gap: 5px;
}

.report-rank-row {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 62px;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 3px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.report-rank-row:hover {
  background: var(--band);
  filter: none;
}

.report-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-rank-bar {
  height: 13px;
  border-radius: 999px;
  background: var(--band);
  overflow: hidden;
}

.report-rank-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.report-rank-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-customers-search {
  margin-bottom: 8px;
}

.report-rank-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-rank-line input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}

.report-rank-line .report-rank-row {
  flex: 1;
  min-width: 0;
}

.report-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.report-compare-bars {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.report-compare-row {
  display: grid;
  grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) 62px auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
}

.report-compare-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-compare-sub {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.report-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.report-drill-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-back {
  min-height: 32px;
  padding: 0 10px;
}

.report-export-scopes {
  gap: 8px;
}

/* Trends tab: hand-rolled SVG line chart (hover crosshair) + two vertical
   CSS bar charts. No charting library — matches the rest of Reports, which
   is all CSS/conic-gradient/inline-SVG already (report-donut, report-bar). */
.report-trend-chart {
  position: relative;
}

.report-trend-svg {
  width: 100%;
  height: 200px;
  display: block;
}

.report-trend-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.report-trend-axis {
  fill: var(--muted);
  font-size: 8px;
}

.report-trend-cursor {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.report-trend-tooltip {
  position: absolute;
  top: 4px;
  padding: 6px 9px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-control);
  font-size: 0.72rem;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.report-trend-legend {
  margin-top: 4px;
}

.report-trend-swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid #0F6E56;
  margin-right: 5px;
  vertical-align: middle;
}

.report-trend-dash {
  border-top-style: dashed;
}

.report-trend-bargrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.report-trend-bargrid.single {
  grid-template-columns: 1fr;
}

.report-trend-bar-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.report-trend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

.report-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  border-bottom: 0.5px solid var(--line);
  padding-bottom: 2px;
}

.report-trend-bar-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 3px;
}

.report-trend-bar {
  width: 100%;
  max-width: 22px;
  border-radius: 3px 3px 0 0;
}

.report-trend-bar-value {
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
}

.report-trend-bar-label {
  font-size: 0.6rem;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 46px;
  margin-top: 2px;
}

@media (max-width: 780px) {
  .report-trend-bargrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .split-layout {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .top-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    max-width: min(54vw, 360px);
  }

  .brand-logo {
    width: min(180px, 52vw);
    height: 78px;
    margin-top: 10px;
  }

  .app-dialog {
    margin-top: max(14px, env(safe-area-inset-top));
    margin-bottom: auto;
  }

  .app-dialog:not(.workbench-dialog):not(.settings-dialog) {
    margin-top: auto;
    margin-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* Sidebar becomes an off-canvas drawer, opened by the top-bar hamburger. */
  .workspace:not(.hidden) { grid-template-columns: 1fr; gap: 0; }
  .app-shell.nav-collapsed .workspace { grid-template-columns: 1fr; }
  .workspace > .view-stack { grid-column: 1; }

  .app-shell.has-workspace .nav-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink); box-shadow: none;
    /* Drop it to the bottom of the header row — level with the account-name
       pill under the logo, right above the first cards. */
    align-self: flex-end;
  }

  /* Full-height Gmail-style drawer: flush to the edges, top-to-bottom list.
     Height is set explicitly (not via top/bottom stretch): WebKit/iOS sizes a
     position:fixed grid item to its content when it inherits align-self:start
     from the .workspace grid, which left the drawer only as tall as its items.
     Forcing align-self + an explicit dvh height makes it fill the viewport. */
  .tabbar {
    position: fixed; left: 0; top: 0; bottom: 0;
    align-self: stretch;
    height: 100vh; height: 100dvh;
    width: 84vw; max-width: 340px; z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
    max-height: none; border-radius: 0;
    background: var(--surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
    padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
    gap: 2px;
  }
  .app-shell.nav-open .tabbar { transform: translateX(0); }
  /* While finger-dragging, JS drives the transform/opacity inline — kill the
     transition so the drawer tracks the finger 1:1, and let the scrim receive it. */
  .app-shell.nav-dragging .tabbar { transition: none; }
  .app-shell.nav-dragging .nav-scrim { pointer-events: auto; }

  .tabbar .nav-head { padding: 6px 12px 10px; margin-bottom: 6px; }
  .tabbar .nav-brand { font-size: 1.15rem; }
  .tabbar .tab-button {
    min-height: 52px; padding: 12px 16px; gap: 18px;
    font-size: 1rem; border-radius: 0 999px 999px 0; margin-right: 12px;
  }
  /* The drawer scrolls vertically, which makes WebKit clip horizontally too —
     so the active pill uses a flat tinted fill (no border/shadow to get cut at
     the edge) and dividers are inset well clear of both sides. */
  .tabbar .tab-button.active {
    background: var(--accent-soft);
    border-color: transparent;
    box-shadow: none;
  }
  .tabbar .nav-divider { margin: 10px 16px; }
  .tabbar .tab-ico, .tabbar .tab-ico svg { width: 22px; height: 22px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  .app-shell.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* Collapse is desktop-only — the drawer always shows labels. */
  .app-shell.nav-collapsed .tab-label,
  .app-shell.nav-collapsed .nav-brand { display: initial; }
  .app-shell.nav-collapsed .tab-button { justify-content: flex-start; padding: 12px 16px; }
}

@media (max-width: 560px) {
  /* iOS auto-zooms focused fields whose font is < 16px. Force 16px on all form
     controls so tapping a field never zooms the page. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .app-shell {
    width: 100%;
    overflow-x: clip;
    padding-left: 10px;
    padding-right: 10px;
  }

  .form-row,
  .settings-grid,
  .settings-row,
  .settings-row.rate-row {
    grid-template-columns: 1fr;
  }

  .tab-button {
    min-height: 40px;
    font-size: 0.95rem;
  }

  .panel {
    border-radius: 16px;
    padding: 12px;
  }

  .panel-heading {
    display: grid;
    gap: 8px;
  }

  .panel-heading p {
    font-size: 0.86rem;
  }

  /* Keep "+ Add worker" on the right, across from the heading, on mobile. */
  .worker-settings .panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .worker-settings .panel-heading > div {
    min-width: 0;
  }

  .worker-settings .panel-heading [data-worker-add] {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .record-row {
    grid-template-columns: 1fr;
  }

  .filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0;
    padding: 0;
    overflow: visible;
  }

  .filter-field {
    min-width: 0;
    font-size: 0.72rem;
  }

  .filter-field.date-filter {
    min-width: 0;
  }

  .filter-field input,
  .multi-filter > summary {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 0.84rem;
    border-radius: 12px;
  }

  .filter-field input[type="date"] {
    padding: 7px 4px;
    font-size: 0.78rem;
    text-align: center;
  }

  .filter-field input[type="date"]::-webkit-calendar-picker-indicator {
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
  }

  .service-wizard .form-row {
    grid-template-columns: 1fr;
  }

  /* Anchor the dropdown under its field instead of a fixed bottom sheet:
     iOS shifts position:fixed elements with the on-screen keyboard, which made
     the menu jump around the page while typing in the search box. */
  .app-dialog.workbench-dialog {
    /* Let filter dropdowns extend past the dialog edge instead of being clipped. */
    overflow: visible;
  }

  .multi-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 30px));
    max-width: calc(100vw - 30px);
    max-height: min(70dvh, 440px);
    border-radius: 16px;
  }

  /* 2-column filter bar: anchor by column so the menu never opens off-screen.
     Both rules carry the .filter-field qualifier to override the global
     nth-last-child rule that otherwise right-aligns left-column fields. */
  .filter-field:nth-child(odd) .multi-filter-menu {
    left: 0;
    right: auto;
  }

  .filter-field:nth-child(even) .multi-filter-menu {
    right: 0;
    left: auto;
  }

  /* Customer combo: open centered on screen rather than aligned to the field edge */
  .smart-combo-details .multi-filter-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
  }

  .workbench-actions {
    justify-content: flex-start;
    gap: 7px;
    margin-top: 2px;
  }

  .compact-actions button {
    min-height: 34px;
    padding: 0 13px;
    font-size: 0.86rem;
  }

  .service-workbench-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px;
  }

  .service-workbench-row .badge-stack {
    display: grid;
    grid-column: 2;
    grid-template-columns: 58px 112px minmax(96px, max-content) 34px;
    justify-content: start;
    gap: 6px;
    width: 100%;
  }

  .service-workbench-row .payment-type-chip {
    width: 112px;
    max-width: 112px;
  }

  .workbench-dialog {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 16px;
  }

  .workbench-dialog .dialog-card {
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .modal-list {
    max-height: 50dvh;
  }

  .wizard-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .wizard-step h3 {
    font-size: 0.94rem;
  }

  .line-builder-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    width: 100%;
  }

  .line-builder-row .badge {
    justify-self: start;
  }

  .line-builder-row .danger-button {
    grid-column: 1 / -1;
    width: auto;
  }

  .nested-service {
    margin-left: 0;
    padding-left: 10px;
  }

  .contact-select-line,
  .suggestion-select-line {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 108px);
    gap: 7px;
  }

  /* Compact Actions control aligned to the right of the row, instead of a
     full-width box that needlessly stretches the card height. */
  .user-action-select {
    width: auto;
    min-width: 104px;
    max-width: 160px;
    margin-left: auto;
    justify-self: end;
    padding-left: 10px;
    padding-right: 24px;
    font-size: 0.82rem;
  }

  .setting-table-head {
    display: none;
  }

  /* location/simple/priced/service rows keep the 2-column grid (name + Actions
     on top, pills below) from the base rule — do not collapse them here. */
  .setting-list-row,
  .rate-location-row {
    grid-template-columns: 1fr;
  }

  .setting-price {
    justify-self: start;
    text-align: left;
  }

  .setting-action-select {
    justify-self: end;
  }

  /* Tighten setting rows so name + pills + Actions stay on one line. */
  .location-row > strong,
  .simple-row > strong,
  .priced-row > strong,
  .service-row > strong {
    font-size: 0.86rem;
  }

  .location-row .badge,
  .priced-row .badge,
  .setting-price-badges .badge {
    font-size: 0.72rem;
    padding: 4px 7px;
    min-height: 26px;
  }

  .setting-table-row .user-action-select {
    min-width: 92px;
    max-width: 116px;
    font-size: 0.78rem;
  }

  .setting-subgroup {
    margin-left: 10px;
    padding-left: 10px;
  }

  .badge-stack {
    justify-content: flex-start;
  }

  .payment-type-chip {
    width: 100%;
  }

  .workbench-actions {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 2;
    background: rgba(242, 245, 243, 0.94);
    padding: 8px 0;
  }

  .brand-logo {
    width: min(220px, 70vw);
    height: 72px;
    margin-top: 12px;
  }
}

@media (max-width: 390px) {
  .filter-row,
  .line-builder-row,
  .rate-location-row {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .top-actions {
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
    max-width: 44vw;
  }

  .status-pill {
    max-width: 44vw;
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .user-name-pill {
    max-width: 100%;
  }

  .workbench-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- My Payments tab (payments-centric browse + reverse match) ----
   Rows reuse the Services & Payments workbench classes (.service-workbench-row,
   .service-match-pill, .badge-stack) so the look is unified — only the status
   badge tones and the reverse-match modal need their own styles. */
/* My Payments tile — ONE layout for desktop and mobile: meta block left,
   payment-type pill + amount badge in the top-right corner, status bottom-left,
   Match/Unmatch bottom-right. */
.service-workbench-row.mypay-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.mypay-tile > .service-workbench-main { grid-row: 1 / 3; grid-column: 1; }
.mypay-tile .mypay-corner { grid-row: 1; grid-column: 2; }
/* Match / Unmatch lives in the bottom-right corner (desktop AND mobile). */
.mypay-actions { grid-row: 2; grid-column: 2; justify-self: end; align-self: end; }
.mypay-actions button {
  min-height: 28px; padding: 3px 11px; border-radius: 999px;
  font-size: 0.78rem; display: inline-flex; align-items: center; line-height: 1.3;
}
.mypay-corner {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-self: end;
}
/* Type pill and amount badge share one size. */
.mypay-corner .dt-ip,
.mypay-corner .badge {
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1.3;
}
/* Ref / status / matched-to pills and the Match button: one capsule size. */
.mypay-pill-row { align-items: center; }
.mypay-pill-row > * {
  min-height: 28px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
  width: auto;
}

/* Dock worker nav: Create Service leads the list, Load Board joins it in the
   top group, the divider follows, the rest keep DOM order. */
body.dock-worker-role .tabbar .nav-head { order: -10; }
body.dock-worker-role .tab-button[data-view="dockView"] { order: -9; }
body.dock-worker-role .tab-button[data-view="loadBoardView"] { order: -8; }
body.dock-worker-role .tabbar [data-divider="a"] { order: -7; }
body.dock-worker-role .tab-button[data-view="paymentsView"] { order: -6; }

/* Second filter strip: Search + Amount under the main dropdowns. */
.mypay-subfilters {
  display: grid;
  grid-template-columns: 170px 130px; /* Search ≈ the From field, Amount compact */
  gap: 10px 12px;
  margin: 0 0 10px;
}
/* Mobile: same 2-across grid as the filter bar above — Search sized like
   Status (left half), Amount like Match (right half). */
@media (max-width: 780px) {
  .mypay-subfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.mypay-subfilters .filter-field { min-width: 0; }

.mypay-badge {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.mypay-badge.unmatched {
  background: rgba(255, 149, 0, 0.14);
  color: #9a5b00;
}

.mypay-badge.partial {
  background: rgba(0, 122, 255, 0.14);
  color: #0b5ecb;
}

.mypay-badge.matched {
  background: rgba(52, 199, 89, 0.16);
  color: #1c7a3c;
}

/* Reverse-match filters: From/To on the top row, Company/Service below —
   the same 2x2 on desktop and mobile. */
.mypm-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 12px 0;
}
.mypm-filters .filter-field { min-width: 0; }
/* Reverse-match service rows: own grid on every viewport (the generic mobile
   services-row override pushed the rate badge off the tile's left edge);
   the rate sits in the row's top-right corner. */
.mypm-list .service-workbench-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
}
.mypm-list .service-workbench-row .badge {
  align-self: start;
  justify-self: end;
  grid-column: 3;
}

.mypm-filters select {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 7px 10px;
  width: 100%;
}

.mypm-list {
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.mypm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mypm-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.84rem;
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  .mypm-filters select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
  }
  .mypay-badge.unmatched { color: #ffb454; }
  .mypay-badge.partial { color: #6aa6ff; }
  .mypay-badge.matched { color: #57d97e; }
}

/* Corner build tag — reflects the app.js version actually running. */
.app-version-badge {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 4000;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 32, 29, 0.55);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

/* ---- Mobile fixes (v253): unpinned filters, reachable action row, range menu
   on-screen, My Payments row fitting the viewport. ---- */
@media (max-width: 780px) {
  /* My Services / My Payments: the pinned filter bar ate half the screen and
     let list rows peek around its edges — on phones filters scroll away with
     the page like any other block. */
  .services-workbench-panel .workbench-filterbar {
    position: static;
    margin: 10px 0;
    padding: 0;
    background: none;
    border-bottom: 0;
  }

  /* Floating action row: bottom line, left of the round chat FAB, no bar
     background (the generic mobile .workbench-actions rule paints one) —
     just the buttons. Only ACTIVE buttons show: the disabled ones hide
     entirely, so the row holds exactly what applies to the selection. */
  .services-sticky-actions {
    position: fixed;
    left: auto;
    right: 68px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 78px);
    justify-content: flex-end;
    overflow-x: auto;
    z-index: 5400;
    background: none;
    padding: 0;
    margin: 0;
  }
  .services-sticky-actions button:disabled {
    display: none;
  }

  /* Dispatch date range: the chip sits at the screen's left edge, so the
     centered smart-combo menu opened half off-screen — anchor it left. */
  .disp-range.smart-combo-details .disp-range-menu {
    left: 0;
    right: auto;
    transform: none;
    width: max-content;
    max-width: calc(100vw - 30px);
  }

  /* Every dropdown list shows ~6 items and scrolls inside the menu. */
  .multi-filter-menu .multi-filter-options,
  .df-addr-pop {
    max-height: 236px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- Match payments dialog: selected-services summary + one-line filter row */
#matchDialogSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.match-sel-pill {
  display: inline-flex;
  align-items: center;
  background: var(--band);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.76rem;
  color: var(--ink);
  white-space: nowrap;
}
.match-sel-pill.match-sel-total {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.match-filter-amount { flex: 0 0 auto; }
.match-filter-amount .match-search { width: 110px; }
/* Desktop: the whole filter set on ONE line — chips · Customer/Ref# ·
   From · To · Amount. */
@media (min-width: 781px) {
  #matchDialog .invoice-filter-row { flex-wrap: nowrap; align-items: center; }
  #matchDialog .match-filter-side { flex: 0 0 auto; }
  #matchDialog .match-filter-search { flex: 1 1 auto; min-width: 130px; }
  #matchDialog .match-filter-search .match-search { width: 100%; }
  #matchDialog .match-filter-dates { flex: 0 0 auto; display: flex; gap: 8px; }
}

@media (max-width: 780px) {
  /* Mobile order: payment-type chips on top, From–To below, then Amount +
     Customer/Ref# side by side. The two date fields split the row evenly —
     the fixed 150px wrap width pushed "To" off-screen. */
  #matchDialog .invoice-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
  #matchDialog .match-filter-side { order: 1; flex: 0 0 100%; width: auto; min-width: 0; }
  #matchDialog .match-filter-dates { order: 2; flex: 0 0 100%; width: auto; min-width: 0; display: flex; gap: 8px; justify-content: flex-start; }
  /* The mini-calendar enhancement wraps each date in a fixed 150px
     .us-date-wrap — on mobile the wraps split the row 50/50 instead, so the
     dates line up with the Amount/Search columns below. */
  #matchDialog .match-filter-dates .us-date-wrap { flex: 1 1 0; width: auto; min-width: 0; }
  #matchDialog .match-filter-dates .invoice-mini-date {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
  #matchDialog .match-filter-amount { order: 3; flex: 1 1 0; min-width: 0; }
  #matchDialog .match-filter-amount .match-search { width: 100%; }
  #matchDialog .match-filter-search { order: 4; flex: 1 1 0; min-width: 0; }
  #matchDialog .match-filter-search .match-search { width: 100%; }
}

/* Trailer is equipment, not driver state: its own pill right of the driver. */
.dt-ip.dt-trl-pill { white-space: nowrap; }

/* Board drag & drop: the dragged tile fades, the drop edge shows a line. */
.dt-tile.is-dragging { opacity: 0.45; }
.dt-tile.drop-before { box-shadow: inset 0 3px 0 -1px var(--accent); }
.dt-tile.drop-after { box-shadow: inset 0 -3px 0 -1px var(--accent); }
.dt-tile.is-dragging { position: relative; z-index: 5; cursor: grabbing; touch-action: none; }
/* While a tile is being dragged the page must not scroll or select text. */
body.board-dragging { user-select: none; touch-action: none; }

/* ---- WHS One brand ---- */
/* Collapsed rail: the thin lockup would shrink to mush at 44px — swap the
   image for the app mark (W with the amber finishing stroke). */
.app-shell.nav-collapsed .brand-logo {
  content: url("/icons/icon.svg");
  width: 44px;
  height: 44px;
}