/* ════════════════════════════════════════════════════════════════════════════
   Shared left sidebar styling — linked from <head> on every customer page.

   This used to be injected by sidebar.js at runtime, which applied it AFTER
   first paint and visibly re-laid-out the sidebar a fraction of a second in.
   A real stylesheet in <head> is applied before the first paint, so nothing
   moves. Keep it that way: never move these rules back into JS.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── coin selector ──────────────────────────────────────────────────────────
   Only marketplace.html ever styled this, so on every other page it fell back
   to the browser default: white box, black text. */
#sb-coin {
  background: var(--glass-1);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  max-width: 130px;
  color-scheme: dark;          /* dark native dropdown, not a white popup */
}
#sb-coin option { background: #030308; color: #EEEEF8; }

/* ── "Mining now" boxes ─────────────────────────────────────────────────────
   SHA-256 keeps the existing green; Scrypt is light blue so the two
   algorithms are told apart at a glance. */
.sb-mining + .sb-mining { margin-top: -2px; }

.sb-mining.scrypt {
  background: rgba(56,189,248,0.05);
  border-color: rgba(56,189,248,0.18);
  box-shadow: 0 1px 0 rgba(56,189,248,0.10) inset, 0 6px 24px rgba(0,0,0,0.50);
}
.sb-mining.scrypt::before {
  background: linear-gradient(90deg, transparent, #38BDF8, transparent);
}
.sb-mining.scrypt .sb-mining-title { color: rgba(56,189,248,0.72); }
.sb-mining.scrypt .sb-mining-val {
  color: #38BDF8;
  text-shadow: 0 0 18px rgba(56,189,248,0.45);
}

/* ── odds note ──────────────────────────────────────────────────────────────
   .sidebar-stats is fixed to the bottom of the viewport, so anything that
   changes its height moves every row inside it. This note starts empty and is
   filled once the fleet loads, so reserve its two lines up front. */
#sb-odds-note {
  display: block;
  min-height: 28px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 3px;
}

/* Same reasoning: the odds value must not collapse to zero height while it
   still reads "—". */
#sb-solo-odds { min-height: 20px; }

/* ── market panel: minimise control ───────────────────────────────────────
   The panel is pinned to the bottom of the viewport; on short screens it
   would cover the "Mining now" boxes. The toggle is injected by sidebar.js,
   the state is remembered per browser, and short viewports start minimised. */
.sb-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: -4px 0 8px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); transition: color .18s;
}
.sb-toggle:hover { color: var(--ore); }
.sb-toggle:focus-visible { outline: 2px solid var(--ore); outline-offset: 2px; border-radius: 4px; }
.sb-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sidebar-stats.collapsed { padding: 8px 14px 8px; }
.sidebar-stats.collapsed .sb-toggle { margin: 0; }
.sidebar-stats.collapsed .sb-toggle svg { transform: rotate(180deg); }
.sidebar-stats.collapsed > :not(.sb-toggle) { display: none !important; }
.sidebar.stats-collapsed { padding-bottom: 72px !important; }