:root {
    --grid-min-height: 300px;
    /* Row area cap for tables that size to their content. Keeps the vertical scrollbar inside the
       table instead of on the page, and keeps the header row and summary footer always visible. */
    --grid-max-height: 60dvh;
    /* Tighter cap for tables embedded in cards, modals and detail panels. */
    --grid-max-height-compact: 20rem;
  
    --grid-page-height: 60dvh;
}

.e-grid {
    border: none !important;
    font-family: var(--body-font), sans-serif !important;

    .e-focused {
        box-shadow: none !important;
    }

    .e-headercelldiv {
        overflow: visible !important;
    }

    --color-sf-content-text-color: var(--etuity-color-neutralforeground-rest);
    --color-sf-content-text-color-hover: var(--etuity-color-neutralforeground-rest);
    --color-sf-content-bg-color-alt1: var(--etuity-color-neutralfill-rest);
    --color-sf-primary: var(--etuity-color-accentfill-rest);
    --color-sf-primary-border-color: var(--etuity-color-accentfill-rest);
    --color-sf-primary-border-color-hover: var(--etuity-color-accentfill-hover);
    --color-sf-primary-text-color: var(--etuity-color-foregroundonaccent-rest);
}

.e-columnheader {
    height: 3rem;
}


.e-gridheader {
    border: none !important;
    border-bottom: var(--etuity-color-neutralstrokestrong-rest) solid 1px !important;

    .e-table {
        margin-bottom: 0;
    }

    .e-headercontent {
        border: none !important;
    }
}

.e-grid .e-gridfooter {
    background-color: var(--etuity-color-accentfill-rest) !important;

    .e-table .e-summaryrow .e-summarycell {
        background-color: var(--etuity-color-accentfill-rest) !important;
        font-family: var(--body-font), sans-serif !important;
        font-weight: 400;
        color: var(--etuity-color-foregroundonaccent-rest) !important;
        padding: 12px 8px;
        border: none;
    }

    .e-summarycontent {
        border: none !important;

        .e-table {
            margin: 0 !important;
        }
    }
}

.e-grid .e-rowcell {
    border: none !important;
    border-bottom: var(--etuity-color-neutralstroke-rest) solid 1px !important;
    padding: 8px !important;
}

.e-grid .e-row {
    background-color: var(--etuity-color-neutralfill-rest);

    &.e-altrow {
        background-color: var(--etuity-color-neutrallayer2) !important;
    }

    &:not(:hover) .e-rowcell.e-selectionbackground {
        background-color: var(--etuity-color-neutrallayer3) !important;
    }

    &[aria-rowindex]:nth-child(odd) {

        &:not(:hover) .e-rowcell.e-selectionbackground {
            background-color: var(--etuity-color-neutrallayer4) !important;
        }
    }
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--etuity-color-neutrallayer3) !important;
}

.e-leftfreeze {
    background-color: inherit !important;
    border: unset !important;
}

.e-grid .e-headercell,
.e-grid .e-rowdragheader {
    border: none !important;
}

.e-grid .e-rowcell[data-firstColumn="true"],
.e-grid .e-headercell[data-firstColumn="true"] {
    border-left: 1px solid var(--etuity-color-neutralforeground-rest) !important;
}

.e-grid .e-rowcell[data-grid-divider-primary="true"],
.e-grid .e-headercell[data-grid-divider-primary="true"] {
    border-left: 3px solid var(--neutral-stroke-divider-rest) !important;
}

.e-grid .e-rowcell[data-grid-divider-secondary="true"],
.e-grid .e-headercell[data-grid-divider-secondary="true"] {
    border-left: 1px solid var(--neutral-stroke-divider-rest) !important;
}

.e-grid .e-gridheader tr:first-child th:not(.e-freezeleftborder, .e-freezerightborder) {
    border-top: 0 none;
    border-bottom: 0 none;
}

.e-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 0 !important;
}

.e-grid .material-symbols-outlined {
    vertical-align: bottom;
}

.e-grid .e-gridcontent .e-content table {
    margin-bottom: 0 !important;
}

.e-grid .e-table {
    border-spacing: 0 !important;
    /* Removes some strange gaps in background color of rows */
}

.e-grid .e-headercell:focus-visible {
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
    outline-offset: calc(var(--focus-stroke-width) * -1px);
}

.e-grid .e-rowcell:focus-visible {
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
    outline-offset: calc(var(--focus-stroke-width) * -1px);
}

.e-grid td.e-updatedtd {
    background-color: inherit !important;
}

.e-grid fluent-combobox {
    anchor-name: --bulk-cb-anchor;
    anchor-scope: --bulk-cb-anchor;
}

.e-grid fluent-combobox::part(listbox) {
    position: fixed !important;
    position-anchor: --bulk-cb-anchor;
    top: anchor(bottom);
    left: anchor(left);
    width: anchor-size(width);
}

.e-grid a:focus-visible {
    outline: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
    outline-offset: calc(var(--stroke-width) * 1px);
}

.e-grid a.anchor-open:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}


.data-grid-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
}


.data-grid-scroll--page,
.data-grid-scroll--fixed-height {
    overflow-x: clip;
}

.data-grid-scroll .e-grid .e-table {
    min-width: 100%;
}

/* Vertical overflow belongs to the table, not the page. The header (.e-gridheader) and the
   summary footer (.e-gridfooter) are siblings of the scrolled row area, so capping the row area
   makes both stay in view while the rows scroll underneath them. */
.data-grid-scroll .e-grid .e-gridcontent .e-content {
    max-height: var(--grid-max-height);
    overflow-y: auto;
}

.data-grid-scroll--compact {
    --grid-max-height: var(--grid-max-height-compact);
}

/* Grids that set an explicit height already bound their row area; Syncfusion needs that height
   for infinite scrolling, so the cap must not fight the height it calculates. */
.data-grid-scroll--fixed-height {
    --grid-max-height: none;
}

/* A page's main table The grid is handed a plain 100%, Syncfusion parses its Height parameter
   numerically and mangles viewport units so the real height is set here and resolved by the
   browser, Rows scroll inside the table with the header and footer pinned, and the page does not
   grow with the row count */
.data-grid-scroll--page {
    height: var(--grid-page-height);
    --grid-max-height: none;
}

/* Row-level links must be real anchors: Syncfusion cannot wire up keyboard navigation through the
   shadow DOM of fluent-anchor, so grid cells use a plain <a> styled as a tertiary action. */
.e-grid a.grid-action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--etuity-spacing-xsmall);
    min-height: 2rem;
    padding: 0 var(--etuity-spacing-small);
    text-decoration: none;
    white-space: nowrap;

    color: var(--etuity-color-neutralforeground-rest);
}

.e-grid a.grid-action-link:hover {
    color: var(--etuity-color-neutralforeground-rest);
    text-decoration: underline;
}

.etuity-card,
.etuity-card--content {
    min-width: 0;
}