/* plants.css – Pflanzen UI-Komponenten (Listenansicht + Detail-View) */

/* ─── List-View: Header + Section-Container ─────────────────────────────────── */

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

.plants-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.plants-list__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ─── Sections (Space-/Raum-Gruppierung) ────────────────────────────────────── */

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

.plants-section__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.plants-section__subheading {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  padding-left: var(--space-sm);
  margin-top: var(--space-xs);
}

.plants-section__subheading--muted {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ─── Karten ────────────────────────────────────────────────────────────────── */

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

.plant-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.plant-card__emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.plant-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plant-card__name {
  font-weight: 600;
  font-size: var(--font-size-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.plant-card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.plant-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 12px;
  flex-shrink: 0;
}

.plant-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Orphan-Variante: dezenter Linker-Border in Warning-Farbe als visueller Anchor */
.plant-card--orphan {
  border-left: 3px solid var(--color-warning);
}

/* ─── Pausiert-Banner ───────────────────────────────────────────────────────── */

.plants-banner {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-warning);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.plants-banner__assign {
  padding: 4px var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  border-color: var(--color-warning);
  flex-shrink: 0;
}

.plants-banner__assign:hover:not(:disabled) {
  background: var(--color-warning-bg);
  opacity: 0.8;
}

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

.plants-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  gap: var(--space-md);
}

.plants-empty__icon {
  font-size: 52px;
  line-height: 1;
}

.plants-empty__headline {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.plants-empty__text {
  color: var(--color-text-muted);
  max-width: 290px;
  line-height: 1.6;
}

.plants-empty__cta {
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

/* ─── Detail-View ──────────────────────────────────────────────────────────── */

.plant-detail {
  padding: var(--space-md);
}

.plant-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.plant-detail__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plant-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ─── Gießintervall (Number-Input mit Einheit) ─────────────────────────────── */

.watering-interval {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.watering-interval .form-field__input {
  flex: 0 1 120px;
}

.watering-interval__unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ─── Düng-Disclosure (native <details>) ──────────────────────────────────── */

.fertilize-disclosure {
  background: var(--color-primary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
}

.fertilize-disclosure__summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  user-select: none;
}

.fertilize-disclosure[open] .fertilize-disclosure__summary {
  margin-bottom: var(--space-sm);
}

/* ─── Monats-Chips ─────────────────────────────────────────────────────────── */
/* TODO Konsolidierung: Style-Tokens identisch zu .weekday-chip in spaces.css.
 * Eigene Klasse statt Wiederverwendung — Monate sind semantisch keine Wochentage,
 * und ein generisches .chip-Pattern in base.css wäre Refactoring out of scope. */

.month-chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.month-chip {
  min-width: 42px;
  padding: 7px var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition:
    background var(--duration-fast),
    color var(--duration-fast),
    border-color var(--duration-fast);
}

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

.month-chip--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ─── Orphan-Assign-View ────────────────────────────────────────────────────── */

.assign-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md);
}

.assign-view__header {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.assign-view__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

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

.assign-view__section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

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

.assign-plant-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.assign-plant-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.assign-plant-item__name {
  font-weight: 600;
}

/* ─── Stecklinge ──────────────────────────────────────────────────────────── */
/* Cuttings teilen das .plant-card-Pattern und differenzieren sich über:
   - Cutting-Badge (Pill rechts vom Namen)
   - Optionale Urgency-Bordüre (eskalierend warning → danger) bei readyCount > 0
   - Bei orphans gewinnt die Orphan-Bordüre — Cuttings können auch orphan sein */

.plant-card--cutting {
  border-left: 3px solid var(--color-primary);
}

.plant-card__cutting-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Noch nicht getrennter Ableger: neutrale Status-Pill (informativ, keine Pflege). */
.plant-card__offshoot-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.plant-card--urgency-1 { border-left-color: var(--color-warning); }
.plant-card--urgency-2,
.plant-card--urgency-3 { border-left-color: var(--color-danger); }

/* Orphan-Bordüre hat Vorrang vor Cutting/Urgency, weil pausiert = wichtiger */
.plant-card--orphan { border-left-color: var(--color-warning); }

/* Plant-Edit-View: „Steckling/Ableger anlegen"-Trigger zwischen Save/Cancel und
   Danger-Zone. Layout-Spiegel zu .form-danger-zone — selbe Trennlinie oben +
   volle Button-Breite. Zwei Buttons teilen die Zeile, wrappen auf engen Screens. */
.plant-form__cutting-trigger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.plant-form__cutting-trigger .btn {
  flex: 1;
  justify-content: center;
}

/* Cutting-Detail-View: gleiches Layout wie plant-detail, eigene Klassen für Klarheit */
.cutting-detail {
  padding: var(--space-md);
}

.cutting-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cutting-detail__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cutting-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* S33: „Von Mutter getrennt"-Toggle (nur offshoot) */
.cutting-detached {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.cutting-detached__label {
  font-weight: 600;
}

.cutting-detached__hint {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ─── S30c: cutting_check-Dialog (Multi-Step) ─────────────────────────────── */

.cutting-check__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
}

.cutting-check__item {
  list-style: none;
}

.cutting-check__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.cutting-check__cb {
  flex-shrink: 0;
  margin-top: 2px;          /* Optisch mit der ersten Textzeile ausrichten */
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}