/*
 * Copyright ©  2026 Thomas J Collinson
 * All rights reserved
 *
 * The table createTable.js builds: the rows it shows and hides, the search box, the paging, the
 * column toggle, and the card layout the same table falls back to on a narrow screen.
 */

:root {
    --create-table-colour-white: 255, 255, 255;
    --create-table-colour-black: 0, 0, 0;
    --create-table-colour-panel: 239, 239, 239;
    --create-table-colour-border: 204, 204, 204;
    --create-table-colour-hairline: 221, 221, 221;
    --create-table-colour-mid: 136, 136, 136;
    --create-table-colour-muted: 170, 170, 170;
    --create-table-colour-cell: 85, 85, 85;
    --create-table-colour-dark: 51, 51, 51;
    --create-table-colour-link: 112, 170, 224;
    --create-table-colour-row-header: 249, 249, 249;

    --create-table-radius: 5px;
    --create-table-content-width: 95%;
    --create-table-toggle-width: 200px;
    --create-table-title-height: 40px;
    --create-table-line-height: 30px;
    --create-table-checkbox-size: 20px;
}

/* The table itself. Only the rows createTable.js has paged in are drawn. */

table.createTable {
    margin: 50px auto 15px auto;
    max-width: var(--create-table-content-width);

    th {
        text-align: center;
        color: rgb(var(--create-table-colour-white));
    }

    td {
        border-bottom-left-radius: var(--create-table-radius);
        border-bottom-right-radius: var(--create-table-radius);
    }

    tbody tr {
        display: none;

        /* A row the page owns, such as a status page expander, is never paged away */
        &.row-visible, &.tr-ignore {
            display: table-row;
        }
    }

    th.ct-hidden-column, td.ct-hidden-column {
        display: none;
    }

    td.mobile-only, th.mobile-only {
        display: none;
    }
}

tr.search-hidden {
    display: none;
}

/* The controls createTable.js hangs off the wrapper */

.dataTables_wrapper {
    max-width: 100%;
}

div.ct-content-holder {
    width: var(--create-table-content-width);
    margin: 0 auto;
}

a.paginate_display_none {
    display: none !important;
}

/* The column toggle, which opens on hover */

div.hide-column-container {
    width: var(--create-table-toggle-width);
    float: left;
    position: relative;
    cursor: pointer;
}

div.hide-column-title {
    height: var(--create-table-title-height);
    line-height: var(--create-table-title-height);
    text-align: center;
    background-color: rgb(var(--create-table-colour-panel));
    border: 1px solid rgb(var(--create-table-colour-border));
    border-radius: var(--create-table-radius);
}

form.hide-column-form {
    position: absolute;
    width: var(--create-table-toggle-width);
    padding: 10px;
    border-radius: var(--create-table-radius);
    border: 1px solid rgb(var(--create-table-colour-mid));
    background: rgb(var(--create-table-colour-white));
    box-shadow: 0 2px 5px 0 rgba(var(--create-table-colour-black), 0.5);
    z-index: 5;
}

div.hide-column-cb-container label {
    float: left;
    width: 80%;
    margin: 0;
    height: var(--create-table-line-height);
    line-height: var(--create-table-line-height);
    text-align: left;
    overflow: hidden;
}

.hide-column-cb-container input {
    float: right;
    width: var(--create-table-checkbox-size);
    height: var(--create-table-checkbox-size);
    margin: 5px 0;
}

/* The sort arrows, for a table the page has given `sort` to */

th.sort-header {
    cursor: pointer;

    &::selection {
        background: transparent;
    }
}

table th.sort-header::after {
    content: '';
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: rgb(var(--create-table-colour-panel)) transparent;
    visibility: hidden;
}

table th.sort-header:hover::after {
    visibility: visible;
}

table th.sort-up::after,
table th.sort-down::after,
table th.sort-down:hover::after {
    visibility: visible;
    opacity: 0.4;
}

