/* Elmarknad Kvartspris-tabell
   Stilmatchning med övriga widgets (Poppins/Inter, ljus bakgrund, rundade hörn).
   V3: centralt placerad dag-toggle och ingen headertext. */

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

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

/* Wrapper */

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

/* Header */

.eqt-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Day-toggle */

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

.eqt-day-btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eqt-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;
}

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

/* Table container */

.eqt-table-container {
  background: var(--eqt-card-bg);
  border-radius: var(--eqt-radius-card);
  border: 1px solid var(--eqt-border);
  box-shadow: var(--eqt-shadow-soft);
  overflow-y: auto;
  max-height: 360px; /* ca 6–8 timmar synliga åt gången */
}

/* Table */

.eqt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.eqt-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f7f9fe;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--eqt-text-main);
  border-bottom: 1px solid var(--eqt-border);
}

.eqt-table thead th:first-child {
  border-top-left-radius: var(--eqt-radius-card);
}

.eqt-table thead th:last-child {
  border-top-right-radius: var(--eqt-radius-card);
}

.eqt-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #edf1f8;
  color: var(--eqt-text-main);
}

.eqt-table tbody tr:nth-child(even) td {
  background-color: #f9fbff;
}

.eqt-table tbody tr:last-child td {
  border-bottom: none;
}

/* Hover interaction */

.eqt-table tbody tr {
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.eqt-table tbody tr:hover td {
  background-color: rgba(0, 60, 120, 0.06);
}

.eqt-table tbody tr:hover {
  transform: translateY(-1px);
}

/* Time column */

.eqt-table tbody td:first-child {
  white-space: nowrap;
  color: var(--eqt-text-muted);
  font-weight: 500;
}

/* Responsive */

@media (max-width: 768px) {
  .eqt-header {
    justify-content: center;
  }

  .eqt-table {
    font-size: 12px;
  }

  .eqt-table tbody td,
  .eqt-table thead th {
    padding: 8px 10px;
  }
}