/* ---------- Maps (map_controller.js, location_picker_controller.js) ---------- */

.map {
  height: 26rem;
  border: var(--border);
  border-radius: var(--radius-lg);
  /* Leaflet's panes use z-indexes up to 1000: keep them under the app's dialogs and flashes */
  isolation: isolate;
  z-index: 0;
}

/* /map: the map fills the screen below the header */
.map--page {
  height: calc(100dvh - 11rem);
  min-height: 24rem;
}

.map--small {
  height: 16rem;
}

/* Points drawn in CSS: a dot with a white ring, coloured by kind */
.map-marker {
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  background: var(--color-primary);
}

.map-marker--colony-inactive {
  background: var(--gray-400);
}

/* The draggable pin in forms */
.map-marker--pin {
  background: var(--color-danger);
  cursor: grab;
}

.map-popup__title {
  font-weight: var(--weight-semibold);
}

.map-popup__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Legend under the map */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .map-marker {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}

/* Location picker in forms */
.location-picker__map {
  height: 18rem;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  isolation: isolate;
  z-index: 0;
}

.location-picker__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------- Colony page: cat counts and food ---------- */

/* A short form in one row: count + date + note + button; wraps on phones */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);

  .form-field {
    flex: 0 1 9rem;
    margin: 0;
  }

  .inline-form__wide {
    flex: 1 1 12rem;
  }
}

.food-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3);
}

.food-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.food-stat__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.food-stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.food-stats__more {
  margin-top: var(--space-3);
}