/* Market-page position + open-order rows (window.pmPositionCard / pmOrderRow in
   positions.js). Compact ONE row each: no market title (we're already on the market
   page), lead with the OUTCOME as a green/red tag — like the portfolio history badge.
   Unique .pmp-* prefix -> cannot affect anything else. Portfolio does NOT load this. */

.pmp-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.pmp-ic {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--border); flex: 0 0 auto; background: var(--bg-surface, #161b24);
}

/* outcome/option as a filled tag (green = yes-side, red = no-side) */
.pmp-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 160px; }
.pmp-out {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; font-family: var(--font-display, 'Inter', 'Heebo', sans-serif);
  max-width: 60%; overflow: hidden; text-overflow: ellipsis;
}
.pmp-out.yes { background: var(--green-soft); color: var(--green); }
.pmp-out.no  { background: var(--red-soft);   color: var(--red); }
.pmp-sub {
  font-size: 11.5px; color: var(--text-muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmp-px { direction: ltr; unicode-bidi: isolate; }

/* value over P&L (stacked, like the portfolio value cell), on the trailing edge */
.pmp-val {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex: 0 0 auto; margin-inline-start: auto; direction: ltr; unicode-bidi: isolate;
}
.pmp-money { font-size: 13px; font-weight: 600; color: var(--text); }
.pmp-pnl { font-size: 12px; font-weight: 700; }
.pmp-pnl.pos  { color: var(--green); }
.pmp-pnl.neg  { color: var(--red); }
.pmp-pnl.zero { color: var(--text-muted); }

.pmp-sell {
  flex: 0 0 auto; padding: 7px 15px; background: var(--accent); color: #fff; border: 0;
  border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: filter .15s;
}
.pmp-sell:hover { filter: brightness(1.08); }

/* open limit order row */
.pmp-pending {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent); margin-inline-start: auto;
}
.pmp-cancel {
  flex: 0 0 auto; padding: 7px 13px; background: none; border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: color .15s;
}
.pmp-cancel:hover { color: var(--text); }

/* MOBILE: row 1 = icon + outcome tag + shares; row 2 = value/P&L at the START,
   Sell/Cancel pushed to the END. Forcing the main cell to a full-width basis makes
   the value + button wrap together onto the second line. */
@media (max-width: 768px) {
  .pmp-main { flex: 1 1 calc(100% - 44px); }
  /* value over P&L stays stacked, sits at the START of row 2 */
  .pmp-val { margin-inline-start: 0; order: 1; align-items: flex-start; }
  .pmp-sell, .pmp-cancel { margin-inline-start: auto; order: 2; align-self: center; }
  .pmp-pending { order: 0; }
}
[dir="rtl"] .pmp-val, [dir="rtl"] .pmp-px { direction: ltr; unicode-bidi: isolate; }