// J3 UI-Redesign — Topo: 3D-Verbund-Topologie als Leitstand-Instrument (WebGL-Panel)
// Autor: Jarvis-3 (J3) · 2026-09-05 · v0.1.0
@use 'abstracts' as *;

.topo {
  overflow: hidden;

  .topo-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

  .topo-count {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--fs-xs); color: var(--text-2);
    .status-dot.dot-neubau { background: var(--info); }
  }

  .icon-btn { width: 24px; height: 24px; }
}

// ── Bühne ─────────────────────────────────────────────────────────────
.topo-stage {
  position: relative;
  height: 380px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(130% 90% at 50% -10%, var(--glow) 0%, transparent 55%),
    var(--bg-inset);
  overflow: hidden;
  cursor: grab;
  &:active { cursor: grabbing; }
  touch-action: pan-y; // horizontales Drehen erlaubt, vertikales Scrollen bleibt

  canvas.j3-topo-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }

  @include bp-down(md) { height: 280px; }
}

// Instrumenten-Rahmen: vier Eckwinkel über der Bühne
.topo-frame {
  position: absolute; inset: var(--s-2); z-index: 2;
  pointer-events: none;

  &::before, &::after {
    content: ""; position: absolute; width: 18px; height: 18px;
    border: 1px solid var(--line-2);
  }
  &::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
  &::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 3px; }

  > i, > b {
    position: absolute; bottom: 0; width: 18px; height: 18px;
    border: 1px solid var(--line-2);
  }
  > i { left: 0;  border-right: 0; border-top: 0; border-bottom-left-radius: 3px; }
  > b { right: 0; border-left: 0;  border-top: 0; border-bottom-right-radius: 3px; }
}

// ── Hover-Readout (Instrumenten-Anzeige) ──────────────────────────────
.topo-readout {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 3;
  min-width: 200px; max-width: 270px;
  background: color-mix(in srgb, var(--bg-1) 84%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  pointer-events: none;

  .topo-readout-name {
    display: flex; align-items: center; gap: var(--s-2);
    font-weight: 700; font-size: var(--fs-base);
    .status-dot { flex: none; }
  }
  .topo-readout-desc { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
  .topo-readout-meta {
    display: flex; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-2); font-size: var(--fs-xs);
    font-family: var(--font-mono);
  }
}

// ── Fallback (kein WebGL / reduced-motion) ────────────────────────────
.topo-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); text-align: center;
  color: var(--text-2); font-size: var(--fs-sm);
  svg { width: 22px; height: 22px; color: var(--text-3); }
  p { margin: 0; }
  a { color: var(--primary-text); text-decoration: none; }
  a:hover { text-decoration: underline; }
}
.topo-stage.topo-dead { cursor: default; }

// ── Fußzeile des Instruments ──────────────────────────────────────────
.topo-foot {
  display: flex; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-2);

  .topo-fps { font-family: var(--font-mono); min-width: 110px; text-align: right; }

  @include bp-down(md) {
    .topo-hint { display: none; }
  }
}