/*
 * Copyright ©  2026 Thomas J Collinson
 * All rights reserved
 *
 * The table skin the pages' `dataTable` and `display` classes ask for, and the layout of the
 * controls createTable.js builds around a table: the search box, the row count and the paging.
 *
 * What DataTables itself would have drawn is not here. There is no DataTables script in this
 * repository, so the sorting arrows, the length menu, the processing overlay, the scrolling body
 * and the row selection this file used to carry could never be reached, and the rules that drew
 * them have gone with them.
 */

:root {
    --data-tables-colour-white: 255, 255, 255;
    --data-tables-colour-rule: 17, 17, 17;
    --data-tables-colour-ink: 51, 51, 51;
    --data-tables-colour-disabled: 102, 102, 102;
    --data-tables-colour-hairline: 221, 221, 221;
    --data-tables-colour-stripe: 249, 249, 249;
    --data-tables-colour-hover: 245, 245, 245;
    --data-tables-colour-current-border: 202, 202, 202;
    --data-tables-colour-current-end: 220, 220, 220;
    --data-tables-colour-pressed-start: 88, 88, 88;
    --data-tables-colour-active-start: 43, 43, 43;
    --data-tables-colour-active-end: 12, 12, 12;
}

/* The table */

table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
    box-sizing: content-box;

    th, td {
        box-sizing: content-box;
    }

    thead th, tfoot th {
        font-weight: bold;
    }

    thead th, thead td {
        padding: 10px 18px;
        border-bottom: 1px solid rgb(var(--data-tables-colour-rule));

        &:active {
            outline: none;
        }
    }

    tfoot th, tfoot td {
        padding: 10px 18px 6px 18px;
        border-top: 1px solid rgb(var(--data-tables-colour-rule));
    }

    tbody tr {
        background-color: rgb(var(--data-tables-colour-white));
    }

    tbody th, tbody td {
        padding: 8px 10px;
    }

    /* `display` is the shorthand the pages ask for: ruled rows, banded rows and a hover highlight */
    &.display {
        tbody th, tbody td {
            border-top: 1px solid rgb(var(--data-tables-colour-hairline));
        }

        tbody tr:first-child th, tbody tr:first-child td {
            border-top: none;
        }

        tbody tr.odd {
            background-color: rgb(var(--data-tables-colour-stripe));
        }

        tbody tr:hover {
            background-color: rgb(var(--data-tables-colour-hover));
        }
    }
}

/* The controls around it */

.dataTables_wrapper {
    position: relative;
    clear: both;

    /* The controls float, so the wrapper has to close over them */
    &::after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

    .dataTables_filter {
        float: right;
        text-align: right;
        color: rgb(var(--data-tables-colour-ink));

        input {
            margin-left: 0.5em;
        }
    }

    .dataTables_info {
        clear: both;
        float: left;
        padding-top: 0.755em;
        color: rgb(var(--data-tables-colour-ink));
    }

    .dataTables_paginate {
        float: right;
        text-align: right;
        padding-top: 0.25em;
        color: rgb(var(--data-tables-colour-ink));

        .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            margin-left: 2px;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
            color: rgb(var(--data-tables-colour-ink)) !important;
            border: 1px solid transparent;

            &.current, &.current:hover {
                color: rgb(var(--data-tables-colour-ink)) !important;
                border: 1px solid rgb(var(--data-tables-colour-current-border));
                background: linear-gradient(
                    to bottom,
                    rgb(var(--data-tables-colour-white)) 0%,
                    rgb(var(--data-tables-colour-current-end)) 100%
                );
            }

            &.disabled, &.disabled:hover, &.disabled:active {
                cursor: default;
                color: rgb(var(--data-tables-colour-disabled)) !important;
                border: 1px solid transparent;
                background: transparent;
                box-shadow: none;
            }

            &:hover {
                color: rgb(var(--data-tables-colour-white)) !important;
                border: 1px solid rgb(var(--data-tables-colour-rule));
                background: linear-gradient(
                    to bottom,
                    rgb(var(--data-tables-colour-pressed-start)) 0%,
                    rgb(var(--data-tables-colour-rule)) 100%
                );
            }

            &:active {
                outline: none;
                background: linear-gradient(
                    to bottom,
                    rgb(var(--data-tables-colour-active-start)) 0%,
                    rgb(var(--data-tables-colour-active-end)) 100%
                );
                box-shadow: inset 0 0 3px rgb(var(--data-tables-colour-rule));
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .dataTables_wrapper {
        .dataTables_info, .dataTables_paginate {
            float: none;
            text-align: center;
        }

        .dataTables_paginate {
            margin-top: 0.5em;
        }
    }
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
        margin-top: 0.5em;
    }
}