/* Editor-Bedienelemente (Modus-Umschalter, Werkzeuge, Löschen/Rückgängig) --
   bewusst kompakt (~1.5x Schrifthöhe statt der --tap-Touch-Größe von .btn/Formular-
   feldern): sie sitzen als Overlay AUF der Karte (s.u.) und sollen möglichst wenig
   davon verdecken. display:contents auf den Gruppen-Containern lässt ihre Buttons
   als FLACHE Geschwister im umgebenden Flex-Wrap erscheinen (siehe .map-controls) --
   dadurch rutscht jeder Button einzeln in die nächste Zeile, statt dass die ganze
   Gruppe als ein Block umbricht. */
.hive-mode-toggle, .hive-toolbar { display: contents; }
.hive-mode-toggle button, .hive-tool-btn {
  min-height: 22px; padding: 0 9px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .74rem;
}
.hive-mode-toggle button { color: var(--text-dim); }
.hive-mode-toggle button.active, .hive-tool-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---- Karten-Ansicht: randlos, bündig am Header, füllt den kompletten Bereich
   unter Header/Nav. Die Bedienelemente schweben als Overlay AUF der Karte (siehe
   .map-overlay), statt Platz im normalen Fluss zu beanspruchen. Greift nur,
   solange die Kartenansicht offen ist (:has) -- andere Tabs (Spieler, Notes,
   Einstellungen, ...) behalten normales Seitenlayout samt Scrollen. Seit die
   Truppen-Verhältnis-Notiz (KvK) in einen eigenen Tab umgezogen ist, hat die
   Kartenansicht selbst keinen variabel hohen Inhalt mehr über der Karte --
   overflow:hidden ist daher unproblematisch (nichts kann die Karte mehr aus dem
   Viewport drücken). */
