/* Tabbed interfaces - Glass slider tabs */
.hd-tabs-container {
  margin-top: var(--hd-spacing-xl);
}

.hd-tabs-nav {
  display: flex;
  gap: var(--hd-spacing-xs);
  border-bottom: 1px solid var(--hd-border);
  padding-bottom: var(--hd-spacing-xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.hd-tabs-nav::-webkit-scrollbar {
  display: none;
}

.hd-tab-btn {
  padding: var(--hd-spacing-sm) var(--hd-spacing-lg);
  font-family: var(--hd-font-display);
  font-weight: 600;
  font-size: var(--hd-text-sm);
  color: var(--hd-text-muted);
  border-radius: var(--hd-radius-md);
  transition: var(--hd-transition-all);
  white-space: nowrap;
}

.hd-tab-btn:hover {
  color: var(--hd-text-main);
  background-color: var(--hd-border-glass);
}

.hd-tab-btn.active {
  color: var(--hd-text-main);
  background-color: var(--hd-primary);
  box-shadow: var(--hd-glow-primary);
}

/* Tab Panels */
.hd-tab-panel {
  display: none;
  padding: var(--hd-spacing-lg) 0;
  animation: hdFadeIn var(--hd-duration-normal) var(--hd-ease-out);
}

.hd-tab-panel.active {
  display: block;
}

@keyframes hdFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* NEXTJS SLIDING CAPSULE TABS */
.nextjs-tabs {
  margin-top: var(--hd-spacing-md);
}

.hd-tabs-nav-capsule {
  position: relative;
  display: inline-flex;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hd-border-glass);
  padding: 6px;
  border-radius: var(--hd-radius-lg);
  margin-bottom: var(--hd-spacing-lg);
  z-index: 1;
}

.hd-tabs-nav-capsule .hd-tab-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 24px;
  font-family: var(--hd-font-display);
  font-weight: 700;
  font-size: var(--hd-text-sm);
  color: var(--hd-text-muted);
  transition: color var(--hd-duration-normal) var(--hd-ease-out);
  border-radius: var(--hd-radius-md);
  z-index: 3;
}

.hd-tabs-nav-capsule .hd-tab-btn.active {
  color: #fff !important;
}

.hd-tabs-nav-capsule .hd-tab-btn:hover {
  color: var(--hd-text-main);
}

/* Sliding Pill tracker */
.hd-tab-pill-bg {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  background-color: var(--hd-primary);
  border-radius: var(--hd-radius-md);
  z-index: 2;
  box-shadow: var(--hd-glow-primary);
  transition: transform var(--hd-duration-slow) var(--hd-ease-out), width var(--hd-duration-slow) var(--hd-ease-out);
  will-change: transform, width;
}

/* Sidebar sliding pill vertical adjustments */
.nextjs-sidebar-tabs .hd-tab-pill-bg {
  top: 4px;
  height: calc(100% - 8px);
}