.card { 
  margin-bottom: 20px; 
}

pre { 
  white-space: pre-wrap; 
  word-wrap: break-word; 
}

.window-list { 
  max-height: 400px; 
  overflow-y: auto; 
}

.window-btn { 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden; 
}

#btnAddConstituents { 
  margin-bottom: 20px; 
}

/* 資料集控制卡片內部樣式 */
.control-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.control-item label {
  flex: 1;
  margin-left: 5px;
}

.control-item input[type="color"] {
  margin: 0 5px;
}

/* 策略按鈕橫向捲動 */
.side-menu {
  display: flex;
  flex-wrap: nowrap; /* 不換行 */
  gap: 10px;
  margin-top: 5px;
  overflow-x: auto; /* 當按鈕超過寬度時出現水平捲軸 */
}

.strategy-btn {
  white-space: nowrap;
}
/* 成分股區塊標題與捲動設定 */
.portfolio-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.portfolio-list {
  max-height: 260px;      /* 可以依照你的畫面高度調整 */
  overflow-y: auto;
  font-size: 13px;
}

.portfolio-list .list-group-item {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* 成分股 chip 容器：橫向排、可換行 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* 成分股 chip 按鈕（小圓角長方形） */
.stock-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;   /* 比原來稍微大一點 */
  margin: 3px;
  font-size: 0.9rem;   /* ✅ 字變大 */
  cursor: default;
  background-color: #e0e0e0;
  color: #555;
  transition: background-color 0.15s ease, color 0.15s ease;
}


/* 讓 ticker 跟 X 稍微有間距 */
.stock-chip-label {
  white-space: nowrap;
}

/* 關閉按鈕 (X) */
.stock-chip .chip-close {
  margin-left: 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0;
  display: none;  /* 預設不顯示，只有 active chip 才顯示 */
}

/* 顯示中的成分股：chip 會有顏色 & 顯示 X */
.stock-chip.active .chip-close {
  display: inline-block;
}

/* 未顯示的成分股：保持灰色、沒有 X */
.stock-chip.inactive {
  background-color: #e0e0e0;
  color: #555;
}
.color-popup {
  position: absolute;
  background: #ffffff;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: none;
  z-index: 9999;
}

.color-popup .color-opt {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 4px;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #bbb;
}

.color-popup .color-opt:hover {
  transform: scale(1.15);
  border-color: #888;
}