/* ONE mobile shape for every client-side data table.
   ---------------------------------------------------------------------------------------------
   The client area draws its tables from three different stylesheets that know nothing about each
   other — the services screens style `.svc-client__my-table` here in css/Client, the buyer's
   invoices and payout history come from css/finance, and support tickets from css/support. Two of
   those three are SHARED with the partner and admin portals, so the mobile behaviour of a client
   table could not be fixed where the table is styled without changing partner and admin screens in
   the same edit. This sheet is the client-owned place to say it instead: a view opts a table in by
   adding `client-stack-table` (and `client-stack-table-wrap` on its scroll container) and linking
   this file, and nothing outside the client area is touched.

   WHAT IT DOES is the shape the services screens already landed on and the one this pass is
   standardising: under 640px the header row is taken out of the flow (kept for screen readers, not
   deleted — the labels are what each cell reprints), every row becomes its own bordered card, and
   every cell prints its column name from `data-label` beside its value. That replaces the current
   behaviour, which is a 44rem-wide table sitting inside a horizontal scroller: four of seven
   columns off-screen behind a hairline scrollbar most people never notice, on the phone where most
   of this traffic is.

   `!important` is deliberate and is confined to the geometry properties. The shared finance sheet
   pins `min-width: 44rem` on the table from a selector of much higher specificity
   (`.fin-table-scroll-wrap:not(…) table.finance-table.fin-ord-table`, css/finance/
   finance-table-layout.css), and the whole point of this file is to win that WITHOUT editing the
   shared sheet other portals also read. Colours and spacing below carry no `!important` so a
   surface can still theme its own cards. */

@media (max-width: 640px) {
    /* The scroller has nothing left to scroll once the table stops being wider than the screen,
       and leaving it in place clips the cards' own rounded corners and shadow. */
    .client-stack-table-wrap {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        /* The support list forces `dir="ltr"` on its wrapper so the COLUMN order survives an Arabic
           page. Stacked, there are no columns left to hold in place, and the forced direction would
           put every Arabic label on the wrong side of its own value. Hand it back to the page. */
        direction: inherit;
    }

    .client-stack-table,
    .client-stack-table tbody,
    .client-stack-table tr,
    .client-stack-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Kept in the accessibility tree, not `display: none`: the header is still the row's column
       names, and a screen reader reading the table should hear them. */
    .client-stack-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .client-stack-table tr {
        margin: 0 0 12px;
        border: 1px solid #e5e1ee;
        border-radius: 12px;
        padding: 12px 14px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(55, 42, 88, .06);
    }

    .client-stack-table tbody tr:last-child { margin-bottom: 0; }

    /* Label on one side, value on the other, wrapping onto two lines rather than squeezing when the
       value is long. `align-items: baseline` keeps a small label sitting on the same line as a
       larger figure instead of floating above it. */
    .client-stack-table td {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px 14px;
        flex-wrap: wrap;
        border: 0;
        padding: 7px 0;
        text-align: start;
        overflow-wrap: anywhere;
    }

    .client-stack-table td + td { border-top: 1px solid #f1eef7; }

    .client-stack-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #6e6878;
        font-size: .78rem;
        font-weight: 800;
    }

    /* An action cell has no column name to print — the invoices table's last header is empty on
       purpose — so it gets no label and the control takes the full width of the card instead of
       being pushed to one edge by a caption that says nothing. */
    .client-stack-table td:not([data-label])::before,
    .client-stack-table td[data-label=""]::before { content: none; }

    .client-stack-table td:not([data-label]),
    .client-stack-table td[data-label=""] { justify-content: flex-start; }

    /* The number column's right alignment is a column behaviour; inside a card the figure already
       sits opposite its own label. */
    .client-stack-table td.finance-table__num { text-align: start; }

    /* The support list's "nothing here yet" row is one cell spanning every column. As a card it
       should read as a message, not as a labelled field. */
    .client-stack-table .support-placeholder-row td { justify-content: center; text-align: center; }
    .client-stack-table .support-placeholder-row td::before { content: none; }
}