/* Zone-picker modal for the Passing tab's location filter (fpsZonePicker,
   js/pass_zones.js). Look mirrors dev/zone_picker_mock.html v6; colours are
   the app palette (cool_grey #edf5f4, cool_green #00846b, cool_red #954d4e,
   rink blue #143F84). */

.pm-loc-modal .zp-presets {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 10px;
}
.pm-loc-modal .zp-lab { color: #8f9bb3; }

.pm-loc-modal .zp-pickers { display: flex; gap: 28px; flex-wrap: wrap; }
.pm-loc-modal .zp-picker  { flex: 1 1 460px; min-width: 0; }
/* OZ-only flavour (the PP map card, pp_location_modal): upright half-rinks
   pinned to ~420px each so the pair sits side by side at a size where the
   cell labels read comfortably - the full-rink flex basis above would
   balloon each one to the modal's whole width, 300px put the labels just
   under the readability line. */
.pm-loc-oz .zp-pickers { justify-content: center; }
.pm-loc-oz .zp-picker  { flex: 0 1 420px; min-width: 300px; }
.pm-loc-modal .zp-title {
  margin: 0 0 6px; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8f9bb3; font-weight: 600;
}

.pm-loc-modal svg {
  width: 100%; height: auto; display: block;
  user-select: none; -webkit-user-select: none;
}
.pm-loc-modal .zp-cell {
  fill: transparent; stroke: rgba(20, 63, 132, 0.35); stroke-width: 1;
  stroke-dasharray: 3 3; cursor: pointer;
}
.pm-loc-modal .zp-cell:hover { fill: #c5e3de; fill-opacity: 0.7; }
.pm-loc-modal .zp-cell.sel {
  fill: #00846b; fill-opacity: 0.32; stroke: #00846b;
  stroke-dasharray: none; stroke-width: 1.6;
}
.pm-loc-modal .zp-cell-label {
  font-size: 8.5px; fill: rgba(58, 62, 91, 0.55);
  pointer-events: none; text-anchor: middle;
}

.pm-loc-modal .zp-zone-btns {
  display: flex; justify-content: space-around; gap: 8px; margin-top: 6px;
}

/* Pills: presets + zone buttons (in the modal body), all no-select. */
.pm-loc-modal .zp-pill, .modal-footer .zp-clear {
  user-select: none; -webkit-user-select: none;
}
.pm-loc-modal .zp-pill {
  font-size: 13px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid #e3ecea; background: #fff; color: #3a3e5b; cursor: pointer;
}
.pm-loc-modal .zp-pill:hover { background: #c5e3de; }
.pm-loc-modal .zp-pill.active {
  background: #00846b; border-color: #00846b; color: #fff;
}

/* Draft chips inside the modal */
.pm-loc-modal .zp-chips {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #e3ecea;
  font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; min-height: 26px;
}
.pm-loc-modal .zp-none { color: #8f9bb3; }
.zp-chip { background: #e3ecea; border-radius: 999px; padding: 3px 12px; }
.zp-chip b { color: #00846b; font-weight: 600; }

/* Clear all: destructive, so it hovers muted red. Sits left in the footer. */
.modal-footer .zp-clear { margin-right: auto; float: left; }
.modal-footer .zp-clear:hover {
  background: rgba(149, 77, 78, 0.12); border-color: #954d4e; color: #954d4e;
}

/* The committed-filter chips in the Passing toolbar */
.pm-loc-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pm-loc-chips .zp-chip { font-size: 12.5px; }

/* Possessions flavour (the match report's Possessions tab): THREE full-rink
   pickers. A fixed basis instead of the two-picker `flex: 1 1 460px` so they
   wrap 2 + 1 with all three the same size - grow-to-fill would stretch the
   orphan on row 2 to the modal's whole width. */
.pm-loc-poss .zp-pickers { justify-content: center; }
.pm-loc-poss .zp-picker  { flex: 0 1 470px; min-width: 340px; }
.pm-loc-poss .zp-hint {
  margin: -4px 0 6px;
  font-size: 12px;
  color: #8f9bb3;
}