/* Table component styles */

/* ===== Table Container ===== */
.tableContainer {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--shape-border-radius, 4px);
  
  &::-webkit-scrollbar {
    height: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--color-background-default, #f5f5f5);
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--color-text-disabled, #bdbdbd);
    border-radius: 4px;
  }
}

/* ===== Base Table ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--font-family-body, 'IBM Plex Sans', sans-serif);
  font-size: var(--font-size-body1, 14px);
  background-color: var(--color-background-paper, #fff);
  
  /* Size variants */
  &.small {
    .cell {
      padding: 6px 12px;
      font-size: var(--font-size-body2, 13px);
    }
  }
  
  &.medium {
    .cell {
      padding: 12px 16px;
    }
  }
  
  &.large {
    .cell {
      padding: 16px 20px;
      font-size: var(--font-size-body1, 14px);
    }
  }
  
  /* Sticky header */
  &.stickyHeader {
    .head {
      position: sticky;
      top: 0;
      z-index: 2;
      background-color: var(--color-background-paper, #fff);
    }
  }
}

/* ===== Table Head ===== */
.head {
  background-color: var(--color-background-default, #fafafa);
  
  .cell {
    font-weight: 600;
    color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
    border-bottom: 2px solid var(--color-divider, rgba(0, 0, 0, 0.12));
  }
}

/* ===== Table Body ===== */
.body {
  .row:last-child .cell {
    border-bottom: none;
  }
}

/* ===== Table Footer ===== */
.footer {
  background-color: var(--color-background-default, #fafafa);
  
  .cell {
    font-weight: 500;
    border-top: 2px solid var(--color-divider, rgba(0, 0, 0, 0.12));
    border-bottom: none;
  }
}

/* ===== Table Row ===== */
.row {
  transition: background-color 150ms ease-in-out;
  
  &.hover:hover {
    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  }
  
  &.selected {
    background-color: var(--color-primary-light, rgba(25, 118, 210, 0.08));
    
    &:hover {
      background-color: var(--color-primary-light, rgba(25, 118, 210, 0.12));
    }
  }
  
  &.clickable {
    cursor: pointer;
  }
}

/* Striped rows */
.striped .body .row:nth-child(odd) {
  background-color: var(--color-action-hover, rgba(0, 0, 0, 0.02));
  
  &:hover {
    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.06));
  }
}

/* ===== Table Cell ===== */
.cell {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
  vertical-align: middle;
  color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
  
  /* Alignment */
  &.alignLeft {
    text-align: left;
  }
  
  &.alignCenter {
    text-align: center;
  }
  
  &.alignRight {
    text-align: right;
  }
  
  &.alignJustify {
    text-align: justify;
  }
  
  /* Padding variants */
  &.paddingCheckbox {
    width: 48px;
    padding: 0 4px;
  }
  
  &.paddingNone {
    padding: 0;
  }
}

/* ===== Sort Label ===== */
.sortLabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-weight: inherit;
  color: inherit;
  transition: color 150ms ease-in-out;
  
  &:hover {
    color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
  }
  
  &:focus {
    outline: none;
    color: var(--color-primary-main, #1976d2);
  }
  
  &.active {
    color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
  }
  
  &:not(.active) {
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
    
    .sortIcon {
      opacity: 0;
      transition: opacity 150ms ease-in-out;
    }
    
    &:hover .sortIcon {
      opacity: 0.5;
    }
  }
}

.sortIcon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  opacity: 1;
  transition: transform 200ms ease-in-out, opacity 150ms ease-in-out;
  
  &.asc {
    transform: rotate(0deg);
  }
  
  &.desc {
    transform: rotate(180deg);
  }
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  gap: 16px;
  font-size: var(--font-size-body2, 13px);
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  border-top: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
  
  &.toolbar {
    min-height: 52px;
    padding: 8px 2px;
  }
}

.paginationLabel {
  flex-shrink: 0;
}

.paginationSelect {
  appearance: none;
  padding: 6px 24px 6px 8px;
  border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: var(--color-background-paper, #fff);
  cursor: pointer;
  transition: border-color 150ms ease-in-out;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
  
  &:hover {
    border-color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
  }
  
  &:focus {
    outline: none;
    border-color: var(--color-primary-main, #1976d2);
  }
}

.paginationSpacer {
  flex: 1 1 100%;
}

.paginationDisplayed {
  flex-shrink: 0;
  margin-left: 8px;
}

.paginationActions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.paginationBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  cursor: pointer;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
  
  &:hover:not(:disabled) {
    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
    color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
  }
  
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== Bordered variant ===== */
.bordered {
  border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
  border-radius: var(--shape-border-radius, 4px);
  
  .cell {
    border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
  }
}

/* ===== Compact variant ===== */
.compact {
  .cell {
    padding: 4px 8px;
    font-size: var(--font-size-caption, 12px);
  }
}

/* ===== Dark mode support ===== */
@media (prefers-color-scheme: dark) {
  .table {
    background-color: var(--color-background-paper-dark, #1e1e1e);
  }
  
  .head {
    background-color: var(--color-background-default-dark, #121212);
  }
  
  .cell {
    color: var(--color-text-primary-dark, #fff);
    border-color: var(--color-divider-dark, rgba(255, 255, 255, 0.12));
  }
  
  .row.hover:hover {
    background-color: var(--color-action-hover-dark, rgba(255, 255, 255, 0.08));
  }
  
  .paginationSelect {
    background-color: var(--color-background-paper-dark, #1e1e1e);
    border-color: var(--color-divider-dark, rgba(255, 255, 255, 0.23));
    color: var(--color-text-primary-dark, #fff);
  }
}