/* ============================================================
   BUILDING MAP VIEWER — full-screen floor-plan overlay
   Styles for components/BuildingMapViewer.js. Sits below the
   DetailDrawer (z 180) so beacon taps slide the drawer on top.
   ============================================================ */
.bmv-scrim{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:18px;
  background:rgba(3,6,12,.7);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.bmv-scrim.open{opacity:1;pointer-events:auto}
.bmv-sheet{
  display:flex;flex-direction:column;gap:12px;
  width:min(1280px,100%);max-height:94vh;
  padding:16px 20px 14px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(16,24,40,.97),rgba(8,12,22,.97));
  border:1px solid var(--stroke-2);box-shadow:var(--shadow);
  transform:translateY(14px) scale(.985);transition:transform .3s var(--ease);
}
.bmv-scrim.open .bmv-sheet{transform:none}

/* header */
.bmv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bmv-title{display:flex;flex-direction:column;min-width:0;flex:1}
.bmv-title b{font-family:var(--font-display);font-size:1.1rem}
.bmv-title span{font-size:.74rem;color:var(--dim)}
.bmv-floors{display:flex;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--stroke);background:var(--surface)}
.bmv-floor{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--muted);
  padding:5px 12px;border-radius:999px;border:0;background:none;cursor:pointer;transition:.2s;
}
.bmv-floor:hover{color:var(--text)}
.bmv-floor.active{color:#04121a;background:var(--grad)}

/* controls */
.bmv-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bmv-chips{margin-bottom:0;flex:1}
.bmv-heatcheck{flex:none}
.bmv-nodata{font-size:.8rem;color:var(--dim)}

/* stage — a Leaflet CRS.Simple image plane: wheel zoom, grab-drag pan */
.bmv-stage-wrap{
  position:relative;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--stroke);background:rgba(5,8,15,.55);
}
.bmv-map{width:100%;height:min(68vh,820px)}
.bmv-map.leaflet-container{background:transparent}
.bmv-plan{
  /* soften white architectural drawings into the dark theme */
  filter:invert(.92) hue-rotate(180deg) contrast(.82) brightness(.92);
}
.bmv-plan.raw{filter:none}
.bmv-state{
  display:none;position:absolute;inset:0;z-index:600;place-items:center;pointer-events:none;
  color:var(--muted);font-size:.88rem;padding:30px;
}
.bmv-state.show{display:grid}
.bmv-state.err{color:var(--red)}
.bmv-note{margin:0;font-size:.72rem;color:var(--dim)}

