/* Flora specific styles */
.data-card[data-tab="flora-tab"] {
  background: linear-gradient(135deg, #173814, #2a5a27);
}

.data-card[data-tab="flora-tab"] .card-icon {
  color: #2ecc71;
}

.data-card[data-tab="flora-tab"]:hover {
  background: linear-gradient(135deg, #1e4319, #346e30);
}

.icon-flora {
  width: 40px;
  height: 40px;
  margin: 0;
}

.flora-species-list {
  max-height: 300px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}

.species-table {
  width: 100%;
  border-collapse: collapse;
  color: #ecf0f1;
}

.species-table th, 
.species-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid rgba(69, 103, 137, 0.3);
}

.species-table th {
  background-color: rgba(0, 0, 0, 0.3);
  font-weight: 600;
  color: #D18F3A;
}

.species-table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Add visual distinction to the flora tab */
.tab-link[data-tab="flora-tab"].current {
  color: #2ecc71;
  border-bottom-color: #2ecc71;
}

.tab-link[data-tab="flora-tab"]:hover:not(.current) {
  color: #2ecc71;
  border-bottom-color: #2ecc71;
}

/* Fix for flora tab visibility */
#flora-tab {
  display: none;
}

#flora-tab.current {
  display: block;
}

/* Fix for menu container in flora tab */
#flora-tab .menu-container {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 10px;
}

/* Fix for metric group display */
#flora-metric-group {
  display: none;
}

#flora-tab .chart-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Fix metadata layout */
.flora-metadata {
  margin-top: 20px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* Ensure proper spacing for metadata items */
#flora-metadata-items {
  margin-top: 10px;
}

/* Ensure proper styling for chart errors in flora tab */
#flora-chart .chart-error {
  padding: 20px;
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  text-align: center;
  margin: 20px 0;
}