/* ============================================
   Portal Skeleton — page-specific layout for skeleton-first AJAX pages.

   The universal shimmer pattern (base + wave + keyframes +
   reduced-motion + generic .skeleton-block modifiers) lives in the
   trade theme at:
     app/design/frontend/Zhik/trade/web/css/skeleton-shimmer.css

   It's loaded on every page via the theme's default_head_blocks.xml.
   This file only carries page-scoped skeleton layout helpers
   (dashboard balance, history filters, order-view info-pair sizing,
   etc.) that don't belong at the theme level.

   See _plans/portal-performance/loading-theme/skeleton-standard.md
   for the full standard.
   ============================================ */

/* ============================================
   Dashboard-specific layout-shift mitigation.

   Why these rules live here rather than a dashboard-only CSS file:
   the dashboard already pulls portal-skeleton.css; adding page-scoped
   selectors avoids a new asset and keeps all skeleton rules together.
   ============================================ */

/* Balance column: NO min-height. The skeleton DOM structure mirrors the
   loaded fragment exactly — 4 .amount-outstanding boxes + 6-row ageing
   table — so the natural skeleton height already matches the natural
   loaded height within ~10 px (the difference is single-line text vs the
   18 px pill on .amount, and minor margin rounding).

   Originally tried min-height: 420 px, but the page CSS at
   _extend.less:397 puts `.block { height: calc(100% - 10px) }` inside the
   `@media (min-width: 992 px)` block. Combined with the default
   `align-items: stretch` on `.row.row-info`, the min-height was
   propagating to ALL flex siblings (.block-addresses, .block-payment-info
   stretched to 420 px → empty space at the bottom of cards whose
   content was naturally shorter).

   Leaving height to flow naturally restores the pre-Step-6 equal-height
   behavior driven by the tallest sibling's content. Multi-currency
   dealers (where loaded balance > skeleton balance) see a small downward
   shift on swap; this is the same magnitude shift dealers saw pre-Step-6
   when "Calculating…" → real data, so no regression. */

/* Recent-orders skeleton table:
   - `table-layout: fixed; width: 100%` so columns share the wrapper width
     proportionally instead of being auto-driven by fixed pill widths. Without
     this, the pill widths sum to ~640 px which overflows narrower wrappers
     (rotated screens, tablets) → wrapper's overflow-x:auto shows a
     scrollbar → +16 px to wrapper height.
   - `max-width: 100%` on the pill/button so they never exceed their column.
   - Row height is left to flow NATURALLY — driven by the tallest cell
     content (the --button at 43 px) + cell padding. This matches the loaded
     row height at every viewport (loaded varies 68-104 px depending on
     padding from Magento's responsive table CSS at different widths).
     No min-height forcing — that was producing skeleton rows taller than
     loaded at narrow viewports + zoom-out. */
.dashboard-recent-skeleton table {
    table-layout: fixed;
    width: 100%;
}
.dashboard-recent-skeleton .skeleton-block--pill,
.dashboard-recent-skeleton .skeleton-block--button {
    max-width: 100%;
}

/* ============================================
   Orders History page

   - Filter bar: CSS grid — 4 equal columns at desktop, 2×2 at tablet,
     stacked on mobile. Search no longer hogs row width; every input/select
     gets the same fraction.
   - Skeleton table: same `<colgroup>` + `table-layout: fixed` as the loaded
     fragment so column widths don't shift on AJAX swap.
   - Show more button: hidden by default; the loader unhides it when
     offset + shown < total. Dashed top border mirrors the divider on
     the Create Order page.
   ============================================ */

.portal-history-shell .orders-history-filters,
.portal-history-shell .invoices-history-filters,
.portal-history-shell .portal-history-filters {
    margin: 12px 0 16px;
}

