/*
 * Map card — ONE popup for every map object, 2D and 3D (project-map-card.js).
 * Glass with soft corners, calm type, at most three large figures, details folded,
 * one quiet action link. Colours from the shell tokens (light/dark follow the system).
 */
.ee-mapcard-popup .mapboxgl-popup-content,
.ee-mapcard-host {
    padding: 0;
    border-radius: 16px;
    border: 1px solid var(--ees-glass-border, rgba(var(--ee-fg-rgb), .35));
    background: var(--ees-glass-bg, rgba(250, 250, 248, .78));
    color: var(--ees-text, #1a1a1a);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
    box-shadow: var(--ees-glass-shadow, 0 10px 32px rgba(0, 0, 0, .22));
    font-family: var(--ees-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif);
}
.ee-mapcard-popup .mapboxgl-popup-tip { display: none; }
.ee-mapcard-popup .mapboxgl-popup-close-button { top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; color: var(--ees-text-dim, var(--ee-text-tertiary)); font-size: 16px; line-height: 20px; }
.ee-mapcard-popup .mapboxgl-popup-close-button:hover { background: var(--ees-surface-3, rgba(var(--ee-ink-rgb), .06)); }
.ee-mapcard-host { position: absolute; z-index: 30; pointer-events: none; max-width: 280px; }

.ee-mapcard { display: flex; flex-direction: column; gap: 12px; min-width: 200px; padding: 14px 16px 13px; font-size: 13px; line-height: 1.35; }
.ee-mapcard__head { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; }
.ee-mapcard__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ees-text, var(--ee-text-primary)); }
.ee-mapcard__sub { font-size: 12.5px; color: var(--ees-text-2, var(--ees-text-dim, var(--ee-text-secondary))); }
/* equal columns while they fit; a value wider than its share (e.g. "3,87 × 2,62 m") takes its full width and the
   next pill wraps instead of running into it (Till 31.10.2026 trafo popup) */
.ee-mapcard__kpis { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ee-mapcard__kpi { display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: max-content; }
.ee-mapcard__value { font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ees-text, var(--ee-text-primary)); }
.ee-mapcard__value small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ees-text-dim, var(--ee-text-tertiary)); }
.ee-mapcard__label { font-size: 11.5px; color: var(--ees-text-dim, var(--ee-text-tertiary)); }
.ee-mapcard__kpi[data-tone="ok"] .ee-mapcard__value { color: #2f8a3c; }
.ee-mapcard__kpi[data-tone="warn"] .ee-mapcard__value { color: #b07800; }
.ee-mapcard__kpi[data-tone="bad"] .ee-mapcard__value { color: var(--ees-danger, #d93025); }
.ee-mapcard__more { border-top: 1px solid var(--ees-border, rgba(var(--ee-ink-rgb), .08)); padding-top: 8px; }
.ee-mapcard__more summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 500; color: var(--ees-text-dim, var(--ee-text-tertiary)); }
.ee-mapcard__more summary::-webkit-details-marker { display: none; }
.ee-mapcard__more summary::after { content: "›"; display: inline-block; margin-left: 5px; transition: transform .15s ease; }
.ee-mapcard__more[open] summary::after { transform: rotate(90deg); }
.ee-mapcard__more dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 12px; }
.ee-mapcard__more dt { color: var(--ees-text-dim, var(--ee-text-tertiary)); }
.ee-mapcard__more dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ees-text, var(--ee-text-primary)); }
.ee-mapcard__link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ees-accent, #0a84ff); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ee-mapcard__link:hover, .ee-mapcard__link:focus-visible { text-decoration: underline; }
.ee-mapcard__ref { margin-top: -6px; font-size: 10.5px; color: var(--ees-text-faint, var(--ee-text-muted)); font-variant-numeric: tabular-nums; }

