/* ═══════════════════════════════════════════════════════════════
   Tabs — MC Виан B2B Portal
   ═══════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border-light);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab,
.tab-item {
  padding: var(--space-3, 12px) var(--space-5, 20px);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.tab:hover,
.tab-item:hover {
  color: var(--color-primary);
}
.tab.is-active,
.tab-item.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* Sliding underline (managed by JS tabs.js) */
.tabs__underline {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: left 0.3s ease, width 0.3s ease;
  pointer-events: none;
}

/* Animated variant (CSS custom properties) */
.tabs--animated {
  position: relative;
}
.tabs--animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--tab-left, 0);
  width: var(--tab-width, 0);
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: left 0.3s ease, width 0.3s ease;
}

/* Tab panes */
.tab-pane,
.tab-content {
  display: none;
  animation: fadeIn 0.25s ease;
}
.tab-pane.is-active,
.tab-content.is-active {
  display: block;
}

/* Pill tabs (for filters) */
.tabs-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tab-pill {
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  border: 1px solid transparent;
}
.tab-pill:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.tab-pill.is-active {
  background: var(--color-primary);
  color: #fff;
}