/* Filter row uses CSS grid:
     - desktop (≥ 1100 px): 5 equal columns (Search, Type, Status, Date, Sort)
     - laptop  (900–1100 px): 3 columns (5 cells wrap 3 + 2) so selects stay usable
     - tablet  (540–900 px): 2 columns
     - mobile  (< 540 px): stacked single column
   Search no longer hogs width — every input/select shares the row evenly,
   which avoids the "Search is huge, Sort wraps to row 2" problem on
   narrow desktops. */
.portal-history-shell .orders-filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1100px) {
    .portal-history-shell .orders-filter-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .portal-history-shell .orders-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .portal-history-shell .orders-filter-row {
        grid-template-columns: 1fr;
    }
}

/* Filter field appearance (.orders-filter / -label / -input / -select) is global
   in the theme (_extend.less) so all four grids match; only row layout lives here. */

/* Counter holds its position via a shimmer placeholder until AJAX populates
   the real text. Keeping the wrapper sized prevents the table below from
   jumping when "Showing X of N orders" lands.
   margin-bottom 0 — neither history page wants extra space below the
   counter row; the data table sits directly underneath. */
.portal-history-shell .orders-history-counter,
.portal-history-shell .invoices-history-counter {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0;
    min-height: 22px;
    display: flex;
    align-items: center;
}
.portal-history-shell .orders-counter-skeleton {
    display: inline-block;
    height: 14px;
    vertical-align: middle;
}
.portal-history-shell.has-counter .orders-counter-skeleton,
.invoices-history-shell.has-counter .orders-counter-skeleton,
.portal-history-shell .orders-counter-text:not(:empty) ~ .orders-counter-skeleton {
    display: none;
}

/* Invoice history counter row matches the Orders History counter
   exactly (22 px). The bulk Pay bar is absolutely positioned so it
   *overlays* the row when shown — its 42 px height overhangs ~10 px
   above and below the counter, fitting comfortably in the 16 px
   filter margin above and the 17 px natural table top-gap below. No
   layout shift, identical filter→first-row spacing on both pages.
   `position: relative` here anchors the absolute bar. */
.portal-history-shell .invoices-history-counter {
    justify-content: space-between;
    gap: 16px;
    position: relative;
}
.portal-history-shell .invoices-history-counter-left {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
}

/* Matches `.promo-view-all-container` (`dealers.css:518`) used on the
   Create Order page so the divider above Show more reads as the same
   visual pattern across the portal. */
.portal-history-shell .orders-show-more-wrapper {
    text-align: center;
    padding: 20px 0;
    margin: 15px 0;
    border-top: 2px dashed #d1d1d1;
}

.portal-history-shell .orders-show-more {
    min-width: 200px;
}

/* Skeleton rows reuse the cards-style layout of the loaded fragment
   (same `.table-wrapper.orders-history` ancestor) so the theme CSS
   that produces row gaps, borders and padding applies identically.
   Shimmer pills inside cells render at the same position the real
   values will occupy, so the skeleton-to-loaded swap is visually flat. */
.orders-history-skeleton .skeleton-block--pill,
.orders-history-skeleton .skeleton-block--button {
    max-width: 100%;
}

/* Vertical-centre every row across both history pages. The cards-style
   loaded layout produces rows of variable height (PP Disc. subtext,
   line-wrapped Ship-To addresses, etc.); without `vertical-align: middle`
   the status pill and action button float to the top of the cell while
   the longer text fills the bottom — looks unbalanced. Applying it to
   every `td` is fine because the cells inside are flex / inline-flex
   already and pick up the middle alignment naturally. */
.portal-history-shell .table-wrapper.orders-history td,
.portal-history-shell .table-wrapper.invoices-history td {
    vertical-align: middle;
}

/* ============================================
   Invoices History — bulk Pay action bar
   ============================================ */

/* Default (mobile / narrow viewports): bar is a normal block element
   that stacks below the counter. Counter flex-wraps to column layout
   so the bar gets its own row. No overlap with the counter text on
   small screens. */
