//
// _datatables.scss
//

.dt-scroll {
    width: 100%;

    .dt-scroll-body {

        thead tr,
        tfoot tr {
            height: 0;
        }

        thead tr,
        tfoot tr {

            th,
            td {
                height: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                border-top-width: 0 !important;
                border-bottom-width: 0 !important;

                .dt-scroll-sizing {
                    height: 0 !important;
                    overflow: hidden !important;
                }
            }
        }
    }
}

table.dataTable {

    thead>tr,
    tfoot>tr {

        th,
        td {
            .dt-column-order {
                opacity: 0;
            }

            &:hover,
            &.dt-ordering-asc,
            &.dt-ordering-desc {
                .dt-column-order {
                    opacity: 1;
                }
            }

            &.dt-orderable-asc span.dt-column-order::before,
            &.dt-ordering-asc span.dt-column-order::before {
                position: absolute;
                display: block;
                bottom: calc(50% - 3px);
                content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23515964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M6 15l6 -6l6 6'/></svg>");
            }

            &.dt-orderable-desc span.dt-column-order::after,
            &.dt-ordering-desc span.dt-column-order::after {
                position: absolute;
                display: block;
                top: calc(50% - 3px);
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23515964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
            }

            &.dt-orderable-asc,
            &.dt-orderable-desc,
            &.dt-ordering-asc,
            &.dt-ordering-desc {
                span.dt-column-order {
                    position: relative;
                    width: 12px;
                    height: 20px;

                    &:before,
                    &:after {
                        inset-inline-start: 0;
                        opacity: 0.25;
                        line-height: 9px;
                        font-size: 0.8125rem;
                        font-weight: $font-weight-semibold;
                    }
                }
            }

            &.dt-ordering-asc span.dt-column-order:before,
            &.dt-ordering-desc span.dt-column-order:after {
                opacity: 0.6;
            }

            &.sorting_asc_disabled span.dt-column-order:before,
            &.sorting_desc_disabled span.dt-column-order:after {
                display: none;
            }

            &:active {
                outline: none;
            }

            div.dt-column-header,
            div.dt-column-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 4px;

                span.dt-column-title {
                    flex-grow: 1;

                    &:empty {
                        display: none;
                    }
                }
            }
        }
    }

    tbody {

        >tr.selected,
        >tr>.selected {
            background-color: rgba(var(--#{$prefix}warning-rgb), 0.1);
            color: inherit;

            td {
                background-color: rgba(var(--#{$prefix}warning-rgb), 0.1);
                color: inherit;
            }
        }
    }
}

div.dt-scroll-body {
    >table.dataTable {

        >thead>tr>th,
        >thead>tr>td {
            overflow: hidden;
        }
    }
}

.dt-processing {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 100px;
    margin-inline-start: -50px;
    margin-top: -22px;
    text-align: center;
    padding: 2px;
    z-index: 10;
    border: 1px solid var(--#{$prefix}border-color);

    >div:last-child {
        position: relative;
        width: 80px;
        height: 15px;
        margin: 1em auto;

        >div {
            position: absolute;
            top: 0;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: var(--#{$prefix}primary);
            animation-timing-function: cubic-bezier(0, 1, 1, 0);

            &:nth-child(1) {
                inset-inline-start: 8px;
                animation: datatables-loader-1 0.6s infinite;
            }

            &:nth-child(2) {
                inset-inline-start: 8px;
                animation: datatables-loader-2 0.6s infinite;
            }

            &:nth-child(3) {
                inset-inline-start: 32px;
                animation: datatables-loader-2 0.6s infinite;
            }

            &:nth-child(4) {
                inset-inline-start: 56px;
                animation: datatables-loader-3 0.6s infinite;
            }
        }
    }
}

@keyframes datatables-loader-1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes datatables-loader-3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes datatables-loader-2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

table.dataTable {
    &.nowrap {

        th,
        td {
            white-space: nowrap;
        }
    }

    th,
    td {
        box-sizing: border-box;

        &.dt-left {
            text-align: start;

            div.dt-column-header,
            div.dt-column-footer {
                flex-direction: row;
            }
        }

        &.dt-center {
            text-align: center;
        }

        &.dt-right {
            text-align: end;

            div.dt-column-header,
            div.dt-column-footer {
                flex-direction: row-reverse;
            }
        }

        &.dt-justify {
            text-align: justify;

            div.dt-column-header,
            div.dt-column-footer {
                flex-direction: row;
            }
        }

        &.dt-nowrap {
            white-space: nowrap;
        }

        &.dt-empty {
            text-align: center;
            vertical-align: top;
        }
    }

    thead,
    tfoot {

        th,
        td {
            text-align: start;

            &.dt-head-left {
                text-align: start;

                div.dt-column-header,
                div.dt-column-footer {
                    flex-direction: row;
                }
            }

            &.dt-head-center {
                text-align: center;
            }

            &.dt-head-right {
                text-align: end;

                div.dt-column-header,
                div.dt-column-footer {
                    flex-direction: row-reverse;
                }
            }

            &.dt-head-justify {
                text-align: justify;

                div.dt-column-header,
                div.dt-column-footer {
                    flex-direction: row;
                }
            }

            &.dt-head-nowrap {
                white-space: nowrap;
            }
        }
    }

    tbody {

        th,
        td {
            &.dt-body-left {
                text-align: start;
            }

            &.dt-body-center {
                text-align: center;
            }

            &.dt-body-right {
                text-align: end;
            }

            &.dt-body-justify {
                text-align: justify;
            }

            &.dt-body-nowrap {
                white-space: nowrap;
            }
        }
    }
}

/*! Bootstrap 5 integration for DataTables
 *
 * ©2020 SpryMedia Ltd, all rights reserved.
 * License: MIT datatables.net/license/mit
 */
table.table.dataTable {
    clear: both;
    margin-bottom: 0;
    max-width: none;
    border-spacing: 0;
}

.dt-container {
    position: relative;
    margin-top: -0.75rem;

    .dt-layout-start {
        >*:not(:last-child) {
            margin-inline-end: 1em;
        }
    }

    .dt-layout-end {
        >*:not(:first-child) {
            margin-inline-start: 1em;
        }
    }

    .dt-layout-full {
        width: 100%;

        >*:only-child {
            margin-inline-start: auto;
            margin-inline-end: auto;
        }
    }

    .dt-layout-table {
        >div {
            display: block !important;
        }
    }

    .dt-length {
        label {
            font-weight: normal;
            text-align: start;
            white-space: nowrap;
        }

        select {
            width: auto;
            display: inline-block;
            margin-inline-end: 0.5em;
        }
    }

    .dt-search {
        text-align: end;

        label {
            font-weight: normal;
            white-space: nowrap;
            text-align: start;
        }

        input {
            margin-inline-start: 0.5em;
            display: inline-block;
            width: auto;
        }
    }

    .dt-paging {
        margin: 0;

        ul.pagination {
            margin: 0;
            flex-wrap: wrap;
            padding-top: calc(var(--#{$prefix}card-spacer-y) - 0.75rem);
        }
    }

    .dt-row {
        position: relative;
    }

    .dt-info {
        padding-top: calc(var(--#{$prefix}card-spacer-y) - 0.75rem);
    }
}

// Responsive overrides
@media screen and (max-width: 767px) {
    .dt-container {
        .dt-layout-start {
            >*:not(:last-child) {
                margin-inline-end: 0;
            }
        }

        .dt-layout-end {
            >*:not(:first-child) {
                margin-inline-start: 0;
            }
        }
    }
}

.dt-scroll-head {
    table.dataTable {
        margin-bottom: 0 !important;
    }

    table.table-bordered {
        border-bottom-width: 0;
    }
}

.dt-scroll-body {
    >table {
        border-top: none;
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        >thead>tr {
            border-width: 0 !important;
        }

        >tbody {
            >tr:first-child {
                border-top-width: 0;
            }

            // >tr:last-child {
            //     >* {
            //         border-bottom: none;
            //     }
            // }
        }
    }
}

.dt-scroll-foot {
    >.dt-scroll-footInner {
        box-sizing: content-box;

        >table {
            margin-top: 0 !important;
            border-top: none;

            >tfoot>tr:first-child {
                border-top-width: 0 !important;
            }
        }
    }
}

// Responsive styles
@media screen and (max-width: 767px) {
    .dt-container {

        div.dt-length,
        div.dt-search,
        div.dt-info,
        div.dt-paging {
            text-align: center;
        }

        .row {
            --bs-gutter-y: 0.5rem;
        }

        div.dt-paging {
            ul.pagination {
                justify-content: center !important;
            }
        }
    }
}

.table-responsive {
    >.dt-container {
        >.row {
            margin: 0;

            >div[class^='col-'] {
                &:first-child {
                    padding-inline-start: 0;
                }

                &:last-child {
                    padding-inline-end: 0;
                }
            }
        }
    }
}

// Select Info
.select-info {
    background-color: var(--#{$prefix}warning-bg-subtle);
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: $font-weight-semibold;

    .select-item {
        margin: 0 !important;
    }
}

// Data Table copy button
div.dt-button-info {
    background-color: var(--#{$prefix}primary);
    border: none;
    color: $white;
    box-shadow: none;
    border-radius: 3px;
    text-align: center;
    z-index: 21;

    h2 {
        border-bottom: none;
        background-color: rgba($white, 0.2);
        color: $white;
    }
}

// Fixed Header
.dtfh-floatingparent-head {
    top: $topbar-height !important;
}

table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
    background-color: var(--#{$prefix}body-bg);
}

@media screen and (max-width: 767px) {

    div.dt-container div.dt-length,
    div.dt-container div.dt-search,
    div.dt-container div.dt-info,
    div.dt-container div.dt-paging {
        text-align: center;
    }

    .dt-paging {
        .pagination {
            justify-content: center;
        }
    }

    .dt-length {
        margin-bottom: 10px;
    }
}

// Fixed Column
table.dataTable {

    thead,
    tfoot {
        tr {

            >.dtfc-fixed-start,
            >.dtfc-fixed-end {
                background-color: var(--#{$prefix}secondary-bg);
            }
        }
    }

    tbody {
        tr {

            >.dtfc-fixed-start,
            >.dtfc-fixed-end {
                background-color: var(--#{$prefix}secondary-bg);
            }
        }
    }
}

.dtfc-top-blocker,
.dtfc-bottom-blocker {
    background-color: var(--#{$prefix}body-bg);
}

.dt-scroll-body {
    border-inline-start-color: var(--#{$prefix}table-color) !important;
}

.dt-scroll-headInner,
.dt-scroll-footInner {
    table.table-bordered {
        tr {
            th:first-child {
                border-inline-start-color: var(--#{$prefix}border-color) !important;
            }
        }
    }
}

//Column Search
.column-search-input-bar {
    .dt-column-order {
        display: none;
    }
}

// Select Checkbox
table.dataTable input.dt-select-checkbox {
    height: $form-check-input-width;
    width: $form-check-input-width;
    font-size: $font-size-base;
    border: $form-check-input-border;
}

table.dataTable input.dt-select-checkbox:checked {
    border: var(--#{$prefix}border-width) solid var(--#{$prefix}primary);

    &::after {
        content: none;
    }
}

table.dataTable>tbody>tr.selected input.dt-select-checkbox:checked {
    border: var(--#{$prefix}border-width) solid var(--#{$prefix}primary);
}

// Export Files
div.dt-button-collection .dropdown-menu {
    background-color: var(--#{$prefix}secondary-bg);
    border: 1px solid var(--#{$prefix}border-color);
    box-shadow: var(--#{$prefix}dropdown-box-shadow);
}