/* PrairieOps — styles/map.css (2026-09-15): satellite map overlay (js/map.js) */
.po-map-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
/* Sit UNDER the bottom nav pill (#sidebar z-index 300) so the nav stays usable. */
#po-map-overlay.task-detail-overlay { z-index: 299 !important; }
/* Bottom-anchored map UI clears the floating nav pill (24px + ~64px) and the home indicator. */
:root { --po-map-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
/* [hidden] must beat the display:flex rules below */
.po-map-modal [hidden] { display: none !important; }
/* Yard picker pill (floating, top-left of the map) */
.po-map-yardbtn { position: absolute; top: 10px; left: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: rgba(14,14,14,.94); border: 1px solid var(--border); border-radius: 999px; padding: 9px 12px 9px 14px; color: var(--text-primary); font-size: 14px; font-weight: 600; max-width: 60%; }
.po-map-yardbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-map-yardrow { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; font-size: 15px; }
.po-map-yardrow.is-on { color: #c49060; }
.po-map-stage { position: relative; flex: 1; min-height: 0; }
.po-map-stage .po-map-canvas { position: absolute !important; inset: 0; width: 100%; height: 100%; background: #0a0a0a; } /* !important: maplibre-gl.css sets .maplibregl-map{position:relative} */
.po-map-canvas .maplibregl-ctrl-attrib { font-size: 9px; }
.po-map-canvas .maplibregl-ctrl-group { background: rgba(20,20,20,.9); border: 1px solid rgba(255,255,255,.12); }
.po-map-canvas .maplibregl-ctrl-group button { filter: invert(1); }

/* Bin circle: ring = crop colour, fill rises from the bottom = % full */
.po-bin { position: relative; border-radius: 50%; border: 3px solid var(--bin-color); background: rgba(10,10,10,.55); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.6); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); -webkit-tap-highlight-color: transparent; }
.po-bin-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bin-color); opacity: .55; transition: height .25s ease; }
.po-bin-lbl { position: relative; line-height: 1; }
.po-bin.is-placing { border-style: dashed; box-shadow: 0 0 0 4px rgba(196,144,96,.45), 0 2px 8px rgba(0,0,0,.6); }

.po-field-lbl { color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7); white-space: nowrap; pointer-events: auto; cursor: pointer; }

/* Card (bin or field) */
.po-map-card { position: absolute; left: 10px; right: 10px; bottom: var(--po-map-bottom); background: rgba(14,14,14,.96); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.6); z-index: 5; }
.po-map-card-top { display: flex; align-items: center; gap: 10px; }
.po-map-card-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.po-map-card-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-map-card-meta { font-size: 12px; color: var(--text-muted); }
.po-map-card-x { background: transparent; border: 0; color: var(--text-muted); font-size: 22px; line-height: 1; padding: 4px 6px; }
.po-map-card-num { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.po-map-card-num span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.po-map-card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.po-map-logs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 40vh; overflow-y: auto; }
.po-map-log { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 9px 11px; color: var(--text-primary); font-size: 14px; }

/* Placing bar + unplaced strip (admin) */
.po-map-placebar { position: absolute; left: 10px; right: 10px; bottom: var(--po-map-bottom); display: flex; flex-direction: column; gap: 8px; background: rgba(14,14,14,.94); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 10px; font-size: 13px; z-index: 5; }
.po-map-placerow { display: flex; align-items: center; gap: 8px; }
.po-map-placerow > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-map-sizerow input[type="range"] { flex: 1; min-width: 0; accent-color: #c49060; height: 28px; }
.po-map-sizelbl { flex: 0 0 auto !important; color: var(--text-muted); font-size: 12px; }
.po-map-sizeval { flex: 0 0 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: #c49060; font-weight: 600; }
.po-map-unplaced { display: flex; gap: 8px; align-items: center; padding: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.po-map-unplaced .tk-chip { flex: 0 0 auto; }
.po-map-unplaced-lbl { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }

/* Pick-a-point pin (Select location on map) */
.po-pin { width: 28px; height: 40px; position: relative; cursor: grab; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.po-pin-head { position: absolute; top: 0; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #c49060; border: 3px solid #fff; box-sizing: border-box; }
.po-pin-tail { position: absolute; top: 20px; left: 10px; width: 8px; height: 20px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Zoomed-out yard pill (bins collapse below BIN_MIN_ZOOM) */
.po-yardpill { display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(14,14,14,.9); border: 1.5px solid #c49060; border-radius: 999px; padding: 6px 12px; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.6); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.po-yardpill-name { font-size: 13px; font-weight: 700; }
.po-yardpill-meta { font-size: 11px; color: #c49060; font-weight: 600; }

.po-map-link { background: transparent; border: 0; color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.po-map-card-actions { align-items: center; }
.po-map-canvas .maplibregl-ctrl-bottom-right { bottom: calc(var(--po-map-bottom) - 18px); }
.po-amt-toggle { margin: 0 0 12px; }
.po-amt-toggle .pt-subbtn[disabled] { opacity: .4; }
#po-map-overlay.is-inline { backdrop-filter: none; background: #000; }
#po-map-overlay.is-inline .po-map-modal { height: 100%; max-height: 100%; }
.po-amt-pair input { font-size: 24px; font-weight: 700; height: 56px; text-align: center; }
.po-amt-pair input[disabled] { opacity: .4; }
.po-map-offline { position: absolute; left: 10px; bottom: var(--po-map-bottom); z-index: 4; background: rgba(14,14,14,.9); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.po-map-card:not([hidden]) ~ .po-map-offline, .po-map-placebar:not([hidden]) ~ .po-map-offline { display: none; }