/* ============================================================================
   TrafficPortal3 results table
   ----------------------------------------------------------------------------
   The card + table that sits under the filter panel on pages converted from TP2
   iframes: sticky brand-tinted header, density steps as the window narrows, and
   the flip to stacked cards on a phone. Pairs with filters.css.

   Scope: tp-* names, used only by converted pages. Nothing here targets a bare
   element or a legacy class, so no existing page can be affected. Colours come
   from tokens.css.

   Carried over from PaymentHistory.razor, which still has its own equivalent
   copy; switching it to these names is a separate, deliberate change.
   ============================================================================ */

.tp-table-card {
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-card);
    box-shadow: var(--tp-shadow);
    /* Clip ONLY horizontally so a wide table never adds a second (horizontal) scrollbar, while
       keeping vertical overflow visible so the sticky header resolves to the window and actually
       sticks. Overflow hidden/clip on BOTH axes traps sticky inside the card; clip-x + visible-y is
       the one pairing that does not create a scroll container, so the page keeps one scrollbar. */
    overflow-x: clip;
    overflow-y: visible;
}

.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--tp-ink);
}

/* Child combinator so only the OUTER header sticks -- a nested detail table's headers live inside a
   cell and must not become sticky.

   --ph-stick-top is set by initFilterSticky in Shared/MainLayout.razor.js, which measures the filter
   card and publishes its rendered height. That export predates this file and is shared with
   PaymentHistory; it is reused rather than duplicated, hence the ph- name on the variable. */
.tp-table > thead th {
    position: sticky;
    /* Sits below the filter card AND the toolbar above it. --tp-toolbar-h is published by observeHeight
       in MainLayout.razor.js so the two sticky strips stack without a hard-coded number. */
    top: calc(var(--ph-stick-top, 0px) + var(--tp-toolbar-h, 0px));
    z-index: 3;
    background-color: var(--tp-brand-tint);
    color: var(--tp-brand);
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--tp-brand-tint-2);
    /* A wrappable header lets the table shrink to fit at ANY width instead of overflowing and being
       clipped. On wide screens there is room, so headers still sit on one line. */
    white-space: normal;
}

.tp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tp-line-soft);
    vertical-align: middle;
    white-space: normal;
}

.tp-table tbody tr:last-child td {
    border-bottom: none;
}

.tp-row {
    transition: background-color .12s ease;
}

    .tp-row:hover {
        background-color: var(--tp-row-hover);
    }

/* ---- Row expander ---- */

.tp-expander-col {
    width: 40px;
}

.tp-expander {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--tp-brand-tint-2);
    border-radius: 6px;
    background-color: var(--tp-brand-tint);
    transition: background-color .12s ease, border-color .12s ease;
}

    .tp-expander:focus-visible {
        outline: 2px solid var(--tp-brand);
        outline-offset: 2px;
    }

.tp-row:hover .tp-expander {
    background-color: var(--tp-brand-tint-2);
}

/* Plus / minus drawn as two centered bars so they sit dead-center in the box -- icon-font glyphs ride
   their own baseline and look off-center. The vertical bar is dropped when open, leaving a minus. */
.tp-expander::before,
.tp-expander::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--tp-brand);
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.tp-expander::before {
    width: 10px;
    height: 2px;
}

.tp-expander::after {
    width: 2px;
    height: 10px;
}

.tp-expander.tp-open::after {
    display: none;
}

.tp-num {
    text-align: right;
    white-space: nowrap;
}

/* The header rule above sets text-align: left with more specificity than .tp-num, so a money
   column's heading sat left while its values sat right. */
.tp-table > thead th.tp-num {
    text-align: right;
}

/* Inside a dialog the table scrolls with the dialog body, not the window, so the page's filter-card
   and toolbar offsets land the header mid-body. Dialog tables are short; just don't stick it. */
.tp-modal .tp-table > thead th {
    position: static;
}

.tp-nowrap {
    white-space: nowrap;
}

/* ---- Footer strip: row count, paging, rows-per-page ---- */

/* Pinned to the bottom of the window so the pager stays reachable without scrolling to the end of a
   long page. Sticks within the card, so it releases naturally once the table's bottom scrolls past.
   The card's overflow-y must stay `visible` for this (and the sticky header) to resolve to the
   window -- see the note on .tp-table-card. */
.tp-table-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    /* Everything grouped at the right rather than spread across the strip. */
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 7px 14px;
    border-top: 1px solid var(--tp-line);
    background: var(--tp-card);
    /* Lifts the strip off the rows scrolling underneath it. */
    box-shadow: 0 -2px 8px var(--tp-shadow-lift);
}

