/**
 * @file
 * Standard Drupal Table, TableDrag, TableSort, and TableSelect styles for Wares Point Theme.
 * Mobile responsive scrolling guarantees zero page blowouts.
 */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--wp-space-lg) 0;
  background-color: var(--wp-white);
  border: 1px solid var(--wp-border-soft);
  border-radius: var(--wp-radius-md);
  font-size: 0.95rem;
}

/* Force mobile tables to scroll smoothly within their box without page overflow */
@media (max-width: 767px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

caption {
  font-family: var(--wp-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wp-brown-deep);
  text-align: left;
  padding: var(--wp-space-sm) 0;
}

th,
td {
  padding: var(--wp-space-sm) var(--wp-space-md);
  text-align: left;
  border-bottom: 1px solid var(--wp-border-soft);
}

th {
  background-color: var(--wp-cream-light);
  color: var(--wp-brown-deep);
  font-weight: 700;
  border-bottom: 2px solid var(--wp-sand-primary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

tbody tr:nth-child(even),
tr.even {
  background-color: rgba(255, 242, 224, 0.35); /* Subtle cream row tint */
}

tbody tr:hover {
  background-color: rgba(238, 214, 181, 0.4);
}

/* Table sorting */
th.is-active,
td.is-active {
  background-color: rgba(200, 169, 126, 0.15);
}

th a {
  display: inline-flex;
  align-items: center;
  gap: var(--wp-space-xs);
  color: var(--wp-brown-deep);
  text-decoration: none;
}

th a:hover {
  color: var(--wp-tan-dark);
  text-decoration: underline;
}

/* Table select checkbox cell */
th.select-all,
td.checkbox {
  width: 36px;
  text-align: center;
}

/* Table drag handle */
.tabledrag-handle {
  cursor: move;
  padding: 0 var(--wp-space-xs);
  color: var(--wp-tan-dark);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tabledrag-changed {
  color: var(--wp-status-warning);
}

/* Responsive table wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--wp-space-lg);
}