/* ש.נ.ה 10 · design system
   One set of tokens drives both themes: the light values live in :root, the dark ones in :root[data-theme='dark'].
   theme-init.js sets data-theme before the first paint (saved choice, else the device's own preference), so nothing flashes.
   Brand: electric purple and blue. Status colours are one set, used by pills, bars, tiles and charts alike. */
:root {
  --bg: #f3f5fb;
  --card: #ffffff;
  --card-2: #f6f7fc;
  --card-3: #eceffa;
  --input: #ffffff;
  --seg-on: #ffffff;
  --ink: #0f172a;
  --muted: #566079;
  --line: #e3e7f1;
  --line-strong: #cbd2e3;

  /* brand */
  --accent: #7c3aed;
  --accent-2: #3b82f6;
  --accent-hover: #6d28d9;
  --accent-ink: #ffffff;
  --accent-soft: rgba(124, 58, 237, 0.1);
  --accent-text: #6d28d9;
  --grad: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  --grad-btn: linear-gradient(135deg, #7c3aed 0%, #2f5fe3 100%);
  --grad-hero: linear-gradient(135deg, #2b1a7a 0%, #4130c9 48%, #2563eb 100%);
  --glow: 0 10px 28px -10px rgba(99, 62, 237, 0.55);

  /* surfaces that stay dark in both themes: the hero, the driver's header, the sign-in page, toasts */
  --dark: #0b1020;
  --dark-2: #151c36;
  --dark-3: #252e52;
  --on-dark: #f8fafc;
  --on-dark-muted: #a7b2cc;
  --on-dark-accent: #b9a5ff;

  /* the side menu and the top bar follow the theme */
  --side-bg: #ffffff;
  --side-line: #e3e7f1;
  --side-ink: #2a3550;
  --side-muted: #5b6682;
  --side-hover: #f1f3fb;
  --side-active: rgba(124, 58, 237, 0.1);
  --glass: rgba(255, 255, 255, 0.82);

  --ok: #0f766e;
  --ok-soft: #ccfbf1;
  --on-ok: #ffffff;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #c62828;
  --bad-soft: #fee2e2;
  --bad-solid: #dc2626;
  --info: #1d4ed8;
  --info-soft: #dbeafe;
  --violet: #6d28d9;
  --violet-soft: #ede9fe;
  --teal: #0e7490;
  --teal-soft: #cffafe;
  --idle: #5f6b85;
  --idle-soft: #e8ecf5;

  /* chart series, in the order they are used */
  --c1: #7c3aed;
  --c2: #3b82f6;
  --c3: #0d9488;
  --c4: #c76a05;
  --c5: #ef4444;
  --c6: #64748b;
  --grid: #e3e7f1;
  --chart-ink: #566079;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --radius: 14px;
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px -8px rgba(15, 23, 60, 0.12);
  --shadow-pop: 0 28px 70px -16px rgba(10, 14, 40, 0.45);
  --font: 'Heebo', 'Rubik', system-ui, 'Segoe UI', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #080b16;
  --card: #11172a;
  --card-2: #171f36;
  --card-3: #1d2745;
  --input: #0c1224;
  --seg-on: #232e55;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --line: #232c47;
  --line-strong: #34405f;

  --accent: #7c3aed;
  --accent-2: #3b82f6;
  --accent-hover: #6d28d9;
  --accent-soft: rgba(124, 58, 237, 0.2);
  --accent-text: #b9a5ff;
  --glow: 0 10px 30px -8px rgba(124, 58, 237, 0.7);

  --side-bg: #0c1124;
  --side-line: #1d2641;
  --side-ink: #cbd5e6;
  --side-muted: #8794b2;
  --side-hover: #151d38;
  --side-active: rgba(124, 58, 237, 0.22);
  --glass: rgba(8, 11, 22, 0.78);

  --ok: #2dd4bf;
  --ok-soft: rgba(45, 212, 191, 0.14);
  --on-ok: #04201c;
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, 0.15);
  --bad-solid: #dc2626;
  --info: #6aa7ff;
  --info-soft: rgba(59, 130, 246, 0.18);
  --violet: #b9a5ff;
  --violet-soft: rgba(124, 58, 237, 0.22);
  --teal: #22d3ee;
  --teal-soft: rgba(34, 211, 238, 0.14);
  --idle: #94a3b8;
  --idle-soft: rgba(148, 163, 184, 0.14);

  --c1: #8b5cf6;
  --c2: #3b82f6;
  --c3: #2dd4bf;
  --c4: #fbbf24;
  --c5: #f87171;
  --c6: #94a3b8;
  --grid: #232c47;
  --chart-ink: #94a3b8;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -10px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 30px 80px -16px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: calc(100vh / var(--z, 1));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p {
  margin: 0;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
::selection {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease, box-shadow 0.35s ease !important;
  }
}
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 2px;
}
.icon {
  flex: none;
  vertical-align: middle;
}
.muted {
  color: var(--muted);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
[hidden] {
  display: none !important;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn:hover {
  background: var(--card-2);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.btn-primary {
  background: var(--grad-btn);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: var(--glow);
}
.btn-primary:hover {
  background: var(--grad-btn);
  filter: brightness(1.1);
}
.btn-dark {
  background: var(--dark-2);
  border-color: var(--dark-3);
  color: #fff;
}
.btn-dark:hover {
  background: var(--dark-2);
}
.btn-ghost {
  background: transparent;
  box-shadow: none;
}
.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.btn-danger:hover {
  background: var(--bad);
  filter: brightness(0.95);
}
.btn-soft-danger {
  background: var(--bad-soft);
  border-color: transparent;
  color: var(--bad);
  box-shadow: none;
}
.btn-soft-danger:hover {
  background: var(--bad-soft);
  filter: brightness(0.97);
}
.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
}
.btn-lg {
  min-height: 58px;
  font-size: 18px;
  border-radius: 16px;
}
.btn-block {
  width: 100%;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.icon-btn:hover {
  background: rgba(127, 127, 127, 0.16);
}
@media (pointer: coarse) {
  .btn-sm {
    min-height: 44px;
  }
  .icon-btn {
    width: 44px;
    height: 44px;
  }
}

/* ---------- forms ---------- */

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}
.field input[type='date'], .field input[type='time'] {
  min-width: 0;
}
.field > span, .field > label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea {
  min-height: 84px;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}
.field.miss input, .field.miss select {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.field.miss > span {
  color: var(--warn);
}
.field.miss > span::after {
  content: ' · חסר';
}
.field-ltr input {
  direction: ltr;
  text-align: right;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 13px;
  background: var(--idle-soft);
  border: 1px solid var(--line);
}
.seg button {
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-weight: 650;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.seg button:hover {
  color: var(--ink);
}
.seg button[aria-pressed='true'] {
  background: var(--seg-on);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.form-error {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 650;
  font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent);
}
.form-error:empty {
  display: none;
}
.pw-wrap {
  position: relative;
}
.pw-wrap .pw-toggle {
  position: absolute;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.pw-wrap input {
  padding-inline-start: 62px !important;
}

/* ---------- status pills and chips ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--idle-soft);
  color: var(--idle);
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.st-open {
  background: var(--bad-soft);
  color: var(--bad);
}
.st-assigned {
  background: var(--info-soft);
  color: var(--info);
}
.st-confirmed {
  background: var(--teal-soft);
  color: var(--teal);
}
.st-onway, .st-arrived {
  background: var(--warn-soft);
  color: var(--warn);
}
.st-inride {
  background: var(--violet-soft);
  color: var(--violet);
}
.st-done {
  background: var(--ok-soft);
  color: var(--ok);
}
.st-cancelled {
  background: var(--idle-soft);
  color: var(--idle);
}
.st-cancelled .dot {
  display: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--idle-soft);
  color: var(--muted);
}
.chip.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.chip.accent {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ---------- sign-in ---------- */

.auth {
  min-height: calc(100vh / var(--z, 1));
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(900px 520px at 88% -8%, rgba(124, 58, 237, 0.5), transparent 62%), radial-gradient(800px 520px at -4% 108%, rgba(59, 130, 246, 0.38), transparent 62%), var(--dark);
}
.auth-card {
  width: min(430px, 100%);
  padding: 30px 26px 26px;
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--dark);
  color: var(--on-dark-accent);
  flex: none;
  overflow: hidden;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
}
.auth-card .brand-badge {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}
.brand-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.brand-sub {
  color: var(--muted);
  font-size: 14px;
}
.auth-card h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- toast & dialog ---------- */

#toast {
  position: fixed;
  inset-inline: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(540px, calc(100vw / var(--z, 1) - 32px));
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--dark-2);
  border: 1px solid var(--dark-3);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
#toast.show {
  opacity: 1;
  transform: none;
}
#toast.bad {
  background: var(--bad);
  border-color: transparent;
  color: #1a0505;
}
#toast.ok {
  background: var(--ok);
  border-color: transparent;
  color: var(--on-ok);
}
dialog.modal {
  width: min(580px, calc(100vw / var(--z, 1) - 24px));
  max-height: calc(100dvh / var(--z, 1) - 24px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: auto;
}
dialog.modal[open] {
  animation: modal-in 0.18s ease-out;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
dialog.modal.wide {
  width: min(840px, calc(100vw / var(--z, 1) - 24px));
}
dialog.modal {
  border: 1px solid var(--line);
}
dialog.modal::backdrop {
  background: rgba(5, 8, 20, 0.66);
  backdrop-filter: blur(3px);
}
.modal-body {
  --pad: 24px;
  display: grid;
  gap: 16px;
  padding: var(--pad);
}
.modal-body.small {
  gap: 12px;
}
.modal-body h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.modal-actions .spacer {
  flex: 1;
}
.modal-actions.sticky {
  position: sticky;
  bottom: 0;
  margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding: 14px var(--pad);
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 20px -14px rgba(10, 14, 40, 0.3);
  z-index: 2;
}
.modal-actions.sticky .btn-primary {
  min-width: 140px;
}
.section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  padding-top: 4px;
}
.restricted-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
}
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.span-2 {
  grid-column: span 2;
}
.secret {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--dark);
  color: #fff;
  text-align: center;
}
.secret .code {
  font-family: var(--mono);
  font-size: 38px;
  letter-spacing: 0.14em;
  color: var(--on-dark-accent);
  direction: ltr;
}
.secret .label {
  font-size: 13px;
  color: var(--on-dark-muted);
}

/* a dialog on a phone is a sheet that rises from the bottom */
@media (max-width: 640px) {
  dialog.modal, dialog.modal.wide {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh / var(--z, 1) - 10px);
    margin: auto 0 0;
    border-radius: 26px 26px 0 0;
  }
  dialog.modal[open] {
    animation-name: sheet-in;
  }
  .modal-body {
    --pad: 18px;
  }
}
@keyframes sheet-in {
  from {
    transform: translateY(36px);
    opacity: 0.4;
  }
}

/* ---------- driver app ---------- */

