/* ==========================================================================
   TABLES
   Modern table component styles using design tokens
   ========================================================================== */

/* ====================
   BASE TABLE
   ==================== */

.table {
  width: 100%;
  margin-bottom: var(--space-5);
  color: var(--color-neutral-900);
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--padding-md);
  text-align: left;
  border-bottom: var(--border-width-thin) solid var(--border-default);
}

.table thead th {
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-50);
  border-bottom: var(--border-width-medium) solid var(--border-default);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table tbody tr {
  transition: var(--transition-colors);
}

.table tbody tr:hover {
  background-color: var(--bg-surface-hover);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ====================
   TABLE VARIANTS
   ==================== */

/* Striped table */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-neutral-50);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background-color: var(--bg-surface-hover);
}

/* Bordered table */
.table-bordered {
  border: var(--border-width-thin) solid var(--border-default);
}

.table-bordered th,
.table-bordered td {
  border: var(--border-width-thin) solid var(--border-default);
}

/* Compact table */
.table-sm th,
.table-sm td {
  padding: var(--padding-sm);
  font-size: var(--text-sm);
}

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====================
   TABLE ROW STATES
   ==================== */

.table-active {
  background-color: var(--bg-surface-active);
}

.table-primary {
  background-color: var(--color-primary-100);
}

.table-success {
  background-color: var(--color-success-100);
}

.table-warning {
  background-color: var(--color-warning-100);
}

.table-danger {
  background-color: var(--color-error-100);
}

/* ====================
   DATATABLE ENHANCEMENTS
   ==================== */

/* DataTables specific styles */
.dataTables_wrapper {
  padding: var(--padding-md) 0;
}

.dataTables_length,
.dataTables_filter {
  margin-bottom: var(--space-4);
}

.dataTables_length label,
.dataTables_filter label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
}

.dataTables_length select {
  margin: 0 var(--space-2);
  padding: var(--padding-xs) var(--padding-sm);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.dataTables_filter input {
  margin-left: var(--space-2);
  padding: var(--padding-xs) var(--padding-sm);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.dataTables_info {
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

.dataTables_paginate {
  padding-top: var(--space-4);
}

.dataTables_paginate .paginate_button {
  padding: var(--padding-xs) var(--padding-sm);
  margin: 0 var(--space-1);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: var(--transition-colors);
}

.dataTables_paginate .paginate_button:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--border-hover);
}

.dataTables_paginate .paginate_button.current {
  background-color: var(--color-primary-700);
  color: var(--color-neutral-0);
  border-color: var(--color-primary-700);
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}