/* Schematic route map, shared by the office screen and the driver app.
   The SVG draws the background; pins are HTML positioned in %. */
.map {
  --m-land: #eef1ec; --m-water: #b9d4e6; --m-park: #d8e8cf; --m-road: #ffffff; --m-road-edge: #d9ddd6;
  --m-hwy: #f6d58a; --m-town: #7a828a; --m-route: #ff5b04; --m-todo: #14181c;
  position: relative; width: 100%; aspect-ratio: 100 / 70; border-radius: 0.75rem; overflow: hidden;
  background: var(--m-land); isolation: isolate;
}
:root[data-theme="dark"] .map {
  --m-land: #1c2127; --m-water: #23384a; --m-park: #1f2d22; --m-road: #303740; --m-road-edge: #262c33;
  --m-hwy: #5a4a24; --m-town: #8d96a0; --m-todo: #e7eaee;
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map .m-land { fill: var(--m-land); }
.map .m-park { fill: var(--m-park); }
.map .m-water { fill: none; stroke: var(--m-water); stroke-width: 0.6rem; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map .m-water.thin { stroke-width: 0.3rem; }
.map .m-road { fill: none; stroke: var(--m-road); stroke-width: 0.25rem; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .m-road.ring, .map .m-road.hwy { stroke: var(--m-hwy); stroke-width: 0.32rem; }
.map .m-town { fill: var(--m-town); font-weight: 600; font-family: var(--font, Inter, sans-serif); letter-spacing: 0.02em; text-transform: uppercase; }
.map .m-route { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .m-route.done { stroke: var(--m-route); stroke-width: 0.22rem; }
.map .m-route.todo { stroke: var(--m-todo); stroke-width: 0.14rem; stroke-dasharray: 0.35rem 0.3rem; opacity: 0.75; }
.map .m-route.plan { stroke: var(--m-todo); stroke-width: 0.14rem; stroke-dasharray: 0.35rem 0.3rem; opacity: 0.55; }
.map.draw .m-route { stroke-dasharray: 60 60; stroke-dashoffset: 60; animation: m-draw 1.2s ease-out forwards; vector-effect: none; stroke-width: 0.45; }
@keyframes m-draw { to { stroke-dashoffset: 0; } }

.map-pin, .map-depot, .map-truck {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: inline-grid; place-items: center; border-radius: 50%;
}
.map-pin {
  width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer;
  border: 0.125rem solid #fff; background: #14181c; color: #fff;
  font: 700 0.6875rem/1 ui-monospace, Consolas, monospace;
  box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 30%);
  transition: transform 0.2s;
}
.map-pin .ms { font-size: 0.875rem; }
.map-pin:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 4; }
.map-pin.st-delivered { background: #1c6b48; }
.map-pin.st-partial, .map-pin.st-absent { background: #c27a06; }
.map-pin.st-refused, .map-pin.st-not_delivered { background: #b42323; }
.map-pin.hl { transform: translate(-50%, -50%) scale(1.25); z-index: 3; box-shadow: 0 0 0 0.25rem rgb(255 91 4 / 35%), 0 0.125rem 0.375rem rgb(0 0 0 / 30%); }
.map-pin.flash { animation: pin-flash 1.4s ease-out 2; }
@keyframes pin-flash { 50% { box-shadow: 0 0 0 0.6rem rgb(28 107 72 / 0%), 0 0 0 0.3rem rgb(28 107 72 / 45%); } }
.map-depot { width: 1.75rem; height: 1.75rem; background: #14181c; color: #fff; border-radius: 0.4rem; box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 30%); }
.map-depot .ms { font-size: 1.05rem; }
.map-truck { width: 1.75rem; height: 1.75rem; background: #ff5b04; color: #fff; z-index: 3; box-shadow: 0 0 0 0.25rem rgb(255 91 4 / 25%); transition: left 1s ease, top 1s ease; }
.map-truck .ms { font-size: 1.05rem; }
.map-truck::after { content: ''; position: absolute; inset: -0.25rem; border-radius: 50%; border: 0.125rem solid #ff5b04; animation: truck-ping 2s ease-out infinite; }
@keyframes truck-ping { from { opacity: 0.8; transform: scale(0.8); } to { opacity: 0; transform: scale(1.8); } }