.article-orders-grid-wrapper .article-orders-grid .rz-column-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 500;
}


.article-orders-grid-wrapper .article-orders-grid,
.article-orders-grid-wrapper .article-orders-grid .rz-data-grid,
.article-orders-grid-wrapper .article-orders-grid .rz-datatable,
.article-orders-grid-wrapper .article-orders-grid .rz-datatable-scrollable-header,
.article-orders-grid-wrapper .article-orders-grid .rz-datatable-tablewrapper,
.article-orders-grid-wrapper .article-orders-grid .rz-data-grid-data,
.article-orders-grid-wrapper .article-orders-grid .rz-grid-table {
    background: var(--body-bg) !important;
    border: none !important;
    box-shadow: none !important;
}

.article-orders-grid-wrapper .article-orders-grid .rz-grid-table thead,
.article-orders-grid-wrapper .article-orders-grid .rz-grid-table thead tr,
.article-orders-grid-wrapper .article-orders-grid .rz-grid-table thead th {
    background: var(--body-bg) !important;
    border: none !important;
    box-shadow: none !important;
}

.article-orders-grid-wrapper .article-orders-grid table {
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

.article-orders-grid-wrapper .article-orders-grid .rz-cell-data,
.article-orders-grid-wrapper .article-orders-grid .rz-column-title-content {
    color: var(--rz-text-contrast-color);
}

.article-orders-grid-wrapper .article-orders-grid .rz-grid-table td {
    background: var(--card-bg);
    border: none;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.article-orders-grid-wrapper .article-orders-grid .rz-grid-table tr.rz-data-row > td,
.article-orders-grid-wrapper .article-orders-grid .rz-grid-table tr.rz-data-row.rz-datatable-even > td,
.article-orders-grid-wrapper .article-orders-grid .rz-grid-table tr.rz-data-row.rz-datatable-odd > td {
    background: var(--card-bg) !important;
}

.article-orders-grid-wrapper .article-orders-grid .rz-grid-table td:first-child {
    border-top-left-radius: 0.45rem;
    border-bottom-left-radius: 0.45rem;
    padding-left: 0.9rem;
}

.article-orders-grid-wrapper .article-orders-grid .rz-grid-table td:last-child {
    border-top-right-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
}

.article-orders-grid-wrapper .product-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.article-orders-grid-wrapper .status-dot {
    width: 0.95rem;
    min-width: 0.95rem;
    max-width: 0.95rem;
    height: 0.95rem;
    min-height: 0.95rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.article-orders-grid-wrapper .status-dot-ordered { background: #FFBD2E; }
.article-orders-grid-wrapper .status-dot-invoiced { background: #27AE60; }
.article-orders-grid-wrapper .status-dot-remaining { background: #E66A8A; }
.article-orders-grid-wrapper .status-dot-attested { background: #4D86C6; }
.article-orders-grid-wrapper .status-dot-default { background: #999; }

.article-orders-grid-wrapper .secondary-text {
    color: rgba(255, 255, 255, 0.9);
}

.article-orders-grid-wrapper .missing-order-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.article-orders-grid-wrapper .missing-order-icon {
    color: #c14f68;
    font-size: 1.25rem;
}

.article-orders-grid-wrapper .article-orders-grid .edit-button .rzi,
.article-orders-grid-wrapper .article-orders-grid .duplicate-button .rzi {
    color: #d08a43;
}

.article-orders-grid-wrapper .article-orders-grid .rz-pager {
    background: transparent !important;
}

.status-segmented {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rz-base-500);
    border-radius: 999px;
    overflow: hidden;
    background: var(--rz-base-900);
}

    .status-segmented .status-segment-btn {
        border-radius: 0;
        border-right: 1px solid var(--rz-base-500);
        min-height: 2.1rem;
        padding: 0.25rem 0.8rem;
        color: var(--rz-text-contrast-color);
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        opacity: 0.8;
    }

        .status-segmented .status-segment-btn:last-child,
        .status-segmented .status-segment-btn-last {
            border-right: none;
        }

        /* Radzen tints a text button on :hover with
           .rz-button.rz-variant-text.rz-secondary:not(.rz-state-disabled):hover, which outranks a
           plain .status-segment-btn-active. On a desktop the pointer stays on the segment after a
           click, so that tint was the background the user saw appear - and it stayed put when the
           status was clicked off again, making the deselect look like it had done nothing. Both
           rules below match Radzen's specificity and come later in the cascade, so Radzen's tint
           is neutralised and the selected background wins over anything hover does. */
        .status-segmented .rz-button.status-segment-btn:not(.rz-state-disabled):hover {
            background-color: transparent;
            color: var(--rz-text-contrast-color);
        }

        /* A real pointer gets a light hint on hover. A touch screen does not: after a tap the
           browser leaves :hover on the tapped element until something else is tapped, so a tint
           here would sit there looking like a selection that refuses to clear - the same
           confusion this whole block exists to remove, just triggered by a finger. */
        @media (hover: hover) {
            .status-segmented .rz-button.status-segment-btn:not(.rz-state-disabled):hover {
                background-color: rgba(255, 255, 255, 0.06);
            }
        }

        .status-segmented .rz-button.status-segment-btn.status-segment-btn-active,
        .status-segmented .rz-button.status-segment-btn.status-segment-btn-active:not(.rz-state-disabled):hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: var(--rz-text-contrast-color);
            opacity: 1;
        }

/* The dot has to stay a circle wherever it sits. Radzen wraps a button's children in a
   .rz-button-box, which makes the dot a flex item, and rules reaching it through that
   wrapper outrank a bare .status-dot - a flex-grow from one of them is what stretched the
   dot into an ellipse. min/max width plus aspect-ratio cannot be undone by flex-grow or
   flex-shrink, so the shape holds whatever container the dot ends up in. */
.status-dot {
    width: 0.6rem;
    min-width: 0.6rem;
    max-width: 0.6rem;
    height: 0.6rem;
    min-height: 0.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.status-dot-ordered {
    background: #f4b14b;
}

.status-dot-invoiced {
    background: #52b788;
}

.status-dot-remaining {
    background: #e66a8a;
}

.status-dot-attested {
    background: #4d86c6;
}

.status-dot-own-stock {
    background: #9b59b6;
}

.status-dot-ready-for-attestation {
    background: #22d3ee;
}

.status-dot-default {
    background: #999;
}

/* Six segments cannot share one phone-width row: they shrink past their own labels, so the
   text runs over the dividers and out of the pill. Lay them out as a two-column grid
   instead - every status stays readable and nothing is hidden behind a scroll. */
@media (max-width: 768px) {
    .status-segmented {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 0.75rem;
    }

    .status-segmented .status-segment-btn {
        justify-content: flex-start;
        padding: 0.45rem 0.6rem;
        border-right: none;
        border-bottom: 1px solid var(--rz-base-500);
    }

    .status-segmented .status-segment-btn:nth-child(odd) {
        border-right: 1px solid var(--rz-base-500);
    }

    /* The last row - the dividers sit between segments, not around the pill. */
    .status-segmented .status-segment-btn:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Radzen keeps a button's label on one line; letting "Redo for attestering" wrap is
       what makes the cell narrow enough for two segments to share a row. */
    .status-segmented .status-segment-btn .rz-button-box {
        min-width: 0;
        white-space: normal;
        text-align: left;
        line-height: 1.15;
    }
}
/* Radzen puts a dialog's configured width straight into its inline style, and .rz-dialog has a
   max-height but no max-width - without this the order dialog's 64rem would hang off a phone. */
.rz-dialog.order-dialog-wide {
    max-width: 100vw;
}

.order-line-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order-line-head,
.order-line-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1.2fr 1fr 1.2fr 1.2fr auto;
    gap: 0.5rem;
}

.order-line-head {
    align-items: center;
}

/* Rows align to the top of the grid track (not center) so every input's top edge lines up across
   all seven columns even when one column grows taller because it is showing a validation message. */
.order-line-row {
    align-items: start;
}

/* Wraps an input plus its ValidationMessage so a rendered message stays inside the input's own
   grid column instead of becoming an extra grid item and shifting the row's seven-column alignment. */
.order-line-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.order-line-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Locked lines repeat the editable rows' seven columns explicitly, so the values line up under
   their headers on one line and cannot fall back to another rule's column count. */
.order-line-locked {
    grid-template-columns: 3fr 1fr 1.2fr 1fr 1.2fr 1.2fr auto;
    align-items: center;
    opacity: 0.6;
    padding: 0.25rem 0;
}

/* The per-field labels only carry the row while it is stacked - on one line the column headings
   above already name every field, and repeating them on every row would be noise. */
.order-line-label {
    display: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Read-only text sitting in a row of inputs, so it needs the inputs' own vertical centre rather
   than the row's top edge. justify-content does that here: the cell is a column flexbox. */
.order-line-total {
    justify-content: center;
    text-align: right;
    white-space: nowrap;
}

/* Below the dialog's own width the seven columns stop being readable, so the product gets a line
   of its own and the five numbers plus the delete button share the line under it. The dialog is
   capped at 64rem and never wider than the viewport, so the viewport width stands in for it. */
@media (max-width: 1100px) {
    .order-line-head { display: none; }
    .order-line-label { display: block; }

    /* Stacked, the amount reads as its own labelled field like the rest, not as a right-aligned
       column, so it goes back to the shared top alignment and the left edge. */
    .order-line-total {
        justify-content: start;
        text-align: left;
    }

    .order-line-row,
    .order-line-locked {
        grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
        row-gap: 0.35rem;
        padding-bottom: 0.5rem;
    }

    .order-line-row:not(:last-child),
    .order-line-locked:not(:last-child) {
        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    }

    /* The product is the first item in both the editable and the locked row, so it takes the whole
       first line and the numbers wrap onto the next one on their own. */
    .order-line-row > :first-child,
    .order-line-locked > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .order-line-row,
    .order-line-locked {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }
}

/* Order list (SalesArticleOrderListComponent). Own markup rather than RadzenAccordion: the
   accordion put the whole header inside its toggle button, which forced the order's edit button to
   be a button inside a button, and left the card's rounding split across two sibling elements. */
.order-card {
    background-color: var(--rz-accordion-item-background-color);
    border-radius: 0.45rem;
    overflow: hidden;
}

.order-card:not(:last-child) {
    margin-bottom: 0.35rem;
}

.order-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.75rem;
}

/* The disclosure itself. Transparent and unstyled so it reads as the card's header rather than as a
   control, but still a real button for keyboard and screen readers. */
.order-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.order-toggle-icon {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.order-toggle-icon.is-open {
    transform: rotate(180deg);
}

/* Two lines, not one wrapping row. The customer is the entry point and keeps its own line; the
   rest is metadata on a muted second line that may wrap without disturbing the line above. The
   total is pinned right so it forms a column the eye can scan down the list. */
.order-head-main {
    flex: 1;
    /* Without this a long project name pushes the total out of the header instead of ellipsing. */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.order-head-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.order-customer {
    font-weight: 500;
    white-space: nowrap;
}

.order-project {
    font-size: 0.85rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    opacity: 0.7;
}

.order-total {
    font-weight: 500;
    white-space: nowrap;
}

/* Wide screens: one row, laid out as a grid rather than a flex row. The point is the columns - two
   orders line up under each other, so the list can be scanned down a column instead of re-read per
   row. That is what the original flat header could not do: it wrapped, and nothing aligned.

   display: contents dissolves the two wrappers so their cells become columns of the button's grid.
   The button itself keeps its box - it is the disclosure, and contents on a <button> would take its
   semantics with it.

   1024px because the ten columns plus their gaps need roughly a thousand pixels before the text
   starts truncating; below that the two-line layout above is the better fit. */
@media (min-width: 1024px) {
    .order-toggle {
        display: grid;
        grid-template-columns:
            auto auto
            minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.4fr)
            minmax(0, 10rem) 6rem 6rem 2rem;
        align-items: center;
        gap: 0.75rem;
    }

    /* The total and the edit action sit outside the grid, in the flex row around it. The total's
       width therefore decides how much is left for the grid - and "202 kr" and "18 200 kr" are not
       the same width, so without a fixed width here every row resolves its fr columns against a
       different total and nothing lines up between rows. */
    .order-total {
        width: 8rem;
        text-align: right;
    }

    .order-head-main,
    .order-head-title,
    .order-head-meta {
        display: contents;
    }

    /* The metadata stays muted, but as columns rather than as a second line. */
    .order-head-meta > * {
        font-size: 0.78rem;
        opacity: 0.7;
    }

    .order-customer,
    .order-project,
    .order-supplier,
    .order-number,
    .order-count {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-customer {
        font-size: 1rem;
    }

    /* On one row the project is a column of its own, not a continuation of the customer. */
    .order-project {
        font-size: 0.85rem;
    }

    .order-date {
        white-space: nowrap;
    }

    /* The warning icon is sized for the two-line layout's own line. Left at 1.25rem it sets the
       line box for its row and makes that one order taller than its neighbours. */
    .order-head-meta .missing-order-icon {
        font-size: 1rem;
    }
}

/* The order's creator, as initials, at the end of the metadata line. Letter-spacing rather than a
   border: on a line that is already muted a pill would shout louder than the customer above it. */
.created-by-initials {
    letter-spacing: 0.08em;
}

.order-card .secondary-text {
    opacity: 0.7;
}

.order-card .missing-order-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.order-card .missing-order-icon {
    color: #c14f68;
    font-size: 1.25rem;
}

.order-body {
    padding: 0 0.75rem 0.75rem 3rem;
}

/* table-layout: fixed is what makes the widths below stick. Left on auto, the browser sizes every
   column to its own content, which bunches all five against the left edge and leaves the row's
   remaining width as a gap in the middle instead of spreading it across the columns. */
.order-line-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.order-line-table td {
    padding: 0.35rem 0.5rem;
}

/* The product name takes whatever the fixed columns leave, so it is the one that has to cope with
   being narrow. */
.line-product {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-quantity {
    width: 5rem;
}

.line-prices {
    width: 12rem;
}

/* Right-aligned so the amounts line up on their decimal point down the column rather than starting
   at a different place on every row. */
.line-total {
    width: 9rem;
    text-align: right;
    white-space: nowrap;
}

.line-action {
    width: 3.5rem;
    text-align: right;
}

.order-line-freight td {
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    opacity: 0.75;
}

/* Five columns stop fitting well before the card itself does, so the row becomes two lines: the
   product on its own, the numbers under it. Changing display drops the implicit table roles, which
   is why the markup states role="table"/"row"/"cell" outright. */
@media (max-width: 640px) {
    /* The body is indented to clear the disclosure arrow above it - room a phone does not have. */
    .order-body {
        padding-left: 0.75rem;
    }

    .order-line-table,
    .order-line-table tbody,
    .order-line-table td {
        display: block;
    }

    .order-line-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        column-gap: 0.5rem;
        padding: 0.35rem 0;
    }

    /* One separator between each pair of rows. A border-bottom on the rows above would draw a
       second line right against the freight row's own border-top, which reads as a double rule with
       a gap in it - so the border sits on the later row of each pair and freight gives its up. */
    .order-line-table tr + tr {
        border-top: 1px solid rgba(128, 128, 128, 0.2);
    }

    .order-line-freight td {
        border-top: none;
    }

    .order-line-table td {
        padding: 0.1rem 0;
    }

    .line-product {
        grid-column: 1 / -1;
        font-weight: 600;
    }

    /* The three widths above are column tracks the grid no longer uses, and keeping them would
       force each cell to a size the line has no room for. */
    .line-quantity,
    .line-prices,
    .line-total,
    .line-action {
        width: auto;
    }

    .line-quantity,
    .line-prices {
        font-size: 0.8rem;
        opacity: 0.75;
    }

    /* colspan means nothing once the cells are blocks in a grid, so the freight label takes the
       first three tracks explicitly and its amount stays beside it. */
    .order-line-freight .line-freight-label {
        grid-column: 1 / 3;
    }
}

/* Radzen paints the pager with the button background; the accordion items use their own. Point
   the pager at the item colour so it sits on the same ground as the orders above it - and give it
   the cards' gap and radius, or sharing their colour makes it read as part of the last one. */
/* No display here: Radzen lays the pager out with flex, and overriding that stacks the page
   buttons above the size picker. */
.order-pager {
    background-color: var(--rz-accordion-item-background-color);
    border-radius: 0.45rem;
    margin-top: 0.35rem;
}

/* Radzen gives the page buttons flex:1, so they claim the whole line and wrap the size picker
   below them. Keep both on one row - but only above Radzen's own 768px breakpoint, where it
   deliberately switches the pager to a stacked grid. */
@media (min-width: 769px) {
    .order-pager {
        flex-wrap: nowrap;
        /* Radzen spreads the three parts with space-between, which strands the size picker's
           label at the far edge. Keep them together instead. */
        justify-content: center;
        gap: 1rem;
    }

    .order-pager .rz-pager-pages {
        flex: 0 1 auto;
        justify-content: center;
    }
}