/* ============================================================================
 *  _shared/mobile-ui.css — mobile-app shell components for the driver/rep
 *  surfaces under /m/. Bottom-tab nav, large touch targets, sticky action
 *  bars. Imported on every /m/* page; not used on desktop screens.
 * ========================================================================== */

:root {
  --m-bottom-nav-h: 66px;
  --m-touch-min: 48px;            /* exceeds WCAG 2.5.5 (44x44) */
  --m-pad: 18px;                  /* edge gutter — looser so content isn't jammed against the screen */
  --m-gap: 14px;                  /* vertical rhythm between stacked cards / inputs */
  /* Dimensional surfaces — gradient + soft depth so mobile reads raised, not flat.
     Falls back to flat surface tokens on browsers without color-mix support. */
  --m-surface-grad:  linear-gradient(180deg,
                       color-mix(in srgb, var(--surface) 92%, #fff) 0%,
                       var(--surface) 52%,
                       color-mix(in srgb, var(--surface) 94%, #000) 100%);
  --m-surface-2-grad: linear-gradient(180deg,
                       color-mix(in srgb, var(--surface-2) 94%, #fff) 0%,
                       var(--surface-2) 60%);
  /* Reuse the shared elevation tokens (desktop premium uplift) so distribution
     and supplier mobile read at the same depth; provide a safe local fallback. */
  --m-shadow:        var(--shadow-card, 0 1px 2px rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.5));
  --m-shadow-raised: var(--shadow-md, 0 12px 28px -10px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.4));
  --m-radius:        var(--radius-card, 16px);
  --m-radius-sm:     var(--radius-3, 12px);
}

/* Body: clamp viewport, prevent rubber-band over-scroll on iOS */
.m-app {
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;             /* respects dynamic viewport on iOS */
  padding-bottom: calc(var(--m-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
.m-shell {
  max-width: 540px;
  margin: 0 auto;
  /* Looser top + edge gutter so content isn't jammed against the screen. */
  padding: calc(var(--m-pad) + 2px) var(--m-pad) var(--m-pad);
}
/* Intro/lede paragraphs sitting directly in the shell get air below them so the
   first card doesn't crowd the heading text. */
.m-shell > p { margin: 0 0 var(--m-gap); }

/* Top bar — sticky, slim */
.m-top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--surface);
  background-image: var(--m-surface-grad);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 14px -10px rgba(0,0,0,.6);
  padding: 12px var(--m-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  z-index: 10;
}
.m-top h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.m-top .meta { font-size: 12px; color: var(--text-muted); }

/* Big cards — dimensional: subtle top-lit gradient + soft shadow + clear radius. */
.m-card {
  background: var(--surface);
  background-image: var(--m-surface-grad);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 16px 18px;
  margin-bottom: var(--m-gap);
  display: flex; flex-direction: column; gap: 10px;
}
.m-card-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.m-card-t { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.m-card-sub { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* Stop card with status accent stripe — dimensional to match .m-card */
.m-stop {
  position: relative;
  background: var(--surface);
  background-image: var(--m-surface-grad);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 16px 18px;
  margin-bottom: var(--m-gap);
}
.m-stop[data-state="pending"] { border-left-color: var(--text-muted); }
/* Tinted states keep a soft top-lit gradient (background-image) so they stay
   dimensional rather than flattening to a single fill. */
.m-stop[data-state="current"] {
  border-left-color: var(--brand);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), color-mix(in srgb, var(--brand) 5%, var(--surface)));
}
.m-stop[data-state="approaching"] {
  border-left-color: #d97706;
  background-image: linear-gradient(180deg, color-mix(in srgb, #d97706 12%, var(--surface)), color-mix(in srgb, #d97706 5%, var(--surface)));
}
.m-stop[data-state="arrived"] {
  border-left-color: var(--success);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--success) 12%, var(--surface)), color-mix(in srgb, var(--success) 5%, var(--surface)));
}
.m-stop[data-state="done"] { border-left-color: var(--success); opacity: 0.7; }
.m-stop[data-state="failed"] {
  border-left-color: #dc2626;
  background-image: linear-gradient(180deg, color-mix(in srgb, #dc2626 9%, var(--surface)), color-mix(in srgb, #dc2626 4%, var(--surface)));
}

.m-stop-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.m-stop-h .m-stop-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 85%, #fff), var(--brand));
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.m-stop-name { font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.m-stop-addr { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.m-stop-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.m-stop-meta strong { color: var(--text); font-weight: 700; }
.m-stop-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Buttons — dimensional pills: subtle top-lit gradient, soft shadow, clear
   radius and a comfortable 14px label so taps land easily and read as raised. */
.m-btn {
  min-height: var(--m-touch-min);
  border-radius: var(--m-radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  background-image: var(--m-surface-2-grad);
  box-shadow: var(--m-shadow);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.m-btn:active { transform: translateY(1px) scale(0.99); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.35)); }
.m-btn--primary {
  color: #fff; border-color: var(--brand);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand));
  box-shadow: var(--m-shadow-raised);
}
.m-btn--success {
  color: #fff; border-color: var(--success);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--success) 86%, #fff), var(--success));
  box-shadow: var(--m-shadow-raised);
}
.m-btn--danger {
  color: #fff; border-color: #dc2626;
  background-image: linear-gradient(180deg, #e25b5b, #dc2626);
  box-shadow: var(--m-shadow-raised);
}
.m-btn--ghost {
  background: transparent;
  background-image: none;
  box-shadow: none;
}
.m-btn--primary:active, .m-btn--success:active, .m-btn--danger:active { filter: brightness(0.96); }

/* Bottom tab nav */
.m-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  background-image: var(--m-surface-grad);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px -10px rgba(0,0,0,.6);   /* lift the bar off the content */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: var(--m-bottom-nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 20;
}
.m-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 11px;                /* lifted off 10px — comfortable, still compact */
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.m-nav a[aria-current="page"] { color: var(--brand); }
.m-nav a[aria-current="page"] svg { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--brand) 50%, transparent)); }
.m-nav a svg { width: 23px; height: 23px; }

/* Sticky action bar (above bottom nav) */
.m-actionbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--m-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  background-image: var(--m-surface-grad);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px -12px rgba(0,0,0,.55);
  padding: 12px var(--m-pad);
  display: flex; gap: 12px;
  z-index: 15;
}

/* Position pill — used on the live map */
.m-pos-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2);
  background-image: var(--m-surface-2-grad);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 1px 2px rgba(0,0,0,.25);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.m-pos-pill[data-fresh="true"] { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.m-pos-pill[data-fresh="stale"] { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; }

/* GPS status bar */
.m-gps {
  background: var(--surface-2);
  background-image: var(--m-surface-2-grad);
  border: 1px solid var(--border);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow);
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 13px;
  margin-bottom: var(--m-gap);
}
.m-gps strong { font-variant-numeric: tabular-nums; }

/* GPS permission banner — shown when location is "prompt" or "denied".
   Sits above the map so the driver can't miss it. Full-width, big touch target,
   color-coded by state. */
.m-gps-banner {
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--brand) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  border-radius: var(--m-radius);
  padding: 16px 18px;
  margin-bottom: var(--m-gap);
  box-shadow: var(--m-shadow);
}
.m-gps-banner[hidden] { display: none !important; }
.m-gps-banner-icon {
  flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.m-gps-banner-icon svg { width: 22px; height: 22px; }
.m-gps-banner-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.m-gps-banner-text strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--text); }
.m-gps-banner-text small { color: var(--text-muted); font-size: 12px; }
.m-gps-banner button {
  flex: 0 0 auto;
  min-height: var(--m-touch-min, 48px);
  padding: 0 18px;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
/* Denied / blocked state — red accent + Settings hint */
.m-gps-banner--denied {
  background: color-mix(in srgb, #dc2626 6%, var(--surface));
  border-color: color-mix(in srgb, #dc2626 30%, var(--border));
}
.m-gps-banner--denied .m-gps-banner-icon {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  color: #dc2626;
}
/* Waiting-for-first-fix state — neutral, with spinner */
.m-gps-banner--waiting {
  background: color-mix(in srgb, #d97706 6%, var(--surface));
  border-color: color-mix(in srgb, #d97706 24%, var(--border));
}
.m-gps-banner--waiting .m-gps-banner-icon {
  background: color-mix(in srgb, #d97706 18%, transparent);
  color: #b45309;
}
.m-gps-banner-spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: m-gps-spin 0.9s linear infinite;
  vertical-align: -3px; margin-right: 6px;
}
@keyframes m-gps-spin { to { transform: rotate(360deg); } }

/* Map container — used for both the wireframe SVG fallback AND the Leaflet map.
   When Leaflet renders inside it, the tiles fill the container exactly. */
.m-mapwrap {
  background: #e7eef3;
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  overflow: hidden;
  margin-bottom: var(--m-gap);
  min-height: 248px;
}
.m-mapwrap svg { display: block; width: 100%; height: auto; }
.m-mapwrap .leaflet-container { width: 100%; height: 100%; border-radius: var(--m-radius); font-family: inherit; }

/* ───────────────────────────────────────────────────────────────
   Restock map markers — used by leaflet-map.js
   Apple/Google/Uber-style: teardrop stop pins, pulsing truck dot.
   .rsm-* classes are scoped so they don't collide with Leaflet's
   default .leaflet-marker-icon styling.
─────────────────────────────────────────────────────────────── */
.rsm-pin-wrap, .rsm-truck-divwrap {
  background: transparent !important;
  border: 0 !important;
}
.rsm-pin {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.32);
  display: flex; align-items: center; justify-content: center;
}
.rsm-pin-n {
  transform: rotate(45deg);
  color: #fff; font-weight: 700; font-size: 11px;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1;
}
/* Truck — three layers: pulse ring, dot, optional callout label */
.rsm-truck-wrap {
  position: relative;
  width: 18px; height: 18px;
}
.rsm-truck-dot {
  position: absolute; inset: 0;
  background: #2D4BFF;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(45,75,255,.55);
}
.rsm-truck-pulse {
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: #2D4BFF;
  opacity: 0.28;
  animation: rsm-truck-pulse 1.8s ease-out infinite;
}
@keyframes rsm-truck-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.rsm-truck-label {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  background: #0B0F14; color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* Leaflet zoom control: drop in our radius/border tokens */
.leaflet-control-zoom a {
  border-radius: 6px !important;
  font-family: inherit !important;
}
.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255,255,255,.7) !important;
}