/* bss-llanishen — scope-map chrome. Layers over atrium-storage.css
   for shared panels/compass; everything new keys off the theme CSS
   custom properties set by js/theme.js:
     --th-primary --th-edge --th-label --th-glow --th-dim            */

:root {
  --twin-mode: outdoor;
  --th-primary: #f5a623;
  --th-edge: #f8b545;
  --th-label: #fac060;
  --th-glow: #fbc468;
  --th-dim: #8a6a2a;
}

/* ── Track bracket overlay ─────────────────────────────────────── */
#track-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 18;            /* above canvas, below HUD panels */
  overflow: hidden;
}

.track-box {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
  cursor: pointer;
  --tb: #3eff8a;
  transition: opacity 0.15s;
}
.track-box.track-veh { --tb: #9d7fff; }
.track-box.track-alert { --tb: #ff3040; }

/* Corner brackets — four L shapes from one bordered span each */
.track-box i {
  position: absolute;
  width: 30%; height: 30%;
  border: 1.5px solid var(--tb);
  opacity: 0.9;
}
.track-box i:nth-child(1) { top: 0;    left: 0;    border-right: none; border-bottom: none; }
.track-box i:nth-child(2) { top: 0;    right: 0;   border-left: none;  border-bottom: none; }
.track-box i:nth-child(3) { bottom: 0; left: 0;    border-right: none; border-top: none; }
.track-box i:nth-child(4) { bottom: 0; right: 0;   border-left: none;  border-top: none; }

.track-box.selected i { border-width: 2.5px; opacity: 1; box-shadow: 0 0 8px var(--tb); }

.track-tag {
  position: absolute;
  left: calc(100% + 7px);
  top: -4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  color: var(--tb);
  background: rgba(6, 13, 26, 0.72);
  border-left: 2px solid var(--tb);
  padding: 2px 6px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* ── REC / stats bar ───────────────────────────────────────────── */
#rec-bar {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(6, 13, 26, 0.78);
  border: 1px solid rgba(245, 166, 35, 0.18);
  border-color: color-mix(in srgb, var(--th-primary) 22%, transparent);
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #e8ece0;
  z-index: 30;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3040;
  box-shadow: 0 0 8px #ff3040;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}
.rec-sep {
  width: 1px; height: 12px;
  background: rgba(232, 236, 224, 0.16);
}
.rec-item { color: rgba(232, 236, 224, 0.85); }
.rec-geo { color: var(--th-label); }

/* ── Inspect panel ─────────────────────────────────────────────── */
/* Right column, stacked UNDER the Occupancy panel (#panel-stats).
   The `top` here is only a fallback for first paint — interaction.js
   pins it to the live bottom of #panel-stats on open, so the two never
   overlap regardless of content height or minimize state. */
#inspect-panel {
  position: fixed;
  right: 28px;
  top: 180px;
  width: 280px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: rgba(6, 13, 26, 0.94);
  border: 1px solid color-mix(in srgb, var(--th-primary) 32%, transparent);
  border-radius: 10px;
  padding: 14px 16px;
  z-index: 40;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  font-family: Inter, sans-serif;
}
.ip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ip-head-btns { display: flex; align-items: center; gap: 4px; }
.ip-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  color: var(--th-label);
}
#inspect-close {
  background: transparent;
  border: none;
  color: #8a93a3;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.ip-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #e8ece0;
  border-bottom: 1px solid rgba(232, 236, 224, 0.1);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.ip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ip-row span {
  flex: 0 0 64px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: rgba(232, 236, 224, 0.45);
  white-space: nowrap;
}
.ip-row b {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  color: #e8ece0;
  text-align: right;
  word-break: break-word;
}

/* ── Theme switcher + tracks toggle (status bar chips) ─────────── */
#theme-switch {
  display: flex;
  gap: 5px;
  margin-left: 8px;
  pointer-events: auto;
  align-items: center;
}
#theme-switch button {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 236, 224, 0.25);
  background: var(--swatch);
  cursor: pointer;
  padding: 0;
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
}
#theme-switch button:hover { opacity: 0.85; }
#theme-switch button.active {
  opacity: 1;
  transform: scale(1.12);
  border-color: #e8ece0;
  box-shadow: 0 0 8px var(--swatch);
}

#tracks-toggle {
  margin-left: 8px;
  pointer-events: auto;
  padding: 6px 12px;
  background: rgba(245, 166, 35, 0.06);
  color: rgba(232, 236, 224, 0.5);
  border: 1px solid rgba(232, 236, 224, 0.18);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.6px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#tracks-toggle.active {
  background: color-mix(in srgb, var(--th-primary) 16%, transparent);
  color: var(--th-primary);
  border-color: color-mix(in srgb, var(--th-primary) 40%, transparent);
}

/* View switch picks up the two extra buttons without extra rules —
   atrium-storage.css styles #view-switch button generically. */

/* Hide HUD: our toggle puts .hud-hidden on <body>, but the inherited
   storage stylesheet's `.hud-hidden { opacity: 0 }` is meant for
   individual elements — on body it faded the whole page, canvas
   included. Neutralize it on body and fade the chrome layers instead;
   the HIDE HUD button itself stays visible as the way back. */
