/* The dispatch map. Leaflet's own stylesheet (vendor/leaflet/leaflet.css)
   lays the map out; this gives it our size, our markers and our type. */

.map {
  /* Leaflet stacks its layers up to z-index 1000. Kept inside their own
     context, so a drawer or a dialog opens over the map and not under it. */
  position: relative; z-index: 0; isolation: isolate;
  block-size: clamp(22rem, 60vh, 44rem);
  margin-block: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sunken);
  overflow: hidden;
}
.map .leaflet-container { font: inherit; background: var(--surface-sunken); }
.map .leaflet-control-attribution { font-size: 0.75rem; }
.map .leaflet-bar a { color: var(--text); background: var(--surface); border-color: var(--border); }
.map .leaflet-bar a:focus-visible { outline: var(--sp-1) solid var(--focus-ring); outline-offset: calc(-1 * var(--sp-1)); }
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip {
  color: var(--text); background: var(--surface-raised);
}
.map .leaflet-popup-content { margin: var(--sp-4) var(--sp-5); }
.map-popup { display: grid; gap: var(--sp-1); min-inline-size: 10rem; }

/* A marker. The shape says what it is — a square is someone waiting, a
   circle is a nurse — the colour says how it stands, and the legend and the
   tables under the map say both in words. */
.map-pin {
  box-sizing: border-box; inline-size: var(--sp-7); block-size: var(--sp-7);
  border: var(--sp-1) solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong);
  background: var(--text-muted);
}
.map-pin--request { border-radius: var(--r-sm); }
.map-pin--nurse { border-radius: var(--r-pill); }

.map-pin--waiting { background: var(--warning); }
.map-pin--waiting-long { background: var(--warning); box-shadow: 0 0 0 var(--sp-1) var(--warning); }
.map-pin--late { background: var(--danger); box-shadow: 0 0 0 var(--sp-1) var(--danger); }
.map-pin--assigned, .map-pin--en-route, .map-pin--in-progress { background: var(--brand); }
.map-pin--free { background: var(--success); }
.map-pin--travelling { background: var(--brand); box-shadow: 0 0 0 var(--sp-1) var(--brand); }
.map-pin--busy { background: var(--text-muted); }

.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7);
  margin: 0 0 var(--sp-4); padding: 0; list-style: none;
}
.map-legend__item { display: inline-flex; align-items: center; gap: var(--sp-3); }
.map-legend .map-pin { flex: none; inline-size: var(--sp-5); block-size: var(--sp-5); }

/* A place chosen in a form (ui/location-picker.js): a smaller map to point
   at, the pin that marks the place, and how far a nurse travels from it. */
.location { display: grid; gap: var(--sp-3); }
.location:focus-visible { outline: var(--sp-1) solid var(--focus-ring); outline-offset: var(--sp-1); }
.map--picker { block-size: clamp(14rem, 38vh, 22rem); margin-block: 0; }
.map--picker .leaflet-grab { cursor: crosshair; }
.location__readout { display: block; color: var(--text-muted); }
.location__manual summary { cursor: pointer; color: var(--text-muted); }
.location__manual .row { margin-block-start: var(--sp-3); }
.map-pin--chosen { border-radius: var(--r-pill); background: var(--brand); box-shadow: 0 0 0 var(--sp-1) var(--brand); cursor: grab; }
.map-reach { stroke: var(--brand); stroke-opacity: 0.7; fill: var(--brand); fill-opacity: 0.12; }
.field--error .map--picker { border-color: var(--danger); }