/* structure-overlay.css — 1:1-Kopie des Style-Blocks aus
   CoreViewerStructureOverlay.vue (Bestand), entscoped (SPEC-0026 §7.2).
   Einzige Ergänzungen: Host-Regel .cw-structure-overlay + Default-
   Position (der Bestand positioniert über overlayPos-Props). */

.cw-structure-overlay { display: contents; }

.line-structure-overlay {
  position: absolute;
  z-index: 255;
  width: min(460px, calc(100% - 104px));
  max-width: min(560px, calc(100% - 104px));
  height: max(320px, calc(100% - var(--overlay-top, 0px) - 16px));
  max-height: calc(100% - var(--overlay-top, 0px) - 16px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
  color: var(--text);
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(18px);
}

.line-structure-header {
  flex: 0 0 auto;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: visible;
  background: var(--surface-elevated);
}

.line-structure-header::before {
  content: '';
  position: absolute;
  inset: -40% 10% auto 10%;
  height: 110px;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  opacity: 0.58;
  pointer-events: none;
}

.line-structure-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.line-structure-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.line-structure-title-block {
  min-width: 0;
}

.line-structure-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.line-structure-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.line-structure-actions button {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.line-structure-actions button:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.viewer-panel-action-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-panel-action-icon--close {
  stroke-width: 2.25;
}

.line-structure-search-input {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.2;
}

.line-structure-search-input::placeholder {
  color: var(--text-soft);
}

/* SPEC-0646 — Klasse C: der Ring war da, stand aber auf `:focus`.
   Fuer ein Textfeld verhaltensgleich, benennt die Absicht aber richtig
   und ist das Gegenstueck, das der Waechter zum `outline: none` sucht. */
.line-structure-search-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.line-structure-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 4px;
  padding-bottom: 8px;
  overscroll-behavior: contain;
}

.viewer-structure-tree-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.viewer-structure-tree-root,
.viewer-structure-node-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 8px;
}

.viewer-structure-node-header--asset-actions {
  grid-template-columns: minmax(0, 1fr) 44px 44px;
}

.structure-tree-children {
  margin-left: 14px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.structure-tree-children::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
  box-shadow: var(--shadow-card);
}

.viewer-structure-node,
.viewer-structure-asset-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Highlight the asset row currently selected via the shared
   viewerInteractionStore (Live-Viewer click, Area-Builder click,
   or Struktur-Tree click). */
.viewer-structure-asset-group.is-active,
.viewer-structure-node-header--asset-actions.is-active {
  background: rgba(56, 189, 248, 0.18); /* @allow-hardcoded-color: viewer-selection highlight */
  border-radius: 6px;
  outline: 1px solid rgba(56, 189, 248, 0.55); /* @allow-hardcoded-color: viewer-selection highlight */
  outline-offset: -1px;
}

.viewer-structure-node::before,
.viewer-structure-asset-group::before,
.viewer-structure-child-list > .viewer-structure-asset-child::before,
.viewer-structure-grandchild-list > .viewer-structure-node-header::before,
.viewer-structure-sensor-list > .viewer-structure-node-header::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 20px;
  width: 14px;
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
}

.viewer-structure-child-list,
.viewer-structure-grandchild-list,
.viewer-structure-sensor-list {
  margin-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  position: relative;
}

.viewer-structure-child-list::after,
.viewer-structure-grandchild-list::after,
.viewer-structure-sensor-list::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--primary-soft);
}

.viewer-structure-asset-child,
.viewer-structure-grandchild-list > .viewer-structure-node-header,
.viewer-structure-sensor-list > .viewer-structure-node-header {
  position: relative;
}

.viewer-structure-node--unassigned {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--warning);
}

.viewer-structure-summary,
.structure-tree-leaf-btn {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-elevated);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
}

.viewer-structure-summary::before,
.structure-tree-leaf-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--primary-soft) 48%, transparent 100%);
  opacity: 0.40;
  pointer-events: none;
}

.viewer-structure-summary:hover,
.structure-tree-leaf-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--shadow-overlay);
}

.viewer-structure-summary--area {
  border-color: var(--border-strong);
  background: var(--primary-soft);
}

.viewer-structure-summary--branch {
  background: var(--surface-elevated);
}

.viewer-structure-summary--static {
  cursor: default;
}

.viewer-structure-summary--static:hover {
  border-color: var(--border);
  background: var(--surface-elevated);
}

