/* Inventory page - B60 OS. Tokens only (--ds-*). */

.inventory-page {
    padding: 0;
}

.inventory-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ds-space-4);
    margin-block-end: var(--ds-space-4);
}

.inventory-stat-grid .ds-stat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-3);
}

.inventory-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
    min-height: 40px;
}

.inventory-toolbar .page-search {
    flex: 1 1 220px;
    min-width: 180px;
    position: relative;
}

.inventory-toolbar .page-search svg {
    position: absolute;
    inset-inline-start: var(--ds-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ds-text-tertiary);
    pointer-events: none;
}

.inventory-toolbar .page-search .ds-input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding-inline-start: calc(var(--ds-space-3) + 20px);
}

.inventory-toolbar .ds-select,
.inventory-toolbar .ds-btn {
    width: auto;
    min-height: 40px;
    height: 40px;
    min-width: 140px;
    flex: 0 1 auto;
}

.inventory-toolbar .ds-btn {
    min-width: 0;
}

@media (max-width: 900px) {
    .inventory-toolbar .ds-select,
    .inventory-toolbar .ds-btn,
    .inventory-toolbar .page-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

.inventory-toolbar .ds-select,
.inventory-toolbar .ds-btn {
    min-height: 44px;
}

.inventory-thumb-well {
    width: 40px;
    height: 40px;
    margin-inline: auto;
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    box-shadow: inset 0 0 0 1px var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.inventory-thumb-well img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inventory-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-secondary);
}

.inventory-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

/* The wrap scrolls, and the column headings used to scroll out of it with the
   rows. Stock Overview lists 48 products in about 180px on the till, so by the
   fifth row there is nothing on screen saying which number is stock, which is
   unit cost and which is value -- three columns of bare figures. Movement
   History is worse, being all numbers and dates.

   A background is not decoration here: without one the rows show straight
   through a sticky header. */
.inventory-table-wrap .ds-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ds-surface-alt);
}

.inventory-table-wrap .ds-table tbody tr {
    height: 56px;
}

.inventory-table-wrap .ds-table {
    width: 100%;
    margin: 0;
}

.inventory-table-wrap .ds-table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.inventory-table-wrap .ds-table tr.is-low td:first-child {
    box-shadow: inset 3px 0 0 var(--ds-warning);
}

.inventory-table-wrap .ds-table tr.is-out td:first-child {
    box-shadow: inset 3px 0 0 var(--ds-danger);
}

.inventory-table-wrap .ds-table tr.is-low td,
.inventory-table-wrap .ds-table tr.is-out td {
    background: transparent;
}

.inventory-stock-qty {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
}

.inventory-stock-qty.is-low {
    color: var(--ds-warning);
}

.inventory-stock-qty.is-out {
    color: var(--ds-danger);
}

.inventory-stock-qty.is-ok {
    color: var(--ds-success);
}

.inventory-receive-layout {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: var(--ds-space-6);
    align-items: start;
}

@media (max-width: 960px) {
    .inventory-receive-layout {
        grid-template-columns: 1fr;
    }
}

.inventory-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ds-space-2);
    max-height: 60vh;
    overflow-y: auto;
}

.inventory-picker-card {
    border: 2px solid var(--ds-border);
    cursor: pointer;
    text-align: start;
    padding: var(--ds-space-2);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-md);
    transition: border-color var(--ds-motion-hover) var(--ds-ease-standard);
}

.inventory-picker-card.is-in-cart {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
}

.inventory-receive-sidebar {
    position: sticky;
    top: var(--ds-space-4);
}

.inventory-mode-toggle {
    display: flex;
    gap: var(--ds-space-2);
    margin-block-end: var(--ds-space-4);
    padding: 3px;
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
}

.inventory-mode-toggle .ds-btn {
    flex: 1;
}

.inventory-receive-totals {
    display: flex;
    justify-content: space-between;
    padding: var(--ds-space-3);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
}

.inventory-receive-line {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2);
    border-block-end: 1px solid var(--ds-border);
    align-items: center;
}

.inventory-adjust-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-4);
    text-align: center;
    padding: var(--ds-space-4);
    background: var(--ds-bg-inset);
    border-radius: var(--ds-radius-md);
}

.inventory-adjust-stats-value {
    font-size: var(--ds-text-2xl);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
}

.inventory-history-filters {
    margin-block-end: var(--ds-space-4);
}

.inventory-cat-chips {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    margin-block-end: var(--ds-space-4);
}

.inventory-info-banner {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    background: var(--ds-bg-inset);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    margin-block-end: var(--ds-space-4);
}