table th.sort-up::after {
    border-bottom: none;
    border-width: 4px 4px 0;
}

/*
 * The card layout. Below the breakpoint each cell is drawn on a line of its own, labelled with the
 * heading its `data-th` carries, because the columns will not fit side by side.
 */

@media screen and (max-width: 768px) {
    div.hide-column-container {
        display: none;
    }

    table.createTable {
        border: none;
        box-shadow: none;
        margin-top: 10px;

        td {
            display: block;
            border-radius: 0;

            &:first-of-type {
                border-radius: var(--create-table-radius) var(--create-table-radius) 0 0;
            }

            &.desktop-only {
                display: none;
            }
        }
    }

    .dataTables_wrapper div.dataTables_filter {
        float: none;
        text-align: center;
    }

    tr.tr-ignore {
        border-radius: 0;

        td {
            min-height: 0;
            border-radius: 0 !important;
        }
    }
}

@media (max-width: 768px) {
    .rwd-table {
        margin: 1em 0;
        max-width: var(--create-table-content-width);

        tr {
            border-top: 1px solid rgb(var(--create-table-colour-hairline));
            border-bottom: 1px solid rgb(var(--create-table-colour-hairline));
        }

        th {
            display: none;
        }

        td {
            display: block;

            &:first-child {
                padding-top: 0.5em;
            }

            &:last-child {
                padding-bottom: 0.5em;
            }

            &::before {
                content: attr(data-th);
                font-weight: bold;
                display: inline-block;
                text-align: left !important;
                float: left;
                clear: left;
                width: 50%;
                color: rgb(var(--create-table-colour-muted));
            }
        }
    }

    td:first-of-type {
        border-top-left-radius: var(--create-table-radius);
        border-top-right-radius: var(--create-table-radius);
    }

    td:last-of-type {
        border-bottom-left-radius: var(--create-table-radius);
        border-bottom-right-radius: var(--create-table-radius);
    }

    .rwd-table td {
        text-align: right !important;
        float: right;
        width: 100%;
        box-sizing: border-box !important;
        background: rgb(var(--create-table-colour-cell)) !important;
        color: rgb(var(--create-table-colour-mid));
        border-bottom: 1px solid rgb(var(--create-table-colour-dark)) !important;
        border-top: 1px solid rgb(119, 119, 119) !important;
        text-shadow: 1px 1px 1px rgb(var(--create-table-colour-dark));
        min-height: var(--create-table-line-height);
        line-height: var(--create-table-line-height);

        a.link-button {
            margin: 0 auto !important;
            line-height: 1;
            float: none;
        }
    }

    table td.list-booking-ids a {
        color: rgb(var(--create-table-colour-link));
        margin-right: 0;
        font-weight: bold;
    }

    tr[data-rowheader]::before {
        content: "#" attr(data-rowheader);
        width: 100%;
        display: block;
        text-align: center;
        font-weight: bold;
        padding: 10px 0 10px 0;
        font-size: 18px;
        background-color: rgb(var(--create-table-colour-row-header));
    }

    .dataTables_filter input[type="search"] {
        width: var(--create-table-content-width);
        margin: 0 auto;
        float: none;
    }

    div.dataTables_paginate.paging_simple_numbers {
        margin-bottom: 10px;
    }

    td[data-th]::before {
        display: block;
        content: attr(data-th);
        margin-bottom: 10px;
        font-weight: bold;
    }

    table.createTable td.mobile-only,
    table.createTable th.mobile-only {
        display: block;
    }
}

@media (min-width: 769px) {
    .rwd-table {
        th, td {
            display: table-cell;
            /*
             * The cell padding is the last word on the subject: the `:first-child` and
             * `:last-child` rules this replaced could never take, being ordinary declarations
             * against an important one on the same cells.
             */
            padding: 1em !important;
        }

        td::before {
            display: none;
        }
    }
}