.invoices-bulk-pay-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    margin: 8px 0 0;
    background: transparent;
    border: 0;
}

.invoices-bulk-pay-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    color: #000;
    font-size: 1.3rem;
}
.invoices-bulk-pay-prompt i { font-size: 14px; }

/* Match the body's standard 1.4 rem (~14 px) so the summary reads as
   primary page text rather than the smaller counter caption (0.9 em).
   Lives outside the media query so the larger size applies on both
   desktop and mobile. */
.invoices-bulk-pay-summary {
    font-size: 1.4rem;
    color: #333;
}
.invoices-bulk-pay-summary strong {
    color: #000;
}

/* Desktop (>= 768 px, Magento's mobile breakpoint where the table is
   horizontal): absolute-position the bar so its 42 px height can
   overhang the 22 px counter row without pushing the table — the
   filter form's 16 px margin-bottom above and the 17 px natural
   table-top gap below comfortably absorb the ~10 px overhang on each
   side. Zero shift, identical filter→first-row spacing as the Orders
   History page. */
@media (min-width: 768px) {
    .invoices-bulk-pay-bar,
    .invoices-bulk-pay-prompt {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
    }
}

/* Mobile (< 768 px): the counter is a column so counter text sits on
   top, the bulk Pay bar drops below. Same layout idiom as the
   horizontal-to-stacked transition the data table itself uses below
   this breakpoint. */
@media (max-width: 767.98px) {
    .portal-history-shell .invoices-history-counter {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Match the View button's compact horizontal padding so the Pay Now
   button reads as a standard portal action, not an over-wide banner
   button. */
.invoices-bulk-pay-button {
    padding: 0 12px;
}
.invoices-bulk-pay-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* While the filter group is pinned the Pay Now bar keeps its full size and
   position (no shrink). Its centered overhang laps a little onto the scrolling
   rows below — acceptable, and it stays legible: the pinned group sits at
   z-index 60 with an opaque button, so it renders above the rows. */

/* Compact action button across both history pages — the row already
   carries the dollar balance / order total, so the "View" affordance
   can be a small icon + label rather than a wide solid button. Both
   pages share the same .action.view markup, so scope to the shared
   .portal-history-shell wrapper so any future history-style page
   inherits this. Inline-flex (not inline-block) hugs the content
   width so the cell doesn't stretch the button. */
.portal-history-shell .table-wrapper.orders-history td.actions .action.view,
.portal-history-shell .table-wrapper.invoices-history td.actions .action.view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 0.9em;
    text-decoration: none;
    white-space: nowrap;
}

/* Keep one-line text in the narrow data columns so the row height stays
   stable. "Credit Memo" was wrapping to two lines at 10 % width; the
   wider cells now in the colgroup + nowrap together guarantee single
   lines for the typical content. Balance/Total are excluded because
   the Total cell can carry a "PP Disc.:" sub-line. */
.portal-history-shell .table-wrapper.invoices-history td.type,
.portal-history-shell .table-wrapper.invoices-history td.date,
.portal-history-shell .table-wrapper.invoices-history td.due-date,
.portal-history-shell .table-wrapper.invoices-history td.id,
.portal-history-shell .table-wrapper.invoices-history td.customer-po,
.portal-history-shell .table-wrapper.invoices-history td.balance {
    white-space: nowrap;
}

/* Action column hugs the View button — same shrink-to-content approach as the
   Make Payment invoice list (1% colgroup width + a nowrap, centered cell). */
.portal-history-shell .table-wrapper.orders-history td.actions,
.portal-history-shell .table-wrapper.invoices-history td.actions {
    white-space: nowrap;
    text-align: center;
}

/* Long free-text cells (Type, Customer PO, Ship To) truncate to one line with an
   ellipsis at their column width and expose the full value via the native title
   tooltip, so a long value (e.g. "Return for Exchange") can't spill over the next
   column. The table is table-layout:fixed, so max-width:100% resolves to the
   column width. Scoped to the table view; the stacked mobile cards show it full. */
@media (min-width: 768px) {
    .portal-history-shell td.type .hist-trunc,
    .portal-history-shell td.customer-po .hist-trunc,
    .portal-history-shell td.shipping .hist-trunc {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Select-checkbox column: tight gutter, centered checkbox. */
.portal-history-shell .table-wrapper.invoices-history td.select {
    text-align: center;
}
.portal-history-shell .table-wrapper.invoices-history td.select input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* Checkbox column "label" — credit-card icon sits above the
   checkbox on each eligible row, matching the per-row label
   convention the other columns use ("Invoice #" / "Customer PO #" /
   etc. as `data-th` pseudo-elements). The icon mirrors the one on the
   bulk Pay Now button so the dealer reads "this column is the pay
   selector" without needing a text label or table header.
   Block-level so it stacks on its own line, then the checkbox
   sits below it inside the same cell. */
.portal-history-shell .table-wrapper.invoices-history td.select .invoice-pay-icon {
    display: block;
    font-size: 16px;
    color: #111;
    margin-bottom: 4px;
    line-height: 1;
}

/* Whole-row click affordance for eligible (payable) rows. The bare
   checkbox is an 18-px target; turning the row into the click target
   restores the discoverable click area that the per-row "Pay Now" button
   used to provide. Pointer cursor + warm hover tint + selected accent
   together give the dealer immediate feedback that the row is
   interactive — ineligible rows (closed, paid, credit memos) keep the
   default cursor so they read as non-actionable. */
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"] {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"]:hover {
    background-color: #fff9e6;
}
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"].selected {
    background-color: #fff3c4;
    box-shadow: inset 3px 0 0 0 #ffcb05;
}
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"].selected:hover {
    background-color: #ffefb3;
}
/* Keep the View link / checkbox click targets visually flagged as
   distinct interactive controls even inside a clickable row. */
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"] a,
.portal-history-shell .table-wrapper.invoices-history tbody tr[data-pay="1"] input[type="checkbox"] {
    position: relative;
    z-index: 1;
}

