/* Data tables and the filter bars above them. */

/* A wide table scrolls sideways inside its card; soft shadows at the edges say there is more. */
.table-wrap {
  min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--panel) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, transparent) right / 24px 100% no-repeat local,
    linear-gradient(to right, var(--line-strong), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(to left, var(--line-strong), transparent) right / 10px 100% no-repeat scroll;
}

table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-s); }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 11px 16px; text-align: left; white-space: nowrap;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
}
table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .12s ease; }
/* A row's outcome as a thin edge on its first cell, the same tones as the pills. */
table.data tbody tr[data-tone] td:first-child { box-shadow: inset 3px 0 0 var(--edge, transparent); }
table.data tbody tr[data-tone="ok"] { --edge: var(--ok); }
table.data tbody tr[data-tone="warn"] { --edge: var(--warn); }
table.data tbody tr[data-tone="bad"] { --edge: var(--bad); }
table.data tbody tr[data-tone="mute"] { --edge: var(--line); }
.severity-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
table.data tbody tr:hover td { background: var(--panel-2); }
table.data td.strong { color: var(--ink); font-weight: 600; }
table.data th.right, table.data th.num { text-align: right; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data .col-narrow { width: 72px; }
table.data .col-wide { width: 44%; }
table.data.fit { min-width: 0; }

/* The field mapping table: denser, no zebra, a quiet hover. */
table.data.fieldtable { min-width: 0; border-collapse: separate; border-spacing: 0; }
/* Fixed columns, so a row with a switch and a row with a Required badge line up the same. */
table.data.fieldtable.fieldrows { table-layout: fixed; }
table.data.fieldrows col.fc-name { width: 30%; }
table.data.fieldrows col.fc-arrow { width: 36px; }
table.data.fieldrows col.fc-sync { width: 132px; }
table.data.fieldrows td.fc-arrow { padding-left: 0; padding-right: 0; text-align: center; }
table.data.fieldrows tbody td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  table.data.fieldtable.fieldrows { min-width: 560px; }
}
table.data.fieldtable thead th { padding: 6px 12px 8px; background: transparent; }
table.data.fieldtable tbody td { padding: 9px 12px; background: transparent; }
table.data.fieldtable td.mono { font-family: inherit; font-size: var(--fs-s); font-weight: 500; color: var(--ink); }
table.data.fieldtable tbody { user-select: none; }
table.data.fieldtable td .switch { display: inline-flex; }
table.data.fieldtable .fieldlock {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; cursor: help;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-text); background: var(--brand-soft);
}
table.data.fieldtable .fieldlock svg { width: 12px; height: 12px; }
table.data.fieldtable .fieldlock.off { color: var(--ink-3); background: var(--panel-3); }
/* Soft headings that group the fields; each group keeps one quiet colour on its icon. */
table.data.fieldtable tr.fieldgroup td {
  --tone: var(--ink-3);
  padding: 14px 12px 6px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
table.data.fieldtable tbody tr.fieldgroup:first-child td { padding-top: 6px; }
table.data.fieldtable tr.fieldgroup .fg-ic {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px;
  border-radius: var(--r-s); color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent);
}
table.data.fieldtable tr.fieldgroup .fg-ic svg { width: 12px; height: 12px; }
table.data.fieldtable tr.fieldgroup[data-group="contact"] td { --tone: var(--c2); }
table.data.fieldtable tr.fieldgroup[data-group="address"] td { --tone: var(--ok); }
table.data.fieldtable tr.fieldgroup[data-group="amounts"] td { --tone: var(--warn); }
table.data.fieldtable tr.fieldgroup[data-group="dates"] td { --tone: var(--ink-3); }
table.data.fieldtable tr.fieldgroup[data-group="status"] td { --tone: var(--brand-text); }
table.data.fieldtable tbody tr.fieldgroup:hover td { background: transparent; }
@media (hover: hover) {
  table.data.fieldtable tbody tr:hover td { background: var(--panel-2); }
}

/* ---------- Filter bars: .tablefilter sits inside a card above its rows. ---------- */
.tablefilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tablefilter .tf-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.tablefilter .tf-search svg, .tablefilter .tf-search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--brand-text); pointer-events: none;
}
.tablefilter .tf-search input { width: 100%; padding-left: 34px; }
.tablefilter select.input { width: auto; min-width: 150px; max-width: 240px; flex: 0 1 auto; }
.tablefilter .tf-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-s); color: var(--ink-3); cursor: pointer; user-select: none; }
.tablefilter .tf-toggle input { accent-color: var(--brand); }
.tablefilter .tf-count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .tablefilter { flex-direction: column; align-items: stretch; }
  .tablefilter .tf-search { flex: 1 1 100%; }
  .tablefilter select.input { max-width: none; }
  .tablefilter .tf-count { margin-left: 0; }
}

@media (max-width: 700px) {
  table.data th, table.data td { padding: 9px 12px; white-space: nowrap; }
}