/* Anzeige-Overlays (SPEC-0078): Operations Insights, Dashboard, Globale
   Übersicht. Light-DOM-Stile über html[data-core-theme]-Tokens; die Header-/
   Interim-Muster spiegeln monitors.css/readonly-panels.css. */

.anzeige-overlay {
  position: relative;
  z-index: 360;
  display: block;
  min-height: 100%;
  padding: 20px;
  background: var(--surface);
  color: var(--text);
}

.anzeige-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.anzeige-header h3 {
  margin: 0;
  font-size: 1.15rem;
}

.anzeige-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.anzeige-header-actions {
  display: flex;
  gap: 8px;
}

.anzeige-interim-hint {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* --- Operations Insights ------------------------------------------------- */

.insight-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.insight-composer {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 14px;
  margin-bottom: 16px;
}

.insight-legacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  height: calc(100dvh - 92px);
  min-height: 0;
  padding: 26px 18px 18px;
  box-sizing: border-box;
}

.insight-legacy-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-composer--legacy {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.insight-composer--legacy textarea {
  min-height: 140px;
  background: color-mix(in srgb, var(--surface-elevated) 84%, transparent);
  border-color: var(--border);
  border-radius: 8px;
  font-size: 1rem;
  opacity: 1;
}

.insight-example-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.insight-example-row button {
  border: 1px solid var(--primary);
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 20%, var(--surface-elevated));
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-head h4 { margin: 0; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.history-governance {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.feedback-actions {
  display: flex;
  gap: 8px;
}

.feedback-actions button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-width: 34px;
  height: 34px;
  cursor: pointer;
}

.insight-composer textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 10px;
  font: inherit;
  opacity: 0.7;
}

.insight-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.insight-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.insight-history,
.insight-main {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 14px;
}

.insight-legacy-layout .insight-history {
  min-height: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
}

.insight-legacy-layout .insight-answer,
.insight-legacy-layout .insight-main,
.insight-legacy-main > vc-empty-state {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
  padding: 14px;
}

.insight-history h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.insight-governance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.insight-gov-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  padding: 8px 9px;
}

.insight-gov-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.insight-gov-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
}

.insight-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-history-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 9px;
  cursor: pointer;
}

.insight-history-item.is-active {
  border-color: var(--primary);
  background: var(--surface-elevated);
}

.insight-history-item span,
.insight-history-item small {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.insight-history-item strong {
  display: block;
  margin: 4px 0;
  font-size: 0.86rem;
  line-height: 1.3;
}

.insight-answer-runtime {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.insight-answer-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.insight-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.insight-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 9px;
}

.insight-kpi span {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.insight-muted {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.insight-answer details {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}

.insight-answer pre {
  max-height: 320px;
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-md, 8px);
  padding: 10px;
  font-size: 0.78rem;
}

/* --- Dashboard ----------------------------------------------------------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.dashboard-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 14px;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  width: 100%;
}

.dashboard-tile:hover,
.dashboard-tile:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
  outline: none;
}

/* SPEC-0646 — Klasse C: der Ersatz war da, aber er war derselbe wie bei
   :hover. Ein Tastaturnutzer sah damit kein anderes Bild als ein Mauszeiger,
   der zufaellig ueber der Kachel steht. Der Fokus bekommt deshalb den
   3px-Ring aus primitives.css zusaetzlich zum Rahmenwechsel. */
.dashboard-tile:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.dashboard-tile h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.dashboard-tile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.dashboard-tile-lines-label {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin: 6px 0 4px;
}

.dashboard-tile-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
}

.dashboard-tile-lines.is-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Globale Übersicht --------------------------------------------------- */

/* Die drei Regeln für `.globale-scope` (Zeile, Label, Auswahlliste) sind mit
   SPEC-0504 §10 entfallen — das Markup dazu gibt es nicht mehr. Eine Regel
   ohne Markup ist die Umkehrung des Leitbefunds „Klassenname ohne Regel" und
   genauso irreführend: sie sieht bei der nächsten Durchsicht wie eine
   gestaltete, nur gerade unbenutzte Fläche aus. */

.globale-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.globale-metric {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 12px;
}

.globale-metric span {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.globale-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
}

.globale-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.globale-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 14px;
}

