/* SYGNAL admin: css/world-map.css (the world Win map, js/pages/world-map.js).
 *
 * Mobile-first, the kit's way (ui.css): the base rules are the phone (< 768 px),
 * then @media 768, 1024 and 1280. Colours are the kit's tokens only; every kind
 * on the map also has its own shape (world-map.js GLYPH), so no reading depends
 * on hue alone:
 *   partners  --ui-brand    diamond     won      --ui-success  circle
 *   pending   --ui-warning  square      lost     --ui-danger   triangle
 * Every target is at least 44 x 44 px (the pins, the kit's zoom buttons above the
 * map, the list's summaries, the attribution link); nothing scrolls sideways at 390.
 * Linked root-absolute from index.html <head>, after /ui.css.
 */

.ui-wm { display: flex; flex-direction: column; gap: 16px; font-family: var(--ui-font); color: var(--ui-ink); }

/* ── Filters ─────────────────────────────────────────────────────────────── */
/* Phone: the page heading and the sub-page grid are the top of one white band
   (ui.css: .ui-pagehead + .ui-subnav drops its bottom padding and border), and
   the filters close it, as the Sales lists' .ui-sl-band does. With no filters
   (loading, the server-update state, an error) a strip closes it instead. */
.ui-wm-controls {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  margin: 0 calc(-1 * (var(--ui-page-pad) + var(--ui-safe-right))) 0 calc(-1 * (var(--ui-page-pad) + var(--ui-safe-left)));
  padding: 16px calc(var(--ui-page-pad) + var(--ui-safe-right)) 16px calc(var(--ui-page-pad) + var(--ui-safe-left));
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
}
.ui-wm:not([data-wm-mode="ready"])::before {
  content: ""; display: block; height: 4px;
  margin: 0 calc(-1 * (var(--ui-page-pad) + var(--ui-safe-right))) 0 calc(-1 * (var(--ui-page-pad) + var(--ui-safe-left)));
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
}
.ui-wm-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-wm-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-slate); }
/* 16 px controls on the phone (the owner's rule for this page); the kit's 14 px from 768. */
.ui-wm-seg .ui-seg__opt { font-size: 16px; line-height: 22px; }

/* ── The kinds: colour (kit tokens) on the shape, the tag and the count ──── */
.ui-wm-k--partners { color: var(--ui-brand); }
.ui-wm-k--won { color: var(--ui-success); }
.ui-wm-k--pending { color: var(--ui-warning); }
.ui-wm-k--lost { color: var(--ui-danger); }
.ui-wm-glyph { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* ── Layout: map, then the list of places, then Unplaced (phone) ─────────── */
.ui-wm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-wm-mapcard, .ui-wm-places, .ui-wm-unplaced { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.ui-wm-mapcard { padding: 12px; }
.ui-wm-status { display: flex; flex-direction: column; gap: 12px; }
.ui-wm-status:empty { display: none; }

/* Above the map: the legend, then the zoom buttons (a full row of three on the
   phone). The buttons are OUTSIDE the map so no control can sit on a pin. */
.ui-wm-maphead { display: flex; flex-direction: column; gap: 12px; }
.ui-wm-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-wm-tools .ui-btn { min-width: 0; padding: 0 8px; }

/* Legend: 2 x 2 on the phone (always full rows: 4 kinds, or partners + one outcome). */
.ui-wm-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 4px 4px 0; list-style: none; }
.ui-wm-legend__item { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; line-height: 22px; font-weight: 500; }
.ui-wm-legend__label { min-width: 0; }
.ui-wm-legend__n { margin-left: auto; font-weight: 700; }

/* The map. isolation keeps Leaflet's panes (z-index 400) and controls (1000)
   inside it, so it never scrolls over the top bar or the tab bar. */
.ui-wm-map { position: relative; z-index: 0; isolation: isolate; height: 320px; overflow: hidden; border-radius: var(--ui-radius-control); background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-wm-note { color: var(--ui-slate); }
.ui-wm-attr { color: var(--ui-muted); }
.ui-wm-attr__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-brand); font-weight: 600; }

/* A pin: one per place (or per country when zoomed out), each kind's shape and
   count side by side. The marker element (role=button) IS the 44 px target, and
   is centred on its point. */
.leaflet-marker-icon.ui-wm-pinbox { translate: -50% -50%; width: auto; height: auto; margin: 0; background: none; border: 0; outline: none; }
.ui-wm-pin { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--ui-radius-pill); background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-line-strong), var(--ui-shadow-1-hover); color: var(--ui-ink); font-family: var(--ui-font); font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ui-wm-pin__seg { display: inline-flex; align-items: center; gap: 4px; }
.ui-wm-pin.is-on { box-shadow: 0 0 0 2px var(--ui-ink), var(--ui-shadow-3); }
/* A group pin (places that would overlap at this zoom): a second card behind it
   and a "+" mark say "more than one place, choose to zoom in". */
