/* Trading Simulator Styles */

.trading-sim {
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--bg);
}

.market-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.stock-info {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.stock-name {
  font-weight: 600;
  color: var(--text-muted);
}

.stock-price {
  font-size: 1.5rem;
  font-weight: 700;
}

.day-counter {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.market-info {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.iv-display {
  font-weight: 500;
}

.earnings-display {
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--code-bg);
}

.earnings-display.earnings-soon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  font-weight: 600;
}

.portfolio-info {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

.pnl.profit { color: #22c55e; }
.pnl.loss { color: #ef4444; }

.price-chart {
  margin: 1rem 0;
}

.price-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  background: var(--code-bg);
  border-radius: 4px;
}

.chart-placeholder {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1rem;
  text-align: center;
  background: var(--code-bg);
  border-radius: 4px;
}

.order-panel {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.strike-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.strike-selector select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.option-prices {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.order-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.order-buttons button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.15s;
}

.order-buttons button:hover {
  opacity: 0.85;
}

.buy-call {
  background: #3b82f6;
  color: white;
}

.buy-put {
  background: #ef4444;
  color: white;
}

.fast-forward {
  background: #8b5cf6;
  color: white;
}

.reset-sim {
  background: var(--border);
  color: var(--text);
}

.positions-panel h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.no-positions {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.position {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--code-bg);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.position.profit {
  border-left: 3px solid #22c55e;
}

.position.loss {
  border-left: 3px solid #ef4444;
}

.pos-type {
  font-weight: 600;
  min-width: 3rem;
}

.pos-pnl {
  font-weight: 600;
}

.position.profit .pos-pnl { color: #22c55e; }
.position.loss .pos-pnl { color: #ef4444; }

.position.expired {
  opacity: 0.7;
  background: var(--bg);
}

.position.expired .pos-expiry {
  font-weight: 600;
  font-size: 0.75rem;
}

.pos-result {
  font-weight: 600;
  margin-left: auto;
}

.position.expired.profit .pos-result { color: #22c55e; }
.position.expired.loss .pos-result { color: #ef4444; }

.sell-btn {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  background: var(--border);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.action-log {
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--code-bg);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Payoff Diagram Styles */

.payoff-widget {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.payoff-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-label {
  width: 3rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.price-slider, .strike-slider {
  width: 140px;
  flex-shrink: 0;
}

.strike-value, .current-price {
  font-weight: 600;
  min-width: 3rem;
}

.strike-value {
  color: #f59e0b;
}

.payoff-result {
  font-size: 0.9rem;
  padding-top: 0.25rem;
}

.payoff-result.profit { color: #22c55e; }
.payoff-result.loss { color: #ef4444; }

.premium-display {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.payoff-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  background: var(--code-bg);
  border-radius: 4px;
}

/* Crash Call Widget - Chart with two lines */

.crash-call {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.crash-svg {
  width: 100%;
  max-width: 350px;
  height: auto;
  background: var(--code-bg);
  border-radius: 4px;
}

.crash-controls {
  margin: 0.75rem 0;
}

.crash-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.crash-slider-row span:first-child {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 80px;
}

.crash-slider {
  flex: 1;
  max-width: 180px;
}

.crash-stock-price {
  font-weight: 600;
  min-width: 40px;
}

.crash-readout {
  font-size: 0.9rem;
}

.crash-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}

.crash-row.saved {
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.crash-saved {
  color: #22c55e;
  font-weight: 600;
}

/* IV Crush Widget - Breakeven explorer */

.iv-crush {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.crush-scenario {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.crush-before, .crush-after {
  flex: 1;
  padding: 0.75rem;
  background: var(--code-bg);
  border-radius: 4px;
}

.crush-heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.crush-stat {
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.crush-stat.highlight {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.25rem;
}

.crush-arrow {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  color: var(--text-muted);
}

.crush-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.crush-slider-row > span:first-child {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 80px;
}

.move-slider {
  flex: 1;
  max-width: 180px;
}

.crush-move-value {
  font-weight: 600;
  min-width: 40px;
}

.crush-result {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background: var(--code-bg);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.crush-pnl {
  font-weight: 600;
}

.crush-pnl.profit { color: #22c55e; }
.crush-pnl.loss { color: #ef4444; }

.crush-insight {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.5rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 4px;
}

.crush-insight strong {
  color: #f59e0b;
}

/* Volatility Smile Widget */

.vol-smile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.smile-svg {
  width: 100%;
  max-width: 350px;
  height: auto;
  background: var(--code-bg);
  border-radius: 4px;
}

.smile-controls {
  margin-top: 0.75rem;
}

.smile-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.smile-slider-row > span:first-child {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 40px;
}

.smile-slider {
  flex: 1;
  max-width: 180px;
}

.smile-readout {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.smile-readout .iv-value {
  color: #3b82f6;
}

/* Part 4 - Greeks Widgets */

.pricing-surface,
.greek-slopes,
.delta-demo,
.gamma-demo,
.theta-demo,
.vega-demo,
.greeks-dashboard,
.crash-replay {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.surface-svg,
.slope-svg,
.delta-svg,
.gamma-svg,
.theta-svg,
.vega-svg {
  width: 100%;
  max-width: 350px;
  height: auto;
  background: var(--code-bg);
  border-radius: 4px;
}

.surface-controls,
.delta-controls,
.gamma-controls,
.theta-controls,
.vega-controls {
  margin-top: 0.75rem;
}

.surface-slider-row,
.delta-slider-row,
.gamma-slider-row,
.theta-slider-row,
.vega-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.surface-slider-row > span:first-child,
.delta-slider-row > span:first-child,
.gamma-slider-row > span:first-child,
.theta-slider-row > span:first-child,
.vega-slider-row > span:first-child {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 60px;
}

.delta-readout,
.gamma-readout,
.theta-readout,
.vega-readout {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.readout-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}

.readout-row.hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Greek Slopes Widget */
.slope-row {
  display: inline-flex;
  flex-direction: column;
  gap: 1.5rem;
}

[data-widget="greek-slopes"],
[data-widget="pricing-surface"] {
  display: flex;
  justify-content: center;
}

.pricing-surface {
  display: inline-block;
}

.surface-legend {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  line-height: 1.6;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

/* Interactive surface - draggable Greek explorer */
[data-widget="interactive-surface"] {
  display: flex;
  justify-content: center;
}

.interactive-surface {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.surface-readout {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.surface-readout strong {
  color: var(--text);
}

.surface-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  opacity: 0.7;
}

.iv-value {
  font-size: 0.8rem;
  min-width: 3em;
  text-align: right;
}

.greek-slopes {
  display: inline-block;
}

.slope-chart {
  max-width: 400px;
}

.slope-chart-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.slope-y-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.slope-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Greek demo widgets (individual demos) */
.greek-demo-widget {
  max-width: 400px;
  margin: 1rem auto;
}

.slope-axis-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.25rem;
}

/* Greeks Dashboard */
.greeks-dashboard {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dashboard-sliders {
  flex: 1;
  min-width: 200px;
}

.dashboard-readout {
  flex: 1;
  min-width: 150px;
  background: var(--code-bg);
  padding: 0.75rem;
  border-radius: 4px;
}

.dash-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dash-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 40px;
}

.dash-slider-row input[type="range"] {
  flex: 1;
  max-width: 150px;
}

.dash-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.dash-value {
  font-weight: 600;
  color: #3b82f6;
}

/* Crash Replay Widget */
.replay-timeline {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.timeline-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s;
}

.timeline-dot:hover {
  background: var(--code-bg);
}

.timeline-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  margin-bottom: 0.25rem;
}

.timeline-dot.active::before {
  background: #3b82f6;
}

.timeline-dot.past::before {
  background: #22c55e;
}

.dot-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline-dot.active .dot-label {
  color: #3b82f6;
  font-weight: 600;
}

.replay-state,
.replay-greeks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.state-row,
.greek-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.state-row.highlight {
  grid-column: span 2;
  background: var(--code-bg);
  padding: 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}

.replay-greeks {
  background: var(--code-bg);
  padding: 0.5rem;
  border-radius: 4px;
}

.replay-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.replay-prev,
.replay-next {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  font-size: 0.85rem;
}

.replay-prev:disabled,
.replay-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.replay-prev:not(:disabled):hover,
.replay-next:not(:disabled):hover {
  background: var(--code-bg);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .market-status {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-buttons {
    flex-direction: column;
  }

  .order-buttons button {
    width: 100%;
  }

  .position {
    font-size: 0.8rem;
  }

  .crush-scenario {
    flex-direction: column;
  }

  .crush-arrow {
    transform: rotate(90deg);
    justify-content: center;
  }

  .greeks-dashboard {
    flex-direction: column;
  }

  .replay-timeline {
    gap: 0.25rem;
  }

  .dot-label {
    font-size: 0.6rem;
  }
}

/* Wheel Simulator */
.wheel-sim {
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--bg);
}

.wheel-status {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.wheel-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.wheel-status-row.premium-row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.premium-total {
  color: #22c55e;
  font-weight: 600;
}

.wheel-position {
  background: var(--code-bg, #f5f5f5);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.position-info {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.position-exp {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.wheel-ff-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 500;
}

.wheel-ff-btn:hover {
  background: #2563eb;
}

.wheel-actions {
  margin-bottom: 1rem;
}

.action-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.strike-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wheel-strike-btn {
  padding: 0.5rem 0.75rem;
  background: var(--code-bg, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.wheel-strike-btn:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.strike-detail {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.wheel-strike-btn:hover .strike-detail {
  color: rgba(255, 255, 255, 0.8);
}

.wheel-history {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.history-label {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.wheel-history-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.wheel-history-row.expired {
  background: rgba(34, 197, 94, 0.1);
}

.wheel-history-row.assigned {
  background: rgba(249, 115, 22, 0.1);
}

.wheel-history-row.called {
  background: rgba(59, 130, 246, 0.1);
}

.wheel-controls {
  display: flex;
  justify-content: flex-end;
}

.wheel-reset-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.wheel-reset-btn:hover {
  background: var(--code-bg, #f5f5f5);
}