/* 🌈 Unified Design for All Weather Cards */
.dashboard_smallbox1 { 
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;        
  background-color: #FFFFF0;
  border: 0px solid #ccc; 
  padding: 10px 5px 15px 5px;
  min-height: 110px;
  text-align: center; 
  border-radius: 0; /* flat edges */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  margin: 15px 0; /* ⬆ adds equal space top and bottom */
}

/* General Weather Box Style */
.weather-hover-box {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0; /* flat edges */
  padding: 10px;
  background-color: #f8fcff;
  transition: all 0.3s ease;
}

.weather-hover-box:hover {
  background: linear-gradient(145deg, #e6f7ff, #cceeff);
  box-shadow: 0 4px 20px rgba(0, 191, 255, 0.4);
  transform: translateY(-3px);
}

/* Tooltip (hidden by default) */
.weather-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -10px; /* hover box will appear above */
  left: 50%;
  transform: translate(-50%, -100%);
  background: #ffffff;
  color: #000;
  border: 1px solid #00bfff;
  border-radius: 0; /* flat edges */
  padding: 10px;
  width: 240px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999; /* ensures it's on top of all boxes */
}

/* Show tooltip ONLY when hovering on the value */
.weather-value:hover + .weather-tooltip,
.weather-tooltip:hover {
  visibility: visible;
  opacity: 1;
}

/* Weather Value */
.weather-value {
  font-size: 30px;
  font-weight: bold;
  color: #007acc;
  margin: 5px 0;
}

/* --- COLOR CLASSES --- */
.temp-purple { color: #800080; }
.temp-lightblue { color: #ADD8E6; }
.temp-green { color: #008000; }
.temp-yellow { color: #FFFF00; }
.temp-orange { color: #FFA500; }
.temp-red { color: #FF0000; }
.temp-darkred { color: #8B0000; }

.hum-brown { color: #A52A2A; }
.hum-orange { color: #FFA500; }
.hum-green { color: #008000; }
.hum-lightblue { color: #00BFFF; }
.hum-darkblue { color: #00008B; }

.pressure-purple { color: #800080; }
.pressure-blue { color: #0000FF; }
.pressure-green { color: #008000; }
.pressure-yellow { color: #FFFF00; }
.pressure-red { color: #FF0000; }

.rain-black { color: #000000; }
.rain-green { color: #008000; }
.rain-yellow { color: #FFFF00; }
.rain-orange { color: #FFA500; }
.rain-red { color: #FF0000; }

.color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}