/* Phone-friendly data tables.
   A table marked class="stacked-mobile" stops being a table on narrow screens and becomes one
   card per row, so nothing is hidden off to the right and there is no sideways scrolling.
   Each cell is labelled from its column header by js/mobile-tables.js (data-label). */

@media (max-width: 767px) {

    .stacked-mobile thead {
        display: none;
    }

    .stacked-mobile,
    .stacked-mobile tbody,
    .stacked-mobile tr,
    .stacked-mobile td {
        display: block;
        width: 100% !important;
    }

    .stacked-mobile {
        border: 0 !important;
    }

    .stacked-mobile tr {
        border: 1px solid #d6d6e0;
        border-radius: 6px;
        background: #fff;
        margin: 0 0 12px;
        padding: 8px 0;
        overflow: hidden;
    }

    /* Striping reads as noise once rows are cards. */
    .stacked-mobile.table-striped tbody tr:nth-of-type(odd) {
        background: #fff;
    }

    .stacked-mobile td {
        border: 0 !important;
        padding: 4px 12px;
        text-align: left;
        white-space: normal;
        word-break: break-word;
    }

    .stacked-mobile td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #4a4a6a;
    }

    /* The cover and the buttons speak for themselves. */
    .stacked-mobile td:first-child::before,
    .stacked-mobile td:last-child::before {
        content: "";
    }

    .stacked-mobile td:first-child {
        text-align: center;
        padding-bottom: 8px;
    }

    .stacked-mobile td:first-child img {
        max-height: 150px !important;
    }

    /* A cell with nothing in it would otherwise show a bare label. */
    .stacked-mobile td.is-empty {
        display: none;
    }

    .stacked-mobile td:last-child {
        padding-top: 8px;
    }

    .stacked-mobile td:last-child .btn {
        margin: 2px 4px 2px 0;
    }

    /* DataTables' own chrome, and the cards, must not push the page sideways. */
    .dataTables_wrapper {
        overflow-x: hidden;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 6px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin: 4px 0 0;
    }

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

    .card-body {
        padding: 12px;
    }
}