/*
 * Mapas dos talhões.
 * Celular: mapa ocupa a tela, lista embaixo. Notebook: mapa com a lista ao lado.
 */
.map {
  position: relative;
  width: 100%;
  min-height: 18rem;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border-soft);
}

.map--overview, .map--draw { height: var(--map-height-phone); }
.map--detail { height: var(--map-height-detail); }

.map-layout { display: grid; gap: var(--space-4); }
.map-layout__list { min-width: 0; }

/* Celular: o mapa encosta nas bordas da tela */
@media (max-width: 639px) {
  .map--overview, .map--draw {
    width: auto;
    margin: 0 calc(-1 * var(--space-4));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .map-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .map--overview { height: calc(100dvh - 14rem); }
  .map-layout__list { max-height: calc(100dvh - 14rem); overflow-y: auto; }
}

/* Lista de talhões ao lado do mapa */
.field-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.field-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
}

.field-card:hover { border-color: var(--color-border); color: var(--color-text); }
.field-card__swatch { width: 0.875rem; height: 2.25rem; flex-shrink: 0; border-radius: 999px; }
.field-card__text { display: grid; flex: 1; min-width: 0; }
.field-card__name { font-weight: var(--font-weight-bold); }
.field-card__detail { overflow: hidden; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.field-card__area { font-weight: var(--font-weight-bold); white-space: nowrap; }

/* Cores dos talhões (lista, prévia de importação e escolha de cor) */
.field-swatch--0 { background: var(--field-color-0); }
.field-swatch--1 { background: var(--field-color-1); }
.field-swatch--2 { background: var(--field-color-2); }
.field-swatch--3 { background: var(--field-color-3); }
.field-swatch--4 { background: var(--field-color-4); }
.field-swatch--5 { background: var(--field-color-5); }
.field-swatch--6 { background: var(--field-color-6); }
.field-swatch--7 { background: var(--field-color-7); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.swatch {
  position: relative;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--color-border-soft);
}

.swatch__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(:checked) { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-text); }
.swatch:has(:focus-visible) { box-shadow: var(--focus-ring); }

/* Desenho do talhão */
.draw-form { display: grid; gap: var(--space-4); }
.draw-form__map { display: grid; gap: var(--space-3); }

.draw-toolbar {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.draw-toolbar__hint { margin: 0; color: var(--color-text-muted); }
.draw-toolbar__area { font-size: var(--font-size-large); }
.draw-toolbar__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (min-width: 1024px) {
  .draw-form { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .map--draw { height: calc(100dvh - 18rem); }
}

/* Pontos do contorno: grandes o bastante para arrastar com o dedo */
.map-vertex, .map-midpoint {
  padding: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

.map-vertex {
  width: var(--map-vertex-size);
  height: var(--map-vertex-size);
  border: 3px solid var(--color-on-primary);
  background: var(--color-primary);
  box-shadow: var(--shadow-raised);
}

/* Área tocável maior que o desenho */
.map-vertex::after, .map-midpoint::after { content: ""; position: absolute; border-radius: 50%; }
/* Área de toque de 48px em volta do ponto, que é bem menor. */
.map-vertex::after { inset: calc((var(--map-vertex-size) - var(--touch-target)) / 2); }
.map-midpoint::after { inset: calc((var(--map-midpoint-size) - var(--touch-target)) / 2); }

.map-midpoint {
  width: var(--map-midpoint-size);
  height: var(--map-midpoint-size);
  border: 2px solid var(--color-primary);
  background: var(--color-on-primary);
  opacity: 0.9;
  cursor: copy;
}

/* Prévia da importação */
.import-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.import-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.import-row__check { display: flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); }

/* Detalhe do talhão */
.field-detail { display: grid; gap: var(--space-4); }

@media (min-width: 1024px) {
  .field-detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .field-detail .map--detail { height: 20rem; }
  .field-detail .card + .card, .field-detail .card { margin-top: 0; }
}

.planting-summary { font-size: var(--font-size-large); }

/* Zoom e bússola do MapLibre com alvo de toque de 48px (o padrão é 29px). */
.maplibregl-ctrl-group button { width: var(--touch-target); height: var(--touch-target); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-size: 70%; }