/* treatments.css – Behandlungen und Pflanzenwahl (S128, C1) */

/* Die Zeilen sind die Zeilenform des Bestand-Hubs (.stock-rows / .stock-row aus
   stock.css), wie im Schrank. Hier steht nur, was der Hub nicht kennt. */

.treatments-list {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* „Krankenstation" (bis S129 „Behandlungen") und „+ Starten" auf 320 px: dieselbe Lage wie im Schrank
   (remedies.css), deshalb dasselbe `wrap` und derselbe nicht nachgebende Knopf. */
.treatments-list__header {
  flex-wrap: wrap;
}

.treatments-list__add {
  flex-shrink: 0;
}

/* ─── Leerzustand ────────────────────────────────────────────────────────────── */

/* Die Deklarationen stehen seit S137 in base.css, Abschnitt „Leerzustand: die
   gemeinsame Bauform" (Backlog #161) — mit ihnen ist der S128-Absatz dorthin
   gewandert, der den Aufräumpunkt gemerkt hat. */

/* ─── Abschnitte ─────────────────────────────────────────────────────────────── */

.treatments-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.treatments-section__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ─── Zeile mit Foto (S131, F2) ──────────────────────────────────────────────── */

/* Bildplatz 44 px wie in der Pflanzenkarte, Radius deshalb `md` und nicht `sm`:
   der Radius gehört dem Platz, nicht der Zeile (Begründung an `.plant-card__mark`
   in plants.css, übernommen in tasks.css für die 28er).

   Bis S133 standen hier 28 px, und die Zahl war gemessen: mit 44 px blieben auf
   320 px nur 160 px für zwei Textzeilen (S131). Bezahlt hat die Vergrößerung der
   gestrichene Winkel — seine 34 px. Auf 375 px (Heikos SE) bleiben damit 249 statt
   215 px Text, und „Kontrolle 23. Sept. · getrennt" braucht 216 (S133 gemessen, an
   einem freistehenden Klon: `scrollWidth` taugt dafür nicht, er meldet bei
   `overflow: hidden` mindestens die Kastenbreite und damit für jede kurze Zeile
   dieselbe Zahl). Ein langer Schädlingsname kürzt weiter bei jeder Größe — das ist
   die S131-Entscheidung „kürzen statt umbrechen" und kein Defekt. */
.treatments-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.treatments-avatar__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--color-surface-alt);
}

/* Der Bildplatz als Knopf (S133, Backlog #164). Bauweise wie in plants.css und
   tasks.css: exakt die Bildkante, keine Polsterung. Größe, Radius und
   `flex-shrink` stehen schon an `.treatments-avatar` und gelten für beide
   Fassungen, Knopf wie Zeichen — der Platz ist derselbe, nur eine der beiden
   führt irgendwohin. */
.treatments-avatar--zoom {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}