.globale-panel h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.globale-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  padding: 9px;
  margin-bottom: 8px;
}

.globale-row strong {
  display: block;
  font-size: 0.9rem;
}

.globale-row small {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-top: 3px;
}

@media (max-width: 860px) {
  .insight-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Globale Übersicht: Drei-Spalten-Arbeitsfläche ------------------------
   Aufbau wie im Bestand (OperationsOverviewView): Kopfzeile oben, Entitäten
   links, Karte in der Mitte, Konfiguration rechts. Unter 1100 px stapeln die
   Spalten, damit die Karte auf schmalen Fenstern nicht zerdrückt wird. */

.globale-overlay .ops-meta {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* SPEC-0504 §8: Die Fläche füllt die Höhe des Dialogs, damit die Karte den
   ganzen verfügbaren Platz bekommt statt bei einer Mindesthöhe stehenzubleiben.
   `min-height: 0` ist dabei kein Beiwerk — ohne die Angabe wächst ein
   Flex-Kind nie unter seine Inhaltshöhe, und die Panels würden die Karte
   wieder auseinanderdrücken. */
.globale-overlay {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.globale-overlay .ops-layout {
  display: grid;
  /* Breiten kommen aus dem Klappzustand (panelGridStyle); die Vorgabewerte
     hier gelten, solange das Element noch keine Variablen trägt. */
  grid-template-columns: var(--ops-col-left, 300px) minmax(0, 1fr) var(--ops-col-right, 300px);
  gap: 16px;
  /* Vorher `start`: die Spalten blieben so hoch wie ihr Inhalt, und die Karte
     endete auf ihrer Mindesthöhe mitten im Fenster. */
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 1100px) {
  .globale-overlay {
    /* Gestapelt bestimmt wieder der Inhalt die Höhe — sonst quetschen sich
       drei untereinanderliegende Blöcke in eine Bildschirmhöhe. */
    height: auto;
  }

  .globale-overlay .ops-layout {
    grid-template-columns: minmax(0, 1fr);
    flex: 0 1 auto;
  }
}

.globale-overlay .ops-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 12px;
  /* SPEC-0504 §9: Ein Panel mit viel Inhalt scrollt in sich, statt die Höhe
     der Karte zu bestimmen. */
  min-height: 0;
  overflow-y: auto;
}

/* --- Klappbare Seitenpanels (SPEC-0504 §3/§4) -----------------------------
   Anmutung und Verhalten wie im Widget Designer (widget-designer.css:604),
   der sie seinerseits vom Area-Abbild übernommen hat — bewusst dieselben
   Token, damit die drei Flächen EINE Gestalt und später EINEN Fix teilen. */

.globale-overlay .ops-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--area-builder-border-icon-button, rgba(96, 165, 250, 0.34));
  border-radius: 8px;
  background: var(--area-builder-icon-button-bg, rgba(15, 38, 77, 0.86));
  color: var(--area-builder-text-button, #e0f2fe);
  cursor: pointer;
}

.globale-overlay .ops-panel-toggle .material-icons {
  font-size: 20px;
}

/* Der Knopf sitzt an der Außenkante seines Panels. `.ops-panel` ist ein
   Flex-SPALTEN-Container — dort schiebt `align-self` (Querachse = waagerecht)
   das Kind an die Kante. */
.globale-overlay .ops-panel-toggle--left {
  align-self: flex-end;
}

.globale-overlay .ops-panel-toggle--right {
  align-self: flex-start;
}

/* Eingeklappt bleibt ein schmaler Streifen mit NUR dem Knopf stehen. Der
   Inhalt bleibt im Markup und wird ausgeblendet — gleiche Wirkung wie ein
   Nichtrendern, ohne den Renderpfad umzubauen. */
.globale-overlay .ops-panel.is-collapsed {
  overflow: hidden;
  padding: 10px 8px;
  align-items: center;
}

.globale-overlay .ops-panel.is-collapsed > :not(.ops-panel-toggle) {
  display: none;
}

.globale-overlay .ops-panel.is-collapsed .ops-panel-toggle {
  align-self: center;
}

.globale-overlay .ops-panel-title {
  font-weight: 600;
  color: var(--text);
}

.globale-overlay .ops-subtitle {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.globale-overlay .ops-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  width: 100%;
}

.globale-overlay .site-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 8px;
  font: inherit;
  cursor: pointer;
}