/* PP Disc. subtext sits below the Total on its own line. */
.portal-history-shell .table-wrapper.invoices-history td.total .pp-disc {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 2px;
}

/* ============================================
   Order View page

   - Two AJAX fragments: body (info + addresses + items + payments)
     and shipments. Both fire in parallel from skeleton render.
   - Skeleton blocks reserve approximate space for each section so
     the surrounding chrome (Refresh, Back) doesn't reflow when the
     fragments land.

   Several rules below are shared with the Invoice View shell — both
   pages use the same skeleton-pair pattern and the same Refresh-button
   layout. Where the selector matches both .order-view-shell and
   .invoice-view-shell, the rule applies to either page.
   ============================================ */

.order-view-shell .order-view-skeleton,
.invoice-view-shell .invoice-view-skeleton {
    /* Hold the page footprint while AJAX is in flight. The body
       skeleton in particular is taller than typical loaded content
       on short orders, but the alternative (no reservation) would
       leave the dealer staring at the Refresh button alone for 5 s. */
    min-height: 120px;
}

/* Soft transition on swap — same `.fade-in` keyframe used by the
   other portal loaders. */
.order-view-shell .order-view-info-fragment,
.order-view-shell .order-view-items-fragment,
.invoice-view-shell .invoice-view-info-fragment,
.invoice-view-shell .invoice-view-items-fragment {
    animation: fadeIn 0.4s ease-in;
}

/* Refresh button sits next to the "Order Information" / "Invoice
   Information" H2 inside the panel header. The theme's default
   `.action` button is ~43 px tall (`line-height: @height-primary__base`,
   `padding: 0 20 px`, `font-size: 1.4 rem`) which dwarfs the H2 and
   pushes the panel header row 15+ px taller than the other section
   headers. Trim it so the header row height matches the other
   sections. Applies to both shells. */
