/* Vegetation left-panel tab (read-only) — viewer-geo
 * Mirrors the spans-tab styling in powerline-panel.css. Status colours are kept
 * in sync with veg-overlay-renderer.js (cable colours) and the right-panel card.
 */

.vlp-vegetation-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ─── Filter chips ───────────────────────────────────────────── */
.vlp-veg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vlp-veg-chip {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.vlp-veg-chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vlp-veg-chip.active { background: rgba(34, 197, 94, 0.25); color: #fff; }
.vlp-veg-chip-failed.active { background: rgba(239, 68, 68, 0.3); }
.vlp-veg-chip-needs_review.active { background: rgba(245, 158, 11, 0.3); }
.vlp-veg-chip-auto_ok.active { background: rgba(34, 197, 94, 0.3); }
.vlp-veg-chip-validated.active { background: rgba(59, 130, 246, 0.3); }

/* ─── Prev / next nav ────────────────────────────────────────── */
.vlp-veg-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.vlp-veg-nav-info {
  font-size: 11px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ─── Span list ──────────────────────────────────────────────── */
.vlp-veg-list {
  flex: 1;
  overflow-y: auto;
}

.vlp-veg-row {
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.vlp-veg-row:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.vlp-veg-row.vlp-veg-selected { background: rgba(34, 197, 94, 0.15); color: #fff; }

.vlp-veg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9ca3af;
}
.vlp-veg-dot-auto_ok { background: #22c55e; }
.vlp-veg-dot-needs_review { background: #f59e0b; }
.vlp-veg-dot-failed { background: #ef4444; }
.vlp-veg-dot-validated { background: #3b82f6; }
.vlp-veg-dot-none { background: #9ca3af; }

.vlp-veg-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vlp-veg-dmin {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Tab count badge */
.vlp-veg-count:not(:empty) {
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10px;
  background: rgba(34, 197, 94, 0.3);
  color: #fff;
}