.table-controls,
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}

.table-controls { padding-top: 8px; }
.table-search,
.table-selection,
.table-page-tools,
.table-page-size,
.table-page-nav,
.table-page-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-search { gap: 12px; min-width: 0; }
.table-control-label { flex: none; font-weight: 500; }
.table-search input,
.table-page-size select {
  appearance: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color 150ms cubic-bezier(.22,1,.36,1), background-color 150ms cubic-bezier(.22,1,.36,1);
}

.table-search input { width: 240px; max-width: 100%; }
.table-search input::placeholder { color: var(--muted); opacity: 1; }
.table-search input:hover,
.table-page-size select:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.table-selection { min-height: 40px; color: var(--muted); }
.table-range { color: var(--muted); font-variant-numeric: tabular-nums; }
.table-page-tools { flex-wrap: wrap; gap: 16px; }
.table-page-size { white-space: nowrap; color: var(--muted); }
.table-page-size select { min-height: 36px; padding: 4px 8px; }

.table-clear,
.table-page-button,
.sort-button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.22,1,.36,1), color 150ms cubic-bezier(.22,1,.36,1), transform 150ms cubic-bezier(.22,1,.36,1);
}

.table-clear { padding: 8px; color: var(--blue); font-weight: 500; }
.table-clear[hidden] { display: none; }
.table-page-button { min-width: 36px; min-height: 36px; padding: 8px; white-space: nowrap; }
.table-clear:hover,
.table-page-button:hover:not(:disabled),
.sort-button:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); color: var(--blue); }
.table-clear:active,
.table-page-button:active:not(:disabled),
.sort-button:active { transform: scale(.98); }
.table-page-button[aria-current="page"] { background: var(--blue); color: #fff; font-weight: 600; }
.table-page-button[aria-current="page"]:hover { background: color-mix(in srgb, var(--blue) 90%, #000); color: #fff; }
.table-page-button:disabled { opacity: .4; cursor: not-allowed; }
.table-page-gap { color: var(--muted); padding: 0 4px; }

.table-controls :is(input, button, select):focus-visible,
.table-pagination :is(button, select):focus-visible,
.table-enhanced :is(button, input, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 60%, transparent);
  outline-offset: 3px;
}

.table-enhanced th .sort-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  margin: -4px -8px;
  color: inherit;
  font-size: inherit;
  text-align: left;
  white-space: nowrap;
}

.table-enhanced th .sort-button:hover,
.table-enhanced th .sort-button.is-sorted { color: var(--blue); }
.sort-indicator { min-width: 12px; color: var(--muted); opacity: .6; font-size: 14px; line-height: 20px; }
.sort-button.is-sorted .sort-indicator { color: var(--blue); opacity: 1; }
.table-enhanced th.table-check-cell,
.table-enhanced td.table-check-cell { width: 56px; min-width: 56px; padding: 4px 8px 4px 16px; text-align: center; }
.table-check-hit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; cursor: pointer; }
.table-check { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.table-check:disabled { cursor: not-allowed; }
.table-enhanced tbody tr { transition: background-color 150ms cubic-bezier(.22,1,.36,1); }
.table-enhanced tbody tr[data-table-record-id] { cursor: pointer; }
.table-enhanced tbody tr[data-table-record-id]:hover { background: color-mix(in srgb, var(--blue) 3%, #fff); }
.table-enhanced tbody tr.is-active { background: color-mix(in srgb, var(--blue) 5%, #fff); }
.table-enhanced tbody tr.is-selected { background: color-mix(in srgb, var(--blue) 8%, #fff); }
.table-enhanced tbody tr.is-selected:hover { background: color-mix(in srgb, var(--blue) 11%, #fff); }
.table-enhanced tbody tr.is-active > td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.table-enhanced tbody tr.is-selected > td { color: var(--text); }
.table-enhanced tbody tr.table-empty-row:hover { background: transparent; }
.table-enhanced .table-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; min-height: 160px; padding: 32px 16px; text-align: center; }
.table-empty strong { color: var(--text); font-size: 14px; font-weight: 500; }

@media (max-width: 680px) {
  .table-controls,
  .table-pagination { padding: 16px; gap: 12px; }
  .table-search { flex: 1 1 100%; }
  .table-search input { flex: 1; width: 100%; min-width: 0; }
  .table-selection { min-height: 32px; }
  .table-page-tools { width: 100%; justify-content: space-between; gap: 12px; }
  .table-page-nav { gap: 4px; flex-wrap: wrap; }
  .table-page-numbers { gap: 2px; }
  .table-page-button { min-width: 32px; padding: 8px; }
  .table-control-label { font-size: 14px; }
}

@media (pointer: coarse) {
  .table-search input,
  .table-page-size select { min-height: 44px; font-size: 16px; }
  .table-page-button,
  .table-clear,
  .table-enhanced th .sort-button { min-width: 44px; min-height: 44px; }
  .table-check-hit { width: 44px; height: 44px; }
  .table-page-nav,
  .table-page-numbers { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .table-controls *,
  .table-pagination *,
  .table-enhanced tbody tr,
  .table-enhanced .sort-button { transition: none; }
  .table-clear:active,
  .table-page-button:active:not(:disabled),
  .sort-button:active { transform: none; }
}