/* Application-specific styling for maintained ajaxtables. */

/* Keep the sites overview table directly below its preceding page content. */
/* The legacy sites stylesheet is registered later, so this reset must win its margin rule. */

h1.sites_h1 {

    margin-bottom: 0;
}

div#box_sites_support {

    margin-top: 0 !important;
    padding-top: 0 !important;
}

div#box_sites {

    margin-top: 0 !important;
    padding-top: 0 !important;
}

div#box_sites > div.ajaxtable_container {

    padding-top: 0 !important;
    row-gap: 0;
}

/* Stack the overview paginator and search controls on narrow screens. */

@media (max-width: 800px) {

    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap {

        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }

    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_map,
    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_main {

        flex: 0 0 100%;
        min-width: 0;
        max-width: 100%;
        overscroll-behavior-x: contain;
    }

    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_pagination.top,
    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_search_and_options,
    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_pagination.bottom,
    div#box_sites > div.ajaxtable_container.ajaxtable_hasMap
        > div.ajaxtable_container_itemsperpage {

        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    div#box_sites > div.ajaxtable_container
        div.ajaxtable_container_search_and_options ul li.ajaxtable_container_search,
    div#box_sites > div.ajaxtable_container
        div.ajaxtable_container_search_and_options ul li.ajaxtable_container_column_options {

        justify-content: flex-start;
    }

    div#box_sites > div.ajaxtable_container
        div.ajaxtable_search_input_wrap {

        flex: 1 1 0;
        min-width: 0;
        width: 100%;
    }

    div#box_sites > div.ajaxtable_container
        input.ajaxtable_search_input {

        width: 100%;
    }
}

div.ajaxtable_container table.ajaxtable_table td div.subdiv {

    display: inline-block;
}

/* Keep the maintained system-list format columns at their intrinsic width. */

div.ajaxtable_container table tr td.sites_system_type,
div.ajaxtable_container table tr td.sites_apm_status {

    width: 1px;
    white-space: nowrap;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Keep the system-list monitoring column sized to its rendered content. */

div.ajaxtable_container table tr td.ajaxtable_onoff_date,
div.ajaxtable_container table thead th.ajaxtable_onoff_date {

    width: 0.1%;
    min-width: 0;
}

/* Keep only the system-move picker action cell compact. */

div.ajaxtable_container table tr td.sites_system_move_picker {

    width: 1px;
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Keep the migrated system-type indicator in the same joined-pill layout as the legacy table. */

div.ajaxtable_container table tr td.sites_system_type {

    white-space: nowrap;
}

div.ajaxtable_container table tr td.sites_system_type div.square {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 25px !important;
    min-width: 25px !important;
    min-height: 36px;
    padding: 6px 0 !important;
    margin: 1px 0 1px 0 !important;
    border-right: 1px solid #fff;
    border-radius: 3px 0 0 3px !important;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

div.ajaxtable_container table tr td.sites_system_type div.square i,
div.ajaxtable_container table tr td.sites_system_type div.square svg {

    transform: translateY(-1px);
}

div.ajaxtable_container table tr td.sites_system_type div.square + div {

    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-width: auto !important;
    min-height: 36px;
    padding: 6px 6px 6px 4px !important;
    margin: 1px 2px 1px 0 !important;
    border-radius: 0 3px 3px 0 !important;
    line-height: 16px;
    vertical-align: middle;
}

div.ajaxtable_container table tr td.sites_system_type div.blue,
div.ajaxtable_container table tr td.sites_system_type div.red {

    color: #fff !important;
}

div.ajaxtable_container table tr td.sites_system_type div.blue {

    background-color: var(--lor-color) !important;
}

div.ajaxtable_container table tr td.sites_system_type div.red {

    background-color: red !important;
}

/* APM supplies the status message and colour; the maintained div format supplies its shape. */

div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.red,
div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.green,
div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.orange,
div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.blue {

    color: #fff !important;
}

div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.red {

    background-color: red !important;
}

div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.green {

    background-color: green !important;
}

div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.orange {

    background-color: orange !important;
}

div.ajaxtable_container table tr td.sites_apm_status div.ajaxtable_divElement.blue {

    background-color: var(--lor-color-dark) !important;
}

div.ajaxtable_container table tr td.sites_apm_status a.ajaxtable_internalLink {

    cursor: pointer;
}