.crew-map {
  height: 380px;
}

@media (min-width: 1024px) {
  .crew-map {
    height: calc(100vh - 260px);
    min-height: 480px;
  }
}

.crew-marker {
  background: transparent;
  border: none;
}

/* A worker: initials on a solid disc, coloured by crew while on the clock. */
.crew-marker-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #94A3B8;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.crew-marker-dot--clocked-in {
  background: #16A34A;
}

/* A stop: numbered ring in the crew's colour, greyed once done, red when missed. */
.stop-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0F766E;
  color: #0F766E;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.stop-pin--done {
  border-color: #9CA3AF;
  color: #6B7280;
}


.leaflet-popup-content-wrapper {
  border-radius: 10px;
}

.crew-popup-name {
  font-weight: 700;
}

.crew-popup-status {
  color: #94A3B8;
}

.crew-popup-status--clocked-in {
  color: #16A34A;
}

.crew-popup-status--late {
  color: #B91C1C;
  font-weight: 600;
}

.crew-popup-meta {
  font-size: 0.75rem;
  opacity: 0.7;
}

.crew-popup-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  background: #0F766E;
  color: #FFFFFF !important;
  font-size: 0.75rem;
  font-weight: 600;
}

/* daisyUI's .card stacks its children; the chip is a row with the text truncating. */
.card.worker-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  box-shadow: none;
  text-align: left;
}

.card.worker-chip > span:last-child {
  flex: 1;
  min-width: 0;
}

.worker-chip:hover {
  background: var(--color-base-200);
}

/* Hover from the list: the matching pin grows and gets a halo. */
.stop-pin, .crew-marker-dot {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.stop-pin--active {
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crew-marker-dot--active {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}