.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:13px}
/* Fixed layout so columns always fit the card (no right-edge cut-off); scrolls only below min-width, cards below 560px */
.grid{table-layout:fixed}
.grid.pay{min-width:880px}
.grid.guest{min-width:760px}
/* Widths are percentages summing to exactly 100 (kebab included) so the fixed
   layout never overflows its container — no stray horizontal scrollbar. */
.pay .c-cat{width:11%}.pay .c-name{width:14%}.pay .c-contact{width:15%}.pay .c-status{width:12%}
.pay .c-num{width:7%}.pay .c-due{width:9%}.pay .c-upd{width:12%}.pay .c-kebab{width:6%}
.guest .g-name{width:21%}.guest .g-side{width:13%}.guest .g-seats{width:8%}.guest .g-rsvp{width:14%}
.guest .g-notes{width:14%}.guest .g-pass{width:10%}.guest .g-upd{width:14%}.guest .g-kebab{width:6%}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--card2);color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap}
tbody tr{transition:background var(--dur-1) var(--ease)}
tbody tr:hover{background:color-mix(in srgb,var(--card2) 45%,transparent)}
/* Numeric money columns read right-aligned; the header aligns with them. */
.pay th.c-num,.pay td.num{text-align:right}
.pay td.num input{text-align:right}
/* Owed is derived (quote - paid), shown read-only, right-aligned, muted at zero. */
td.owed .bal{display:inline-block;width:100%;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt);padding-right:1px}
td.owed .bal.muted{color:var(--faint);font-weight:400}
/* A not-started row recedes so rows with real data lead. */
tbody tr.row-muted td input::placeholder{color:color-mix(in srgb,var(--faint) 60%,transparent)}
tbody tr.row-muted{opacity:.62}
tbody tr.row-muted:hover,tbody tr.row-muted:focus-within{opacity:1}
td.upd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Inputs and selects are INVISIBLE at rest — no wall of boxes. A hairline shows
   on hover; focus gets a gold border + card2 fill. This calms the whole table. */
td input,td select{width:100%;background-color:transparent;border:1px solid transparent;color:var(--txt);
  border-radius:var(--r-1);padding:7px 8px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
td input:hover,td select:not(.stat):hover{border-color:var(--line2)}
td input:focus,td select:not(.stat):focus{border-color:var(--gold);background-color:var(--card2);outline:none}
td select option{background:var(--card);color:var(--txt)}
/* Plain selects (category, side): remove the cramped native chevron, draw our
   own with real breathing room so the label is never jammed against it. */
td select:not(.stat){appearance:none;-webkit-appearance:none;padding-right:20px;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%23948b7d' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;cursor:pointer}
td select.cat-select{font-weight:600}
/* Status: colored pill-select, padded so "Contacted" fits with its chevron. */
.stat-wrap{position:relative;display:block}
.stat-wrap::after{content:"";position:absolute;right:8px;top:calc(50% - 3px);width:5px;height:5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);
  opacity:.5;pointer-events:none}
td select.stat{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:999px;
  padding:6px 16px 6px 9px;font-weight:700;font-size:11px;text-align:center;text-align-last:center;cursor:pointer}
td select.stat:focus{outline:2px solid var(--ring);outline-offset:1px}
.stat.s-todo{background:rgba(138,123,100,.20);color:var(--faint)}
.stat.s-contacted{background:rgba(127,180,216,.18);color:var(--blue)}
.stat.s-quoted{background:rgba(224,169,74,.18);color:var(--amber)}
.stat.s-booked{background:rgba(63,174,130,.18);color:var(--emerald)}
.stat.s-paid{background:rgba(63,174,130,.30);color:var(--emerald)}
.stat.rs-pending{background:rgba(224,169,74,.18);color:var(--amber)}
.stat.rs-yes{background:rgba(63,174,130,.18);color:var(--emerald)}
.stat.rs-no{background:rgba(138,123,100,.20);color:var(--faint)}
.status-pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;display:inline-block}
.s-todo{background:rgba(138,123,100,.18);color:var(--faint)}
.s-contacted{background:rgba(127,180,216,.16);color:var(--blue)}
.s-quoted{background:rgba(224,169,74,.16);color:var(--amber)}
.s-booked{background:rgba(63,174,130,.16);color:var(--emerald)}
.s-paid{background:rgba(63,174,130,.28);color:var(--emerald)}
.del{background:none;border:none;color:var(--red);cursor:pointer;font-size:16px;line-height:1}

/* Dialable contact: input + tel: shortcut inline (the one row shortcut allowed) */
.vendor-contact{display:flex;align-items:center;gap:6px;flex:1}
.vendor-call{flex:none;text-decoration:none;font-size:15px;line-height:1}

/* Kebab column: the row's action menu, right-aligned in the last cell */
.kebab-cell{text-align:right;white-space:nowrap;padding-left:4px;padding-right:6px}
.kebab-cell .kebab{color:var(--muted)}

/* Mobile: each table row becomes a stacked card (no horizontal scroll-within-scroll) */
@media (max-width: 560px) {
  .tablewrap { border: none; overflow: visible; }
  table { min-width: 0; width: 100%; }
  /* Must out-specificity .grid.pay/.grid.guest min-widths or phones scroll sideways */
  .tablewrap .grid { min-width: 0; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: auto; }
  tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card2); margin-bottom: 10px; padding: 4px 12px; }
  td { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
  tr td:last-child { border-bottom: none; }
  td::before { content: attr(data-label); color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; flex: 0 0 auto; }
  td input, td select { width: auto; flex: 1; text-align: right; }
  .stat-wrap { flex: 1; }
  .stat-wrap .stat { width: 100%; }
  td.upd { justify-content: flex-end; }
  td.kebab-cell { justify-content: flex-end; padding-right: 0; }
  td.kebab-cell::before { content: ""; }
}