/* v4 new css start */
.agGrid__Table__SD .entity-table-empty {
  text-align:center;
}

.agGrid__Table__SD.autoHeightTable {
  height:auto !important;
}
.agGrid__Table__SD.autoHeightTable * {
  min-height:unset !important;
}

.dark .agGrid__Table__SD .ag-loading-icon,
.dark .agGrid__Table__SD .ag-loading-text {
  --tw-text-opacity:1 !important;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.agGrid__Table__SD .ag-pinned-right-cols-container,
.agGrid__Table__SD .ag-center-cols-container {
  margin-right:0 !important;
}
.agGrid__Table__SD .ag-root-wrapper {
  border-radius:4px;
  border-width:1px;
  border-color:var(--lightBorderSD);
  background-color:transparent;
}
.agGrid__Table__SD .ag-overlay-no-rows-wrapper .ag-overlay-no-rows-center {
  font-family:Matter-Medium;
  font-size:16px;
  color:var(--textDark);
}

.agGrid__Table__SD .ag-body-horizontal-scroll,
.agGrid__Table__SD .ag-body-horizontal-scroll .ag-horizontal-left-spacer,
.agGrid__Table__SD .ag-body-horizontal-scroll .ag-horizontal-right-spacer,
.agGrid__Table__SD .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport,
.agGrid__Table__SD .ag-body-horizontal-scroll .ag-body-horizontal-scroll-container {
  height:10px !important;
  max-height:10px !important;
  min-height:10px !important;
}

/* Ensure pinned columns maintain proper positioning during horizontal scroll */
.agGrid__Table__SD .ag-pinned-right-cols-container,
.agGrid__Table__SD .ag-pinned-left-cols-container {
  position:relative;
  z-index:2;
}

/* Fix for right pinned column scroll synchronization */
.agGrid__Table__SD .ag-pinned-right-cols-container {
  /* @apply border-l-[1px] border-l-lightBorderSD; */
  border-left-width:0px;
}

.agGrid__Table__SD .ag-theme-alpine .ag-overlay-no-rows-wrapper.ag-layout-auto-height,
.agGrid__Table__SD .ag-theme-alpine-dark .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
  padding-top:40px !important;
  font-family:Matter-Medium;
  font-size:16px;
  color:var(--textDark);
}

/* ag-header start */
.agGrid__Table__SD .ag-header {
  border-bottom-width:1px;
  border-bottom-color:var(--lightBorderSD);
  background-color:transparent;
}
.agGrid__Table__SD .ag-header,
.agGrid__Table__SD .ag-theme-alpine .ag-header-row,
.agGrid__Table__SD .ag-theme-alpine .ag-header-row .ag-header-cell {
  height:60px !important;
  min-height:60px !important;
}
.agGrid__Table__SD .ag-header .ag-header-cell-menu-button {
  display:none;
}
.agGrid__Table__SD .ag-header .ag-header-cell-label {
  font-weight:400;
}
.agGrid__Table__SD .ag-header .ag-header-cell-text {
  font-family:Matter-Medium;
  font-size:14px;
  color:var(--textDark);
}
.agGrid__Table__SD .ag-header .ag-pinned-right-header {
  border-left-width:1px;
  border-left-color:var(--lightBorderSD);
}
.agGrid__Table__SD .ag-header .ag-header-cell {
  border-right-width:1px;
  border-right-color:var(--lightBorderSD);
  padding-left:10px;
  padding-right:10px;
  padding-top:8px;
  padding-bottom:8px;
}
.agGrid__Table__SD .ag-header .ag-header-cell:last-child {
  border-right-width:0px;
}
.agGrid__Table__SD .ag-header .ag-cell-label-container {
  padding-top:0px;
  padding-bottom:0px;
}
.agGrid__Table__SD .ag-header .ag-header-cell-resize::after {
  content:var(--tw-content);
  display:none;
}
.agGrid__Table__SD .ag-header .ag-pinned-left-header {
  border-right-width:1px;
  border-right-color:var(--lightBorderSD);
}
.agGrid__Table__SD .ag-header .column_name {
  font-family:Matter-Medium;
  font-size:14px;
  font-weight:500;
  color:var(--textDark);
}
.agGrid__Table__SD .ag-icon-asc::before,
.agGrid__Table__SD .ag-icon-desc::before {
  color:var(--iconColorSD);
} 
/* ag-header end */

/* ag-row ag-cell start */
.agGrid__Table__SD .ag-cell .ag-cell-wrapper {
  max-width:100%;
}
.agGrid__Table__SD .ag-row .ag-cell {
  display:flex;
  align-items:center;
  border-width:0px;
  border-right-width:1px;
  border-right-color:var(--lightBorderSD);
  padding-left:10px;
  padding-right:10px;
  padding-top:3px;
  padding-bottom:3px;
  font-family:Matter-Regular;
  font-size:16px;
  color:var(--textDark);
}
.agGrid__Table__SD .ag-row .ag-cell:last-child {
  border-right-width:0px;
}
.agGrid__Table__SD .ag-row,
.agGrid__Table__SD .ag-row.ag-row-odd {
  border-bottom-width:1px;
  border-bottom-color:var(--lightBorderSD);
  background-color:transparent;
}
.agGrid__Table__SD .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
  border-left-width:1px;
  border-left-color:var(--lightBorderSD);
}
.agGrid__Table__SD .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
  border-right-width:1px;
  border-right-color:var(--lightBorderSD);
}

.agGrid__Table__SD .ag-row-hover:not(.ag-full-width-row)::before,
.agGrid__Table__SD .ag-row-hover.ag-full-width-row.ag-row-group::before {
  content:var(--tw-content);
  background-color:transparent;
}
.agGrid__Table__SD .ag-row .ag-cell.ag-cell-focus {
  border-width:0px;
  border-right-width:1px;
  border-right-color:var(--lightBorderSD);
}

.agGrid__Table__SD .ag-row-hover.ag-row-selected::before,
.agGrid__Table__SD .ag-row-selected::before {
  background-color:var(--bgSurface) !important;
  background-image:unset;
}

/* email listing */
.agGrid__Table__SD .ag-row.is_mail_read {
  background-color:var(--bgSurface);
}
.agGrid__Table__SD .ag-row.is_mail_read:is(.dark *) {
  background-color:var(--customDark100);
}
/* email listing end */
/* ag-row ag-cell end */

