:root {
  --sap-grid-bg: var(--color-surface);
  --sap-grid-bg-alt: var(--color-surface-alt);
  --sap-grid-border: var(--color-border);
  --sap-grid-text: var(--color-text);
  --sap-grid-subtext: var(--color-subtext);
  --sap-grid-accent: var(--color-primary);
}

.tabulator {
  border: 1px solid var(--sap-grid-border);
  border-radius: 12px;
  background: var(--sap-grid-bg);
  color: var(--sap-grid-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 12px;
}

.tabulator-host {
  max-width: 100%;
  overflow-x: auto;
}

/* Prevent the grid from forcing the chat bubble wider than its container. */
.tabulator-host .tabulator {
  display: inline-block;
  min-width: 100%;
}

.tabulator .tabulator-header {
  border-bottom: 1px solid var(--sap-grid-border);
  background: #f8fafc;
}

.tabulator .tabulator-header .tabulator-col {
  background: transparent;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 8px 10px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sap-grid-subtext);
}

.tabulator .tabulator-row {
  background: var(--sap-grid-bg);
}

.tabulator .tabulator-row[data-row="1"]:hover {
  background: rgba(148, 163, 184, 0.12);
}

.tabulator .tabulator-row .tabulator-cell {
  padding: 6px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.tabulator .tabulator-footer {
  border-top: 1px solid var(--sap-grid-border);
  background: var(--sap-grid-bg-alt);
}

.tabulator .tabulator-paginator {
  padding: 8px 10px;
}

.tabulator .tabulator-page {
  border: 1px solid var(--sap-grid-border);
  background: var(--sap-grid-bg);
  color: var(--sap-grid-text);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
}

.tabulator .tabulator-page.active {
  background: var(--sap-grid-accent);
  color: #fff;
  border-color: var(--sap-grid-accent);
}

.tabulator .tabulator-page:hover {
  background: rgba(37, 99, 235, 0.08);
}

.tabulator .tabulator-page-size {
  border: 1px solid var(--sap-grid-border);
  border-radius: 8px;
  padding: 4px 8px;
}

.sap-grid-truncate {
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}