@alaarab/ogrid-react-fluent 2.1.3 → 2.1.5

package/dist/esm/index.css

@@ -0,0 +1,1278 @@
+@charset "UTF-8";
+
+/* src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
+.ColumnHeaderFilter_module_columnHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+:root {
+  --dt-header-resize-zone: 16px;
+  --dt-header-action-button: 24px;
+  --dt-header-action-gap: 2px;
+}
+.ColumnHeaderFilter_module_headerContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: 2px 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ColumnHeaderFilter_module_columnName {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--colorNeutralForeground1, #242424);
+}
+.ColumnHeaderFilter_module_headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--dt-header-action-gap);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.ColumnHeaderFilter_module_filterIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  margin-left: 2px;
+  border: none;
+  border-radius: var(--borderRadiusSmall, 4px);
+  background-color: transparent;
+  color: var(--colorNeutralForeground2, #616161);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.15s ease;
+}
+.ColumnHeaderFilter_module_filterIcon svg {
+  font-size: 14px;
+}
+.ColumnHeaderFilter_module_filterIcon:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  color: var(--colorNeutralForeground2Hover, #424242);
+}
+.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive {
+  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
+  color: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterActive:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+.ColumnHeaderFilter_module_filterIcon.ColumnHeaderFilter_module_filterOpen {
+  background-color: var(--colorSubtleBackgroundPressed, #ebebeb);
+  color: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_filterBadge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--colorBrandBackground, #0f6cbd);
+  border-radius: 50%;
+  border: 1px solid var(--colorNeutralBackground1, #ffffff);
+}
+.ColumnHeaderFilter_module_filterPopover {
+  min-width: 280px;
+  max-width: 320px;
+  overflow: hidden;
+  padding: 0;
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
+  font-family: var(--fontFamilyBase, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
+  font-size: 14px;
+  color: var(--colorNeutralForeground1, #242424);
+}
+.ColumnHeaderFilter_module_popoverHeader {
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground2, #616161);
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+.ColumnHeaderFilter_module_popoverSearch {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+}
+.ColumnHeaderFilter_module_nativeInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  padding: 6px 12px;
+  min-height: 36px;
+  box-sizing: border-box;
+}
+.ColumnHeaderFilter_module_nativeInputWrapper:focus-within {
+  border-color: var(--colorBrandStroke1, #0f6cbd);
+  outline: none;
+}
+.ColumnHeaderFilter_module_nativeInputIcon {
+  color: var(--colorNeutralForeground3, #616161);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.ColumnHeaderFilter_module_nativeInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-size: 14px;
+  font-family: inherit;
+  background: transparent;
+  color: var(--colorNeutralForeground1, #242424);
+}
+.ColumnHeaderFilter_module_nativeInput::placeholder {
+  color: var(--colorNeutralForeground4, #707070);
+}
+.ColumnHeaderFilter_module_resultCount {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_selectAllRow {
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+.ColumnHeaderFilter_module_selectAllButton {
+  background: none;
+  border: none;
+  color: var(--colorBrandForeground1, #0f6cbd);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--borderRadiusSmall, 4px);
+  transition: background-color 0.15s ease;
+}
+.ColumnHeaderFilter_module_selectAllButton:hover {
+  background-color: var(--colorBrandBackground2, #ebf3fc);
+}
+.ColumnHeaderFilter_module_popoverOptions {
+  overflow-y: auto;
+  max-height: 250px;
+  padding: 6px 0;
+}
+.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar {
+  width: 6px;
+}
+.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-track {
+  background: var(--colorNeutralBackground3, #f5f5f5);
+}
+.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb {
+  background: var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: 3px;
+}
+.ColumnHeaderFilter_module_popoverOptions::-webkit-scrollbar-thumb:hover {
+  background: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_popoverOption {
+  padding: 4px 12px;
+  transition: background-color 0.1s ease;
+  cursor: pointer;
+}
+.ColumnHeaderFilter_module_popoverOption:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+.ColumnHeaderFilter_module_nativeCheckbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--colorBrandBackground, #0f6cbd);
+  flex-shrink: 0;
+}
+.ColumnHeaderFilter_module_checkboxLabel {
+  margin-left: 8px;
+  font-size: 14px;
+  color: var(--colorNeutralForeground1, #242424);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  cursor: pointer;
+}
+.ColumnHeaderFilter_module_personOption {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.ColumnHeaderFilter_module_personOption:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+.ColumnHeaderFilter_module_loadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px;
+}
+.ColumnHeaderFilter_module_filterSpinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-top-color: var(--colorBrandBackground, #0f6cbd);
+  border-radius: 50%;
+  animation: ColumnHeaderFilter_module_ogrid-filter-spin 0.8s linear infinite;
+}
+@keyframes ColumnHeaderFilter_module_ogrid-filter-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ColumnHeaderFilter_module_noResults {
+  padding: 16px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_selectedUserSection {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
+}
+.ColumnHeaderFilter_module_selectedUserLabel {
+  font-size: 11px;
+  color: var(--colorNeutralForeground2, #616161);
+  margin-bottom: 6px;
+}
+.ColumnHeaderFilter_module_selectedUser {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ColumnHeaderFilter_module_userInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ColumnHeaderFilter_module_avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--colorBrandBackground, #0f6cbd);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.ColumnHeaderFilter_module_avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.ColumnHeaderFilter_module_avatarInitials {
+  color: var(--colorNeutralForegroundOnBrand, #ffffff);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+.ColumnHeaderFilter_module_userText {
+  display: flex;
+  flex-direction: column;
+}
+.ColumnHeaderFilter_module_userSecondary {
+  font-size: 12px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+.ColumnHeaderFilter_module_removeUserButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(--colorNeutralForeground2, #616161);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ColumnHeaderFilter_module_removeUserButton:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+  color: var(--colorPaletteRedForeground1, #c4314b);
+}
+.ColumnHeaderFilter_module_popoverActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+.ColumnHeaderFilter_module_clearButton {
+  padding: 6px 12px;
+  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  color: var(--colorNeutralForeground1, #242424);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ColumnHeaderFilter_module_clearButton:hover:not(:disabled) {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+  border-color: var(--colorNeutralStroke1Hover, #c7c7c7);
+}
+.ColumnHeaderFilter_module_clearButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ColumnHeaderFilter_module_applyButton {
+  padding: 6px 12px;
+  border: 1px solid var(--colorBrandBackground, #0f6cbd);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorBrandBackground, #0f6cbd);
+  color: var(--colorNeutralForegroundOnBrand, #ffffff);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ColumnHeaderFilter_module_applyButton:hover {
+  background-color: var(--colorBrandBackgroundHover, #115ea3);
+  border-color: var(--colorBrandBackgroundHover, #115ea3);
+}
+
+/* src/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
+.ColumnHeaderMenu_module_content {
+  min-width: 140px;
+  background: var(--ogrid-bg, #ffffff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 1000;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+.ColumnHeaderMenu_module_item {
+  font-size: 13px;
+  line-height: 1;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
+  position: relative;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.ColumnHeaderMenu_module_item:disabled {
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ColumnHeaderMenu_module_item:hover:not(:disabled) {
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.ColumnHeaderMenu_module_separator {
+  height: 1px;
+  background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  margin: 4px 0;
+}
+
+/* src/DataGridTable/DataGridTable.module.scss */
+.DataGridTable_module_tableScrollContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  background: var(--ogrid-bg, #fff);
+}
+.DataGridTable_module_tableWidthAnchor {
+  position: relative;
+  width: max-content;
+  min-width: var(--data-table-min-width, max-content);
+  background: var(--ogrid-bg, #fff);
+}
+.DataGridTable_module_tableWrapper {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: var(--ogrid-bg, #fff);
+  will-change: scroll-position;
+}
+.DataGridTable_module_tableWrapper[data-overflow-x=true] {
+  overflow-x: auto;
+}
+.DataGridTable_module_tableWrapper[data-empty=true] {
+  overflow-x: hidden;
+}
+.DataGridTable_module_tableWrapper[data-loading=true] {
+  min-height: 200px;
+}
+.DataGridTable_module_dataTable {
+  width: var(--data-table-width, fit-content);
+  max-width: 100%;
+  min-width: var(--data-table-min-width, max-content);
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  table-layout: auto;
+  background-color: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.DataGridTable_module_dataTable tbody tr {
+  height: var(--ogrid-row-height, auto);
+}
+.DataGridTable_module_groupHeaderCell {
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  padding: 6px 10px;
+  background: var(--ogrid-header-bg, #f5f5f5);
+}
+.DataGridTable_module_headerCellContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.DataGridTable_module_headerMenuTrigger {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+  opacity: 1;
+  transition: background-color 0.15s;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+}
+.DataGridTable_module_headerMenuTrigger:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.DataGridTable_module_headerMenuTrigger:active {
+  background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
+}
+.DataGridTable_module_headerMenuTrigger:focus-visible {
+  outline: 2px solid var(--ogrid-accent, #0078d4);
+  outline-offset: 2px;
+}
+.DataGridTable_module_dropIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ogrid-selection-color, #217346);
+  pointer-events: none;
+  z-index: 100;
+  transition: left 0.05s;
+}
+.DataGridTable_module_resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 1;
+}
+.DataGridTable_module_resizeHandle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 3px;
+  bottom: 0;
+  width: 2px;
+}
+.DataGridTable_module_resizeHandle:hover::after {
+  background-color: var(--ogrid-accent, #0078d4);
+}
+.DataGridTable_module_resizeHandle:active::after {
+  background-color: var(--ogrid-accent-dark, #005a9e);
+}
+.DataGridTable_module_pinnedColLeft {
+  position: sticky;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+}
+.DataGridTable_module_pinnedColLeft::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -4px;
+  bottom: -1px;
+  width: 4px;
+  background:
+    linear-gradient(
+      to right,
+      var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)),
+      transparent);
+  pointer-events: none;
+}
+.DataGridTable_module_pinnedColRight {
+  position: sticky;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+}
+.DataGridTable_module_pinnedColRight::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -4px;
+  bottom: -1px;
+  width: 4px;
+  background:
+    linear-gradient(
+      to left,
+      var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)),
+      transparent);
+  pointer-events: none;
+}
+.DataGridTable_module_cellContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+.DataGridTable_module_cellContent:focus-visible {
+  outline: none;
+}
+.DataGridTable_module_activeCellContent {
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
+}
+.DataGridTable_module_editingCellContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  background: var(--ogrid-bg, #fff);
+  overflow: visible;
+  padding: 0;
+}
+.DataGridTable_module_cellInRange {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+[data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+[data-drag-anchor] {
+  background: var(--ogrid-bg, #fff) !important;
+}
+.DataGridTable_module_cellCut {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+  opacity: 0.7;
+}
+.DataGridTable_module_fillHandle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background: var(--ogrid-selection-color, #217346);
+  border: 1px solid var(--ogrid-bg, #fff);
+  border-radius: 1px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+.DataGridTable_module_selectionHeaderCellInner,
+.DataGridTable_module_selectionCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.DataGridTable_module_rowNumberHeaderCellInner,
+.DataGridTable_module_rowNumberCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+}
+.DataGridTable_module_statusBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  background: var(--ogrid-header-bg, #f5f5f5);
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  min-height: 28px;
+}
+.DataGridTable_module_statusBarItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.DataGridTable_module_statusBarItem:not(:last-child)::after {
+  content: "";
+  width: 1px;
+  height: 14px;
+  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  margin-left: 12px;
+}
+.DataGridTable_module_statusBarLabel {
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+}
+.DataGridTable_module_statusBarValue {
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  font-weight: 600;
+}
+.DataGridTable_module_contextMenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_contextMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+}
+.DataGridTable_module_contextMenuItem:hover:not(:disabled) {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.DataGridTable_module_contextMenuItem:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.DataGridTable_module_contextMenuItemLabel {
+  flex: 1;
+}
+.DataGridTable_module_contextMenuItemShortcut {
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  font-size: 0.85em;
+}
+.DataGridTable_module_contextMenuDivider {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
+  backdrop-filter: blur(1px);
+  pointer-events: all;
+}
+.DataGridTable_module_loadingOverlayContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
+}
+.DataGridTable_module_loadingOverlayText {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+}
+.DataGridTable_module_loadingDimmed {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.DataGridTable_module_emptyStateInGrid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px 16px;
+  min-height: 88px;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, #f5f5f5);
+}
+.DataGridTable_module_emptyStateInGridTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  margin-bottom: 4px;
+}
+.DataGridTable_module_emptyStateInGridMessage {
+  font-size: 13px;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  line-height: 1.5;
+}
+.DataGridTable_module_emptyStateInGridLink {
+  background: none;
+  border: none;
+  color: var(--ogrid-accent, #0078d4);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+.DataGridTable_module_emptyStateInGridLink:hover {
+  color: var(--ogrid-accent-dark, #005a9e);
+}
+.DataGridTable_module_spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-top-color: var(--ogrid-accent, #0078d4);
+  border-radius: 50%;
+  animation: DataGridTable_module_ogrid-spin 0.8s linear infinite;
+}
+@keyframes DataGridTable_module_ogrid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: #f3f2f1;
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] {
+  --ogrid-bg: #1b1b1f;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: #2c2c2c;
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.04);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.2);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.5);
+}
+.fui-FluentProvider {
+  --ogrid-bg: var(--colorNeutralBackground1, #ffffff);
+  --ogrid-fg: var(--colorNeutralForeground1, rgba(0, 0, 0, 0.87));
+  --ogrid-fg-secondary: var(--colorNeutralForeground2, rgba(0, 0, 0, 0.6));
+  --ogrid-fg-muted: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.5));
+  --ogrid-border: var(--colorNeutralStroke2, rgba(0, 0, 0, 0.12));
+  --ogrid-header-bg: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  --ogrid-hover-bg: var(--colorSubtleBackgroundHover, rgba(0, 0, 0, 0.04));
+  --ogrid-selected-row-bg: var(--colorNeutralBackground1Selected, #e6f0fb);
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: var(--colorBrandForeground1, #0078d4);
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+.DataGridTable_module_tableScrollContent {
+  min-height: 100%;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+.DataGridTable_module_tableWidthAnchor {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+.DataGridTable_module_tableWrapper {
+  border: none;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  -webkit-overflow-scrolling: touch;
+  outline: none;
+}
+.DataGridTable_module_dataTable {
+  table-layout: auto !important;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+.DataGridTable_module_dataTable .fui-TableHeaderCell,
+.DataGridTable_module_dataTable .fui-TableCell {
+  min-width: 80px;
+  box-sizing: border-box;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  font-size: 13px;
+  vertical-align: middle;
+}
+.DataGridTable_module_dataTable .fui-TableHeaderCell {
+  padding: 6px 10px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  white-space: nowrap;
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+  z-index: 8;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
+  position: static !important;
+}
+.DataGridTable_module_dataTable .fui-TableHeaderCell:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
+  outline-offset: -2px;
+  z-index: 11;
+}
+.DataGridTable_module_dataTable .fui-TableCell {
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  height: 1px;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  position: relative;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_dataTable .fui-TableCell > * {
+  min-width: 0;
+}
+.DataGridTable_module_dataTable .fui-TableCell:focus-visible {
+  outline: none;
+}
+.DataGridTable_module_dataTable .fui-TableHeaderCell:last-of-type,
+.DataGridTable_module_dataTable .fui-TableCell:last-of-type {
+  border-right: none;
+}
+.DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
+  border-bottom: none;
+}
+.DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
+  background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
+}
+.DataGridTable_module_leafHeaderCellSpan {
+  font-weight: 600;
+  padding: 6px 10px;
+  background: var(--ogrid-header-bg, #f3f2f1);
+}
+.DataGridTable_module_selectionHeaderCellWrapper {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+.DataGridTable_module_selectionCellWrapper {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+.DataGridTable_module_rowNumberHeaderCellWrapper {
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  padding: 4px 8px !important;
+  text-align: center;
+  background: var(--ogrid-header-bg, #f5f5f5);
+  font-weight: 600;
+  color: var(--colorNeutralForeground3, #666);
+  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_rowNumberCellWrapper {
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  padding: 4px 8px !important;
+  text-align: center;
+  background: var(--colorNeutralBackground3, #f5f5f5);
+  font-weight: 600;
+  color: var(--colorNeutralForeground3, #666);
+  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+.DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow .fui-TableCell {
+  background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
+}
+.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  cursor: pointer;
+}
+.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .DataGridTable_module_selectedRow:hover .fui-TableCell {
+  background-color: var(--colorNeutralBackground1Hover, #dae8f8);
+}
+.DataGridTable_module_selectableGrid .DataGridTable_module_dataTable .fui-TableBody .fui-TableRow {
+  cursor: pointer;
+}
+.DataGridTable_module_cellContent {
+  padding: 4px 8px;
+}
+.DataGridTable_module_activeCellContent {
+  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
+  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
+}
+.DataGridTable_module_cellInRange {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+[data-drag-range] {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+[data-drag-anchor] {
+  background-color: var(--ogrid-bg, #ffffff) !important;
+}
+.DataGridTable_module_cellCut {
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+}
+.DataGridTable_module_stickyHeader {
+  z-index: 8;
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+.DataGridTable_module_stickyHeader .fui-TableHeaderCell {
+  position: sticky;
+  top: 0;
+}
+.DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColLeft,
+.DataGridTable_module_stickyHeader .DataGridTable_module_pinnedColRight {
+  top: 0;
+  z-index: 10;
+}
+.DataGridTable_module_dataTable .DataGridTable_module_pinnedColLeft {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  border-right: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
+  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+.DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColLeft {
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+.DataGridTable_module_dataTable .DataGridTable_module_pinnedColRight {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  border-left: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
+  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+.DataGridTable_module_dataTable .fui-TableHeader .DataGridTable_module_pinnedColRight {
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+.DataGridTable_module_headerMenuTrigger {
+  color: var(--colorNeutralForeground3, #666);
+}
+.DataGridTable_module_headerMenuTrigger:hover {
+  background: var(--colorNeutralBackground1Hover, #f3f2f1);
+}
+.DataGridTable_module_headerMenuTrigger:active {
+  background: var(--colorNeutralBackground1Pressed, #e1dfdd);
+}
+.DataGridTable_module_headerMenuTrigger:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
+}
+.DataGridTable_module_resizeHandle:hover::after {
+  background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
+}
+.DataGridTable_module_resizeHandle:active::after {
+  background-color: var(--colorBrandForeground1Pressed, #005a9e);
+}
+.DataGridTable_module_statusBar {
+  min-width: 0;
+  color: var(--colorNeutralForeground2, #616161);
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  user-select: none;
+}
+.DataGridTable_module_statusBarItem:not(:last-child)::after {
+  display: inline-block;
+  background-color: var(--colorNeutralStroke1, #c4c4c4);
+}
+.DataGridTable_module_statusBarLabel {
+  color: var(--colorNeutralForeground3, #707070);
+  font-weight: 400;
+}
+.DataGridTable_module_statusBarValue {
+  color: var(--colorNeutralForeground1, #242424);
+}
+.DataGridTable_module_contextMenu {
+  background: var(--colorNeutralBackground1, #fff);
+  border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
+  outline: none;
+}
+.DataGridTable_module_contextMenuItem {
+  color: var(--colorNeutralForeground1, #242424);
+}
+.DataGridTable_module_contextMenuItem:hover:not(:disabled) {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+.DataGridTable_module_contextMenuItemShortcut {
+  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
+}
+.DataGridTable_module_contextMenuDivider {
+  background-color: var(--colorNeutralStroke2, #e0e0e0);
+}
+.DataGridTable_module_loadingOverlayContent {
+  background: var(--colorNeutralBackground1, #ffffff);
+  border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
+}
+.DataGridTable_module_loadingOverlayText {
+  color: var(--colorNeutralForeground2, #616161);
+}
+.DataGridTable_module_loadingDimmed {
+  transition: opacity 0.15s ease;
+}
+.DataGridTable_module_emptyStateInGrid {
+  min-width: 0;
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+.DataGridTable_module_emptyStateInGridMessageSticky {
+  position: sticky;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.DataGridTable_module_emptyStateInGridIcon {
+  font-size: 24px;
+  margin-bottom: 8px;
+  opacity: 0.6;
+}
+.DataGridTable_module_emptyStateInGridTitle {
+  color: var(--colorNeutralForeground1, #242424);
+}
+.DataGridTable_module_emptyStateInGridMessage {
+  color: var(--colorNeutralForeground2, #616161);
+  max-width: 100%;
+}
+.DataGridTable_module_emptyStateInGridLink {
+  color: var(--colorBrandForeground1, #0f6cbd);
+}
+.DataGridTable_module_emptyStateInGridLink:hover {
+  color: var(--colorBrandForeground1Hover, #115ea3);
+}
+.DataGridTable_module_dataTable .fui-Link {
+  color: var(--colorBrandForeground1, #0f6cbd);
+  font-weight: 600;
+  text-decoration: none;
+}
+.DataGridTable_module_dataTable .fui-Link:hover {
+  text-decoration: underline;
+  color: var(--colorBrandForeground1Hover, #115ea3);
+}
+.DataGridTable_module_dataTable .fui-Link:active {
+  color: var(--colorBrandForeground1Pressed, #0c3b5e);
+}
+.DataGridTable_module_density-compact .DataGridTable_module_dataTable .fui-TableHeaderCell {
+  padding: 4px 8px;
+}
+.DataGridTable_module_density-compact .DataGridTable_module_cellContent {
+  padding: 4px 8px;
+}
+.DataGridTable_module_density-comfortable .DataGridTable_module_dataTable .fui-TableHeaderCell {
+  padding: 12px 16px;
+}
+.DataGridTable_module_density-comfortable .DataGridTable_module_cellContent {
+  padding: 12px 16px;
+}
+.DataGridTable_module_tableWrapper .fui-Button:focus-visible,
+.tableWrapper .fui-MenuButton:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: 2px;
+}
+.DataGridTable_module_tableWrapper .fui-Checkbox:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: 2px;
+}
+
+/* src/ColumnChooser/ColumnChooser.module.scss */
+.ColumnChooser_module_container {
+  position: relative;
+  display: inline-flex;
+}
+.ColumnChooser_module_dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10000;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  background: var(--colorNeutralBackground1, #fff);
+  border: 1px solid var(--colorNeutralStroke2, #edebe9);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 0;
+}
+.ColumnChooser_module_header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
+  font-weight: 600;
+  font-size: 13px;
+}
+.ColumnChooser_module_optionsList {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0;
+}
+.ColumnChooser_module_optionItem {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+.ColumnChooser_module_optionItem:hover {
+  background: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+.ColumnChooser_module_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
+}
+
+/* src/PaginationControls/PaginationControls.module.scss */
+.PaginationControls_module_pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px 24px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0;
+}
+.PaginationControls_module_paginationInfo {
+  font-size: 13px;
+  color: var(--colorNeutralForeground2, #605e5c);
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+.PaginationControls_module_paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 0;
+}
+.PaginationControls_module_navBtn {
+  min-width: 28px;
+  min-height: 28px;
+}
+.PaginationControls_module_pageNumbers {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+.PaginationControls_module_pageBtn {
+  min-width: 28px;
+  min-height: 28px;
+  font-variant-numeric: tabular-nums;
+}
+.PaginationControls_module_ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  font-size: 12px;
+  color: var(--colorNeutralForeground3, #8a8886);
+  user-select: none;
+  pointer-events: none;
+  letter-spacing: 0.02em;
+}
+.PaginationControls_module_pageSizeSelector {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeLabel {
+  font-size: 13px;
+  color: var(--colorNeutralForeground2, #605e5c);
+  user-select: none;
+  white-space: nowrap;
+}
+.PaginationControls_module_pageSizeSelector .PaginationControls_module_pageSizeSelect {
+  min-width: 72px;
+}