/* weather.css */
/* Weather high dashboards and supporting card styles */

.weather-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.weather-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.weather-card-tight {
  padding: 12px;
}

.weather-span-4 {
  grid-column: span 4;
}

.weather-span-8 {
  grid-column: span 8;
}

.weather-span-12 {
  grid-column: span 12;
}

.weather-meta {
  font-size: 0.9rem;
  color: #6b7280;
}

.weather-heading {
  margin: 8px 0 10px 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.weather-heading-tight {
  margin: 0 0 10px 0;
}

.weather-heading-compact {
  margin: 0 0 8px 0;
}

.weather-temp-xl {
  font-size: 2.5rem;
  font-weight: 800;
}

.weather-temp-lg {
  font-size: 2rem;
  font-weight: 700;
}

.weather-updated {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #6b7280;
}

.weather-asof {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #6b7280;
}

.weather-pair-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.weather-stat {
  padding: 8px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
}

.weather-stat-label {
  font-size: 0.8rem;
  color: #6b7280;
}

.weather-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.weather-note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #6b7280;
}

.weather-mini-title {
  margin: 0 0 8px 0;
}

.weather-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.weather-mini-header {
  text-align: left;
  border-bottom: 1px solid #eeeeee;
}

.weather-mini-header th {
  padding: 6px 0;
}

.weather-mini-row {
  border-bottom: 1px solid #f1f5f9;
}

.weather-mini-cell {
  padding: 6px 0;
}

.weather-mini-empty {
  padding: 6px 0;
  color: #6b7280;
  text-align: center;
}

@media (max-width: 1024px) {
  .weather-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .weather-span-8 {
    grid-column: span 6;
  }

  .weather-span-4 {
    grid-column: span 6;
  }

  .weather-span-12 {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .weather-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .weather-span-8,
  .weather-span-4,
  .weather-span-12 {
    grid-column: span 1;
  }

  .weather-pair-grid {
    grid-template-columns: 1fr;
  }
}