/* dashboard/dashboard.css — shared styles loaded after theme.css on every page. */

/* Freshness badge — used next to live tables on every polling page. */
.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--card);
  border: 1px solid var(--card-border);
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.freshness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 8px;
}
.freshness-badge[data-state="ok"] .freshness-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green-dim);
  animation: freshness-pulse 2s ease-in-out infinite;
}
.freshness-badge[data-state="warn"] {
  color: var(--yellow);
  border-color: rgba(250,204,21,0.35);
}
.freshness-badge[data-state="warn"] .freshness-dot {
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(250,204,21,0.5);
}
.freshness-badge[data-state="err"] {
  color: var(--red);
  border-color: rgba(248,113,113,0.4);
}
.freshness-badge[data-state="err"] .freshness-dot {
  background: var(--red);
  box-shadow: 0 0 6px var(--red-dim);
  animation: freshness-pulse 1s ease-in-out infinite;
}
@keyframes freshness-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.freshness-mount {
  display: inline-flex;
  margin: 0 0 12px 0;
}

/* Skeleton loading rows — shimmer effect using theme tokens. */
.skeleton {
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--card-border) 0%,
    var(--card-hover) 50%,
    var(--card-border) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-row td {
  padding: 12px 8px !important;
}
.skeleton-block {
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--card-border) 0%,
    var(--card-hover) 50%,
    var(--card-border) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Today-so-far widget on home.html. */