.viewer-structure-content,
.structure-tree-leaf-label {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.structure-tree-icon,
.structure-tree-chevron,
.structure-tree-leaf-icon {
  flex: 0 0 auto;
}

.structure-tree-icon {
  font-size: 18px;
  color: var(--text-muted);
}

.structure-tree-chevron {
  width: 28px;
  height: 28px;
  font-size: 18px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.structure-tree-chevron.is-open {
  transform: rotate(90deg);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.structure-tree-name {
  min-width: 0;
  width: 100%;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.structure-tree-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.15;
  white-space: normal;
}

.structure-tree-leaf-list {
  margin: 2px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  position: relative;
}

.structure-tree-leaf-list::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--primary-soft);
}

.viewer-structure-asset-list {
  margin-left: 10px;
}

.viewer-structure-leaf-btn--sensor {
  border-color: var(--border);
  background: var(--surface);
}

.viewer-structure-sensor-icon {
  color: var(--primary);
}

.structure-tree-leaf-icon {
  font-size: 17px;
  color: var(--text-muted);
}

.structure-tree-leaf-label strong,
.structure-tree-leaf-label span {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.structure-tree-leaf-label strong {
  font-size: 12px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: 0.06em;
}

.structure-tree-leaf-label span {
  font-size: 12px;
  color: var(--text);
  line-height: 1.15;
}

.viewer-structure-node-action {
  appearance: none;
  width: 44px;
  min-width: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
}

.viewer-structure-node-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--primary-soft) 48%, transparent 100%);
  opacity: 0.42;
  pointer-events: none;
}

.viewer-structure-node-action:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.viewer-structure-node-action .material-icons {
  font-size: 20px;
}