.order-view-shell .order-view-buttons .action,
.invoice-view-shell .order-view-buttons .action {
    padding: 0 14px;
    line-height: 21px;
    font-size: 1.2rem !important;
}
.order-view-shell .order-view-buttons .action button,
.invoice-view-shell .order-view-buttons .action button {
    padding: 0;
    line-height: inherit;
    font-size: inherit !important;
    background: transparent !important;
    border: 0;
    color: inherit !important;
}

/* Order-info pair skeleton rows — measured pair rows in the LOADED state
   are 21 px tall (one line of text + the default Bootstrap grid gutter
   margin). Match exactly so the .order-info-table panel doesn't grow
   on AJAX swap. No `margin-bottom` either — the loaded rows don't have
   an inline margin, so adding one to the skeleton was inflating the
   panel by 8 px × 8 rows = 64 px. Applies to both shells. */
.order-view-shell .order-info-skel-pair,
.invoice-view-shell .order-info-skel-pair {
    height: 21px;
    margin-bottom: 0;
}

/* Drop the default user-agent `margin-bottom: 1em` on <address> inside
   the billing/shipping panels — produces ~16 px of dead space below the
   phone number that pushes the Items Ordered section down. */
.order-view-shell .box-content address {
    margin-bottom: 0;
}

/* Skeleton address lines — mirror the loaded `<address>` markup
   (`<span>text<br></span>` pattern). Each pill is an inline-block of
   14 px height; the surrounding `.order-view-address-skel` enforces a
   21 px line-height so each `<br>` advances exactly one text-line.
   5 lines × 21 px = 105 px → matches the loaded address height for
   typical 5-line addresses (display name / line 1 / city, state,
   postcode / country / phone). Using inline-block + <br> avoids the
   adjacent-margin collapse that plagues display:block lines. */
.order-view-shell .order-view-address-skel {
    line-height: 21px;
}
.order-view-shell .order-view-address-skel .skeleton-address-line {
    display: inline-block;
    vertical-align: middle;
    height: 14px;
    border-radius: 999px;
}

/* -----------------------------------------------------------------
   Orders History — table override layer

   The trade theme's `.table-wrapper` rules (`_extend.less:614-700`)
   give us the cards-style row layout for free, but a few defaults
   need page-scoped overrides:

   - `.table-wrapper` gets a 1 px bottom border that produced a faint
     line above the dashed Show-more divider; we don't want a divider
     drawn by the wrapper because the dashed line is the divider.
   - Cells default to `vertical-align: top`, which top-aligns short
     values (Order #, Date, Status pill, View button) against the
     tallest cell in the row when a long Ship To wraps. We want middle.
   - Status pill ships with `padding: 1px 12px`, which is roomy; we
     trim to `2px 8px` to keep pills tight inside the 9-px-padded td.
   - One-liner enforcement on the cells: the dashboard's Recent Orders
     keeps "Remy Donraadt / MonkeyFist.com.au" on a single line. We
     apply `white-space: nowrap` so the orders history matches that
     behaviour at desktop widths. Magento's responsive `data-th`
     cards-mode at < 640 px re-enables wrapping for mobile.
   ----------------------------------------------------------------- */

.orders-history-shell .table-wrapper.orders-history {
    border-bottom: 0;
    margin-bottom: 0;
}

/* Pin columns via `table-layout: fixed` + the `<colgroup>` in the template.
   The default `table-layout: auto` re-balances columns based on cell content,
   which produces a different column layout between skeleton (shimmer pills)
   and loaded (real text + .Cr/.De pills). With fixed layout, the columns
   stay put regardless of cell content — zero shift on AJAX swap. */
.orders-history-shell .table-wrapper.orders-history table {
    table-layout: fixed;
}

