/* Segmented Control Component — UI Comprehensive Refactor v2
 * Requires: tokens.css, spacing.css
 * Replaces .btn-toggle for view/period/mode switching.
 *
 * Usage:
 *   <div class="segmented-control" role="group" aria-label="Период">
 *     <button class="segmented-control__option is-active" aria-pressed="true">7д</button>
 *     <button class="segmented-control__option" aria-pressed="false">14д</button>
 *     <button class="segmented-control__option" aria-pressed="false">30д</button>
 *   </div>
 *
 * JS adds .is-active + aria-pressed="true" to the clicked option,
 * removes from siblings.
 */

/* ── Track (pill container) ── */
.segmented-control {
  display: inline-flex;
  align-items: center;
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 2px;
  gap: 2px;
}

/* ── Individual option ── */
.segmented-control__option {
  padding: var(--space-2) var(--space-3);   /* 8px 12px */
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
  line-height: 1;
}

.segmented-control__option:hover:not(.is-active) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.segmented-control__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-500);
}

/* ── Active/selected state ── */
.segmented-control__option.is-active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}