/* Auswahlfelder (E9: Modell und Trafo einer Batterie) */
.ee-mapcard__field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--ees-text-dim, var(--ee-text-tertiary)); }
.ee-mapcard__field select { min-width: 0; width: 100%; padding: 4px 6px; border: 1px solid var(--ees-border, rgba(var(--ee-ink-rgb), .12)); border-radius: 8px; background: var(--ees-surface, var(--ee-bg-elevated)); color: var(--ees-text, var(--ee-text-primary)); font: inherit; font-size: 12px; }
.ee-mapcard__note { font-size: 12px; color: var(--ees-text-dim, var(--ee-text-tertiary)); }

/* E17: Bedienknöpfe eines Elektro-Objekts (Drehen, Ausblenden, Löschen) */
.ee-mapcard__btns { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.ee-mapcard__btns .ee-mapcard__link { margin-top: 0; }
.ee-mapcard__btns .ee-mapcard__link[disabled] { opacity: 1; color: var(--ees-text-dim, rgba(var(--ee-fg-rgb), .76)); cursor: default; }
/* E41 Kontrast (WCAG AA, Till 24.10.2026: Modell-Auswahl der Batterie „dunkelgrau auf dunkel, wirkt deaktiviert“):
   eigene, deterministische Darstellung statt nativer Auswahl. Vorher (E39) blieb das Feld nativ mit
   color-scheme: light dark — Chrome malt ein fokussiertes / per Autofill markiertes natives select mit
   eigenem Text- und Hintergrundton, die Kartenfarben griffen dann nicht (nur das Modell-Feld war betroffen,
   weil Mapbox es beim Öffnen fokussierte). Jetzt: undurchsichtiger Grund (--ees-menu-bg #14161c), Text
   #fff bzw. --ees-text (Kontrast 18:1), sichtbarer Rand, eigener Pfeil; jeder Zustand ausdrücklich. */
.ee-mapcard-popup .ee-mapcard__field select,
.ee-mapcard__field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  color-scheme: dark;
  padding: 5px 26px 5px 8px;
  border: 1px solid var(--ees-border-strong, rgba(var(--ee-fg-rgb), .28));
  border-radius: 8px;
  background-color: var(--ees-menu-bg, var(--ee-bg-elevated));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
  color: var(--ees-text, var(--ee-text-on-accent)); -webkit-text-fill-color: var(--ees-text, var(--ee-text-on-accent));
  opacity: 1; filter: none; text-overflow: ellipsis; cursor: pointer;
}
.ee-mapcard-popup .ee-mapcard__field select:hover,
.ee-mapcard__field select:hover { border-color: var(--ees-accent, #3FA14D); }
.ee-mapcard-popup .ee-mapcard__field select:focus,
.ee-mapcard-popup .ee-mapcard__field select:focus-visible,
.ee-mapcard-popup .ee-mapcard__field select:-webkit-autofill,
.ee-mapcard__field select:focus,
.ee-mapcard__field select:focus-visible {
  outline: 2px solid var(--ees-accent, #3FA14D); outline-offset: 1px;
  background-color: var(--ees-menu-bg, var(--ee-bg-elevated));
  color: var(--ees-text, var(--ee-text-on-accent)); -webkit-text-fill-color: var(--ees-text, var(--ee-text-on-accent));
  box-shadow: none;
}
.ee-mapcard-popup .ee-mapcard__field select option,
.ee-mapcard__field select option { background: var(--ees-menu-bg, var(--ee-bg-elevated)); color: var(--ees-text, var(--ee-text-on-accent)); }
.ee-mapcard-popup .ee-mapcard__field select:disabled,
.ee-mapcard__field select:disabled,
.ee-mapcard__field input:disabled { opacity: 1; color: var(--ees-text-2, rgba(var(--ee-fg-rgb), .88)); -webkit-text-fill-color: var(--ees-text-2, rgba(var(--ee-fg-rgb), .88)); border-style: dashed; border-color: var(--ees-border-strong, rgba(var(--ee-fg-rgb), .28)); background-image: none; cursor: not-allowed; }