.orders-history-shell .table-wrapper.orders-history table tbody > tr > td {
    vertical-align: middle;
    white-space: nowrap;
}

/* Only Customer PO and Ship To carry arbitrary-length content (POs vary
   by dealer; shipping names can include both company + contact), so
   they get the ellipsis-on-overflow treatment. All other columns have
   predictable bounded widths (Order #, Date, Order Total, Status pill,
   View button) and show their full value without a "…" indicator. */
.orders-history-shell .table-wrapper.orders-history table tbody > tr > td.customer-po,
.orders-history-shell .table-wrapper.orders-history table tbody > tr > td.shipping {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pill — moderate padding for legibility without bloating row height.
   Theme default at `_extend.less:658` is `1px 12px`; we trim the horizontal
   axis to keep pills tight inside the narrower 9-px-padded td. */
.orders-history-shell .table-wrapper.orders-history table tbody > tr > td.status span {
    padding: 2px 8px;
}

/* Status skeleton placeholder — mirrors the loaded `.status span` which is
   `display: flex` and therefore stretches to fill the cell width. Use
   `display: block; width: 100%` to get the same stretched-pill appearance
   so AJAX swap doesn't visibly expand the pill from a narrow shimmer to
   a full-width coloured pill. Border is the cell's `1px solid` already
   provided by the theme; we just shimmer the inside. */
.orders-history-shell .table-wrapper.orders-history .orders-skeleton-status-pill {
    display: block;
    width: 100%;
    border-radius: 999px;
}

/* Action button — keep the trade theme's default button styling
   (`_extend.less:484`: `padding: 0 20px; line-height: @height-primary__base`)
   so View matches the buttons on Create Order and the rest of the
   portal. No padding override here; the single button shouldn't look
   different from its siblings elsewhere. */

/* On mobile (Magento responsive cards-mode kicks in around 640 px) the
   cells stack vertically — re-enable wrapping so long shipping names
   don't force horizontal scroll. */
@media (max-width: 640px) {
    .orders-history-shell .table-wrapper.orders-history table tbody > tr > td {
        white-space: normal;
    }
}

/* ============================================================
   History lists (Orders + Invoices) — mobile record cards (<= 639px)
   The generic stacked reflow renders each field as its own bordered box
   (8–10 per record), so one record fills the screen and nothing lines up.
   Re-cast each row as ONE card with aligned label/value rows: a fixed
   label column on the left (absolute, so values with sub-lines like
   "PP Disc." stack cleanly), values starting at a common x. Fewer
   borders + tighter rows => more records per screen.
   ============================================================ */
@media (max-width: 639px) {
    /* `.data.table` in the selectors out-specifies Magento core's responsive
       rule `.table:not(.cart):not(.totals):not(.table-comparison) > tbody >
       tr > td`, which otherwise sets the cell padding + label float. */

    /* One card per record. */
    .portal-history-shell .table-wrapper.orders-history .data.table tbody > tr,
    .portal-history-shell .table-wrapper.invoices-history .data.table tbody > tr {
        display: block;
        border: 1px solid #ccc;
        border-radius: var(--card-radius, 16px);
        background: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
        padding: 6px 14px;
        margin-bottom: 12px;
    }

    /* Each field = a label/value row; fixed label column via an absolute label
       so the value block (which may carry a sub-line, e.g. "PP Disc.") aligns
       at one x. */
    .portal-history-shell .table-wrapper.orders-history .data.table tbody > tr > td,
    .portal-history-shell .table-wrapper.invoices-history .data.table tbody > tr > td {
        display: block;
        position: relative;
        border: 0;
        padding: 4px 0 4px 120px;
        min-height: 0;
        text-align: left;
        white-space: normal;
        font-weight: bold;
    }
    /* Style every label uniformly (status/actions cells are .no-title, so their
       label comes from Magento core, not the theme's :not(.no-title) rule). */
    .portal-history-shell .table-wrapper.orders-history .data.table tbody > tr > td::before,
    .portal-history-shell .table-wrapper.invoices-history .data.table tbody > tr > td::before {
        content: attr(data-th);
        position: absolute;
        left: 0;
        top: 4px;
        width: 112px;
        margin: 0;
        padding: 0;
        float: none;
        text-align: left;
        color: #6b6b6b;
        font-weight: 400;
        font-size: 1.2rem;
    }

    /* Bulk-select checkbox is a desktop power feature; its empty cell is just
       noise in the stacked card, so hide it on phones (Invoices only). */
    .portal-history-shell .table-wrapper.invoices-history .data.table tbody > tr > td.select {
        display: none;
    }

    /* Status pill hugs its content in the value column (not full-width). */
    .portal-history-shell .table-wrapper.orders-history .data.table tbody > tr > td.status span,
    .portal-history-shell .table-wrapper.invoices-history .data.table tbody > tr > td.status span {
        display: inline-flex;
        width: auto;
    }
}

/* ---------------------------------------------------------------------
   Shared portal empty-state card
   ---------------------------------------------------------------------
   One themed "nothing here" card reused wherever a section resolves to no
   data (no invoices / no credits to apply / no orders / no payment needed).
   Sits on the theme's white rounded .block-card surface; centred icon +
   headline + subtext, with an optional CTA. Replaces the old bare Magento
   `.message.info.empty` text and the payment sections that used to just
   vanish after their skeleton. */
.portal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}
.portal-empty-state__icon {
    font-size: 40px !important;
    line-height: 1;
    color: #c7ccd1;
    margin-bottom: 14px;
}
.portal-empty-state__title {
    font-size: 1.7rem;
    font-weight: 600;
    color: #1f2329;
    margin: 0 0 6px;
}
.portal-empty-state__text {
    font-size: 1.3rem;
    color: #6b7280;
    margin: 0;
    max-width: 420px;
}
.portal-empty-state__cta {
    margin-top: 18px;
}

