/* ==========================================================================
 * trade.css — PolyCop web trading panel (6260)
 * Industrial anchor: pitch black, JetBrains Mono, flat radius 0, 1px borders,
 * no shadow, brand blue #2E5EFF. Buy=emerald, Sell=rose (trading semantics).
 * Plain CSS only (no arbitrary-value Tailwind). Desktop = right rail column;
 * mobile = persistent bottom Trade button -> bottom sheet.
 * ========================================================================== */

/* ---- desktop right-rail panel (sits right of the orderbook) ---- */
.tp-panel {
  width: 300px;
  flex-shrink: 0;
  background: #0a0a0a;
  border: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}
@media (max-width: 1023px) { .tp-panel { display: none; } }

/* buy/sell segmented head */
.tp-bs { display: flex; }
.tp-bs button {
  flex: 1; height: 40px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  background: transparent; color: #71717a;
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.tp-bs button.buy-on { color: #34d399; border-bottom-color: #34d399; }
.tp-bs button.sell-on { color: #fb7185; border-bottom-color: #fb7185; }

.tp-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* outcome (Yes/No) selector */
.tp-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-outcome {
  padding: 10px 8px; text-align: center;
  background: #111113; border: 1px solid #262626;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tp-outcome:hover { border-color: #3f3f46; }
.tp-outcome.on { border-color: #2E5EFF; background: #0f1320; }
.tp-outcome-name { font-size: 12px; font-weight: 700; color: #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-outcome-px { font-size: 13px; color: #a1a1aa; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tp-outcome.on .tp-outcome-px { color: #2E5EFF; }

/* order-type tabs (Market / Limit) */
.tp-otype { display: flex; gap: 16px; }
.tp-otype span {
  font-size: 12px; color: #71717a; cursor: pointer;
  padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color 0.15s;
}
.tp-otype span.on { color: #fff; border-bottom-color: #2E5EFF; }

.tp-field-label { font-size: 10px; color: #71717a; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; }

.tp-input-wrap { display: flex; align-items: center; border: 1px solid #262626; background: #111113; }
.tp-input-wrap:focus-within { border-color: #2E5EFF; }
.tp-input-wrap .tp-affix { padding: 0 10px; font-size: 13px; color: #71717a; }
.tp-input-wrap input {
  flex: 1; min-width: 0; height: 42px;
  background: transparent; border: none; outline: none;
  color: #fff; font-size: 15px; font-family: inherit; font-variant-numeric: tabular-nums;
  padding: 0 10px 0 0; text-align: right;
}
.tp-input-wrap input::-webkit-outer-spin-button,
.tp-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* quick amount chips */
.tp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tp-quick button {
  height: 30px; font-size: 12px; color: #a1a1aa;
  background: #111113; border: 1px solid #262626;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.tp-quick button:hover { border-color: #2E5EFF; color: #fff; }

/* Plan B sell: position info + percentage quick-sell */
.tp-sell-pos {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #a1a1aa; padding: 8px 10px;
  background: #0f0f11; border: 1px solid #262626;
}
.tp-sell-pos .v { color: #fff; font-variant-numeric: tabular-nums; }
.tp-sell-none { justify-content: center; color: #71717a; }
.tp-sell-pct { grid-template-columns: repeat(3, 1fr); }
.tp-sell-pct button.on { border-color: #f43f5e; color: #fff; }

/* preview line */
.tp-preview { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid #1a1a1a; }
.tp-preview-row { display: flex; justify-content: space-between; font-size: 12px; }
.tp-preview-row .k { color: #71717a; }
.tp-preview-row .v { color: #fff; font-variant-numeric: tabular-nums; }

/* primary action */
.tp-submit {
  width: 100%; height: 46px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; border: none; cursor: pointer;
  background: #34d399; transition: filter 0.15s, background 0.15s;
}
.tp-submit.sell { background: #fb7185; }
.tp-submit:hover { filter: brightness(1.08); }
.tp-submit:disabled { background: #27272a; color: #52525b; cursor: not-allowed; filter: none; }
.tp-submit.flash-ok  { background: #22c55e !important; color: #fff; }
.tp-submit.flash-err { background: #f43f5e !important; color: #fff; }

.tp-foot { display: flex; justify-content: space-between; font-size: 11px; color: #71717a; }
.tp-foot .v { color: #d4d4d8; font-variant-numeric: tabular-nums; }
.tp-msg { font-size: 11px; line-height: 1.5; min-height: 0; }
.tp-msg.err { color: #fb7185; }
.tp-msg.ok { color: #34d399; }

/* connect-gate inside panel when logged out */
.tp-gate { padding: 20px 14px; text-align: center; }
.tp-gate p { font-size: 12px; color: #71717a; margin-bottom: 12px; line-height: 1.5; }
.tp-gate button {
  width: 100%; height: 42px; font-size: 13px; font-weight: 700;
  color: #fff; background: #2E5EFF; border: 1px solid #2E5EFF; cursor: pointer;
  transition: background 0.15s; font-family: inherit;
}
.tp-gate button:hover { background: #1f4fe0; }

/* ==========================================================================
 * Mobile: persistent bottom Trade bar + bottom sheet holding the same panel.
 * ========================================================================== */
.tp-mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #0a0a0a; border-top: 1px solid #1f1f1f;
  gap: 8px;
}
/* only show on the trade view, on narrow screens — toggled by .tp-mobile-on on body */
@media (max-width: 1023px) {
  body.tp-mobile-on .tp-mobile-bar { display: flex; }
}
.tp-mobile-bar button {
  flex: 1; height: 46px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit; color: #fff;
}
.tp-mobile-buy { background: #34d399; }
.tp-mobile-sell { background: #fb7185; }

.tp-sheet-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.66); align-items: flex-end; justify-content: center;
}
.tp-sheet-backdrop.open { display: flex; }
.tp-sheet {
  width: 100%; background: #0a0a0a; border: 1px solid #1f1f1f; border-bottom: none;
  display: flex; flex-direction: column; max-height: 90vh;
}
.tp-sheet-handle { display: flex; justify-content: center; padding: 10px 0 2px; }
.tp-sheet-handle > div { width: 36px; height: 3px; background: #3f3f46; }
.tp-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #1a1a1a;
}
.tp-sheet-title { font-size: 13px; font-weight: 700; color: #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-sheet-close { width: 16px; height: 16px; color: #71717a; cursor: pointer; flex-shrink: 0; }
.tp-sheet-close:hover { color: #fff; }
.tp-sheet-body { overflow-y: auto; }
/* inside the sheet the panel is full width and always visible */
.tp-sheet-body .tp-panel { display: flex; width: 100%; border: none; }

/* ---- positions / open orders ---- */
.tp-po { margin-top: 14px; border-top: 1px solid #1a1a1a; padding-top: 12px; }
.tp-po-tabs { display: flex; gap: 16px; margin-bottom: 8px; }
.tp-po-tabs span {
  font-size: 11px; color: #71717a; cursor: pointer; padding-bottom: 4px;
  border-bottom: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.05em;
}
.tp-po-tabs span.on { color: #fff; border-bottom-color: #2E5EFF; }
.tp-po-empty { font-size: 11px; color: #52525b; padding: 12px 0; text-align: center; }
.tp-po-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tp-po-tbl th {
  text-align: right; color: #52525b; font-weight: 500; padding: 4px 2px;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px;
}
.tp-po-tbl th:first-child { text-align: left; }
.tp-po-tbl td { text-align: right; padding: 5px 2px; color: #e4e4e7; border-top: 1px solid #141414; }
.tp-po-tbl td:first-child { text-align: left; }
.tp-po-side { font-weight: 700; }
.tp-po-side.yes { color: #34d399; }
.tp-po-side.no { color: #f43f5e; }
.tp-po-tbl td.pos, .tp-po-tbl .pos { color: #34d399; }
.tp-po-tbl td.neg, .tp-po-tbl .neg { color: #f43f5e; }
.tp-po-cancel { width: 14px; height: 14px; color: #71717a; cursor: pointer; }
.tp-po-cancel:hover { color: #f43f5e; }