/* Page position and rows-per-page sit together on the left; the pager is pushed to the right edge by
   .tp-pager's auto margin, so the two reading tasks -- "where am I" and "move" -- stay separated. */
.tp-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tp-table-footer .tp-footer-count {
    font-size: 12.5px;
    color: var(--tp-ink-soft);
    white-space: nowrap;
}

.tp-table-footer .tp-footer-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
}

.tp-table-footer .tp-footer-label {
    font-size: 12.5px;
    color: var(--tp-ink-soft);
    white-space: nowrap;
}

/* Four plain icon buttons with a divider before them, not a boxed group: the footer already has a
   border of its own, and a second box inside it competes with the rows-per-page control. */
.tp-pager {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-left: 10px;
    margin-left: 6px;
    border-left: 1px solid var(--tp-line);
}

.tp-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-brand);
    font-family: var(--tp-font-family);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

    .tp-pager-btn:hover:not(:disabled) {
        background-color: var(--tp-brand-tint);
    }

    .tp-pager-btn:disabled {
        color: var(--tp-ink-soft);
        opacity: .45;
        cursor: not-allowed;
    }

    .tp-pager-btn:focus-visible {
        outline: 2px solid var(--tp-brand);
        outline-offset: -2px;
    }

    .tp-pager-btn i {
        display: flex;
        align-items: center;
        line-height: 1;
        font-size: 13px;
        /* Bootstrap chevrons are hairline at this size; the stroke gives them the weight Collections
           uses so they read as buttons rather than punctuation. */
        -webkit-text-stroke: 1px;
    }

        .tp-pager-btn i::before {
            display: block;
            line-height: 1;
        }

/* The rows-per-page control is the only input down here; keep it compact. */
.tp-table-footer .e-input-group,
.tp-table-footer .e-ddl.e-input-group {
    height: 30px !important;
    min-height: 30px !important;
    align-items: center !important;
}

/* Plain rather than outlined: inside an already-bordered footer strip, a boxed input adds a third
   nested border for no gain. */
.tp-rows-select {
    width: 74px !important;
    margin-top: 0 !important;
}

.tp-table-footer .tp-rows-select.e-input-group,
.tp-table-footer .tp-rows-select.e-ddl.e-input-group {
    border: none !important;
    background: transparent !important;
}

/* ---- Density steps ----
   Wrapping (above) keeps the whole table visible at any width with no scrollbar. These steps shrink
   the type scale and padding as the window narrows so it stays dense and readable before it flips to
   phone cards. */

@media (min-width: 769px) and (max-width: 1360px) {
    .tp-table { font-size: 12px; }
    .tp-table > thead th { padding: 8px 9px; font-size: 10px; }
    .tp-table tbody td { padding: 8px 9px; }
}

@media (min-width: 769px) and (max-width: 1040px) {
    .tp-table { font-size: 11px; }
    .tp-table > thead th { font-size: 9.5px; padding: 7px 7px; }
    .tp-table tbody td { padding: 7px 7px; }
}

@media (min-width: 769px) and (max-width: 880px) {
    .tp-table { font-size: 10px; }
    .tp-table > thead th { font-size: 9px; padding: 6px 5px; }
    .tp-table tbody td { padding: 6px 5px; }
}

/* ---- Phone: table becomes stacked cards ---- */

