@use 'ui-design-system/src/styles/semantic/index' as *;
// Modern table component using design tokens
.ui-table-container {
  position: relative;
  width: 100%;
  overflow: auto;
  background: hsl(286, 20%, 99%); // Surface color
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  // Sticky header container
  &--sticky-header {
    max-height: 400px;
    
    .ui-table__header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: hsl(285, 9%, 87%); // Surface dim
    }
  }

  // Max height container
  &--max-height {
    max-height: var(--ui-table-max-height, 500px);
  }

  // Loading state
  &--loading {
    pointer-events: none;
  }
}

.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;

  // Subtle noise texture for modern brutalist feel
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.02"/></svg>');
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: inherit;
    z-index: 1;
  }

  // Size variants
  &--compact {
    .ui-table__header-cell,
    .ui-table__body-cell {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
    }
  }

  &--default {
    .ui-table__header-cell,
    .ui-table__body-cell {
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
    }
  }

  &--comfortable {
    .ui-table__header-cell,
    .ui-table__body-cell {
      padding: 1rem 1.25rem;
      font-size: 1rem;
    }
  }

  // Style variants
  &--bordered {
    border: 1px solid hsl(289, 14%, 80%);
    
    .ui-table__header-cell,
    .ui-table__body-cell {
      border-right: 1px solid hsl(289, 14%, 80%);
      
      &:last-child {
        border-right: none;
      }
    }

    .ui-table__body-row {
      border-bottom: 1px solid hsl(289, 14%, 80%);
    }
  }

  &--minimal {
    .ui-table__header {
      border-bottom: 2px solid hsl(258, 100%, 47%);
    }

    .ui-table__body-row {
      border-bottom: none;
      
      &:not(:last-child) {
        border-bottom: 1px solid hsl(289, 14%, 90%);
      }
    }
  }

  // Hover effects
  &--hoverable {
    .ui-table__body-row {
      transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
      cursor: pointer;

      &:hover {
        background: hsl(289, 14%, 96%);
        position: relative;
        z-index: 2;
      }
    }
  }

  // Selection
  &--selectable {
    .ui-table__body-row {
      cursor: pointer;

      &--selected {
        background: hsl(263, 100%, 95%);
        border-left: 3px solid hsl(258, 100%, 47%);
      }
    }
  }
}

// Header styles
.ui-table__header {
  background: hsl(285, 9%, 87%);
  border-bottom: 2px solid hsl(287, 12%, 59%);
  position: relative;
  z-index: 5;
}

.ui-table__header-row {
  // No additional styles needed
}

.ui-table__header-cell {
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(279, 14%, 11%);
  position: relative;
  white-space: nowrap;
  user-select: none;

  // Alignment variants
  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }

  // Sortable headers
  &--sortable {
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover {
      background: hsl(285, 9%, 82%);
    }

    &--sorted {
      color: hsl(258, 100%, 47%);
      background: hsl(263, 100%, 95%);
    }
  }

  // Sticky columns
  &--sticky {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 6;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
}

.ui-table__header-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;
}

.ui-table__header-text {
  flex: 1;
}

.ui-table__sort-indicator {
  font-size: 0.875rem;
  color: hsl(258, 100%, 47%);
  font-weight: bold;
  opacity: 0.8;
  
  &[data-direction="asc"] {
    opacity: 1;
  }
  
  &[data-direction="desc"] {
    opacity: 1;
  }
}

// Body styles
.ui-table__body {
  position: relative;
  z-index: 2;
}

.ui-table__body-row {
  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
  border-bottom: 1px solid hsl(289, 14%, 90%);

  &:last-child {
    border-bottom: none;
  }

  // Striped variant
  &--striped {
    background: hsl(289, 14%, 98%);
  }

  // Selection state
  &--selected {
    background: hsl(263, 100%, 95%);
    box-shadow: inset 3px 0 0 hsl(258, 100%, 47%);
  }
}

.ui-table__body-cell {
  color: hsl(279, 14%, 11%);
  font-weight: 400;
  line-height: 1.5;
  position: relative;

  // Alignment variants
  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }

  // Sticky columns
  &--sticky {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 3;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);

    .ui-table__body-row:hover & {
      background: hsl(289, 14%, 96%);
    }

    .ui-table__body-row--selected & {
      background: hsl(263, 100%, 95%);
    }

    .ui-table__body-row--striped & {
      background: hsl(289, 14%, 98%);
    }
  }
}

.ui-table__cell-content {
  display: block;
  width: 100%;
  word-break: break-word;
}

// Empty state
.ui-table__empty-row {
  background: transparent;
  
  &:hover {
    background: transparent !important;
  }
}

.ui-table__empty-cell {
  padding: 3rem 1rem;
  text-align: center;
  border-bottom: none;
}

.ui-table__empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ui-table__empty-text {
  color: hsl(287, 12%, 47%);
  font-size: 1rem;
  font-weight: 500;
}

// Loading overlay
.ui-table__loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 20;
  backdrop-filter: blur(2px);
}

.ui-table__loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid hsl(289, 14%, 80%);
  border-top: 3px solid hsl(258, 100%, 47%);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ui-table__loading-text {
  color: hsl(287, 12%, 47%);
  font-size: 0.875rem;
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Responsive design
@media (max-width: 768px) {
  .ui-table-container {
    border-radius: 0;
    margin: 0 -1rem;
  }

  .ui-table {
    &--compact {
      .ui-table__header-cell,
      .ui-table__body-cell {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
      }
    }

    &--default {
      .ui-table__header-cell,
      .ui-table__body-cell {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
      }
    }
  }

  .ui-table__header-cell,
  .ui-table__body-cell {
    &:first-child {
      padding-left: 1rem;
    }

    &:last-child {
      padding-right: 1rem;
    }
  }
}

// Focus management
.ui-table__header-cell--sortable:focus-visible {
  outline: 2px solid hsl(258, 100%, 47%);
  outline-offset: -2px;
}

// Print styles
@media print {
  .ui-table-container {
    box-shadow: none;
    border: 1px solid #000;
  }

  .ui-table {
    &::before {
      display: none;
    }
  }

  .ui-table__loading-overlay {
    display: none;
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .ui-table {
    border: 2px solid;
  }

  .ui-table__header-cell,
  .ui-table__body-cell {
    border: 1px solid;
  }

  .ui-table__body-row:hover {
    background: highlight;
    color: highlighttext;
  }
}