.globale-overlay .site-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}

.globale-overlay .site-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px);
  padding: 6px;
  cursor: pointer;
}

.globale-overlay .site-row:hover {
  background: var(--surface);
}

.globale-overlay .site-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.globale-overlay .site-label small {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.globale-overlay .empty-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 8px 2px;
}

/* Die Karte ist der Bezugsrahmen des Sprungmenüs — deshalb position: relative. */
.globale-overlay .map-card,
.globale-overlay .site-view-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  padding: 12px;
  /* SPEC-0504 §8: volle Spaltenhöhe statt fester Mindesthöhe. Die 520 px
     bleiben als UNTERgrenze für schmale/kurze Fenster erhalten. */
  height: 100%;
  min-height: min(520px, 100%);
}

.globale-overlay .ops-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.globale-overlay .map-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Herkunftsnachweis der zugeschalteten Ortsnamen (SPEC-0512 §5). GeoNames
   steht unter CC BY 4.0 — die Nennung gehört sichtbar an die Fläche, nicht
   nur in die ATTRIBUTION.txt des Auslieferungsverzeichnisses. */
.globale-overlay .map-attribution-hint {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin: -2px 0 2px;
}

/* Feste Höhe: MapLibre braucht einen messbaren Container, sonst bleibt der
   Canvas 0 px hoch und die Karte erscheint leer.
 *
 * BEFUND (Nutzermeldung 2026-08-10, gemessen am laufenden Stack, SPEC-0504 §1):
 * `position: relative` gehört UNBEDINGT hierher und darf nicht MapLibre
 * überlassen bleiben. MapLibre hängt seine Klasse `maplibregl-map` — die
 * einzige mit dieser Regel — zur LAUFZEIT an den Host; der Renderer patcht das
 * class-Attribut bei jedem Neuzeichnen auf den Template-Wert `vc-map-host`
 * zurück und nimmt sie damit wieder weg. Ohne eigene Regel fällt der Canvas
 * (`position: absolute`) auf den nächsten positionierten Vorfahren zurück —
 * `.map-card` — und sitzt in deren linker oberer Ecke: 12 px zu weit links,
 * 57 px zu weit oben, quer über der Kartensuche, unten überstehend. Ob das
 * passiert, hing allein davon ab, ob nach dem Kartenaufbau noch ein Re-Render
 * kam: derselbe Aufruf war in einem Lauf `static`, im nächsten `relative`.
 * Gesperrt durch globale-uebersicht-kartenflaeche.spec.ts §1, der die
 * Fremdklasse absichtlich entfernt. */
.globale-overlay .vc-map-host {
  position: relative;
  flex: 1 1 auto;
  /* SPEC-0504 §8: nimmt die Höhe der Karte auf; 240 px nur noch als
     Untergrenze, damit die Karte auf kurzen Fenstern nicht kollabiert. */
  min-height: 240px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--surface);
}

.globale-overlay .site-jump-menu {
  position: absolute;
  z-index: 20;
  min-width: 220px;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
  padding: 8px;
}

.globale-overlay .site-jump-menu__title {
  display: flex;
  flex-direction: column;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
}

.globale-overlay .site-jump-menu__title span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.globale-overlay .site-jump-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  padding-top: 6px;
}

.globale-overlay .site-jump-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--text);
  padding: 7px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.globale-overlay .site-jump-menu__item:hover {
  background: var(--surface);
}