@media (max-width: 768px) {
    .tp-table-card {
        border: none;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .tp-table,
    .tp-table > tbody,
    .tp-table > tbody > tr,
    .tp-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .tp-table > thead {
        display: none;
    }

    .tp-table > tbody > tr.tp-row {
        background: var(--tp-card);
        border: 1px solid var(--tp-line);
        border-radius: 12px;
        box-shadow: var(--tp-shadow);
        margin: 0 0 12px;
        padding: 6px 2px;
    }

        .tp-table > tbody > tr.tp-row:hover {
            background: var(--tp-card);
        }

        .tp-table > tbody > tr.tp-row > td {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 18px;
            white-space: normal;
            text-align: right;
            padding: 7px 14px;
            border: none;
            border-bottom: 1px solid var(--tp-line-soft);
        }

            .tp-table > tbody > tr.tp-row > td:last-child {
                border-bottom: none;
            }

            .tp-table > tbody > tr.tp-row > td::before {
                content: attr(data-label);
                flex: 0 0 auto;
                font-weight: 700;
                font-size: 10.5px;
                letter-spacing: .04em;
                text-transform: uppercase;
                color: var(--tp-brand);
                text-align: left;
            }

    /* A cell with no label -- the expander, or the action group -- sits alone, right-aligned. */
    .tp-table > tbody > tr.tp-row > td.tp-cell-bare {
        justify-content: flex-end;
    }

    /* The action buttons are the card's last cell: right-aligned at the foot, with a divider above so
       they read as the card's actions rather than another field. Scoped to :last-child because the
       expander at the top of the card is also a bare cell. */
    .tp-table > tbody > tr.tp-row > td.tp-cell-bare:last-child {
        border-bottom: none;
        border-top: 1px solid var(--tp-line-soft);
        margin-top: 4px;
        padding: 10px 14px 6px;
    }

        .tp-table > tbody > tr.tp-row > td.tp-cell-bare::before {
            content: none;
        }

        .tp-table > tbody > tr.tp-row > td.tp-cell-bare:empty {
            display: none;
        }

    /* On a phone the card loses its border, so the footer needs its own surface to stay legible
       while pinned over the stacked cards. */
    .tp-table-footer {
        padding: 10px 12px;
        border-top: 1px solid var(--tp-line);
        border-radius: 10px;
        margin-top: 4px;
    }
}

/* Narrower screens: the expander column can give up some width with the rest of the table. */
@media (min-width: 769px) and (max-width: 1360px) {
    .tp-expander-col { width: 30px; }
}

/* ---- Detail panel: the sub-table revealed by the row expander ---- */

.tp-detail-row > td {
    background-color: var(--tp-surface-soft);
    padding: 4px 32px 16px 16px !important;
    border-bottom: 1px solid var(--tp-line-soft);
}

.tp-detail-table {
    min-width: 520px;
    width: auto;
    margin: 10px 0 0 auto;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--tp-ink);
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    overflow: hidden;
}

    .tp-detail-table th {
        padding: 9px 18px;
        text-align: left;
        background: var(--tp-brand-tint);
        border-bottom: 1px solid var(--tp-brand-tint-2);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--tp-brand);
    }

    .tp-detail-table td {
        padding: 8px 18px;
        border-bottom: 1px solid var(--tp-line-soft);
    }

    .tp-detail-table tbody tr:last-child td {
        border-bottom: none;
    }

