/* Shared segmented pill controls (level toggle, metric chips, $/vLY% switch). */

.seg-group {
  display: inline-flex; border: 1px solid #e5e7eb; border-radius: 7px;
  overflow: hidden; background: #fff;
}

.seg-btn {
  padding: 4px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer;
  font-family: var(--font-stack); border: none; background: transparent;
  color: #6b7280; transition: background 0.15s, color 0.15s; line-height: 1.4;
}

.seg-btn + .seg-btn { border-left: 1px solid #f1f3f5; }

.seg-btn:not(.active):hover { background: #f9fafb; color: var(--navy); }

.seg-btn.active { background: var(--navy); color: #fff; }

.metric-row {
  display: flex; flex-wrap: nowrap; gap: 4px;
}

.metric-chip {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; cursor: pointer;
  font-family: var(--font-stack);
  border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  transition: all 0.15s; user-select: none;
  white-space: nowrap; flex-shrink: 0;
}

.metric-chip:hover { border-color: #d1d5db; color: var(--navy); background: #f9fafb; }

.metric-chip.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

.trend-mode-switch { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; flex-shrink: 0; }

.trend-mode-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: var(--font-stack); border: none; background: #fff; color: #6b7280;
  transition: all 0.15s; line-height: 1.4;
}

.trend-mode-btn.active { background: var(--navy); color: #fff; }

.trend-mode-btn:not(.active):hover { background: #f3f4f6; }

.trend-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.trend-chip {
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font-stack); transition: all 0.15s;
  border: 2px solid; user-select: none; line-height: 1.4; white-space: nowrap;
}

.trend-chip[data-active="0"] { background: #fff; opacity: 0.6; }

.trend-chip[data-active="0"]:hover { opacity: 0.85; }

.trend-chip[data-active="1"] { color: #fff; opacity: 1; }

.trend-chip[data-metric="total_sales_amt"] { border-color: #1e3a5f; }

.trend-chip[data-metric="total_sales_amt"][data-active="1"] { background: #1e3a5f; }

.trend-chip[data-metric="total_sales_amt"][data-active="0"] { color: #1e3a5f; }

.trend-chip[data-metric="furniture_sales_amt"] { border-color: #059669; }

.trend-chip[data-metric="furniture_sales_amt"][data-active="1"] { background: #059669; }

.trend-chip[data-metric="furniture_sales_amt"][data-active="0"] { color: #059669; }

.trend-chip[data-metric="bedding_sales_amt"] { border-color: #7c3aed; }

.trend-chip[data-metric="bedding_sales_amt"][data-active="1"] { background: #7c3aed; }

.trend-chip[data-metric="bedding_sales_amt"][data-active="0"] { color: #7c3aed; }

.trend-chip[data-metric="protection_sales_amt"] { border-color: #d97706; }

.trend-chip[data-metric="protection_sales_amt"][data-active="1"] { background: #d97706; }

.trend-chip[data-metric="protection_sales_amt"][data-active="0"] { color: #d97706; }

.trend-chip[data-metric="traffic"] { border-color: #dc2626; }

.trend-chip[data-metric="traffic"][data-active="1"] { background: #dc2626; }

.trend-chip[data-metric="traffic"][data-active="0"] { color: #dc2626; }