/* ==========================================================================
   canopy. — Bibliothek: Menü + Produkt-Liste/-Formular
   ========================================================================== */

.library-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.library-menu-item {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--radius-tile);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  font-size: 14px;
}

.library-menu-item[disabled] {
  color: var(--text-muted);
  opacity: 0.6;
}

.library-menu-arrow {
  color: var(--accent-green);
  font-size: 18px;
}

.library-menu-status {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* -- Seiten-Punkte: rein informativ, kein Tap-Ziel (s. Absprache) --
   Fest am unteren Rand der 5 swipebaren Bibliothek-Vollbild-Overlays.
   Eigene Pille mit Hintergrund statt frei schwebender Punkte, sonst wirken
   sie z.B. auf der VPD-Seite wie zufällig über der Tabelle platziert
   (s. Absprache) -- bewusst in --bg-base (nicht --bg-elevated-2 wie die
   Formularfelder), damit die Punkte optisch nicht wie ein antippbares
   Eingabefeld wirken, sie sind ja nur Anzeige. */
.library-page-dots {
  position: absolute;
  bottom: calc(var(--space-3) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-base);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.library-page-dots .page-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  transition: width 0.2s ease, background 0.2s ease;
}

.library-page-dots .page-dot.active {
  width: 14px;
  background: var(--accent-green);
}

/* -- Produkt-Liste -- */
.product-list-item {
  width: 100%;
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--radius-tile);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--text-primary);
  text-align: left;
}

.product-list-name {
  font-size: 14px;
  font-weight: 500;
}

.product-list-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.product-active-badge {
  font-size: 11px;
  color: var(--text-muted);
}

.product-active-badge.active {
  color: var(--accent-green);
}

/* -- Produkt-Formular -- */
.product-active-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.product-active-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-green);
  flex-shrink: 0;
}

.delete-btn {
  width: 100%;
  background: none;
  border: 1px solid rgba(216, 138, 95, 0.4);
  color: var(--status-warn);
  border-radius: var(--radius-tile);
  padding: var(--space-3);
  font-size: 14px;
  margin-top: var(--space-3);
}

/* -- VPD-Tool: Live-Rechner-Ergebnis -- */
.vpd-result {
  margin: var(--space-2) 0 var(--space-5);
  min-height: 32px;
}

.vpd-result-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.vpd-humidity-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.vpd-mold-alert {
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-tile);
  margin-top: var(--space-3);
}

.vpd-mold-alert-erhoeht {
  background: var(--status-warn-dim);
  color: var(--status-warn);
}

.vpd-mold-alert-hoch {
  background: rgba(216, 138, 95, 0.26);
  color: var(--status-warn);
}

.vpd-result-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.vpd-result-value .unit {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 2px;
}

.vpd-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.vpd-badge-optimal {
  background: var(--accent-green-dim);
  color: var(--accent-green);
}

.vpd-badge-trocken {
  background: var(--status-warn-dim);
  color: var(--status-warn);
}

.vpd-badge-feucht {
  background: var(--accent-blue-dim);
  color: var(--accent-blue);
}

/* -- VPD-Tool: editierbare Ziel-Ranges pro Phase -- */
.vpd-target-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.vpd-target-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.vpd-target-row input {
  width: 64px;
  flex: none;
  text-align: center;
  /* Gleiches Aussehen wie .form-group input (forms.css) -- diese Felder
     sitzen aber nicht in einem .form-group, deshalb hier separat gesetzt. */
  background: var(--bg-elevated-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-tile);
  padding: var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 16px; /* nicht darunter, s. forms.css -- iOS-Auto-Zoom-Fix */
}

.vpd-target-row input:focus {
  border-color: var(--accent-green);
}

.vpd-target-sep {
  color: var(--text-muted);
}

.vpd-target-unit {
  font-size: 12px;
  color: var(--text-muted);
  width: 28px;
}

/* -- VPD-Tool: Referenztabelle -- */
.vpd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.vpd-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.vpd-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.vpd-table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.vpd-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.vpd-table th,
.vpd-table td {
  padding: 6px 8px;
  text-align: center;
}

.vpd-table thead th {
  color: var(--text-muted);
  font-weight: 500;
}

.vpd-table tbody th {
  color: var(--text-secondary);
  font-weight: 500;
  text-align: right;
  padding-right: var(--space-3);
}

.vpd-zone-gefahr {
  background: rgba(216, 138, 95, 0.22);
  color: var(--status-warn);
}

.vpd-zone-propagation {
  background: var(--accent-green-dim);
  color: var(--accent-green);
}

.vpd-zone-spaetveg {
  background: rgba(111, 159, 216, 0.16);
  color: var(--accent-blue);
}

.vpd-zone-bluete {
  background: rgba(154, 142, 207, 0.18);
  color: var(--accent-violet);
}

/* -- Produkt-Tags im Gießen/Düngen-Formular -- */
.product-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-tag {
  background: var(--bg-elevated-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.product-tag.active {
  background: var(--accent-green-dim);
  border-color: var(--accent-green);
  color: var(--accent-green);
}