@layer components {
  /* ============================================================================
   * TABS COMPONENT
   * Tabbed navigation interface
   * ========================================================================= */

  .tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Tab navigation */
  .tabs__nav {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 2px solid var(--color-gray-2);
  }

  /* Individual tab button/link */
  .tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--color-gray-4);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
  }

  .tabs__tab:hover {
    color: var(--color-dark);
    background-color: var(--color-bg-highlight);
  }

  .tabs__tab:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Active tab */
  .tabs__tab--active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
  }

  .tabs__tab--active:hover {
    color: var(--color-brand);
    background-color: var(--color-brand-light);
  }

  /* Tab content area */
  .tabs__content {
    position: relative;
  }

  /* Individual tab panel */
  .tabs__panel {
    display: none;
    animation: tabs-fade-in var(--transition-normal);
  }

  .tabs__panel--active {
    display: block;
  }

  /* Fade in animation */
  @keyframes tabs-fade-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ============================================================================
   * "MORE" OVERFLOW DROPDOWN
   * When max_visible is set, overflow tabs go into a "More" dropdown.
   * Primary tabs are always visible; overflow tabs live in a "More" menu.
   * ========================================================================= */

  .tabs__more {
    position: relative;
  }

  .tabs__more-trigger {
    gap: var(--space-xxs);
  }

  .tabs__more-chevron {
    color: currentcolor;
    transition: transform var(--transition-fast);
  }

  /* When overflow exists, show desktop nav with "More" dropdown by default.
     Mobile nav is hidden until the responsive breakpoint kicks in. */
  .tabs--has-overflow .tabs__nav--mobile {
    display: none;
  }

  /* For tabs without overflow, mobile nav stays hidden */
  .tabs:not(.tabs--has-overflow) .tabs__nav--mobile {
    display: none;
  }

  /* ============================================================================
   * LEGACY MOBILE DROPDOWN NAV
   * Fallback when no max_visible is set — collapses all tabs into a dropdown
   * ========================================================================= */

  /* Hidden on desktop */
  .tabs .tabs__mobile-nav {
    display: none;
    position: relative;
  }

  /* Trigger button styled to match tab aesthetics */
  .tabs__mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-gray-2);
    border-radius: var(--radius-md);
    color: var(--color-brand);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast);
  }

  .tabs__mobile-trigger:hover {
    border-color: var(--color-gray-3);
  }

  .tabs__mobile-chevron {
    transition: transform var(--transition-fast);
    color: var(--color-gray-3);
  }

  /* Active item highlight in dropdown */
  .dropdown__item--active {
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
  }

  /* ============================================================================
   * RESPONSIVE BEHAVIOR
   * ========================================================================= */

  /* Tabs WITHOUT overflow (legacy behavior): collapse to dropdown on small screens */
  @media (width <= 768px) {
    .tabs:not(.tabs--has-overflow) .tabs__nav {
      display: none;
    }

    .tabs:not(.tabs--has-overflow) .tabs__mobile-nav {
      display: block;
    }
  }

  /* Tabs WITH separate mobile overflow: swap desktop nav for mobile nav
     which shows fewer primary tabs to prevent horizontal scrolling */
  @media (width <= 768px) {
    .tabs--has-mobile-overflow .tabs__nav--desktop {
      display: none;
    }

    .tabs--has-mobile-overflow .tabs__nav--mobile {
      display: flex;
    }
  }

  /* Small screens: tighter tabs to prevent horizontal scroll */
  @media (width <= 480px) {
    .tabs__nav {
      gap: 0;
    }

    .tabs__tab {
      padding: var(--space-xs) var(--space-sm);
      font-size: var(--font-size-sm);
    }
  }

  /* ============================================================================
   * DARK MODE ADJUSTMENTS
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .tabs__nav {
      border-bottom-color: var(--color-gray-3);
    }

    .tabs__tab:hover {
      background-color: var(--color-bg-highlight);
    }

    .tabs__mobile-trigger {
      background-color: var(--color-bg-secondary);
      border-color: var(--color-gray-3);
    }
  }
}