.line-structure-report-menu {
  position: absolute;
  z-index: 270;
  width: min(280px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  /* Cap the menu so it never spills off the bottom and keep its body
   * scrollable when more than a handful of templates are configured —
   * the area-level pop-up routinely shows 19 entries on a populated
   * tenant catalog. */
  max-height: min(70vh, 520px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-overlay);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-structure-report-menu-item {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.line-structure-report-menu-item:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.line-structure-report-menu-empty {
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.structure-tree-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--surface);
}

/* Grundlayout des Viewers. Diese Regeln FEHLTEN: <cw-core-viewer> ist ein
   Custom Element und damit ohne Angabe `display: inline` — es meldete beim
   Aufbau clientHeight 0, der Viewer fiel auf 960x540 zurueck und die Szene
   klebte in der linken oberen Ecke, statt die Flaeche zu fuellen. Auch der
   Canvas hatte keinerlei CSS. */
cw-core-viewer {
  display: block;
  height: 100%;
  min-height: 0;
}

/* Die Bestandsansicht ist randlos — der Viewer sitzt direkt unter der
   Kopfleiste. Die Polsterung von .vc-shell-view gilt fuer Formular-Overlays,
   nicht fuer die Vollbild-Szene. */
.vc-shell-view:has(cw-core-viewer) {
  padding: 0;
}

.core-viewer-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Port-Ergänzung: Default-Position im Viewer-Shell (der Bestand rechnet
   overlayPos aus der Linkstoolbar; die Toolbar-Welle übernimmt das später). */
.core-viewer-shell {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.core-viewer-shell--load-failed .core-viewer-canvas,
.core-viewer-shell--webgl-unavailable .core-viewer-canvas {
  opacity: 0.22;
}

/* Statuszeile ueberlagert die Szene (Bestand), statt den Canvas nach unten zu
   schieben. */
.core-viewer-status {
  position: absolute;
  /* rechts NEBEN der Linkstoolbar (die sitzt auf left:16 und ist ~40px breit),
     sonst ueberdecken sich beide. */
  left: 72px;
  top: 16px;
  z-index: 240;
  pointer-events: none;
  color: var(--text);
  text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
}

.core-viewer-webgl-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 245;
  display: grid;
  justify-items: center;
  max-width: min(520px, calc(100% - 160px));
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 58%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface, #071636) 88%, transparent);
  box-shadow: var(--shadow-card), 0 0 42px rgb(245 158 11 / 16%);
  color: var(--text);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.core-viewer-webgl-fallback--error {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 62%, var(--border));
  box-shadow: var(--shadow-card), 0 0 48px rgb(239 68 68 / 18%);
}

.core-viewer-webgl-fallback--error .material-icons {
  color: var(--danger, #ef4444);
}

.core-viewer-webgl-fallback .material-icons {
  color: var(--warning, #f59e0b);
  font-size: 32px;
}

.core-viewer-webgl-fallback strong {
  margin-top: 6px;
  color: var(--text-strong, #e5f0ff);
  font-size: 18px;
}

.core-viewer-webgl-fallback small {
  margin-top: 6px;
  color: var(--text-muted, #9fb3d2);
  font-size: 13px;
  line-height: 1.35;
}

.core-viewer-webgl-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 70%, var(--border));
  border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 24%, transparent),
    color-mix(in srgb, var(--primary) 46%, transparent));
  color: var(--text-strong, #e5f0ff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.core-viewer-webgl-retry:hover {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 18px rgb(56 189 248 / 18%);
}

.core-viewer-webgl-retry .material-icons {
  color: inherit;
  font-size: 18px;
}

.core-viewer-shell .line-structure-overlay {
  left: 72px;
  top: 16px;
  --overlay-top: 16px;
}

/* Altbestand CoreContentViewer.vue: eigener Area-Abbild-Sichtbarkeitsbaum.
   Wichtig: NICHT das Struktur-Overlay wiederverwenden — das sind getrennte
   Use-Cases (vollständiges Area-Abbild vs. operativer Strukturbaum). */
.asset-node-visibility-panel {
  position: absolute;
  top: var(--area-image-panel-top, 16px);
  left: var(--area-image-panel-left, 72px);
  z-index: 360;
  box-sizing: border-box;
  width: min(460px, calc(100% - var(--area-image-panel-left, 72px) - 16px));
  max-width: min(560px, calc(100% - var(--area-image-panel-left, 72px) - 16px));
  height: max(320px, calc(100% - var(--area-image-panel-top, 16px) - 16px));
  max-height: calc(100% - var(--area-image-panel-top, 16px) - 16px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(18px);
  padding: var(--space-4);
}

.asset-node-visibility-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: 2px 4px var(--space-3);
  margin-bottom: var(--space-3);
  overflow: visible;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.asset-node-visibility-title-block { min-width: 0; flex: 1; }

.asset-node-visibility-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.asset-node-visibility-subtitle {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.asset-node-visibility-search {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px;
  color: var(--control-text, var(--text));
  background: var(--control-bg, var(--surface-elevated));
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.2;
}

.asset-node-visibility-search::placeholder { color: var(--text-soft); }

/* SPEC-0646 — Klasse C: der Ring war da, stand aber auf `:focus`.
   Fuer ein Textfeld verhaltensgleich, benennt die Absicht aber richtig
   und ist das Gegenstueck, das der Waechter zum `outline: none` sucht. */
.asset-node-visibility-search:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.asset-node-visibility-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.asset-node-visibility-actions button,
.asset-node-visibility-expander,
.asset-node-visibility-eye {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.asset-node-visibility-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
}

.asset-node-visibility-actions button:hover,
.asset-node-visibility-eye:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
}

.asset-node-visibility-panel small,
.asset-node-visibility-panel p {
  display: block;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.asset-node-visibility-tree-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 4px;
  padding-bottom: 8px;
  overscroll-behavior: contain;
}

.viewer-utility-panel {
  position: absolute;
  top: 16px;
  left: 72px;
  z-index: 365;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100% - 260px));
  min-width: 260px;
  max-height: calc(100% - 32px);
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(18px);
}

.viewer-utility-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.viewer-utility-header > .material-icons {
  color: var(--primary);
}

.viewer-utility-header strong,
.viewer-utility-row b {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-utility-header small,
.viewer-utility-row small {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-utility-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--surface-elevated);
  cursor: pointer;
}

.viewer-utility-header button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.viewer-utility-body {
  min-height: 0;
  overflow: hidden;
}

.viewer-utility-input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius-control);
  color: var(--control-text, var(--text));
  background: var(--control-bg, var(--surface-elevated));
  font: inherit;
}

/* SPEC-0646 — Klasse C: der Ring war da, stand aber auf `:focus`.
   Fuer ein Textfeld verhaltensgleich, benennt die Absicht aber richtig
   und ist das Gegenstueck, das der Waechter zum `outline: none` sucht. */
