.eControls .eGrid {
    position: relative;
    overflow: visible;
    width: calc(100% - 2px);
    overflow: auto !important;
    --sb-thumb-hover: rgba(0,0,0,.45);

    &.overflow__stop {
        overflow-y: hidden;
    }

    &::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-hover);
    }

    & .k-grid {
        border: none !important;
        width: fit-content;

        & .k-grid-header,
        & .k-grid-container,
        & .ann-pager {
            width: calc(100% - 1px);
        }

        & .ann-pager-block {
            display: flex;
            margin: 0 auto;
        }

        & .k-table-thead {
            background-color: transparent !important;
        }

        & th,
        & td {
            padding: 12px;
        }

            & td:has( > .k-reset) {
                padding: 12px 24px 12px 36px;
            }

            & td > .k-reset {
                position: absolute;
                left: 8px;
                top: 24px;
            }

        & th {
            border-width: 1px !important;
            border-color: transparent !important;
        }

        & td.k-table-td {
            overflow: hidden !important;
            text-overflow: ellipsis;
        }

        & th.priority,
        & td.priority {
            padding: 12px 24px 12px 12px;
        }

        & .priority:not(th) {
            font-size: var(--font-size-text-sm);
            line-height: var(--line-height-text-sm);
        }

        & th:has( .ellipsis),
        & td:has( .ellipsis) {
            padding: 4px 8px;
        }

        & tr {
            border-right: 0;
            border-left: 0;
        }

        & td {
            border-right: none;
            border-left: none;
            border-bottom: 1px solid var(--gray-300);
        }

            & td:nth-child(-1n+2) {
                position: relative;
                z-index: 1;
                overflow: visible;
            }

        & tr:last-child td {
            border: none;
        }

            & tr:last-child td:last-child {
                border-radius: 0 0 8px 0;
            }

        & .k-header > .k-cell-inner {
            margin: 0 !important;
        }

        & .k-cell-inner > .k-link {
            padding: 0 !important;
            display: block !important;
        }

        & .k-alt {
            background: transparent !important;
        }

        & .k-master-row:hover {
            background-color: var(--gray-50) !important;
        }

        & .k-selected > .k-table-td,
        & .k-table-list .k-table-row.k-selected {
            background-color: var(--gray-50) !important;
        }

        & .eGridHeader__eCheckBox {
            display: flex;
            /*align-items: center;*/
            align-items: flex-end;
        }

        .eGridHeader__eCheckBox input {
            margin: 2px 0 0 0;
        }

        & .ellipsis {
            margin: 0 !important;
        }

        & .menu__context {
            position: absolute;
            top: -66px;
            left: 20px;
        }

        & .grid__view-setting {
            width: 32px;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

            & .grid__view-setting:hover {
                border-radius: 4px;
                padding: 4px 6px;
                border: 2px solid var(--brand-500);
            }

        & .grid__popup-setting {
            position: relative;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

            & .grid__popup-setting img,
            & .k-bulk-menu img {
                margin-right: 8px;
            }

        & .k-grid-header {
            position: relative;
            z-index: 1;
        }

        & .k-grid-content,
        & .k-grid-content.k-auto-scrollable {
            position: relative;
            z-index: 2;
            overflow: visible;
            background: transparent !important;
        }

        & .badge__status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--colorTitle-bs);
            border: 1px solid var(--colorBorder-bs);
            border-radius: 16px;
            background-color: var(--colorBg-bs);
            width: 100%;
        }

        & .badge__status-xs {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--colorTitle-bs);
            border: 1px solid var(--colorBorder-bs);
            border-radius: 16px;
            background-color: var(--colorBg-bs);
            width: 40px;
        }

        & .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--gray-700);
            border: 1px solid var(--gray-300);
            border-radius: 8px;
            background-color: transparent;
            /*width: 84px;*/
        }

            & .badge .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: var(--error-500);
                box-sizing: revert;
            }

        & .bulk-actions {
            position: relative;
            display: inline-block;
            left: 120px;
            top: -2px;
        }

            & .bulk-actions .k-bulk-toggle {
                padding: 0 6px;
                border: none !important;
                background: var(--gray-50);
                color: var(--brand-700);
                font-weight: var(--font-weight-bold);
                font-size: var(--font-size-text-xs);
                line-height: var(--line-height-text-xs);
                z-index: 2;
            }

            & .bulk-actions .k-bulk-menu {
                position: absolute;
                top: 100%;
                right: 0;
                background: var(--white);
                border: 1px solid var(--gray-300);
                border-radius: 6px 0 6px 6px;
                padding: 4px;
                margin: 0;
                min-width: 140px;
                box-shadow: 0 2px 6px rgba(0,0,0,.15);
                z-index: 1;
            }

                & .bulk-actions .k-bulk-menu li {
                    list-style: none;
                    margin: 0;
                }

                & .bulk-actions .k-bulk-menu a {
                    display: block;
                    padding: 4px 10px;
                    text-decoration: none;
                    color: inherit;
                }

                & .bulk-actions .k-bulk-menu button:hover {
                    background: var(--gray-100);
                }

            & .bulk-actions:has( .k-bulk-menu[style$="none;"]) .eIconArrow::before {
                content: "\e015";
            }

        &:has( .bulk-actions) .k-header {
            overflow: visible;
        }

        &:has( .bulk-actions) .k-grid-header {
            z-index: 3;
        }

        &:has( .bulk-actions) .menu__context {
            z-index: 0;
        }

        &:has( .is-open) .k-header {
            overflow: revert;
        }

        &:has( .is-open) .k-grid-header {
            z-index: 1;
        }

        &:has( .is-open) .menu__context {
            z-index: 3;
        }

        & .k-checkbox {
            display: flex;
            width: var(--spacing-2xl);
            height: var(--spacing-2xl);
        }

            & .k-checkbox:checked {
                background-color: var(--brand-600) !important;
                border: 1px solid rgba(255, 255, 255, 0.12) !important;
            }

                & .k-checkbox:checked:focus,
                & .k-checkbox:focus {
                    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
                }

        & .k-state-selected > td {
            background: var(--gray-50);
        }

        & .membership__join-now,
        & .membership__accept {
            text-decoration: none;
            color: var(--brand-600) !important;
            cursor: pointer;
            font-weight: 600;
        }

        & .membership__remove-me,
        & .membership__decline {
            text-decoration: none;
            color: var(--gray-600) !important;
            cursor: pointer;
            font-weight: 600;
        }

        & .membership__wrapper {
            display: flex;
            gap: 12px;
        }
    }

    & .k-grid-header-wrap {
        border-right: none;
        border-left: none;
        overflow: visible !important;
    }

    & .k-grid-header .k-header {
        border-right: 1px solid rgba(204, 204, 204, .25) !important;
        border-left: 0 !important;
    }

    & .k-grid-header {
        border-start-end-radius: 0;
        border-start-start-radius: 0;
        border: 1px solid var(--gray-300);
        border-right: none;
        border-left: none;
        padding-right: 0 !important;
        background: var(--gray-50);
        color: var(--gray-500);
        font-weight: 600;
    }

    & .k-pager-numbers .k-link.k-state-selected {
        border-color: var(--brand-600) !important;
        background-color: var(--brand-600) !important;
    }

    & .k-pager-nav.k-link,
    & .k-pager-refresh {
        color: var(--brand-600) !important;
    }

    & .k-pager-info {
        justify-content: center;
        order: 0;
    }

    & .k-i-sort-asc-sm::before {
        content: "\e013";
        color: var(--gray-500);
    }

    & .k-i-sort-desc-sm::before {
        content: "\e015";
        color: var(--gray-500);
    }

    & .k-column-title {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--gray-500);
    }

    & .priority {
        font-weight: var(--font-weight-medium);
        color: var(--gray-900);
        overflow: hidden;
        text-overflow: ellipsis;

        &.priority--truncate {
            white-space: nowrap;
        }
    }

    & .side {
        font-weight: var(--font-weight-regular);
        color: var(--gray-600);
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        overflow: hidden;
        text-overflow: ellipsis;

        &.side--truncate {
            white-space: nowrap;
        }

        & .desc-more-link {
            color: var(--brand-600);
            font-weight: var(--font-weight-semibold);
            text-decoration: none;
            white-space: nowrap;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    & .folder-link {
        & .--eFlex,
        & .--eFlex > div {
            min-width: 0;
        }

        & .priority {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    & .k-table-td:has( > .e-grid-btn) {
        text-overflow: initial;
    }

    & .e-grid-btn {
        border: none;
        background: transparent;
    }

    & .heightAuto {
        & .k-grid-content.k-auto-scrollable {
            height: 100% !important;
            /*overflow: hidden;*/
            padding-right: 0 !important;
        }

        @media(max-width: 1100px) {
            & .k-grid-content.k-auto-scrollable {
                height: 100% !important;
                max-height: 100% !important;
            }
        }
    }

    & .k-grid-header-wrap {
        overflow-x: clip !important;
    }
    /* ── Empty state ─────────────────────────────────────────── */

    & tr.k-no-data > td {
        border: none !important;
        padding: 0 !important;
        overflow: visible !important;
        height: 260px;
        vertical-align: middle;
        text-align: center;
    }

    & .k-grid-content > #eClientSearchEmpty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-height: unset;
        padding: 0;
        pointer-events: none;
    }

    & .k-grid-norecords {
        justify-content: center;
    }

    /* ── Preview thumbnail (ePreview column) ─────────────────── */

    & .ePreview__thumb {
        object-fit: cover;
        border-radius: var(--radius-sm, 4px);
        cursor: pointer;
    }
}

/* ── Preview popup content (ePreviewOpen) ────────────────────── */

.ePreview__imageWrap,
.ePreview__objectWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--spacing-md, 12px);
    box-sizing: border-box;
}

.ePreview__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ePreview__object {
    width: 100%;
    height: 100%;
    border: none;
}