/* trader-trades.css — Trade Explorer module for the AI Trader workspace.
 * Dark BT design, responsive mobile cards. Reuses trader-workspace tokens where
 * available; no !important, scoped under .tt-root. HTML labels (readable fonts),
 * never tiny SVG axis text — the SVG only carries the line + fill markers.
 */

.tt-root {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  color: var(--tw-text, #e6edf3);
}
.tt-root--empty { display: block; }

.tt-empty {
  color: var(--tw-muted, #8b949e);
  font-size: 0.9rem;
  padding: 12px;
  margin: 0;
}

/* ---- episode list ---- */
.tt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tt-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: var(--tw-card, #161b22);
  border: 1px solid var(--tw-border, #30363d);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.tt-row:hover { border-color: var(--tw-accent, #58a6ff); }
.tt-row--selected {
  border-color: var(--tw-accent, #58a6ff);
  background: var(--tw-card-active, #1c2430);
}
.tt-sym { font-weight: 600; }
.tt-status {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tt-status--open { background: rgba(88, 166, 255, 0.18); color: #58a6ff; }
.tt-status--closed { background: rgba(139, 148, 158, 0.18); color: #8b949e; }
.tt-qty { color: var(--tw-muted, #8b949e); font-variant-numeric: tabular-nums; }
.tt-pnl { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- detail panel ---- */
.tt-detail {
  background: var(--tw-card, #161b22);
  border: 1px solid var(--tw-border, #30363d);
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
}
.tt-detail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.tt-detail-head h3 { margin: 0; font-size: 1.05rem; }
.tt-defaulted-label { color: var(--tw-muted, #8b949e); font-size: 0.8rem; }
.tt-detail--missing { display: flex; align-items: center; justify-content: center; }

.tt-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 16px;
  font-size: 0.9rem;
}
.tt-facts dt { color: var(--tw-muted, #8b949e); }
.tt-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- chart: responsive native SVG (line + fill dots only) ---- */
.tt-chart-wrap { margin-bottom: 16px; }
.tt-chart {
  width: 100%;
  height: 160px;
  display: block;
  background: var(--tw-chart-bg, #0d1117);
  border: 1px solid var(--tw-border, #30363d);
  border-radius: 6px;
}
.tt-line { stroke: var(--tw-accent, #58a6ff); stroke-width: 1.5; }
.tt-dot--buy { fill: #3fb950; stroke: #0d1117; stroke-width: 1; }
.tt-dot--sell { fill: #f85149; stroke: #0d1117; stroke-width: 1; }

/* ---- fills ---- */
.tt-markers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-marker {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--tw-chart-bg, #0d1117);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.tt-marker-side { font-weight: 600; }
.tt-marker--buy .tt-marker-side { color: #3fb950; }
.tt-marker--sell .tt-marker-side { color: #f85149; }
.tt-marker-at { color: var(--tw-muted, #8b949e); text-align: right; }

/* ---- decisions ---- */
.tt-decisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-decision-link {
  display: flex; gap: 10px; align-items: center;
  width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 6px;
  background: var(--tw-chart-bg, #0d1117);
  border: 1px solid var(--tw-border, #30363d);
  color: inherit; cursor: pointer; font: inherit;
}
.tt-decision-link:hover { border-color: var(--tw-accent, #58a6ff); }
.tt-decision-action { font-weight: 600; font-size: 0.8rem; }
.tt-decision-reason { color: var(--tw-muted, #8b949e); font-size: 0.85rem; }
.tt-decision--none .tt-decision-reason { font-style: italic; }

.tt-detail h4 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tw-muted, #8b949e); }
.tt-markers-wrap, .tt-decisions-wrap { margin-top: 12px; }

/* ---- responsive: stack to mobile cards ---- */
@media (max-width: 720px) {
  .tt-root { grid-template-columns: 1fr; }
  .tt-facts { grid-template-columns: 1fr; }
  .tt-facts dt { margin-top: 6px; }
}

.tt-row-date{grid-column:1/-1;font-size:12px;color:#aab6c5;text-align:left;}
.tt-price-scale,.tt-axis-dates{font-size:12px;color:#aab6c5;margin:8px 0;line-height:1.5;}
.tt-axis-dates{display:flex;justify-content:space-between;}
.tt-buy-key{color:#3fb27f;}.tt-sell-key{color:#e0524a;}
.tt-pnl{overflow-wrap:anywhere;}