/* position:relative is load-bearing: it makes this the containing block for absolutely
   positioned descendants (screen-reader labels), which otherwise resolve against the root
   and stretch the document at narrow widths. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { font-size: var(--fs-sm); min-width: 640px; }
.table th {
  text-align: start; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border);
  background: var(--color-background-secondary); white-space: nowrap;
}
.table td { padding: var(--sp-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table tr.is-selected { background: var(--color-gold-wash); box-shadow: inset 3px 0 0 var(--color-gold-primary); }
.table td.num, .table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover { color: var(--color-text-secondary); }
.table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--color-gold-primary); }
.table th[aria-sort="descending"]::after { content: " ↓"; color: var(--color-gold-primary); }
.table--rows tbody tr { cursor: pointer; }
.table__product { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; }
.table__drop { width: 20px; height: 20px; flex: none; color: var(--color-gold-primary); }
.pagination { display: flex; align-items: center; gap: var(--sp-2); }
.pagination button {
  min-width: 34px; height: 34px; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-size: var(--fs-xs);
}
.pagination button[aria-current="page"] { background: var(--color-gold-primary); border-color: var(--color-gold-primary); color: var(--color-text-inverse); font-weight: 600; }
.pagination button:hover:not([aria-current]) { border-color: var(--color-gold-edge); color: var(--color-text-primary); }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); flex-wrap: wrap; }

/* R49: the paginator now renders anchors styled as controls (see
   resources/views/vendor/pagination/exmart.blade.php). The gap separator is the one element
   in that view which is not a control. */
.pagination a,
.pagination button { display: inline-grid; place-items: center; }
.pagination__gap { color: var(--color-text-muted); padding-inline: var(--sp-2); }