.today-widget {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 20px;
}
.today-widget .tile {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
  position: relative;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, transform 0.2s;
}
.today-widget .tile:hover {
  border-color: var(--card-hover);
  transform: translateY(-2px);
}
.today-widget .tile-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  font-weight: 600;
}
.today-widget .tile-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.today-widget .tile-value.pos { color: var(--green); }
.today-widget .tile-value.neg { color: var(--red); }
.today-widget .tile-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin: 6px 0 0 0;
}
.today-widget .tile-sub.warn {
  color: var(--yellow);
}
@media (max-width: 720px) {
  .today-widget {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .today-widget .tile-value { font-size: 26px; }
}

/* Recent-settled VIP ribbon on alerts.html. */
.settled-ribbon {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 8px 16px 16px;
}
.settled-ribbon[data-tone="pos"] { border-left: 3px solid var(--green); }
.settled-ribbon[data-tone="neg"] { border-left: 3px solid var(--red); }
.settled-ribbon-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.settled-ribbon-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.settled-ribbon-scroll::-webkit-scrollbar { height: 4px; }
.settled-ribbon-scroll::-webkit-scrollbar-thumb { background: var(--card-hover); border-radius: 2px; }
.settled-card {
  flex: 0 0 170px;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
  scroll-snap-align: start;
  transition: border-color 0.2s, transform 0.2s;
}
.settled-card.pos { border-left: 3px solid var(--green); }
.settled-card.neg { border-left: 3px solid var(--red); opacity: 0.75; }
.settled-card.neutral { border-left: 3px solid var(--yellow); }
.settled-card-result {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.settled-card.pos .settled-card-result { color: var(--green); }
.settled-card.neg .settled-card-result { color: var(--red); }
.settled-card.neutral .settled-card-result { color: var(--yellow); }
.settled-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settled-card-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settled-card.flash { animation: settled-flash 1.5s ease-out 1; }
@keyframes settled-flash {
  0% { box-shadow: 0 0 0 2px var(--orange); transform: scale(1.03); }
  100% { box-shadow: none; transform: scale(1); }
}
@media (max-width: 600px) {
  .settled-ribbon { margin: 8px 10px 12px; padding: 10px 12px; }
  .settled-card { flex-basis: 150px; }
}

/* Skip-to-content link — invisible until focused via Tab. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--orange);
  color: #0a0a14;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--text); }

/* Share-view button on filter toolbars. */
.share-btn {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  transition: border-color .15s, color .15s, background .15s;
}
.share-btn:hover { border-color: var(--orange); color: var(--orange); }
.share-btn:active { transform: translateY(1px); }

/* Contextual empty-state inside live tables. */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.empty-state strong {
  color: var(--text);
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}
.empty-state a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}
.empty-state a:hover { text-decoration: underline; }

/* ============================================================
   Trader view — an instrument, not a page.
   Colour is semantic only: green = back/steam, magenta = lay,
   orange = drift, yellow = the morning price. Everything else
   is greyscale so the colour always means something.
   ============================================================ */

.trader {
  --lad-back: #34d399;
  --lad-lay: #f472b6;
  --lad-open: #fbbf24;
  --rule: rgba(255,255,255,0.07);
  --num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px 48px;
}

/* ---- header: race identity ---- */
.trader__head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.trader__race-select {
  appearance: none; -webkit-appearance: none;
  background: var(--card-solid); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 8px;
  padding: 9px 34px 9px 12px; font: 600 0.85rem/1 'Inter', sans-serif;
  cursor: pointer; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s ease;
}
.trader__race-select:hover { border-color: var(--card-hover); }
.trader__race-select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.trader__race-title {
  font: 700 1.35rem/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.trader__race-status {
  font: 600 0.68rem/1 var(--num); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 10px;
}

/* ---- hero: three instrument readouts ---- */
.trader__hero {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: 0 0 20px;
  background: var(--rule);
  border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden;
}
.trader__hero-cell {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 18px; background: var(--card-solid);
}
.trader__hero-label {
  font: 600 0.62rem/1 var(--num); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.trader__hero-label em { font-style: normal; opacity: 0.65; }
.trader__hero-value {
  font: 600 1.5rem/1.15 var(--num); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.trader__hero-sub { font-size: 0.72rem; color: var(--text-dim); }
.trader__hero-sub.is-stale { color: var(--orange); font-weight: 700; }

/* ---- loud failure ---- */
.trader__error {
  background: rgba(248,113,113,0.1);
  border: 1px solid var(--red); border-left-width: 4px;
  border-radius: 8px; padding: 12px 16px; margin: 0 0 18px;
  color: #fecaca; font-size: 0.85rem;
}


/* ---- table ---- */
.trader__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trader__table {
  width: 100%; min-width: 1480px;
  border-collapse: collapse; font-variant-numeric: tabular-nums;
}
.trader__table th {
  position: sticky; top: 0; z-index: 2;
  text-align: right; font: 600 0.6rem/1 var(--num);
  letter-spacing: 0.12em; color: var(--text-muted);
  padding: 0 10px 9px; white-space: nowrap;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.trader__table th:nth-child(1),
.trader__table th:nth-child(2),
.trader__table th:nth-child(3) { text-align: left; }
.trader__table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); }

.trader__row { cursor: pointer; transition: background .12s ease; }
.trader__row:hover { background: rgba(255,255,255,0.035); }
.trader__row.is-steamer td:first-child { box-shadow: inset 3px 0 0 var(--lad-back); }
.trader__row.is-drifter td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.trader__row.is-leg { background: rgba(250,204,21,0.07); }
.trader__row.is-leg td:first-child { box-shadow: inset 3px 0 0 var(--lad-open); }

.trader__rank {
  font: 600 0.8rem/1 var(--num); color: var(--text-muted);
  width: 34px; text-align: center !important;
}
.trader__name { min-width: 190px; }
.trader__name > span:first-child {
  font: 600 0.92rem/1.25 'Inter', sans-serif; color: var(--text);
}
.trader__conn {
  display: block; margin-top: 2px;
  font-size: 0.68rem; color: var(--text-muted);
}

/* ---- badges: pills, not bare words ---- */
.trader__badge {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font: 700 0.55rem/1 var(--num); letter-spacing: 0.08em;
  padding: 3px 6px; border-radius: 4px; border: 1px solid transparent;
}
.trader__badge.is-steam { color: var(--lad-back); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.trader__badge.is-drift { color: var(--orange); background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.3); }
.trader__badge.is-alerted {
  color: var(--lad-open); background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.45);
  animation: traderPulse 2s ease-in-out infinite;
}
@keyframes traderPulse { 50% { border-color: rgba(251,191,36,0.9); } }
@media (prefers-reduced-motion: reduce) { .trader__badge.is-alerted { animation: none; } }

/* ---- the book: Betfair's grid ----
   Three back prices then three lay prices, best of each meeting in the
   middle so the spread sits at the centre of the row. Colour deepens
   toward the best price, the way every exchange interface does it. */
.trader__cell {
  text-align: center; vertical-align: middle;
  padding: 5px 6px !important; min-width: 64px;
  border-left: 1px solid var(--bg); line-height: 1.15;
}
.trader__cell-price {
  display: block; font: 600 0.88rem/1.2 var(--num);
  color: var(--text); letter-spacing: -0.02em;
}
.trader__cell-size {
  display: block; margin-top: 1px;
  font: 500 0.63rem/1 var(--num); color: rgba(255,255,255,0.6);
}
.trader__cell.is-back.d0 { background: rgba(56,140,222,0.46); }
.trader__cell.is-back.d1 { background: rgba(56,140,222,0.26); }
.trader__cell.is-back.d2 { background: rgba(56,140,222,0.13); }
.trader__cell.is-lay.d0  { background: rgba(233,84,140,0.46); }
.trader__cell.is-lay.d1  { background: rgba(233,84,140,0.26); }
.trader__cell.is-lay.d2  { background: rgba(233,84,140,0.13); }
.trader__cell.is-empty   { background: rgba(255,255,255,0.02); }
/* the spread — where best back meets best lay */
.trader__cell.is-back.d0 { border-right: 2px solid var(--bg); }
.trader__row:hover .trader__cell.is-back.d0 { background: rgba(56,140,222,0.6); }
.trader__row:hover .trader__cell.is-lay.d0  { background: rgba(233,84,140,0.6); }

.trader__ltp {
  text-align: right; font: 700 0.92rem var(--num);
  color: var(--lad-open); white-space: nowrap;
}
/* projected SP — the market's own forecast, and how far it is from the
   price you can take right now */
.trader__sp { text-align: right; font-family: var(--num); white-space: nowrap; font-size: 0.85rem; }
.trader__sp-gap { margin-left: 5px; font-size: 0.68rem; opacity: 0.9; }
.trader__sp-gap.is-in  { color: var(--lad-back); }   /* forecast to shorten */
.trader__sp-gap.is-out { color: var(--orange); }     /* forecast to drift */
.trader__sp-none { color: var(--text-muted); }
.trader__sp-gap.is-settled { color: var(--text-muted); }

/* ---- card scan: the whole card, ranked, above the single-race grid ---- */
.trader__scan {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card-solid); margin: 0 0 20px; overflow: hidden;
}
.trader__scan-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rule);
}
.trader__scan-title {
  font: 700 0.66rem/1 var(--num); letter-spacing: 0.14em; color: var(--lad-open);
}
.trader__scan-sub { font-size: 0.72rem; color: var(--text-muted); }
.trader__scan-filters { margin-left: auto; display: flex; gap: 5px; }
.trader__chip {
  font: 600 0.66rem/1 var(--num); padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--rule); background: transparent; color: var(--text-dim);
  cursor: pointer; transition: all .12s ease;
}
.trader__chip:hover { color: var(--text); border-color: var(--card-hover); }
.trader__chip.is-on { background: rgba(56,140,222,0.22); border-color: rgba(56,140,222,0.6); color: #9ecbf5; }
.trader__scan-body { display: flex; flex-direction: column; }
.trader__scan-row {
  display: grid; align-items: center; gap: 12px; width: 100%;
  grid-template-columns: 52px minmax(120px, 1.4fr) minmax(110px, 1fr) 74px minmax(150px, 1.2fr) 68px;
  padding: 9px 16px; background: none; border: 0;
  border-bottom: 1px solid var(--rule); color: inherit;
  font-family: inherit; text-align: left; cursor: pointer;
}
.trader__scan-row:last-child { border-bottom: 0; }
.trader__scan-row:hover { background: rgba(255,255,255,0.04); }
.trader__scan-gap {
  font: 700 0.85rem var(--num); color: var(--lad-back); text-align: right;
}
.trader__scan-name { font-weight: 600; font-size: 0.88rem; }
.trader__scan-race, .trader__scan-off, .trader__scan-px {
  font: 500 0.72rem var(--num); color: var(--text-dim);
}
.trader__scan-px b { color: var(--text); font-weight: 600; }
.trader__scan-size { font: 600 0.76rem var(--num); color: #9ecbf5; text-align: right; }
.trader__scan-empty, .trader__scan-more {
  padding: 14px 16px; font-size: 0.76rem; color: var(--text-muted);
}
[data-theme="light"] .trader__chip.is-on { background: #d7ebfd; border-color: #7fb6e6; color: #1d6fb8; }
[data-theme="light"] .trader__scan-row:hover { background: rgba(15,23,42,0.035); }
[data-theme="light"] .trader__scan-size { color: #1d6fb8; }
@media (max-width: 900px) {
  .trader__scan-row { grid-template-columns: 44px 1fr 64px; row-gap: 2px; }
  .trader__scan-race, .trader__scan-px { grid-column: 2 / -1; }
  .trader__scan-off { text-align: right; }
}

.trader__vwap { text-align: right; font-family: var(--num); white-space: nowrap; font-size: 0.85rem; }
.trader__spr { text-align: right; font: 500 0.76rem var(--num); color: var(--text-muted); }
.trader__spr.is-tight { color: var(--lad-back); font-weight: 700; }
.trader__wom { text-align: right; font: 500 0.78rem var(--num); color: var(--text-dim); }
.trader__wom.is-back-heavy { color: #6ab0f0; font-weight: 700; }
.trader__wom.is-lay-heavy  { color: #f18cb4; font-weight: 700; }

/* withdrawals — never hidden, because Rule 4 follows them */
.trader__removed-row td {
  padding: 10px 12px !important; font-size: 0.78rem; color: var(--text-dim);
  background: rgba(251,146,60,0.06); border-top: 1px solid rgba(251,146,60,0.3);
}
.trader__removed-row em { font-style: normal; color: var(--text-muted); }
.trader__badge.is-removed {
  margin-left: 0; margin-right: 6px;
  color: var(--orange); background: rgba(251,146,60,0.14); border-color: rgba(251,146,60,0.45);
}
.trader__removed-note { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.72rem; }

.trader__h-back, .trader__h-lay { text-align: center !important; }
.trader__h-back { color: #7ab6f0; }
.trader__h-lay  { color: #f18cb4; }

/* ---- numeric columns ---- */
.trader__price, .trader__rel, .trader__delta, .trader__vol {
  text-align: right; font-family: var(--num); white-space: nowrap;
}
.trader__price { font-size: 1rem; font-weight: 600; }
.trader__price.is-back { color: var(--lad-back); }
.trader__price.is-lay  { color: var(--lad-lay); }
.trader__rel { font-size: 0.8rem; color: var(--text-dim); }
.trader__rankdelta { margin-left: 5px; font-size: 0.7rem; opacity: 0.8; }
.trader__delta { font-size: 0.8rem; color: var(--text-dim); }
.trader__vol { font-size: 0.78rem; color: var(--text-dim); }
.trader__state {
  text-align: right; font: 600 0.62rem/1 var(--num);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.trader__spark { line-height: 0; width: 60px; }
.trader__spark-none { font-family: var(--num); color: var(--text-muted); }

/* ---- light theme ----
   The dark palette leans on white-on-black rules and a white-tinted ladder
   track, both of which vanish on a light background. Redefine them rather
   than letting the instrument lose its frame. */
[data-theme="light"] .trader {
  --lad-back: #059669;
  --lad-lay: #db2777;
  --lad-open: #d97706;
  --rule: rgba(15,23,42,0.1);
}
[data-theme="light"] .trader__row:hover { background: rgba(15,23,42,0.035); }
[data-theme="light"] .trader__cell { border-left-color: #fff; }
[data-theme="light"] .trader__cell-size { color: rgba(15,23,42,0.62); }
[data-theme="light"] .trader__cell.is-back.d0 { background: #a6d8ff; }
[data-theme="light"] .trader__cell.is-back.d1 { background: #c9e6ff; }
[data-theme="light"] .trader__cell.is-back.d2 { background: #e3f2ff; }
[data-theme="light"] .trader__cell.is-lay.d0  { background: #fac9d4; }
[data-theme="light"] .trader__cell.is-lay.d1  { background: #fcdde4; }
[data-theme="light"] .trader__cell.is-lay.d2  { background: #feeef2; }
[data-theme="light"] .trader__cell.is-empty   { background: rgba(15,23,42,0.03); }
[data-theme="light"] .trader__cell.is-back.d0 { border-right-color: #fff; }
[data-theme="light"] .trader__row:hover .trader__cell.is-back.d0 { background: #8ccbff; }
[data-theme="light"] .trader__row:hover .trader__cell.is-lay.d0  { background: #f8b3c3; }
[data-theme="light"] .trader__h-back { color: #1d6fb8; }
[data-theme="light"] .trader__h-lay  { color: #c2185b; }
[data-theme="light"] .trader__ltp { color: #b45309; }
[data-theme="light"] .trader__row.is-leg { background: rgba(217,119,6,0.09); }
[data-theme="light"] .trader__error { background: rgba(220,38,38,0.07); color: #991b1b; }
[data-theme="light"] .trader__badge.is-steam { color: #047857; background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.35); }
[data-theme="light"] .trader__badge.is-drift { color: #c2410c; background: rgba(234,88,12,0.1); border-color: rgba(234,88,12,0.35); }
[data-theme="light"] .trader__badge.is-alerted { color: #b45309; background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.45); }

@media (max-width: 900px) {
  .trader { padding: 16px 14px 40px; }
  .trader__hero { grid-template-columns: 1fr; }
  .trader__race-title { font-size: 1.15rem; }
  .trader__head { gap: 10px; }
}