.viewer-utility-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.viewer-utility-list {
  display: grid;
  max-height: min(56vh, 520px);
  min-height: 0;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.viewer-utility-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  color: var(--text);
  background: var(--surface-elevated);
  text-align: left;
  cursor: pointer;
}

.viewer-utility-row:hover,
.viewer-utility-row.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface-elevated) 78%, var(--primary) 22%);
}

.viewer-utility-row > .material-icons {
  color: var(--text);
}

.viewer-utility-switch {
  color: var(--primary);
}

.viewer-utility-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-card);
  color: var(--text);
  background: color-mix(in srgb, var(--surface-elevated) 72%, var(--primary) 28%);
  font-weight: 800;
  cursor: pointer;
}

.viewer-utility-primary:hover {
  background: color-mix(in srgb, var(--surface-elevated) 58%, var(--primary) 42%);
}

.asset-node-visibility-row {
  display: grid;
  grid-template-columns: 28px 18px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  width: calc(100% - (var(--depth, 0) * 18px));
  min-height: 44px;
  margin: 0 0 8px calc(var(--depth, 0) * 18px);
  padding: 10px 12px;
  box-sizing: border-box;
  color: var(--text);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.asset-node-visibility-row:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
}

.asset-node-visibility-row.hidden {
  color: var(--text-muted);
  opacity: 0.62;
}

.asset-node-visibility-row.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.asset-node-visibility-row--area {
  border-color: var(--border-strong);
  background: var(--primary-soft);
}

.asset-node-visibility-row--line { background: var(--surface-elevated); }

.asset-node-visibility-row--asset,
.asset-node-visibility-row--node {
  min-height: 42px;
  border-radius: 14px;
}

.asset-node-visibility-row--node { opacity: 0.92; }

.asset-node-visibility-expander {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.asset-node-visibility-expander.visible {
  opacity: 1;
  pointer-events: auto;
}

.asset-node-visibility-expander.is-open {
  transform: rotate(90deg);
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
}

.asset-node-visibility-expander-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asset-node-visibility-type-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--primary);
}

.asset-node-visibility-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.asset-node-visibility-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.asset-node-visibility-copy small {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
}

.asset-node-visibility-row--asset .asset-node-visibility-copy strong,
.asset-node-visibility-row--node .asset-node-visibility-copy strong {
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: 0;
}

.asset-node-visibility-row--asset .asset-node-visibility-copy small,
.asset-node-visibility-row--node .asset-node-visibility-copy small {
  font-size: 12px;
  color: var(--text-muted);
}

