/* ============================================================
   BVetter – Phone card layout for data tables
   /bvetter/shared/css/table-cards.css

   Pairs with shared/js/table-cards.js, which labels each cell and
   explains the column roles. Everything here sits inside the phone
   media query, so desktop and tablet keep the normal table.

   Why cards: below 768px a wide table either pushed the page sideways
   or hid its last columns — usually Actions — behind a scroll inside
   the card that nobody discovered. A card keeps every column visible.

   !important is used only where each page's own table CSS sets the
   same property with a more specific selector (fixed column widths,
   nowrap, min-width, cell borders and padding).
   ============================================================ */

@media (max-width: 768px) {
    table[data-cards] {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

    /* The header row is replaced by per-cell labels... */
    table[data-cards] > thead { display: none; }

    /* ...except a select-all checkbox, which has nowhere else to live. */
    table[data-cards] > thead:has(th[data-card="select"]) {
        display: block;
        margin-bottom: 10px;
    }

    table[data-cards] > thead:has(th[data-card="select"]) > tr {
        display: block;
        background: transparent;
        border: 0;
    }

    table[data-cards] > thead > tr > th { display: none; }

    table[data-cards] > thead > tr > th[data-card="select"] {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: auto !important;
        padding: 4px 2px !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #424750 !important;
    }

    table[data-cards] > thead > tr > th[data-card="select"]::after {
        content: "Select all on this page";
    }

    table[data-cards] th[data-card="select"] input,
    table[data-cards] td.bv-cell-select input {
        flex: none;
        width: 18px !important;
        height: 18px !important;
        margin: 0;
    }

    table[data-cards] > tbody {
        display: grid;
        gap: 10px;
    }

    table[data-cards] > tbody > tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        padding: 14px;
        background: #FFFFFF;
        border: 1px solid #E3E7EF;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 42, 88, 0.04);
    }

    table[data-cards] > tbody > tr > td {
        display: block;
        min-width: 0;
        width: auto !important;
        height: auto;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Whole-row cells (below) keep the page's own padding and alignment,
       so a centered "Loading…" stays centered. */
    table[data-cards] > tbody > tr > td:not(.bv-cell-full) {
        padding: 0 !important;
        text-align: left !important;
    }

    /* Label above the value: safe for any cell content, where a
       side-by-side label would split mixed inline content apart. */
    table[data-cards] > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #737781;
    }

    table[data-cards] > tbody > tr > td[data-label=""]::before { content: none; }

    /* ── Title ──────────────────────────────────────────────── */
    table[data-cards] > tbody > tr > td.bv-cell-title {
        grid-column: 1 / -1;
        order: -1;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #EEF0F5 !important;
        font-size: 15px;
        font-weight: 700;
    }

    table[data-cards] > tbody > tr:has(> td.bv-cell-select) > td.bv-cell-title {
        padding-right: 34px !important;
    }

    /* ── Row checkbox, pinned to the corner ─────────────────── */
    table[data-cards] > tbody > tr > td.bv-cell-select {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    /* ── Actions, full width at the bottom ──────────────────── */
    table[data-cards] > tbody > tr > td.bv-cell-actions {
        grid-column: 1 / -1;
        order: 99;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 12px !important;
        border-top: 1px solid #EEF0F5 !important;
    }

    /* Set by the script when a row has no buttons in this column. */
    table[data-cards] > tbody > tr > td.bv-cell-empty { display: none; }

    /* Most pages wrap their buttons in one container; let it fill the row. */
    table[data-cards] > tbody > tr > td.bv-cell-actions > div {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    table[data-cards] > tbody > tr > td.bv-cell-actions button,
    table[data-cards] > tbody > tr > td.bv-cell-actions a {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        margin: 0;
        justify-content: center;
    }

    table[data-cards] > tbody > tr > td.bv-cell-title::before,
    table[data-cards] > tbody > tr > td.bv-cell-select::before,
    table[data-cards] > tbody > tr > td.bv-cell-actions::before,
    table[data-cards] > tbody > tr > td.bv-cell-full::before {
        content: none;
    }

    /* ── Whole-row cells: empty/loading messages, expanded detail ── */
    table[data-cards] > tbody > tr > td.bv-cell-full { grid-column: 1 / -1; }

    table[data-cards] > tbody > tr:has(> td.bv-cell-full:only-child) { display: block; }
}