@media (max-width: 768px) {
    /* The card is a wrapping flex row. Every field is width:100% so it takes a line to itself, but the
       expander and the action buttons are auto-width and ordered last, so they share the final line --
       expander on the left, buttons on the right, which a column layout cannot do. */
    .tp-table > tbody > tr.tp-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Two aligned columns rather than one field per line: halves the card height while keeping the
       labels in fixed positions, so you can still scan down a list of cards. Free wrapping was tried
       and reads as a run-on sentence -- the alignment is what makes it legible. */
    .tp-table > tbody > tr.tp-row > td {
        width: calc(50% - 7px);
        justify-content: space-between;
        gap: 10px;
        padding: 5px 14px;
        text-align: right;
        border-bottom: none;
    }

    /* The checkbox gets the top line to itself, right-aligned, so it is where the eye lands first and
       is not competing with a field for half a line. Its label is dropped -- a lone checkbox at the
       top of a card does not need explaining. */
    .tp-table > tbody > tr.tp-row > td.tp-cell-select {
        order: -2;
        width: 100%;
        justify-content: flex-end;
        padding: 8px 14px 2px;
    }

        .tp-table > tbody > tr.tp-row > td.tp-cell-select::before {
            content: none;
        }

    /* The amount sits on its own line at the foot, right above the buttons and right-aligned: it is
       what the reader checks last, and what the actions act on. */
    .tp-table > tbody > tr.tp-row > td.tp-cell-total {
        order: 96;
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        padding: 8px 14px 4px;
    }

    /* A zero-height flex item ordered just before the action line forces it onto a line of its own.
       Without it the last field leaves half a line free and the expander slides up into it. */
    .tp-table > tbody > tr.tp-row::after {
        content: "";
        width: 100%;
        order: 97;
    }

    .tp-table > tbody > tr.tp-row > td.tp-expander-col {
        order: 98;
        width: auto;
        justify-content: flex-start;
        border-bottom: none;
        border-top: 1px solid var(--tp-line-soft);
        padding: 10px 14px 6px;
    }

    .tp-table > tbody > tr.tp-row > td.tp-cell-bare:last-child {
        order: 99;
        width: auto;
        /* On the expander instead, this would count towards the line width and push the buttons onto a
           line of their own. Auto margins are ignored when the browser decides where to wrap. */
        margin-left: auto;
    }

    /* The expanded panel is a continuation of the card it belongs to, not a separate block below it:
       the card drops its bottom corners and border while open, and the detail row picks them up. The
       two then read as one card with the panel inside, under the buttons and the expander.
       :has() is what lets the card know a detail row follows it -- the detail row only exists in the
       markup while that statement is expanded. */
    .tp-table > tbody > tr.tp-row:has(+ tr.tp-detail-row) {
        margin-bottom: 0;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
    }

    .tp-detail-row {
        background: var(--tp-card);
        border: 1px solid var(--tp-line);
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: var(--tp-shadow);
        margin: 0 0 12px;
    }

    .tp-detail-row > td {
        padding: 0 12px 12px !important;
    }

    /* The detail panel echoes the card: one bordered block per delivery, each field a key/value pair
       that sits beside its neighbours and wraps when it runs out of width. The values here are short
       (an address, a date, one word), so a field per line would waste the space the cards just freed. */
    .tp-detail-scroll {
        overflow: visible;
    }

    .tp-detail-table,
    .tp-detail-table > tbody,
    .tp-detail-table > tbody > tr,
    .tp-detail-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .tp-detail-table {
        min-width: 0;
        margin: 6px 0 0;
        border: none;
        background: transparent;
    }

    .tp-detail-table > thead {
        display: none;
    }

    .tp-detail-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 18px;
        border: 1px solid var(--tp-line-soft);
        border-radius: 10px;
        margin: 0 0 8px;
        padding: 8px 12px;
        background: var(--tp-card);
    }

    .tp-detail-table > tbody > tr > td {
        display: flex;
        align-items: baseline;
        gap: 6px;
        width: auto;
        padding: 3px 0;
        border-bottom: none;
    }

        .tp-detail-table > tbody > tr > td::before {
            content: attr(data-label);
            flex: 0 0 auto;
            font-weight: 700;
            font-size: 10px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--tp-brand);
        }

        /* The delivery's own actions: no label, and full width so they are never wedged between two
           fields. Right-aligned, matching where the card's own actions sit. */
        .tp-detail-table > tbody > tr > td.tp-cell-bare {
            width: 100%;
            justify-content: flex-end;
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px solid var(--tp-line-soft);
        }

            .tp-detail-table > tbody > tr > td.tp-cell-bare::before {
                content: none;
            }

            .tp-detail-table > tbody > tr > td.tp-cell-bare > div {
                justify-content: flex-end !important;
            }
}

/* ---- Toolbar above the table: result count on the left, actions on the right ---- */


/* A default so the sticky stack works before -- or without -- the JS that measures the real height.
   Without it the variable is unset, the table header resolves to the same offset as the toolbar, and
   the opaque toolbar simply covers it: the header looks like it stopped sticking. observeHeight in
   MainLayout.razor.js overwrites this with the measured value once the page has rendered. */
:root {
    /* 8px padding top and bottom, a ~30px button, and the 1px bottom border. */
    --tp-toolbar-h: 48px;
}

/* Sticky so the bulk actions stay reachable while scrolling a long result set -- they act on a
   selection made anywhere in the list, so scrolling away from them is the one thing that must not
   happen. Pinned directly under the filter card; the table header then pins under this. */
.tp-toolbar {
    position: sticky;
    top: var(--ph-stick-top, 0px);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 0 6px;
    /* Opaque, or rows scroll through it. Card white rather than a guessed page colour, with a hairline
       under it so it reads as a bar rather than as content that will not move. */
    background: var(--tp-card);
    border-bottom: 1px solid var(--tp-line);
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
}

/* filters.css makes the filter card static on a phone, but initFilterSticky keeps publishing its
   height, so the toolbar would pin a card's height below the top of the window. Pin to the top. */
@media (max-width: 768px) {
    .tp-toolbar {
        top: 0;
    }
}

/* The count reads as a pill rather than loose text, so it holds its own against the buttons opposite.
   The leading dot is drawn rather than typed, so it can't be selected or read out as punctuation. */
.tp-results-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-ink-soft);
    background: var(--tp-brand-tint);
    border: 1px solid var(--tp-brand-tint-2);
    padding: 5px 12px;
    border-radius: 999px;
}

    .tp-results-count::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--tp-brand);
    }

/* Left-aligned, above the checkbox column they act on. The result count is pushed to the far side by
   the toolbar's space-between. */
