/* styles for the cart/checkout/admin tables, plus a few cell helpers */

/* display:block + overflow-x:auto lets a table wider than its column
   (cart table on a phone, lots of columns) scroll sideways inside its
   own box instead of blowing out the whole page width. rows/cells keep
   normal table layout, just the outer <table> becomes scrollable.
   fixes every table on the site, no extra markup needed anywhere */
table {
  display: block;
  overflow-x: auto;
  overflow-y: hidden; /* keeps rounded corners clipping the header row like before */
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* opt-in wrapper for tables that need real table-layout (e.g. fixed col
   widths that have to line up between thead and tbody).
   table{display:block} above is a quick fix for every table, but it also
   makes the table shrink-to-content instead of filling the container in
   some browsers, which leaves empty space on the right. wrap a <table>
   in <div class="table-scroll"> to get around that -- the wrapper takes
   over scrolling/bg/shadow and the table goes back to being a real table
   filling 100%. only affects tables that use this wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.table-scroll table {
  display: table;
  overflow: visible;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
}

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: rgba(0, 0, 0, .03);
}

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;
}

/* cell whose contents need to be in a row - thumbnail next to 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;
}

/* space after the last button in the Actions column, used by both the
   admin products table and the cart table */
td.actions-td {
  padding-right: 24px;
}

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

/* cart table (cart.php)
   table-layout: fixed + .cart-col-* widths so header and rows share the
   same columns (same trick as .product-table on admin products list).
   Product column has no fixed width so it grabs the leftover space */
.cart-table {
  table-layout: fixed;
  min-width: 760px; /* below this, .table-scroll scrolls instead of crushing columns */
}

.cart-col-options { width: 190px; }
.cart-col-price   { width: 100px; }
.cart-col-qty     { width: 160px; }
.cart-col-total   { width: 100px; }
.cart-col-actions { width: 130px; }
/* .cart-col-product has no width on purpose, see above */

.cart-table th,
.cart-table td {
  vertical-align: middle;
}

.cart-thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: 4px;
}

.cart-empty-state {
  text-align: center;
  padding: 3rem 1rem;
}

.cart-empty-state p {
  color: var(--color-text-muted);
  margin-bottom: 1.2rem;
}

/* 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-online .status-dot {
  box-shadow: 0 0 0 3px rgba(58, 122, 78, .25);
}

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

.status-offline .status-dot {
  box-shadow: 0 0 0 3px rgba(179, 64, 42, .25);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}