.globale-overlay .site-jump-menu__item small {
  color: var(--text-muted);
}

.globale-overlay .site-jump-menu__empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 8px 6px;
}

.globale-overlay .site-view-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.globale-overlay .legend-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 0.8rem;
}

/* --- Globale Übersicht: Flugleitstand und Navigationsregeln --------------- */

.globale-overlay .entity-mode-switcher {
  display: flex;
  gap: 4px;
}

.globale-overlay .entity-mode-btn {
  flex: 1 1 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text-muted);
  padding: 6px 4px;
  font: inherit;
  cursor: pointer;
}

.globale-overlay .entity-mode-btn[aria-selected='true'] {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--core-color-accent-blue, #2f7dff);
}

.globale-overlay .entity-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.globale-overlay .entity-section-hint {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 2px 8px;
  font: inherit;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.globale-overlay .drone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}

.globale-overlay .drone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.globale-overlay .drone-row:hover {
  background: var(--surface-elevated);
}

.globale-overlay .drone-row-body,
.globale-overlay .drone-row-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.globale-overlay .drone-row-meta {
  align-items: flex-end;
  white-space: nowrap;
}

.globale-overlay .drone-row-body small,
.globale-overlay .drone-row-meta small {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Schwebende Felder auf der Karte — Bezug ist .map-card (position: relative). */
.globale-overlay .drone-layer-panel {
  position: absolute;
  right: 24px;
  top: 72px;
  z-index: 15;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
  padding: 10px;
}

.globale-overlay .drone-layer-panel__title {
  font-weight: 600;
  font-size: 0.85rem;
}

.globale-overlay .drone-layer-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.globale-overlay .drone-layer-panel__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  cursor: pointer;
}

.globale-overlay .drone-layer-panel__window-label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.globale-overlay .drone-mini-panel {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 16;
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
  padding: 12px;
}

.globale-overlay .drone-mini-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.globale-overlay .drone-mini-panel__title {
  font-weight: 600;
}

.globale-overlay .drone-mini-panel__subtitle {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.globale-overlay .drone-mini-panel__close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.globale-overlay .drone-mini-panel__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0;
  font-size: 0.85rem;
}

.globale-overlay .drone-mini-panel__grid dt {
  color: var(--text-muted);
}

.globale-overlay .drone-mini-panel__grid dd {
  margin: 0;
  text-align: right;
}

