/* ============================================================
   trade_panel.css — OKX-style order entry card (BrainPremium)
   Consumes minimal-dark.css tokens. Load AFTER minimal-dark.css.
   All selectors namespaced .oe-* (no collisions, no !important).
   ============================================================ */

.oe-section { flex: 0 0 auto; }
.oe-header { display: flex; align-items: center; gap: 6px; }
.oe-title { font-size: 10px; font-weight: 600; letter-spacing: .5px; color: var(--text-secondary); text-transform: uppercase; }
.oe-symbol { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-primary); }
.oe-header-spacer { flex: 1 1 auto; }

.oe-mini-select {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 3px 6px; cursor: pointer; height: 22px;
}
.oe-mini-select:focus { outline: none; border-color: var(--accent-blue); }

.oe-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; overflow-y: auto; }

/* segmented Open/Close */
.oe-seg { display: flex; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.oe-seg-btn {
  flex: 1; background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  padding: 6px 0; transition: background .12s, color .12s;
}
.oe-seg-btn.active { background: var(--bg-tertiary); color: var(--text-primary); }

/* order-type tabs */
.oe-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--border-light); }
.oe-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  padding: 6px 0; transition: color .12s, border-color .12s;
}
.oe-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-blue); }

/* fields */
.oe-field { display: flex; flex-direction: column; gap: 4px; }
.oe-label { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
.oe-input-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 0 8px; height: 32px;
}
.oe-input-wrap.sm { height: 28px; flex: 1; }
.oe-input-wrap:focus-within { border-color: var(--accent-blue); }
.oe-input-wrap.invalid { border-color: var(--accent-red); }
.oe-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.oe-suffix { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); }
.oe-prefix { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; }
.oe-prefix.pos { color: var(--accent-green); } .oe-prefix.neg { color: var(--accent-red); }

.oe-unit {
  background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: 2px;
  color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  padding: 3px 6px; cursor: pointer; white-space: nowrap;
}
.oe-unit:hover { color: var(--text-primary); }
.oe-unit-alt { color: var(--text-muted); }

/* slider */
.oe-slider-wrap { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.oe-range { width: 100%; accent-color: var(--accent-blue); height: 4px; }
.oe-slider-ticks { display: flex; justify-content: space-between; }
.oe-slider-ticks span { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text-muted); cursor: pointer; }

/* stats row */
.oe-stats { display: flex; gap: 8px; }
.oe-stat { flex: 1; display: flex; flex-direction: column; gap: 1px; background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 5px 7px; }
.oe-stat-k { font-size: 8px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.oe-stat-v { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.oe-stat-v.pos { color: var(--accent-green); } .oe-stat-v.neg { color: var(--accent-red); }
.oe-stat-u { font-size: 8px; color: var(--text-muted); }

/* tp/sl */
.oe-tpsl { display: flex; flex-direction: column; gap: 6px; }
.oe-tpsl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oe-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.oe-check-txt { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); }
.oe-tpsl-fields { display: flex; gap: 8px; }

/* Position-mode pill (Hedge / One-way) — switches the OKX account mode */
.oe-posmode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); background: transparent; cursor: pointer; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary, #8b949e);
  white-space: nowrap; line-height: 1; }
.oe-posmode:hover { border-color: rgba(255,255,255,.32); }
.oe-posmode-dot { width: 7px; height: 7px; border-radius: 50%; background: #8b949e; flex: 0 0 auto; }
.oe-posmode.is-hedge { color: #3fb950; border-color: rgba(63,185,80,.4); }
.oe-posmode.is-hedge .oe-posmode-dot { background: #3fb950; }
.oe-posmode.is-oneway { color: #d29922; border-color: rgba(210,153,34,.42); }
.oe-posmode.is-oneway .oe-posmode-dot { background: #d29922; }

/* action buttons */
.oe-actions { display: flex; gap: 8px; margin-top: 2px; }
.oe-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  padding: 7px 4px; transition: background .12s, opacity .12s;
  font-family: 'JetBrains Mono', monospace;
}
.oe-btn-title { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
/* Detail rows (size / Cost / Liq) forced to near-white — they used to inherit the button's
   green/red at .85 opacity, which was unreadable on the tinted button background. The title
   keeps its green/red. */
.oe-btn-line { font-size: 9px; font-variant-numeric: tabular-nums; color: #f5f7fa; opacity: .95; }
.oe-long { background: rgba(38,166,154,0.12); color: var(--accent-green); border-color: rgba(38,166,154,0.35); }
.oe-long:hover { background: rgba(38,166,154,0.2); }
.oe-short { background: rgba(239,83,80,0.12); color: var(--accent-red); border-color: rgba(239,83,80,0.35); }
.oe-short:hover { background: rgba(239,83,80,0.2); }
.oe-btn:disabled, .oe-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.oe-btn.busy { opacity: .6; pointer-events: none; }

/* narrow-desktop breakpoint (pro-side shrinks @ trade_tape.css:86-89) */
@media (max-width: 1400px) {
  .oe-actions { flex-direction: column; }
  .oe-stats { flex-wrap: wrap; }
  .oe-body { padding: 6px; gap: 6px; }
}
/* mobile: pro-side hidden < 700px — mobile trade uses existing #btn-quick-long-m block. */