.ui-wm-pin.is-group { box-shadow: 0 0 0 1px var(--ui-line-strong), 3px 3px 0 0 var(--ui-surface), 3px 3px 0 1px var(--ui-line-strong), var(--ui-shadow-1-hover); }
.ui-wm-pin.is-group.is-on { box-shadow: 0 0 0 2px var(--ui-ink), 3px 3px 0 0 var(--ui-surface), 3px 3px 0 2px var(--ui-ink), var(--ui-shadow-3); }
.ui-wm-pin__more { flex: none; color: var(--ui-slate); }
.ui-wm-pinbox:focus-visible .ui-wm-pin { box-shadow: 0 0 0 3px var(--ui-focus), var(--ui-shadow-3); }

/* ── Lists: places and Unplaced ──────────────────────────────────────────── */
.ui-wm-h { display: flex; align-items: center; gap: 8px; }
.ui-wm-h__n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--ui-radius-pill); background: var(--ui-bg); color: var(--ui-ink); font-size: 13px; line-height: 18px; font-weight: 600; }
.ui-wm-none { margin: 0; font-size: 15px; line-height: 22px; color: var(--ui-slate); }
.ui-wm-countries { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-wm-countries > li { border-top: 1px solid var(--ui-line); }
.ui-wm-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; cursor: pointer; list-style: none; font-size: 16px; line-height: 22px; font-weight: 600; }
.ui-wm-sum::-webkit-details-marker { display: none; }
.ui-wm-sum__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ui-wm-sum__chev { flex: none; color: var(--ui-muted); transition: transform 120ms ease; }
details[open] > .ui-wm-sum .ui-wm-sum__chev { transform: rotate(180deg); }
.ui-wm-counts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 20px; font-weight: 700; }
.ui-wm-count { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-ink); }
.ui-wm-country__body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 12px; }
.ui-wm-place { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: var(--ui-radius-control); background: var(--ui-surface-2); }
.ui-wm-place.is-on { box-shadow: inset 0 0 0 2px var(--ui-ink); }
.ui-wm-place__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; overflow-wrap: anywhere; }
.ui-wm-place__h:focus { outline: none; }
.ui-wm-place__h:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; border-radius: 4px; }
.ui-wm-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-wm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; border-top: 1px solid var(--ui-line); }
.ui-wm-rows > .ui-wm-row:first-child { border-top: 0; }
.ui-wm-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; }
.ui-wm-row__main { display: flex; flex-direction: column; min-width: 0; }
.ui-wm-row__name { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-wm-row__meta { font-size: 13px; line-height: 18px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-wm-reason { border-top: 1px solid var(--ui-line); }
.ui-wm-reason > .ui-wm-rows { padding: 0 0 12px; }

/* Loading and the server-update state. */
.ui-wm-loading { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ui-wm-skelmap { display: block; height: 320px; border-radius: var(--ui-radius-control); }
.ui-wm-empty .ui-i { color: var(--ui-muted); }

@media (min-width: 768px) {
  .ui-wm { gap: 20px; }
  .ui-wm-controls { grid-template-columns: auto auto; justify-content: start; gap: 12px 32px; margin: 0; padding: 0; background: transparent; border-bottom: 0; }
  .ui-wm:not([data-wm-mode="ready"])::before { content: none; }
  .ui-wm-controls .ui-seg--fill { display: inline-flex; width: auto; }
  .ui-wm-controls .ui-seg--fill .ui-seg__opt { flex: none; padding: 0 16px; }
  .ui-wm-seg .ui-seg__opt { font-size: 14px; line-height: 20px; }
  .ui-wm-sum { font-size: 15px; }
  .ui-wm-grid { gap: 20px; }
  .ui-wm-mapcard, .ui-wm-places, .ui-wm-unplaced { padding: 20px; }
  .ui-wm-mapcard { padding: 16px; }
  .ui-wm-maphead { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .ui-wm-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .ui-wm-legend__n { margin-left: 0; }
  .ui-wm-tools { display: flex; gap: 8px; }
  .ui-wm-tools .ui-btn { padding: 0 14px; }
  .ui-wm-pin { gap: 10px; padding: 0 12px; }
  .ui-wm-map, .ui-wm-skelmap { height: 420px; }
  .ui-wm-row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
  .ui-wm-tag { padding-top: 2px; }
}

/* From 1024 the Unplaced list sits beside the map; the list of places spans below. */
@media (min-width: 1024px) {
  .ui-wm-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
  .ui-wm-mapcard { grid-column: 1; grid-row: 1; }
  .ui-wm-unplaced { grid-column: 2; grid-row: 1; }
  .ui-wm-places { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 1280px) {
  .ui-wm, .ui-wm-grid { gap: 24px; }
  .ui-wm-map, .ui-wm-skelmap { height: 480px; }
}