body:has(#view-map:not(.hidden)) { overflow: hidden; }
body:has(#view-map:not(.hidden)) #app { height: 100dvh; display: flex; flex-direction: column; }
body:has(#view-map:not(.hidden)) .page-content { flex: 1; min-height: 0; max-width: none; padding: 0; }
#view-map { position: relative; height: 100%; }

.hive-map-wrap { position: absolute; inset: 0; }

/* Bedienelemente-Overlay: nutzt die verfügbare Breite bis zu den Lupe-/
   Zentrieren-Buttons aus, dabei bewusst stark transparent -- die Kartenzellen
   darunter sollen gut sichtbar bleiben. pointer-events:none auf dem Panel +
   pointer-events:auto NUR auf den Kindern lässt Klicks/Drags durch jeden
   leeren Bereich hindurch zur Karte durch, obwohl das Panel optisch die volle
   Breite einnimmt -- kein "totes" klickfangendes Leerfeld trotz voller Breite. */
.map-overlay {
  position: absolute; top: 8px; left: 8px; right: 52px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
  /* Falls mal viele nicht platzierte Spieler in der Liste stehen: das Overlay
     selbst scrollt, statt unbegrenzt zu wachsen und die ganze Karte zu verdecken. */
  max-height: calc(100% - 16px); overflow-y: auto;
}
.map-overlay > * { pointer-events: auto; margin: 0; }
.map-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 6px 8px; box-shadow: var(--shadow);
}
.map-controls > * { margin: 0; }
.map-overlay input[type="text"] {
  min-height: 26px; padding: 0 8px; font-size: .8rem; max-width: 200px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Karte: dezenter Rahmen ringsum (Kante überall sichtbar), abgerundet. Reines
   Sichtfenster (overflow:hidden) -- geschwenkt wird ausschließlich über eine
   Transform auf .hive-map-pad (siehe mapView.js), NICHT über natives Scrollen,
   damit sich die Karte beliebig weit verschieben lässt (auch ganz aus dem
   Sichtbereich heraus) statt an den Content-Rand geklemmt zu werden. */
.hive-map-scroll {
  height: 100%; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface);
  touch-action: none;
  /* Ohne dies markiert jeder Zieh-Vorgang (Pan/Drag) versehentlich Text auf der Karte. */
  user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.hive-map-pad { padding: 140px; width: max-content; }
.hive-map-grid {
  display: grid; gap: 1px; background: var(--border-soft);
  transform: rotate(45deg); transform-origin: center;
}

.hive-zoom-controls { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.hive-zoom-controls button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.hive-zoom-controls button svg { width: 16px; height: 16px; }
.hive-zoom-controls button:hover { background: var(--surface-3); }

.hive-cell {
  width: var(--hive-cell, 18px); height: var(--hive-cell, 18px); background: var(--surface-2); cursor: pointer; position: relative;
}
.hive-cell:hover { background: var(--surface-3); }
.hive-cell.drop-target { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Schriftgrößen sind relativ zu --hive-cell (Basis 18px) statt fest in px --
   sonst wächst beim Zoomen nur die Zelle, nicht ihr Inhalt (Text/Icons blieben
   optisch gleich groß und wirkten bei hohem Zoom winzig, bei niedrigem Zoom
   unproportional groß). */
.hive-obj {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer; font-size: calc(var(--hive-cell, 18px) * 0.4444); overflow: hidden;
}
/* Name + Fallen-/Punkte-Abzeichen als EINE zentrierte Flex-Spalte mit EINER
   Gegenrotation für den ganzen Block, statt jede Zeile einzeln per
   position:absolute + translateX(-50%) rotate(-45deg) zu drehen -- das rutschte
   bei der Drehung sichtbar aus der Mitte (exakt dasselbe Problem wie bei den
   KvK-Map-Stadt-Beschriftungen, siehe .kvk-obj-stack in kvkmap.css -- gleiche Lösung). */
.hive-obj-stack {
  transform: rotate(-45deg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
/* --name-scale: von JS gesetzter Verkleinerungsfaktor (renderGrid, UI.fitNameToTile
   in ui.js) für lange Namen, die sonst über den Kachelrand hinauslaufen würden --
   als Multiplikator auf die normale, zoom-relative Größe (1em = geerbt von
   .hive-obj) statt fixer Pixelwert, damit es beim Zoomen korrekt mitskaliert.
   Kurze Namen bleiben unverändert bei --name-scale:1 (Default), werden also NIE
   größer als bisher. */
.hive-obj .obj-label { white-space: nowrap; font-weight: 700; font-size: calc(1em * var(--name-scale, 1)); }
.hive-obj .tile-badge {
  font-size: calc(var(--hive-cell, 18px) * 0.3333); line-height: 1; color: var(--text-dim); white-space: nowrap;
}
.hive-obj.type-bear_trap { background: var(--brown-bg); border: 1px solid var(--brown); }
.hive-obj.type-flag { background: var(--accent-bg); border: 1px solid var(--accent); }
.hive-obj.type-city { background: var(--info-bg); border: 1px solid var(--info); }
/* "Blocked Area" (ex Berg/See/Gebäude): rot + durchgestrichen, damit sie nicht mit einer
   freien Zelle verwechselt wird. Äußere Grenze kommt separat aus blockedAreaOutline. */
.hive-obj.type-blocked {
  background: var(--danger-bg); border: 1px solid var(--danger);
  background-image: repeating-linear-gradient(45deg, var(--danger) 0 2px, transparent 2px 6px);
}
.hive-obj.search-match { outline: 3px solid var(--accent); animation: hive-pulse 1s infinite; }
.hive-obj.dragging { opacity: .55; }
@keyframes hive-pulse { 0%,100%{ outline-color: var(--accent); } 50%{ outline-color: transparent; } }

.hive-popover {
  position: fixed; z-index: 120; transform: translate(-50%, -110%);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 8px 12px; font-size: .82rem; white-space: nowrap;
}

.unplaced-list { display: flex; flex-wrap: wrap; gap: 6px; }
.unplaced-chip { display: flex; align-items: center; gap: 6px; }

/* ---- Fallen-Zuordnung: EIN dezenter Regler statt Falle-1/Falle-2/Split-Kästchen.
   Linie im Ton der ID-Spalte (--text-faint), der Punkt im Ton des Namens (--text) --
   bewusst KEINE Akzentfarbe, das soll optisch zurückhaltend bleiben. Passt in eine
   normale Tabellenzeile (die Höhe kommt weiterhin von den --tap-Textfeldern daneben). */
.hp-trap-cell { min-width: 128px; }
.trap-slider { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trap-slider-label { font-size: .68rem; font-weight: 700; line-height: 1.1; white-space: nowrap; min-height: 1.1em; color: var(--text); }
.trap-slider-label.is-ratio { font-size: .62rem; font-weight: 600; color: var(--text-dim); }
.trap-slider-label.is-unset { color: var(--text-faint); font-style: italic; font-weight: 400; }

.trap-slider-track { position: relative; width: 100px; height: 22px; display: flex; align-items: center; justify-content: space-between; }
.trap-slider-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--text-faint); transform: translateY(-50%); pointer-events: none;
}
.trap-tick { position: relative; width: 1.5px; border-radius: 1px; background: var(--text-faint); pointer-events: none; }
.trap-tick-end { height: 14px; }
.trap-tick-mid { height: 10px; }
.trap-tick-q { height: 7px; }

/* Überschreibt components.css' generische Formularfeld-Regel
   (input:not([type=checkbox]):not([type=radio])), die sonst min-height:var(--tap)
   und Padding erzwingt -- ein Range-Input braucht das nicht. */
input[type="range"].trap-range {
  position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; padding: 0; min-height: 0;
  background: transparent; cursor: grab; -webkit-appearance: none; appearance: none;
  /* Wert 100 (= volle Falle 1, siehe bear_trap_ratio) soll LINKS liegen, 0 (Falle 2)
     RECHTS -- ein <input type="range"> zeigt min immer links/max rechts. direction:rtl
     spiegelt nur die Anzeige-/Zeigerichtung; der gespeicherte Wert (0-100) bleibt exakt
     wie in der DB/hiveOptimize.js definiert unverändert. */
  direction: rtl;
}
input[type="range"].trap-range::-webkit-slider-runnable-track { height: 22px; background: transparent; }
input[type="range"].trap-range::-moz-range-track { height: 22px; background: transparent; border: none; }
input[type="range"].trap-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 15px; border-radius: 50%;
  background: var(--text); border: none; margin-top: 4px; cursor: grab;
}
input[type="range"].trap-range::-moz-range-thumb { width: 8px; height: 15px; border-radius: 50%; background: var(--text); border: none; cursor: grab; }
input[type="range"].trap-range:active::-webkit-slider-thumb { cursor: grabbing; }

.power-table td, .power-table th { text-align: right; }
.power-table td:first-child, .power-table th:first-child { text-align: left; }
.power-metric-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
}
.power-metric-badge.metric-power { color: var(--amber); background: var(--amber-bg); }
.power-metric-badge.metric-bear { color: var(--brown); background: var(--brown-bg); }
.hint.metric-power { color: var(--amber); }
.hint.metric-bear { color: var(--brown); }
.btn.metric-power { border-color: var(--amber); color: var(--amber); }
.btn.metric-bear { border-color: var(--brown); color: var(--brown); }

.hint { color: var(--text-dim); font-size: .85rem; }
.suggestion-regression { border: 1px solid var(--danger); border-radius: var(--r-sm); padding: 4px 8px; background: var(--danger-bg); }