/*
 * RAXE Design System — Tabs
 * Filter bar, underline tabs, boxed tabs, panel switching.
 * Depends on: tokens.css
 */

/* ── Tab bar base ── */
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border-default);
}

/* ── Tab button ── */
.tab-btn {
  font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-5);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
  transition: var(--transition-color);
  background: none; border-top: none; border-left: none; border-right: none;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  color: var(--text-brand);
  border-bottom-color: var(--cyan);
}

/* ── Tab panels ── */
.tab-panels { position: relative; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Boxed tab variant (solid background) ── */
.tab-bar-boxed {
  display: inline-flex; gap: 2px; border: none;
  background: var(--surface-overlay); border-radius: var(--radius-md);
  padding: 3px;
}
.tab-bar-boxed .tab-btn {
  border-bottom: none; margin-bottom: 0;
  border-radius: var(--radius-sm); padding: 6px var(--space-4);
  font-size: var(--fs-micro);
}
.tab-bar-boxed .tab-btn.active,
.tab-bar-boxed .tab-btn[aria-selected="true"] {
  background: rgba(56,189,248,0.12); color: var(--text-brand);
}

/* ── Pill tab variant (rounded) ── */
.tab-bar-pill {
  display: flex; gap: var(--space-2); border: none;
}
.tab-bar-pill .tab-btn {
  border-bottom: none; margin-bottom: 0;
  border-radius: var(--radius-pill); padding: 6px var(--space-4);
  font-size: var(--fs-label); border: 1px solid var(--border-default);
}
.tab-bar-pill .tab-btn.active,
.tab-bar-pill .tab-btn[aria-selected="true"] {
  background: rgba(56,189,248,0.10); color: var(--text-brand);
  border-color: rgba(56,189,248,0.25);
}