/* #region DataTable styles */

/* #region DataTable icon overrides */
.k-header .k-cell-inner .k-grid-header-menu .k-icon.k-font-icon.k-i-more-vertical::before,
.k-i-sort-asc-small::before,
.k-i-sort-desc-small::before,
.k-columnmenu-item .k-i-filter::before,
.k-reset .k-icon.k-font-icon.k-i-caret-alt-down::before,
.k-reset .k-icon.k-font-icon.k-i-caret-alt-right::before {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
}

.k-header .k-cell-inner .k-grid-header-menu .k-icon.k-font-icon.k-i-more-vertical::before {
    content: "\e0ad"; /* FontAwesome Unicode */
}

.k-columnmenu-item .k-i-sort-asc-small::before {
    content: "\f062"; /* FontAwesome Unicode */
}

.k-icon.k-font-icon.k-i-sort-asc-small::before {
    content: "\f062"; /* FontAwesome Unicode */
    font-weight: 600;
}

.k-columnmenu-item .k-i-sort-desc-small::before {
    content: "\f063"; /* FontAwesome Unicode */
}

.k-icon.k-font-icon.k-i-sort-desc-small::before {
    content: "\f063"; /* FontAwesome Unicode */
    font-weight: 600;
}

.k-columnmenu-item .k-i-filter::before {
    content: "\e0ad"; /* FontAwesome Unicode */
}

.k-reset .k-icon.k-font-icon.k-i-caret-alt-down::before,
.k-reset .k-icon.k-font-icon.k-i-caret-alt-right::before {
    content: "\f078"; /* FontAwesome Unicode */
}

.k-header .k-cell-inner .k-grid-header-menu .k-icon.k-font-icon.k-i-more-vertical,
.k-columnmenu-item .k-i-sort-asc-small,
.k-columnmenu-item .k-i-sort-desc-small,
.k-columnmenu-item .k-i-filter {
    color: var(--tms-color-text-secondary);
}

.k-sort-icon .k-icon.k-font-icon.k-i-sort-asc-small,
.k-sort-icon .k-icon.k-font-icon.k-i-sort-desc-small {
    color: var(--tms-color-fg-tertiary);
    font-size: 15px;
}

.k-sort-icon {
    padding-right: 12px;
}

/* #endregion */

/* Styling for header when row-content is reversed and sort-icon is displayed */
.k-link:has(.k-sort-icon) .k-column-title .cell-container {
    padding: 0px 0px 0px 24px !important;
}

.k-link:has(.k-column-title .cell-container.justify-end) .k-sort-icon {
    margin-left: auto;
    padding-left: 12px;
}

.k-link:has(.k-column-title .justify-end) {
    flex-direction: row-reverse;
}

.k-link:has(.k-sort-icon) .k-column-title .cell-container.justify-end {
    padding: 0px 16px 0px 0px !important;
    width: unset;
}

.k-link:has(.k-sort-icon) .k-column-title:has(.cell-container.justify-end) {
    width: unset;
}
/* #endregion */

/* Styling for header when row-content is reversed and sort-icon is displayed */
.k-grid.sticky-table-header {
    overflow: unset;
    border: unset;
    background-color: inherit;
}

    .k-grid.sticky-table-header .k-grid-aria-root {
        overflow: unset;
    }

        .k-grid.sticky-table-header .k-grid-aria-root .k-grid-header {
            position: sticky;
            top: 0;
            z-index: 3;
            border: 1px solid;
            border-radius: 12px 12px 0px 0px;
            border-color: var(--tms-color-border-secondary);
        }

.k-grid.sticky-table-header::before {
    /* Masks the content of the grid when the header sticks while scrolling */
    content: "";
    position: sticky;
    top: -26px; /* Adjust as needed to align with the header */
    height: 34px;
    width: 100%;
    background-color: inherit;
    z-index: 2; /* Lower than the header but higher than the grid content */
    pointer-events: none;
}

.filter-chip-row + .grid-container .k-grid.sticky-table-header::before {
    /* Smaller gap between the grid and the Header/SubHeader when filter-chip-row is present */
    top: -8px;
    height: 16px;
}

.k-grid.sticky-table-header .k-grouping-header {
    margin-bottom: -1px; /* Negative margin used to overlap the borders of k-grouping-header and k-grid-header */
    border: 1px solid;
    border-radius: 12px 12px 0px 0px;
    border-color: var(--tms-color-border-secondary);
    z-index: 3;
}

.k-grid.sticky-table-header:not(:has(.k-grouping-header)) .k-grid-aria-root .k-grid-header .k-grid-header-wrap {
    border-radius: 12px 12px 0px 0px;
}

.k-grid.sticky-table-header:has(.k-grouping-header) .k-grid-aria-root .k-grid-header {
    border-radius: 0px;
}