.treatments-avatar--zoom:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Die Kartenfläche der Zeile (S133, Backlog #164). Sie lag bis dahin am
   Zeilenknopf; seit der Foto-Knopf daneben steht, muss sie beide umschließen —
   sonst läge das Foto außerhalb der Karte. Dieselbe Bauform und derselbe Grund
   wie bei `.species-mine__row` in species.css, wo eine Zeile mit Weg und Foto
   schon einmal so aufgelöst wurde.

   Die Werte sind die von `.stock-row` (stock.css) und stehen hier ein zweites
   Mal: dort tragen sie in vier anderen Listen die Karte weiter selbst, und der
   Zeilenknopf behält sie deshalb. Wer eine von beiden ändert, ändert beide. */
.treatments-line {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Die Krankenstation-Zeile bekommt 56 statt 44 px (S133, Backlog #164, Heikos
   dritter Befund am Gerät). Der Grund ist nicht Geschmack, sondern das Verhältnis
   von Bild zu Textblock — gemessen auf 375 px:

     Pflanzenliste   Bild 44 / Text 50 (zwei Zeilen)  = 0,88   trägt
     Pflanzenwahl    Bild 44 / Text 42 (zwei Zeilen)  = 1,05   trägt
     Krankenstation  Bild 44 / Text 62 (DREI Zeilen)  = 0,71   trägt nicht

   Die Krankenstation ist der einzige Bildplatz der App neben drei Textzeilen, und
   damit der einzige unter 0,88. 56 px bringen ihn auf 0,90. Das Maß ist deshalb
   hier ein anderes als in der Pflanzenwahl, und das ist Absicht: gleich groß hieße
   verschieden proportioniert.

   Kostenlos in beide Richtungen: die Zeilenhöhe gibt der Textblock vor und bleibt
   bei 96 px, horizontal bleiben 237 px für die 216, die „Kontrolle 23. Sept. ·
   getrennt" braucht. Nur die Ausrichtung zu ändern (Bild oben statt mittig) war die
   billigere Probe und hat sichtbar nichts gebracht.

   Die Klasse sitzt an JEDER Zeile der Liste, auch an den zweizeiligen (die dritte
   Zeile entsteht nur mit Mittel oder Termin). Dort ist das Bild dann höher als der
   Text. Das ist die bewusste Seite des Tauschs: gleich große Vorschaubilder über
   die ganze Liste wiegen schwerer als das Verhältnis der einzelnen Zeile — eine
   Liste mit wechselnden Bildkanten ist unruhig. */
.treatments-line--tall .treatments-avatar {
  width: 56px;
  height: 56px;
}

/* Der Zeilenknopf darin ist flach: Fläche, Rand und Polster liegen am Behälter,
   seine eigenen wären ein zweites Polster. Aus `.stock-row` behält er das
   Flex-Layout und die Textausrichtung. `flex: 1` statt der geerbten Breite —
   die Trefferfläche soll bis an den rechten Rand der Zeile reichen. */
.treatments-line > .stock-row {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Zwei feste Zeilen, jede kürzt hinten statt umzubrechen (Heikos Wahl aus A + C).
   Das Kürzen trifft oben den Mittelnamen, unten nichts Wichtiges: der Termin
   steht vorn. */
.treatments-row__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.treatments-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Ab Tablet-/Desktop-Breite wächst das Bild mit, gleicher Breakpoint und gleiche
   Begründung wie bei `.plant-card__photo` in plants.css — und seit S133 auch
   dasselbe Paar Zahlen wie dort (44/64), weil der Bildplatz jetzt der der Karte
   ist. Bis dahin standen hier 28/36. 64 liegt weiter unter den gespeicherten
   512 px, das Bild wird also nie hochskaliert. */
@media (min-width: 480px) {
  .treatments-avatar {
    width: 64px;
    height: 64px;
  }

  /* Muss hier wiederholt werden: `.treatments-line--tall .treatments-avatar` ist
     spezifischer als die Regel darüber und schriebe sonst die 56 px zurück. Ab
     dieser Breite laufen beide Ansichten wieder auf dasselbe Maß zusammen — der
     Textblock bleibt dreizeilig, aber die Zeile hat Platz im Überfluss. */
  .treatments-line--tall .treatments-avatar {
    width: 64px;
    height: 64px;
  }
}

/* ─── Nachbarschafts-Hinweis (S131, C4) ──────────────────────────────────────── */

/* Steht hier und nicht in plants.css, obwohl er auch in der Pflanzenliste sitzt:
   es ist derselbe Baustein an zwei Orten, gebaut in treatment-dialogs.js.
   Die Form ist die des Backup-Banners im Aufgaben-Tab (tasks.css) — ein Satz
   mit × —, in den Warnfarben der Befall-Pille statt im Grün: der Hinweis gehört
   zum Befall, und der Banner sagt „erledige etwas", dieser „achte auf etwas". */
.neighbor-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.neighbor-hint__text {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.neighbor-hint__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

@media (hover: hover) {
  .neighbor-hint__dismiss:hover { background: var(--color-overlay-light); }
}

.neighbor-hint__dismiss:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── Pflanzenwahl ───────────────────────────────────────────────────────────── */

/* Bereiche zum Aufklappen (S131, F3). Der Kopf ist eine Zeile: Name, Zahl, dann
   der Winkel vom Zeilenende (.row-chevron, base.css), zu nach rechts, offen nach
   unten. Das Dreieck des Browsers fällt weg — als Glyphe wäre es das Zeichen, das
   #152 überall durch Zeichnungen ersetzt hat, und `display: flex` blendet es in
   Chromium ohnehin aus. */
.treatments-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.treatments-group__head::-webkit-details-marker { display: none; }

.treatments-group[open] > .treatments-group__head .row-chevron {
  transform: rotate(90deg);
}

.treatments-group__title {
  flex: 1;
  min-width: 0;
}

.treatments-group__count {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.treatments-group__head:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.treatments-group__rows {
  margin-bottom: var(--space-sm);
}

/* Die Zeile der Pflanzenwahl mit 8 statt 16 px Polster, rundum (S138, Backlog
   #169, Heikos Wahl). Gemessen auf 390/375/320 px: die 78 px Zeilenhöhe waren
   44 Bild + 32 Polster + 2 Rand, der Textblock (22/42) lag immer darunter und
   `min-height` griff nie — die Höhe kam also aus dem Polster, nicht aus Text oder
   Bild. Mit 8 px sind es 62, der Takt 70 statt 86: 30 Pflanzen in einem Raum
   sind aufgeklappt 2100 statt 2580 px lang.
   Rundum und nicht nur oben/unten, obwohl das Bild dadurch 8 px weiter links
   steht als in der Krankenstation: in der Liste wirkt der gleichmäßige Rahmen
   stimmiger, und die Abweichung zwischen beiden Ansichten ist in Kauf genommen.
   Die Krankenstation behält die 16 px — ihre Zeilen tragen (S136). Deshalb hier
   eine eigene Regel und keine Änderung an `.treatments-line`, deren Werte mit
   `.stock-row` gekoppelt sind. */
.treatments-pick .treatments-line {
  padding: var(--space-sm);
}

.treatments-pick__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Schon behandelt: sichtbar, aber nicht wählbar (Heikos Wahl gegen das stille
   Weglassen). Gedämpft über die Fläche und nicht über `opacity` — der Vermerk
   „bereits in Behandlung" (bis S129 „wird behandelt") muss lesbar bleiben, er
   ist die Erklärung. Die Fläche liegt seit S133 am Behälter, deshalb dämpft
   `.treatments-line--busy` und nicht mehr der Knopf: über ihn gedämpft bliebe
   das Foto daneben hell, und die Zeile sähe halb wählbar aus. */
.treatments-line--busy {
  background: var(--color-surface-alt);
}

.treatments-pick__row:disabled {
  cursor: default;
}

.treatments-pick__row:disabled .stock-row__label {
  color: var(--color-text-muted);
  font-weight: 400;
}