/* a workflow screen taller than the space it has (Refuse Goods with five reasons on a 640 px high TC21) scrolls inside the card instead of being clipped by it */
.workflow-host {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior-y: contain;
}
.workflow-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /*  border-radius: var(--wm-radius);*/
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--wm-workflow-colour), black 15%);
}

.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--wm-workflow-colour);
    color: var(--wm-workflow-ink, var(--bs-white));
}

.workflow-card-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.assigned-user {
    font-size: 1rem;
    font-weight: 600;
}

.workflow-card-header-content {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.workflow-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: .35rem;
    /* off-white, not a tint of the area colour: the header and the border already say which job type this is (owner, 12 October 2026) */
    background: var(--bs-tertiary-bg);
}

.workflow-card-item-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    position: relative; /* containing block for the fade overlays */
    overscroll-behavior-y: contain;
}

.workflow-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
}

.workflow-detail {
    display: contents;
}

.workflow-detail-label {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: right;
    margin-left: 1rem;
    align-self: center;
}

.workflow-detail-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

    .workflow-detail-value .text-muted {
        font-style: italic;
        opacity: 0.75;
    }

.workflow-card-actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}

.item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    color: black;
    background: var(--bs-secondary-bg);
    background: white;
    font-weight: 600;
}

.pick-item-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .pick-item-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background: black;
    }

        .pick-item-table thead tr,
        .pick-item-table tbody tr {
            display: grid;
            grid-template-columns: 2rem minmax(0, 1fr) auto;
        }

    .pick-item-table th,
    .pick-item-table td {
        padding: .5rem;
    }

    .pick-item-table th {
        background: black;
        color: white;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--wm-workflow-colour), black 85%);
    }

.barcode {
    font-size: 4rem;
    font-weight: 600;
}

.part-number {
    font-size: 1.5rem;
    font-weight: 600;
}

.part-description {
    font-size: 1.25rem;
    font-weight: 600;
}

.rotate-prompt {
    display: none;
}

.warehouse-location {
    font-size: 4rem;
    font-weight: 600;
}

/* Other Location (put away): the suggested location and the scan hint share a 640 px high screen with two buttons */
/* the suggested location on one line under the scan prompt (it was a 3rem block with a "Use" button: owner, 13 October 2026) */
.change-location-suggested {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.change-location-scan {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
}

@media (orientation: landscape) and (max-height: 360px) {
    .pick-item-table {
        display: none;
    }

    .rotate-prompt {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: .75rem;
        padding: 1rem 2rem;
        text-align: left;
        color: var(--bs-secondary-color, #6c757d);
    }

        .rotate-prompt i {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .rotate-prompt p {
            margin: 0;
        }
}
/* the search results of a job area: the list and the end of it (infinite scroll) scroll TOGETHER inside the card, so the sentinel at the end of the list is what scrolls into view.
   The stub table has its own scrolling box (max-height 100vh - 250px) for the other screens; here the box around it does the scrolling. */
.search-results-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

    .search-results-scroll div[class$="-job-table-container"] {
        max-height: none;
    }