/* remedies.css – Pflanzenschrank (S100) */

/* Die Zeilen selbst brauchen kein eigenes CSS: sie sind die Zeilenform des
   Bestand-Hubs (.stock-rows / .stock-row aus stock.css), weil sie dieselbe
   Aufgabe haben — Label, erklärende zweite Zeile, Chevron. Hier steht nur, was
   der Hub nicht kennt: Kopfzeile, Leerzustand und die dreiteilige Dosis-Zeile. */

/* ─── Kopfzeile ──────────────────────────────────────────────────────────────── */

/* Titel links, Anlege-Knopf rechts — dasselbe Muster wie in der Pflanzen- und
   der Standortliste, damit die drei Bestands-Unterseiten gleich aussehen.
   **Die drei wortgleichen Kopien sind in S101 zusammengelegt** (Backlog #141):
   die Regel heißt `.list-head` und steht in base.css. Sie hat den Weg genommen,
   den #141 vorgezeichnet hat — mit #133, als alle drei Kopfzeilen ohnehin
   angefasst wurden. Das `flex-wrap` ist dabei hiergeblieben; warum, steht an
   der Regel darunter. */
.remedies-list {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* `flex-wrap` war bis S101 die einzige Abweichung von den beiden Vorbildern und
   ist gemessen: „Pflanzenschrank" ist mit 176 px fast doppelt so breit wie
   „Pflanzen" (91,5 px). Auf 320 px — dem kleinsten Format, das die App seit S93
   trägt — stehen Titel und Knopf zusammen bei 343 px in einer 288 px breiten
   Zeile, und ohne `wrap` schrumpft nichts, sondern läuft über. Auf 390 px
   bleibt die Zeile einzeilig, die Regel kostet dort also nichts.
   **Sie ist in S101 hiergeblieben und nicht in die geteilte `.list-head`
   gewandert** (Backlog #141), obwohl der Punkt das vorgeschlagen hat: gemessen
   bricht damit auch die Standortliste auf 320 px um, weil deren Zeile mit dem
   `gap` 1,1 px zu breit ist. Der Umbruch steht also weiter genau dort, wo er
   belegt ist — alles andere an der Kopfzeile ist geteilt. */
.remedies-list__header {
  flex-wrap: wrap;
}

/* Der Knopf gibt nicht nach: er trägt eine Handlung, der Titel nur einen Namen.
   Muss etwas weichen, ist es die Überschrift — sie steht auch im Hub. */
.remedies-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 S103-Absatz dorthin
   gewandert, der diesen Moment angekündigt hat. */

/* ─── Dosis-Zeile im Formular ────────────────────────────────────────────────── */

/* Vier Elemente in einer Zeile: Menge, Einheit, das Wort „je", Liter. Sie
   umbricht bewusst (`wrap`) statt zu schrumpfen — auf 390 px passt die Zeile,
   bei größerer Schrift wandert der Literteil in die zweite Zeile und bleibt
   lesbar. Zwei Zahlenfelder nebeneinander zu quetschen wäre die Alternative
   gewesen, mit derselben Fehlerklasse wie in S72: die Ersparnis steckt nie im
   kürzeren Wort. */
.remedy-dose {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Feste Breiten, damit die Felder nicht über die halbe Zeile laufen: es sind
   ein- bis dreistellige Zahlen, kein Text. */
.remedy-dose__amount,
.remedy-dose__litres {
  width: 76px;
  flex-shrink: 0;
}

.remedy-dose__per {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ─── Abschnitte der Liste (S126) ────────────────────────────────────────────── */

/* Nur sichtbar, wenn Dünger und Schädlingsmittel beide im Schrank stehen. Die
   Überschrift ist klein und gedämpft: sie trennt, sie benennt keine Ansicht —
   der Titel darüber tut das. */
.remedies-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

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

/* ─── Etikett-Zeilen im Schädlingsmittel-Formular (S126) ─────────────────────── */

.label-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Eine Zeile vom Etikett als abgesetzter Block: Schädlinge oben, Zahlen darunter.
   fieldset bringt Rahmen und Innenabstand vom Browser mit, beides wird hier auf
   die Werte der App gesetzt. */
.label-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
}

/* Gleiche Form wie .month-chips (plants.css), eigene Klasse aus demselben Grund
   wie dort: Schädlinge sind keine Monate. */
.pest-chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

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

/* Beschriftung links, Zahl rechts — dieselbe feste Feldbreite wie bei der Dosis. */
.label-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.label-number__input {
  width: 76px;
  flex-shrink: 0;
}

.label-group__remove,
.label-groups__add {
  align-self: flex-start;
}

/* ─── Optionale Zeilen aus der Vorauswahl (S141, #177) ───────────────────────── */

/* Satz und Knopf untereinander, der Knopf links wie „+ Weitere Zeile" darunter:
   beides fügt eine Etikett-Zeile hinzu, nur mit anderem Ursprung. */
.preset-optional,
.preset-optional__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.preset-optional__item .btn {
  align-self: flex-start;
}