DataGrid list type; Review/Send refinment; User lock; Table actions

src/styles/components.css

@@ -1058,3 +1058,191 @@
   font-weight: 700;
 }
 
+
+/* List-valued DataGrid columns and checkbox filters. */
+.data-grid-list-select {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--text);
+  font: inherit;
+  padding: 6px 28px 6px 8px;
+}
+
+.data-grid-list-select:focus {
+  outline: none;
+  border-color: var(--blue);
+  box-shadow: var(--focus-ring);
+}
+
+.data-grid-list-filter {
+  display: grid;
+  gap: 10px;
+}
+
+.data-grid-list-filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.data-grid-list-filter-actions button {
+  border: 0;
+  background: transparent;
+  color: var(--blue);
+  padding: 0;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.data-grid-list-filter-actions button:hover,
+.data-grid-list-filter-actions button:focus-visible {
+  color: var(--text-strong);
+  text-decoration: underline;
+  outline: none;
+}
+
+.data-grid-list-filter-options {
+  max-height: 230px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.data-grid-list-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--line);
+}
+
+.data-grid-list-filter-row:last-child {
+  border-bottom: 0;
+}
+
+.data-grid-list-filter-row > label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+  cursor: pointer;
+}
+
+.data-grid-list-filter-row input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.data-grid-list-option-remove,
+.data-grid-list-option-add button {
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  width: 28px;
+  height: 28px;
+  display: inline-grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.data-grid-list-option-remove:hover,
+.data-grid-list-option-remove:focus-visible,
+.data-grid-list-option-add button:hover,
+.data-grid-list-option-add button:focus-visible {
+  color: var(--text-strong);
+  background: var(--panel-soft);
+  outline: none;
+}
+
+.data-grid-list-option-add {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.data-grid-list-option-add input {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--text);
+  font: inherit;
+  padding: 8px 10px;
+}
+
+/* Consistent row-level collection actions for editable DataGrid tables. */
+.data-grid-row-actions {
+  display: grid;
+  grid-template-columns: repeat(4, 28px);
+  align-items: center;
+  justify-content: end;
+  gap: 4px;
+  width: 100%;
+}
+
+.data-grid-row-action {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--text);
+  cursor: pointer;
+  padding: 0;
+}
+
+.data-grid-row-action:hover:not(:disabled),
+.data-grid-row-action:focus-visible:not(:disabled) {
+  border-color: var(--line-dark);
+  background: var(--panel-soft);
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.data-grid-row-action.is-add {
+  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
+  background: color-mix(in srgb, var(--blue) 10%, #fff);
+  color: var(--blue);
+}
+
+.data-grid-row-action.is-remove {
+  border-color: rgba(171, 70, 61, .35);
+  background: rgba(171, 70, 61, .06);
+  color: #9f433b;
+}
+
+.data-grid-row-action:disabled {
+  cursor: default;
+  opacity: .42;
+}
+
+.data-grid-row-action.is-placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.data-grid-empty-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+}
+
+.data-grid-empty-action > span {
+  min-width: 0;
+}