.driver-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: radial-gradient(700px 260px at 100% -40%, rgba(124, 58, 237, 0.55), transparent 65%), radial-gradient(600px 240px at 0% 120%, rgba(59, 130, 246, 0.35), transparent 65%), var(--dark);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 10px 28px rgba(5, 8, 30, 0.35);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
}
.topbar .brand-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--dark-2);
}
.topbar .who {
  flex: 1;
  min-width: 0;
}
.topbar .who b {
  display: block;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar .icon-btn {
  color: #fff;
}
.menu {
  position: absolute;
  inset-inline-start: 10px;
  top: calc(100% - 4px);
  min-width: 210px;
  padding: 6px;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  display: grid;
  z-index: 40;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: start;
  cursor: pointer;
  font-weight: 650;
}
.menu button:hover {
  background: var(--card-2);
}

/* the activity meter, styled like a taxi fare meter */
.meter {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  margin: 4px 12px 12px;
  border-radius: 18px;
  background: rgba(5, 8, 22, 0.72);
  border: 1px solid var(--dark-3);
  overflow: hidden;
}
.meter-cell {
  display: grid;
  gap: 2px;
  padding: 10px 16px 12px;
  min-width: 0;
}
.meter-sep {
  background: var(--dark-3);
}
.meter-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--on-dark-muted);
}
.meter-digits {
  display: flex;
  align-items: baseline;
  gap: 6px;
  direction: ltr;
  justify-content: flex-end;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: #d8ccff;
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.65);
  line-height: 1;
}
.meter-digits .n {
  font-size: 40px;
  font-weight: 700;
}
.meter-digits .of {
  font-size: 18px;
  opacity: 0.65;
}
.meter-digits .n.tick {
  animation: tick 0.5s ease;
}
@keyframes tick {
  0% {
    transform: translateY(-6px);
    opacity: 0.2;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.meter-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--dark-3);
  overflow: hidden;
}
.meter-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
  transition: width 0.5s ease;
}
.meter-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--on-dark-muted);
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 0 12px 12px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(5, 8, 22, 0.55);
  border: 1px solid var(--dark-3);
}
.tab {
  flex: 1;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #c6cde0;
  font-weight: 700;
  font-size: 15px;
  padding: 0 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab[aria-selected='true'] {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.8);
}
.tab .badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-inline-start: 6px;
  border-radius: 99px;
  background: var(--bad-solid);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: 1px;
}
.tab[aria-selected='true'] .badge {
  background: #fff;
  color: var(--accent);
}
.tab.has-offers[aria-selected='false'] {
  box-shadow: inset 0 0 0 2px var(--accent-2);
  color: #fff;
}
.st-offer {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.trip-card.offer {
  cursor: default;
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.push-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--ink);
}
.push-card .grow {
  flex: 1;
  min-width: 0;
}
.push-card small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.driver-cell {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.btn.resend {
  min-height: 34px;
  padding: 0 11px;
  font-size: 13px;
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
  box-shadow: none;
}

.driver-main {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 16px 14px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 0;
  font-weight: 800;
  color: var(--muted);
  font-size: 14px;
}
.trip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  text-align: start;
  width: 100%;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.trip-card:active {
  transform: scale(0.992);
}
.trip-card.done, .trip-card.cancelled {
  opacity: 0.6;
}
.trip-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow);
}
.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.time-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  direction: ltr;
}
.card-top .grow {
  flex: 1;
}
.price {
  font-weight: 800;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.who-line {
  font-weight: 750;
  font-size: 18px;
}
.route {
  display: grid;
  gap: 10px;
}
.stop {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
}
.stop .dot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 3px solid var(--accent-2);
  background: var(--card);
}
.stop.to .dot {
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 3px;
}
/* the line from pick-up to drop-off */
.stop:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: 22px;
  bottom: -10px;
  border-inline-start: 2px dotted var(--line-strong);
}
.stop small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.stop .addr {
  font-weight: 650;
  font-size: 16.5px;
  line-height: 1.35;
}
.empty {
  padding: 44px 16px;
  text-align: center;
  color: var(--muted);
}
.empty .icon {
  opacity: 0.45;
  margin-bottom: 10px;
}
.empty .who-line {
  color: var(--ink);
  margin-bottom: 4px;
}
.empty .btn {
  margin-top: 16px;
}

