/*
    ============================================================================
    RasoiX — mobile record list
    ============================================================================

    THE API IS ONE CLASS. Put `rx-mobile-record-list` on a MudTable that already
    has Breakpoint="Breakpoint.Sm" and sits inside the standard admin grid
    wrapper, and its rows become cards below 960px. There are no parameters, no
    variants, and no configuration — a screen that needs something different
    adds its own scoped rule on top rather than adding a knob here.

    WHY THIS IS SHARED AND NOT COPIED

    Every RasoiX admin list is the same construction:

        <div class="rx-admin-grid">
          <MudPaper class="rx-admin-grid-surface">
            <MudTable Breakpoint="Breakpoint.Sm" class="rx-admin-grid-table">

    MudBlazor stacks that table into label/value rows below 960px (class
    .mud-sm-table). What it does not do is make the stack read as a record, and
    app.css's 12px/14px admin-grid cell padding — right for a desktop row — puts
    a screenful of air into one card. Turning that stack into a card is
    therefore the identical problem on every one of these screens, which is why
    it lives here instead of in each page's stylesheet.

    It carries the card SHELL only. What belongs to a screen stays with that
    screen: which column is the card's title, which label is dropped, which
    value is emphasised, and any actions row. Those differ per screen and must
    not be guessed at from here.

    A global stylesheet on purpose: Blazor's scoped CSS stamps its attribute
    onto HTML elements only, never onto a child component's root, so a
    page-scoped rule cannot address a MudTable by its own class without a
    wrapper and ::deep. A global opt-in class has no such problem.

    RULES FOR EDITING

    1. Everything lives inside @media (max-width: 960px) — the breakpoint
       Breakpoint.Sm actually stacks at.
    2. Everything is prefixed with .rx-mobile-record-list. Nothing here may
       reach a table that has not opted in.
    3. Values come from the existing design tokens. This file invents no
       colour, radius, shadow or spacing of its own.
    4. Nothing screen-specific. If a rule needs to know a column name, it
       belongs in that screen's stylesheet.
    ============================================================================
*/

@media (max-width: 960px) {

    /*
        The cards are the boundary, so the grid's own frame has to go — otherwise
        it draws a box around a list of boxes.

        Matched through :has() rather than by adding a second class to the
        wrapper, which keeps the API at one class on the table.
    */
    .rx-admin-grid-surface:has(> .rx-mobile-record-list) {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .rx-mobile-record-list.mud-sm-table {
        background-color: transparent;
        box-shadow: none;
    }

    /*
        One body row, one card.

        Scoped to .mud-table-body deliberately: MudBlazor hides the header row
        with `.mud-sm-table .mud-table-root .mud-table-head .mud-table-row
        {display:none}`, and an unscoped rule here outranks it and turns the
        hidden header back into an empty card above the list.
    */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-row {
        display: block;
        padding: var(--rx-space-density-md);
        border: 1px solid var(--rx-color-border);
        border-radius: var(--rx-radius-lg);
        background: var(--rx-color-surface);
        box-shadow: var(--rx-shadow-card);
    }

    /* Separation between records, not merely a hairline. */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-row + .mud-table-row {
        margin-top: var(--rx-space-density-md);
    }

    /*
        The density fix, which is the whole point.

        MudBlazor's own stacked cell — label left, value right, one line each —
        is kept. Only the padding changes: app.css's 12px/14px per cell is what
        made these cards mostly empty space.
    */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-cell {
        align-items: baseline;
        gap: var(--rx-space-density-md);
        padding: var(--rx-space-density-xs) 0;
        border: none;
    }

    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-cell:last-child {
        border-bottom: none;
    }

    /*
        The column name, from data-label. Quiet, and never the loudest thing.

        `flex: none` and `nowrap` because the label is a flex item: left free to
        shrink it wraps mid-word — "EXPECTE / D" — long before the value beside
        it has run out of room.
    */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-cell:before {
        flex: none;
        white-space: nowrap;
        padding-right: 0;
        padding-inline-end: 0;
        color: var(--rx-color-text-secondary);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /*
        Free text of unknown length wraps; it never widens the card.

        `break-word` rather than `anywhere`: `anywhere` also lowers the element's
        min-content width, which lets flex shrink the cell until a money value
        breaks across lines — "£1,420.0 / 0". `break-word` still prevents
        overflow, but only breaks a token that genuinely cannot fit.
    */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-cell,
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-cell .mud-typography {
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Empty and loading states are rows too, and must not become cards. */
    .rx-mobile-record-list.mud-sm-table .mud-table-body .mud-table-row:has(.mud-table-cell[colspan]) {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }
}