/* Live map and geofences (prefix pui-map-): the truck list beside the map, the legend over it, and the truck sheet.
   Boards: LiveMap.dc.html, LiveMapTruckSheet.dc.html */

.pui-map-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.pui-map-list {
  flex: 1 1 320px;
  max-width: 400px;
  min-width: 0;
}

.pui-map-stage {
  flex: 999 1 560px;
  min-width: 0;
}

/* The list scrolls inside its card so a long fleet never pushes the map down. */
.pui-map-list .pui-list-table {
  max-height: min(72vh, 680px);
  overflow-y: auto;
}

/* Live map: list card and map are one row of equal height. */
.pui-map-layout--live { gap: 20px; align-items: stretch; }
.pui-map-list--live.cn-card {
  flex: 1 1 320px;
  max-width: 400px;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.pui-map-stage--live {
  flex: 999 1 560px;
  min-width: 0;
  min-height: 640px;
  position: relative;
}
.pui-map-stage--live > .pui-map-canvas,
.pui-map-stage--live > [role="application"] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--muted);
}

.pui-map-card-head { padding: 16px 20px 12px; }
.pui-map-card-title { font-size: 15px; font-weight: 600; }
.pui-map-card-description { font-size: 13px; color: var(--muted-foreground); }
.pui-map-filters { padding: 0 16px 12px; align-items: center; }
.pui-map-count { padding: 10px 16px; font-size: 12px; color: var(--muted-foreground); border-top: 1px solid var(--border); margin-top: auto; }

.pui-map-group-h {
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  background: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pui-map-group-h > span:first-of-type { font-size: 12px; }

.pui-map-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
}
.pui-map-dot-info { background: var(--tone-info-fg); }
.pui-map-dot-neutral { background: var(--tone-neutral-fg); }
.pui-map-dot-danger { background: var(--tone-danger-fg); }

.pui-map-number { width: 34px; flex: none; font-weight: 600; }

.pui-map-row.cn-button,
.pui-map-row--static {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 0;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  white-space: normal;
  box-sizing: border-box;
}
.pui-map-row--static { cursor: default; }
.pui-map-row-selected.cn-button { background: var(--tone-info-bg); }

/* Legend and "Live" pill sit over the map, as the board draws them. */
.pui-map-legend { position: absolute; left: 16px; top: 16px; z-index: 5; padding: 10px 12px; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; pointer-events: none; }
.pui-map-legend-title { font-size: 12px; font-weight: 600; }
.pui-map-legend-item { font-size: 12px; color: var(--muted-foreground); }
.pui-map-line { width: 16px; border-top: 3px solid var(--tone-info-fg); flex: none; }
.pui-map-line--planned { border-top: 2px dashed oklch(0.6 0.02 258); }
.pui-map-live { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--card); color: var(--tone-success-fg); pointer-events: none; }
.pui-map-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* The truck sheet is 440px wide and leaves the map clickable beside it. */
.pui-map-sheet .cn-sheet { width: min(440px, 100vw); max-width: 100vw; display: flex; flex-direction: column; }
/* Invisible, not removed: SharpCompose closes the sheet on Escape by clicking this backdrop, which must stay rendered. */
.pui-map-sheet [data-slot="sheet-overlay"] { opacity: 0; background: transparent; pointer-events: none; }
.pui-map-sheet.cn-dialog-root { pointer-events: none; }
.pui-map-sheet .cn-sheet { pointer-events: auto; }

/* Geofence cards. */
.pui-map-geofence { width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pui-map-geofence-selected { background: var(--tone-info-bg); }

/* Truck sheet: header on two lines, the current-load figures in two columns. */
.pui-map-sheet .pui-sheet-header { padding: 20px 24px 16px; gap: 8px; border-bottom: 1px solid var(--border); }
.pui-map-sheet .pui-sheet-header [data-slot="dialog-title"] { font-size: 17px; font-weight: 600; }
.pui-map-sheet-driver { font-size: 14px; font-weight: 500; color: var(--foreground); }
.pui-map-sheet .pui-sheet-section { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.pui-map-sheet .pui-fields { grid-template-columns: 1fr 1fr; gap: 14px; }

/* Review fixes. The legend moves to the top right: Google draws its Map / Satellite switch top left, and the two overlapped. */
.pui-map-legend { left: auto; right: 16px; }
/* Truck numbers such as T-301 never wrap at the hyphen. */
.pui-map-number { width: auto; min-width: 52px; white-space: nowrap; }
/* Geofence map fills its whole frame (no empty strip under it). */
.pui-settingsb-geo .pui-map-stage { position: relative; }
.pui-settingsb-geo .pui-map-stage > [role="application"] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; }
/* The truck search keeps a readable width: the status select wraps under it instead of squeezing the placeholder. */
.pui-map-filters { flex-wrap: wrap; }
.pui-map-filters > :first-child { flex: 1 1 100% !important; }
/* The "Live, updated" pill sits above Google's logo, never over it. */
.pui-map-live { bottom: 36px; }