/* Datatable - manually initialized */

:root {
    /* GLOWNY KOLOR - TLO TYTULU TABELKI I KOLUMN */
    --primary-color: #741200;
    /* KOLOR TEKSTU W TYTULE TABELKI */
    --caption-text-color: #fff;
    /* KOLOR AKCENTU - PASEK PO LEWEJ OD TYTULU TABELKI */
    --accent-color: #b34a2a;
    /* KOLOR TŁA KAŻDEGO NIEPARZYSTEGO WPISU */
    --odd-entry-bg-color: #fff;
    /* KOLOR TŁA KAŻDEGO PARZYSTEGO WPISU */
    --even-entry-bg-color: #ffe5e594;
    /* KOLOR TŁA GDY NIE MA WPISÓW - PRZY WYSZUKIWANIU */
    --empty-entry-bg-color: #e4e4e4;
    /* KOLOR TŁA PRZY NAJECHANIU NA NIEPARZYSTY WPIS */
    --odd-entry-bg-hover-color: #e38f8f;
    /* KOLOR TŁA PRZY NAJECHANIU NA PARZYSTY WPIS */
    --even-entry-bg-hover-color: #e38f8f;
    /* KOLOR TEKSTU LINKÓW W TABELCE */
    --hyperlink-color: #4a1b0c;
    /* KOLOR TEKSTU LINKÓW W TABELCE PO NAJECHANIU */
    --hyperlink-hover-color: #741200;
    /* KOLOR TEKSTU / SYMBOLI NA PRZYCISKACH OD PAGINACJI */
    --pagination-foreground-color: #ffffff;
}

