/* ── Admin Trading panel (Components/TradingPanel.razor) ────────────────────
   Same phone-scroll rule as the Players page: fixed full-screen shell, ONE
   inner scroller (.trd-scroll). */
.trd-shell {
  position: fixed; inset: 0; height: 100dvh; overflow: hidden;
  background: #0b0d12; color: #eef0f5;
  display: flex; flex-direction: column; font-family: system-ui, sans-serif; user-select: text;
}
.trd-top { gap: 8px; }
.trd-bal { margin-left: auto; color: #7dffa0; font-weight: 800; font-size: 14px; padding-right: 6px; }
.trd-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  touch-action: pan-y; padding: 10px 12px calc(28px + env(safe-area-inset-bottom, 0px));
  max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
}
.trd-card { background: #141823; border: 1px solid #252b3b; border-radius: 12px; padding: 10px 12px; }
.trd-warn { background: #3a2410; border: 1px solid #a8641c; color: #ffcf8a; border-radius: 10px; padding: 8px 10px; font-size: 13px; }

/* PIN */
.trd-pin { margin: 18vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.trd-pin-h { font-size: 18px; font-weight: 800; color: #ffd23c; }
.trd-pin-in {
  width: 160px; text-align: center; font-size: 28px; letter-spacing: .4em; padding: 10px;
  background: #141823; border: 1px solid #3a4258; color: #fff; border-radius: 12px;
}
.trd-pin-go { background: #ffd23c; color: #111; border: none; border-radius: 10px; padding: 10px 28px; font-weight: 800; font-size: 15px; cursor: pointer; }
.trd-pin-go:disabled { opacity: .45; }
.trd-pin-err { color: #ff8a8a; font-size: 13px; }

/* header card */
.trd-win { display: flex; align-items: baseline; justify-content: space-between; }
.trd-win-l { font-weight: 800; color: #ffd23c; }
.trd-clock { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trd-clock.late { color: #ff9f43; }
.trd-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.trd-prices div { display: flex; flex-direction: column; }
.trd-prices span { font-size: 10px; color: #8a93a8; text-transform: uppercase; letter-spacing: .04em; }
.trd-prices b { font-size: 15px; font-variant-numeric: tabular-nums; }
.up { color: #5ee08a; } .dn { color: #ff6b6b; } .mut { color: #aab3c5; } .aq { color: #4dd8ff; } .or { color: #ff8a3d; }

/* fair odds */
.trd-fair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trd-fair > div { border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; }
.trd-fair-u { background: rgba(94,224,138,.10); border: 1px solid rgba(94,224,138,.35); }
.trd-fair-d { background: rgba(255,107,107,.10); border: 1px solid rgba(255,107,107,.35); }
.trd-fair span { font-size: 11px; letter-spacing: .08em; color: #aab3c5; font-weight: 700; }
.trd-fair b { font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trd-fair-u b { color: #5ee08a; } .trd-fair-d b { color: #ff6b6b; }

/* buy buttons — colour = is the price good vs fair? */
.trd-buys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trd-buy {
  border-radius: 14px; padding: 12px 8px; border: 2px solid #3a4258; background: #1a1f2c; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit;
  transition: transform .06s ease, box-shadow .2s ease;
}
.trd-buy:active { transform: scale(.98); }
.trd-buy:disabled { opacity: .5; cursor: default; }
.trd-buy-t { font-size: 15px; font-weight: 900; letter-spacing: .03em; }
.trd-buy-p { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trd-buy-b { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.trd-buy-s { font-size: 11px; color: #aab3c5; }
.trd-good { border-color: #2fd06b; background: linear-gradient(180deg, #123d24, #0f2a1a); box-shadow: 0 0 18px rgba(47,208,107,.45); }
.trd-good .trd-buy-b { background: #2fd06b; color: #062012; }
.trd-close { border-color: #e0b03a; background: linear-gradient(180deg, #3a2f12, #261f0d); }
.trd-close .trd-buy-b { background: #e0b03a; color: #241a03; }
.trd-bad { border-color: #c94444; background: linear-gradient(180deg, #3a1515, #260e0e); }
.trd-bad .trd-buy-b { background: #ff4d4d; color: #fff; }
.trd-none .trd-buy-b { background: #3a4258; }

.trd-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: #aab3c5; }
.trd-opts label { display: flex; align-items: center; gap: 4px; }
.trd-opts input { width: 64px; background: #141823; border: 1px solid #3a4258; color: #fff; border-radius: 8px; padding: 4px 6px; font-size: 13px; }
.trd-msg { text-align: center; font-size: 13px; color: #ffd23c; }

/* position */
.trd-pos-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.trd-pos-h b { font-weight: 900; }
.trd-pnl { margin-left: auto; font-weight: 900; font-size: 18px; }
.trd-act { margin: 8px 0; border-radius: 10px; padding: 8px 10px; font-weight: 800; text-align: center; font-size: 14px; }
.trd-act-hold { background: #1f2533; color: #cfd6e6; }
.trd-act-tp { background: #0f3442; color: #4dd8ff; }
.trd-act-cut { background: #4a1a10; color: #ffb08a; }
.trd-act-done { background: #1f2533; color: #ffd23c; }
.trd-pos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.trd-pos-grid div { display: flex; flex-direction: column; }
.trd-pos-grid span { font-size: 10px; color: #8a93a8; text-transform: uppercase; }
.trd-pos-grid b { font-size: 15px; }
.trd-pos-btns { display: flex; gap: 8px; margin-top: 10px; }
.trd-sell { flex: 2; background: #ff6b3d; color: #1a0700; border: none; border-radius: 10px; padding: 12px; font-weight: 900; font-size: 16px; cursor: pointer; }
.trd-cancel { flex: 1; background: #252b3b; color: #cfd6e6; border: none; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; }
.trd-pos.done { opacity: .9; }

/* charts */
.trd-ch-h { font-size: 11px; font-weight: 800; color: #ffd23c; letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 4px; }
.trd-ch-h i { font-style: normal; font-weight: 600; color: #8a93a8; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.trd-ch { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.trd-ch-empty { color: #8a93a8; font-size: 12px; padding: 20px 0; text-align: center; }

.trd-log { font-size: 12px; color: #aab3c5; display: flex; flex-direction: column; gap: 3px; max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 12px; }
.trd-pos-grid b { white-space: nowrap; }
.trd-foot { font-size: 11px; color: #6c7488; text-align: center; padding: 0 6px; }

@media (max-width: 480px) {
  .trd-prices { grid-template-columns: repeat(2, 1fr); }
  .trd-pos-grid { grid-template-columns: repeat(2, 1fr); }
  .trd-buy-p { font-size: 26px; }
  .trd-fair b { font-size: 28px; }
}

/* past 5 markets */
.trd-past { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: #8a93a8; }
.trd-past span { margin-right: 2px; text-transform: uppercase; letter-spacing: .05em; }
.trd-past i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.trd-past-up { background: #2fd06b; }
.trd-past-down { background: #ff4d4d; }
.trd-past-pending { background: #3a4258; }

/* candle chart + CONF strip */
.trd-kc { display: flex; gap: 6px; align-items: flex-start; }
.trd-kc-chart { flex: 1; min-width: 0; }
.trd-conf { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 30px; flex: 0 0 30px; }
.trd-conf-h { font-size: 9px; font-weight: 800; color: #ff9f43; letter-spacing: .04em; }
.trd-conf-c { width: 26px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #fff; }
.trd-conf-c.l { background: #1f9d50; }
.trd-conf-c.s { background: #c93a3a; }
.trd-conf-c.n { background: #2a3040; color: #cfd6e6; }
.trd-conf-score { font-size: 12px; font-weight: 900; margin-top: 2px; }
.trd-conf-key { font-size: 12px; color: #aab3c5; margin-top: 4px; }
.trd-conf-key summary { cursor: pointer; color: #8a93a8; }
.trd-conf-key div { padding: 1px 0; }
.trd-past-now { margin-left: 2px; text-transform: none !important; letter-spacing: 0 !important; color: #6c7488; }

/* buy / sell pressure */
.trd-pres { display: flex; flex-direction: column; gap: 7px; padding: 8px 12px; }
.trd-pres-l { display: flex; justify-content: space-between; font-size: 11px; color: #aab3c5; margin-bottom: 2px; }
.trd-pres-l i { font-style: normal; color: #6c7488; }
.trd-pres-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: #c93a3a; font-size: 11px; font-weight: 800; }
.trd-pres-bar .b { background: #1f9d50; color: #fff; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; min-width: 0; transition: width .4s ease; }
.trd-pres-bar .s { flex: 1; color: #fff; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; white-space: nowrap; }
.trd-pres-bar.empty { background: #1f2533; color: #6c7488; align-items: center; padding-left: 8px; font-weight: 600; }

/* 24h P&L + history */
.trd-bal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.trd-bal small { font-size: 11px; font-weight: 800; }
.trd-hist { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; }
.trd-hist-r { display: grid; grid-template-columns: 96px 40px 1fr auto; gap: 6px; align-items: baseline; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #1f2533; }
.trd-hist-r .t { color: #8a93a8; font-size: 11px; white-space: nowrap; }
.trd-hist-r .d { color: #cfd6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-hist-r .d i { font-style: normal; color: #6c7488; margin-left: 4px; }
.trd-hist-r .p { text-align: right; }

/* columns: stacked on phones/tablets, three side-by-side on desktop so nothing needs page scroll */
.trd-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1100px) {
  .trd-scroll {
    max-width: none; display: grid; gap: 12px; overflow: hidden; padding: 12px 14px;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) minmax(320px, 400px);
  }
  .trd-col { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 2px; }
  .trd-col-b .trd-card { flex: 0 0 auto; }
  /* keep the big charts inside the window height */
  .trd-col-b .trd-ch { max-height: 21vh; }
  .trd-col-b #trd-wchart .trd-ch { max-height: none; width: 100%; height: auto; display: block; }
  .trd-col-b .trd-ch.sm { max-height: 12vh; }
  .trd-col-b .trd-kc .trd-ch { max-height: 50vh; }
  .trd-col-c .trd-hist { max-height: none; overflow: visible; }
  /* right column: window info + extras on top, log, then history fills the bottom (about half) */
  .trd-col-c .trd-histcard { flex: 1 1 0; min-height: 30vh; display: flex; flex-direction: column; }
  .trd-col-c .trd-histcard .trd-hist { flex: 1; min-height: 0; overflow-y: auto; }
  .trd-col-c { overflow: hidden; }
  .trd-col-c .trd-log { max-height: 14vh; flex: 0 0 auto; }
  .trd-col-c > .trd-card:not(.trd-histcard) { flex: 0 0 auto; }
}

/* candle chart header + TradingView embed */
.trd-kc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trd-tabs { display: inline-flex; background: #0b0d12; border: 1px solid #252b3b; border-radius: 8px; overflow: hidden; }
.trd-tabs button { background: none; border: none; color: #8a93a8; font-size: 11px; font-weight: 800; padding: 4px 10px; cursor: pointer; letter-spacing: .03em; }
.trd-tabs button.on { background: #252b3b; color: #ffd23c; }
.trd-ch-sub { font-size: 11px; color: #6c7488; margin: -2px 0 6px; }
.trd-tv-wrap { flex: 1; min-width: 0; height: 480px; min-height: 260px; resize: vertical; overflow: hidden; border-radius: 8px; border: 1px solid #252b3b; }
.trd-tv { width: 100%; height: 100%; }
@media (min-width: 1100px) {
  .trd-col-b .trd-tv-wrap { height: 46vh; }
}

/* Zodark pro chart (Lightweight Charts) */
.trd-zd { width: 100%; height: 100%; display: flex; flex-direction: column; background: #141823; }
.trd-zd .zdc-main { position: relative; flex: 76 1 0; min-height: 0; }
.trd-zd .zdc-sub { flex: 18 1 0; min-height: 0; border-top: 1px solid #252b3b; }
.trd-zd .zdc-macd { flex: 24 1 0; }
.trd-zd .zdc-zones { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.trd-tabs a { color: #8a93a8; font-size: 11px; font-weight: 800; padding: 4px 10px; text-decoration: none; border-left: 1px solid #252b3b; }
.trd-tabs a:hover { color: #4dd8ff; }

/* refresh + time frame */
.trd-refresh { margin-left: 10px; background: #252b3b; color: #cfd6e6; border: 1px solid #3a4258; border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 12px; cursor: pointer; }
.trd-refresh:hover { color: #ffd23c; }
.trd-tf { background: #0b0d12; color: #ffd23c; border: none; border-left: 1px solid #252b3b; font-size: 11px; font-weight: 800; padding: 4px 6px; cursor: pointer; }

/* window prediction */
.trd-pred { padding: 8px 12px; }
.trd-pred-h { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #aab3c5; }
.trd-pred-h span { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 800; color: #ffd23c; }
.trd-pred-h b { font-size: 18px; font-weight: 900; }
.trd-pred-s { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: #252b3b; color: #cfd6e6; text-transform: uppercase; }
.trd-pred-s.strong { background: #1f9d50; color: #fff; } .trd-pred-s.likely { background: #2b6b45; color: #fff; } .trd-pred-s.lean { background: #6b5a1f; color: #fff; }
.trd-pred-rec { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; }
.trd-pred-rec div { display: flex; gap: 8px; align-items: baseline; }
.trd-pred-rec span { color: #8a93a8; min-width: 132px; }
.trd-pred-rec i { font-style: normal; color: #6c7488; }
.trd-pred-recent { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.trd-pred-recent span { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #1f2533; color: #cfd6e6; }
.trd-pred-recent span.ok { background: rgba(47,208,107,.18); color: #7dffa0; }
.trd-pred-recent span.bad { background: rgba(255,77,77,.18); color: #ff9a9a; }
.trd-pred-note { font-size: 10.5px; color: #6c7488; margin-top: 5px; }

/* window info: left card on phones; inside the window-chart card on desktop */
.trd-wc-row { display: block; }
.trd-wc-info { display: none; }
@media (min-width: 1100px) {
  .trd-head-side { display: none; }
  .trd-wc-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: center; }
  .trd-wc-info { display: block; border-right: 1px solid #252b3b; padding-right: 12px; }
  .trd-wc-info .trd-prices { grid-template-columns: 1fr; gap: 4px; }
  .trd-wc-info .trd-prices div { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 6px; }
  .trd-wc-chart { min-width: 0; }
  .trd-wc-info .trd-win-l { white-space: nowrap; font-size: 12px; }
  .trd-wc-info .trd-clock { font-size: 24px; }
  .trd-wc-info .trd-prices { margin-top: 4px; gap: 2px; }
  .trd-wc-info .trd-prices b { font-size: 13px; }
  .trd-wc-info .trd-past { margin-top: 4px; }
}

/* chasing / dip hint on the buy buttons */
.trd-chase { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.trd-chase.hot { background: rgba(255,159,67,.18); color: #ffb26b; }
.trd-chase.dip { background: rgba(77,216,255,.14); color: #8fe6ff; }

/* resting bid */
.trd-bid { padding: 8px 12px; }
.trd-bid-h { font-size: 12px; font-weight: 800; color: #ffd23c; margin-bottom: 6px; }
.trd-bid-h i { font-style: normal; font-weight: 600; color: #6c7488; font-size: 11px; }
.trd-bid-row, .trd-bid-wait { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; flex-wrap: wrap; }
.trd-bid-row > span:first-child { min-width: 64px; font-weight: 900; }
.trd-bid-row input { width: 64px; background: #0b0d12; color: #fff; border: 1px solid #3a4258; border-radius: 6px; padding: 4px 6px; font-weight: 800; }
.trd-bid-wait b { font-size: 15px; }
.trd-sm { margin-left: auto; background: #252b3b; color: #ffd23c; border: 1px solid #3a4258; border-radius: 7px; padding: 4px 10px; font-weight: 800; font-size: 12px; cursor: pointer; }
.trd-sm:disabled { opacity: .45; cursor: default; }

/* RLWG strip */
.trd-whale { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; margin: 2px 0 6px; padding: 4px 8px; background: #0f131c; border: 1px solid #252b3b; border-radius: 8px; }
.trd-whale label { font-weight: 900; color: #ffd23c; cursor: pointer; }

/* RLWG-style window badge */
.trd-style { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 7px; margin: 2px 0 6px; background: #1a1f2b; color: #aab3c5; }
.trd-style.quiet { background: rgba(138,147,168,.14); color: #c5ccd9; }
.trd-style.hot { background: rgba(255,159,67,.16); color: #ffc58a; }
.trd-style.normal { background: rgba(77,216,255,.10); color: #a9ebff; }
/* paper copy */
.trd-copy { padding: 8px 12px; }
.trd-copy-l { font-size: 12px; margin-top: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.trd-copy-l b { font-size: 16px; font-weight: 900; }
.trd-bid-mode { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: #cfd6e6; margin-bottom: 4px; cursor: pointer; }
.trd-bid-mode i { font-style: normal; color: #6c7488; font-weight: 600; }

.trd-whale .trd-snd { color: #cfd6e6; }

/* window info lives in the right column on desktop, at the top of the left column on phones */
.trd-head-right { display: none; }
@media (min-width: 1100px) {
  .trd-head-right { display: block; }
  .trd-head-right .trd-style { margin-top: 6px; }
  .trd-head-right .trd-prices { grid-template-columns: repeat(2, 1fr); }
}

/* lottery-ticket warnings + RLWG main side */
.trd-chase.lotto { background: rgba(178,107,255,.18); color: #d8b8ff; }
.trd-bid-row .trd-chase.lotto { display: inline-block; margin-top: 0; }
.trd-lotto-tag { font-size: 11px; color: #b9a3d9; background: rgba(178,107,255,.12); padding: 1px 6px; border-radius: 6px; cursor: help; }
.trd-whale-main { padding: 1px 7px; border-radius: 6px; background: #1f2533; }
.trd-whale-if { font-size: 11px; color: #9aa4b8; }
.trd-whale-if b { font-weight: 600; }