/* ── History Page Layout ──────────────────────────────────────── */
.nav-links { display: flex; gap: 10px; }
.nav-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: all .15s;
}
.nav-link:hover { border-color: var(--accent); background: #6c7bff18; }

.hist-controls {
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.hist-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hist-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hist-filter label {
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.hist-filter select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
  min-width: 160px;
}
.hist-filter select:focus { border-color: var(--accent); }
.hist-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.hist-btn:hover { background: #5568ff; }
.hist-btn:disabled { opacity: 0.4; cursor: default; }
.hist-btn-sm {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}
.hist-btn-sm:hover { border-color: var(--accent); }

.hist-layout {
  padding: 16px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Sections ────────────────────────────────────────────────── */
.hist-section {
  margin-bottom: 24px;
}
.hist-section h2 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--text);
}
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* ── Seller Cards Grid ───────────────────────────────────────── */
.sellers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.seller-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color .15s;
}
.seller-card:hover { border-color: var(--accent); }
.seller-card.mega-card { border-color: var(--accent); background: rgba(108,123,255,0.06); border-width: 2px; }
.seller-card.mega-card:hover { border-color: #8b9aff; }
.seller-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.seller-card-name { font-size: 0.9rem; }
.seller-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.stat {
  text-align: center;
  padding: 4px;
  background: var(--bg);
  border-radius: 4px;
}
.stat-val {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
}
.price-down-text { color: var(--green); }
.price-up-text { color: var(--red); }
.seller-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Chart ────────────────────────────────────────────────────── */
.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.chart-container canvas {
  max-height: 280px;
}

/* ── Log Table ────────────────────────────────────────────────── */
.log-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.hist-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky;
  top: 0;
}
.hist-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #1e2130;
  white-space: nowrap;
}
.hist-table tr:hover td { background: #1e223060; }
.log-ts { color: var(--text-dim); font-size: 0.75rem; }
.log-duration { color: #fbbf24; font-size: 0.75rem; white-space: nowrap; font-family: monospace; }
.log-detail { color: var(--text-dim); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* ── Type Badges ─────────────────────────────────────────────── */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
}
.type-price-up   { background: #f8717125; color: var(--red); }
.type-price-down { background: #34d39925; color: var(--green); }
.type-stock-up   { background: #22d3ee20; color: var(--cyan); }
.type-stock-down { background: #6c7bff20; color: var(--accent); }
.type-new        { background: #34d39915; color: var(--green); }
.type-gone       { background: #f8717115; color: var(--red); }

/* Log row highlights */
.log-row.type-price_up td   { border-left: 3px solid var(--red); }
.log-row.type-price_down td { border-left: 3px solid var(--green); }
.log-row.type-new td        { border-left: 3px solid var(--green); }
.log-row.type-gone td       { border-left: 3px solid var(--red); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}