.tp-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Outlined action button: exports, downloads, bulk operations. Quieter than tp-btn-primary because
   several of these usually sit together. */
.tp-action-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: var(--tp-card);
    color: var(--tp-ink);
    border: 1px solid var(--tp-line);
    border-radius: 9px;
    font-family: var(--tp-font-family);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .tp-action-btn:hover:not(:disabled) {
        background-color: var(--tp-brand-tint);
        border-color: var(--tp-brand-tint-2);
        box-shadow: 0 2px 6px var(--tp-shadow-lift);
    }

    .tp-action-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .tp-action-btn:focus-visible {
        outline: 2px solid var(--tp-brand);
        outline-offset: 2px;
    }

    .tp-action-btn i {
        font-size: 15px;
        display: flex;
        align-items: center;
        line-height: 1;
    }

        .tp-action-btn i::before {
            display: block;
            line-height: 1;
        }

/* A destructive variant, for something like Void Selected. */
.tp-action-btn-danger {
    color: var(--tp-danger);
    border-color: var(--tp-danger-line);
}

    .tp-action-btn-danger:hover:not(:disabled) {
        background-color: var(--tp-danger-tint);
        border-color: var(--tp-danger);
    }


/* The actions column holds the bulk buttons in its header and the row buttons below. Sizing it to its
   content stops the browser squeezing it and forcing either set onto a second line.

   Scoped above the card breakpoint on purpose: in card mode every cell is a full-width block, and
   because :last-child outranks that rule this would shrink the actions cell to a sliver. Scoped to
   tr.tp-row for the same reason at every width: the expanded detail row's single td is also a
   :last-child, and nowrap plus a 1% width would crush the delivery table inside it. */
@media (min-width: 769px) {
    .tp-table > thead th:last-child,
    .tp-table > tbody > tr.tp-row > td:last-child {
        width: 1%;
        white-space: nowrap;
    }
}

/* Bulk actions repeated in the pinned footer, for card mode only. They live in the table header at
   wider widths, where that header is sticky and always reachable -- but it is display:none once the
   results become cards, so without this copy a selection made on a narrow screen has nothing to act
   on it. Tinted so they read as belonging to the selection rather than to the pager. Always present,
   disabled until something is ticked -- functionality that only appears after you have used it cannot
   be discovered. */
.tp-footer-selection {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 10px 4px 12px;
    border-radius: 999px;
    background: var(--tp-brand-tint);
    border: 1px solid var(--tp-brand-tint-2);
}

@media (max-width: 768px) {
    .tp-footer-selection {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }
}

/* The pager is icon-only at every width, not just on a phone: the four chevrons are conventional, the
   title on each carries the wording, and dropping the words keeps the whole footer on one line. */
.tp-pager .tp-btn-label {
    display: none;
}

/* The selection count sits beside the bulk buttons rather than inside each label, so the number is
   stated once and the buttons keep a fixed width as it changes. */
.tp-selection-count {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tp-brand-tint);
    font-size: 12px;
    font-weight: 700;
    color: var(--tp-brand);
    white-space: nowrap;
}

/* Under 520px the two columns are too narrow for a label and a value to share a line, and the fields
   ran into each other. Back to one field per line; the checkbox, total, expander and action cells
   already have their own widths and keep them. Last in the file on purpose: it has the same
   specificity as the two-column rule above and has to come after it to win. */
@media (max-width: 520px) {
    .tp-table > tbody > tr.tp-row > td {
        width: 100%;
    }
}

/* Between the card breakpoint and 1040px the table is wider than the card and the card clips it, so
   the action buttons at the far right are cut off. The smaller type above is not enough on its own:
   the width is set by the cells that cannot wrap. Letting the Created cell break between date and
   time, and the action buttons wrap onto two lines, gives back the width the table needs. Below the
   two-column-layout rules and the desktop last-column rule on purpose: same specificity, must win. */
@media (min-width: 769px) and (max-width: 1040px) {
    .tp-table > tbody > tr.tp-row > td.tp-nowrap {
        white-space: normal;
    }

    .tp-table > tbody > tr.tp-row > td:last-child {
        white-space: normal;
    }

        .tp-table > tbody > tr.tp-row > td:last-child > div {
            flex-wrap: wrap;
            max-width: 76px;
            margin-left: auto;
        }
}

/* At the narrow end of that band the Delivery Status pill is the last cell that will not give: a
   two-word status held on one line is wider than the column can afford, so it may break. */
@media (min-width: 769px) and (max-width: 880px) {
    .tp-table > tbody > tr.tp-row .tp-pill {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}