/* beacons — divIcon markers; Leaflet anchors a 0×0 wrap, we center on it */
.bmv-beacon-wrap{background:none;border:0;line-height:1.4}
.bmv-beacon{
  --c:var(--dim);
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);cursor:pointer;
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--text);
  padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb, var(--c) 20%, rgba(8,12,22,.92));
  border:2px solid var(--c);
  box-shadow:0 0 12px -2px var(--c), 0 4px 12px rgba(0,0,0,.55);
  transition:transform .15s var(--ease);
}
.bmv-beacon:hover{transform:translate(-50%,-50%) scale(1.12)}
.bmv-beacon.online{--c:var(--teal)}
.bmv-beacon.stale{--c:var(--amber)}
.bmv-beacon.offline{--c:var(--dim);opacity:.75}
.bmv-beacon.alert{--c:var(--red)}
.bmv-beacon.alert::after{
  content:"";position:absolute;inset:-3px;border-radius:999px;
  border:2px solid var(--red);animation:bmv-pulse 1.6s ease-out infinite;
}
@keyframes bmv-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.bmv-beacon.has-bin{--c:var(--bin-color)}
.bmv-val i{font-style:normal;font-size:.62rem;color:var(--muted);font-weight:500;margin-left:2px}
.bmv-tag{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.64rem;font-weight:500;color:var(--muted);
  background:rgba(8,12,22,.92);border:1px solid var(--stroke);border-radius:6px;padding:2px 7px;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.bmv-beacon:hover .bmv-tag,.bmv-beacon:focus-visible .bmv-tag{opacity:1}
/* nearest-unit highlight while a tag chip is hovered (requirement: tag AND closest unit) */
.bmv-beacon.bmv-near{
  outline:2px solid var(--teal);outline-offset:3px;
  box-shadow:0 0 22px -2px var(--teal), 0 4px 12px rgba(0,0,0,.55);
}

/* ---------- BLE tag chips (people/assets) — deliberately NOT the sensor
   pill: squared corners + type glyph so a moving badge never reads as a
   wall-mounted unit. --tc = tag-type color from core/ble.js. ---------- */
.bmv-rtag-wrap{background:none;border:0;line-height:1.4}
.bmv-rtag{
  --tc:var(--teal);
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-display);font-weight:600;font-size:.74rem;color:var(--text);
  padding:3px 9px 3px 7px;border-radius:7px;
  background:color-mix(in srgb, var(--tc) 26%, rgba(8,12,22,.94));
  border:1.5px solid var(--tc);
  box-shadow:0 0 14px -3px var(--tc), 0 4px 12px rgba(0,0,0,.55);
  transition:transform .15s var(--ease), opacity .3s;
}
.bmv-rtag:hover{transform:translate(-50%,-50%) scale(1.1)}
.bmv-rtag-glyph{font-size:.62rem;color:var(--tc);line-height:1}
.bmv-rtag-label{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmv-rtag-batt{font-size:.6rem;color:var(--amber);line-height:1}
.bmv-rtag.fading{opacity:.55;border-style:dashed}
.bmv-rtag.presence{border-style:dashed;box-shadow:0 4px 12px rgba(0,0,0,.55)}
.bmv-rtag.assist{
  --tc:var(--red);
  animation:bmv-rtag-flash 1.1s ease-in-out infinite;
}
.bmv-rtag.assist::after{
  content:"";position:absolute;inset:-4px;border-radius:10px;
  border:2px solid var(--red);animation:bmv-pulse 1.2s ease-out infinite;
}
@keyframes bmv-rtag-flash{
  0%,100%{background:color-mix(in srgb, var(--red) 30%, rgba(8,12,22,.94))}
  50%{background:color-mix(in srgb, var(--red) 62%, rgba(8,12,22,.94))}
}
@media (prefers-reduced-motion:reduce){
  .bmv-rtag.assist,.bmv-rtag.assist::after{animation:none}
}

/* tag detail popup (Leaflet popup, dark skin) */
.bmv-pop .leaflet-popup-content-wrapper{
  background:rgba(10,15,28,.97);color:var(--text);border:1px solid var(--stroke-2);
  border-radius:var(--r-sm);box-shadow:var(--shadow);
}
.bmv-pop .leaflet-popup-tip{background:rgba(10,15,28,.97);border:1px solid var(--stroke-2)}
.bmv-pop .leaflet-popup-content{margin:12px 14px;font-family:var(--font-body);font-size:.78rem}
.bmv-pop .leaflet-popup-close-button{color:var(--muted)}
.bmv-pop-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.bmv-pop-head b{font-family:var(--font-display);font-size:.9rem}
.bmv-pop-head .bmv-rtag-glyph{position:static;font-size:.7rem}
.bmv-pop-kind{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bmv-pop-row{display:flex;gap:8px;padding:2px 0}
.bmv-pop-row i{font-style:normal;width:84px;flex:none;color:var(--dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding-top:1px}
.bmv-pop-alarm{color:var(--red);font-weight:600;margin-bottom:6px}
.bmv-pop-track{margin-top:9px}

/* ---------- time-lapse mode ---------- */
.bmv-tl-btn{flex:none;font-weight:600}
.bmv-tl-btn:disabled{opacity:.4;cursor:default}
.bmv-tlmount:empty{display:none}
.bmv-tl{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 12px;border-radius:var(--r);
  border:1px solid var(--stroke);background:var(--surface);
}
.tl-ranges,.tl-modes{flex:none}
.tl-modes .bmv-floor:disabled{opacity:.35;cursor:default}
.tl-play,.tl-speed{
  flex:none;font-family:var(--font-display);font-weight:700;color:var(--text);
  width:34px;height:30px;border-radius:8px;border:1px solid var(--stroke);
  background:none;cursor:pointer;transition:.2s;
}
.tl-play:hover,.tl-speed:hover{border-color:var(--teal);color:var(--teal)}
.tl-play{font-size:.72rem}
.tl-speed{font-size:.78rem}
.tl-scrub{flex:1;min-width:140px;accent-color:var(--teal);cursor:pointer}
.tl-time{
  flex:none;min-width:11ch;text-align:center;
  font-family:var(--font-display);font-size:.8rem;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.tl-busy{font-size:.76rem;color:var(--muted)}
.tl-busy.err{color:var(--red)}
.bmv-tl.busy .tl-scrub,.bmv-tl.busy .tl-play,.bmv-tl.busy .tl-speed,.bmv-tl.busy .tl-modes{opacity:.35;pointer-events:none}

/* legend — the bins scale with real-unit boundary marks */
.tl-legend{flex:none;display:flex;align-items:center;gap:8px}
.tl-legend-name{font-size:.68rem;color:var(--muted)}
.tl-legend-bar{
  position:relative;width:150px;height:10px;border-radius:5px;
  border:1px solid rgba(255,255,255,.18);margin-bottom:10px;margin-top:4px;
}
.tl-legend-bar i{
  position:absolute;top:calc(100% + 2px);transform:translateX(-50%);
  font-style:normal;font-size:.6rem;color:var(--dim);line-height:1;
  font-variant-numeric:tabular-nums;
}
/* while in time-lapse, the beacon status border colors would lie (they're
   live freshness) — let the bin color / neutral take over */
.tl-mode .bmv-beacon{--c:var(--dim)}
.tl-mode .bmv-beacon.has-bin{--c:var(--bin-color)}
.tl-mode .bmv-beacon.alert::after{display:none}

/* ---------- tag-trail mode (TagTrailPlayer — rides the .bmv-tl transport) ---------- */
.bmv-pop-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.bmv-pop-actions .bmv-pop-track{margin-top:0}
.tk-trail-name{
  display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;
  color:var(--tc,var(--text));white-space:nowrap;
}
.tk-trail-status{font-size:.72rem;color:var(--muted);white-space:nowrap}
.tk-trail-status.dim{color:var(--dim)}
/* the playback chip is display-only — no hover affordance */
.tk-trail-chip{cursor:default;pointer-events:none}

@media(max-width:760px){
  .bmv-scrim{padding:8px}
  .bmv-sheet{padding:12px 12px 10px;max-height:96vh}
  .bmv-map{height:56vh}
  .bmv-chips{overflow-x:auto;flex-wrap:nowrap}
  .an-chip{white-space:nowrap;flex:none}
  .tl-legend{display:none}
  .tl-time{min-width:9ch}
}