@alaarab/ogrid-react-fluent 2.1.2 → 2.1.4

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -1,845 +0,0 @@
-@charset "UTF-8";
-.tableScrollContent {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  background: var(--ogrid-bg, #fff);
-}
-
-.tableWidthAnchor {
-  position: relative;
-  width: max-content;
-  min-width: var(--data-table-min-width, max-content);
-  background: var(--ogrid-bg, #fff);
-}
-
-.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;
-}
-.tableWrapper[data-overflow-x=true] {
-  overflow-x: auto;
-}
-.tableWrapper[data-empty=true] {
-  overflow-x: hidden;
-}
-.tableWrapper[data-loading=true] {
-  min-height: 200px;
-}
-
-.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));
-}
-.dataTable tbody tr {
-  height: var(--ogrid-row-height, auto);
-}
-
-.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);
-}
-
-.headerCellContent {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.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;
-}
-.headerMenuTrigger:hover {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-}
-.headerMenuTrigger:active {
-  background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
-}
-.headerMenuTrigger:focus-visible {
-  outline: 2px solid var(--ogrid-accent, #0078d4);
-  outline-offset: 2px;
-}
-
-.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;
-}
-
-.resizeHandle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  bottom: 0;
-  width: 8px;
-  cursor: col-resize;
-  user-select: none;
-  z-index: 1;
-}
-.resizeHandle::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 3px;
-  bottom: 0;
-  width: 2px;
-}
-.resizeHandle:hover::after {
-  background-color: var(--ogrid-accent, #0078d4);
-}
-.resizeHandle:active::after {
-  background-color: var(--ogrid-accent-dark, #005a9e);
-}
-
-.pinnedColLeft {
-  position: sticky;
-  z-index: 6;
-  background: var(--ogrid-bg, #ffffff);
-}
-.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;
-}
-
-.pinnedColRight {
-  position: sticky;
-  z-index: 6;
-  background: var(--ogrid-bg, #ffffff);
-}
-.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;
-}
-
-.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;
-}
-.cellContent:focus-visible {
-  outline: none;
-}
-
-.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));
-}
-
-.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;
-}
-
-.cellInRange {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
-}
-
-:global([data-drag-range]) {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
-}
-
-:global([data-drag-anchor]) {
-  background: var(--ogrid-bg, #fff) !important;
-}
-
-.cellCut {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
-  opacity: 0.7;
-}
-
-.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;
-}
-
-.selectionHeaderCellInner,
-.selectionCellInner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.rowNumberHeaderCellInner,
-.rowNumberCellInner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-variant-numeric: tabular-nums;
-}
-
-.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;
-}
-
-.statusBarItem {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.statusBarItem:not(:last-child)::after {
-  content: "";
-  width: 1px;
-  height: 14px;
-  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
-  margin-left: 12px;
-}
-
-.statusBarLabel {
-  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
-}
-
-.statusBarValue {
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-  font-weight: 600;
-}
-
-.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));
-}
-
-.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));
-}
-.contextMenuItem:hover:not(:disabled) {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-}
-.contextMenuItem:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.contextMenuItemLabel {
-  flex: 1;
-}
-
-.contextMenuItemShortcut {
-  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
-  font-size: 0.85em;
-}
-
-.contextMenuDivider {
-  height: 1px;
-  margin: 4px 0;
-  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
-}
-
-.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;
-}
-
-.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));
-}
-
-.loadingOverlayText {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
-}
-
-.loadingDimmed {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.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);
-}
-
-.emptyStateInGridTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-  margin-bottom: 4px;
-}
-
-.emptyStateInGridMessage {
-  font-size: 13px;
-  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
-  line-height: 1.5;
-}
-
-.emptyStateInGridLink {
-  background: none;
-  border: none;
-  color: var(--ogrid-accent, #0078d4);
-  text-decoration: underline;
-  cursor: pointer;
-  padding: 0;
-  font-size: inherit;
-  font-family: inherit;
-}
-.emptyStateInGridLink:hover {
-  color: var(--ogrid-accent-dark, #005a9e);
-}
-
-.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: ogrid-spin 0.8s linear infinite;
-}
-
-@keyframes ogrid-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-/* ─── OGrid Theme Variables ─── */
-/* Bridge Fluent UI tokens -> ogrid CSS variables so headless components (SideBar, etc.)
-   automatically follow the active FluentProvider theme (light or dark). */
-:global(: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);
-}
-
-/* Page-level dark mode (for body background, non-FluentProvider elements) */
-:global([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);
-}
-
-/* Inside FluentProvider: derive --ogrid-* from Fluent tokens so light/dark follows automatically */
-:global(.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);
-}
-
-.tableScrollContent {
-  min-height: 100%;
-  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
-}
-
-.tableWidthAnchor {
-  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
-}
-
-.tableWrapper {
-  border: none;
-  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
-  -webkit-overflow-scrolling: touch;
-  outline: none;
-}
-
-.dataTable {
-  table-layout: auto !important;
-  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
-}
-
-.dataTable :global(.fui-TableHeaderCell),
-.dataTable :global(.fui-TableCell) {
-  min-width: 80px;
-  box-sizing: border-box;
-  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
-  font-size: 13px;
-  vertical-align: middle;
-}
-
-.dataTable :global(.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));
-}
-.dataTable :global(.fui-TableHeaderCell) > :global(.fui-TableHeaderCell__button) {
-  position: static !important;
-}
-.dataTable :global(.fui-TableHeaderCell):focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
-  outline-offset: -2px;
-  z-index: 11;
-}
-
-.dataTable :global(.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));
-  /* Prevent long unbroken content from forcing intrinsic widths / overlap */
-}
-.dataTable :global(.fui-TableCell) > * {
-  min-width: 0;
-}
-.dataTable :global(.fui-TableCell):focus-visible {
-  outline: none;
-}
-
-/* No extra right border on last column */
-.dataTable :global(.fui-TableHeaderCell:last-of-type),
-.dataTable :global(.fui-TableCell:last-of-type) {
-  border-right: none;
-}
-
-/* No extra bottom border on last row */
-.dataTable :global(.fui-TableBody .fui-TableRow:last-child .fui-TableCell) {
-  border-bottom: none;
-}
-
-/* Row hover */
-.dataTable :global(.fui-TableBody .fui-TableRow:hover .fui-TableCell) {
-  background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
-}
-
-.leafHeaderCellSpan {
-  font-weight: 600;
-  padding: 6px 10px;
-  background: var(--ogrid-header-bg, #f3f2f1);
-}
-
-.selectionHeaderCellWrapper {
-  width: 48px;
-  min-width: 48px;
-  max-width: 48px;
-  padding: 4px !important;
-  text-align: center;
-}
-
-.selectionCellWrapper {
-  width: 48px;
-  min-width: 48px;
-  max-width: 48px;
-  padding: 4px !important;
-  text-align: center;
-}
-
-.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));
-}
-
-.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));
-}
-
-.dataTable :global(.fui-TableBody) .selectedRow :global(.fui-TableCell) {
-  background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
-}
-
-.selectableGrid .dataTable :global(.fui-TableBody .fui-TableRow:hover .fui-TableCell) {
-  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
-  cursor: pointer;
-}
-
-.selectableGrid .dataTable :global(.fui-TableBody) .selectedRow:hover :global(.fui-TableCell) {
-  background-color: var(--colorNeutralBackground1Hover, #dae8f8);
-}
-
-.selectableGrid .dataTable :global(.fui-TableBody .fui-TableRow) {
-  cursor: pointer;
-}
-
-.cellContent {
-  padding: 4px 8px;
-}
-
-.activeCellContent {
-  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
-  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
-}
-
-.cellInRange {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
-}
-
-:global([data-drag-range]) {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
-}
-
-:global([data-drag-anchor]) {
-  background-color: var(--ogrid-bg, #ffffff) !important;
-}
-
-.cellCut {
-  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
-}
-
-.stickyHeader {
-  z-index: 8;
-  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-}
-
-.stickyHeader :global(.fui-TableHeaderCell) {
-  position: sticky;
-  top: 0;
-}
-
-.stickyHeader .pinnedColLeft,
-.stickyHeader .pinnedColRight {
-  top: 0;
-  z-index: 10;
-}
-
-.dataTable .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);
-}
-
-.dataTable :global(.fui-TableHeader) .pinnedColLeft {
-  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-}
-
-.dataTable .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);
-}
-
-.dataTable :global(.fui-TableHeader) .pinnedColRight {
-  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-}
-
-.headerMenuTrigger {
-  color: var(--colorNeutralForeground3, #666);
-}
-.headerMenuTrigger:hover {
-  background: var(--colorNeutralBackground1Hover, #f3f2f1);
-}
-.headerMenuTrigger:active {
-  background: var(--colorNeutralBackground1Pressed, #e1dfdd);
-}
-.headerMenuTrigger:focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
-}
-
-/* Column resize handle -- Fluent token override */
-.resizeHandle:hover::after {
-  background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
-}
-.resizeHandle:active::after {
-  background-color: var(--colorBrandForeground1Pressed, #005a9e);
-}
-
-.statusBar {
-  min-width: 0;
-  color: var(--colorNeutralForeground2, #616161);
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
-  user-select: none;
-}
-
-.statusBarItem:not(:last-child)::after {
-  display: inline-block;
-  background-color: var(--colorNeutralStroke1, #c4c4c4);
-}
-
-.statusBarLabel {
-  color: var(--colorNeutralForeground3, #707070);
-  font-weight: 400;
-}
-
-.statusBarValue {
-  color: var(--colorNeutralForeground1, #242424);
-}
-
-.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;
-}
-
-.contextMenuItem {
-  color: var(--colorNeutralForeground1, #242424);
-}
-.contextMenuItem:hover:not(:disabled) {
-  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
-}
-
-.contextMenuItemShortcut {
-  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
-}
-
-.contextMenuDivider {
-  background-color: var(--colorNeutralStroke2, #e0e0e0);
-}
-
-.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));
-}
-
-.loadingOverlayText {
-  color: var(--colorNeutralForeground2, #616161);
-}
-
-.loadingDimmed {
-  transition: opacity 0.15s ease;
-}
-
-.emptyStateInGrid {
-  min-width: 0;
-  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
-  background-color: var(--colorNeutralBackground2, #fafafa);
-}
-
-.emptyStateInGridMessageSticky {
-  position: sticky;
-  left: 50%;
-  transform: translateX(-50%);
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.emptyStateInGridIcon {
-  font-size: 24px;
-  margin-bottom: 8px;
-  opacity: 0.6;
-}
-
-.emptyStateInGridTitle {
-  color: var(--colorNeutralForeground1, #242424);
-}
-
-.emptyStateInGridMessage {
-  color: var(--colorNeutralForeground2, #616161);
-  max-width: 100%;
-}
-
-.emptyStateInGridLink {
-  color: var(--colorBrandForeground1, #0f6cbd);
-}
-.emptyStateInGridLink:hover {
-  color: var(--colorBrandForeground1Hover, #115ea3);
-}
-
-/* Fluent Link styling within grid */
-.dataTable :global(.fui-Link) {
-  color: var(--colorBrandForeground1, #0f6cbd);
-  font-weight: 600;
-  text-decoration: none;
-}
-.dataTable :global(.fui-Link):hover {
-  text-decoration: underline;
-  color: var(--colorBrandForeground1Hover, #115ea3);
-}
-.dataTable :global(.fui-Link):active {
-  color: var(--colorBrandForeground1Pressed, #0c3b5e);
-}
-
-.density-compact .dataTable :global(.fui-TableHeaderCell) {
-  padding: 4px 8px;
-}
-.density-compact .cellContent {
-  padding: 4px 8px;
-}
-
-.density-comfortable .dataTable :global(.fui-TableHeaderCell) {
-  padding: 12px 16px;
-}
-.density-comfortable .cellContent {
-  padding: 12px 16px;
-}
-
-/* ─── Accessibility: Focus Visible Styles ─────────────────────── */
-.tableWrapper :global .fui-Button:focus-visible,
-.tableWrapper :global .fui-MenuButton:focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, #0078d4);
-  outline-offset: 2px;
-}
-.tableWrapper :global .fui-Checkbox:focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, #0078d4);
-  outline-offset: 2px;
-}