/* Live auction status bar + card highlight (statistics.html) */
.live-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 -10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e4e7ec;
  font-size: 14px;
  color: #344054;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; flex-shrink: 0; }
.live-label { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.live-updated { margin-left: auto; color: #667085; font-size: 13px; font-variant-numeric: tabular-nums; }

.live-bar.is-live { border-color: #abefc6; background: #f6fef9; }
.live-bar.is-live .live-dot { background: #12b76a; box-shadow: 0 0 0 0 rgba(18, 183, 106, .6); animation: live-pulse 1.8s infinite; }
.live-bar.is-live .live-label { color: #027a48; }

.live-bar.is-stale { border-color: #fedf89; background: #fffcf5; }
.live-bar.is-stale .live-dot { background: #f79009; }
.live-bar.is-stale .live-label { color: #b54708; }

.live-bar.is-idle .live-label { color: #475467; }

/* recent results (no sale running right now) */
.live-bar.is-current { border-color: #abefc6; background: #f6fef9; }
.live-bar.is-current .live-dot { background: #12b76a; }
.live-bar.is-current .live-label { color: #027a48; }

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}

.stat-card .stat-value { font-variant-numeric: tabular-nums; }
.stat-card.live-changed { animation: live-flash 1.6s ease-out; }
@keyframes live-flash {
  0%   { background: #d1fadf; }
  100% { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .live-bar.is-live .live-dot, .stat-card.live-changed { animation: none; }
}
@media (max-width: 560px) {
  .live-updated { margin-left: 0; width: 100%; }
}

/* Refresh button in the status bar */
.live-refresh {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.live-refresh:hover { border-color: #058d3b; color: #058d3b; }
.live-refresh svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.live-refresh.is-busy { cursor: progress; opacity: .7; }
.live-refresh.is-busy svg { animation: live-spin .8s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.live-updated + .live-refresh { margin-left: 0; }
@media (max-width: 560px) { .live-refresh { margin-left: auto; } }