/* ============================================================
   Tabs — link-based tab bar (the active tab is chosen server-side)
   ============================================================ */

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.tabs__tab {
  padding: var(--space-3) var(--space-5);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-decoration: none;
}

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

.tabs__tab--active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* Client-side variant: tabs are buttons that switch panels without navigating (e.g. inside a modal) */
.tabs--compact .tabs__tab {
  padding: var(--space-2) var(--space-4);
  border-top: none;
  border-right: none;
  border-left: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-base);
  cursor: pointer;
}