/* /tech/ — mobile-first technician portal. SSMC green brand. */

/* iOS status-bar inset — non-zero only in standalone PWA mode where
   black-translucent lets the page extend under the clock/battery. Every
   sticky offset below stacks on the tech-bar, so they all add this var. */
:root { --safe-top: env(safe-area-inset-top, 0px); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%; height: 100dvh;       /* dvh = dynamic viewport, accounts for iOS URL bar */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1a1a;
  overflow: hidden;                    /* lock root — no rubber-band into white space */
  overscroll-behavior: none;
}
body { background: #f4f6f7; }
.route-body { position: fixed; inset: 0; width: 100%; }  /* lock body to viewport so no scroll-past */

a { color: #19453b; }

/* ── Login ─────────────────────────────────────────────────────────── */
.login-body { background: #19453b; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: #fff;
  width: 100%;
  max-width: 380px;
  padding: 28px 24px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.brand-block { text-align: center; margin-bottom: 22px; }
.brand-logo { max-width: 220px; height: auto; }
.brand-tag { color: #19453b; font-weight: 600; font-size: 13px; margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase; }

.login-card label {
  display: block; margin-top: 14px; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: #54698D;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.login-card input[type="text"], .login-card input[type="password"] {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1px solid #DDDBDA; border-radius: 4px;
  outline: none;
}
.login-card input:focus { border-color: #19453b; box-shadow: 0 0 0 2px rgba(25,69,59,0.18); }

.btn-primary {
  display: block; width: 100%;
  padding: 13px; margin-top: 18px;
  background: #19453b; color: #fff;
  border: 0; border-radius: 4px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover { background: #163d34; }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }

/* Armed state — first tap of Mark Complete primes the button into a
   confirmation prompt; second tap commits. Orange + subtle pulse + slightly
   larger font so a tech can't miss the change of state on a sunny phone. */
.btn-primary.btn-armed {
  background: #e67e22;
  color: #fff;
  animation: btn-armed-pulse 0.9s ease-in-out infinite;
  font-size: 15px;
}
.btn-primary.btn-armed:hover { background: #d35400; }
@keyframes btn-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0  rgba(230,126,34,0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(230,126,34,0); }
}

.login-alt {
  text-align: center; margin-top: 18px;
  font-size: 13px;
}
.login-alt a { text-decoration: none; }
.login-alt .dot { color: #999; margin: 0 6px; }

.alert {
  margin-top: 14px; padding: 10px 12px; border-radius: 4px;
  font-size: 13px;
}
.alert-error { background: #fbe9e7; color: #C23934; border: 1px solid #f4c7c2; }
.alert-info  { background: #e8f4fd; color: #1565c0; border: 1px solid #c5dffa; }
.alert-ok    { background: #e8f5e9; color: #2e7d32; border: 1px solid #b9dfbb; }

/* ── Route view (mobile-first) ─────────────────────────────────────── */
.tech-bar {
  background: #19453b; color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  position: sticky; top: 0; z-index: 100;
}
.tech-menu-btn {
  background: transparent; border: 0; cursor: pointer;
  color: #fff; padding: 4px;
  display: flex; align-items: center;
}
.tech-logo { height: 32px; width: auto; max-width: 200px; }
.tech-nav-logo { height: 38px; width: auto; max-width: 220px; margin-bottom: 4px; }

/* Scoped [hidden] override — only for drawer + overlay. The sheet has its
   own display: block + translateY trick that we must NOT clobber. */
.tech-nav[hidden], .tech-nav-overlay[hidden] { display: none !important; }
.tech-bar-spacer { flex: 1; }
.tech-bar-tech {
  font-weight: 600; font-size: 13px;
  background: rgba(255,255,255,0.15);
  padding: 6px 12px; border-radius: 14px;
}

/* Sub-bar with date picker — sticky so it stays visible when the user
   scrolls the map or switches route tabs (without this, any layout reflow
   on tab toggle would push it above the viewport). Stacks just under the
   green tech-bar (which is also sticky at top:0). */
.tech-subbar {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-bottom: 1px solid #ECEBEA;
  position: sticky; top: calc(52px + var(--safe-top)); z-index: 90;
}
.tech-date-pill {
  background: #f4f6f7;
  border: 1px solid #DDDBDA; border-radius: 20px;
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: #19453b;
  -webkit-appearance: none;
  outline: none;
}
.tech-date-pill:focus { border-color: #19453b; box-shadow: 0 0 0 2px rgba(25,69,59,0.18); }

/* Slide-out nav drawer */
.tech-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  animation: fade-in 0.18s ease-out;
}
.tech-nav {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 280px; max-width: 85vw;
  background: #fff;
  z-index: 9001;
  box-shadow: 4px 0 24px rgba(0,0,0,0.20);
  overflow-y: auto;
  display: flex; flex-direction: column;
  animation: slide-in 0.2s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.tech-nav-head {
  background: #19453b; color: #fff;
  padding: calc(24px + var(--safe-top)) 18px 18px;
  text-align: center;
}
.tech-nav-brand {
  font-size: 18px; font-weight: 800; letter-spacing: 1px;
  color: #fff;
}
.tech-nav-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: 0.7;
  margin-top: 4px;
}
.tech-nav-name { font-size: 13px; font-weight: 600; margin-top: 12px;
  background: rgba(255,255,255,0.15); padding: 6px 12px; border-radius: 14px;
  display: inline-block;
}
.tech-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  font-size: 14px; font-weight: 500;
  color: #16325C; text-decoration: none;
  border: 0;
  border-bottom: 1px solid #f4f6f7;
  background: #fff;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.tech-nav-link:hover { background: #f4f6f7; color: #19453b; }
.tech-nav-link.active { background: #e8f0ee; color: #19453b; font-weight: 700; box-shadow: inset 4px 0 0 #19453b; }
.tech-nav-link.danger { color: #C23934; }
.tech-nav-link.danger:hover { background: #fbe9e7; color: #C23934; }
.tech-nav-icon { font-size: 18px; width: 24px; text-align: center; }
.tech-nav-sep { height: 8px; background: #f4f6f7; }

/* Settings row in the nav drawer (e.g. default map app picker) — same vertical
   rhythm as nav links, but with an inline label + select instead of a button. */
.tech-nav-setting {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #f4f6f7;
}
.tech-nav-setting-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  color: #16325C;
}
.tech-nav-setting-select {
  margin-left: auto;
  padding: 6px 8px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  color: #19453b;
  font-weight: 600;
}

/* Time Clock card in nav drawer */
.clock-card {
  background: #f4f6f7;
  border-bottom: 1px solid #ECEBEA;
  padding: 14px 16px;
  text-align: center;
}
.clock-status-line {
  font-size: 12px; color: #54698D;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
  margin-bottom: 10px;
}
.clock-status-line.running { color: #2e7d32; }
.clock-btn {
  display: block; width: 100%;
  padding: 14px 12px;
  background: #19453b; color: #fff;
  border: 0; border-radius: 6px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}
.clock-btn[data-state="in"] { background: #C23934; }
.clock-btn[data-state="in"]:hover { background: #a82d29; }
.clock-btn:hover { background: #163d34; }
.clock-totals {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 11px; color: #54698D;
}
.clock-totals .total-cell {
  background: #fff; border-radius: 4px; padding: 8px 6px;
}
.clock-totals .total-cell strong {
  display: block; color: #19453b; font-size: 16px; font-weight: 700;
}

/* Persistent punch-clock bar on the main screen. `.off` = not punched in —
   deliberately loud (green wash, big button) so punching in is the obvious
   first tap of the day; on the clock it settles into a compact status bar. */
.punch-bar {
  background: #fff; border-bottom: 1px solid #ECEBEA;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
}
.punch-bar.off {
  background: linear-gradient(180deg, #eaf5ef, #dcede4);
  padding: 14px;
}
.punch-info { flex: 1; min-width: 0; }
.punch-status { font-size: 14px; font-weight: 700; color: #19453b; }
.punch-status.running { color: #2e7d32; font-variant-numeric: tabular-nums; }
.punch-sub { font-size: 12px; color: #54698D; margin-top: 2px; }
.punch-btn {
  flex-shrink: 0;
  padding: 12px 18px;
  border: 0; border-radius: 8px;
  background: #19453b; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.punch-bar.off .punch-btn {
  padding: 16px 22px; font-size: 17px;
  box-shadow: 0 3px 10px rgba(25, 69, 59, .35);
}
.punch-btn.out { background: #C23934; }
/* Armed = first Punch Out tap landed; pulsing red asks for the confirm tap */
.punch-btn.armed, .clock-btn.armed {
  background: #8f1f1b !important;
  animation: punchPulse 1s infinite;
}
@keyframes punchPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 57, 52, .45); }
  50%      { box-shadow: 0 0 0 8px rgba(194, 57, 52, 0); }
}

.route-summary {
  background: #fff; padding: 12px 14px;
  font-size: 13px; color: #54698D; line-height: 1.45;
  border-bottom: 1px solid #ECEBEA;
  /* Sticky just under the date-picker subbar so the route picker tabs and
     the summary line stay anchored even after a layout reflow (e.g. when
     the route_summary innerHTML rebuilds on a tab toggle). Without sticky,
     a reflow can push the tabs above the viewport while the map keeps its
     full calc-vh height — looks like the tabs vanished. */
  position: sticky; top: calc(110px + var(--safe-top)); z-index: 80;
}
.route-summary strong { color: #19453b; font-weight: 700; }

/* Route picker tabs — shown only when a tech has 2+ routes on the same day.
   Lets them switch between routes without losing context. The active tab
   shows the route that's currently rendered on the map / drives the stop
   detail sheet. Stop "Next" navigation stays scoped to the active route. */
.tech-route-picker {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #DDDBDA;
}
.tech-route-tab {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #f4f6f7;
  border: 1px solid #DDDBDA;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  flex: 1 1 auto; min-width: 110px;
  text-align: left;
  line-height: 1.25;
}
.tech-route-tab.active {
  background: #19453b; color: #fff; border-color: #19453b;
}
.tech-route-tab-label { font-weight: 700; }
.tech-route-tab-meta  { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.tech-route-summary-line { font-size: 13px; color: #54698D; line-height: 1.45; }

/* Map fills the viewport below the bars — no stop list, just tap pins.
   Uses dvh so iOS Safari's URL bar appearing/disappearing doesn't push the
   bottom of the map below the visible area. Fallback to vh for older browsers. */
#route-map {
  height: calc(100vh - 110px - var(--safe-top));
  height: calc(100dvh - 110px - var(--safe-top));
  min-height: 320px;
}

.stop-card {
  display: flex; align-items: stretch;
  background: #fff; border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.stop-card.completed { opacity: 0.55; }
.stop-card.active { box-shadow: 0 0 0 2px #f6921e; }

.stop-num {
  flex-shrink: 0; width: 44px;
  background: #19453b; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.stop-card.completed .stop-num { background: #888; }
.stop-card.active .stop-num    { background: #f6921e; }

.stop-body { flex: 1; padding: 10px 12px; min-width: 0; }
.stop-name { font-weight: 600; font-size: 15px; color: #16325C; line-height: 1.25; }
.stop-addr { font-size: 13px; color: #54698D; margin-top: 2px; line-height: 1.3; }
.stop-meta { font-size: 11px; color: #888; margin-top: 4px; }

.stop-actions {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  border-left: 1px solid #ECEBEA;
}
.stop-actions a, .stop-actions button {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: #fff; border: 1px solid #DDDBDA; border-radius: 6px;
  color: #19453b; cursor: pointer; text-decoration: none;
  font-size: 16px;
}
.stop-actions a:hover, .stop-actions button:hover { background: #f0f4f3; }
.stop-actions .waze { background: #33ccff; color: #fff; border-color: #33ccff; font-weight: 700; }
.stop-actions .waze:hover { background: #20bfff; }
.stop-actions .complete { background: #19453b; color: #fff; border-color: #19453b; }
.stop-actions .complete:hover { background: #163d34; }

/* ── Stop detail sheet ─────────────────────────────────────────────── */
/* Sheet z-index must clear Leaflet's default panes (max 700 for popups). */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 22px rgba(0,0,0,0.25);
  max-height: 85vh; max-height: 85dvh;  /* dvh handles iOS landscape URL bar */
  overflow-y: auto;
  z-index: 5000;
  transform: translateY(0); transition: transform 0.22s ease-out;
}
.sheet[hidden] { display: block !important; transform: translateY(100%); pointer-events: none; }
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.30);
  z-index: 4999;
}
.sheet-backdrop[hidden] { display: none !important; }
.sheet-grip {
  position: relative;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sheet-grip::before {
  content: ''; width: 40px; height: 4px;
  background: #ddd; border-radius: 2px;
}
.sheet-x {
  position: absolute; right: 10px; top: 8px;
  background: #f4f6f7; border: 0; border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #666; cursor: pointer;
  font-weight: 700;
}
.sheet-x:hover { background: #e0e6e8; color: #333; }
.sheet-body { padding: 0 16px 24px; }

.sheet-head { padding: 6px 0 12px; border-bottom: 1px solid #ECEBEA; }
.sheet-name { font-size: 18px; font-weight: 700; color: #19453b; }
.sheet-addr { font-size: 13px; color: #54698D; margin-top: 4px; }
.sheet-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f6f7; font-size: 13.5px; }
.sheet-row .k { font-weight: 600; color: #54698D; min-width: 110px; flex-shrink: 0; }
.sheet-row .v { color: #16325C; flex: 1; word-break: break-word; }
/* ── Specialty + Override pill banners in the stop sheet ──────────────────
   Mirrors the office /routes/ pin popup so the tech sees the same signals.
   Green = specialty pending (Ant/Spider/etc.) → stamps Treatment_N__c on tap.
   Orange = one-time CHEM_SOLUTION__c override → closes the CS ticket on tap. */
.tech-spec-banner {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
}
.tech-specialty-banner {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
}
.tech-override-banner {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
}
.tech-callback-banner {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  border: 2px solid #dc2626;
  border-left-width: 8px;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.18);
  padding: 14px 16px;
  animation: callbackPulse 1.8s ease-in-out infinite;
}
@keyframes callbackPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(220, 38, 38, 0.18); }
  50%      { box-shadow: 0 2px 22px rgba(220, 38, 38, 0.45); }
}
.tech-callback-banner .tech-spec-head {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #7f1d1d;
  margin-bottom: 6px;
}
.tech-spec-head {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #065f46;
  margin-bottom: 8px;
}
.tech-override-banner .tech-spec-head { color: #9a3412; }
.tech-callback-banner .tech-spec-head { color: #991b1b; }
.tech-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed rgba(6, 78, 59, 0.15);
}
.tech-spec-row:first-of-type { border-top: 0; }
.tech-override-banner .tech-spec-row { border-top: 0; padding: 4px 0; }
.tech-spec-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #10b981;
  font-weight: 600;
  color: #065f46;
  font-size: 14px;
  white-space: nowrap;
}
.tech-spec-pill sup { font-size: 10px; color: #047857; margin-left: 2px; }
.tech-override-pill {
  border-color: #f97316;
  color: #7c2d12;
}
.tech-callback-pill {
  border-color: #ef4444;
  color: #7f1d1d;
}
.tech-callback-banner .tech-spec-row { border-top: 0; padding: 4px 0; }
.tech-spec-btn {
  flex-shrink: 0;
  padding: 10px 14px;       /* taller for thumb taps */
  background: #10b981;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.tech-spec-btn:active   { background: #047857; }
.tech-spec-btn:disabled { background: #9ca3af; }
.tech-override-btn { background: #f97316; }
.tech-override-btn:active   { background: #c2410c; }
.tech-override-btn:disabled { background: #fed7aa; color: #7c2d12; }
.tech-callback-btn { background: #ef4444; }
.tech-callback-btn:active   { background: #b91c1c; }
.tech-callback-btn:disabled { background: #fecaca; color: #7f1d1d; }
.tech-callback-summary {
  color: #7f1d1d; font-style: normal; opacity: 1;
  font-size: 13.5px; line-height: 1.45;
}
.tech-callback-summary strong { color: #7f1d1d; font-weight: 700; }

/* When callback is needed, the bottom action button swaps from green
   "Mark Complete" to red "Log Callback App" — visually loud so the tech can't
   miss that this is a different (free) action than a regular paid app. */
.btn-callback-action {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}
.btn-callback-action:hover  { background: #dc2626 !important; }
.btn-callback-action:active { background: #b91c1c !important; }
.tech-spec-summary {
  margin-top: 6px;
  font-size: 12px;
  color: #9a3412;
  font-style: italic;
  opacity: 0.85;
}
.tech-spec-row.tech-spec-done { opacity: 0.55; }

/* Chem pill — full-width card at the top of the data area. First thing the
   tech sees on arrival: WHAT to spray. Pesticide is a small red badge beside
   the chem name (not a separate text row) so it's a visual flag, not noise.
   Override variant (orange) replaces the default entirely when a one-time
   customer chem request is open. */
.tech-chem-pill {
  margin-top: 14px;
  padding: 12px 16px;
  border: 2px solid #19453b;
  border-radius: 12px;
  background: #f0f7f4;
  text-align: center;
  box-shadow: 0 2px 8px rgba(25, 69, 59, 0.12);
}
.tech-chem-label {
  font-size: 10px; font-weight: 700;
  color: #19453b;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.75;
}
.tech-chem-value {
  font-size: 20px; font-weight: 800;
  color: #19453b;
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
/* Chem mode variants — map directly to operational reality so the tech reads
   the pill once and knows the chemistry without translating SF picklist values.
     organic            → all green, soft fill (the safe default)
     pesticide-border   → green fill, THICK red border (visually shows that
                          pesticide is applied to the perimeter only)
     pesticide-partial  → green fill, red label (front-yard / back-yard only)
     pesticide-all      → solid red fill, white text (high alert) */
.tech-chem-pill.mode-organic {
  background: #ecfdf5;
  border-color: #19453b;
}
.tech-chem-pill.mode-organic .tech-chem-label { color: #065f46; }
.tech-chem-pill.mode-organic .tech-chem-value { color: #065f46; }

.tech-chem-pill.mode-pesticide-border {
  background: #ecfdf5;
  border-color: #dc2626;
  border-width: 5px;
}
.tech-chem-pill.mode-pesticide-border .tech-chem-label { color: #991b1b; }
.tech-chem-pill.mode-pesticide-border .tech-chem-value { color: #065f46; }

.tech-chem-pill.mode-pesticide-partial {
  background: #fff7ed;
  border-color: #dc2626;
}
.tech-chem-pill.mode-pesticide-partial .tech-chem-label { color: #991b1b; }
.tech-chem-pill.mode-pesticide-partial .tech-chem-value { color: #7c2d12; }

.tech-chem-pill.mode-pesticide-all {
  background: #dc2626;
  border-color: #7f1d1d;
}
.tech-chem-pill.mode-pesticide-all .tech-chem-label { color: #fee2e2; opacity: 1; }
.tech-chem-pill.mode-pesticide-all .tech-chem-value { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.15); }

/* Override doesn't use a distinct color anymore — the override pill inherits
   the matching mode-* class (red for pesticide, green for organic) so the
   tech's visual autopilot stays the same regardless of WHO requested the
   chem. The "Override — use this app only" eyebrow label is the only marker
   that it's a one-time request, not the season default. */

/* Secondary pill — the customer's baseline chem when an override is active.
   Smaller, paler, lower contrast so it's clearly subordinate to the override
   pill stacked above. Border-width also drops back to 1px even on the
   pesticide-border variant so the visual weight stays subordinate. */
.tech-chem-pill.tech-chem-pill-secondary {
  margin-top: 6px;
  padding: 8px 14px;
  border-width: 1px;
  box-shadow: none;
  opacity: 0.7;
}
.tech-chem-pill.tech-chem-pill-secondary .tech-chem-label { font-size: 9px; margin-bottom: 2px; }
.tech-chem-pill.tech-chem-pill-secondary .tech-chem-value { font-size: 14px; font-weight: 700; }

/* Navigate button — Waze/maps deeplink. Blue (not SSMC green) because it's a
   navigation/external action, not a save. Standard web-app blue matches what
   techs are used to in Maps/Uber/etc. */
.btn-navigate {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 14px;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
  transition: background 0.12s, transform 0.05s;
  letter-spacing: 0.01em;
}
.btn-navigate:hover  { background: #1d4ed8; }
.btn-navigate:active { background: #1e40af; transform: scale(0.99); }
.btn-navigate:visited { color: #fff; }

.sheet-actions { display: flex; gap: 8px; margin-top: 16px; }
.sheet-actions .btn-primary, .sheet-actions .btn-secondary {
  flex: 1; padding: 12px; font-size: 14px; border-radius: 6px;
}
.btn-secondary {
  background: #fff; color: #19453b;
  border: 1px solid #19453b;
  cursor: pointer; font-weight: 600;
}
.btn-secondary:hover { background: #f0f4f3; }

/* Skip-stop reason form — slides out when ⊘ Skip This Stop is tapped.
   Sits inside a red-tinted card so the destructive action is visually distinct
   from the rest of the sheet (which otherwise lives in greens + greys). */
.skip-form {
  margin-top: 12px;
  padding: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.skip-form-label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: #991b1b;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.skip-form-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.skip-form-input:focus {
  outline: 0;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.skip-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.skip-form-btn {
  height: 46px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.skip-form-cancel {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
}
.skip-form-cancel:active { background: #f3f4f6; }
.skip-form-confirm {
  background: #C23934;
  color: #fff;
  border-color: #C23934;
}
.skip-form-confirm:active   { background: #991b1b; border-color: #991b1b; }
.skip-form-confirm:disabled { background: #fca5a5; border-color: #fca5a5; cursor: wait; }

.app-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.app-pick {
  background: #f4f6f7; border: 1px solid #DDDBDA; border-radius: 4px;
  padding: 6px 10px; font-size: 13px; cursor: pointer; color: #16325C;
}
.app-pick.active { background: #19453b; color: #fff; border-color: #19453b; }

/* Skip flow */
.sheet-skip-row { text-align: center; margin-top: 10px; }
.btn-skip {
  background: transparent; border: 0; cursor: pointer;
  color: #C23934; font-size: 13px; font-weight: 600;
  text-decoration: underline;
}
.btn-skip:hover { color: #a82d29; }

/* Preview-mode banner — visible only when /tech/route.php?preview=... is set.
   Loud yellow stripe so it can't be missed. Writes are blocked while shown. */
#preview-banner {
  position: sticky; top: 0; z-index: 9999;
  background: #fef3c7; color: #78350f;
  padding: 10px 14px; font-size: 12.5px;
  border-bottom: 2px solid #f59e0b;
  text-align: center; line-height: 1.4;
}
#preview-banner strong { color: #92400e; letter-spacing: 0.04em; }
#preview-banner a { color: #92400e; font-weight: 700; margin-left: 8px; }

.empty-state {
  background: #fff; padding: 40px 20px; text-align: center;
  color: #888; font-size: 14px;
}

/* Empty-route card — shown in the route-summary slot when the tech opens a
   date that has no route. Surface the next/previous assigned dates as big
   tappable pills so they can jump in one tap (instead of fiddling with the
   date picker). */
.empty-route { text-align: center; padding: 4px 0 6px; }
.empty-route-headline {
  font-weight: 600; color: #19453b; font-size: 14.5px;
  margin-bottom: 12px;
}
.empty-route-jumps {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.empty-jump {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #19453b;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  min-height: 48px;        /* thumb-tap target */
  font-family: inherit;
  transition: background 0.12s, transform 0.05s;
}
.empty-jump:active { background: #19453b; transform: scale(0.98); }
.empty-jump:active .empty-jump-eyebrow,
.empty-jump:active .empty-jump-label,
.empty-jump:active .empty-jump-arrow { color: #fff; }
.empty-jump.next { background: #19453b; border-color: #19453b; }
.empty-jump.next .empty-jump-eyebrow,
.empty-jump.next .empty-jump-label,
.empty-jump.next .empty-jump-arrow { color: #fff; }
.empty-jump.next:active { background: #0f2e26; }
.empty-jump-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.85;
  color: #54698D;
}
.empty-jump-label {
  font-size: 14px; font-weight: 700; color: #19453b;
  line-height: 1;
}
.empty-jump-arrow {
  font-size: 18px; font-weight: 700; color: #19453b;
  line-height: 1;
}
.empty-jump.next .empty-jump-eyebrow { opacity: 0.8; }
/* Stack vertically when both prev + next pills are present on narrow screens */
@media (max-width: 380px) {
  .empty-route-jumps { flex-direction: column; align-items: stretch; }
  .empty-jump { justify-content: center; }
}

/* Map pin styles */
.tech-pin {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #19453b; color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.tech-pin.completed { background: #888; }
.tech-pin.active    { background: #f6921e; transform: scale(1.15); }
.tech-pin.skipped   { background: #b45309; color: #fff; opacity: 0.85; }
/* Skipped-stop card: locked banner + un-skip */
.tech-skip-banner {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #fff5e0; border: 1px solid #f4c570; color: #8a5a0b;
  font-weight: 700; font-size: 14px; line-height: 1.4;
}
.btn-unskip {
  width: 100%; padding: 12px; border-radius: 8px; cursor: pointer;
  background: #fff; color: #19453b; border: 1.5px solid #19453b;
  font-size: 15px; font-weight: 700;
}
.btn-unskip:hover { background: #eef4f1; }
.btn-unskip:disabled { opacity: 0.6; cursor: wait; }
/* Must-read office flag (CS note) + previous-apps chips */
.tech-office-flag {
  margin-top: 14px; padding: 13px 15px; border-radius: 10px;
  background: linear-gradient(180deg,#fee2e2,#fecaca);
  border: 2px solid #dc2626; border-left-width: 8px;
}
.tech-office-flag.acked { background: #e8f5ee; border-color: #1e6b48; }
.tech-office-flag-head { font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #991b1b; margin-bottom: 5px; }
.tech-office-flag.acked .tech-office-flag-head { color: #1e6b48; }
.tech-office-flag-body { font-size: 15px; line-height: 1.45; color: #1c2b28; }
.tech-office-flag-btn { margin-top: 10px; width: 100%; padding: 11px; border-radius: 7px; border: 0; background: #dc2626; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.tech-office-flag-btn:active { background: #b91c1c; }
.tech-office-flag-btn:disabled { opacity: .6; }
.app-chip { display: inline-block; background: #e7f3ec; color: #1b463c; font-weight: 600; font-size: 12px; padding: 3px 9px; border-radius: 12px; margin: 0 5px 5px 0; }
.depot-flag {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: #C23934; color: #fff;
  border: 2px solid #fff; border-radius: 4px;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}