/* ag-cell drag-handle with value text */
.agGrid__Table__SD .ag-cell .ag-row-drag {
  color:var(--iconColorSD);
}
.agGrid__Table__SD .ag-cell .ag-drag-handle {
  margin-right:10px;
}
/* ag-cell drag-handle with value text end */

.ag-cell-wrapper.ag-cell-expandable {
  display:flex;
  width:100%;
  align-items:center;
}
.ag-cell-wrapper.ag-cell-expandable .ag-group-contracted .ag-icon.ag-icon-tree-closed,
.ag-cell-wrapper.ag-cell-expandable .ag-group-expanded {
  color:var(--iconColorSD);
}
.ag-cell-wrapper.ag-cell-expandable .ag-group-value {
  position:relative;
  top:-2px;
  font-family:Matter-Regular;
  font-size:16px;
  color:var(--textDark);
}
.ag-theme-alpine .ag-group-expanded .ag-icon:hover {
  color:var(--primaryColorSD);
}

/* agGridTable column HTML structure design start */
.ag-cell .checkBoxMainWrapper {
  position:relative;
  top:2px;
}

.agGrid__Table__SD .onlyTextWrapper .onlyText .richTextEditorText p > br{ 
  display: none 
}
.agGrid__Table__SD .onlyTextWrapper .onlyText .richTextEditorText p {
  white-space: nowrap
}
/* comman css start */

