/*
  Zweck: NAV-Sensorkarten und Scan-Animationen.
  Zielpfad: /home/mckiede/public_html/design/system-activity.css
  Verantwortlich: mckie-Portal

  The core layout still lives in layout-*.css and the module/link components
  still live in components.css. Keeping this file separate makes it easy to
  remove or rework the decorative system-activity layer later.
*/

.sensor-master-svg {
  /*
    Must stay “painted” (non-zero size) so <use> clones render in header/rail/main.
    Zero-size masters break identical map display in several browsers.
  */
  position: absolute;
  left: -10000px;
  top: 0;
  width: 260px;
  height: 78px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.sensor-map__field-use {
  pointer-events: none;
}

.nav-sensor-map,
.sensor-map {
  --sensor-blue: var(--blue);
  --sensor-blue-light: var(--blue-light);
  --sensor-muted: rgb(167 174 189 / 16%);
}

/* Shared sensor control look; position/size differ for header vs. module rail (see below). */
.nav-sensor-map {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 14%, transparent), transparent 72%),
    var(--surface-accent);
  color: var(--muted);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 var(--segment-line-thin) color-mix(in srgb, var(--blue-light) 30%, transparent),
    inset 0.32rem 0 0 color-mix(in srgb, var(--blue) 22%, transparent);
}

.nav-sensor-map:hover,
.nav-sensor-map:focus-visible {
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 var(--segment-line-thin) color-mix(in srgb, var(--green) 36%, transparent),
    inset 0.32rem 0 0 color-mix(in srgb, var(--blue) 26%, transparent),
    0 0 1rem color-mix(in srgb, var(--blue-light) 18%, transparent);
}

.sensor-map {
  position: relative;
  min-height: 4.85rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%),
    var(--surface-accent);
  box-shadow:
    inset 0 0 0 var(--segment-line-thin) color-mix(in srgb, var(--blue-light) 28%, transparent),
    inset 0.32rem 0 0 color-mix(in srgb, var(--blue) 22%, transparent);
}

.sensor-map__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sensor-map__grid path {
  stroke: var(--sensor-muted);
  stroke-width: 0.55;
}

.sensor-map__routes path {
  fill: none;
  stroke: color-mix(in srgb, var(--blue-light) 38%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.9;
}

.sensor-map__star {
  fill: rgb(255 255 255 / 76%);
  filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--blue-light) 44%, transparent));
}

.sensor-map__star.is-soft {
  fill: color-mix(in srgb, var(--blue-light) 78%, transparent);
}

.sensor-map__star.is-dim {
  fill: rgb(167 174 189 / 42%);
  filter: none;
}

.sensor-map__star.is-pulse {
  animation: sensor-star-pulse 8s ease-in-out infinite;
}

.sensor-map__scan {
  opacity: 0.9;
  pointer-events: none;
  animation-play-state: paused;
}

.page-shell.is-sensor-synced .sensor-map__scan {
  animation-play-state: running;
}

.sensor-map__scan--ltr {
  animation: sensor-scan-ltr 18s ease-in-out infinite;
}

.sensor-map__scan--rtl {
  animation: sensor-scan-rtl 18s ease-in-out infinite;
}

.sensor-map__scan--yoyo {
  animation: sensor-scan-yoyo 14s ease-in-out infinite;
}

.sensor-map__label {
  position: absolute;
  z-index: 2;
  right: 0.55rem;
  bottom: 0.4rem;
  left: 0.55rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  max-width: calc(100% - 1.1rem);
  overflow: hidden;
  color: rgb(167 174 189 / 72%);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.sensor-map__label span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-console.is-sensor-active .module-view {
  display: none;
}

/* Die beiden kleinen Karten verschwinden während der Detailansicht. */
.page-shell.is-sensor-detail-open .header-brand .nav-sensor-map,
.page-shell.is-sensor-detail-open .nav-sensor-map--rail,
.page-shell.is-sensor-detail-open .module-rail > .nav-sensor-map--rail {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
}

.page-shell.is-sensor-detail-open .command-panel-matrix {
  align-self: start;
  height: auto;
}

.main-console .status-strip {
  flex: 0 0 auto;
}

.main-sensor-view {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0.55rem;
  align-content: start;
  min-height: 0;
  margin-top: 0.6rem;
  scroll-margin-top: 1rem;
}

.main-sensor-view[hidden] {
  display: none !important;
}

.main-sensor-view .system-label,
.main-sensor-view h2,
.sensor-main-note {
  margin: 0;
  text-transform: uppercase;
}

.main-sensor-view h2 {
  color: var(--peach);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 0.95;
}

.sensor-map--main {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}

.sensor-map--main .sensor-map__svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 260 / 78;
}

.sensor-main-note {
  color: rgb(167 174 189 / 72%);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}