.asset-node-visibility-eye {
  appearance: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.asset-node-visibility-eye .material-icons { font-size: 20px; }

/* Viewer-Toolbar (Interim, SPEC-0026 §7.5): schmale Linkstoolbar mit dem
   Struktur-Toggle. */
.core-viewer-toolbar {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.core-viewer-toolbar button {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.core-viewer-toolbar button:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Legacy CoreViewerControls.vue — Port-Chrome fuer den Live-Viewer. */
.core-controls-root {
  position: absolute;
  inset: 0;
  z-index: 250;
  pointer-events: none;
}

.core-sidebar {
  position: absolute;
  left: 8px;
  top: calc(var(--sidebar-top, 8px) + var(--ui-shift-px, 0px));
  bottom: var(--sidebar-bottom, 8px);
  width: var(--sidebar-width, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sidebar-gap, 8px);
  padding: 8px 6px;
  pointer-events: auto;
  overflow-y: auto;
  border-radius: 0 22px 22px 0;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-left: 0;
  background:
    linear-gradient(180deg, rgb(9 27 61 / 90%), rgb(7 21 48 / 94%)),
    var(--surface-elevated);
  box-shadow: 0 18px 42px rgb(0 0 0 / 32%);
  backdrop-filter: blur(12px);
}

.core-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.icon-btn {
  position: relative;
  width: var(--button-size, 44px);
  min-width: var(--button-size, 44px);
  height: var(--button-size, 44px);
  min-height: var(--button-size, 44px);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: var(--button-radius, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-elevated) 92%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 8px 20px rgb(0 0 0 / 22%);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.icon-btn .material-icons {
  font-size: var(--button-icon-size, 24px);
  line-height: 1;
}

.icon-btn:hover,
.icon-btn.active {
  color: var(--text-strong);
  border-color: var(--primary);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-elevated) 88%, var(--primary) 12%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent), 0 12px 26px rgb(0 0 0 / 28%);
}

.icon-btn:active {
  transform: translateY(1px) scale(0.98);
}

.icon-btn .badge {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
  background: var(--primary);
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
}

/* ENTFERNT (2026-08-06): `.icon-btn.mode-label::before { content: '3D' }` +
 * `.icon-btn.mode-label.active::before { content: '2D' }`.
 *
 * Die Beschriftung des Ansichtsmodus-Knopfes kam aus einem CSS-Inhalt — das
 * JS lieferte gar keinen Text. Das war zuletzt sogar VERTAUSCHT: seit der
 * Knopf verdoppelt worden war, trugen beide Knoepfe `mode-label` und jeweils
 * `active`, also zeigte in der 3D-Ansicht der 2D-Knopf „3D" und umgekehrt.
 *
 * Der Umschalter traegt seinen Text jetzt selbst (Bestand
 * CoreViewerControls.vue:63) und die Schriftmasse kommen aus `.btn-label`
 * in `viewer-parts.css` — dort, wo der Bestand sie hat. */

.nav-wheel {
  position: absolute;
  right: calc(44px + var(--ui-shift, 0px));
  bottom: 16px;
  width: var(--wheel-size, var(--nav-size, 150px));
  height: var(--wheel-size, var(--nav-size, 150px));
  border-radius: 999px;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
  box-shadow: 0 18px 44px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 10%);
  backdrop-filter: blur(14px);
  --wheel-radius: max(calc((var(--wheel-size, 150px) - var(--wheel-btn-size, 45px)) / 2 - var(--wheel-pad, 8px)), calc(var(--wheel-btn-size, 45px) * 1.08));
  --wheel-corner-offset: calc(var(--wheel-radius) * 0.68);
}

.wheel-btn,
.wheel-center,
.wheel-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 8px 18px rgb(0 0 0 / 26%);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wheel-btn:hover,
.wheel-center:hover,
.wheel-nav:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface-elevated) 78%, var(--primary) 22%);
}

.wheel-btn {
  width: var(--wheel-btn-size, var(--nav-button-size, 45px));
  height: var(--wheel-btn-size, var(--nav-button-size, 45px));
  border-radius: 999px;
}

.wheel-btn .material-icons,
.wheel-nav .material-icons {
  font-size: var(--wheel-icon-size, 24px);
  line-height: 1;
}

.wheel-center {
  left: 50%;
  top: 50%;
  width: calc(var(--wheel-size, 150px) * 0.35);
  height: calc(var(--wheel-size, 150px) * 0.35);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--primary) 40%, transparent), transparent 74%),
    color-mix(in srgb, var(--surface-elevated) 84%, transparent);
}

.wheel-center:hover,
.wheel-center:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.wheel-btn--plus {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(0, calc(-1 * var(--wheel-radius)));
}

.wheel-btn--minus {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(0, var(--wheel-radius));
}

.wheel-btn--left {
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(var(--wheel-corner-offset), var(--wheel-corner-offset));
}

.wheel-btn--right {
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(var(--wheel-corner-offset), calc(-1 * var(--wheel-corner-offset)));
}

.wheel-btn--tilt-up {
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(-1 * var(--wheel-corner-offset)), var(--wheel-corner-offset));
}

.wheel-btn--tilt-down {
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(-1 * var(--wheel-corner-offset)), calc(-1 * var(--wheel-corner-offset)));
}

.wheel-nav {
  top: 50%;
  width: calc(var(--wheel-btn-size, 45px) * 0.92);
  height: calc(var(--wheel-btn-size, 45px) * 0.92);
  border-radius: 999px;
}

.wheel-nav--overview {
  left: 0;
  transform: translate(-58%, -50%);
}

.wheel-nav--previous {
  right: 0;
  transform: translate(58%, -50%);
}

/*
 * Namensschild unter dem Zeiger im Live-Viewer (Bestand
 * CoreContentViewer.vue:4723). `showHoverTooltips` war im Port tote Daten —
 * es gab kein Schild, das die Einstellung hätte schalten können.
 *
 * `position: fixed` steht am Element, weil die Koordinaten Fensterkoordinaten
 * des Zeigers sind. Das Schild darf den Zeiger NICHT fangen: sonst löst der
 * nächste `pointermove` auf dem Schild statt auf dem Canvas aus, das Schild
 * verschwindet, der Zeiger ist wieder über dem Canvas — und es flackert.
 */
