/* =============================================================================
   assets/css/tables.css
   -----------------------------------------------------------------------------
   Every <table> on the site (cart, checkout summary, admin lists) shares
   this look, plus a few small helpers for table cells: a product thumbnail
   image, a cell that lines up action buttons, and the colored "online/
   offline" status pill used on monitor.php.
   ============================================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th,
td {
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

th {
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

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

/* Right-align a cell's text, e.g. money amounts in the cart summary. */
.text-right {
  text-align: right;
}

/* Small square product thumbnail inside a table cell (cart + admin lists). */
.table-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

/* A table cell that needs its contents laid out in a row (thumbnail next
   to product name, or a group of action buttons next to each other). */
.table-cell-flex {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.table-actions {
  display: flex;
  gap: .4rem;
}

/* The little order-total box under the cart table. */
.cart-summary {
  max-width: 320px;
  margin-left: auto;
  margin-top: 1.5rem;
}

/* ---- Status pill (used on monitor.php) ------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .85rem;
  padding: .35rem .85rem;
  border-radius: 999px;
}

.status-online {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-offline {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}