s5l.ru-crm/app/components/Admin/DataTable/index.styl

.data-table
  background: var(--color-white)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  overflow: hidden
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

.data-table__toolbar
  padding: var(--spacing-lg)
  border-bottom: 1px solid var(--border-color)
  display: flex
  justify-content: space-between
  align-items: center
  gap: var(--spacing-md)

.data-table__search
  flex: 1
  max-width: 300px

.data-table__search-input
  width: 100%
  padding: var(--spacing-sm) var(--spacing-md)
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  font-family: var(--font-family)
  
  .theme-dark &
    background: var(--color-dark-50)
    color: var(--color-light)
    border-color: var(--color-light-10)

.data-table__actions
  display: flex
  gap: var(--spacing-sm)

.data-table__loading
  padding: var(--spacing-2xl)
  text-align: center
  color: var(--color-secondary)

.data-table__spinner
  width: 40px
  height: 40px
  border: 3px solid var(--color-primary-10)
  border-top: 3px solid var(--color-primary)
  border-radius: 50%
  animation: data-table-spin 1s linear infinite
  margin: 0 auto var(--spacing-md)

@keyframes data-table-spin
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

.data-table__container
  overflow-x: auto

.data-table__table
  width: 100%
  border-collapse: collapse

.data-table__header
  padding: var(--spacing-md)
  text-align: left
  font-weight: var(--font-weight-semibold)
  border-bottom: 1px solid var(--border-color)
  background: var(--color-light-10)
  
  .theme-dark &
    background: var(--color-dark-50)

.data-table__sortable
  cursor: pointer
  user-select: none
  
  &:hover
    background: var(--color-primary-10)

.data-table__sort-indicator
  margin-left: var(--spacing-xs)
  color: var(--color-primary)

.data-table__checkbox-column
  width: 40px
  text-align: center

.data-table__row
  border-bottom: 1px solid var(--border-color)
  
  &:hover
    background: var(--color-primary-10)

.data-table__cell
  padding: var(--spacing-md)
  border-bottom: 1px solid var(--border-color)

.data-table__actions-cell
  padding: var(--spacing-md)
  border-bottom: 1px solid var(--border-color)
  
  .data-table__actions
    display: flex
    gap: var(--spacing-xs)
    justify-content: flex-end

.data-table__empty
  padding: var(--spacing-2xl)
  text-align: center
  color: var(--color-secondary)

.data-table__pagination
  padding: var(--spacing-lg)
  display: flex
  justify-content: center
  align-items: center
  gap: var(--spacing-md)
  border-top: 1px solid var(--border-color)

.data-table__pagination-btn
  padding: var(--spacing-sm) var(--spacing-md)
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  background: var(--color-white)
  cursor: pointer
  transition: var(--transition-fast)
  
  &:hover:not(:disabled)
    background: var(--color-primary-10)
    border-color: var(--color-primary)
  
  &:disabled
    opacity: 0.5
    cursor: not-allowed
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

.data-table__pagination-info
  color: var(--color-secondary)

// Адаптивность
@media (max-width: 768px)
  .data-table__toolbar
    flex-direction: column
    align-items: stretch
  
  .data-table__search
    max-width: none
  
  .data-table__actions
    justify-content: flex-start
  
  .data-table__cell
    padding: var(--spacing-sm)
    font-size: var(--font-size-sm)