/* Shared chart-footer toggle dropdown styles. Originally part of GoldMiner's
 * web/css/index.css; extracted so FXTester can use the same visual contract.
 *
 * Class catalog:
 *   .chart-toggle-menu        — root wrapper around the trigger button + list
 *   .btn-chart-toggle-trigger — the dropdown trigger button
 *   .chart-toggle-list        — fixed-positioned dropdown panel
 *   .chart-toggle-item        — checkbox row inside the panel
 *   .draw-tool-caret          — small ▾ inside the trigger
 *
 * Color palette mirrors GoldMiner's footer (#0d1117 surface, #30363d border,
 * #c9d1d9 text, #58a6ff accent). Both apps run dark by default.
 */

.chart-toggle-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-chart-toggle-trigger {
  min-width: 86px;
  gap: 6px;
  justify-content: center;
  background: #0d1117;
  border-color: #30363d;
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 600;
}

.draw-tool-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.8;
  margin-top: 1px;
}

.chart-toggle-list {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #0d1117;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  z-index: 99999;
}

.chart-toggle-menu.open .chart-toggle-list {
  display: flex;
}

.chart-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #111722;
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}

.chart-toggle-item:hover {
  background: #182232;
  border-color: #3a4a63;
}

.chart-toggle-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #58a6ff;
  cursor: pointer;
}