/* src/components/PositionDetail/PositionDetail.css */
.detail-container {
  display: flex;
  gap: var(--spacing-md);
  flex-direction: column;
  height: 100%;
}

.back-btn {
  border: .1vh solid var(--border-color);
  background: none;
  align-self:  flex-start;

  &:hover {
    background: var(--bg-secondary);
  }
}

.detail-header {
  display: flex;
  border-bottom: .1vh solid var(--border-color);
  padding-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items:  center;

  & h2 {
    margin: 0;
  }

  & .stats {
    color: var(--accent-color);
    font-weight: bold;
  }
}

.chart-section {
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  display: flex;
  justify-content: center;
  align-items:  center;
  height: 40vh;
}

.roi-section {
  overflow-y: auto;
  flex: 1;

  & h3 {
    margin-top: 0;
  }

  & .pos {
    color: var(--positive-color);
  }

  & .neg {
    color: var(--negative-color);
  }
}