.globale-overlay .rule-list {
  display: flex;
  /* Das Panel ist eine Flex-Spalte mit eigenem Bildlauf. OHNE diese Zeile
     schrumpft die Regelliste als Flex-Kind auf HOEHE NULL, sobald darueber
     Inhalt hinzukommt — sie verschwindet dann lautlos, statt dass das Panel
     scrollt (gemessen 2026-08-20: zwei Tests fielen genau daran). Sie behaelt
     jetzt ihre Hoehe; gescrollt wird im Panel. */
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.globale-overlay .rule-row {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.globale-overlay .rule-row:hover {
  background: var(--surface-elevated);
}

.globale-overlay .rule-row small {
  color: var(--text-muted);
}

.globale-overlay .rule-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Globale Übersicht: Nachzügler aus dem Bestand ------------------------
   Diese Klassen gab es im Bestand (OperationsOverviewView.vue:1540 ff.), im
   Port fehlten sie — die zugehörigen Merkmale waren dadurch unsichtbar. */

/* Sinnbild-Knöpfe der Kopfzeile (Bestand :1540). Der Port hatte dort
   Textknöpfe; die Kopfzeile lief damit über. */
.globale-overlay .ops-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
}

.globale-overlay .ops-icon-btn .material-icons {
  font-size: 19px;
}

.globale-overlay .ops-icon-btn.is-active,
.globale-overlay .ops-icon-btn:disabled {
  border-color: var(--core-color-success, var(--primary));
  color: var(--core-color-success, var(--primary));
  background: var(--core-color-success-surface, var(--surface));
  cursor: default;
  opacity: 0.95;
}

.globale-overlay .ops-icon-btn--primary {
  border-color: var(--core-color-success, var(--primary));
  color: var(--core-color-success, var(--primary));
}

/* „Alle Standorte" zeigt an, ob gerade wirklich alle gewählt sind (Bestand
   :85 `:class="{ active: isAllSitesSelected }"`). */
.globale-overlay .site-entry.active {
  border-color: var(--core-color-success, var(--primary));
  background: var(--core-color-success-surface, var(--surface-elevated));
}

/* Zustandsfarbe der Drohnenzeile (Bestand droneRowClass :483). Ohne sie sahen
   eine kritische und eine gesunde Drohne in der Liste gleich aus. */
.globale-overlay .drone-row-icon {
  color: var(--core-color-accent-blue, var(--primary));
  font-size: 18px;
  flex: 0 0 auto;
}

.globale-overlay .drone-row--warning {
  border-color: var(--core-color-warning, var(--core-color-accent-amber));
  background: var(--core-color-warning-surface, var(--surface-elevated));
}

.globale-overlay .drone-row--warning .drone-row-icon {
  color: var(--core-color-warning, var(--core-color-accent-amber));
}

.globale-overlay .drone-row--critical {
  border-color: var(--core-color-danger, var(--core-color-accent-red));
  background: var(--core-color-danger-surface, var(--surface-elevated));
}

.globale-overlay .drone-row--critical .drone-row-icon {
  color: var(--core-color-danger, var(--core-color-accent-red));
}

/* Ebenenansicht: die 3D-Etagenszene (Bestand :1707). */
.globale-overlay .site-view-card canvas {
  display: block;
  width: 100%;
  height: clamp(320px, 58vh, 760px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
}

/* Warnstufen der Kennwerte im Mini-Panel (Bestand
   DroneOperationsMiniPanel.vue:210-213). Der Port zeigte alle Werte gleich —
   ein fast leerer Akku sah aus wie ein voller. */
.globale-overlay .drone-mini-panel__grid dd.drone-mini-panel__row--warning {
  color: var(--core-color-warning, var(--core-color-accent-amber));
  font-weight: 600;
}

.globale-overlay .drone-mini-panel__grid dd.drone-mini-panel__row--critical {
  color: var(--core-color-danger, var(--core-color-accent-red));
  font-weight: 600;
}

/* Abgesetzte Zeile des Spur-Fensters (Bestand :1613). */
.globale-overlay .drone-layer-panel__row--window {
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.globale-overlay .drone-layer-panel__title .material-icons {
  font-size: 14px;
}

/* --- Bestandsregeln, die im Port ohne Entsprechung blieben ------------------
 * measure:class-coverage 2026-08-07. Alle vier Klassen standen im Markup, ohne
 * dass irgendwo eine Regel existierte. */

/* Bestand App.vue: die Knopfzeile unter einem Dashboard, rechts ausgerichtet. */
.dashboard-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* Bestand OperationsInsightOverlay.vue: die Maske fuellt die Flaeche und bringt
 * ihren eigenen Grund mit. Ohne Regel stand der Inhalt randlos und ohne
 * Hintergrund auf der Seite. */
.insight-overlay {
  min-height: 100%;
  padding: 24px;
  background: var(--surface);
  color: var(--text);
}

/* Bestand OperationsOverviewView.vue */
.globale-overlay .ops-main {
  min-height: 0;
  display: block;
  overflow: auto;
}

.globale-overlay .ops-select {
  width: auto;
  min-width: 130px;
}

.globale-overlay .entity-section-title--drones {
  color: var(--primary);
}

/* `.ops-actions` ist im Bestand eine schlichte Bedienzeile und wird im Port von
 * ZWEI Masken getragen (Globale Uebersicht und Asset-Wartung) — beide bekommen
 * sie, damit die Zeile nicht in einer der beiden umbricht. */
.globale-overlay .ops-actions,
.operations-setup-overlay .ops-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ====== 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) {
  .dashboard-tile:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}