/* ==========================================================================
   Tabs — CoachOS Design System
   Variants: underline (default), pills
   ========================================================================== */

/* Tab Bar (underline variant)
   ========================================================================== */

.tabs {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  border-bottom: 2px solid var(--border-subtle);
  overflow-x: auto;
}

/* Individual Tab
   ========================================================================== */

.tab {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--duration-fast);
  font-family: inherit;
}

.tab:hover {
  color: var(--text-primary);
}

.tab--active {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Animated Underline Indicator
   ========================================================================== */

.tabs__indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background-color: var(--accent-primary);
  border-radius: var(--radius-full);
  transition:
    left var(--duration-normal) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
}

/* Variant — Pills
   ========================================================================== */

.tabs--pills {
  gap: var(--space-1);
  border-bottom: none;
}

.tabs--pills .tab {
  border-radius: var(--radius-lg);
  padding: var(--space-1-5, 6px) var(--space-3);
}

.tabs--pills .tab--active {
  background-color: var(--surface-selected);
}

/* BEM Variant (used in admin views)
   ========================================================================== */

.tabs__list {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  border-bottom: 2px solid var(--border-subtle);
  overflow-x: auto;
}

.tabs__list[role="tablist"] {
  /* Ensure proper ARIA semantics */
}

.tabs__tab {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--duration-fast);
  font-family: inherit;
}

.tabs__tab:hover {
  color: var(--text-primary);
}

.tabs__tab--active {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Panels */
.tabs__panel {
  padding: var(--space-4) 0;
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel--active {
  display: block;
}