/* mower.css — Seite "Mähroboter" (Runde 33) */

/* Runde 33, Nachtrag 3: rechte Spalte jetzt "die vier Kopf-Kacheln oben,
   Zustand-Kärtchen darunter" (vorher: eigene volle Zeile + Zustand daneben
   auf gleicher Höhe wie die Karte) — Karte links bekommt dadurch mehr
   relativen Platz (1.5fr statt 1.3fr). */
.mower-cards { grid-template-columns: 1.5fr 1fr; margin-top: clamp(6px, 1vh, 10px); align-items: start; }
@media (max-width: 1000px) { .mower-cards { grid-template-columns: 1fr; } }

.mower-side { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }
.mower-tiles-mini { grid-template-columns: repeat(2, 1fr); }

/* Runde 33, Nachtrag 2: Steuerung jetzt zwischen den Kopf-Kacheln und der
   Karte/dem Zustand (vorher ganz unten) — eigener margin-top nötig, da die
   Karte/Zustand-Reihe (.mower-cards) ihren Abstand selbst mitbringt (siehe
   oben), eine einzelne .card aber sonst keinen automatischen Abstand zum
   Element davor hätte. */
.mower-control-card { margin-top: clamp(6px, 1vh, 10px); }

/* Schematische Rasenfläche — bewusst KEINE echte Karte (siehe Kommentar in
   mower.js) — grüner Bereich mit einer Ladestation (fix unten links) und
   dem Roboter als beweglichem Punkt (Position aus 'mower.posXPct'/'posYPct'). */
/* Runde 33, Nachtrag 2: auf Wunsch ca. 10% kleiner als die Kartenbreite —
   zentriert per 'margin: ... auto'. */
.mower-lawn-wrap { margin: 8px auto 0; max-width: 90%; }
.mower-lawn-svg { width: 100%; height: auto; display: block; }
.lawn-area {
  fill: var(--green-soft);
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.mower-dock text { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.mower-robot-dot { transition: transform 0.8s linear; }
.mower-robot-dot image { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
/* Runde 33, Nachtrag 2: dreht nur das Bild selbst (siehe '#mowRobotImg' in
   mower.js) in die tatsächliche Fahrtrichtung, unabhängig vom
   Positions-Übergang oben. */
#mowRobotImg { transition: transform 0.8s linear; }
.mower-robot-ring {
  fill: var(--surface);
  stroke: var(--text-muted);
  stroke-width: 2;
}
.mower-robot-dot.is-mowing .mower-robot-ring {
  stroke: var(--green);
  animation: mowerPulse 1.4s ease-in-out infinite;
}
@keyframes mowerPulse {
  0%, 100% { stroke-width: 2; }
  50% { stroke-width: 4; }
}
.mower-lawn-hint {
  margin-top: 8px;
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--text-faint);
  text-align: center;
}

/* Echte Karte (Runde 33, Nachtrag): benannte Rasenzonen als Polygone, Farbe
   je Zone kommt als Inline-Style direkt aus mower.js (ZONE_COLORS) — hier
   nur die gemeinsamen Linien-/Text-Eigenschaften. */
.mower-zone-poly {
  stroke-width: 2;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.mower-zone-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text, #1a1a1a);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Runde 33, Nachtrag 4: verbotene Zonen/Sperrlinien ("map.slot0.
   forbiddenAreas") — kräftiges Rot, damit sie sich klar von den (eher
   gedeckten) Zonenfarben oben abheben; Fläche gestrichelt+halbtransparent
   ("Sperrgebiet"-Optik), die Sperrlinie (2-Punkte-Einträge) als durchgehend
   dickere gestrichelte Linie. */
.mower-forbidden-poly {
  fill: #e0463f22;
  stroke: #e0463f;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.mower-forbidden-line {
  fill: none;
  stroke: #e0463f;
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}

/* Runde 33, Nachtrag 4: extra Pfade ("map.slot0.paths") — eigene Farbe
   (Lila, in ZONE_COLORS ungenutzt), gestrichelt, damit sie sich sowohl von
   den Zonen als auch von den Sperrlinien oben unterscheiden. */
.mower-extra-path {
  fill: none;
  stroke: #b979e0;
  stroke-width: 2;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

/* Runde 33, Nachtrag 4: gefahrener Weg ("map.mowingPath") — dünne, helle
   Linie (Kontrast zu Zonen/Sperrflächen), per Knopf ein-/ausblendbar (siehe
   '.mower-path-toggle' unten und 'mowPathToggleBtn' in mower.js). */
.mower-mowing-path polyline {
  fill: none;
  stroke: #f2f2f2;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.mower-mowing-path.is-hidden {
  display: none;
}

/* Runde 33, Nachtrag 4: Kartenkopfzeile jetzt mit Knopf rechts daneben
   (bisher war '.card-title' nur ein einzeiliger Text) — gleiche
   Grundoptik wie '.card-title' selbst (siehe style.css), nur zusätzlich
   als Flex-Zeile mit Platz für den Knopf. */
.mower-map-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mower-path-toggle {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mower-path-toggle:hover {
  border-color: var(--text-muted);
}
.mower-path-toggle.is-active {
  background: var(--green-soft, rgba(34, 163, 94, 0.18));
  border-color: var(--green);
  color: var(--green);
}
/* Klingen-/Bürsten-/Wartungs-Zustand — drei kleine Donut-Gauges
   nebeneinander (gleiches Bauteil wie die großen hero-gauge-* Kacheln,
   siehe pv.css, hier über gaugeBlock() in mower.js einzeln auf 44px
   verkleinert — siehe dortigen Kommentar zur Wrap/Canvas-Größensynchronität). */
.mower-health-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 8px;
}
.mower-health-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mower-health-label { font-size: clamp(10px, 0.9vw, 12px); font-weight: 600; color: var(--text-muted); }

/* Steuerungs-Knopfreihe — nutzt die bestehenden .control-btn-Varianten aus
   style.css (primary/secondary/danger), hier nur als volle Reihe statt der
   rechtsbündigen .control-actions-Zeile im Slider-Popup. */
.mower-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.mower-controls .control-btn { flex: 1 1 160px; padding: clamp(12px, 1.6vh, 16px) 14px; font-size: clamp(13px, 1.05vw, 15px); }