/* ============================================================
   EcoCast — responsive overrides + new sidebar (text labels)
   Loaded AFTER style.css so these rules win.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   GLOBAL polish — unified across Home/Forecast/Predictions
   ──────────────────────────────────────────────────────────── */

/* Sidebar — wider, perfectly centered, icon + word */
.sidebar { width: 116px; padding: 24px 10px 28px; gap: 4px; }
.sidebar-logo {
  width: 44px; height: 44px;
  margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.nav-link {
  width: 96px;
  min-height: 68px;
  padding: 10px 6px;
  border-radius: 12px;
  margin: 0 auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  color: #c5d3ec;             /* clearly readable on the navy sidebar */
  text-decoration: none;
  transition: all 0.18s ease;
}
.nav-link .ni-icon  { font-size: 22px; line-height: 1; }
.nav-link .ni-label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }

.nav-link:hover {
  background: rgba(79,142,247,0.12);
  color: #ffffff;
}
.nav-link.active {
  background: linear-gradient(135deg, rgba(79,142,247,0.32), rgba(56,217,192,0.18));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(79,142,247,0.50);
}
.nav-link.active .ni-label { font-weight: 700; }
.nav-link .tooltip { display: none !important; }

/* Topbar — consistent vertical alignment + WHITE titles */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.topbar-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff !important;          /* always pure white */
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0;
}
.topbar-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.time-badge, .loc-badge {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.loc-badge { color: var(--accent2); }
#liveClock { color: var(--text-pri); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Card spacing & alignment */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 16px;
  backdrop-filter: blur(18px);
}

/* Universal text-color guarantees */
.sec-ttl, .topbar-title, .hero-temp, .sensor-value, .sc-val, .pc-temp, .dc-num, h1, h2, h3 {
  color: var(--text-pri);
}
.sec-sub, .sensor-label, .sensor-time, .pc-hr, .pc-conf, .sc-sub, .hero-sub {
  color: var(--text-sec);
}
.fc-day-name, .sensor-label, .sc-tag, .anom-ttl {
  letter-spacing: 0.08em;
}

/* Main content area */
.main { padding: 24px 28px; }

/* Push main content over by the new wider sidebar */
.main { padding: 22px 26px; }

/* ── Tablet (≤ 1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .sensor-grid { grid-template-columns: repeat(3, 1fr); }
  .chart-grid  { grid-template-columns: 1fr; }
  .pred-grid   { grid-template-columns: repeat(3, 1fr) !important; }
  .summary-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  .hero-temp   { font-size: 60px; }
  .hero-icon   { font-size: 70px; }
  .topbar      { gap: 10px; }
  .title h1, .topbar-title { font-size: 22px !important; }
}

/* ── Phone (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main    { margin-left: 0 !important; width: 100% !important; padding: 14px !important; }

  .topbar     { flex-direction: column; align-items: flex-start; }
  .title h1, .topbar-title { font-size: 19px !important; line-height: 1.2; }
  .title p    { font-size: 12px; }
  .badges, .topbar-right { width: 100%; flex-wrap: wrap; }
  .badge, .time-badge, .loc-badge { font-size: 11px; padding: 7px 11px; }

  .hero            { padding: 18px; }
  .hero-content    { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-temp       { font-size: 48px; }
  .hero-sub        { font-size: 14px; }
  .hero-icon       { font-size: 60px; }
  .hero-stats      { gap: 10px; margin-top: 14px; width: 100%; }
  .hero-stat       { min-width: 0; flex: 1 1 calc(50% - 10px); padding: 10px 12px; }
  .hero-stat strong{ font-size: 15px; }
  .hero::after     { width: 160px; height: 160px; right: -50px; top: -50px; }

  .sensor-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .sensor-card     { padding: 14px; min-height: 0; }
  .sensor-value    { font-size: 24px; }
  .sensor-label    { font-size: 10px; }
  .sensor-icon     { font-size: 22px; }

  .chart-grid      { grid-template-columns: 1fr; gap: 14px; }
  .chart-card      { padding: 14px; }
  .chart-box       { height: 200px; }

  #fcDays          { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }

  .pred-grid       { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .summary-grid    { grid-template-columns: 1fr !important; gap: 10px !important; }
  .detail-grid     { grid-template-columns: 1fr !important; }

  .data-table      { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }

  /* Disable heavy CSS effects on phones */
  .cloud, .rain-layer, .fog-layer, .stars { display: none; }
  .celestial { width: 56px; height: 56px; right: 18px; top: 18px; }
}

/* ── Small phone (≤ 420px) ──────────────────────────────────── */
@media (max-width: 420px) {
  .sensor-grid    { grid-template-columns: 1fr !important; }
  .pred-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  #fcDays         { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-temp      { font-size: 42px; }
  .hero-icon      { font-size: 50px; }
  .hero-stat      { flex: 1 1 100%; }
  .badge          { font-size: 10px; padding: 6px 10px; }
  .topbar-title, .title h1 { font-size: 17px !important; }
}