/* Incoming Stock page — ETA chip + qty alignment. Colours come from the
   global :root status tokens so the page reads as part of the theme. */

/* The reused card-table hides <thead> and shows each cell's data-th label;
   long unbroken values (12-digit barcode, hyphenated SKU) must wrap inside
   their cell instead of bleeding into the neighbour. table-layout:fixed makes
   the colgroup px widths exact (constant columns); the two variable columns,
   Customer PO # and SKU, flex and share the remaining width. */
.incoming-stock-shell .table-wrapper table { table-layout: fixed; }
.incoming-stock-shell .table-wrapper td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.incoming-stock-shell .qty,
.incoming-stock-shell .ordered-qty {
    text-align: center;
}
.incoming-stock-shell .order-date,
.incoming-stock-shell .ship-on {
    white-space: nowrap;
}

/* Download CSV — standard black pill (.btn-custom-primary handles bg/shape/colour).
   Positioned like the invoices bulk Pay bar: absolutely placed on the counter row
   (desktop) so it overhangs the 22px row without pushing the table, and it keeps full
   size when the filter group is pinned (the group sits at z-index 60 with an opaque
   button, so the overhang renders above the scrolling rows). */
.incoming-stock-shell .orders-history-counter { display: flex; align-items: center; position: relative; }
.incoming-stock-csv-btn { margin-left: auto; white-space: nowrap; }
.incoming-stock-csv-btn i { margin-right: 6px; }

