// Tabs
.tabs {
  background: white;
  @include border-radius();
  @include box-shadow($shadow-sm);
  overflow: hidden;
  
  &__nav {
    display: flex;
    background-color: $bg-secondary;
    border-bottom: 1px solid $border-light;
    overflow-x: auto;
    
    @include media-down('sm') {
      flex-wrap: wrap;
    }
  }
  
  &__tab {
    background: none;
    border: none;
    padding: $spacing-base $spacing-lg;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-muted;
    cursor: pointer;
    @include transition();
    white-space: nowrap;
    flex-shrink: 0;
    
    @include media-down('sm') {
      flex: 1 1 auto;
      text-align: center;
      padding: $spacing-sm $spacing-base;
      font-size: $font-size-sm;
    }
    
    &:hover {
      color: $text-color;
      background-color: rgba($primary-color, 0.05);
    }
    
    &:focus {
      outline: 2px solid $primary-color;
      outline-offset: -2px;
    }
    
    &--active {
      color: $primary-color;
      background-color: white;
      border-bottom: 2px solid $primary-color;
      
      &:hover {
        color: $primary-color;
        background-color: white;
      }
    }
  }
  
  &__content {
    position: relative;
    min-height: 200px;
  }
  
  &__panel {
    padding: $spacing-xl;
    display: none;
    animation: fadeInUp 0.3s ease-out;
    
    &--active {
      display: block;
    }
    
    p:last-child {
      margin-bottom: 0;
    }
  }
}

// Responsive tabs - convert to accordion on mobile
@include media-down('sm') {
  .tabs {
    &--responsive {
      .tabs__nav {
        display: none;
      }
      
      .tabs__content {
        min-height: auto;
      }
      
      .tabs__panel {
        display: block;
        padding: 0;
        border-bottom: 1px solid $border-light;
        
        &:last-child {
          border-bottom: none;
        }
        
        &::before {
          content: attr(data-tab-title);
          display: block;
          padding: $spacing-base $spacing-lg;
          background-color: $bg-secondary;
          font-weight: $font-weight-medium;
          border-bottom: 1px solid $border-light;
          cursor: pointer;
          @include transition();
          
          &:hover {
            background-color: $bg-tertiary;
          }
        }
        
        > * {
          padding: $spacing-lg;
        }
        
        &:not(.tabs__panel--active) {
          > * {
            display: none;
          }
        }
      }
    }
  }
}

// Tab animations
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}