/*
    ============================================================================
    RasoiX — Delivery Agent mobile card pattern
    ============================================================================

    The shared mobile presentation for the two Delivery Agent work screens:

        /my/deliveries      My Deliveries      (current work queue)
        /my/history         My Delivery History (historical record)

    Both render a MudTable with Breakpoint="Breakpoint.Sm", which MudBlazor
    stacks into label/value rows inside @media (max-width: 960px) via the class
    .mud-sm-table. That stacked form is what these rules turn into a card, so
    the two screens read as one application.

    THREE RULES FOR EDITING THIS FILE

    1. Everything lives inside @media (max-width: 960px). Desktop begins at
       961px for these tables and is out of scope.
    2. Everything is prefixed with .rx-agent-mobile-list, the opt-in class on
       each MudTable. Nothing here may reach another RasoiX screen.
    3. Values come from the existing design tokens. This file introduces no
       colour, radius, shadow, or spacing of its own — the card recipe is the
       same one .rx-detail-section already uses.

    It carries presentation only: no business rule, no state, no action logic.
    ============================================================================
*/

@media (max-width: 960px) {

    /* ------------------------------------------------- the outer container */

    /*
        MudTable is a MudPaper, so its root carries the surface, the corner
        radius and an elevation shadow. On desktop that frame is the table. On
        mobile it becomes a second box drawn around a list of boxes, and the
        cards below already provide the boundary.

        Neutralising exactly the three properties that draw it — and nothing
        else — lets the cards sit directly on the page background:

            .mud-table        background-color, border-radius
            .mud-elevation-N  box-shadow

        No border is removed because none is set: neither MudBlazor nor app.css
        puts one here. app.css's grid rules all require a .rx-admin-grid
        ancestor, which these two pages do not have.

        Two classes beat MudBlazor's one, so this needs no !important.
    */
    .rx-agent-mobile-list.mud-sm-table {
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* ---------------------------------------------------------- the card */

    /*
        One row becomes one card. The recipe is .rx-detail-section's, so the
        agent's list cards and the order-detail cards are visibly the same
        object.
    */
    .rx-agent-mobile-list.mud-sm-table .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. A delivery has to
        read as its own thing at a glance while walking.
    */
    .rx-agent-mobile-list.mud-sm-table .mud-table-row + .mud-table-row {
        margin-top: var(--rx-space-density-md);
    }

    /* MudBlazor draws a divider under the last cell of each stacked row. */
    .rx-agent-mobile-list.mud-sm-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: none;
    }

    /* Breathing room between the page header and the first card. */
    .rx-agent-mobile-list.mud-sm-table .mud-table-container {
        padding-top: var(--rx-space-density-lg);
    }

    /* --------------------------------------------------------- the cells */

    /*
        Label above value rather than pushed to opposite edges. The
        space-between default is what makes a squeezed table read as a form.
    */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        border: none;
        padding: var(--rx-space-density-xs) 0;
        text-align: start;
    }

    /* Dense tables get the same rhythm; MudBlazor otherwise halves it. */
    .rx-agent-mobile-list.mud-sm-table.mud-table-dense .mud-table-cell {
        padding: var(--rx-space-density-xs) 0;
    }

    /* The column name, from data-label. Quiet, and never the loudest thing. */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell:before {
        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;
    }

    /* ------------------------------------------------------- the header */

    /*
        Order and Status are the card's identity: the number, then its state
        directly beneath. Their labels are dropped — "ORDER  #3" reads as a form
        field, "#3" above a status chip reads as a delivery.
    */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Order"]:before,
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Status"]:before,
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Amount"]:before {
        content: none;
    }

    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Order"] {
        padding-top: 0;
    }

    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Order"] .mud-typography {
        color: var(--rx-color-text-primary);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    /* Status chips sit in a row so a second chip does not start a new line. */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Status"] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--rx-space-density-xs);
    }

    /*
        Anything the mobile card states elsewhere, and therefore must not repeat
        in its original cell. Only ever hidden here, never on desktop.
    */
    .rx-agent-mobile-list.mud-sm-table .rx-agent-desktop-only {
        display: none;
    }

    /* -------------------------------------------------------- the values */

    .rx-agent-mobile-list.mud-sm-table .mud-table-cell .mud-typography {
        /* Free text of unknown length must wrap, never widen the card. */
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* ------------------------------------------------------- the actions */

    /*
        Actions take the full width beneath the facts. The label is dropped
        because the controls already say what they do.
    */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Actions"] {
        align-items: stretch;
        padding-top: var(--rx-space-density-sm);
        margin-top: var(--rx-space-density-xs);
        border-top: 1px solid var(--rx-color-border);
    }

    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Actions"]:before {
        content: none;
    }

    /* Comfortable to tap one-handed, in motion. */
    .rx-agent-mobile-list.mud-sm-table .mud-table-cell[data-label="Actions"] .mud-button-root {
        min-height: 40px;
    }

    /* ------------------------------------------------------ mobile-only bits */

    /*
        Presentation-only elements the pages render for mobile alone. They carry
        no value the desktop cells do not already show — they only place it
        where a card needs it. Hidden above this breakpoint by the rule outside
        the media query below.
    */
    .rx-agent-mobile-only {
        display: block;
    }

    .rx-agent-mobile-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--rx-space-density-sm);
    }

    .rx-agent-mobile-strong {
        color: var(--rx-color-text-primary);
        font-weight: 700;
        letter-spacing: -0.01em;
    }
}

/*
    Desktop, and the default. The mobile-only elements are absent above 960px,
    so the desktop tables render exactly as they did before this file existed.
*/
.rx-agent-mobile-only,
.rx-agent-mobile-inline {
    display: none;
}