/* ag-checkbox start */
.agGrid__Table__SD .ag-checkbox-input-wrapper {
  cursor:pointer;
  background-color:transparent;
}
.agGrid__Table__SD .ag-checkbox-input-wrapper:focus-within,
.agGrid__Table__SD .ag-checkbox-input-wrapper:active {
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.agGrid__Table__SD .ag-checkbox-input-wrapper::after {
  left:0.5px;
  color:var(--iconColorSD);
}
.agGrid__Table__SD .ag-checkbox-input-wrapper.ag-indeterminate::after,
.agGrid__Table__SD .ag-checkbox-input-wrapper.ag-checked::after {
  color:var(--primaryColor2SD);
}
.agGrid__Table__SD .ag-checkbox-input-wrapper.ag-indeterminate,
.agGrid__Table__SD .ag-checkbox-input-wrapper.ag-checked {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
/* ag-checkbox end */

.agGrid__Table__SD .agGridColViewEditBtns .viewBtn {
  pointer-events:none;
  margin-left:4px;
  flex-shrink:0;
  opacity:0;
}
.agGrid__Table__SD .agGridColViewEditBtns .viewBtn .i__Icon {
  height:24px;
  width:24px;
  border-radius:4px;
  padding:2px;
}
.agGrid__Table__SD .agGridColViewEditBtns .viewBtn .i__Icon:hover {
  background-color:var(--bgSurface);
}
.agGrid__Table__SD .agGridColViewEditBtns .viewBtn.editBtn .i__Icon {
  padding:4px;
}
.agGrid__Table__SD .ag-row-selected .agGridColViewEditBtns .viewBtn .i__Icon:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.agGrid__Table__SD .group:hover .viewBtn,
.agGrid__Table__SD .agGridColViewEditBtns:hover .viewBtn {
  pointer-events:auto;
  opacity:1;
}

.agGrid__Table__SD .agCellInner__wrap {
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
}
.agGrid__Table__SD .moreBtnWrapperCON {
  max-width:100%;
}
.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__visible {
  display:flex;
  width:100%;
  flex-wrap:wrap;
  align-items:center;
}
.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__NotVisible {
  width:100%;
}

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .ag-cell-wrapper {
  display:flex;
  align-items:center;
}
/* text wrap end */

/* right alignment start */
.agGrid__Table__SD .ag-right-aligned-cell {
  text-align:right;
}
.agGrid__Table__SD .ag-right-aligned-cell .agCellInner__wrap {
  justify-content:flex-end;
}
/* right alignment end */

.agGrid__Table__SD .viewBtn .i__Icon {
  height:24px;
  width:24px;
  border-radius:4px;
  padding:2px;
}

.agGrid__Table__SD .viewBtn .i__Icon:hover {
  background-color:var(--bgSurface);
}
/* comman css end */

/* first column */
.agGrid__Table__SD .checkBoxCol .ag-checkbox-input {
  cursor:pointer !important;
  background-color:transparent !important;
}
.agGrid__Table__SD .checkBoxCol .ag-header-cell-comp-wrapper {
  display:none !important;
}
.agGrid__Table__SD .ag-checkbox.ag-header-select-all {
  margin-right:0px !important;
  width:100%;
  justify-content:center;
}
.agGrid__Table__SD .rowCounter__number {
  position:relative;
  top:-2px;
  width:100%;
  text-align:center;
  font-family:Matter-Regular;
  font-size:14px;
  color:var(--textDark);
}
.agGrid__Table__SD .ag-selection-checkbox {
  margin-right:0px !important;
  display:none !important;
  height:auto !important;
}
.agGrid__Table__SD .checkBoxCol {
  display:flex;
  align-items:center;
  justify-content:center;
}
.agGrid__Table__SD .ag-row-selected .ag-cell-wrapper,
.agGrid__Table__SD .checkBoxCol:hover .ag-cell-wrapper {
  justify-content:center;
}
.agGrid__Table__SD .ag-row-selected .ag-selection-checkbox:not(.ag-invisible),
.agGrid__Table__SD .checkBoxCol:hover .ag-selection-checkbox:not(.ag-invisible) {
  display:inline-flex !important;
}
.agGrid__Table__SD .ag-row-selected .ag-selection-checkbox:not(.ag-invisible) + .ag-cell-value,
.agGrid__Table__SD .checkBoxCol:hover .ag-selection-checkbox:not(.ag-invisible) + .ag-cell-value {
  display:none !important;
}
/* first column end */

/* avatar, name and view button start */
.agGrid__Table__SD .avatarNameView {
  width:100%;
}
.agGrid__Table__SD .avatarNameView .avatarNameViewInner {
  display:flex;
  width:100%;
  align-items:center;
}
.agGrid__Table__SD .avatarNameView .avatarNameViewInner .avatar__Img {
  position:relative;
  top:2px;
  margin-right:7px;
  height:20px;
  width:20px;
  flex-shrink:0;
}
.agGrid__Table__SD .avatarNameView .avatarNameViewInner .avatar__Img .inner__wrapper {
  border-radius:9999px;
}
.agGrid__Table__SD .avatarNameView .avatarNameViewInner .avatar__Img .noName__letter .noName__letter__text {
  white-space:pre;
  padding-top:0px;
  font-family:Matter-Medium;
  font-size:9px;
  line-height:10px;
}
.agGrid__Table__SD .avatarNameView .nameText,
.agGrid__Table__SD .avatarNameView .nameText .innerTextSpan {
  display:inline-block;
}
.agGrid__Table__SD .avatarNameView .nameText {
  position:relative;
  max-width:100%;
}
.agGrid__Table__SD .avatarNameView .nameText .innerTextSpan {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  line-height:20px;
}

.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__NotVisible .avatarNameView {
  width:100%;
}
/* avatarNameView */
.avatarNameView {
  position:relative;
  top:-2px;
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
}
.avatarNameView .avatarNameViewInner {
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
}
.avatarNameView .avatar__Img {
  margin-right:8px;
  display:block;
  height:32px;
  width:32px;
  flex-shrink:0;
}
.avatarNameView .avatar__Img .inner__wrapper {
  border-radius:9999px;
}
.avatarNameView .avatar__Img .noName__letter__text {
  white-space:pre;
  text-indent:0px;
  font-size:10px !important;
  color:var(--infoColorSD);
}
.avatarNameView .nameText {
  display:inline-flex;
  max-width:100%;
  align-items:center;
  font-family:Matter-Regular;
  font-size:14px;
  line-height:14px;
  color:var(--textDark);
}
.avatarNameView .nameText:hover {
  color:var(--primaryColorSD);
  text-decoration-line:underline !important;
}
.avatarNameView .innerTextSpan {
  position:relative;
  top:2px;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  line-height:20px;
}
.ag-cell-wrap-text .avatarNameView .innerTextSpan {
  white-space:normal;
}
.avatarNameView .ellipsisText,
.avatarNameView .ellipsisText .innerTextSpan {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
}
.avatarNameView .viewBtn {
  position:relative;
  top:0px;
}
.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__NotVisible .avatarNameView .nameText{
  /* @apply max-w-[calc(100%_-_32px)] w-[calc(100%_-_32px)]; */
  max-width:calc(100% - 32px);
}

.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__visible .avatarNameView {
  height:20px;
  width:auto;
  max-width:100%;
  padding-right:5px;
}
.agGrid__Table__SD .moreBtnWrapperCON.moreBtn__visible .moreBtn {
  position:relative;
  top:1px;
  line-height:16px;
}

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .avatarNameView .nameText .innerTextSpan {
  white-space:normal;
}
/* text wrap end */
/* avatar, name and view button end */

/* onlyTextWithAction */
.onlyTextWithAction {
  display:flex;
  align-items:center;
}
.onlyTextWithAction .nameText {
  position:relative;
  top:-3px;
}
.onlyTextWithAction .agGridColViewEditBtns {
  position:relative;
  top:0px;
}

.ag-cell-wrap-text .onlyTextWithAction .nameText {
  text-wrap:wrap;
}
/* onlyTextWithAction end */

/* onlyTextWrapper */
.agGrid__Table__SD .onlyTextWrapper {
  position:relative;
  top:-1px;
  display:inline-flex;
  max-width:100%;
  align-items:center;
}
.agGrid__Table__SD .onlyTextWrapper .onlyText{
  /* @apply max-w-full inline-block whitespace-pre overflow-hidden text-ellipsis leading-[19px] relative top-[-2px]; */
  position:relative;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  line-height:19px;
}

.agGrid__Table__SD .onlyTextWrapper.moreBtnVisible {
  display:flex;
  width:100%;
  align-items:center;
}
.agGrid__Table__SD .ag-right-aligned-cell .onlyTextWrapper.moreBtnVisible {
  justify-content:flex-end;
}
.agGrid__Table__SD .onlyTextWrapper.moreBtnVisible .onlyText {
  position:relative;
  top:-2px;
  max-width:calc(100% - 80px);
  padding-right:5px;
}

.agGrid__Table__SD .onlyTextWrapper.textRightAlign {
  width:100%;
  text-align:right;
}

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .onlyTextWrapper .onlyText {
  white-space:normal;
}
/* text wrap end */
/* onlyTextWrapper end */

/* progressBarText__wrapper start */
.agGrid__Table__SD .progressBarText__wrapper {
  display:flex;
  max-width:100%;
  align-items:center;
}
.agGrid__Table__SD .progressBarText__wrapper .progressBarSD {
  position:relative;
  top:1px;
}
.agGrid__Table__SD .progressBarText__wrapper .progressBarText {
  max-width:calc(100% - 60px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  line-height:19px;
}

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .progressBarText__wrapper .progressBarText {
  white-space:normal;
}
/* text wrap end */
/* progressBarText__wrapper end */

/* email field agGridEmailCol start */
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper,
.agGrid__Table__SD .agGridEmailCol,
.agGrid__Table__SD .agGridEmailCol .agGridEmailCol__inner {
  width:100%;
}
.agGrid__Table__SD .agGridEmailCol__inner {
  display:flex;
  align-items:center;
}
.agGrid__Table__SD .agGridEmailCol .dataText {
  position:relative;
  top:-2px;
  display:inline-block;
  max-width:calc(100% - 51px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  padding-right:8px;
  line-height:19px;
}
.agGrid__Table__SD .agGridEmailCol .actionBtnWrapper {
  display:inline-flex;
}
.agGrid__Table__SD .agGridEmailCol .actionBtnWrapper .i__Icon {
  height:24px;
  width:24px;
  border-radius:4px;
  padding:3px;
  transition-duration:300ms;
}
.agGrid__Table__SD .agGridEmailCol .actionBtnWrapper .i__Icon:hover {
  background-color:var(--bgSurface);
}
.agGrid__Table__SD .ag-row-selected .agGridEmailCol .actionBtnWrapper .i__Icon:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.agGrid__Table__SD .agGridEmailCol .actionBtnWrapper > * {
  margin-left:3px;
}
.agGrid__Table__SD .agGridEmailCol .actionBtnWrapper > *:first-child {
  margin-left:0px;
}

.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol,
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol .agGridEmailCol__inner {
  display:inline-block;
  width:auto;
}
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol {
  max-width:100%;
}
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol .agGridEmailCol__inner {
  display:inline-flex;
  max-width:100%;
}
.agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol .dataText {
  position:relative;
  top:-1px;
}
/* .agGrid__Table__SD .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .moreBtn{
  @apply relative top-[2px]; 
} */

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .agGridEmailCol .dataText {
  white-space:normal;
}
.agGrid__Table__SD .ag-cell-wrap-text .agGridEmailCol__outerMoreBtn__wrapper.moreBtnVisible .agGridEmailCol .dataText {
  max-width:100%;
}
/* text wrap end */
/* email field agGridEmailCol end */

/* email field agGridPhoneCol start */
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper,
.agGrid__Table__SD .agGridPhoneCol,
.agGrid__Table__SD .agGridPhoneCol .agGridPhoneCol__inner {
  width:100%;
}
.agGrid__Table__SD .agGridPhoneCol__inner {
  display:flex;
  align-items:center;
}
.agGrid__Table__SD .agGridPhoneCol .dataText {
  position:relative;
  top:-2px;
  display:inline-block;
  max-width:calc(100% - 51px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre;
  padding-right:8px;
  line-height:19px;
}
.agGrid__Table__SD .agGridPhoneCol .actionBtnWrapper {
  display:inline-flex;
  height:24px;
}
.agGrid__Table__SD .agGridPhoneCol .actionBtnWrapper .i__Icon {
  height:24px;
  width:24px;
  border-radius:4px;
  padding:3px;
  transition-duration:300ms;
}
.agGrid__Table__SD .agGridPhoneCol .actionBtnWrapper .i__Icon:hover {
  background-color:var(--bgSurface);
}
.agGrid__Table__SD .ag-row-selected .agGridPhoneCol .actionBtnWrapper .i__Icon:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.agGrid__Table__SD .agGridPhoneCol .actionBtnWrapper > * {
  margin-left:3px;
}
.agGrid__Table__SD .agGridPhoneCol .actionBtnWrapper > *:first-child {
  margin-left:0px;
}

.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol,
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol .agGridPhoneCol__inner {
  display:inline-block;
  width:auto;
}
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol {
  max-width:100%;
}
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol .agGridPhoneCol__inner {
  display:inline-flex;
  max-width:100%;
}
.agGrid__Table__SD .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol .dataText {
  position:relative;
  top:-1px;
}

/* text wrap start */
.agGrid__Table__SD .ag-cell-wrap-text .agGridPhoneCol .dataText {
  white-space:normal;
}
.agGrid__Table__SD .ag-cell-wrap-text .agGridPhoneCol__outerMoreBtn__wrapper.moreBtnVisible .agGridPhoneCol .dataText {
  max-width:100%;
}
/* text wrap end */
/* phone field agGridPhoneCol end */

/* groupRepeaterData__wrapper start */
.agGrid__Table__SD .groupRepeaterData__wrapper.moreBtnVisible {
  display:flex;
  width:100%;
  align-items:center;
}
.agGrid__Table__SD .groupRepeaterData__wrapper.moreBtnVisible .onlyText {
  position:relative;
  top:-3px;
  max-width:calc(100% - 75px);
}
/* groupRepeaterData__wrapper end */

/* tagCol start */
.agGrid__Table__SD .ag-row-selected .tagCol .tagEditBtnIcon:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
/* tagCol end */
/* agGridTable column HTML structure design end */


/* ag-theme-alpine normal */
.agGrid__Table__SD .ag-theme-alpine.normal .ag-header,
.agGrid__Table__SD .ag-theme-alpine.normal .ag-header-row,
.agGrid__Table__SD .ag-theme-alpine.normal .ag-header-row .ag-header-cell {
  height:40px !important;
  min-height:40px !important;
}
/* ag-theme-alpine normal end */

/* ag-theme-alpine compact */
.agGrid__Table__SD .ag-theme-alpine.compact .ag-header,
.agGrid__Table__SD .ag-theme-alpine.compact .ag-header-row,
.agGrid__Table__SD .ag-theme-alpine.compact .ag-header-row .ag-header-cell {
  height:40px !important;
  min-height:40px !important;
}
/* ag-theme-alpine compact end */

/* ag-theme-alpine compact */
.agGrid__Table__SD .ag-theme-alpine.large .ag-header,
.agGrid__Table__SD .ag-theme-alpine.large .ag-header-row,
.agGrid__Table__SD .ag-theme-alpine.large .ag-header-row .ag-header-cell {
  height:70px !important;
  min-height:70px !important;
}
/* ag-theme-alpine compact end */

/* v4 new css end */

.agGrid__Table__SD .ag-row .ag-cell.checkBoxCol:first-child .ag-selection-checkbox ~ .ag-cell-value .onlyTextWrapper {
  justify-content:center;
  padding-right:0px;
}

/* large-css-end */
/* === Root container === */
.dataTable {
  /* Match AG's root wrapper: border + rounded corners.
     Use overflow: clip (not hidden) so the child scroll container's scrollbars
     are not clipped while still respecting border-radius visual clipping.
     overflow: clip does NOT create a scroll container — it only clips visually.
     min-h-0: allows flex-shrink to work when inside a flex parent. Without it,
     min-height: auto (= min-content) prevents shrinking below content height. */
  position: relative;
  height: 100%;
  min-height: 0px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: transparent;
  overflow: clip;
}

/* === Header === */
.dataTable .table__header {
  /* Match AG header container: flat, no shadow, no rounding. */
  position: relative;
  z-index: 30;
  border-bottom-width: 0px;
  background-color: var(--bgWhiteSD);
}

.dataTable .table__header--sticky {
  position: sticky;
  top: 0px;
  z-index: 30;
  background-color: var(--bgWhiteSD);
}

.dataTable .table__headerRow,
.dataTable .table__row {
  display: flex;
  width: 100%;
}
.dataTable .table__row {
  height: 40px;
}
.dataTable.colWrap .table__row {
  height: auto;
}

.dataTable .table__headerCell {
  /* bg-bgWhiteSD: gives each cell its own background instead of relying on parent
     .table__header inheritance. Without this, position:fixed during drag makes the
     cell transparent because it visually leaves the parent's paint area. */
  position: relative;
  display: flex;
  align-items: center;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-color: var(--lightBorderSD);
  border-bottom-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: var(--textDark);
}

.dataTable .table__headerCell:last-child {
  border-right-width: 0px;
}

.dataTable .table__headerCell {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

/* === Body + rows === */
.dataTable .table__body {
  position: relative;
  z-index: 2;
  overflow: auto;
  /* Firefox: scroll anchoring fights the virtualizer when rows mount/unmount
     near the bottom, leaving the scroll container blank-white past the last
     visible row. Disabling overflow-anchor restores correct rendering on
     scroll-to-bottom. Chrome already behaves correctly. */
  overflow-anchor: none;
}

.dataTable .table__content--withFooter {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.dataTable .table__footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top-width: 1px;
  border-top-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
}

.dataTable .table__footer--sticky {
  position: sticky;
  bottom: 0px;
  z-index: 20;
}

.dataTable .table__footerScrollSpacer {
  height: var(--table-footer-scroll-spacer-height, 40px);
  flex: 0 0 var(--table-footer-scroll-spacer-height, 40px);
}

.dataTable .table__footerRow {
  display: flex;
  min-height: 40px;
  width: 100%;
}

.dataTable .table__footerCell {
  position: relative;
  display: flex;
  align-items: center;
  border-right-width: 1px;
  border-right-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-family: Matter-Medium;
  font-size: 13px;
  color: var(--textDark);
}

.dataTable .table__footerCell:last-child {
  border-right-width: 0px;
}

.dataTable .table__footerCell {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

.dataTable .table__row {
  background-color: var(--bgWhiteSD);
}

.dataTable .table__row--stickyGroup {
  border-bottom-width: 1px;
  border-bottom-color: var(--lightBorderSD);
  background-color: var(--bgWhiteSD);
  z-index: 4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* The wrapper bounds the sticky item to its following detail block. */
.dataTable .table__expandedRow > .table__row:first-child {
  position: sticky !important;
  top: 40px;
  z-index: 4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dataTable.large .table__expandedRow > .table__row:first-child {
  top: 70px;
}

.dataTable .table__row:hover,
.dataTable .table__row--selected {
  background-color: var(--bgSurface);
}

/* === Cells === */
.dataTable .table__cell {
  /* overflow-hidden matches AG Grid's ag-cell behavior — prevents hover icons
     (agGridColViewEditBtns hidden->flex toggle) from causing layout thrashing. */
  display: flex;
  min-height: 40px;
  align-items: center;
  overflow: hidden;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-color: var(--lightBorderSD);
  border-bottom-color: var(--lightBorderSD);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-family: Matter-Regular;
  font-size: 16px;
  color: var(--textDark);
}
.dataTable .table__cell:last-child {
  border-right-width: 0px;
}
.dataTable .table__cell {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

/* Non-wrap cells: fixed height cap prevents content from expanding rows unevenly.
   Wrap-mode cells (.table__cell--wrap) are excluded so they can grow freely. */
.dataTable .table__cell:not(.table__cell--wrap) {
  max-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dataTable .table__cell--align-right,
.dataTable .table__headerCell--align-right {
  justify-content: flex-end;
  text-align: right;
}

.dataTable .table__cell.table__cell--align-right * {
  justify-content: flex-end;
  text-align: right;
}

.dataTable .table__cell--align-center,
.dataTable .table__headerCell--align-center {
  justify-content: center;
  text-align: center;
}

/* Full-width custom header chrome (entity lists) follows the column's right
   alignment so the label and sort control sit over right-aligned numbers. */
.dataTable .table__headerCell--align-right .tableColumnHeader__main {
  justify-content: flex-end;
}

.dataTable .productImageCell {
  display: inline-flex;
  min-width: 0px;
  align-items: center;
  gap: 6px;
}

.dataTable .productImageCell__thumb {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--lightBorderSD);
  background-color: var(--bgSurface);
}

.dataTable .productImageCell__count {
  font-family: Matter-Medium;
  font-size: 12px;
  color: var(--textSecondary);
}

.dataTable .productImageCell__fallback {
  display: block;
  min-width: 0px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--textDark);
}

.dataTable .productImageCell__fallback--empty {
  color: var(--textTertiary);
}

.dataTable.large .table__cell:not(.table__cell--wrap) {
  max-height: 70px;
}

/* === Filler — absorbs remaining space so table fills container (AG Grid parity) ===
   When total column width < container width, the filler stretches to fill the gap.
   When columns fill or overflow the container, filler collapses to 0px (invisible).
   The filler steals :last-child from real data cells, so those keep their right border. */
.dataTable .table__filler {
  flex: 1 0 0px;
  min-width: 0;
  padding: 0;
  border-bottom: 1px solid var(--primary-black-sd-100, #e5e7eb);
  box-sizing: border-box;
  pointer-events: none;
}

/* === Column pinning === */
.dataTable .table__cell--pinned,
.dataTable .table__headerCell--pinned {
  /* Keep pinned columns opaque to prevent underlying columns bleeding through.
     Position sticky is set via inline styles (getPinningStyles) using TanStack's
     column.getStart('left') and column.getAfter('right') APIs. */
  z-index: 2;
  background-color: var(--bgWhiteSD);
}

.dataTable .table__headerCell--pinned,
.dataTable .table__cell--pinned {
  background-color: var(--bgWhiteSD) !important;
}

/* Shadow indicator on the right edge of the last left-pinned column */
.dataTable .table__headerCell--pinned-left-last::after,
.dataTable .table__cell--pinned-left-last::after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}

/* Shadow indicator on the left edge of the first right-pinned column */
.dataTable .table__headerCell--pinned-right-first::before,
.dataTable .table__cell--pinned-right-first::before {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
}

/* === Cell wrapping (dynamic row height) === */
.dataTable .table__cell--wrap .innerTextSpan,
.dataTable .table__cell--wrap .onlyText,
.dataTable .table__cell--wrap {
  white-space: normal;
}

.dataTable .table__cell--wrap {
  /* Wrapped rows should breathe a bit more and align content to the top (AG auto-height feel). */
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* === Row-level wrap propagation ===
   When ANY cell in a row is in wrap mode, every sibling cell in the same row
   must (a) drop its max-height cap so it can stretch to the row's new height,
   and (b) align its content to the top instead of vertical-center, so the
   row reads as a single coherent block instead of leaving white space below
   short cells. Uses :has() (supported in all evergreen browsers since 2023). */
.dataTable .table__row:has(.table__cell--wrap) .table__cell {
  max-height: none;
  align-items: center;
}

/* Global wrap override — forces ALL inner elements to wrap when the cell is in
   wrap mode. Individual cell renderers apply truncation classes (whitespace-pre,
   whitespace-nowrap, truncate, text-ellipsis) which otherwise override the parent
   cell's whitespace-normal. This blanket rule ensures wrap mode always wins.
   !important is required to beat Tailwind utility specificity and inline styles. */
.dataTable .table__cell--wrap * {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
}

/* Override AG Grid table CSS (agGridTable.css) that is inherited via agGrid__Table__SD class. */
.dataTable .table__cell--wrap .onlyTextWrapper {
  width: 100%;
  top: 0;
  align-items: flex-start;
}

.dataTable .table__cell--wrap .onlyTextWrapper .onlyText {
  /* In wrap mode, we do not want single-line ellipsis behavior. */
  overflow: visible;
  text-overflow: clip;
  top: 0;
}

/* === Override agGrid__Table__SD rules that bleed into TanStack cells === */
/* agGridTable.css sets onlyTextWrapper to inline-flex + top-[-1px].
   In TanStack cells (display:flex + align-items:center), the top offset
   is redundant and causes 1px misalignment. Force to fill the flex cell. */
.dataTable .onlyTextWrapper {
  position: relative;
  top: -1px;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
}

/* agGridTable.css sets whitespace-pre on onlyText, which prevents wrapping
   AND can push content beyond the column's pixel width.
   Override to nowrap (truncation works via parent overflow:hidden). */
.dataTable .onlyText {
  white-space: nowrap;
  max-width: 100%;
}

/* Last-note previews stay vertically centered when short, but a tall rich-text
   value fills the non-wrapped cell and clips from the bottom instead of the
   middle. Wrapped cells intentionally keep their existing auto-height flow. */
.dataTable .table__cell:not(.table__cell--wrap) .lastNoteCell .onlyTextWrapper {
  max-height: 100%;
  overflow: hidden;
  align-items: flex-start;
}

.dataTable .progressBarText {
  white-space: nowrap;
}

/* === Group row styling (AG Grid parity) === */

/* Group header row — visually distinct from data rows.
   Uses !important to override the generic .table__row bg-bgWhiteSD and
   .table__row:hover bg-bgSurface rules which otherwise win due to
   class composition (.table__row--group elements also carry .table__row). */
.dataTable .table__row.table__row--group {
  background-color: var(--bgSurface) !important;
  border-bottom-width: 1px;
  border-bottom-color: var(--lightBorderSD);
}

.dataTable .table__row.table__row--group:hover {
  background-color: var(--bgSurface) !important;
}

.dataTable .table__row.table__row--group .table__cell--pinned {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid var(--lightBorderSD, #e3e3e3) !important;
  border-right: 1px solid var(--lightBorderSD, #e3e3e3) !important;
}

.dataTable .table__row.table__row--group:hover .table__cell--pinned {
  background-color: #ebedf0 !important;
  border-bottom: 1px solid var(--lightBorderSD, #e3e3e3) !important;
  border-right: 1px solid var(--lightBorderSD, #e3e3e3) !important;
}

/* Pinned group label (pinGroupLabelHorizontally): sticks to the left of the
   .table__body scroll container. The negative margins cancel the cell's 15px
   horizontal padding on both sides so the sticky box can travel the whole
   scroll range and keep a constant inset; width is the visible scroll width
   published as --table-viewport-width. Transparent: row colours still apply. */
.dataTable .table__groupLabel--sticky {
  position: sticky;
  left: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  width: var(--table-viewport-width, 100%);
  max-width: calc(100% + 30px);
}

/* Dark mode overrides — specificity (0,4,0) beats the light rules above at (0,3,0).
   Both sides carry !important, so specificity breaks the tie. `darkMode: 'class'`
   in libs/common/tailwind.config.js:14 means dark activates via a `.dark` class on
   an ancestor. Going darker than the data row bg (#2B2B2B) instead of lighter
   preserves the existing ~3:1 contrast between #898989 count text (--textTertiary
   is NOT overridden in the .dark block) and the group row background. */
.dark .dataTable .table__row.table__row--group {
  background-color: #3A3A3A !important;
}

.dark .dataTable .table__row.table__row--group:hover {
  background-color: #454545 !important;
}

.dataTable .table__row.table__row--group .table__cell--pinned {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid var(--lightBorderSD, #e3e3e3) !important;
  border-right: 1px solid var(--lightBorderSD, #e3e3e3) !important;
}

.dataTable .table__row.table__row--group:hover .table__cell--pinned {
  background-color: #ebedf0 !important;
  border-bottom: 1px solid var(--lightBorderSD, #e3e3e3) !important;
  border-right: 1px solid var(--lightBorderSD, #e3e3e3) !important;
}

/* Pinned-column cells carry `@apply !bg-bgWhiteSD` (line ~110), which resolves to
   #2B2B2B in dark mode and would paint a horizontal stripe across group rows.
   Override the pinned cell background inside group rows to match the row color. */
.dark .dataTable .table__row.table__row--group .table__cell--pinned {
  background-color: #3A3A3A !important;
  border-bottom-color: var(--lightBorderSD, #484848) !important;
  border-right-color: var(--lightBorderSD, #484848) !important;
}

.dark .dataTable .table__row.table__row--group:hover .table__cell--pinned {
  background-color: #454545 !important;
  border-bottom-color: var(--lightBorderSD, #484848) !important;
  border-right-color: var(--lightBorderSD, #484848) !important;
}

.dataTable .table__row--group .table__cell {
  border-bottom-width: 0px;
}

/* Parent-tree child rows — depth-aware indent via CSS variable set on each row */
.dataTable .table__row--groupChild .table__cell:not(.checkBoxCol):first-of-type,
.dataTable .table__row--groupChild .table__cell:not(.checkBoxCol):nth-child(2) {
  padding-left: calc(16px + (var(--row-depth, 1) * 16px));
}

/* Group-by column — record name for child rows */
.dataTable .groupByCol__recordName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--textDark);
  padding-left: 22px; /* align with group label (past chevron space) */
}

/* Hide borders on empty cells in group rows (non-first columns render groupCell--empty) */
.dataTable .table__row--group .table__cell:has(.groupCell--empty) {
  border-right: 0;
  padding: 0;
}

/* Fallback: hide the empty marker span itself */
.dataTable .groupCell--empty {
  display: none;
}

.dataTable .groupSummaryCell {
  display: flex;
  min-width: 0px;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 3px;
  overflow: hidden;
  white-space: normal;
  font-family: Matter-Medium;
  font-size: 13px;
  color: var(--textDark);
  line-height: 1.4;
}

.dataTable .groupSummaryCell__item {
  display: inline-flex;
  min-width: 0px;
  max-width: 100%;
  align-items: center;
  gap: 4px;
}

.dataTable .groupSummaryCell__label {
  flex-shrink: 0;
  color: var(--textTertiary);
}

.dataTable .groupSummaryCell__value {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataTable .groupSummaryCell__primary {
  display: block;
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataTable .headerSummaryCell {
  display: inline-flex;
  min-width: 0px;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}
.dataTable .table__headerCell--align-right .headerSummaryCell {
  justify-content: flex-end;
}

.dataTable .headerSummaryCell__label {
  flex-shrink: 0;
}

.dataTable .headerSummaryCell__summaries {
  display: inline-flex;
  min-width: 0px;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.dataTable .headerSummaryCell__summary {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
}

.dataTable .headerSummaryCell__summary--last {
  min-width: 0px;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataTable .headerSummaryCell__more {
  flex-shrink: 0;
  border-radius: 4px;
  background-color: var(--bgSurface);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-family: Matter-Medium;
  font-size: 11px;
  color: var(--textTertiary);
  line-height: 1.3;
}

.groupSummaryTooltip {
  min-width: 180px;
  max-width: 380px;
  font-family: Matter-Regular;
  font-size: 12px;
}

.groupSummaryTooltip__title {
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Matter-Medium;
  color: var(--bgWhiteSD);
}

.groupSummaryTooltip__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.groupSummaryTooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.groupSummaryTooltip__label {
  color: var(--bgWhiteSD);
  opacity: 0.8;
}

.groupSummaryTooltip__value {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Matter-Medium;
  color: var(--bgWhiteSD);
}

/* Group trigger button */
.dataTable .groupRow__trigger {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  text-align: left;
  font-family: Matter-Medium;
  font-size: 14px;
  color: var(--textDark);
  line-height: 1.4;
}

/* Chevron icon — rotates on expand */
.dataTable .groupRow__chevron {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--textTertiary);
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.dataTable .groupRow__chevron--expanded {
  transform: rotate(90deg);
}

.dataTable .groupRow__chevron:hover {
  color: var(--textDark);
}

/* Group label text */
.dataTable .groupRow__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Matter-Medium;
  color: var(--textDark);
}

/* Count — inline parenthetical text matching AG Grid format "(05)" */
.dataTable .groupRow__count {
  flex-shrink: 0;
  font-family: Matter-Medium;
  font-size: 12px;
  color: var(--textTertiary);
}

/* === Loading / empty / group rows === */
.dataTable .table__loadMore {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--textSecondary);
}

.dataTable .column_name {
  /* Align header typography with AG — Matter Medium, dark. */
  margin-right: 8px;
  padding-top: 3px;
  font-family: Matter-Medium;
  font-size: 14px;
  font-weight: 500;
  color: var(--textDark);
}

.dataTable .table__empty {
  /* Sit BELOW the sticky column header so the empty message never overlaps the
     headers on short/empty tables. `top` matches HEADER_HEIGHT_BY_GRID_SIZE
     (DataTable.tsx): 40px for normal/compact, 70px for large. */
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-family: Matter;
  font-size: 16px;
  font-weight: 500;
  color: var(--textDark);
  top: 40px;
}

.dataTable.large .table__empty {
  top: 70px;
}

.dataTable .table__loading {
  padding: 12px;
  text-align: center;
  font-family: Matter;
  font-size: 16px;
  font-weight: 500;
  color: var(--textDark);
}

.dataTable .table__body--refetching {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* === Global cursor lock during column reorder drag ===
   @hello-pangea/dnd clones the draggable and positions it under the pointer,
   but the pointer spends most of the drag over OTHER elements (header cells,
   resize handles, body rows, etc.), each with its own cursor rule. That
   causes the cursor to flicker between `grabbing`, `col-resize`, `pointer`,
   `default`, text-caret, etc. during the drag.

   When a column drag starts, DataTableHeader adds this class to <body> and
   removes it on drag end / unmount. The !important + universal selector
   wins over every other cursor rule in the app for the duration of the drag.
   Also disable text selection so text-drag doesn't interfere. */
body.dataTable-columnDragging,
body.dataTable-columnDragging * {
  cursor: grabbing !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

/* === Column resize + drag handles === */
.dataTable .table__resizeHandle {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  background-color: transparent;
  touch-action: none;
  /* user-select off prevents accidental text selection while dragging — matches
     AG Grid's resize behavior where the pointer feels "grabbed" for the column. */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dataTable .table__headerCell:hover .table__resizeHandle {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

/* Active resize state — keeps the handle highlighted throughout the drag even
   if the pointer briefly leaves the cell, matching AG Grid's visual feedback. */
.dataTable .table__resizeHandle--active,
.dataTable .table__resizeHandle--active:hover {
  background-color: var(--primaryColorSD);
}

.dataTable .table__dragHandleBtn {
  /* Keep layout stable so the 3-dot menu stays clickable at narrow widths. */
  visibility: hidden;
  display: inline-flex;
  color: var(--textTertiary);
  cursor: grab;
}

.dataTable .table__dragHandleBtn:active {
  cursor: grabbing;
}

.dataTable .table__headerCell:hover .table__dragHandleBtn {
  visibility: visible;
}

/* Keep TanStack column header menu above sticky group rows without affecting other apps/tables. */
.tippy-box.tippy__dropdown.tanstackColumnHeaderMenu {
  z-index: 12000 !important;
}

/* === Hover action icons === */
/* The action buttons container (.agGridColViewEditBtns) collapses to zero
   width by default so the name text fills the entire cell. On hover, the
   container expands and buttons fade in. This matches V2 (AG Grid) behavior
   where buttons don't steal space from the name when not visible. */
.dataTable .agGridColViewEditBtns {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.dataTable .group:hover .agGridColViewEditBtns,
.dataTable .table__cell:hover .agGridColViewEditBtns {
  width: auto;
  overflow: visible;
}

.dataTable .agGridColViewEditBtns .viewBtn {
  pointer-events: none;
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0;
}

.dataTable .group:hover .agGridColViewEditBtns .viewBtn,
.dataTable .table__cell:hover .agGridColViewEditBtns .viewBtn {
  pointer-events: auto;
  opacity: 1;
}

.dataTable .agGridColViewEditBtns .viewBtn .i__Icon {
  height: 24px;
  width: 24px;
  border-radius: 4px;
  padding: 2px;
}

.dataTable .agGridColViewEditBtns .viewBtn.editBtn .i__Icon {
  padding: 4px;
}

.dataTable .agGridColViewEditBtns .viewBtn:hover .i__Icon svg {
  fill: var(--primaryColorSD);
}

.dataTable .agGridColViewEditBtns .viewBtn:hover .i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--primaryColorSD);
}

.dataTable .agGridColViewEditBtns .viewBtn:hover .i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--primaryColorSD);
}

/* === Selection column (checkbox / row counter) === */
.dataTable .checkBoxCol {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.dataTable .checkBoxMainWrapper {
  position: relative;
  top: 2px;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.dataTable .rowCounter__number {
  position: relative;
  top: -2px;
  width: 100%;
  text-align: center;
  font-family: Matter-Regular;
  font-size: 14px;
  color: var(--textDark);
}

/* Hide row checkbox by default (show row counter). Reveal on record-row hover/selected.
   Group header rows are not real records, so their row numbers must stay visible. */
.dataTable .table__cell.checkBoxCol .custom__checkbox__SD {
  display: none;
}

.dataTable .table__row:not(.table__row--group):hover .table__cell.checkBoxCol .custom__checkbox__SD,
.dataTable .table__row--selected .table__cell.checkBoxCol .custom__checkbox__SD {
  display: inline-flex;
}

.dataTable .table__row:not(.table__row--group):hover .table__cell.checkBoxCol .rowCounter__number,
.dataTable .table__row--selected .table__cell.checkBoxCol .rowCounter__number {
  display: none;
}

/* Non-selectable rows have no checkbox to swap in — keep the number visible on hover. */
.dataTable .table__row:not(.table__row--group):hover .table__cell.checkBoxCol .rowCounter__number.rowCounter__number--locked,
.dataTable .table__row--selected .table__cell.checkBoxCol .rowCounter__number.rowCounter__number--locked {
  display: inline-block;
}

/* Header select-all checkbox is always visible. */
.dataTable .table__headerCell.checkBoxCol .custom__checkbox__SD {
  display: inline-flex;
}

/* === Row glow highlight (sort-relocation scroll-to) === */
/* Triple-blink then hold pattern:
   0-400ms flash 1 on, 400-800ms off, 800-1200ms flash 2 on, 1200-1600ms off,
   1600-2000ms flash 3 on, 2000-4000ms hold, 4000-4400ms fade out.
   Total duration: 4400ms.

   The outline animates on the ROW (drawn on the border-box edge, clipped by
   the scroll container). The background animates on each CELL individually
   so that off-screen cells' backgrounds don't bleed through pinned columns
   or the scroll container edges — each cell's overflow:hidden clips its own
   content to its own box. */
@keyframes rowGlowOutline {
  0% { outline-color: transparent; }
  9.09% { outline-color: rgb(253 186 116); }
  18.18% { outline-color: transparent; }
  27.27% { outline-color: rgb(253 186 116); }
  36.36% { outline-color: transparent; }
  45.45% { outline-color: rgb(253 186 116); }
  90.91% { outline-color: rgb(253 186 116); }
  100% { outline-color: transparent; }
}

@keyframes cellGlowBg {
  0% { background-color: transparent; }
  9.09% { background-color: rgb(255 247 237); }
  18.18% { background-color: transparent; }
  27.27% { background-color: rgb(255 247 237); }
  36.36% { background-color: transparent; }
  45.45% { background-color: rgb(255 247 237); }
  90.91% { background-color: rgb(255 247 237); }
  100% { background-color: transparent; }
}

.dataTable .table__row--glow {
  animation: rowGlowOutline 4400ms ease-out forwards;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
}

/* Cell-level background animation. Each cell is clipped by its own
   overflow:hidden so off-screen cells cannot bleed text outside their box. */
.dataTable .table__row--glow > .table__cell {
  animation: cellGlowBg 4400ms ease-out forwards;
}

/* === Scrollbar styling === */
.dataTable .table__body::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.dataTable .table__body::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.35);
  border-radius: 8px;
}

.dataTable .table__body::-webkit-scrollbar-track {
  background: transparent;
}

/* === Parent tree mode === */
.dataTable .parentTree__cell {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.dataTable .parentTree__chevron {
  display: inline-flex;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--textTertiary);
  background: none;
  border: none;
  padding: 0;
}

.dataTable .parentTree__chevron:hover {
  color: var(--textDark);
}

.dataTable .parentTree__chevron--loading {
  color: var(--textTertiary);
  animation: parentTreeSpin 1s linear infinite;
  display: inline-block;
}

@keyframes parentTreeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dataTable .parentTree__spacer {
  flex-shrink: 0;
  width: 16px;
}

.dataTable .parentTree__content {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
}

/* === Grid size variants === */
.dataTable.normal .table__header,
.dataTable.normal .table__headerRow {
  height: 40px;
  min-height: 40px;
}

.dataTable.normal .table__headerCell {
  height: 40px;
  min-height: 40px;
}

.dataTable.compact .table__header,
.dataTable.compact .table__headerRow {
  height: 40px;
  min-height: 40px;
}

.dataTable.compact .table__headerCell {
  height: 40px;
  min-height: 40px;
}

.dataTable.compact .column_name {
  font-size: 14px;
}

.dataTable.compact .table__cell {
  font-size: 14px;
}

.dataTable.large .table__header,
.dataTable.large .table__headerRow {
  height: 70px;
  min-height: 70px;
}

.dataTable.large .table__headerCell {
  height: 70px;
  min-height: 70px;
}

.dataTable.large .column_name {
  font-size: 18px;
}

.dataTable.large .table__cell {
  font-size: 18px;
}

.dataTable .table__cell .addColDataBtn {
  pointer-events: none;
  opacity: 0;
}
.dataTable .table__cell:hover .addColDataBtn {
  pointer-events: auto;
  opacity: 1;
}

/* === Quicklook modal coordination ===
   When a footer action (Note, Tag, Email, Won, etc.) opens a modal, the
   quicklook Tippy stays mounted (to preserve child component state) but
   is visually hidden. The modal renders via React portal to document.body
   and is fully interactive without z-index conflicts. */
.tippy-box.quicklook-modal-active {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* Success flash animation after inline save */
@keyframes cellSaveSuccess {
  0% { background-color: rgba(36, 189, 99, 0.15); }
  100% { background-color: transparent; }
}

.dataTable .cell-save-success {
  animation: cellSaveSuccess 1s ease-out;
}

/* Email column multi-value wrapper */
.dataTable .agGridEmailCol__outerMoreBtn__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dataTable .agGridEmailCol {
  width: auto;
  max-width: 100%;
}