/* ==========================================================================
   Tables — redesign component
   Use the .wb-table class on a <table>. Variants:
     .wb-table--striped  — alternating row tint
     .wb-table--hover    — row highlight on hover (good for clickable rows)
     .wb-table--compact  — denser padding for dense data
     .wb-table--bordered — outer border + cell separators
   The same look is applied as an overlay to legacy Bootstrap .table inside
   .wb-accounting-page so existing pages match without HTML changes.
   ========================================================================== */

/* ---------- Base ---------- */
body.wb-shell-redesign .wb-table,
body.wb-shell-redesign .wb-accounting-page table.table,
body.wb-shell-redesign .wb-accounting-page .table-responsive > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text);
  background: transparent;
  --row-hover: color-mix(in oklab, var(--amber) 6%, var(--surface));
}

/* Header — no background, uppercase eyebrow */
body.wb-shell-redesign .wb-table thead th,
body.wb-shell-redesign .wb-accounting-page table.table thead th {
  background: transparent !important;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

/* Body cells — bottom hairline only */
body.wb-shell-redesign .wb-table tbody td,
body.wb-shell-redesign .wb-accounting-page table.table tbody td {
  background: transparent;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
body.wb-shell-redesign .wb-table tbody tr:last-child td,
body.wb-shell-redesign .wb-accounting-page table.table tbody tr:last-child td {
  border-bottom: 0;
}

/* Footer */
body.wb-shell-redesign .wb-table tfoot td,
body.wb-shell-redesign .wb-accounting-page table.table tfoot td {
  background: transparent;
  padding: 10px 14px;
  font-weight: 700;
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* Numeric columns helper — right-align with mono digits */
body.wb-shell-redesign .wb-table td.num,
body.wb-shell-redesign .wb-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* ---------- Variants ---------- */
body.wb-shell-redesign .wb-table--striped tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
}

body.wb-shell-redesign .wb-table--hover tbody tr,
body.wb-shell-redesign .wb-accounting-page table.table-hover tbody tr {
  transition: background 0.12s ease;
}
body.wb-shell-redesign .wb-table--hover tbody tr:hover td,
body.wb-shell-redesign .wb-accounting-page table.table-hover tbody tr:hover td {
  background: var(--row-hover);
}

body.wb-shell-redesign .wb-table--compact thead th { padding: 8px 12px; }
body.wb-shell-redesign .wb-table--compact tbody td { padding: 8px 12px; font-size: 13px; }

body.wb-shell-redesign .wb-table--bordered {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
body.wb-shell-redesign .wb-table--bordered thead th,
body.wb-shell-redesign .wb-table--bordered tbody td {
  border-right: 1px solid var(--border);
}
body.wb-shell-redesign .wb-table--bordered thead th:last-child,
body.wb-shell-redesign .wb-table--bordered tbody td:last-child {
  border-right: 0;
}

/* ---------- Card-wrapped table ---------- */
/* Adds a card-like surface around a table. Place table inside .wb-table-card. */
body.wb-shell-redesign .wb-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
body.wb-shell-redesign .wb-table-card .wb-table thead th {
  background: var(--surface-2) !important;
}
body.wb-shell-redesign .wb-table-card > .wb-table-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
body.wb-shell-redesign .wb-table-card > .wb-table-card__head h3 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
body.wb-shell-redesign .wb-table-card > .wb-table-card__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Selected row — subtle amber tint */
body.wb-shell-redesign .wb-table tbody tr.is-selected td,
body.wb-shell-redesign .wb-accounting-page table.table tbody tr.is-selected td {
  background: var(--amber-soft);
  color: var(--on-amber-soft);
}

/* Empty state row */
body.wb-shell-redesign .wb-table tbody tr.is-empty td,
body.wb-shell-redesign .wb-accounting-page table.table tbody tr.is-empty td {
  text-align: center;
  padding: 36px 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* Status / pill cell helper */
body.wb-shell-redesign .wb-table .wb-table__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
body.wb-shell-redesign .wb-table .wb-table__pill--mint    { background: var(--mint-soft);     color: var(--on-mint-soft);     border-color: color-mix(in oklab, var(--mint) 25%, transparent); }
body.wb-shell-redesign .wb-table .wb-table__pill--amber   { background: var(--amber-soft);    color: var(--on-amber-soft);    border-color: color-mix(in oklab, var(--amber) 25%, transparent); }
body.wb-shell-redesign .wb-table .wb-table__pill--coral   { background: var(--coral-soft);    color: var(--on-coral-soft);    border-color: color-mix(in oklab, var(--coral) 25%, transparent); }
body.wb-shell-redesign .wb-table .wb-table__pill--electric{ background: var(--electric-soft); color: var(--on-electric-soft); border-color: color-mix(in oklab, var(--electric) 25%, transparent); }

/* Responsive scroll wrapper */
body.wb-shell-redesign .wb-table-scroll,
body.wb-shell-redesign .wb-accounting-page .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body.wb-shell-redesign .wb-table thead th,
  body.wb-shell-redesign .wb-accounting-page table.table thead th {
    font-size: 10.5px;
    padding: 8px 10px;
  }
  body.wb-shell-redesign .wb-table tbody td,
  body.wb-shell-redesign .wb-accounting-page table.table tbody td {
    padding: 10px;
  }
}