.detail {
  display: grid;
  gap: 14px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--sh-1);
  font-weight: 700;
  cursor: pointer;
}
.panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-row .grow {
  flex: 1;
  min-width: 0;
}
.contact-row b {
  font-size: 21px;
  display: block;
}
.phone-num {
  direction: ltr;
  display: inline-block;
  color: var(--muted);
  font-weight: 650;
}
.call-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--on-ok);
  display: grid;
  place-items: center;
  text-decoration: none;
  flex: none;
  box-shadow: 0 8px 18px -8px var(--ok);
}
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-links .btn {
  min-height: 46px;
  flex: 1 1 130px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.step {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.step .bar {
  height: 6px;
  width: 100%;
  border-radius: 99px;
  background: var(--line);
}
.step.on {
  color: var(--ink);
}
.step.on .bar {
  background: var(--accent);
}
.step.now .bar {
  background: var(--ok);
}
.big-action {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
.big-action .btn {
  box-shadow: 0 14px 30px -10px rgba(124, 58, 237, 0.55);
}
.done-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  border-radius: 18px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 800;
  font-size: 18px;
}

/* A driver gives a trip back to the office: a quiet button under the main action, and the notice for a driver whose access to new trips is paused */
.cancel-action {
  margin-top: 14px;
}
.cancel-trip {
  color: var(--bad);
  border-color: var(--bad-soft);
}
.cancel-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  background: var(--bad-soft);
  border-color: transparent;
  color: var(--bad);
  font-weight: 700;
  line-height: 1.5;
}
.cancel-block .icon {
  flex: none;
  margin-top: 2px;
}
.cancel-box {
  background: var(--idle-soft);
  color: var(--muted);
}

/* ---------- manager shell: a side menu on a computer, a bottom bar on a phone, one top bar on both ---------- */

.app-shell {
  min-height: calc(100vh / var(--z, 1));
  --side-w: 256px;
}
.side {
  display: none;
}
.app-body {
  min-width: 0;
}
.app-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: env(safe-area-inset-top) 14px 0;
  color: var(--ink);
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}
.app-top .brand {
  min-width: 0;
}
.app-top .brand-badge, .side .brand-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--dark);
}
.app-top .brand-name, .side .brand-name {
  font-size: 18px;
  color: var(--ink);
}
.app-top .grow {
  flex: 1;
}
.greet {
  display: none;
  line-height: 1.2;
  min-width: 0;
}
.greet b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.greet small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.bar-quick {
  display: none;
  align-items: center;
  gap: 8px;
}
.bar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.bar-tools .icon-btn {
  color: var(--side-ink);
}
.bar-tools .icon-btn:hover {
  background: var(--side-hover);
}
.theme-btn {
  position: relative;
}
.theme-btn .ti-sun, .theme-btn .ti-moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, color 0.2s ease;
}
:root:not([data-theme='dark']) .theme-btn .ti-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}
:root[data-theme='dark'] .theme-btn .ti-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}
:root[data-theme='dark'] .theme-btn .ti-sun {
  color: var(--warn);
}
:root:not([data-theme='dark']) .theme-btn .ti-moon {
  color: var(--accent-text);
}
.theme-btn:active .icon {
  transform: scale(0.88);
}
.bell-btn {
  position: relative;
}
.bell-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  border: 2px solid var(--bg);
  background: var(--bad-solid);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.avatar.sm {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.avatar.lg {
  width: 48px;
  height: 48px;
  font-size: 19px;
}
.avatar.xl {
  width: 64px;
  height: 64px;
  font-size: 26px;
}
.who-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.who-btn:hover {
  background: var(--side-hover);
}
.who-text {
  display: none;
  min-width: 0;
  line-height: 1.2;
}
.who-text b {
  font-size: 14.5px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-text small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.app-top .who-btn .icon {
  display: none;
}
.mgr-wrap {
  position: relative;
}
.mgr-wrap .menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(100% + 6px);
}

/* hints that appear on hover (never on a touch screen, where there is no hover) */
@media (hover: hover) {
  .bar-tools [data-tip], .side-toggle[data-tip] {
    position: relative;
  }
  .bar-tools [data-tip]:hover::after, .bar-tools [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    pointer-events: none;
    animation: tip-in 0.14s ease-out;
  }
  .is-collapsed .side-nav a {
    position: relative;
  }
  .is-collapsed .side-nav a:hover::after, .is-collapsed .side-toggle:hover::after {
    content: attr(data-tip);
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 70;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--ink);
    color: var(--bg);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    pointer-events: none;
  }
}
@keyframes tip-in {
  from { opacity: 0; transform: translate(-50%, -3px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* bottom bar (phones and small tablets) */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tab-item .ti {
  display: grid;
  place-items: center;
  width: 54px;
  height: 30px;
  border-radius: 15px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tab-item[aria-current='page'] {
  color: var(--ink);
}
.tab-item[aria-current='page'] .ti {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: var(--glow);
}
.more-sheet {
  position: fixed;
  inset-inline: 10px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 36;
  display: grid;
  padding: 8px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  animation: sheet-in 0.16s ease-out;
}
.more-sheet a, .more-sheet button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  text-align: start;
  cursor: pointer;
}
.more-sheet a:hover, .more-sheet button:hover {
  background: var(--card-2);
}
.more-sheet a[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.more-sheet hr {
  width: 100%;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.mgr-main {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 18px 14px calc(104px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
}
@media (prefers-reduced-motion: no-preference) {
  .mgr-main > * {
    /* backwards, not both: a finished animation must not keep a transform on the page head, or the fixed "new trip" button on phones would be positioned against it */
    animation: view-in 0.28s ease-out backwards;
  }
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .greet {
    display: block;
  }
  .app-top {
    padding-inline: 20px;
  }
}
@media (min-width: 720px) {
  .who-text {
    display: grid;
  }
  .app-top .who-btn .icon {
    display: block;
    color: var(--muted);
  }
}
@media (min-width: 1024px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    transition: grid-template-columns 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .app-shell.is-collapsed {
    --side-w: 78px;
  }
  .side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 0;
    align-self: start;
    height: calc(100dvh / var(--z, 1));
    padding: 14px 12px;
    background: var(--side-bg);
    border-inline-end: 1px solid var(--side-line);
    color: var(--side-ink);
  }
  .tabbar, .more-sheet {
    display: none;
  }
  .app-top {
    padding-inline: 32px;
  }
  .app-top .brand {
    display: none;
  }
  .bar-quick {
    display: flex;
  }
  .mgr-main {
    padding: 26px 32px 72px;
    gap: 18px;
  }
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--side-line);
}
.side-name {
  min-width: 0;
  white-space: nowrap;
}
.side-brand small {
  display: block;
  color: var(--side-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.is-collapsed .side-name {
  display: none;
}
.is-collapsed .side-brand {
  justify-content: center;
  padding-inline: 0;
}
.side-nav {
  display: grid;
  gap: 2px;
  align-content: start;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.is-collapsed .side-nav {
  overflow: visible;
}
.side-group {
  padding: 16px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--side-muted);
  white-space: nowrap;
}
.is-collapsed .side-group {
  height: 1px;
  margin: 10px 8px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  background: var(--side-line);
}
.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--side-ink);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.side-nav a:hover {
  background: var(--side-hover);
}
.side-nav a[aria-current='page'] {
  background: var(--side-active);
  color: var(--accent-text);
}
.side-nav a[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-inline-start: -12px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  background: var(--grad);
}
.is-collapsed .side-nav a {
  justify-content: center;
  padding: 0;
}
.is-collapsed .side-nav a span {
  display: none;
}
.side-foot {
  padding-top: 10px;
  border-top: 1px solid var(--side-line);
}
.side-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--side-muted);
  font-weight: 650;
  cursor: pointer;
}
.side-toggle:hover {
  background: var(--side-hover);
  color: var(--side-ink);
}
.side-toggle .icon {
  transition: transform 0.26s ease;
}
.is-collapsed .side-toggle {
  justify-content: center;
  padding: 0;
}
.is-collapsed .side-toggle span {
  display: none;
}
.is-collapsed .side-toggle .icon {
  transform: scaleX(-1);
}

/* ---------- the bell ---------- */
.notif-panel {
  position: fixed;
  z-index: 60;
  top: calc(66px + env(safe-area-inset-top));
  inset-inline: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 150px);
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: pop-in 0.16s ease-out;
}
@media (min-width: 640px) {
  .notif-panel {
    inset-inline: auto 20px;
    width: 400px;
  }
}
@media (min-width: 1024px) {
  .notif-panel {
    inset-inline-end: 32px;
  }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px 10px;
  border-bottom: 1px solid var(--line);
}
.notif-head h2 {
  font-size: 17px;
  font-weight: 800;
  padding-inline-start: 6px;
}
.notif-head .grow {
  flex: 1;
}
.notif-body {
  overflow-y: auto;
  padding: 6px 8px 10px;
  display: grid;
  gap: 2px;
  align-content: start;
}
.notif-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.notif-item:hover {
  background: var(--card-2);
}
.notif-item.is-new {
  background: var(--accent-soft);
}
.ni-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--idle-soft);
  color: var(--muted);
}
.att-nodriver .ni-ico {
  background: var(--bad-soft);
  color: var(--bad);
}
.att-unconfirmed .ni-ico, .ev-security .ni-ico, .ev-money .ni-ico {
  background: var(--warn-soft);
  color: var(--warn);
}
.ev-trip .ni-ico {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.ni-text {
  display: grid;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.ni-text b {
  font-size: 14.5px;
}
.ni-text small {
  color: var(--muted);
  font-size: 12.5px;
}
.ni-time {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.ni-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.notif-clear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  color: var(--ok);
}
.notif-clear.quiet {
  color: var(--muted);
}
.notif-clear div {
  display: grid;
  line-height: 1.3;
}
.notif-clear b {
  color: var(--ink);
}
.notif-clear small {
  color: var(--muted);
}
.notif-more {
  display: block;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.push-bar:not(:empty) {
  width: min(1360px, 100%);
  margin: 14px auto -4px;
  padding: 0 14px;
}
@media (min-width: 1024px) {
  .push-bar:not(:empty) {
    padding: 0 32px;
    margin-top: 20px;
  }
}

/* ---------- page header and the controls above a list ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.page-head .grow {
  flex: 1;
}
.page-head .head-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.page-head .head-sub .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.day-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.day-nav .date-title {
  min-width: 210px;
  border: 0;
  box-shadow: none;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
}
.day-nav .date-title:hover {
  background: var(--card-2);
}
.day-nav input[type='date'] {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* the main action: a button in the header on a computer, a floating button on a phone */
.btn-new {
  min-height: 50px;
  padding: 0 24px;
  font-size: 17px;
  border-radius: 15px;
}
@media (max-width: 1023px) {
  .btn-new {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 34;
    min-height: 56px;
    padding: 0 22px;
    border-radius: 28px;
    box-shadow: 0 14px 30px -8px rgba(124, 58, 237, 0.65), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

/* ---------- the dashboard on top of the board ---------- */

.dash {
  display: grid;
  gap: 12px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  border-radius: 24px;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-main {
  display: grid;
  gap: 16px;
  padding: 22px 26px 24px;
  align-content: center;
}
.hero-top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-num {
  font-family: var(--mono);
  font-size: 68px;
  font-weight: 700;
  line-height: 0.95;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(124, 58, 237, 0.35);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.hero-label {
  font-size: 17px;
  font-weight: 700;
  color: #e6eaf0;
}
.hero-sub {
  display: block;
  color: var(--on-dark-muted);
  font-size: 13.5px;
  font-weight: 600;
}
.pipe {
  display: flex;
  gap: 3px;
  height: 14px;
  border-radius: 99px;
  background: var(--dark-3);
  overflow: hidden;
}
.pipe i {
  display: block;
  flex: 0 1 0;
  min-width: 0;
  background: var(--c);
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pipe .seg-open { --c: var(--bad); }
.pipe .seg-assigned { --c: var(--info); }
.pipe .seg-running { --c: var(--violet); }
.pipe .seg-done { --c: var(--ok); }
.hero.solo {
  grid-template-columns: minmax(0, 1fr);
}
.hero-side {
  display: grid;
  align-content: center;
  gap: 0;
  padding: 8px 24px;
  background: var(--dark-2);
}
.hs-item {
  display: grid;
  gap: 2px;
  padding: 14px 0;
}
.hs-item + .hs-item {
  border-top: 1px solid var(--dark-3);
}
.hs-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--on-dark-muted);
}
.hs-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.hs-value small {
  font-size: 15px;
  font-weight: 650;
  color: var(--on-dark-muted);
}
.hs-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-dark-muted);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.kpi {
  --c: var(--idle);
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sh-1);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.kpi:hover {
  border-color: var(--line-strong);
}
.kpi:active {
  transform: translateY(1px);
}
.kpi .k-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.kpi .k-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.kpi b {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kpi[aria-pressed='true'] {
  border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.kpi.alert {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 35%, transparent);
}
.kpi.alert b {
  color: var(--bad);
}
.kpi-open { --c: var(--bad); }
.kpi-assigned { --c: var(--info); }
.kpi-running { --c: var(--violet); }
.kpi-done { --c: var(--ok); }
.kpi-cancelled { --c: var(--idle); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.search {
  position: relative;
  flex: 1 1 280px;
  max-width: 440px;
}
.search .icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  padding-inline-start: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--sh-1);
}
.search input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- cards, lists, tables ---------- */

.card {
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-pad {
  padding: 20px;
}
.list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.list-head b {
  font-size: 17px;
  font-weight: 800;
}
.list-head .grow {
  flex: 1;
}
.table-wrap {
  overflow-x: auto;
}
table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
table.grid th {
  padding: 11px 14px;
  text-align: start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.grid tbody tr:last-child td {
  border-bottom: 0;
}
table.grid tbody tr:hover td {
  background: color-mix(in srgb, var(--card-2) 75%, transparent);
}
table.grid tr.day-sep td {
  padding: 10px 14px;
  background: var(--card-2);
  font-weight: 800;
  color: var(--muted);
}
table.grid tr.dim {
  opacity: 0.62;
}
table.grid .time {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  direction: ltr;
}
table.grid .sub {
  color: var(--muted);
  font-size: 13px;
}
table.grid .nowrap {
  white-space: nowrap;
}

/* a trip row: the colour on its edge is the status */
table.trips tr {
  --c: var(--idle);
}
table.trips tr.r-open { --c: var(--bad); }
table.trips tr.r-assigned { --c: var(--info); }
table.trips tr.r-confirmed { --c: var(--teal); }
table.trips tr.r-on_way, table.trips tr.r-arrived { --c: var(--warn); }
table.trips tr.r-in_ride { --c: var(--violet); }
table.trips tr.r-done { --c: var(--ok); }
table.trips tr.r-cancelled { --c: var(--idle); }
table.trips td:first-child {
  box-shadow: inset -4px 0 0 var(--c);
}
table.trips td.c-time {
  display: table-cell;
  min-width: 108px;
}
.ct {
  display: grid;
  justify-items: start;
  gap: 6px;
}
.c-contact b {
  display: block;
}
.c-contact .chip {
  margin-top: 6px;
}
.c-route {
  min-width: 220px;
}
.rm {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.rm + .rm {
  margin-top: 8px;
}
.rm i {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: var(--card);
}
.rm.to i {
  border-radius: 3px;
  background: var(--accent);
}
.rm:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: 22px;
  bottom: -10px;
  border-inline-start: 2px dotted var(--line-strong);
}
.rm .sub {
  display: inline;
}
.c-sens {
  min-width: 140px;
}
.pbox {
  display: grid;
  grid-template-columns: repeat(2, 86px);
  gap: 8px;
}
.pf {
  display: grid;
  gap: 3px;
}
.pf small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.pf.profit-f {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* under a price box: "/" and the figure that goes with it (customer price with VAT, driver price after the 18% cut). Display only. */
.pcalc {
  min-height: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcalc:empty {
  visibility: hidden;
}
/* the same line under the price fields of the trip form, updated while typing */
.vat-note {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.vat-note b {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.vat-note:empty {
  display: none;
}
.price-in {
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: right;
}
.price-in:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.price-in.saved {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.profit {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profit.pos {
  color: var(--ok);
}
.profit.neg {
  color: var(--bad);
}
.driver-sel {
  min-height: 40px;
  width: 100%;
  max-width: 190px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.driver-sel.none {
  border-color: color-mix(in srgb, var(--bad) 55%, transparent);
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 700;
}
.c-act {
  white-space: nowrap;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.list-row:first-child {
  border-top: 0;
}
.list-row .grow {
  flex: 1;
  min-width: 0;
}
.perm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.perm-list {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card-2);
}
.perm-list small {
  color: var(--muted);
  padding-inline-start: 30px;
  margin-top: -6px;
  margin-bottom: 4px;
}

/* totals: the profit report, the driver accounts */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.stat {
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.stat small {
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
}
.stat b {
  font-size: 24px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat.alert {
  background: var(--bad-soft);
}
.stat.alert b {
  color: var(--bad);
}

/* intake */
.intake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: start;
}
.dropzone {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 18px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}
.dropzone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb button {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.draft {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.draft.bad {
  outline: 2px solid var(--bad);
}
.draft-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.draft-head b {
  font-size: 15px;
}
.draft-head .grow {
  flex: 1;
}
.savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.savebar {
  flex-wrap: wrap;
}
.savebar .grow {
  flex: 1;
}
@media (max-width: 640px) {
  .savebar {
    position: static;
    padding: 12px;
    gap: 8px 10px;
    box-shadow: none;
  }
  .savebar .grow {
    flex: 1 1 100%;
  }
  .savebar .btn-primary {
    flex: 1;
    justify-content: center;
  }
}
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 600;
  font-size: 14px;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.audit-detail {
  color: var(--muted);
  font-size: 14px;
}
.center {
  text-align: center;
}

/* ---------- narrower screens ---------- */

/* the trip table becomes a grid of cards when there is no room for ten columns */
@media (max-width: 1279px) {
  .list-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .list-card .list-head {
    padding: 0 4px 12px;
    border: 0;
  }
  .list-card .table-wrap {
    overflow: visible;
  }
  table.trips, table.trips tbody {
    display: block;
  }
  table.trips thead {
    display: none;
  }
  table.trips tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 12px;
  }
  table.trips tr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line);
    border-inline-start: 5px solid var(--c);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
  }
  table.trips tr.day-sep {
    grid-column: 1 / -1;
    padding: 6px 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  table.trips tr.day-sep td {
    padding: 0;
    background: transparent;
  }
  table.trips td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
  }
  table.trips td:first-child {
    box-shadow: none;
  }
  table.trips td.c-time {
    order: 1;
    min-width: 0;
    padding-inline-end: 96px;
  }
  .ct {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  table.trips td.c-contact {
    order: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  table.trips td.c-contact b {
    display: inline;
    font-size: 17px;
  }
  table.trips td.c-contact .chip {
    margin-top: 0;
    margin-inline-start: auto;
  }
  table.trips td.c-sens b, table.trips td.c-sens .sub {
    display: inline;
  }
  table.trips td.c-sens .sub {
    margin-inline-start: 6px;
  }
  table.trips td.c-route { order: 3; min-width: 0; }
  table.trips td.c-sens { order: 4; min-width: 0; }
  table.trips td.c-prices { order: 5; }
  table.trips td.c-driver { order: 6; }
  table.trips td.c-act {
    position: absolute;
    top: 10px;
    inset-inline-end: 8px;
    display: flex;
  }
  table.trips td[data-label]:not(.c-time):not(.c-contact):not(.c-route):not(.c-act):not(.c-prices):not(.c-driver)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
  }
  .pbox {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
  .pf.profit-f {
    grid-column: auto;
    display: grid;
    gap: 3px;
    min-height: 40px;
    align-content: end;
  }
  .driver-sel {
    max-width: none;
  }
}

@media (max-width: 1023px) {
  .intake-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    padding: 4px 22px 6px;
  }
  .hs-item + .hs-item {
    border-top: 0;
  }
  .hs-item {
    padding: 12px 0;
  }
}

@media (max-width: 900px) {
  .page-head h1 {
    font-size: 25px;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpis .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .hero-num {
    font-size: 56px;
  }
  .hero-main {
    padding: 20px 20px 22px;
  }
  .toolbar > .btn-primary {
    width: 100%;
  }
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .stat {
    min-width: 0;
  }
  /* any other grid table: each row is a small card */
  table.grid:not(.trips) thead {
    display: none;
  }
  table.grid:not(.trips), table.grid:not(.trips) tbody {
    display: block;
  }
  table.grid:not(.trips) tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
  }
  table.grid:not(.trips) tr:first-child {
    border-top: 0;
  }
  table.grid:not(.trips) tr.day-sep {
    display: block;
    padding: 0;
  }
  table.grid:not(.trips) td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
  }
  table.grid:not(.trips) td.full, table.grid:not(.trips) td.c-act {
    grid-column: 1 / -1;
  }
  table.grid:not(.trips) td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
  }
}
@media (max-width: 560px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
  .span-2 {
    grid-column: auto;
  }
  .day-nav {
    width: 100%;
    justify-content: space-between;
  }
  .day-nav .date-title {
    min-width: 0;
    flex: 1;
    font-size: 16px;
  }
  .toolbar .seg {
    flex: 1;
  }
  .toolbar .seg button {
    flex: 1;
  }
  .filters .seg {
    width: 100%;
    overflow-x: auto;
  }
  .filters .seg button {
    flex: 1 0 auto;
  }
  .search {
    max-width: none;
  }
  .list-row {
    padding: 14px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- driver accounts: amounts by day, payments, invoice photos ---------- */

.meter.single {
  grid-template-columns: 1fr;
}
.meter.single .meter-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.meter.single .meter-label {
  font-size: 14px;
}
.chip.good {
  background: var(--ok-soft);
  color: var(--ok);
}
.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  font-size: 18px;
}
.month-nav.inline {
  gap: 10px;
  padding: 0;
  font-size: 16px;
}
.month-nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.acct-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.acct-tile {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.acct-tile small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.acct-tile b {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.acct-tile.ok b {
  color: var(--ok);
}
.acct-tile.warn b {
  color: var(--warn);
}
.acct-note {
  margin: 0;
  font-size: 13px;
}
.acct-h {
  margin: 14px 0 8px;
  font-size: 15px;
}
.panel > .acct-h {
  margin-top: 0;
}
.acct-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.acct-day .grow {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.acct-day .price {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.acct-days {
  display: grid;
  gap: 8px;
}
.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.thumb {
  display: grid;
  gap: 4px;
  width: 92px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}
.thumb img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card-2);
}
.thumb small {
  font-size: 11px;
}
.invoice-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin: 4px auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.invoice-full {
  display: block;
  max-width: 100%;
  max-height: calc(70vh / var(--z, 1));
  margin: 0 auto;
  border-radius: 10px;
}
.file-btn {
  cursor: pointer;
}
.file-btn:focus-within {
  outline: 3px solid var(--accent);
}
td .owed {
  color: var(--warn);
}

/* ---------- trip form: morning / evening ---------- */
.form-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.form-top {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.form-note {
  line-height: 1.5;
}
.opt-add {
  justify-self: start;
  align-self: end;
  min-height: 44px;
}
.stops {
  display: grid;
  gap: 10px;
}
.stop-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}
.stop-row.several {
  grid-template-columns: 1fr 1fr auto;
}
.stop-row .icon-btn {
  margin-bottom: 2px;
}
.add-stop {
  justify-self: start;
}
.dest-list > div + div {
  margin-top: 4px;
}
.stop-who {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
@media (max-width: 640px) {
  .stop-row.several {
    grid-template-columns: 1fr auto;
  }
  .stop-row.several > .field:nth-child(2) {
    grid-column: 1;
  }
  .stop-row.several > .icon-btn, .stop-row.several > .stop-tools {
    grid-column: 2;
    grid-row: 1;
  }
}

.stop-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- invoice upload: the whole button is the file input, which works in every phone browser ---------- */
.file-btn {
  position: relative;
  overflow: hidden;
}
.file-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.pdf-open {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  text-align: center;
  word-break: break-word;
}
.pdf-open[hidden] {
  display: none;
}
.thumb .pdf-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
}

/* ---------- intake: the order as a picture or a message, kept small so the trip form stays in view ---------- */
.intake-paste {
  display: grid;
  gap: 12px;
}
.intake-paste.over {
  outline: 2px dashed var(--accent);
  background: var(--accent-soft);
}
.intake-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.intake-options .btn {
  min-height: 48px;
  justify-content: center;
}
.intake-paste [hidden] {
  display: none !important;
}
@media (min-width: 901px) {
  .intake-paste {
    position: sticky;
    top: 76px;
  }
}

.file-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.file-row .btn {
  min-height: 52px;
  justify-content: center;
}

/* ---------- reports, backup, and the driver's day amount ---------- */

/* the meter with two cells: the month's finished trips and today's amount */
.meter.dual .meter-cell {
  padding: 8px 14px 10px;
}
.meter.dual .meter-label {
  font-size: 13px;
}
.meter.dual .meter-digits .n {
  font-size: 30px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.report-card h2,
.backup-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
}
.report-card .muted {
  margin: 0 0 14px;
}
.report-range {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.quick-range {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.report-actions {
  display: flex;
  margin-top: 14px;
}
.backup-card {
  margin-top: 16px;
}
.backup-card p {
  margin: 0 0 10px;
}
@media (max-width: 900px) {
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-actions .btn {
    flex: 1;
  }
}

/* ---------- destinations: search, filter by kind, import ---------- */
.places-tools {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin: 16px 0 10px;
}
.places-tools input[type='search'] {
  width: 100%;
}
.places-tools .seg.place-cats {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.places-tools .seg.place-cats button {
  flex: 1 1 auto;
}
.list-more {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.import-card {
  margin-top: 12px;
}
.import-card summary {
  cursor: pointer;
  font-weight: 700;
}
.import-body {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 12px;
}
.import-body p {
  margin: 0;
}
.import-card textarea {
  width: 100%;
}
/* four user types in one control: wrap on a narrow screen */
.seg.seg-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.seg.seg-wrap button {
  flex: 1 1 auto;
}

/* profit report */
.profit-card {
  margin-top: 16px;
}
.profit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profit-head h2 {
  margin: 0;
}
.profit-head .grow {
  flex: 1;
}
.profit-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.profit-group h3 {
  margin: 4px 0 6px;
  font-size: 15px;
}
.profit-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--warn-soft, #fff4d6);
  font-size: 14px;
}
table.profit {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.profit th {
  padding: 8px 10px;
  text-align: start;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: var(--card-2);
  white-space: nowrap;
}
table.profit td {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.profit td:first-child {
  white-space: normal;
  min-width: 96px;
  font-weight: 700;
}
table.profit td.neg {
  color: var(--bad);
  font-weight: 800;
}
.modal-actions.derive {
  padding-top: 2px;
}

.push-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.push-bar:not(:empty) {
  width: min(1320px, 100%);
  margin: 14px auto -4px;
  padding: 0 20px;
}
@media (max-width: 900px) {
  .push-bar:not(:empty) {
    padding: 0 12px;
  }
}

/* text size: the whole app is scaled, so letters, buttons and spacing grow together */
html[data-size='large'] {
  zoom: 1.2;
  --z: 1.2;
}
html[data-size='xlarge'] {
  zoom: 1.4;
  --z: 1.4;
}
.size-btn {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  line-height: 44px;
  cursor: pointer;
}
.size-btn .sm {
  font-size: 14px;
}
.size-btn .lg {
  font-size: 23px;
}
.brand .grow {
  flex: 1;
  min-width: 0;
}
/* at the biggest size five tabs do not fit in one row: they wrap onto a second one */
html[data-size='xlarge'] .tabs {
  flex-wrap: wrap;
}
html[data-size='xlarge'] .tab {
  flex: 1 1 28%;
}
.auth-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -8px 0 -4px;
  font-size: 14px;
}
.auth-tools .size-btn {
  height: 40px;
  min-width: 40px;
  line-height: 40px;
}

/* at work / off switch in the driver's top bar */
.topbar .who .duty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-top: 3px;
  padding: 0 6px 0 12px;
  border: 0;
  border-radius: 99px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.topbar .who .duty.on {
  background: #14803f;
}
.topbar .who .duty.off {
  background: #4b5563;
}
.duty:disabled {
  opacity: 0.6;
}
.duty .track {
  position: relative;
  width: 36px;
  height: 22px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
}
.duty .track i {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.duty.on .track i {
  inset-inline-start: auto;
  inset-inline-end: 3px;
}

/* floating call / chat button of the driver app: on every screen, and the page leaves room under the last card */
.fab {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.fab[hidden] {
  display: none;
}
.driver-nav[hidden] ~ .fab {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.fab:active {
  transform: scale(0.96);
}
.driver-main {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
.driver-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 8px env(safe-area-inset-bottom);
  background: var(--glass);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}
.driver-nav .tab-item {
  max-width: 190px;
  min-height: 68px;
  font-size: 12.5px;
}
.driver-nav .tab-item .ti {
  position: relative;
  width: 62px;
  height: 34px;
  border-radius: 17px;
}
.tab-item .badge {
  position: absolute;
  top: -5px;
  inset-inline-end: 2px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 99px;
  background: var(--bad-solid);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.tab-item.has-offers:not([aria-current='page']) .ti {
  box-shadow: inset 0 0 0 2px var(--accent-2);
}
.seg.fill {
  display: flex;
  width: 100%;
}
.seg.fill button {
  flex: 1;
  min-height: 46px;
}
.greet-line {
  display: block;
  color: var(--on-dark-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.1;
}
.topbar .theme-btn .ti-moon {
  color: var(--on-dark-accent);
}
.contact .btn-lg {
  min-height: 56px;
  font-size: 18px;
}


/* ---------- security screens ---------- */
.how-to {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 22px;
  line-height: 1.5;
}
.code-input {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.25em;
  text-align: center;
}
.qr-box {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-2);
}
.qr-box {
  min-width: 0;
}
.qr-box .report-actions {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0;
  gap: 8px;
}
.auth-card .modal-body,
.modal-body.sec-body {
  grid-template-columns: minmax(0, 1fr);
}
.qr-box > svg {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.qr-key {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}
.key-box {
  font-size: 14px;
  text-align: center;
}
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recovery-codes li {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 15px;
  text-align: center;
  user-select: all;
}
.sec-block {
  display: grid;
  gap: 8px;
}
.sec-block h3 {
  margin: 0;
  font-size: 16px;
}
.sec-block p {
  margin: 0;
}
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.sec-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.sec-card p {
  margin: 0 0 10px;
}
.plain-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .sec-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =====================================================================
   Second pass: trip form groups, report cards, user and driver lists
   ===================================================================== */

/* ---------- the trip form, in groups ---------- */
.form-fields {
  display: grid;
  gap: 14px;
  margin-top: 0;
}
.kind-seg {
  display: flex;
  width: 100%;
}
.kind-seg button {
  flex: 1;
}
.fgroup {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-2);
}
.fgroup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
}
.fgroup-title .icon {
  color: var(--warn);
}
.fgroup-title small {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.fgroup.route {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}
.route-box {
  position: relative;
  display: grid;
  gap: 12px;
  padding-inline-start: 30px;
}
.rb {
  position: relative;
}
.rb::before {
  content: '';
  position: absolute;
  inset-inline-start: -30px;
  top: 45px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--card);
}
.rb.to::before {
  border-radius: 3px;
  background: var(--accent);
}
.rb.from::after {
  content: '';
  position: absolute;
  inset-inline-start: -25px;
  top: 57px;
  height: 100%;
  border-inline-start: 2px dotted var(--accent);
}
.rb .field input:not([type='checkbox']) {
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
}
.form-note {
  line-height: 1.5;
}
.opt-add {
  justify-self: start;
  align-self: end;
  min-height: 44px;
}
.stops {
  display: grid;
  gap: 10px;
}
.stop-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}
.stop-row.several {
  grid-template-columns: 1fr 1fr auto;
}
.stop-row .icon-btn {
  margin-bottom: 4px;
}
.add-stop {
  justify-self: start;
}
.dest-list > div + div {
  margin-top: 4px;
}
.stop-who {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.stop-spacer {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 640px) {
  .stop-row.several {
    grid-template-columns: 1fr auto;
  }
  .stop-row.several > .field:nth-child(2) {
    grid-column: 1;
  }
  .stop-row.several > .icon-btn, .stop-row.several > .stop-tools {
    grid-column: 2;
    grid-row: 1;
  }
  .fgroup {
    padding: 14px;
  }
}

/* ---------- loading and empty states ---------- */
.skel {
  height: 74px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--card-2), var(--idle-soft), var(--card-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.skel-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.empty-card {
  display: grid;
  justify-items: center;
}

/* ---------- reports ---------- */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.rc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.rc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--warn);
}
.report-card h2,
.backup-card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.report-card .muted {
  margin: 0 0 14px;
  font-size: 14.5px;
}
.report-card.profit-card {
  grid-column: 1 / -1;
}
.report-range {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.quick-range {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.report-actions {
  display: flex;
  margin-top: 14px;
}
.backup-card {
  margin-top: 4px;
}
.backup-card p {
  margin: 0 0 10px;
}
@media (max-width: 1279px) {
  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-actions .btn {
    flex: 1;
  }
}
.profit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profit-head h2 {
  margin: 0;
}
.profit-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 14px;
  font-weight: 600;
}
table.profit th {
  padding: 10px 12px;
}
table.profit td {
  padding: 10px 12px;
}
/* a bar behind a name, sized by what it earned: only drawn from numbers the report already holds */
.share {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--idle-soft);
  overflow: hidden;
}
.share i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

/* ---------- people and places ---------- */
.list-row .avatar {
  width: 44px;
  height: 44px;
  background: var(--idle-soft);
  color: var(--ink);
  font-size: 17px;
}
.list-row .avatar.owner {
  background: var(--accent);
  color: var(--accent-ink);
}
.list-row .avatar-wrap.on::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--card);
}
.list-row .avatar-wrap {
  position: relative;
  flex: none;
}
.list-row .pin-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--idle-soft);
  color: var(--muted);
}
.places-tools {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin: 16px 0 10px;
}
.places-tools input[type='search'] {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
}
.places-tools .seg.place-cats {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.places-tools .seg.place-cats button {
  flex: 1 1 auto;
}
.import-card summary {
  cursor: pointer;
  font-weight: 750;
}

/* ---------- driver accounts ---------- */
.acct-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.acct-tile {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.acct-tile b {
  font-size: 22px;
  font-weight: 800;
}
.acct-tile.ok {
  background: var(--ok-soft);
  border-color: transparent;
}
.acct-tile.warn {
  background: var(--warn-soft);
  border-color: transparent;
}
.acct-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.month-nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.month-nav.inline {
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.month-nav.inline b {
  min-width: 110px;
  text-align: center;
}

/* ---------- intake ---------- */
.draft {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.draft.bad {
  border-color: var(--bad);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent);
}
.savebar {
  border-radius: 18px;
}
.dropzone {
  border-radius: 18px;
}

/* ---------- touch sizes in the driver app ---------- */
.topbar .who .duty {
  height: 38px;
  font-size: 14.5px;
}
.fab {
  width: 60px;
  height: 60px;
  background: var(--grad-btn);
  color: #fff;
  box-shadow: var(--glow), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.contact .btn-lg {
  min-height: 56px;
  font-size: 18px;
}
@media (min-width: 1024px) {
  .fab {
    inset-inline-end: 28px;
  }
}

@media (max-width: 560px) {
  .fgroup.when .grid-2, .fgroup.money .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.profit-head + .muted {
  margin-top: 10px;
}

.report-card > .field {
  margin-bottom: 12px;
}
.report-card .report-range + .grid-2 {
  margin-top: 4px;
}

/* on a trip screen the big action button sits at the bottom: lift the office-call button above it */
.driver-main:has(.big-action) ~ .fab {
  bottom: calc(88px + env(safe-area-inset-bottom));
}

/* =====================================================================================================
   Dashboard, charts, reports centre, drivers: the pieces added with the premium redesign.
   Colours come only from the theme tokens at the top of this file.
   ===================================================================================================== */

.chip.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.chip.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.chips:empty {
  display: none;
}
.chip-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.chip-x:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ----- metric cards ----- */
.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
@media (min-width: 1100px) {
  .mc-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-grid.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mc-grid.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.mc {
  --t: var(--accent);
  --t-soft: var(--accent-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  text-align: start;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.mc::after {
  content: '';
  position: absolute;
  inset-inline-end: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--t-soft), transparent 70%);
  pointer-events: none;
}
button.mc {
  cursor: pointer;
}
button.mc:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--t) 50%, var(--line));
}
button.mc:active {
  transform: translateY(0);
}
.mc.is-active {
  border-color: var(--t);
  box-shadow: 0 0 0 1px var(--t), var(--shadow);
}
.mc.tone-ok { --t: var(--ok); --t-soft: var(--ok-soft); }
.mc.tone-bad { --t: var(--bad); --t-soft: var(--bad-soft); }
.mc.tone-warn { --t: var(--warn); --t-soft: var(--warn-soft); }
.mc.tone-info { --t: var(--info); --t-soft: var(--info-soft); }
.mc.tone-violet { --t: var(--violet); --t-soft: var(--violet-soft); }
.mc.tone-teal { --t: var(--teal); --t-soft: var(--teal-soft); }
.mc-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--t-soft);
  color: var(--t);
}
.mc-body {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 3px;
  line-height: 1.2;
}
.mc-title {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
}
.mc-num {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.mc .spark {
  position: absolute;
  z-index: 1;
  top: 18px;
  inset-inline-end: 14px;
  width: 72px;
  height: auto;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 6px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.delta.good { background: var(--ok-soft); color: var(--ok); }
.delta.bad { background: var(--bad-soft); color: var(--bad); }
.delta.flat { background: var(--idle-soft); color: var(--idle); }

/* ----- panels ----- */
.home, .reports-center, .drivers-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.home-body, .reports-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.reports-data {
  transition: opacity 0.2s ease;
}
.reports-data.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.home-stamp {
  font-size: 13px;
}
.home-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.hc-main, .hc-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.hc-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .home-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* one column: the cards of both columns in their own order (the schedule, the drivers, the chart, the activity) */
  .hc-main, .hc-side {
    display: contents;
  }
  .hc-sched { order: 1; }
  .hc-drv { order: 2; }
  .hc-act { order: 3; }
  .hc-ev { order: 4; }
}
@media (max-width: 760px) {
  .hc-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.home-grid > .wide {
  grid-column: span 2;
}
@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-grid > .wide {
    grid-column: auto;
  }
}
.panel {
  min-width: 0;
  gap: 12px;
  align-content: start;
}
.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.panel-head h2 {
  font-size: 16px;
  font-weight: 800;
}
.panel-head .grow {
  flex: 1;
}
.panel-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.panel-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-link, .panel-more {
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.panel-more {
  display: block;
  padding: 8px 10px 2px;
}
a.panel-more:hover, .panel-link:hover {
  text-decoration: underline;
}
.panel-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  color: var(--muted);
}
.panel-empty.big {
  flex-direction: column;
  justify-content: center;
  padding: 40px 8px;
  text-align: center;
}
.panel-empty.big b {
  color: var(--ink);
  font-size: 17px;
}
/* On the home an empty card is only a line and a button, so it doesn't need the height of a full one. */
.home .panel-empty.big {
  padding: 22px 8px;
}
.home .chart-host {
  min-height: 0;
}
.home .chart-empty {
  min-height: 0;
  padding: 18px 10px;
}

.list {
  display: grid;
  gap: 2px;
}
.lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
button.lrow {
  cursor: pointer;
}
button.lrow:hover {
  background: var(--card-2);
}
.lr-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--idle-soft);
  color: var(--muted);
}
.lrow.is-bad .lr-ico { background: var(--bad-soft); color: var(--bad); }
.lrow.is-warn .lr-ico, .lrow.ev-security .lr-ico, .lrow.ev-money .lr-ico { background: var(--warn-soft); color: var(--warn); }
.lrow.ev-trip .lr-ico { background: var(--accent-soft); color: var(--accent-text); }
.lrow.is-off {
  opacity: 0.75;
}
.lr-text {
  display: grid;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.lr-text b {
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-text small {
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-money {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lrow > .icon:last-child {
  color: var(--muted);
}

/* ----- charts ----- */
.s1 { --sc: var(--c1); }
.s2 { --sc: var(--c2); }
.s3 { --sc: var(--c3); }
.s4 { --sc: var(--c4); }
.s5 { --sc: var(--c5); }
.s6 { --sc: var(--c6); }
.b-open { --sc: var(--bad); }
.b-assigned { --sc: var(--info); }
.b-running { --sc: var(--violet); }
.b-done { --sc: var(--ok); }
.b-cancelled { --sc: var(--idle); }

.chart {
  position: relative;
  min-width: 0;
}
.chart-host {
  min-height: 160px;
}
.chart-svg {
  display: block;
  max-width: 100%;
  overflow: visible;
}
.chart .gl {
  stroke: var(--grid);
  stroke-width: 1;
}
.chart .ax {
  fill: var(--chart-ink);
  font-family: var(--font);
  font-size: 11.5px;
}
.chart .ln, .spark .ln {
  fill: none;
  stroke: var(--sc);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart .ln.dash {
  stroke-width: 1.8;
  stroke-dasharray: 5 5;
}
.chart .gs.a { stop-color: var(--sc); stop-opacity: 0.3; }
.chart .gs.b { stop-color: var(--sc); stop-opacity: 0; }
.chart .pt {
  fill: var(--card);
  stroke: var(--sc);
  stroke-width: 1.6;
}
.chart .hot {
  fill: var(--sc);
  stroke: var(--card);
  stroke-width: 2.5;
}
.chart .guide {
  stroke: var(--line-strong);
  stroke-dasharray: 3 4;
}
.chart .hit.is-click {
  cursor: pointer;
}
.chart-tip {
  position: absolute;
  z-index: 6;
  min-width: 130px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
  direction: rtl;
  text-align: start;
  font-size: 13px;
  pointer-events: none;
}
.chart-tip b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.tip-row strong {
  margin-inline-start: auto;
  padding-inline-start: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc);
}
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 24px 10px;
  color: var(--muted);
  text-align: center;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.cl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cl-sw {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--sc);
}
.cl-sw.dash {
  background: repeating-linear-gradient(90deg, var(--sc) 0 4px, transparent 4px 7px);
}

/* columns */
.cols-wrap {
  position: relative;
  padding-top: 22px;
}
.cols-grid {
  position: absolute;
  inset: 22px 0 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.cols-line {
  position: relative;
  height: 0;
  border-top: 1px solid var(--grid);
}
.cols-tick {
  position: absolute;
  top: -9px;
  inset-inline-start: 0;
  padding-inline-end: 6px;
  background: var(--card);
  color: var(--chart-ink);
  font-size: 11px;
}
.cols-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: calc(var(--ch, 190px) + 28px);
  padding-inline-start: 46px;
}
.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
button.col {
  cursor: pointer;
}
.col-track {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
.col-fill {
  position: relative;
  width: min(72%, 46px);
  min-height: 0;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c2) 80%, var(--c1)));
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.col-fill.is-zero {
  display: none;
}
button.col:hover .col-fill {
  filter: brightness(1.15);
}
.cols-row:has(.col.is-active) .col:not(.is-active) .col-fill {
  opacity: 0.4;
}
.col.is-active .col-lab {
  color: var(--accent-text);
  font-weight: 800;
}
.col-val {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.col-lab {
  height: 28px;
  line-height: 28px;
  color: var(--chart-ink);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

/* ranked rows */
.chart-rows {
  display: grid;
  gap: 2px;
}
.rank-row {
  display: grid;
  grid-template-columns: minmax(84px, 1.2fr) minmax(48px, 2fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
button.rank-row {
  cursor: pointer;
}
button.rank-row:hover {
  background: var(--card-2);
}
.rank-name {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.rank-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
}
.rank-name small {
  color: var(--muted);
  font-size: 12px;
}
.rank-bar {
  height: 10px;
  border-radius: 99px;
  background: var(--card-3);
  overflow: hidden;
}
.rank-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
}
.rank-val {
  min-width: 52px;
  text-align: end;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* donut */
.chart-donut {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.donut-box {
  position: relative;
  width: 176px;
  height: 176px;
}
.donut-bg {
  stroke: var(--card-3);
}
.donut-seg {
  stroke: var(--sc);
  transition: stroke-width 0.16s ease, opacity 0.16s ease;
}
.donut-seg.is-click {
  cursor: pointer;
}
.donut-seg:hover, .donut-seg.is-active {
  stroke-width: 27;
}
.donut-svg:has(.is-active) .donut-seg:not(.is-active) {
  opacity: 0.4;
}
.donut-seg:focus-visible {
  outline: none;
  stroke-width: 28;
}
.donut-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
}
.donut-centre strong {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.donut-centre small {
  color: var(--muted);
  font-size: 12.5px;
}
.legend {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
button.legend-item {
  cursor: pointer;
}
button.legend-item:hover {
  background: var(--card-2);
}
.legend-item.is-active {
  background: var(--accent-soft);
}
.swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sc);
}
.lg-name {
  flex: 1;
  min-width: 0;
}
.legend strong {
  font-variant-numeric: tabular-nums;
}
.legend small {
  min-width: 38px;
  color: var(--muted);
  text-align: end;
}

/* the lines and bars draw in once, when a screen opens */
@media (prefers-reduced-motion: no-preference) {
  .fresh .chart-line .ln:not(.dash) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-line 0.9s ease-out 0.1s forwards;
  }
  .fresh .chart-line .ar {
    animation: fade-in 0.8s ease-out 0.2s both;
  }
  .fresh .col-fill {
    transform-origin: bottom;
    animation: grow-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .fresh .rank-fill {
    transform-origin: right;
    animation: grow-across 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  .fresh .donut-seg {
    animation: fade-in 0.6s ease-out both;
  }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ----- loading ----- */
.skel-kpi { height: 92px; }
.skel-card { height: 280px; }
.skel-card.wide { grid-column: span 2; }
.home-skel { display: grid; gap: 16px; }
@media (max-width: 760px) {
  .skel-card.wide { grid-column: auto; }
}

/* ----- reports centre ----- */
.rfilters {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.rf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}
.rf-row .field {
  margin: 0;
}
.presets {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.presets button {
  flex: 1 0 auto;
}
.f-date { width: 158px; }
.f-driver { width: 200px; }
.f-search { flex: 1; min-width: 200px; }
.presets {
  flex-wrap: wrap;
}
.rep-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}
.rep-note .icon {
  margin-top: 3px;
}
.legacy-head {
  margin-top: 8px;
  display: grid;
  gap: 2px;
}
.legacy-head h2 {
  font-size: 19px;
  font-weight: 800;
}
.legacy-head.data-head {
  margin-top: 14px;
}
.legacy-reports {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.rank-name small.rank-lines span {
  display: block;
}
/* the list of trips is closed until its arrow is pressed: a card with only its head */
.table-card.is-closed {
  gap: 0;
}
.list-toggle {
  white-space: nowrap;
}
.table-card .panel-head {
  margin-bottom: 2px;
}
.table-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.dtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}
.dtable th {
  padding: 10px 12px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}
.dtable th:first-child { border-start-start-radius: 12px; }
.dtable th:last-child { border-start-end-radius: 12px; }
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.th-btn:hover {
  color: var(--ink);
}
.dtable th[aria-sort='ascending'] .th-btn, .dtable th[aria-sort='descending'] .th-btn {
  color: var(--accent-text);
}
.dtable td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.trow {
  cursor: pointer;
}
.trow:hover td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.trow:focus-visible {
  outline-offset: -3px;
}
.c-when b, .c-kind b {
  display: block;
}
.c-when small, .c-kind small {
  color: var(--muted);
  font-size: 12.5px;
}
.c-route {
  max-width: 380px;
}
.route-from {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-to {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}
.c-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
th.c-price .th-btn {
  margin-inline-start: auto;
}
.table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 10px 4px 0;
  color: var(--muted);
}
.table-foot b {
  color: var(--ink);
}
.warn-text {
  color: var(--warn);
  font-weight: 700;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 6px;
}
@media (max-width: 760px) {
  .dtable thead {
    display: none;
  }
  .dtable, .dtable tbody, .dtable tr, .dtable td {
    display: block;
  }
  .dtable tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card-2);
  }
  .dtable td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 0;
    border: 0;
    text-align: end;
  }
  .dtable td::before {
    content: attr(data-label);
    flex: none;
    min-width: 54px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    text-align: start;
  }
  .dtable td > * {
    min-width: 0;
  }
  .c-route {
    max-width: none;
  }
  .trow:hover td {
    background: transparent;
  }
  .f-date, .f-driver {
    width: calc(50% - 6px);
  }
  .f-search {
    flex-basis: 100%;
  }
}

/* ----- drivers ----- */
.drivers-bar {
  align-items: flex-end;
  gap: 12px;
}
.drivers-bar .field {
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.bar-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* five status filters (the office with the right to manage users sees "חסומים" too) do not fit one row on a phone: they wrap, like the user types in the users screen */
@media (max-width: 520px) {
  .drivers-bar .seg {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
  }
  .drivers-bar .seg button {
    flex: 1 1 auto;
  }
}
.sort-sel {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sort-sel .icon {
  position: absolute;
  inset-inline-start: 12px;
  color: var(--muted);
  pointer-events: none;
}
.sort-sel select {
  min-height: 48px;
  padding: 0 14px 0 14px;
  padding-inline-start: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--input);
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 760px) {
  .sort-sel {
    flex: 1 1 100%;
  }
  .sort-sel select {
    width: 100%;
  }
}
.bar-selects select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input);
  color: var(--ink);
}
.drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.drivers-grid > .wide {
  grid-column: 1 / -1;
}
.drivers-grid.is-loading {
  opacity: 0.6;
}
.drv-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.drv-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.drv-card.is-off {
  opacity: 0.88;
}
.drv-card.is-blocked {
  opacity: 0.65;
}
.drv-card.is-paused {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
}
.drv-cancels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--card-2);
  font-size: 13px;
  color: var(--muted);
}
.drv-cancels b {
  color: var(--ink);
}
.drv-cancels.has-some b {
  color: var(--warn);
}
.drv-cancels.is-paused {
  background: var(--bad-soft);
  color: var(--bad);
}
.drv-cancels.is-paused b {
  color: var(--bad);
}
.drv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.drv-id {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.drv-id b {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drv-id small {
  color: var(--muted);
}
.avatar-wrap {
  position: relative;
  flex: none;
}
.avatar-wrap.on::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--card);
}
.drv-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.drv-phone:hover {
  color: var(--accent-text);
}
.drv-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--card-2);
  text-align: center;
}
.drv-stats strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-stats small {
  color: var(--muted);
  font-size: 12px;
}
.mini-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--card-3);
  overflow: hidden;
}
.mini-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
}
.drv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.drv-foot .grow {
  flex: 1;
}
.drv-profile {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-head h2 {
  font-size: 22px;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.profile-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.profile-stats .mc {
  padding: 12px 14px;
}
.profile-stats .mc-num {
  font-size: 22px;
}
.profile-title {
  font-size: 15px;
  font-weight: 800;
}
.profile-trips {
  max-height: 320px;
  overflow-y: auto;
}

/* ----- tooltip-free helpers ----- */
.page-head .grow {
  flex: 1;
}
@media (max-width: 520px) {
  .page-head h1 {
    font-size: 24px;
  }
  .mc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mc {
    gap: 10px;
    padding: 14px;
  }
  .mc .spark {
    display: none;
  }
  .drivers-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================================================
   Customer register: the customers screen, the customer card, and the picker inside the trip form.
   Colours and radii come only from the theme tokens at the top of this file, so both themes follow.
   ===================================================================================================== */

.customers-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.customers-screen .skel-list {
  padding: 0;
}
.customers-screen .toolbar {
  gap: 12px 16px;
}
.customers-screen .f-search {
  flex: 1 1 260px;
  min-width: 0;
}
.customers-screen .f-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.customers-screen .f-search {
  position: relative;
}
.empty-register {
  display: grid;
  justify-items: center;
  padding: 56px 20px;
}
.empty-register .who-line {
  max-width: 28em;
  line-height: 1.5;
}
.empty-register .btn {
  margin-top: 8px;
}

/* the list */
.cust-list {
  display: grid;
  gap: 12px;
}
.cust-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 22px;
  padding: 16px 20px;
}
.cust-item.is-off, .cust-head.is-off {
  background: var(--card-2);
}
.cust-item.is-off .ci-title b {
  color: var(--muted);
}
.ci-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.ci-title b {
  font-size: 18px;
  font-weight: 800;
}
.ci-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ci-phone {
  direction: ltr;
  unicode-bidi: isolate;
}
.ci-stats {
  display: flex;
  gap: 22px;
}
.ci-stats > div {
  display: grid;
  justify-items: center;
  min-width: 64px;
}
.ci-stats b {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ci-stats small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.ci-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* a customer's card */
.cust-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px 20px;
}
.ch-main {
  flex: 1 1 280px;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.ch-main h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ch-lines {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 15px;
}
.ch-lines > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-wrap: anywhere;
}
.ch-lines .icon {
  flex: none;
  margin-top: 3px;
  color: var(--muted);
}
.ch-lines a {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--accent-text);
  font-weight: 650;
}
.ch-notes {
  color: var(--muted);
}
.ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tabs-seg {
  display: flex;
  width: 100%;
}
.tabs-seg button {
  flex: 1;
}
.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.panel-head h2 {
  font-size: 19px;
  font-weight: 800;
}
.emp-panel, .customers-screen section.card-pad {
  display: grid;
  gap: 14px;
}
.emp-bar {
  gap: 10px 14px;
}
.emp-bar .f-search {
  flex: 1 1 220px;
}
.emp-bar select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input);
  color: var(--ink);
}
.emp-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.emp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}
.emp-row.is-off {
  opacity: 0.75;
  border-style: dashed;
}
.emp-row.empty {
  display: block;
  grid-template-columns: none;
  border: 0;
  background: transparent;
}
.er-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 16.5px;
}
.er-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.er-sub a {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--accent-text);
  font-weight: 650;
}
.er-notes {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.er-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-soft-danger {
  color: var(--bad);
}
.modal-body .series-note {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
}
.modal-body .series-note[hidden] {
  display: none;
}

/* the picker inside the trip form */
.fgroup.register {
  gap: 14px;
}
.reg-source {
  width: fit-content;
}
.reg-note a {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: underline;
}
.reg-step {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-radius: 14px;
}
.reg-step.miss {
  outline: 2px solid var(--warn);
  outline-offset: 4px;
}
.reg-step.miss .field > span::after, .reg-step.miss .field-label::after {
  content: ' · חסר';
  color: var(--warn);
}
.reg-chosen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 14px;
  background: var(--accent-soft);
}
.reg-chosen > div:first-child {
  flex: 1;
  min-width: 0;
  display: grid;
}
.reg-chosen small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.reg-chosen b {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.reg-chosen .sub {
  color: var(--muted);
  font-size: 14px;
}
.reg-chosen.compact {
  padding: 9px 14px;
}
.cust-pick-list, .branch-pick, .mode-pick {
  display: grid;
  gap: 8px;
}
.cust-pick-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}
.branch-pick, .mode-pick {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cust-pick, .mode-opt {
  display: grid;
  gap: 2px;
  justify-items: start;
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.cust-pick small, .mode-opt small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.cust-pick:hover, .mode-opt:hover, .emp-pick:hover {
  border-color: var(--accent);
}
.cust-pick[aria-pressed='true'], .mode-opt[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pick-empty {
  padding: 12px 4px;
  font-size: 14px;
}
.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.field-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.pick-counter {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.emp-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
}
.emp-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.emp-pick.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.emp-pick.full {
  opacity: 0.5;
  cursor: not-allowed;
}
.ep-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}
.emp-pick.on .ep-mark {
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.ep-text {
  min-width: 0;
  display: grid;
}
.ep-text b {
  font-size: 15.5px;
  overflow-wrap: anywhere;
}
.ep-text small {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* the order of the ride, as the driver will get it */
.reg-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.reg-preview:empty {
  display: none;
}
.rp-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.pick-order {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.po-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.po-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 14px;
}
.po-main {
  min-width: 0;
}
.po-main b {
  overflow-wrap: anywhere;
}
.po-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  color: var(--muted);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.po-sub span[dir='ltr'] {
  unicode-bidi: isolate;
}
.po-tools {
  display: flex;
  gap: 2px;
}
.po-tools .icon-btn {
  width: 36px;
  height: 36px;
}
.rp-row {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-inline-start: 2px;
}
.rp-row i {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  border: 3px solid var(--accent-2);
  background: var(--card);
}
.rp-row.to i {
  border-radius: 3px;
  border-color: var(--accent);
  background: var(--accent);
}
.rp-row small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.rp-addr {
  font-weight: 650;
  overflow-wrap: anywhere;
}
.fgroup.register.locked {
  background: var(--card-2);
}

/* the board: a trip with several pickups */
.route-mini {
  display: grid;
  gap: 8px;
}
.route-mini .rm {
  margin-top: 0;
}
.route-mini .sub {
  display: block;
}
.rm-n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-inline-end: 6px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
}
.route-mini .rm.from i {
  border-color: var(--accent-2);
}

/* the driver's screens */
.who-sub {
  margin-top: -4px;
}
.customer-head {
  display: grid;
  gap: 2px;
}
.customer-head b {
  font-size: 21px;
}
.customer-head .sub {
  color: var(--muted);
  font-weight: 650;
}
.pickup-panel .contact-row {
  align-items: flex-start;
}
.pickup-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 17px;
}

@media (max-width: 720px) {
  .cust-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cust-item .ci-stats {
    grid-column: 1;
    grid-row: 2;
  }
  .cust-item .ci-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: stretch;
  }
  .emp-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .emp-row .er-branch {
    grid-column: 1;
    grid-row: 2;
  }
  .emp-row .er-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .po-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .po-tools {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .ch-actions {
    width: 100%;
  }
  .ch-actions .btn {
    flex: 1;
  }
}
@media (max-width: 520px) {
  .ch-main h1 {
    font-size: 22px;
  }
  .cust-item, .emp-row {
    padding: 12px;
  }
}

/* the phone of an employees trip (the first employee's), under the order of the ride */
.trip-phone { display: block; margin-top: 8px; }

/* ---------- trip cards: the open trip with its "take" square, and the compact cards of phones ---------- */

/* An open trip of the driver: the details on one side, a small square on the left to take it. Only the square takes the trip. */
.trip-card.offer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.trip-card.offer .oc-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.take-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.take-btn:active {
  transform: scale(0.95);
}
.take-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.take-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* an address that is missing in the data says so */
.stop .addr.miss {
  color: var(--bad);
  font-weight: 700;
  font-size: 14px;
}

/* the edit button says what it is where the board is a list of cards */
.icon-btn .lbl {
  display: none;
}
@media (max-width: 1279px) {
  table.trips td.c-act .icon-btn[aria-label='עריכה'] {
    width: auto;
    gap: 4px;
    grid-auto-flow: column;
    padding: 0 12px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
    font-size: 14px;
  }
  table.trips td.c-act .icon-btn .lbl {
    display: inline;
  }
  table.trips td.c-time {
    padding-inline-end: 150px;
  }
}

/* the buttons at the end of a drop-off row: earlier, later, remove */
.stop-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.stop-tools .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* the short price line of a phone card (not shown elsewhere) */
.price-sum {
  display: none;
}

/* phones only: lower cards, so more trips fit in one screen. Wider screens keep their layout. */
@media (max-width: 640px) {
  .driver-main {
    padding: 10px 10px calc(112px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .day-head {
    padding: 4px 2px 0;
    font-size: 13px;
  }
  .trip-card {
    gap: 5px;
    padding: 9px 12px;
    border-radius: 14px;
  }
  .trip-card.offer {
    gap: 10px;
    padding: 8px 10px 8px 8px;
  }
  .trip-card.offer .oc-main {
    gap: 5px;
  }
  .trip-card.offer .card-top .pill {
    display: none;
  }
  .trip-card .card-top {
    gap: 4px 8px;
  }
  .trip-card .time-chip {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 17px;
  }
  .trip-card .price {
    font-size: 16px;
  }
  .trip-card .who-line {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.25;
  }
  .trip-card .who-sub {
    display: none;
  }
  /* an open trip: the time, the customer and the price share the first line */
  .trip-card.offer .card-top {
    display: contents;
  }
  .trip-card.offer .card-top .grow {
    display: none;
  }
  .trip-card.offer .oc-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
  }
  .trip-card.offer .time-chip { grid-row: 1; grid-column: 1; }
  .trip-card.offer .who-line { grid-row: 1; grid-column: 2; min-width: 0; }
  .trip-card.offer .price { grid-row: 1; grid-column: 3; }
  .trip-card.offer .route { grid-row: 2; grid-column: 1 / -1; }
  .trip-card .route {
    gap: 4px;
  }
  .trip-card .stop {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
  }
  .trip-card .stop .dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-width: 2.5px;
  }
  .trip-card .stop:not(:last-child)::after {
    inset-inline-start: 5px;
    top: 17px;
    bottom: -5px;
  }
  /* the label and the address share a line: "איסוף 2 מתוך 3  הרצל 10, תל אביב" */
  .trip-card .stop small,
  .trip-card .stop .addr {
    display: inline;
  }
  .trip-card .stop small {
    margin-inline-end: 6px;
    font-size: 11.5px;
  }
  .trip-card .stop .addr {
    font-size: 15px;
    line-height: 1.3;
  }
  .trip-card .stop-who {
    font-size: 13px;
  }
  .take-btn {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 12px;
  }

  /* the board of the owner and the dispatchers: a grid of five short rows (time and buttons; who; route; who ordered; driver and prices) */
  table.trips tbody {
    gap: 8px;
  }
  table.trips tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 11px 9px;
    border-radius: 14px;
    border-inline-start-width: 4px;
    cursor: pointer;
  }
  table.trips tr.day-sep {
    display: block;
    padding: 4px 2px 0;
    cursor: default;
  }
  table.trips td.c-time { grid-row: 1; grid-column: 1; order: 0; min-height: 0; padding-inline-end: 0; }
  table.trips td.c-act { grid-row: 1; grid-column: 2; order: 0; position: static; justify-self: end; display: flex; }
  table.trips td.c-contact { grid-row: 2; grid-column: 1 / -1; order: 0; }
  table.trips td.c-route { grid-row: 3; grid-column: 1 / -1; order: 0; }
  table.trips td.c-sens { grid-row: 4; grid-column: 1; order: 0; }
  table.trips td.c-prices { grid-row: 4; grid-column: 2; order: 0; }
  table.trips td.c-driver { grid-row: 5; grid-column: 1 / -1; order: 0; }
  table.trips td.c-time .time {
    font-size: 17px;
  }
  .ct {
    gap: 4px 8px;
  }
  .ct .pill {
    min-height: 22px;
    padding: 0 9px;
    font-size: 12px;
  }
  table.trips td.c-act .icon-btn {
    height: 34px;
    min-width: 34px;
  }
  table.trips td.c-act .icon-btn[aria-label='עריכה'] {
    padding: 0 10px;
    font-size: 13px;
  }
  table.trips td.c-contact {
    gap: 0 8px;
    font-size: 13px;
  }
  table.trips td.c-contact b {
    font-size: 14px;
  }
  table.trips td.c-contact .chip {
    min-height: 20px;
    padding: 0 7px;
    font-size: 11.5px;
  }
  table.trips td.c-contact .sub {
    font-size: 12.5px;
  }
  .rm {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
    line-height: 1.3;
    font-size: 15px;
  }
  .rm + .rm {
    margin-top: 3px;
  }
  .rm i {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-width: 2.5px;
  }
  .rm:not(:last-child)::after {
    inset-inline-start: 5px;
    top: 17px;
    bottom: -5px;
  }
  .route-mini {
    gap: 3px;
  }
  /* the name, or the kind of stop, follows the address on the same line */
  .route-mini .sub {
    display: inline;
    margin-inline-start: 6px;
    font-size: 12.5px;
  }
  .rm-n {
    min-width: 17px;
    height: 17px;
    margin-inline-end: 4px;
    font-size: 11px;
  }
  /* who ordered: one line, no heading */
  table.trips td[data-label].c-sens::before {
    display: none !important;
  }
  table.trips td.c-sens {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.trips td.c-sens > div {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.trips td.c-sens .sub {
    font-size: 12.5px;
  }
  /* the prices are typed in the details screen; the card only tells them */
  .pbox {
    display: none;
  }
  .price-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    justify-content: flex-end;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--muted);
    white-space: nowrap;
  }
  .price-sum b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  table.trips td.c-driver .driver-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .driver-sel {
    min-height: 32px;
    flex: 1 1 120px;
    padding: 2px 8px;
    font-size: 14px;
  }
  .btn.resend {
    min-height: 32px;
  }
  table.trips td.c-driver .driver-cell small.muted {
    display: none;
  }
  /* ... except the one line that names the clerk of the trip and the driver she recorded (only on trips that have one) */
  table.trips td.c-driver .driver-cell small.clerk-note {
    display: block;
    flex: 1 1 100%;
    margin: 0;
  }
  /* the name of a passenger beside the address in the driver's own cards */
  .trip-card .stop-who:not(.who-sub) {
    display: inline-block;
    margin-inline-start: 6px;
    white-space: nowrap;
  }
}

/* editing the employees of a trip that was opened from the register */
.po-row.editable {
  align-items: start;
}
.po-row.editable .po-n {
  margin-top: 2px;
}
.po-addr {
  margin-top: 6px;
}
.po-addr input:not([type='checkbox']) {
  min-height: 40px;
  padding: 6px 10px;
}
.po-addr.miss input {
  border-color: var(--bad);
}
.reg-add {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.reg-add .emp-pick-grid {
  width: 100%;
}

/* ---------- office clerk (סדרנית משרד) ----------
   One screen: her own trips. It reuses the trip card of the driver app and the top bar of the office, and adds only what is its own. */
.clerk-shell {
  min-height: 100dvh;
}
.clerk-main {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 16px 14px calc(40px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.clerk-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.clerk-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.clerk-filters .grow {
  flex: 1;
}
.clerk-filters select,
.clerk-custom input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input);
  color: var(--ink);
}
.clerk-custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.clerk-custom input {
  width: 100%;
  min-width: 0;
}
.clerk-search {
  position: relative;
  display: flex;
  align-items: center;
}
.clerk-search .icon {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--muted);
  pointer-events: none;
}
.clerk-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  padding-inline-start: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--input);
  color: var(--ink);
}
.clerk-search input:focus {
  border-color: var(--accent);
}
.clerk-list {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
.clerk-card {
  font: inherit;
  color: inherit;
}
.clerk-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.clerk-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clerk-marks .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clerk-detail {
  gap: 14px;
}
.clerk-detail .fgroup {
  gap: 10px;
}
.clerk-info {
  display: grid;
  gap: 2px;
}
.clerk-info small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.clerk-people {
  display: grid;
  gap: 8px;
}
.clerk-person {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.clerk-person .grow {
  min-width: 0;
}
.clerk-detail .fgroup.assign {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

/* what the office sees about the clerk on a trip: who is responsible, and who did the trip */
.clerk-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}
.readonly-val {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--card-2);
  font-weight: 650;
}
.clerk-trips .lr-text small {
  white-space: normal;
}

@media (max-width: 640px) {
  .clerk-main {
    padding: 10px 10px calc(28px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .clerk-tools {
    padding: 10px;
    gap: 8px;
  }
  .clerk-list {
    gap: 8px;
  }
  /* one row for the period, the time of the last update and refresh; the state filter below it, full width */
  .clerk-filters select {
    order: 1;
    flex: 1 1 auto;
  }
  .clerk-filters .grow {
    display: none;
  }
  .clerk-filters .muted {
    order: 2;
    font-size: 13px;
  }
  .clerk-filters .icon-btn {
    order: 3;
  }
  .clerk-filters .seg {
    order: 4;
    width: 100%;
    display: flex;
  }
  .clerk-filters .seg button {
    flex: 1 1 0;
    padding: 0 8px;
  }
  .clerk-main .page-head h1 {
    font-size: 22px;
  }
  .clerk-marks .chip {
    font-size: 12px;
  }
}

/* ---------- notifications for office clerks ----------
   The clerk's side: the bell (the same one the office has), the list, and the line about the phone's permission.
   The office's side: the dialog that sends one, and the screen of what was sent. An unread notification is marked three ways (a bar, the word "חדש", a stronger border),
   so no state depends on colour alone. */
.clerk-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.clerk-push:not(:empty) {
  display: grid;
}
.notices-tools {
  padding: 10px 12px;
}
.notices-list,
.notice-rows {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
.notice {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--line-strong);
  border-radius: 18px;
  background: var(--card);
}
.notice.is-unread {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.notice-open {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.notice-open:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
}
.notice-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notice-title {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
}
.notice-body {
  white-space: pre-line;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.notice-trip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-2);
}
.notice-trip .grow {
  min-width: 0;
}
.notice-trip .muted {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.notice-trip.gone {
  color: var(--muted);
  font-weight: 650;
}
.notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 13px;
}
.notice-mark {
  justify-self: start;
}
.notice-push {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
}
.notice-push .grow {
  flex: 1;
  min-width: 0;
}
.notice-push small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.notice-push.on {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: transparent;
}
.notice-push.on small {
  color: inherit;
}
.notice-push.off {
  background: var(--accent-soft);
  border-color: transparent;
}

/* the office: sending */
.notice-picks {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 4px 2px;
}
.notice-pick,
.notice-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}
.notice-pick input,
.notice-attach input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}
.notice-attach small {
  display: block;
  font-weight: 500;
}
.notice-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.notice-examples-wrap {
  display: grid;
  gap: 6px;
}
.notice-left {
  text-align: end;
}
.notice-result {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--warn-soft);
  color: var(--ink);
}
.notice-result.ok {
  background: var(--ok-soft);
}
.notice-result .icon {
  flex: none;
  margin-top: 2px;
}
.notice-result p + p {
  margin-top: 4px;
}
.notice-results {
  display: grid;
  gap: 6px;
}
.notice-res {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.notice-res small {
  flex-basis: 100%;
}

/* the office: what was sent */
.notice-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.notice-help .icon {
  flex: none;
  margin-top: 3px;
  color: var(--accent-text);
}
.notice-help p {
  margin: 0;
}
.notice-help p + p {
  margin-top: 4px;
  font-size: 13.5px;
}
.notices-admin {
  display: grid;
  gap: 14px;
  align-content: start;
}
.notice-row {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}
.notice-row-top,
.notice-row-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.notice-row-top .grow {
  flex: 1;
}
.notice-detail {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.chip .icon {
  flex: none;
}
@media (min-width: 900px) {
  .notice-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* notices to drivers: the dialog, and the history grouped by send */
.notice-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.notice-preview {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--card);
}
.notice-preview .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent-text);
}
.notice-preview-body {
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chip.audience-drivers {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.chip.audience-clerks {
  background: var(--idle-soft);
  color: var(--ink);
}
.seg-count {
  margin-inline-start: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--idle-soft);
  font-size: 12px;
  font-weight: 700;
}
.seg button[aria-pressed='true'] .seg-count {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.notice-recipients summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-text);
}
.notice-recipient-list {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}
.notice-recipient {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* the driver's notifications tab */
.notes-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notes-head h2 {
  margin: 0;
  font-size: 20px;
}
.note-push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--ink);
}
.note-push .grow {
  flex: 1 1 180px;
  min-width: 0;
}
.note-push small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.note-push.on {
  padding: 2px 4px;
  background: transparent;
  color: var(--muted);
}
.note-push.on .icon {
  color: var(--ok);
}
.note-card {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
}
.note-card.unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--card));
}
.note-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.note-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: transparent;
}
.note-card.unread .note-dot {
  background: var(--bad-solid);
}
.note-text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.note-title {
  font-size: 16px;
}
.note-card:not(.unread) .note-title {
  font-weight: 600;
}
.note-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.note-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  gap: 4px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}
.note-read {
  justify-self: start;
  margin: 0 16px 12px;
}
.notices-admin .notice-rows {
  align-items: start;
}

/* ---------- profile pictures (public/avatar.js) ---------- */
/* the picture lies over the first letter: while it loads, or if it fails, the letter is what is seen */
.avatar {
  position: relative;
  overflow: hidden;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: var(--card-2);
}
.avatar-img.ready {
  opacity: 1;
}
.avatar.photo-big {
  width: 96px;
  height: 96px;
  font-size: 38px;
}
.photo-dialog {
  --pad: 22px;
}
.photo-now {
  display: flex;
  align-items: center;
  gap: 16px;
}
.photo-now b {
  display: block;
  font-size: 18px;
}
.photo-dialog p {
  margin: 0;
}
.photo-status:empty {
  display: none;
}
.crop-wrap {
  width: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-strong);
}
.crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.crop-canvas.dragging {
  cursor: grabbing;
}
.crop-canvas:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.crop-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  margin-inline: auto;
}
.crop-controls input[type='range'] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  height: 32px;
}
.crop-previews {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  margin-inline: auto;
}
.crop-preview {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.crop-preview.sm {
  width: 40px;
  height: 40px;
}
.photo-again {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.photo-dialog .modal-actions.sticky {
  justify-content: flex-start;
}

/* ---------- the users screen: search, filters, a table on a wide screen and cards on a narrow one ---------- */
.users-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 4px 0 8px;
}
.users-searchbox {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
}
.users-searchbox > svg,
.users-searchbox > .icon {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--muted);
  pointer-events: none;
}
.users-search {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  padding-inline-start: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.users-search:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}
.users-tools .seg {
  flex: 1 1 auto;
}
.seg .seg-n {
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--idle-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.seg button[aria-pressed='true'] .seg-n {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.users-selects {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px;
  gap: 10px;
}
.users-field {
  min-width: 0;
}
.users-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  margin: -6px 2px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.users-box {
  container-type: inline-size;
  transition: opacity 0.15s ease;
}
.users-box.loading .table-wrap {
  opacity: 0.55;
}
.users-empty {
  padding: 40px 16px;
}

table.utbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.utbl th {
  padding: 11px 14px;
  text-align: start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.utbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.utbl tbody tr:last-child td {
  border-bottom: 0;
}
.utbl tbody tr:hover td {
  background: color-mix(in srgb, var(--card-2) 75%, transparent);
}
.u-act-h {
  text-align: end;
}
.u-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}
.u-who {
  display: grid;
  min-width: 0;
}
/* the role under the name: only in the card (a table has a column for it) */
.u-sub {
  display: none;
  font-size: 13px;
}
.u-name-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.u-name-btn:hover {
  color: var(--accent-text);
  text-decoration: underline;
}
.utbl .avatar {
  background: var(--idle-soft);
  color: var(--ink);
}
.utbl .avatar.owner {
  background: var(--accent);
  color: var(--accent-ink);
}
.utbl tr.is-blocked .avatar {
  filter: grayscale(1);
  opacity: 0.7;
}
.utbl tr.is-blocked .u-name-btn {
  color: var(--muted);
}
.u-phone span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.u-role,
.u-joined {
  white-space: nowrap;
}
.u-joined {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.u-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.u-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.u-act {
  white-space: nowrap;
}

/* on a narrower table: no join date, and under that, one card per user */
@container (max-width: 1040px) {
  .utbl th:nth-child(5),
  .utbl td.u-joined {
    display: none;
  }
}
@container (max-width: 820px) {
  .utbl,
  .utbl tbody {
    display: block;
  }
  .utbl thead {
    display: none;
  }
  .utbl tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'name name'
      'phone joined'
      'status status'
      'act act';
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .utbl tbody tr:last-child {
    border-bottom: 0;
  }
  .utbl tbody tr:hover td {
    background: none;
  }
  .utbl td,
  .utbl tbody tr:last-child td {
    padding: 0;
    border: 0;
  }
  .utbl td.u-joined {
    display: block;
    grid-area: joined;
    justify-self: end;
    font-size: 13px;
  }
  .utbl td.u-name {
    grid-area: name;
  }
  .u-id {
    min-width: 0;
  }
  .u-sub {
    display: block;
  }
  .u-name-btn {
    min-height: 38px;
    padding: 8px 0 0;
    font-size: 16px;
  }
  .u-phone {
    grid-area: phone;
  }
  .u-role {
    display: none;
  }
  .u-status {
    grid-area: status;
  }
  .u-act {
    grid-area: act;
    padding-top: 2px;
  }
  .u-actions {
    justify-content: flex-start;
  }
  .u-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 42px;
  }
  .u-actions .icon-btn {
    flex: none;
  }
}
@supports not (container-type: inline-size) {
  .users-box .table-wrap {
    overflow-x: auto;
  }
}
.users-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0 6px;
}
.users-pager .btn {
  min-width: 96px;
  min-height: 44px;
  justify-content: center;
}
.users-page {
  min-width: 110px;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* a menu next to a button: placed over the page, never cut off by a table */
.pop-menu {
  position: fixed;
  z-index: 3000;
  display: grid;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.pop-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}
.pop-menu button:hover,
.pop-menu button:focus-visible {
  background: var(--card-2);
  outline: none;
}
.pop-menu button.danger {
  color: var(--bad);
}

/* the profile of a user */
.user-profile .profile-head h2 {
  overflow-wrap: anywhere;
}
.profile-list {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-2);
}
.profile-list dt {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
}
.profile-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}
.profile-actions .btn {
  flex: 0 1 auto;
}
@media (max-width: 520px) {
  .profile-actions .btn {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }
  .users-pager .btn {
    min-width: 0;
    flex: 1;
  }
  .users-page {
    min-width: 0;
    flex: none;
  }
}

/* the driver's own profile */
.me-profile {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.me-profile h2 {
  margin: 6px 0 0;
}
.me-photo-btn {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.me-photo-btn .cam {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--card);
}
/* the corner badge of the driver's app: the company mark, or the driver's own picture; it opens his profile */
button.brand-badge.me-badge {
  padding: 0;
  border: 0;
  cursor: pointer;
}
.me-badge.has-photo {
  border-radius: 50%;
}
.me-badge .avatar {
  width: 100%;
  height: 100%;
  font-size: 18px;
}

.zoom-btn {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
@media (max-width: 560px) {
  .photo-dialog .modal-actions.sticky {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .photo-dialog .modal-actions.sticky > .btn-primary {
    grid-column: 1 / -1;
  }
  .photo-dialog .photo-again {
    display: contents;
  }
  .photo-dialog .modal-actions.sticky .btn {
    justify-content: center;
  }
  .photo-dialog .modal-actions.sticky > .btn-ghost {
    grid-column: 1 / -1;
  }
}

/* ----- manager home: the day in one look, what needs the office, today by hour ----- */
.skel-hero {
  height: 172px;
  border-radius: 24px;
}
.hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hl {
  --c: var(--idle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--dark-3);
  border-radius: 99px;
  background: transparent;
  color: var(--on-dark);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.hl:hover:not(:disabled) {
  background: var(--dark-2);
}
.hl:focus-visible {
  outline: 3px solid var(--on-dark-accent);
  outline-offset: 2px;
}
.hl:disabled {
  cursor: default;
  opacity: 0.6;
}
.hl b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.hl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.hl-open { --c: var(--bad-solid); }
.hl-assigned { --c: #60a5fa; }
.hl-running { --c: #a78bfa; }
.hl-done { --c: #2dd4bf; }
.hl-cancelled { --c: var(--on-dark-muted); }

.att-card.is-clear .panel-ico {
  background: var(--ok-soft);
  color: var(--ok);
}
.att-card.has-items {
  border-color: var(--bad);
}
.att-clear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 6px;
  color: var(--ok);
}
.att-clear div {
  display: grid;
  line-height: 1.3;
}
.att-clear b {
  color: var(--ink);
  font-size: 15px;
}
.att-clear small {
  color: var(--muted);
  font-size: 13px;
}
.att-row .lr-text b {
  white-space: normal;
}
.att-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
.att-act {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
}
.panel-more.as-btn {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.panel-more.as-btn:hover {
  text-decoration: underline;
}

.sched .time-chip {
  justify-content: center;
  min-width: 64px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 15px;
}
.sched-row.is-nodriver .time-chip {
  background: var(--bad-soft);
  color: var(--bad);
}
.sched-row.is-late .time-chip {
  background: var(--warn-soft);
  color: var(--warn);
}
.sched-row.is-nodriver .lr-text small {
  color: var(--bad);
  font-weight: 700;
}
.now-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 8px;
}
.now-line span {
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
}
.now-line::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.55;
}
@media (max-width: 520px) {
  .att-end {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .hl {
    min-height: 40px;
  }
  .sched .time-chip {
    min-width: 56px;
  }
}
.att-row .lr-text small {
  white-space: normal;
}
@media (max-width: 520px) {
  .hero-legend {
    gap: 6px;
  }
  .hl {
    gap: 6px;
    padding: 0 10px;
    font-size: 13px;
  }
}