/*
 * Positions and orders (Phase 8, /markets/positions): the attention list,
 * the mode chips, the tabs and their tables and cards. It shares the
 * Markets page's layout (markets.css: .pm-page, .pm-banner, .pm-status,
 * .pm-empty, .pm-up, .pm-down), the bot monitor's head, filters, tabs and
 * mode badges (markets-bots.css: .bm-head, .bm-filter, .bm-tab, .bm-mode)
 * and the live table's own sheet. Colours come from tokens only, so the
 * light and dark themes both follow. Money is in tabular figures.
 */

.pp-page .glossary { align-self: center; }
.pp-h2 { font-size: var(--font-size-base, 1rem); margin: 0; }

/* The attention list. */
.pp-attention {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-surface);
  padding: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.pp-attn-count { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.pp-attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); max-height: 260px; overflow-y: auto; }
.pp-attn-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 2px var(--space-3, 12px);
  padding: var(--space-2, 8px);
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-bg, transparent);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
}
.pp-attn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); min-width: 0; }
.pp-attn-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-attn-text { grid-column: 1; color: var(--color-text-secondary, var(--color-text)); }
.pp-attn-links { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--space-2, 8px); align-items: center; white-space: nowrap; }
.pp-attn-links a { color: var(--color-accent); }
.pp-attn-more { font-size: 0.8rem; }
.pp-attn {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-warning);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The mode chips: one per mode, each with its own totals. */
.pp-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2, 8px); }
.pp-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.pp-chip:hover { background: var(--color-surface-raised); }
.pp-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pp-chip.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.pp-chip[data-pp-chip="LIVE"].is-active { border-color: var(--color-live); box-shadow: inset 0 0 0 1px var(--color-live); }
.pp-chip-head { display: flex; align-items: center; gap: var(--space-2, 8px); font-weight: 600; }
.pp-chip-count { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.pp-chip-figs { display: flex; flex-wrap: wrap; gap: 2px var(--space-3, 12px); font-size: 0.78rem; }
.pp-chip-label { color: var(--color-text-muted); }
.pp-chip-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-demo-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary, var(--color-text-muted));
  background: var(--color-surface-raised);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pp-demo { font-size: 0.72rem; color: var(--color-text-muted); }

/* The tabs and panels. */
.pp-panel[hidden] { display: none; }
.pp-panel { display: flex; flex-direction: column; gap: var(--space-2, 8px); min-height: 0; }
.pp-table-slot { position: relative; display: flex; flex-direction: column; min-height: 0; }
.pp-table-slot pm-live-table { flex: 1; min-height: 260px; --pm-lt-height: max(260px, calc(100vh - 420px)); }
.pp-table-slot .pm-overlay { margin-top: var(--space-2, 8px); }
.pp-more { margin: 0; text-align: center; }
.pp-newer kbd { font-family: var(--font-mono); font-size: 0.75rem; padding: 0 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); }

/* Cells. */
.pp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-danger);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.pp-side-yes, .pp-side-no { font-weight: 600; }
.pp-mark { font-variant-numeric: tabular-nums; }
.pp-estimate { color: var(--color-text-muted); font-style: italic; }
pm-live-table [data-pp-sell][disabled] { cursor: not-allowed; opacity: 0.5; }

/* Balance and exposure cards. */
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3, 12px); }
.pp-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-surface);
  padding: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-width: 0;
}
.pp-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2, 8px); }
.pp-card-title { font-size: var(--font-size-base, 1rem); margin: 0; overflow-wrap: anywhere; }
.pp-card-sub { margin: 0; font-size: 0.78rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }
.pp-updated { color: var(--color-text-muted); }
.pp-figs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-3, 12px); margin: 0; font-size: 0.85rem; }
.pp-figs > div { display: contents; }
.pp-figs dt { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 4px; }
.pp-figs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-worst { color: var(--color-danger); }
.pp-balance-error { margin: 0; font-size: 0.8rem; color: var(--color-danger); }
.pp-sub { margin: var(--space-2, 8px) 0 0; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }

/* The exposure ladder: a stacked bar, its axis and a legend naming every bucket. */
.pp-ladder { display: block; height: 42px; overflow: visible; }
.pp-axis { stroke: var(--color-border); }
.pp-axis-text { fill: var(--color-text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.pp-b1 { fill: var(--color-danger); background: var(--color-danger); }
.pp-b2 { fill: var(--color-warning); background: var(--color-warning); }
.pp-b3 { fill: var(--color-info); background: var(--color-info); }
.pp-b4 { fill: var(--color-success); background: var(--color-success); }
.pp-b5 { fill: var(--color-text-muted); background: var(--color-text-muted); }
.pp-ladder rect + rect { stroke: var(--color-surface); stroke-width: 1; }
.pp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-3, 12px); font-size: 0.75rem; }
.pp-legend li { display: inline-flex; align-items: center; gap: 4px; }
.pp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.pp-conc { margin: 0; padding-left: 1.2em; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; }
.pp-conc li { display: flex; justify-content: space-between; gap: var(--space-2, 8px); }
.pp-conc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 639px) {
  .pp-attn-item { grid-template-columns: minmax(0, 1fr); }
  .pp-attn-links { grid-column: 1; grid-row: auto; }
  .pp-chips { grid-template-columns: minmax(0, 1fr); }
}