body.hud-hidden {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.hud-hidden #brand,
body.hud-hidden #panel-nodes,
body.hud-hidden #panel-stats,
body.hud-hidden #ops-compass,
body.hud-hidden #capabilities-bar,
body.hud-hidden #detector-filter,
body.hud-hidden #heatmap-panel,
body.hud-hidden #rec-bar,
body.hud-hidden #inspect-panel,
body.hud-hidden #zoom-controls,
body.hud-hidden #status-bar,
body.hud-hidden #tools-menu,
body.hud-hidden #track-overlay {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}

/* ── Header organisation rework ─────────────────────────────────────
   Brand: a quiet "‹ Dashboard" breadcrumb sits above the wordmark,
   left-anchored — no floating mid-header pill. Status bar: status +
   camera on the left, then a divider, then the scene toggles and a
   single Tools menu so the bar stays calm instead of a wall of
   coloured buttons. */
#brand { align-items: flex-start !important; gap: 2px; }
#brand-tagline { text-align: left !important; margin-top: 4px !important; }

/* Breadcrumb back-link (replaces the old console-back pill) */
#brand-home.brand-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 7px 0; padding: 0;
  background: none; border: none; box-shadow: none; backdrop-filter: none;
  border-radius: 0;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  color: rgba(232, 236, 224, 0.5);
  pointer-events: auto; cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
}
#brand-home.brand-back svg { transition: transform 0.18s ease; }
#brand-home.brand-back:hover { color: var(--th-primary, #f5a623); transform: none; }
#brand-home.brand-back:hover svg { transform: translateX(-2px); }

/* Status-bar group divider */
.sb-div { width: 1px; height: 20px; background: rgba(232, 236, 224, 0.16); margin: 0 2px; }

/* The toggle/tools cluster */
#twin-switch { display: flex; align-items: center; gap: 6px; pointer-events: auto; }

/* Unified control button — one calm style for Tracks / Hide HUD / Tools */
.tw-ctl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px;
  background: rgba(245, 166, 35, 0.06);
  color: rgba(232, 236, 224, 0.6);
  border: 1px solid rgba(232, 236, 224, 0.16);
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.tw-ctl:hover {
  background: color-mix(in srgb, var(--th-primary) 12%, transparent);
  color: var(--th-primary); border-color: color-mix(in srgb, var(--th-primary) 34%, transparent);
}
/* active (pressed-on) state for the toggles */
#tracks-toggle.tw-ctl.active, #tools-toggle.tw-ctl[aria-expanded="true"] {
  background: color-mix(in srgb, var(--th-primary) 16%, transparent);
  color: var(--th-primary); border-color: color-mix(in srgb, var(--th-primary) 42%, transparent);
}
.tw-chev { font-size: 8px; transition: transform 0.2s ease; opacity: 0.8; }
#tools-toggle[aria-expanded="true"] .tw-chev { transform: rotate(180deg); }

/* Tools dropdown — secondary actions tucked away */
.tw-tools { position: relative; }
#tools-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 184px; padding: 6px;
  background: rgba(6, 13, 26, 0.96);
  border: 1px solid color-mix(in srgb, var(--th-primary) 26%, transparent);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#tools-menu[hidden] { display: none; }
.tw-mi {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: none; border-radius: 7px; background: transparent;
  color: rgba(232, 236, 224, 0.82); text-align: left; width: 100%;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.4px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tw-mi:hover { background: color-mix(in srgb, var(--th-primary) 12%, transparent); color: #e8ece0; }
.tw-mi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 18px;
  font-size: 12px; color: var(--th-primary);
  border: 1px solid color-mix(in srgb, var(--th-primary) 30%, transparent); border-radius: 5px;
}

/* Compass sits under the REC bar — the storage default (top 24px,
   centred) collided with the outdoor view/theme/tracks buttons. */
#ops-compass {
  top: 102px !important;
}

/* ── Collapsible panels (minimize / maximize) ──────────────────── */
/* A small chevron in each panel header collapses the body down to just
   the title bar so the operator can park panels they aren't using.
   State persists in localStorage (see hud.js initPanelCollapse). */
.panel-collapse,
.ip-collapse {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #8a93a3;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.panel-collapse:hover,
.ip-collapse:hover {
  color: var(--th-primary);
  background: color-mix(in srgb, var(--th-primary) 14%, transparent);
}
/* The inspect collapse chevron sits inline with the close button, so it
   must not steal the whole row the way the panel-header one does. */
.ip-collapse { margin-left: 0; }

/* data-panel: hide everything below the header when collapsed */
.data-panel.collapsed {
  max-height: none;
  overflow: visible;
}
.data-panel.collapsed > :not(.panel-header) { display: none; }
.data-panel.collapsed .panel-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* inspect panel collapsed — keep the head, drop title + rows */
#inspect-panel.collapsed {
  max-height: none;
  overflow: visible;
}
#inspect-panel.collapsed .ip-title,
#inspect-panel.collapsed #inspect-rows { display: none; }
#inspect-panel.collapsed .ip-head { margin-bottom: 0; }