/* ================================================
   BWS — Forecast Page
   ================================================ */

.day-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-lg); }

.day-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: var(--transition);
  text-align: center;
  min-width: 80px;
}

.day-tab:hover { border-color: var(--bws-blue); color: var(--bws-blue); }
.day-tab.active { background: var(--bws-blue); color: white; border-color: var(--bws-blue); }

.day-tab .tab-icon  { font-size: 1.3rem; display: block; }
.day-tab .tab-name  { display: block; }
.day-tab .tab-temps { font-size: 0.7rem; opacity: 0.8; display: block; }

.hourly-detail-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hourly-detail-table th {
  text-align: left;
  padding: 8px 12px;
  background: #f4f7fb;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hourly-detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.hourly-detail-table tr:last-child td { border-bottom: none; }
.hourly-detail-table tr.hour-now { background: #edf3ff; }
.hourly-detail-table tr.past { opacity: 0.5; }

.precip-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  width: 100px;
}
.precip-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9, #2b5ea7);
  border-radius: 3px;
}

.wind-arrow {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.3s;
}

.stat-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.stat-box {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  text-align: center;
  border: 1px solid var(--border);
}

.stat-box .stat-val { font-size: 1.6rem; font-weight: 800; color: var(--bws-navy); }
.stat-box .stat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 2px; }

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