/* Elmarknad Kvartspris-widget
   Matching style med övriga spot-widgets (Poppins/Inter, ljus bakgrund, kort). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600&display=swap');

:root {
  --eq-bg: #f3f6fb;
  --eq-card-bg: #ffffff;
  --eq-border: #e3e7f0;
  --eq-primary: #003c78;
  --eq-primary-soft: #0c4688;
  --eq-text-main: #111827;
  --eq-text-muted: #6b7280;
  --eq-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --eq-radius-card: 18px;
}

/* Wrapper */

.eq-widget {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--eq-bg);
  padding: 26px 26px 30px;
  border-radius: 18px;
}

/* Header */

.eq-header {
  text-align: center;
  margin-bottom: 20px;
}

.eq-title {
  font-family: "Poppins", system-ui, -apple-system;
  font-size: 22px;
  font-weight: 600;
  color: var(--eq-text-main);
  margin-bottom: 4px;
}

.eq-subtitle {
  font-size: 13px;
  color: var(--eq-text-muted);
  margin-bottom: 16px;
}

/* Day toggle */

.eq-day-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: #e5edf9;
  padding: 3px;
  gap: 2px;
}

.eq-day-btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eq-text-muted);
  cursor: pointer;
  font-family: "Poppins", system-ui, -apple-system;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.eq-day-btn--active {
  background: var(--eq-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.eq-day-time {
  font-size: 11px;
  opacity: 0.85;
}

/* Grid / cards */

.eq-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 960px) {
  .eq-grid {
    grid-template-columns: 1fr;
  }
}

.eq-card {
  background: var(--eq-card-bg);
  border-radius: var(--eq-radius-card);
  border: 1px solid var(--eq-border);
  box-shadow: var(--eq-shadow-soft);
  padding: 16px 18px 14px;
}

.eq-card-title {
  font-family: "Poppins", system-ui, -apple-system;
  font-size: 14px;
  font-weight: 600;
  color: var(--eq-text-main);
  margin-bottom: 8px;
}

/* Canvas sizing */

.eq-card canvas {
  width: 100% !important;
  height: 260px !important;
}

/* Small helper to keep charts sharp on retina */
@supports (-webkit-overflow-scrolling: touch) {
  .eq-card canvas {
    image-rendering: -webkit-optimize-contrast;
  }
}