/* Tabulator skin — align with design-system §6.6.
   ECharts tema lives in /static/js/echarts-theme.js (registered at runtime). */

.tabulator {
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  color: var(--color-text);
  font-feature-settings: var(--font-features);
}
.tabulator .tabulator-header {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  border-top: 0;
}
.tabulator .tabulator-header .tabulator-col {
  background: transparent;
  border-right: 0;
  padding: var(--space-2) var(--space-3);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: var(--color-surface-muted);
  cursor: pointer;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content {
  color: var(--color-primary);
}

.tabulator .tabulator-tableholder { background: transparent; }

.tabulator .tabulator-row {
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 36px;
}
.tabulator .tabulator-row.tabulator-row-even { background: var(--color-surface); color: var(--color-text); }
.tabulator .tabulator-row .tabulator-cell { color: var(--color-text); }
.tabulator .tabulator-row.tabulator-selectable:hover {
  background: var(--color-surface-muted);
  cursor: pointer;
}
.tabulator .tabulator-row.tabulator-selected {
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
}
.tabulator .tabulator-row .tabulator-cell {
  padding: var(--space-2) var(--space-3);
  border-right: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabulator .tabulator-row .tabulator-cell.is-num { text-align: right; }

/* Group headers */
.tabulator .tabulator-row.tabulator-group {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
  border-color: var(--color-text-muted) transparent transparent transparent;
}

/* Footer / paginator */
.tabulator .tabulator-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}
.tabulator .tabulator-footer .tabulator-paginator {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.tabulator .tabulator-footer button,
.tabulator .tabulator-footer .tabulator-page {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--text-caption-size);
  font-weight: 500;
  min-height: auto;
  width: auto;
  display: inline-block;
  margin: 0;
  cursor: pointer;
}
.tabulator .tabulator-footer button:hover,
.tabulator .tabulator-footer .tabulator-page:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-text);
  border-color: transparent;
}
.tabulator .tabulator-footer .tabulator-page-size,
.tabulator .tabulator-footer .tabulator-page-size:focus {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--text-caption-size);
  min-height: auto;
  height: auto;
}

/* Sort arrows */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
  border-color: var(--color-text-subtle) transparent transparent transparent;
}
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-arrow {
  border-color: transparent transparent var(--color-primary) transparent;
}
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  border-color: var(--color-primary) transparent transparent transparent;
}

/* In-cell badges (when rendered via formatter:"html") */
.tabulator .tabulator-row .tabulator-cell .badge { white-space: nowrap; }

/* Empty placeholder */
.tabulator .tabulator-placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  padding: var(--space-8);
}

/* Hide outer container border when inside a card */
.card .tabulator { border-radius: 0; }

/* Tooltip on header columns — Tabulator default tiene bg/color sin definir,
   hereda white-on-white. Override con tokens del tema. */
.tabulator-popup-container {
  background: var(--color-surface-elevated, var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
  color: var(--color-text);
  border-radius: var(--radius-sm);
}
.tabulator-tooltip {
  background: var(--color-surface-elevated, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption-size);
  padding: 6px 10px;
  max-width: 360px;
  white-space: normal;
  line-height: 1.4;
}