@media (min-width: 768px) {
    .incoming-stock-csv-btn {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
    }
}
@media (max-width: 767.98px) {
    .incoming-stock-shell .orders-history-counter { flex-direction: column; align-items: stretch; }
    .incoming-stock-csv-btn { margin: 8px 0 0; align-self: flex-end; }
}
.incoming-stock-shell .eta {
    white-space: nowrap;
}
.incoming-stock-shell .eta-pill {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.incoming-stock-shell .eta-pill.eta--soon      { color: var(--status-ok); }       /* arriving ≤ 6 weeks */
.incoming-stock-shell .eta-pill.eta--scheduled { color: var(--status-warning); }  /* later / date TBC */
.incoming-stock-shell .eta-pill.eta--none      { color: var(--status-neutral); opacity: .75; }

/* Back-link affordance (`.incoming-stock-back` here, `.portal-back-link` reusable)
   lives in the global theme (_extend.less) so pages that don't load this file
   (e.g. the Magento sales order view) get it too. */

/* Head row: back link opposite the eyebrow on one line, but it wraps to its own
   right-aligned line when the two no longer fit (narrow phones). The eyebrow stays
   intact (nowrap) so the back link — not the title — is what drops. */
.incoming-stock-head { flex-wrap: wrap; row-gap: 6px; }
.incoming-stock-head .section-eyebrow { white-space: nowrap; }
.incoming-stock-head .incoming-stock-back { margin-left: auto; }

/* Footer: Show more centred, the back-link copy right-aligned. The 1fr/auto/1fr
   grid page-centres the button regardless of the back link, and keeps the back
   link at the right whether or not Show more is visible (it toggles to none). */
.incoming-stock-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    margin: 15px 0;
    padding: 20px 0;
    border-top: 2px dashed #d1d1d1;
}
.incoming-stock-footer .orders-show-more-wrapper {
    grid-column: 2;
    justify-self: center;
    margin: 0;
    padding: 0;
    border-top: 0; /* the footer owns the separator now — avoid doubling it */
}
.incoming-stock-footer .incoming-stock-back {
    grid-column: 3;
    justify-self: end;
}
/* Stack the footer once the table switches to cards (same breakpoint): Show more
   centred on its own line, back link right-aligned below — the 1fr/auto/1fr row
   would otherwise collide the button and the link once the footer is narrow. */
@media (max-width: 767.98px) {
    .incoming-stock-footer { grid-template-columns: 1fr; row-gap: 14px; }
    .incoming-stock-footer .orders-show-more-wrapper,
    .incoming-stock-footer .incoming-stock-back { grid-column: 1; }
}

/* Order # cell uses the shared .portal-open-link (customer-account-tables.css). */

/* Order History: the always-visible Order Availability button (black pill) sits
   on the sub-description row (opposite the sub text), not the eyebrow title —
   reads as a page action. Wraps to its own line on narrow widths. */
.orders-history-subrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    row-gap: 8px;
    margin-top: 6px;
}
.orders-history-subrow .portal-page-intro__sub { margin: 0; }
.orders-history-subrow .orders-history-availability-btn { flex: 0 0 auto; }
/* Order View: the shortcut sits opposite the "Items Ordered" eyebrow (server-side
   in the items fragment when the order has open items). Wraps to its own
   right-aligned line on narrow widths; inner gap matches the pulse badge. */
.order-view-items-head { flex-wrap: wrap; row-gap: 8px; }
.order-view-items-head .portal-backorder-shortcut { gap: 8px; margin-left: auto; }
/* The `.order-info-container` theme rule sets margin-top:28px on the row AND — because a
   flex row doesn't collapse it — the inner eyebrow too, doubling the gap above the section.
   Restore the eyebrow-row's intended behaviour (inner eyebrow margin 0) so only the row's
   own 28px spaces it, matching the gap between the other order-view sections. (Container
   prefix needed to out-specify that theme rule.) */
.order-info-container .section-eyebrow-row .section-eyebrow { margin-top: 0; }
/* Top-align THIS row so the eyebrow text gap stays exactly the row's 28px regardless of the
   taller pulse badge — otherwise centering drops the text ~6px and, since the skeleton has
   no badge, the gap would shift on the AJAX swap. (Beats the theme's align-items:center.) */
.order-info-container .order-view-items-head { align-items: flex-start; }