// LLM UI Table Components
// Provides consistent table styling across all projects

.llm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: $font-family;
  font-size: $font-size-base;
  line-height: $line-height;
  color: $text-color;
  background-color: $bg-color;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  overflow: hidden;
  
  // Table header
  .llm-table__header {
    background-color: $bg-alt;
    border-bottom: 2px solid $border-color;
    
    .llm-table__header-cell {
      padding: $spacing-md;
      text-align: left;
      font-weight: $font-weight-semibold;
      color: $heading-color;
      border-bottom: 1px solid $border-color;
      
      &:first-child {
        border-top-left-radius: $border-radius;
      }
      
      &:last-child {
        border-top-right-radius: $border-radius;
      }
    }
  }
  
  // Table body
  .llm-table__body {
    .llm-table__row {
      border-bottom: 1px solid $border-light;
      transition: $transition-base;
      
      &:hover {
        background-color: $bg-alt;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .llm-table__cell {
        padding: $spacing-md;
        border-bottom: 1px solid $border-light;
        vertical-align: top;
        
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  
  // Table footer
  .llm-table__footer {
    background-color: $bg-alt;
    border-top: 1px solid $border-color;
    
    .llm-table__footer-cell {
      padding: $spacing-md;
      text-align: left;
      font-weight: $font-weight-medium;
      color: $muted-color;
    }
  }
}

// Responsive table
.llm-table--responsive {
  @media (max-width: 768px) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    
    .llm-table__header,
    .llm-table__body,
    .llm-table__footer {
      display: block;
    }
    
    .llm-table__row {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  }
}

// Striped table
.llm-table--striped {
  .llm-table__body {
    .llm-table__row:nth-child(even) {
      background-color: $bg-alt;
      
      &:hover {
        background-color: darken($bg-alt, 2%);
      }
    }
  }
}

// Compact table
.llm-table--compact {
  .llm-table__header-cell,
  .llm-table__cell,
  .llm-table__footer-cell {
    padding: $spacing-sm;
  }
}

// Bordered table
.llm-table--bordered {
  .llm-table__cell {
    border: 1px solid $border-color;
  }
}

// Table variants
.llm-table--primary {
  border-color: $primary-color;
  
  .llm-table__header {
    background-color: $primary-light;
    border-bottom-color: $primary-color;
  }
}

.llm-table--success {
  border-color: $success-color;
  
  .llm-table__header {
    background-color: $success-light;
    border-bottom-color: $success-color;
  }
}

.llm-table--warning {
  border-color: $warning-color;
  
  .llm-table__header {
    background-color: $warning-light;
    border-bottom-color: $warning-color;
  }
}

.llm-table--error {
  border-color: $error-color;
  
  .llm-table__header {
    background-color: $error-light;
    border-bottom-color: $error-color;
  }
}

// Table utilities
.llm-table__cell--center {
  text-align: center;
}

.llm-table__cell--right {
  text-align: right;
}

.llm-table__cell--nowrap {
  white-space: nowrap;
}

.llm-table__cell--truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} 