.datagrid {
  color: var(--upf-text-primary);
  border: 1px solid var(--upf-color-border);
  border-radius: var(--upf-radius-md);
  overflow: hidden;
  background: var(--upf-color-surface);
  box-shadow: var(--upf-shadow-xs);
}

.datagrid .header {
  background-color: var(--upf-datagrid-header-bg);
  font-weight: 700;
  font-size: 1rem;
  font-family: "Nunito", sans-serif;
  color: var(--upf-datagrid-header-color);
}

.datagrid .header .mud-table-cell {
  padding: 14px 10px;
}

.datagrid .column-header {
  font-weight: 700;
  font-size: .92rem;
  font-family: "Nunito", sans-serif;
  color: var(--upf-datagrid-header-color);
}

/* --- Action icon inside grid cells --- */
/* .upf-action-icon: for bare icons placed directly in cells */
.upf-action-icon {
  color: var(--upf-text-secondary);
  font-size: 1.2rem;
}

/* .action-icon: Hyper's grid action link component — override with theme tokens */
.action-icon {
  color: var(--upf-text-secondary);
  transition: color .15s ease;
}

.action-icon:hover {
  color: var(--upf-primary);
}

.datagrid .rows {
  background-color: var(--upf-color-surface);
  transition: background-color .16s ease;
}

.datagrid .rows:hover {
  background-color: color-mix(in srgb, var(--upf-color-surface-muted) 88%, white 12%);
}

.datagrid .mud-table-cell {
  padding: var(--upf-grid-cell-padding);
  vertical-align: middle;
}