/* Table Component Styles */
.table-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* Use spacing variable */
  font-family: var(--font-family-sans); /* Use font variable */
}

.table-label {
  font-size: var(--font-size-sm); /* Use font size variable */
  font-weight: var(--font-weight-medium); /* Use font weight variable */
  color: var(--color-gray-700); /* Use color variable */
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-gray-300); /* Use color variable */
  border-radius: var(--border-radius-md); /* Use border radius variable */
}

.table th, .table td {
  padding: var(--spacing-sm) var(--spacing-md); /* Use spacing variables */
  border-bottom: 1px solid var(--color-gray-300); /* Use color variable */
}

.table th {
  background-color: var(--color-gray-100); /* Use color variable */
  font-weight: var(--font-weight-semibold); /* Use font weight variable */
  color: var(--color-gray-700); /* Use color variable */
}

.column-header {
  white-space: nowrap;
  user-select: none;
}

.column-header.sortable {
  cursor: pointer;
}

.column-header.sortable:hover {
  background-color: var(--color-gray-200); /* Use color variable */
}

.header-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sort-indicator {
  display: inline-flex;
  color: #9ca3af;
}

.sort-indicator.asc svg {
  transform: rotate(180deg);
}

.sort-indicator.desc svg {
  transform: rotate(0deg);
}

.select-cell {
  width: 40px;
  text-align: center;
  padding: 0 !important;
}

.data-row {
  background-color: var(--color-white); /* Use color variable */
  transition: background-color var(--transition-duration) ease; /* Use transition variable */
}

.data-row:hover {
  background-color: var(--color-gray-100); /* Use color variable */
}

.data-row.selected {
  background-color: var(--color-blue-50); /* Use color variable */
}

.text-left {
  text-align: left;
}

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

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

.loading-row, .error-row, .empty-row {
  background-color: var(--table-row-bg);
}

.loading-indicator, .error-message, .empty-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--spacing-lg); /* Use spacing variable */
  color: var(--color-gray-500); /* Use color variable */
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  color: var(--color-red-600); /* Use color variable */
}

/* Size variants */
.table-sm th, .table-sm td {
  padding: var(--spacing-xs) var(--spacing-sm); /* Use spacing variables */
  font-size: var(--font-size-xs); /* Use font size variable */
}

.table-lg th, .table-lg td {
  padding: var(--spacing-md) var(--spacing-lg); /* Use spacing variables */
  font-size: var(--font-size-lg); /* Use font size variable */
}

/* Pagination styles */
.table-pagination {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-sm) var(--spacing-md); /* Use spacing variables */
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs) var(--spacing-xs); /* Use spacing variables */
  border-radius: var(--border-radius-full); /* Use border radius variable */
  font-size: var(--font-size-xs); /* Use font size variable */
  font-weight: var(--font-weight-medium); /* Use font weight variable */
}

.status-active {
  background-color: var(--color-green-100); /* Use color variable */
  color: var(--color-green-700); /* Use color variable */
}

.status-inactive {
  background-color: var(--color-red-100); /* Use color variable */
  color: var(--color-red-600); /* Use color variable */
}

/* Table Container */
.list_table_container {
  overflow-x: auto;
  background-color: var(--table-row-bg);
  border-radius: .5rem;
  box-shadow: 0 1px 3px #0000001a;
  margin: 1rem;
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  text-align: left;
  font-family: "Roboto Flex", sans-serif;
  font-size: .9rem;
  color: var(--table-cell-text);
}

/* Header Styles */
thead {
  background-color: var(--table-header-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

th {
  padding: .75rem 1rem;
  font-weight: 600;
  color: var(--table-header-text);
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
}

/* Body Styles */
td {
  padding: .75rem 1rem;
  color: var(--table-cell-text);
  border-bottom: 1px solid var(--table-border);
}

/* Row Hover */
tbody tr:hover {
  background-color: var(--table-row-hover);
}

/* Alternating Row Colors */
tbody tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

/* Scrollbar Styles */
.list_table_container::-webkit-scrollbar {
  height: var(--scrollbar-height); /* Use scrollbar height variable */
}

.list_table_container::-webkit-scrollbar-track {
  background-color: var(--color-gray-200); /* Use color variable */
  border-radius: var(--border-radius-sm); /* Use border radius variable */
}

.list_table_container::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-400); /* Use color variable */
  border-radius: var(--border-radius-sm); /* Use border radius variable */
}

.list_table_container::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-500); /* Use color variable */
}