.core-viewer-hover-tooltip {
  pointer-events: none;
  z-index: 40;
  transform: translate(12px, 12px);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.3;
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: var(--shadow-card);
}

/* Bestand CoreContentViewer.styles.css — der feine Innenschein am Blattknopf
 * der Strukturansicht. Der Port trug die Klasse ohne Regel. */
.cw-structure-overlay .viewer-structure-leaf-btn {
  box-shadow: 0 0 0 1px rgba(107, 209, 255, 0.04) inset; /* @allow-hardcoded-color: Bestandswert CoreContentViewer.styles.css */
}

/* --- Dreistufiger Pflegebaum (Bestand AssetMaintenanceOverlay.vue:106-196)
 * Die `structure-tree-*`-Regeln oben gelten schon; hier fehlten nur die
 * <details>/<summary>-Traeger und der Chevron-Dreh am offenen Zweig. Der
 * native Marker muss weg, sonst steht ein zweites Dreieck daneben. */
.structure-details {
  margin: 0;
}

.structure-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-elevated);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.structure-summary::-webkit-details-marker {
  display: none;
}

.structure-summary:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.structure-summary.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.structure-summary--area {
  border-color: var(--border-strong);
  background: var(--primary-soft);
}

/* Zweigebene — im Bestand flacher und enger als die Area darueber
 * (AssetMaintenanceOverlay.vue:2167-2173). */
.structure-summary--branch {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--surface);
}

/* Der Zweigtraeger selbst ist unsichtbar; die Einrueckung macht
 * `.structure-tree-children` (Bestand :2129-2134). */
.structure-details--branch {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.structure-details[open] > .structure-summary .structure-tree-chevron {
  transform: rotate(90deg);
  border-color: var(--primary);
}

.structure-details--unassigned > .structure-summary {
  border-style: dashed;
  border-color: var(--warning);
}

/* Wurzelzeile „Standort" und die Aktionsleiste unter dem Baum. */
.asset-tree-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 460px;
  overflow: auto;
}

.asset-tree-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-elevated);
}

.asset-tree-root-main,
.asset-tree-root-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-tree-root-icon {
  font-size: 18px;
  color: var(--text-muted);
}

.asset-tree-root-label {
  font-weight: 700;
}

.asset-tree-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Tiefe Baeume im Pflegedialog: die Einrueckung der Viewer-Struktur (14+16px
 * je Ebene) frisst bei fuenf Ebenen die halbe Spaltenbreite, die Namen werden
 * abgeschnitten. Hier reicht die Haelfte — die Linie links zeigt die Ebene
 * ohnehin. Bewusst nur unter `.asset-tree-list`, damit die Strukturansicht
 * des Viewers unveraendert bleibt. */
.asset-tree-list .structure-tree-children {
  margin-left: 6px;
  padding-left: 8px;
  gap: 6px;
}

/* Blattzeilen duerfen in tiefen Baeumen umbrechen statt zu kuerzen. */
.asset-tree-list .structure-tree-leaf-label {
  min-width: 0;
}

.asset-tree-list .structure-tree-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ====== SPEC-0646 — Windows-Kontrastmodus =============================== *
 * Edge/Chromium zeichnen unter `forced-colors: active` KEINEN `box-shadow`
 * und zwingen jede Rahmen- und Flaechenfarbe auf eine Systemfarbe. Damit
 * faellt jeder Fokusring dieses Blattes dort ersatzlos aus — der ring-lose
 * Rahmenwechsel ebenso, weil dann jeder Rahmen dieselbe Farbe traegt.
 * `outline` WIRD gezeichnet und ist das einzige Mittel, das dort traegt.
 * `Highlight` ist die Systemfarbe fuer Auswahl und hebt sich per Definition
 * vom `Canvas` des Nutzers ab; `outline-offset` haelt den Ring von der
 * eigenen Kante frei, die dort ebenfalls `CanvasText` traegt.
 * KEIN `forced-color-adjust: none` — das naehme dem Nutzer genau die
 * Farbwahl, um die es hier geht (SPEC-0646, Entscheidung E3).
 * ====================================================================== */
@media (forced-colors: active) {
  .line-structure-search-input:focus-visible,
  .asset-node-visibility-search:focus-visible,
  .viewer-utility-input:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}