/*---------- Base Datagrid styling -----*/
.base-custom-radzen-grid-styling {
    padding: 0 1em 1em !important;
    border-radius: 8px !important;
}

    .base-custom-radzen-grid-styling > .rz-data-grid-data {
        border: var(--rz-grid-cell-border);
        border-radius: 8px !important;
        border-top: none !important;
        margin-bottom: 0.7em;
    }
        /* The next two rules ensure that when the user enters row edit, the elements inside the row edit do not enlarge the height of the row itself, our CEO hates that */
        .base-custom-radzen-grid-styling > .rz-data-grid-data tbody > .rz-datatable-edit td {
            padding-top: 0.29em !important;
            padding-bottom: 0.29em !important;
        }

            .base-custom-radzen-grid-styling > .rz-data-grid-data tbody > .rz-datatable-edit td textarea {
                margin-bottom: -5px;
            }

    .base-custom-radzen-grid-styling th div > .rz-column-title > .rz-column-title-content {
        font-weight: 600 !important;
    }

    .base-custom-radzen-grid-styling > .rz-data-grid-data > .rz-grid-table tfoot td {
        background-color: var(--regla-blue-700) !important;
        border: none !important;
    }

        .base-custom-radzen-grid-styling > .rz-data-grid-data > .rz-grid-table tfoot td .rz-text-subtitle1 {
            color: white !important;
            font-weight: normal !important;
        }

    .base-custom-radzen-grid-styling th div > span > .rzi-sort-asc, .base-custom-radzen-grid-styling th div > span > .rzi-sort-desc {
        color: var(--regla-primary-darker) !important;
    }

    .base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) {
        background-color: var(--regla-primary-subtle) !important;
    }

        .base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) .rz-column-title, .base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) .rz-column-drag, .base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) div > span > .rzi-sort-asc, .base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) div > span > .rzi-sort-desc {
            color: var(--regla-primary) !important;
        }

    .base-custom-radzen-grid-styling > .rz-group-header {
        /* we want the same color as the defaul table row od color */
        background-color: var(--rz-grid-stripe-odd-background-color);
        padding-left: 0em !important;
        padding-right: 0em !important;
        border-bottom: none !important;
        margin-bottom: 1em !important;
    }

    .base-custom-radzen-grid-styling > .rz-pager .rz-pager-first, .rz-pager-last {
        display: none !important;
    }

    .base-custom-radzen-grid-styling > .rz-pager .rz-pager-prev, .rz-pager-next, .base-custom-radzen-grid-styling > .rz-pager > .rz-pager-pages > .rz-pager-element:not(.rz-state-active) {
        background-color: transparent !important;
    }
    /* Overall header template styling */
    .base-custom-radzen-grid-styling > .rz-group-header > .rz-custom-header {
        width: 100% !important;
        /* rz-group-header makes rz-custom-header share the same space with other Radzen generated components e.g. rz-column-picker. So push them down to the next line and if we achive it we are left with some deadspace, this margin rule ensure that this deadspace is removed.*/
        margin-right: -1em;
    }

.base-custom-radzen-grid-styling-header-top-part {
    width: 100% !important;
    margin-top: 1em;
}

.base-custom-radzen-grid-styling-header-bottom-part {
    width: calc(100% - 110px);
    /* NOTE: If base-custom-radzen-grid-styling-header-bottom-part does not have any items in it then it will not apply the spacing which 'Column Visibility Dropdown' depends on in such cases you need to make an :empty rule and apply margin-top:3.5em;
	 to esnure that the table looks correct. */
    margin-top: 1.45em;
}

    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 95%;
    }

        .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer:empty {
            margin-top: 3.5em;
        }

@media (max-width: 1350px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 85%;
    }
}

@media (max-width: 970px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 90%;
        margin-bottom: 0.5em;
    }
}

@media (max-width: 730px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 85%;
    }
}

@media (max-width: 610px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 60%;
        display: none !important;
    }
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: none;
}

    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
        justify-content: end !important;
    }

    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu > .rz-navigation-item > .rz-navigation-menu {
        box-shadow: none !important;
    }
/* --Column Visibility Dropdown settings--*/
/* If the table has a column picker, we minimize it with CSS. If we were to implement our own picker, we would need to implement our own custom visibility lifecycle, hook it into Radzen’s functionality, and also control the rendering process, which is way too much work for just changing the look and size of the column picker. */
.base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown {
    max-width: 140px;
    position: absolute;
    right: 15px;
    height: 2.1em !important;
    margin-top: 1.45em;
}

    .base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown > .rz-dropdown-label {
        margin-top: -0.3em;
    }
/* if the table has only 1 part in its header then we need to adjust the dropdown correctly */
.only-one-part-header > .rz-group-header > .rz-column-picker > .rz-dropdown {
    margin-top: -1.2em !important;
}

.base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown > .rz-dropdown-trigger > .rzi-chevron-down:before {
    color: var(--rz-primary);
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-leftside {
    width: 70%;
}
/*----------Razden Responsive datagrid logic ----------*/
.razden-custom-responsive-grid .hideInDesktop {
    display: none !important;
}

.razden-custom-responsive-grid .razden-custom-responsive-grid-ResponsiveInputSize {
    width: 100%;
}

@media (max-width: 768px) {
    .razden-custom-responsive-grid .razden-custom-responsive-grid-ResponsiveInputSize {
        width: 100%;
        max-width: 230px;
    }
    /**You can do this in code but then u need to use JS (only possible to get window width that way) and that defeats the purpose of Blazor*/
    .rz-dialog-side {
        width: 100% !important;
    }

    .razden-custom-responsive-grid {
        max-height: 600px;
    }

        .razden-custom-responsive-grid .hideInDesktop {
            display: inline-block !important;
        }

        .razden-custom-responsive-grid .hideInMobile {
            display: none !important;
        }

        .razden-custom-responsive-grid .wrapWordsIfMobile {
            white-space: normal;
        }
        /* Inside row expansion, text that belongs together is covered inside <span> elements this ensure that this text breaks on by <span> for better redability*/
        .razden-custom-responsive-grid .razden-custom-responsive-grid-rowExpansion-Text-wrapping {
            display: flex;
            flex-wrap: wrap;
        }

            .razden-custom-responsive-grid .razden-custom-responsive-grid-rowExpansion-Text-wrapping > span {
                display: inline-block;
                word-break: break-all;
                /* Ensures words break within the span */
                margin-right: 7px;
                /* Adds space between words */
            }

        .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody .rz-column-title {
            font-weight: bold;
        }
        /* this fixes a UI book where the background color of the footer does not span the width of the table*/
        .razden-custom-responsive-grid > .rz-data-grid-data > table > tfoot td:last-child {
            width: 100%;
        }

        .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > .rz-col-icon {
            display: flex;
            justify-content: end;
        }

            .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > .rz-col-icon > a {
                margin-right: 0.5em;
            }
}

@media screen and (min-width: 380px) and (max-width: 768px) {
    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td:not(.rz-col-icon) {
        display: flex;
        justify-content: space-between;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td > .rz-column-title {
        flex: 0 0 35%;
        white-space: normal;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td > .rz-cell-data {
        flex: 0 0 65%;
        text-align: left;
        display: flex;
        justify-content: flex-end;
        white-space: normal;
    }
}



@media (max-width: 777px) {
    .base-custom-radzen-grid-desktop-only {
        display: none;
    }

    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu {
        display: block;
    }

    .base-custom-radzen-grid-styling-header-bottom-part {
        margin-top: 1.5em;
    }

    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside {
        width: 100% !important;
    }

    .base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown {
        margin-top: 2.6em !important;
    }
}