/* ═══════════════════════════════════════════
   styles.css — Ontario Electricity Market Price
   Dark navy & gold theme, animations
   ═══════════════════════════════════════════ */

/* ── Base ── */
body {
  background-color: #080c14;
}

/* ── Loading Animation ── */
@keyframes pulse-loading {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.loading-pulse {
  animation: pulse-loading 1.5s ease-in-out infinite;
}

/* ── Fade-in Animation ── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in-up 0.5s ease-out both;
}
.animate-fade-in:nth-child(1) { animation-delay: 0s; }
.animate-fade-in:nth-child(2) { animation-delay: 0.1s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.2s; }

/* ── Chart & Calc Toggle Buttons ── */
.chart-toggle-btn,
.calc-toggle-btn {
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}
.chart-toggle-btn:hover,
.calc-toggle-btn:hover {
  background-color: rgba(224, 168, 50, 0.15);
}

/* ── Chart Container — full bleed, responsive height ── */
.chart-container {
  height: 280px;
}
@media (min-width: 640px) {
  .chart-container {
    height: 400px;
  }
}
@media (min-width: 1024px) {
  .chart-container {
    height: 480px;
  }
}

/* ── Demo Data Banner ── */
.demo-banner {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.05));
  border-left: 3px solid #d97706;
}

/* ── Hide number input spinners for cleaner look ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}