.oc-table-cell {
    overflow: auto;
    overflow-wrap: break-word;
    white-space: normal;
    
    &.truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    &.wrap {
        display: block;
        min-width: 80px;
        overflow-y: auto;
        text-wrap: balance;
        white-space-collapse: collapse;
        word-break: break-word;
    }
}

a.oc-table-cell,
span.oc-table-cell {
    &.truncate,
    &.wrap {
        display: block;
    }
}

.e-grid {
    --corner-radius: 8px;
    --checkbox-left-padding: 1.5rem;
    --details-click-target-size: 30px;
    --detail-icon-size:  20px;
    /* 33px aligns with checkbox, 0.5rem is margin gap, and 7px is the negative space in the SVG itself */
    --detail-icon-offset: calc(33px + 0.5rem + 7px);
    border: 0 none transparent;

    &.hide-filter-bar tr.e-filterbar td {
        height: 0;
        margin:0;
        padding:0;
        background-color: transparent;
        border: 0 none transparent;
    }
    
    .e-content,
    .e-table,
    .e-gridheader {
        background-color: transparent;
        border: 0 none transparent;
    }
    
    td[style*="text-align:center"] .oc-table-cell
    {
        text-align: center;
        margin-inline: auto;
    }

    td[style*="text-align:right"] .oc-table-cell
    {
        text-align: right;
        margin-left: auto;
    }

    .e-gridheader {
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(7.5px);
        z-index: 0;
        position: relative;
        clip-path: polygon(-10% -10%, 110% -10%, 110% 100%, -10% 100%);
        border-top-right-radius: var(--corner-radius, 8px);
        border-top-left-radius: var(--corner-radius, 8px);
        
        &.e-sticky {
            transform: translateY(2px);
        }
    }

    .e-headercelldiv {
        text-transform: none;
        color: var(--clr-dn, #636363);
        font-size: 0.8125rem; /* 13px */
        font-weight: 400;
        
        &.e-rightalign {
            text-align: right;
        }
    }

    .e-headercell,
    .e-detailheadercell,
    .e-gridcontent {
        background-color: #f5f5f5;
    }
    
    .e-gridheader.e-sticky .e-headercell,
    .e-gridheader.e-sticky .e-detailheadercell {
        background-color: #f5f5f5;
    }

    .e-gridcontent {
        overflow: auto;
        border-bottom-left-radius: var(--corner-radius, 8px);
        border-bottom-right-radius: var(--corner-radius, 8px);
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(7.5px);
        clip-path: polygon(-10% 0, 110% 0, 110% 110%, -10% 110%);
    }

    .e-headercell,
    .e-headercelldiv {
        border: 0 none transparent;
    }

    .e-headercell,
    .e-detailheadercell {
        position: relative;

        &:before {
            /* pretending to be a border-bottom: 2px solid var(--clr-ln, #eaeaeaea);
               on its parent, but without increasing the bounding box size */
            content: '';
            inset-inline: 0;
            bottom: 0;
            height: 2px;
            position: absolute;
            background-color: var(--clr-ln, #eaeaea);
        }
    }

    .e-headercell {
        padding: 0.75rem 0.5rem;
        
        &:has(.e-headerchkcelldiv) {
            padding-left: var(--checkbox-left-padding);
            padding-right: 0;

            .e-checkbox-wrapper {
                transform: translateX(-0.5rem);
                max-width: 1.375rem; /* 22px */
            }
        }
    }
    
    .e-sortfilterdiv { display: none; } /* remove SF sort icon & define our own below */

    th[aria-sort="ascending"] .e-headertext::after {
        content: var(--svg-sort-arrow-asc);
        position: relative;
        margin-left: 0.5em;
    }

    th[aria-sort="descending"] .e-headertext::after {
        content: var(--svg-sort-arrow-desc);
        position: relative;
        margin-left: 0.5em;
    }

    .e-columnheader {
        th:first-child,
        th:only-child {
            border-top-left-radius: var(--corner-radius, 8px);
        }

        th:last-child,
        th:only-child {
            border-top-right-radius: var(--corner-radius, 8px);
        }
    }

    .e-emptyrow {
        text-align: center;
    }

    &.sf-grid .e-gridheader table th.e-detailheadercell:not([rowspan="1"]),
    &.sf-grid .e-device .e-gridheader table th.e-detailheadercell:not([rowspan="1"]) {
        padding: 0;
    }
    
    .e-rowcell {
        &.e-rightalign {
            text-align: right;
        }
        
        &:has(.e-checkbox-wrapper) {
            padding-left: var(--checkbox-left-padding);
            padding-right: 0;
            overflow-x: visible;
            display: table;
        }
    }
    
    th.e-detailheadercell,
    td.e-detailrowexpand,
    td.e-detailrowcollapse {
        width: 0 !important;
        padding: 0;
        
        a.e-icons {
            position: relative;
            background-color: transparent;
            /* regular offset minus half of the difference between the click target and icon sizes */
            left: calc(var(--detail-icon-offset) - (0.5 * (var(--details-click-target-size) - var(--detail-icon-size))));
            width: var(--details-click-target-size);
            height: var(--details-click-target-size);
            top: 3px;
            z-index: 10;
            display: block;
            
            &::before {
                content:'';
                width: 1rem;
                height: 1rem;
                cursor: pointer;
            }
        }
    }

    tr:has(.e-detailrowcollapse, .e-detailrowexpand) td:has(.e-checkbox-wrapper)::before {
        content: var(--svg-grid-details-chevron);
        width: var(--detail-icon-size);
        height:  var(--detail-icon-size);
        left: var(--detail-icon-offset);
        top: 0.875rem;
    }
    
    tr:has(.oc-header-template) {
        th {
            &[aria-sort="ascending"] .oc-header-template::after {
                content: var(--svg-sort-arrow-asc);
                position: relative;
            }
    
            &[aria-sort="descending"] .oc-header-template::after {
                content: var(--svg-sort-arrow-desc);
                position: relative;
            }
            
            .e-leftalign {
                text-align: left;
            }
            
            &[aria-sort="ascending"] .e-leftalign .oc-header-template::after,
            &[aria-sort="descending"] .e-leftalign .oc-header-template::after {
                margin-left: auto;
            }
            
            .e-rightalign {
                text-align: right;
                .oc-header-template {
                    justify-content: flex-end;
                }
            }
        }
        
        .oc-header-template {
            display: flex;
            column-gap: 0.25rem;
            align-items: center;
        }
    }

    tr:has(.e-detailrowcollapse) td:has(.e-checkbox-wrapper),
    tr:has(.e-detailrowexpand) td:has(.e-checkbox-wrapper) {
        position: relative;
        overflow: visible;
        display: revert;
        
        &::before {
            position: absolute;
        }
    }
    
    tr:has(.e-detailrowcollapse) td:has(.e-checkbox-wrapper)::before {
        rotate: 0deg;
    }
    
    tr:has(.e-detailrowexpand) td:has(.e-checkbox-wrapper)::before {
        rotate: 90deg;
    }

    .e-gridheader .e-headercontent .e-rightalign .e-headercelldiv.e-headerchkcelldiv,
    .e-gridheader .e-headercontent .e-centeralign .e-headercelldiv.e-headerchkcelldiv {
        padding: 0;
    }

    .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
        box-shadow: none;
    }
    
    .e-detailcell {
        padding: 0.625rem 1rem;
    }

    tr td.e-rightalign > div > a {
        text-align: right;
        margin-left: auto;
    }
    
    /* =========== Background/Text colors =========== */
    /* Normal */
    .e-rowcell {
        background-color: white;
    }
    .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd),
    .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd),
    .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd),
    .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
    .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
    .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
        color: var(--clr-blk, #112333);
    }
    
    /* Critical */
    tr:has(.critical, .validation-message) {
        background-color: var(--clr-err_50, #edb0b080)
    }
    
    tr:has(.critical, .validation-message):not(:has(.e-checkbox-disabled)) .e-rowcell {
        background-color: transparent;

        .critical {
            font-weight: 600 !important;
            color: var(--clr-err300, #d43f3f);
        }
    }
    
    /* Expanded */
    tr:has(.e-detailrowexpand):not(:hover):not([aria-selected="true"]):not(:has(.critical, .validation-message)),
    tr:has(.e-detailrowexpand):not(:hover):not([aria-selected="true"]):not(:has(.critical, .validation-message)) td {
        background-color: var(--clr-ln, #eaeaea);
    }
    
    /* non-critical selected / hover */
    tr[aria-selected="true"]:not(:has(.critical, .validation-message)),
    tr:hover:not(:has(.critical, .validation-message)),
    tr:hover:not(:has(.critical, .validation-message)) td:not(#a) {
        background-color: var(--clr-bh, #dfebeb);
    }
    
    /* Critical selected / expanded / hover */
    tr:has(.e-detailrowexpand):has(.critical, .validation-message):not(:hover):not([aria-selected="true"]),
    tr:has(.e-detailrowexpand):has(.critical, .validation-message):not(:hover):not([aria-selected="true"]) td,
    tr[aria-selected="true"]:has(.critical, .validation-message),
    tr:hover:has(.critical, .validation-message),
    tr:hover:has(.critical, .validation-message) td:not(#a) {
        background-color: var(--clr-err, #edb0b0);
    }
    
    /*v readonly */
    tr:has(.e-checkbox-disabled):not(:has(.validation-message)) td:not(#a#b),
    tr:has(.e-checkbox-disabled):not(:has(.validation-message)):hover td:not(#a#b) {
        background-color: var(--clr-ln, #eaeaea);
    }
    tr:has(.e-checkbox-disabled):has(.validation-message) td:not(#a#b),
    tr:has(.e-checkbox-disabled):has(.validation-message):hover td:not(#a#b) {
        background-color: var(--clr-err, #edb0b0);
    }
    /* ============================================== */
}

.e-detail-intent {
    width: 0 !important;
}

.e-pager {
    background-color: transparent;
    border-top: none;
}

.oc-grid-selection-summary span,
.oc-grid-selection-summary p,
.oc-grid-selection-summary strong {
    color: var(--clr-wht, #fafeff);
}

.oc-grid-selection-summary {
    border-radius: 1000vmax;
    background-color: var(--clr-1p, #005b5e);
    color: var(--clr-wht, #fafeff);
    padding: 0.25rem 1rem;

    > span > button {
        transform: translateY(2px);
    }
}

.details-key-value {
    display: grid;
    grid-column: span 2 / span 2;
    grid-template-columns: subgrid;
    column-gap: 0.25rem;
}

.large-scrollbars .e-gridcontent .e-content::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .e-grid {
        tr:has(.e-detailrowcollapse) td:has(.e-checkbox-wrapper)::before,
        tr:has(.e-detailrowexpand) td:has(.e-checkbox-wrapper)::before {
            transition: rotate 150ms ease-in-out;
            transition-property: scale, rotate;
        }

        tr:has(.e-detailrowcollapse, .e-detailrowexpand):has(a.e-icons:hover) td:has(.e-checkbox-wrapper)::before {
            scale: 1.25;
            transition: scale 150ms ease-in-out;
            transition-property: scale, rotate;
        }
    }
}