.view-content .dataTables_wrapper {
    font-size: 14px;
    margin-bottom: 60px;
    margin-top: 60px;

    .top {

        /* SEARCH BOX */
        .dataTables_filter {
            label {
                margin-right: 10px;
                align-items: center;
                display: flex;
                margin-bottom: 10px;
                font-size: 14px;
                text-align: left;

                /* SEARCH INPUT */
                input {
                    border-radius: 40px;
                    border: 2px solid var(--primary-color);
                    text-align: center;
                    display: flex;
                    justify-content: right;
                    font-size: 14px;
                    padding: 8px 0 8px 0;
                    width: 100%;
                    transition: border-color 0.4s;
                    outline: none;

                    &:hover,
                    &:focus-visible {
                        border-color: var(--accent-color);
                    }
                }
            }
        }
    }

    .dataTable {

        /* TYTUŁ TABELKI */
        caption {
            margin-bottom: 15px;
            background-color: var(--primary-color);
            padding: 10px;
            color: var(--caption-text-color);
            border-left: 5px solid var(--accent-color);
            font-size: 20px;
        }

        /* OPISY KOLUMN */
        thead tr {
            background-color: var(--primary-color);
            color: var(--caption-text-color);
            margin-bottom: 8px;
            padding-bottom: 8px;
            width: 100%;
            border: none;
        }

        tbody {

            tr {
                transition: background-color 0.5s;
                border: none !important;
            }

            /* TŁO NIEPARZYSTYCH WPISÓW */
            tr.odd {
                background-color: var(--odd-entry-bg-color);

                &:hover,
                &:focus-visible,
                &:has(a:focus-visible, time:focus-visible) {
                    background-color: var(--odd-entry-bg-hover-color);
                }

                &:has(td.dataTables_empty) {
                    background-color: var(--empty-entry-bg-color);
                }
            }

            /* TŁO PARZYSTYCH WPISÓW */
            tr.even {
                background-color: var(--even-entry-bg-color);

                &:hover,
                &:focus-visible,
                &:has(a:focus-visible, time:focus-visible) {
                    background-color: var(--even-entry-bg-hover-color);
                }
            }

            tr td a {
                color: var(--hyperlink-color);
                transition: color 0.4s;

                &:hover,
                &:focus-visible {
                    color: var(--hyperlink-hover-color);
                }
            }
        }
    }

    .bottom {
        .dataTables_length {
            margin-top: 15px;
            display: flex;
            justify-content: center;

            select {
                margin: 0 10px;
            }

            label {
                margin-left: 15px;
                margin-bottom: unset;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
            }
        }

        .dataTables_paginate {
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: right;

            .paginate_button {
                width: 42px;
                height: 42px;
                display: flex;
                border: unset;
                justify-content: center;
                background: unset;
            }

            .paginate_button.first,
            .paginate_button.previous,
            .paginate_button.next,
            .paginate_button.last {
                font-size: 0;
                background: none;
                border: none;
                -webkit-tap-highlight-color: transparent;
                position: relative;
            }

            /* Border/background layer */
            .paginate_button.first::before,
            .paginate_button.previous::before,
            .paginate_button.next::before,
            .paginate_button.last::before {
                content: '';
                position: absolute;
                inset: 0;
                border: 2px solid var(--primary-color);
                background-color: transparent;
                transition: background-color 0.3s;
            }

            /* Arrow icon layer */
            .paginate_button.first::after,
            .paginate_button.previous::after,
            .paginate_button.next::after,
            .paginate_button.last::after {
                content: '';
                position: absolute;
                inset: 0;
                background-color: var(--primary-color);
                mask-size: 42px;
                mask-repeat: no-repeat;
                -webkit-mask-size: 42px;
                -webkit-mask-repeat: no-repeat;
                transition: background-color 0.3s;
            }

            .paginate_button.first::after {
                mask-image: url(/themes/THEMENAME/img/double_arrows_white.svg);
                mask-position: center -42px;
                -webkit-mask-image: url(/themes/THEMENAME/img/double_arrows_white.svg);
                -webkit-mask-position: center -42px;
            }

            .paginate_button.previous::after {
                mask-image: url(/themes/THEMENAME/img/arrows_white.svg);
                mask-position: center -42px;
                -webkit-mask-image: url(/themes/THEMENAME/img/arrows_white.svg);
                -webkit-mask-position: center -42px;
            }

            .paginate_button.next::after {
                mask-image: url(/themes/THEMENAME/img/arrows_white.svg);
                mask-position: center 0;
                -webkit-mask-image: url(/themes/THEMENAME/img/arrows_white.svg);
                -webkit-mask-position: center 0;
            }

            .paginate_button.last::after {
                mask-image: url(/themes/THEMENAME/img/double_arrows_white.svg);
                mask-position: center 0;
                -webkit-mask-image: url(/themes/THEMENAME/img/double_arrows_white.svg);
                -webkit-mask-position: center 0;
            }

            /* Hover/focus/active: fill background, switch arrow to foreground color */
            .paginate_button.first:not(.disabled):hover::before,
            .paginate_button.first:not(.disabled):focus::before,
            .paginate_button.first:not(.disabled):active::before,
            .paginate_button.previous:not(.disabled):hover::before,
            .paginate_button.previous:not(.disabled):focus::before,
            .paginate_button.previous:not(.disabled):active::before,
            .paginate_button.next:not(.disabled):hover::before,
            .paginate_button.next:not(.disabled):focus::before,
            .paginate_button.next:not(.disabled):active::before,
            .paginate_button.last:not(.disabled):hover::before,
            .paginate_button.last:not(.disabled):focus::before,
            .paginate_button.last:not(.disabled):active::before {
                background-color: var(--primary-color);
            }

            .paginate_button.first:not(.disabled):hover::after,
            .paginate_button.first:not(.disabled):focus::after,
            .paginate_button.first:not(.disabled):active::after,
            .paginate_button.previous:not(.disabled):hover::after,
            .paginate_button.previous:not(.disabled):focus::after,
            .paginate_button.previous:not(.disabled):active::after,
            .paginate_button.next:not(.disabled):hover::after,
            .paginate_button.next:not(.disabled):focus::after,
            .paginate_button.next:not(.disabled):active::after,
            .paginate_button.last:not(.disabled):hover::after,
            .paginate_button.last:not(.disabled):focus::after,
            .paginate_button.last:not(.disabled):active::after {
                background-color: var(--pagination-foreground-color);
            }

            .paginate_button.current,
            .paginate_button.current:hover {
                border: 2px solid var(--primary-color);
                color: var(--pagination-foreground-color) !important;
                background-color: var(--primary-color);
            }

            /* Non-current numbered page buttons */
            .paginate_button:not(.current):not(.disabled):not(.first):not(.previous):not(.next):not(.last) {
                color: var(--primary-color) !important;
                transition: background-color 0.3s, color 0.3s;
            }

            .paginate_button:not(.current):not(.disabled):not(.first):not(.previous):not(.next):not(.last):hover,
            .paginate_button:not(.current):not(.disabled):not(.first):not(.previous):not(.next):not(.last):focus,
            .paginate_button:not(.current):not(.disabled):not(.first):not(.previous):not(.next):not(.last):active {
                background-color: var(--primary-color);
                color: var(--pagination-foreground-color) !important;
            }

            .paginate_button.disabled,
            .paginate_button.disabled:hover,
            .paginate_button.disabled:active,
            .paginate_button.disabled:focus,
            .paginate_button.disabled:focus-within {
                filter: contrast(0);
            }

            .paginate_button.disabled::before,
            .paginate_button.disabled::after {
                transition: none;
            }

        }
    }
}