.k-grid-container {
    border-radius: 0px 0px 12px 12px;
}

.k-grid.sticky-table-header .k-grid-aria-root .k-grid-container {
    border-top: 0px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-radius: 0px 0px 12px 12px;
    border-color: var(--tms-color-border-secondary);
}
/* #endregion */

.k-reset .k-icon.k-font-icon {
    color: var(--tms-color-fg-button-tertiary);
    font-size: 15px;
    height: 28px;
    width: 28px;
    cursor: pointer;
    margin-right: 0;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

    .k-reset .k-icon.k-font-icon.k-i-caret-alt-right {
        transform: rotate(-90deg);
    }

.k-animation-container .k-child-animation-container {
    transition-duration: 150ms !important;
}

.k-column-menu.k-grid-columnmenu-popup.k-popup {
    border-radius: 12px;
    overflow: hidden;
    border-width: 0;
    background-color: var(--tms-color-bg-popover-menu);
}

.k-animation-container:has(.k-child-animation-container .k-grid-columnmenu-popup) {
    filter: drop-shadow(0px 10px 50px rgba(20, 20, 20, 0.20));
}

.k-grid-header .k-grid-header-menu.k-active {
    background-color: unset;
}

.k-grid .k-grid-header .k-grid-header-menu:hover {
    background-color: var(--tms-color-bg-tertiary);
    border-radius: 4px;
}

.k-grid .k-grid-header .k-grid-header-menu:focus {
    box-shadow: none;
}

.k-columnmenu-item-wrapper .k-columnmenu-item {
    padding: 8px 16px 8px 16px;
    font-family: 'InterTight-Medium';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.009375rem;
    color: var(--tms-color-text-secondary);
    background-color: var(--tms-color-bg-popover-menu);
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.k-columnmenu-item:has(.k-i-sort-desc-small) {
    border-top: solid 1px;
    border-color: var(--tms-color-border-primary);
}

.k-columnmenu-item-wrapper:has(.k-expander .k-columnmenu-item .k-i-filter) {
    border-top: solid 8px;
    border-color: var(--tms-color-border-secondary);
}

.k-columnmenu-item-wrapper:has(.k-expander .k-columnmenu-item .k-i-set-column-position) {
    border-top: solid 8px;
    border-color: var(--tms-color-border-secondary);
}

.k-columnmenu-item-wrapper:has(.k-expander .k-columnmenu-item .k-i-columns) {
    border-top: solid 8px;
    border-color: var(--tms-color-border-secondary);
}

.k-columnmenu-item > .k-icon {
    margin-inline-end: unset;
    -webkit-margin-end: unset;
}

.k-columnmenu-item-wrapper .k-columnmenu-item:hover {
    background-color: var(--tms-color-bg-primary-hover);
}

.k-columnmenu-item-wrapper .k-columnmenu-item:focus {
    box-shadow: none;
}

.k-columnmenu-item-wrapper .k-columnmenu-item .k-icon {
    font-size: 18px;
}

.k-grid .k-grid-header .k-table-th {
    border: solid;
    border-width: 0px 4px 0px 0px;
    border-color: transparent;
    box-shadow: none !important;
}

.k-grid-header {
    background-color: var(--tms-color-bg-secondary);
    padding: 0;
}

.k-column-resizer {
    inset-inline-end: -4px;
}

.k-grid .k-grid-header .k-table-th:has(.k-column-resizer:hover) {
    border-color: var(--tms-color-border-brand);
}

.k-grid .k-grid-header .k-table-th:has(.k-column-resizer:active) {
    border-color: var(--tms-color-border-brand-solid);
}

.k-grid .k-grid-header .k-table-th:hover {
    background-color: var(--tms-color-bg-secondary-hover);
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    border-color: var(--tms-color-border-secondary);
    margin-right: -4px;
    box-sizing: border-box;
}

.k-grid .k-grid-header .k-table-th:focus {
    background-color: var(--tms-color-bg-active);
    box-shadow: unset;
}

.k-grid .k-grid-md .k-table-th > .k-cell-inner > .k-link, .k-grid-md .k-table-th > .k-cell-inner > .k-link {
    cursor: unset;
}

.k-table-th > .k-cell-inner > .k-link {
    padding-block: unset !important;
    padding-inline: unset !important;
}

.k-grid .k-grid-header .k-table-th:active {
    background-color: var(--tms-color-bg-secondary-active);
}

.k-grid-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .k-grid-content::-webkit-scrollbar {
        display: none;
    }

.k-grid .k-cell-inner {
    height: 36px;
    padding: 0;
}

.k-column-title {
    width: 100%;
}

.k-grid.k-grid-header.k-table-th .k-checkbox-wrap {
    width: 100%;
}

.k-checkbox-wrap {
    justify-content: center;
    vertical-align: middle;
}

.k-table-th .k-checkbox-wrap {
    margin-left: 4px;
}

.k-grid .k-grid-header .k-table-th:has(.k-checkbox-wrap) {
    vertical-align: middle !important;
    text-align: center;
}

.k-table-td:has(span .k-checkbox-wrap) {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 64px;
}

.table-header-icon {
    color: var(--tms-color-fg-tertiary);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-grid {
    border: 1px solid;
    border-color: var(--tms-color-border-secondary);
    border-radius: 12px;
    overflow: hidden;
    width: fit-content !important;
}

.k-table-td {
    box-shadow: unset !important;
    padding-block: unset !important;
    padding-inline: unset !important;
}

.k-header.k-drag-clue {
    background-color: var(--tms-color-bg-secondary-hover);
    height: 52px;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    border: solid;
    border-color: var(--tms-color-border-secondary);
    border-width: 0 4px 0 0;
    transform: translateY(-14px);
}

.k-master-row {
    background-color: unset !important;
    height: 1px;
}

    .k-master-row:hover {
        background-color: var(--tms-color-bg-primary-hover) !important;
    }

.k-grid .k-table-row.k-selected > .k-table-td:not(.k-group-cell) {
    background-color: var(--tms-color-bg-active) !important;
}

.k-grid td, .k-grid .k-table-td {
    border-inline-start-width: 0;
    border-color: var(--tms-color-border-secondary);
    border-bottom: dashed 1px var(--tms-color-border-primary);
    height: inherit;
}

.k-grouping-row.k-table-row.k-table-group-row .k-table-td,
.k-table-row.k-master-row .k-table-td.k-table-group-td {
    border-bottom: 0px;
    border-left: 0px;
}

.k-table-row.k-master-row:last-child .k-table-td {
    border-bottom: 0px !important;
}

.k-grouping-row.k-table-row.k-table-group-row .k-table-td .k-reset {
    height: 36px;
    padding: 12px 24px 12px 10px;
    gap: 10px;
    color: var(--tms-color-text-tertiary);
    font-family: 'InterTight-Medium';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.009375rem;
}

.k-table-td.k-table-group-td.k-group-cell + .k-table-td:not(.k-table-group-td.k-group-cell) {
    border-left-width: 1px;
}

.k-group-footer.k-table-row .k-table-td {
    border-left-width: 0px !important;
}

    .k-group-footer.k-table-row .k-table-td.k-table-group-td.k-group-cell:first-child {
        border-top-width: 0px;
    }

.k-table-row.k-master-row:has(+.k-group-footer.k-table-row) .k-table-td {
    border-bottom-width: 0px;
}

.k-grouping-row:has(.k-table-td > .k-reset > .k-i-caret-alt-right) + .k-group-footer .k-table-td {
    border-top-width: 1px !important;
}

.leading-button {
    background-color: unset;
    border: solid 1px var(--tms-color-border-button-secondary);
    border-radius: 8px;
}

    .leading-button:hover {
        background-color: var(--tms-color-bg-button-secondary-hover);
        border-color: var(--tms-color-border-button-secondary-hover);
    }

    .leading-button .k-button-text * {
        color: var(--tms-color-fg-button-secondary) !important;
    }

    .leading-button:hover .k-button-text * {
        color: var(--tms-color-fg-button-secondary-hover) !important;
    }

.k-group-footer td, .k-grouping-row td, .k-group-footer .k-table-td, .k-grouping-row .k-table-td, .k-table-tbody .k-group-cell {
    background-color: var(--tms-color-bg-secondary);
}

.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: var(--tms-color-bg-secondary);
}

.telerik-blazor.k-grid.grid .telerik-blazor.k-grouping-header {
    padding: 12px 24px;
    font-family: 'InterTight-Medium';
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.009375rem;
    color: var(--tms-color-text-tertiary);
}

/* #region Sorted-header stylings */
.k-table-thead .k-table-row .k-header.k-table-th.k-sorted {
    background-color: var(--tms-color-bg-secondary);
}

    .k-table-thead .k-table-row .k-header.k-table-th.k-sorted .k-cell-inner .k-link .k-column-title
    .cell-container .cell-container-inner .text-and-icons .tms-color-text-tertiary {
        color: var(--tms-color-text-tertiary);
    }

    .k-table-thead .k-table-row .k-header.k-table-th.k-sorted:hover {
        background-color: var(--tms-color-bg-secondary-hover);
    }
/* #endregion */

col.k-sorted {
    background-color: var(--tms-color-gray025);
}

.k-grid .k-table-tbody .k-grid-norecords.k-table-row:hover {
    background-color: unset;
}

.header-icon-padding {
    /* Used to prevent small icons from getting slightly cut 
        by the edge of the container on certain screen dimensions */
    padding: 1px;
}
/* #endregion */