/*
 * Readable data tables on a phone.
 *
 * A DataTables list with 20 columns cannot fit a 380px screen. The usual
 * workaround — horizontal scrolling — means you can never see a whole record at
 * once, which is why the product list is unusable on a phone today.
 *
 * Below the tablet breakpoint each ROW becomes a CARD and each CELL becomes a
 * labelled line. Nothing is hidden, nothing scrolls sideways, and the labels
 * come from the real column headers so every list in the system — including the
 * modules — gets this without being touched individually.
 *
 * Above 992px this file does nothing at all.
 */

@media (max-width: 991px) {

    /* ---- undo DataTables' fixed-height / sideways scrolling ----
     *
     * DataTables writes INLINE pixel widths onto the scroll wrappers and onto
     * the table itself (style="width: 1840px"). Resetting only the wrappers
     * leaves the table forcing the page wider than the screen, which is what
     * makes the whole page scroll sideways. Every one of these needs !important
     * to beat an inline style. */

    .dataTables_wrapper .dataTables_scroll,
    .dataTables_wrapper .dataTables_scrollBody,
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollHeadInner,
    .dataTables_wrapper .dataTables_scrollFoot,
    .dataTables_wrapper .dataTables_scrollFootInner {
        overflow: visible !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .dataTables_wrapper .dataTables_scrollBody {
        max-height: none !important;
        height: auto !important;
    }

    /* The cloned header table above a scrolling body is now meaningless. */
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollFoot {
        display: none !important;
    }

    /* Beat the inline width on the table element itself. */
    .dataTables_wrapper table.dataTable,
    .table-responsive > table,
    table.mtbl {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .dataTables_wrapper table.dataTable > thead > tr > th,
    .dataTables_wrapper table.dataTable > tbody > tr > td {
        white-space: normal !important;
    }

    .table-responsive {
        overflow-x: visible !important;
        border: 0 !important;
        -ms-overflow-style: auto;
    }

    /* Safety net: nothing inside the page body should push it sideways. A
     * stray wide element is far worse on a phone than a clipped edge. */
    .content,
    .content-wrapper,
    #scrollable-container,
    .pos-tab,
    .pos-tab-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Toolbar buttons wrap instead of being cut off mid-word. */
    .box-title,
    .btn-group {
        float: none !important;
    }

    /* ---- floated action buttons ----
     *
     * Several list screens put their "Add" / "Download" buttons in a
     * float:right anchor and then rely on the page being wide enough. The table
     * wrapper that follows flows AROUND those floats, so on a narrow screen the
     * buttons keep most of the width and the list is squeezed into whatever is
     * left — roughly 160px on a phone.
     *
     * Clearing the wrapper is the actual fix; stacking the buttons is what
     * makes them tappable once they are on their own line. */

    .dataTables_wrapper,
    .table-responsive,
    .tab-content > .tab-pane > .row,
    #product_list_tab .dataTables_wrapper {
        clear: both !important;
    }

    /* Primary actions: icon and label centred together as one group, rather
     * than the icon pinned left and the text floating in the middle. */
    .tab-content .pull-right,
    .box-body > .pull-right,
    .nav-tabs-custom .pull-right,
    .tab-content a.tw-dw-btn,
    .box-body > a.tw-dw-btn {
        float: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-height: 46px;
        margin: 0 0 8px !important;
        padding: 0 16px !important;
        text-align: center;
    }

    .tab-content a.tw-dw-btn svg,
    .box-body > a.tw-dw-btn svg {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        margin: 0 !important;
    }

    /* Those screens separate the buttons from the table with <br><br>, which
     * now just adds dead space above the list. */
    .tab-content > .tab-pane > br,
    .box-body > br {
        display: none !important;
    }

    /* ---- the table becomes a stack of cards ---- */

    table.mtbl,
    table.mtbl > tbody,
    table.mtbl > tbody > tr,
    table.mtbl > tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }

    table.mtbl > thead {
        display: none !important;
    }

    table.mtbl {
        border: 0 !important;
        background: transparent !important;
    }

    /* A flex column so the card can be ordered sensibly regardless of the
     * order the columns happen to appear in. Left alone, "Actions" renders
     * above the product name simply because it is an earlier column. */
    table.mtbl > tbody > tr {
        position: relative;
        display: flex !important;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e6e9ef !important;
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 11px 13px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }

    table.mtbl > tbody > tr > td.mtbl-bare   { order: 1; }
    table.mtbl > tbody > tr > td.mtbl-title  { order: 2; }
    table.mtbl > tbody > tr > td             { order: 3; }
    table.mtbl > tbody > tr > td.mtbl-actions { order: 4; }

    /* The row-select box belongs in the corner, not on a line of its own. */
    table.mtbl > tbody > tr > td.mtbl-check {
        position: absolute !important;
        top: 10px;
        right: 11px;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
        z-index: 1;
    }

    table.mtbl > tbody > tr > td.mtbl-check::before {
        display: none;
    }

    table.mtbl > tbody > tr > td.mtbl-check input {
        width: 18px;
        height: 18px;
    }

    table.mtbl > tbody > tr > td {
        border: 0 !important;
        border-top: 1px solid #f2f4f7 !important;
        padding: 7px 0 !important;
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        font-size: 13.5px;
        line-height: 1.45;
        white-space: normal !important;
        text-align: left !important;
        min-height: 0;
    }

    /* The label, taken from the column header. */
    table.mtbl > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        color: #6b7280;
        font-size: 12px;
        font-weight: 500;
        text-transform: none;
        padding-top: 1px;
    }

    /* Value side */
    table.mtbl > tbody > tr > td > * {
        max-width: 100%;
    }

    /* ---- special cells ---- */

    /* The record's headline: shown big, at the top, with no label. */
    table.mtbl > tbody > tr > td.mtbl-title {
        border-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        display: block !important;
        font-size: 15.5px;
        font-weight: 600;
        color: #111827;
    }

    table.mtbl > tbody > tr > td.mtbl-title::before {
        display: none;
    }

    /* Checkbox / image cells sit inline at the top without a label. */
    table.mtbl > tbody > tr > td.mtbl-bare {
        border-top: 0 !important;
        padding: 0 0 6px !important;
        display: inline-block !important;
        vertical-align: middle;
    }

    table.mtbl > tbody > tr > td.mtbl-bare::before {
        display: none;
    }

    table.mtbl > tbody > tr > td.mtbl-bare img {
        max-width: 52px;
        max-height: 52px;
        border-radius: 9px;
        border: 1px solid #eceff3;
        background: #fff;
        object-fit: contain;
    }

    /* Give the thumbnail a little room before the product name. */
    table.mtbl > tbody > tr > td.mtbl-bare + td.mtbl-title,
    table.mtbl > tbody > tr > td.mtbl-bare {
        padding-bottom: 8px !important;
    }

    /* Actions pinned to the bottom as a full-width strip. */
    table.mtbl > tbody > tr > td.mtbl-actions {
        border-top: 1px solid #f2f4f7 !important;
        margin-top: 4px;
        padding-top: 9px !important;
        display: block !important;
        text-align: right !important;
    }

    table.mtbl > tbody > tr > td.mtbl-actions::before {
        display: none;
    }

    table.mtbl > tbody > tr > td.mtbl-actions .btn-group {
        float: none !important;
        display: block !important;
        width: 100%;
    }

    /* Layout only — the button keeps whatever colour the theme gives it. */
    table.mtbl > tbody > tr > td.mtbl-actions .btn {
        float: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100% !important;
        min-height: 40px;
    }

    table.mtbl > tbody > tr > td.mtbl-actions .dropdown-menu {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 8px 26px rgba(16, 24, 40, .12);
        border: 1px solid #e6e9ef;
        padding: 6px;
    }

    table.mtbl > tbody > tr > td.mtbl-actions .dropdown-menu > li > a {
        padding: 10px 12px;
        border-radius: 7px;
        font-size: 14px;
        white-space: normal;
    }

    /* Cells with nothing worth showing are removed entirely — this is what
       stops a 20-column list becoming a 20-line wall of dashes. */
    table.mtbl > tbody > tr > td.mtbl-empty {
        display: none !important;
    }

    /* DataTables' "no records" row must stay full width. */
    table.mtbl > tbody > tr > td.dataTables_empty {
        display: block !important;
        text-align: center !important;
        padding: 20px 0 !important;
    }

    table.mtbl > tbody > tr > td.dataTables_empty::before {
        display: none;
    }

    /* ---- surrounding chrome ---- */

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin: 4px 0 0 !important;
        height: 40px;
        border-radius: 8px;
    }

    /* ---- export buttons ----
     *
     * Five full-width outlined boxes ate most of the screen before you reached
     * a single product. Two per row, with a colour per action so they can be
     * recognised at a glance instead of read one by one. */

    /* No ancestor selector here on purpose: on several screens the export
       buttons are not inside .dataTables_wrapper, so a rule that depended on
       it silently did nothing and the buttons stayed content-width. */
    .dt-buttons,
    .dt-buttons.btn-group {
        float: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin: 0 0 12px !important;
        width: 100% !important;
    }

    .dt-buttons .btn,
    .dt-buttons .dt-button,
    .dt-buttons > a,
    .dt-buttons > button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 8px !important;
        height: 42px !important;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        float: none !important;
    }

    /* Colours live in ui-buttons.css so desktop and mobile stay identical —
       only the two-per-row layout is mobile-specific. */

    /* An odd one out on its own row should fill the width. */
    .dataTables_wrapper .dt-buttons .dt-button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .dataTables_wrapper .dt-buttons .dt-button img,
    .dataTables_wrapper .dt-buttons .dt-button i,
    .dataTables_wrapper .dt-buttons .dt-button svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        opacity: .9;
    }

    /* ---- length + search ---- */

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: block !important;
        width: 100% !important;
        font-weight: 500;
        font-size: 13px;
        color: #6b7280;
    }

    .dataTables_wrapper .dataTables_length select {
        height: 38px;
        border-radius: 9px;
        padding: 0 8px;
        margin: 0 6px;
    }

    .dataTables_wrapper .dataTables_filter input {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 5px 0 0 !important;
        height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #dfe3ea;
    }

    /* ---- leftover scroll bars ----
     *
     * A styled horizontal scrollbar was still being drawn as a grey pill above
     * the first card, because the scroll container kept its overflow even after
     * the table stopped being wider than the screen. */

    .dataTables_scrollBody,
    .dataTables_scroll,
    .table-responsive,
    .dataTables_wrapper > .row > div {
        overflow: hidden !important;
    }

    .dataTables_scrollBody::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .dataTables_scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ---- forms ----
     *
     * Submit buttons on import and settings screens render at their natural
     * width, which on a phone is a small target floating in white space. */

    form .btn[type="submit"],
    form button[type="submit"],
    form input[type="submit"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-height: 46px;
        margin-bottom: 10px;
    }

    /* The native file picker is unusable at its default size. */
    input[type="file"] {
        display: block;
        width: 100%;
        padding: 8px 0;
        font-size: 13px;
    }

    /* ---- floating assistant ----
     *
     * The bubble sits over the bottom-right corner, which is exactly where the
     * last row's Actions button lands. Give the page room to scroll past it. */
    .content,
    #scrollable-container > .content {
        padding-bottom: 88px !important;
    }

    /* ---- empty scaffolding DataTables leaves behind ---- */

    .dataTables_wrapper .dataTables_scrollHeadInner,
    .dataTables_wrapper .dataTables_scrollHeadInner > table {
        display: none !important;
    }

    /* Sizing rows the plugin injects have no content but still draw a border. */
    table.mtbl > tbody > tr.dt-empty-row,
    table.mtbl > tbody > tr[style*="height: 0"] {
        display: none !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        margin: 8px 0 0;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    /* Row-total footers read better as plain text than as a cramped table. */
    table.mtbl > tfoot {
        display: block !important;
        margin-top: 4px;
    }

    table.mtbl > tfoot > tr {
        display: block !important;
        background: #fff;
        border: 1px solid #e6e9ef;
        border-radius: 12px;
        padding: 8px 12px;
    }

    table.mtbl > tfoot > tr > th {
        display: flex !important;
        justify-content: space-between;
        border: 0 !important;
        border-top: 1px solid #f2f4f7 !important;
        padding: 6px 0 !important;
        font-size: 13px;
        white-space: normal !important;
    }

    table.mtbl > tfoot > tr > th::before {
        content: attr(data-label);
        color: #6b7280;
        font-weight: 500;
    }

    table.mtbl > tfoot > tr > th:first-child {
        border-top: 0 !important;
    }
}

/* Phones proper: tighten up further. */
@media (max-width: 575px) {
    table.mtbl > tbody > tr {
        padding: 10px;
        border-radius: 11px;
    }

    table.mtbl > tbody > tr > td::before {
        flex-basis: 46%;
        max-width: 46%;
    }
}