/**
 * Tabs Component CSS
 * Simplified and Robust
 */

/* Container */
.tabs {
  position: relative;
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-primary);
  overflow: visible; /* Allow tooltips to overflow */
}

/* Clip navigation to border-radius while allowing tooltips to overflow */
.tabs > .tab-nav {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Allow tab-content to overflow for tooltips - individual elements handle their own clipping */
.tabs > .tab-content {
  overflow: visible;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.tabs.gradient-border {
  border: none;
}

/* Navigation (The part looking like a bulleted list) */
.tab-nav {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border-light);
  background-color: var(--color-bg-secondary);
}

/* Ensure prose doesn't override */
.prose .tab-nav,
.prose .tab-nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tab-nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tab-nav a {
  display: block;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast) var(--ease-out);
  cursor: pointer;
}

.tab-nav a:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}

.tab-nav li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-bottom-width: 3px;
  background-color: var(--color-primary-light);
  font-weight: var(--weight-semibold);
}

/* Content */
.tab-content {
  padding: var(--space-5);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: tabFadeIn var(--duration-200) var(--ease-out);
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(var(--space-1)); }
  to { opacity: 1; transform: translateY(0); }
}

/* Code Tabs Variant */
.code-tabs {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}

.code-tabs .tab-nav {
  background-color: transparent;
  padding: 0 var(--space-2);
}

.code-tabs .tab-nav a {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.code-tabs .tab-content {
  padding: 0;
}

.code-tabs .tab-pane pre {
  margin: 0;
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Dark Mode */
[data-theme="dark"] .tabs,
[data-theme="dark"] .code-tabs {
  border-color: var(--color-border-dark);
}

[data-theme="dark"] .tab-nav {
  border-bottom-color: var(--color-border-dark);
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .tab-nav li.active a {
  background-color: var(--color-primary-light);
  border-bottom-width: 3px;
}

[data-theme="dark"] .tab-nav a:hover {
  background-color: var(--color-bg-hover);
}

/* ============================================
   PALETTE-SPECIFIC ACTIVE TAB STYLING
   ============================================ */

/* Brown Bengal - Warm amber active tabs */
[data-palette="brown-bengal"] .tab-nav li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-bottom-width: 3px;
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="brown-bengal"] .tab-nav li.active a {
  background-color: var(--color-primary-light);
  border-bottom-width: 3px;
}

/* Blue Bengal - Soft powder blue active tabs */
[data-palette="blue-bengal"] .tab-nav li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-bottom-width: 3px;
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="blue-bengal"] .tab-nav li.active a {
  background-color: var(--color-primary-light);
  border-bottom-width: 3px;
}

/* Silver Bengal - High contrast monochrome active tabs */
[data-palette="silver-bengal"] .tab-nav li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-bottom-width: 3px;
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="silver-bengal"] .tab-nav li.active a {
  background-color: var(--color-primary-light);
  border-bottom-width: 3px;
}

/* Charcoal Bengal - Dramatic slate active tabs */
[data-palette="charcoal-bengal"] .tab-nav li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-bottom-width: 3px;
  background-color: var(--color-primary-light);
}

[data-theme="dark"][data-palette="charcoal-bengal"] .tab-nav li.active a {
  background-color: var(--color-primary-light);
  border-bottom-width: 3px;
}
