/*!
 * Axcora Tabs Enhanced
 * Modern tab navigation component with variants and animations
 */

/* ===== TABS MODERN STYLE ===== */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--s200);
  margin-bottom: var(--spacing-lg);
}

.nav-tabs .nav-item {
  margin-bottom: -2px;
}

.nav-tabs .nav-link {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--text-muted);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  font-weight: 500;
  position: relative;
}

.nav-tabs .nav-link:hover {
  color: var(--s600);
  background-color: var(--p50);
}

.nav-tabs .nav-link.active {
  color: var(--s100);
  background-color: var(--p500);
  border-color: var(--s200);
  border-bottom: 2px solid var(--body-bg);
  position: relative;
}

.nav-tabs .nav-link.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, var(--p500), var(--p400));
  border-radius: var(--radius-full);
}

[data-theme="dark"] .nav-tabs {
  border-color: var(--s600);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: var(--p500);
  color: var(--s900);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  border-color: var(--s600);
  border-bottom-color: var(--body-bg);
  background-color: var(--p600);
  color: var(--s900);
}

.tab-content {
  padding: var(--spacing-lg);
  background-color: var(--s100);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--s200);
  border-top: none;
}

[data-theme="dark"] .tab-content {
  border-color: var(--s600);
}

.tab-pane {
  display: none;
  color: var(--color);
}

.tab-pane.active {
  display: block;
  animation: tab-fade-in var(--transition-normal) ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}