/* Karten-Tab (E-111, D3-geo Trajektorie).
   Nur das Karten-Spezifische: das SVG, die Knoten-Labels, der Tooltip und die
   Ereignis-Region in der Sidebar. Geruest, Sektionen und Filter-Controls
   liegen in sidebar.css (geteilte View-Sidebar). Nutzt die Tokens aus
   variables.css. */

#tab-karte { padding: 0; }

.mob-notice {
  padding: var(--space-8);
  color: var(--color-text-primary);
}

.mob-empty {
  padding: var(--space-8);
  background: var(--color-cream);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  color: var(--color-text-secondary);
  text-align: center;
}

/* --- Karte (fuellt den View-Hauptbereich) -------------------------------- */

.mob-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mob-map__svg { width: 100%; height: 100%; display: block; background: var(--color-ocean); }
.mob-map__svg:active { cursor: grabbing; }

/* Basemap: Ozean = SVG-Hintergrund, darueber das Gradnetz (lokal erzeugt) */
.mob-graticule {
  fill: none;
  stroke: var(--color-sand);
  stroke-width: 0.5;
  stroke-opacity: 0.4;
}

/* Zoom-Steuerung auf der Karte (oben links) */
.mob-zoomctl {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 4;
}
.mob-zoomctl__btn {
  width: 26px;
  height: 26px;
  background: var(--color-paper);
  border: 1px solid var(--border-color-light);
  color: var(--color-text-primary);
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background var(--transition-fast);
}
.mob-zoomctl__btn:hover { background: var(--color-cream); }

.mob-map__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* Pfad-Etappen: die sichtbare Linie ist nicht das Hover-Ziel, sondern die
   breite unsichtbare Trefferspur darunter (robustes Hovern duenner Linien). */
.mob-arcs path { pointer-events: none; }
.mob-archits path { pointer-events: stroke; cursor: help; }

.mob-node__label {
  font-family: var(--font-ui);
  font-size: 11px;
  fill: var(--color-text-primary);
  paint-order: stroke;
  stroke: var(--color-cream);
  stroke-width: 2.5px;
  pointer-events: none;
}

/* --- Entitaets-Auswahl (Sidebar) ----------------------------------------- */

.mob-entity { display: flex; flex-direction: column; gap: var(--space-2); }

.mob-entity__kinds { display: flex; gap: 4px; }
.mob-entity__kind {
  flex: 1;
  padding: 3px 6px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-paper);
  border: 1px solid var(--border-color-light);
  border-radius: 3px;
  cursor: pointer;
}
.mob-entity__kind:hover { background: var(--color-cream); }
.mob-entity__kind--on {
  background: var(--color-kug-blau);
  border-color: var(--color-kug-blau);
  color: #fff;
}

.mob-entity__search { width: 100%; }

.mob-entity__list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  background: var(--color-paper);
}
.mob-entity__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-primary);
}
.mob-entity__item:last-child { border-bottom: none; }
.mob-entity__item:hover { background: var(--color-cream); }
.mob-entity__item--on { background: var(--color-cream); font-weight: var(--weight-semibold); }
.mob-entity__kindtag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
  width: 28px;
}
.mob-entity__name { flex: 1; line-height: 1.3; }
.mob-entity__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.mob-entity__more {
  padding: 4px 8px;
  font-size: 10px;
  font-style: italic;
  color: var(--color-text-tertiary);
}

.mob-entity__active {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color-light);
}
.mob-entity__activename {
  font-family: var(--font-title);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-kug-blau);
}

/* --- Knoten-Tooltip (HTML ueber dem SVG) --------------------------------- */

.mob-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 90px;
  max-width: 220px;
  padding: 6px 9px;
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  line-height: 1.5;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.mob-tip--on { opacity: 1; }
.mob-tip strong {
  display: block;
  font-family: var(--font-title);
  font-size: var(--text-sm);
}
.mob-tip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
}
.mob-tip__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.mob-tip__n {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.mob-tip__meta { color: var(--color-text-tertiary); font-style: italic; }
/* Gestapelter Proportionsbalken im Tooltip */
.mob-tip__bar {
  display: flex;
  height: 8px;
  margin: 5px 0 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-parchment);
}
.mob-tip__bar > span { display: block; height: 100%; }

/* --- Ereignis-Region in der Sidebar -------------------------------------- */

.mob-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.mob-panel__detail { display: flex; flex-direction: column; gap: var(--space-2); }

.mob-detail__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.mob-detail__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.mob-detail__clear {
  background: none;
  border: none;
  color: var(--color-kug-blau);
  font-size: var(--text-xs);
  cursor: pointer;
  text-decoration: underline;
}
.mob-detail__note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.mob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Klick-Detail: Zuordnungen (Balken + Zeilen) + Dokumente ------------- */

.mob-detail__bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-parchment);
}
.mob-detail__bar > span { display: block; height: 100%; }
.mob-detail__rows { display: flex; flex-direction: column; gap: 3px; }
.mob-detail__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.mob-detail__sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.mob-detail__rowlabel { flex: 1; }
.mob-detail__rown { font-family: var(--font-mono); color: var(--color-text-tertiary); }
.mob-detail__subhead {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* Verortungs-Legende: Ring-Stile (gesichert / stadtgenau / weit pruefen) */
.mob-vmark {
  width: 13px; height: 13px; border-radius: 50%;
  box-sizing: border-box; background: transparent;
}
.mob-vmark--secured { border: 1.5px solid rgba(40, 30, 20, 0.45); background: var(--color-sand); }
.mob-vmark--city { border: 1.5px dashed var(--color-sand); }
.mob-vmark--far { border: 1.5px dashed #A6552F; }

/* Eingeklappte Liste nicht verortbarer Belege */
.mob-unloc { border-top: 1px solid var(--border-color-light); padding-top: var(--space-2); }
.mob-unloc__summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  user-select: none;
}
.mob-unloc__summary:hover { color: var(--color-text-primary); }